:root{
    --bg:#e7e6e1;--surface:#ffffff;--surface-2:#f2f1ec;--ink:#171a1f;--muted:#6b7178;
    --line:#dcdad2;--line-2:#bcbaad;--accent:#2a44c6;--accent-weak:#eceffb;--accent-ink:#22307c;--deduct:#bb392e;
    --fun:#b06a10;--fun-ink:#8a5209;--on-accent:#ffffff;
    /* 한글 폴백을 명시하지 않으면 monospace가 굴림 계열로 떨어져 자간이 벌어진다.
       영문·숫자만 모노로 두고 한글은 시스템 산세리프로 받는다. */
    --mono:ui-monospace,"SF Mono","Menlo",Consolas,"Roboto Mono","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;
  }
  @media (prefers-color-scheme:dark){:root{--bg:#0e1116;--surface:#161b23;--surface-2:#1d2430;--ink:#eff2f7;
    --muted:#8d97a5;--line:#242c38;--line-2:#39434f;--accent:#93a4ff;--accent-weak:#161d30;--accent-ink:#b6bfff;--deduct:#ef8b7d;
    --fun:#e6b25a;--fun-ink:#f0c987;--on-accent:#0f1218;}}
  :root[data-theme="light"]{--bg:#e7e6e1;--surface:#fff;--surface-2:#f2f1ec;--ink:#171a1f;--muted:#6b7178;--line:#dcdad2;--line-2:#bcbaad;--accent:#2a44c6;--accent-weak:#eceffb;--accent-ink:#22307c;--deduct:#bb392e;--fun:#b06a10;--fun-ink:#8a5209;--on-accent:#ffffff;}
  :root[data-theme="dark"]{--bg:#0e1116;--surface:#161b23;--surface-2:#1d2430;--ink:#eff2f7;--muted:#8d97a5;--line:#242c38;--line-2:#39434f;--accent:#93a4ff;--accent-weak:#161d30;--accent-ink:#b6bfff;--deduct:#ef8b7d;--fun:#e6b25a;--fun-ink:#f0c987;--on-accent:#0f1218;}
  *{margin:0;box-sizing:border-box;}
  body{background:var(--bg);color:var(--ink);font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;
    background-image:linear-gradient(rgba(42,68,198,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(42,68,198,.045) 1px,transparent 1px);
    background-size:28px 28px;}
  @media (prefers-color-scheme:dark){body{background-image:linear-gradient(rgba(147,164,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(147,164,255,.05) 1px,transparent 1px);}}
  .wrap{max-width:1180px;margin:0 auto;padding:30px 22px 60px;}
  /* 도구 페이지: 본문 + 우측 레일 (데스크톱) */
  .shell{display:grid;grid-template-columns:minmax(0,1fr);gap:26px;}
  @media (min-width:900px){.shell{grid-template-columns:minmax(0,1fr) 300px;align-items:start;}
    .rail{position:sticky;top:24px;}}
  .rail h4{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 10px;font-weight:700;}
  .rail .rcard{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 14px 6px;margin-bottom:14px;}
  .rail a{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 0;min-height:44px;border-bottom:1px solid var(--line);
    text-decoration:none;color:var(--ink);font-size:13.5px;font-weight:600;}
  .rail a:last-child{border-bottom:none;}
  .rail a span{color:var(--muted);font-size:11.5px;font-weight:500;}
  .rail a:hover{color:var(--accent-ink);}
  /* height:auto가 없으면 HTML의 height="800" 속성이 살아남아 가로 이미지가 세로로 늘어난다 */
  .rail .rart{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:10px;display:block;margin-bottom:12px;border:1px solid var(--line);}
  /* home masthead */
  .masthead{display:flex;justify-content:space-between;align-items:flex-end;padding-bottom:14px;border-bottom:2px solid var(--ink);margin-bottom:22px;}
  .brand{font-size:27px;font-weight:800;letter-spacing:-1.2px;}
  .mh-sub{font-size:13px;color:var(--muted);margin-top:3px;}
  .meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--muted);text-align:right;line-height:1.6;}
  /* 로고 + 히어로 임팩트 */
  .hero{padding-bottom:18px;border-bottom:2px solid var(--ink);margin-bottom:20px;}
  .logo-row{display:flex;align-items:center;gap:10px;}
  .lmark{flex:0 0 auto;width:34px;height:auto;aspect-ratio:1/1;border-radius:50%;object-fit:cover;}
  .logo-row .brand{font-size:21px;font-weight:800;letter-spacing:-1px;}
  .logo-row .meta{margin-left:auto;}
  .hero-h{font-size:34px;font-weight:900;letter-spacing:-1.7px;line-height:1.14;margin:20px 0 8px;text-wrap:balance;}
  .hero-h b{color:var(--accent-ink);}
  .hero-sub{color:var(--muted);font-size:14px;margin-bottom:2px;text-wrap:balance;}
  .sect{display:flex;align-items:baseline;gap:12px;margin:38px 0 0;}
  .sect h2{font-size:19px;font-weight:800;letter-spacing:-.6px;}
  .sect p{font-size:12.5px;color:var(--muted);}
  .sect::after{content:"";flex:1;height:1px;background:var(--line);}
  .ccard .body .idxrow{padding:9px 0;margin:0;border-radius:0;font-size:13.5px;}
  .ccard .body .idxrow:hover{background:transparent;}
  .ccard .body .ix-n{font-size:13.5px;}
  .ccard .body .ix-d{display:none;}
  @media (min-width:900px){.hero-h{font-size:44px;letter-spacing:-2.2px;}.hero-sub{font-size:15.5px;}}
  .hero-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:center;}
  .hero-wrap.noart{grid-template-columns:1fr;}
  .hero-art{width:100%;height:auto;display:block;border:1.5px solid var(--ink);border-radius:12px;box-shadow:7px 7px 0 var(--line-2);}
  @media (max-width:600px){.hero-wrap{grid-template-columns:1fr;}.hero-art{max-height:210px;object-fit:cover;object-position:left center;}}
  @keyframes heroFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
  .hero-wrap:not(.noart) .hero-art{animation:rise .55s cubic-bezier(.2,.7,.3,1) .18s both, heroFloat 7s ease-in-out 1.2s infinite;}
  @media (prefers-reduced-motion:reduce){.hero-wrap .hero-art{animation:none;}}
  .pop{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;}
  .pop a{display:inline-flex;align-items:center;min-height:44px;border:1px solid var(--line);border-radius:100px;padding:0 14px;font-size:12.5px;font-weight:700;text-decoration:none;color:var(--muted);background:var(--surface-2);transition:.16s;}
  .pop a:hover{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-weak);}
  .pop a.f{color:var(--fun-ink);border-color:color-mix(in srgb,var(--fun) 45%,var(--line));}
  .pop a.f:hover{background:color-mix(in srgb,var(--fun) 12%,transparent);border-color:var(--fun);}
  .cat-art{width:60px;height:60px;border-radius:12px;border:1px solid var(--line-2);object-fit:cover;flex:0 0 auto;transition:transform .25s cubic-bezier(.2,.7,.3,1);}
  .grp:hover .cat-art{transform:scale(1.12) rotate(-3deg);}
  .grp.reveal{opacity:0;transform:translateY(14px);}
  .grp.reveal.in{opacity:1;transform:none;transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.3,1);}
  @media (prefers-reduced-motion:reduce){.grp.reveal{opacity:1;transform:none;}}
  @keyframes rise{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
  .hero>*, .hero-wrap>*{animation:rise .55s cubic-bezier(.2,.7,.3,1) both;}
  .hero>*:nth-child(2){animation-delay:.07s;} .hero>*:nth-child(3){animation-delay:.14s;} .hero>*:nth-child(4){animation-delay:.21s;}
  .hero-wrap>*:nth-child(2){animation-delay:.18s;}
  @media (prefers-reduced-motion:reduce){.hero>*,.hero-wrap>*{animation:none;}}
  .sfoot{border-top:2px solid var(--ink);margin-top:44px;padding-top:22px;display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:18px;font-size:12.5px;}
  @media (max-width:600px){.sfoot{grid-template-columns:1fr;}}
  .sfoot h4{font-size:10.5px;letter-spacing:.14em;color:var(--muted);margin-bottom:9px;font-weight:700;}
  .sfoot a{display:flex;align-items:center;min-height:44px;color:var(--muted);text-decoration:none;margin:0;}
  .sfoot a:hover{color:var(--accent);}
  .sfoot .fbrand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:15px;color:var(--ink);margin-bottom:8px;}
  .sfoot p{color:var(--muted);line-height:1.7;font-size:11.5px;}
  .search{width:100%;padding:12px 2px;border:0;border-bottom:1.5px solid var(--line-2);border-radius:0;background:transparent;color:var(--ink);font:inherit;font-size:16px;margin-bottom:12px;}
  .search:focus{outline:none;border-bottom:2px solid var(--accent);}
  .search::placeholder{color:var(--muted);}
  /* ── 대시보드 카드 시스템 (Behance 2026 레퍼런스) ── */
  .wash{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;}
  .wash::before{content:"";position:absolute;top:-42%;right:-18%;width:62%;height:130%;pointer-events:none;
    background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 20%,transparent),transparent 72%);opacity:.5;}
  .wash>*{position:relative;}
  /* KPI 스탯 스트립 */
  .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:22px 0 6px;}
  @media (max-width:600px){.kpis{grid-template-columns:repeat(2,1fr);}}
  .kpi{padding:15px 16px 14px;}
  .kpi .kl{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);}
  .kpi .kl i{width:5px;height:5px;border-radius:50%;background:var(--accent);display:inline-block;}
  .kpi.f .kl i{background:var(--fun);}
  .kpi .kv{font-family:var(--mono);font-size:26px;font-weight:800;letter-spacing:-1.2px;margin-top:7px;line-height:1;}
  .kpi .kd{font-size:11.5px;color:var(--muted);margin-top:5px;text-wrap:balance;}
  .kpi .kd b{color:var(--accent-ink);font-weight:700;}
  .kpi.f .kd b{color:var(--fun-ink);}
  /* 태그 (SEO·탐색) */
  .tags{display:flex;flex-wrap:wrap;gap:7px;margin:16px 0 2px;}
  .tags a,.tags span{font-size:12px;font-weight:700;color:var(--muted);background:var(--surface-2);
    border:1px solid var(--line);border-radius:100px;padding:5px 11px;text-decoration:none;}
  .tags a:hover{color:var(--accent-ink);border-color:var(--accent);background:var(--accent-weak);}
  /* 예시·주의 블록 */
  .exbox{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-top:14px;}
  .exbox h3{font-size:13px;letter-spacing:.02em;color:var(--accent-ink);margin-bottom:10px;font-weight:800;}
  .exbox .row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px dotted var(--line-2);font-size:13.5px;}
  .exbox .row:last-of-type{border-bottom:none;}
  .exbox .row b{font-family:var(--mono);font-weight:700;}
  .exbox .res{margin-top:10px;padding-top:10px;border-top:2px solid var(--ink);display:flex;justify-content:space-between;font-weight:800;font-size:15px;}
  .exbox .res b{font-family:var(--mono);color:var(--accent-ink);}
  .warns{margin-top:14px;}
  .warns li{list-style:none;position:relative;padding:8px 0 8px 22px;font-size:13.5px;line-height:1.75;border-bottom:1px dotted var(--line-2);}
  .warns li:last-child{border-bottom:none;}
  .warns li::before{content:"!";position:absolute;left:0;top:8px;width:15px;height:15px;border-radius:50%;
    background:var(--deduct);color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;}
  .warns li b{color:var(--ink);}
  /* 카테고리 = 큰 카드 그리드 (일러스트가 주인공) */
  .catgrid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:16px;}
  @media (min-width:640px){.catgrid{grid-template-columns:repeat(2,1fr);}}
  @media (min-width:1000px){.catgrid{grid-template-columns:repeat(3,1fr);}}
  .ccard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;
    transition:transform .2s cubic-bezier(.2,.7,.3,1),border-color .2s;}
  .ccard:hover{transform:translateY(-3px);border-color:var(--accent);}
  .ccard .thumb{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--surface-2);border-bottom:1px solid var(--line);}
  .ccard .thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s cubic-bezier(.2,.7,.3,1);}
  .ccard:hover .thumb img{transform:scale(1.06);}
  .ccard .thumb b{position:absolute;left:14px;bottom:12px;font-size:16.5px;font-weight:800;letter-spacing:-.4px;color:#eff2f7;
    text-shadow:0 2px 14px rgba(0,0,0,.85);}
  .ccard .thumb em{position:absolute;right:12px;top:12px;font-style:normal;font-family:var(--mono);font-size:10.5px;color:#eff2f7;
    background:rgba(10,14,20,.66);border:1px solid rgba(255,255,255,.16);border-radius:100px;padding:3px 9px;backdrop-filter:blur(4px);}
  .ccard .body{padding:6px 14px 8px;flex:1;}
  .ccard .more{display:flex;align-items:center;min-height:44px;padding:0 14px;border-top:1px solid var(--line);font-size:12.5px;font-weight:700;
    color:var(--accent-ink);text-decoration:none;background:var(--surface-2);}
  .ccard .more:hover{background:var(--accent-weak);}
  .ccard.f .thumb b{color:#fff;} .ccard.f .more{color:var(--fun-ink);}
  .ccard.f:hover{border-color:var(--fun);}
  /* 벤또 그리드 — 타일 크기를 다르게. .ccard 기본값보다 뒤·높은 특이도여야 덮어쓴다 */
  .bento{display:grid;grid-template-columns:1fr;gap:14px;margin-top:16px;}
  @media (min-width:640px){.bento{grid-template-columns:repeat(6,1fr);}
    .bento>*{grid-column:span 3;}
    .bento>.b-wide,.bento>.b-full{grid-column:span 6;}
    .bento>.b-wide .thumb,.bento>.b-full .thumb{aspect-ratio:16/9;}}
  @media (min-width:1000px){.bento{grid-template-columns:repeat(12,1fr);gap:16px;}
    .bento>*{grid-column:span 4;}
    .bento>.b-wide{grid-column:span 6;}
    .bento>.b-full{grid-column:span 12;flex-direction:row;align-items:stretch;}
    .bento>.b-wide .thumb{aspect-ratio:2/1;}
    .bento>.b-full .thumb{aspect-ratio:auto;width:40%;min-height:250px;border-bottom:none;border-right:1px solid var(--line);}
    .bento>.b-full .body{display:grid;grid-template-columns:repeat(2,1fr);gap:0 24px;align-content:center;padding:14px 22px;}
    .bento>.b-full .more{border-top:none;border-left:1px solid var(--line);display:flex;align-items:center;padding:0 20px;white-space:nowrap;}}
  /* 전체 목록 (하단, 다단) */
  .grp{margin-top:14px;padding:16px 16px 6px;}
  .alllist{columns:1;column-gap:26px;margin-top:6px;}
  @media (min-width:700px){.alllist{columns:2;}}
  @media (min-width:1000px){.alllist{columns:3;}}
  .alllist section{break-inside:avoid;margin-bottom:20px;}
  .cat{display:flex;align-items:center;gap:11px;margin-bottom:6px;}
  .cat span{font-size:12.5px;font-weight:800;letter-spacing:-.2px;color:var(--ink);white-space:nowrap;text-transform:none;}
  .cat::after{content:attr(data-n);flex:0 0 auto;margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--muted);
    border:1px solid var(--line-2);border-radius:100px;padding:3px 9px;background:var(--surface-2);}
  .idxrow{display:flex;align-items:center;min-height:44px;gap:12px;padding:11px 10px;margin:0 -10px;border-radius:9px;text-decoration:none;color:var(--ink);
    border-bottom:1px solid var(--line);transition:background .15s;}
  .idxrow:last-child{border-bottom:none;}
  .idxrow:hover{background:var(--surface-2);}
  .idxrow:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}
  .ix-n{font-weight:600;font-size:14.5px;flex:0 0 auto;}
  .ix-d{color:var(--muted);font-size:12px;flex:1;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .ix-a{font-family:var(--mono);color:var(--accent);font-size:14px;opacity:0;transform:translateX(-4px);transition:.18s;}
  .idxrow:hover .ix-a{opacity:1;transform:none;} .idxrow:hover .ix-n{color:var(--accent-ink);}
  /* tool view */
  /* 모바일 터치 타겟 44px 확보 — 시각 크기는 그대로 두고 여백으로 누를 면적만 넓힌다 */
  /* 한글에 monospace를 쓰면 글자폭이 고정돼 자간이 벌어져 보인다. 한글 UI 텍스트는 본문 폰트로 둔다 */
  .back{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;color:var(--muted);font-size:13px;text-decoration:none;margin-bottom:6px;}
  .back:hover{color:var(--accent);}
  .toolhero{position:relative;overflow:hidden;border:1px solid var(--line-2);border-radius:18px;margin-bottom:20px;}
  .toolhero img{width:100%;display:block;aspect-ratio:16/7;object-fit:cover;}
  .toolhero .cap{position:absolute;left:0;right:0;bottom:0;padding:64px 22px 20px;
    background:linear-gradient(transparent,rgba(8,11,16,.93) 60%);}
  .toolhero .cap h1{font-size:30px;font-weight:900;letter-spacing:-1px;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.85);margin:0;}
  .toolhero .cap .tl{color:#cfd6e0;font-size:13.5px;border:0;padding:0;margin:5px 0 0;}
  @media (min-width:760px){.toolhero .cap h1{font-size:38px;}}
  .th{font-size:25px;font-weight:800;letter-spacing:-.7px;margin-bottom:3px;text-wrap:balance;}
  .tl{color:var(--muted);font-size:13.5px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--line);}
  .card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px 20px;}
  .tool label{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:18px 0 3px;}
  .tool label:first-child{margin-top:0;}
  .field{position:relative;}
  .field .suf{position:absolute;right:2px;bottom:11px;color:var(--muted);font-size:15px;font-weight:600;}
  .tool input,.tool select,.tool textarea{width:100%;border-radius:0;background:transparent;color:var(--ink);font:inherit;font-size:17px;font-weight:600;text-align:right;font-family:var(--mono);}
  .tool input{border:0;border-bottom:1.5px solid var(--line-2);padding:10px 22px 10px 2px;}
  .tool input:focus{outline:none;border-bottom:2px solid var(--accent);}
  .tool input[type=date],.tool input[type=time]{text-align:left;font-family:inherit;font-weight:600;font-size:15px;padding-right:2px;}
  .tool input[type=checkbox]{width:auto;border:0;padding:0;margin:0 6px 0 0;vertical-align:middle;accent-color:var(--accent);}
  .tool select{border:1px solid var(--line);border-radius:3px;background:var(--surface-2);padding:11px 12px;text-align:left;font-family:inherit;font-weight:600;font-size:15px;appearance:none;}
  .tool textarea{border:1px solid var(--line);border-radius:3px;background:var(--surface-2);padding:12px;text-align:left;font-family:inherit;font-weight:500;font-size:15px;min-height:140px;resize:vertical;}
  .tool select:focus,.tool textarea:focus{outline:none;border-color:var(--accent);}
  .tool button{border-radius:4px !important;font-family:inherit !important;letter-spacing:.02em;color:var(--on-accent) !important;background:var(--accent) !important;cursor:pointer;}
  .tool button:hover{filter:brightness(1.06);}
  /* 콘솔 히어로 (컨셉) */
  .console{position:relative;overflow:hidden;border:1px solid var(--line-2);border-radius:16px;background:var(--surface);padding:16px 16px 18px;margin:18px 0 6px;
    box-shadow:0 1px 0 color-mix(in srgb,var(--ink) 6%,transparent),0 18px 40px -22px rgba(0,0,0,.55);}
  .console::before{content:"";position:absolute;top:-70%;right:-10%;width:46%;height:180%;pointer-events:none;
    background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%);opacity:.55;}
  .console>*{position:relative;}
  .sbar{display:flex;align-items:center;gap:10px;background:var(--surface-2);border:1px solid var(--line);border-radius:11px;padding:0 12px;margin-top:10px;}
  .sbar svg{flex:0 0 auto;opacity:.55;}
  .sbar .search{border:0;margin:0;padding:12px 0;font-size:15px;}
  .sbar .search:focus{border:0;outline:none;}
  .sbar kbd{flex:0 0 auto;font-family:var(--mono);font-size:10.5px;color:var(--muted);border:1px solid var(--line-2);
    border-radius:6px;padding:3px 7px;background:var(--surface);}
  .sbar:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent);}
  .console .prompt{font-size:13px;color:var(--accent-ink);margin-bottom:10px;}
  .console .prompt b{color:var(--fun-ink);}
  .console .cur{display:inline-block;width:8px;height:15px;background:var(--fun);vertical-align:-2px;margin-left:2px;animation:blink 1.1s steps(1) infinite;}
  @keyframes blink{50%{opacity:0;}}
  @media (prefers-reduced-motion:reduce){.console .cur{animation:none;}}
  .console .search{margin:0;border-bottom-color:var(--line-2);}
  /* 운세·재미 카테고리 강조 */
  .grp.fun .cat span{color:var(--fun-ink);}
  .grp.fun .cat::after{background:var(--fun);opacity:.5;}
  .grp.fun .idxrow:hover{background:color-mix(in srgb,var(--fun) 12%,transparent);}
  .grp.fun .idxrow:hover .ix-n,.grp.fun .idxrow:hover .ix-a{color:var(--fun-ink);}
  /* SEO 본문: 가이드 + FAQ */
  .guide{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);}
  .guide h2,.faq h2{font-size:15px;font-weight:800;letter-spacing:-.3px;margin-bottom:10px;}
  .guide ul{list-style:none;padding:0;}
  .guide li{position:relative;padding:6px 0 6px 18px;font-size:13.5px;color:var(--ink);line-height:1.7;}
  .guide li::before{content:"—";position:absolute;left:0;color:var(--accent);}
  .faq{margin-top:22px;}
  .faq details{border-bottom:1px dotted var(--line-2);padding:12px 2px;}
  .faq summary{font-weight:700;font-size:14px;cursor:pointer;list-style:none;color:var(--ink);}
  .faq summary::-webkit-details-marker{display:none;}
  .faq summary::before{content:"Q  ";font-family:var(--mono);color:var(--accent-ink);font-weight:700;}
  .faq p{font-size:13.5px;color:var(--muted);line-height:1.75;margin-top:8px;padding-left:20px;}
  .r2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  /* 좁은 화면에서 2단을 유지하면 한 칸이 150px 밑으로 눌린다.
     생년월일 다이얼의 '1990년'이 45px 칸에 들어가 글자가 겹쳐 보였다. */
  @media (max-width:560px){.r2{grid-template-columns:1fr;gap:12px;}}
  .out{position:relative;overflow:hidden;background:var(--surface-2);border:1px solid var(--line-2);border-radius:14px;padding:17px 18px 16px;margin-top:22px;}
  .out::before{content:"";position:absolute;top:-55%;right:-12%;width:52%;height:150%;pointer-events:none;
    background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 24%,transparent),transparent 70%);opacity:.55;}
  .out>*{position:relative;}
  .out .k{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
  .out .k::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);flex:0 0 auto;}
  .out .v{font-family:var(--mono);font-size:36px;font-weight:800;letter-spacing:-1.8px;text-align:right;line-height:1.08;margin-top:8px;}
  .out .v small{font-size:16px;font-weight:600;letter-spacing:0;margin-left:1px;}
  .out .s{font-size:12px;color:var(--muted);text-align:right;margin-top:5px;}
  .rows{margin-top:16px;}
  .li{display:flex;justify-content:space-between;align-items:baseline;padding:9px 2px;border-bottom:1px dotted var(--line-2);font-size:14px;}
  .li:last-child{border-bottom:none;} .li b{font-weight:600;font-family:var(--mono);}
  .neg b{color:var(--deduct);}
  .note{font-size:11.5px;color:var(--muted);margin-top:16px;line-height:1.7;}
  .share-btn{margin-top:14px;width:100%;padding:12px;border:1px solid var(--fun);border-radius:10px;background:transparent;
    color:var(--fun-ink);font:inherit;font-weight:800;cursor:pointer;}
  .share-btn:hover{background:color-mix(in srgb,var(--fun) 12%,transparent);}
  /* 생년월일 다이얼 — 한지·먹 톤의 회전 휠 */
  /* 년 칸은 '1990년' 5글자가 들어가야 한다. 비율(fr)만 쓰면 좁은 폭에서 잘리므로 최소폭을 준다 */
  .dial{position:relative;display:grid;grid-template-columns:minmax(64px,1.35fr) minmax(46px,1fr) minmax(46px,1fr);gap:6px;
    border:1px solid var(--line-2);border-radius:14px;padding:6px;background:var(--surface-2);overflow:hidden;}
  .dial-col{height:132px;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none;
    text-align:center;position:relative;outline:none;}
  .dial-col::-webkit-scrollbar{display:none;}
  .dial-col:focus-visible{box-shadow:inset 0 0 0 2px var(--fun);border-radius:8px;}
  .dial-pad{height:44px;}
  .dial-item{height:44px;line-height:44px;scroll-snap-align:center;font-size:16px;color:var(--muted);
    font-variant-numeric:tabular-nums;transition:color .15s,font-size .15s;cursor:pointer;}
  .dial-item.on{color:var(--fun-ink);font-size:21px;font-weight:800;}
  /* 가운데 선택 창 — 스크롤 위에 겹쳐 그리되 클릭은 통과시킨다 */
  .dial-sel{position:absolute;left:6px;right:6px;top:50%;height:44px;transform:translateY(-50%);
    border-top:1px solid var(--fun);border-bottom:1px solid var(--fun);pointer-events:none;
    background:color-mix(in srgb,var(--fun) 7%,transparent);}
  .dial-col{touch-action:none;cursor:grab;} /* 드래그로 돌리기 — 브라우저 기본 제스처는 막는다 */
  .dial-col:active{cursor:grabbing;}
  .dial-ganji{margin-top:8px;text-align:center;font-size:12.5px;color:var(--muted);letter-spacing:.04em;}
  .dial-typed-label{margin-top:12px;font-size:11.5px;color:var(--muted);letter-spacing:.04em;}
  input.dial-typed{margin-top:4px;}
  .dial-ganji b{color:var(--fun-ink);font-weight:800;}
  .save-btn{margin-top:8px;width:100%;padding:12px;border:1px solid var(--line-2);border-radius:10px;background:transparent;
    color:var(--muted);font:inherit;font-weight:700;cursor:pointer;}
  .save-btn:hover{border-color:var(--fun);color:var(--fun-ink);}
  .ad{margin:26px 0 0;padding:12px;border:1px dashed var(--line-2);border-radius:2px;text-align:center;color:var(--muted);font-size:10.5px;font-family:var(--mono);letter-spacing:.08em;}
  .foot{text-align:center;font-size:11px;color:var(--muted);margin-top:28px;font-family:var(--mono);letter-spacing:.03em;}
  .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
  .chip{background:var(--surface-2);border:1px solid var(--line);border-radius:2px;padding:7px 11px;font-size:13px;font-weight:600;}
  /* ── 사주 명식 ── */
  .sj-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:18px;}
  .sj-col{border:1px solid var(--line-2);border-radius:4px;overflow:hidden;text-align:center;}
  .sj-col .h{font-size:11px;letter-spacing:.12em;color:var(--muted);padding:6px 0;border-bottom:1px solid var(--line);background:var(--surface-2);}
  .sj-cell{padding:10px 0 4px;}
  .sj-han{font-size:30px;font-weight:800;line-height:1.1;}
  .sj-ko{font-size:11px;color:var(--muted);margin-top:2px;padding-bottom:8px;}
  .sj-cell+.sj-cell{border-top:1px dotted var(--line-2);}
  .sj-tg{font-size:10px;color:var(--fun-ink);padding-bottom:7px;margin-top:-4px;}
  .el-목{color:#3d9960;} .el-화{color:#d05548;} .el-토{color:#b8862d;} .el-금{color:#8a8f98;} .el-수{color:#3f7ec2;}
  :root[data-theme="dark"] .el-금{color:#aab1bb;}
  .sj-bars{margin-top:18px;}
  .sj-bar{display:flex;align-items:center;gap:10px;margin:7px 0;font-size:13px;}
  .sj-bar .n{width:44px;font-weight:700;}
  .sj-bar .t{flex:1;height:9px;background:var(--surface-2);border-radius:99px;overflow:hidden;}
  .sj-bar .t i{display:block;height:100%;border-radius:99px;}
  .sj-bar .c{width:22px;text-align:right;font-family:var(--mono);}
  .bg-목{background:#3d9960;} .bg-화{background:#d05548;} .bg-토{background:#b8862d;} .bg-금{background:#8a8f98;} .bg-수{background:#3f7ec2;}
  .sj-sec{margin-top:20px;padding-top:14px;border-top:1px solid var(--line);}
  /* 개념 삽화 — 본문 옆에 흘려 배치. height:auto가 없으면 height 속성이 살아 비율이 깨진다 */
  .sj-art{float:right;width:118px;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:12px;
    margin:0 0 10px 14px;border:1px solid var(--line-2);}
  @media (max-width:480px){.sj-art{width:92px;margin-left:10px;}}
  /* ── 물어보기 게이트 · 보살이 답을 고르는 연출 ── */
  .ask-wait{margin-top:20px;padding:26px 18px;border:1px dashed var(--line-2);border-radius:14px;text-align:center;background:var(--surface-2);}
  .ask-wait .ic{font-size:30px;line-height:1;}
  .ask-wait .t{margin-top:10px;font-size:14.5px;font-weight:700;color:var(--ink);}
  .ask-wait .d{margin-top:6px;font-size:12.5px;color:var(--muted);line-height:1.7;}
  .ask-think{margin-top:20px;padding:30px 18px 26px;border:1px solid var(--line-2);border-radius:14px;background:var(--surface-2);text-align:center;}
  /* 간지 글자가 돌아가는 릴. 결과가 정해지기 전의 '뽑는 중' 감각을 만든다 */
  .ask-reel{height:46px;overflow:hidden;font-family:var(--mono);font-size:32px;font-weight:800;letter-spacing:.12em;color:var(--fun-ink);}
  .ask-reel i{display:block;font-style:normal;animation:reelspin .42s linear infinite;}
  @keyframes reelspin{from{transform:translateY(0)}to{transform:translateY(-46px)}}
  .ask-step{margin-top:14px;font-size:13px;color:var(--muted);min-height:20px;}
  .ask-dots{margin-top:12px;display:flex;gap:5px;justify-content:center;}
  .ask-dots span{width:6px;height:6px;border-radius:50%;background:var(--line-2);transition:background .2s;}
  .ask-dots span.on{background:var(--fun-ink);}
  /* 결과 섹션 순차 등장 — 한 번에 다 뜨면 읽을 곳을 못 찾는다 */
  .rv{opacity:0;transform:translateY(9px);animation:rvup .42s ease-out forwards;}
  @keyframes rvup{to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){
    .rv{animation:none;opacity:1;transform:none;}
    .ask-reel i{animation:none;}
  }
  /* 대길(85점+)일 때만 카드가 한 번 번쩍인다. 매번 빛나면 신호가 안 된다 */
  .out.hit{border-color:var(--fun-ink);box-shadow:0 0 0 1px var(--fun-ink) inset;}
  .out.hit::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.5) 50%,transparent 62%);
    transform:translateX(-100%);animation:sheen 1.1s ease-out .15s 1;}
  @keyframes sheen{to{transform:translateX(100%)}}
  .grade-tag{display:inline-block;margin-left:8px;padding:2px 9px;border-radius:99px;font-size:11px;font-weight:800;letter-spacing:.04em;vertical-align:middle;}
  .g-대길{background:#d05548;color:#fff;} .g-길{background:#b8862d;color:#fff;}
  .g-평온{background:var(--line-2);color:var(--ink);} .g-주의{background:#8a8f98;color:#fff;}
  /* 연속 확인 스트릭 — 재방문 훅 */
  .streak{display:flex;align-items:center;gap:8px;margin-top:14px;padding:9px 12px;border-radius:11px;
    background:var(--surface-2);border:1px solid var(--line-2);font-size:12.5px;color:var(--ink);}
  .streak b{color:var(--fun-ink);font-family:var(--mono);font-size:14px;}
  .streak .cal{display:flex;gap:3px;margin-left:auto;}
  .streak .cal i{width:9px;height:9px;border-radius:2px;background:var(--line-2);}
  .streak .cal i.on{background:var(--fun-ink);}
  /* 오늘의 부적 — 하루 한 번만 열리는 보상 */
  .bujeok{margin-top:18px;border-radius:14px;padding:18px;text-align:center;color:#fff;
    background:linear-gradient(150deg,#2c2440,#6b3f5e);border:1px solid rgba(255,255,255,.14);}
  .bujeok .k{font-size:11px;letter-spacing:.16em;opacity:.75;}
  .bujeok .w{margin-top:9px;font-size:19px;font-weight:800;line-height:1.45;word-break:keep-all;}
  .bujeok .m{margin-top:9px;font-size:12.5px;line-height:1.7;opacity:.82;}
  .bujeok.locked{background:var(--surface-2);color:var(--muted);border:1px dashed var(--line-2);}
  .tf-id{margin-top:16px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px;color:var(--muted);letter-spacing:.08em;}
  .tf-hl{margin-top:6px;font-size:20px;font-weight:800;line-height:1.4;color:var(--ink);word-break:keep-all;}
  .sj-sec h3{font-size:13px;letter-spacing:.06em;color:var(--fun-ink);margin-bottom:8px;font-weight:800;}
  .sj-sec p{font-size:13.5px;line-height:1.8;color:var(--ink);}
  /* 모바일에선 13.5px 한글 본문이 작다. 운세는 읽는 분량이 많아 한 단계 키운다 */
  @media (max-width:600px){.sj-sec p{font-size:15px;line-height:1.75;}
    .sj-sec h3{font-size:14px;}}
  .sj-daeun{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;}
  .sj-du{flex:0 0 auto;min-width:52px;text-align:center;border:1px solid var(--line-2);border-radius:4px;padding:7px 4px;}
  .sj-du .a{font-size:10px;color:var(--muted);}
  .sj-du .g{font-size:16px;font-weight:800;margin-top:2px;}
  /* ── 타로 ── */
  .tr-board{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px;perspective:1200px;}
  .tr-slot{text-align:center;}
  .tr-pos{font-size:11px;letter-spacing:.12em;color:var(--muted);margin-bottom:7px;}
  .tr-card{position:relative;width:100%;aspect-ratio:5/8;cursor:pointer;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.2,.7,.3,1);}
  .tr-card.flip{transform:rotateY(180deg);}
  @media (prefers-reduced-motion:reduce){.tr-card{transition:none;}}
  .tr-f,.tr-b{position:absolute;inset:0;backface-visibility:hidden;border-radius:8px;border:1.5px solid var(--line-2);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px;}
  .tr-b{background:repeating-linear-gradient(45deg,var(--surface-2) 0 6px,var(--surface) 6px 12px);font-size:26px;color:var(--fun);}
  .tr-f{background:var(--surface);transform:rotateY(180deg);}
  .tr-f .no{font-family:var(--mono);font-size:10px;color:var(--muted);}
  .tr-f .sym{font-size:34px;margin:6px 0;}
  .tr-f .nm{font-size:12.5px;font-weight:800;line-height:1.3;}
  .tr-f .rv{font-size:10px;color:var(--deduct);margin-top:3px;}
  .tr-f.art{padding:0;overflow:hidden;}
  .tr-f.art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
  .tr-f.art img.rev{transform:rotate(180deg);}
  .tr-f.art .cap{position:absolute;left:0;right:0;bottom:0;padding:20px 6px 7px;
    background:linear-gradient(transparent,rgba(8,11,16,.92));text-align:center;}
  .tr-f.art .nm{color:#eff2f7;text-shadow:0 1px 6px #000;}
  /* 사주 오행 캐릭터 — 대형 히어로 */
  .sj-char{position:relative;overflow:hidden;background:var(--surface-2);border:1px solid var(--line-2);
    border-radius:18px;margin-top:20px;}
  /* height:auto가 없으면 HTML의 height 속성(520)이 살아남아 aspect-ratio가 무시되고 좌우가 잘린다 */
  .sj-char img{width:100%;height:auto;display:block;aspect-ratio:1/1;object-fit:cover;}
  .sj-char .cap{position:absolute;left:0;right:0;bottom:0;padding:70px 20px 20px;
    background:linear-gradient(transparent,rgba(8,11,16,.94) 62%);}
  .sj-char .t{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fun);font-weight:800;}
  .sj-char .n{font-size:30px;font-weight:900;margin:6px 0 6px;letter-spacing:-1px;color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.8);}
  .sj-char p{font-size:14px;color:#cfd6e0;line-height:1.7;}
  .gh-pair{display:grid;grid-template-columns:1fr;gap:14px;}
  @media (min-width:640px){.gh-pair{grid-template-columns:1fr 1fr;}
    .gh-pair .sj-char{display:block;}
    .gh-pair .sj-char img{aspect-ratio:1/1;min-height:0;}
    .gh-pair .sj-char .cap{position:absolute;padding:60px 16px 16px;background:linear-gradient(transparent,rgba(8,11,16,.94) 62%);}
    .gh-pair .sj-char .n{font-size:24px;color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.8);}
    .gh-pair .sj-char p{color:#cfd6e0;font-size:13px;}}
  @media (min-width:760px){.sj-char{display:grid;grid-template-columns:340px 1fr;align-items:stretch;}
    .sj-char img{aspect-ratio:auto;height:100%;min-height:340px;}
    .sj-char .cap{position:static;padding:30px 28px;background:none;display:flex;flex-direction:column;justify-content:center;}
    .sj-char .n{font-size:34px;text-shadow:none;color:var(--ink);}
    .sj-char p{color:var(--muted);font-size:15px;}}
  .tr-read{margin-top:16px;}
  .tr-read .one{border-left:3px solid var(--fun);padding:2px 0 2px 12px;margin:12px 0;}
  .tr-read .one b{font-size:13.5px;}
  .tr-read .one p{font-size:13px;color:var(--muted);line-height:1.75;margin-top:3px;}
.intro{font-size:13.5px;color:var(--muted);line-height:1.8;margin:20px 2px 0;}
.trust{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 0;}
.trust span{font-size:11.5px;font-weight:700;letter-spacing:0;color:var(--fun-ink);background:color-mix(in srgb,var(--fun) 9%,transparent);border:1px solid color-mix(in srgb,var(--fun) 35%,transparent);border-radius:100px;padding:5px 11px;}
.hero-trust{font-size:12.5px;color:var(--muted);line-height:1.7;margin-top:10px;max-width:520px;border-left:2px solid var(--fun);padding-left:10px;}
.sitenav{margin-top:36px;border-top:1px solid var(--line);padding-top:18px;}
.sitenav h2{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);margin:16px 0 7px;font-weight:700;}
.sitenav a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted);text-decoration:none;font-size:13px;margin:0 14px 2px 0;}
.sitenav a:hover{color:var(--accent);}
.sitenav .cur{display:inline-block;color:var(--ink);font-weight:700;font-size:13px;margin:0 14px 7px 0;}
.sibs{display:flex;flex-wrap:wrap;gap:7px;}
.sibs a,.sibs .cur{display:inline-flex;align-items:center;min-height:44px;font-size:13px;text-decoration:none;border:1px solid var(--line-2);border-radius:100px;padding:0 12px;color:var(--muted);}
.sibs a:hover{border-color:var(--accent);color:var(--accent);}
.sibs .cur{background:color-mix(in srgb,var(--fun) 12%,transparent);border-color:color-mix(in srgb,var(--fun) 40%,transparent);color:var(--fun-ink);font-weight:700;}