/* voteletter 고유 층 — k-style 파운데이션(kstyle/tokens.css · components.css) 위에 올린다.
   여기서 하는 일: 다크 모드 토큰, 일본어 글꼴 보충, k-style에 없는 부품(우표·소인·좌석 점·달력·시간 칸 편집),
   푸터·언어 버튼·광고 자리. 색·글자·여백은 k-style 토큰만 쓴다. */

:root {
  --font: 'Pretendard', 'IBM Plex Sans JP', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  /* 우표 종이·소인 — voteletter 고유 요소 두 가지만 */
  --c-stamp: #F5EBD3; --c-stamp-ink: #2B2620;
  color-scheme: light;
}
/* 다크 모드 — k-style은 밝은 화면만 정의하므로 같은 이름의 토큰을 어둡게 다시 정한다 */
@media (prefers-color-scheme: dark) {
  :root {
    --c-bg: #0F1114; --c-surface: #1A1D21; --c-line: #2A2E34; --c-line-strong: #4A5058;
    --c-text-1: #F1F3F5; --c-text-2: #B4BCC5; --c-text-3: #8C959F;
    --c-brand: #2B96ED; --c-on-brand: #FFFFFF; --c-brand-text: #6DB9F5; --c-brand-tint: #14293B; --c-brand-tint-text: #8CC8F7;
    --c-brand-pressed: #1583DB; --c-focus: #6DB9F5;
    --c-danger: #F07A6B; --c-danger-tint: #3A1E1B; --c-danger-tint-text: #F59A8E;
    --c-success: #4CC79F; --c-success-tint: #12302A; --c-success-tint-text: #6FD6B4;
    --c-warning: #F0A35E; --c-warning-tint: #37261A; --c-warning-tint-text: #F4B57A;
    --c-info: #A391FF; --c-info-tint: #241F45; --c-info-tint-text: #B8AAFF;
    --c-text-disabled: #6B737C; --c-disabled-bg: #2A2E34; --c-overlay: rgba(0, 0, 0, .6);
    --c-stamp: #3A342A; --c-stamp-ink: #EDE3CF;
    color-scheme: dark;
  }
}

body { max-width: 480px; margin: 0 auto; padding-top: env(safe-area-inset-top, 0px); }
img { max-width: 100%; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 머리글 — 서비스 이름은 eyebrow, 제목은 그 사람이 지금 알고 싶은 답 */
.hero .title .num { font-weight: 700; }

/* 앱바 오른쪽 글자 버튼 */
.appbar-act { justify-self: end; min-height: 44px; padding: 0 var(--stack-s); font-size: var(--fs-sub); font-weight: 600; color: var(--c-brand-text); display: inline-flex; align-items: center; }

/* 세그먼트를 페이지 탭으로 쓸 때 */
.seg.is-tabs { margin: 0 var(--stack-m); }

/* ── 회차 블록: 왼쪽 내용 + 오른쪽 우표·소인 ─────────── */
.occ-top { display: grid; grid-template-columns: minmax(0, 1fr) 84px; gap: var(--stack-m); align-items: start; }
.occ-head { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tally { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-top: var(--stack-s); }
.tally b { font-size: 48px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.tally span { font-size: var(--fs-strong); font-weight: 600; color: var(--c-text-2); }
.tally em { font-style: normal; font-size: var(--fs-sub); color: var(--c-text-3); }
.verdict { font-size: var(--fs-strong); font-weight: var(--fw-strong); }
.st-go .verdict { color: var(--c-brand-text); }
.seats { display: flex; flex-wrap: wrap; gap: 4px; }
.seats i { width: 12px; height: 12px; border-radius: var(--r-pill); background: var(--c-line); display: block; }
.seats i.f { background: var(--c-brand); }
.seats i.x { background: var(--c-brand-tint); box-shadow: inset 0 0 0 1.5px var(--c-brand); }

.stampbox { position: relative; height: 128px; }
.stamp { width: 78px; padding: 9px; background: var(--c-stamp); color: var(--c-stamp-ink); text-align: center;
  --h: 5px;
  -webkit-mask: radial-gradient(var(--h), #0000 98%, #000) round calc(-1.5*var(--h)) calc(-1.5*var(--h)) / calc(3*var(--h)) calc(3*var(--h)), linear-gradient(#000 0 0) no-repeat 50% / calc(100% - 3*var(--h)) calc(100% - 3*var(--h));
          mask: radial-gradient(var(--h), #0000 98%, #000) round calc(-1.5*var(--h)) calc(-1.5*var(--h)) / calc(3*var(--h)) calc(3*var(--h)), linear-gradient(#000 0 0) no-repeat 50% / calc(100% - 3*var(--h)) calc(100% - 3*var(--h)); }
.stamp .in { border: 1.5px solid currentColor; padding: 4px 0 6px; display: flex; flex-direction: column; align-items: center; }
.stamp small { font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.stamp b { font-size: 32px; font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; }
.pm { position: absolute; left: -26px; top: 62px; width: 66px; height: 66px; border-radius: var(--r-pill); display: grid; place-items: center; text-align: center;
  font-size: 14px; font-weight: 800; line-height: 1.05; border: 2.5px solid currentColor;
  box-shadow: inset 0 0 0 3px var(--c-surface), inset 0 0 0 4.5px currentColor;
  transform: rotate(-14deg); background: color-mix(in srgb, var(--c-surface) 60%, transparent); pointer-events: none; }
.pm small { display: block; font-size: 9px; font-weight: 700; margin-top: 2px; }
/* 소인 색 = 배지 표와 같은 뜻 */
.pm.live { color: var(--c-text-2); } .pm.go { color: var(--c-brand); } .pm.fail { color: var(--c-danger); }
.pm.cancel { color: var(--c-warning); } .pm.soon { color: var(--c-text-3); }
.pm.thump { animation: thump .45s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes thump { 0% { transform: rotate(-30deg) scale(1.8); opacity: 0 } 100% { transform: rotate(-14deg) scale(1); opacity: 1 } }
:lang(en) .pm { font-size: 12px; text-transform: uppercase; }

/* 참석/불참 고르기 — 선택은 브랜드 하나(k-style 규칙). 버튼 높이 56 */
.choice { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--stack-s); }
.choice button { height: var(--h-btn); border-radius: var(--r-m); background: var(--c-bg); color: var(--c-text-1); font-size: var(--fs-strong); font-weight: 600; }
.choice button[aria-pressed="true"] { background: var(--c-brand-tint); color: var(--c-brand-tint-text); box-shadow: inset 0 0 0 1.5px var(--c-brand); }
.choice button:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }

/* 숫자 올리고 내리기 */
.stepper { display: flex; justify-content: space-between; align-items: center; gap: var(--stack-m); }
.stepper .row-main { gap: 2px; }
.ctrl { display: flex; align-items: center; gap: var(--stack-s); }
.ctrl button { width: 44px; height: 44px; border-radius: var(--r-pill); background: var(--c-bg); display: grid; place-items: center; }
.ctrl button svg { width: 20px; height: 20px; }
.ctrl button:disabled { color: var(--c-text-disabled); }
.ctrl output { min-width: 28px; text-align: center; font-size: var(--fs-h2); font-weight: 700; font-variant-numeric: tabular-nums; }

/* 누가 답했나 — 사람은 글자 아바타 대신 이름 칩(이름이 핵심 정보라서) */
.who { display: flex; flex-direction: column; gap: var(--stack-s); }
.wl { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.wl > b { font-size: var(--fs-caption); font-weight: 600; color: var(--c-text-2); min-width: 52px; }
.pchip { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: var(--r-pill); background: var(--c-bg); font-size: var(--fs-sub); font-weight: 600; color: var(--c-text-1); }
.pchip.in { background: var(--c-brand-tint); color: var(--c-brand-tint-text); }
.pchip.none { background: transparent; box-shadow: inset 0 0 0 1px var(--c-line-strong); color: var(--c-text-2); }
.pchip.me { box-shadow: inset 0 0 0 1.5px var(--c-text-1); }
.acts { display: flex; flex-wrap: wrap; gap: var(--stack-s); }
.acts .btn { flex: 1 1 auto; }
.btn.danger-text { background: var(--c-bg); color: var(--c-danger); }
.copyarea { width: 100%; min-height: 88px; padding: var(--stack-m); border-radius: var(--r-m); border: 1px solid var(--c-line); background: var(--c-bg); font-size: var(--fs-sub); }

/* ── 달력 ─────────── */
.cal-head { display: flex; justify-content: space-between; align-items: center; }
.cal-head .h2 { font-variant-numeric: tabular-nums; }
.navbtn { width: 44px; height: 44px; border-radius: var(--r-pill); background: var(--c-bg); display: grid; place-items: center; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.cal .dw { text-align: center; font-size: var(--fs-caption); font-weight: 600; color: var(--c-text-3); padding-bottom: 6px; }
.cal .d { aspect-ratio: 1; max-width: 100%; display: grid; place-items: center; font-size: var(--fs-sub); color: var(--c-text-3); border-radius: var(--r-s); font-variant-numeric: tabular-nums; }
.cal .d.today { color: var(--c-text-1); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.cal button.d { color: var(--c-text-1); font-weight: 600; }
.cal button.d[aria-pressed="true"] { background: var(--c-brand-tint); }
.mk { width: min(34px, 90%); aspect-ratio: 1; border-radius: var(--r-pill); display: grid; place-items: center; font-size: var(--fs-caption); font-weight: 700; }
.mk.go { background: var(--c-brand); color: var(--c-on-brand); }
.mk.live { background: var(--c-bg); color: var(--c-text-1); box-shadow: inset 0 0 0 1.5px var(--c-text-3); }
.mk.fail { background: var(--c-danger-tint); color: var(--c-danger-tint-text); }
.mk.cancel { background: var(--c-warning-tint); color: var(--c-warning-tint-text); text-decoration: line-through; }
.mk.soon { box-shadow: inset 0 0 0 1px var(--c-line-strong); }
.legend { display: flex; flex-wrap: wrap; gap: 6px; }
.legend .badge { align-self: auto; }

/* ── 폼: 정기 일정 칸 ─────────── */
.slot { display: flex; flex-wrap: wrap; gap: var(--stack-s); align-items: center; padding: var(--stack-s) 0; }
.slot .n { width: 24px; font-weight: 700; color: var(--c-brand-text); text-align: center; }
.slot .input { flex: 1 1 90px; min-width: 0; }
.slot input[type=time] { flex: 1 1 calc(100% - 120px); margin-left: 32px; }
select.input { appearance: auto; }
.slot .rm { min-height: 44px; padding: 0 var(--stack-s); color: var(--c-danger); font-size: var(--fs-sub); font-weight: 600; }
.dl-row { display: flex; flex-wrap: wrap; gap: var(--stack-s); align-items: center; }
.dl-row .input { flex: 1 1 120px; min-width: 0; }
.checkrow { display: flex; align-items: center; gap: var(--stack-m); min-height: var(--h-row); }
.checkrow .row-main { flex: 1; }
.plain .block { background: var(--c-bg); }
.preview { display: flex; flex-direction: column; gap: 4px; }
.form-err { color: var(--c-danger); font-size: var(--fs-sub); font-weight: 600; display: flex; gap: 4px; align-items: center; }
.form-err:empty { display: none; }
.form-err svg { width: 18px; height: 18px; }
.input.is-code { letter-spacing: .2em; text-transform: uppercase; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── 로그인 버튼 — 카카오·구글 브랜드 규정 색 ─────────── */
.logins { display: flex; flex-direction: column; gap: var(--stack-s); margin: 0 var(--page-x); }
.kakao, .gbtn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: var(--h-btn); border-radius: var(--r-m); font-size: var(--fs-strong); font-weight: 600; }
.kakao { background: #FEE500; color: rgba(0, 0, 0, .85); }
.gbtn { background: #FFFFFF; color: #1F1F1F; box-shadow: inset 0 0 0 1px #747775; }
@media (prefers-color-scheme: dark) { .gbtn { background: #131314; color: #E3E3E3; box-shadow: inset 0 0 0 1px #8E918F; } }
.kakao svg, .gbtn svg { width: 20px; height: 20px; }
.kakao.small { width: auto; height: var(--h-btn-s); padding: 0 var(--stack-m); font-size: var(--fs-sub); }
.kakao:disabled, .gbtn:disabled { opacity: .6; }
.kakao svg path { fill: currentColor; }

/* 멤버 행의 관리 버튼들 */
.row-tools { display: flex; flex-wrap: wrap; gap: var(--stack-s); padding: 0 0 var(--row-py) calc(44px + var(--stack-m)); }
.mrow { border-bottom: 1px solid var(--c-line); }
.mrow:last-child { border-bottom: 0; }
.mrow .row { border: 0; }
.row-tools .field.grow { flex: 1 1 160px; }
.confirm { display: flex; flex-wrap: wrap; gap: var(--stack-s); align-items: center; width: 100%; font-size: var(--fs-sub); font-weight: 600; }

/* 목록 블록 행 사이 구분선 */
.block.is-list > .row + .row, .block.is-list > a.row + a.row { border-top: 1px solid var(--c-line); }

/* 토스트 */
.toast { position: fixed; left: 50%; top: calc(16px + env(safe-area-inset-top, 0px)); transform: translate(-50%, -10px); opacity: 0; z-index: 20;
  background: var(--c-text-1); color: var(--c-surface); font-size: var(--fs-sub); font-weight: 600; padding: 12px 18px; border-radius: var(--r-pill);
  max-width: calc(100% - 32px); text-align: center; transition: opacity .2s, transform .2s; pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* 아래: 광고·언어·방침 */
.adwrap { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--stack-m) var(--page-x) 0; }
.adlabel { align-self: flex-start; font-size: var(--fs-caption); color: var(--c-text-3); }
#ad { width: 100%; display: flex; justify-content: center; overflow: hidden; }
.foot { display: flex; flex-direction: column; align-items: center; gap: var(--stack-s); padding: var(--stack-l) var(--page-x) calc(var(--stack-l) + env(safe-area-inset-bottom)); font-size: var(--fs-caption); color: var(--c-text-3); }
body:has(.cta) .foot { padding-bottom: calc(var(--h-btn) + var(--stack-l) * 2 + env(safe-area-inset-bottom)); }
.foot a { text-decoration: underline; text-underline-offset: 3px; }
.langs { display: flex; gap: 2px; background: var(--c-line); padding: 3px; border-radius: var(--r-pill); }
.langs button { min-height: 32px; padding: 0 12px; border-radius: var(--r-pill); font-size: var(--fs-caption); font-weight: 600; color: var(--c-text-2); }
.langs button[aria-pressed="true"] { background: var(--c-surface); color: var(--c-text-1); }
.cta { max-width: 480px; margin: 0 auto; }

/* 개인정보처리방침 */
.doc { padding: var(--stack-m) var(--page-x) var(--stack-l); display: flex; flex-direction: column; gap: var(--stack-m); }
.doc h2 { font-size: var(--fs-strong); font-weight: 700; margin-top: var(--stack-m); }
.doc p, .doc li { font-size: var(--fs-sub); line-height: var(--lh-sub); color: var(--c-text-1); }
.doc ul { list-style: disc; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.doc .tw { overflow-x: auto; }
.doc table { border-collapse: collapse; width: 100%; font-size: var(--fs-caption); }
.doc th, .doc td { border: 1px solid var(--c-line); padding: 8px; text-align: left; vertical-align: top; }
.doc a { color: var(--c-brand-text); }
.doc section[lang] { display: none; }
.doc section.on { display: flex; flex-direction: column; gap: var(--stack-m); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (max-width: 360px) { .occ-top { grid-template-columns: minmax(0, 1fr) 72px; } .stamp { width: 70px; } .tally b { font-size: 40px; } }

/* 모바일: −/+ 같은 버튼을 빠르게 연타해도 더블탭 확대가 일어나지 않게.
   핀치 확대는 그대로 둔다(접근성). 연타 때 숫자·글자가 선택되는 것도 막는다. */
button, a, select, label, [role="button"], [role="switch"], [role="radio"], [role="tab"] { touch-action: manipulation; }
.stepper .ctrl, .stepper .ctrl output, .choice, .seg { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }

/* ---------- 일정 맞추기 (날짜 × 오전·오후·저녁) ---------- */
.poll-ico { color: var(--c-brand); }
.poll-ico svg { width: 24px; height: 24px; }
.info > svg { width: 20px; height: 20px; flex: none; }
.pgrid { display: grid; grid-template-columns: minmax(88px, 1.25fr) repeat(3, minmax(0, 1fr)); gap: 6px; align-items: stretch; }
.pgrid .ph { font-size: var(--fs-caption); font-weight: 600; color: var(--c-text-2); text-align: center; padding-bottom: 2px; }
.pgrid .pwk { grid-column: 1 / -1; height: 1px; margin: 4px 0; background: var(--c-line); }
.pday { text-align: left; padding: 0 4px; min-height: 44px; border: 0; background: none; font: inherit; font-size: var(--fs-sub); font-weight: 600; color: var(--c-text-1); border-radius: var(--r-s); }
.pday.sat { color: var(--c-info); }
.pday.sun { color: var(--c-danger); }
.pc { position: relative; min-height: 44px; border-radius: var(--r-s); border: 1px solid var(--c-line); background: var(--c-surface); font: inherit; font-size: var(--fs-caption); font-weight: 700; color: var(--c-text-2);
  display: flex; align-items: center; justify-content: center; gap: 2px; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; transition: background .12s, border-color .12s; }
.pc.y { background: var(--c-brand); border-color: var(--c-brand); color: var(--c-on-brand); }
.pc.m { background: var(--c-brand-tint); border: 1.5px dashed var(--c-brand); color: var(--c-brand-tint-text); }
/* 결과: 진할수록 많이 됨 */
.pc.heat { border-color: transparent; color: var(--c-text-1); background: color-mix(in srgb, var(--c-brand) var(--h), var(--c-bg)); }
.pc.heat.hot { color: var(--c-on-brand); }
.pc.heat small { font-size: 11px; font-weight: 600; opacity: .85; }
.pc.heat.ok { box-shadow: inset 0 0 0 2px var(--c-text-1); }
.pc.heat.sel { outline: 3px solid var(--c-focus); outline-offset: 1px; }
.plegend { display: flex; gap: var(--stack-m); flex-wrap: wrap; font-size: var(--fs-sub); color: var(--c-text-2); }
.plegend span { display: inline-flex; align-items: center; gap: 6px; }
.plegend .pc { min-height: 0; width: 18px; height: 18px; display: inline-block; }
.psel-detail { display: grid; gap: var(--stack-s); padding-top: var(--stack-m); border-top: 1px solid var(--c-line); }
.pick { display: grid; gap: var(--stack-s); }
.pchip.maybe { background: var(--c-bg); border: 1.5px dashed var(--c-brand); color: var(--c-brand-tint-text); }
.pchip.out { color: var(--c-text-2); }
.poll-picked .h2 { font-size: var(--fs-title); }
/* 길게 내려도 오전·오후·저녁 머리줄이 앱바 아래에 붙어 있게 */
.pgrid .ph { position: sticky; top: var(--h-appbar); z-index: 1; background: var(--c-surface); padding: 6px 0; }
.block.is-list button.row { width: 100%; text-align: left; border: 0; background: none; font: inherit; color: inherit; }