/* ==========================================================================
   내일사주 디자인 H (2026-10-10) — 마루부리 제목 · 원티드산스 본문 · 쪽빛 1색 · 오행 띠
   근거: docs/design-261009 (25안 · 5인 심사 1위 H, JUDGE-RESULT.md)

   ★ 모든 규칙은 html[data-design="h"] 아래에만 있다. 기존 디자인(classic)은 각 페이지의
     <style> 그대로 살아 있고, 이 파일은 그 위에 덮을 뿐이다.
     - 개인 되돌리기: 주소 뒤 ?design=classic (그 브라우저에 저장, ?design=h 로 해제)
     - 전체 되돌리기: node tools/set-design.mjs classic → 배포
   ★ 전략 = 이름표(토큰) 재매핑. --paper·--ink·--seal 같은 이름은 그대로 두고 값만 바꾼다.
     페이지 수십 곳이 이 이름을 쓰므로 한 번에 같이 바뀐다. 그다음 기존 디자인의 '표식'
     (크림 바탕·대문자 자간·인주 왼쪽 띠·둥근 상자)을 H 문법으로 덮는다.
   ★ .h-only 요소는 H에서만 보인다(기본 hidden 속성 — 이 파일이 안 실리면 안 보인다).
   ========================================================================== */

/* 마루부리(네이버, SIL OFL) — 공식 CDN 파일 그대로. font-display·unicode-range만 우리가 정한다.
   unicode-range 에 한자를 빼서 한자는 Noto Serif KR 로 넘긴다(마루부리엔 한자가 없다 — 261009 구현 심사 실측). */
@font-face{font-family:"NJS Maru";font-weight:400;font-display:swap;
  src:url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Regular.woff2) format("woff2");
  unicode-range:U+0000-024F,U+1100-11FF,U+2000-206F,U+2190-21FF,U+3000-303F,U+3130-318F,U+AC00-D7A3,U+FF00-FFEF;}
@font-face{font-family:"NJS Maru";font-weight:700;font-display:swap;
  src:url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Bold.woff2) format("woff2");
  unicode-range:U+0000-024F,U+1100-11FF,U+2000-206F,U+2190-21FF,U+3000-303F,U+3130-318F,U+AC00-D7A3,U+FF00-FFEF;}

/* H 전용 요소는 기본 숨김(hidden 속성). H에서만 연다. */
html[data-design="h"] .h-only[hidden]{display:block;}
html[data-design="h"] .h-only.oh-band[hidden],html[data-design="h"] .h-only.h-top[hidden]{display:grid;}
html[data-design="h"] .h-hide{display:none !important;}

/* ── 1. 이름표 재매핑 ───────────────────────────────────────────────── */
html[data-design="h"]{
  --paper:#FFFFFF;      /* 지면 — 흰 종이 */
  --paper-2:#F4F6F9;    /* 한 겹 — 쿨 그레이 */
  --card:#FFFFFF;
  --ink:#141414;        /* 먹 */
  --ink-soft:#4D5562;   /* 본문 보조 — 흰 바탕 7.5:1 */
  --ink-faint:#5F6673;  /* 캡션 — 흰 바탕 5.9:1 · 회색 바탕(#F4F6F9) 5.4:1 (#6B7280 은 회색 위에서 4.47 로 미달, 261010 실측) */
  --line:#E4E7EC;
  --line-2:#C9CFD8;
  --seal:#2A4D9B;       /* 브랜드 1색 = 쪽빛. 인주(빨강) 자리를 대신한다 */
  --seal-deep:#1F3A78;
  --seal-soft:#EDF1FA;
  --warn:#C8202A;       /* 오류·주의 전용 — 쪽빛과 역할 분리 */
  --ok:#1B7F4C;
  /* 오행 글자색 — 흰 바탕에서 글자로 읽혀야 해서 4.5:1 이상으로 눌렀다 */
  --o-mok:#2A4D9B; --o-hwa:#C8202A; --o-to:#9A6A00; --o-geum:#5F6673; --o-su:#141414;
  /* 오행 띠(면) — 오방색 그대로. 글자는 위에 흰색/먹 중 대비 높은 쪽 */
  --b-mok:#2A4D9B; --b-hwa:#D7262A; --b-to:#F2B705; --b-geum:#FFFFFF; --b-su:#141414;
  --serif:"NJS Maru","Noto Serif KR",serif;
  --batang:"Wanted Sans Variable","Wanted Sans","Noto Sans KR",sans-serif;
  --sans:"Wanted Sans Variable","Wanted Sans","Noto Sans KR",sans-serif;
  --hanja:"Noto Serif KR",serif;
}
html[data-design="h"] body{
  background:#fff;background-image:none;color:var(--ink);
  font-family:var(--sans);letter-spacing:-.01em;line-height:1.7;
  -webkit-font-smoothing:antialiased;font-feature-settings:"calt" 1;
}
html[data-design="h"] input,html[data-design="h"] select,html[data-design="h"] textarea,html[data-design="h"] button{font-family:inherit;}

/* 기존 디자인의 '대문자 넓은 자간' 눈썹 — 한글엔 라틴 자간을 쓰지 않는다 */
html[data-design="h"] .eyebrow,html[data-design="h"] .section-eyebrow,html[data-design="h"] .field label,
html[data-design="h"] .consult .clabel,html[data-design="h"] .psych-item .pi-label,html[data-design="h"] .rtoc .rtoc-l,
html[data-design="h"] .report-sub,html[data-design="h"] .goose .gl,html[data-design="h"] .paid-divider,
html[data-design="h"] .bs-top,html[data-design="h"] .bs-label,html[data-design="h"] .bs-foot,html[data-design="h"] .bs-best .bl,
html[data-design="h"] .bs-usp span,html[data-design="h"] .bs-sq h5,html[data-design="h"] .bs-persona .pk,html[data-design="h"] .bs-stp .k,
html[data-design="h"] .lc-eb,html[data-design="h"] .lc-k,html[data-design="h"] .adfit-label,html[data-design="h"] .sf-copy,
html[data-design="h"] .dl-k,html[data-design="h"] .dl-date,html[data-design="h"] .zd-k,html[data-design="h"] .isp-r dt,
html[data-design="h"] .rw-l span,html[data-design="h"] .pro-row .m,html[data-design="h"] .seg button,html[data-design="h"] .restart,
html[data-design="h"] .cta,html[data-design="h"] .job-desc strong,html[data-design="h"] .joblist-hint,html[data-design="h"] .md-h,
html[data-design="h"] .bl-txt,html[data-design="h"] .pb-chip span,html[data-design="h"] .qk-tag,html[data-design="h"] .ry-tag{
  letter-spacing:0;text-transform:none;
}
/* 11px 하한 — 9~10px 글자를 없앤다(공유 카드 #shareCard 안은 이미지용 고정 배치라 제외) */
html[data-design="h"] .pro-row .m,html[data-design="h"] .iy-yr,html[data-design="h"] .adfit-label,html[data-design="h"] .sf-copy,
html[data-design="h"] .bs-top,html[data-design="h"] .bs-label,html[data-design="h"] .bs-foot,html[data-design="h"] .bs-best .bl,
html[data-design="h"] .bs-rare,html[data-design="h"] .bs-myeong-why,html[data-design="h"] .bs-sq h5,html[data-design="h"] .bs-stp .k,
html[data-design="h"] .bs-persona .pk,html[data-design="h"] .bs-usp span,html[data-design="h"] .bs-cmp h6,html[data-design="h"] .ry-tag,
html[data-design="h"] .rw-l span,html[data-design="h"] .rw-m i,html[data-design="h"] .zd-k,html[data-design="h"] .pb-chip span,
html[data-design="h"] .lc-k,html[data-design="h"] .lc-u,html[data-design="h"] .dl-lucky i,html[data-design="h"] .qk-tag,
html[data-design="h"] .cax-p i,html[data-design="h"] .zd-chip i{font-size:11px;}

/* 한글 이탤릭 금지 */
html[data-design="h"] .bs-slogan{font-style:normal;}

/* ── 2. 공통 머리 — 워드마크 + 오늘 일진 ─────────────────────────────── */
html[data-design="h"] .h-top{grid-template-columns:1fr auto auto;column-gap:12px;align-items:baseline;padding:2px 0 12px;margin:0 0 6px;border-bottom:1px solid var(--line);}
html[data-design="h"] .h-word{font-family:var(--serif);font-weight:700;font-size:18px;color:var(--ink);text-decoration:none;}
html[data-design="h"] .h-login{font-size:12px;font-weight:600;color:var(--seal);text-decoration:none;}
html[data-design="h"] .h-date{font-size:12px;font-weight:500;color:var(--ink-soft);font-variant-numeric:tabular-nums;}
html[data-design="h"] .h-date .hz{font-family:var(--hanja);font-weight:400;}

/* ── 3. 첫 화면 ─────────────────────────────────────────────────────── */
/* 첫 화면 머리 — 제목·소개(왼쪽) + 눈썹을 세운 세로 띠(오른쪽). H 시그니처.
   세로 띠가 길어지면 격자 줄이 같이 늘어나 아래 오행 띠와 겹치지 않는다. 워드마크가 위에 있으니 띠에선 브랜드명을 뺀다 */
html[data-design="h"] .hero-h{display:grid;grid-template-columns:minmax(0,1fr) 34px;column-gap:14px;margin-top:22px;}
html[data-design="h"] .hero-h > h1{grid-column:1;grid-row:1;margin:0 0 14px;}
html[data-design="h"] .hero-h > .lede{grid-column:1;grid-row:2;}
html[data-design="h"] .hero-h > .eyebrow{grid-column:2;grid-row:1 / span 2;align-self:stretch;
  writing-mode:vertical-rl;text-orientation:mixed;white-space:nowrap;margin:4px 0 0;
  font-family:var(--serif);font-weight:400;font-size:13px;letter-spacing:.04em;color:var(--ink-soft);
  border-left:1px solid var(--line);padding:0 0 0 10px;}
html[data-design="h"] .eb-brand{display:none;}
html[data-design="h"] h1{font-family:var(--serif);font-weight:700;font-size:clamp(32px,8.4vw,46px);line-height:1.22;letter-spacing:-.015em;margin:22px 0 14px;}
html[data-design="h"] h1 .han{color:var(--seal);font-family:var(--hanja);font-weight:700;}
html[data-design="h"] .lede{font-family:var(--sans);font-size:14.5px;line-height:1.75;color:var(--ink-soft);max-width:none;}

/* 오행 띠 — 첫 화면은 다섯 기운 소개, 결과는 내 분포 */
html[data-design="h"] .oh-cap{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;font-weight:500;color:var(--ink-soft);margin:24px 0 8px;}
html[data-design="h"] .oh-cap b{color:var(--ink);font-weight:700;}
html[data-design="h"] .oh-cap .hz{font-family:var(--hanja);}
html[data-design="h"] .oh-band{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;}
html[data-design="h"] .oh-band > div{position:relative;min-height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:11px;font-weight:700;}
html[data-design="h"] .oh-band .h{font-family:var(--hanja);font-size:22px;line-height:1;font-weight:700;}
html[data-design="h"] .oh-band .n{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;}
html[data-design="h"] .oh-band .o0{background:var(--b-mok);color:#fff;}
html[data-design="h"] .oh-band .o1{background:var(--b-hwa);color:#fff;}
html[data-design="h"] .oh-band .o2{background:var(--b-to);color:var(--ink);}
html[data-design="h"] .oh-band .o3{background:var(--b-geum);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink);}
html[data-design="h"] .oh-band .o4{background:var(--b-su);color:#fff;}
html[data-design="h"] .oh-band .zero{opacity:.38;}
/* '일간' 표 — 칸 맨 위 띠. 한자를 가리지 않게 칸 위쪽을 비워 둔다 */
html[data-design="h"] .oh-band .me{position:absolute;top:0;left:0;right:0;font-size:11px;line-height:16px;font-weight:700;background:var(--seal);color:#fff;text-align:center;}
html[data-design="h"] .oh-band .o0 .me{background:var(--ink);}
html[data-design="h"] .oh-result .oh-band > div{min-height:76px;padding-top:12px;}
html[data-design="h"] .oh-legend{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--ink-soft);margin:8px 0 0;}

/* 업·연·합 세 칸 — 상자 대신 위쪽 먹선 */
html[data-design="h"] .topics3{gap:10px;margin:24px 0 0;align-items:start;}
html[data-design="h"] .t3{background:none;border:0;border-top:1px solid var(--ink);border-radius:0;padding:12px 0 0;gap:2px;box-shadow:none;}
html[data-design="h"] .t3:hover{border-color:var(--seal);}
html[data-design="h"] .t3-han{font-family:var(--hanja);font-size:28px;font-weight:700;color:var(--seal);margin-bottom:8px;}
html[data-design="h"] .t3 b{font-family:var(--sans);font-size:13.5px;font-weight:700;}
html[data-design="h"] .t3-d{font-family:var(--sans);font-size:12px;color:var(--ink-soft);line-height:1.45;}
html[data-design="h"] .t3-n{font-family:var(--sans);font-size:11px;color:var(--seal);margin-top:4px;}
html[data-design="h"] .rule{background:var(--line);margin:30px 0 24px;}

/* 진행 단계 — 점·선 대신 번호 */
html[data-design="h"] .form-steps{counter-reset:fs;gap:16px;margin:0 0 6px;}
html[data-design="h"] .fstep{counter-increment:fs;font-size:12px;font-weight:500;color:var(--ink-faint);gap:4px;}
html[data-design="h"] .fstep::before{content:counter(fs);font-weight:700;}
html[data-design="h"] .fstep.active{color:var(--ink);font-weight:700;}
html[data-design="h"] .fstep.active::before{color:var(--seal);}
html[data-design="h"] .fstep.done{color:var(--ink-soft);}
html[data-design="h"] .fstep-dot,html[data-design="h"] .fstep-line{display:none;}

/* 나의 사주 / 궁합 / 성별 / 계열 — 상자 버튼 대신 밑줄 탭 */
html[data-design="h"] .seg{display:flex;flex-wrap:wrap;gap:4px 18px;border:0;border-bottom:1px solid var(--line);background:none;width:100%;}
html[data-design="h"] .seg button,
html[data-design="h"] .seg button[aria-pressed="true"]{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;
  padding:12px 0;min-height:44px;font-family:var(--sans);font-size:15px;font-weight:700;color:var(--ink-faint);}
html[data-design="h"] .seg button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--seal);}

/* 입력 — 상자 대신 밑줄 칸 */
html[data-design="h"] .form{gap:4px;}
html[data-design="h"] .field{padding:14px 0 12px;border-bottom:0;}
html[data-design="h"] .field label{font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-bottom:4px;}
html[data-design="h"] .sub-note{color:var(--ink-faint);font-weight:400;}
html[data-design="h"] .field input[type="text"],html[data-design="h"] .field input[type="date"],html[data-design="h"] .field input[type="time"],
html[data-design="h"] .field input[type="email"],html[data-design="h"] .field input[type="number"],html[data-design="h"] .field select,
html[data-design="h"] .psych-item select{
  -webkit-appearance:none;appearance:none;width:100%;min-height:48px;box-sizing:border-box;
  background:transparent;border:0;border-bottom:1.5px solid var(--ink);border-radius:0;
  padding:10px 2px;font-family:var(--sans);font-size:17px;font-weight:500;color:var(--ink);
}
html[data-design="h"] .field select,html[data-design="h"] .psych-item select{
  padding-right:28px;background-repeat:no-repeat;background-position:right 2px center;background-size:16px 16px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234D5562' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
html[data-design="h"] .row{gap:12px;}
html[data-design="h"] .row > *{flex:1 1 140px;min-width:0;}
html[data-design="h"] .field input:focus,html[data-design="h"] .field select:focus,html[data-design="h"] .psych-item select:focus{
  outline:none;border-bottom-color:var(--seal);box-shadow:0 1.5px 0 var(--seal);
}
html[data-design="h"] .field input::placeholder{color:var(--ink-faint);opacity:1;}
html[data-design="h"] .hint{font-family:var(--sans);font-size:12px;color:var(--ink-soft);margin-top:8px;}
html[data-design="h"] .field.filled{border-left:0;padding-left:0;margin-left:0;}
html[data-design="h"] .field.filled > label{color:var(--seal);}
html[data-design="h"] .check{font-family:var(--sans);font-size:13px;color:var(--ink-soft);min-height:40px;}
html[data-design="h"] .check input{accent-color:var(--seal);}
html[data-design="h"] .person-head{font-family:var(--serif);font-weight:700;font-size:17px;color:var(--ink);border-top:1.5px solid var(--ink);padding-top:12px;}
html[data-design="h"] .chip{border-radius:0;font-family:var(--sans);font-size:13.5px;}
html[data-design="h"] .err{color:var(--warn);font-family:var(--sans);}

/* 버튼 — 주 행동 하나 = 쪽빛 채움. 나머지는 먹 외곽선 */
html[data-design="h"] .cta{background:var(--seal);color:#fff;border:0;border-radius:0;
  font-family:var(--sans);font-weight:700;font-size:16px;padding:15px 18px;min-height:52px;}
html[data-design="h"] .cta:hover{background:var(--seal-deep);}
html[data-design="h"] .cta.hero{background:var(--seal);border-color:var(--seal);}
html[data-design="h"] .cta.alt{background:#fff;color:var(--ink);border:1px solid var(--ink);}
html[data-design="h"] .cta.alt:hover{background:var(--ink);color:#fff;}
html[data-design="h"] .cta-line{border:1.5px solid var(--ink);color:var(--ink);background:#fff;border-radius:0;
  font-family:var(--sans);font-weight:700;font-size:15px;padding:12px 18px;min-height:46px;}
html[data-design="h"] .cta-line:hover{background:var(--ink);color:#fff;}
html[data-design="h"] .share-btn,html[data-design="h"] .ip-btn{border-radius:0;font-family:var(--sans);background:var(--seal);}
html[data-design="h"] .restart{border:1px solid var(--line-2);border-radius:0;font-family:var(--sans);min-height:46px;}
html[data-design="h"] .coffee{background:var(--seal);font-family:var(--sans);}
html[data-design="h"] .coffee:hover{background:var(--seal-deep);}
html[data-design="h"] .pro{font-family:var(--sans);font-size:11px;letter-spacing:0;background:var(--ink);}
html[data-design="h"] .toss-bridge{background:none;border:0;border-top:1.5px solid var(--ink);padding:16px 0 0;margin:28px 0 4px;}
html[data-design="h"] .toss-bridge p{font-size:14px;color:var(--ink-soft);}

/* 더 정확히 보기·심층 자기이해 펼침 */
html[data-design="h"] .psych-toggle,html[data-design="h"] .psych-toggle.open{background:#fff;border:1px solid var(--line-2);border-radius:0;padding:14px;min-height:48px;}
html[data-design="h"] .psych-toggle.open{border-color:var(--ink);}
html[data-design="h"] .psych-toggle .pt-label,html[data-design="h"] .psych-toggle.open .pt-label{font-family:var(--sans);font-weight:600;color:var(--ink);letter-spacing:0;}
html[data-design="h"] .psych-toggle .pt-badge,html[data-design="h"] .psych-toggle.open .pt-badge{background:#fff;color:var(--seal);border:1px solid var(--seal);font-family:var(--sans);letter-spacing:0;}
html[data-design="h"] .psych-toggle .pt-arrow,html[data-design="h"] .psych-toggle.open .pt-arrow{color:var(--ink-soft);}
html[data-design="h"] .psych-note{font-family:var(--sans);color:var(--ink-soft);}
html[data-design="h"] .psych-chip,html[data-design="h"] .ocean-btn{border-radius:0;border-color:var(--line-2);font-family:var(--sans);color:var(--ink);}
html[data-design="h"] .psych-chip.on,html[data-design="h"] .ocean-btn.on{background:var(--seal-soft);border-color:var(--seal);color:var(--seal);}
html[data-design="h"] .psych-chip.on small{color:var(--seal);}

/* ── 4. 결과 ────────────────────────────────────────────────────────── */
html[data-design="h"] #result{background-image:none;}
html[data-design="h"] .mh{background:#fff;border:1px solid var(--line);border-radius:0;}
html[data-design="h"] .mh-han{font-family:var(--hanja);}
html[data-design="h"] .mh-meta b{font-family:var(--serif);}
html[data-design="h"] .topicbar{border-top:1.5px solid var(--ink);}
html[data-design="h"] .ttab{font-family:var(--sans);font-size:15px;font-weight:700;color:var(--ink-faint);min-height:48px;}
html[data-design="h"] .ttab[aria-selected="true"]{color:var(--ink);}
html[data-design="h"] .ttab[aria-selected="true"]::after{left:0;right:0;background:var(--seal);}

/* 명식판 — 위 먹선 하나, 기둥 사이 가는 괘선, 일주만 쪽빛 */
html[data-design="h"] .myeongsik{border:0;border-top:1.5px solid var(--ink);border-bottom:1px solid var(--line);background:none;margin:22px 0 0;}
html[data-design="h"] .pillar{padding:14px 4px 16px;}
html[data-design="h"] .pillar .plabel{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink-soft);margin-bottom:10px;}
/* 한자는 먹색 하나 — 오행은 바로 아래 분포 띠가 색으로 말한다(흙색 글자가 갈색으로 탁해지던 문제도 함께 해소).
   기둥 한자의 색은 render() 인라인 style 이라 !important 로만 덮인다 */
html[data-design="h"] .pillar .han-stem,html[data-design="h"] .pillar .han-branch{font-family:var(--hanja);font-weight:700;font-size:clamp(32px,9vw,42px);line-height:1.12;color:var(--ink) !important;}
html[data-design="h"] .pillar .kr{font-family:var(--sans);font-size:12px;color:var(--ink-soft);}
html[data-design="h"] .pillar.self{box-shadow:inset 0 -3px 0 var(--seal);}
html[data-design="h"] .pillar.self .plabel{color:var(--seal);}
html[data-design="h"] .pillar.self::after{font-family:var(--hanja);background:var(--seal);top:10px;right:6px;width:18px;height:18px;line-height:18px;font-size:11px;}
html[data-design="h"] .caption{font-family:var(--sans);font-size:12px;color:var(--ink-soft);text-align:left;margin:12px 0 0;padding-bottom:4px;}

html[data-design="h"] .section-eyebrow{font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--seal);margin:32px 0 8px;}
html[data-design="h"] .ilgan-line{font-family:var(--serif);font-weight:700;font-size:22px;line-height:1.4;}
html[data-design="h"] .verdict{font-family:var(--sans);font-size:15px;line-height:1.8;}
html[data-design="h"] .verdict strong{color:var(--seal);}
html[data-design="h"] .ilgan-sub{font-family:var(--sans);font-size:14px;line-height:1.75;color:var(--ink-soft);}
html[data-design="h"] .badge{font-family:var(--sans);font-size:13px;padding:3px 9px;}
html[data-design="h"] .bar-track{background:#EEF0F3;border:0;height:6px;}
html[data-design="h"] .bar-row .name{font-family:var(--sans);font-size:13px;}
html[data-design="h"] .bar-row .num{font-family:var(--sans);font-variant-numeric:tabular-nums;}

/* 장(一·二·三·四) — 상자·채움 대신 괘선 한 줄씩 */
html[data-design="h"] details.rgroup,html[data-design="h"] details.rgroup[open]{background:none;border:0;border-top:1px solid var(--line);border-radius:0;margin:0;}
html[data-design="h"] details.rgroup:last-of-type{border-bottom:1px solid var(--line);}
html[data-design="h"] details.rgroup>summary,html[data-design="h"] details.rgroup[open]>summary{background:none;border-bottom:0;padding:16px 0;min-height:56px;}
html[data-design="h"] details.rgroup>summary .rg-cn{font-family:var(--hanja);font-weight:700;font-size:22px;color:var(--seal);width:26px;}
html[data-design="h"] details.rgroup>summary{justify-content:flex-start;gap:14px;}
html[data-design="h"] details.rgroup .rg-head{flex:1;}
html[data-design="h"] details.rgroup .rg-title,html[data-design="h"] details.rgroup[open]>summary .rg-title{font-family:var(--serif);font-weight:700;font-size:16px;color:var(--ink);}
html[data-design="h"] details.rgroup .rg-sub,html[data-design="h"] details.rgroup[open]>summary .rg-sub{font-family:var(--sans);font-size:12px;color:var(--ink-soft);}
html[data-design="h"] details.rgroup>summary .rg-cn,html[data-design="h"] details.rgroup[open]>summary .rg-cn{color:var(--seal);}
html[data-design="h"] details.rgroup .rg-toggle::before{font-family:var(--sans);font-size:12px;color:var(--seal);}
html[data-design="h"] details.rgroup[open] .rg-toggle::before{color:var(--ink-soft);}
html[data-design="h"] details.rgroup .rg-arr,html[data-design="h"] details.rgroup[open] .rg-arr{border:0;width:24px;height:24px;background:none;color:var(--ink-soft);}
html[data-design="h"] details.rgroup>.rg-body{padding:0 0 18px;}
html[data-design="h"] .chapter{border-top:1.5px solid var(--ink);}
html[data-design="h"] .chapter .cn{font-family:var(--hanja);font-weight:700;font-size:24px;color:var(--seal);}
html[data-design="h"] .chapter .ct{font-family:var(--serif);}
html[data-design="h"] .chapter .cs{font-family:var(--sans);font-size:12px;color:var(--ink-soft);}

/* 설명 칸 — 인주 왼쪽 띠 대신 위쪽 먹선 */
html[data-design="h"] .panel{border-left:0 !important;border-top:1.5px solid var(--ink);padding:12px 0 2px;margin:22px 0;}
html[data-design="h"] .panel.lv{border-top:1px solid var(--line);}
html[data-design="h"] .panel h3{font-family:var(--serif);font-weight:700;font-size:16.5px;}
html[data-design="h"] .panel p{font-family:var(--sans);font-size:14.5px;line-height:1.8;}
html[data-design="h"] .joblist{gap:6px;}
html[data-design="h"] .job{border:1px solid var(--seal);color:var(--seal);font-family:var(--sans);font-weight:500;font-size:13.5px;padding:9px 12px;min-height:40px;border-radius:0;}
html[data-design="h"] .job::before{color:var(--seal);}
html[data-design="h"] .job:hover{background:var(--seal-soft);}
html[data-design="h"] .job.active{background:var(--seal);color:#fff;border-color:var(--seal);}
html[data-design="h"] .joblist-hint{font-family:var(--sans);color:var(--ink-soft);}
html[data-design="h"] .job-desc{font-family:var(--sans);font-size:14px;line-height:1.75;background:var(--seal-soft);border-left:0;padding:14px 16px;}
html[data-design="h"] .job-desc strong{font-family:var(--sans);font-size:12px;color:var(--seal);}
/* 소름 한 줄 — 먹 상자 대신 쪽빛 왼쪽 띠 인용 */
html[data-design="h"] .goose{background:none;color:var(--ink);border-left:3px solid var(--seal);padding:4px 0 4px 16px;margin:26px 0 8px;}
html[data-design="h"] .goose .gl{font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--seal);margin:0 0 6px;}
html[data-design="h"] .goose p{font-family:var(--serif);font-weight:400;font-size:16px;line-height:1.75;color:var(--ink);}
html[data-design="h"] .dae{background:#fff;border-color:var(--line);font-family:var(--sans);}
html[data-design="h"] .dae.on{background:var(--seal);border-color:var(--seal);color:#fff;}
html[data-design="h"] .rtoc a{border:1px solid var(--line-2);border-radius:0;font-family:var(--sans);font-size:13px;color:var(--ink);background:#fff;min-height:40px;display:inline-flex;align-items:center;}
html[data-design="h"] .rtoc a:hover{border-color:var(--seal);color:var(--seal);}
html[data-design="h"] .rtoc .rtoc-l{font-family:var(--sans);font-size:12px;color:var(--ink-soft);}

/* 무료/유료 경계 — 가는 선 한 줄 */
html[data-design="h"] .paid-divider{display:flex;align-items:center;gap:12px;border:0;padding:0;margin:34px 0 18px;font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--ink-soft);}
html[data-design="h"] .paid-divider::before,html[data-design="h"] .paid-divider::after{content:"";flex:1;height:1px;background:var(--line-2);}
html[data-design="h"] .tq-cta{background:var(--seal-soft);border:1px solid var(--line);border-left:1px solid var(--line);padding:18px 16px;}
html[data-design="h"] .tq-cta .clabel{font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--ink-soft);letter-spacing:0;text-transform:none;}
/* 결과 안의 한 줄 입력(관심 직종 등) — 첫 화면 입력과 같은 밑줄 칸 */
html[data-design="h"] .tq-cta input[type="text"],html[data-design="h"] #stratTarget{
  -webkit-appearance:none;appearance:none;width:100%;min-height:46px;box-sizing:border-box;margin:2px 0 12px;
  background:transparent;border:0;border-bottom:1.5px solid var(--ink);border-radius:0;padding:10px 2px;
  font-family:var(--sans);font-size:15px;color:var(--ink);}
html[data-design="h"] .tq-cta input[type="text"]:focus{outline:none;border-bottom-color:var(--seal);box-shadow:0 1.5px 0 var(--seal);}
html[data-design="h"] .pro-row{min-height:52px;}
html[data-design="h"] .pro-row .t{font-family:var(--sans);font-weight:600;}
html[data-design="h"] .pro-row .m{color:var(--seal);font-weight:700;}
html[data-design="h"] .consult{border-top:1.5px solid var(--ink);}
html[data-design="h"] .consult .clabel{font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--ink-soft);}
html[data-design="h"] .consult input[type="text"],html[data-design="h"] .consult textarea,
html[data-design="h"] .rp-actions .rp-mail input,html[data-design="h"] .notify input{background:#fff;border:1px solid var(--line-2);border-radius:0;font-family:var(--sans);min-height:46px;}
html[data-design="h"] .consult input:focus,html[data-design="h"] .consult textarea:focus{outline:2px solid var(--seal);}
html[data-design="h"] .answer{font-family:var(--sans);font-size:15px;line-height:1.85;}
html[data-design="h"] .loading,html[data-design="h"] .bl-txt{font-family:var(--sans);}
html[data-design="h"] .bl-seal{font-family:var(--hanja);}
html[data-design="h"] .lockbox{background:#fff;border:1.5px solid var(--ink);border-radius:0;}
html[data-design="h"] .lb-h{font-family:var(--serif);}
html[data-design="h"] .lb-list li{font-family:var(--sans);}
html[data-design="h"] .rp-actions .rp-msg.err,html[data-design="h"] .pay-consent.need{color:var(--warn);}
html[data-design="h"] .pay-consent{font-family:var(--sans);}

/* 심층 리포트(PRO) */
html[data-design="h"] .report{border:1.5px solid var(--ink);}
html[data-design="h"] .report-h,html[data-design="h"] .rsec-t{font-family:var(--serif);}
html[data-design="h"] .report-sub{font-family:var(--sans);font-size:12px;}
html[data-design="h"] .rsec-b{font-family:var(--sans);font-size:15px;line-height:1.85;text-align:left;}
html[data-design="h"] .report-cover .cov-pillars .cp b{font-family:var(--hanja);}
html[data-design="h"] .mcell{font-family:var(--sans);}
html[data-design="h"] .mcell.fav{background:var(--seal-soft);}
html[data-design="h"] .mcell .mg{font-family:var(--hanja);}

/* 인연·궁합 탭 — 둥근 카드·크림 틴트를 흰 종이 + 괘선으로 */
html[data-design="h"] .md,html[data-design="h"] .qk,html[data-design="h"] .zd,html[data-design="h"] .isp,html[data-design="h"] .pastbox,
html[data-design="h"] .rwin,html[data-design="h"] .dl-card,html[data-design="h"] .lv-radar-wrap{background:#fff;border:1px solid var(--line);border-radius:0;}
html[data-design="h"] .isp{border-color:var(--line-2);}
html[data-design="h"] .md-h{font-family:var(--hanja);}
html[data-design="h"] .md b,html[data-design="h"] .qk-h,html[data-design="h"] .zd-h,html[data-design="h"] .isp-h,html[data-design="h"] .pb-h,
html[data-design="h"] .dl-line,html[data-design="h"] .dl-grade,html[data-design="h"] .rw-h,html[data-design="h"] .cax-h b,html[data-design="h"] .ry-h,html[data-design="h"] .rm-h{font-family:var(--serif);}
html[data-design="h"] .dl-score,html[data-design="h"] .isp-score{font-family:var(--sans);font-weight:800;letter-spacing:-.03em;}
html[data-design="h"] .zd-chip{border-radius:0;background:#fff;font-family:var(--hanja);}
html[data-design="h"] .zd-chip.hot{background:var(--seal);border-color:var(--seal);color:#fff;}
html[data-design="h"] .lv-tags span{border-radius:0;background:#fff;border-color:var(--line-2);font-family:var(--sans);font-size:12px;color:var(--ink);}
html[data-design="h"] .lv-legend b{font-family:var(--hanja);}
html[data-design="h"] .dl-lucky span{border-radius:0;background:var(--paper-2);}
html[data-design="h"] .ptease{background:var(--seal-soft);border-radius:0;font-family:var(--sans);}
html[data-design="h"] .ptease-b{font-family:var(--sans);}
html[data-design="h"] .cax-bar{border-radius:0;background:#EEF0F3;border:0;}
html[data-design="h"] .iy-bar{border-radius:0;}
html[data-design="h"] .ry-tag{border-radius:0;}
html[data-design="h"] .qk-tag,html[data-design="h"] .pb-chip span{border-radius:0;}
/* 인연 공유 카드(html2canvas 대상, 원래 크림 고정 hex) — 흰 종이·쪽빛으로 */
html[data-design="h"] .lovecard{background:#FFFFFF;border:1.5px solid #141414;border-radius:0;}
html[data-design="h"] .lc-seal{background:#2A4D9B;color:#FFFFFF;border-radius:0;font-family:var(--hanja);}
html[data-design="h"] .lc-eb,html[data-design="h"] .lc-k,html[data-design="h"] .lc-u{color:#4D5562;}
html[data-design="h"] .lc-name{color:#141414;font-family:var(--serif);font-weight:700;}
html[data-design="h"] .lc-phrase,html[data-design="h"] .lc-v{color:#141414;font-family:var(--sans);}
html[data-design="h"] .lc-tags span{color:#4D5562;border-color:#C9CFD8;border-radius:0;}
html[data-design="h"] .lc-row,html[data-design="h"] .lc-foot{border-color:#E4E7EC;}
html[data-design="h"] .lc-q{color:#2A4D9B;font-family:var(--serif);}

/* 맛보기 브랜드 시트 — 점 무늬·크림 틴트 제거 */
html[data-design="h"] .bsheet{background:#fff;background-image:none;border:1.5px solid var(--ink);}
html[data-design="h"] .bs-best{background:var(--ink);}
html[data-design="h"] .bs-sq.s,html[data-design="h"] .bs-sq.w,html[data-design="h"] .bs-sq.o,html[data-design="h"] .bs-sq.t{background:#fff;}
html[data-design="h"] .bs-sq.o h5{color:var(--seal);}
html[data-design="h"] .bs-usp,html[data-design="h"] .bs-usp1{background:var(--seal-soft);}
html[data-design="h"] .bs-rare{border-radius:0;}
html[data-design="h"] .bs-cmp h6.c{color:var(--ink-soft);}
html[data-design="h"] .bs-progress,html[data-design="h"] .bs-detail{background:#fff;border-color:var(--line);}
html[data-design="h"] .bp-step.done .bp-dot::after{content:"";width:6px;height:6px;margin:auto;background:#fff;border-radius:50%;}

/* 하단 고정 요소 */
html[data-design="h"] .install-pop{border-radius:0;border:1.5px solid var(--ink);box-shadow:0 8px 24px rgba(20,20,20,.14);}
html[data-design="h"] .ip-icon{border-radius:0;font-family:var(--hanja);}
html[data-design="h"] .ip-txt b{font-family:var(--serif);}
html[data-design="h"] .totop{border-radius:0;}

/* 궁합 점수 아래 라벨 — 자간 벌림 제거 */
html[data-design="h"] .gscore{font-family:var(--sans);font-weight:800;letter-spacing:-.03em;}
html[data-design="h"] .gscore small{letter-spacing:0;text-transform:none;font-size:13px;}
html[data-design="h"] .zd-chip.hot i{color:rgba(255,255,255,.8);}

/* ── 5. 세부 쪽(소개·요금·인연·궁합·카드·캐릭터·가이드·정책) — 각 쪽 <style>에 직접 박힌 크림·인주 색 ── */
html[data-design="h"] .note{background:var(--paper-2);border-left-color:var(--seal);}
html[data-design="h"] th{background:var(--paper-2);}
html[data-design="h"] a.cta,html[data-design="h"] .go,html[data-design="h"] .btn.primary{color:#fff;border-radius:0;}
html[data-design="h"] a.cta{min-height:0;padding:12px 20px;font-size:14.5px;}
/* .form 은 본 화면 입력 폼(#form)도 같은 이름이라 제외한다 — 빼지 않으면 본 화면 폼 뒤에 회색 상자가 깔린다(261010 라이브 실측) */
html[data-design="h"] .form:not(#form),html[data-design="h"] .vs-intro,html[data-design="h"] .vs-result,html[data-design="h"] .cta-box{background:var(--paper-2);border-radius:0;}
html[data-design="h"] .form:not(#form) input{background:#fff;border:1px solid var(--line-2);border-radius:0;min-height:48px;}
html[data-design="h"] .form:not(#form) input:focus{outline:2px solid var(--seal);outline-offset:0;}
/* 명식 카드(card.html, 캡처 대상) — 계절 테두리색은 내용이라 건드리지 않고 바탕·안쪽 색만 */
html[data-design="h"] .tcard{background:#FFFFFF;border-radius:0;box-shadow:none;}
html[data-design="h"] .tc-in{background:#FFFFFF;border-color:#E4E7EC;border-radius:0;}
html[data-design="h"] .tc-type{color:#2A4D9B;border-color:#2A4D9B;font-family:var(--hanja);}
html[data-design="h"] .tc-art{background:#F4F6F9;border-color:#E4E7EC;border-radius:0;}
html[data-design="h"] .tc-hanja-badge{color:#2A4D9B;background:#FFFFFF;border-color:#E4E7EC;border-radius:0;font-family:var(--hanja);}
html[data-design="h"] .tc-stats,html[data-design="h"] .tc-skills,html[data-design="h"] .tc-foot{border-color:#E4E7EC;}
html[data-design="h"] .tc-cell{background:#E4E7EC;border-radius:0;}
html[data-design="h"] .tc-cell.f{background:#2A4D9B;}
html[data-design="h"] .tc-skgod{color:#2A4D9B;font-family:var(--sans);font-size:11px;}
html[data-design="h"] .tc-foot{font-family:var(--sans);font-size:11px;color:#4D5562;letter-spacing:0;}
html[data-design="h"] .tc-title{font-family:var(--sans);font-size:12px;letter-spacing:0;color:#4D5562;}
html[data-design="h"] .vs-mini{background:#FFFFFF;border-color:#2A4D9B;border-radius:0;}
html[data-design="h"] .vs-break li{border-bottom-color:#E4E7EC;}
html[data-design="h"] .vs-break .bp.minus{color:var(--warn);}
/* 캐릭터(char.html 결과 카드·char/*.html 그림) */
html[data-design="h"] .card{background:#FFFFFF;border-color:#E4E7EC;border-radius:0;box-shadow:none;}
html[data-design="h"] .c-mascot,html[data-design="h"] .mascot{border-color:#E4E7EC;border-radius:0;}

/* 펼침 화살표(▾) — 원티드산스·Noto 어디에도 없어 수식 글꼴로 그려지던 글자. 글자는 숨기고(visibility) 선으로 다시 그린다.
   font-size:0 만으로는 글자가 여전히 그려진다(261010 실측) — visibility 로 글자를 빼고 ::before 만 보이게 */
html[data-design="h"] details.rgroup .rg-arr,html[data-design="h"] .psych-toggle .pt-arrow{font-size:0;visibility:hidden;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;}
html[data-design="h"] details.rgroup .rg-arr::before,html[data-design="h"] .psych-toggle .pt-arrow::before{content:"";visibility:visible;width:8px;height:8px;border-right:1.6px solid var(--ink-soft);border-bottom:1.6px solid var(--ink-soft);transform:translateY(-2px) rotate(45deg);}

/* 한 화면 채움 버튼 하나 — 보조 행동은 외곽선. 알림 신청·유료 대기(오픈 알림)는 지금 결제가 아니라 대기라 보조로 둔다.
   웹 결제가 열리면(payEnabled) 같은 버튼이 '₩9,900' 라벨로 바뀌어도 외곽선 그대로 — 결제 경로는 토스 다리(채움 먹)가 주 행동 */
html[data-design="h"] #notifyBtn,html[data-design="h"] #reportBtn,html[data-design="h"] #strategyBtn,html[data-design="h"] #clBtn,
html[data-design="h"] .cta.ghost{background:#fff;color:var(--ink);border:1px solid var(--ink);}
html[data-design="h"] #notifyBtn:hover,html[data-design="h"] #reportBtn:hover,html[data-design="h"] #strategyBtn:hover,html[data-design="h"] #clBtn:hover,
html[data-design="h"] .cta.ghost:hover{background:var(--ink);color:#fff;}
html[data-design="h"] .skip{min-height:40px;min-width:40px;font-size:12.5px;color:var(--ink-soft);}

/* 누르기 영역 40px — 머리·바닥·돌아가기 링크 */
html[data-design="h"] .h-word,html[data-design="h"] .back,html[data-design="h"] .nav a,html[data-design="h"] .sf-links a,
html[data-design="h"] footer a,html[data-design="h"] .crumb a{display:inline-flex;align-items:center;justify-content:center;min-height:40px;min-width:40px;}
html[data-design="h"] .sf-links span{color:var(--ink-faint);}
/* 워드마크는 칸 왼쪽에 — 위 누르기 영역 규칙의 가운데 정렬이 격자 칸 전체로 늘어난 이 링크에선 가운데로 밀어 버린다 */
html[data-design="h"] .h-top .h-word{justify-self:start;justify-content:flex-start;}
html[data-design="h"] .crumb{letter-spacing:0;font-family:var(--sans);}

/* FAQ·푸터 */
html[data-design="h"] .faq-title{font-family:var(--serif);font-weight:700;font-size:clamp(22px,5.4vw,28px);}
html[data-design="h"] .faq-item{border-left:0;border-top:1px solid var(--line);padding:16px 0 0;margin:0 0 20px;}
html[data-design="h"] .faq-q{font-family:var(--serif);font-weight:700;font-size:16px;}
html[data-design="h"] .faq-a{font-family:var(--sans);font-size:14.5px;line-height:1.8;}
html[data-design="h"] .faq-src{font-family:var(--sans);letter-spacing:0;}
html[data-design="h"] .site-foot{border-top:1.5px solid var(--ink);}
html[data-design="h"] .sf-note{font-family:var(--sans);font-size:12px;}
html[data-design="h"] .foot{font-family:var(--sans);}