/* Hallmark · genre: atmospheric · design-system: design/DESIGN.md · designed-as-app
 * 아르카나 v4: 남색 천문 노트 (2026-11-11). style.css, style-v2.css 위에 얹는다(v3 대신).
 * 참고: Co–Star(글자 위주, 선 그림), 스튜디오 사이트의 얇은 선 격자. 바탕은 첫 화면과 같은 남색, 색은 카드 그림에만 둔다.
 * 금색 버튼, 크림색 둥근 버튼, 둥근 판, 명조 제목을 쓰지 않는다. 흐림 효과, 광택 그라데이션 없음. */

:root {
  --ink:#080f20; --velvet:#101c30; --txt:#ece6d9; --txt-2:#b3bccb; --muted:#9ba8b8; --muted-2:#8e9bad; --muted-3:#7d8a9b; --placeholder:#64738a;
  --rule:rgba(236,230,217,.15); --rule-strong:rgba(236,230,217,.32);
  --ui:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Pretendard','Malgun Gothic','Noto Sans KR',sans-serif;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;
  --t-cap:12px; --t-sub:14px; --t-body:16px; --t-lead:18px;
  --ease-out:cubic-bezier(.16,1,.3,1);
}
html,body {background:var(--ink)}
body {font-family:var(--ui)}

/* ---------- 바탕 ---------- */
.nebula {display:none}
#sky {opacity:.5}
body[data-phase="shuffle"] #sky,body[data-phase="pick"] #sky,body[data-phase="reveal"] #sky {opacity:.75}

/* ---------- 공통 조작 ---------- */
.btn {min-height:56px;padding:var(--sp-4) var(--sp-6);border:0;border-radius:0;background:var(--txt);color:var(--ink);
  font:700 var(--t-body)/1.2 var(--ui);letter-spacing:0;box-shadow:none;transition:opacity .15s}
.btn:hover {opacity:.88}
.btn:active {opacity:.72}
.btn:focus-visible {outline:1px solid var(--txt);outline-offset:4px}
.plain {font:500 var(--t-sub)/1.4 var(--ui);color:var(--muted)}
.plain:hover {color:var(--txt)}
.corner {width:36px;height:36px;border:1px solid var(--rule);border-radius:0;background:transparent;color:var(--txt)}

/* ---------- 첫 화면: v2 그대로 둔다 (2026-11-11 사용자 결정, 아틀리에 배경과 명조 제목이 호평받은 화면) ----------
   v4 는 첫 화면에 규칙을 걸지 않는다. 색은 앱 전체가 첫 화면과 같은 남색 계열이다. */
body[data-phase="intro"] .corner {width:28px;height:28px;border:1px solid #9ba8b855;border-radius:50%;background:#080f2099;color:#ece6d9}
.g-header .wordmark {font:700 14px/1 var(--ui);letter-spacing:.22em;color:var(--txt)}

/* ---------- 상담 준비: 얇은 선 격자 ---------- */
.consultation-panel {background:var(--ink);border-top:1px solid var(--rule)}
.consultation-panel::before {background:linear-gradient(transparent,var(--ink))}
.consultation-copy h2 {font:800 clamp(30px,3.2vw,48px)/1.15 var(--ui);letter-spacing:-.02em;margin:var(--sp-6) 0 var(--sp-3)}
.consultation-copy>p {font:var(--t-sub)/1.7 var(--ui);color:var(--muted)}
.consultation-copy .today {font:600 var(--t-cap)/1.5 var(--ui);color:var(--txt);margin-top:var(--sp-6);padding-top:var(--sp-3);border-top:1px solid var(--rule)}
.consultation-copy .hello {font:var(--t-sub)/1.6 var(--ui);color:var(--muted)}
.hello .plain {font-size:var(--t-cap);text-decoration:underline;text-underline-offset:3px;min-height:0;padding:var(--sp-1) 0}
.consultation-controls {gap:0}
.question-label {font:700 var(--t-lead)/1.4 var(--ui);color:var(--txt);margin:0 0 var(--sp-3)}
#q {font:var(--t-body)/1.6 var(--ui);background:transparent;border:1px solid var(--rule);border-radius:0;padding:var(--sp-4);min-height:120px;color:var(--txt)}
#q:focus {border-color:var(--rule-strong);outline:0}
#q::placeholder {color:var(--placeholder);font-size:var(--t-sub)}
.plabel {margin:var(--sp-8) 0 var(--sp-2);font:700 var(--t-cap)/1.4 var(--ui);color:var(--muted)}

/* 말투: 선으로 나눈 목록, 고른 줄은 채운 동그라미 */
#personas {display:flex;flex-direction:column;gap:0;background:none;border-top:1px solid var(--rule);border-radius:0;padding:0}
#personas button {display:grid;grid-template-columns:1fr;justify-items:start;gap:2px;min-height:64px;margin:0;
  padding:var(--sp-3) 0 var(--sp-3) 36px;border:0;border-bottom:1px solid var(--rule);border-left:0;border-radius:0;text-align:left;
  background:none no-repeat 2px center/18px 18px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='7.5' fill='none' stroke='%239ba8b8' stroke-width='1.2'/%3E%3C/svg%3E")}
#personas button.sel {border-left:0;background:none no-repeat 2px center/18px 18px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='7.5' fill='none' stroke='%23ece6d9' stroke-width='1.2'/%3E%3Ccircle cx='9' cy='9' r='4' fill='%23ece6d9'/%3E%3C/svg%3E")}
#personas b {font:600 var(--t-body)/1.4 var(--ui);color:var(--txt)}
#personas small {font:var(--t-cap)/1.5 var(--ui);color:var(--muted);text-align:left}
#start {margin-top:var(--sp-6)}
.appointment-note {font:var(--t-cap)/1.6 var(--ui);color:var(--muted-3);margin-top:var(--sp-3)}

/* 짧게 보기: 칸을 공유하는 2x2 격자 */
.modes {gap:0;border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.modes button {min-height:96px;padding:var(--sp-4);border:0;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);border-radius:0;
  background:none;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:var(--sp-3);transition:background .15s}
.modes button:active {background:#ffffff0d}
.modes b {font:700 var(--t-body)/1.3 var(--ui);color:var(--txt)}
.modes small {font:var(--t-cap)/1.4 var(--ui);color:var(--muted)}
.modes button.done small {color:var(--txt)}

#foot {font:var(--t-cap)/1.8 var(--ui);color:var(--muted-3);border-top:1px solid var(--rule);padding-top:var(--sp-4)}
#foot a {font:600 var(--t-sub) var(--ui);color:var(--txt);border-bottom:1px solid var(--rule-strong)}

/* ---------- 프로필, 궁합: 선 위에 적는 칸 ---------- */
#profile,#match {background:var(--ink)}
.ptitle {font:800 32px/1.2 var(--ui);letter-spacing:-.02em;margin:0 0 var(--sp-3);color:var(--txt)}
.psub {font:var(--t-sub)/1.6 var(--ui);color:var(--muted);margin:0 0 var(--sp-6)}
.paper {clip-path:none;border-radius:0;background:none;padding:0;gap:0;border-top:1px solid var(--rule)}
.paper .seal {display:none}
.pform label {font:600 var(--t-cap)/1.4 var(--ui);color:var(--muted);gap:var(--sp-1);padding:var(--sp-3) 0;border-bottom:1px solid var(--rule)}
.pform input,.pform select {border:0;min-height:32px;padding:2px 0;font:var(--t-lead) var(--ui);color:var(--txt);background:transparent}
.pform input:focus,.pform select:focus {border:0}
.pform input::placeholder {color:var(--placeholder)}
.pform small {font:var(--t-cap)/1.5 var(--ui);color:var(--muted-3)}
.perr {font:var(--t-cap)/1.5 var(--ui);padding:var(--sp-2) 0;margin:0}
.pform {gap:var(--sp-3)}
.pform .btn {margin-top:var(--sp-5)}
#profile .foot,#match .foot {font:var(--t-cap)/1.6 var(--ui);color:var(--muted-3)}

/* ---------- 카드 고르기 안내: 화면 위 한 줄 띠 ---------- */
#hint {left:0;right:0;width:auto;max-width:none;transform:none;top:0;padding:calc(max(12px,env(safe-area-inset-top)) + 44px) var(--sp-6) var(--sp-3);
  border:0;border-bottom:1px solid var(--rule);border-radius:0;background:#080f20e6;box-shadow:none;
  font:var(--t-sub)/1.5 var(--ui);color:var(--txt);text-align:left}
#hint b {font:700 var(--t-sub) var(--ui);color:var(--txt)}

/* ---------- 상담 ---------- */
.room {background:var(--ink)}
.room-heading {border-bottom:1px solid var(--rule);padding-bottom:var(--sp-3)}
.reader-name {font:800 22px/1.2 var(--ui);letter-spacing:-.02em}
.reader-tone {font:var(--t-cap)/1.5 var(--ui);color:var(--muted)}
.msg.c p {font:18px/1.85 var(--serif);color:var(--txt)}
.msg.u {font:var(--t-sub)/1.7 var(--ui);color:var(--txt-2);margin:0;padding:0 0 0 var(--sp-3);background:none;border:0;border-left:2px solid var(--rule-strong);border-radius:0;max-width:none}
.msg.sys {font:var(--t-cap)/1.6 var(--ui);color:var(--muted)}
.msg.cards figcaption {font:600 var(--t-cap)/1.5 var(--ui);color:var(--txt)}
.msg.cards figcaption small,.msg.cards figcaption .fate {font-family:var(--ui)}
.msg.cards .cardface {box-shadow:0 14px 30px #000c,0 0 0 1px #ffffff1f}
.talk,.drawbar,.endbar {background:var(--ink);border-top:1px solid var(--rule)}
.talk input {min-height:48px;padding:0;border:0;border-bottom:1px solid var(--rule-strong);border-radius:0;background:none;font:var(--t-body)/1.4 var(--ui)}
.talk input:focus {border-bottom-color:var(--txt);box-shadow:none}
.talk .send {min-height:48px;padding:0 var(--sp-4);border:0;border-radius:0;background:var(--txt);color:var(--ink);font:700 var(--t-sub)/1 var(--ui)}
.draw-caption {font:600 var(--t-sub)/1.6 var(--ui);color:var(--txt)}
.endrow .plain {font:600 var(--t-sub) var(--ui);color:var(--txt)}
.note {font:var(--t-cap)/1.6 var(--ui);color:var(--muted-3)}
.left-count {font-family:var(--ui)}

/* ---------- 알림 ---------- */
.toast {border:0;border-radius:0;background:var(--txt);color:var(--ink);box-shadow:0 12px 32px #000a;padding:var(--sp-3) var(--sp-5)}
.toast b {font:700 var(--t-sub)/1.4 var(--ui);color:var(--ink)}
.toast span {font:var(--t-cap)/1.5 var(--ui);color:#3d4656}
.toast.bright,.toast.dark {background:var(--txt);box-shadow:0 12px 32px #000a}
.toast.bright b,.toast.dark b {color:var(--ink)}

/* ---------- 카드 크게 보기, 초대 코드 ---------- */
#zoom {background:#080f20f7}
.zinfo b {font:700 var(--t-lead) var(--ui);color:var(--txt)}
.zinfo p {font:var(--t-sub)/1.7 var(--ui);color:var(--txt-2)}
.zhint {font-family:var(--ui)}
#gate {background:var(--ink)}
.gate-in h2 {font:800 30px/1.2 var(--ui);letter-spacing:-.02em}
.gate-in .gate-msg {font:var(--t-sub)/1.7 var(--ui)}
.gate-in input {border:0;border-bottom:1px solid var(--rule-strong);border-radius:0;background:none;padding:var(--sp-3) 0;font:var(--t-lead) var(--ui)}

/* ---------- 카드 도감 ---------- */
body.gallery {background:var(--ink)}
.g-top {background:var(--ink);border-bottom:1px solid var(--rule)}
.g-top h1 {font:800 clamp(32px,8.6vw,54px)/1.15 var(--ui);letter-spacing:-.02em}
.g-back {font:600 var(--t-sub) var(--ui);color:var(--txt);border:0;padding:var(--sp-2) 0}
.g-lead,.g-guardian p,.g-count,.g-legend,.g-section small {font-family:var(--ui)}
.g-count b {font:800 46px/1 var(--ui);letter-spacing:-.02em}
.g-label {font:700 var(--t-cap)/1.4 var(--ui);color:var(--muted)}
.g-guardian,body.gallery .g-section {border-color:var(--rule)}
body.gallery .g-section {font:800 var(--t-lead)/1.4 var(--ui);color:var(--txt)}

/* ---------- 휴대폰 폭 ---------- */
@media(max-width:759px) {
  .modes button {min-height:92px}
}
@media(prefers-reduced-motion:reduce) {
  .btn,.modes button {transition:none}
}