/* Dokimi 웹 틀 — dokimi.me 전용. 정본은 glimi-apple design/prototype/artboards/DokimiWebPages.dc.html
   색은 브라우저 설정을 따르는 라이트(순백) · 다크 두 벌(tokens.css), 워드마크도 설정을 따른다(라이트 tone · 다크 dark).
   클래스는 전부 dk- 로 시작한다(옛 링크 화면에 같이 얹힐 때 기존 스타일과 섞이지 않게).
   tokens.css 는 여기서 @import 하지 않는다 — 머리(_layout · _legacy_top)가 ?v= 판 번호를 붙여 먼저 싣는다(캐시). */
@import url('https://cdn.jsdelivr.net/gh/sunn-us/SUIT/fonts/variable/woff2/SUIT-Variable.css');

/* 별칭은 하단에서 한 번 더 셈한다 — :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, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 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; }
/* 하단은 반대 판 — 워드마크도 반대 장(다크 본문이면 라이트 장) */
.dk-footer .dk-wm-light { display: block !important; }
.dk-footer .dk-wm-dark { display: none !important; }
:root[data-theme='light'] .dk-footer .dk-wm-light { display: none !important; }
:root[data-theme='light'] .dk-footer .dk-wm-dark { display: block !important; }

/* 그림은 길게 누르기 저장 · 끌어 가기를 막는다(재빈 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: 20px; width: auto; display: block; }

/* 본문 */
.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: 13px; 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 table { width: 100%; border-collapse: collapse; margin: 8px 0 16px; font-size: 13.5px; line-height: 1.55;
  display: block; overflow-x: auto; }
.dk-legal th, .dk-legal td { border: 1px solid var(--dk-line); padding: 8px 10px; text-align: left; vertical-align: top;
  min-width: 7.5em; }  /* 열이 많은 표(국외 이전)는 좁히지 않고 옆으로 밀어 본다 */
.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: 13px; 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: 12.5px; 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: 16px; margin-bottom: 11px; }   /* 워드마크 ↔ 링크 줄 10~12(디자인 9/27) */
.dk-footer nav a { color: var(--dk-sub); text-decoration: underline; }
.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: 13.5px; 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: 13px; font-weight: 700;
  text-decoration: none; white-space: nowrap; border: 0; font-family: inherit; cursor: pointer; }

/* 알림 받기 폼 */
.dk-notify { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 420px; }
.dk-notify label.dk-field { font-size: 13px; 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: 12.5px; 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: 18px; padding: 0 5px; border-radius: 5px; font-size: 10.5px; font-weight: 800; line-height: 18px; }
.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: 12px; color: var(--dk-sub); }
.dk-agree-more { flex: none; font-size: 12px; 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: 12.5px; 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: 12.5px; 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: 13.5px; 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: 12.5px; color: var(--dk-sub); line-height: 1.5; }
.dk-notify .dk-status { margin: 0; font-size: 13.5px; 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: 22px; }
  .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; }
}

/* 옛 링크 화면(대시보드 · 채팅)은 화면 높이를 꽉 채우는 앱 셸이다. 그 위에 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); }
@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: 13px; font-weight: 600; color: var(--dk-sub); }