/* Dodori Korea Trip 의 본문 페이지(소개·개인정보·문의·고지) 공용 스타일.
   랜딩페이지는 CSS 를 인라인으로 들고 있습니다. 파일 하나만 열어 확인하는 일이
   잦아서입니다. 이쪽 네 장은 서로 똑같이 생겨야 하므로 파일로 뺍니다.
   색 토큰은 랜딩페이지와 같은 값입니다. 한쪽만 바꾸면 갈라집니다. */

@font-face{font-family:'Geist';font-weight:100 900;font-style:normal;font-display:swap;
  src:url('https://cdn.jsdelivr.net/fontsource/fonts/geist:vf@latest/latin-wght-normal.woff2') format('woff2-variations')}
@font-face{font-family:'Geist Mono';font-weight:100 900;font-style:normal;font-display:swap;
  src:url('https://cdn.jsdelivr.net/fontsource/fonts/geist-mono:vf@latest/latin-wght-normal.woff2') format('woff2-variations')}
/* 제목 전용 서체. Schibsted Grotesk 는 노르웨이 미디어사가 자기 지면을 위해
   만든 그로테스크라, 큰 크기에서 성격이 나오고 작은 크기에서 얌전합니다.
   본문은 Geist 그대로 둡니다 - 서른 편짜리 긴 글을 개성 있는 서체로 깔면
   읽는 일이 고됩니다. 성격은 제목이 내고 본문은 물러납니다.

   이 파일이 안 받아져도 페이지는 멀쩡합니다. @font-face 가 실패하면
   font-family 목록의 다음 차례인 Geist 가 그대로 제목을 찍습니다.
   최악이 어제 모습이라 얹을 만합니다. 다만 이 저장소에서는 폰트 CDN 이
   막혀 있어 로딩 성공을 확인하지 못했습니다 - 배포 후 눈으로 봐야 합니다. */
@font-face{font-family:'Schibsted Grotesk';font-weight:400 900;font-style:normal;font-display:swap;
  src:url('https://cdn.jsdelivr.net/fontsource/fonts/schibsted-grotesk:vf@latest/latin-wght-normal.woff2') format('woff2-variations')}

:root{
  --sans:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --display:'Schibsted Grotesk','Geist',-apple-system,BlinkMacSystemFont,sans-serif;
  --nav-h:60px;--max:1240px;
  --bg:#FFFFFF;--panel:#FFFFFF;--sunk:#F5F7FB;--line:#E7E3EF;--hair:#EFECF6;
  --ink:#2B2438;--mid:#615A70;--dim:#736A82;
  /* 긴 글 본문 전용. --mid 는 부차 정보용이라 문단 전체에 쓰기엔 흐립니다. */
  --body:#3D3550;
  --accent:#0047A0;--accent-ink:#FFFFFF;--accent-soft:#E2F2FF;
  /* 캐릭터에서 뽑은 세 색. 민트=비늘, 스카이=보조, 햇빛=뿔. 흰 바탕이
     기본이고 색은 히어로 워시와 섹션 블록이 냅니다. */
  --mint:#3FCB8E;--mint-soft:#DDF8EC;--mint-deep:#0B6B49;
  --sky:#4FB0F5;--sky-soft:#E2F2FF;
  --sun:#FFC93C;--sun-soft:#FFF4D4;
  --coral:#FF7A7A;--coral-soft:#FFE9E9;
  --sun-ink:#6E4600;--sky-ink:#08497A;--coral-ink:#9B2F35;
  /* 버튼은 면이라 글자용 tg-blue 를 그대로 쓸 수 없습니다. 다크에서
     tg-blue 를 밝히면 그 위 흰 글씨가 3.4:1 로 떨어집니다. */
  --btn-bg:#0047A0;--btn-fg:#FFFFFF;
  --red:#C0303A;--red-soft:#FFE9E9;
  --tg-red:#CD2E3A;--tg-blue:#0047A0;
  --good:#0B6B49;--warn:#8A5A00;
  /* 판정표의 "할 수 있다/없다". 초록이 등급이 아니라 사실을 나타냅니다. */
  --go:#0B6B49;--go-soft:#DDF8EC;
  --ease:cubic-bezier(.22,.61,.36,1);
  --r:20px;--r-lg:24px;--r-pill:999px;
  --shadow:0 1px 2px rgba(42,34,51,.05),0 8px 22px rgba(42,34,51,.08);
  --shadow-lg:0 3px 6px rgba(42,34,51,.07),0 18px 44px rgba(42,34,51,.13);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme='light']){
    --bg:#121020;--panel:#1E1A32;--sunk:#191629;--line:#302A45;--hair:#241F38;
    --ink:#F4F0FA;--mid:#BDB4CE;--dim:#9E95B2;--body:#DCD5E8;
    --accent:#8AA6EA;--accent-ink:#0B1220;--accent-soft:#122942;
    --mint:#4EDCA0;--mint-soft:#123528;--mint-deep:#6FEBB8;
    --sky:#6FC0FF;--sky-soft:#122942;
    --sun:#FFD45E;--sun-soft:#33290F;
    --coral:#FF9090;--coral-soft:#3A1E22;
    --sun-ink:#FFDC96;--sky-ink:#A9D8FF;--coral-ink:#FFBCBC;
    --btn-bg:#6FA6FF;--btn-fg:#0B1220;
    --red:#E0737C;--red-soft:#2A191C;
    --tg-red:#E0505C;--tg-blue:#5B8BE0;
    --good:#6FEBB8;--warn:#E0A65C;
    --go:#6FEBB8;--go-soft:#123528;
    --shadow:0 2px 3px rgba(0,0,0,.2),0 10px 26px rgba(0,0,0,.34);
    --shadow-lg:0 4px 6px rgba(0,0,0,.22),0 20px 48px rgba(0,0,0,.4);
  }
}
:root[data-theme='dark']{
  --bg:#121020;--panel:#1E1A32;--sunk:#191629;--line:#302A45;--hair:#241F38;
  --ink:#F4F0FA;--mid:#BDB4CE;--dim:#9E95B2;--body:#DCD5E8;
  --accent:#8AA6EA;--accent-ink:#0B1220;--accent-soft:#122942;
  --mint:#4EDCA0;--mint-soft:#123528;--mint-deep:#6FEBB8;
  --sky:#6FC0FF;--sky-soft:#122942;
  --sun:#FFD45E;--sun-soft:#33290F;
  --coral:#FF9090;--coral-soft:#3A1E22;
  --sun-ink:#FFDC96;--sky-ink:#A9D8FF;--coral-ink:#FFBCBC;
  --btn-bg:#6FA6FF;--btn-fg:#0B1220;
  --red:#E0737C;--red-soft:#2A191C;
  --tg-red:#E0505C;--tg-blue:#5B8BE0;
  --good:#6FEBB8;--warn:#E0A65C;
  --shadow:0 2px 3px rgba(0,0,0,.2),0 10px 26px rgba(0,0,0,.34);
  --shadow-lg:0 4px 6px rgba(0,0,0,.22),0 20px 48px rgba(0,0,0,.4);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.7;letter-spacing:-.011em;-webkit-font-smoothing:antialiased}

/* ── 타입 스케일 ───────────────────────────────────────────────────────
   전에는 본문 16px 에 h2 가 20px 이었습니다. 4px 차이로는 위계가 안 섭니다.
   화면에서 제목이 제목으로 안 읽히고 굵은 문장으로 읽혔습니다.

   Geist 는 100–900 가변인데 이 사이트는 640 하나만 쓰고 있었습니다. 축을
   실제로 쓰면 서체를 더 얹지 않고도 인상이 바뀝니다 - 크게, 무겁게, 자간을
   조이는 것이 큰 활자의 문법입니다. 작은 글씨의 자간을 그대로 키우면
   낱말이 흩어져 보입니다. 그래서 크기별로 자간을 따로 줍니다.

   clamp 의 가운데 항은 vw 입니다. 390px 폰에서 1280px 데스크톱까지
   중간 단계 미디어쿼리 없이 따라갑니다. */
:root{
  --fs-h1:clamp(32px,5.4vw,50px);
  --fs-h2:clamp(24px,3.2vw,32px);
  --fs-h3:clamp(18.5px,2.1vw,21px);
  --fs-lede:clamp(19px,2.2vw,22px);
}
a{color:var(--accent)}
a:hover{text-decoration:underline}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 18px}
@media(min-width:900px){.wrap{padding:0 32px}}
.mono{font-family:var(--mono)}
/* 글머리의 홍청 이음매. 랜딩의 섹션 머리와 같은 표시라, 어느 페이지로
   들어와도 같은 사이트라는 것이 첫 줄에서 보입니다. */
.doc>.eyebrow::before{content:'';display:block;width:44px;height:3px;margin:0 0 14px;
  border-radius:2px;
  background:linear-gradient(90deg,var(--tg-red) 0 50%,var(--tg-blue) 50% 100%)}
.eyebrow{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim)}

.nav{position:sticky;top:0;z-index:60;height:var(--nav-h);border-bottom:1px solid var(--hair);
  background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(12px)}
.nav__in{height:100%;display:flex;align-items:center;gap:22px}
/* 랜딩과 같은 규칙. 이름이 길어 좁은 화면에서 줄어들게 둡니다. */
.brand{display:flex;align-items:baseline;gap:8px;font-family:var(--display);font-weight:700;letter-spacing:-.045em;
  font-size:clamp(14px,3.6vw,16.5px);white-space:nowrap;min-width:0;color:var(--ink);text-decoration:none}
.brand:hover{text-decoration:none}
/* 브랜드 마크는 도도리 얼굴입니다. 이름이 "Dodori's" 인데 정작 도도리가
   없던 것을 원본 그림이 도착하면서 바로잡았습니다. 랜딩페이지와 같은
   그림·크기입니다. 한쪽만 바꾸면 갈라집니다. 태극은 이음매(.seam 계열)와
   푸터에 그대로 남습니다. */
.brand img{width:24px;height:22px;object-fit:contain;display:block;flex:none;
  transform:translateY(-1px)}

/* 상단 메뉴. 랜딩과 같은 목차(드롭다운·버거)를 씁니다. 랜딩 전용
   타임스탬프·테마 버튼만 여기 없습니다 - 그건 랜딩 자바스크립트가 채우는
   것이라 안쪽 페이지에서는 죽은 버튼이 됩니다. */
.nav__links{margin-left:auto;display:none;gap:20px;font-size:14.5px}
.nav__links a{color:var(--mid);text-decoration:none}
.nav__links a:hover{color:var(--ink)}
/* ── 상단 드롭다운 ─────────────────────────────────────────────────
   <details> 라 자바스크립트 없이도 열립니다. nav.js 는 매너만 더합니다
   (하나 열면 나머지 닫기, 바깥 클릭·Escape 로 닫기). */
.menu{position:relative}
.menu summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:5px;
  color:inherit}
.menu summary::-webkit-details-marker{display:none}
/* 화살표. 글자로 ▾ 를 넣으면 폰트마다 크기가 널뛰어서 테두리로 그립니다. */
.menu summary::after{content:'';width:7px;height:7px;margin-top:-3px;flex:none;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);transition:transform .18s var(--ease)}
.menu[open] summary::after{transform:rotate(225deg);margin-top:3px}
.menu[open] summary{color:var(--ink)}
.menu summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.menu__panel{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);
  min-width:196px;padding:8px;display:grid;z-index:80;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg)}
.menu__panel a{padding:9px 12px;border-radius:10px;font-size:14.5px;color:var(--mid);
  text-decoration:none;white-space:nowrap}
.menu__panel a:hover{background:var(--sunk);color:var(--ink);text-decoration:none}
.menu__all{margin-top:6px;border-top:1px solid var(--hair);padding-top:12px;
  color:var(--accent)!important;font-weight:560}

/* ── 좁은 화면의 전체 메뉴 ─────────────────────────────────────────
   원래 760px 아래에서는 메뉴가 통째로 사라졌습니다. 링크 여섯 개일 때는
   그래도 됐지만 이제 목차가 생겨서, 없는 것이 결함입니다. */
.nav__m{display:none;position:relative}
.nav__m summary{list-style:none;cursor:pointer;width:38px;height:38px;border-radius:10px;
  border:1px solid var(--line);display:grid;place-items:center;align-content:center;gap:4px}
.nav__m summary::-webkit-details-marker{display:none}
.nav__m summary i{display:block;width:16px;height:1.8px;border-radius:2px;background:var(--ink);
  transition:transform .18s var(--ease),opacity .18s var(--ease)}
/* 열리면 석 줄이 X 로 접힙니다. 같은 버튼이 닫기 버튼이라는 표시입니다. */
.nav__m[open] summary i:nth-child(1){transform:translateY(5.8px) rotate(45deg)}
.nav__m[open] summary i:nth-child(2){opacity:0}
.nav__m[open] summary i:nth-child(3){transform:translateY(-5.8px) rotate(-45deg)}
.nav__m summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.nav__mpanel{position:fixed;left:12px;right:12px;top:calc(var(--nav-h) + 8px);z-index:80;
  max-height:calc(100dvh - var(--nav-h) - 24px);overflow:auto;padding:14px;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg)}
.nav__mpanel a{display:block;padding:10px 12px;border-radius:10px;font-size:15px;
  color:var(--ink);text-decoration:none}
.nav__mpanel a:hover{background:var(--sunk);text-decoration:none}
.nav__mhead{margin:12px 0 2px;padding:10px 12px 0;border-top:1px solid var(--hair);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim)}
.nav__mgrid{display:grid;grid-template-columns:1fr 1fr}
.nav__mgrid a{font-size:14px;color:var(--mid)}
.nav__mgrid .menu__all{grid-column:1/-1;margin-top:4px;padding-top:12px}
/* ── 메뉴를 타일로 ────────────────────────────────────────────────
   목록이 열한 줄이 되면서 세로 목록은 훑는 물건이 아니라 읽는 물건이
   됐습니다. 두 칸 타일이면 눈이 행이 아니라 면을 훑고, 칸마다 테두리가
   있어 "누르는 것" 이라는 사실이 글자보다 먼저 보입니다. 마크업은 전
   페이지가 공유하므로 여기 CSS 만 바꾸면 서른 장이 같이 바뀝니다. */
.menu__panel{grid-template-columns:1fr 1fr;gap:6px;min-width:308px;padding:10px}
.menu__panel a{padding:9px 12px;border:1px solid var(--hair);border-radius:10px;
  background:var(--sunk);white-space:normal;line-height:1.3}
.menu__panel a:hover{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
.menu__panel .menu__all{grid-column:1/-1;border:0;background:transparent;
  border-top:1px solid var(--hair);border-radius:0}
.menu__panel .menu__all:hover{background:transparent;text-decoration:underline}
.nav__mgrid{gap:6px}
.nav__mgrid a{padding:9px 11px;border:1px solid var(--hair);border-radius:10px;
  background:var(--sunk)}
.nav__mgrid .menu__all{border:0;background:transparent;border-radius:0}

@media(max-width:759px){.nav__m{display:block}}

@media(min-width:760px){.nav__links{display:flex}}

/* 본문은 한 줄이 길어지면 읽히지 않습니다. 66자 근처에서 끊습니다.
   17px 로 키우면서 68ch 에서 같이 좁혔습니다. 글자를 키우고 단 너비를 그대로
   두면 한 줄이 길어져서, 크게 만든 만큼 읽기가 더 힘들어집니다. */
.doc{max-width:66ch;margin:0 auto;padding:52px 0 24px}
.doc h1{font-family:var(--display);font-size:var(--fs-h1);font-weight:780;letter-spacing:-.042em;line-height:1.06;
  margin:12px 0 0;text-wrap:balance}
/* h2 위의 실선을 뺐습니다. 문서 구분선은 위계를 만드는 대신 글을 토막냅니다.
   대신 크기와 굵기, 그리고 위쪽 여백으로 세웁니다. 장식 규칙을 매 절마다
   반복하면 홍청 이음매가 페이지 머리에서 갖던 뜻이 묽어집니다 - 그 표식은
   글 첫머리에 한 번만 나옵니다. */
.doc h2{font-family:var(--display);font-size:var(--fs-h2);font-weight:730;letter-spacing:-.035em;line-height:1.15;
  margin:64px 0 0;text-wrap:balance}
.doc h3{font-family:var(--display);font-size:var(--fs-h3);font-weight:670;letter-spacing:-.024em;line-height:1.25;
  margin:34px 0 0}
/* 본문을 --mid 에서 --body 로. 회색 문단이 몇 천 자 이어지면 눈이 먼저
   지칩니다. 부차 정보(캡션·출처)는 그대로 --mid 에 남습니다. */
.doc p,.doc ul,.doc ol{margin:17px 0 0;color:var(--body)}
.doc ul,.doc ol{padding-left:22px}
.doc li{margin-top:9px}
.doc strong{color:var(--ink);font-weight:640}
.doc .lede{font-size:var(--fs-lede);font-weight:450;line-height:1.5;letter-spacing:-.022em;
  margin-top:20px;color:var(--mid)}
.doc .lede+*{margin-top:26px}
.doc code{font-family:var(--mono);font-size:.9em;background:var(--sunk);
  padding:1px 5px;border-radius:4px;color:var(--ink)}
/* 원고의 "> " 인용이 이 박스가 됩니다. 사이트가 도도리의 이름으로 말하는
   곳이므로 얼굴을 붙입니다 - 장식이 아니라 화자 표시입니다. 얼굴은 CSS
   배경이라 화면 낭독기가 읽지 않는데, 그게 맞습니다. 내용은 글이 다 말하고
   있고 "여기 용 그림이 있다" 는 소리로 들을 정보가 아닙니다. */
.box{margin-top:20px;padding:15px 17px 15px 60px;border:1px solid var(--line);border-radius:14px;
  background:var(--panel) url('/img/dodori-wink.webp') no-repeat 14px 14px / 34px auto;
  font-size:14.5px}
.box p{margin-top:9px}
.box p:first-child{margin-top:0}
/* 본문 사진.
   글 폭(68ch)보다 살짝 넓게 빼서 글과 사진의 리듬을 만듭니다. 좁은 화면에서는
   그대로 폭을 맞춥니다. aspect-ratio 로 자리를 미리 잡아 사진이 늦게 와도
   아래 글이 밀리지 않습니다.
   출처 줄은 장식이 아니라 라이선스 조건입니다. 작게 두되 지우지 않습니다. */
.doc .hero{margin:24px 0 4px}
@media(min-width:820px){.doc .hero{width:calc(100% + 96px);margin-left:-48px}}
.doc .hero img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  border-radius:12px;background:var(--sunk);border:1px solid var(--hair)}
.doc .hero figcaption{margin-top:9px;font-size:12.5px;color:var(--dim);line-height:1.5}
@media(min-width:820px){.doc .hero figcaption{padding:0 48px}}
.doc .hero figcaption span{display:block;margin-top:3px;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.06em;text-transform:uppercase}
.doc .hero figcaption a{color:var(--mid)}

/* ── 코스 지도 ──────────────────────────────────────────────────────
   실제 위경도로 찍은 개략도입니다. 이 글의 주장 자체가 "순서와 방향"이라
   글로만 쓰면 읽는 사람이 여섯 곳의 위치를 머릿속에 들고 있어야 합니다.
   지도는 그 짐을 대신 집니다 - 장식이 아니라 주장을 눈에 보이게 한 것입니다.

   그림 파일이 아니라 인라인 SVG 인 이유는 셋입니다. 라이선스 문제가 없고,
   요청이 늘지 않아 LCP 를 건드리지 않고, 색을 토큰으로 받아 다크 모드에서
   저절로 뒤집힙니다. 색을 직접 박으면 한쪽 테마에서 안 보입니다.

   좁은 화면에서는 지도만 제 상자 안에서 가로로 스크롤합니다. 통째로 줄이면
   글자가 7px 이 되어 못 읽습니다 - 안 보이는 지도는 없는 지도입니다. */
.doc .routemap{margin:24px 0 4px}
@media(min-width:820px){.doc .routemap{width:calc(100% + 96px);margin-left:-48px}}
.routemap__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--hair);border-radius:12px;background:var(--panel)}
.routemap svg{display:block;width:100%;min-width:560px;height:auto}
.doc .routemap figcaption{margin-top:9px;font-size:12.5px;color:var(--dim);line-height:1.5}
@media(min-width:820px){.doc .routemap figcaption{padding:0 48px}}
/* 좁은 화면에서는 지도가 상자 안에서 옆으로 움직입니다. 움직인다는 사실을
   말해 주지 않으면 왼쪽 절반만 보고 그게 전부인 줄 압니다. 넓은 화면에서는
   통째로 보이므로 이 줄이 거짓이 되어, 그때는 지웁니다. */
.rm-hint{display:block;margin-top:5px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--mid)}
@media(min-width:700px){.rm-hint{display:none}}

.rm-water{fill:none;stroke:var(--accent);stroke-width:2.5;opacity:.2}
/* 한강. 청계천과 같은 굵기로 그리면 실개천과 강이 같아 보입니다. 강남·성수
   코스에서는 이 강이 배경이 아니라 코스의 반환점이라 더 그렇습니다. */
.rm-river{fill:none;stroke:var(--accent);stroke-width:13;opacity:.16;stroke-linecap:round}
/* 지도 위의 구역 표시. 용산 코스에서 옛 기지 자리를 나타냅니다 - 명소들이
   흩어져 보이는 이유가 전부 이 빈 칸을 둘러싸고 생겨서라, 가운데를 비워 두면
   동선이 왜 휘는지 설명이 안 됩니다. 실선이 아니라 점선인 것은 이것이 측량된
   경계가 아니라 대략적인 자리라는 표시입니다. */
.rm-zone{fill:var(--accent);fill-opacity:.055;stroke:var(--dim);stroke-width:1.5;
  stroke-dasharray:5 5;opacity:.9}
.rm-zonelabel{fill:var(--dim);font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-anchor:middle}
.rm-leg{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;
  stroke-linejoin:round}
.rm-leg--transit{stroke-dasharray:9 7}
.rm-leg--opt{stroke:var(--dim);stroke-width:2;stroke-dasharray:2 6;opacity:.85}
.rm-dot{fill:var(--accent);stroke:var(--panel);stroke-width:3}
.rm-dot--start{fill:var(--tg-red)}
.rm-dot--opt{fill:var(--panel);stroke:var(--dim);stroke-width:2.5}
.rm-num{fill:#fff;font-family:var(--mono);font-size:14px;font-weight:600;
  text-anchor:middle;dominant-baseline:central}
/* 라벨은 선 위에 얹힙니다. 그냥 얹으면 경로선이 글자를 관통해 읽을 수 없습니다
   (실제로 점선이 "AFTERNOON" 을 가로질렀습니다). 글자 테두리를 배경색으로 먼저
   칠하고 그 위에 글자를 칠해서, 선이 글자를 피해 간 것처럼 보이게 합니다.
   라벨 위치를 하나씩 옮겨 피하는 것보다 낫습니다 - 그 방식은 지점이 늘 때마다
   다시 어긋납니다. */
.rm-label,.rm-sub{paint-order:stroke fill;stroke:var(--panel);stroke-width:4px;
  stroke-linejoin:round}
.rm-label{fill:var(--ink);font-family:var(--sans);font-size:15px;font-weight:600;
  letter-spacing:-.02em}
.rm-sub{fill:var(--dim);font-family:var(--mono);font-size:11px;letter-spacing:.04em}
.rm-legend{fill:var(--mid);font-family:var(--mono);font-size:11.5px;letter-spacing:.04em}

/* ── 판정 표 ────────────────────────────────────────────────────────
   지도와 같은 상자(.routemap)를 씁니다. 그림의 성격은 다르지만 하는 일이
   같습니다 - 좁은 화면에서 가로로 스크롤하고, 색을 토큰으로 받아 다크
   모드에서 저절로 뒤집힙니다.

   이 그림이 장식이 아닌 이유: 카드 거절 글의 논지는 "네 벽 중 어디에
   서 있는가" 이고, 그건 목록이 아니라 판정입니다. 글로 읽으면 네 절을
   전부 읽고 자기 증상과 대조해야 하는데, 표로 보면 증상 한 줄에서
   바로 자기 칸을 찾습니다.

   색은 등급이 아니라 사실입니다. 초록은 "당신이 할 수 있는 일이 있다",
   빨강은 "없다" 입니다. 그 판단이 이 글의 결론이므로 색이 정보입니다. */
.dg-note{fill:var(--accent-soft);stroke:none}
.dg-notetext{fill:var(--mid);font-family:var(--sans);font-size:13px}
.dg-head{fill:var(--dim);font-family:var(--mono);font-size:10px;letter-spacing:.13em}
.dg-row{fill:var(--bg);stroke:var(--hair);stroke-width:1}
.dg-n{fill:var(--dim)}
.dg-n--yes{fill:var(--go)}
.dg-n--no{fill:var(--red)}
.dg-n--maybe{fill:var(--dim)}
.dg-num{fill:var(--panel);font-family:var(--mono);font-size:14px;font-weight:600;
  text-anchor:middle;dominant-baseline:central}
.dg-see{fill:var(--mid);font-family:var(--mono);font-size:11.5px}
.dg-wall{fill:var(--ink);font-family:var(--sans);font-size:14px;font-weight:620}
.dg-badge{stroke:none}
.dg-badge--yes{fill:var(--go-soft)}
.dg-badge--no{fill:var(--red-soft)}
.dg-badge--maybe{fill:var(--sunk)}
.dg-btext{font-family:var(--mono);font-size:10px;letter-spacing:.11em;
  text-anchor:middle;font-weight:600}
.dg-btext--yes{fill:var(--go)}
.dg-btext--no{fill:var(--red)}
.dg-btext--maybe{fill:var(--mid)}
.dg-do{fill:var(--mid);font-family:var(--sans);font-size:12.5px}
.dg-do--yes{fill:var(--ink);font-weight:560}
/* 사다리 막대. 길이가 한도에 대략 비례합니다 - 금액이 오를수록 갈 수 있는
   곳이 줄어든다는 것을 글자를 읽기 전에 눈이 먼저 봅니다. */
.dg-bar{fill:var(--accent);opacity:.75}
.dg-bar--dim{fill:var(--dim);opacity:.55}
.dg-bar--go{fill:var(--accent);opacity:.75}
.dg-foot{fill:var(--dim);font-family:var(--sans);font-size:12px}
/* 세로 기준선. 달력 그림에서 "이 날" 하나를 가리킬 때만 씁니다. 점선인 것은
   막대가 정보이고 이 선은 눈금이라는 뜻입니다. */
.dg-mark{stroke:var(--dim);stroke-width:1;stroke-dasharray:3 3;fill:none;opacity:.7}
/* 그림 안의 선 아이콘. 사진을 쓸 수 없는 자리(등산·사찰처럼 저작권을 확인한
   사진이 캐시에 없는 것)에서 무엇에 대한 칸인지 글자보다 먼저 보이게 합니다.
   면이 아니라 선이라 다크에서도 같은 색 하나로 버팁니다. */
.dg-ic{fill:none;stroke:var(--accent);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

/* ── 판정기 ────────────────────────────────────────────────────────────
   글의 결론을 독자 상황에 맞춰 골라 주는 장치입니다. 표를 눈으로 훑어
   자기 줄을 찾는 대신, 겪고 있는 것을 고르면 답이 열립니다.

   자바스크립트가 없습니다. 라디오와 형제 선택자만 씁니다.
   선택지마다 [입력 - 라벨 - 답] 이 나란히 있고, 규칙은 이 한 줄입니다.
   답이 고른 칸 바로 아래에서 열려서 눈이 움직일 거리도 없습니다.

   입력은 화면에서 감추되 접근성 트리에는 남깁니다. display:none 으로
   지우면 키보드로 못 고르고 낭독기가 못 읽습니다 - 그건 감춘 게 아니라
   없앤 것입니다. */
.chk{margin:34px 0 4px;padding:22px 22px 8px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--sunk)}
.chk__eyebrow{margin:0;font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.chk__h{margin:8px 0 0;font-family:var(--display);font-size:var(--fs-h3);
  font-weight:670;letter-spacing:-.024em;line-height:1.25;color:var(--ink)}
.chk__note{margin:9px 0 0;font-size:14px;color:var(--mid);line-height:1.55}
.chk__set{margin:18px 0 0;padding:0;border:0;min-width:0}
.chk__q{padding:0;margin:0 0 12px;font-size:14.5px;font-weight:620;color:var(--ink)}

.chk__r{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.chk__opt{display:block;margin-top:8px;padding:12px 15px;border-radius:12px;
  border:1px solid var(--line);background:var(--panel);color:var(--body);
  font-size:14.5px;line-height:1.45;cursor:pointer;
  transition:border-color .16s var(--ease),background .16s var(--ease)}
.chk__opt:hover{border-color:var(--mid)}
.chk__r:focus-visible + .chk__opt{outline:2px solid var(--accent);outline-offset:2px}
.chk__r:checked + .chk__opt{border-color:var(--accent);background:var(--accent-soft);
  color:var(--ink);font-weight:560}

/* 규칙 하나. 아이디를 여기 박지 않아서 판정기가 몇 개가 되든 그대로입니다. */
.chk__out{display:none}
.chk__r:checked + .chk__opt + .chk__out{display:block;
  margin:10px 0 4px;padding:14px 16px;border-radius:12px;background:var(--panel);
  border:1px solid var(--hair)}
.chk__badge{margin:0;display:inline-block;padding:3px 10px;border-radius:999px;
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase}
/* 색은 등급이 아니라 사실입니다. 초록은 "당신이 할 수 있는 일이 있다",
   빨강은 "없다". 판정 표(dg-*)와 같은 약속을 씁니다. */
.chk__badge--yes{background:var(--go-soft);color:var(--go)}
.chk__badge--no{background:var(--red-soft);color:var(--red)}
.chk__badge--maybe{background:var(--sunk);color:var(--mid)}
.chk__ans{margin:10px 0 0;font-size:15px;line-height:1.6;color:var(--body)}
.chk__ans a{color:var(--accent)}

/* ── 코스 단계 ──────────────────────────────────────────────────────
   번호와 이동 수단이 왼쪽 기둥에 고정되어, 훑어보는 사람이 "몇 번째, 어떻게
   가는지"만 세로로 따라 읽을 수 있습니다. 본문을 다 읽어야 순서를 아는
   구조가 아니어야 합니다. */
.route{list-style:none;margin:22px 0 0;padding:0;counter-reset:none}
.route__stop{display:grid;grid-template-columns:34px 1fr;gap:14px;margin-top:0;
  padding:18px 0;border-top:1px solid var(--hair)}
.route__stop:first-child{border-top:0;padding-top:4px}
/* 색을 박은 #fff 가 아니라 --btn-fg 입니다. 이 원은 면이고, --accent 는
   다크에서 밝혀 둔 글자색이라 그 위 흰 숫자가 2.4:1 로 떨어집니다. */
.route__n{width:30px;height:30px;border-radius:50%;background:var(--btn-bg);color:var(--btn-fg);
  font-family:var(--mono);font-size:13.5px;font-weight:600;display:grid;place-items:center}
.route__stop:first-child .route__n{background:var(--tg-red)}
/* 목록이 둘로 갈린 글(강 북쪽 / 남쪽)에서 뒷 목록의 첫 칸까지 출발점 색이
   되면 지도와 어긋납니다. 붉은 점은 지도에도 하나뿐입니다. */
.route--cont .route__stop:first-child .route__n{background:var(--btn-bg)}
.route__h{margin:2px 0 0;font-size:17px;letter-spacing:-.02em;color:var(--ink);
  font-weight:640}
.route__body p{margin:8px 0 0}
/* 이동 수단 줄. 앞 지점에서 여기까지 어떻게 오는지를 말합니다. */
.route__leg{display:flex;align-items:center;gap:7px;margin:0 0 2px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--dim)}
.ic{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.ic--fill{fill:currentColor;stroke:none}

/* 본문 중간 사진. 히어로와 같은 규칙이되 본문 폭 안에 머뭅니다. */
.doc .shot{margin:22px 0 4px}
.doc .shot img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  border-radius:12px;background:var(--sunk);border:1px solid var(--hair)}
.doc .shot figcaption{margin-top:9px;font-size:12.5px;color:var(--dim);line-height:1.5}
.doc .shot figcaption span{display:block;margin-top:3px;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.06em;text-transform:uppercase}
.doc .shot figcaption a{color:var(--mid)}

/* 변경금지(KOGL Type 3) 사진. 16:9 로 잘라 채우면 그건 변경이고 이용 조건
   위반입니다. 칸은 그대로 잡아 두고(사진이 늦게 와도 아래 글이 밀리지 않게)
   그 안에 통째로 넣습니다. 옆에 여백이 생기는 편이 잘라 내는 것보다 낫습니다.
   빌더가 rights 를 보고 이 클래스를 붙입니다 - 손으로 붙이지 마십시오.

   이 규칙은 .hero img / .shot img 정의보다 반드시 뒤에 있어야 합니다.
   특정도가 같아서 순서가 승부를 가릅니다. 앞에 뒀더니 .shot 에서 cover 가
   이겨 Type3 사진이 그대로 잘렸습니다(hero 는 순서가 우연히 맞아 통과). */
.doc .hero--nocrop img,.doc .shot--nocrop img{object-fit:contain;background:var(--sunk)}


/* 표. 좁은 화면에서 본문 전체가 옆으로 밀리면 안 되므로, 표만 제 상자 안에서
   가로로 스크롤합니다. 본문 폭(68ch)을 넘지 않습니다. */
.tablewrap{margin-top:18px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.doc table{border-collapse:collapse;width:100%;font-size:14px}
.doc th,.doc td{text-align:left;padding:9px 13px;border-bottom:1px solid var(--hair);
  vertical-align:top}
.doc thead th{font-size:11px;font-family:var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);white-space:nowrap}
.doc tbody tr:last-child td{border-bottom:0}
.doc td{color:var(--mid)}
.doc td:first-child{color:var(--ink)}

/* ── 공유 ──────────────────────────────────────────────────────────
   글 끝에 둡니다. 다 읽고 나서가 남에게 보낼 마음이 드는 지점이지, 첫
   문단에서 권할 일이 아닙니다. 본문과 같은 폭에 머물고, 버튼도 본문 색을
   그대로 씁니다 - 눈에 띄는 원색 버튼을 넣으면 광고처럼 보입니다. */
.share{margin-top:30px;padding-top:20px;border-top:1px solid var(--hair)}
.share__label{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--dim)}
.share__row{display:flex;flex-wrap:wrap;gap:9px;margin-top:11px}
.share__btn{display:inline-flex;align-items:center;gap:7px;
  font-family:var(--sans);font-size:13.5px;color:var(--ink);
  border:1px solid var(--line);border-radius:999px;background:var(--panel);
  padding:8px 15px;cursor:pointer;
  transition:border-color .18s var(--ease),background .18s var(--ease)}
/* hidden 이 걸린 버튼은 진짜로 사라져야 합니다. 브라우저 기본 규칙인
   [hidden]{display:none} 은 클래스 하나에도 밀리므로, display 를 주는 순간
   hidden 이 무력해집니다. 실제로 그랬습니다 - Web Share 를 지원하지 않는
   데스크톱에서 눌러도 아무 일 없는 Share 버튼이 그대로 보였습니다. */
.share__btn[hidden]{display:none}
.share__btn:hover{border-color:var(--ink)}
.share__btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.share__btn .ic{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* 눌러도 글자만 잠깐 바뀌므로 폭이 흔들립니다. 최소 폭을 줘서 버튼이
   춤추지 않게 합니다. */
.share__btn [data-copy-label]{display:inline-block;min-width:66px;text-align:left}

/* 출처 줄. 본문과 확인일 사이에 놓입니다. 눈에 띄되 본문을 밀어내지는 않는
   크기여야 합니다. 읽는 사람 대부분은 안 읽고, 확인하려는 사람만 봅니다. */
.doc .src{margin-top:30px;padding-top:14px;border-top:1px solid var(--hair);
  font-size:13px;color:var(--dim)}
.doc .src a{color:var(--mid)}
.updated{margin-top:10px;font-family:var(--mono);font-size:11.5px;color:var(--dim);letter-spacing:.04em}

/* ── 가이드 목록. 주제 칩 + 주제별 묶음 + 확인일 ──
   신선도를 글을 열어야만 알 수 있으면 훑어보는 사람에게는 없는 정보입니다. */
.topics{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:22px}
.topics a{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--mid);
  text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:5px 11px;
  background:var(--panel);transition:border-color .18s var(--ease),color .18s var(--ease)}
.topics a b{color:var(--accent);font-weight:600;margin-left:2px}
.topics a:hover{border-color:var(--ink);color:var(--ink);text-decoration:none}
/* 칩으로 건너뛴 묶음이 고정 나브 밑에 깔리지 않게 여유를 둡니다. */
.gsec{scroll-margin-top:calc(var(--nav-h) + 14px)}
.gsec__intro{margin:8px 0 0;max-width:62ch;font-size:15px;line-height:1.6;color:var(--dim)}
.gsec h2 .count{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--dim);
  letter-spacing:.06em;margin-left:9px;vertical-align:2px}
.doc .gx{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:16px}
.doc .gx li{margin:0;font-size:14px;color:var(--dim);line-height:1.55}
.gx a{color:var(--ink);text-decoration:none}
.gx a strong{font-family:var(--display);font-size:16px;font-weight:640}
.gx a:hover strong{color:var(--accent);text-decoration:underline}
.gx .checked{font-family:var(--mono);font-size:10.5px;color:var(--dim);letter-spacing:.05em}

/* ── /now/ 순위 페이지 ──────────────────────────────────────────
   홈페이지 카드의 .rows 를 그대로 못 쓰는 이유는 그게 인라인 <style> 안에
   있어서입니다. 정보는 같지만 마크업은 시맨틱 <ol>/<li> 로 다시 짭니다. */
.now-lead{margin:22px 0 0;border-radius:11px;overflow:hidden;border:1px solid var(--line)}
.now-lead img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--sunk)}

/* 여기서 재생되는 카드. 이 표시는 video.js 가 실제로 처리할 수 있다고
   확인한 카드에만 붙습니다 - 자바스크립트가 없으면 재생 버튼도 없고 그냥
   유튜브로 가는 링크입니다. 눌러도 여기서 안 열리는데 재생 버튼처럼
   보이게 두는 것이 제일 나쁩니다. */
.now-lead--play a{position:relative;display:block}
.now-lead--play a::after{
  content:"";position:absolute;left:50%;top:50%;width:62px;height:44px;
  transform:translate(-50%,-50%);border-radius:11px;
  background:rgba(20,22,26,.72);box-shadow:0 1px 6px rgba(0,0,0,.3)}
.now-lead--play a::before{
  content:"";position:absolute;left:50%;top:50%;z-index:1;
  transform:translate(-28%,-50%);
  border-style:solid;border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent #fff}
.now-lead--play a:hover::after{background:rgba(20,22,26,.85)}
.now-lead--play a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;
  border-radius:11px}

/* ── 영상 재생 창 ───────────────────────────────────────────────────
   1위 카드든 목록 링크든 전부 이 창에서 열립니다. 처음에는 카드만 제자리에서
   바꿨는데, 같은 것을 누르는데 두 가지 일이 일어나는 셈이라 합쳤습니다.

   재생 표시(▶)는 video.js 가 처리할 수 있다고 확인한 링크에만 붙습니다.
   자바스크립트가 없으면 표시도 없고 그냥 유튜브로 가는 링크입니다. */
.yt-link::before{content:"▶";display:inline-block;margin-right:6px;font-size:.72em;
  transform:translateY(-1px);color:var(--dim)}
.yt-link:hover::before{color:var(--accent)}

/* 배경막은 일부러 토큰에서 뽑지 않습니다. --ink 로 만들었더니 다크 모드에서
   --ink 가 흰색이라 어두운 막이 흰 막이 되고, 그 위의 흰 글씨가 사라졌습니다.
   영상 오버레이는 어느 테마에서든 어둡습니다. 여기만 고정값을 씁니다. */
.ytmodal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;
  justify-content:center;padding:20px;background:rgba(9,11,14,.86)}
.ytmodal__box{width:min(960px,100%);display:flex;flex-direction:column;gap:10px}
.ytmodal__box iframe{display:block;width:100%;height:auto;aspect-ratio:16/9;
  border:0;border-radius:12px;background:#000}
/* 닫기 단추는 모달 오른쪽 위에 고정합니다. 영상 위에 얹으면 재생 컨트롤과
   겹칩니다. */
.ytmodal__x{position:absolute;top:14px;right:16px;width:38px;height:38px;
  border:1px solid var(--line);border-radius:50%;background:var(--panel);
  color:var(--ink);font-size:22px;line-height:1;cursor:pointer}
.ytmodal__x:hover{background:var(--sunk)}
.ytmodal__x:focus-visible,.ytmodal__out:focus-visible{outline:2px solid var(--accent);
  outline-offset:3px}
/* 유튜브에서 보고 싶은 사람의 길도 막지 않습니다. 여기서 재생시키는 것이
   목적이지 가두는 것이 목적이 아닙니다. */
.ytmodal__out{align-self:flex-start;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.06em;color:#fff;opacity:.8;text-decoration:none}
.ytmodal__out:hover{opacity:1;text-decoration:underline}
.now-list{list-style:none;margin:18px 0 0;padding:0;border:1px solid var(--line);border-radius:11px;overflow:hidden}
.now-list li{display:flex;align-items:baseline;gap:13px;padding:13px 16px;border-bottom:1px solid var(--hair)}
.now-list li:last-child{border-bottom:0}
.now-list__rank{font-family:var(--mono);font-size:12px;color:var(--dim);width:16px;flex:none}
.now-list__body{flex:1;min-width:0}
.now-list__title{color:var(--ink);font-size:15px;font-weight:600}
/* 링크인 제목에만 점선 밑줄을 붙입니다. 애플뮤직 차트처럼 곡마다 갈 곳이
   없는 항목은 <strong> 으로 나가는데, 거기에 링크 표시를 붙이면 눌리지도
   않는 걸 눌러 보라고 하는 셈입니다. */
a.now-list__title{text-decoration:none;
  border-bottom:1px dotted color-mix(in srgb,var(--accent) 55%,transparent)}
a.now-list__title:hover{color:var(--accent);border-bottom-color:var(--accent)}
/* .now-list__tag 는 안 바뀌는 한 줄(그 동네가 뭐 하는 곳인지), .now-list__sub 는
   5분마다 바뀌는 값입니다. 진하기를 다르게 둬서 어느 쪽이 지금 값인지 구별되게
   합니다. 이 필드를 안 쓰는 트랙(차트·유튜브)에는 그냥 안 그려질 뿐입니다. */
/* 새 글 배지. 빌더가 written 으로부터 이레 동안만 붙입니다 - 매일 빌드가
   날짜로 계산해 떼 주므로, 여기서는 생김새만 정합니다. 태극 빨강 계열을
   쓰는 건 이 배지가 정보가 아니라 신호이기 때문입니다. */
.gnew{display:inline-block;margin-left:7px;padding:1.5px 8px;border-radius:999px;
  background:var(--red-soft);color:var(--red);font-family:var(--mono);
  font-size:9.5px;font-weight:600;letter-spacing:.1em;vertical-align:2px}
.now-list__tag{margin:4px 0 0;font-size:13px;color:var(--mid);line-height:1.4}
.now-list__sub{margin:4px 0 0;font-size:13px;color:var(--dim);line-height:1.4}
.now-list__value{font-family:var(--mono);font-size:12.5px;color:var(--mid);flex:none;
  font-variant-numeric:tabular-nums}

.now-hub{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:14px}
.now-hub li{border:1px solid var(--line);border-radius:11px;padding:17px 18px}
.now-hub a{font-family:var(--display);color:var(--ink);text-decoration:none;font-size:17px;font-weight:650}
.now-hub a:hover{color:var(--accent);text-decoration:underline}
.now-hub p{margin:7px 0 0;color:var(--mid);font-size:13.5px;line-height:1.5}
.now-hub__stamp{display:block;margin-top:9px;font-family:var(--mono);font-size:11px;color:var(--dim)}

.foot{margin-top:56px;border-top:1px solid var(--line);padding:26px 0 44px;font-size:13.5px;color:var(--mid)}
.foot__top{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:baseline}
.foot a{color:inherit;text-decoration:none}
.foot a:hover{color:var(--ink);text-decoration:underline}
.copy{margin-top:18px;font-family:var(--mono);font-size:11px;color:var(--dim)}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ── 광고 자리 ────────────────────────────────────────────────────────
   자리를 먼저 잡고 나중에 채웁니다. min-height 를 미리 주지 않으면 광고가
   늦게 도착하면서 읽던 문단을 아래로 밀어냅니다. 그게 CLS 고, Core Web
   Vitals 에서 제일 잃기 쉬운 점수입니다. 슬롯 ID 가 비어 있는 지금은 회색
   상자로 남고, ID 를 채우는 날 같은 높이에 광고가 들어옵니다. */
/* 붙일 광고가 있을 때만 자리를 그립니다. ads.js 가 <html data-ads="on"> 을 답니다.
   슬롯 ID 가 없는 동안 높이만 잡아 두면 화면 하나 크기의 빈 회색 상자가 남습니다.
   그건 CLS 방어가 아니라 그냥 손해입니다. */
.ad,.anchor{display:none}
:root[data-ads=on] .ad:not([data-noslot]){display:flex}
:root[data-ads=on] .anchor:not([data-noslot]){display:flex}
.ad{align-items:center;justify-content:center;margin:34px auto;
  background:var(--sunk);border:1px solid var(--hair);border-radius:10px;
  overflow:hidden;max-width:100%}
.ad::before{content:attr(data-fallback);font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;color:var(--dim)}
.ad[data-mounted]::before{content:none}
.ad--rect{min-height:280px;width:336px}
.ad--infeed{min-height:280px;width:336px}
@media(max-width:400px){.ad--rect,.ad--infeed{width:300px;min-height:250px}}

/* 하단 고정 띠. 본문 위에 겹치므로 본문 끝에 그만큼 여백을 둡니다.
   닫기 버튼이 없는 고정 광고는 애드센스 정책 위반이기도 하지만, 그전에
   읽는 사람이 화면의 일부를 영영 잃습니다. */
.anchor{position:fixed;left:0;right:0;bottom:0;z-index:60;
  align-items:center;justify-content:center;
  min-height:56px;background:var(--panel);border-top:1px solid var(--line)}
.anchor::before{content:attr(data-fallback);font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;color:var(--dim)}
.anchor[data-mounted]::before{content:none}
.anchor.is-hidden{display:none}
.anchor__x{position:absolute;top:-13px;right:10px;width:26px;height:26px;
  border:1px solid var(--line);border-radius:50%;background:var(--panel);
  color:var(--mid);font-size:15px;line-height:1;cursor:pointer}
:root[data-ads=on] .foot{padding-bottom:104px}

/* ── 글 끝의 행동 유도 ────────────────────────────────────────────── */
.cta{margin-top:34px;padding:20px 22px;border:1px solid var(--line);
  border-radius:12px;background:var(--accent-soft)}
.cta p{margin:0 0 14px;font-size:14.5px;color:var(--mid)}
/* --accent 를 면으로 쓰면 안 됩니다. 다크에서 --accent 는 어두운 바탕에
   읽히도록 밝힌 "글자색"이라, 그 위에 흰 글씨를 얹으면 2.4:1 이 됩니다.
   면과 그 위 글자는 짝지어 둔 --btn-bg / --btn-fg 를 씁니다. */
.cta__go{display:inline-block;padding:10px 18px;border-radius:8px;
  background:var(--btn-bg);color:var(--btn-fg);font-size:14px;font-weight:600;
  text-decoration:none;cursor:pointer}
.cta__go:hover{filter:brightness(1.08)}
.cta__go:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* 사진이 붙은 자리. 사진 왼쪽, 글과 버튼 오른쪽.

   칸 크기를 aspect-ratio 로 미리 잡아 둡니다. 사진이 늦게 와도 아래 글이
   밀리지 않게 하려는 것입니다 - 글 끝이라 밀릴 것이 별로 없어 보이지만,
   바로 아래 출처 줄과 "다음 읽을 것" 이 통째로 내려가면 그게 CLS 입니다. */
.cta--shot{display:grid;gap:18px;grid-template-columns:200px 1fr;align-items:start}
.cta__shot{margin:0}
/* height:auto 를 빼면 안 됩니다. aspect-ratio 는 한쪽이 auto 일 때만 칸을
   잡습니다. 빼면 HTML 의 height="480" 이 그대로 쓰여서 200x480 짜리 세로
   띠가 됩니다 - 소스만 봐서는 멀쩡해 보이고 브라우저에서 재 봐야 보입니다. */
.cta__shot img{display:block;width:100%;height:auto;aspect-ratio:4/3;
  object-fit:cover;border-radius:8px;background:var(--sunk)}
.cta__shot--nocrop img{object-fit:contain}
/* .cta 안은 바탕이 --accent-soft 라 --dim 이 4.3:1 로 모자랍니다.
   출처 표기는 라이선스 조건이므로 읽히지 않으면 표기한 것이 아닙니다. */
.cta__shot figcaption{margin-top:6px;font-family:var(--mono);font-size:10px;
  line-height:1.45;letter-spacing:.02em;color:var(--mid)}
.cta__shot figcaption a{color:inherit}

/* 좁은 화면에서는 200px 짜리 사진 칸이 글을 두 단어씩 끊어 놓습니다.
   위아래로 세웁니다. */
@media (max-width:559px){
  .cta--shot{grid-template-columns:1fr}
  .cta__shot img{aspect-ratio:16/9}
}


/* ── 다음 읽을 것 ─────────────────────────────────────────────────── */
.more{max-width:none;margin:44px auto 0;padding-top:26px;
  border-top:1px solid var(--line)}
.more h2{font-size:12px;font-family:var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);margin:0 0 16px}
.more ul{list-style:none;margin:0;padding:0;display:grid;gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.more li{font-size:13.5px;color:var(--dim);line-height:1.55}
.more a{color:var(--ink);text-decoration:none}
.more a strong{font-size:15.5px;font-weight:600}
.more a:hover strong{color:var(--accent);text-decoration:underline}


/* ── 즐겨찾기 버튼과 목록 ─────────────────────────────────────────
   글 제목 바로 아래에 붙습니다. 다 읽고 나서가 아니라 읽기 전에 담는
   물건이라, 결정하는 자리 옆에 있어야 합니다. */
.save{display:inline-flex;align-items:center;gap:7px;margin:14px 0 0;
  height:36px;padding:0 14px;border-radius:var(--r-pill);cursor:pointer;
  border:1px solid var(--line);background:var(--panel);color:var(--mid);
  font-family:var(--sans);font-size:13px;font-weight:560;
  transition:border-color .18s var(--ease),color .18s var(--ease),background .18s var(--ease)}
.save:hover{border-color:var(--mid);color:var(--ink)}
.save:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* 담긴 상태는 색으로만 말하지 않습니다. 글자도 "Saved" 로 바뀌고
   aria-pressed 도 함께 바뀝니다 - 색을 못 보는 사람에게도 전해져야 합니다. */
.save--on{background:var(--mint-soft);border-color:transparent;color:var(--mint-deep)}
.save--on svg{fill:currentColor}
.save--on:hover{color:var(--mint-deep)}

.saved__empty{margin-top:18px;color:var(--mid)}
.saved__ul{list-style:none;margin:20px 0 0;padding:0}
.saved__ul li{display:grid;grid-template-columns:1fr auto;align-items:baseline;
  gap:4px 12px;padding:14px 0;border-top:1px solid var(--hair)}
.saved__ul li:first-child{border-top:0}
.saved__ul a{font-size:16.5px;font-weight:600;letter-spacing:-.02em;color:var(--ink);
  text-decoration:none}
.saved__ul a:hover{color:var(--accent)}
.saved__when{grid-column:1;font-family:var(--mono);font-size:11px;color:var(--dim);
  letter-spacing:.04em}
.saved__x{grid-column:2;grid-row:1/3;align-self:center;width:30px;height:30px;flex:none;
  border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--dim);
  font-size:17px;line-height:1;cursor:pointer}
.saved__x:hover{border-color:var(--red);color:var(--red)}
.saved__x:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.install__ios{margin:0;padding:13px 15px;border:1px solid var(--line);border-radius:14px;
  background:var(--sky-soft);color:var(--sky-ink);font-size:14.5px}
#installHere{margin-top:16px}

/* ── 상단바의 저장·설치 버튼 ───────────────────────────────────────
   테마 버튼(.tbtn)과 같은 크기·모양이라 한 줄에 나란히 섭니다. */
.tbtn--save{flex:none}
.tbtn--save:hover{border-color:var(--mid);color:var(--ink)}
/* 담긴 상태. 색만으로 말하지 않습니다 - aria-pressed 가 같이 바뀌고
   테두리 모양도 달라집니다. */
.tbtn--save[aria-pressed='true']{background:var(--mint-soft);border-color:transparent;
  color:var(--mint-deep)}
.tbtn--save[aria-pressed='true'] svg{fill:currentColor}
.tbtn--install{width:auto;padding:0 13px;font-size:12.5px;font-weight:560;
  background:var(--btn-bg);border-color:transparent;color:var(--btn-fg);white-space:nowrap}
.tbtn--install:hover{background:color-mix(in srgb,var(--btn-bg) 84%,var(--ink));
  color:var(--btn-fg)}
/* 좁은 화면에서는 글자를 빼고 아이콘만 남깁니다. 브랜드 이름과 버튼 셋이
   390px 안에서 겹치기 때문입니다. */
@media(max-width:560px){
  .tbtn--install{width:30px;padding:0;font-size:0}
  .tbtn--install::before{content:'↓';font-size:14px;font-weight:700}
}
/* 즐겨찾기 개수. 메뉴의 Saved 옆에 붙습니다. */
.nav__count{display:inline-block;min-width:17px;margin-left:5px;padding:0 4px;
  border-radius:var(--r-pill);background:var(--mint-soft);color:var(--mint-deep);
  font-family:var(--mono);font-size:10px;font-weight:600;text-align:center;
  vertical-align:1px}

/* 푸터의 문의 줄. 링크가 본문 링크와 같은 파랑이면 판권면에 묻히므로
   글자만 살짝 키웁니다. 메일 주소는 줄바꿈될 수 있게 아무것도 강제하지
   않습니다 - 좁은 화면에서 넘치는 것보다 접히는 것이 낫습니다. */
.foot__mail{margin-top:18px;font-size:13.5px;color:var(--mid)}
.foot__mail a{color:var(--accent);text-decoration:none}
.foot__mail a:hover{text-decoration:underline}