/* 사이트 틀 — 확정 판(재빈 10/9 '사이트 저렇게 일단 확정하자', pub02 SITE-SPEC 공통 · gen_pub2.py 값). 모든 페이지 머리 · ☰ 시트 · 바닥.
   페이지 css(cover.css 등) 뒤에 실려 옛 머리 규칙을 덮는다. 글 크기는 사이트 최소 14(D-200) — SPEC 의 13 앱 받기는 14 */

/* 상단바: 붙어 있음 · 56 / 72 · 흐림 바탕 · 옆 16 / 64 */
.dk-page .dk-header, .dk-header { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: flex-start; gap: 36px;
  width: auto; max-width: none; height: 56px; min-height: 0; margin: 0; padding: 0 16px; border-bottom: 0; box-sizing: border-box;
  background: rgba(18, 18, 20, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
:root[data-theme='light'] .dk-header { background: rgba(255, 255, 255, .92); }
.dk-header .dk-wordmark { height: 32px; }   /* 앱 홈 머리 워드마크와 같은 높이(iOS 93 글자 26 × 1.225 = 31.85, 재빈 10/9 '로고 너무 작아') */
.dk-nav { display: none; gap: 26px; font-size: 15px; font-weight: 700; }
.dk-nav a { color: var(--tk-faint); text-decoration: none; }
.dk-nav a[aria-current] { color: var(--tk-ink); }
.dk-header-r { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.dk-header .dk-acct, .dk-header .dk-theme-btn:not(.dk-sheet-theme) { display: none; }   /* 폰은 ☰ 시트로 */
.dk-get-app { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 99px; background: var(--tk-ink); color: var(--tk-bg);
  font-size: 14px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.dk-menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-right: -8px; padding: 0; border: 0;
  background: none; color: var(--tk-ink); cursor: pointer; }
.dk-menu-btn svg { width: 24px; height: 24px; }
@media (min-width: 1000px) {
  .dk-page .dk-header, .dk-header { height: 72px; padding: 0 64px; }
  .dk-header .dk-wordmark { height: 34px; }
  .dk-nav { display: flex; }
  .dk-header .dk-acct, .dk-header .dk-theme-btn:not(.dk-sheet-theme) { display: inline-flex; }
  .dk-menu-btn { display: none; }
}
/* 이야기 페이지 폰은 그림이 맨 위였다(D-104) — 확정 판 상세(D-252)는 상단바 아래에서 그림이 시작(P4 에서 틀째 바꿈) */

/* ☰ 시트 — 아래에서 올라옴, 덮개 .5, 판 #1b1b20 · 반경 22 · 안쪽 10/20/30, 줄 17/700 */
.dk-sheet { position: fixed; inset: 0; z-index: 50; }
.dk-sheet[hidden] { display: none; }
.dk-sheet-dim { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); opacity: 0; transition: opacity .25s; }
.dk-sheet-pn { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 20px calc(30px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0;
  background: var(--tk-card); color: var(--tk-ink); transform: translateY(100%); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.dk-sheet.on .dk-sheet-dim { opacity: 1; }
.dk-sheet.on .dk-sheet-pn { transform: none; }
/* 열면 판 자체에 포커스(첫 줄에 테가 보이지 않게 — 검수 #1517), 줄 테는 키보드(:focus-visible)일 때만 */
.dk-sheet-pn:focus { outline: none; }
.dk-sheet-pn a:focus:not(:focus-visible), .dk-sheet-pn button:focus:not(:focus-visible) { outline: none; }
.dk-sheet-gr { display: block; width: 36px; height: 4px; margin: 0 auto 14px; border-radius: 2px; background: var(--tk-line); }
.dk-sheet-pn > a { display: block; padding: 13px 0; border-bottom: 1px solid var(--tk-line); font-size: 17px; font-weight: 700; color: var(--tk-ink); text-decoration: none; }
.dk-sheet-sm { display: flex; gap: 16px; padding-top: 12px; font-size: 14px; font-weight: 600; }
.dk-sheet-sm a, .dk-sheet .dk-sheet-theme { color: var(--tk-faint); text-decoration: none; }
.dk-sheet .dk-sheet-theme { width: auto; height: auto; margin: 0; padding: 0; font: inherit; }
@media (min-width: 1000px) { .dk-sheet { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .dk-sheet-dim, .dk-sheet-pn { transition: none; } }

/* 바닥: 본문과 같은 판(SPEC — 위 1px 선, 위 48 띄움), 줄마다 하나 · 14 faint · 링크 ink 밑줄. 데스크톱은 양 끝 */
.dk-footer { margin-top: 48px; padding: 24px 20px 36px; border-top: 1px solid var(--tk-line); background: var(--tk-bg);
  font-size: 14px; line-height: 1.8; color: var(--tk-faint); flex-direction: column; gap: 10px; }
.dk-footer .dk-wordmark { height: 22px; margin-bottom: 0; }
.dk-footer nav { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 10px 0; }
.dk-footer nav a { color: var(--tk-ink); text-decoration: underline; }
.dk-footer .dk-right { text-align: left; }
@media (min-width: 1000px) {
  .dk-footer { flex-direction: row; justify-content: space-between; padding: 32px 64px 44px; }
  .dk-footer .dk-right { text-align: right; }
}

/* 공식 배지(어디서든) — 원본 크기로 깔려 상자를 넘치던 것(재빈 10/9 캡처): 보이는 높이 48 · 폭 auto · 넘침 없음 */
.dk-badges { display: flex; flex-wrap: wrap; gap: 12px; }
.dk-badge img { display: block; height: 48px; width: auto; max-width: 100%; }

/* 앱 받기(/download) — 폰 한 열, 데스크톱 두 칸 나란히. 단계는 번호 없는 단추 줄(위에서부터 차례) */
.dk-dl { max-width: 760px; margin: 0 auto; padding: 24px 20px 48px; }
.dk-dl h1 { margin: 0 0 20px; font-size: 26px; font-weight: 800; letter-spacing: -.5px; }
.dk-dl-cols { display: grid; gap: 14px; }
.dk-dl-card { padding: 18px; border-radius: 18px; background: var(--tk-card); box-shadow: inset 0 0 0 1px var(--tk-line); }
.dk-dl-card h2 { margin: 0 0 14px; font-size: 18px; font-weight: 800; }
.dk-dl-steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.dk-dl-steps .sf-btn { display: flex; justify-content: center; width: 100%; box-sizing: border-box; margin: 0; }
.dk-dl-note { margin: 12px 0 0; font-size: 14px; color: var(--tk-faint); }
@media (min-width: 1000px) {
  .dk-dl { padding: 48px 0 72px; }
  .dk-dl h1 { font-size: 34px; }
  .dk-dl-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}