/* 이야기 상세 — 확정 판(재빈 10/9, pub02 SITE-SPEC 2절 · D-252 사이트판 · detail.html 값). 글 크기 최소 14(D-200):
   SPEC 짧은 제목 12 · 이름 12 · 관계 11.5 · 소개 12.5 · 결말 줄 12 → 14. 폰 옆 여백 20, 데스크톱(1000~) 오른쪽 그림 + 왼쪽 글 칸 560 */
.dk-sd-page main { padding-bottom: 0; }
/* 면 — 다크는 card(SPEC), 라이트는 card 가 바탕과 같은 흰색이라 칩 면으로(대사 상자는 그 위 흰 바탕) */
.dk-sd { --sd-surf: var(--tk-card); --sd-q: var(--tk-chip); }
:root[data-theme='light'] .dk-sd { --sd-surf: var(--tk-chip); --sd-q: var(--tk-bg); }
.dk-sd-page { padding-bottom: 136px; }   /* 바닥까지 내려도 고정 막대가 바닥 글을 덮지 않게 */

/* 머리 그림 — 상단바 아래에서 시작, 390 × 506 비율, 아래 24% 바탕색으로 녹임 */
.dk-sd-head { width: 100%; aspect-ratio: 390 / 506; background: var(--tk-chip) 50% 15% / cover no-repeat;
  -webkit-mask-image: linear-gradient(#000 76%, transparent); mask-image: linear-gradient(#000 76%, transparent); }

.dk-sd-inf { padding: 0 20px; }
.dk-sd-title { margin: 8px 0 0; font-size: 24px; font-weight: 800; line-height: 1.3; letter-spacing: -.5px; }
.dk-sd-title span { display: block; }
.dk-sd-short { margin: 6px 0 0; font-size: 14px; font-weight: 700; color: var(--tk-rose); }
.dk-sd-hook { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--tk-ink2); }
.dk-sd-hook .dk-name-hl { color: var(--tk-rose); font-weight: 700; }
.dk-sd-tags { display: flex; gap: 6px; margin: 12px -20px 0; padding: 0 20px; overflow-x: auto; scrollbar-width: none; }
.dk-sd-tags span { flex: none; padding: 5px 10px; border-radius: 99px; background: var(--tk-chip); color: var(--tk-ink2); font-size: 14px; }
.dk-sd-auth { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; padding: 10px 12px; border-radius: 14px; background: var(--sd-surf); font-size: 14px; }
.dk-sd-auth img { width: 28px; height: 28px; border-radius: 8px; object-fit: cover; }

.dk-sd-sec { margin: 30px 0 12px; font-size: 15px; font-weight: 800; }
.dk-sd-n { color: var(--tk-faint); font-weight: 700; }

/* 단톡 상자(앱 상세와 같은 꼴) — 면 위 안쪽 16, 프롤로그 줄 14 ink2 → 가는 선 → 단톡 줄 */
.dk-sd-box { padding: 14px 16px 16px; border-radius: 16px; background: var(--sd-surf); box-shadow: inset 0 0 0 1px var(--tk-line); }
.dk-sd-narr p { margin: 0 0 8px; font-size: 14px; line-height: 1.5; color: var(--tk-ink2); }
.dk-sd-narr { padding-bottom: 6px; margin-bottom: 14px; border-bottom: 1px solid var(--tk-line); }
/* 단톡 미리보기 — 얼굴 36 · 이름 faint · 말풍선 card 14.5(로즈는 단추만) */
.dk-sd-chat { display: flex; flex-direction: column; gap: 12px; }
.dk-sd-msg { display: flex; gap: 8px; align-items: flex-start; }
.dk-sd-msg img, .dk-sd-msg > i { flex: none; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--tk-chip); }
.dk-sd-who { display: block; margin-bottom: 4px; font-size: 14px; color: var(--tk-faint); }
.dk-sd-bb { display: inline-block; max-width: 236px; margin: 0; padding: 9px 13px; border-radius: 17px; background: var(--tk-chip); font-size: 14.5px; line-height: 1.45; }

.dk-sd-about { margin: 24px 0 0; font-size: 14px; line-height: 1.7; color: var(--tk-ink2); }

/* 장면 3:4 132 × 176 · 멤버 카드 168 — 가로 넘김(화면 끝까지) */
.dk-sd-scn, .dk-sd-cc { display: flex; gap: 10px; margin: 0 -20px; padding: 0 20px; overflow-x: auto; scrollbar-width: none; list-style: none; }
.dk-sd-scn img { flex: none; width: 132px; height: 176px; border-radius: 12px; object-fit: cover; background: var(--tk-chip); }
.dk-sd-cc li { flex: none; width: 168px; padding: 14px; border-radius: 16px; background: var(--sd-surf); }
.dk-sd-cc li > img, .dk-sd-cc li > i { display: block; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; background: var(--tk-chip); }
.dk-sd-cc li > i { display: grid; place-items: center; font-style: normal; font-weight: 800; color: var(--tk-faint); }
.dk-sd-cn { display: flex; align-items: baseline; gap: 6px; margin: 10px 0 0; }
.dk-sd-cn b { font-size: 16px; font-weight: 800; }
.dk-sd-cn em { font-style: normal; font-size: 14px; color: var(--tk-faint); }
.dk-sd-rel { margin: 3px 0 0; font-size: 14px; font-weight: 700; color: var(--tk-rose); }
.dk-sd-ci { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--tk-ink2); }
.dk-sd-q { margin: 10px 0 0; padding: 8px 10px; border-radius: 4px 12px 12px 12px; background: var(--sd-q); font-size: 14px; line-height: 1.45; }

/* 결말 — 2:3 세 칸, 흐리게(스포 없이) */
/* 결말 — 앱 상세와 같은 값(iOS 93 DokimiStoryDetail.swift:416-450, 재빈 10/9 '블러 강도 앱이랑'): 언제나 3칸 · 2:3 · 사이 10 · 반경 12,
   그림 위 기준 꽉 · blur 10(칸 밖으로 안 번짐 = 칸에서 자름) → 그림 없는 칸만 brightness .8 → 검정 30% 덮개 → 그림 없는 칸만 자물쇠 16 흰 80% */
.dk-sd-en { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dk-sd-en i { position: relative; overflow: hidden; aspect-ratio: 2 / 3; border-radius: 12px; background: var(--tk-chip); }
.dk-sd-en span { position: absolute; inset: -12px; background: 50% 0 / cover no-repeat; filter: blur(10px); }
.dk-sd-en i.is-lock span { filter: blur(10px) brightness(.8); }
.dk-sd-en i::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .3); }
.dk-sd-en svg { position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); color: rgba(255, 255, 255, .8); }
.dk-sd-enl { margin: 10px 0 0; font-size: 14px; color: var(--tk-ink2); }   /* 앱 12 ink2 → 14(D-200) */

/* 아래 막대 — 폰은 바닥에 고정(미션 두 줄까지 + 단추 50) */
.dk-sd-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; flex-direction: column; gap: 8px;
  padding: 10px 16px calc(14px + env(safe-area-inset-bottom)); background: var(--tk-bg); border-top: 1px solid var(--tk-line); }
.dk-sd-goal { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; font-size: 14px; line-height: 1.45; color: var(--tk-ink2); }
.dk-sd-goal b { color: var(--tk-rose); font-weight: 800; }
.dk-sd-acts { display: flex; gap: 10px; }
.dk-sd-bm { flex: none; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; padding: 0; border: 0; border-radius: 14px;
  background: none; color: var(--tk-ink); box-shadow: inset 0 0 0 1px var(--tk-line); cursor: pointer; }
.dk-sd-bm[aria-pressed="true"] { color: var(--tk-rose); }
.dk-sd-bm[aria-pressed="true"] path { fill: currentColor; }
.dk-sd-acts .dk-sd-go { flex: 1; }
.dk-sd-go { display: flex; align-items: center; justify-content: center; height: 50px; border-radius: 14px; background: var(--tk-rose); color: var(--tk-on-rose); font-size: 16px; font-weight: 800; text-decoration: none; }

@media (min-width: 1000px) {
  .dk-sd-page { padding-bottom: 0; }
  .dk-sd { display: flex; flex-direction: row-reverse; justify-content: center; gap: 56px; padding: 0 64px 64px; }
  .dk-sd-head { position: sticky; top: 72px; flex: none; width: auto; height: calc(100vh - 72px); aspect-ratio: 2 / 3; max-width: 56vw;
    border-radius: 0 0 20px 20px; -webkit-mask-image: none; mask-image: none; }
  .dk-sd-inf { flex: none; width: 560px; padding: 40px 0 0; }
  .dk-sd-title { font-size: 36px; }
  .dk-sd-hook { font-size: 16px; }
  .dk-sd-tags, .dk-sd-scn, .dk-sd-cc { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
  .dk-sd-bar { position: static; margin-top: 28px; padding: 0; border: 0; background: none; }
}