/* 별별당 — 심야 별자리판 (2026-08-25 꾸비 확정 · design/_시안_별밤vs크레용_2026-08-25.html night값 이식)
   ⭐ 토큰 이름은 이전과 한 글자도 안 바뀌었다 — app.js 는 이름만 보고 값은 CSS가 결정한다.
   ⭐ --card-* 4개는 결과 카드 전용 토큰이다. 승인 캐릭터는 투명 PNG이므로 화면 카드도 심야판 위에 직접 얹는다. */
:root{
  --zero-bg:#3D1B2C; --many-bg:#232A40;
  --paper:#0A0E1C; --surface:#141A2E; --ink:#F0EAE2; --sub:#9AA3C4; --line:rgba(255,255,255,.16);
  /* --point 를 --hi와 같은 별빛 노랑으로 — 1안(design/_시안_리디자인3방향) A방향 원안이 노랑 중심이었는데
     비교시안(design/_시안_별밤vs크레용)에서 핑크(#FF4FA3)로 갈라진 걸 실서버가 그대로 물려받았다.
     원안대로 되돌린다(2026-08-25 꾸비 지적). --point-fg = 노랑 위에 얹는 글씨색(흰색 대신 어두운 남색). */
  --point:#FFE14D; --point-fg:#1B1730; --hi:#FFE14D; --hi-soft:#453714; --hot:#FF4FA3;
  --talk-me-bg:#FEE45A; --talk-me-fg:#171A24;
  --talk-them-bg:#293453; --talk-them-fg:#F4F6FF;
  --kakao-bg:#FEE500; --kakao-fg:#191600; /* 카카오 브랜드 규정색 — 테마에서 재정의 금지 */
  --day-bg:#6B4A16; --night-bg:#33459A;   /* 시간 칸 밤·낮 구분 (2026-08-23). 옅으면 띠가 안 보여 목적을 잃는다 */
  --mok:#7CD98A; --hwa:#FF6E52; --to:#E8B85E; --geum:#A9B8D9; --su:#5FA8FF;

  /* 결과 화면 간격 체계 — 근접성으로 절·블록·내부 요소의 구조를 드러낸다 */
  --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:40px; --sp-7:56px;

  /* ── app.js 에 박혀 있던 색 (2026-08-24 토큰화 1단계, 2026-08-25 night 값 이식) ──
     ⚠️ `--fill-*` 은 **반드시 hex** 로 둔다 — app.js 가 이 값으로 대비를 계산해 글씨색을 고른다.
        rgba() 를 넣으면 그 계산이 깨진다. 반투명이 필요한 자리는 `--tint-*` 다. */

  /* 사주표 칸 채움 — night 방향에서는 게이지 색과 같은 값을 쓴다(시안 값 그대로) */
  --fill-mok:#7CD98A; --fill-hwa:#FF6E52; --fill-to:#E8B85E; --fill-geum:#A9B8D9; --fill-su:#5FA8FF;
  /* 칸 위 글씨 후보 두 개 — 팔레트가 바뀌어도 흰/먹 후보 자체는 그대로 둔다(대비 계산의 입력일 뿐) */
  --fill-fg-light:#ffffff; --fill-fg-dark:#2A2724;

  /* 오각형 — 활성 노드 채움(반투명, rgba 가능) · 없는 오행 · 흐린 노드 · 흐린 글씨 */
  --tint-mok:rgba(124,217,138,.16); --tint-hwa:rgba(255,110,82,.16); --tint-to:rgba(232,184,94,.16);
  --tint-geum:rgba(169,184,217,.16); --tint-su:rgba(95,168,255,.16);
  --zero-node:#0A0E1C;
  /* --dim-node·--dim-ink 는 시안에 없던 값이라 이번에 새로 골랐다 — dim-node는 --surface 재사용(살짝 뜬 판),
     dim-ink는 A방향 목업에서 이미 8곳 검증된 흐린 글씨색(#7A82A6)을 그대로 가져왔다 */
  --dim-node:#141A2E; --dim-ink:#7A82A6;
  --mute:#6B7396;                        /* 생·극 화살표 중 꺼진 것 */
  /* 오행 관계도 전용 — 레퍼런스처럼 흐름(주황)·충돌(파랑)·나머지 고리(아이보리)를 분리한다. */
  --flow-active:#E36A45; --clash-active:#6FA7DC; --flow-muted:#D6D0C5;

  /* 개수 배지·「나」 배지 · 「없어」 배지 */
  /* 라이트에선 「어두운 배지+흰 링」으로 밝은 배경에서 떼어놨는데, night는 배지 배경이 페이지색과 같아서
     숫자가 배지 없이 떠 보였다(2026-08-25 00 세션 대비 계산 + 실측 확인). 라이트를 반전시켰다 —
     밤하늘에서는 밝은 알약이 눈에 걸리는 쪽이 원래 의도에 맞는다. */
  --badge-bg:#F0EAE2; --badge-fg:#0A0E1C; --badge-ring:#0A0E1C; --zero-badge-bg:#F0EAE2;

  /* 카드 전용 — 심야판. 오행색은 JS가 --card-accent 한 곳에만 주입한다. */
  --card-bg:#101527; --card-ink:#F0EAE2; --card-sub:#9AA3C4; --card-line:rgba(255,255,255,.16);
}
*{box-sizing:border-box;margin:0;padding:0}
/* id 선택자가 display를 덮어써서 hidden 속성이 무력화되는 것을 막는다 */
[hidden]{display:none !important}
html,body{height:100%}
/* 색 지정 없는 <a>는 브라우저 기본 파랑(#0000EE)이 뜬다 — 어두운 배경에서 대비 미달.
   더 구체적인 규칙(.back 등)이 있으면 그쪽이 이긴다 (2026-08-25 검수) */
a{color:var(--point)}
body{
  font-family:"Pretendard Variable",-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--paper); color:var(--ink); font-size:16px; line-height:1.6;
  -webkit-text-size-adjust:100%;
  position:relative;
}
/* 별자리 배경 — 세계관의 뿌리(브랜드-정의서 §1 「별」)를 화면 전체로 끌어온다.
   고정 위치라 스크롤해도 별이 같은 자리에 떠 있다 (2026-08-25, 시안 A 이식) */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%,#fff 60%,transparent 61%),
    radial-gradient(1.3px 1.3px at 78% 8%,#fff 60%,transparent 61%),
    radial-gradient(1.8px 1.8px at 88% 32%,#FFE14D 60%,transparent 61%),
    radial-gradient(1.2px 1.2px at 34% 62%,#fff 60%,transparent 61%),
    radial-gradient(1.5px 1.5px at 62% 78%,#fff 60%,transparent 61%),
    radial-gradient(1.3px 1.3px at 8% 88%,#fff 60%,transparent 61%),
    radial-gradient(1.6px 1.6px at 92% 92%,#fff 60%,transparent 61%),
    radial-gradient(1.2px 1.2px at 50% 6%,#fff 60%,transparent 61%);
  opacity:.75; animation:twinkle 4.5s ease-in-out infinite;
}
@keyframes twinkle{0%,100%{opacity:.45}50%{opacity:.9}}
@media (prefers-reduced-motion:reduce){body::before{animation:none;opacity:.6}}
button,input{font:inherit;color:inherit}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:fixed;top:8px;left:8px;z-index:10000;padding:10px 14px;border-radius:10px;
  background:var(--point);color:var(--point-fg);font-weight:800;text-decoration:none;transform:translateY(-160%)}
.skip-link:focus{transform:none;outline:3px solid var(--ink);outline-offset:2px}

.screen{max-width:420px;margin:0 auto;padding:14px 16px 40px;position:relative;z-index:1}
.screen:focus{outline:none}

/* ── 사이트 공통 헤더·메뉴 시안 ────────────────────────── */
.site-header{
  position:sticky;top:0;z-index:30;height:58px;
  background:rgba(10,14,28,.88);border-bottom:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
.site-header::after{content:"";position:absolute;left:0;bottom:-1px;width:24%;height:2px;background:var(--point);box-shadow:0 0 10px rgba(255,225,77,.55)}
.site-header-inner{height:100%;max-width:960px;margin:0 auto;padding:0 16px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.site-brand{min-height:44px;display:flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none;font-family:Gugi,sans-serif;font-size:18px;line-height:1}
.site-brand-plate{width:34px;height:34px;display:grid;place-items:center;background:var(--point);border-radius:11px}
.site-header-actions{display:flex;align-items:center;gap:9px}
.site-retry-button{height:44px;padding:0 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font-size:12px;font-weight:700;white-space:nowrap;cursor:pointer}
.site-retry-button[hidden]{display:none}
.site-retry-button:hover{border-color:rgba(255,225,77,.55)}
.site-retry-button:active{transform:translateY(1px)}
.site-menu-button{width:44px;height:44px;padding:0;display:grid;place-content:center;gap:4px;border:1px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer}
.site-menu-button i{display:block;width:18px;height:2px;border-radius:3px;background:var(--ink);transition:transform .2s ease,opacity .2s ease}
.site-menu-button:hover{border-color:rgba(255,225,77,.55)}
.site-retry-button:focus-visible,.site-menu-button:focus-visible,.site-menu-close:focus-visible,.site-menu-row:focus-visible,.site-menu-legal a:focus-visible,.site-menu-legal button:focus-visible{outline:3px solid var(--point);outline-offset:2px}

.site-menu-layer{position:fixed;inset:58px 0 0;z-index:40;background:rgba(3,6,16,.66);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility .2s ease}
.site-menu{position:absolute;top:0;right:0;width:min(88vw,380px);height:100%;overflow:auto;padding:22px 20px 26px;background:#10162A;border-left:1px solid var(--line);box-shadow:-24px 0 70px rgba(0,0,0,.35);transform:translateX(100%);transition:transform .24s cubic-bezier(.2,.8,.2,1)}
.site-menu-open{overflow:hidden}.site-menu-open .site-menu-layer{opacity:1;visibility:visible;pointer-events:auto}.site-menu-open .site-menu{transform:none}
.site-menu-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:24px}
.site-menu-kicker{display:block;color:var(--sub);font-size:10.5px;font-weight:900;letter-spacing:.14em;margin-bottom:3px}.site-menu-head h2{font:400 19px Gugi,sans-serif}
.site-menu-close{width:44px;height:44px;border:0;border-radius:11px;background:rgba(255,255,255,.07);color:var(--ink);font-size:23px;cursor:pointer}
.site-menu-group{margin-top:22px}.site-menu-group h3{font-size:12px;color:var(--sub);letter-spacing:.04em;margin:0 0 7px}
.site-menu-row{width:100%;min-height:58px;padding:12px 2px;display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left;text-decoration:none;color:var(--ink);border:0;border-bottom:1px solid rgba(255,255,255,.09);background:none;cursor:pointer}
.site-menu-row span:first-child{display:flex;flex-direction:column;gap:2px}.site-menu-row b{font-size:14px}.site-menu-row small{font-size:11px;color:var(--sub)}.site-menu-row em{font-size:10px;font-style:normal;font-weight:800;color:var(--point)}
.site-menu-row:hover:not(.is-disabled){color:var(--point)}.site-menu-row.is-current{border-radius:12px;padding-left:12px;padding-right:12px;background:rgba(255,225,77,.07);border-bottom-color:rgba(255,225,77,.22)}
.site-menu-row.is-disabled{cursor:not-allowed;opacity:.58}.site-menu-row.is-disabled em{color:var(--sub)}
.site-menu-legal{display:flex;flex-wrap:wrap;gap:8px 16px;padding-top:18px;border-top:1px solid rgba(255,255,255,.09)}
.site-menu-legal a,.site-menu-legal button{min-height:44px;display:inline-flex;align-items:center;border:0;background:none;
  padding:0;color:var(--sub);text-decoration:none;font-size:12px;cursor:pointer}
.site-menu-preview-note{margin-top:14px;padding:11px;border-radius:10px;background:rgba(255,225,77,.09);color:#D8D0A0;font-size:11px;line-height:1.55}
.site-menu-foot{margin-top:32px;color:var(--dim-ink);font-size:10.5px;line-height:1.7}

@media (min-width:768px){
  .site-header-inner{padding-left:28px;padding-right:28px}
  .site-header::after{width:16%}
}

#screen-result{padding-top:var(--sp-5);padding-left:var(--sp-4);padding-right:var(--sp-4)}

.assembly-status,.assembly-error{
  margin:0 auto var(--sp-5);max-width:720px;border-radius:14px;padding:var(--sp-4);
  background:var(--surface);border:2px solid var(--line);font-size:14px;line-height:1.65;
}
.assembly-status{text-align:center;color:var(--sub)}
.assembly-error{border-color:var(--hot)}
.assembly-error h2{font-family:Gugi,sans-serif;font-size:17px;font-weight:400;margin-bottom:var(--sp-2)}
.assembly-error button{margin-top:var(--sp-3);min-height:44px;padding:9px 15px;border-radius:11px;
  border:2px solid var(--ink);background:var(--point);color:var(--point-fg);font-weight:700;cursor:pointer}

/* ── ① 입력 ───────────────────────────────────────────── */
#screen-input{
  min-height:calc(100dvh - 58px);display:flex;flex-direction:column;justify-content:flex-start;
  padding:34px 18px 42px;
}
.hd{text-align:center;margin-bottom:20px}
/* 심볼(logo.svg)은 글자 옆에 앉는다. 크기는 쓰는 자리에서 width/height 로 정한다. */
.mark{display:block;flex:none}
.hd-eyebrow{display:inline-flex;align-items:center;min-height:26px;padding:4px 10px;border:1px solid rgba(255,225,77,.3);border-radius:999px;background:rgba(255,225,77,.08);color:var(--point);font-size:10.5px;font-weight:800;letter-spacing:.04em;margin-bottom:12px}
.hd-title{font-family:Gugi,sans-serif;font-weight:400;font-size:30px;line-height:1.28;letter-spacing:-.045em;color:var(--ink);margin:0;text-wrap:balance}
/* 「이게 뭐 하는 사이트야」 — 친구 링크로 들어온 사람이 폼보다 먼저 봐야 하는 줄 */
.hd-what{font-size:14px;line-height:1.62;margin-top:10px;color:var(--sub);letter-spacing:-.025em}
.hero-character-window{position:relative;overflow:hidden;margin-top:20px;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);touch-action:pan-y;user-select:none;-webkit-user-select:none}
.hero-character-track{display:flex;width:max-content;animation:hero-character-flow 75s linear infinite;animation-delay:var(--hero-flow-delay,0ms);will-change:transform}
.hero-character-group{display:flex;gap:9px;padding-right:9px}
.hero-character-group figure{flex:0 0 72px;width:72px;aspect-ratio:1;overflow:hidden;border:1px solid rgba(255,255,255,.15);border-radius:13px;background:#F7F2EA;box-shadow:0 8px 22px rgba(0,0,0,.2)}
.hero-character-group img{display:block;width:100%;height:100%;object-fit:contain;transform:scale(.94);transform-origin:center bottom;-webkit-user-drag:none}
@media (hover:hover) and (pointer:fine){
  .hero-character-window{cursor:grab}
  .hero-character-window:hover .hero-character-track{animation-play-state:paused}
  .hero-character-window.is-dragging{cursor:grabbing}
}
@keyframes hero-character-flow{to{transform:translateX(-50%)}}
.hero-caption{margin-top:9px;color:var(--sub);font-size:10.5px;font-weight:650;letter-spacing:-.015em}
.input-panel{padding:20px 16px 18px;border:1px solid rgba(255,255,255,.14);border-radius:22px;background:linear-gradient(160deg,rgba(20,26,46,.96),rgba(14,20,38,.93));box-shadow:0 24px 70px rgba(0,0,0,.26)}

.field{margin-bottom:14px}
.field-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.lb{display:block;font-size:12.5px;font-weight:700;color:var(--sub);margin-bottom:6px}
.field-hd .lb{margin:0}
.hint{font-size:12px;color:var(--sub);margin-top:6px;line-height:1.55}
.opt{font-size:11.5px;color:var(--sub)}
/* 아래 입력칸들(.dates·.seg·.time)과 같은 옷을 입힌다 — 여기만 달라 보이면 「덜 만든 칸」처럼 읽힌다.
   ⚠️ 종전 background:var(--card) 는 정의된 적 없는 토큰이라 배경이 안 먹었다. */
#nick{width:100%;padding:12px;font-size:16px;color:var(--ink);
  background:#141A2E;border:1px solid rgba(255,255,255,.14);border-radius:12px}
#nick:focus-visible{outline:3px solid var(--point);outline-offset:1px}
#nick::placeholder{color:var(--dim-ink);opacity:1}
.nick-preview{margin-top:7px;color:#FFE14D;font-size:12px;font-weight:700}
.nick-exact{color:var(--sub);font-size:12px}

.dates{display:flex;align-items:center;gap:5px}
.dates input{
  flex:1 1 0; min-width:0; text-align:center; padding:12px 2px;
  background:#141A2E; border:1px solid rgba(255,255,255,.14); border-radius:12px;
  color:var(--ink);
  font-size:18px; font-weight:700; letter-spacing:.02em;
}
.dates input#y{flex:1.8 1 0}
.dates input::placeholder{color:var(--dim-ink);font-weight:400}
.dates input:focus-visible{outline:3px solid var(--point);outline-offset:1px}
.sep{color:var(--sub);font-weight:700}

.seg{display:flex;gap:6px}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label{
  flex:1; min-height:44px; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:9px 4px; cursor:pointer;
  background:#141A2E; border:1px solid rgba(255,255,255,.14); border-radius:12px;
  color:var(--sub);font-size:13px; font-weight:700;
}
/* 원본 목업(A안)의 성별·상대 선택칩은 노랑이다 — 크림은 양력/음력(.seg-sm) 전용값이었다.
   이 두 토글이 같은 .seg 규칙을 공유하면서 큰 칩까지 크림으로 물들었다 (2026-08-25 검수) */
.seg input:checked + label{background:#FFE14D;color:#151225;border-color:#FFE14D;box-shadow:0 0 16px rgba(255,225,77,.45)}
.seg input:focus-visible + label{outline:3px solid var(--point);outline-offset:1px}
.seg.seg-sm{gap:5px}
.seg-sm label{min-height:44px;padding:4px 11px;border-width:1px;border-radius:9px;font-size:11.5px;flex:0 0 auto}
.seg-sm input:checked + label{background:#F4EFEA;color:#0A0E1C;border-color:rgba(255,255,255,.14);box-shadow:none}

.relationship-primary,.relationship-secondary{display:grid;gap:6px}
/* 「선택 안 함」을 4번째 버튼으로 올렸다 (2026-08-29 꾸비 나안) — 밑줄 글씨 하나로는 켜진 게 안 보였다.
   기본은 아무것도 안 켜진 상태다. 지나가려면 눌러야 한다. */
.relationship-primary{grid-template-columns:repeat(2,minmax(0,1fr))}
.relationship-secondary{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:8px}
.relationship-secondary[hidden]{display:none}
.relationship-primary input,.relationship-secondary input{position:absolute;opacity:0;pointer-events:none}
.relationship-primary label,.relationship-secondary label{
  min-width:0;min-height:44px;padding:8px 5px;display:flex;align-items:center;justify-content:center;
  text-align:center;cursor:pointer;background:#141A2E;border:1px solid rgba(255,255,255,.14);
  border-radius:12px;color:var(--sub);font-size:13px;font-weight:700;line-height:1.25;white-space:normal;
}
.relationship-primary input:checked + label,.relationship-secondary input:checked + label{
  background:#FFE14D;color:#151225;border-color:#FFE14D;box-shadow:0 0 16px rgba(255,225,77,.45);
}
.relationship-primary input:focus-visible + label,.relationship-secondary input:focus-visible + label{
  outline:3px solid var(--point);outline-offset:1px;
}
/* 「선택 안 함」은 같은 크기지만 같은 무게로 보이면 안 된다 — 점선 + 켜져도 노랑 글씨까지만 */
.relationship-primary label.is-skip{border-style:dashed;font-weight:400}
.relationship-primary input:checked + label.is-skip{
  background:rgba(255,225,77,.1);color:var(--point);border-color:var(--point);border-style:solid;box-shadow:none;
}
.relationship-picker[aria-invalid="true"] .relationship-primary{outline:2px solid var(--point);outline-offset:3px;border-radius:12px}

.chk{min-height:44px;display:inline-flex;align-items:center;gap:6px;margin-top:3px;font-size:13px}
.chk input{width:17px;height:17px;accent-color:var(--point)}

/* 태어난 시간 — 12칸 그리드(.time/.hours/.tlegend)는 2026-08-29에 걷어냈다. 시:분 직접 입력이다.
   숫자칸은 .dates 를 그대로 쓰고, 뒤에 붙는 「시」·「분」만 여기서 정한다. */
.unit{color:var(--sub);font-weight:700;font-size:14px;flex:0 0 auto}
/* 「모름」은 오전·오후와 같은 크기지만 같은 무게로 보이면 안 된다 — 관계 칸 「선택 안 함」과 같은 문법 */
.seg-sm label[for="ampm-x"]{border-style:dashed}
.seg-sm #ampm-x:checked + label{background:rgba(255,225,77,.1);color:var(--point);border-color:var(--point);border-style:solid}
#time-input.off{opacity:.45}
#time-input.off input{cursor:not-allowed}
.ghost{display:block;width:100%;margin-top:6px;padding:8px;background:none;border:0;color:var(--sub);font-size:12.5px;text-decoration:underline;cursor:pointer}

/* 하단 고정 바 (2026-08-29) — 폼 마지막 칸이라 sticky 로 충분하다. position:fixed 를 쓰면
   결과 화면에서 따로 숨겨야 하고 키보드 위에 얹히는 문제가 생긴다.
   ⚠️ 안심 문구(.privacy)는 여기 넣지 않는다 — 바에 태웠더니 스크롤되는 본문과 겹쳐 읽혔다
   (2026-08-29 꾸비 지적). 바에는 버튼만 띄우고, 문구는 버튼 위 본문 자리로 되돌렸다. */
.cta-bar{
  position:sticky;bottom:0;z-index:5;
  margin:6px -16px -18px;padding:11px 16px calc(11px + env(safe-area-inset-bottom));
  border-radius:0 0 21px 21px;
  /* 반투명 페이드로 뒀더니 바 윗선에서 본문 글줄이 반쯤 비쳐 잘려 읽혔다 —
     불투명 + 윗선 한 줄로 바꿔 「여기부터 바」라는 게 분명해지게 했다 (2026-08-29) */
  background:#0E1426;border-top:1px solid rgba(255,255,255,.1);
  box-shadow:0 -10px 22px rgba(10,14,28,.55);
}
.cta{
  display:block;width:100%;margin-top:4px;padding:15px;cursor:pointer;
  background:linear-gradient(180deg,#FFE94D,#FFCB3D);color:#1B1730;border:0;border-radius:14px;
  box-shadow:0 0 0 1px rgba(255,225,77,.5),0 8px 26px rgba(255,203,61,.35);
  font-family:Gugi,sans-serif;font-size:16px;font-weight:700;transition:transform .15s ease;
}
.cta:active{transform:translateY(2px)}
/* CTA 위로 올렸다 — 안심 문구는 누르기 전에 읽혀야 한다 */
.privacy{font-size:11.5px;color:var(--sub);margin:10px 0;line-height:1.55;text-align:center}
/* 한글은 단어 안에서 끊기면 「익 / 명 저장」처럼 읽힌다 — keep-all 로 어절 단위로만 끊는다 */
.privacy{word-break:keep-all}
.privacy a{color:inherit}
.err{background:var(--card-bg);border:2.5px solid var(--point);color:var(--card-ink);border-radius:10px;padding:9px 11px;font-size:13px;font-weight:600;margin-bottom:9px}

/* ── ② 카드 ───────────────────────────────────────────── */
.banner{
  background:var(--hi);border:2.5px solid var(--ink);border-radius:12px;
  padding:var(--sp-4);font-size:13.5px;font-weight:600;margin-bottom:var(--sp-3);
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);flex-wrap:wrap;
}
.banner button{min-height:44px;background:var(--ink);color:var(--paper);border:0;border-radius:99px;padding:var(--sp-2) var(--sp-3);font-size:12.5px;font-weight:700;cursor:pointer}

.card-stage{container-type:inline-size;padding:2px 2px 0}
.card{
  --card-accent:var(--hi);position:relative;isolation:isolate;overflow:hidden;
  background:
    radial-gradient(circle at 72% 38%,color-mix(in srgb,var(--card-accent) 10%,transparent) 0,transparent 31%),
    radial-gradient(circle at 18% 76%,rgba(95,168,255,.06) 0,transparent 28%),
    var(--card-bg);
  border:2px solid rgba(255,255,255,.14);border-radius:20px;
  box-shadow:0 16px 38px rgba(2,5,16,.34),inset 0 0 0 1px rgba(255,225,77,.05);
  padding:var(--sp-5) var(--sp-4);
}
.card[data-pixel-canonical="true"]{padding:0;border:0;background:transparent;box-shadow:none;aspect-ratio:3/5;overflow:hidden}
.card[data-pixel-canonical="true"]::before{display:none}
.card-canvas{display:block;width:100%;height:100%;aspect-ratio:3/5}
.card-dom-copy{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.card-ilju-hotspot{position:absolute;z-index:2;display:block;min-height:44px;border-radius:3px;color:transparent;background:transparent}
.card-ilju-hotspot[hidden]{display:none}
.card-ilju-hotspot:focus-visible{outline:3px solid var(--hi);outline-offset:3px;background:rgba(255,225,77,.14)}
.card::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.55;
  background:
    radial-gradient(circle at 12% 18%,rgba(255,255,255,.9) 0 1px,transparent 1.5px),
    radial-gradient(circle at 78% 9%,rgba(255,255,255,.75) 0 1px,transparent 1.5px),
    radial-gradient(circle at 89% 32%,rgba(255,225,77,.9) 0 1.3px,transparent 2px),
    radial-gradient(circle at 34% 61%,rgba(255,255,255,.55) 0 1px,transparent 1.5px),
    radial-gradient(circle at 8% 87%,rgba(255,255,255,.65) 0 1px,transparent 1.5px);
}
.c-chip{font-family:Gugi,sans-serif;font-size:15px;margin-bottom:var(--sp-3);display:flex;align-items:center;gap:var(--sp-2);color:var(--card-ink)}
.c-chip b{width:9px;height:9px;border-radius:99px;display:inline-block;background:currentColor}
/* JS가 .c-chip 전체에 오행색을 얹는다(점 색용) — 글자까지 물들면 밝은 카드 위에서 대비가 무너진다.
   점만 오행색, 글자는 카드 잉크로 되돌린다 (2026-08-25 검수) */
.c-chip span{color:var(--card-ink)}
.c-char{
  width:120px;height:120px;margin:0 auto var(--sp-4);display:flex;align-items:center;justify-content:center;
  background:#EFEAE3;border:2px dashed #C9C1B7;border-radius:16px;
  color:#A79E93;font-size:12px;text-align:center;line-height:1.35;
}
/* 수식어 — Gugi 대신 Do Hyeon. 유형명(Black Han Sans, 포스터체)과 같은 「굵고 각진」 결을 공유하게
   맞췄다 — Gugi 그대로 두면 UI체(Pretendard)와도 포스터체(Black Han Sans)와도 안 어울렸다(2026-08-25 실측) */
.c-mod{font-family:"Do Hyeon",sans-serif;font-size:18px;color:var(--card-sub);letter-spacing:-.01em}
/* 앵커가 2단(성격어+밈형)이 되면서 최대 12자다. keep-all 이 없으면 「판 깔아주는 국민 / MC형」처럼
   낱말 한가운데서 끊긴다 — 한글은 기본이 음절 단위 줄바꿈이라 띄어쓰기를 안 지킨다 (2026-08-24 실측) */
.c-anchor{font-family:"Black Han Sans",sans-serif;font-size:40px;font-weight:400;line-height:1.15;
  letter-spacing:-.02em;margin-bottom:var(--sp-3);word-break:keep-all;color:var(--card-ink);
  text-shadow:0 0 16px rgba(255,225,77,.34),0 0 34px rgba(255,225,77,.16)}
.c-mod{word-break:keep-all}
.c-hash{font-family:"Griun Fromsol",cursive;font-weight:700;font-size:15px;color:var(--card-sub)}
.c-ilju-link{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;border-radius:3px}
.c-ilju-link:focus-visible{outline:2px solid var(--hi);outline-offset:3px}
.c-sync{margin-top:var(--sp-3);padding:11px 12px 10px;border:1px solid var(--card-line);border-radius:12px;background:rgba(255,255,255,.035);color:var(--card-ink)}
.c-sync-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-2);font-size:12px;font-weight:700}
.c-sync-head strong{font-family:Gugi,sans-serif;font-size:17px;font-weight:400;white-space:nowrap;color:var(--hi)}
.c-sync p{margin:4px 0 0;color:var(--card-sub);font-size:11.5px;line-height:1.45;word-break:keep-all}
.c-sync p:last-child{color:var(--card-ink)}
.c-div{height:1px;background:var(--card-line);margin:var(--sp-3) 0}
.c-punch{word-break:keep-all;font-family:"Griun Fromsol",cursive;font-weight:700;font-size:21px;line-height:1.5;color:var(--card-ink)}
.c-punch em{
  font-style:normal;color:#1B1730;background:var(--hi);border-radius:4px;padding:0 3px;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.c-foot{display:flex;justify-content:space-between;align-items:baseline;margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:1px solid var(--card-line)}
.c-brand{font-family:Gugi,sans-serif;font-size:15px;display:flex;align-items:center;gap:var(--sp-2);color:var(--card-ink)}
.c-url{font-size:11px;color:var(--card-sub)}

.acts{display:flex;gap:var(--sp-2);margin-top:var(--sp-4)}
.card-stage>.acts{position:relative;z-index:3;margin-top:calc(var(--sp-3) - 8.8889cqw)}
.acts button{
  flex:1;min-height:44px;padding:var(--sp-3) var(--sp-2);cursor:pointer;background:var(--surface);
  border:2.5px solid var(--ink);border-radius:12px;font-size:13.5px;font-weight:700;
  transition:transform .16s ease,background-color .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.acts button:first-child{background:var(--point);color:var(--point-fg)}
.acts button:active{transform:translateY(1px)}
@media (hover:hover) and (pointer:fine){
  .acts button:hover{border-color:var(--point);box-shadow:0 8px 22px rgba(2,5,16,.28)}
  .acts button:first-child:hover{box-shadow:0 8px 24px rgba(255,225,77,.2)}
}
.cta:focus-visible,.acts button:focus-visible,.banner button:focus-visible,.chbox button:focus-visible,
.assembly-error button:focus-visible{outline:3px solid var(--point);outline-offset:2px}
.cta:disabled,.acts button:disabled,.assembly-error button:disabled{opacity:.5;cursor:wait;transform:none}
.acts-end{margin-top:var(--sp-5)}
/* 카카오톡 채널 추가 블록 — 저장·공유 줄(.acts)과 **다른 모양**으로 둔다.
   같은 모양이면 세 번째 액션으로 읽혀 두 버튼 규격이 무너진다 (2026-08-24) */
.chbox{margin-top:var(--sp-5);padding:var(--sp-4);background:var(--surface);
  border:2.5px dashed color-mix(in srgb,var(--point) 40%,transparent);border-radius:14px;text-align:center}
.ch-copy{font-size:13.5px;line-height:1.6;margin-bottom:var(--sp-2);word-break:keep-all}
/* 카카오 브랜드 노랑(#FEE500)은 임의 변경 불가 — 대신 테두리를 버튼 글씨색과 맞춰
   다크 배경에서도 또렷하게 (var(--ink)가 night에서는 밝은색이라 노랑과 거의 안 갈렸다, 2026-08-25) */
.chbox button{width:100%;min-height:44px;padding:var(--sp-3) var(--sp-2);cursor:pointer;font-size:14px;font-weight:700;
  font-family:inherit;background:var(--kakao-bg);color:var(--kakao-fg);border:2.5px solid var(--kakao-fg);border-radius:12px}
.chbox button:active{transform:translateY(1px)}
.toast{margin-top:var(--sp-2);font-size:12.5px;color:var(--sub);background:var(--surface);border:1px dashed var(--line);border-radius:9px;padding:var(--sp-4)}

/* ── ③ 리포트 ─────────────────────────────────────────── */
.report{margin-top:var(--sp-7)}
.r-h{font-family:Gugi,sans-serif;font-size:19px;font-weight:400;margin:var(--sp-7) 0 var(--sp-4)}
.report .r-h:first-child{margin-top:0}
.pillars{width:100%;border-collapse:separate;border-spacing:5px 0;table-layout:fixed}
.pillars th{font-size:11.5px;color:var(--ink);font-weight:700;padding-bottom:8px;line-height:1.25}
.pillars th .term{display:block;font-size:9.5px;color:var(--sub);font-weight:400}
/* 칸을 오행 색으로 채운다 (2026-08-24). 글씨 색은 배경 밝기를 재서 app.js 가 넣는다 */
.pillars td{
  position:relative;z-index:1;
  background:var(--surface);border:2.5px solid var(--ink);border-radius:12px;
  text-align:center;padding:15px 2px 10px;
}
.pillars td .k{display:block;font-family:Gugi,sans-serif;font-size:23px;line-height:1.1}
.pillars td .h{display:block;font-size:11px}
/* ⛔ opacity 를 걸지 않는다 — 위계는 글자 크기로 이미 나뉘어 있고, 투명도는 대비만 깎는다 (2026-08-24) */
.pillars td .oh{display:block;font-size:10px;font-weight:700;margin-top:2px}
/* 십성 줄 — 육친 버튼이 위로 걸치므로 아래 여백을 준다 */
.pillars tr.sipseong td{border:0;background:none;padding:8px 0 22px;box-shadow:none}
.pillars tr.sipseong:nth-child(4) td{padding-top:18px}
.pillars tr.sipseong span{display:block;font-size:10.5px;font-weight:600;border-radius:99px;
  padding:2px 0;background:color-mix(in srgb,var(--surface) 84%,#000 16%);color:var(--sub);
  border:1px solid color-mix(in srgb,var(--sub) 34%,transparent)}
.pillars tr.sipseong span.ilgan{background:color-mix(in srgb,var(--surface) 84%,#000 16%);color:var(--sub)}
/* 육친 = 칸 테두리에 걸치는 버튼. 「나」·「배우자」만 색으로 띄운다 */
.yuk{position:absolute;top:-12px;left:50%;transform:translateX(-50%);z-index:3;
  font-family:Gugi,sans-serif;font-size:12.5px;font-weight:700;line-height:1;white-space:nowrap;
  padding:5px 9px 4px;border-radius:99px;
  background:#141A2E;color:#F0EAE2;
  border:2px solid #F0EAE2;box-shadow:0 2px 5px rgba(10,14,28,.45)}
.yuk.me{
  top:-20px;width:42px;height:42px;padding:0;display:block;
  background:transparent;color:var(--point-fg);border:0;border-radius:0;
  filter:none;box-shadow:none
}
.yuk.me svg{display:block;width:42px;height:42px;overflow:visible;filter:drop-shadow(0 2px 2px rgba(10,14,28,.55))}
/* 배우자는 오행 5색과 겹치지 않는 흰 뱃지로 두어 「나」 별과 역할을 나눈다. */
.yuk.love{background:#FFF;color:#1B1730;border-color:#1B1730}
/* 결과가 뜰 때 한 번 톡 튀어 오른다 — 「나」·「배우자」가 마지막이라 시선이 거기서 멈춘다 */
.yuk{animation:yukpop .34s cubic-bezier(.2,1.5,.45,1) backwards}
@keyframes yukpop{
  from{opacity:0;transform:translateX(-50%) translateY(7px) scale(.72)}
  to  {opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
}
@media (prefers-reduced-motion:reduce){ .yuk{animation:none} }
/* 일간 = 「나」. 여덟 글자 중 어디가 나인지 모르면 표가 그냥 한자 나열이 된다. */
.pillars td.me{box-shadow:0 0 0 2.5px var(--hi) inset}
.pillars-me{font-size:12px;color:var(--ink);margin-top:var(--sp-5);line-height:1.75}
.pillars td.empty{background:var(--surface);border-style:dashed;border-color:var(--dim-ink)}
.pillars td.empty .k{font-family:inherit;font-size:12px;color:var(--dim-ink);padding:9px 0}
.r-note{font-size:12px;color:var(--sub);margin-top:var(--sp-5);background:var(--surface);border-left:3px solid var(--hi);padding:var(--sp-4)}

/* 오행 균형 — 이야기는 극단(0개·3개+)에 있다. 그 두 줄만 표시를 다르게 한다 */
/* — 오행 오각형 (생·극 관계도) 2026-08-23 — 게이지 위에 온다 — */
.penta{display:block;width:100%;max-width:420px;height:auto;aspect-ratio:372 / 344;margin:0 auto}
.plegend{display:flex;gap:var(--sp-4);justify-content:center;flex-wrap:wrap;
  font-size:11.5px;color:var(--sub);margin:var(--sp-3) 0 0}
.plegend span{display:flex;align-items:center;gap:var(--sp-2)}
.plegend .pl{width:22px;height:0;border-top:3px solid var(--flow-active);flex:0 0 auto}
.plegend .pl.d{border-top-style:dashed;border-top-color:var(--clash-active)}
.plegend .pl.g{border-top-color:var(--flow-muted)}
.r-h4{font-family:Gugi,sans-serif;font-size:15px;font-weight:400;margin:var(--sp-6) 0 var(--sp-4);
  padding-top:var(--sp-4);border-top:2px dashed var(--line)}
.gauge{display:grid;gap:var(--sp-2)}
.report #manuscript-report:not([hidden]){margin-top:var(--sp-6)}
.g-lead{font-size:13px;color:var(--sub);line-height:1.6;margin:0 0 var(--sp-4)}
.g-row{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);border-radius:8px;min-width:0}
.g-name{width:48px;flex:0 0 auto;font-size:13px;font-weight:700;white-space:nowrap}
.g-pips{display:flex;gap:3px;flex:0 0 auto}
.g-pips i{width:13px;height:13px;border-radius:4px;border:2px solid var(--ink)}
.g-n{width:16px;flex:0 0 auto;text-align:center;font-size:13px}
.g-word{flex:1;font-size:12.5px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 원어 병기 — 쉬운 말이 본문, 원어는 옅게 뒤에 (2026-08-23) */
.g-term{font-style:normal;font-size:11px;opacity:.6;margin-left:4px}
.g-term::before{content:'('}
.g-term::after{content:')'}
.g-tag{flex:0 0 auto;font-size:11px;font-weight:700;padding:2px var(--sp-2);border-radius:99px;
       border:1.5px solid currentColor;white-space:nowrap}

/* 없는 것 = 이 사람 이야기의 열쇠. 제일 눈에 띄어야 한다 */
.g-row.zero{background:var(--zero-bg);box-shadow:inset 3px 0 0 var(--point)}
.g-row.zero .g-n,.g-row.zero .g-word{color:var(--point);font-weight:700}
.g-row.zero .g-tag{color:var(--point)}
.g-row.zero .g-pips i{border-color:var(--point);opacity:.45}

/* --many-bg 는 종이색과 1.02:1 이라 배경만으로는 안 보인다. 「없어」와 대칭되는 바를 준다 (2026-08-24) */
.g-row.many{background:var(--many-bg);box-shadow:inset 3px 0 0 var(--ink)}
.g-row.many .g-tag{color:var(--sub)}

.g-say{margin-top:var(--sp-4);padding:var(--sp-4);border-radius:9px;background:var(--surface);
       border:1.5px solid var(--ink);font-size:14px;line-height:1.65}

.r-body{font-size:15px;line-height:1.75}
.r-body p{margin-bottom:var(--sp-3)}
.r-body ul{margin:0 0 var(--sp-3) 2px;list-style:none}
.r-body li{padding-left:var(--sp-3);position:relative;margin-bottom:var(--sp-2)}
.r-body li::before{content:"·";position:absolute;left:2px;font-weight:700}
.r-body b{font-weight:700}
.r-body .quote{border-left:4px solid var(--hi);padding:var(--sp-2) 0 var(--sp-2) var(--sp-3);font-weight:700;margin-bottom:var(--sp-5)}
.r-body .todo{color:var(--sub);font-size:13.5px;background:var(--surface);border:1px dashed var(--line);border-radius:10px;padding:var(--sp-4);margin-bottom:var(--sp-5)}
.r-body .pick{background:var(--surface);border:2.5px solid var(--ink);border-radius:12px;padding:var(--sp-4);margin-bottom:var(--sp-5)}
.r-body .pick .t{font-family:Gugi,sans-serif;font-size:17px;display:block;margin-bottom:var(--sp-2)}

.disclaim{font-size:11.5px;color:var(--sub);line-height:1.5;margin-top:var(--sp-5);padding-top:var(--sp-3);border-top:1px solid var(--line)}
.disclaim.src{margin-top:var(--sp-2);padding-top:0;border:0}

@media (max-width:359px){
  #screen-input{padding-left:14px;padding-right:14px}
  .hd-title{font-size:26px}
  .hero-character-group{gap:7px;padding-right:7px}
  .hero-character-group figure{flex-basis:66px;width:66px;border-radius:10px}
  .dates input{font-size:17px;padding:9px 2px}
  .c-anchor{font-size:34px}
}

/* UI-A: 카드는 원래 폭을 지키고, 긴 리포트만 화면에 맞춰 넓어진다. */
@media (min-width:768px){
  .screen{padding-left:28px;padding-right:28px}
  #screen-input{max-width:600px;padding-top:52px}
  .hd{margin-bottom:26px}
  .hd-title{font-size:36px}
  .hd-what{font-size:15px}
  .hero-character-window{margin-top:24px}
  .hero-character-group{gap:10px;padding-right:10px}
  .hero-character-group figure{flex-basis:78px;width:78px;border-radius:16px}
  .input-panel{padding:26px 24px 22px}
  #screen-result{max-width:840px;padding-top:32px;padding-bottom:64px}
  #screen-result>.banner,#screen-result>.card-stage,
  #screen-result>.toast{max-width:420px;margin-left:auto;margin-right:auto}
  #screen-result>.report{max-width:720px;margin-left:auto;margin-right:auto}
  .card-stage{padding-top:6px}
  .report{margin-top:64px}
  .ms h2.h-part{font-size:24px}
  .ms h3.h-sub{font-size:18.5px}
}

@media (prefers-reduced-motion:reduce){
  .hero-character-window{overflow-x:auto;mask-image:none;-webkit-mask-image:none;scrollbar-width:none;touch-action:pan-x pan-y;overscroll-behavior-inline:contain}
  .hero-character-window::-webkit-scrollbar{display:none}
  .hero-character-track{animation:none;will-change:auto}
  .hero-character-group:nth-child(2){display:none}
}

@media (min-width:1100px){
  #screen-result{max-width:960px;padding-top:40px}
  #screen-result>.report{max-width:760px}
}

/* 월별 흐름 표 — 3부 */
.r-sub{font-family:Gugi,sans-serif;font-size:17px;margin:var(--sp-7) 0 var(--sp-4)}
.months{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed}
.months th{padding:4px 5px;font-size:11px;color:var(--sub);font-weight:400;text-align:left;border-bottom:1.5px solid var(--line)}
/* table-layout:fixed는 첫 행(헤더) 셀 폭으로 열 너비를 정한다 — td에만 폭을 줘서는 안 먹는다.
   th에도 같은 폭을 줘야 3열(한 글자 표시)이 4열(월 설명)의 폭을 뺏지 않는다 (2026-08-25 검수) */
.months th:nth-child(1){width:42px}
.months th:nth-child(2){width:62px}
.months th:nth-child(3){width:16px;text-align:center}
.r-lead{font-size:13px;color:var(--sub);margin:0 0 var(--sp-5);line-height:1.6}
.report #pillars-lead{padding-top:var(--sp-2);margin-bottom:var(--sp-6)}
.r-body .r-lead{margin-bottom:var(--sp-5)}
.report .mnote.legend{color:var(--sub);font-size:12px;margin-top:0;margin-bottom:var(--sp-5)}
.months td{padding:8px 5px;border-bottom:1px solid var(--line);vertical-align:middle}
/* 달·간지는 절대 줄바꿈하지 않는다 — 「기축」이 「기/축」으로 쪼개지면 못 읽는다 */
.months td:nth-child(1){width:42px;color:var(--sub);white-space:nowrap}
.months td:nth-child(2){width:62px;font-family:Gugi,sans-serif;white-space:nowrap;letter-spacing:-.03em}
/* 한자는 근거로만 두고 시선을 안 뺏는다 — 읽는 건 한글, 확인하는 건 한자 */
.months .mh{display:block;font-family:inherit;font-size:10px;color:var(--sub);letter-spacing:0}
.months td:nth-child(3){width:16px;text-align:center;font-size:11px;color:var(--point)}
.months td:nth-child(4){line-height:1.5}
.months tr.hit{background:var(--hi-soft)}
.months tr.hit td:nth-child(1){font-weight:700;color:var(--ink)}
.months tr.hit td:nth-child(2){box-shadow:inset 3px 0 0 var(--hi)}
.report .mnote{margin:var(--sp-5) 0 0;padding-left:var(--sp-4);font-size:13px;line-height:1.75;color:var(--ink)}
.mnote li{margin-bottom:2px}
.r-fine{font-size:11.5px;color:var(--sub);line-height:1.6;margin-top:var(--sp-5)}

/* — 캐릭터 그림 (2026-08-24 · 유형명 세션) ————————————————————
   그림이 붙으면 `.has-img` 가 걸린다. 점선 자리(위 .c-char)는 그림이 없을 때만 보인다.
   ⚠️ 작은 정사각형에 넣으면 얼굴이 손톱만 해진다 → 카드 폭 가까이 키운다.
   ⚠️ 아래쪽(몸)은 mask 로 서서히 지워 **글자 위로 안 겹치게** 한다.
      canvas(card.js)는 흰 패널을 덮어 같은 효과를 낸다 — 화면은 mask 가 더 간단하다. */
.c-char.has-img{
  position:relative;isolation:isolate;width:100%;height:330px;margin:0 0 -30px;
  overflow:hidden;background:none;border:0;border-radius:0;
}
.c-char.has-img::before{
  content:'';position:absolute;z-index:0;inset:5% 4% 1%;pointer-events:none;
  background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--card-accent) 24%,transparent) 0,transparent 67%);
  filter:blur(8px);
}
.c-char.has-img img{
  position:relative;z-index:1;width:100%;height:100%;object-fit:contain;object-position:top center;display:block;
  filter:drop-shadow(0 14px 20px rgba(0,0,0,.24));
  -webkit-mask-image:linear-gradient(to bottom,#000 78%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 78%,transparent 100%);
}
.c-mod,.c-anchor{position:relative}   /* 그림 위로 올라오게 */