/* ==========================================================================
   KCIEA 시안 v3
   레퍼런스: siteassist.com (밝은 바탕 · 큰 사진 · 좌측정렬 대형 헤드라인 · 사각 버튼)
   협회 색은 유지: 딥그린 #1B4F42 를 액센트로, 골드 #A8873C 를 보조로
   ========================================================================== */

:root {
  --bg: #ffffff;
  --bg-2: #f4f6f4;
  --bg-3: #ecefec;
  --ink: #101714;
  --ink-2: #3d4a45;
  --ink-3: #6c7a74;
  --line: #dfe4e0;
  --line-2: #eef1ef;

  --green: #1b4f42;
  --green-hi: #266958;
  --gold: #a8873c;
  --dark: #0d1a16;

  --sans: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --shell: 1280px;
  --r: 14px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.78;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--green); }

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 32px; }
section { padding: 110px 0; }
section.tight { padding: 72px 0; }
section.tint { background: var(--bg-2); }
section.dark { background: var(--dark); color: #f2f5f3; }
/* 거의 검정(#0d1a16)이 너무 진할 때 쓰는 딥그린 밴드.
   바탕이 밝아진 만큼 골드(#a8873c)가 2.7:1 까지 떨어지므로 밝은 골드로 올린다 */
section.dark.tone-green { background: var(--green); }
section.dark.tone-green .steps .no,
section.dark.tone-green .tile .no { color: #dcc07c; }
section.dark.tone-green .eyebrow::before { background: #dcc07c; }
section.dark.tone-green .steps { border-top-color: rgba(255, 255, 255, 0.24); }
section.dark.tone-green .steps > div { border-bottom-color: rgba(255, 255, 255, 0.24); }

/* ---------- 헤더 (전폭. 위에서는 투명, 스크롤하면 딥그린 고정) ---------- */

.site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 60; padding: 22px 0; }
.site-header.solid {
  position: sticky;
  padding: 12px 0;
  background: var(--green);
  /* 아래가 흰 바탕이라 테두리로는 경계가 안 보인다. 그림자로 띄운다 */
  box-shadow: 0 2px 22px rgba(16, 23, 20, 0.16);
}
.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
/* 좁은 화면에서 햄버거 버튼이 로고 아래로 밀려나던 문제.
   헤더는 열린 모바일 메뉴가 둘째 줄을 쓰기 때문에 flex-wrap:wrap 이 필요하다.
   그래서 wrap 을 끄는 대신 로고가 줄어들 수 있게 만든다.
   (min-width:0 이 없으면 flex 항목은 min-content 밑으로 안 줄어든다) */
.bar > .brand { min-width: 0; flex: 1 1 auto; }
.brand-mark { flex: none; }
.brand-text { min-width: 0; }
.brand-text strong, .brand-text small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar > .nav-toggle { flex: none; }

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand-mark {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border-radius: 7px;
  /* 딥그린 바 위에서 초록 뱃지는 묻힌다. 사진 위·딥그린 위 양쪽에서 뜨는 흰 뱃지로 */
  background: #fff;
  color: var(--green);
  font-size: 16px;
  font-weight: 700;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand-text strong { font-size: 17px; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.brand-text small { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.6); }

.nav { display: flex; gap: 6px; }
.nav a {
  padding: 9px 15px;
  font-family: var(--mono);
  font-size: 13.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  border-radius: 5px;
}
.nav a:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.nav a[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, 0.18); }

.nav-toggle {
  display: none; width: 42px; height: 42px; padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 6px;
  background: rgba(255, 255, 255, 0.08); cursor: pointer;
}
.nav-toggle span { display: block; width: 16px; height: 1.5px; margin: 4px auto; background: #fff; transition: transform .2s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ---------- 버튼 (사각) ---------- */

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 15px 26px;
  border: 1px solid transparent; border-radius: 6px;
  font-family: var(--mono); font-size: 13.5px; font-weight: 500;
  letter-spacing: 0.07em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background .18s, color .18s, border-color .18s;
}
.btn-solid { background: var(--green); color: #fff; }
.btn-solid:hover { background: var(--green-hi); }
.btn-line { border-color: var(--line); color: var(--ink); background: #fff; }
.btn-line:hover { border-color: var(--ink); }
.btn-ghost { border-color: rgba(255, 255, 255, 0.45); color: #fff; }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.14); }
.btn-sm { padding: 11px 18px; font-size: 12.5px; }

/* ---------- 섹션 헤더 (좌측정렬) ---------- */

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3);
}
.eyebrow::before { content: ""; width: 7px; height: 7px; background: var(--gold); }
.dark .eyebrow { color: rgba(255, 255, 255, 0.72); }
.hero .eyebrow, .page-head .eyebrow { color: rgba(255, 255, 255, 0.92); }

h1, h2, h3 { letter-spacing: -0.03em; }
.sec-head { max-width: 900px; margin: 0 0 56px; }
.sec-head h2 { font-size: clamp(30px, 4.2vw, 52px); font-weight: 700; line-height: 1.24; margin: 22px 0 0; }
.sec-head h2 sup { font-size: 0.42em; font-weight: 500; color: var(--ink-3); letter-spacing: 0; top: -1em; }
.sec-head p { margin: 20px 0 0; color: var(--ink-2); font-size: 18.5px; max-width: 760px; }
.dark .sec-head p { color: rgba(242, 245, 243, 0.76); }
.dark .sec-head h2 sup { color: rgba(242, 245, 243, 0.6); }

/* ---------- 히어로 (대형 사진) ---------- */

.hero { position: relative; min-height: 660px; display: flex; align-items: flex-end; color: #fff; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg picture { display: block; width: 100%; height: 100%; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  /* 밝은 사진 위에 흰 글씨를 올리므로 하단과 좌측을 함께 어둡게 눌러 대비를 확보한다 */
  background:
    radial-gradient(60% 50% at 44% 48%, rgba(8, 18, 15, 0.68) 0%, rgba(8, 18, 15, 0.56) 46%, rgba(8, 18, 15, 0.24) 78%, rgba(8, 18, 15, 0) 100%),
    linear-gradient(180deg, rgba(8, 18, 15, 0.30) 0%, rgba(8, 18, 15, 0.06) 34%, rgba(8, 18, 15, 0.14) 62%, rgba(8, 18, 15, 0.42) 100%),
    linear-gradient(90deg, rgba(8, 18, 15, 0.30) 0%, rgba(8, 18, 15, 0.04) 58%, rgba(8, 18, 15, 0) 82%);
}
.hero .shell { position: relative; z-index: 1; padding-bottom: 64px; padding-top: 160px; }
.hero h1 {
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
  margin: 24px 0 0;
  font-size: clamp(34px, 5.6vw, 74px);
  font-weight: 700;
  line-height: 1.14;
}
.hero .lead { margin: 26px 0 0; max-width: 640px; font-size: 19px; color: rgba(255, 255, 255, 0.86); }
.hero-foot {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap;
  margin-top: 40px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.3);
}
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-meta { font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.72); text-align: right; }

/* ---------- 큰 사진 카드 (텍스트 오버레이) ---------- */

.shot {
  position: relative; border-radius: var(--r); overflow: hidden;
  background: var(--bg-3);
  /* 어떤 화면 폭에서도 이미지가 화면 높이를 넘지 않게 하는 최후 방어선.
     비율보다 낮아지면 object-fit: cover 가 잘라낸다 */
  max-height: 72vh;
}
.shot > img { width: 100%; height: 100%; object-fit: cover; }
.shot.r21 { aspect-ratio: 21 / 9; }
.shot.r169 { aspect-ratio: 16 / 9; }
.shot.r43 { aspect-ratio: 4 / 3; }
.shot.r11 { aspect-ratio: 1 / 1; }
.shot.r45 { aspect-ratio: 4 / 5; }

.shot-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 34px 36px;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(8, 18, 15, 0.5) 0%, rgba(8, 18, 15, 0.05) 34%, rgba(8, 18, 15, 0) 100%),
    linear-gradient(90deg, rgba(8, 18, 15, 0.34) 0%, rgba(8, 18, 15, 0.04) 50%, rgba(8, 18, 15, 0) 76%);
}
.shot-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; position: relative; z-index: 1; }
.shot-icon { width: 60px; height: 60px; flex: none; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.5); }
.shot-icon svg { width: 28px; height: 28px; stroke: #fff; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.shot-head { display: flex; align-items: center; gap: 18px; }
.shot-top h3 { margin: 0; font-family: var(--mono); font-size: clamp(17px, 1.8vw, 24px); font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.32; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5); }
.shot-no { font-family: var(--mono); font-size: clamp(20px, 2.2vw, 30px); color: rgba(255, 255, 255, 0.9); }
/* 캡션 띠는 이미지 위에 얹지 않는다.
   글이 3D 오브젝트를 가리고, 좁은 화면에서는 이미지를 거의 다 덮어버렸다.
   이미지 바로 아래에 딱 붙는 딥그린 띠로 내리고, 라운드는 카드가 담당한다. */
.shot-card { position: relative; border-radius: var(--r); overflow: hidden; background: var(--green); }
.shot-card > .shot { border-radius: 0; }
.shot-bot {
  display: grid; grid-template-columns: minmax(190px, 260px) 1fr; gap: 4px 34px; align-items: start;
  padding: 26px 32px;
  background: var(--green); color: #fff;
}
.shot-bot strong { font-size: 19px; font-weight: 700; line-height: 1.45; }
.shot-bot p { margin: 0; font-size: 15.5px; color: rgba(255, 255, 255, 0.86); line-height: 1.75; }
@media (max-width: 900px) {
  .shot-bot { grid-template-columns: 1fr; gap: 10px; padding: 22px 22px; }
}

/* 사진 카드 아래 탭 행 */
/* 큰 카드 아래 - 항목마다 색이 달라 상태가 헷갈리던 4열 탭을 대체.
   나머지 영역은 문장으로 두고 화면 이동은 버튼 하나로 모은다 */
.shot-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding-top: 22px; border-top: 1px solid var(--line);
}
.shot-foot p { margin: 0; color: var(--ink-3); font-size: 16px; }
.dark .shot-foot { border-top-color: rgba(255, 255, 255, 0.18); }
.dark .shot-foot p { color: rgba(242, 245, 243, 0.68); }

/* ---------- 작은 사진 타일 ---------- */

.tiles { display: grid; gap: 20px; }
.t2 { grid-template-columns: repeat(2, 1fr); }
.t3 { grid-template-columns: repeat(3, 1fr); }
.t4 { grid-template-columns: repeat(4, 1fr); }

.tile { text-decoration: none; color: inherit; display: block; }
.tile .shot { margin-bottom: 18px; transition: transform .5s cubic-bezier(.22,.61,.36,1); }
.tile .shot > img { transition: transform .6s cubic-bezier(.22,.61,.36,1); }
.tile:hover .shot > img { transform: scale(1.05); }
.tile h3 { margin: 0; font-size: 19.5px; font-weight: 700; }
.tile p { margin: 8px 0 0; font-size: 15.5px; color: var(--ink-3); line-height: 1.7; }
.tile .no { display: block; font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.1em; color: var(--gold); margin-bottom: 8px; }
.dark .tile h3 { color: #f2f5f3; }
.dark .tile p { color: rgba(242, 245, 243, 0.68); }



/* ==========================================================================
   인포그래픽 (라이트 테마)
   3D 오브젝트는 장식이라 내용을 설명하지 못한다. 내용 자체를 그려야 하는 자리는 이걸 쓴다.
   가로 배치 → 좁은 화면에서 세로로 접힘. 화살표는 rotate(90deg) 로 방향만 바꾼다.
   ========================================================================== */

.ig { font-size: 16px; word-break: keep-all; }
.ig-lane { display: flex; align-items: stretch; gap: 14px; }

.ig-box {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  padding: 22px 20px;
  border: 1px solid var(--line); border-radius: 12px;
  background: #fff; text-align: center;
}
.ig-box b { font-size: 17px; font-weight: 700; }
.ig-box small { font-size: 14.5px; color: var(--ink-3); }
.ig-box.gold { border-color: rgba(168, 135, 60, 0.5); background: rgba(168, 135, 60, 0.08); }
.ig-box.gold small { color: var(--gold); }
.ig-box.muted { border-style: dashed; background: var(--bg-2); }

.ig-core {
  flex: 1.9 1 0; min-width: 0;
  padding: 24px 22px;
  border-radius: 14px;
  background: var(--green); color: #fff; text-align: center;
}
.ig-core > b { display: block; font-size: 18px; font-weight: 700; }
.ig-core > small { display: block; margin-top: 10px; font-size: 14.5px; color: rgba(255, 255, 255, 0.72); }
.ig-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin: 14px 0 0; padding: 0; list-style: none; }
.ig-chips li {
  padding: 6px 13px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.34); background: rgba(255, 255, 255, 0.1);
  font-size: 13.5px; color: #fff;
}

.ig-arrow { flex: 0 0 30px; align-self: center; display: grid; place-items: center; }
.ig-arrow i { display: block; width: 28px; height: 1.6px; background: var(--green); position: relative; }
.ig-arrow i::after {
  content: ""; position: absolute; right: -1px; top: -3.6px;
  border: 4.5px solid transparent; border-left-color: var(--green);
}
.ig-arrow.gold i { background: var(--gold); }
.ig-arrow.gold i::after { border-left-color: var(--gold); }
.ig-arrow.back i { transform: rotate(180deg); }

.dark .ig-box { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.17); }
.dark .ig-box small { color: rgba(242, 245, 243, 0.66); }
.dark .ig-box.gold { background: rgba(168, 135, 60, 0.16); border-color: rgba(207, 174, 98, 0.55); }
.dark .ig-box.gold small { color: #cfae62; }
.dark .ig-core { background: var(--green-hi); }
.dark .ig-arrow i { background: rgba(242, 245, 243, 0.8); }
.dark .ig-arrow i::after { border-left-color: rgba(242, 245, 243, 0.8); }

/* 양방향: 두 줄 흐름 */
.ig-two { display: grid; gap: 14px; }
.ig-row {
  display: grid; grid-template-columns: 1fr minmax(230px, 1.3fr) 1fr; gap: 18px; align-items: center;
  padding: 26px 24px; border: 1px solid var(--line); border-radius: 14px; background: #fff;
}
.ig-row.rev { background: var(--bg-2); }
.ig-end { text-align: center; }
.ig-end b { display: block; font-size: 17px; font-weight: 700; }
.ig-end small { font-size: 14px; color: var(--ink-3); }
.ig-mid { text-align: center; }
.ig-mid .ig-arrow { display: block; width: 100%; margin: 4px 0 2px; }
.ig-mid .ig-arrow i { width: 100%; }
.ig-mid span { display: block; font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--green); margin-bottom: 8px; }
.ig-row.rev .ig-mid span { color: var(--gold); }
.ig-mid p { margin: 8px 0 0; font-size: 14px; color: var(--ink-3); line-height: 1.6; }

@media (max-width: 900px) {
  .ig-lane { flex-direction: column; gap: 12px; }
  .ig-arrow { flex: 0 0 28px; }
  .ig-arrow i { transform: rotate(90deg); }
  .ig-arrow.back i { transform: rotate(270deg); }
  .ig-box, .ig-core { flex: 1 1 auto; }
  .ig-row { display: flex; flex-direction: column; gap: 12px; text-align: center; }
  .ig-row.rev .ig-end:first-child { order: 3; }
  .ig-row.rev .ig-mid { order: 2; }
  .ig-row.rev .ig-end:last-child { order: 1; }
  .ig-mid .ig-arrow { width: 28px; margin: 4px auto 2px; }
  .ig-mid .ig-arrow i { width: 28px; }
  .ig-arrow.back i { transform: rotate(90deg); }
}

/* ---------- 화면 이동 아이콘 ---------- */
/* 콘텐츠 안에서 다른 화면으로 넘어가는 링크는 전부 이 아이콘을 쓴다. 모양이 다르면 헷갈린다. */

.ico-out {
  width: 15px; height: 15px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .22s;
}
.btn .ico-out { margin-left: 2px; }
/* 본문 안 인라인 링크도 같은 아이콘을 쓴다 */
.inline-out { display: inline-flex; align-items: center; gap: 4px; color: var(--green); text-decoration: none; border-bottom: 1px solid rgba(27, 79, 66, 0.35); }
.inline-out:hover { border-bottom-color: var(--green); }
.inline-out .ico-out { width: 13px; height: 13px; }
.tile h3 { display: flex; align-items: center; gap: 8px; }
.tile h3 .ico-out { color: var(--ink-3); }
.dark .tile h3 .ico-out { color: rgba(242, 245, 243, 0.55); }
@media (hover: hover) {
  .btn:hover .ico-out, .tile:hover h3 .ico-out { transform: translate(2px, -2px); }
  .tile:hover h3 .ico-out { color: var(--green); }
  .dark .tile:hover h3 .ico-out { color: #fff; }
}

/* ---------- 텍스트 카드 (사진 없는 카드) ---------- */
/* 사진을 중복해서 쓰지 않기 위해, 사진이 꼭 필요하지 않은 자리는 텍스트 카드로 둔다 */

.pcards { display: grid; gap: 20px; }
.pcards.p2 { grid-template-columns: repeat(2, 1fr); }
.pcards.p3 { grid-template-columns: repeat(3, 1fr); }
.pcard {
  padding: 34px 32px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
}
.pcard .no { display: block; font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.1em; color: var(--gold); margin-bottom: 14px; }
.pcard h3 { margin: 0; font-size: 21px; font-weight: 700; }
.pcard p { margin: 12px 0 0; color: var(--ink-2); font-size: 16.5px; line-height: 1.78; }
.pcard ol { margin: 14px 0 0; padding-left: 20px; color: var(--ink-2); font-size: 16.5px; }
.pcard ol li + li { margin-top: 8px; }
.pcard.accent { border-color: var(--green); background: var(--bg-2); }
.dark .pcard { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.14); }
.dark .pcard h3 { color: #f2f5f3; }
.dark .pcard p, .dark .pcard ol { color: rgba(242, 245, 243, 0.72); }
.dark .pcard.accent { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.32); }

@media (max-width: 1080px) { .pcards.p3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .pcards.p2, .pcards.p3 { grid-template-columns: 1fr; } .pcard { padding: 26px 22px; } }

/* ---------- 좌우 분할 ---------- */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split.wide-left { grid-template-columns: 1.15fr 0.85fr; }
.split h2 { font-size: clamp(27px, 3.4vw, 42px); font-weight: 700; line-height: 1.26; margin: 22px 0 0; }
.split p { color: var(--ink-2); margin: 20px 0 0; }
.dark .split p { color: rgba(242, 245, 243, 0.76); }

/* ---------- 단계 목록 ---------- */

.steps { border-top: 1px solid var(--line); }
.steps > div { display: grid; grid-template-columns: 76px 1fr; gap: 24px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.steps .no { font-family: var(--mono); font-size: 15px; color: var(--gold); letter-spacing: 0.06em; }
.steps strong { display: block; font-size: 19.5px; font-weight: 700; }
.steps p { margin: 6px 0 0; color: var(--ink-3); font-size: 16px; }
.dark .steps { border-top-color: rgba(255, 255, 255, 0.16); }
.dark .steps > div { border-bottom-color: rgba(255, 255, 255, 0.16); }
.dark .steps p { color: rgba(242, 245, 243, 0.68); }

/* ---------- 숫자 ---------- */

.figs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); }
.figs > div { padding: 34px 28px 34px 0; border-right: 1px solid var(--line); }
.figs > div:last-child { border-right: none; }
.figs b { display: block; font-size: 58px; font-weight: 700; line-height: 1; letter-spacing: -0.04em; }
.figs b em { font-family: var(--sans); font-style: normal; font-size: 21px; font-weight: 500; margin-left: 4px; color: var(--ink-3); }
.figs strong { display: block; margin: 16px 0 6px; font-size: 17px; }
.figs span { color: var(--ink-3); font-size: 15.5px; line-height: 1.65; }

/* ---------- 인용 ---------- */

.quote-split { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: center; }
.quote-split blockquote { margin: 0; font-size: clamp(21px, 2.5vw, 31px); font-weight: 700; line-height: 1.46; letter-spacing: -0.025em; }
.quote-split .who { display: flex; align-items: center; gap: 14px; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); }
.quote-split .who b { display: block; font-size: 17px; }
.quote-split .who span { font-size: 15px; color: var(--ink-3); }

/* ---------- 표 ---------- */

.tbl { width: 100%; border-collapse: collapse; font-size: 17px; border-top: 1px solid var(--ink); }
.tbl th, .tbl td { padding: 20px 24px 20px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.tbl th { width: 210px; font-weight: 700; white-space: nowrap; }
.tbl td { color: var(--ink-2); }

/* ---------- 목록 (알림) ---------- */

.rows { border-top: 1px solid var(--ink); }
.rows a, .rows .row { display: grid; grid-template-columns: 120px 110px 1fr; gap: 24px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.rows a:hover { background: var(--bg-2); }
.rows .date { font-family: var(--mono); font-size: 14.5px; color: var(--ink-3); }
.rows .cat { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--green); border: 1px solid var(--line); padding: 5px 0; text-align: center; }
.rows .title { font-size: 17.5px; }

/* ---------- FAQ ---------- */

.faq { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 26px 0; cursor: pointer; font-size: 19px; font-weight: 700; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); font-size: 22px; font-weight: 400; color: var(--gold); }
.faq details[open] summary::after { content: "\2212"; }
.faq .body { padding: 0 0 28px; color: var(--ink-2); font-size: 17px; max-width: 860px; }
.faq .body p { margin: 0; }

/* ---------- 폼 ---------- */

.form { max-width: 100%; }
.field { margin-bottom: 22px; }
.field label { display: block; font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 9px; }
.field .req { color: var(--gold); }
.field input, .field select, .field textarea {
  width: 100%; padding: 15px 16px;
  font-family: inherit; font-size: 17px; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 6px;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(27, 79, 66, 0.1); }
.field textarea { min-height: 150px; resize: vertical; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-family: var(--sans); font-size: 16px; text-transform: none; letter-spacing: 0; color: var(--ink-2); }
.consent input { width: auto; margin-top: 6px; }
.note { margin-top: 18px; padding: 16px 18px; background: var(--bg-2); border-left: 3px solid var(--gold); font-size: 15px; color: var(--ink-2); }

/* ---------- 페이지 헤드 ---------- */

.page-head { position: relative; min-height: 420px; display: flex; align-items: flex-end; color: #fff; overflow: hidden; }
.page-head .hero-bg::after {
  background:
    radial-gradient(58% 46% at 46% 58%, rgba(8, 18, 15, 0.62) 0%, rgba(8, 18, 15, 0.5) 46%, rgba(8, 18, 15, 0.2) 78%, rgba(8, 18, 15, 0) 100%),
    linear-gradient(180deg, rgba(8, 18, 15, 0.26) 0%, rgba(8, 18, 15, 0.05) 36%, rgba(8, 18, 15, 0.12) 66%, rgba(8, 18, 15, 0.34) 100%),
    linear-gradient(90deg, rgba(8, 18, 15, 0.30) 0%, rgba(8, 18, 15, 0.04) 58%, rgba(8, 18, 15, 0) 82%);
}
.page-head .shell { position: relative; z-index: 1; padding-top: 150px; padding-bottom: 52px; }
.page-head h1 { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45); margin: 22px 0 0; font-size: clamp(31px, 4.6vw, 60px); font-weight: 700; line-height: 1.16; }
.page-head p { margin: 18px 0 0; max-width: 660px; font-size: 18.5px; color: rgba(255, 255, 255, 0.9); text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55); }
.page-head .eyebrow, .hero .eyebrow { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55); }

/* ---------- CTA ---------- */

.cta { background: var(--green); color: #fff; }
.cta h2 { font-size: clamp(30px, 4.4vw, 56px); font-weight: 700; line-height: 1.2; margin: 22px 0 0; }
.cta p { margin: 20px 0 0; color: rgba(255, 255, 255, 0.82); max-width: 620px; }
.cta .eyebrow { color: rgba(255, 255, 255, 0.72); }
.cta .eyebrow::before { background: #fff; }
.cta .hero-cta { margin-top: 38px; }

/* ---------- 푸터 ---------- */

.site-footer { background: var(--dark); color: rgba(242, 245, 243, 0.72); padding: 76px 0 0; font-size: 16px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 44px; }
.footer-grid h4 { margin: 0 0 18px; font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(242, 245, 243, 0.5); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 11px; }
.footer-grid a { color: rgba(242, 245, 243, 0.78); text-decoration: none; font-size: 16px; }
.footer-grid a:hover { color: #fff; }
.footer-about strong { display: block; font-size: 18px; color: #fff; }
.footer-about small { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: rgba(242, 245, 243, 0.5); }
.footer-about p { margin: 18px 0 0; font-size: 15.5px; line-height: 1.8; }
.footer-bottom {
  margin-top: 60px; padding: 24px 0; border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.04em; color: rgba(242, 245, 243, 0.5);
}

/* ---------- 버전 선택 바 ---------- */

.version-bar { background: #060f0c; padding: 22px 0; }
.version-bar .shell { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.version-bar .vlabel { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(242, 245, 243, 0.5); }
.version-bar .opts { display: flex; gap: 8px; }
.version-bar .opts a {
  padding: 10px 18px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 5px;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.05em;
  color: rgba(242, 245, 243, 0.78); text-decoration: none;
}
.version-bar .opts a:hover { border-color: rgba(255, 255, 255, 0.45); color: #fff; }
.version-bar .opts a.on { background: #fff; border-color: #fff; color: var(--dark); font-weight: 700; }


/* ---------- 지도 (v2 와 같은 이미지 + HTML 라벨 구조) ---------- */

.mapfig .frame { padding: 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-2); }
.mapfig .plot { position: relative; }
.mapfig .plot img { display: block; width: 100%; height: auto; border-radius: 8px; }
.mapfig .m-compact { display: none; }
.mapfig .under { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 16px; }
.mapfig .addr { font-size: 15.5px; color: var(--ink-2); margin: 0; }
.mapfig .addr b { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.mapfig .links { display: flex; gap: 8px; flex-wrap: wrap; }

/* 라벨은 어두운 지도 위에 얹히므로 흰 글씨. px 고정이라 좁은 화면에서도 작아지지 않는다. */
.mk {
  position: absolute;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: #eef5f1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.92), 0 0 12px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}
.mk.area { font-size: 15.5px; font-weight: 700; color: #c6d6ce; letter-spacing: 0.02em; }
.mk.park { color: #9fe3c4; }
.mk.st {
  padding: 5px 14px; border-radius: 999px;
  background: rgba(3, 21, 15, 0.9); border: 1px solid rgba(127, 198, 212, 0.6);
  color: #cfeaf0; font-size: 14px; font-weight: 700; text-shadow: none;
}
.mk.rail {
  padding: 4px 12px; border-radius: 999px;
  background: rgba(3, 21, 15, 0.85); border: 1px solid rgba(127, 198, 212, 0.45);
  color: #cfeaf0; font-size: 13.5px; text-shadow: none;
}
.mk.dest {
  padding: 11px 17px; border-radius: 10px;
  background: rgba(3, 21, 15, 0.95); border: 1.5px solid #e2c884;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  color: #f8eecd; font-size: 15.5px; font-weight: 700; text-shadow: none;
}
.mk.dest small { display: block; margin-top: 3px; font-size: 13.5px; font-weight: 500; color: #e2c884; }

@media (max-width: 760px) {
  .mapfig .m-wide { display: none; }
  .mapfig .m-compact { display: block; }
}

/* ---------- 스크롤 등장 ---------- */

/* 배경 이미지가 살짝 확대된 상태에서 제자리로 - 진입 연출 */
html.js .hero-bg img {
  transform: scale(1.07);
  animation: bgIn 1.4s cubic-bezier(.22, .61, .36, 1) forwards;
}
@keyframes bgIn { to { transform: scale(1); } }

/* 터치 기기에 호버 상태가 남지 않게 포인터 기기에서만 확대 */
.tile .shot > img { transition: none; }
@media (hover: hover) {
  .tile .shot > img { transition: transform .6s cubic-bezier(.22, .61, .36, 1); }
  .tile:hover .shot > img { transform: scale(1.05); }
}

html.js [data-reveal] {
  opacity: 0; transform: translateY(20px);
  transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--d, 0s);
}
html.js [data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  html.js .hero-bg img { animation: none !important; transform: none !important; }
  .ico-out { transition: none !important; }
}

/* ---------- 반응형 ---------- */

@media (max-width: 1080px) {
  .split, .quote-split { grid-template-columns: 1fr; gap: 34px; }
  /* 1열로 접히면 이미지가 컨테이너 폭을 다 먹는다. 세로형 비율을 유지하면
     화면 높이의 150% 까지 커지므로 가로형으로 전환한다 */
  .split .shot.r45, .quote-split .shot.r45,
  .split .shot.r43, .quote-split .shot.r43 { aspect-ratio: 16 / 9; }
  .split.wide-left { grid-template-columns: 1fr; }
  .t4 { grid-template-columns: repeat(2, 1fr); }
  .figs { grid-template-columns: repeat(2, 1fr); }
  .figs > div:nth-child(2) { border-right: none; }
  .figs > div:nth-child(3), .figs > div:nth-child(4) { border-top: 1px solid var(--line); }
  .nav a { padding: 9px 11px; font-size: 12.5px; }
}

@media (max-width: 980px) {
  .nav-toggle { display: block; }
  .bar { flex-wrap: wrap; gap: 12px; }
  /* flex 는 줄바꿈을 먼저 정하고 그 다음에 축소한다. 그래서 min-width:0 만으로는
     버튼이 아래로 내려가는 걸 못 막는다. flex-basis 를 0 으로 줘야 한 줄에 들어온다. */
  .bar > .brand { flex: 1 1 0; min-width: 0; }
  .bar > .nav-toggle { flex: none; }
  .header-cta { display: none; }
  .nav {
    display: none; order: 3; width: 100%; flex-direction: column; gap: 2px;
    margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.18);
  }
  .nav.open { display: flex; }
  .nav a { padding: 13px 12px; font-size: 14px; }
}

@media (max-width: 760px) {
  section { padding: 72px 0; }
  .shell { padding: 0 20px; }
  .hero { min-height: 560px; }
  .hero .shell { padding-top: 130px; padding-bottom: 44px; }
  .page-head { min-height: 340px; }
  .page-head .shell { padding-top: 120px; padding-bottom: 40px; }
  .sec-head { margin-bottom: 38px; }
  .t2, .t3, .t4 { grid-template-columns: 1fr; }
  .split .shot.r45, .quote-split .shot.r45 { aspect-ratio: 4 / 3; }
  .figs { grid-template-columns: 1fr; }
  .figs > div { border-right: none; border-top: 1px solid var(--line); padding: 26px 0; }
  .figs > div:first-child { border-top: none; }
  .figs b { font-size: 46px; }
  /* 21:9 카드는 좁은 화면에서 너무 납작해 오버레이 글이 눌린다 */
  .shot.r21 { aspect-ratio: 4 / 3; }
  .shot-overlay { padding: 20px 18px; }
  .shot-top h3 { font-size: 16px; }
  .shot-bot strong { font-size: 17px; }
  .shot-bot p { font-size: 14.5px; }
  .shot-bot { padding: 20px 18px; }
  .shot-foot { flex-direction: column; align-items: stretch; gap: 16px; }
  .shot-foot p { font-size: 15px; }
  .shot-foot .btn { justify-content: center; }
  .steps > div { grid-template-columns: 52px 1fr; gap: 14px; padding: 22px 0; }
  .rows a, .rows .row { grid-template-columns: 1fr; gap: 8px; padding: 20px 0; }
  .rows .cat { justify-self: start; padding: 4px 12px; }
  .tbl { font-size: 16px; }
  .tbl th, .tbl td { display: block; width: 100%; padding: 0; border: none; }
  .tbl th { padding: 18px 0 4px; font-size: 14px; color: var(--ink-3); }
  .tbl td { padding: 0 0 18px; border-bottom: 1px solid var(--line); }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-foot { flex-direction: column; align-items: flex-start; }
  .hero-meta { text-align: left; }
}