/* 북극 해빙 예보 — iGDSL(igdsl.github.io)의 디자인 토큰을 그대로 따른다.
   색·서체·간격은 연구실 사이트 assets/style.css 에서 가져왔다. */

:root{
  --navy:        #004d82;
  --navy-deep:   #003354;
  --navy-soft:   #3a7ba8;
  --navy-pale:   #e8f1f8;
  --navy-pale-2: #f4f8fc;

  --ink:      #13202b;
  --ink-soft: #3e5566;
  --ink-mute: #6b8296;

  --bg:       #ffffff;
  --bg-tint:  #f6f9fc;
  --line:     #dfe8f0;
  --line-str: #c3d5e4;

  --radius: 10px;
  --maxw:  1320px;
  --fs-body: 19px;
}

*{ box-sizing: border-box; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo',
               'Malgun Gothic', 'Noto Sans KR', sans-serif;
  font-size: var(--fs-body);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
}
a{ color: var(--navy); }
.wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

/* ---------------- 헤더 ----------------
   연구실 사이트(igdsl.github.io) assets/style.css 의 헤더와 같은 규격이다.
   한쪽을 고치면 다른 쪽도 같이 고친다.
*/
header.site{
  /* 배경·흐림 효과까지 연구실 사이트와 똑같이 둔다 — backdrop-filter 가 있고 없고에 따라
     글자 앤티앨리어싱이 달라져(합성 레이어 여부) 같은 글꼴·크기인데도 굵기가 달라 보인다. */
  background: rgba(255,255,255,0.93);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  min-height: 100px;
}
.headbar{
  max-width: var(--maxw); margin: 0 auto; padding: 16px 28px;
  display: flex; align-items: center; gap: 22px;
}
.brand{
  display: flex; align-items: center; gap: 13px;
  text-decoration: none; color: inherit; flex: 0 0 auto;
}
.brand img{ height: clamp(46px, 3.9vw, 58px) !important; width: auto; display: block; }
.brand .bt{ line-height: 1.25; }
.brand .bt b{
  display: block;
  font-size: clamp(19px, 1.95vw, 28px);
  font-weight: 800; letter-spacing: -0.015em; color: var(--navy-deep);
}
.brand .bt span{
  display: block;
  font-size: clamp(12.5px, 1.25vw, 18px);
  color: var(--ink-mute); letter-spacing: 0.01em;
}

/* 서비스 이름 — 연구실 브랜드와 세로선으로 구분 */
.sitetitle{
  flex: 0 0 auto;
  font-size: clamp(21px, 2.25vw, 32px);        /* 이 사이트의 이름이므로 연구실명보다 크게 */
  font-weight: 800; letter-spacing: -0.015em; color: var(--navy-deep);
  padding-left: 22px; border-left: 1px solid var(--line-str);
  white-space: nowrap;
}

/* 연구실 홈페이지로 돌아가는 버튼 (연구실 사이트 메뉴와 같은 알약 모양) */
nav.mainnav{ display: flex; margin-left: auto; }
nav.mainnav a{
  text-decoration: none; color: var(--ink-soft);
  font-size: 18px; font-weight: 600;
  padding: 9px 18px; border-radius: 100px; white-space: nowrap;
  border: 1px solid var(--line-str); background: #fff;
  transition: background .15s, color .15s, border-color .15s;
}
nav.mainnav a:hover{ background: var(--navy); border-color: var(--navy); color: #fff; }

@media (max-width: 1120px){
  .headbar{ padding: 12px 20px; gap: 14px; }
  .brand{ flex: 1 1 0; min-width: 0; }
  .brand .bt{ min-width: 0; }
  .brand .bt b, .brand .bt span{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wrap{ padding: 0 20px; }
}

@media (max-width: 760px){
  /* 좁은 화면에서는 로고 + 서비스 이름만 남긴다 */
  header.site{ min-height: 0; }
  .brand img{ height: 42px; }
  .brand .bt{ display: none; }
  .brand{ flex: 0 0 auto; }
  .sitetitle{ padding-left: 0; border-left: 0; font-size: 21px; }
  nav.mainnav a{ font-size: 16px; padding: 8px 14px; }
  nav.mainnav a .arrow, nav.mainnav a span{ display: none; }
}

@media (max-width: 560px){
  /* 더 좁아지면 줄바꿈을 허용해 가로 스크롤이 생기지 않게 한다 */
  .headbar{ flex-wrap: wrap; gap: 10px 12px; }
  .sitetitle{ font-size: 19px; white-space: normal; line-height: 1.25; }
  nav.mainnav{ margin-left: auto; }
  nav.mainnav a{ font-size: 15.5px; padding: 8px 13px; }
}

/* ---------------- 히어로 ---------------- */
.hero{
  background: linear-gradient(180deg, var(--navy-pale) 0%, var(--navy-pale-2) 60%, #fff 100%);
  border-bottom: 1px solid var(--line);
  padding: 50px 0 36px;
}
.hero h1{
  margin: 0 0 10px; font-size: 44px; line-height: 1.25;
  letter-spacing: -0.02em; font-weight: 800; color: var(--navy-deep);
}
.hero .sub{ margin: 0; max-width: none; color: var(--ink-soft); font-size: 24px; line-height: 1.6; }
/* ---------------- 본문 ---------------- */
.block{ padding: 34px 0 70px; }
.issuebar{ display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 30px; flex-wrap: wrap; }
.issuebar h2{ margin: 0 0 2px; font-size: 34px; font-weight: 800; letter-spacing: -0.02em; color: var(--navy-deep); }
.issuebar .meta{ margin: 0; color: var(--ink-soft); font-size: 22px; }
.pager{ display: flex; align-items: center; gap: 10px; }
.pager select{ font: inherit; font-size: 19px; font-weight: 700; color: var(--navy);
  border: 1px solid var(--line-str); border-radius: 100px; padding: 9px 18px; background: #fff; cursor: pointer; }
.pager .nav{ font: inherit; font-size: 17px; line-height: 1; cursor: pointer; width: 46px; height: 46px;
  border-radius: 100px; border: 1px solid var(--line-str); background: #fff; color: var(--navy-deep); }
.pager .nav:hover:not(:disabled){ background: var(--navy); border-color: var(--navy); color: #fff; }
.pager .nav:disabled{ opacity: .3; cursor: default; }
.fig{ margin: 24px 0 0; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 14px; }
.fig img{ display: block; width: 100%; height: auto; }
.fig figcaption .obs{ color: #0b63b5; }
.fig figcaption .clim{ color: #8a96a1; }
.fig figcaption{ margin-top: 12px; font-size: 19px; color: var(--ink-mute); }
.chartbox{ margin-top: 34px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 24px 26px 20px; }
.chartbox h2{ margin: 0 0 4px; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: var(--navy-deep); }
.chartbox .csub{ margin: 0 0 16px; font-size: 19px; color: var(--ink-mute); }
.sie{ position: relative; width: 100%; }
.sie svg{ display: block; overflow: visible; }
.sie text.ax{ font-size: 15.5px; fill: var(--ink-mute); font-family: inherit; font-variant-numeric: tabular-nums; }
.sie text.yr{ font-weight: 700; fill: var(--ink-soft); }
.sie .yl{ position: absolute; left: 0; top: 0; font-size: 13px; color: var(--ink-mute); }
.sie .tip{ position: absolute; display: none; pointer-events: none; z-index: 5; background: #fff;
  border: 1px solid var(--line-str); border-radius: 8px; box-shadow: 0 6px 18px rgba(19,32,43,.10);
  padding: 9px 13px; font-size: 17px; white-space: nowrap; line-height: 1.55; font-variant-numeric: tabular-nums; }
.sie .tip.on{ display: block; }
.sie .tip b{ display: block; color: var(--navy-deep); }
.sie .tip span{ display: block; }
.sie .tip .d{ width: 9px; height: 9px; border-radius: 100px; display: inline-block; margin-right: 7px; }
.sie .tip .df{ color: var(--ink-mute); }
.chartlegend{ display: flex; gap: 8px 22px; flex-wrap: wrap; margin-top: 14px; font-size: 18px; color: var(--ink-soft); }
.chartlegend .ck{ display: inline-flex; align-items: center; gap: 8px; }
.chartlegend .ln{ width: 26px; height: 3px; border-radius: 2px; display: inline-block; }
.chartlegend .ln.thick{ height: 5px; }
.chartlegend .ln.dash{ background: repeating-linear-gradient(90deg, #9aaab8 0 6px, transparent 6px 10px); }
.note{ font-size: 18px; color: var(--ink-mute); margin: 22px 0 0; }

/* ---------------- 푸터 ---------------- */
footer.site{ background: var(--navy-deep); color: #cfe0ec; padding: 44px 0 30px; font-size: 16.5px; }
footer.site a{ color: #cfe0ec; }
footer.site .foot-grid{ display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
footer.site .fmeta{ max-width: 48ch; color: #a9c4d8; }
footer.site img.flogo{ height: 44px; width: auto; filter: brightness(0) invert(1); opacity: .92; margin-bottom: 12px; }
footer.site .flinks{ display: flex; flex-direction: column; gap: 8px; }
footer.site .copyright{ margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.14); color: #8fb0c8; font-size: 15.5px; }


@media (max-width: 900px){
  :root{ --fs-body: 18px; }
  .wrap{ padding: 0 16px; }
  .headbar{ padding: 12px 16px; gap: 12px; }
  .hero{ padding: 36px 0 28px; }
  .hero h1{ font-size: 32px; }
  .hero .sub{ font-size: 20px; }
  .hero .sub br.wide{ display: none; }
  .issuebar .meta{ font-size: 19px; }
  .fig figcaption, .chartbox .csub{ font-size: 17px; }
  .issuebar h2{ font-size: 28px; }
  .chartbox{ padding: 18px 14px 14px; }
  .fig{ padding: 6px; }
}