/* 「내 수호신」 스모크 목업 v4 — "밤의 신당(神堂)"
 *
 * 컨셉(02_디자인스펙_v4 1장): 부적은 밤에 지니는 물건이고 우리 상품(잠금화면 부적)은
 * 어두운 화면 위에서 산다. UI 자체가 상품이 사는 환경이 되게 한다.
 *
 * frontend-design 원칙 적용:
 *  - 시그니처 1곳(명식표 = 부적 타일 벽)에만 과감. 나머지는 조용하게, 장식 금지.
 *  - AI 기본값 룩 3종(크림+세리프+테라코타 / 순흑+네온 / 신문 레이아웃) 회피:
 *    바탕은 순흑이 아닌 따뜻한 먹색(#131009), 포인트는 네온이 아닌 금박·주사.
 *  - 카드가 주인공: 주변 채도를 낮춰 부적·수호신 카드만 화려하게 남긴다.
 *
 * 접근성: 본문 대비 7:1+, 캡션 4.5:1+, 터치 44px, reduced-motion 존중.
 */

:root{
  /* --- 밤의 신당 토큰 (스펙 1장 표 그대로) --- */
  --ink:#131009;         /* 바탕 — 순흑 금지, 부적 카드와 이어지는 따뜻한 흑 */
  --ink-2:#1D1810;       /* 카드·패널 표면 */
  --ink-3:#272014;       /* 한 겹 더 밝은 면(입력·비활성) */
  --hanji:#F0E7D3;       /* 본문 텍스트(한지 아이보리) — ink 대비 14:1 */
  --hanji-dim:#A89E88;   /* 보조 텍스트 — ink 대비 7.3:1 */
  --gold:#C9A227;        /* 포인트·괘선·활성(금박) */
  --jusa:#B3402A;        /* 주의·도장·결제 CTA(주사 빨강) */

  /* 금테 hairline — 회색 실선 금지 */
  --line:rgba(201,162,39,.25);
  --line-strong:rgba(201,162,39,.55);

  /* --- 오행 5색 (톤 다운 오방색 — 원색 금지) --- */
  --el-mok:#3E7C59;
  --el-hwa:#B3402A;
  --el-to:#C9A227;
  --el-geum:#C9CCD1;
  --el-su:#2E4A6B;

  /* --- 상태 (영역 3단계) --- */
  --good:#6FB08A;        /* 좋음 — 어두운 바탕용으로 밝힌 목색 */
  --mid:#A89E88;         /* 보통 */
  --warn:#E0764F;        /* 주의 — 어두운 바탕에서 읽히는 주사 계열 */

  --radius:14px;
  --maxw:420px;
  --tap:44px;

  /* 타이포 */
  --font-display:"Gowun Batang","Apple SD Gothic Neo",serif;
  --font-body:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",
              "맑은 고딕",sans-serif;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

/* hidden 속성이 항상 이기게 한다.
 * .sheet{display:flex} 처럼 클래스에 display를 주면 HTML hidden이 무력화돼
 * "빈 테두리 박스"가 남는다(2026-08-22 실기기 검수 적발). 전역 리셋으로 차단. */
[hidden]{display:none !important}

html,body{margin:0;padding:0}

body{
  background:var(--ink);
  color:var(--hanji);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.7;
  -webkit-text-size-adjust:100%;
  /* 한지 결 — 이미지 파일 없이 미세 그라디언트 1겹만(과하면 뺀다) */
  background-image:
    radial-gradient(ellipse 120% 80% at 50% -10%, rgba(201,162,39,.07), transparent 60%),
    radial-gradient(ellipse 90% 60% at 50% 110%, rgba(179,64,42,.05), transparent 60%);
  background-attachment:fixed;
  min-height:100vh;
}

/* ---------- 화면 전환 ---------- */
.screen{display:none}
.screen.is-active{display:block;animation:fade .28s ease both}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* C-⑥ 100dvh 앞에 100vh 폴백(구형 사파리) + 상단 safe-area */
.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:calc(28px + env(safe-area-inset-top)) 20px calc(40px + env(safe-area-inset-bottom));
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:16px;
}

/* ---------- 타이포 ---------- */
.brand{
  margin:0;font-family:var(--font-display);font-size:13px;letter-spacing:.28em;
  color:var(--gold);text-align:center;font-weight:700;
}
.head{
  margin:4px 0 8px;font-family:var(--font-display);
  font-size:22px;line-height:1.5;font-weight:700;
  letter-spacing:-.01em;text-align:center;color:var(--hanji);
}
.head.sm{font-size:20px}
.eyebrow{
  margin:0;text-align:center;font-size:13px;letter-spacing:.14em;
  color:var(--hanji-dim);font-weight:600;
}
.name{margin:2px 0 0;font-family:var(--font-display);font-size:22px;font-weight:700;
  text-align:center;letter-spacing:-.01em;color:var(--hanji)}
.sub{margin:0;text-align:center;color:var(--hanji-dim);font-size:14.5px}
.oneline{margin:6px 0 0;text-align:center;font-size:16.5px;line-height:1.65;padding:0 4px}
.note{margin:2px 0 0;text-align:center;font-size:11.5px;color:#6e6553} /* 4.5:1 확보(#7d7361=4.32:1 미달이었음) */
.tiny{margin:0;font-size:12.5px;color:var(--hanji-dim);line-height:1.6}
.tiny.center{text-align:center}
.ok{margin:8px 0 0;text-align:center;color:var(--jusa);font-size:14px;font-weight:600}

/* ---------- 폼 ---------- */
form{display:flex;flex-direction:column;gap:8px}
.lbl{font-size:13px;font-weight:600;color:var(--hanji-dim)}
.lbl2{font-size:12.5px;font-weight:600;color:var(--hanji-dim);margin-top:8px}
.field{
  width:100%;
  font:inherit;
  font-size:17px;              /* iOS 자동 확대 방지(16px 이상) */
  padding:14px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--ink-2);
  color:var(--hanji);
  appearance:none;
  min-height:52px;
}
.field:focus-visible{outline:2px solid var(--jusa);outline-offset:1px;border-color:transparent}
.err{margin:0;color:var(--jusa);font-size:13px;font-weight:600}

.opt{
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--ink-2);padding:0 14px;
}
.opt summary{
  cursor:pointer;list-style:none;padding:13px 0;
  font-size:14px;color:var(--hanji-dim);font-weight:600;
  min-height:var(--tap);display:flex;align-items:center;
}
.opt summary::-webkit-details-marker{display:none}
.opt summary::after{content:"＋";margin-left:auto;color:var(--hanji-dim);font-weight:400}
.opt[open] summary::after{content:"－"}
.opt-body{padding:0 0 14px;display:flex;flex-direction:column;gap:4px}

/* ---------- 버튼 ---------- */
.btn{
  font:inherit;font-weight:700;font-size:16px;
  border-radius:var(--radius);
  padding:15px 16px;
  min-height:52px;
  cursor:pointer;
  border:1px solid transparent;
  width:100%;
  transition:transform .06s ease,opacity .15s ease,background-color .15s ease;
}
.btn:active{transform:scale(.985)}
.btn:focus-visible{outline:2px solid var(--jusa);outline-offset:2px}
.btn-main{background:var(--gold);color:#1A1408;font-weight:700}
.btn-ghost{background:transparent;color:var(--hanji-dim);border-color:var(--line)}
.btn[disabled]{opacity:.5;cursor:default}
.btn.sm{font-size:14px;padding:10px 12px;min-height:var(--tap)}
.row{display:flex;gap:8px}
.row .btn{flex:1}

/* ---------- S2 카드 리빌 ---------- */
.cardbox{
  display:flex;justify-content:center;align-items:center;
  margin:6px 0 2px;
  perspective:1000px;
}
.card-flip{
  position:relative;
  width:min(64vw,232px);
  aspect-ratio:675/1200;   /* 범용판 실물 비율 — cover 잘림 방지 */
  transform-style:preserve-3d;
  transition:transform 1s cubic-bezier(.22,1,.36,1);
}
.card-flip.flipped{transform:rotateY(180deg)}
.card-face{
  position:absolute;inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  border-radius:12px;
  overflow:hidden;
  /* 카드가 주인공 — 뒤로 은은한 금색 glow 1개만(장식 추가 금지) */
  box-shadow:
    0 0 28px rgba(201,162,39,.18),
    0 10px 28px rgba(0,0,0,.55);
}
.card-back{
  background:repeating-linear-gradient(45deg,var(--ink-2) 0 8px,var(--ink-3) 8px 16px);
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
}
.card-back .seal{
  font-family:var(--font-display);
  font-size:40px;color:#FFF6EA;background:var(--jusa);
  width:74px;height:74px;display:flex;align-items:center;justify-content:center;
  border-radius:8px;font-weight:700;
}
.card-front{transform:rotateY(180deg);background:var(--ink-2)}
.card-front img{width:100%;height:100%;object-fit:cover;display:block}

.reveal-late{
  display:flex;flex-direction:column;gap:10px;
  opacity:0;transition:opacity .45s ease;
  pointer-events:none;
}
.reveal-late.shown{opacity:1;pointer-events:auto}

.traits{
  list-style:none;margin:4px 0 0;padding:0;
  display:flex;flex-direction:column;gap:6px;
}
.traits li{
  background:var(--ink-2);border:1px solid var(--line);
  border-radius:10px;padding:11px 13px;font-size:14.5px;line-height:1.5;
}

/* =========================================================
 * S3 오늘의 흐름 — 시그니처: 부적이 펼쳐지듯 + 낙관
 * ======================================================= */
.flow-panel{
  position:relative;
  background:
    linear-gradient(180deg,#221B12,#1A150E) padding-box;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px 18px 18px;
  text-align:center;
  overflow:hidden;

  /* 펼침 연출: 세로로 열린다(위에서 아래로). 레이아웃은 처음부터 확보 = CLS 0 */
  transform:scaleY(.04);
  transform-origin:top center;
  opacity:.2;
  transition:transform .62s cubic-bezier(.16,1,.3,1),opacity .4s ease;
}
.flow-panel.unrolled{transform:scaleY(1);opacity:1}

/* 좌우 세로 괘선 — 부적 테두리 암시(장식 최소) */
.flow-panel::before,
.flow-panel::after{
  content:"";position:absolute;top:10px;bottom:10px;width:1px;
  background:var(--ink-3);
}
.flow-panel::before{left:9px}
.flow-panel::after{right:9px}

.score-line{
  display:flex;align-items:baseline;justify-content:center;gap:4px;
  position:relative;
}
.score{
  font-family:var(--font-display);
  font-size:64px;font-weight:700;line-height:1;
  letter-spacing:-.03em;color:var(--gold);
  font-variant-numeric:tabular-nums; /* 카운트업 중 폭 흔들림 방지 */
  text-shadow:0 0 24px rgba(201,162,39,.22);
}
.score-unit{font-size:18px;font-weight:700;color:var(--hanji-dim)}

/* 낙관(인장) — 점수 옆에 찍힌다 */
/* 전각 인장풍 — 주사색 사각 도장에 흰 글자, 안쪽 흰 테 1겹 */
.score-seal{
  position:absolute;right:6px;top:0;
  width:42px;height:42px;
  display:flex;align-items:center;justify-content:center;
  color:#FFF6EA;background:var(--jusa);
  border-radius:3px;
  box-shadow:inset 0 0 0 2px rgba(255,246,234,.85);
  font-family:var(--font-display);
  font-size:21px;font-weight:700;line-height:1;
  transform:rotate(-8deg) scale(1.5);
  opacity:0;
  transition:transform .28s cubic-bezier(.34,1.56,.64,1),opacity .2s ease;
}
.score-seal.stamped{transform:rotate(-8deg) scale(1);opacity:.94}

.ganji{
  margin:8px 0 0;font-size:13.5px;color:var(--hanji-dim);
  letter-spacing:.04em;font-weight:600;
}
.flow-summary{
  margin:10px 0 0;font-size:16px;line-height:1.6;
  padding:0 2px;
}

/* ---- 4영역 ---- */
.area-list{display:flex;flex-direction:column;gap:7px}
.area{
  border:1px solid var(--line);
  background:var(--ink-2);
  border-radius:12px;
  padding:11px 13px;
}
.area-head{display:flex;align-items:center;gap:7px}
.area-mark{font-size:14px;line-height:1}
.area-name{font-size:15px;font-weight:700}
.area-level{
  margin-left:auto;font-size:12.5px;font-weight:700;
  padding:2px 9px;border-radius:999px;
}
.area-text{margin:5px 0 0;font-size:13.5px;color:var(--hanji-dim);line-height:1.5}

.area-good .area-mark{color:var(--good)}
.area-good .area-level{color:var(--good);background:rgba(47,106,63,.10)}
.area-mid .area-mark{color:var(--mid)}
.area-mid .area-level{color:var(--mid);background:rgba(122,106,69,.10)}
.area-warn{border-color:rgba(179,36,20,.35)}
.area-warn .area-mark{color:var(--warn)}
.area-warn .area-level{color:var(--jusa);background:rgba(179,36,20,.10)}

/* ---- 왜 이 점수? ---- */
.why{
  border:1px solid var(--line);border-radius:12px;
  background:var(--ink-2);padding:0 14px;
}
.why summary{
  cursor:pointer;list-style:none;padding:12px 0;
  font-size:14px;font-weight:600;color:var(--hanji-dim);
  min-height:var(--tap);display:flex;align-items:center;
}
.why summary::-webkit-details-marker{display:none}
.why summary::after{content:"＋";margin-left:auto;font-weight:400}
.why[open] summary::after{content:"－"}
.why summary:focus-visible{outline:2px solid var(--jusa);outline-offset:2px}
.why-line{margin:0;padding:0 0 13px;font-size:13.5px;color:var(--hanji-dim);line-height:1.55}

/* ---------- S4 ---------- */
.cardbox.small .talisman{
  width:min(52vw,186px);
  aspect-ratio:675/1200;   /* 범용판 실물 비율 — cover 잘림 방지 */
  object-fit:cover;
  border-radius:12px;
  box-shadow:
    0 0 24px rgba(201,162,39,.16),
    0 8px 22px rgba(0,0,0,.5);
  display:block;
}

/* 진단 -> 처방 연결 */
.rx{
  border:1px solid rgba(179,36,20,.35);
  border-left:3px solid var(--jusa);
  background:rgba(179,36,20,.05);
  border-radius:12px;padding:13px 14px;
}
.rx[hidden]{display:none}
/* 자식이 없으면(렌더 실패·조건 미충족) 테두리만 남지 않게 */
.rx:empty,.prose:empty,.chips:empty,.el-legend:empty{display:none}
.rx-copy{margin:0;font-size:14.5px;font-weight:700;line-height:1.5}
.rx-target{margin:4px 0 0;font-size:12.5px;color:var(--hanji-dim)}
.rx-target span{font-weight:700;color:var(--jusa)}

.offer{
  border:1px solid var(--line);background:var(--ink-2);
  border-radius:var(--radius);padding:16px;
  display:flex;flex-direction:column;gap:8px;margin-top:6px;
}
.offer-title{margin:0;font-size:16px;font-weight:700}
.offer-desc{margin:0;font-size:13.5px;color:var(--hanji-dim);line-height:1.55}

.shelf{margin-top:12px}
.shelf-title{margin:0 0 8px;font-size:14.5px;font-weight:700;color:var(--hanji-dim)}
.shelf-row{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:6px}
.shelf-item{
  position:relative;
  border:1px solid var(--line);background:var(--ink-2);
  border-radius:10px;padding:12px 4px;text-align:center;
  font-size:13px;font-weight:600;color:var(--hanji-dim);
  min-height:var(--tap);
}
.shelf-icon{display:block;font-size:17px;margin-bottom:2px}
.shelf-item.is-rx{
  border-color:var(--jusa);background:rgba(179,36,20,.06);color:var(--jusa);
}
.shelf-badge{
  position:absolute;top:-7px;left:50%;transform:translateX(-50%);
  background:var(--jusa);color:var(--hanji);
  font-size:10px;font-weight:700;line-height:1;
  padding:3px 6px;border-radius:999px;letter-spacing:.02em;
}

/* ---------- S5 ---------- */
.prep{
  display:flex;flex-direction:column;gap:12px;text-align:center;
  border:1px solid var(--line);background:var(--ink-2);
  border-radius:var(--radius);padding:26px 20px;
}

/* ---------- 개발자 패널 ---------- */
#devDot{
  position:fixed;right:0;bottom:0;
  width:var(--tap);height:var(--tap);
  background:transparent;border:0;padding:0;
  opacity:0;cursor:default;z-index:50;
}
#devPanel{
  position:fixed;inset:0;background:rgba(30,24,12,.55);
  z-index:60;display:flex;align-items:flex-end;justify-content:center;
}
#devPanel[hidden]{display:none}
.dev-inner{
  background:var(--ink);width:100%;max-width:520px;
  border-radius:16px 16px 0 0;padding:16px;
  display:flex;flex-direction:column;gap:8px;
  max-height:82vh;
  max-height:82dvh;
}
.dev-head{margin:0;font-size:12px;letter-spacing:.18em;font-weight:700;color:var(--hanji-dim)}
#devJson{
  width:100%;
  height:44vh;
  height:44dvh;
  font-family:ui-monospace,Consolas,"Courier New",monospace;
  font-size:11.5px;line-height:1.45;
  border:1px solid var(--line);border-radius:10px;padding:10px;
  background:var(--ink-2);color:var(--hanji);resize:none;
}

/* ---------- 데스크톱 ---------- */
@media (min-width:600px){
  .head{font-size:30px}
  .wrap{padding-top:calc(40px + env(safe-area-inset-top));padding-bottom:48px}
}

/* ---------- 접근성: 모션 최소화 존중 ---------- */
@media (prefers-reduced-motion:reduce){
  .card-flip,.reveal-late,.flow-panel,.score-seal{transition-duration:.01ms}
  .screen.is-active{animation:none}
  .flow-panel{transform:none;opacity:1}
  .score-seal{transform:rotate(-8deg) scale(1);opacity:.94}
}

/* =========================================================
 * v3 — 프로필 · 휠 피커 · 사주 분석
 * 기존 괴황지/주사 토큰을 그대로 쓴다(새 색 추가 없음, 오행 5색만 신설).
 * ======================================================= */

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- S0 프로필 목록 ---------- */
.profile-list{display:flex;flex-direction:column;gap:8px}
.profile-row{display:flex;gap:8px;align-items:stretch}
.profile-pick{
  flex:1;display:flex;flex-direction:column;gap:3px;text-align:left;
  font:inherit;cursor:pointer;
  background:var(--ink-2);border:1px solid var(--line);border-radius:12px;
  padding:13px 14px;min-height:var(--tap);color:var(--hanji);
}
.profile-pick:focus-visible,.profile-del:focus-visible{outline:2px solid var(--jusa);outline-offset:2px}
.profile-name{font-size:16px;font-weight:700}
.profile-meta{font-size:12.5px;color:var(--hanji-dim)}
.profile-del{
  font:inherit;font-size:12.5px;cursor:pointer;color:var(--hanji-dim);
  background:transparent;border:1px solid var(--line);border-radius:12px;
  padding:0 12px;min-width:var(--tap);min-height:var(--tap);
}

/* ---------- 세그먼트 버튼(달력·성별) ---------- */
.seg-set{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.seg-set .lbl{padding:0}
.seg{display:flex;gap:6px}
.seg-btn{
  flex:1;font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;
  background:var(--ink-2);color:var(--hanji-dim);
  border:1px solid var(--line);border-radius:12px;
  padding:12px 6px;min-height:var(--tap);
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.seg-btn.is-on{background:var(--gold);color:#1A1408;border-color:var(--gold)}
.seg-btn:focus-visible{outline:2px solid var(--jusa);outline-offset:2px}

/* ---------- 피커 열기 버튼 ---------- */
.picker-open{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  width:100%;font:inherit;font-size:17px;text-align:left;cursor:pointer;
  background:var(--ink-2);color:var(--hanji);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:14px;min-height:52px;
}
.picker-open:focus-visible{outline:2px solid var(--jusa);outline-offset:1px}
.picker-caret{color:var(--hanji-dim);font-size:13px}

/* ---------- 바텀 시트(피커 공통) ---------- */
.sheet{
  position:fixed;inset:0;background:rgba(30,24,12,.5);
  z-index:70;display:flex;align-items:flex-end;justify-content:center;
}
.sheet[hidden]{display:none}
.sheet-inner{
  background:var(--ink);width:100%;max-width:var(--maxw);
  border-radius:18px 18px 0 0;
  padding:8px 16px calc(16px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:8px;
  max-height:82vh;max-height:82dvh;
}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 0}
.sheet-title{margin:0;font-size:15px;font-weight:700}
.sheet-btn{
  font:inherit;font-size:15px;cursor:pointer;background:transparent;border:0;
  color:var(--hanji-dim);padding:10px 6px;min-height:var(--tap);min-width:60px;
}
.sheet-btn.is-primary{color:var(--jusa);font-weight:700}
.sheet-btn.is-ghost{visibility:hidden}
.sheet-btn:focus-visible{outline:2px solid var(--jusa);outline-offset:2px;border-radius:8px}

/* ---------- 3열 휠 ---------- */
.wheels{position:relative;display:flex;gap:6px;height:200px;overflow:hidden}
.wheel{
  flex:1;overflow-y:auto;scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  text-align:center;position:relative;z-index:2;
  /* 스냅 기준선을 중앙띠(top:80px, 높이40)에 맞춘다.
   * scroll-padding이 없으면 브라우저는 스크롤포트 '위쪽'을 기준으로 스냅해
   * 첫 항목이 중앙까지 내려오지 못한다(1월·1일 선택 불가 결함). */
  scroll-padding-top:80px;
  scroll-padding-bottom:80px;
}
.wheel::-webkit-scrollbar{display:none}
.wheel:focus-visible{outline:2px solid var(--jusa);outline-offset:-2px;border-radius:10px}
/* 첫/끝 항목이 중앙띠까지 스크롤될 수 있게 하는 스페이서.
 * 높이 = (컨테이너 200 - 항목 40) / 2 = 80. 스냅 대상에서 제외한다. */
.wheel-pad{height:80px;scroll-snap-align:none}
.wheel-item{
  height:40px;line-height:40px;scroll-snap-align:center;
  font-size:16px;color:var(--hanji-dim);cursor:pointer;
  transition:color .12s ease,font-weight .12s ease;
}
.wheel-item.is-sel{color:var(--gold);font-weight:700;font-size:17px}
/* 가운데 선택 띠 */
.wheel-mask{
  position:absolute;left:0;right:0;top:80px;height:40px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:rgba(179,36,20,.05);
  pointer-events:none;z-index:1;
}

/* ---------- 시진 목록 ---------- */
.hour-list{overflow-y:auto;display:flex;flex-direction:column;gap:5px;padding-bottom:4px}
.hour-item{
  display:flex;align-items:center;gap:10px;width:100%;
  font:inherit;text-align:left;cursor:pointer;
  background:var(--ink-2);color:var(--hanji);
  border:1px solid var(--line);border-radius:11px;
  padding:12px 14px;min-height:var(--tap);
}
.hour-item.is-on{border-color:var(--jusa);background:rgba(179,36,20,.06)}
.hour-item:focus-visible{outline:2px solid var(--jusa);outline-offset:2px}
.hour-name{font-size:15px;font-weight:700}
.hour-range{margin-left:auto;font-size:12.5px;color:var(--hanji-dim)}

/* ---------- SA 사주 분석 ---------- */
.saju-title{margin:2px 0 0;font-family:var(--font-display);text-align:center;
  font-size:22px;font-weight:700;letter-spacing:-.01em;color:var(--hanji)}
.chips{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:2px}
.chip{
  font-size:12.5px;font-weight:700;color:var(--hanji-dim);
  background:var(--ink-2);border:1px solid var(--line);
  border-radius:999px;padding:5px 11px;
}
.sec-title{margin:14px 0 6px;font-size:15px;font-weight:700}
.sec-sub{font-size:12px;font-weight:400;color:var(--hanji-dim)}

/* =========================================================
 * 시그니처 — 명식표 = 부적 타일 벽 (스펙 1장: 여기에만 과감)
 * 4기둥 8글자를 오방색 대형 타일로. 타일 하나하나가 미니 부적처럼 보이게
 * 금테 hairline + 내부 미세 그림자 + 한자 34px+. "본인" 타일만 금박 강조.
 * ======================================================= */
.pillar-wrap{margin-top:8px}
.pillar-table{
  width:100%;border-collapse:separate;border-spacing:6px;table-layout:fixed;
}
.pillar-table th{
  font-family:var(--font-display);
  font-size:12.5px;font-weight:400;color:var(--hanji-dim);
  padding-bottom:4px;letter-spacing:.08em;
}
.cell{
  position:relative;
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:8px;
  padding:11px 2px 9px;
  text-align:center;vertical-align:middle;
  /* 미니 부적 질감: 안쪽 금빛 테 + 아래로 떨어지는 그림자 */
  box-shadow:
    inset 0 0 0 1px rgba(201,162,39,.08),
    inset 0 12px 20px -12px rgba(201,162,39,.18),
    0 2px 6px rgba(0,0,0,.35);
}
/* 타일 상하에 부적 괘선 느낌의 짧은 금선 1쌍 */
.cell::before,.cell::after{
  content:"";position:absolute;left:26%;right:26%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,162,39,.35),transparent);
}
.cell::before{top:4px}
.cell::after{bottom:4px}

.cell-in{display:flex;flex-direction:column;align-items:center;gap:2px}
.cell-hanja{
  font-family:var(--font-display);
  font-size:34px;font-weight:700;line-height:1.1;
  text-shadow:0 1px 0 rgba(0,0,0,.5);
}
.cell-kor{font-size:12px;color:var(--hanji-dim);letter-spacing:.02em}
.cell-god{
  font-size:11px;font-weight:700;color:var(--gold);
  margin-top:3px;letter-spacing:.04em;
}
.cell-unknown{
  color:var(--hanji-dim);font-size:13px;background:var(--ink-2);
  box-shadow:none;
}
.cell-unknown::before,.cell-unknown::after{display:none}

/* 본인(일간) 타일 — 금박 테로 유일하게 강조 */
.cell-self{
  border-color:var(--gold);
  box-shadow:
    inset 0 0 0 1px rgba(201,162,39,.35),
    inset 0 14px 24px -12px rgba(201,162,39,.30),
    0 0 0 1px rgba(201,162,39,.35),
    0 3px 10px rgba(0,0,0,.45);
}
.cell-self .cell-god{color:var(--jusa)}

/* 오행별 한자 색 — 타일 벽의 오방색 */
.cell.el-목 .cell-hanja{color:var(--el-mok)}
.cell.el-화 .cell-hanja{color:var(--el-hwa)}
.cell.el-토 .cell-hanja{color:var(--el-to)}
.cell.el-금 .cell-hanja{color:var(--el-geum)}
.cell.el-수 .cell-hanja{color:#7FA3C9}   /* 수 원색은 어두워 가독 불가 — 밝힌 남색 */

/* 좁은 화면(≤360px)에서도 4열이 한 줄에 들어가게 한자만 한 단계 줄인다.
 * table-layout:fixed라 줄바꿈은 없지만 글자가 타일을 넘지 않게 하는 안전장치. */
@media (max-width:360px){
  .pillar-table{border-spacing:4px}
  .cell{padding:9px 1px 8px}
  .cell-hanja{font-size:30px}
  .cell-god{font-size:10.5px}
}

/* 오행 5색 유틸 (텍스트) — 어두운 바탕에서 읽히도록 밝힌 톤 */
.el-목{color:var(--el-mok)}
.el-화{color:#D9694E}
.el-토{color:var(--el-to)}
.el-금{color:var(--el-geum)}
.el-수{color:#7FA3C9}

/* =========================================================
 * 오행 오각 다이어그램 (인라인 SVG 자체 제작 — 라이브러리 금지)
 * 상생 = 금색 실선 / 상극 = 주사색 점선. 정점에 오행 원 + 개수 뱃지.
 * ======================================================= */
.el-penta{
  display:block;width:100%;max-width:280px;margin:4px auto 0;
  overflow:visible;
}
.penta-line-saeng{stroke:var(--gold);stroke-width:1.1;opacity:.5;fill:none}
.penta-line-geuk{stroke:var(--jusa);stroke-width:1;opacity:.42;fill:none;stroke-dasharray:3 3}
.penta-node{stroke:rgba(201,162,39,.45);stroke-width:1}
.penta-count{
  font-family:var(--font-display);font-size:13px;font-weight:700;
  text-anchor:middle;dominant-baseline:central;
}
.penta-label{
  font-size:10.5px;text-anchor:middle;fill:var(--hanji-dim);
}
/* 개수 0 정점 — 채움 없이 점선 윤곽만. 흐리되 배경에 묻히지 않는 선까지만 낮춘다. */
.penta-node.is-zero{opacity:.75;stroke-width:1.2}
.penta-count.is-zero-num{font-weight:400;opacity:.9}
.el-legend{
  display:flex;justify-content:center;gap:14px;margin-top:6px;
  font-size:11.5px;color:var(--hanji-dim);
}
.el-legend span{display:inline-flex;align-items:center;gap:5px}
.el-legend i{display:inline-block;width:16px;height:0;border-top:1px solid;font-style:normal}
.el-legend .lg-saeng i{border-color:var(--gold)}
.el-legend .lg-geuk i{border-top-style:dashed;border-color:var(--jusa)}

/* 선천 성격 프로즈 */
.prose{
  margin:0;font-size:15px;line-height:1.7;
  background:var(--ink-2);border:1px solid var(--line);
  border-radius:12px;padding:14px 15px;
}

@media (prefers-reduced-motion:reduce){
  .el-fill{transition-duration:.01ms}
  .wheel{scroll-behavior:auto}
}

/* =========================================================
 * v4 — "오늘 채울 기운" 카드 (간이 용신 → 부적 연동, 재구매 엔진)
 * 카드가 주인공: 작은 부적 이미지를 왼쪽에 세우고 설명은 조용하게.
 * ======================================================= */
.need-card{
  display:flex;gap:13px;align-items:stretch;
  background:linear-gradient(180deg,#221B12,#191309);
  border:1px solid var(--line-strong);
  border-radius:14px;padding:13px;
}
.need-card[hidden]{display:none}
.need-art{flex:none;width:74px;display:flex;align-items:center}
.need-art img{
  width:100%;aspect-ratio:675/1200;object-fit:cover;
  border-radius:7px;display:block;
  box-shadow:0 0 18px rgba(201,162,39,.20),0 4px 12px rgba(0,0,0,.5);
}
.need-body{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.need-eyebrow{
  margin:0;font-size:11.5px;letter-spacing:.14em;color:var(--gold);font-weight:700;
}
.need-el{
  margin:0;font-family:var(--font-display);font-size:17px;font-weight:700;
  color:var(--hanji);line-height:1.35;
}
.need-why{
  margin:2px 0 6px;font-size:12.5px;line-height:1.6;color:var(--hanji-dim);
}
/* 결제 CTA = 주사색(스펙: 주사는 주의·도장·결제 CTA) */
.btn-cta{
  background:var(--jusa);color:#FFF6EA;border-color:var(--jusa);
  align-self:flex-start;width:auto;padding:10px 14px;
}
.btn-cta:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

@media (max-width:360px){
  .need-card{gap:10px;padding:11px}
  .need-art{width:62px}
}

/* =========================================================
 * v5 — 홈 허브(SH) · 영역 상세(SD) · 주간 그래프 · 행운
 * v4 토큰만 사용(새 토큰 신설 금지). 홈은 허브지만 절제 — 시그니처는 여전히 카드/타일.
 * ======================================================= */

/* 홈은 세로로 길어 가운데 정렬이 어색하다 — 위에서부터 쌓는다 */
.wrap-home{justify-content:flex-start;gap:12px}

.home-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.home-owner{margin:0;font-size:13px;color:var(--hanji-dim)}
.home-owner span{color:var(--hanji);font-weight:700}

/* 1. 오늘 점수 요약 */
.home-score{
  position:relative;display:flex;align-items:center;gap:12px;width:100%;
  font:inherit;text-align:left;cursor:pointer;
  background:linear-gradient(180deg,#221B12,#1A150E);
  border:1px solid var(--line-strong);border-radius:14px;
  padding:14px 15px;min-height:var(--tap);color:var(--hanji);
}
.home-score:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.home-score-left{display:flex;align-items:baseline;gap:2px;flex:none}
.home-score-num{
  font-family:var(--font-display);font-size:38px;font-weight:700;line-height:1;
  color:var(--gold);font-variant-numeric:tabular-nums;
}
.home-score-unit{font-size:13px;color:var(--hanji-dim)}
.home-score-right{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.home-ganji{font-size:12px;color:var(--hanji-dim);letter-spacing:.03em}
.home-line{font-size:13.5px;line-height:1.5;color:var(--hanji)}
.home-seal{
  position:absolute;right:12px;top:12px;
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  background:var(--jusa);color:#FFF6EA;border-radius:3px;
  box-shadow:inset 0 0 0 1.5px rgba(255,246,234,.85);
  font-family:var(--font-display);font-size:14px;font-weight:700;
  transform:rotate(-6deg);
}

/* 2. 수호신 미니 카드 */
.home-guard{
  display:flex;gap:12px;align-items:center;width:100%;
  font:inherit;text-align:left;cursor:pointer;
  background:var(--ink-2);border:1px solid var(--line);border-radius:14px;
  padding:11px 13px;min-height:var(--tap);color:var(--hanji);
}
.home-guard:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.home-guard-art{flex:none;width:46px}
.home-guard-art img{
  width:100%;aspect-ratio:675/1200;object-fit:cover;border-radius:5px;display:block;
  box-shadow:0 0 12px rgba(201,162,39,.18);
}
.home-guard-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.home-guard-eyebrow{font-size:11px;letter-spacing:.14em;color:var(--gold);font-weight:700}
.home-guard-name{font-family:var(--font-display);font-size:16px;font-weight:700}
.home-guard-sub{font-size:11.5px;color:var(--hanji-dim)}

/* 3. 세부 운세 4카드 (2x2) */
.area-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.area-card{
  display:flex;flex-direction:column;gap:6px;width:100%;
  font:inherit;text-align:left;cursor:pointer;
  background:var(--ink-2);border:1px solid var(--line);border-radius:12px;
  padding:12px;min-height:76px;color:var(--hanji);
}
.area-card:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.area-card-head{display:flex;align-items:center;gap:6px}
.area-card-name{font-size:14.5px;font-weight:700}
.area-card-q{font-size:12px;line-height:1.5;color:var(--hanji-dim)}
.area-card.area-warn{border-color:rgba(179,64,42,.45)}

/* 4. 이번 주 흐름 */
.week-wrap{
  background:var(--ink-2);border:1px solid var(--line);
  border-radius:12px;padding:10px 8px 6px;
}
.week-svg{display:block;width:100%;overflow:visible}
.week-base{stroke:rgba(201,162,39,.18);stroke-width:1;stroke-dasharray:2 3}
.week-line{fill:none;stroke:var(--gold);stroke-width:1.6;opacity:.75}
.week-dot{fill:var(--ink);stroke:var(--gold);stroke-width:1.6}
.week-dot.is-today{fill:var(--gold);stroke:#FFF6EA;stroke-width:1.4}
.week-dot.wk-흉{stroke:var(--jusa)}
.week-hit{fill:transparent;cursor:pointer}
.week-label{font-size:9.5px;text-anchor:middle;fill:var(--hanji-dim)}
.week-label.is-today{fill:var(--gold);font-weight:700}
.week-tip{
  margin:6px 4px 2px;font-size:12px;color:var(--hanji);
  background:rgba(201,162,39,.10);border-radius:7px;padding:7px 9px;
}

/* 5. 오늘의 행운 */
.luck-card{
  background:var(--ink-2);border:1px solid var(--line);
  border-radius:12px;padding:13px 14px;
}
.luck-title{
  margin:0 0 8px;font-family:var(--font-display);
  font-size:14px;font-weight:700;color:var(--gold);
}
.luck-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px}
.luck-item{display:flex;align-items:baseline;gap:7px;font-size:13px}
.luck-item i{font-style:normal;color:var(--hanji-dim);font-size:11.5px;min-width:32px}
.luck-item b{font-weight:700;color:var(--hanji)}
.luck-note{margin:9px 0 4px;font-size:12.5px;line-height:1.6;color:var(--hanji-dim)}

/* 6. 부적 진열대 */
.shop-row{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.shop-item{
  /* position:relative는 .tier-mark(절대배치)의 기준점이다.
   * 없으면 문양이 뷰포트 우상단으로 새어 정체불명 한자가 떠 보인다(2026-08-23 실측 적발).
   * 같은 뱃지를 쓰는 .shelf-item도 동일하게 기준점을 갖는다. */
  position:relative;
  display:flex;flex-direction:column;gap:4px;align-items:center;
  font:inherit;cursor:pointer;padding:6px 3px;
  background:transparent;border:1px solid transparent;border-radius:9px;
  color:var(--hanji-dim);
}
.shop-item img{
  width:100%;aspect-ratio:675/1200;object-fit:cover;border-radius:4px;display:block;
  opacity:.82;transition:opacity .15s ease;
}
.shop-item.is-today{border-color:var(--gold);color:var(--gold)}
.shop-item.is-today img{opacity:1;box-shadow:0 0 12px rgba(201,162,39,.28)}
.shop-item:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.shop-cap{font-size:10.5px;font-weight:700}

/* 홈 복귀 버튼 */
/* 홈 복귀 버튼 — 보이는 알약 크기(36px)는 유지하되 터치 타깃은 44px 이상 확보한다.
 * (v4 스펙 5항 · 2026-08-22 실측 43x36px 미달 적발)
 * position:relative + ::before 히트영역 = 주간 그래프 week-hit와 같은 방식. */
.btn-home{
  position:relative;
  align-self:flex-start;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;
  background:transparent;color:var(--gold);
  border:1px solid var(--line);border-radius:999px;
  padding:0 14px;
  min-width:var(--tap);
  min-height:36px;
}
/* 시각 크기를 키우지 않고 눌리는 영역만 상하좌우로 넓혀 44px을 만든다 */
.btn-home::before{
  content:"";position:absolute;left:0;right:0;
  top:50%;transform:translateY(-50%);
  height:var(--tap);
  min-height:var(--tap);
}
.btn-home[hidden]{display:none}
.btn-home:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* SD 등급 게이지 */
.gauge-svg{display:block;width:100%;max-width:280px;margin:2px auto 0;overflow:visible}
.gauge-seg{fill:var(--ink-2);stroke:var(--line);stroke-width:1}
.gauge-seg.is-on{fill:rgba(201,162,39,.18);stroke:var(--gold);stroke-width:1.4}
.gauge-label{font-size:10.5px;text-anchor:middle;fill:var(--hanji-dim)}
.gauge-label.is-on{fill:var(--gold);font-weight:700}
/* 주의 등급은 주사 계열로 — 홈 카드 배지(주의=주사)와 색 의미를 맞춘다.
 * 라벨은 순수 주사(#B3402A)가 어두운 바탕에서 3.33:1이라 미달이므로,
 * 캡션 4.5:1을 넘는 밝은 주사 계열(--warn #E0764F 6.22:1)을 쓴다. */
.gauge-seg.is-on.is-warn{fill:rgba(179,64,42,.20);stroke:var(--jusa)}
.gauge-label.is-on.is-warn{fill:var(--warn)}

@media (max-width:360px){
  .area-card{padding:10px;min-height:70px}
  .home-score-num{font-size:33px}
  .shop-row{gap:4px}
}

/* =========================================================
 * v6 — 가호 미리보기 · 영역 점수 (v4 토큰만 사용)
 * ★ 판매 표면에 숫자 인과 표기 없음 — 관계 등급과 이유만.
 * ======================================================= */

/* 오늘의 가호 줄 (S4 · 노출군 전용) */
.blessing{
  background:linear-gradient(180deg,#221B12,#191309);
  border:1px solid var(--line-strong);
  border-radius:12px;padding:12px 14px;
}
.blessing[hidden]{display:none}
.blessing-head{margin:0;display:flex;align-items:center;gap:9px}
.blessing-mark{
  flex:none;width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  background:var(--jusa);color:#FFF6EA;border-radius:3px;
  box-shadow:inset 0 0 0 1.5px rgba(255,246,234,.85);
  font-family:var(--font-display);font-size:15px;font-weight:700;line-height:1;
  transform:rotate(-5deg);
}
.blessing-title{font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--hanji)}
.blessing-title span{color:var(--gold)}
.blessing-why{margin:8px 0 0;font-size:12.5px;line-height:1.6;color:var(--hanji-dim)}
.blessing-note[hidden]{display:none}

/* 진열대 관계 문양 뱃지 — 숫자 없음 */
.tier-mark{
  position:absolute;top:-6px;right:-4px;
  width:19px;height:19px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:11px;font-weight:700;line-height:1;
  border-radius:3px;
  background:var(--ink-3);color:var(--hanji-dim);
  border:1px solid var(--line);
}
.tier-mark.tier-dae{color:var(--gold);border-color:rgba(201,162,39,.45)}
/* 오늘 大 1개만 미세 강조 — 과한 연출 금지(게임화 방지) */
.tier-mark.is-today-dae{
  background:rgba(201,162,39,.16);
  border-color:var(--gold);
  box-shadow:0 0 8px rgba(201,162,39,.28);
}

/* 영역 점수(양군 공통) */
.area-card-score{
  margin-left:auto;
  font-family:var(--font-display);font-size:15px;font-weight:700;
  color:var(--hanji);font-variant-numeric:tabular-nums;
}
.area-card-head .area-level{margin-left:0}
.gauge-score{
  margin:4px 0 0;text-align:center;
  font-family:var(--font-display);font-size:19px;font-weight:700;
  color:var(--gold);font-variant-numeric:tabular-nums;
}

/* =========================================================
 * v7 — S0 환영 모드 · 탭 어포던스 (v4 토큰만)
 * ======================================================= */

#welcomeBox[hidden],#s0Empty[hidden],.profile-list[hidden],.tap-hint[hidden]{display:none}

.welcome-card{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  background:linear-gradient(180deg,#221B12,#191309);
  border:1px solid var(--line-strong);
  border-radius:16px;padding:20px 18px 18px;
}
.welcome-art{width:min(42vw,132px)}
.welcome-art img{
  width:100%;aspect-ratio:675/1200;object-fit:cover;
  border-radius:9px;display:block;
  box-shadow:0 0 26px rgba(201,162,39,.20),0 8px 22px rgba(0,0,0,.5);
}
.welcome-greet{
  margin:6px 0 0;text-align:center;font-size:15px;line-height:1.6;color:var(--hanji);
}
.welcome-name{
  margin:0;text-align:center;font-family:var(--font-display);
  font-size:19px;font-weight:700;color:var(--gold);
}
.welcome-teaser{
  margin:2px 0 0;display:flex;align-items:center;gap:7px;
  font-size:12.5px;color:var(--hanji-dim);
}
.welcome-seal{
  width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--jusa);color:#FFF6EA;border-radius:3px;
  box-shadow:inset 0 0 0 1.2px rgba(255,246,234,.85);
  font-family:var(--font-display);font-size:11px;font-weight:700;line-height:1;
  transform:rotate(-5deg);
}
/* 대형 CTA — 들어가는 문이 가장 크게 보이도록 */
.btn-lg{font-size:17px;min-height:58px;margin-top:2px}
.welcome-switch{
  font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  background:transparent;color:var(--hanji-dim);
  border:0;padding:0 12px;min-height:var(--tap);width:100%;
}
.welcome-switch:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:8px}

/* ---------- 탭 어포던스 ---------- */
.chev{
  margin-left:auto;flex:none;
  color:var(--gold);font-size:17px;line-height:1;opacity:.75;
}
.home-guard-more{
  margin-top:3px;font-size:11.5px;font-weight:700;color:var(--gold);
}
/* 눌림 피드백 — 미세하게만 */
.home-score:active,.home-guard:active,.area-card:active,.shop-item:active{
  transform:scale(.988);
  background-color:rgba(201,162,39,.06);
}
.home-score,.home-guard,.area-card{transition:transform .06s ease,background-color .15s ease}

/* 1회 힌트 캡션 — 대비 4.5:1 이상(hanji-dim 6.65:1) */
.tap-hint{
  margin:0 0 6px;font-size:12.5px;color:var(--hanji-dim);
  display:flex;align-items:center;gap:6px;
}
.tap-hint::before{content:"›";color:var(--gold);font-size:14px}

/* 폴드 밖 진행 버튼 인지 — 하단 페이드 + chevron 1회 바운스 */
.scroll-cue{
  margin:2px 0 0;text-align:center;font-size:12.5px;color:var(--hanji-dim);
}
.scroll-cue[hidden]{display:none}
.scroll-cue::after{
  content:"⌄";display:block;color:var(--gold);font-size:16px;line-height:1;
  animation:cueBounce 1.4s ease-in-out 2;
}
@keyframes cueBounce{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(3px)}
}

@media (prefers-reduced-motion:reduce){
  .home-score:active,.home-guard:active,.area-card:active,.shop-item:active{transform:none}
  .scroll-cue::after{animation:none}
}

/* v7.1 — 환영 모드 부 CTA (시각 위계: 주 CTA는 '오늘의 운세 보기' 하나뿐)
 * '다른 사람 보기'와 같은 급의 텍스트 버튼. 0명 화면에서는 .btn-main을 그대로 쓴다.
 * 시각 크기는 낮추되 터치 타깃은 44px을 유지한다(::before 히트영역). */
.btn-sub{
  position:relative;
  font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  background:transparent;color:var(--hanji-dim);
  border:0;padding:0 12px;
  width:100%;min-height:var(--tap);
}
.btn-sub:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:8px}
.btn-sub::before{
  content:"";position:absolute;left:0;right:0;
  top:50%;transform:translateY(-50%);
  height:var(--tap);min-height:var(--tap);
}

/* v7.2 — 저장/공유 결과 토스트 (alert 대체, 캡션 톤) */
.toast{
  margin:6px 0 0;text-align:center;
  font-size:12.5px;line-height:1.5;color:var(--gold);
  background:rgba(201,162,39,.10);
  border:1px solid var(--line);
  border-radius:999px;padding:8px 12px;
}
.toast[hidden]{display:none}

/* =========================================================
 * L8-B — 사업자 표기 푸터 · 법적 문서 (v4 토큰만)
 * ======================================================= */

.biz-footer{
  max-width:var(--maxw);
  margin:0 auto;
  padding:14px 20px calc(20px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);
}
.biz-details{border:0;background:transparent;padding:0}
.biz-summary{
  cursor:pointer;list-style:none;
  font-size:12px;color:var(--hanji-dim);font-weight:600;
  min-height:var(--tap);display:flex;align-items:center;
}
.biz-summary::-webkit-details-marker{display:none}
.biz-summary::after{content:"＋";margin-left:8px;font-weight:400}
.biz-details[open] .biz-summary::after{content:"－"}
.biz-summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}
.biz-line{
  margin:6px 0 0;font-size:11.5px;line-height:1.75;color:var(--hanji-dim);
  word-break:keep-all;
}
.biz-links{display:flex;flex-wrap:wrap;gap:4px 14px;margin:10px 0 0}
.biz-link{
  font:inherit;font-size:11.5px;font-weight:700;cursor:pointer;
  background:transparent;color:var(--gold);border:0;padding:0;
  min-height:var(--tap);
  text-decoration:underline;text-underline-offset:3px;
}
.biz-link:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}

/* 법적 문서 본문 */
.legal[hidden]{display:none}
.legal-p{
  margin:0 0 12px;font-size:13.5px;line-height:1.8;color:var(--hanji);
  word-break:keep-all;
}
.legal-p b{color:var(--gold);font-weight:700}