/* Dokimi 웹 틀 — dokimi.me 전용. 정본은 glimi-apple design/prototype/artboards/DokimiWebPages.dc.html
   색은 브라우저 설정을 따르는 라이트(순백) · 다크 두 벌(tokens.css), 워드마크도 설정을 따른다(라이트 tone · 다크 dark).
   클래스는 전부 dk- 로 시작한다(옛 링크 화면에 같이 얹힐 때 기존 스타일과 섞이지 않게).
   tokens.css 는 여기서 @import 하지 않는다 — 머리(_layout · _legacy_top)가 ?v= 판 번호를 붙여 먼저 싣는다(캐시). */
/* 글꼴(D-196 §4) — SUIT 가변 한 벌을 우리 사이트에서(jsdelivr · @import 없음, 머리 _font_head.html 이 미리 싣는다).
   SUIT 가 오기 전 · 막혔을 때는 'SUIT Fallback'(Apple SD Gothic Neo · 맑은 고딕, 폭을 SUIT 에 맞춤 — Apple SD 기준 실측 100.5%)으로
   그린다(§9-5 흔들림 막기). 라이선스 SIL OFL 1.1(fonts/SUIT-LICENSE.txt) */
/* 세 조각(첫 화면 속도 10/28 — 미리 싣던 core 284KB 를 base 로 줄임, tools/font_split.py 가 굽는다).
   base 202KB = 라틴 · 기호 + 한글 777자(주요 쪽 운영 글 · 사이트 문구 · 스토리 글에 자주 나오는 600자, fonts/SUIT-Variable-base.hangul.txt). 머리가 미리 싣는다.
   rest = 옛 core 한글(사이트 · 스토리 1173자) 가운데 base 에 없는 것 — 그 글자가 나오는 쪽만 받는다(unicode-range).
   ext = 나머지 한글 1495자. 뒤에 적은 조각부터 찾으므로 base(범위 없음) → rest → ext 차례. 원본 SUIT-Variable.woff2 는 그대로(관리 화면 · og).
   지난 판: core · ext 두 조각(10/17, core 290KB) */
@font-face { font-family: 'SUIT Variable'; font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+AC00-D7A3;
  src: url('/static/dokimi/fonts/SUIT-Variable-ext.woff2') format('woff2-variations'), url('/static/dokimi/fonts/SUIT-Variable-ext.woff2') format('woff2'); }
@font-face { font-family: 'SUIT Variable'; font-weight: 100 900; font-style: normal; font-display: swap; /* rest-range */ unicode-range: U+AC16, U+AC1B, U+AC24, U+AC38, U+AC58, U+AC89, U+AC90, U+ACAA, U+ACF1, U+ACFD, U+AD04, U+AD7D, U+AD82, U+ADC4, U+ADC8, U+ADD0, U+AE01, U+AE0D, U+AE41, U+AE43, U+AE45, U+AE4A, U+AE4D-AE4E, U+AE54, U+AE5C-AE5D, U+AE65, U+AE6C, U+AE70, U+AE78, U+AE7C, U+AEBE, U+AECD, U+AEF4, U+AF08, U+AF3C-AF3D, U+AF42, U+AF49, U+AF64, U+AFCD, U+B014, U+B048, U+B053, U+B057, U+B084, U+B08C, U+B099, U+B0A1, U+B0A9, U+B0AB, U+B0AD, U+B0AF, U+B0C9, U+B109, U+B10C, U+B128, U+B138, U+B150, U+B154, U+B158, U+B17C, U+B194, U+B1A8, U+B1E8, U+B291, U+B299, U+B2D9, U+B2E5-B2E6, U+B2F7, U+B304, U+B310, U+B314, U+B35F, U+B369, U+B36E, U+B383, U+B38C, U+B3CB, U+B3D7, U+B451, U+B461, U+B465, U+B4C0, U+B4E6, U+B4ED, U+B515, U+B52A, U+B531, U+B534, U+B538, U+B550, U+B560, U+B5B4, U+B5BC, U+B5C0, U+B5CC, U+B611, U+B69D, U+B6A4, U+B6B1, U+B6F8, U+B700, U+B729, U+B72F-B730, U+B748, U+B74C, U+B754, U+B784, U+B7A9, U+B7AD, U+B7ED, U+B7F4, U+B7FF-B801, U+B809, U+B80C, U+B81C, U+B82C, U+B834-B835, U+B837, U+B860, U+B864, U+B86C, U+B86F, U+B871, U+B8B0, U+B8E9, U+B8F8, U+B8FB, U+B904, U+B918, U+B95C, U+B968, U+B975, U+B985, U+B987, U+B9BF, U+B9CF, U+B9D8, U+B9E5, U+B9F4-B9F5, U+B9F9, U+BA4E, U+BA5C, U+BA71, U+BA78, U+BAAC, U+BAB8, U+BB18, U+BB3E, U+BB47, U+BB54, U+BBC0, U+BC09, U+BC0C-BC0D, U+BC1F, U+BC2D, U+BC38, U+BC40, U+BC97, U+BCBC, U+BCD1, U+BD05, U+BD09, U+BD2C, U+BD48, U+BD50, U+BD59, U+BD81, U+BD89, U+BD95, U+BE10, U+BE54, U+BE57, U+BE61, U+BE74-BE75, U+BE84, U+BE8F-BE90, U+BED0, U+BED4, U+BED7, U+BF18, U+BF40, U+BFB0, U+BFCC, U+C058, U+C068, U+C090, U+C0BC-C0BD, U+C0BF-C0C0, U+C0D0, U+C0D8, U+C0DC, U+C0F4-C0F5, U+C123, U+C126, U+C12C-C12D, U+C130, U+C140, U+C15C, U+C178, U+C1C4, U+C1E0, U+C1FC, U+C20D, U+C21F, U+C250, U+C270, U+C274, U+C27F, U+C288, U+C290, U+C2AC, U+C2E3, U+C2F1, U+C2F9, U+C2FC, U+C300, U+C30C-C30D, U+C313, U+C324, U+C369, U+C384, U+C3D8, U+C3DC, U+C3DF, U+C3E9, U+C3F4, U+C408, U+C42C, U+C465, U+C4F1, U+C50C, U+C52C, U+C539, U+C53B, U+C54E, U+C554-C555, U+C557, U+C570, U+C574, U+C580, U+C587, U+C5B9, U+C5BD, U+C5C4, U+C5C9, U+C5CE, U+C5D8, U+C5E3, U+C5E5, U+C5EE, U+C5FC, U+C635, U+C637, U+C67C, U+C6B1, U+C6BA, U+C6C5, U+C6E8, U+C6EC, U+C708, U+C717, U+C721, U+C789-C78A, U+C78E, U+C7A3-C7A4, U+C7B0, U+C813, U+C816, U+C81D, U+C824, U+C878, U+C881, U+C88C, U+C8FD, U+C90D, U+C950, U+C989, U+C98C, U+C9D5, U+C9E0, U+C9F0-C9F1, U+CA4D, U+CA54, U+CA61, U+CC0C, U+CC14, U+CC22, U+CC30, U+CC3C, U+CC4C, U+CC54, U+CC60, U+CCA9, U+CD1B, U+CD78, U+CDA5, U+CDC4, U+CE04, U+CE6B, U+CE7C, U+CE94, U+CEE5, U+CEF4, U+CEF8, U+CF13, U+CF20, U+CF24, U+CF55, U+CF8C, U+CFE8, U+CFFC, U+D034, U+D0A5, U+D0AC, U+D0B9, U+D0C4, U+D0D0, U+D0D4-D0D5, U+D0E0, U+D0E4, U+D0F0-D0F1, U+D143-D145, U+D168, U+D17C, U+D1A4, U+D22D, U+D234, U+D23C, U+D25C, U+D280, U+D2AC, U+D2B9, U+D2BC, U+D2F8, U+D314, U+D391, U+D399, U+D39C, U+D3AB, U+D3B4, U+D3D0, U+D3F4, U+D479, U+D47C, U+D4E8, U+D508, U+D53D, U+D540, U+D54C, U+D56B, U+D575, U+D587, U+D5C9, U+D5D0, U+D5DB, U+D601, U+D611, U+D614, U+D639, U+D640, U+D649, U+D6A1, U+D6C5, U+D6D1, U+D6D4, U+D6E8, U+D718, U+D720, U+D729, U+D760, U+D765, U+D769, U+D770, U+D790;
  src: url('/static/dokimi/fonts/SUIT-Variable-rest.woff2') format('woff2-variations'), url('/static/dokimi/fonts/SUIT-Variable-rest.woff2') format('woff2'); }
@font-face { font-family: 'SUIT Variable'; font-weight: 100 900; font-style: normal; font-display: swap;
  src: url('/static/dokimi/fonts/SUIT-Variable-base.woff2') format('woff2-variations'), url('/static/dokimi/fonts/SUIT-Variable-base.woff2') format('woff2'); }
@font-face { font-family: 'SUIT Fallback'; src: local('Apple SD Gothic Neo'), local('AppleSDGothicNeo-Regular'), local('Malgun Gothic'), local('맑은 고딕');
  size-adjust: 100.5%; }

/* 별칭은 하단에서 한 번 더 셈한다 — :root 에서 셈한 값이 내려오면 하단의 반대 판 토큰을 못 따른다 */
:root, .dk-footer {
  --dk-ink: var(--tk-ink);
  --dk-sub: var(--tk-ink2);
  --dk-line: var(--tk-line);
  --dk-tone: var(--tk-rose-soft);     /* 알림 띠 · 도움 상자 면 */
  --dk-tone-ink: var(--tk-rose-ink);  /* 그 위 글 · 링크 */
  --dk-accent: var(--tk-rose);
  --dk-on-accent: var(--tk-on-rose);
  --dk-font: 'SUIT Variable', SUIT, 'SUIT Fallback', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Segoe UI', 'Noto Sans KR', sans-serif;
}

.dk-page { margin: 0; background: var(--tk-bg); color: var(--dk-ink); font-family: var(--dk-font);
  -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column;
  word-break: keep-all; }
.dk-page main { flex: 1; }

/* 머리 — 워드마크만 */
/* 머리(D-106) — 워드마크와 테마 단추가 한 줄 가운데. 재빈 9/27 '상단에 너무 딱 붙어 있다' → 위 여백 +10:
   모바일 높이 62 = 위 14 · 아래 4 · 옆 20(워드마크 20 이 위에서 26), 데스크톱 68 = 위아래 12 · 옆 64 + 아래 1px 선
   (워드마크 22 위 · 선 사이가 23 씩 같다). 단추(누름 44)도 같은 줄 가운데. 디자인 확정 D-106(glimi-apple 1e26a83) */
.dk-header { background: var(--tk-bg); padding: 14px 20px 4px; min-height: 62px; box-sizing: border-box; display: flex;
  justify-content: space-between; align-items: center; }
.dk-header a { display: inline-flex; }

/* 워드마크 두 장 — 기본은 다크 판 한 장, 라이트를 고르면(data-theme='light') 라이트 장 */
.dk-wm-light { display: none !important; }
.dk-wm-dark { display: block !important; }
:root[data-theme='light'] .dk-wm-light { display: block !important; }
:root[data-theme='light'] .dk-wm-dark { display: none !important; }
/* 하단은 확정 판(10/9)부터 본문과 같은 판 — 워드마크도 본문과 같은 장(옛 반대 장 규칙은 지움) */

/* 그림은 길게 누르기 저장 · 끌어 가기를 막는다(재빈 9/27 — 원본 빼 가기 억지, 완전한 보호는 아님). 우클릭은 theme.js.
   글 · 링크 · 입력칸은 그대로 */
.dk-page img, .dk-legacy-top img, .dk-footer img { -webkit-touch-callout: none; -webkit-user-drag: none; user-select: none; }

/* 라이트 · 다크 전환 단추(D-106 dokimi.siteThemeToggle) — 누름 44, 보이는 원 36(1px 선, 바탕 없음), 오른쪽 −4 로 원 끝을
   본문 끝에 맞춘다. 아이콘 20 · 선 1.8 · ink2, 바꿀 테마를 보여 준다(라이트면 달 · 다크면 해). 올림 · 누름은 칩 면 + ink */
.dk-theme-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  margin: 0 -4px 0 0; padding: 0; border: 0; background: none; color: var(--tk-ink2); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dk-theme-ring { position: relative; display: block; width: 36px; height: 36px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--tk-line);
  transition: background-color .15s ease, transform .12s ease; }
.dk-theme-ring svg { position: absolute; left: 8px; top: 8px; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
.dk-theme-sun { opacity: 0; transform: rotate(-90deg) scale(.6); }
.dk-theme-btn.is-dark .dk-theme-moon { opacity: 0; transform: rotate(-90deg) scale(.6); }
.dk-theme-btn.is-dark .dk-theme-sun { opacity: 1; transform: none; }
.dk-theme-btn.is-spin svg { transition: opacity .18s ease-out, transform .18s ease-out; }
.dk-theme-btn:active .dk-theme-ring { background: var(--tk-chip); transform: scale(.94); }
.dk-theme-btn:active { color: var(--tk-ink); }
.dk-theme-btn:focus-visible { outline: none; }
.dk-theme-btn:focus-visible .dk-theme-ring { box-shadow: inset 0 0 0 1px var(--tk-line), 0 0 0 2px var(--tk-bg), 0 0 0 4px var(--tk-rose); }
@media (hover: hover) { .dk-theme-btn:hover .dk-theme-ring { background: var(--tk-chip); } .dk-theme-btn:hover { color: var(--tk-ink); } }
/* 누를 때만 페이지 색이 200ms 로 바뀐다(theme.js 가 250ms 동안 dk-theming). 처음 뜰 때 · 동작 줄이기면 바로 */
html.dk-theming, html.dk-theming * { transition: background-color .2s ease, color .2s ease, border-color .2s ease, fill .2s ease !important; }
.dk-wordmark { height: 24.5px; width: auto; display: block; }   /* 워드마크 높이는 로고 A(10/8) 말풍선 자리까지 — 글자 크기는 옛 20 그대로(×1.225) */

/* 본문 */
.dk-body { padding: 24px 20px 36px; max-width: 760px; display: flex; flex-direction: column; gap: 14px; }
.dk-title { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -1px; color: var(--dk-ink); }
.dk-meta { margin: 0; font-size: 14px; color: var(--dk-sub); }
.dk-pending { background: var(--dk-tone); border-radius: 16px; padding: 22px; font-size: 15px;
  line-height: 1.6; color: var(--dk-tone-ink); margin: 0; }
.dk-text { margin: 0; font-size: 15px; line-height: 1.6; color: var(--dk-ink); }
.dk-mailbox { display: block; text-decoration: none; border: 1px dashed var(--dk-tone-ink); border-radius: 14px; padding: 16px;
  font-size: 15px; font-weight: 700; color: var(--dk-tone-ink); max-width: 480px; }

/* 약관 · 처리방침 본문 (카탈로그 마크다운) */
.dk-legal { font-size: 15px; line-height: 1.7; color: var(--dk-ink); }
.dk-legal h2 { font-size: 20px; font-weight: 800; letter-spacing: -0.5px; margin: 28px 0 8px; }
.dk-legal h3 { font-size: 16px; font-weight: 700; margin: 20px 0 6px; }
.dk-legal p, .dk-legal ul, .dk-legal ol { margin: 0 0 10px; }
.dk-legal ul, .dk-legal ol { padding-left: 1.3em; }
.dk-legal a { color: var(--dk-tone-ink); }
.dk-legal .dk-table, .sf-wdoc .dk-table { overflow-x: auto; margin: 8px 0 16px; -webkit-overflow-scrolling: touch; }
.dk-legal table, .sf-wdoc table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.55; }   /* 작가 공고 표(7.2 계약의 핵심)도 법 문서 표 그대로 */
.dk-legal th, .dk-legal td, .sf-wdoc th, .sf-wdoc td { border: 1px solid var(--dk-line); padding: 8px 10px; text-align: left; vertical-align: top; }
/* 열이 여섯인 표(제6조 국외 이전) — 열 폭을 정하고, 본문보다 넓으면 표만 옆으로 밀린다(디자인 #1007 검수 3) */
.dk-legal table:has(th:nth-child(6)) { table-layout: fixed; min-width: 680px; }
.dk-legal table:has(th:nth-child(6)) th { white-space: normal; }
.dk-legal table:has(th:nth-child(6)) td { word-break: keep-all; overflow-wrap: anywhere; }   /* 긴 주소(URL)가 옆 칸을 덮지 않게 */
.dk-legal table:has(th:nth-child(6)) th:nth-child(1) { width: 18%; }
.dk-legal table:has(th:nth-child(6)) th:nth-child(2) { width: 8%; }
.dk-legal table:has(th:nth-child(6)) th:nth-child(3) { width: 28%; }
.dk-legal table:has(th:nth-child(6)) th:nth-child(4) { width: 16%; }
.dk-legal table:has(th:nth-child(6)) th:nth-child(5) { width: 14%; }
.dk-legal table:has(th:nth-child(6)) th:nth-child(6) { width: 16%; }
.dk-legal th { background: var(--dk-tone); color: var(--dk-tone-ink); font-weight: 700; white-space: nowrap; }

/* 개정 공지 — 배너 + 변경 대비표 */
.dk-legal-banner span { font-size: 14px; }
.dk-legal-banner-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.dk-legal-banner-list a { color: var(--dk-tone-ink); font-size: 14px; font-weight: 700; white-space: nowrap; }
.dk-legal-changes + .dk-legal-changes { margin-top: 12px; }
.dk-legal-changes { background: var(--dk-tone); border-radius: 16px; padding: 4px 18px 10px; }
.dk-legal-changes h2 { margin-top: 14px; }
.dk-legal-changes h3 { margin-top: 16px; }
.dk-legal-changes p { margin: 0 0 6px; }
.dk-pending a { color: inherit; }

/* 푸터 */
/* 반대 판 블록이 본문 끝에 바로 붙는다 — 색 차이가 경계라 선은 두지 않고, 위아래를 조금 더 띄운다 */
.dk-footer { background: var(--tk-bg); padding: 30px 20px 36px;
  font-size: 14px; line-height: 1.6; color: var(--dk-sub); font-family: var(--dk-font);
  display: flex; flex-direction: column; gap: 10px; }
.dk-footer .dk-wordmark { height: 19.5px; margin-bottom: 11px; }   /* 워드마크 ↔ 링크 줄 10~12(디자인 9/27) */
.dk-footer nav a { color: var(--dk-sub); text-decoration: underline; }
/* 사업자 정보(전자상거래법 §10 ① · 시행규칙 §7 — 초기 화면 표시 · 공정위 공개페이지 연결): 바닥 맨 아래 © 다음 한 줄, 이름표 없음.
   존재감 최소(재빈 11/07 '최대한 안보이게') — 12px · 줄 촘촘 · faint 를 바탕 쪽으로 섞어 한 단 더 흐리게(다크 바탕 대비 PC 3.3:1 · 폰 4.3:1, 읽을 수는 있게).
   법 문서 최소 글 14(D-200)의 예외는 이 줄 하나(재빈 지시). 가운뎃점은 항목 사이 틈에 그리고 줄 머리(폰) · 줄 끝(PC)에 걸린 점은 잘라 낸다
   (11/07 줄 끝 '|' 지적). 항목은 통째로 다음 줄로, 폭보다 긴 주소(폰)만 안에서 접힘. 읽기 프로그램에는 점이 안 읽힘(/ "") */
.dk-footer .dk-biz { margin-top: 6px; font-size: 12px; line-height: 1.4; overflow: hidden;
  color: var(--tk-faint); color: color-mix(in srgb, var(--tk-faint) 70%, var(--tk-bg)); }
.dk-footer .dk-biz-line { display: flex; flex-wrap: wrap; margin-left: -12px; }
/* 접힌 채 시작(재빈 11/07 "사업자 정보가 토글로 숨겨지지가않고 왜 그대로 노출됨" · "토글로 해서 잘안보이는 글자로" · "토글 아이콘도 빼라") —
   <details>: '사업자 정보' 글자 단추 하나(기호 없음), 누르면 그 아래 흐린 줄이 펼쳐짐. JS 없이 열리고 내용은 늘 DOM 에(/intro 받기 장과 같은 말) */
.dk-footer .dk-biz > summary { display: inline-block; padding: 3px 0; list-style: none; cursor: pointer; }
.dk-footer .dk-biz > summary::-webkit-details-marker { display: none; }
.dk-footer .dk-biz > summary:focus-visible { outline: 2px solid var(--tk-rose); outline-offset: 2px; border-radius: 2px; }
.dk-footer .dk-biz[open] > summary { margin-bottom: 2px; }
.dk-footer .dk-biz a { color: inherit; text-decoration: none; }   /* 끝 항목 공정위 '사업자정보 확인' — 주변 글과 똑같이, 밑줄은 호버 · 포커스 때만(재빈 11/07) */
.dk-footer .dk-biz a:hover, .dk-footer .dk-biz a:focus-visible { text-decoration: underline; }
.dk-footer .dk-biz-line > span { position: relative; padding-left: 12px; }
.dk-footer .dk-biz-line > span::before { content: "·"; content: "·" / ""; position: absolute; left: 0; width: 12px; text-align: center; }
.dk-footer p { margin: 0; }

/* 옛 링크 화면 띠 — 머리 아래 */
.dk-legacy-top, .dk-footer { word-break: keep-all; }
.dk-legacy-top { font-family: var(--dk-font); }
.dk-banner { background: var(--dk-tone); padding: 12px 20px; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; }
.dk-banner span { font-size: 14px; font-weight: 600; color: var(--dk-tone-ink); }
.dk-pill { display: inline-flex; align-items: center; height: 34px; padding: 0 16px; border-radius: 999px;
  background: var(--dk-accent); color: var(--dk-on-accent); font-size: 14px; font-weight: 700;
  text-decoration: none; white-space: nowrap; border: 0; font-family: inherit; cursor: pointer; }

.dk-tests { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.dk-tests-row { display: flex; flex-wrap: wrap; gap: 8px; }
.dk-tests .dk-pill { height: 44px; padding: 0 20px; font-size: 14px; }
.dk-tests-note { font-size: 14px; color: var(--tk-ink2); }
.dk-tests-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* 설문 첫 화면 받기 칸(매니저 10/6) — 단추 묶음 아래, 윗선으로 뗌. 단추 · 배지 꼴은 cover.css 의 .dk-get(이야기 페이지 48 · 390 은 46)과 같게 */
.sf-get { margin: 28px 0 0; padding-top: 24px; border-top: 1px solid var(--tk-line); }
.sf-get-title { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: var(--tk-ink); }   /* 칸 머리 한 줄(디자인 2 #1288 ②) */
.sf-get { border-radius: 12px; transition: box-shadow .3s, background-color .3s; }
.sf-get.flash { background: var(--tk-chip); box-shadow: 0 0 0 12px var(--tk-chip); border-top-color: transparent; }   /* 강조 중엔 윗선 숨김 — 면이 선에 걸쳐 보이지 않게(디자인 2 #1288) */   /* 'Dokimi 해 보기'로 내려왔을 때 잠깐(1.2초) */
.sf-get:focus { outline: none; }
.sf-v2-notice .sf-get { margin-top: 24px; padding-top: 0; border-top: 0; }   /* '안 해 봄' 안내 화면 — 단추 아래 같은 칸을 펼침 */
@media (prefers-reduced-motion: reduce) { .sf-get { transition: none; } }
.sf-get .dk-tests { gap: 2px; }   /* 안내 두 줄은 한 덩어리 — 단락 사이 = 줄 간격(디자인 2 #1288 ③) */
.sf-get .dk-tests-row { gap: 16px; align-items: center; margin-bottom: 12px; }   /* 배지와 안내 사이 14 그대로 */
.sf-get .dk-badge { display: block; line-height: 0; }
.sf-get .dk-badge img { display: block; width: auto; height: 46px; }
.sf-get .dk-badge-googlePlay img { height: 60.5px; margin: -7.25px 0; }
.sf-get .dk-beta-btn { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; height: 46px; min-width: 138px; padding: 0 18px;
  border-radius: 10px; background: #000; color: #fff; font-size: 16px; font-weight: 700; line-height: 1; white-space: nowrap; text-decoration: none; box-shadow: inset 0 0 0 1px #A6A6A6; }
.sf-get .dk-beta-btn:hover { background: #1C1C1E; }
.sf main .sf-get a.dk-beta-btn, .sf .sf-main .sf-get a.dk-beta-btn { color: #fff; }   /* 위 '.sf main a { color: inherit }' 가 라이트에서 검정 글로 덮던 것 — 다크 · 라이트 같은 검정 단추 */
.sf-get .dk-beta-btn:focus-visible, .sf-get .dk-badge:focus-visible { outline: 3px solid var(--tk-rose); outline-offset: 3px; }
.sf-get .dk-tests-note { font-size: 14px; line-height: 1.55; }

/* 알림 받기 폼 */
.dk-notify { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 420px; }
.dk-notify label.dk-field { font-size: 14px; font-weight: 600; color: var(--dk-tone-ink); }
.dk-notify .dk-row { display: flex; gap: 8px; }
.dk-notify input[type=email] { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border-radius: 12px;
  border: 1px solid var(--tk-faint); font-size: 15px; font-family: inherit; color: var(--dk-ink); background: var(--tk-card); }
.dk-notify .dk-pill { height: 44px; padding: 0 18px; font-size: 14px; }
/* 동의(D-113, 재빈 승인 9/27 — 시트 없이 칸 안에): 모두 동의(체크 20 · 14/800) → 선 1 → [필수] · [선택] 줄(체크 18,
   표지 높이 18 · 반경 5 · 10.5/800, 글 12.5, 만 14세 12 보조색, 줄 끝 자세히 12 밑줄). 체크는 기본 상자에 로즈 accent */
.dk-agree { display: flex; flex-direction: column; gap: 9px; }
.dk-agree input[type=checkbox] { accent-color: var(--tk-rose); margin: 0; flex: none; cursor: pointer; }
.dk-agree-all { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 800; color: var(--dk-ink); cursor: pointer; }
.dk-agree-all input[type=checkbox] { width: 20px; height: 20px; }
.dk-agree-line { height: 1px; background: var(--tk-line); }
.dk-agree-item { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.5; color: var(--dk-tone-ink); }
.dk-agree-item > .dk-agree-label, label.dk-agree-item { display: flex; align-items: flex-start; gap: 8px; flex: 1; min-width: 0; cursor: pointer; }
.dk-agree-item input[type=checkbox] { width: 18px; height: 18px; margin-top: 1px; }
.dk-agree-tag { flex: none; height: 22px; padding: 0 6px; border-radius: 6px; font-size: 14px; font-weight: 800; line-height: 22px; }
.dk-agree-tag.is-required { background: var(--tk-rose-soft); color: var(--tk-rose); }
.dk-agree-tag.is-optional { background: var(--tk-chip); color: var(--dk-sub); }
.dk-agree-text { flex: 1; min-width: 0; }
.dk-agree-sub { display: block; font-size: 14px; color: var(--dk-sub); }
.dk-agree-more { flex: none; font-size: 14px; color: var(--dk-sub); text-decoration: underline; text-underline-offset: 2px; line-height: 1.6; }
.dk-notify .dk-help, .dk-notify .dk-notice { margin: 0; font-size: 14px; color: var(--dk-sub); line-height: 1.5; }
.dk-notify .dk-notice a { color: var(--dk-tone-ink); }
.dk-more summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--dk-tone-ink); text-decoration: underline;
  text-underline-offset: 2px; list-style: none; }
.dk-more summary::-webkit-details-marker { display: none; }
.dk-more summary::after { content: " ▾"; }
.dk-more[open] summary::after { content: " ▴"; }
.dk-more > p, .dk-notify .dk-more > p { margin: 8px 0 0; }  /* details 안에는 flex gap 이 먹지 않는다 */
.dk-receipt { box-sizing: border-box; width: 100%; max-width: 420px; background: var(--tk-card); border: 1px solid var(--dk-line); border-radius: 16px;
  padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.dk-receipt[hidden], .dk-notify[hidden] { display: none; }
.dk-receipt-title { margin: 0; font-size: 16px; font-weight: 800; color: var(--dk-tone-ink); }
.dk-receipt dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 14px; line-height: 1.5; }
.dk-receipt dt { color: var(--dk-sub); font-weight: 600; white-space: nowrap; }
.dk-receipt dd { margin: 0; color: var(--dk-ink); }
.dk-receipt .dk-notice { margin: 0; font-size: 14px; color: var(--dk-sub); line-height: 1.5; }
.dk-notify .dk-status { margin: 0; font-size: 14px; font-weight: 700; color: var(--dk-tone-ink); min-height: 1.2em; }

@media (min-width: 900px) {
  .dk-header { padding: 12px 64px; min-height: 68px; border-bottom: 1px solid var(--dk-line); }
  .dk-wordmark { height: 27px; }
  .dk-body { padding: 40px 64px 56px; }
  .dk-banner { padding: 12px 64px; }
  .dk-footer { padding: 28px 64px; flex-direction: row; justify-content: space-between; align-items: flex-start; }
  .dk-footer .dk-right { text-align: right; }
  /* PC 는 오른쪽 맞춤 — 점을 항목 뒤 틈으로 옮겨 줄 끝 점을 잘라 낸다. 폭 640(왼쪽 링크 줄을 밀지 않게) */
  .dk-footer .dk-biz { max-width: 640px; margin-left: auto; }   /* 좁은 PC 는 폭 640 에서 항목째 접힘(왼쪽 링크 줄을 밀지 않게) */
  .dk-footer > div:first-child { flex: none; } .dk-footer .dk-right { min-width: 0; }   /* 펼쳐도 왼쪽 링크 줄은 그대로, 사업자 줄이 접힘 */
  .dk-footer .dk-biz-line { margin-left: 0; margin-right: -12px; justify-content: flex-end; }
  .dk-footer .dk-biz-line > span { padding-left: 0; padding-right: 12px; }
  .dk-footer .dk-biz-line > span::before { left: auto; right: 0; }
}
@media (min-width: 1400px) { .dk-footer .dk-biz { max-width: none; } }   /* 펼치면 한 줄(재빈 11/07 "이거 한줄로 보이게 해줘 토글 누르면") — 줄 폭 ~1040 이 왼쪽 링크와 나란히 들어가는 폭부터 */

/* 옛 링크 화면(대시보드 · 채팅)은 화면 높이를 꽉 채우는 앱 셸이다. 그 위에 Dokimi 머리 + 띠를
   얹으면 셸이 줄어드니, 페이지를 스크롤되게 풀고 셸 높이를 '화면 − 띠'로 준다. 푸터는 그 아래.
   Core 머리의 이름 · 로고(brand-home)는 Dokimi 워드마크와 겹치니 숨긴다. */
.dk-legacy-top .dk-header { height: 62px; box-sizing: border-box; }
.dk-legacy-top .dk-banner { height: 58px; box-sizing: border-box; }
html:has(.dk-legacy-top), body:has(.dk-legacy-top) { height: auto !important; min-height: 100%; overflow: visible !important; }
body:has(.dk-legacy-top) > .app,
body:has(.dk-legacy-top) > .chat-shell { height: calc(100dvh - 120px) !important; flex: none !important; }
@media (min-width: 900px) {   /* 데스크톱 머리 68 + 띠 58 */
  .dk-legacy-top .dk-header { height: 68px; }
  body:has(.dk-legacy-top) > .app,
  body:has(.dk-legacy-top) > .chat-shell { height: calc(100dvh - 126px) !important; }
}
body:has(.dk-legacy-top) .brand-home { display: none !important; }

/* 문서(약관 · 처리방침 · 문의) 가운데 한 열 — 디자인 D-83(glimi-apple 66b45ca, layout dokimi.docs), 재빈 승인 9/26.
   데스크톱 900 이상만: 본문 최대 720 · 가운데 · 여백 40 32 56, 개정 배너는 띠 폭 그대로 두고 안의 글 목록만 720 가운데
   (띠 여백 12 32). 머리 · 푸터 · 모바일 · 글 크기는 그대로 */
@media (min-width: 900px) {
  .dk-body { max-width: 720px; margin: 0 auto; padding: 40px 32px 56px; }
  .dk-legal-banner { padding: 12px 32px; }
  .dk-legal-banner-list { width: 100%; max-width: 720px; margin: 0 auto; }
}

/* 계정 삭제 요청(dokimi.me/delete-account, 디자인 D-99 ⑤) — 문서 한 열(D-83) 위에 로즈 단추 · 도움 상자 · 확인 창 */
.dk-h2 { margin: 18px 0 0; font-size: 18px; font-weight: 800; color: var(--dk-ink); }
.dk-delete-steps, .dk-delete-list { margin: 0; padding-left: 1.3em; font-size: 15px; line-height: 1.7; color: var(--dk-ink); }
.dk-delete-go { align-self: stretch; justify-content: center; height: 48px; border: 0; border-radius: 12px; background: var(--dk-accent);
  color: var(--dk-on-accent); font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; }
.dk-delete-status { margin: 0; min-height: 1.2em; font-size: 14px; font-weight: 700; color: var(--dk-tone-ink); }
.dk-delete-help { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border-radius: 16px; background: var(--dk-tone); }
.dk-delete-help p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--dk-ink); }
.dk-delete-help .dk-delete-help-t { font-size: 16px; font-weight: 800; }
.dk-delete-help a { font-weight: 800; color: var(--dk-accent); text-decoration: none; }
.dk-dialog { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(0, 0, 0, .6); }
.dk-dialog[hidden] { display: none; }
.dk-dialog-box { width: 100%; max-width: 320px; padding: 20px; border-radius: 18px; background: var(--tk-card);
  box-shadow: inset 0 0 0 1px var(--tk-line); }
.dk-dialog-t { margin: 0 0 6px; font-size: 17px; font-weight: 800; color: var(--dk-ink); }
.dk-dialog-b { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: var(--dk-sub); }
.dk-dialog-row { display: flex; gap: 8px; }
.dk-dialog-row button { flex: 1; height: 44px; border: 0; border-radius: 12px; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; }
.dk-dialog-cancel { background: var(--tk-chip); color: var(--dk-ink); }
.dk-dialog-danger { background: var(--tk-danger); color: var(--tk-on-danger); }
.sf-anon-dlg .dk-dialog-box { max-width: 340px; outline: none; }   /* 설문 '로그인 없이' 확인 창 — 단추 둘을 위아래로(문구가 길어서) */
.sf-anon-acts { display: flex; flex-direction: column; gap: 8px; }
.sf-anon-acts .sf-btn { width: 100%; margin: 0; }
@media (min-width: 900px) { .dk-delete-go { align-self: flex-start; padding: 0 32px; } }

/* 가운뎃점 빼기(디자인 D-121, 재빈 '눈에 거슬리는 건 가운데 불릿') — 정보를 '·'로 잇지 않는다. 값 속 줄바꿈(\n)은 두 줄로 보이고,
   링크 사이는 간격만 둔다 */
.dk-meta, .dk-notice, .dk-footer p, .dk-receipt dd { white-space: pre-line; }
.dk-footer nav, .dk-links { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.dk-legal-date { display: block; margin-top: 2px; font-size: 14px; font-weight: 600; color: var(--dk-sub); }

/* ── 양식 부품(디자인 D-194 → D-196 §3 공통 부품) — 옛 site_forms.css 를 여기로 옮겼다. 페이지 틀(머리 · 열 · 바닥)은 _site_form.html 이 메인과 같은 _site_header · _footer 를 쓴다.
   (옛 머리 글:) 사이트 내부 페이지(디자인 D-194) — /writers · /w/<토큰> · /feedback · /contact · /q/<토큰>. 색은 토큰 파일(D-104) 그대로,
   경고 면 둘(warn · warnSoft)만 여기서. 한 열: 모바일 좌우 22, 데스크톱 폭 640. */
:root, :root[data-theme='dark'] { --sf-warn: #F5B14C; --sf-warn-soft: #3A2A12; --sf-up: #4CC38A; }
:root[data-theme='light'] { --sf-warn: #9A5B00; --sf-warn-soft: #FFF4E0; --sf-up: #1F8A55; }
.sf, .sf * { box-sizing: border-box; }
.sf main a, .sf .sf-main a { color: inherit; }
.sf main a.sf-btn, .sf .sf-main a.sf-btn { color: var(--tk-on-rose); }   /* 링크 단추도 단추 한 벌(--tk-rose 면 / --tk-on-rose 글) — 위 inherit 가 덮던 것 */
.sf main a.sf-btn.sf-btn-line, .sf .sf-main a.sf-btn.sf-btn-line, .sf main a.sf-btn-line, .sf .sf-main a.sf-btn-line { color: var(--tk-ink); }
.sf { word-break: keep-all; overflow-wrap: break-word; }   /* 낱말 중간에서 끊지 않음 — 넘칠 때만 끊는다(주소는 아래 a 규칙) */
/* 본문 열은 메인 문서와 같은 720(모바일 좌우 20, D-196 §3) */
.sf-main { width: 100%; max-width: 720px; margin: 0 auto; padding: 24px 20px 48px; }   /* 머리 → 첫 요소 390 24 · 900+ 40(디자인 2 site-frame 4) */
@media (min-width: 900px) { .sf-main { padding-top: 40px; } .sf-article p, .sf-article li { font-size: 17px; } }

/* ① 긴 글 */
.sf-article h1 { margin: 0 0 22px; font-size: 27px; line-height: 1.4; font-weight: 800; letter-spacing: -.6px; }
.sf-article h2 { margin: 40px 0 14px; font-size: 20px; line-height: 1.45; font-weight: 800; letter-spacing: -.3px; }
.sf-article p { margin: 0 0 16px; font-size: 16.5px; line-height: 1.8; color: var(--tk-ink2); }
.sf-article strong { font-weight: 800; color: var(--tk-ink); }
.sf-article a { color: var(--tk-rose-ink); text-decoration: underline; text-underline-offset: 3px; }
:root:not([data-theme='light']) .sf-article a { color: var(--tk-rose); }
.sf-article ol { margin: 0 0 16px; padding-left: 28px; } .sf-article li { font-size: 16.5px; line-height: 1.75; color: var(--tk-ink2); margin-bottom: 10px; }
.sf-article li::marker { color: var(--tk-ink); font-weight: 800; }

/* 양식 */
.sf-apply { margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--tk-line); }
.sf-apply h2 { margin: 0 0 24px; font-size: 20px; font-weight: 800; }
.sf-closed { margin-top: 44px; padding: 22px 20px; border-radius: 20px; background: var(--tk-chip); }
.sf-closed-title { font-size: 20px; font-weight: 800; }
.sf-closed-text { margin-top: 8px; font-size: 15.5px; line-height: 1.7; color: var(--tk-ink2); }
.sf-fb .sf-closed { margin-top: 24px; }
.sf-form { display: flex; flex-direction: column; }
.sf-label { display: block; font-size: 14.5px; font-weight: 800; margin: 26px 0 8px; }
.sf-form > .sf-label:first-child { margin-top: 0; }
.sf-opt { margin-left: 6px; font-size: 14px; font-weight: 600; color: var(--tk-faint); }
.sf-field { width: 100%; min-height: 48px; border: 1.5px solid var(--tk-line); border-radius: 12px; background: var(--tk-card); color: var(--tk-ink);
  padding: 12px 14px; font: inherit; font-size: 15.5px; line-height: 1.55; outline: none; }
.sf-field:focus { border-color: var(--tk-ink); }
.sf-field::placeholder { color: var(--tk-faint); }
.sf-area { min-height: 132px; resize: vertical; }
.sf-counter { margin-top: 6px; text-align: right; font-size: 14px; color: var(--tk-faint); font-variant-numeric: tabular-nums; }
.sf-stack { display: flex; flex-direction: column; gap: 10px; }
.sf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-chip { height: 38px; padding: 0 14px; border-radius: 19px; border: 0; display: inline-flex; align-items: center; gap: 6px; font: inherit;
  font-size: 14.5px; font-weight: 600; background: var(--tk-card); color: var(--tk-ink); box-shadow: inset 0 0 0 1.5px var(--tk-line); cursor: pointer; }
.sf-chip.on { font-weight: 800; background: var(--tk-ink); color: var(--tk-bg); box-shadow: inset 0 0 0 1.5px var(--tk-ink); }
.sf-chip.on::before { content: ''; width: 12px; height: 7px; border-left: 2.4px solid currentColor; border-bottom: 2.4px solid currentColor;
  transform: translateY(-2px) rotate(-45deg); }
.sf-file { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.sf-btn-line { height: 44px; padding: 0 16px; border-radius: 12px; display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700;
  box-shadow: inset 0 0 0 1.5px var(--tk-line); cursor: pointer; flex: none; }
.sf-meta { font-size: 14px; color: var(--tk-faint); line-height: 1.5; }
.sf-checks { margin-top: 28px; display: flex; flex-direction: column; gap: 6px; }
.sf-agree-pv { margin: 12px 0 0; } .sf-agree-pv a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }   /* 처리방침 보기 링크(체크 대신, 기획 10/5) */
.sf-check { display: flex; gap: 10px; align-items: flex-start; padding: 4px 0; cursor: pointer; }
.sf-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sf-box { width: 22px; height: 22px; border-radius: 6px; flex: none; box-shadow: inset 0 0 0 1.5px var(--tk-line); display: grid; place-items: center; }
.sf-check input:checked + .sf-box { background: var(--tk-ink); }
.sf-check input:checked + .sf-box::after { content: ''; width: 10px; height: 6px; border-left: 2.6px solid var(--tk-bg); border-bottom: 2.6px solid var(--tk-bg);
  transform: translateY(-1px) rotate(-45deg); }
.sf-check input:focus-visible + .sf-box { outline: 2px solid var(--tk-rose); outline-offset: 2px; }
.sf-check b { display: block; font-size: 15px; line-height: 1.5; font-weight: 700; }
.sf-check small { display: block; margin-top: 4px; font-size: 14px; line-height: 1.6; color: var(--tk-ink2); }
.sf-error { margin: 18px 0 0; font-size: 14px; font-weight: 700; color: var(--tk-danger); }
.sf-btn { margin-top: 24px; height: 54px; border-radius: 16px; border: 0; background: var(--tk-rose); color: var(--tk-on-rose); display: flex;
  align-items: center; justify-content: center; font: inherit; font-size: 16.5px; font-weight: 800; text-decoration: none; cursor: pointer; width: 100%; }
.sf-btn:disabled { opacity: .4; cursor: default; }
.sf-btn-line.sf-btn, .sf-btn.sf-btn-line { background: var(--tk-card); color: var(--tk-ink); box-shadow: inset 0 0 0 1.5px var(--tk-line); height: 54px; }
/* 화면 아래 붙은 '지원하기' 바(재빈 10/6 "하단에 고정시키든지") — 글 위에 떠 보이지 않게 면 · 윗선 · 아이폰 홈 표시줄 여백, 숨을 땐 아래로 내려간다.
   폰은 화면 폭, 넓은 화면은 바는 화면 폭 · 단추는 글 칸(680) 폭 — 설문 '이전 · 다음' 띠(.sf-v2-band)와 같은 꼴 */
.sf-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 800; padding: 10px 20px calc(10px + env(safe-area-inset-bottom));
  background: var(--tk-bg); border-top: 1px solid var(--tk-line); transition: transform .2s cubic-bezier(.2,.8,.2,1), visibility 0s; }
.sf-sticky .sf-btn { margin: 0 auto; max-width: 680px; height: 52px; }
.sf-sticky.hide { transform: translateY(100%); visibility: hidden; pointer-events: none; transition: transform .16s cubic-bezier(.4,0,1,1), visibility 0s linear .16s; }
html.sf-has-sticky { scroll-padding-bottom: calc(88px + env(safe-area-inset-bottom)); }   /* 키보드로 옮긴 초점 · 앵커가 바 밑에 숨지 않게 */
@media (prefers-reduced-motion: reduce) { .sf-sticky { transition: none; } }

/* 완료 */
.sf-done { display: flex; flex-direction: column; gap: 18px; padding-top: 20px; }
.sf-done[hidden] { display: none; }
.sf-done h1 { margin: 0; font-size: 25px; font-weight: 800; letter-spacing: -.5px; }
.sf-done p { margin: 0; font-size: 16px; line-height: 1.75; color: var(--tk-ink2); }
.sf-mark { width: 56px; height: 56px; border-radius: 28px; background: var(--tk-rose-soft); color: var(--tk-rose-ink); display: grid; place-items: center; }
:root:not([data-theme='light']) .sf-mark { color: var(--tk-rose); }
.sf-linkbox { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; border-radius: 14px; box-shadow: inset 0 0 0 1.5px var(--tk-ink);
  background: var(--tk-card); }
.sf-mono { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, monospace; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-copy { height: 40px; padding: 0 14px; border-radius: 10px; border: 0; background: var(--tk-ink); color: var(--tk-bg); font: inherit; font-size: 14px;
  font-weight: 800; flex: none; cursor: pointer; }
.sf-warn { padding: 12px 14px; border-radius: 12px; background: var(--sf-warn-soft); color: var(--sf-warn); font-size: 14.5px; font-weight: 800; line-height: 1.6; }

/* ② 내 지원 · 문의 한 건 */
.sf-eyebrow { font-size: 14px; font-weight: 800; color: var(--tk-faint); }
.sf-me h1, .sf-fb h1 { margin: 8px 0 18px; font-size: 26px; font-weight: 800; letter-spacing: -.5px; }
.sf-fb h1 { margin-top: 0; }
.sf-steps { display: flex; align-items: flex-start; }
.sf-step { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 48px; flex: none; font-size: 14px; font-weight: 600; color: var(--tk-faint); }
.sf-bar { flex: 1; height: 1.5px; margin-top: 10px; background: var(--tk-line); }
.sf-bar.done { background: var(--tk-ink); }
.sf-dot { width: 22px; height: 22px; border-radius: 11px; display: grid; place-items: center; font-size: 14px; font-weight: 800;
  box-shadow: inset 0 0 0 1.5px var(--tk-line); }
.sf-step.done { color: var(--tk-ink); } .sf-step.done .sf-dot { background: var(--tk-ink); color: var(--tk-bg); box-shadow: none; }
.sf-step.cur { color: var(--tk-ink); font-weight: 800; } .sf-step.cur .sf-dot { background: var(--tk-rose); color: var(--tk-on-rose); box-shadow: none; }
.sf-sub { margin: 16px 0 0; font-size: 15px; line-height: 1.7; color: var(--tk-ink2); }
.sf-sec { padding-top: 26px; }
.sf-sec h2 { margin: 0 0 12px; font-size: 18px; font-weight: 800; }
.sf-card { padding: 14px 16px; border-radius: 16px; background: var(--tk-chip); font-size: 15px; line-height: 1.7; }
.sf-card.sf-line { background: transparent; box-shadow: inset 0 0 0 1.5px var(--tk-line); }
.sf-big { font-size: 16px; font-weight: 800; }
.sf-ink2 { color: var(--tk-ink2); } .sf-ink { color: var(--tk-ink); font-weight: 800; } .sf-pre { white-space: pre-wrap; margin-top: 6px; }
.sf-person { padding: 14px 16px; border-radius: 16px; background: var(--tk-chip); font-size: 14.5px; line-height: 1.65; }
.sf-person b { font-size: 17px; font-weight: 800; }
.sf-secret { margin-top: 8px; font-size: 14px; } .sf-secret b { font-size: 14px; color: var(--tk-rose-ink); }
:root:not([data-theme='light']) .sf-secret b { color: var(--tk-rose); }
.sf-lines { border: 1.5px solid var(--tk-line); border-radius: 12px; background: var(--tk-card); padding: 4px 14px; }
.sf-lines label { display: flex; gap: 10px; align-items: center; padding: 3px 0; }
.sf-lines label + label { border-top: 1px solid var(--tk-line); }
.sf-lines span { width: 20px; flex: none; text-align: right; font-size: 14px; color: var(--tk-faint); font-variant-numeric: tabular-nums; }
.sf-lines input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--tk-ink); font: inherit; font-size: 15px; padding: 8px 0; outline: none; }
.sf-lines input::placeholder { color: var(--tk-faint); }
.sf-thread { display: flex; flex-direction: column; gap: 14px; }
.sf-msg { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.sf-msg.me { align-items: flex-end; }
.sf-who { font-size: 14px; font-weight: 800; color: var(--tk-faint); } .sf-who span { font-weight: 600; }
.sf-bubble { max-width: 290px; padding: 11px 14px; border-radius: 16px; font-size: 15px; line-height: 1.6; background: var(--tk-chip); }
.sf-msg.me .sf-bubble { background: var(--tk-rose-soft); color: var(--tk-ink); }
.sf-bubble a { color: var(--tk-rose-ink); text-decoration: underline; text-underline-offset: 3px; word-break: break-all; }
:root:not([data-theme='light']) .sf-bubble a { color: var(--tk-rose); }
.sf-reply { display: flex; gap: 8px; align-items: stretch; margin-top: 14px; }
.sf-send { height: 48px; padding: 0 16px; border-radius: 12px; border: 0; background: var(--tk-rose); color: var(--tk-on-rose); font: inherit;
  font-size: 15px; font-weight: 800; flex: none; cursor: pointer; }
.sf-fee { margin-top: 6px; font-size: 14px; font-weight: 800; } .sf-fee span { font-weight: 600; color: var(--tk-ink2); }
/* 작가 지원 '메시지' 줄 + 대화 화면(재빈 10/26 '메시지 채팅 입장 하는 식으로 별도뷰로', 디자인 통과 BOARD-mock 10/26).
   줄: 높이 ≥64 · 반경 16 · 선 1.5 · 원 40 아이콘 · '메시지' 16/800 · 미리보기 15 한 줄 말줄임 · 안 읽으면 ink 600 + 로즈 알약 22(글자 14) · › */
.sf-msgrow { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 14px 12px 16px; border-radius: 16px; box-sizing: border-box;
  box-shadow: inset 0 0 0 1.5px var(--tk-line); background: var(--tk-card); color: var(--tk-ink); text-decoration: none; }
.sf main a.sf-msgrow, .sf .sf-main a.sf-msgrow { color: var(--tk-ink); text-decoration: none; }
.sf-msgrow:hover { box-shadow: inset 0 0 0 1.5px var(--tk-faint); }
.sf-msgrow:focus-visible { outline: 2px solid var(--tk-rose); outline-offset: 2px; }
.sf-msgrow-i { flex: none; width: 40px; height: 40px; border-radius: 20px; background: var(--tk-chip); display: grid; place-items: center; color: var(--tk-ink2); }
.sf-msgrow-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sf-msgrow-tx b { font-size: 16px; font-weight: 800; }
.sf-msgrow-tx span { font-size: 15px; color: var(--tk-ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-msgrow.unread .sf-msgrow-tx span { color: var(--tk-ink); font-weight: 600; }
.sf-msgrow-n { flex: none; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; box-sizing: border-box; background: var(--tk-rose); color: var(--tk-on-rose);
  font-size: 14px; font-weight: 800; letter-spacing: -0.3px; display: grid; place-items: center; font-variant-numeric: tabular-nums; }   /* 사이트 최소 글자 14(test_dokimi_legal) — 13 대신 자간 -0.3 */
.sf-msgrow-go { flex: none; color: var(--tk-faint); }
.dk-me-msgs { margin-top: 14px; }
/* 대화 화면: 사이트 머리는 이 화면에서 붙지 않고, 뒤로 + '메시지' 막대가 맨 위에 붙는다. 입력칸은 아래 고정, 바닥 없음.
   말풍선은 위 .sf-msg 그대로 · 최대 78%(넓으면 420) · 꼬리 쪽 모서리 6. textarea 1줄 → 5줄(132), 글자 16(iOS 확대 방지) */
.sf:has(.sf-chat) .dk-header { position: relative; }
.sf-main:has(> .sf-chat) { padding-bottom: 0; }
.sf-chat { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.sf-chat-top { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 4px; margin: -24px calc(-1 * var(--dk-gut, 20px)) 0;
  padding: 6px var(--dk-gut, 20px) 6px calc(var(--dk-gut, 20px) - 8px); background: var(--tk-bg); border-bottom: 1px solid var(--tk-line); }
.sf-chat-top .sf-back { margin: 0; padding: 0 8px; width: 44px; justify-content: center; }
.sf-chat-top h1 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.sf-chat-body { flex: 1; padding: 20px 0 16px; display: flex; flex-direction: column; justify-content: flex-end; }
.sf-chat .sf-bubble { max-width: min(78%, 420px); box-sizing: border-box; overflow-wrap: anywhere; }
.sf-chat .sf-msg.me .sf-bubble { border-bottom-right-radius: 6px; }
.sf-chat .sf-msg:not(.me) .sf-bubble { border-bottom-left-radius: 6px; }
.sf-chat-bar { position: sticky; bottom: 0; z-index: 2; margin: 0 calc(-1 * var(--dk-gut, 20px)); padding: 10px var(--dk-gut, 20px) calc(10px + env(safe-area-inset-bottom));
  background: var(--tk-bg); border-top: 1px solid var(--tk-line); }
.sf-chat-row { display: flex; gap: 8px; align-items: flex-end; }
.sf-chat-bar textarea { flex: 1; min-width: 0; min-height: 48px; max-height: 132px; resize: none; padding: 12px 14px; box-sizing: border-box; display: block;
  border: 1.5px solid var(--tk-line); border-radius: 12px; background: var(--tk-card); color: var(--tk-ink); font: inherit; font-size: 16px; line-height: 1.5; }
.sf-chat-bar textarea::placeholder { color: var(--tk-faint); }
.sf-chat-bar textarea:focus { outline: none; border-color: var(--tk-ink2); }
.sf-chat-bar .sf-send:disabled:not([aria-busy='true']) { background: var(--tk-chip); color: var(--tk-faint); cursor: default; }
.sf-chat-bar .sf-error { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--tk-danger); }
@media (min-width: 900px) { .sf-chat-top { margin-top: -40px; } }
.sf:has(.sf-chat) .dk-totop { display: none; }
.sf-pill { display: inline-flex; height: 30px; padding: 0 12px; border-radius: 15px; background: var(--tk-rose-soft); color: var(--tk-rose-ink);
  align-items: center; font-size: 14px; font-weight: 800; }

/* 앱에서 연 문의하기 — 이야기 · 판 카드 */
.sf-ctx { margin: -4px 0 4px; padding: 12px 14px; border-radius: 14px; background: var(--tk-chip); display: flex; align-items: center; gap: 10px;
  font-size: 14.5px; } .sf-ctx b { font-weight: 800; }
.sf-ctx-face { width: 34px; height: 34px; border-radius: 10px; object-fit: cover; flex: none; }
.sf-ctx + .sf-form { margin-top: 26px; }   /* 카드와 첫 칸 사이 = 다른 칸 간격(디자인 #1009 검수 2) */
.sf-under { margin: -2px 0 8px; }   /* 칸 이름 바로 아래 안내 한 줄('쓰신 글') */

/* 홍보 유입 설문(D-195) */
.sf-mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .5px; }
.sf-code { position: relative; }
.sf-code-ok { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 14px; font-weight: 800; color: var(--sf-up); }
.sf-code.ok .sf-field { border-color: var(--tk-ink); }
.sf-code.miss .sf-field { border-color: var(--tk-danger); }
.sf-code-miss { margin-top: 6px; color: var(--tk-danger); }
.sf-under-field { margin-top: 6px; }
.sf-area-s { min-height: 96px; }
.sf-inline { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 14.5px; color: var(--tk-ink2); }
.sf-num { width: 128px; flex: none; }
.sf-other { margin-top: 10px; }
.sf-form > [data-ask]:first-child > .sf-label:first-child { margin-top: 0; }   /* 조건 질문이 맨 앞일 때(일주일 설문) */
.sf-form > .sf-q:first-child > .sf-label:first-child { margin-top: 0; }
.sf-intro { margin: 0 0 22px; font-size: 15.5px; line-height: 1.7; color: var(--tk-ink2); }   /* /contact 안내(콘텐츠 contact.json) */
.sf-help { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--tk-line); }   /* /contact 도움말(/support 를 합침) */
.sf-help h2 { margin: 18px 0 6px; font-size: 16px; color: var(--tk-ink); }
.sf-help h2:first-child { margin-top: 0; }
.sf-help p { margin: 0 0 4px; font-size: 14.5px; line-height: 1.65; color: var(--tk-ink2); }
.sf-help-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px !important; }
.sf-help-links a { color: var(--tk-ink2); text-decoration: underline; text-underline-offset: 3px; }

/* 설문 2판(사이트 로그인) */
.sf-v2-intro .sf-article table { width: 100%; border-collapse: collapse; margin: 6px 0 16px; font-size: 14.5px; }
.sf-v2-intro .sf-article th, .sf-v2-intro .sf-article td { border-bottom: 1px solid var(--tk-line); padding: 9px 4px; text-align: left; vertical-align: top; }
.sf-v2-intro .sf-btn + .sf-meta { margin-top: 8px; }
.sf-v2-intro .sf-btn-line { margin-top: 14px; }
.sf-steps-list { list-style: none; margin: 18px 0 10px; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.sf-steps-list li { display: flex; align-items: center; gap: 10px; color: var(--tk-ink2); }
.sf-steps-list li i { width: 20px; height: 20px; border-radius: 10px; box-shadow: inset 0 0 0 1.5px var(--tk-line); flex: none; display: grid; place-items: center; }
.sf-steps-list li.done { color: var(--tk-ink); font-weight: 700; }
.sf-steps-list li.done i { background: var(--tk-ink); box-shadow: none; }
.sf-steps-list li.done i::after { content: ''; width: 9px; height: 5px; border-left: 2.2px solid var(--tk-bg); border-bottom: 2.2px solid var(--tk-bg); transform: translateY(-1px) rotate(-45deg); }
.sf-rewards { margin: 8px 0 18px; display: flex; flex-direction: column; gap: 4px; font-size: 14.5px; line-height: 1.6; }
.sf-logout { display: block; margin-top: 18px; text-align: center; font-size: 14px; color: var(--tk-faint); }
.sf-v2-progress { height: 4px; border-radius: 2px; background: var(--tk-line); position: relative; margin: 0 0 22px; }
.sf-v2-progress i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: var(--tk-ink); }
.sf-v2-progress span { position: absolute; right: 0; top: 8px; }
.sf-v2-sec h2 { margin: 18px 0 4px; font-size: 19px; font-weight: 800; }
.sf-v2-intro-line { margin: 0 0 4px; }
.sf-v2-anon { margin-bottom: 18px; }
.sf-scale .sf-chip { min-width: 38px; justify-content: center; padding: 0 10px; }
.sf-scale-ends { display: flex; justify-content: space-between; margin-top: 6px; }
.sf-skipped { margin-top: 14px; }
.sf-v2-nav { display: flex; gap: 10px; }
.sf-v2-nav .sf-btn { flex: 1; }
.sf-v2 [hidden] { display: none !important; }   /* .sf-form · .sf-btn 의 display 가 hidden 을 덮지 않게 */
.sf-v2-meta { margin: -4px 0 6px; }
.sf-steps-list li .sf-step-t { flex: 1; min-width: 0; }
.sf-step-reward { font-size: 14px; color: var(--tk-faint); text-align: right; flex: none; max-width: 45%; }
.sf-step-reward.on { color: var(--tk-ink); font-weight: 800; }
.sf-tag-warn { font-size: 14px; font-weight: 800; padding: 2px 7px; border-radius: 7px; background: var(--sf-warn-soft); color: var(--sf-warn); flex: none; }
.sf-skip-go { color: inherit; text-decoration: underline; }
.sf-fig { margin: 14px 0 6px; }
.sf-fig img { display: block; width: 100%; height: auto; border-radius: 14px; }
.sf-only-dark { display: block; } .sf-only-light { display: none !important; }
:root[data-theme='light'] .sf-only-dark { display: none !important; } :root[data-theme='light'] .sf-only-light { display: block !important; }
.sf-fig-wide { display: none; }
.sf-fig-cells { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.sf-fig-cells li .sf-fig-pic img { max-width: 364px; margin: 6px 0; }
.sf-fig-h b { font-size: 14.5px; font-weight: 800; }
@media (min-width: 900px) { .sf-fig-wide { display: block; } .sf-fig-cells { display: none; } }
/* 단계 줄(디자인 #1019 검수 2) — 좁으면 보상을 이름 아래 둘째 줄, 넓으면 오른쪽 */
.sf-steps-list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 10px; row-gap: 2px; align-items: center; }
.sf-steps-list li .sf-step-sub { grid-column: 2; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sf-steps-list li .sf-step-reward { text-align: left; max-width: none; }
@media (min-width: 900px) {
  .sf-steps-list li { grid-template-columns: 20px minmax(0, 1fr) auto; }
  .sf-steps-list li .sf-step-sub { grid-column: 3; justify-content: flex-end; }
  .sf-steps-list li .sf-step-reward { text-align: right; }
}
.sf-fig-band { display: inline-block; margin: 0 0 8px; padding: 2px 8px; border-radius: 7px; font-size: 14px; font-weight: 800; background: var(--tk-chip); color: var(--tk-ink2); }
@media (min-width: 900px) { .sf-fig-band { display: none; } }
.sf-closed-rewards .sf-step-reward { text-decoration: line-through; }   /* 보상 접수가 닫힌 계정 */

/* 작가 지원 — '계약할 때 쓰는 정보' 묶음 · 생년월일 세 칸 · 동의 '자세히'(디자인 #1025 검수) */
.sf-group { min-width: 0; margin: 32px 0 0; padding: 16px 16px 18px; border: 1px solid var(--tk-line); border-radius: 16px; }
.sf-group-title { padding: 0 6px; font-size: 14px; font-weight: 700; color: var(--tk-ink2); }
.sf-group > .sf-label:first-of-type { margin-top: 4px; }
.sf-ymd { display: flex; align-items: center; gap: 8px; }
.sf-ymd .sf-field { flex: 1 1 0; min-width: 0; width: auto; text-align: center; font-variant-numeric: tabular-nums; }
.sf-ymd .sf-field[name=birth_y] { flex-grow: 1.5; }
.sf-ymd span { font-size: 15px; color: var(--tk-ink2); }
.sf-more { margin: 0 0 0 34px; }
.sf-more summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--tk-ink2); text-decoration: underline; text-underline-offset: 3px; list-style: none; }
.sf-more summary::-webkit-details-marker { display: none; }
.sf-more summary::after { content: " ▾"; }
.sf-more[open] summary::after { content: " ▴"; }
.sf-more p { margin: 6px 0 0; font-size: 14px; line-height: 1.6; color: var(--tk-ink2); }

/* 설문 첫 화면(디자인 D-197 B안) — 위 작은 글 · 보상 카드 셋(첫 카드 rose-soft) + 덤 상자 · 상태 칩 · 완료 두 칸 · 이전 글 단추 */
.sf-v2-kicker { font-size: 14px; font-weight: 800; color: var(--tk-rose-ink); margin: 0 0 6px; }
.sf-v2-start h1, .sf-v2-ftitle { margin: 0 0 8px; }
.sf-v2-ftitle { font-size: 22px; }
.sf-v2-lead p { margin: 0 0 4px; font-size: 15.5px; line-height: 1.7; color: var(--tk-ink2); }
.sf-v2-who { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.sf-v2-who small { display: block; font-size: 14px; color: var(--tk-faint); font-weight: 600; margin-top: 2px; }
.sf-v2-who .sf-logout { margin: 0; flex: none; }
.sf-v2-rtitle { margin: 28px 0 4px; font-size: 18px; font-weight: 800; }
.sf-v2-rsub { margin: 0 0 14px; }
.sf-v2-closed { margin: 24px 0 8px; padding: 16px 18px; border-radius: 16px; background: var(--tk-card); box-shadow: inset 0 0 0 1px var(--tk-line); display: flex; flex-direction: column; gap: 4px; }
.sf-v2-closed b { font-size: 16px; } .sf-v2-closed span { font-size: 14px; line-height: 1.6; color: var(--tk-ink2); }
.sf-rcards { display: grid; gap: 10px; }
@media (min-width: 720px) { .sf-rcards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sf-rc { padding: 16px 16px 18px; border-radius: 18px; background: var(--tk-card); box-shadow: inset 0 0 0 1px var(--tk-line); display: flex; flex-direction: column; gap: 4px; }
.sf-rc.hero { background: var(--tk-rose-soft); box-shadow: none; }
.sf-rc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.sf-rc-name { font-size: 20px; font-weight: 800; line-height: 1.3; }
.sf-rc-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--tk-chip); display: grid; place-items: center; flex: none; color: var(--tk-ink); }
.sf-rc.hero .sf-rc-icon { background: var(--tk-rose); color: var(--tk-on-rose); }
.sf-rc-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sf-rc-cond { font-size: 15px; line-height: 1.5; color: var(--tk-ink); }
.sf-rc-sub { font-size: 14px; line-height: 1.5; color: var(--tk-ink2); }
.sf-rbonus { margin-top: 10px; padding: 4px 16px; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--tk-line); display: grid; }
@media (min-width: 720px) { .sf-rbonus { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; } }
.sf-rb { padding: 12px 0; border-top: 1px solid var(--tk-line); }
.sf-rb-in { display: flex; align-items: center; gap: 12px; }
.sf-rb:first-child { border-top: 0; }
@media (min-width: 720px) { .sf-rb { border-top: 0; } }
.sf-rb .sf-rc-icon { width: 40px; height: 40px; }
.sf-rb .sf-rc-name { font-size: 15px; font-weight: 800; }
.sf-rc-state { display: inline-flex; align-items: center; align-self: flex-start; margin-top: 8px; min-height: 26px; padding: 2px 10px; border-radius: 999px; font-size: 14px; font-weight: 800; background: var(--tk-chip); color: var(--tk-ink); }
.sf-rc-state.got, .sf-rc-state.sent { background: transparent; padding-left: 0; }
.sf-ck { flex: none; }
.sf-rc-state .sf-ck { margin-right: 4px; }
.sf-dv-act .sf-ck { margin-right: 6px; vertical-align: -2px; }
.sf-code-ok:not([hidden]) { display: inline-flex; gap: 4px; align-items: center; }
.sf-rc-state.warn, .sf-rc-state.phone { background: var(--sf-warn-soft); color: var(--sf-warn); }
.sf-rc-state.days { background: transparent; padding: 0; font-weight: 700; color: var(--tk-ink2); }
.sf-rc-statebox { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.sf-rc-statebox .sf-rc-state { margin-top: 0; }
.sf-rc-days { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; }
.sf-rc-days i { height: 6px; border-radius: 3px; background: var(--tk-line); } .sf-rc-days i.on { background: var(--tk-rose); }
.sf-v2-actions { display: grid; gap: 14px; margin-top: 8px; }
.sf-v2-actions .sf-btn { margin-top: 12px; }
.sf-strong { color: var(--tk-ink2); font-weight: 700; }
/* 문항 화면(설문 설계 검증 #4 #8 #9 #17) */
.sf-count-tag { margin: 26px 0 -20px; font-size: 14px; font-weight: 800; color: var(--tk-rose-ink); }   /* 질문 위 작은 줄(.sf-label 위 여백 26 을 당김) */
.sf-v2-count { margin: 22px 0 12px; font-size: 14px; color: var(--tk-ink2); font-weight: 600; }
.sf-scale { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.sf-scale .sf-chip { min-width: 0; justify-content: center; padding: 0; min-height: 44px; }
@media (max-width: 340px) { .sf-scale { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sf-pcards { display: grid; gap: 10px; margin-top: 4px; }
.sf-pcard { text-align: left; font: inherit; color: var(--tk-ink); background: var(--tk-card); border: 0; box-shadow: inset 0 0 0 1.5px var(--tk-line); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; cursor: pointer; min-height: 44px; }
.sf-pcard b { font-size: 14px; font-weight: 800; color: var(--tk-faint); } .sf-pcard span { font-size: 14px; color: var(--tk-ink2); line-height: 1.5; }
.sf-pcard .sf-pc-price { font-size: 20px; font-weight: 800; color: var(--tk-ink); line-height: 1.35; }
.sf-pcard.on { background: var(--tk-rose-soft); box-shadow: inset 0 0 0 2.5px var(--tk-ink); }   /* 고르면 채움 + 굵은 테 + ✓(칩과 같은 규칙, 검수 4) */
.sf-pcard.on b { color: var(--tk-ink); } .sf-pcard.on b::after { content: ''; display: inline-block; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat; margin-left: 4px; vertical-align: -1px; }
.sf-v2-nav { align-items: center; gap: 16px; padding-bottom: 24px; }
.sf-v2-nav .sf-prev { flex: none; min-height: 44px; min-width: 64px; padding: 0 6px; background: none; border: 0; font: inherit; font-size: 14px; font-weight: 700; color: var(--tk-ink2); cursor: pointer; }
.sf-v2-nav .sf-btn { margin-top: 0; }
.sf-v2-form { padding-bottom: 32px; }
.sf-clines span { display: block; }
.sf-rbonus + .sf-v2-meta { margin-top: 12px; }
.sf-v2-phone-note { margin: 10px 0 2px; padding: 12px 14px; border-radius: 12px; background: var(--tk-card); box-shadow: inset 0 0 0 1px var(--tk-line); font-size: 14px; line-height: 1.6; font-weight: 600; }
/* 완료 두 칸 */
.sf-done-panes { display: grid; gap: 12px; margin: 18px 0 6px; text-align: left; width: 100%; }
@media (min-width: 720px) { .sf-done-panes { grid-template-columns: 1fr 1.4fr; } }
.sf-done-pane { padding: 16px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--tk-line); }
.sf-done-pane h2 { margin: 0 0 8px; font-size: 14px; font-weight: 800; color: var(--tk-ink2); }
.sf-done-pane p { margin: 0 0 4px; }
.sf-done-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sf-done-rows li { display: flex; flex-direction: column; gap: 2px; }
.sf-done-rows .sf-dr-name { font-weight: 800; }
.sf-done-rows .sf-rc-state { margin-top: 2px; }
.sf-done-next { font-weight: 700; }

/* 좁은 폭 · 글자 큼(설문 설계 #1030 검증 · 디자인 검수 6) — 카드 안 폭이 260(글자 크기 따라 17em) 밑이면 아이콘을 제목 위 왼쪽(40)으로
   올리고 제목 · 설명이 한 줄 전체 폭을 쓴다. 제목은 낱말 단위로만 꺾이고 숫자 덩어리만 끊긴다 */
.sf-rc, .sf-rb { container-type: inline-size; }
@container (max-width: 17em) {
  .sf-rc-top { flex-direction: column-reverse; align-items: flex-start; gap: 8px; }
  .sf-rc-icon, .sf-rb .sf-rc-icon { width: 40px; height: 40px; }
  .sf-rb-in { flex-direction: column; align-items: flex-start; gap: 8px; }
}
.sf-rb-in > div { flex: 1 1 0; min-width: 0; }
.sf-rc-name { min-width: 0; overflow-wrap: anywhere; word-break: keep-all; }

/* 화면 나누기(설문 설계 survey-screens.md · 디자인 값) — 묶음 6칸 막대 · 묶음 이름 · 붙박이 띠 · 화면 전환 */
.sf-v2-cells { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; margin: 4px 0 10px; }
.sf-v2-cells i { height: 4px; border-radius: 2px; background: var(--tk-line); overflow: hidden; }
.sf-v2-cells b { display: block; height: 100%; width: 0; background: var(--tk-ink); transition: width .2s ease-out; }
.sf-v2-where { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 6px; }
.sf-v2-secname { font-size: 15px; font-weight: 800; outline: none; }
.sf-v2-secname:focus-visible { outline: 2px solid var(--tk-rose); outline-offset: 2px; border-radius: 4px; }
.dk-nokbd .sf-v2-secname:focus-visible { outline: none; }   /* 화면 넘길 때 제목으로 옮긴 초점 — 키보드를 쓰기 전엔 테 없음(2차 자동 시작 등, 디자인 2 #1243) */
.sf-v2-where .sf-meta { font-size: 14px; }
.sf-v2-band { position: sticky; bottom: 0; z-index: 2; margin: 24px -20px 0; padding: 12px 20px calc(20px + env(safe-area-inset-bottom));
  background: var(--tk-bg); border-top: 1px solid var(--tk-line); }
.sf-v2-band .sf-v2-count { margin: 0 0 12px; }
.sf-v2-band .sf-error { margin: 0 0 10px; }
.sf-v2-band .sf-v2-nav { padding-bottom: 0; }
.sf-v2-form { padding-bottom: 0; }
.sf-in-next { animation: sf-in-next .2s ease-out; } .sf-in-prev { animation: sf-in-prev .2s ease-out; }
@keyframes sf-in-next { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes sf-in-prev { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sf-in-next, .sf-in-prev { animation: none; } .sf-v2-cells b { transition: none; } }

.sf-ctag { margin-left: 6px; font-size: 14px; font-weight: 600; color: var(--tk-faint); white-space: nowrap; }   /* 동의 줄 끝 '필수' · '선택'(디자인 #1031 검수 2) */

/* ── 읽기 · 움직임 디테일(디자인 D-196 §5 · §6 · §9) — 곡선 out(.2,.8,.2,1) · in-out(.4,0,.2,1) · in(.4,0,1,1). 동작 줄이기면 0ms ── */
html { scroll-behavior: smooth; }
:target, main h1, main h2, [id] { scroll-margin-top: 12px; }   /* 머리는 스크롤과 함께 올라간다(고정 아님) — 12만(디자인 #1040 검수) */
.sf input, .sf textarea, .sf select { scroll-margin-bottom: 120px; }
/* 진행률 바 — 마스코트 로즈 그라데이션, 남은 부분은 그리지 않는다 */
.dk-progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 1000; pointer-events: none; transform-origin: 0 50%;
  transform: scaleX(0); background: linear-gradient(90deg, var(--tk-dot2), var(--tk-rose)); border-radius: 0 2px 2px 0; }
@media (min-width: 1024px) { .dk-progress { height: 4px; } }
/* 맨 위로 */
.dk-totop { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 900; width: 44px; height: 44px; border-radius: 22px;
  border: 0; background: var(--tk-card); box-shadow: inset 0 0 0 1px var(--tk-line), 0 6px 18px rgba(0,0,0,.35); color: var(--tk-ink); cursor: pointer;
  display: grid; place-items: center; opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .14s cubic-bezier(.4,0,1,1), transform .14s cubic-bezier(.4,0,1,1), visibility 0s linear .14s; }
:root[data-theme='light'] .dk-totop { box-shadow: inset 0 0 0 1px var(--tk-line), 0 6px 18px rgba(20,22,26,.12); }
.dk-totop.on { opacity: 1; visibility: visible; transform: none; transition: opacity .18s cubic-bezier(.2,.8,.2,1), transform .18s cubic-bezier(.2,.8,.2,1), visibility 0s; }
.dk-totop.above-sticky { bottom: calc(104px + env(safe-area-inset-bottom)); }
.dk-totop:active { background: var(--tk-chip); }
.dk-totop svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 1024px) { .dk-totop { right: 32px; bottom: 32px; } .dk-totop.above-sticky { bottom: 104px; } }
.dk-kb .dk-totop, .dk-kb .sf-sticky { display: none; }   /* 모바일 키보드가 떠 있으면 */
/* 누르는 것들의 상태(§9-2) — 포커스 링은 키보드일 때만, 호버는 포인터가 있을 때만 */
.sf-btn, .sf-btn-line, .sf-chip, .sf-pcard, .sf-prev, .sf-linkadd, .sf-linkx, .dk-totop, .dk-theme-btn, .sf-send, .sf-copy {
  transition: transform .08s cubic-bezier(.2,.8,.2,1), filter .08s, background-color .12s cubic-bezier(.2,.8,.2,1), color .12s, box-shadow .12s; }
.sf-btn:active:not(:disabled), .sf-btn-line:active, .sf-chip:active, .sf-pcard:active, .sf-send:active { transform: scale(.98); }
.sf-btn:active:not(:disabled) { filter: brightness(.94); }
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible { outline: 2px solid var(--tk-rose); outline-offset: 2px; box-shadow: 0 0 0 2px var(--tk-bg); }
:where(a, button, input, textarea, select, summary, [tabindex]):focus:not(:focus-visible) { outline: none; }
.sf-btn[aria-disabled="true"], .sf-btn:disabled { opacity: .4; cursor: default; }
@media (hover: hover) {
  .sf-btn:hover:not(:disabled) { filter: brightness(1.06); }
  .sf-btn-line:hover, .sf-chip:hover:not(.on), .sf-pcard:hover:not(.on), .sf-linkx:hover, .dk-totop:hover { background-color: var(--tk-chip); }
  .sf-article a:hover, .dk-doc a:hover, .dk-footer a:hover { text-decoration-thickness: 2px; }
}
/* 보내는 중(§9-3) — 단추 안 작은 원 + '보내는 중' */
.sf-btn[aria-busy="true"] { opacity: 1; cursor: progress; gap: 8px; }
.sf-btn[aria-busy="true"]::before { content: ''; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent;
  animation: dk-spin .8s linear infinite; }
@keyframes dk-spin { to { transform: rotate(360deg); } }
.sf-error:not([hidden]) { animation: dk-fade .18s cubic-bezier(.2,.8,.2,1); }
.sf-field[aria-invalid="true"] { border-color: var(--tk-danger); transition: border-color .12s; }
/* 나타나기 · 접기(§9-4) */
.sf-appear { animation: dk-open .18s cubic-bezier(.4,0,.2,1), dk-fade .15s cubic-bezier(.2,.8,.2,1) .18s both; overflow: hidden; }
@keyframes dk-open { from { max-height: 0; } to { max-height: 600px; } }
@keyframes dk-fade { from { opacity: 0; } to { opacity: 1; } }
.sf-more summary::after, .dk-more summary::after { display: inline-block; transition: transform .2s cubic-bezier(.4,0,.2,1); }
.sf-more[open] > *:not(summary) { animation: dk-fade .2s cubic-bezier(.4,0,.2,1); }
/* 그림 늦게 올 때 자리(§9-5) */
.sf-fig-pic img, .dk-cover img { background: var(--tk-chip); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0ms !important; animation-delay: 0ms !important; transition-duration: 0ms !important; transition-delay: 0ms !important; }
  .sf-btn[aria-busy="true"]::before { animation: none; border-right-color: currentColor; opacity: .6; }
}
/* 작품 링크 + / −(재빈 10/3) */
.sf-links { display: flex; flex-direction: column; gap: 8px; }
.sf-linkrow { display: flex; gap: 8px; align-items: center; }
.sf-linkrow .sf-field { flex: 1; min-width: 0; }
.sf-linkx { flex: none; width: 44px; height: 44px; border-radius: 12px; border: 0; background: var(--tk-card); box-shadow: inset 0 0 0 1.5px var(--tk-line);
  color: var(--tk-ink2); font: inherit; font-size: 20px; font-weight: 700; cursor: pointer; }
.sf-linkadd { align-self: flex-start; min-height: 44px; padding: 0 4px; background: none; border: 0; font: inherit; font-size: 14.5px; font-weight: 800;
  color: var(--tk-ink); cursor: pointer; }

/* 작가 지원 — 공고 끝 '지원하기'(디자인 D-199 고침 2) · 지원서 2판 칸 오류(§9-3) */
.sf-apply-cta { margin: 44px 0 8px; padding-top: 28px; border-top: 1px solid var(--tk-line); }
.sf-apply-cta .sf-btn { margin-top: 0; }
.sf-qerr { margin-top: 8px; font-size: 14px; font-weight: 700; color: var(--tk-danger); }
.sf-qerr:not([hidden]) { animation: dk-fade .18s cubic-bezier(.2,.8,.2,1); }
.sf-wa-block { margin-top: 26px; }
.sf-v2-last h2 { margin: 18px 0 4px; font-size: 19px; font-weight: 800; }

/* 화면 나누기 페이지(지원서 · 설문)의 작은 바닥 — 처리방침 링크 하나(디자인 #1045 검수 2) */
.sf-foot-mini { width: 100%; max-width: 720px; margin: 0 auto; padding: 18px 20px calc(28px + env(safe-area-inset-bottom)); font-size: 14px; }
.sf-foot-mini a { color: var(--tk-faint); }

/* 머리 로그인 자리 · 내 페이지(디자인 D-198) */
.dk-header-r { display: flex; align-items: center; gap: 8px; }
.dk-acct { position: relative; min-width: 36px; height: 36px; display: flex; align-items: center; justify-content: flex-end; }
.dk-acct-pill { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--tk-line);
  font-size: 14px; font-weight: 700; color: var(--tk-ink); text-decoration: none; white-space: nowrap; }
.dk-acct-circle { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--tk-rose-soft); color: var(--tk-rose-ink); font: inherit;
  font-size: 15px; font-weight: 800; cursor: pointer; }
:root:not([data-theme='light']) .dk-acct-circle { color: var(--tk-rose); }
.dk-acct-menu { position: absolute; top: 44px; right: 0; z-index: 950; width: 200px; padding: 6px; border-radius: 14px; background: var(--tk-card);
  box-shadow: inset 0 0 0 1px var(--tk-line), 0 10px 28px rgba(0,0,0,.35); display: flex; flex-direction: column; }
:root[data-theme='light'] .dk-acct-menu { box-shadow: inset 0 0 0 1px var(--tk-line), 0 10px 28px rgba(20,22,26,.14); }
.dk-acct-menu.on { animation: dk-menu .15s cubic-bezier(.2,.8,.2,1); }
@keyframes dk-menu { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.dk-acct-who { padding: 8px 10px 10px; border-bottom: 1px solid var(--tk-line); margin-bottom: 4px; display: flex; flex-direction: column; min-width: 0; }
.dk-acct-who b { font-size: 14px; } .dk-acct-who span { font-size: 14px; color: var(--tk-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-acct-menu a { min-height: 40px; display: flex; align-items: center; padding: 0 10px; border-radius: 10px; font-size: 14px; color: var(--tk-ink); text-decoration: none; }
@media (hover: hover) { .dk-acct-menu a:hover { background: var(--tk-chip); } }
.dk-me { max-width: 960px; margin: 0 auto; }
.dk-me h1 { margin: 0 0 18px; font-size: 26px; font-weight: 800; letter-spacing: -1px; }
.dk-me-grid { display: grid; gap: 12px; }
.dk-me-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
@media (min-width: 960px) { .sf-main:has(.dk-me) { max-width: 1000px; } .dk-me-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: start; } }
.dk-me-card { padding: 16px 18px 18px; border-radius: 18px; background: var(--tk-card); box-shadow: inset 0 0 0 1px var(--tk-line); }
.dk-me-card h2 { margin: 0 0 12px; font-size: 16px; font-weight: 800; }
.dk-me-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; margin: 0; font-size: 14.5px; }
.dk-me-kv dt { color: var(--tk-ink2); } .dk-me-kv dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.dk-me-copy { margin-left: 6px; border: 0; background: none; padding: 0; font: inherit; font-size: 14px; color: var(--tk-ink2); text-decoration: underline; cursor: pointer; }
.dk-me-actions { display: flex; gap: 8px; margin-top: 16px; }
.dk-me-actions .sf-btn { margin-top: 0; height: 44px; font-size: 14.5px; flex: none; padding: 0 18px; width: auto; }
/* 작가 지원 고치기 · 철회(재빈 10/6) — 단추 둘은 프로필 '고치기'와 같은 꼴, 철회 글은 위험 색. 철회 뒤 한 칸 */
.dk-me-wact.dk-me-actions { margin-top: 12px; flex-wrap: wrap; }
.sf .dk-me-actions.dk-me-wact .sf-btn { height: 44px; font-size: 14.5px; padding: 0 18px; }   /* 링크(a) 단추도 프로필 '고치기'와 같은 크기 */
.sf .dk-me-wact .dk-me-danger { color: var(--tk-danger); }
.dk-me-ver { margin: 10px 0 0; }
/* 작가 지원 단계 — 동그라미 + 숫자 넷(디자인 209ef96f v2): grid 4열 같은 폭(좌우 -6px), 동그라미 26 · 테두리 1.5, 이름 14/600 한 줄 가운데,
   이음 선 1.5 를 동그라미 가운데 높이에 7px 띄워서. 끝 = ink + 체크, 지금 = 로즈 + 숫자, 남음 = 카드 + line 테두리. 철회는 전체 .42 */
.dk-wsteps-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.dk-wsteps-hd h2 { margin: 0; }
.dk-wsteps-chip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 13px; background: var(--tk-chip); color: var(--tk-ink);
  font-size: 14px; font-weight: 700; white-space: nowrap; }
.dk-wsteps-chip.mute { color: var(--tk-faint); }
.dk-ws { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 -6px 4px; }
.dk-ws.is-wd { opacity: .42; }
.dk-ws-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.dk-ws-dot { width: 26px; height: 26px; box-sizing: border-box; border-radius: 13px; display: grid; place-items: center; font-size: 14px; font-weight: 800;
  background: var(--tk-card); color: var(--tk-faint); box-shadow: inset 0 0 0 1.5px var(--tk-line); }
.dk-ws-step.done .dk-ws-dot { background: var(--tk-ink); color: var(--tk-card); box-shadow: inset 0 0 0 1.5px var(--tk-ink); }
.dk-ws-step.cur .dk-ws-dot { background: var(--tk-rose); color: var(--tk-on-rose); box-shadow: inset 0 0 0 1.5px var(--tk-rose); }
.dk-ws-name { font-size: 14px; font-weight: 600; letter-spacing: -.3px; white-space: nowrap; color: var(--tk-faint); }
.dk-ws-step.done .dk-ws-name { color: var(--tk-ink2); }
.dk-ws-step.on .dk-ws-name { color: var(--tk-ink); font-weight: 800; }
.dk-ws-line { position: absolute; top: 12.25px; left: calc(50% + 19px); width: calc(100% - 38px); height: 1.5px; background: var(--tk-line); }
.dk-ws-line.done { background: var(--tk-ink); }
.dk-wsteps-sub { margin: 14px 0 0; font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--tk-ink2); }
.sf-me > .dk-ws { margin: 6px -6px 4px; }
.sf-wa-edit { margin: 8px 0 16px; }
.dk-dialog-b.is-err { color: var(--tk-danger); }
.dk-me-nick { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }   /* 내 페이지 닉네임 고치기(재빈 10/5) — 그 자리에서 펼침 */
.dk-me-nick[hidden], .dk-me-actions[hidden], .dk-me-nick-done[hidden] { display: none; }   /* display:flex 가 hidden 을 이기지 않게 */
.dk-me-actions .sf-btn, .dk-me-actions button.sf-btn { box-sizing: border-box; height: 44px; min-height: 44px; font-size: 14.5px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }   /* 앱에서 열기 · 고치기 · 저장 · 취소 같은 44(폰 조작 규칙 #1188) */   /* a 단추와 같은 높이 · 글자 */
.dk-me-nick-l { font-size: 14.5px; font-weight: 700; color: var(--tk-ink2); margin-top: 4px; }
.dk-me-nick-hint { margin: -2px 0 0; }
.dk-me-nick .sf-field:disabled { color: var(--tk-ink2); background: var(--tk-chip); cursor: not-allowed; }
.dk-me-nick-hint.is-err { color: var(--tk-danger); font-weight: 700; }   /* 오류는 칸 밑 안내 줄이 바뀜 — 따로 오류 줄 없음 */
/* 코드 입력(D-265 2판) — 카드 폭 최대 420. 칸 60 · 반경 16 · 24/700 · 자간 3 · 가운데 · 고정폭, 빈 칸 chip 면 · 입력 중 테 rose 2px,
   실패 테 danger 2px + 아래 줄 13→14(D-200)/700. 성공: 동전 + 숫자 40/800 → 말 20/800 → 라벨 · 만료 14 ink2 → 단추 둘 */
.dk-rd-in { display: block; box-sizing: border-box; width: 100%; height: 60px; margin: 6px 0 8px; padding: 0 12px; border: 0; border-radius: 16px;
  background: var(--tk-chip); color: var(--tk-ink); font: 700 24px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 3px; text-align: center;
  text-transform: uppercase; outline: none; box-shadow: inset 0 0 0 1px var(--tk-line); }
.dk-rd-in::placeholder { color: var(--tk-faint); opacity: .7; }
.dk-rd-in:focus { box-shadow: inset 0 0 0 2px var(--tk-rose); }
.dk-rd-in[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--tk-danger); }
.dk-rd-hint { margin: 0 0 14px; }
.dk-rd-hint.is-err { color: var(--tk-danger); font-weight: 700; }
.dk-rd-go { width: 100%; }
.dk-rd-go:disabled { opacity: .45; cursor: default; }
.dk-rd-ok { text-align: center; padding: 6px 0 2px; }
.dk-rd-big { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 4px 0 6px; }
.dk-rd-big b { font-size: 40px; font-weight: 800; letter-spacing: -1px; }
.dk-rd-coin { width: 40px; height: 40px; border-radius: 50%; background: center / 22px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 21s-7.5-4.6-9.6-9.2C.9 8.5 3 5 6.4 5c2 0 3.3 1.1 4.1 2.3h3c.8-1.2 2.1-2.3 4.1-2.3C21 5 23.1 8.5 21.6 11.8 19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E"),
  linear-gradient(135deg, #F7A0C8, var(--tk-rose)); box-shadow: 0 0 0 3px var(--tk-rose-soft); }
.dk-rd-t { margin: 0; font-size: 20px; font-weight: 800; }
.dk-rd-s { margin: 6px 0 16px; }
.dk-rd-ok .dk-me-actions { justify-content: center; }
.dk-me-nick .sf-field[aria-invalid="true"] { border-color: var(--tk-danger); }
.dk-me-nick .sf-field:focus, .dk-me-nick .sf-field:focus-visible { outline: none; border-color: var(--tk-rose); box-shadow: inset 0 0 0 0.5px var(--tk-rose); }   /* 초점 테 로즈 2px 한 겹 */
.dk-me-nick .sf-field[aria-invalid="true"]:focus { border-color: var(--tk-danger); box-shadow: inset 0 0 0 0.5px var(--tk-danger); }
.dk-me-kv [hidden] { display: none; }
.dk-me-nick .dk-me-actions { margin-top: 8px; }
.dk-me-nick-done { margin: 12px 0 0; color: var(--tk-ok); }
.dk-me-todo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 6px; padding: 12px 14px; border-radius: 14px;
  background: var(--tk-rose-soft); font-size: 14px; font-weight: 700; }
.dk-me-todo .sf-btn { margin-top: 0; height: 40px; width: auto; padding: 0 14px; font-size: 14px; flex: none; }
.dk-me-link { display: inline-block; margin-top: 12px; font-size: 14px; color: var(--tk-ink2); }
.dk-me-soon { background: transparent; box-shadow: none; border: 1.5px dashed var(--tk-line); display: flex; flex-direction: column; gap: 2px; }
.dk-me-delete { display: inline-block; margin: 22px 0 8px; font-size: 14px; color: var(--tk-faint); }
/* /me 로그아웃(재빈 10/27, 디자인 web-auth 통과) — 테 단추 48 · 반경 24 · 15/700 · 테 1px 선 색, 위 20 · 아래 18, 폭은 카드 열(데스크톱 왼쪽 열) */
.dk-me-logout { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; height: 48px; margin: 20px 0 18px; border-radius: 24px;
  box-shadow: inset 0 0 0 1px var(--tk-line); color: var(--tk-ink); font-size: 15px; font-weight: 700; text-decoration: none; }
@media (hover: hover) { .dk-me-logout:hover { background: var(--tk-chip); } }
.dk-me-logout:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--tk-line), 0 0 0 2px var(--tk-bg), 0 0 0 4px var(--tk-rose); }
@media (min-width: 960px) { .dk-me-logout { max-width: calc((100% - 12px) / 2.25); } }
.dk-me-logout + .dk-me-foot .dk-me-delete, .dk-me-logout + .dk-me-foot .dk-me-fnoff { margin-top: 0; }
.dk-me-foot { display: flex; flex-wrap: wrap; gap: 0 22px; align-items: baseline; }   /* 소식 메일 끄기(받기로 한 사람만) · 계정 지우기 */
.dk-me-fnoff { margin: 22px 0 8px; font-size: 14px; }   /* 글색은 옆 '계정 지우기'와 같게(.sf-main a 가 inherit) */
.dk-me-fnoff .dk-me-delete { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.dk-acct-menu[hidden] { display: none; }
/* 운영자 미리보기(재빈 10/5, 디자인 2) — 머리 알약 둘(≥600) · 폰은 계정 메뉴 맨 위 두 줄 + 선 · /writers · /writers/me 배너 */
.dk-acct-op { display: none; }
@media (max-width: 599px) {
  .dk-header .dk-op-pill { display: none; }   /* .dk-header a(inline-flex) 보다 세게 */
  .dk-acct-op { display: flex; flex-direction: column; padding-bottom: 4px; margin-bottom: 4px; border-bottom: 1px solid var(--tk-line); }
  .dk-acct-menu a { min-height: 44px; }
}
.dk-op-banner { display: flex; align-items: center; gap: 8px; padding-top: 10px; padding-bottom: 10px; background: var(--tk-rose-soft); color: var(--tk-rose-ink); font-size: 15px; font-weight: 700; line-height: 1.4; }
:root:not([data-theme='light']) .dk-op-banner { color: var(--tk-rose); }
.dk-op-banner svg { flex: none; }

/* 집중 모드(D-200) — 문항 · 지원서 화면(나누기 양식이 보일 때)은 바닥을 숨긴다. 첫 화면 · 동의 · 완료에는 둔다. 머리(로고)는 남김 */
body:has(form.sf-v2-form:not([hidden])) .sf-foot-mini, body:has(form.sf-v2-form:not([hidden])) .dk-footer { display: none; }

/* 긴 글 줄바꿈(재빈 10/4 '모바일 지원 공고 줄바꿈', D-200) — 공고 · 설문 · 처리방침 · 약관 · AI 안내 공통.
   낱말은 끊지 않고(keep-all), 제목은 줄 길이를 고르게(balance), 문단 · 목록은 한 글자만 넘어가는 끝 줄을 없앤다(pretty).
   긴 주소만 아무 데서나 끊는다. 목록은 머리 굵은 글 다음 줄이 글머리 들여쓰기에 맞게, 긴 항목 사이는 조금 띄운다(글은 그대로) */
.sf-article, .dk-legal, .dk-doc, .sf-v2 { word-break: keep-all; overflow-wrap: break-word; }
.sf-article h1, .sf-article h2, .sf-article h3, .dk-legal h1, .dk-legal h2, .dk-legal h3, .dk-doc h1, .dk-doc h2, .sf-v2 h1, .sf-v2-qt { text-wrap: balance; }
.sf-article p, .sf-article li, .dk-legal p, .dk-legal li, .dk-doc p, .dk-doc li, .sf-v2-lead p { text-wrap: pretty; }
.sf-article a, .dk-legal a, .dk-doc a, .dk-legal td { overflow-wrap: anywhere; }
.sf-article ul { margin: 0 0 16px; padding-left: 22px; }
.sf-article ul li { margin-bottom: 14px; }
.sf-article li > strong:first-child { color: var(--tk-ink); }
@media (max-width: 599px) { .sf-article ul li, .sf-article ol li { margin-bottom: 18px; } }
/* 지원서 파일 줄(매니저 10/4 '+/−') — 이름 · 크기, 아래 진행 막대, 오른쪽 빼기(링크 줄의 − 와 같은 단추) */
.sf-files { display: flex; flex-direction: column; gap: 8px; }
.sf-files:not(:empty) { margin: 4px 0 10px; }
.sf-filerow { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; min-height: 56px; box-sizing: border-box;
  border-radius: 12px; background: var(--tk-card); box-shadow: inset 0 0 0 1px var(--tk-line); }
.sf-filerow-in { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sf-filerow-t { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.sf-filerow-t b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 700; }
.sf-filerow-t .sf-meta { flex: none; font-size: 14px; }
.sf-fileprog { height: 4px; margin-top: 8px; border-radius: 2px; background: var(--tk-line); overflow: hidden; }
.sf-fileprog i { display: block; width: 0; height: 100%; background: var(--tk-rose); transition: width .15s linear; }
.sf-filerow.done .sf-fileprog, .sf-filerow.err .sf-fileprog { display: none; }
.sf-filemsg { font-size: 14px; }
.sf-filemsg:empty { display: none; }
.sf-filerow.err { box-shadow: inset 0 0 0 1px var(--tk-danger); }
.sf-filerow.err .sf-filemsg { margin-top: 4px; color: var(--tk-danger); font-weight: 700; }
/* ── 설문 3판(디자인 D-200 · 설문 설계 10/4) — 세로 목록 줄 · 동그라미 척도 · '없어요 또는 글' · 그림 고르기 · 빈 필수 띠 · 위 진행 띠 ── */
.sf-v2-qt { font-size: 21px; font-weight: 800; line-height: 1.45; margin: 30px 0 14px; }
.sf-v2-sec > .sf-q:first-child .sf-v2-qt, .sf-v2-sec > .sf-q:first-child .sf-miss-band { margin-top: 18px; }
.sf-rows { display: flex; flex-direction: column; gap: 8px; }
.sf-row { width: 100%; min-height: 56px; padding: 14px 16px; border: 0; border-radius: 14px; display: flex; align-items: center; gap: 12px;
  font: inherit; font-size: 17px; line-height: 1.4; text-align: left; color: var(--tk-ink); background: var(--tk-card);
  box-shadow: inset 0 0 0 1px var(--tk-line); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sf-row.on { background: var(--tk-rose-soft); box-shadow: inset 0 0 0 2px var(--tk-rose); font-weight: 700; }
.sf-row-mark { flex: none; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--tk-ink2); position: relative; }
.sf-row-mark.check { border-radius: 6px; }
.sf-row.on .sf-row-mark { background: var(--tk-rose); box-shadow: none; }
.sf-row.on .sf-row-mark.radio::after { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: var(--tk-on-rose); }
.sf-row.on .sf-row-mark.check::after { content: ''; position: absolute; left: 6px; top: 6px; width: 10px; height: 5px; border-left: 2.4px solid var(--tk-on-rose);
  border-bottom: 2.4px solid var(--tk-on-rose); transform: rotate(-45deg); }
.sf-row-t { flex: 1; min-width: 0; }
.sf-row-text { align-items: flex-start; min-height: 96px; cursor: text; }
.sf-row-area { flex: 1; min-width: 0; min-height: 68px; border: 0; padding: 0; background: transparent; color: inherit; font: inherit; font-size: 17px;
  font-weight: 400; line-height: 1.6; resize: vertical; outline: none; }
.sf-row-area::placeholder { color: var(--tk-faint); }
.sf-row-text:focus-within { box-shadow: inset 0 0 0 2px var(--tk-rose); }
.sf-row-area:focus, .sf-row-area:focus-visible { outline: none; box-shadow: none; }   /* 초점은 줄 테(위)가 보여 준다 — 칸 안에 두 번째 테를 그리지 않음 */
.sf-rows + .sf-other { margin-top: 8px; font-size: 17px; }
.sf-circles { display: flex; justify-content: space-between; gap: 0; margin: 0 -12px; }   /* 말 다섯이 한 줄에 들어가게 양옆 여백을 조금 씀 */
.sf-circle { flex: 1 1 0; min-width: 0; display: grid; grid-template-rows: 44px auto; justify-items: center; gap: 6px; padding: 0; border: 0;
  background: none; font: inherit; color: var(--tk-ink2); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sf-dot { align-self: center; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--tk-ink2); display: grid; place-items: center; }
.sf-circle.on .sf-dot { background: var(--tk-rose); box-shadow: none; }
.sf-circle.on .sf-dot::after { content: ''; display: inline-block; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat; color: var(--tk-on-rose); }
.sf-circle-l { font-size: 14px; line-height: 1.35; text-align: center; word-break: keep-all; overflow-wrap: normal; letter-spacing: -.02em; }
.sf-circle.on .sf-circle-l { color: var(--tk-ink); font-weight: 700; }
.sf-circle:focus-visible { outline: none; } .sf-circle:focus-visible .sf-dot { outline: 2px solid var(--tk-rose); outline-offset: 3px; }
.sf-miss-band { margin: 30px 0 -16px; padding: 10px 14px; border-radius: 12px; background: var(--tk-rose-soft); color: var(--tk-rose-ink); font-size: 15px; font-weight: 700; }
.sf-v2-where { margin: 4px 0 8px; }
.sf-v2-pct { font-size: 15px; font-weight: 800; color: var(--tk-rose-ink); font-variant-numeric: tabular-nums; }
.sf-v2-bar { height: 8px; border-radius: 4px; background: var(--tk-line); overflow: hidden; margin: 0 0 4px; }
.sf-v2-bar b { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--tk-rose); transition: width .2s ease-out; }
.sf-cmore { margin: -4px 0 8px 34px; }
.sf-cmore summary { display: inline-flex; align-items: center; min-height: 32px; font-size: 14px; font-weight: 700; color: var(--tk-ink2); cursor: pointer; list-style: none; }
.sf-cmore summary::-webkit-details-marker { display: none; }
.sf-cmore summary::after { content: '›'; margin-left: 4px; transition: transform .15s; }
.sf-cmore[open] summary::after { transform: rotate(90deg); }
.sf-cmore small { display: block; margin-top: 4px; font-size: 14px; line-height: 1.65; color: var(--tk-ink2); }
.sf-cmore .sf-clines span { display: block; }
.sf-imgs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 560px) { .sf-imgs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sf-img { position: relative; }
.sf-img-pic { display: block; width: 100%; aspect-ratio: 3 / 4; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: var(--tk-chip); cursor: zoom-in; }
.sf-img-pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.sf-img.on .sf-img-pic { box-shadow: 0 0 0 2px var(--tk-rose); }
.sf-img-pick { position: absolute; top: 0; right: 0; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.sf-img-pick::before { content: ''; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 2px #fff, 0 1px 4px rgba(0, 0, 0, .45); background: rgba(0, 0, 0, .28); }   /* 밝은 그림 위에서도 보이게(설문 설계 10/4) */
.sf-img.on .sf-img-pick::before { content: attr(data-n); font-family: 'SUIT Variable', sans-serif; font-size: 14px; font-weight: 800; line-height: 26px; text-align: center; color: var(--tk-on-rose); background: var(--tk-rose); box-shadow: 0 1px 4px rgba(0, 0, 0, .45); }
.sf-img.on .sf-img-pick:not([data-n])::after { content: ''; display: inline-block; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat; position: absolute; color: var(--tk-on-rose); }
.sf-img.dim .sf-img-pick { opacity: .4; }
.sf-zoom { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: rgba(12, 12, 16, .9); opacity: 0; transition: opacity .18s ease-out;   /* 그림이 주인공 — 빛 · 어둠 모두 어두운 막 */
  padding: env(safe-area-inset-top) 0 0; }
.sf-zoom.in { opacity: 1; }
.sf-zoom-x { align-self: flex-end; width: 44px; height: 44px; margin: 8px 8px 0; border: 0; border-radius: 22px; background: none; color: #fff; font-size: 30px; line-height: 1; cursor: pointer; }
.sf-zoom-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; position: relative; padding: 0 8px; }
.sf-zoom-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 14px; }
.sf-zoom-pager { display: flex; align-items: center; gap: 2px; }
.sf-zoom-nav { width: 44px; height: 44px; border: 0; border-radius: 22px; background: none; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.sf-zoom-bar { display: flex; align-items: center; gap: 16px; width: 100%; max-width: 560px; margin: 0 auto; padding: 14px 20px calc(18px + env(safe-area-inset-bottom)); }
.sf-zoom-bar .sf-btn { flex: 1; margin: 0; }
.sf-zoom-n { color: #fff; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .sf-zoom { transition: none; } .sf-v2-bar b { transition: none; } .sf-cmore summary::after { transition: none; } }
.sf-fcard { padding: 0; align-items: stretch; gap: 0; cursor: default; }
.sf-fcard-pic { flex: none; width: 64px; height: 138px; margin: 10px 0 10px 10px; padding: 0; border: 0; border-radius: 10px; background: var(--tk-chip); cursor: zoom-in; overflow: hidden; }
.sf-fcard-pic img { display: block; width: 100%; height: 100%; object-fit: contain; }   /* 여섯 모두 같은 상자 · 원래 비율 그대로(매니저 · 설문 설계 10/4) */
.sf-fcard-main { flex: 1; min-width: 0; min-height: 56px; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 0; background: none;
  font: inherit; color: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sf-fcard-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sf-fcard-t b { font-size: 17px; font-weight: 700; line-height: 1.4; }
.sf-fcard-t span { font-size: 15px; font-weight: 400; line-height: 1.55; color: var(--tk-ink2); }
.sf-fcard.on .sf-row-mark { background: var(--tk-rose); box-shadow: none; }
.sf-fcard.on .sf-row-mark::after { content: ''; position: absolute; left: 6px; top: 6px; width: 10px; height: 5px; border-left: 2.4px solid var(--tk-on-rose);
  border-bottom: 2.4px solid var(--tk-on-rose); transform: rotate(-45deg); }
.sf-fcard.on { font-weight: 400; }
.sf-zoom-open { overflow: hidden; }
.sf-zoom-open .sf-v2-band { visibility: hidden; }   /* 크게 보기 동안 붙박이 띠를 숨긴다 — 막 사이로 '다음'이 비치던 것 */
.sf-imgs.sf-imgs-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* 그림 하나 고르기(E12~E15) — 늘 3열 한 줄 */
/* 펼치는 하위 문항(재빈 10/4 최종 · 디자인 값) — 앞 문항 마지막 보기와 20, 하위끼리 28, 왼쪽 2px 연결선(로즈 .45 다크 / .35 라이트)이
   하위 덩어리 전체를 덮는다. 열 때 200ms, 닫을 때 160ms ease-in, 스크롤 · 초점은 건드리지 않는다 */
.sf-v2-q.sf-kid { position: relative; padding-left: 16px; margin-top: 20px; }
.sf-v2-q.sf-kid + .sf-v2-q.sf-kid { margin-top: 28px; }
.sf-v2-q.sf-kid > .sf-v2-qt:first-child, .sf-v2-q.sf-kid > .sf-miss-band:first-child { margin-top: 0; }
.sf-v2-q.sf-kid::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; border-radius: 1px; background: var(--tk-rose); opacity: .45; }
:root[data-theme='light'] .sf-v2-q.sf-kid::before { opacity: .35; }
.sf-v2-q.sf-kid:has(+ .sf-v2-q.sf-kid)::before { bottom: -28px; }
.sf-v2-q.sf-kid.sf-appear { animation: sf-sub-open .2s cubic-bezier(.2,.8,.2,1) backwards;   /* 끝나면 max-height 를 풀어 긴 하위(E9)도 잘리지 않게 */ overflow: hidden; }
@keyframes sf-sub-open { from { max-height: 0; opacity: 0; } to { max-height: 1400px; opacity: 1; } }
.sf-v2-q.sf-kid.sf-collapse { overflow: hidden; max-height: 0 !important; opacity: 0; margin-top: 0; transition: max-height .16s ease-in, opacity .16s ease-in, margin-top .16s ease-in; }
@media (prefers-reduced-motion: reduce) { .sf-v2-q.sf-kid.sf-appear { animation: none; } }
/* 단계 척도(§15 · 디자인 10/4) — 칸마다 누르는 자리(44 이상), 같은 원 26, 트랙은 첫 원 가운데 → 끝 원 가운데 */
.sf-lad { --dot: 26px; margin-top: 4px; }
.sf-lad-row { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.sf-lad-track { position: absolute; left: calc(50% / var(--n)); right: calc(50% / var(--n)); top: 22px; height: 2px; margin-top: -1px; background: var(--tk-line); pointer-events: none; }
.sf-lad-track i { display: block; height: 100%; width: 0; background: var(--tk-rose); transition: width .16s ease-out; }
.sf-lad.picked .sf-lad-track i { width: calc(100% * var(--at) / (var(--n) - 1)); }
.sf-ladp { position: relative; display: flex; flex-direction: column; align-items: center; min-height: 44px; padding: 9px 0 0; border: 0; background: none;
  font: inherit; color: var(--tk-ink2); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sf-ladp-dot { width: var(--dot); height: var(--dot); box-sizing: border-box; border-radius: 50%; border: 2px solid var(--tk-ink2); background: var(--tk-bg);
  display: grid; place-items: center; transition: background-color .16s ease-out, border-color .16s ease-out, box-shadow .16s ease-out; }
.sf-ladp.fill .sf-ladp-dot { border-color: var(--tk-rose); background: var(--tk-rose-soft); }
.sf-ladp.on .sf-ladp-dot { border-color: var(--tk-rose); background: var(--tk-rose); box-shadow: 0 0 0 5px var(--tk-rose-soft); }
.sf-ladp:focus-visible { outline: none; } .sf-ladp:focus-visible .sf-ladp-dot { outline: 2px solid var(--tk-rose); outline-offset: 6px; }
.sf-ladp-l { display: none; margin-top: 10px; font-size: 14px; line-height: 1.35; color: var(--tk-meta, var(--tk-faint)); text-align: center; word-break: keep-all; padding: 0 2px; }
.sf-ladp.on .sf-ladp-l { color: var(--tk-ink); font-weight: 700; }
.sf-lad-ends { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; font-size: 14px; color: var(--tk-meta, var(--tk-faint)); }
.sf-lad-ends span:last-child { text-align: right; }
.sf-lad-pick { min-height: 26px; margin-top: 14px; text-align: center; font-size: 17px; font-weight: 700; line-height: 26px; color: var(--tk-rose-ink); }
:root:not([data-theme='light']) .sf-lad-pick { color: var(--tk-rose); }
.sf-lad-ticks { position: relative; height: 20px; margin: 0 0 0; }
.sf-lad-ticks span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; font-size: 14px; line-height: 20px; color: var(--tk-meta, var(--tk-faint)); }
.sf-lad-ticks span::after { content: ''; position: absolute; left: 50%; top: 20px; width: 1px; height: 8px; margin-left: -.5px; background: currentColor; opacity: .6; }
.sf-lad-ticks b { font-weight: 400; }
.sf-lad.ruler .sf-ladp { padding-top: 13px; }
.sf-lad.ruler .sf-lad-track { top: 26px; }
@media (min-width: 480px) {   /* 빈도 · 시간은 칸마다 짧은 말, 금액(눈금)은 모바일과 같은 꼴 */
  .sf-lad:not(.ruler) .sf-ladp-l { display: block; }
  .sf-lad:not(.ruler) .sf-lad-ends, .sf-lad:not(.ruler) .sf-lad-pick { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sf-lad-track i, .sf-ladp-dot { transition: none; } }
.sf-v2-chip { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; margin: 18px 0 -6px; border-radius: 16px; background: var(--tk-chip);
  color: var(--tk-ink); font-size: 14px; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .sf-v2-q.sf-undim { animation: none; } }
/* 들어오기 전으로 — 사이트 공통 뒤로 단추(디자인 2 4185f763 → f525d2fe 선 화살표 ← 18 · 사이 8, 재빈 10/4 '못생겼어'): 면 · 선 · 알약 없이 화살표 22 + 글 15/600.
   높이 44(누르는 칸), 안쪽 0 10 0 2, 왼쪽 −8(화살표가 본문 왼쪽 선에 맞게), 아래 8. 평소 ink2 → 올리면 ink + 화살표 왼쪽 2 */
.sf-back { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 10px 0 4px; margin: 0 0 8px -4px; box-sizing: border-box;
  border-radius: 10px; background: none; box-shadow: none; color: var(--tk-ink2); text-decoration: none; font-size: 15px; font-weight: 600; }
.sf main a.sf-back, .sf .sf-main a.sf-back { color: var(--tk-ink2); }
.sf-back .sf-back-i { flex: none; transition: transform .15s ease-out; }
.sf-back:hover, .sf main a.sf-back:hover, .sf .sf-main a.sf-back:hover { color: var(--tk-ink); }
.sf-back:hover .sf-back-i { transform: translateX(-2px); }
.sf-back:focus-visible { outline: 2px solid var(--tk-rose); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .sf-back .sf-back-i { transition: none; } .sf-back:hover .sf-back-i { transform: none; } }
.sf-back[hidden] { display: none; }

/* D-200 글자 · 폭(디자인 D-200) — 가장 작은 글 14(13 이하 없음). 법 문서(약관 · 처리방침 · AI 안내)는 읽기 폭 680, 본문 17/1.75,
   h2 21, h3 17, 표 15, 위에 '차례' 카드 */
.dk-body.dk-readw { max-width: 680px; margin-left: auto; margin-right: auto; box-sizing: content-box; }
.dk-legal { font-size: 17px; line-height: 1.75; }
.dk-legal h2 { font-size: 21px; line-height: 1.45; margin: 36px 0 10px; scroll-margin-top: 16px; }
.dk-legal h3 { font-size: 17px; margin: 24px 0 8px; }
.dk-legal table { font-size: 15px; }
.dk-toc { padding: 16px 18px; border-radius: 16px; background: var(--tk-card); box-shadow: inset 0 0 0 1px var(--tk-line); }
.dk-toc b { display: block; margin: 0 0 8px; font-size: 15px; font-weight: 800; color: var(--tk-ink); }
.dk-toc ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.dk-toc a { display: block; padding: 6px 0; font-size: 15px; line-height: 1.5; color: var(--tk-ink2); text-decoration: none; word-break: keep-all; }
.dk-toc a:hover { color: var(--tk-ink); text-decoration: underline; text-underline-offset: 3px; }

/* D-200 폭 · 제목(디자인 #1086 답) — 머리 · 바닥 · 첫 화면은 한 컨테이너 1120(여백 600 밑 20, 이상 40 — 1440 에서 로고 x 160).
   글 칸: 공고 · 법 문서 680, 양식(/contact · /survey · /writers/apply) 560. 제목 28/1.3/800(600 이상 32), 표지 34/1.25/800(600 이상 40) */
:root { --dk-gut: 20px; }
@media (min-width: 600px) { :root { --dk-gut: 40px; } }
.dk-header, .dk-footer, .dk-banner, .dk-op-banner { padding-left: max(var(--dk-gut), calc((100% - 1120px) / 2)); padding-right: max(var(--dk-gut), calc((100% - 1120px) / 2)); }
.dk-body, .dk-body.dk-readw { padding-left: var(--dk-gut); padding-right: var(--dk-gut); }
.sf-main { max-width: calc(680px + 2 * var(--dk-gut)); padding-left: var(--dk-gut); padding-right: var(--dk-gut); box-sizing: border-box; }
.sf-main:has(> .sf-fb) { max-width: calc(560px + 2 * var(--dk-gut)); }
.dk-title, .sf-article h1, .sf-me h1, .sf-fb h1, .sf-v2-start h1 { font-size: 28px; line-height: 1.3; font-weight: 800; letter-spacing: -0.02em; }
@media (min-width: 900px) { .dk-title, .sf-article h1, .sf-me h1, .sf-fb h1, .sf-v2-start h1 { font-size: 32px; } }
/* 공개 사이트 틀 맞춤(디자인 2 site-frame-2026-10-04, 매니저 10/4 '여섯 다 맞춤값으로') — 쪽 제목 하나 390 28 · 900+ 32 / 800 / 1.3 / −0.02em
   (설문 표지 34/40 도 같이, 첫 화면만 예외). 머리 → 첫 요소 390 24 · 900+ 40 — 본문 칸의 첫 요소는 위 여백 0 */
.sf-main > :first-child, .sf-fb > :first-child, .sf-article > :first-child, .dk-body > :first-child, .sf-v2-start > :first-child { margin-top: 0; }

/* 보상 카드 작은 글 · 받는 법(설문 설계 §17) */
.sf-rc-lsub { display: block; margin-top: 2px; font-size: 14px; font-weight: 600; color: var(--tk-faint); }
.sf-howto { width: 100%; margin: 20px 0 0; padding: 16px 18px; border-radius: 16px; background: var(--tk-card); box-shadow: inset 0 0 0 1px var(--tk-line); text-align: left; }
.sf-howto h2, .sf-howto h3 { margin: 0 0 8px; font-size: 17px; font-weight: 800; }
.sf-howto ul { margin: 0; padding-left: 20px; } .sf-howto li { margin: 0 0 6px; font-size: 15px; line-height: 1.65; color: var(--tk-ink2); text-wrap: pretty; }
.sf-tline { display: block; }
.sf-done-edit { display: inline-block; margin: 6px 0 0; font-size: 15px; font-weight: 700; color: var(--tk-ink); text-decoration: underline; text-underline-offset: 3px; }
.sf-done-edit[hidden] { display: none; }
.dk-me-rw { display: flex; flex-direction: column; gap: 10px; } .dk-me-rw > span { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }   /* 이름 줄 아래 상태 한 줄(올영 · CU · 도키 같게, 디자인 2 #1243) */
.dk-me-rw-n { font-weight: 700; } .dk-me-rw-s { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dk-me-rw em { font-style: normal; font-size: 14px; font-weight: 700; color: var(--tk-faint); }

/* 보상 카드 최종(디자인 10/4, SPEC §12 · reward-final) — 한 줄에 한 장, 모두 같은 폭. 쿠폰 = 그림 88 카드, 도키 = 앰버 홀로(다크 · 라이트 같은 카드) */
@font-face { font-family: 'Outfit DK'; font-weight: 100 900; font-style: normal; font-display: swap;
  src: url('/static/dokimi/fonts/Outfit-subset.woff2') format('woff2'); unicode-range: U+2B-2E, U+30-39, U+42, U+44, U+49, U+4B, U+4E-4F, U+53, U+55; }   /* 숫자 · 각인 글자만(OFL) */
.sf-rlist { display: flex; flex-direction: column; gap: 12px; }
.sf-card-full { opacity: .55; }   /* 정원 찬 달 올영 카드(§55) — 칩은 그대로 읽히게 흐림만 */
.sf-cp { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 20px; background: var(--tk-card); box-shadow: inset 0 0 0 1px var(--tk-line); }
.sf-cp-art { width: 88px; height: 88px; border-radius: 18px; flex: none; display: flex; align-items: center; justify-content: center; background: linear-gradient(145deg, #3A2030, #24161D); }
:root[data-theme='light'] .sf-cp-art { background: linear-gradient(145deg, #F9D9E6, #F3E8FF); }
.sf-cp-art img { display: block; }
.sf-cp-art.photo { background: #fff; padding: 6px; box-sizing: border-box; box-shadow: inset 0 0 0 1px var(--tk-line); }   /* 실제 상품 그림(§43) — 자르거나 색 바꾸지 않고 contain + 바탕 여백 */
.sf-cp-art.photo img { width: 100%; height: 100%; object-fit: contain; }
:root[data-theme='light'] .sf-cp-art.photo { background: #fff; }
.sf-cp-tx { min-width: 0; }
.sf-cp-lab { font-size: 14px; font-weight: 700; color: var(--tk-rose); }
.sf-cp-prod { margin-top: 2px; font-size: 17px; font-weight: 800; line-height: 1.35; color: var(--tk-ink); }
.sf-cp-cond { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--tk-ink2); }
.sf-dks-head { margin: 0 2px 6px; font-size: 14px; font-weight: 800; color: var(--tk-rose); }
.sf-dks-foot { margin: 8px 2px 0; font-size: 15px; line-height: 1.5; color: var(--tk-ink2); }
.sf-dk-scene { perspective: 900px; }
.sf-dk { --tx: 0; --ty: 0; position: relative; overflow: hidden; min-height: 124px; padding: 16px 18px 18px; border-radius: 22px; color: #fff;
  background: linear-gradient(135deg, #ECA947, #C97D1F 45%, #8A4E12);
  transform: rotateY(calc(var(--tx) * 8deg)) rotateX(calc(var(--ty) * -6deg));
  box-shadow: 0 calc(14px + var(--ty) * 6px) 34px rgba(0, 0, 0, .42), calc(var(--tx) * -10px) 0 24px rgba(0, 0, 0, .16); }
.sf-dk-hm, .sf-dk-shine, .sf-dk-spark, .sf-dk-edge, .sf-dk-big { position: absolute; pointer-events: none; }
.sf-dk-hm { inset: 0;
  -webkit-mask: radial-gradient(120% 90% at calc(50% + var(--tx) * 45%) calc(40% + var(--ty) * 45%), #000, rgba(0, 0, 0, .35) 55%, transparent 80%);
  mask: radial-gradient(120% 90% at calc(50% + var(--tx) * 45%) calc(40% + var(--ty) * 45%), #000, rgba(0, 0, 0, .35) 55%, transparent 80%); }
.sf-dk-holo { position: absolute; inset: -40%; mix-blend-mode: overlay; opacity: .28; transform: translate(calc(var(--tx) * 14%), calc(var(--ty) * 14%));
  background: repeating-linear-gradient(115deg, #ff8fb1 0%, #ffd36e 7%, #9dfcc0 14%, #7fd7ff 21%, #b69bff 28%, #ff8fb1 35%); }
.sf-dk-shine { inset: 0; mix-blend-mode: screen; opacity: .32;
  background: linear-gradient(105deg, transparent calc(35% + var(--tx) * 55%), rgba(255, 255, 255, .75) calc(50% + var(--tx) * 55%), transparent calc(65% + var(--tx) * 55%)); }
.sf-dk-spark { inset: -10%; mix-blend-mode: screen; opacity: calc(.15 + (var(--tx) * var(--tx) + var(--ty) * var(--ty)) * .55); transform: translate(calc(var(--tx) * -4%), calc(var(--ty) * -4%));
  background: radial-gradient(circle at 12% 22%, #fff 0 1.4px, transparent 2.2px), radial-gradient(circle at 78% 14%, #fff 0 1.1px, transparent 1.9px), radial-gradient(circle at 64% 58%, #fff 0 1.6px, transparent 2.6px),
    radial-gradient(circle at 30% 76%, #fff 0 1.2px, transparent 2px), radial-gradient(circle at 88% 82%, #fff 0 1.4px, transparent 2.2px), radial-gradient(circle at 46% 34%, #fff 0 .9px, transparent 1.6px); }
.sf-dk-edge { inset: 0; border-radius: 22px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, calc(.18 + var(--tx) * .12)), inset 0 1px 0 rgba(255, 255, 255, .35); }
.sf-dk-big { right: -4px; bottom: -11px; font-family: 'Outfit DK', 'SUIT Variable', sans-serif; font-size: 58px; font-weight: 900; letter-spacing: -2px; line-height: 1; color: rgba(255, 255, 255, .14); }
.sf-dk-top, .sf-dk-amt, .sf-dk-chat { position: relative; }
.sf-dk-top { display: flex; justify-content: space-between; align-items: center; height: 22px; }
/* 설문 카드 안 워드마크: 흰 판(wordmark-white.svg, 디자인 d2409506 — 글자 · 점 · 말풍선 흰색, 하트는 뚫려 카드 바탕색). 필터 없음 —
   옛 흰색 필터는 로고 A 하트를 지웠고, 다크판 + 흰 테두리는 금색 · 장미색 카드에서 지저분했다(디자인 #1442 검수) */
.sf-dk-wm { height: 22px; width: auto; }
.sf-dk-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 12px; background: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
  font-size: 14px; font-weight: 800; }   /* 디자인 13 — 사이트 최소 14(D-200) */
.sf-dk-amt { display: flex; align-items: center; margin-top: 12px; }
.sf-dk-amt img { margin-right: 10px; flex: none; }
.sf-dk-amt, .sf-dk-chat { text-shadow: 0 1px 2px rgba(0, 0, 0, .28); }
.sf-dk-n { font-family: 'Outfit DK', 'SUIT Variable', sans-serif; font-size: 40px; font-weight: 800; letter-spacing: -1.3px; line-height: 1; font-variant-numeric: tabular-nums; }
.sf-dk-u { margin-left: 6px; padding-top: 6px; font-size: 20px; font-weight: 800; letter-spacing: -.3px; }
.sf-dk-chat { margin-top: 6px; font-size: 14px; font-weight: 700; letter-spacing: -.1px; opacity: .82; }
.sf-dks > .sf-rc-state, .sf-dks > .sf-rc-statebox { margin-left: 2px; }

/* 은행 카드 꼴 — E5 정지 카드 셋(price-e5) · 첫 화면 · 끝 화면 패스(end-pass, 홀로 켬). 다크 · 라이트 같은 카드 */
.sf-n { font-family: 'Outfit DK', 'SUIT Variable', sans-serif; font-weight: 800; font-size: 1.06em; }
.sf-bc { --tx: 0; --ty: 0; position: relative; overflow: hidden; height: 240px; padding: 18px 20px 20px; border-radius: 22px; color: #fff; text-align: left;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .28); box-shadow: 0 12px 30px rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(255, 255, 255, .22); }
.sf-bc.k-free { background: linear-gradient(135deg, #9A9AA2, #6E6E76 45%, #45454C); }
.sf-bc.k-doki { background: linear-gradient(135deg, #ECA947, #C97D1F 45%, #8A4E12); }
.sf-bc.k-pass { background: linear-gradient(135deg, #E0508C, #C52466 45%, #8E1A4F); }   /* D-246 */
.sf-bc-still { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .18) 48%, transparent 66%); }
.sf-bc-big { position: absolute; right: -4px; bottom: -12px; pointer-events: none; font-family: 'Outfit DK', 'SUIT Variable', sans-serif; font-size: 66px; font-weight: 900; letter-spacing: -2px; line-height: 1; color: rgba(255, 255, 255, .14); text-shadow: none; }
.sf-bc-top, .sf-bc-p, .sf-bc-perks { position: relative; }
.sf-bc-top { display: flex; justify-content: space-between; align-items: center; }
.sf-bc-wm { height: 24.5px; width: auto; }
.sf-bc-name { font-size: 15px; font-weight: 800; }
.sf-bc-p { display: flex; align-items: flex-end; margin-top: 12px; }
.sf-bc-n { font-family: 'Outfit DK', 'SUIT Variable', sans-serif; font-size: 40px; font-weight: 800; letter-spacing: -1.3px; line-height: 1; font-variant-numeric: tabular-nums; }
.sf-bc-p small { margin-left: 16px; padding-bottom: 3px; font-size: 19px; font-weight: 800; }
.sf-bc-p em { margin-left: 5px; padding-bottom: 5px; font-size: 15px; font-style: normal; font-weight: 700; opacity: .75; }
.sf-bc-p.soon { align-items: center; min-height: 44px; }
.sf-bc-pname { font-size: 30px; font-weight: 800; letter-spacing: -.6px; line-height: 1.2; }
.sf-bc-pill { display: inline-flex; align-items: center; height: 28px; margin-left: 12px; padding: 0 12px; border-radius: 14px; white-space: nowrap; text-shadow: none;
  background: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); font-size: 14px; font-weight: 800; letter-spacing: 0; }
.sf-bc-perks { margin-top: 14px; padding-top: 2px; border-top: 1px solid rgba(255, 255, 255, .22); }
.sf-bc-pk { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
.sf-bc-ic { display: flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: 10px; background: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.sf-bc-pk b { font-size: 17px; font-weight: 800; line-height: 1.25; }
.sf-bc-sub { display: block; font-size: 14px; font-weight: 500; opacity: .75; }
/* 크게(첫 화면 · 끝 화면 패스) — SPEC §12 패스: 워드마크 22 · 금액 44 · 음각 72, 기울기 · 홀로 층은 도키 카드와 같은 변수 */
.sf-bc.hero { height: auto; min-height: 236px; padding: 20px; transform: rotateY(calc(var(--tx) * 8deg)) rotateX(calc(var(--ty) * -6deg));
  box-shadow: 0 calc(14px + var(--ty) * 6px) 34px rgba(0, 0, 0, .42), calc(var(--tx) * -10px) 0 24px rgba(0, 0, 0, .16); }
.sf-bc.hero .sf-bc-wm { height: 27px; }
.sf-bc.hero .sf-bc-p { margin-top: 16px; }
.sf-bc.hero .sf-bc-n { font-size: 44px; letter-spacing: -1.5px; }
.sf-bc.hero .sf-bc-p small { margin-left: 20px; font-size: 20px; }
.sf-bc.hero .sf-bc-big { font-size: 72px; bottom: -12px; color: rgba(255, 255, 255, .16); }
.sf-bc.hero .sf-bc-ic { border-radius: 9px; }
.sf-passbox { margin-top: 20px; }
.sf-passbox-intro { margin-top: 36px; }                                       /* 보상 묶음과 넉넉히 떨어져(보상이 아님) */
.sf-done-anon { margin-top: 14px; font-size: 15px; color: var(--tk-ink2); }
/* E5 — 세 카드 같은 틀, 고른 표시는 카드 밖 4px 띄운 로즈 테 2px(반경 26) + 오른쪽 위 ✓ 28 */
.sf-bcs { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.sf-bcpick { position: relative; display: block; width: 100%; padding: 4px; border: 0; border-radius: 26px; background: transparent; font: inherit; color: inherit; cursor: pointer; }
.sf-bcpick .sf-bc { height: auto; min-height: 240px; }
.sf-bcpick.on { box-shadow: inset 0 0 0 2px var(--tk-rose); }
.sf-bc-check { position: absolute; right: -8px; top: -8px; display: none; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--tk-rose); color: var(--tk-on-rose); box-shadow: 0 0 0 3px var(--tk-bg); }
.sf-bcpick.on .sf-bc-check { display: flex; }
.sf-bcpick:focus-visible { outline: 2px solid var(--tk-rose); outline-offset: 2px; }
/* E5 요금 카드도 반사 · 기울기(디자인 2 survey-card-gyro d57359d2) — 첫 화면의 3/4(6° / -4.5°), 그림자도 3/4. 고른 테 · ✓ 는 카드 밖이라 안 기욺 */
.sf-bcpick { perspective: 900px; }
.sf-bcpick .sf-bc[data-holo] { transform: rotateY(calc(var(--tx) * 6deg)) rotateX(calc(var(--ty) * -4.5deg)); touch-action: pan-y;
  box-shadow: 0 calc(12px + var(--ty) * 4.5px) 30px rgba(0, 0, 0, .3), calc(var(--tx) * -7.5px) 0 18px rgba(0, 0, 0, .12), inset 0 0 0 1px rgba(255, 255, 255, .22); }
.dk-lowfx .sf-dk-holo { transform: none !important; }   /* 저사양 — overlay 층은 고정(기울기 · 반사 · 반짝만) */
/* E2 — 보기 줄 높이 68, 라디오 · 그림 칸 72 × 46(반경 9) · 글 17. 패스 · 충전은 미니 카드(가격 없음), 스토리 · 광고는 선 아이콘 */
.sf-row.sf-row-th { min-height: 68px; padding: 10px 14px; gap: 14px; border-radius: 16px; }
.sf-row.sf-row-th.on { background: var(--tk-card); font-weight: 800; }
.sf-th { position: relative; overflow: hidden; flex: none; width: 72px; height: 46px; border-radius: 9px; }
.sf-th.k-pass { background: linear-gradient(135deg, #E0508C, #C52466 45%, #8E1A4F); }
.sf-th.k-doki { background: linear-gradient(135deg, #ECA947, #C97D1F 45%, #8A4E12); }
.sf-th.k-icon { display: flex; align-items: center; justify-content: center; background: var(--tk-chip); color: var(--tk-ink2); box-shadow: inset 0 0 0 1px var(--tk-line); }
.sf-th-wm { position: absolute; left: 7px; top: 4px; height: 10px; width: auto; }
.sf-th-coin { position: absolute; left: 7px; top: 19px; }
.sf-th-big { position: absolute; right: -2px; bottom: -5px; font-family: 'Outfit DK', 'SUIT Variable', sans-serif; font-size: 22px; font-weight: 900; letter-spacing: -.5px; line-height: 1; color: rgba(255, 255, 255, .22); }
/* 끝 화면(디자인 end-full 4e3a01c6) — 제목 28 · 제출 칸 · 보상 상태(도키 카드 + 쿠폰 줄) · 상태 알약 */
.sf-done { gap: 0; }
.sf-done h1 { font-size: 28px; }
.sf-done > .sf-done-pane { margin-top: 22px; padding: 16px; border-radius: 18px; background: var(--tk-card); box-shadow: inset 0 0 0 1px var(--tk-line); }
.sf-done .sf-done-pane h2 { margin: 0 0 6px; font-size: 15px; font-weight: 800; color: var(--tk-ink); }
.sf-done .sf-done-pane p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--tk-ink2); }
.sf-done-rt { margin: 28px 2px 12px; font-size: 17px; font-weight: 800; }
.sf-done-rows { gap: 12px; }
.sf-dks-head.with-st { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sf-done .sf-dks-head .sf-rc-state { margin: 0; }
.sf-cp.sm { align-items: center; }
.sf-cp.sm .sf-cp-art { width: 56px; height: 56px; border-radius: 14px; }
.sf-cp.sm .sf-cp-prod { font-size: 15px; }
.sf-done .sf-rc-state { min-height: 28px; padding: 3px 12px; border-radius: 14px; font-size: 14px; font-weight: 700; margin-top: 8px;
  background: var(--tk-chip); color: var(--tk-ink2); }
.sf-done .sf-rc-state.got, .sf-done .sf-rc-state.sent, .sf-done .sf-rc-state.met { padding-left: 12px; background: var(--tk-rose-soft); color: var(--tk-rose); }
.sf-done .sf-rc-state.phone, .sf-done .sf-rc-state.warn { background: var(--tk-rose); color: var(--tk-on-rose); }
.sf-done .sf-done-next { margin-top: 16px; font-size: 15px; color: var(--tk-ink); font-weight: 400; }
.sf-done .sf-done-next:empty { display: none; }
.sf-done .sf-done-edit { display: flex; margin-top: 16px; height: 52px; text-decoration: none; }
.sf-done .sf-done-edit[hidden] { display: none; }
.sf-done .sf-howto { margin-top: 22px; }
.sf-done > .sf-btn:not(.sf-done-edit) { margin-top: 22px; }
.sf-passbox-intro { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--tk-line); }
.sf-passbox-intro .sf-bc-pname { font-size: 28px; }
/* 카드 머리말 규칙 H1(디자인 6bf33a33, 재빈 '잘 안 보여') — 17/800 ink, 머리말 → 카드 8 · 카드 → 조건 8 · 덩어리끼리 28, 상태 알약은 머리말 줄 오른쪽 끝 */
.sf-dks-head { margin: 0 2px 8px; font-size: 17px; font-weight: 800; color: var(--tk-ink); }
.sf-dks-foot { margin-top: 8px; }
.sf-rlist, .sf-done-rows { gap: 28px; }
.sf-dks-head.with-st { justify-content: space-between; }
/* E2 스토리 · 광고 칸(디자인 b6173e16 안 2) */
.sf-th.k-story { background: linear-gradient(135deg, #24AAA6, #147D7F 45%, #0B4B55); }
.sf-th.k-ad { background: linear-gradient(135deg, #9A5BC4, #6E3196 45%, #3F1760); }
.sf-th-cut { position: absolute; left: 24px; top: 0; bottom: 0; border-left: 1.5px dashed rgba(255, 255, 255, .45); }
.sf-th-notch { position: absolute; left: 18px; width: 12px; height: 12px; border-radius: 50%; background: var(--tk-card); }
.sf-th-notch.t { top: -6px; } .sf-th-notch.b { bottom: -6px; }
.sf-row.on .sf-th-notch { background: var(--tk-card); }
.sf-th-book { position: absolute; left: 5px; top: 16px; }
.sf-th-one { position: absolute; left: 30px; right: 6px; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center;
  font: 900 26px/1 'Outfit DK', 'SUIT Variable', sans-serif; letter-spacing: -1px; color: #fff; }
.sf-th-adrow { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 5px; }
.sf-th-play { display: flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #5A2580; }
.sf-th-bub { display: flex; align-items: center; gap: 3px; flex: none; height: 22px; padding: 0 6px; border-radius: 11px 11px 11px 3px; background: #fff; }
.sf-th-bub b { font: 900 11px/1 'Outfit DK', 'SUIT Variable', sans-serif; color: #2A0A1A; }
/* A-앞 판(디자인 5b503c45) — ① 보상 아래 한 줄 · ② 카드 아래 단독 칩 · ③ 만 14세 미만 안내 · ④ 작가 모집 카드 */
.sf-capline { display: flex; gap: 8px; align-items: flex-start; margin: 20px 0 20px; padding: 12px 14px; border-radius: 14px; background: var(--tk-chip); color: var(--tk-ink2); font-size: 15px; line-height: 1.55; }
.sf-capline svg { flex: none; margin-top: 2px; }
.sf-below { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sf-below-chip { min-height: 44px; padding: 0 18px; border: 0; border-radius: 22px; font: inherit; font-size: 16px; font-weight: 600; color: var(--tk-ink);
  background: var(--tk-card); box-shadow: inset 0 0 0 1px var(--tk-line); cursor: pointer; }
.sf-below-chip.on { background: var(--tk-rose-soft); box-shadow: inset 0 0 0 2px var(--tk-rose); color: var(--tk-rose); font-weight: 800; }
.sf-block { display: flex; gap: 8px; align-items: center; margin: -2px 0 4px; padding: 12px 14px; border-radius: 14px; background: var(--tk-chip); color: var(--tk-ink);
  font-size: 15px; font-weight: 700; line-height: 1.5; }
.sf-block svg { flex: none; }
[data-next]:disabled { background: var(--tk-chip); color: var(--tk-ink2); opacity: .6; cursor: not-allowed; }
[data-done-writer] { margin-top: 16px; }
.sf-wc { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 18px; background: var(--tk-card); box-shadow: inset 0 0 0 1px var(--tk-line); }
.sf-wc-ic { display: flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: 14px; background: var(--tk-rose-soft); color: var(--tk-rose); }
.sf-wc-tx { min-width: 0; flex: 1; }
.sf-wc-tx b { display: block; font-size: 16px; font-weight: 800; }
.sf-done .sf-wc-tx p { margin: 4px 0 10px; font-size: 15px; line-height: 1.5; color: var(--tk-ink2); }
.sf-wc-btn { display: inline-flex; height: 40px; padding: 0 16px; font-size: 15px; font-weight: 800; }
/* 펀딩 · 정식 출시 알림 카드(_funding_card.html, 매니저 10/7 시안) — 작가 카드(sf-wc) 한 벌 + 메일 · 동의 · 단추 */
.sf-fn .sf-wc-tx p { margin: 4px 0 12px; font-size: 15px; line-height: 1.5; color: var(--tk-ink2); }
.sf-fn .sf-field { min-height: 46px; font-size: 16px; padding: 0 14px; }
.sf-fn .sf-check { margin-top: 10px; }
.sf-fn .sf-check b { font-weight: 600; font-size: 14px; color: var(--tk-ink2); }
.sf-fn .sf-btn { margin-top: 12px; height: 46px; font-size: 15px; }
.sf-fn .sf-btn.sf-wc-btn { margin-top: 0; height: 40px; }
.sf-fn-form[hidden], .sf-fn-on[hidden], .sf-fn-msg[hidden] { display: none; }
.sf-fn-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sf-fn .sf-fn-done { display: flex; gap: 8px; align-items: center; margin: 2px 0 0; font-size: 15px; font-weight: 700; color: var(--tk-ink); }
.sf-fn-done i { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--tk-rose); color: var(--tk-on-rose); font-style: normal; font-size: 14px; }
.sf-fn .sf-fn-note { margin: 8px 0 12px; font-size: 14px; line-height: 1.5; color: var(--tk-faint); }
.sf-fn .sf-fn-msg { margin: 8px 0 0; font-size: 14px; color: var(--tk-ink2); }
.sf-fn .sf-fn-msg:empty { display: none; }
.sf-fn .sf-fn-msg.is-err { color: var(--tk-danger); font-weight: 700; }
/* C9 진행자 얼굴(§31 faces) — 문항 머리에 작게, 크기 · 자리는 디자인 값 오면 맞춤 */
.sf-faces { display: flex; margin: 0 0 12px; }                       /* 디자인 f61be5c2 — 44 둘 겹침(−10), 바탕색 고리 2.5 */
.sf-faces img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2.5px var(--tk-bg); }
.sf-faces img + img { margin-left: -10px; }
.sf-imgs.sf-imgs-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }   /* 그림체 넷(E16 · E17 · E19, 디자인 — E12 꼴을 2열로) */

/* 폰 설문 급한 고침(재빈 10/4 '상하좌우로 화면 전체가 움직이고 · 척도 반응이 느리네') */
html, body { overflow-x: clip; }                                        /* 가로 넘침이 있어도 화면이 좌우로 밀리지 않게 */
body { overscroll-behavior-y: none; }                                   /* 끝에서 출렁임 없음 */
.sf-field, .sf-area, .sf-row-area, .sf-lines input, .sf-other, input, textarea, select { font-size: max(16px, 1em); }   /* iOS 입력 확대 막기 */
button, a, .sf-row, .sf-circle, .sf-ladp, .sf-chip, .sf-img-pic, label { touch-action: manipulation; }   /* 두 번 눌러 확대 · 300ms 기다림 없음 */
.sf-ladp-dot, .sf-dot, .sf-row, .sf-row-mark, .sf-circle-l { transition-duration: .08s !important; }
.sf-v2-q.sf-kid { padding-left: 0; margin-top: 14px; }                  /* 하위 문항 왼쪽 연결선 없앰(재빈 '개구림') — 장식 없이 바로 아래 */
.sf-v2-q.sf-kid::before { display: none; }
.sf-lad, .sf-lad-row, .sf-circles { max-width: 100%; }
.sf-ladp, .sf-circle { min-width: 0; }
.sf-ladp-l, .sf-circle-l { max-width: 100%; overflow-wrap: anywhere; }
.sf-circles { margin: 0 -6px; }                                         /* 양옆 넘침 줄임(-12 → -6) */
/* 그림 크게 보기 — 위 장 수 막대, 그림 옆 ×, 바깥 누르면 닫힘 */
.sf-zoom-bars { display: flex; gap: 4px; padding: calc(10px + env(safe-area-inset-top)) 12px 0; }
.sf-zoom-bars i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .35); }
.sf-zoom-bars i.on { background: #fff; }
.sf-zoom-stage { padding: 12px 12px calc(16px + env(safe-area-inset-bottom)); }
.sf-zoom-frame { position: relative; max-width: 100%; max-height: 100%; display: flex; }
.sf-zoom-frame .sf-zoom-img { max-height: calc(100dvh - 60px); cursor: pointer; }
.sf-zoom-frame .sf-zoom-x { position: absolute; top: 8px; right: 8px; margin: 0; width: 36px; height: 36px; border-radius: 18px; background: rgba(0, 0, 0, .55); font-size: 22px; }
.sf-zoom-frame.bump { animation: sf-bump .22s ease-out; }
@keyframes sf-bump { 30% { transform: translateX(6px); } 60% { transform: translateX(-4px); } }
@media (prefers-reduced-motion: reduce) { .sf-zoom-frame.bump { animation: none; } }
/* D1 상세 창(디자인 1c0c0da9 · f7a6b24c) — 390 아래 시트 92% · 768 이상 가운데 창 720 */
.sf-fcard { position: relative; }
.sf-fcard-chk { position: absolute; right: 6px; top: 6px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none; cursor: pointer; }
.sf-fcard:has(.sf-fcard-chk) .sf-fcard-main { padding-right: 52px; cursor: pointer; }
body.sf-dm-open { overflow: hidden; }
.sf-dm { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .55); display: flex; align-items: flex-end; justify-content: center; }
.sf-dm-p { position: relative; width: 100%; height: 92%; display: flex; flex-direction: column; padding: 10px 20px 20px; border-radius: 26px 26px 0 0; background: var(--tk-card); color: var(--tk-ink); outline: none; }
.sf-dm-grab { display: block; width: 36px; height: 5px; margin: 0 auto 12px; border-radius: 3px; background: var(--tk-line); flex: none; }
.sf-dm-head { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; flex: none; }
.sf-dm-head b { display: block; font-size: 21px; font-weight: 800; line-height: 1.35; }
.sf-dm-head small { display: block; margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--tk-faint); }   /* 덧줄(0247fda3) — 이름 아래 · 한 줄 위 */
.sf-dm-head p { margin: 6px 0 0; font-size: 15px; line-height: 1.55; color: var(--tk-ink2); }
.sf-dm-x { flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--tk-chip); color: var(--tk-ink); font-size: 22px; line-height: 1; cursor: pointer; }
.sf-dm-stage { position: relative; flex: 1; min-height: 0; margin: 16px -20px 0; }
.sf-dm-row { display: flex; gap: 12px; height: 100%; max-height: 440px; padding: 0 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; outline: none; }
.sf-dm-row::-webkit-scrollbar { display: none; }
.sf-dm-slide { flex: 0 0 82%; scroll-snap-align: center; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--tk-line); background: var(--tk-bg); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.sf-dm-slide img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.sf-dm-nav { display: none; }
.sf-dm-dots { display: flex; justify-content: center; gap: 6px; margin: 14px 0 0; flex: none; }
.sf-dm-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--tk-line); }
.sf-dm-dots i.on { width: 18px; background: var(--tk-rose); }
.sf-dm-act { flex: none; margin-top: 16px; height: 56px; }
@media (min-width: 768px) {
  .sf-dm { align-items: center; background: rgba(0, 0, 0, .6); }
  .sf-dm-p { width: 720px; height: auto; max-height: 92vh; padding: 24px 28px 28px; border-radius: 28px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
  .sf-dm-grab { display: none; }
  .sf-dm-stage { margin: 18px 0 0; flex: none; }
  .sf-dm-row { height: 420px; max-height: none; padding: 0; }
  .sf-dm-slide { flex-basis: calc(50% - 6px); }
  .sf-dm-nav { position: absolute; top: 50%; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-top: -20px; border: 0; border-radius: 50%;
    background: var(--tk-card); box-shadow: inset 0 0 0 1px var(--tk-line); color: var(--tk-ink); font-size: 24px; cursor: pointer; }
  .sf-dm-nav.prev { left: -20px; } .sf-dm-nav.next { right: -20px; }
}
.sf-circle { grid-template-columns: minmax(0, 1fr); } .sf-circle-l { max-width: 100%; box-sizing: border-box; padding: 0 4px; }   /* 칸 사이 틈이 없어 옆 이름표와 붙어 보이던 것(Q_attn) — 안쪽 4 로 꺾임 */
.sf-dm-stage { flex: none; } .sf-dm-row { height: 440px; } .sf-dm-act { margin-top: auto; } .sf-dm-dots + .sf-dm-act, .sf-dm-stage + .sf-dm-act { margin-top: auto; }
@media (min-width: 768px) { .sf-dm-row { height: 420px; } .sf-dm-act { margin-top: 20px; } .sf-dm-dots + .sf-dm-act, .sf-dm-stage + .sf-dm-act { margin-top: 20px; } }
.sf-img-pic { cursor: pointer; }
.sf-img-pick { pointer-events: none; }
.sf-img-zoom { position: absolute; left: 8px; bottom: 8px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .45); cursor: zoom-in; }
.sf-img-zoom::before { content: ''; position: absolute; inset: -7px; }                    /* 누르는 자리 44 */
.sf-imgs-none .sf-img { opacity: .45; }                                                   /* '다 별로예요'(디자인 4f9cecb5) — 그림을 누르면 그게 골라지고 칩은 풀림 */
/* rev 27(설문 설계 §36 · 디자인 5e4e403f) — P1 보상 묶음 머리 · P2 그림 고르기 n번째 · P4 끝 화면 순서 */
.sf-doki-note { margin: -6px 2px 22px; font-size: 15px; line-height: 1.55; color: var(--tk-ink2); }
.sf-rgroup { display: flex; align-items: center; gap: 10px; margin: 8px 2px -14px; font-size: 14px; font-weight: 800; color: var(--tk-rose); }   /* 묶음 사이 36 · 머리 → 카드 14(목록 틈 28 기준) */
.sf-rgroup.first { margin-top: 0; }
.sf-rgroup::after { content: ''; flex: 1; height: 1px; background: var(--tk-line); }
.sf-style-prog { margin: 0 0 8px; font-size: 14px; font-weight: 700; }
.sf-phone-cnote { margin: -4px 0 6px 34px; }
.sf-done-dates { margin-top: 6px; } .sf-done .sf-done-dates p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--tk-ink2); }
.sf-todo { margin-top: 18px; padding: 14px 16px; border-radius: 16px; background: var(--tk-rose-soft); display: flex; flex-direction: column; gap: 6px; }
.sf-todo[hidden] { display: none; }
.sf-todo > b { font-size: 14px; font-weight: 800; color: var(--tk-rose); }
.sf-done .sf-todo p { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.55; color: var(--tk-ink); }
.sf-todo-btn { height: 44px; margin-top: 6px; }
.sf-cp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sf-done .sf-cp-chips .sf-rc-state { margin-top: 0; }
.sf-done .sf-passbox { margin-top: 28px; }

/* 홀로 줄임 + 떠 있기(재빈 10/4 '너무 과해 · 둥둥 무중력') — 기울기 · 빛 띠 · 반짝임 폭을 절반쯤(±4° · ±3°), 모든 카드가 아주 느리게
   위아래 4px 떠 있음(약 5초, 카드마다 시작이 다름 — JS 가 animation-delay), 그림자도 같이. 올린 카드는 떠 있기 위에 작은 기울기만. 동작 줄이기면 끔 */
@property --fl { syntax: '<number>'; inherits: true; initial-value: 0; }
@keyframes sf-float { 0%, 100% { --fl: 0; } 50% { --fl: 1; } }
.sf-dk, .sf-bc.hero { animation: sf-float 5s ease-in-out infinite; animation-delay: var(--fl-delay, 0s);
  transform: translateY(calc(var(--fl) * -4px)) rotateY(calc(var(--tx) * 4deg)) rotateX(calc(var(--ty) * -3deg));
  box-shadow: 0 calc(14px + var(--fl) * 4px + var(--ty) * 3px) calc(34px + var(--fl) * 6px) rgba(0, 0, 0, calc(.42 - var(--fl) * .06)), calc(var(--tx) * -5px) 0 24px rgba(0, 0, 0, .16); }
.sf-dk-hm { -webkit-mask: radial-gradient(120% 90% at calc(50% + var(--tx) * 22%) calc(40% + var(--ty) * 22%), #000, rgba(0, 0, 0, .35) 55%, transparent 80%);
  mask: radial-gradient(120% 90% at calc(50% + var(--tx) * 22%) calc(40% + var(--ty) * 22%), #000, rgba(0, 0, 0, .35) 55%, transparent 80%); }
.sf-dk-holo { transform: translate(calc(var(--tx) * 7%), calc(var(--ty) * 7%)); }
.sf-dk-shine { background: linear-gradient(105deg, transparent calc(35% + var(--tx) * 27%), rgba(255, 255, 255, .75) calc(50% + var(--tx) * 27%), transparent calc(65% + var(--tx) * 27%)); }
.sf-dk-spark { opacity: calc(.15 + (var(--tx) * var(--tx) + var(--ty) * var(--ty)) * .27); transform: translate(calc(var(--tx) * -2%), calc(var(--ty) * -2%)); }
@media (prefers-reduced-motion: reduce) { .sf-dk, .sf-bc.hero { animation: none; } }
.sf-row.dim { opacity: .45; }
/* 카드 움직임 v9(디자인 SPEC §12-4, 724ff30a) — 층 세기 낮춤 · 떠 있을 때 그림자 옅게 */
.sf-dk-holo { opacity: .18; }
.sf-dk-shine, .sf-bc.hero .sf-dk-shine { opacity: .20; }
.sf-dk-spark { opacity: calc(.08 + (var(--tx) * var(--tx) + var(--ty) * var(--ty)) * .30); }
.sf-dk, .sf-bc.hero { box-shadow: 0 calc(14px + var(--fl) * 4px + var(--ty) * 3px) calc(34px + var(--fl) * 6px) rgba(0, 0, 0, calc(.44 - var(--fl) * .06)), calc(var(--tx) * -5px) 0 24px rgba(0, 0, 0, .16); }
/* 재빈 최종(10/4): 평소엔 완전히 정지 — 떠 있기 · 자동 흐름 없음. 커서를 올린 카드만 따라 기울고(벗어나면 제자리), 터치는 누르는 동안만 */
.sf-dk, .sf-bc.hero { animation: none; }
.sf-dk, .sf-bc.hero { touch-action: pan-y; }   /* 터치로 누르는 동안 따라와도 세로 스크롤은 그대로(SPEC §12-4 v10) */
/* D1 목록 안 B · 상세 창(디자인 2bcd375b) */
.sf-fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 720px) { .sf-fgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sf-fg { display: flex; flex-direction: column; gap: 6px; padding: 6px; border-radius: 18px; background: var(--tk-card); box-shadow: inset 0 0 0 1px var(--tk-line); min-width: 0; }
.sf-fg.on { box-shadow: inset 0 0 0 2px var(--tk-rose); }
.sf-fg.dim { opacity: .45; }
.sf-fg-pic { position: relative; display: block; height: 124px; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: var(--tk-chip); cursor: pointer; }
.sf-fg-pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.sf-fg.tease .sf-fg-pic img { animation: sf-tease .6s ease-in-out .4s 1; }
@keyframes sf-tease { 50% { transform: translateX(-28%); } }
@media (prefers-reduced-motion: reduce) { .sf-fg.tease .sf-fg-pic img { animation: none; } }
.sf-fg-pill { position: absolute; left: 6px; bottom: 6px; display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 14px; background: rgba(0, 0, 0, .62); color: #fff; font-size: 14px; font-weight: 700; }
.sf-fg-dots { position: absolute; right: 8px; bottom: 16px; display: flex; gap: 3px; } .sf-fg-dots i { width: 4px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .8); }
.sf-fg-exp { position: absolute; right: 6px; top: 6px; width: 28px; height: 28px; border-radius: 14px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.sf-fg-row { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 6px; border: 0; background: none; color: var(--tk-ink); font: inherit; text-align: left; cursor: pointer; }
.sf-fg-row b { font-size: 15px; font-weight: 700; line-height: 1.35; word-break: keep-all; }
.sf-fg-row .sf-row-mark { width: 24px; height: 24px; }
.sf-fg.on .sf-row-mark { background: var(--tk-rose); box-shadow: none; }
.sf-fg.on .sf-row-mark::after { content: ''; position: absolute; left: 7px; top: 7px; width: 10px; height: 5px; border-left: 2.4px solid var(--tk-on-rose); border-bottom: 2.4px solid var(--tk-on-rose); transform: rotate(-45deg); }
/* 그림 문항 격자(S11 지문, 재빈 10/26) — 넷을 한눈에: 폰 · PC 모두 2×2(디자인 10/26 — 한 줄 4는 그림 글이 안 읽힘). 그림은 위에서부터,
   칸을 누르면 크게 보기 · 줄은 하나 고르기(원). ⤢ 는 오른쪽 아래(그림 아래쪽은 비거나 흐려지는 자리라 글을 안 가림) */
.sf-fgrid-img .sf-fg-pic { height: 168px; }
.sf-fgrid-img .sf-fg-exp { top: auto; right: 8px; bottom: 8px; }
@media (min-width: 720px) { .sf-fgrid.sf-fgrid-img { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .sf-fgrid-img .sf-fg-pic { height: 260px; } }
.sf-fg.on .sf-row-mark.radio::after { left: 7px; top: 7px; width: 10px; height: 10px; border: 0; border-radius: 50%; background: var(--tk-on-rose); transform: none; }
.sf-dv-ov { position: fixed; inset: 0; z-index: 60; display: flex; align-items: stretch; justify-content: center; background: #0B0B0D; }
.sf-dv { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; padding: calc(10px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)); color: #F4F4F6; background: #0B0B0D; outline: none; }
.sf-dv-bars { display: flex; gap: 4px; } .sf-dv-bars i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .35); }
.sf-dv-bars i.done, .sf-dv-bars i.on { background: #fff; }
.sf-dv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-top: 12px; }
.sf-dv-head b { display: block; font-size: 19px; font-weight: 800; }
.sf-dv-head small { display: block; margin-top: 2px; font-size: 14px; color: #9A9AA2; }
.sf-dv-x { flex: none; width: 36px; height: 36px; border: 0; border-radius: 18px; background: rgba(255, 255, 255, .12); color: #fff; font-size: 22px; cursor: pointer; }
.sf-dv-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; margin: 14px 0 10px; cursor: pointer; user-select: none; }
.sf-dv-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 16px; }
.sf-dv-line { margin: 0 0 12px; font-size: 15px; line-height: 1.55; color: #B8B8C0; }
.sf-dv-act { height: 56px; flex: none; }
.sf-dv-act.picked { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6); }
.sf-dv-nav { display: none; }
@media (min-width: 768px) {
  .sf-dv-ov { align-items: center; background: rgba(0, 0, 0, .78); gap: 20px; }
  .sf-dv { width: 480px; height: min(840px, 94vh); border-radius: 24px; padding: 14px 20px 20px; }
  .sf-dv-nav { display: flex; align-items: center; justify-content: center; flex: none; width: 52px; height: 52px; border: 0; border-radius: 26px; background: rgba(255, 255, 255, .14); color: #fff; font-size: 26px; cursor: pointer; }
  .sf-dv-nav:disabled { opacity: .3; cursor: default; }
}
/* 폰 설문 꼴(재빈 10/4) — 오른쪽 스크롤 막대 숨김, 묶음 이름 · 진행은 위에 붙임, '이전 · 다음'은 떠 있지 않고 문항 끝에 */
.sf-v2-top { position: sticky; top: 0; z-index: 3; margin: 0 -20px; padding: 10px 20px 8px; background: var(--tk-bg); }
.sf-v2-top .sf-v2-where { margin: 0 0 6px; }
.sf-v2-band { position: static; margin: 32px 0 0; padding: 0 0 calc(20px + env(safe-area-inset-bottom)); background: none; box-shadow: none; border: 0; }
@media (max-width: 599px) { html { scrollbar-width: none; } html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; } }
.dk-me-todo { margin: 0 0 14px; } .dk-me-todo p { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.55; }
.dk-me-prog { display: inline-flex; align-items: center; min-height: 26px; padding: 2px 10px; border-radius: 13px; background: var(--tk-chip); color: var(--tk-ink2); font-size: 14px; font-style: normal; font-weight: 700; }
/* 설문 제출 순간(디자인 2 D-208 안 2) — 한 번만, backwards 라 끝나면 홀로 · 떠 있기 변형을 막지 않음 */
.sf-done-go .dm-t { animation: sf-dm-rise .3s cubic-bezier(.2, .8, .2, 1) backwards; }
.sf-done-go .dm-m { animation: sf-dm-rise .3s .12s cubic-bezier(.2, .8, .2, 1) backwards; }
.sf-done-go .dm-card { animation: sf-dm-spring .62s .18s cubic-bezier(.34, 1.45, .64, 1) backwards; }
.sf-done-go .sf-dm-sheen { position: absolute; inset: 0; z-index: 3; pointer-events: none; transform: translateX(-120%);
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .45) 48%, transparent 66%); animation: sf-dm-sheen .65s .72s ease-in-out both; }
.sf-done-go .dm-chip { animation: sf-dm-pop .4s .9s cubic-bezier(.34, 1.56, .64, 1) backwards; }
.sf-done-go .dm-r { animation: sf-dm-rise .4s .7s ease backwards; }
@keyframes sf-dm-rise { 0% { transform: translateY(10px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes sf-dm-spring { 0% { transform: translateY(70px) scale(.94); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes sf-dm-sheen { to { transform: translateX(120%); } }
@keyframes sf-dm-pop { 0% { transform: scale(.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sf-done-go * { animation: none !important; } .sf-dm-sheen { display: none; } }

/* 설문 첫 화면 '먼저 해 보기' · 끝 화면 '앱 받기'(설문 설계 §41) — 사이트 보조 단추(.sf-btn-line) · 작은 링크, 새 꼴 없음 */
.sf-try { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 20px; }   /* 첫 화면 Dokimi 해 보기(§45) — 문구 한 줄 + 큰 주 단추 + 보조 */
.sf-try .sf-meta { margin: 0; }
.sf-try-line { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.5; color: var(--tk-ink); }
.sf-try .sf-btn { margin-top: 0; width: 100%; text-decoration: none; }
.sf-v2-notice .sf-try-go { margin-top: 16px; width: 100%; text-decoration: none; }
.sf-try .sf-btn-line { text-decoration: none; }
/* 체험단 상자(rev 30, 설문 설계 §49-1) — 보상 묶음 안 올리브영 카드 자리. 한 화면 · 체크 하나 · 단추 하나 */
.sf-tb { margin: 0 0 12px; padding: 18px; border-radius: 18px; background: var(--tk-card); box-shadow: inset 0 0 0 1.5px var(--tk-rose); }
.sf-tb.full, .sf-tb.once, .sf-tb.device { box-shadow: inset 0 0 0 1px var(--tk-line); }
.sf-tb-t { margin: 0 0 8px; font-size: var(--tk-fs-h, 19px); font-weight: 800; line-height: 1.4; }
.sf-tb-line { margin: 6px 0 0; font-size: var(--tk-fs-read, 16px); line-height: 1.6; }
.sf-tb-android, .sf-tb-minor, .sf-tb-note { margin: 8px 0 0; color: var(--tk-faint); }
.sf-tb-minor { margin-top: 14px; }
.sf-tb-agree { margin-top: 6px; }
.sf-tb-terms { margin-top: 8px; }
.sf-tb-terms-b p { margin: 6px 0 0; font-size: var(--tk-fs-meta, 14px); line-height: 1.6; color: var(--tk-ink2); }
.sf-tb-need, .sf-f3-short { margin: 8px 0 0; }
.sf-tb .sf-btn { width: 100%; margin-top: 14px; }
.sf-tb-shut { margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--tk-chip); }
.sf-tb-shut b { display: block; font-weight: 800; }
.sf-tb-shut p { margin: 4px 0 0; font-size: var(--tk-fs-meta, 14px); line-height: 1.5; color: var(--tk-ink2); }
.sf-tb-plain { padding: 0; background: none; box-shadow: none !important; border-radius: 0; }   /* rev 31 — 상자 없이 '자세히 ›' 한 줄 */
.sf-tb-plain { margin-bottom: 0; }
.sf-tb-plain .sf-tb-more, .sf-consent-terms { margin-left: 0; }   /* 둘레 글 왼쪽에 맞춤(체크칸 밑 34px 들여쓰기는 체크칸 있을 때만, 검수 10/5) */
.sf-tb-plain .sf-tb-more { margin-top: 0; margin-bottom: 0; }
.sf-v2-go-group { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--tk-line); }   /* 단추 묶음 — 위 보상 카드와 뗌 */
.sf-v2-go-group > .sf-consent:first-child, .sf-v2-go-group .sf-v2-go > .sf-consent:first-child { margin-top: 0; }
.sf-tb-full { font-weight: 800; }
.sf-tb-more { margin-top: 10px; }
.sf-tb-detail p { margin: 6px 0 0; font-size: var(--tk-fs-meta, 14px); line-height: 1.6; color: var(--tk-ink2); }
.sf-tb-detail .sf-tb-terms-b { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--tk-line); }
.sf-consent { margin: 12px 0 0; font-size: var(--tk-fs-meta, 14px); line-height: 1.6; color: var(--tk-ink2); }   /* 체험단 동의 줄 — 누르는 단추 바로 위(§52, 약관규제법 §3 ② 보이게) */
.sf-consent-terms { margin-top: 4px; }
.sf-consent + .sf-consent-terms + .sf-btn, .sf-consent + .sf-btn, .sf-consent-terms + .sf-btn { margin-top: 10px; }
.sf-kakao { margin: 8px 0 0; color: var(--tk-warn, var(--tk-ink2)); }
.sf-tb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sf-tb-chips .sf-rc-state { margin-top: 0; }
.sf-req-help { color: var(--tk-rose-ink); }   /* '체험단은 한 줄 이상 꼭'(rev 30 F3) */
.sf-try-note { margin: 16px 0 0; text-align: center; font-size: var(--tk-fs-meta, 14px); line-height: 1.5; color: var(--tk-faint); }   /* 해 봤든 안 해 봤든(§48 · 매니저 10/5 ①) — [설문 시작하기] 바로 위 meta 한 줄 */
.sf-v2-actions .sf-try-note { margin-top: 12px; }
.sf-try-note + .sf-btn, .sf-v2-actions .sf-try-note + .sf-btn { margin-top: 8px; }
.sf-done .sf-done-app { margin: 16px 0 0; font-size: 15px; line-height: 1.5; }
.sf-done-app a { color: var(--tk-ink2); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
/* 설문 rev 41 끝 화면 — 그 폰 스토어 단추 하나 + 작은 링크 둘(작가 · 인터뷰, 누름을 셈) */
.sf-done .sf-done-store { margin: 8px 0 0; }
.sf-done .sf-done-store .sf-btn { width: 100%; }
.sf-done .sf-done-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 20px 0 0; font-size: 15px; line-height: 1.5; }
.sf-done-links a { color: var(--tk-ink2); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* 설문 '아직 안 해 봤다면' 안내 화면(rev 28, §42) — 문항 화면 꼴 그대로, 보조 단추 하나 */
.sf-v2-notice .sf-meta { margin: 8px 0 0; }
.sf-v2-notice .sf-btn-line { margin-top: 18px; text-decoration: none; }

/* 설문 상품권 예산(§44) — 마감 줄 · 예산 안내는 카드 묶음 사이 작은 meta 한 줄(빈칸 없이) */
.sf-rlist > .sf-gift-closed, .sf-rlist > .sf-budget-note { margin: 0; }
.sf-rc-state.closed { background: var(--tk-chip); color: var(--tk-ink2); }

/* 작가 스튜디오 과제 칸(디자인 D-207 2판) — 머리 · 내 스토리 n/3 · 편 셋 미리보기(표지 3:4 · 제목 · 버전 줄 · 앱 알약) + 스튜디오 열기 */
.sf-studio { display: flex; flex-direction: column; gap: 14px; }
.sf-studio-tx { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sf-studio-tx b { font-size: 16px; font-weight: 800; }
.sf-studio-tx span { font-size: 14px; }
.sf-studio-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sf-studio-list[hidden] { display: none; }
.sf-studio-it { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sf-studio-it b { font-size: 14px; font-weight: 800; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sf-studio-it > span { font-size: 14px; }
.sf-studio-logo { display: inline-flex; align-self: flex-start; min-height: 44px; align-items: center; }   /* 로고 높이 22(최소 18), 누르는 곳 44 */
.sf-studio-logo img { height: 27px; width: auto; }   /* 잠금형을 지금 워드마크로 다시 그려 높이 비율이 워드마크와 같아짐(175 → 214.6) — Dokimi 글자 크기는 옛 22 그대로 */
.sf-studio-cover { display: block; aspect-ratio: 3 / 4; border-radius: 12px; background: color-mix(in srgb, var(--tk-ink) 8%, transparent); overflow: hidden; margin-bottom: 4px; }
.sf-studio-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sf-studio-pill { align-self: flex-start; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--tk-ink) 8%, transparent); color: var(--tk-ink2); }

/* 사이트 모바일(≤480) 글자 단계 — 디자인 2 site-mobile-type(glimi-apple 99897033), 재빈 10/4 '글자가 너무 작아서 안 보이는 느낌'.
   치환 14→15 · 14.5→15.5 · 15/15.5→16 · 16/16.5→17 · 17→18(max(바닥, …) 꼴은 바닥만) · 쪽 제목 28→30 · 400→450. 600 이상 그대로.
   빼는 것: 첫 화면 제목 · 단추(sf-btn · 베타 · 배지 · 알약) · 도키/패스 카드 안 · 별. 크기 줄은 이 파일의 규칙에서 기계로 뽑음(그 폭에서 실제 걸리는 값 기준) — 위 규칙을 고치면 여기도 */
@media (max-width: 599px) {   /* 폰(경계 599 — 사파리 페이지 확대 85% 등, 디자인 2 060deaf0 · 재빈 10/5) */
  .dk-page { font-weight: 450; }   /* 본문 · 보조 · meta(600 이상은 각 규칙 그대로) */
  .dk-delete-help p,
  .sf-label,
  .sf-chip,
  .sf-mono,
  .sf-warn,
  .sf-person,
  .sf-ctx,
  .sf-inline,
  .sf-v2-intro .sf-article table,
  .sf-rewards,
  .sf-fig-h b,
  .sf-linkadd,
  .dk-me-kv { font-size: 15.5px; }
  .dk-meta,
  .dk-legal-banner span,
  .dk-legal-banner-list a,
  .dk-footer,
  .dk-banner span,
  .dk-tests-note,
  .dk-notify label.dk-field,
  .dk-agree-all,
  .dk-agree-item,
  .dk-agree-tag,
  .dk-agree-sub,
  .dk-agree-more,
  .dk-notify .dk-help,
  .dk-notify .dk-notice,
  .dk-more summary,
  .dk-receipt dl,
  .dk-receipt .dk-notice,
  .dk-notify .dk-status,
  .dk-delete-status,
  .dk-dialog-b,
  .dk-legal-date,
  .sf-opt,
  .sf-counter,
  .sf-meta,
  .sf-check small,
  .sf-error,
  .sf-copy,
  .sf-eyebrow,
  .sf-step,
  .sf-dot,
  .sf-secret,
  .sf-secret b,
  .sf-lines span,
  .sf-who,
  .sf-fee,
  .sf-pill,
  .sf-code-ok,
  .sf-logout,
  .sf-step-reward,
  .sf-tag-warn,
  .sf-fig-band,
  .sf-group-title,
  .sf-more summary,
  .sf-more p,
  .sf-v2-kicker,
  .sf-v2-who small,
  .sf-v2-closed span,
  .sf-rc-sub,
  .sf-rc-state,
  .sf-count-tag,
  .sf-v2-count,
  .sf-pcard b,
  .sf-pcard span,
  .sf-v2-nav .sf-prev,
  .sf-v2-phone-note,
  .sf-done-pane h2,
  .sf-v2-where .sf-meta,
  .sf-ctag,
  .sf-qerr,
  .sf-foot-mini,
  .dk-acct-pill,
  .dk-acct-who b,
  .dk-acct-who span,
  .dk-acct-menu a,
  .dk-me-copy,
  .dk-me-todo,
  .dk-me-link,
  .dk-me-delete,
  .sf-filerow-t .sf-meta,
  .sf-filemsg,
  .sf-circle-l,
  .sf-cmore summary,
  .sf-cmore small,
  .sf-img.on .sf-img-pick::after,
  .sf-ladp-l,
  .sf-lad-ends,
  .sf-lad-ticks span,
  .sf-v2-chip,
  .sf-rc-lsub,
  .dk-me-rw em,
  .sf-cp-lab,
  .sf-done .sf-rc-state,
  .sf-rgroup,
  .sf-style-prog,
  .sf-done .sf-done-dates p,
  .sf-todo > b,
  .sf-fg-pill,
  .sf-fg-exp,
  .sf-dv-head small { font-size: 15px; }
  .dk-pending,
  .dk-text,
  .dk-mailbox,
  .dk-legal table,
  .dk-notify input[type=email],
  .dk-delete-steps,
  .dk-delete-list,
  .dk-delete-go,
  .dk-dialog-row button,
  .sf-closed-text,
  .sf-check b,
  .sf-sub,
  .sf-card,
  .sf-bubble,
  .sf-send,
  .sf-intro,
  .sf-steps-list,
  .sf-ymd span,
  .sf-v2-lead p,
  .sf-rc-cond,
  .sf-rb .sf-rc-name,
  .sf-v2-secname,
  .dk-acct-circle,
  .sf-filerow-t b,
  .sf-circle.on .sf-dot::after,
  .sf-miss-band,
  .sf-v2-pct,
  .sf-zoom-n,
  .sf-fcard-t span,
  .sf-back,
  .dk-toc b,
  .dk-toc a,
  .sf-howto li,
  .sf-done-edit,
  .sf-cp-cond,
  .sf-done-anon,
  .sf-done .sf-done-pane h2,
  .sf-done .sf-done-pane p,
  .sf-cp.sm .sf-cp-prod,
  .sf-done .sf-done-next,
  .sf-capline,
  .sf-block,
  .sf-done .sf-wc-tx p,
  .sf-wc-btn,
  .sf-doki-note,
  .sf-done .sf-todo p,
  .sf-fg-row b,
  .sf-dv-line { font-size: 16px; }
  .dk-receipt-title,
  .dk-delete-help .dk-delete-help-t,
  .sf-article p,
  .sf-article li,
  .sf-done p,
  .sf-big,
  .sf-v2-closed b,
  .dk-me-card h2,
  .sf-below-chip,
  .sf-wc-tx b { font-size: 17px; }
  .dk-legal,
  .dk-legal h3,
  .dk-dialog-t,
  .sf-person b,
  .sf-row,
  .sf-rows + .sf-other,
  .sf-fcard-t b,
  .sf-lad-pick,
  .sf-howto h2,
  .sf-howto h3,
  .sf-cp-prod,
  .sf-done-rt { font-size: 18px; }
  .sf-field,
  .sf-lines input,
  .sf-row-area,
  .sf-area,
  .sf-other,
  input,
  textarea,
  select { font-size: max(17px, 1em); }
  .sf-row-area,
  .sf-fcard-t span,
  .sf-fcard.on,
  .sf-lad-ticks b,
  .sf-done .sf-done-next { font-weight: 450; }
  .dk-title, .sf-article h1, .sf-me h1, .sf-fb h1, .sf-v2-start h1, .sf-done h1 { font-size: 30px; }   /* 쪽 제목(#1166 의 28) */
  .sf-article p, .sf-article li, .dk-legal p, .dk-legal li, .dk-body p { line-height: 1.7; }   /* 긴 글 */
  .sf-done .sf-done-app { font-size: 16px; }   /* 설문 끝 화면 '앱 받기'(§41, 15 → 16) */
  /* 3단계(디자인 2 730fcd13, 재빈 '지금도 작다 · 설문 제목 · 로그인 · 뒤로도 작다') — 토큰 --tk-fs-*(토큰 파일), 누르는 칸 44 이상. 위 치환 줄보다 뒤라 이김 */
  .dk-header { min-height: 64px; padding: 12px 16px 4px 20px; }
  .dk-wordmark { height: 29.5px; }
  .dk-acct-pill { height: 44px; padding: 0 18px; font-size: 16px; font-weight: 700; border-radius: 22px; }
  .dk-theme-btn { width: 48px; height: 48px; }
  .dk-theme-ring { width: 44px; height: 44px; }
  .dk-theme-ring svg { left: 11px; top: 11px; width: 22px; height: 22px; }
  .sf-back { height: 44px; font-size: 16px; font-weight: 600; }
  .sf-back b { font-size: 20px; }
  .sf-back svg { width: 20px; height: 20px; }
  .sf-btn, .sf-btn.sf-btn-line, .sf-btn-line.sf-btn { height: 56px; font-size: 17px; }
  .sf-btn-line:not(.sf-btn) { min-height: 48px; padding: 0 18px; font-size: 16px; font-weight: 700; }
  .sf-v2-nav .sf-prev { font-size: 16px; }
  .dk-title, .sf-article h1, .sf-me h1, .sf-fb h1, .sf-done h1 { font-size: var(--tk-fs-title); font-weight: 800; }
  .sf-v2-start h1 { font-size: var(--tk-fs-display); font-weight: 700; line-height: 1.2; letter-spacing: -0.03em; }   /* 설문 표지 제목 36 — 쪽 제목(.sf-me h1 도 걸림) 뒤에 둬야 이김 */
  main h2, .sf-dks-head, .sf-cp-prod { font-size: var(--tk-fs-h); }
  .sf-article p, .sf-article li, .dk-legal p, .dk-legal li, .dk-body p, .dk-body li { font-size: var(--tk-fs-body); line-height: 1.7; }
  .sf-v2-lead p, .sf-cp-cond, .sf-doki-note, .sf-dks-foot, .sf-fb small, .sf-try .sf-meta,
  .dk-notice, .dk-agree-text, .dk-help { font-size: var(--tk-fs-read); line-height: 1.6; }
  .sf-meta, .sf-capline span, .sf-clines span, .sf-cp-lab, .sf-rgroup span, .sf-v2-kicker, .dk-agree-sub, .sf-done .sf-done-app { font-size: var(--tk-fs-sec); }
  .sf-chip { min-height: 32px; font-size: var(--tk-fs-meta); }
}

.sf-r2-short { color: var(--tk-rose-ink, var(--tk-rose)); }   /* 2차 한 줄 다섯 자 미만 — 로즈(디자인 2 #1243) */

/* Android 두 단계 창(_stores.html play_steps, 10/6) — 확인 창(.dk-dialog) 틀 그대로, 번호 줄 둘. ①을 끝내기 전 ②는 테두리 보조 단추,
   끝나면 ①이 테두리 · ②가 로즈 채움(디자인 130c10 — 흐린 로즈는 꺼진 단추로 읽힘) */
.dk-steps-dlg .dk-dialog-box { max-width: 360px; outline: none; }
.dk-steps { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.dk-step { display: flex; gap: 12px; align-items: flex-start; }
.dk-step-n { flex: none; width: 28px; height: 28px; margin-top: 13px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  background: var(--tk-rose); color: var(--tk-on-rose); font-size: 14px; font-weight: 800; }
.dk-step-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.dk-step .sf-btn { margin: 0; width: 100%; height: 54px; justify-content: center; text-decoration: none; font-size: 16px; font-weight: 800; }
.dk-step-note { font-size: 14px; line-height: 1.5; color: var(--dk-sub); }
.dk-step-first { font-size: 14px; font-weight: 700; line-height: 1.5; color: var(--tk-rose-ink); }
:root:not([data-theme='light']) .dk-step-first { color: var(--tk-rose); }
.dk-step-first[hidden] { display: none; }
.dk-step[data-step="2"] .dk-step-n { background: var(--tk-chip); color: var(--dk-sub); }
.dk-steps-dlg:not(.dk-steps-2) .dk-step[data-step="2"] .sf-btn,
.dk-steps-1 .dk-step[data-step="1"] .sf-btn { background: var(--tk-card); color: var(--tk-ink); box-shadow: inset 0 0 0 1.5px var(--tk-line); }
:root:not([data-theme='light']) .dk-steps-dlg:not(.dk-steps-2) .dk-step[data-step="2"] .sf-btn,
:root:not([data-theme='light']) .dk-steps-1 .dk-step[data-step="1"] .sf-btn { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .12); }
.dk-steps-2 .dk-step[data-step="2"] .dk-step-n { background: var(--tk-rose); color: var(--tk-on-rose); }
.dk-step-ok, .dk-steps-1 .dk-step[data-step="1"] .dk-step-num { display: none; }
.dk-steps-1 .dk-step[data-step="1"] .dk-step-ok { display: inline-flex; }
.dk-step-skip { align-self: flex-start; padding: 4px 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 700; color: var(--dk-sub);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.dk-steps-2 .dk-step-skip { display: none; }
.dk-steps-close { width: 100%; height: 44px; border: 0; border-radius: 12px; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; }

/* /writers/me Studio 칸 제출하기 · 제출 취소(재빈 10/6) */
.sf-studio .sf-studio-send { margin-top: 8px; }
.sf-studio-undo { display: block; margin: 12px auto 0; background: none; border: 0; font: inherit; font-size: 14px; font-weight: 700;
  color: var(--tk-ink2); text-decoration: underline; cursor: pointer; }
.dk-dialog-row .sf-studio-ok { background: var(--tk-rose); color: var(--tk-on-rose); }

/* 이름표 있는 그림 칩(F6 대화 방식, 재빈 10/6) — 그림 아래 짧은 이름 한 줄(15/700, 위 8 — 디자인 130c10), 고르면 로즈 글. 그림체 칩(E16 등)엔 없음 */
.sf-img-cap { display: block; width: 100%; min-height: 32px; margin-top: 8px; padding: 0; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 700;
  line-height: 1.35; color: var(--tk-ink); text-align: center; cursor: pointer; }
.sf-img.on .sf-img-cap { color: var(--tk-rose-ink); }
:root:not([data-theme='light']) .sf-img.on .sf-img-cap { color: var(--tk-rose); }
.sf-img.dim .sf-img-cap { opacity: .5; }
.sf-imgs .sf-img-named .sf-img-zoom { bottom: 48px; }   /* 확대 단추는 그림 안 왼쪽 아래 그대로(이름표 높이만큼 위로) */
.sf-below-chip.dim { opacity: .4; }   /* 최대 수를 다 고르면(F6 '기타') */

/* 작가 모집 Studio 섹션 — 실제 Studio 화면 그대로 찍은 캡처(재빈 10/26 '연출한 거 같아서 별로' · 'pc/모바일 각각 실제 사진').
   PC 는 PC 화면 캡처(16:10)를 한 줄에 한 장, 640 아래는 폰 화면 캡처(3:5)를 옆으로 넘기는 한 줄(64% 폭, 다음 카드가 살짝 보임).
   캡처는 Studio 머리(진행 막대 + 워드마크 줄)를 빼고 그 아래부터 — 페이지 머리 워드마크와 Dokimi 가 두 번 나오지 않게(디자인 10/26).
   캡처는 테마마다 따로 — 고른 테마(data-theme)를 모르니 두 <picture> 를 CSS 로 보이고 감춘다(워드마크 .dk-wm-* 와 같음). 번호 알약 14(사이트 최소 글자) */
.sx { margin: 40px 0 8px; }
.sx h2 { margin-bottom: 10px; }
.sx-lead { font-size: 17px; line-height: 1.7; color: var(--tk-ink); font-weight: 600; margin: 0 0 20px; }
/* 캡처는 찍은 화면 그대로 — 카드 · 번호 원 없이 얇은 테두리만, 설명은 아래 보통 글(재빈 11/03 '그냥 텍스트로 해') */
.sx-row { display: grid; gap: 32px; }
.sx-card { margin: 0; }
.sx-shot { background: var(--tk-chip); border: 1px solid var(--tk-line); border-radius: 8px; overflow: hidden; }
.sx-shot img { width: 100%; height: auto; display: block; }
.sx-shot .sx-l { display: none; }
:root[data-theme='light'] .sx-shot .sx-l { display: block; }
:root[data-theme='light'] .sx-shot .sx-d { display: none; }
.sx-card figcaption { padding-top: 12px; font-size: 15px; line-height: 1.6; color: var(--tk-ink2); }
.sx-card figcaption b { display: block; color: var(--tk-ink); }
@media (max-width: 640px) {
  .sx-row { grid-auto-flow: column; grid-auto-columns: 64%; align-items: start; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -20px; padding: 0 20px 4px; scroll-padding: 0 20px; gap: 16px; scrollbar-width: none; }
  .sx-card { scroll-snap-align: start; }
  .sx-lead { font-size: 16px; }
}

/* ── 소식(/news) 확정 판(재빈 10/9, pub02 SITE-SPEC 3절 · news.html 값). 글 크기 최소 14(D-200) ── */
.dk-news-pg { padding: 10px 16px 0; }
.dk-news-pg h1 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.dk-news-tb { display: flex; gap: 8px; margin: 14px 0; overflow-x: auto; scrollbar-width: none; }
.dk-news-tb a { flex: none; padding: 7px 13px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--tk-line); color: var(--tk-ink2);
  font-size: 14px; font-weight: 700; text-decoration: none; transition: background .2s, color .2s; }
.dk-news-tb a[aria-current] { background: var(--tk-ink); color: var(--tk-bg); box-shadow: none; }
.dk-news-list { list-style: none; margin: 0; padding: 0; }
.dk-news-post { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--tk-line); color: var(--tk-ink); text-decoration: none;
  transition: transform .25s ease; }
.dk-news-post:hover { transform: translateX(4px); }
.dk-news-im { flex: none; width: 96px; height: 72px; border-radius: 12px; background-size: cover; background-position: 50% 25%; background-color: var(--tk-chip); }
.dk-news-txt { flex: 1; min-width: 0; }
.dk-news-txt b { display: block; font-size: 17px; font-weight: 800; line-height: 1.35; }
.dk-news-pin { display: inline-block; width: 14px; height: 14px; margin-right: 5px; vertical-align: -1px; fill: none; stroke: var(--tk-rose);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dk-news-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; font-size: 14px; color: var(--tk-faint); }
.dk-news-kd { padding: 2px 7px; border-radius: 7px; background: var(--tk-chip); color: var(--tk-ink2); font-size: 14px; font-weight: 700; }
.dk-news-empty { margin: 0; padding: 90px 20px; text-align: center; font-size: 14px; line-height: 1.7; color: var(--tk-faint); }
.dk-news-art { padding: 10px 16px 0; max-width: 720px; color: var(--tk-ink); }
.dk-news-back { display: inline-block; margin-top: 4px; font-size: 14px; font-weight: 700; color: var(--tk-faint); text-decoration: none; }
.dk-news-art h1 { margin: 10px 0 6px; font-size: 24px; font-weight: 800; line-height: 1.35; letter-spacing: -0.02em; }
.dk-news-cv { display: block; width: 100%; height: 200px; margin: 16px 0; border-radius: 18px; object-fit: cover; object-position: 50% 30%; }
.dk-news-body { font-size: 14.5px; line-height: 1.8; }
.dk-news-body p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.8; }
.dk-news-go-wrap { margin: 18px 0; }
.dk-news-cta { display: inline-flex; align-items: center; padding: 13px 20px; border-radius: 999px; background: var(--tk-rose); color: var(--tk-on-rose);
  font-size: 15px; font-weight: 800; text-decoration: none; }
@media (min-width: 1000px) {
  .dk-news-pg, .dk-news-art { width: 760px; max-width: none; margin: 0 auto; padding: 30px 0 0; }
  .dk-news-pg h1 { font-size: 34px; }
  .dk-news-art h1 { font-size: 32px; }
  .dk-news-cv { height: 340px; }
}
@media (prefers-reduced-motion: reduce) { .dk-news-post { transition: none; } .dk-news-post:hover { transform: none; } }
.dk-news-empty { margin: 24px 0; color: var(--tk-faint); }

/* 링크형 도키 코드 결과 /r/<코드>(시안 ~/ops/cap/redeem-link-1022, 디자인 10/22) — 한 열 가운데, 위 46. 받지 못한 화면은 회색 원(빨강 없음) */
.dk-rl { max-width: 420px; margin: 0 auto; padding: 46px 0 10px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.dk-rl-card { box-sizing: border-box; width: 100%; height: 150px; border-radius: 22px; background: linear-gradient(135deg, #E9A04B, #B86A1F); color: #fff;
  display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 10px 24px rgba(184, 106, 31, .3); }
.dk-rl-card b { font-size: 48px; font-weight: 800; letter-spacing: -1px; }
.dk-rl-card span:last-child { font-size: 26px; font-weight: 800; }
.dk-rl-coin { width: 46px; height: 46px; background: url("/static/dokimi/survey/doki-coin.svg") center / contain no-repeat; }
.dk-rl-mark { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
  background: var(--tk-chip); color: var(--tk-ink2); }
.dk-rl-mark.is-soft { background: var(--tk-rose-soft); color: var(--tk-rose-ink); }
.dk-rl-t { margin: 6px 0 0; font-size: 28px; font-weight: 800; line-height: 1.3; }
.dk-rl-card + .dk-rl-t { margin-top: 24px; }
.dk-rl-s { margin: 8px 0 0; font-size: 15px; color: var(--tk-ink2); }
.dk-rl-acct { margin: 14px 0 0; font-size: 14px; color: var(--tk-faint); }
.dk-rl-btn { width: 100%; justify-content: center; text-decoration: none; font-size: 16px; font-weight: 800; }
.dk-rl-two { display: flex; gap: 10px; width: 100%; }
.dk-rl-two .dk-rl-btn { flex: 1; }
.dk-rl-btn.is-dark { background: var(--tk-ink); color: var(--tk-bg); }

/* ── 체험단 신청 /join · 체험 뒤 설문 /join/after(시안 ~/ops/cap/join-1022 SPEC 1~5, 10/22) — 틀은 /survey rev 41 sf-* 부품 ── */
.jn { max-width: 560px; margin: 0 auto; }
.jn-eyebrow { margin: 18px 0 6px; font-size: 15px; font-weight: 800; color: var(--tk-rose-ink); }
.jn-title { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -0.8px; line-height: 1.22; }
.jn-sub { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--tk-ink2); }
.jn-q { display: block; margin: 30px 0 12px; font-size: 16px; font-weight: 800; line-height: 1.5; }
.jn-opt { font-weight: 600; color: var(--tk-faint); }
.jn .sf-row { min-height: 54px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--tk-line); background: var(--tk-card); color: var(--tk-ink); font: inherit; font-size: 16px; text-align: left; cursor: pointer; }
.jn .sf-row.on { background: var(--tk-rose-soft); box-shadow: inset 0 0 0 2px var(--tk-rose); }
.jn .sf-field { box-sizing: border-box; height: 54px; min-height: 54px; border-radius: 16px; border-width: 1.5px; font-size: 16px; padding: 0 16px; }
.jn .sf-field.is-bad { border-color: var(--tk-rose); }
.jn .jn-area { height: 84px; padding: 14px 16px; resize: vertical; line-height: 1.5; }
.jn .jn-other { margin-top: 8px; }
.jn-err { margin: 8px 4px 0; font-size: 14px; font-weight: 700; color: var(--tk-rose-ink); }
.jn-checks { margin-top: 24px; display: flex; flex-direction: column; gap: 16px; }
.jn-check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-size: 15px; line-height: 1.5; }
.jn-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.jn-box { flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 6px; box-shadow: inset 0 0 0 2px var(--tk-ink2); position: relative; }
.jn-check input:checked + .jn-box { background: var(--tk-rose); box-shadow: none; }
.jn-check input:checked + .jn-box::after { content: ''; position: absolute; left: 6px; top: 6px; width: 10px; height: 5px; border-left: 2.4px solid var(--tk-on-rose);
  border-bottom: 2.4px solid var(--tk-on-rose); transform: rotate(-45deg); }
.jn-check input:focus-visible + .jn-box { outline: 2px solid var(--tk-rose); outline-offset: 2px; }
.jn-check > span:last-child { display: flex; flex-direction: column; gap: 3px; }
.jn-check small { font-size: 14px; color: var(--tk-faint); }
.jn-tag { align-self: flex-start; font-size: 14px; font-weight: 800; padding: 1px 6px; border-radius: 6px; background: var(--tk-chip); color: var(--tk-ink2); }
.jn-tag.is-req { background: var(--tk-rose-soft); color: var(--tk-rose-ink); }
.jn-pv { display: inline-block; margin: 16px 0 0 34px; font-size: 14px; color: var(--tk-ink2); text-decoration: underline; }
.jn .sf-btn { width: 100%; justify-content: center; align-items: center; gap: 8px; font-size: 17px; font-weight: 800; }
.jn .sf-btn.is-busy::before { content: ''; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: jn-spin .8s linear infinite; }
@keyframes jn-spin { to { transform: rotate(360deg); } }
.jn-reveal { overflow: hidden; transition: height .2s ease; }
.jn-done { padding: 70px 0 10px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.jn-ok { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
  background: var(--tk-rose-soft); color: var(--tk-rose-ink); }
.jn-done-t { margin: 0; font-size: 30px; font-weight: 800; line-height: 1.3; }
.jn-done-s { margin: 8px 0 0; font-size: 15px; color: var(--tk-ink2); }
.jn-mail, .jn-pill { display: inline-flex; align-items: center; height: 36px; margin: 18px 0 0; padding: 0 14px; border-radius: 999px; font-size: 14px;
  background: var(--tk-chip); color: var(--tk-ink2); }
.jn-pill.is-linked { margin-top: 12px; font-weight: 700; background: var(--tk-rose-soft); color: var(--tk-rose-ink); }
.jn-done .sf-btn, .jn-wide { width: 100%; text-decoration: none; }
.jn-done .dk-rl-card + .dk-rl-t { margin-top: 24px; }
.jn-login { box-sizing: border-box; width: 100%; height: 54px; margin-top: 10px; border-radius: 16px; box-shadow: inset 0 0 0 1.5px var(--tk-line);
  display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 16px; font-weight: 800; color: var(--tk-ink); text-decoration: none; }
.jn-prov { display: flex; }
.jn-prov i { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; font-style: normal;
  margin-left: -5px; box-shadow: 0 0 0 2px var(--tk-bg); }
.jn-prov i:first-child { margin-left: 0; }
.jn-prov .is-k { background: #FEE500; color: #191600; }
.jn-prov .is-a { background: #14161A; color: #fff; box-shadow: 0 0 0 2px var(--tk-bg), inset 0 0 0 1px rgba(255, 255, 255, .22); }
.jn-prov .is-g { background: #fff; color: #4285F4; box-shadow: 0 0 0 2px var(--tk-bg), inset 0 0 0 1px #DADCE0; }
.jn-home { margin-top: 16px; font-size: 15px; font-weight: 700; color: var(--tk-ink2); text-decoration: none; }
.jn-hr { width: 100%; height: 1px; margin: 34px 0 18px; border: 0; background: var(--tk-line); }
.jn-more { font-size: 15px; font-weight: 700; color: var(--tk-ink); text-decoration: none; }
.jn-more span { color: var(--tk-faint); }
/* ── 체험단 트랙(10/23, 시안 ~/ops/cap/beta-track-1023/board SPEC 2절) — /join 소개 문단 · 남길 리뷰 줄 · 칩 · /join/review 순서 알약 · 5칸 눈금 ── */
.jn-lead { margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: var(--tk-ink2); }
.jn-rv { width: 100%; margin-top: 34px; padding-top: 34px; box-shadow: inset 0 1px 0 var(--tk-line); text-align: left; }
.jn-rv-h { margin: 0 0 18px; font-size: 16px; font-weight: 800; color: var(--tk-ink); }
.jn-rv-list { margin: 0; padding: 0; list-style: none; box-shadow: inset 0 1px 0 var(--tk-line); }
.jn-rv-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 0 12px;
  box-shadow: inset 0 -1px 0 var(--tk-line); font-size: 16px; font-weight: 700; color: var(--tk-ink); text-decoration: none; }
.jn-rv-row.is-open { background: var(--tk-rose-soft); }
.jn-rv-row.is-missed { color: var(--tk-faint); }
.jn-chip { flex: none; display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 14px; font-weight: 700;
  background: var(--tk-chip); color: var(--tk-ink2); white-space: nowrap; }
.jn-chip.is-open { height: 36px; padding: 0 14px; font-weight: 800; background: var(--tk-rose); color: var(--tk-on-rose); }
.jn-chip.is-from { padding: 0 2px; background: none; color: var(--tk-faint); }
.jn-chip.is-missed { background: none; box-shadow: inset 0 0 0 1px var(--tk-line); color: var(--tk-faint); }
.jn-steps { display: flex; gap: 6px; margin-top: 20px; }
.jn-steps span { flex: 1; display: flex; align-items: center; justify-content: center; height: 36px; border-radius: 999px; font-size: 14px; font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--tk-line); color: var(--tk-faint); white-space: nowrap; }
.jn-steps .is-done { box-shadow: none; background: var(--tk-chip); color: var(--tk-ink2); }
.jn-steps .is-now { box-shadow: inset 0 0 0 2px var(--tk-rose); background: var(--tk-rose-soft); color: var(--tk-rose-ink); }
.jn-scale { display: flex; justify-content: space-between; }
.jn .jn-scale .sf-row { box-sizing: border-box; flex: none; width: 52px; height: 52px; min-height: 52px; padding: 0; border-radius: 50%; justify-content: center;
  box-shadow: inset 0 0 0 1.5px var(--tk-line); font-size: 17px; font-weight: 800; text-align: center; }
.jn .jn-scale .sf-row.on { background: var(--tk-rose); box-shadow: inset 0 0 0 1.5px var(--tk-rose); color: var(--tk-on-rose); }
.jn-scale-ends { display: flex; justify-content: space-between; margin-top: 8px; font-size: 14px; color: var(--tk-faint); }
.jn-hint { margin: 14px 0 0; font-size: 14px; line-height: 1.5; text-align: center; color: var(--tk-faint); }
.jn-state { padding-top: 40px; }
.jn-state .jn-title { font-size: 28px; }
.jn-state .jn-login { margin-top: 24px; }
.jn-state .jn-more { display: inline-block; margin-top: 20px; }
/* 디자인 검수(10/23, ~/ops/cap/beta-design-1023/REVIEW.md) — 좁은 폰(≤359) 눈금 · 순서 알약, 상태 글 링크 누를 자리 44, 열린 리뷰 줄 눌림 · 초점 */
.jn-steps span { min-width: 0; padding: 0 6px; }
.jn-rv-row.is-open { -webkit-tap-highlight-color: transparent; }
.jn-rv-row.is-open:active { filter: brightness(.97); }
.jn-rv-row.is-open:focus-visible { outline: 2px solid var(--tk-rose); outline-offset: -2px; }
.jn-state .jn-more { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin-top: 8px; }
@media (max-width: 359px) {
  .jn .jn-scale .sf-row { width: 46px; height: 46px; min-height: 46px; font-size: 16px; }
  .jn-steps { gap: 4px; }
  .jn-steps span { padding: 0 4px; letter-spacing: -0.3px; }
}

/* design/v2 끝 화면: 기존 번호 칸 + 남기기 단추 */
.sf-done-phone { margin: 2px 0 6px; }
.sf-done-phone-row { display: flex; gap: 8px; align-items: stretch; }
.sf-done-phone-row .sf-field { flex: 1; min-width: 0; margin: 0; }
.sf-done-phone-row .sf-btn { flex: 0 0 96px; height: auto; min-height: 0; margin: 0; }

/* SPEC-live-1026: 입구 첫 묶음 머리까지 32 · 지문 예시 1열 정사각(cols 1) */
[data-stage="start"] .sf-rgroup.first { margin-top: 28px; }   /* 부제 줄을 뺀 뒤엔 제목 아래 바로 — 간격은 그대로 28 */   /* 입구 첫 묶음 머리 — 부제 문단 아래 여백 4 와 더해 32(디자인 SPEC-live-1026, 운영 실측 7 이던 것) */
.sf-imgs.sf-imgs-1 { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.sf-imgs.sf-imgs-1 .sf-img-pic { aspect-ratio: 1 / 1; cursor: pointer; }
.sf-imgs.sf-imgs-1 .sf-img-pic img { object-position: 50% 0; }

/* 스토리 전용 도키(시안 ~/ops/cap/design-1025/member-doki SPEC ③ · 10/27) — 막대 · 표지 + 동전(이 편 것) · /me 카드 줄.
   조금 남음(left ≤ total 10%) = warn, 0 = faint. 로즈는 안 씀(오늘 무료 막대 · 단추 몫과 안 섞이게). Studio 타일 한 줄(.md-lot)은 studio.css */
.md-bar{display:block;flex:none;width:56px;height:4px;border-radius:2px;background:var(--tk-line);overflow:hidden}
.md-bar i{display:block;height:100%;border-radius:2px;background:var(--tk-ink2)}
.md-n.md-low{color:var(--sf-warn)}
.md-bar.md-low i{background:var(--sf-warn)}
.md-mark{position:relative;flex:none;width:44px;height:44px}
.md-mark .cv{display:block;width:44px;height:44px;border-radius:10px;object-fit:cover}
.md-mark span.cv{background:var(--tk-line)}
.md-mark .cn{position:absolute;right:-5px;bottom:-5px;width:20px;height:20px;border-radius:50%;box-shadow:0 0 0 2px var(--tk-card)}
.md-lots ul{list-style:none;margin:0;padding:0}
.md-lots li{display:flex;align-items:center;gap:14px;padding:12px 0}
.md-lots li:first-child{padding-top:2px}
.md-lots li:last-child{padding-bottom:0}
.md-lots li+li{border-top:1px solid var(--tk-line)}
.md-lots-t{flex:1;min-width:0}
.md-lots-t b{display:block;font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.md-lots-t .md-bar{width:100%;max-width:180px;margin-top:8px}
.md-n{flex:none;font-size:17px;font-weight:800;font-variant-numeric:tabular-nums}