/* Dokimi 첫 화면 · 이야기 페이지 — 브라우저 설정을 따르는 라이트(순백, 앱 라이트) · 다크(D-104, 앱 다크) 두 벌. 색은 tokens.css.
   배치는 D-98 · D-89 그대로. 지난 블러시 베이지 판(D-50)은 운영 전환 뒤 지난 결정. 그림 위에 글자 · 덮개 없음.
   명도 대비(WCAG): 라이트 글 #14161A/흰 18.1 · 로즈 #C2336D/흰 5.4 · 다크 글 #F4F4F6/#121214 17.4 · 로즈 #F08FBA 8.4.
   입력칸 경계(1.4.11): 흐린 글 — 라이트 #8A8E98/흰 3.4 · 다크 #8E8E96/#121214 5.7 */
.dk-cover-page {
  --cv-bg: var(--tk-bg);
  --cv-field-line: var(--tk-faint);  /* 입력칸 선(1px) */
  --cv-placeholder: var(--tk-faint); /* 입력칸 자리표시 글자 */
  --cv-ink: var(--tk-ink);           /* 제목 */
  --cv-label: var(--tk-rose);        /* 강조 라벨 */
  --cv-sub: var(--tk-ink2);          /* 보조 글자 */
  --cv-line: var(--tk-ink);          /* 대사 · 인용 글 */
  --cv-card: var(--tk-card);
  --dk-accent: var(--tk-rose);       /* 알림 받기 = 로즈 단추(D-104) */
  --dk-on-accent: var(--tk-on-rose);
  background: var(--cv-bg);
  overflow-x: clip;  /* 무엇이 삐져나와도 화면이 옆으로 밀리지 않게(안전망) */
}
html:has(.dk-cover-page) { overflow-x: clip; }
.dk-cover-page .dk-header { background: transparent; border-bottom: 0; width: 100%; max-width: 1200px; margin: 0 auto;
  box-sizing: border-box; }  /* 몸통이 flex 세로라 width 가 없으면 가운데로 줄어든다 */
.dk-cover-page main { width: 100%; }
.dk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── 첫 칸: 글 · 그림 ─────────────────────────────────────────── */
.dk-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 8px 20px 40px;
  max-width: 1200px; margin: 0 auto; box-sizing: border-box; }
.dk-hero > * { min-width: 0; }  /* WebKit 에서 그림의 본래 폭이 칸을 넓혀 화면이 옆으로 밀리던 것 */
/* 모바일 그림은 화면을 다 덮지 않게 — 폭 64% · 최대 270px, 가운데 */
.dk-hero-art { order: -1; margin: 0 auto; position: relative; padding-bottom: 36px; width: min(64vw, 270px); }
.dk-hero-text { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.dk-hero-title { margin: 0; font-size: 29px; line-height: 1.2; letter-spacing: -0.035em; font-weight: 800; color: var(--cv-ink); }
.dk-hero-title span { display: block; }
.dk-hero-sub { margin: 10px 0 0; font-size: 15px; font-weight: 600; color: var(--cv-ink); }
.dk-soon { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 10px;
  background: var(--cv-card); box-shadow: inset 0 0 0 1px var(--tk-line); color: var(--cv-ink); font-size: 13px; font-weight: 700; margin-top: 6px; }

/* 알림 받기 — 카드 면 입력칸 · 로즈 알약. 고지 글자는 보조색 */
.dk-cover-page .dk-notify label.dk-field { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.dk-cover-page .dk-notify input[type=email] { border-color: var(--cv-field-line); border-radius: 999px; padding: 0 20px; height: 48px; }
.dk-cover-page .dk-notify input[type=email]::placeholder { color: var(--cv-placeholder); opacity: 1; }
.dk-cover-page .dk-notify .dk-pill { height: 48px; padding: 0 20px; }
.dk-cover-page .dk-agree-all,
.dk-cover-page .dk-agree-item,
.dk-cover-page .dk-notify .dk-status,
.dk-cover-page .dk-receipt-title { color: var(--cv-ink); }
.dk-cover-page .dk-notify .dk-help,
.dk-cover-page .dk-agree-sub,
.dk-cover-page .dk-agree-more,
.dk-cover-page .dk-notify .dk-notice { color: var(--cv-sub); }
.dk-cover-page .dk-notify .dk-notice a { color: var(--cv-ink); }
.dk-cover-page .dk-more summary { color: var(--cv-ink); }

/* ── 그림 틀 D-98(layout cover.framesD98) — 둥근 사각으로 자르기, 꼬리 · 먹선 없음. 그림자 0 (높이/24) (높이/9),
   안쪽 흰 1px. 첫 화면 진행자 그림은 C(반경 30 · 데스크톱 40 + 말 칩), 이야기 카드 그림은 A(반경 18 · 데스크톱 28) ── */
.dk-frame { position: relative; display: block; overflow: hidden; background: #2A2140; outline: 1px solid rgba(255, 255, 255, .10);
  outline-offset: -1px; }
.dk-frame img, .dk-frame .dk-art-pending { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.dk-frame-hero { border-radius: 30px; aspect-ratio: 4 / 5; box-shadow: 0 14px 37px var(--tk-shadow); }
.dk-frame-card { border-radius: 18px; aspect-ratio: 3 / 4; box-shadow: 0 6px 16px var(--tk-shadow); }

/* 말 칩(C) — 진행자 그림에만. 알약(라이트 흰 · 다크 칩 면 + 1px 선)이 틀 밖으로 나간다, 로즈 세 점(D-104). 움직이지 않는 장식. 모바일 0.8배 */
.dk-talk { position: absolute; left: -13px; top: 24px; z-index: 1; display: flex; gap: 4px; padding: 10px 13px; border-radius: 18px;
  background: var(--tk-talk); box-shadow: inset 0 0 0 1px var(--tk-line), 0 6px 18px var(--tk-shadow); }
.dk-talk i { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--tk-rose); }
.dk-talk i:nth-child(2) { background: var(--tk-dot2); }
.dk-talk i:nth-child(3) { background: var(--tk-dot3); }

/* 새어 나온 카드 안 1(layout cover.leak) — 틀에 겹친다. 대사 세 줄, 셋째 줄만 글자 흐림, 오른쪽 아래 '엿보기' 알약(표시).
   수치는 데스크톱 기준이고 모바일은 --lk 0.78배 */
.dk-leak { --lk: .78; position: absolute; right: -18px; top: 68%; z-index: 1; width: calc(300px * var(--lk)); box-sizing: border-box;
  padding: calc(14px * var(--lk)) calc(16px * var(--lk)) calc(15px * var(--lk)); border-radius: calc(18px * var(--lk));
  background: var(--tk-card); box-shadow: 0 6px 20px var(--tk-shadow), inset 0 0 0 1px var(--tk-line);
  display: flex; flex-direction: column; }
.dk-leak-head, .dk-story-head { display: flex; align-items: center; gap: 5px; margin: 0; font-size: 11.5px; font-weight: 700; color: var(--cv-label); }
.dk-leak-head time, .dk-story-head time { margin-left: auto; color: var(--tk-faint); font-weight: 600; }
.dk-leak .dk-leak-head { gap: calc(5px * var(--lk)); font-size: calc(11.5px * var(--lk)); color: var(--tk-rose-ink); }
.dk-leak .dk-leak-head time { color: var(--tk-faint); }
.dk-lock { width: 10px; height: 12px; flex: none; }
.dk-leak .dk-lock { width: calc(10px * var(--lk)); height: calc(12px * var(--lk)); }
.dk-leak-line { margin-top: calc(6px * var(--lk)); font-size: calc(15px * var(--lk)); font-weight: 600; line-height: 1.45;
  letter-spacing: calc(-0.3px * var(--lk)); color: var(--tk-ink); }
.dk-leak-head + .dk-leak-line { margin-top: calc(8px * var(--lk)); }
.dk-leak-blur { filter: blur(calc(3.6px * var(--lk))); user-select: none; -webkit-user-select: none; }
.dk-leak-hint { align-self: flex-end; display: inline-flex; align-items: center; gap: calc(5px * var(--lk)); margin-top: calc(10px * var(--lk));
  height: calc(26px * var(--lk)); padding: 0 calc(10px * var(--lk)); border-radius: calc(13px * var(--lk)); background: var(--tk-rose-soft);
  color: var(--tk-rose); font-size: calc(12px * var(--lk)); font-weight: 800; pointer-events: none; }
.dk-eye { width: calc(14px * var(--lk)); height: calc(14px * var(--lk)); flex: none; }
.dk-bars { display: flex; flex-direction: column; gap: 6px; }
.dk-bars i { display: block; height: 9px; border-radius: 5px; background: var(--cv-line); width: 88%; }
.dk-bars i:nth-child(2) { width: 62%; }
.dk-bars i:nth-child(3) { width: 38%; }

/* ── 흐르는 소재 카드 띠 — 46초 한 바퀴, 올리면 멈춤, 동작 줄이기면 멈춘 채 옆으로 밀기 ─── */
/* 이야기 카드(앱 C2 와 같은 틀, 디자인 U-14 안 1 · glimi-apple 5d1b5fa). 크기는 변수 — 데스크톱이 바꾼다 */
.dk-strip { --dk-card-w: 330px; --dk-card-h: 196px; --dk-card-gap: 12px; --dk-card-r: 18px; --dk-card-k: 1;
  padding: 8px 0 44px; display: flex; flex-direction: column; gap: 12px; }
/* 줄은 잘라 보이고, 트랙은 cover.js 가 transform 으로 옮긴다(소수 픽셀이라 매끄럽다).
   손 끌기도 cover.js 가 받는다 — 세로 쓸기는 페이지 스크롤로 남긴다(touch-action: pan-y). */
.dk-strip-row { overflow: hidden; touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; }
.dk-strip-row.dk-dragging { cursor: grabbing; }
.dk-strip-track { display: flex; width: max-content; will-change: transform; }
.dk-strip-list { display: flex; gap: var(--dk-card-gap); margin: 0; padding: 0 calc(var(--dk-card-gap) / 2); list-style: none; }
.dk-strip img { -webkit-user-drag: none; pointer-events: none; }
.dk-strip a { -webkit-user-drag: none; }
.dk-strip-list > li { flex: none; }
.dk-scard { flex: none; display: flex; width: var(--dk-card-w); height: var(--dk-card-h); box-sizing: border-box;
  border-radius: var(--dk-card-r); overflow: hidden; background: var(--cv-card); box-shadow: inset 0 0 0 1px var(--tk-line); }
.dk-scard-art { flex: none; width: 36%; height: 100%; object-fit: cover; object-position: center 24%; background: #222; display: block; }
.dk-scard-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(5px * var(--dk-card-k));
  padding: calc(12px * var(--dk-card-k)) calc(13px * var(--dk-card-k)) calc(11px * var(--dk-card-k)); }
.dk-chips { display: flex; gap: 4px; flex-wrap: nowrap; }
.dk-chip { display: inline-flex; align-items: center; height: calc(21px * var(--dk-card-k)); padding: 0 calc(7px * var(--dk-card-k));
  border-radius: 6px; font-size: calc(10.5px * var(--dk-card-k)); font-weight: 800; background: var(--tk-chip); color: var(--tk-ink2);
  white-space: nowrap; }
.dk-chip-free { background: transparent; box-shadow: inset 0 0 0 1px var(--tk-rose); color: var(--tk-rose); }
/* 판 칩(D-88 '여자 시점') — 글 색 바탕에 바탕색 글자(라이트 먹/흰 · 다크 흰/먹, 앱과 같다). 성별 색은 쓰지 않는다 */
.dk-chip-variant { background: var(--tk-ink); color: var(--tk-bg); }
.dk-chip-extreme { background: var(--tk-rose); color: var(--tk-on-rose); height: auto; padding: 1px 6px; font-size: calc(9.5px * var(--dk-card-k)); }
.dk-scard-title { font-size: calc(17px * var(--dk-card-k)); font-weight: 800; letter-spacing: -0.5px; line-height: 1.22; color: var(--tk-ink);
  word-break: keep-all; overflow: hidden; }
.dk-scard-title span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }  /* 시드 '/' 두 줄 */
.dk-scard-line { font-size: calc(12px * var(--dk-card-k)); line-height: 1.45; color: var(--tk-ink2); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.dk-scard-fill { flex: 1; }
.dk-scard-cast { display: flex; align-items: center; gap: 7px; min-width: 0; margin: 0; }
.dk-members { display: flex; flex: none; align-items: center; }
.dk-members img, .dk-members i { width: calc(22px * var(--dk-card-k)); height: calc(22px * var(--dk-card-k)); border-radius: 50%;
  object-fit: cover; box-shadow: 0 0 0 2px var(--tk-card); margin-left: -7px; display: block; background: var(--tk-chip); }
.dk-members > :first-child { margin-left: 0; }
.dk-members i { display: inline-flex; align-items: center; justify-content: center; font-style: normal;
  font-size: calc(10px * var(--dk-card-k)); font-weight: 800; color: var(--tk-rose); }
.dk-members em { font-style: normal; margin-left: 5px; font-size: calc(10.5px * var(--dk-card-k)); font-weight: 700; color: var(--tk-faint); }
.dk-names { font-size: calc(11px * var(--dk-card-k)); font-weight: 700; color: var(--tk-ink); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; min-width: 0; }
.dk-level { display: flex; align-items: center; gap: 5px; font-size: calc(10px * var(--dk-card-k)); color: var(--tk-faint); white-space: nowrap; }
.dk-lstars { font-family: -apple-system, system-ui, sans-serif; font-size: calc(12px * var(--dk-card-k)); letter-spacing: 1px; }
.dk-lstars i { font-style: normal; color: var(--tk-star-off); }
.dk-lstars i.on { color: var(--tk-rose); }
/* 그림이 아직 없는 칸 — 먹 바탕 망점(자리 표시) */
.dk-art-pending { background: #231016 radial-gradient(rgba(255, 255, 255, .10) 1px, transparent 1.4px) 0 0 / 7px 7px; }

/* ── 이야기 카드(layout cover.storyCard) ───────────────────────── */
.dk-stories { --dk-card-k: 1.15; display: grid; grid-template-columns: 1fr; gap: 16px; padding: 0 20px 56px; max-width: 1200px; margin: 0 auto;
  box-sizing: border-box; }
.dk-story { display: grid; grid-template-columns: 116px 1fr; gap: 16px; background: var(--cv-card);
  border-radius: 24px; padding: 16px 16px 20px; }
.dk-story-art { position: relative; align-self: start; }
.dk-story-text { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dk-story-quote { margin: 2px 0 2px; font-size: 16px; line-height: 1.4; font-weight: 700; color: var(--cv-line); }
.dk-story-title { margin: 8px 0 0; font-size: 15px; font-weight: 800; color: var(--cv-line); }
.dk-story-title span { display: inline-block; }  /* 두 줄 제목의 반쪽씩은 끊지 않는다 */
.dk-story-level { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tk-ink2); }
.dk-story-note { margin: -4px 0 0; font-size: 12.5px; font-weight: 600; color: var(--cv-label); }

/* ── 데스크톱 ─────────────────────────────────────────────────── */
@media (min-width: 900px) {
  .dk-hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; gap: 48px; padding: 16px 64px 48px; }
  .dk-hero-art { order: 0; justify-self: end; margin: 0; width: min(100%, 440px); padding-bottom: 40px; }
  /* 그림 440 × 550 → 그림자 0 23 61. 말 칩 1배: 왼쪽 −16 · 위 30, 안쪽 12 × 16, 반경 22, 점 7 · 사이 5 */
  .dk-hero-title { font-size: 54px; }
  .dk-hero-sub { font-size: 17px; margin-top: 18px; }
  .dk-frame-hero { border-radius: 40px; box-shadow: 0 23px 61px var(--tk-shadow); }
  .dk-talk { left: -16px; top: 30px; gap: 5px; padding: 12px 16px; border-radius: 22px;
    box-shadow: inset 0 0 0 1px var(--tk-line), 0 8px 22px var(--tk-shadow); }
  .dk-talk i { width: 7px; height: 7px; }
  /* 새어 나온 카드 1배(폭 300) — 보드 자리(그림 왼쪽 밖 138 · 그림 위에서 68%) */
  .dk-leak { --lk: 1; right: auto; left: -138px; top: 68%; }
  .dk-strip { padding-bottom: 56px; }
  /* 데스크톱: 470 × 262, 간격 16, 글자 1.3배, 반경 23 — 두 줄 그대로 */
  .dk-strip { --dk-card-w: 470px; --dk-card-h: 262px; --dk-card-gap: 16px; --dk-card-r: 23px; --dk-card-k: 1.3; gap: 16px; }
  .dk-stories { grid-template-columns: 1fr 1fr; padding: 0 64px 72px; gap: 20px; }
  .dk-stories:has(> .dk-story:only-child) { grid-template-columns: minmax(0, 620px); justify-content: center; }  /* 한 장이면 가운데 */
  .dk-story { grid-template-columns: 180px 1fr; padding: 20px 22px 24px; gap: 22px; }
  .dk-story-quote { font-size: 20px; }
  .dk-story-title { font-size: 17px; }
  .dk-frame-card { border-radius: 28px; box-shadow: 0 10px 27px var(--tk-shadow); }
}

/* ── 이야기 페이지(/s/<id>) — D-104 storyDetail ──────────────────────
   모바일: 앱 소개 다크 — 위 그림이 화면 폭 그대로(4:5, 최대 화면의 62%) · 뒤로 원 · 아래 붙은 로즈 단추(안전 영역 포함).
   데스크톱 900 이상: 두 단 — 그림 460 × 690 반경 36 · 그림자 0 28 70, 오른쪽 한 열(최대 560). 아래 붙은 단추 대신 배지 */
.dk-story-body .dk-header { display: none; }            /* 모바일은 그림이 맨 위(앱 소개와 같다) — 데스크톱에서 다시 보인다 */
.dk-story-page { --dk-card-k: 1.3; /* 칩 · 별 크기(카드 틀 변수) */ display: grid; grid-template-columns: minmax(0, 1fr);
  max-width: 1100px; margin: 0 auto; padding: 0; box-sizing: border-box; }
.dk-story-page > * { min-width: 0; }
.dk-sp-art { position: relative; aspect-ratio: 4 / 5; max-height: 62vh; width: 100%; overflow: hidden; background: #2A2140; }
.dk-sp-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }
.dk-sp-back { position: absolute; left: 16px; top: calc(env(safe-area-inset-top) + 24px); display: inline-flex; align-items: center;
  justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--tk-scrim); color: var(--tk-ink);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.dk-sp-back svg { width: 22px; height: 22px; }
/* 모바일 이야기 상세는 머리가 없으니 테마 단추를 그림 오른쪽 위에(뒤로 원과 짝, 같은 흐린 면). 데스크톱은 머리에 */
.dk-sp-theme { position: absolute; right: 12px; top: calc(env(safe-area-inset-top) + 22px); }   /* 원 윗끝을 뒤로 원(+24)과 맞춘다 */
.dk-sp-theme .dk-theme-btn { margin: 0; color: var(--tk-ink); }
.dk-sp-theme .dk-theme-ring { width: 40px; height: 40px; background: var(--tk-scrim); box-shadow: none;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.dk-sp-theme .dk-theme-ring svg { left: 10px; top: 10px; }
.dk-sp-main { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px 8px; }
.dk-sp-title { margin: 0; font-size: 26px; line-height: 1.22; letter-spacing: -0.035em; font-weight: 800; color: var(--tk-ink); }
.dk-sp-title span { display: block; }
.dk-sp-line { margin: 0; font-size: 16px; line-height: 1.5; font-weight: 700; color: var(--tk-ink); }
.dk-sp-level { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--tk-faint); }
.dk-sp-me { margin: 4px 0 0; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px;
  background: var(--tk-rose-soft); font-size: 14px; line-height: 1.45; color: var(--tk-ink2); }
.dk-sp-me-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--tk-bg); color: var(--tk-rose); }
.dk-sp-me-ic svg { width: 14px; height: 14px; }
.dk-sp-me b { flex: none; color: var(--tk-ink); }
.dk-sp-mis { margin-top: 6px; }
.dk-sp-sit { margin: 4px 0 0; font-size: 15px; line-height: 1.75; color: var(--tk-ink2); }
.dk-sp-go { display: none; }
.dk-sp-go.is-prelaunch { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 12px;
  scroll-margin-top: 16px; }
.dk-story-page { padding-bottom: 32px; }
.dk-sp-go .dk-pill { height: 46px; padding: 0 22px; font-size: 15px; }
.dk-pill-ghost { background: transparent !important; color: var(--tk-ink) !important; box-shadow: inset 0 0 0 1.5px var(--tk-line); }
.dk-notify { scroll-margin-top: 16px; }
.dk-badge:focus-visible, .dk-sp-back:focus-visible { outline: 3px solid var(--tk-rose); outline-offset: 3px; }
/* 스토어 공식 배지(D-99) — 보이는 높이 48, 사이 12. Google Play PNG 는 위아래 투명 29px 이라 파일 높이 62.5 로 두고 당긴다 */
.dk-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.dk-badge { display: block; line-height: 0; }
.dk-badge img { display: block; height: 48px; width: auto; }
.dk-badge-googlePlay img { height: 62.5px; margin: -7.25px 0; }
@media (min-width: 900px) {
  .dk-story-body .dk-header { display: flex; }
  .dk-story-page { grid-template-columns: 460px minmax(0, 560px); gap: 56px; justify-content: center; padding: 24px 64px 80px;
    align-items: start; }
  .dk-sp-art { aspect-ratio: auto; width: 460px; height: 690px; max-height: none; border-radius: 36px;
    box-shadow: 0 28px 70px var(--tk-shadow); outline: 1px solid rgba(255, 255, 255, .10); outline-offset: -1px; }
  .dk-sp-back { display: none; }
  .dk-sp-theme { display: none; }
  .dk-sp-main { padding: 8px 0 0; gap: 14px; }
  .dk-sp-title { font-size: 46px; line-height: 1.15; }
  .dk-sp-line { font-size: 20px; }   /* 인용은 글자색 — 로즈는 이름 형광펜 하나(D-123, D-104 인용 로즈 대체) */
  .dk-sp-sit { font-size: 17px; }
  .dk-sp-mis .dk-pcard-h { font-size: 13px; }
  .dk-sp-mis .dk-pcard-mis { font-size: 16px; }
  .dk-sp-mis .dk-pcard-mis i { width: 24px; height: 24px; font-size: 12.5px; }
  .dk-sp-go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 12px; }
  .dk-sp-go-cap { font-size: 13.5px; color: var(--tk-faint); }
}
/* 띠 카드 → 이야기 페이지 링크 */
a.dk-scard { color: inherit; text-decoration: none; }

/* ── 아래 두 이야기 — 펼친 소개(디자인 D-89, layout dokimi.cover.pair) ─────────────────
   데스크톱: 가운데 1100 폭 두 장(540 · 사이 20 · 같은 높이), 위 48 · 아래 56. 모바일: 한 줄 한 장, 사이 16.
   카드: 흰 면 · 반경 24 · 여백 24(모바일 18) · 그림자. 그림 196×250(모바일 118×150) 말풍선 틀(와인 선 2.5) */
.dk-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 0 20px 56px; max-width: 1100px; margin: 0 auto;
  box-sizing: border-box; }
.dk-pcard { --dk-card-k: 1.15; display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 24px;
  background: var(--cv-card); box-shadow: inset 0 0 0 1px var(--tk-line); color: inherit; text-decoration: none; min-width: 0; }
.dk-pcard:focus-visible { outline: 3px solid var(--cv-label); outline-offset: 3px; }
.dk-pcard-top { display: flex; gap: 14px; align-items: flex-start; }
.dk-pcard-art { flex: none; display: block; position: relative; width: 118px; }
/* 이야기 카드 그림 A(D-98) — 118 × 150 · 반경 18 · 그림자 0 6 16(데스크톱 196 × 250 · 28 · 0 10 27) */
.dk-frame-pair { width: 118px; height: 150px; border-radius: 18px; box-shadow: 0 6px 16px var(--tk-shadow); }
.dk-pcard-head { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; --dk-card-k: 1; }
.dk-pcard-foot .dk-chip-extreme { display: none; }   /* 극한은 위 칩 줄에만(보드) */
.dk-pcard .dk-names { font-size: 13px; }
.dk-chip-hot { background: var(--tk-rose); color: var(--tk-on-rose); }
.dk-pcard-title { font-size: 19px; line-height: 1.25; font-weight: 800; letter-spacing: -0.03em; color: var(--cv-ink); }
.dk-pcard-title span { display: block; }
.dk-pcard-me { display: flex; gap: 6px; align-items: flex-start; padding: 8px 10px; border-radius: 12px; background: var(--tk-rose-soft);
  color: var(--cv-label); font-size: 12.5px; line-height: 1.45; }
.dk-pcard-me svg { flex: none; width: 14px; height: 14px; margin-top: 2px; }
.dk-pcard-me b { flex: none; color: var(--cv-ink); }
.dk-pcard-me span { color: var(--tk-ink2); }
/* 인용 줄 · 화자(D-123) — 이야기 페이지 인용 줄(.dk-sp-line)과 같은 글자, 화자는 12.5 흐린 한 줄 */
.dk-pcard-line { font-size: 16px; line-height: 1.5; font-weight: 700; color: var(--tk-ink); }
.dk-pcard-from { margin-top: -4px; font-size: 12.5px; color: var(--tk-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-pcard-sit { font-size: 14px; line-height: 1.62; color: var(--tk-ink2); display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; overflow: hidden; }   /* 인용 줄만큼 길어져 세 줄까지(D-123) */
.dk-pcard-sec { display: flex; flex-direction: column; gap: 6px; }
.dk-pcard-h { font-size: 11.5px; font-weight: 800; color: var(--tk-faint); }
.dk-pcard .dk-members img, .dk-pcard .dk-members i { width: 26px; height: 26px; }
.dk-pcard-mis { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--tk-ink); }
.dk-pcard-mis i { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  border-radius: 50%; background: var(--tk-chip); font-style: normal; font-size: 11px; font-weight: 800; color: var(--tk-ink2); }
.dk-pcard-foot { margin-top: auto; display: flex; align-items: center; gap: 6px; padding-top: 12px; border-top: 1px solid var(--tk-line);
  font-size: 12px; color: var(--tk-faint); }
.dk-pcard-go { margin-left: auto; font-size: 13px; font-weight: 800; color: var(--tk-rose); white-space: nowrap; }
@media (min-width: 900px) {
  .dk-pair { grid-template-columns: repeat(2, minmax(0, 540px)); justify-content: center; gap: 20px; padding: 48px 64px 56px; }
  .dk-pcard { padding: 24px; }
  .dk-pcard-top { gap: 20px; }
  .dk-pcard-art { width: 196px; }
  .dk-frame-pair { width: 196px; height: 250px; border-radius: 28px; box-shadow: 0 10px 27px var(--tk-shadow); }
  .dk-pcard-title { font-size: 22px; }
  .dk-pcard-line { font-size: 20px; }
  .dk-pcard-sit { -webkit-line-clamp: 3; }
}

/* ── 앱에서 이용해 주세요 · dokimi.me/app(디자인 D-99 ④) ─────────────────────────────── */
.dk-appOnly { max-width: 520px; margin: 0 auto; padding: 48px 24px 64px; box-sizing: border-box; display: flex; flex-direction: column;
  align-items: flex-start; gap: 16px; }
.dk-appOnly-t { margin: 0; font-size: 30px; line-height: 1.25; font-weight: 800; letter-spacing: -0.03em; color: var(--cv-ink); }
.dk-appOnly-b { margin: 0; font-size: 16px; line-height: 1.6; color: var(--cv-sub); }
.dk-stores { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
/* 스토어 공식 배지(dokimi.webPlay.badges) — 파일 그대로, 보이는 높이 48 · 둘레 여백 12 · 변형 금지.
   Google Play PNG 는 위아래 29px 가 투명(보이는 배지 646×192)이라 파일 높이 62.5 로 두고 투명 몫만큼 당긴다 */
.dk-stores { align-items: center; }
.dk-store { display: block; line-height: 0; }
.dk-store img { display: block; height: 48px; width: auto; }
.dk-store-googlePlay img { height: 62.5px; margin: -7.25px 0; }
.dk-store:focus-visible { outline: 3px solid var(--cv-label); outline-offset: 4px; border-radius: 8px; }
.dk-appOnly-qr { display: none; margin: 8px 0 0; }
.dk-appOnly.is-prelaunch .dk-notify { max-width: 420px; }
@media (min-width: 900px) { .dk-appOnly.is-prelaunch .dk-notify { text-align: left; } }
.dk-appOnly-browse { margin-top: 8px; font-size: 15px; font-weight: 800; color: var(--cv-label); }
@media (min-width: 900px) {
  .dk-appOnly { align-items: center; text-align: center; padding-top: 72px; }
  .dk-stores { justify-content: center; }
  /* QR(dokimi.webPlay.qr): 배지 줄 아래 26 · 흰 판 132(SVG 에 조용한 테두리 16 포함) · 모서리 12 · 판 오른쪽 16 에 설명 */
  .dk-appOnly-qr { display: flex; align-items: center; gap: 16px; margin: 10px 0 0; text-align: left; }
  .dk-appOnly-qr img { display: block; width: 132px; height: 132px; border-radius: 12px; image-rendering: pixelated; }
  .dk-appOnly-qr figcaption { max-width: 220px; font-size: 14px; line-height: 1.5; color: var(--cv-sub); }
}

/* ── 앱 화면(스토어 스크린숏) 줄 — 두 이야기(.dk-pair) 다음(디자인 site-order 9/28). 카드 띠와 같은 흐르는 줄(cover.js, .dk-strip-row),
   제목 없이 그림 속 캡션이 말한다. 크기 · 모양은 site-shots 그대로(폰 216 · 데스크톱 264, 반경 18 · 22, 1px 선 + 그림자) ── */
.dk-shots { position: relative; padding: 0 0 16px; }
.dk-shots-list { display: flex; gap: 12px; margin: 0; padding: 4px 6px 24px; list-style: none; }
.dk-shots-list > li { flex: none; }
.dk-shot { display: block; padding: 0; border: 0; background: none; border-radius: 18px; cursor: zoom-in; -webkit-tap-highlight-color: transparent; }
.dk-shot:focus-visible { outline: 3px solid var(--tk-rose); outline-offset: 3px; }
.dk-shots-list img { display: block; width: 216px; height: auto; aspect-ratio: 528 / 1148; border-radius: 18px; background: var(--tk-card);
  box-shadow: 0 0 0 1px var(--tk-line), 0 10px 26px var(--tk-shadow); -webkit-user-drag: none; pointer-events: none; }
@media (min-width: 900px) {
  .dk-shots { padding-bottom: 24px; }
  .dk-shots-list { gap: 20px; padding: 4px 10px 28px; }
  .dk-shot { border-radius: 22px; }
  .dk-shots-list img { width: 264px; border-radius: 22px; }
}

/* 크게 보기 — 검정 .92 덮개, 그 장을 화면 높이 88% 까지 가운데. 옆으로 넘기면 다음 장(스크롤 스냅) */
.dk-lb { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .92); }
.dk-lb[hidden] { display: none; }
html.dk-lb-open { overflow: hidden; }
.dk-lb-list { display: flex; height: 100%; margin: 0; padding: 0; list-style: none; overflow-x: auto; overscroll-behavior: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; touch-action: pan-x; }
.dk-lb-list::-webkit-scrollbar { display: none; }
.dk-lb-list > li { flex: 0 0 100%; display: flex; align-items: center; justify-content: center; scroll-snap-align: center; scroll-snap-stop: always; }
.dk-lb-list img { display: block; height: 88vh; height: 88dvh; width: auto; max-width: 92vw; object-fit: contain; border-radius: 22px; }
.dk-lb-close, .dk-lb-nav { position: absolute; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; }
.dk-lb-close svg, .dk-lb-nav svg { width: 20px; height: 20px; }
.dk-lb-close { top: calc(12px + env(safe-area-inset-top)); right: 12px; }
.dk-lb-close:focus-visible, .dk-lb-nav:focus-visible { outline: 3px solid var(--tk-rose); outline-offset: 2px; }
.dk-lb-nav { display: none; top: calc(50% - 22px); }
.dk-lb-prev { left: 24px; }
.dk-lb-next { right: 24px; }
@media (min-width: 900px) and (hover: hover) {
  .dk-lb-nav { display: flex; }
  .dk-lb-nav[disabled] { opacity: 0; pointer-events: none; }
}

/* ── 알림 신청(9/28, 첫 화면에서 맨 아래로) — 폭 560 가운데. 제목 '출시 알림 받기' 24/800 → 폼 그대로 → 곧 App Store에서 ── */
.dk-notify-sec { max-width: 560px; margin: 0 auto; padding: 40px 20px 120px; box-sizing: content-box; scroll-margin-top: 16px; }
.dk-notify-title { margin: 0 0 16px; font-size: 24px; line-height: 1.3; font-weight: 800; letter-spacing: -0.02em; color: var(--cv-ink); }
.dk-notify-sec .dk-soon { margin-top: 20px; }
@media (min-width: 900px) { .dk-notify-sec { padding: 56px 20px 88px; } }
/* 데스크톱은 이 구획이 첫 화면 글 단 안으로 옮겨진다(home.html 스크립트, 재빈 9/28) — 제목 · 한 줄 아래, 여백은 글 단 틈으로 */
@media (min-width: 900px) {
  .dk-hero-text .dk-notify-sec { max-width: 520px; width: 100%; margin: 12px 0 0; padding: 0; }
}


/* 이름 강조(D-123 · layout.json dokimi.playerNameHighlight) — '이야기 속 나'의 이름만 굵게 800, 글자 아래 42% 로즈 형광펜.
   다크(기본) #B8467A 불투명, 라이트 rgba(194,51,109,.28). 줄이 바뀌면 줄마다 따로 칠한다 */
.dk-name-hl { font-weight: 800; background: linear-gradient(transparent 58%, #B8467A 58%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
html[data-theme='light'] .dk-name-hl { background: linear-gradient(transparent 58%, rgba(194, 51, 109, .28) 58%); }

/* ── '나' 줄 · 멤버(D-125 캐릭터 정보 한 규칙, layout.json dokimi.memberInfo.site · introRow) ── */
.dk-sp-me p { margin: 0; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dk-sp-me-head { display: flex; align-items: center; gap: 6px; }
.dk-age { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 7px; background: var(--tk-chip);
  color: var(--tk-ink2); font-size: 11.5px; font-weight: 800; flex: none; }
.dk-mems { list-style: none; margin: 4px 0 0; padding: 0; }
.dk-mem { display: flex; gap: 12px; padding: 14px 0; }
.dk-mem + .dk-mem { border-top: 1px solid var(--tk-line); }
.dk-mem > img, .dk-mem > i { flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--tk-chip);
  display: flex; align-items: center; justify-content: center; font-style: normal; font-weight: 800; color: var(--tk-ink2); }
.dk-mem-body { flex: 1; min-width: 0; }
.dk-mem-body p { margin: 0; }
.dk-mem-name { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 15.5px; font-weight: 800; color: var(--tk-ink); }
.dk-mem-role { font-size: 12.5px; font-weight: 700; color: var(--tk-rose); }
.dk-mem-to { margin-top: 6px !important; display: flex; gap: 5px; font-size: 13.5px; line-height: 1.4; font-weight: 600; color: var(--tk-ink); }
.dk-mem-to > span:first-child { flex: none; display: flex; height: 1.4em; align-items: center; color: var(--tk-rose); }
.dk-mem-to svg { width: 13px; height: 13px; }
.dk-mem-to > span:last-child { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.dk-mem-intro { margin-top: 4px !important; font-size: 13.5px; line-height: 1.5; color: var(--tk-ink2); }
/* 데스크톱도 한 줄에 캐릭터 하나(재빈 9/28 — 두 단 격자는 좁은 칸에서 두세 번 꺾여 어정쩡했다). 글 단(최대 560) 안이라 소개 한 줄이
   앱 화면 폭 느낌으로 40자 안팎. 줄 사이 선은 모바일과 같다 */

/* ── 크리에이티브 — 준비 중(디자인 D-134 c645eb7 site-soon.css 그대로). 둘레(.dk-cre-wrap)는 두 스토리와 같은 폭 · 좌우 여백 ── */
.dk-cre-wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px 56px; box-sizing: border-box; }
@media (min-width: 900px) { .dk-cre-wrap { padding: 0 64px 88px; } }
/* '크리에이티브 — 준비 중' 구획(D-134) — 카드 한 장: 왼쪽 글, 오른쪽 표지 + 단톡 화면. 모든 규칙이 .dk-cre 아래 */
.dk-cre{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:40px;align-items:center;margin:96px 0 0;padding:40px;border-radius:28px;background:var(--tk-card);box-shadow:inset 0 0 0 1px var(--tk-line)}
.dk-cre-soon{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:13px;background:var(--tk-chip);color:var(--tk-ink2);font-size:13px;font-weight:800}
.dk-cre h2{margin:14px 0 0;font-size:34px;line-height:1.25;font-weight:800;letter-spacing:-.03em;color:var(--tk-ink);word-break:keep-all}
.dk-cre-sub{margin:10px 0 0;font-size:17px;line-height:1.55;color:var(--tk-ink2)}
.dk-cre-list{margin:22px 0 0;padding:0;list-style:none;counter-reset:c;display:flex;flex-direction:column;gap:12px}
.dk-cre-list li{counter-increment:c;display:flex;gap:10px;font-size:15.5px;line-height:1.55;color:var(--tk-ink);word-break:keep-all}
.dk-cre-list li::before{content:counter(c);flex:none;width:24px;height:24px;border-radius:50%;background:var(--tk-rose-soft);color:var(--tk-rose-ink);font-size:12.5px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:1px}
.dk-cre-art{position:relative;min-height:340px}
.dk-cre-cover{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:22px}
.dk-cre-room{position:absolute;right:28px;bottom:-24px;width:34%;height:auto;aspect-ratio:390/844;object-fit:cover;object-position:top;border-radius:22px;box-shadow:0 0 0 1px var(--tk-line)}
@media(max-width:900px){
  .dk-cre{grid-template-columns:1fr;gap:28px;padding:24px 20px 32px;margin-top:64px;border-radius:24px}
  .dk-cre h2{font-size:26px}
  .dk-cre-sub{font-size:15.5px}
  .dk-cre-art{min-height:0;padding-bottom:12%}
  .dk-cre-room{right:16px;width:38%;bottom:0}
}