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

/* 머리 토큰: 높이 56(PC 도 — 11/07 밀도, 옛 56~64) · 워드마크 36(데스크톱 30 — 11/07 밀도, 옛 40) — 머리 · 붙는 칸(상세 그림 등)이 같이 쓴다.
   워드마크는 앱 머리(iOS 93 그린 높이 31.85)보다 크게 — 같은 눈금 32 로도 재빈 10/10 '아직 조그맣게'
   --dk-header-block = 붙어 있는 머리 전체 높이(폰 두 줄 56 + 탭 42 + 선 1, 데스크톱 한 줄) — 앵커가 머리 밑에 숨지 않게 */
:root { --dk-header-height: 56px; --dk-header-wordmark-height: 36px; --dk-header-tabs: 42px;
  --dk-header-block: calc(var(--dk-header-height) + var(--dk-header-tabs) + 1px); }
/* 폰 머리 N2(재빈 10/26 'n2', 디자인 통과): 붙어 있는 두 줄 — 윗줄 워드마크 · 앱 받기, 아랫줄 탭(스토리 · 소식 · 작가 모집 · 로그인).
   ☰ 시트는 없앴다(테마 · 문의 · 이용약관은 바닥). 면은 불투명 bg + 탭 줄 아래 1px 선(스크롤 때 본문과 갈림).
   탭 첫 글 왼쪽 = 워드마크 왼쪽 끝, 밑줄은 글 폭, 굵기는 넷 다 700(지금 탭만 굵히면 옮길 때 폭이 흔들림) */
.dk-page .dk-header, .dk-header { position: sticky; top: 0; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0 16px;
  width: auto; max-width: none; height: auto; min-height: 0; margin: 0; padding: 0 16px; border-bottom: 1px solid var(--tk-line); box-sizing: border-box;
  background: var(--tk-bg); }
.dk-header > a:first-child { display: flex; align-items: center; height: var(--dk-header-height); }
.dk-header .dk-wordmark { height: var(--dk-header-wordmark-height); width: auto; }
.dk-nav { order: 2; display: flex; flex-basis: 100%; gap: 22px; height: var(--dk-header-tabs); font-size: 15px; font-weight: 700; }
.dk-nav a { display: flex; align-items: center; border-bottom: 2px solid transparent; color: var(--tk-faint); text-decoration: none; white-space: nowrap; }
.dk-nav a[aria-current] { color: var(--tk-ink); border-bottom-color: var(--tk-ink); }
.dk-header-r { order: 1; margin-left: auto; display: flex; align-items: center; gap: 14px; }
.dk-header .dk-theme-btn { display: none; }   /* 폰은 바닥의 테마로 */
/* 로그인 · 로그아웃 자리(재빈 10/27 "웹 사이트에 로그인 버튼이랑 로그아웃 버튼도 없네", 디자인 web-auth 통과): 폰도 데스크톱처럼 머리 오른쪽
   계정 자리(앱 받기 왼쪽) — 손님 '로그인' 테 알약, 로그인 뒤 이름 원 32 → 메뉴(내 페이지 · 로그아웃). 탭 줄의 계정 탭은 뺀다(탭 셋).
   메뉴는 머리 오른쪽 끝에 맞추고 최소 폭 248(메일이 안 잘리게). 앱 안이면 서버가 계정 자리를 그리지 않는다 */
.dk-nav .dk-nav-acct { display: none; }
@media (max-width: 767px) {
  .dk-header-r { position: relative; }
  .dk-header .dk-acct { position: static; min-width: 34px; height: 34px; }
  .dk-header .dk-acct-menu { right: 0; min-width: 248px; }
}
/* 머리 단추 한 꼴(재빈 10/27 "상단 앱받기랑 로그인 버튼이 통일이 안됬고", 디자인 web-auth 고침 2 통과): 앱 받기 · 로그인(운영자 알약도) ·
   테마는 같은 chip 면 34 · 반경 17 · 14/700 · 글 ink, 테두리 · 그림자 없음. 강조는 두지 않는다(첫 화면 띠에 스토어 단추가 크게 있다).
   이름 원만 34 rose-soft 그대로. 폰 · 데스크톱 같다 */
.dk-get-app, .dk-header .dk-acct-pill { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 17px; border: 0; box-shadow: none;
  background: #FFFFFF; color: #14161A; font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; }
/* 고침 3(재빈 10/27 "다크일때 흰버튼 라이트일때 검은버튼 하면 되잖아" — 앞의 '둘다 흰색 배경'을 대신함): 앱 받기 · 로그인은
   다크에서 흰 면 · 어두운 글, 라이트에서 검은 면 · 흰 글. 테 · 그림자 없음. 테마 원 · 운영자 알약은 chip 그대로, 이름 원은 rose-soft */
:root[data-theme='light'] .dk-get-app, :root[data-theme='light'] .dk-header .dk-acct-pill { background: #14161A; color: #FFFFFF; }
.dk-header .dk-op-pill, :root[data-theme='light'] .dk-header .dk-op-pill { background: var(--tk-chip); color: var(--tk-ink); box-shadow: none; }
.dk-header .dk-acct-circle { width: 34px; height: 34px; }
.dk-header .dk-theme-btn { width: 34px; height: 34px; }
.dk-header .dk-theme-ring { width: 34px; height: 34px; box-shadow: none; background: var(--tk-chip); }
.dk-header .dk-theme-ring svg { left: 7px; top: 7px; }
.dk-header .dk-theme-btn:focus-visible .dk-theme-ring { box-shadow: 0 0 0 2px var(--tk-bg), 0 0 0 4px var(--tk-rose); }
.dk-get-app:focus-visible, .dk-header .dk-acct-pill:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--tk-bg), 0 0 0 4px var(--tk-rose); }
/* 데스크톱: 한 줄 · 56 · 흐림 바탕 · 옆 64 — 768 부터(재빈 11/07 맥북 창 "여전히 너무 커", 옛 1000 부터) */
@media (min-width: 768px) {
  /* PC 밀도(재빈 11/07 "pc 로 보면 다... 너무 큼지막하네 로고도 그렇고") — 머리 56(위 토큰) · 워드마크 30 · 탭 사이 24 · 단추 32, 옆은 본문 폭 1120(D-200) 가운데 */
  :root { --dk-header-wordmark-height: 30px; --dk-header-block: var(--dk-header-height); --dk-pc-side: max(64px, calc((100% - 1120px) / 2)); }
  .dk-page .dk-header, .dk-header { flex-wrap: nowrap; gap: 32px; height: var(--dk-header-height); padding: 0 var(--dk-pc-side); border-bottom: 0;
    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 > a:first-child { height: auto; }
  .dk-nav { order: 0; flex-basis: auto; gap: 24px; height: auto; }
  /* 로고 · 메뉴 글자 기준선 하나(재빈 11/07 "상단 로고랑 … 스토리, 소식, 스튜디오 … 어긋나보여서") — 워드마크 그림은 위 1/3 이 i 위 하트라
     상자 가운데로 두면 글자 몸통이 4px 낮다. 그림을 4px 올려 글자 몸통을 머리 가운데에, 메뉴는 그 기준선(머리 위에서 37)에 맞춤 */
  .dk-header > a:first-child { position: relative; top: -4px; }
  .dk-nav { align-self: stretch; align-items: flex-start; }
  .dk-nav a { line-height: 1; padding-top: 25px; }
  .dk-get-app, .dk-header .dk-acct-pill { height: 32px; padding: 0 13px; border-radius: 16px; }
  .dk-header .dk-acct-circle, .dk-header .dk-theme-btn, .dk-header .dk-theme-ring { width: 32px; height: 32px; }
  .dk-header .dk-theme-ring svg { left: 6px; top: 6px; }
  .dk-nav a { display: inline; border-bottom: 0; }
  .dk-nav a[aria-current] { border-bottom: 0; }
  .dk-header-r { order: 0; }
  .dk-header .dk-acct, .dk-header .dk-theme-btn { display: inline-flex; }
}
/* 이야기 페이지 폰은 그림이 맨 위였다(D-104) — 확정 판 상세(D-252)는 상단바 아래에서 그림이 시작(P4 에서 틀째 바꿈) */

/* 바닥: 본문과 같은 판(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, .dk-footer .dk-foot-theme { color: var(--tk-ink); text-decoration: underline; }
/* 바닥 '테마'(폰만 — ☰ 시트 자리를 옮김): 다른 바닥 링크와 같은 밑줄 글 */
.dk-footer .dk-foot-theme { display: inline; width: auto; height: auto; margin: 0; padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.dk-footer .dk-foot-theme:focus-visible { outline: 2px solid var(--tk-rose); outline-offset: 2px; }
.dk-footer .dk-right { text-align: left; }
@media (min-width: 768px) {
  .dk-footer { flex-direction: row; justify-content: space-between; padding: 32px var(--dk-pc-side) 44px; }
  .dk-footer .dk-right { text-align: right; }
  .dk-footer .dk-foot-theme { display: none; }
}

/* 공식 배지(어디서든) — 원본 크기로 깔려 상자를 넘치던 것(재빈 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%; }
/* 두 스토어 나란히(재빈 10/23, BADGES.md) — 파일 그대로, 보이는 검정 상자를 같은 높이 48 로. App Store SVG 는 상자 = 그림,
   Google Play PNG(646×250)는 위아래 투명 29px(보이는 상자 192/250) → 파일 높이 62.5 · 위아래 -7.25 로 당긴다(가로 여백 없음).
   사이 12 = 배지 높이 1/4(Apple · Google 여백 규칙). 375 폭: 155.6 + 12 + 161.5 = 329 ≤ 343 이라 한 줄. 더 좁으면 줄바꿈(작게 줄이지 않음 — 최소 높이 40 위) */
.dk-badges[data-dk-stores] { align-items: center; gap: 12px; margin: 0; }
.dk-badges[data-dk-stores] .dk-badge { display: block; flex: none; line-height: 0; }
.dk-badges[data-dk-stores] .dk-badge img { height: 48px; width: auto; max-width: none; margin: 0; }
.dk-badges[data-dk-stores] .dk-badge-googlePlay img { height: 62.5px; margin: -7.25px 0; }
/* 투명 여백만 걷은 판(google-play-ko-box.png 646×192, _stores badges(box=true)) — 높이 48 하나, 당기지 않는다 */
.dk-badges[data-dk-stores] .dk-badge-googlePlay img.gp-box { height: 48px; margin: 0; }
.dk-badges[data-dk-stores] .dk-badge:focus-visible { outline: 3px solid var(--tk-rose); outline-offset: 3px; border-radius: 8px; }

/* 앱 받기 v3(SPEC download-v3-2026-10-15 A): 폰은 기기 탭 + 단계 카드, 데스크톱(900~)은 두 열. 그림은 처음부터 펼침 */
.dk-dl { max-width:1120px; margin:0 auto; padding:24px 16px 56px; }
.dk-dl h1 { margin:0; font-size:28px; font-weight:800; letter-spacing:-.5px; }
.dk-dl-sub { margin:6px 0 18px; color:var(--tk-ink2); font-size:14px; }
.dk-dl-tabs { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:4px; margin:0 0 14px; padding:4px; border-radius:15px; background:var(--tk-chip); }
.dk-dl-tabs[hidden] { display:none; }
.dk-dl-tabs button { height:40px; border:0; border-radius:12px; background:none; color:var(--tk-faint); font:inherit; font-size:15px; font-weight:700; cursor:pointer; }
.dk-dl-tabs button[aria-selected="true"] { background:var(--tk-card); color:var(--tk-ink); font-weight:800; }
.dk-dl-tabs button:focus-visible { outline:2px solid var(--tk-ink); outline-offset:2px; }
.dk-dl-cols { display:grid; gap:28px; }
.dk-dl-card { min-width:0; scroll-margin-top:80px; }
.dk-dl-card h2 { margin:0 0 12px; font-size:20px; font-weight:800; }
/* 탭일 때 h2 는 눈에서만 가린다 — 화면 읽기 · 제목 순서(h1 → h2 → h3, Lighthouse heading-order)엔 남김 */
.dk-dl-tabbed .dk-dl-card h2 { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.dk-dl-tabbed .dk-dl-card:not(.is-on) { display:none; }
.dk-dl-steps { display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.dk-dl-step { padding:14px 16px; border:1px solid var(--tk-line); border-radius:18px; background:var(--tk-card); }
.dk-dl-step h3 { display:flex; align-items:center; gap:10px; margin:0; color:var(--tk-ink); font-size:15px; line-height:1.35; font-weight:800; }
.dk-dl-num { display:grid; flex:none; width:26px; height:26px; place-items:center; border-radius:50%; background:var(--tk-chip); color:var(--tk-ink); font-size:13px; font-weight:800; }
.dk-dl .dk-dl-btn { display:flex; height:50px; margin:12px 0 0; align-items:center; justify-content:center; gap:6px; border-radius:14px; background:var(--tk-rose); color:var(--tk-on-rose); font-size:16.5px; font-weight:800; text-decoration:none; }
.dk-dl-btn:focus-visible { outline:3px solid var(--tk-ink); outline-offset:3px; }
.dk-dl-ext { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.dk-dl-note { margin:8px 0 0; color:var(--tk-faint); font-size:13px; }
.dk-dl-pic { margin:10px 0 0; }
.dk-dl-pic summary { display:inline-block; color:var(--tk-faint); font-size:13px; font-weight:700; cursor:pointer; list-style:none; }
.dk-dl-pic summary::-webkit-details-marker { display:none; }
.dk-dl-pic[open] .dk-dl-pic-show, .dk-dl-pic:not([open]) .dk-dl-pic-hide { display:none; }
.dk-dl-pic img { display:block; width:100%; height:auto; margin-top:10px; box-sizing:border-box; border:1px solid var(--tk-line); border-radius:12px; }
@media (min-width:900px) {
 .dk-dl { max-width:1016px; padding:48px 20px 72px; }   /* 두 열(460 + 96 + 460) 폭 = 제목 왼쪽 끝이 열 왼쪽 끝 */
 .dk-dl h1 { font-size:34px; }
 .dk-dl-tabs { display:none; }
 .dk-dl-cols { grid-template-columns:repeat(2,minmax(0,460px)); justify-content:center; gap:96px; }
 .dk-dl-tabbed .dk-dl-card h2 { position:static; width:auto; height:auto; margin:0 0 12px; overflow:visible; clip-path:none; white-space:normal; }
 .dk-dl-tabbed .dk-dl-card:not(.is-on) { display:block; }
}

/* 로그인(/login) — 사이트 틀 안. 열 346, 돌아가기 글 링크 44 → 제목 26/800 → 공식 단추 44(알약, 사이 12) */
.dk-login { --g-bg: #131314; --g-line: #8E918F; --g-ink: #E3E3E3; --a-bg: #FFFFFF; --a-ink: #000000;
  max-width: 346px; margin: 0 auto; padding: 24px 20px 56px; box-sizing: content-box; }
:root[data-theme='light'] .dk-login { --g-bg: #FFFFFF; --g-line: #747775; --g-ink: #1F1F1F; --a-bg: #000000; --a-ink: #FFFFFF; }
/* 돌아가기 = 꺾쇠 16 + 온 곳 이름 글 링크(디자인 studio-back SPEC B, 재빈 11/07 — 옛 테두리 알약 대신). 눌림 칸 44, 제목과 20 */
.dk-login-back { display: inline-flex; align-items: center; gap: 4px; padding: 12px 0; color: var(--tk-ink2); text-decoration: none; font-size: 15px; font-weight: 700; line-height: 20px; }
.dk-login-back svg { flex: none; }
.dk-login h1 { margin: 20px 0 24px; font-size: 26px; font-weight: 800; letter-spacing: -.01em; }
.dk-login-btn { display: flex; align-items: center; justify-content: center; gap: 10px; height: 44px; border-radius: 999px; box-sizing: border-box;
  font-size: 14px; font-weight: 600; text-decoration: none; font-family: Roboto, inherit; }
.dk-login-btn + .dk-login-btn { margin-top: 12px; }
.dk-login-btn svg { width: 18px; height: 18px; flex: none; }
.dk-login-g { background: var(--g-bg); color: var(--g-ink); border: 1px solid var(--g-line); }
.dk-login-a { background: var(--a-bg); color: var(--a-ink); border: 1px solid var(--a-bg); }
.dk-login-k { background: #FEE500; color: rgba(0, 0, 0, .85); border: 1px solid #FEE500; }   /* 카카오 공식 꼴(두 테마 같음, 11/04 QA F4) */
.dk-login-err { margin: 14px 0 0; font-size: 14px; color: var(--tk-danger); }


/* 스토어 단추 둘(홈 · 상세): 보이는 몸통 48 · 폭 161.5 로 같게. Play 그림은 위아래 투명 여백이 있어 62.5 로 깔고 -7.25 씩 당김 */
.dk-download-badges { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.dk-download-badges a { flex:none; text-decoration:none; }
.dk-download-play img { display:block; height:62.5px; width:auto; margin:-7.25px 0; }
.dk-download-iphone { display:inline-flex; box-sizing:border-box; width:161.5px; height:48px; align-items:center; justify-content:center; gap:9px; padding:0 12px; border-radius:7px; box-shadow:inset 0 0 0 1px #A6A6A6; background:#000; color:#fff; font-family:SUIT, sans-serif; }
.dk-download-iphone img { display:block; flex:none; height:29px; width:auto; }
.dk-download-iphone span { display:grid; gap:1px; white-space:nowrap; line-height:1.08; }
.dk-download-iphone b { font-size:15.5px; font-weight:700; letter-spacing:-.2px; }
.dk-download-iphone small { font-size:11.5px; font-weight:500; }
.dk-download-badges a:focus-visible { outline:3px solid var(--tk-rose); outline-offset:4px; }

/* 배지 쌍 자리(재빈 10/23) — 앱 받기 · 체험단 끝 · 코드 결과 · 설문 끝. 가운데 맞춤 화면은 배지도 가운데 */
.dk-dl-stores { margin: 16px 0 8px; }
.jn-stores, .dk-rl-stores { display: flex; justify-content: center; width: 100%; }
.jn-stores { margin: 12px 0 16px; }
.jn-stores .dk-badges, .dk-rl-stores .dk-badges { justify-content: center; }
.sf-done-store .dk-badges { justify-content: center; }