/* ============ Midnight Arcana — 컴포넌트 테마 (docs/design/STYLE_GUIDE.md) ============
   모든 공개 페이지에서 **마지막**에 불린다(style.css → content.css → reading.css/partner.css → theme.css).
   토큰은 style.css :root 한 곳. 여기서는 hex/rgba 를 새로 쓰지 않고 토큰만 참조한다.
   되돌리기 = 템플릿의 theme.css 링크 한 줄을 빼면 옛 컴포넌트 모양으로 돌아간다(토큰 값은 style.css). */

/* ---------------------------------------------------------------- 2. 서체 */
html,body{font-family:var(--f-body);font-weight:400;line-height:1.75}
h1,h2,h3,.content-body h2,.content-body h3{font-family:var(--f-ko-display);font-weight:700;text-wrap:balance;letter-spacing:-.005em}
h4,h5,h6{font-family:var(--f-ko-display);font-weight:700}
button,input,select,textarea{font-family:var(--f-body)}
/* 숫자 열 — 날짜·조회수·횟수는 고정폭 숫자 */
time,.nt-meta,.st-li-meta,.rv-list td,.counter,.quota-bar b{font-variant-numeric:tabular-nums}
code,kbd,pre{font-family:var(--f-mono)}

/* 별빛 — 히어로 쪽에만 소수, 6–12s 로 천천히(7장). 페이지 전체에 깔지 않는다 */
body::after{position:absolute;inset:0 0 auto 0;height:560px;
  -webkit-mask-image:linear-gradient(180deg,#000 40%,transparent);mask-image:linear-gradient(180deg,#000 40%,transparent);
  animation:mnTwinkle 9s ease-in-out infinite}
@keyframes mnTwinkle{0%,100%{opacity:.2}50%{opacity:.6}}

/* ---------------------------------------------------------------- 3. 공통 — 링크 · 포커스 · 선택 상자 */
a{color:var(--violet)}
a:hover{color:var(--primary-d)}
:focus-visible{outline:2px solid var(--primary-d);outline-offset:2px}
::selection{background:var(--glow-ring);color:var(--ink)}
select option{background:var(--paper);color:var(--ink)}
select option:checked,select option:hover{background:var(--raise);color:var(--ink)}
select optgroup{background:var(--bg-2);color:var(--muted)}

/* ---------------------------------------------------------------- 3. 머리글 */
.site-header{background:var(--header-bg);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);box-shadow:none}
.brand{font-family:var(--f-ko-display);font-weight:700;font-size:1.06rem;letter-spacing:.02em;color:var(--ink);gap:10px}
.brand .brand-icon{width:26px;height:26px;color:var(--gold);flex:none}
.brand-name{color:var(--ink)}
.site-nav a{font-family:var(--f-body);font-weight:500;font-size:.88rem;color:var(--muted);border-radius:var(--r-ui);border:1px solid transparent}
.site-nav a:hover{background:var(--glow-ring);border-color:transparent;color:var(--ink)}
.site-nav a.is-active{color:var(--ink);font-weight:600}
.site-nav a.is-active::after{left:9px;right:9px;bottom:0;height:2px;border-radius:0;background:var(--gold)}
.site-nav .nav-new{background:var(--gold);color:var(--on-primary);border-radius:2px;font-weight:700}
.site-nav a.nav-fx-hl{color:var(--primary-d);background:var(--glow-ring)}
.site-nav a.nav-fx-glow{border-color:var(--line)}
/* 좁은 PC — 위 .88rem 이 content.css 의 축소 규칙을 덮어써서 메뉴 9개가 두 줄이 됐다(2026-10-28) */
@media (min-width:781px) and (max-width:1200px){.site-nav a{font-size:.8rem}}
.lang-switch{border:1px solid var(--line);border-radius:var(--r-pill);background:var(--bg-2);box-shadow:none;padding:2px}
.lang-switch .lang-btn{border-radius:var(--r-pill);color:var(--muted);font-weight:500;letter-spacing:.06em;padding:5px 11px}
.lang-switch .lang-btn + .lang-btn{border-left:0}
.lang-switch .lang-btn.active{background:var(--gold);color:var(--on-primary);font-weight:600}
.lang-switch .lang-btn:not(.active):hover{background:var(--glow-ring);color:var(--ink)}
.site-nav-toggle{border:1px solid var(--line);border-radius:var(--r-ui)}
.site-nav-toggle span{background:var(--gold)}

/* ---------------------------------------------------------------- 3. 면책 배너 — 경고(노랑·⚠)가 아닌 안내 톤 */
.disclaimer-bar{display:flex;align-items:flex-start;justify-content:center;gap:8px;
  background:var(--tint-violet);border-top:0;border-bottom:1px solid var(--line);
  padding:8px 16px;font-size:.8rem;font-weight:400;color:var(--ink);line-height:1.6}
.disclaimer-bar .ic-info{flex:none;color:var(--violet);margin-top:3px}
.disclaimer-bar b{font-weight:600}
.disclaimer-bar a{color:var(--violet);font-weight:600}
.disclaimer-bar a:hover{color:var(--primary-d)}

/* ---------------------------------------------------------------- 3. 버튼 — Primary(골드) · Ghost · Text · Disabled */
.btn{border-radius:var(--r-ui);padding:12px 22px;font-size:.94rem;font-weight:600;letter-spacing:.02em;
  background:transparent;color:var(--primary-d);border:1px solid var(--line);box-shadow:none;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease)}
.btn:hover:not(:disabled){transform:none;border-color:var(--gold);background:var(--glow-ring);box-shadow:none}
.btn:active:not(:disabled){transform:translateY(1px);box-shadow:none}
.btn.primary{background:linear-gradient(180deg,var(--primary-d),var(--primary));color:var(--on-primary);
  border:1px solid var(--primary-d);box-shadow:0 6px 20px var(--glow-ring)}
.btn.primary:hover:not(:disabled){filter:none;transform:translateY(-1px);box-shadow:0 10px 28px var(--glow-ring);
  background:linear-gradient(180deg,var(--primary-d),var(--primary))}
.btn.ghost{background:none;border-color:transparent;color:var(--muted);padding-inline:8px}
.btn.ghost:hover:not(:disabled){background:none;border-color:transparent;color:var(--ink)}
.btn:disabled,.btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}
.btn-link-rules{background:transparent;color:var(--primary-d);border:1px solid var(--line);border-radius:var(--r-ui);
  font-weight:600;box-shadow:none}
.btn-link-rules:hover{transform:none;border-color:var(--gold);background:var(--glow-ring);box-shadow:none}

/* ---------------------------------------------------------------- 3. 제목 — 그라디언트 글자 제거, 단색 아이보리 + 금색 이탤릭 한 단어 */
.title{background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:currentColor;
  color:var(--ink);font-family:var(--f-numeral);font-weight:500;font-size:2.4rem;letter-spacing:.12em;text-transform:uppercase;line-height:1.2}
.title em{font-family:var(--f-display);font-style:italic;font-weight:500;text-transform:none;letter-spacing:.02em;color:var(--primary-d)}
.title::after{width:120px;height:1px;border-radius:0;margin-top:14px;
  background:linear-gradient(90deg,transparent,var(--line),var(--gold),var(--line),transparent)}
.content-header{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid var(--line)}
.content-header h1{font-family:var(--f-ko-display);font-weight:700;font-size:2rem;line-height:1.3;color:var(--ink);letter-spacing:-.005em}
.content-header .content-lead{color:var(--muted);opacity:1;font-weight:400;font-size:.92rem}
.content-meta,.content-header .content-meta{color:var(--faint);font-size:.78rem}
.content-meta a{color:var(--muted)}
.bc{font-size:.75rem;color:var(--faint);opacity:1;font-weight:400;letter-spacing:.04em}
.bc a{color:var(--muted);font-weight:400}
.bc a:hover{color:var(--primary-d);text-decoration:none}
#app .entertainment-note{color:var(--muted);font-weight:400}
#app .entertainment-note a{color:var(--violet);font-weight:600}
.muted{color:var(--muted)}

/* ---------------------------------------------------------------- 3. 모달 — 점 보는 법 · 이용 횟수 · 공유 · 레이어 팝업 */
.rules-overlay,.share-modal{background:var(--scrim)}
.rules-modal,.share-modal-inner,.lp-box{background:var(--modal-bg);border:1px solid var(--modal-line);border-radius:var(--r-modal);
  box-shadow:var(--shadow-modal),0 0 0 6px var(--glow-ring);color:var(--ink)}
.rules-modal h2,.share-modal h3{font-family:var(--f-ko-display);font-weight:700;text-transform:none;letter-spacing:0;color:var(--ink)}
.rules-modal h2{font-size:1.35rem;padding-bottom:12px;border-bottom:1px solid var(--line)}
.rules-sub,.share-modal-help{color:var(--muted);opacity:1;font-weight:400}
.rules-close,.share-modal-close{background:transparent;border:1px solid var(--line);border-radius:var(--r-ui);color:var(--muted);
  box-shadow:none;font-weight:400}
.rules-close:hover,.share-modal-close:hover{transform:none;color:var(--ink);border-color:var(--gold);background:var(--glow-ring);box-shadow:none}
.rules-steps li,.rules-steps li:nth-child(n){background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-panel);box-shadow:none}
.rules-steps li:hover{transform:none;box-shadow:none;border-color:var(--gold)}
.rules-num{background:transparent;border:1px solid var(--gold);color:var(--gold);font-family:var(--f-numeral);font-weight:500}
.rules-text h3{font-family:var(--f-ko-display)}
.rules-text b,.rules-credits b{color:var(--primary-d)}
.rules-tips,.rules-credits{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-panel);box-shadow:none}
.rules-tips h4,.rules-credits h4{font-family:var(--f-body);font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:600}
.rules-actions{border-top:1px solid var(--line);padding-top:14px}
.quota-block-modal .qb-icon{color:var(--gold)}
.quota-block-modal .qb-timer{color:var(--primary-d)}
.share-link-box input{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-ui);font-family:var(--f-mono)}
.share-link-box button{background:transparent;color:var(--primary-d);border:1px solid var(--line);border-radius:var(--r-ui);box-shadow:none}
.share-link-box button:hover{transform:none;border-color:var(--gold);background:var(--glow-ring)}
.share-modal-status{color:var(--upright)}
.share-modal-note{border-top:1px solid var(--line)}
.share-modal-ttl{color:var(--primary-d)}
@media (max-width:640px){.share-modal-inner{border-radius:var(--r-modal) var(--r-modal) 0 0}.share-modal-inner::before{background:var(--line)}}
.lp-head{background:transparent;border-bottom:1px solid var(--line)}
.lp-head b{font-family:var(--f-ko-display)}
.lp-img{background:var(--bg)}
.lp-foot{border-top:1px solid var(--line)}
.lp-tabs{background:var(--bg-2);border-bottom:1px solid var(--line)}
.lp-tab{color:var(--muted);border-radius:var(--r-ui) var(--r-ui) 0 0}
.lp-tab:hover{color:var(--ink)}
.lp-tab[aria-selected="true"]{color:var(--ink);background:var(--raise);border-color:var(--line);box-shadow:inset 0 2px 0 var(--gold)}
.lp-tab:focus-visible{outline-color:var(--primary-d)}
.help-tip{border:1px solid var(--line);background:transparent;color:var(--muted)}
.help-tip:hover,.help-tip:focus{background:var(--glow-ring);color:var(--ink)}
.help-tip::after{background:var(--raise);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-ui);box-shadow:var(--shadow-modal)}
.help-tip::before{border-top-color:var(--line)}

/* ---------------------------------------------------------------- 3. 꼬리말 — 금빛 마름모 + 괘선 위 */
.site-footer{background:var(--bg-2);border-top:1px solid var(--line);color:var(--muted);position:relative}
.site-footer::before{content:"";position:absolute;left:50%;top:-5px;width:9px;height:9px;transform:translateX(-50%) rotate(45deg);
  background:var(--gold)}
.footer-col h4{font-family:var(--f-body);font-size:.75rem;font-weight:600;letter-spacing:.18em;color:var(--gold)}
.footer-col h4.footer-brand{display:flex;align-items:center;gap:8px;font-family:var(--f-ko-display);font-size:1rem;letter-spacing:.02em;text-transform:none;color:var(--ink)}
.footer-col h4.footer-brand svg{color:var(--gold);flex:none}
.footer-col a{color:var(--muted);font-weight:400;opacity:1}
.footer-col a:hover{color:var(--primary-d)}
.footer-col a b{font-weight:600;color:var(--ink)}
.footer-col p{color:var(--muted);opacity:1}
.footer-meta a{color:var(--violet)}
.footer-disclaimer{background:var(--tint-violet);border:1px solid var(--line);border-radius:var(--r-ui);box-shadow:none;color:var(--ink)}
.footer-disclaimer .ic-info{color:var(--violet);vertical-align:-2px;margin-right:6px}
.footer-disclaimer .ic-heart{color:var(--el-water);vertical-align:-2px;margin-right:6px}
.footer-disclaimer strong{color:var(--ink)}
.footer-disclaimer a,.emergency-line a{color:var(--primary-d)}
.footer-bottom{border-top:1px solid var(--line);color:var(--faint);opacity:1}
.to-top{background:var(--bg-2);color:var(--gold);border:1px solid var(--line);box-shadow:none}
.to-top:hover{border-color:var(--gold);background:var(--glow-ring)}

/* ---------------------------------------------------------------- 4. 점보기 — 진행 단계(로마 숫자 원 38px) */
.steps-bar{max-width:640px;margin-bottom:28px}
.steps-bar li{opacity:1;color:var(--faint);gap:8px}
.steps-bar li::before{top:19px;height:1px;background:var(--line)}
.steps-bar li i{width:38px;height:38px;border-radius:50%;background:var(--bg);border:1px solid var(--line);color:var(--faint);
  font-family:var(--f-numeral);font-weight:500;font-size:1.05rem;letter-spacing:.04em;box-shadow:none;transform:none}
.steps-bar li span{font-size:.8rem;font-weight:500;letter-spacing:.02em}
/* 현재 = 골드 채움 + 5px 후광 */
#app[data-state="type"]     .steps-bar li[data-pos="type"] i,
#app[data-state="question"] .steps-bar li[data-pos="question"] i,
#app[data-state="spread"]   .steps-bar li[data-pos="spread"] i,
#app[data-state="reading"]  .steps-bar li[data-pos="reading"] i{background:var(--gold);color:var(--on-primary);border-color:var(--primary-d);
  box-shadow:0 0 0 5px var(--glow-ring);transform:none}
#app[data-state="type"]     .steps-bar li[data-pos="type"],
#app[data-state="question"] .steps-bar li[data-pos="question"],
#app[data-state="spread"]   .steps-bar li[data-pos="spread"],
#app[data-state="reading"]  .steps-bar li[data-pos="reading"]{color:var(--ink);opacity:1}
/* 완료 = 골드 테두리·글자 + 골드 연결선 */
#app[data-state="question"] .steps-bar li[data-pos="type"],
#app[data-state="spread"]   .steps-bar li[data-pos="type"],
#app[data-state="spread"]   .steps-bar li[data-pos="question"],
#app[data-state="reading"]  .steps-bar li[data-pos="type"],
#app[data-state="reading"]  .steps-bar li[data-pos="question"],
#app[data-state="reading"]  .steps-bar li[data-pos="spread"]{opacity:1;color:var(--ink)}
#app[data-state="question"] .steps-bar li[data-pos="type"] i,
#app[data-state="spread"]   .steps-bar li[data-pos="type"] i,
#app[data-state="spread"]   .steps-bar li[data-pos="question"] i,
#app[data-state="reading"]  .steps-bar li[data-pos="type"] i,
#app[data-state="reading"]  .steps-bar li[data-pos="question"] i,
#app[data-state="reading"]  .steps-bar li[data-pos="spread"] i{border-color:var(--gold);color:var(--gold)}
#app[data-state="question"] .steps-bar li[data-pos="question"]::before,
#app[data-state="spread"]   .steps-bar li[data-pos="question"]::before,
#app[data-state="spread"]   .steps-bar li[data-pos="spread"]::before,
#app[data-state="reading"]  .steps-bar li[data-pos="question"]::before,
#app[data-state="reading"]  .steps-bar li[data-pos="spread"]::before,
#app[data-state="reading"]  .steps-bar li[data-pos="reading"]::before{background:var(--gold)}
@media (max-width:640px){.steps-bar li i{width:34px;height:34px;font-size:.95rem}.steps-bar li::before{top:17px}}

/* ---------------------------------------------------------------- 4. 히어로 — 카드 뒷면 3장 */
.hero-cards img{border:0;border-radius:6px;background:transparent;box-shadow:var(--shadow-card)}
.type-header h2{font-family:var(--f-ko-display);font-weight:700;font-size:1.3rem}
h2{font-family:var(--f-ko-display);font-weight:700}

/* ---------------------------------------------------------------- 4. 주제 카드 — 3열(모바일 2열, 400px 이하 1열) · 선 아이콘(원소 색) */
.type-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.type-card,.type-card:nth-child(n){display:grid;grid-template-columns:34px minmax(0,1fr);gap:4px 12px;align-items:start;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-panel);padding:16px 16px 16px 14px;box-shadow:none;
  transition:border-color .2s var(--ease),background .2s var(--ease)}
.type-card::before{display:none}
.type-card .tc-ic{grid-row:span 2;width:28px;height:28px;margin-top:2px;color:var(--tc,var(--gold))}
.type-card h3{margin:0;font-family:var(--f-ko-display);font-size:1.03rem;font-weight:700;color:var(--ink)}
.type-card p{margin:0;font-size:.78rem;line-height:1.5;color:var(--muted);opacity:1;font-weight:400}
.type-card:hover{transform:none;box-shadow:none;border-color:var(--gold)}
.type-card:active{transform:none;box-shadow:none}
.type-card[aria-pressed="true"]{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold);
  background:linear-gradient(160deg,var(--glow-ring),transparent 70%),var(--paper)}
@media (max-width:640px){
  .type-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .type-card,.type-card:nth-child(n){grid-template-columns:28px minmax(0,1fr);gap:3px 10px;padding:13px 12px;border-radius:var(--r-panel)}
  .type-card .tc-ic{width:24px;height:24px}
  .type-card h3{font-size:.96rem}
  .type-card p{font-size:.74rem}
}
@media (max-width:400px){.type-list{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- 4. 이용 횟수 — 골드 띠(이모지 대신 별 아이콘) */
.quota-bar{background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:var(--r-pill);
  box-shadow:none;font-weight:500;font-size:.9rem;padding:9px 20px}
.quota-bar::before{content:"";width:14px;height:14px;background:var(--gold);flex:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1l1.6 4.4L14 7l-4.4 1.6L8 13 6.4 8.6 2 7l4.4-1.6z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1l1.6 4.4L14 7l-4.4 1.6L8 13 6.4 8.6 2 7l4.4-1.6z'/%3E%3C/svg%3E") center/contain no-repeat}
.quota-bar b{font-family:var(--f-numeral);color:var(--gold);font-size:1.3rem;font-weight:600}
.quota-bar.empty{background:var(--tint-reversed);color:var(--ink);border-color:var(--reversed);box-shadow:none;animation:none}
.quota-bar.empty::before{background:var(--reversed);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='16' cy='16' r='12'/%3E%3Cpath d='M16 14v8M16 10v.5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='16' cy='16' r='12'/%3E%3Cpath d='M16 14v8M16 10v.5'/%3E%3C/svg%3E") center/contain no-repeat}
.quota-bar.empty b{color:var(--reversed)}
.quota-bar .quota-cta{background:linear-gradient(180deg,var(--primary-d),var(--primary));color:var(--on-primary);border-radius:var(--r-ui);box-shadow:none;font-weight:600}
.quota-bar .quota-cta:hover{filter:none}

/* ---------------------------------------------------------------- 4. 질문 입력 */
textarea{background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-ui);box-shadow:none;font-weight:400;line-height:1.7}
textarea::placeholder{color:var(--faint)}
textarea:focus{background:var(--bg);border-color:var(--gold);box-shadow:0 0 0 4px var(--glow-ring)}
[data-step="question"] h2,#selected-type-label{font-family:var(--f-ko-display)}
.today-question-hint{background:var(--tint-violet);border:1px solid var(--line);border-left:2px solid var(--violet);border-radius:var(--r-ui);box-shadow:none;font-weight:400}
.today-question-hint b{color:var(--primary-d)}
.question-tip{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-ui);color:var(--muted)}
.question-tip b{color:var(--primary-d)}

/* ---------------------------------------------------------------- 4. 카드 고르기 — 78장 부채 · 선택 카운터(로마 숫자) */
.counter{font-family:var(--f-body);color:var(--muted);font-weight:500}
.counter span,.counter #picked-count,.counter .counter-max{font-family:var(--f-numeral);color:var(--gold);font-size:1.3rem;font-weight:500;letter-spacing:.1em}
.counter .counter-opt{font-family:var(--f-body);font-size:.82rem;color:var(--muted);letter-spacing:0}
.fan .card{border:1px solid var(--card-rim);border-radius:var(--r-card);background:transparent;box-shadow:var(--shadow-card)}
.fan .card:hover:not(.placed){filter:none;border-color:var(--primary-d);box-shadow:var(--shadow-card),0 0 24px var(--glow-ring);z-index:5}
.fan .card.placed{border-color:var(--primary-d);box-shadow:0 0 0 2px var(--primary-d),0 0 30px var(--glow-ring)}
.fan .card.placed::after{background:var(--raise);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-ui);font-weight:500}
.fan-hint{background:var(--raise);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-ui);box-shadow:none}
.fan-hint::after{background:var(--raise);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.fan-hint-main{font-weight:600}
.fan-hint-main::before{content:none}
.fan-hint-sub{color:var(--muted)}
.fan-hint.done{background:linear-gradient(180deg,var(--primary-d),var(--primary));color:var(--on-primary);border-color:var(--primary-d);box-shadow:none}
.fan-hint.done::after{background:var(--primary)}
.fan-hint.done .fan-hint-sub{color:var(--on-primary)}
.fan-hint.done .fan-hint-main::before{content:none}
/* 매트 — 자리 번호(로마 숫자) + 자리 이름 */
.slot{border:1px dashed var(--line);border-radius:var(--r-card);background:transparent;color:var(--muted)}
.slot.filled{border-style:solid;border-color:var(--primary-d);background:transparent;box-shadow:0 0 0 4px var(--glow-ring)}
.slot-num{font-family:var(--f-numeral);font-weight:500;font-size:1.5rem;color:var(--gold);opacity:1;letter-spacing:.1em}
.slot-label{font-size:.75rem;letter-spacing:.06em;font-weight:500;color:var(--muted);text-transform:none}
.slot.slot-bonus{border-color:var(--line)}
.slot.slot-bonus .slot-num{color:var(--el-water)}

/* ---------------------------------------------------------------- 4. 해석 기다리는 동안 · 요약 */
.seer-text{background:transparent;border:1px solid var(--line);border-radius:var(--r-pill);box-shadow:none;font-weight:500;color:var(--ink)}
.seer-stage::before{background:radial-gradient(circle,var(--glow-ring),transparent 68%)}
.seer-side-card,.summary-card-back{border:1px solid var(--card-rim);border-radius:var(--r-card);box-shadow:var(--shadow-card)}
.seer-dots i,.summary-loader-text::after{background:var(--gold)}
.seer-elapsed{font-family:var(--f-numeral);color:var(--gold);font-weight:500}
.seer-elapsed .seer-unit{color:var(--muted)}
.seer-status{color:var(--muted)}
.seer-bar{background:var(--line)}
.seer-bar-fill{background:linear-gradient(90deg,var(--primary),var(--primary-d))}
.seer-bar-fill.warn{background:linear-gradient(90deg,var(--primary),var(--reversed))}
.summary-loader-text{font-weight:500}

/* ---------------------------------------------------------------- 4. 결과 머리 · 전체/요약 · 스트리밍 · 후기 유도 */
.result,.error{border:1px solid var(--line);border-radius:var(--r-modal);box-shadow:none}
.error{background:var(--tint-reversed);border-color:var(--reversed)}
.result h3{font-family:var(--f-ko-display);font-weight:700}
.view-toggle{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-pill);box-shadow:none}
.btn-toggle{color:var(--muted);font-weight:500}
.btn-toggle:hover{background:var(--glow-ring);color:var(--ink)}
.btn-toggle.active{background:var(--gold);color:var(--on-primary);font-weight:600;box-shadow:none}
#reading-text.streaming,#summary-text.streaming{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-panel)}
#reading-text.streaming::after,#summary-text.streaming::after{background:var(--gold)}
.review-cta{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-panel)}
.review-cta-q{font-family:var(--f-ko-display);font-weight:700;color:var(--ink)}
.review-cta-sub{color:var(--muted)}
/* 결과 해석 사이 구분선(✦ + 금빛 선) — 해석 블록 묶음 위에 한 번 */
#reading-text:not(.streaming)::before{content:"";display:block;height:1px;margin:4px 0 22px;
  background:linear-gradient(90deg,transparent,var(--line),var(--gold),var(--line),transparent)}
.tip-up{color:var(--upright)}
.tip-rev{color:var(--reversed)}
.dir-badge{border:0;border-radius:var(--r-pill);font-weight:600}
.dir-up{background:var(--lime);color:var(--upright)}
.dir-rev{background:var(--tint-reversed);color:var(--reversed)}
.pc .label{font-family:var(--f-numeral);color:var(--gold);font-weight:500;letter-spacing:.2em}

/* ---------------------------------------------------------------- 5. 목록 공통 — 바깥 패널 없이 금빛 괘선만(박스 안의 박스 금지) */
.content-body{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-panel);box-shadow:none}
.content-body.st-board,.content-body.nt-board{background:transparent;border:0;border-radius:0;padding:4px 0 0;box-shadow:none}
.h1-count{font-family:var(--f-numeral);font-weight:500;font-size:1.05rem;letter-spacing:.12em;color:var(--gold);margin-left:6px;vertical-align:.12em}
/* 밑줄 탭 — 선택 = 아이보리 600 + 2px 골드 밑줄, 개수는 mono 11px */
.ul-tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line);min-width:0}
.ul-tabs > a,.ul-tabs > button{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  padding:10px 14px;margin-bottom:-1px;font-size:.88rem;color:var(--muted);border-bottom:2px solid transparent;border-radius:0;background:none;text-decoration:none;font-weight:400}
.ul-tabs > a:hover,.ul-tabs > button:hover{color:var(--ink);background:none;border-color:transparent}
.ul-tabs > a.on,.ul-tabs > a[aria-current="page"],.ul-tabs > button[aria-selected="true"],.ul-tabs > button.active{color:var(--ink);font-weight:600;border-bottom-color:var(--gold);background:none}
.ul-tabs > a:focus-visible,.ul-tabs > button:focus-visible{outline:2px solid var(--primary-d);outline-offset:2px}
.ul-tabs .n,.ul-tabs .suite-tab-n{font-family:var(--f-mono);font-size:.69rem;color:var(--faint);background:none;padding:0;border-radius:0;font-weight:400}
.ul-tabs [aria-selected="true"] .n,.ul-tabs .active .suite-tab-n{color:var(--gold);background:none}
.ul-tabs svg{width:16px;height:16px;flex:none}
/* 검색 — 왼쪽 돋보기, 포커스 시 골드 테두리 + 후광 */
.search-box{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:var(--r-ui);padding:0 4px 0 12px;background:var(--bg);min-width:0;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.search-box > svg{color:var(--faint);flex:none}
.search-box input{all:unset;flex:1;min-width:0;font-size:.9rem;padding:10px 0;color:var(--ink)}
.search-box input::placeholder{color:var(--faint)}
.search-box:focus-within{border-color:var(--gold);box-shadow:0 0 0 4px var(--glow-ring)}
.search-box .btn{padding:6px 14px;font-size:.84rem;border-color:transparent}
/* 페이지 — 로마 숫자 36px 정사각, 현재 = 골드 채움 */
.nt-pager,.pager{display:flex;justify-content:center;gap:4px;align-items:center;flex-wrap:wrap;margin-top:28px}
.nt-pager a,.nt-pager b{min-width:36px;height:36px;display:grid;place-items:center;padding:0 8px;border-radius:var(--r-ui);
  font-family:var(--f-numeral);font-size:.95rem;font-weight:500;letter-spacing:.06em;color:var(--muted);text-decoration:none}
.nt-pager a:hover{color:var(--ink);background:var(--glow-ring)}
.nt-pager b{background:var(--gold);color:var(--on-primary);font-weight:600}
/* 빈 상태 — 점선 괘선 · 달 아이콘 · 명조 안내 + 해결 한 줄 */
.empty-state{border:1px dashed var(--line);border-radius:var(--r-panel);padding:36px 20px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;list-style:none}
.empty-state[hidden]{display:none}
.empty-state svg{color:var(--faint)}
.empty-state b{font-family:var(--f-ko-display);font-size:1.06rem;font-weight:700;color:var(--ink)}
.empty-state p{margin:0;font-size:.85rem;color:var(--muted)}
/* 말머리 배지 — 테두리형 4색 */
.st-badge{background:transparent;border:1px solid currentColor;border-radius:3px;padding:1px 8px;font-size:.72rem;font-weight:600;letter-spacing:.04em;line-height:1.5}
.st-badge.cat-notice{color:var(--gold)}
.st-badge.cat-story{color:var(--violet)}
.st-badge.cat-term{color:var(--upright)}
.st-badge.cat-study{color:var(--el-fire)}
i.dot{display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--faint);vertical-align:middle;font-style:normal}

/* ---------------------------------------------------------------- 5-A. 타로카드 이야기 — 잡지 목차형 */
.st-tools{display:flex;flex-direction:column;align-items:stretch;gap:14px;margin:0 0 6px}
.st-cats{flex-wrap:wrap}
.st-cats a{border-radius:0;border:0;border-bottom:2px solid transparent;padding:10px 14px}
.st-cats a.on{background:none;border-color:var(--gold)}
.st-search{max-width:420px}
.st-search input{min-width:0;border:0;background:none;border-radius:0;padding:10px 0}
.st-list{border-top:0}
.st-li{border-bottom:1px solid var(--line)}
.st-li-link{display:grid;grid-template-columns:minmax(0,1fr) 72px;gap:20px;align-items:start;padding:22px 2px;color:inherit;text-decoration:none}
.st-li-link:hover .st-li-title{text-decoration:none;color:var(--primary-d)}
.st-li-link:focus-visible{outline:2px solid var(--primary-d);outline-offset:4px}
.st-series{display:block;font-family:var(--f-numeral);font-size:.8rem;letter-spacing:.16em;color:var(--gold);margin-bottom:4px}
.st-li-title{display:block;-webkit-line-clamp:unset;font-family:var(--f-ko-display);font-size:1.19rem;line-height:1.45;font-weight:700;color:var(--ink);
  text-wrap:balance;transition:color .2s var(--ease);margin:0 0 8px}
.st-li-sum{font-size:.88rem !important;line-height:1.65;color:var(--muted);margin:0 0 10px !important;opacity:1}
.st-li-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:.78rem;color:var(--faint);font-variant-numeric:tabular-nums}
.st-li-meta .st-badge{margin-right:0}
.st-cmt{display:inline-flex;align-items:center;gap:4px}
/* 썸네일 72px · 7:12 · 양피지 + 금박 이중 테두리 */
.st-thumb{width:72px;aspect-ratio:7/12;justify-self:end;border-radius:var(--r-panel);background:var(--card-face);border:1px solid var(--card-rim);
  box-shadow:inset 0 0 0 3px var(--card-face),inset 0 0 0 4px var(--card-rim);overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--card-num);padding:5px}
.st-thumb .st-li-thumb{width:100%;height:100%;object-fit:cover;object-position:center;border:0;border-radius:3px;display:block;box-shadow:none}
.st-thumb-face b{font-family:var(--f-numeral);font-size:.75rem;font-weight:500;letter-spacing:.1em;color:var(--card-num)}
/* 고정 공지 — 골드 틴트 박스 + ✦ 라벨, 썸네일 없음 */
.st-li.st-pinned{background:linear-gradient(90deg,var(--glow-ring),transparent 70%);border:1px solid var(--line);border-radius:var(--r-ui);margin:14px 0 8px}
.st-li.st-pinned .st-li-link{grid-template-columns:minmax(0,1fr);padding:16px}
.st-pin{display:inline-flex;align-items:center;gap:5px;background:none;border:0;padding:0;margin-bottom:6px;font-size:.72rem;font-weight:600;letter-spacing:.06em;color:var(--gold)}
@media (max-width:640px){
  .st-li-link{grid-template-columns:minmax(0,1fr) 56px;gap:14px;padding:18px 0}
  .st-thumb{width:56px}
  .st-li-title{font-size:1.04rem}
  .st-search{max-width:none}
}

/* ---------------------------------------------------------------- 5-B. 공지사항 — 장부형 */
.nt-tabs{margin:0 0 4px}
.group-h{font-family:var(--f-body);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:26px 0 8px;font-weight:600}
.nt-group[hidden]{display:none}
.nt-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--gold)}
.nt-row{border-bottom:1px solid var(--line)}
.nt-row[hidden]{display:none}
.nt-row a{display:grid;grid-template-columns:86px minmax(0,1fr) auto;gap:16px;align-items:center;padding:15px 6px;border-bottom:0;color:inherit;text-decoration:none;transition:background .2s var(--ease)}
.nt-row a:hover{background:var(--glow-ring)}
.nt-row a:hover .nt-title{text-decoration:none}
.nt-row a:focus-visible{outline:2px solid var(--primary-d);outline-offset:-2px}
.nt-row.pinned a{background:none}
.nt-date{font-family:var(--f-mono);font-size:.78rem;color:var(--faint);font-variant-numeric:tabular-nums}
.nt-title{flex:none;font-size:.94rem;font-weight:500;min-width:0;color:var(--ink)}
.nt-pin{display:inline-flex;align-items:center;gap:4px;background:none;color:var(--gold);padding:0;margin-right:8px;font-size:.72rem;font-weight:600;letter-spacing:.06em;vertical-align:1px}
.nt-new{font-size:.66rem;font-weight:700;color:var(--on-primary);background:var(--gold);border-radius:2px;padding:1px 5px;margin-left:6px;vertical-align:2px;letter-spacing:.06em}
.nt-new[hidden]{display:none}
.nt-meta{display:flex;gap:12px;align-items:center;font-size:.75rem;opacity:1;color:var(--faint)}
.nt-aud{font-size:.72rem;color:var(--muted);border:1px solid var(--line);border-radius:3px;padding:2px 8px;white-space:nowrap}
.nt-views{white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:640px){
  .nt-row a{grid-template-columns:minmax(0,1fr);gap:4px;padding:13px 2px}
  .nt-date{order:2}
  .nt-meta{order:3}
}

/* ---------------------------------------------------------------- 5-C. 카드 사전 — 덱 펼침형 */
.cd-toolbar{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;margin:0 0 8px}
.cd-toolbar .suite-tabs{margin:0;flex:1 1 auto}
.suite-tab,.suite-tab:hover{border-radius:0}
.suite-tab.active{background:none;color:var(--ink);border-color:var(--gold)}
.card-search{margin:0;flex:0 1 300px}
.card-search .card-search-input{all:unset;flex:1;min-width:0;font-size:.9rem;padding:10px 0;color:var(--ink)}
.card-search .card-search-input:focus{box-shadow:none;border:0}
.card-grid.deck{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:20px 16px;margin:16px 0 24px}
.suit-band{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin:18px 0 -4px}
.suit-band[hidden]{display:none}
.suit-band svg{color:var(--gold);flex:none}
.suit-band h2{margin:0;font-family:var(--f-ko-display);font-size:1.19rem;font-weight:700;color:var(--ink);border:0;padding:0}
.suit-band span{font-size:.78rem;color:var(--muted);white-space:nowrap}
.suit-band::after{content:"";flex:1;height:1px;background:var(--line)}
.card-tile,.card-tile:nth-child(n){position:relative;display:flex;flex-direction:column;gap:10px;background:none;border:0;border-radius:0;padding:0;box-shadow:none;color:inherit}
/* 분류 탭·검색이 숨긴 카드 — 위 display:flex 가 content.css 의 [hidden] 규칙을 이겨 필터가 안 먹던 문제 */
.card-tile[hidden],.card-tile:nth-child(n)[hidden]{display:none}
.card-tile:hover{transform:none;box-shadow:none}
.card-tile:focus-visible{outline:2px solid var(--primary-d);outline-offset:4px;border-radius:var(--r-card)}
/* 카드 면 — 양피지 + 금박 이중 테두리. 그림이 없거나 늦으면 면 위의 번호·영문 이름이 보인다(빈 회색 칸 없음) */
.ct-face,.card-tile img{aspect-ratio:7/12;width:100%;border-radius:var(--r-card)}
.ct-face{position:absolute;top:0;left:0;right:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:12px 6px;
  background:var(--card-face);border:1px solid var(--card-rim);box-shadow:inset 0 0 0 4px var(--card-face),inset 0 0 0 5px var(--card-rim)}
.ct-num{font-family:var(--f-numeral);font-size:.95rem;letter-spacing:.1em;color:var(--card-num)}
.ct-nm{font-family:var(--f-numeral);font-size:.66rem;letter-spacing:.14em;color:var(--card-ink);text-align:center;line-height:1.3}
.card-tile img{position:relative;z-index:1;height:auto;object-fit:cover;display:block;margin:0;background:var(--card-face);padding:5px;
  border:1px solid var(--card-rim);box-shadow:inset 0 0 0 4px var(--card-face),inset 0 0 0 5px var(--card-rim);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.card-tile.img-fail img{visibility:hidden}
.card-tile:hover img{transform:translateY(-4px);box-shadow:inset 0 0 0 4px var(--card-face),inset 0 0 0 5px var(--card-rim),var(--shadow-card)}
.ct-info{display:flex;flex-direction:column;gap:2px}
.card-tile .tile-name{font-family:var(--f-ko-display);font-size:1rem;line-height:1.3;font-weight:700;margin:0;color:var(--ink)}
.card-tile .tile-en{font-family:var(--f-display);font-style:italic;font-size:.88rem;color:var(--muted)}
.card-tile .tile-theme{font-size:.78rem;color:var(--primary-d);opacity:1;font-weight:400}
.card-tile .tile-alias{display:block;font-size:.74rem;line-height:1.45;color:var(--muted);word-break:keep-all}
.card-tile .tile-alias b{font-weight:600;color:var(--faint)}
.suite-empty{color:var(--muted)}
@media (max-width:640px){.card-search{flex:1 1 100%}.cd-toolbar .suite-tabs{flex-wrap:nowrap;overflow-x:auto}}
@media (max-width:400px){.card-grid.deck{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cta-section{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-panel);box-shadow:none}
.cta-section h2{font-family:var(--f-ko-display)}
.cta-section p{font-weight:400;color:var(--muted)}

/* 5. 목록 보정 — 본문 기본 목록 들여쓰기·h2 꾸밈을 목록에서는 받지 않는다 */
.content-body ul.st-list,.content-body ul.nt-list{padding-left:0;margin:0}
.content-body .st-list > li,.content-body .nt-list > li{margin:0}
.content-body h2.group-h{font-family:var(--f-body);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  margin:28px 0 8px;padding:0;border:0;font-weight:600;line-height:1.5}
.content-body h2.group-h::after,.content-body h2.group-h::before{content:none}
.content-body .suit-band h2{font-size:1.19rem;margin:0;padding:0;border:0}
.content-body .suit-band h2::after{content:none}
/* 탭은 줄어들어도 글자가 꺾이지 않게 — 넘치면 가로로 밀어 본다 */
.ul-tabs > a,.ul-tabs > button{flex:none;white-space:nowrap}
/* Cormorant SC 의 옛 숫자꼴(0 이 o 처럼 보임) 대신 정자 숫자 */
.st-series,.ct-num,.h1-count,.nt-pager,.slot-num,.steps-bar li i,.counter,.quota-bar b,.sec-time,.seer-elapsed,.title{font-variant-numeric:lining-nums}

/* ---------------------------------------------------------------- 6. 선 아이콘(이모지 대신) — <svg class="ic"><use href="#i-…"/></svg> */
svg.ic{display:inline-block;flex:none;vertical-align:-3px;margin-right:6px;color:var(--gold)}
h2 > svg.ic,h3 > svg.ic{width:20px;height:20px;vertical-align:-2px}
.btn svg.ic,button svg.ic{color:currentColor;margin-right:5px}
.callout svg.ic,.en-notice svg.ic{color:var(--violet)}
.question-tip svg.ic{color:var(--violet)}

/* ---------------------------------------------------------------- 8. 화면 테마 전환(Night / Parchment) — 머리글 */
.theme-switch{display:inline-flex;margin-left:auto;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--bg-2);padding:2px;flex:none}
.theme-switch + .lang-switch{margin-left:8px}
.theme-switch button{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:var(--r-pill);
  font-size:.76rem;letter-spacing:.04em;color:var(--muted);line-height:1}
.theme-switch button:hover{color:var(--ink);background:var(--glow-ring)}
.theme-switch button[aria-pressed="true"]{background:var(--gold);color:var(--on-primary);font-weight:600}
.theme-switch button:focus-visible{outline:2px solid var(--primary-d);outline-offset:2px}
/* Night 고정 화면(타로리더 — theme-lock) — 아이콘은 그대로 두고 누를 수 없게만(고른 테마는 다른 화면에서 그대로) */
.theme-switch.is-locked button{cursor:not-allowed}
.theme-switch.is-locked button[aria-pressed="false"]{opacity:.45}
.theme-switch.is-locked button[aria-pressed="false"]:hover{background:none;color:var(--muted)}
/* 상단 메뉴가 한 줄을 지키도록 — 머리글 폭(1100px)에 글자까지 넣으면 메뉴가 넘친다. 늘 달·해 아이콘(이름은 title·aria) */
.theme-switch .ts-l{position:static;display:none}
.theme-switch button{padding:6px 8px}
@media (max-width:780px){
  .theme-switch{order:2;margin-left:auto}
  .theme-switch + .lang-switch{margin-left:6px}
}
/* Parchment — 별빛(밝은 점)은 밝은 바탕에서 먼지처럼 보여 끈다 */
:root[data-theme="light"] body::after{display:none}

/* ---------------------------------------------------------------- 7. 동작 줄이기 — 모든 transition · animation 끔 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}
/* 머리글 줄 간격 — 본문 1.75 를 물려받으면 메뉴가 두 줄일 때(781~900px) 머리글이 원래보다 높아진다 */
.site-header,.site-header-inner{line-height:1.4}

/* 검색어 강조 — 타로카드 이야기 목록·상세(templates/_search_hl.html). 두 테마 모두 토큰으로 */
mark.hl{background:color-mix(in srgb,var(--gold) 16%,transparent);color:var(--ink);border-radius:4px;padding:0 3px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  /* 네온사인 테두리(약하게) — 밝은 금빛 1px 관 + 가까운 빛 + 넓은 옅은 번짐 + 안쪽 빛, 깜빡임 없음 */
  box-shadow:0 0 0 1px color-mix(in srgb,var(--gold) 92%,#fff),
    0 0 4px 1px color-mix(in srgb,var(--gold) 55%,transparent),
    0 0 12px 2px color-mix(in srgb,var(--gold) 26%,transparent),
    inset 0 0 6px color-mix(in srgb,var(--gold) 30%,transparent)}
:root[data-theme="light"] mark.hl{background:color-mix(in srgb,var(--gold) 20%,transparent);
  box-shadow:0 0 0 1px var(--gold),0 0 4px 1px color-mix(in srgb,var(--gold) 45%,transparent),
    0 0 10px 2px color-mix(in srgb,var(--gold) 20%,transparent),inset 0 0 5px color-mix(in srgb,var(--gold) 22%,transparent)}
.hl-bar{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin:0 0 12px;padding:9px 14px;font-size:.86rem;color:var(--ink);
  background:var(--glow-ring);border:1px solid var(--line);border-radius:var(--r-ui)}
.hl-bar[hidden]{display:none}
.hl-bar a{color:var(--violet);font-weight:600}

/* ---------------------------------------------------------------- 본문 상자 톤 다운(2026-10-21 운영자 '콘텐츠 영역 바탕이 밝아 눈이 아프다')
   이야기·카드 사전·공지·이용후기 상세 — 상자는 바탕보다 한 단계(--bg-2)만, 표 머리·용어 머리·소제목 띠는 옅은 틴트,
   테두리는 금빛 괘선, 긴 글은 아이보리를 살짝 눌러 눈부심을 줄인다(대비 11:1 이상). 두 테마 모두 토큰으로. */
.content-body,.content-body.st-body,.content-body.st-comments{background:var(--bg-2);border:1px solid var(--line);box-shadow:none}
.content-body p,.content-body li,.content-body td,.st-body p,.st-body li,.st-body .st-term td,.st-body .st-keys td,.rv-content,.nt-content{
  color:color-mix(in srgb,var(--ink) 86%,var(--bg-2))}
.content-body h2,.content-body h3,.st-body h3{color:var(--ink)}
.st-body h2{background:color-mix(in srgb,var(--gold) 7%,transparent);border-left:3px solid var(--gold);color:var(--primary-d)}
.st-body blockquote,.content-body blockquote{background:color-mix(in srgb,var(--gold) 6%,transparent);border-left:2px solid var(--gold)}
.st-body th,.st-body td{border-color:var(--line)}
.st-body th{background:color-mix(in srgb,var(--violet) 10%,transparent);color:var(--ink)}
.st-body hr,.content-body hr{border-top-color:var(--line)}
.st-body h3.st-tname{background:color-mix(in srgb,var(--violet) 12%,var(--bg-2));border:1px solid var(--line);border-bottom:0;color:var(--ink)}
.st-body table.st-term{border:1px solid var(--line);background:color-mix(in srgb,var(--ink) 2%,transparent)}
.st-body .st-term th,.st-body .st-term td{border-top-color:color-mix(in srgb,var(--ink) 8%,transparent)}
.st-body .st-term th.st-k{background:color-mix(in srgb,var(--gold) 9%,transparent);color:var(--gold)}
.st-body .st-glance thead th{background:color-mix(in srgb,var(--gold) 12%,transparent)}
.st-body .st-glance tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--ink) 3%,transparent)}
.st-body .st-info td:first-child{background:color-mix(in srgb,var(--gold) 7%,transparent)}
.st-body .st-keys thead th:first-child{background:color-mix(in srgb,var(--upright) 12%,transparent)}
.st-body .st-keys thead th:last-child{background:color-mix(in srgb,var(--reversed) 12%,transparent)}
.st-body p b,.st-body p strong,.st-body li b{background:color-mix(in srgb,var(--gold) 11%,transparent)}
/* 카드 사전 상세 · 공지 본문 상자 — 같은 톤 */
.info-table{background:transparent;border:1px solid var(--line);box-shadow:none}
.info-table th,.info-table td{border-color:var(--line)}
.info-table th{background:color-mix(in srgb,var(--gold) 8%,transparent)}
.meaning-box,.side-guide{border:1px solid var(--line);box-shadow:none}
.meaning-box{background:color-mix(in srgb,var(--gold) 6%,transparent)}
.meaning-box.upright{background:color-mix(in srgb,var(--upright) 8%,transparent)}
.meaning-box.reversed{background:color-mix(in srgb,var(--reversed) 8%,transparent)}
.sym-item{background:transparent;border:1px solid var(--line)}
.nt-intro{background:color-mix(in srgb,var(--violet) 6%,transparent);border-color:var(--line)}
.nt-sec{background:transparent;border-color:var(--line)}
.nt-table th,.nt-table td{border-color:var(--line)}
.nt-table th{background:color-mix(in srgb,var(--violet) 8%,transparent)}
.nt-note{background:color-mix(in srgb,var(--gold) 6%,transparent);border-color:var(--line)}
/* 이용후기 */
.rv-card{background:var(--bg-2);box-shadow:none}
.rv-card:hover{box-shadow:none;border-color:var(--gold)}
.rv-lockbox{background:transparent}

/* ===== 홈 화면 바로가기 배너(_footer.html) — 휴대폰 화면 맨 아래 ===== */
.a2hs-bar{position:fixed;z-index:160;left:0;right:0;bottom:0;display:flex;align-items:center;gap:10px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--bg-2);color:var(--ink);
  border-top:1px solid color-mix(in srgb,var(--gold) 45%,transparent);box-shadow:0 -10px 28px color-mix(in srgb,#000 35%,transparent);
  animation:a2hsUp .32s var(--ease,ease) both}
@keyframes a2hsUp{from{transform:translateY(100%)}to{transform:none}}
.a2hs-ic{flex:none;width:44px;height:44px;border-radius:11px}
.a2hs-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.35}
.a2hs-tx b{font-size:.9rem;color:var(--ink)}
.a2hs-tx span{font-size:.78rem;color:var(--muted);word-break:keep-all}
.a2hs-add{flex:none;padding:9px 16px;border-radius:var(--r-ui,8px);border:0;cursor:pointer;font:inherit;font-weight:700;font-size:.88rem;
  color:var(--on-primary,#1a1430);background:linear-gradient(135deg,#F6DFA0,var(--gold) 55%,#B8913F)}
.a2hs-x{flex:none;width:34px;height:34px;border:0;background:none;color:var(--muted);font-size:1.5rem;line-height:1;cursor:pointer}
.a2hs-x:hover{color:var(--ink)}
/* 배너가 떠 있는 동안 — 아래 내용과 '맨 위로' 단추가 가려지지 않게 */
body.a2hs-on{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
body.a2hs-on .to-top{bottom:calc(88px + env(safe-area-inset-bottom))}
@media (prefers-reduced-motion:reduce){.a2hs-bar{animation:none}}

/* ---------------------------------------------------------------- 연애 지수 테스트(/love-test/, 2026-10-28)
   시작 → 20문항(한 화면 한 문항, 큰 보기 단추) → 결과. 색은 토큰만 — Night·Parchment 모두. */
.lt-app{max-width:640px;margin:0 auto 40px;padding:28px 22px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-panel)}
.lt-screen[hidden],.lt-app [hidden]{display:none}
.lt-kicker{margin:0 0 6px;font-size:.8rem;letter-spacing:.06em;color:var(--gold)}
.lt-h{margin:0 0 8px;font-family:var(--f-display);font-size:1.6rem;line-height:1.3}
.lt-sub{margin:0 0 18px;color:var(--muted);font-size:.92rem;line-height:1.7}
.lt-targets{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 18px}
.lt-targets button{padding:14px 6px;border:1px solid var(--line);border-radius:var(--r-ui);background:none;color:var(--ink);
  font:inherit;font-size:1rem;cursor:pointer;transition:background .15s,border-color .15s}
.lt-targets button[aria-checked="true"]{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 16%,transparent);font-weight:600}
/* 두 가지 테스트 고르기(2026-10-28) — 내 마음 / 그 사람의 마음 */
.lt-kinds{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 22px}
.lt-kinds button{display:flex;flex-direction:column;gap:4px;text-align:left;padding:16px;border:1px solid var(--line);border-radius:var(--r-ui);
  background:none;color:var(--ink);font:inherit;cursor:pointer;transition:background .15s,border-color .15s;word-break:keep-all}
.lt-kinds button b{font-size:1.05rem;color:var(--ink)}
.lt-kinds button span{font-size:.88rem;line-height:1.55;color:var(--muted)}
.lt-kinds button[aria-checked="true"]{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 14%,transparent)}
.lt-kinds button[aria-checked="true"] b{color:var(--gold)}
.lt-h2{font-size:1.1rem}
.lt-rels{grid-template-columns:1fr 1fr}
.lt-rels button{word-break:keep-all;padding:14px 10px}
.lt-hint{margin:0 0 8px;font-size:.86rem;color:var(--gold)}
.lt-hint[hidden]{display:none}
/* '그 사람의 마음' 결과 — 문단을 사람이 말하듯 */
.lt-story p{margin:0 0 12px;line-height:1.9;word-break:keep-all}
.lt-story p:last-child{margin-bottom:0}
.lt-sig{margin:0 0 14px}
.lt-sig:last-child{margin-bottom:0}
.lt-sig .lt-line{margin:4px 0 0;font-size:.9rem;line-height:1.7;color:var(--muted);word-break:keep-all}
@media (max-width:560px){.lt-kinds{grid-template-columns:1fr}}
.lt-go{width:100%;padding:15px;font-size:1.02rem}
.lt-go.is-done{cursor:default}
.lt-note{margin:12px 0 0;text-align:center;font-size:.84rem;color:var(--muted)}
.lt-last-wrap{margin:10px 0 0;text-align:center}
.lt-app .btn.ghost{border:1px solid var(--line);color:var(--ink);padding:11px 18px}
.lt-progress{display:flex;align-items:center;gap:12px;margin:0 0 22px}
.lt-step{flex:none;font-family:var(--f-mono,monospace);font-size:.84rem;color:var(--muted);min-width:52px}
.lt-bar{flex:1;height:6px;border-radius:var(--r-pill);background:color-mix(in srgb,var(--ink) 10%,transparent);overflow:hidden}
.lt-bar i{display:block;height:100%;width:0;background:var(--gold);transition:width .3s var(--ease,ease)}
.lt-q{margin:0 0 20px;font-size:1.22rem;line-height:1.55;font-weight:600;word-break:keep-all;min-height:3.1em}
.lt-opts{display:grid;gap:10px}
.lt-opt{display:block;width:100%;text-align:left;padding:15px 18px;min-height:52px;border:1px solid var(--line);border-radius:var(--r-ui);
  background:color-mix(in srgb,var(--ink) 4%,transparent);color:var(--ink);font:inherit;font-size:1rem;line-height:1.45;
  word-break:keep-all;cursor:pointer;transition:background .15s,border-color .15s,transform .15s}
.lt-opt:hover{border-color:var(--gold)}
.lt-opt.is-on{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 20%,transparent);font-weight:600}
.lt-opt:active{transform:scale(.99)}
.lt-back{margin:18px 0 0;padding:6px 0;background:none;border:0;color:var(--muted);font:inherit;font-size:.88rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.lt-wait{text-align:center;padding:40px 0;color:var(--muted)}
.lt-spin{width:42px;height:42px;margin:0 auto 16px;border-radius:50%;border:3px solid color-mix(in srgb,var(--gold) 25%,transparent);
  border-top-color:var(--gold);animation:ltSpin .9s linear infinite}
@keyframes ltSpin{to{transform:rotate(360deg)}}
.lt-btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:22px 0 0}
.lt-hero{text-align:center;padding:6px 0 22px;border-bottom:1px solid var(--line);margin:0 0 20px}
.lt-score{display:flex;align-items:baseline;justify-content:center;gap:6px;margin:4px 0}
.lt-score b{font-family:var(--f-display);font-size:4rem;line-height:1;color:var(--gold);font-weight:600}
.lt-score span{color:var(--muted);font-size:1rem}
.lt-grade{margin:4px 0 10px;font-size:1.1rem;font-weight:600}
.lt-verdict{margin:0;line-height:1.7;word-break:keep-all}
.lt-card{padding:18px 0;border-bottom:1px solid var(--line)}
.lt-card h3{margin:0 0 12px;font-size:1.08rem}
.lt-card h4{margin:0 0 6px;font-size:.92rem;color:var(--gold)}
.lt-card p{line-height:1.75;word-break:keep-all}
.lt-card ul{margin:0;padding-left:1.1em;line-height:1.7}
.lt-row{display:grid;grid-template-columns:92px 1fr 42px;align-items:center;gap:10px;margin:8px 0;font-size:.9rem}
.lt-row-l{color:var(--ink);white-space:nowrap}
.lt-app a.btn{text-decoration:none;text-align:center}
.lt-row-bar{height:10px;border-radius:var(--r-pill);background:color-mix(in srgb,var(--ink) 10%,transparent);overflow:hidden}
.lt-row-bar i{display:block;height:100%;background:var(--violet);border-radius:inherit}
.lt-row.is-top .lt-row-bar i,.lt-row.src-heart .lt-row-bar i{background:var(--gold)}
.lt-row.src-background .lt-row-bar i{background:var(--upright)}
.lt-row-v{text-align:right;font-family:var(--f-mono,monospace);color:var(--muted);font-size:.84rem}
.lt-type h3{font-family:var(--f-display);font-size:1.7rem;margin:0 0 4px}
.lt-tag{margin:0 0 12px;font-weight:600}
.lt-theory{display:block;margin-top:2px;font-weight:400;font-size:.8rem;color:var(--muted)}
.lt-two{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:14px 0}
.lt-advice,.lt-match,.lt-kind{margin:10px 0 0}
.lt-advice b,.lt-match b,.lt-kind b{display:block;margin-bottom:2px;color:var(--gold);font-size:.9rem}
.lt-subtype{margin:12px 0 0;color:var(--muted);font-size:.9rem}
/* 결과 화면 — 상자형 카드(2026-10-28 운영자 시안): 원형 지수 · 제목 아이콘 · 두 칸 · 오른쪽 장식 아이콘 */
#lt-result .lt-box{position:relative;margin:0 0 14px;padding:18px 18px 16px;border:1px solid var(--line);border-radius:16px;
  background:color-mix(in srgb,var(--paper) 88%,transparent)}
#lt-result .lt-hero.lt-box{padding:20px 18px 22px;text-align:center}
.lt-ring{position:relative;width:136px;height:136px;margin:6px auto 8px}
.lt-ring svg{width:100%;height:100%;display:block}
.lt-ring circle{fill:none;stroke-width:9}
.lt-ring-bg{stroke:color-mix(in srgb,var(--ink) 12%,transparent)}
.lt-ring-fg{stroke:var(--gold);stroke-linecap:round}
.lt-ring-v{position:absolute;inset:0;display:flex;align-items:baseline;justify-content:center;gap:3px;padding-top:44px}
.lt-ring-v b{font-family:var(--f-display);font-size:2.7rem;line-height:1;color:var(--ink);font-weight:600}
.lt-ring-v span{font-size:.85rem;color:var(--muted)}
#lt-result .lt-h3{display:flex;align-items:center;gap:2px;margin:0 0 12px;font-size:1.05rem}
#lt-result .lt-h3 svg.ic{width:20px;height:20px}
#lt-result .lt-name{margin:0 0 4px;font-family:var(--f-ko-display);font-size:1.55rem;color:var(--gold);line-height:1.3}
#lt-result .has-deco .lt-kicker,#lt-result .has-deco .lt-name{padding-right:64px}
.lt-deco{position:absolute;top:16px;right:16px;display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:14px}
.lt-deco svg.ic{width:30px;height:30px;margin:0}
.lt-deco.is-violet{background:color-mix(in srgb,var(--violet) 20%,transparent)}.lt-deco.is-violet svg.ic{color:var(--violet)}
.lt-deco.is-gold{background:color-mix(in srgb,var(--gold) 18%,transparent)}.lt-deco.is-gold svg.ic{color:var(--gold)}
.lt-deco.is-rose{background:color-mix(in srgb,var(--rose) 20%,transparent)}.lt-deco.is-rose svg.ic{color:var(--rose)}
#lt-result .lt-lab{display:flex;align-items:center;gap:4px;margin:0 0 4px;color:var(--gold);font-size:.92rem;font-weight:600}
#lt-result .lt-lab svg.ic{width:16px;height:16px;margin:0 0 0 2px;color:currentColor}
#lt-result .lt-lab.is-good{color:var(--upright)}
#lt-result .lt-lab.is-bad,#lt-result .lt-lab.is-rose{color:var(--rose)}
#lt-result .lt-two{gap:12px;padding:12px 0 2px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
#lt-result .lt-two ul{font-size:.9rem}
#lt-result .lt-two p{font-size:.9rem;margin:0}
#lt-result .lt-advice,#lt-result .lt-match,#lt-result .lt-kind{margin:12px 0 0}
#lt-result .lt-muted{color:var(--muted);font-size:.88rem;margin:0}
#lt-result .lt-subtype{font-size:.85rem}
@media (max-width:640px){#lt-result .lt-box{padding:16px 14px 14px}#lt-result .lt-two{grid-template-columns:1fr 1fr;gap:10px}
  #lt-result .lt-two ul{padding-left:1em}}
.lt-disclaimer{margin:18px 0 0;font-size:.8rem;color:var(--faint);text-align:center;line-height:1.6}
.lt-about .table-wrap{overflow-x:auto}
/* 시작 화면 맨 위 안내 — 1번만 · 천천히 · 후기 쓰면 1번 더 */
.lt-once{margin:0 0 18px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);border-radius:var(--r-ui);
  background:color-mix(in srgb,var(--gold) 9%,transparent);font-size:.9rem;line-height:1.65;word-break:keep-all}
.lt-once b{display:block;margin-bottom:2px;color:var(--gold)}
.lt-once a{color:var(--gold)}
/* 테스트 화면 아래는 요약만, 전문은 /love-test/guide */
.lt-brief{max-width:640px;margin:0 auto}
.lt-brief li{word-break:keep-all}
.lt-more{margin:18px 0 0;text-align:center}
.lt-more .btn{text-decoration:none}
.lt-more .btn.ghost{border:1px solid var(--line);color:var(--ink);padding:11px 22px}
@media (max-width:640px){
  .lt-app{padding:22px 16px;margin-left:-4px;margin-right:-4px}
  .lt-h{font-size:1.35rem}
  .lt-q{font-size:1.1rem;min-height:0}
  .lt-two{grid-template-columns:1fr;gap:6px}
  .lt-row{grid-template-columns:84px 1fr 38px;gap:8px}
  .lt-score b{font-size:3.4rem}
  .lt-btns .btn{width:100%;text-align:center}
}
@media (prefers-reduced-motion:reduce){.lt-spin{animation-duration:2s}.lt-opt,.lt-bar i{transition:none}}

/* 오류 안내 페이지(404·405·500 등, page_404.html) — 숫자 없이 가운데 상자 하나 + 한국어·영문 */
.err-page{padding:64px 16px 56px;text-align:center;word-break:keep-all}
.err-page .err-actions a{text-decoration:none}
.err-page .err-box{max-width:560px;margin:0 auto;padding:44px 32px 36px;border:1px solid var(--line);border-radius:20px;background:var(--paper);box-shadow:var(--shadow)}
.err-page .err-title{font-size:28px;margin:0 0 14px}
.err-page .err-lead{margin:0;line-height:1.8;color:var(--muted)}
.err-page .err-en{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--line);font-size:14px;line-height:1.7;color:var(--faint)}
.err-page .err-en p{margin:0}
.err-page .err-en-title{display:flex;flex-direction:column;align-items:center;gap:4px;margin-bottom:10px!important}
.err-page .err-en-title b{font-family:var(--f-display);font-style:italic;font-size:24px;font-weight:500;color:var(--ink);letter-spacing:.02em}
.err-page .err-star{color:var(--gold);font-size:13px;line-height:1}
.err-page .err-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:28px}
.err-page .err-links{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;margin:28px 0 0;font-size:14px}
@media (max-width:640px){.err-page{padding:36px 16px 40px}.err-page .err-box{padding:32px 20px 28px}.err-page .err-title{font-size:22px}.err-page .err-actions .btn{flex:1 1 100%}.err-page .err-en-lead br{display:none}}