/* 스킨 젠(禪) — 요가·명상 앱 같은 차분한 동양풍. 읽기 쉬운 서체(손글씨 없음) · 부드러운 면 · 얇은 선 · 여백.
   배경은 두 가지: 웜 화이트(light) / 웜 차콜(dark).  포인트 색은 mist(안개 청) 하나(예전에는 mist · clay · sage · sand 네 가지였다).
   html[data-skin="zen"][data-mode="light|dark"][data-accent="mist"]  — app.js 가 설정한다. */

html[data-skin="zen"] { --hand:"Noto Serif KR",serif; --sans:"Noto Sans KR",sans-serif; --serif:"Noto Serif KR",serif; }
html[data-skin="zen"][data-mode="light"] {
  --paper:#f7f3ea; --card:#fcfaf4; --field:#fffdf8; --ink:#2b2926; --mute:#857e70; --line:#e5dfd0; --line2:#d3cab5; --on:#fffdf8; --body-bg:#ebe6da;
  --memo:#f0e9d9; --sticky:#ede6d4; --ring:#e6dfcd;
  --wood:#6b8a70; --fire:#bd6b45; --earth:#b8963f; --metal:#8a8f87; --water:#566377;
  --wood-t:#dde6d8; --fire-t:#f2d9c8; --earth-t:#efe0b8; --metal-t:#e6e3d8; --water-t:#dde2e9;
}
html[data-skin="zen"][data-mode="dark"] {
  --paper:#1b1c22; --card:#25262e; --field:#2c2d37; --ink:#ebe7dc; --mute:#a2a0a8; --line:#35363f; --line2:#464853; --on:#1b1c22; --body-bg:#121318;
  --memo:#2b2c36; --sticky:#2b2c36; --ring:#2c2d37;
  --wood:#9bbba0; --fire:#e09a78; --earth:#dcc16f; --metal:#b4b8bf; --water:#a8b3c4;
  --wood-t:#2b4036; --fire-t:#4a3030; --earth-t:#463f21; --metal-t:#383d50; --water-t:#2c3340;
}
html[data-skin="zen"][data-mode="light"][data-accent="mist"] { --terra:#3d6396; --terra-d:#2d4d7a; --tint:rgba(61,99,150,.11); }
html[data-skin="zen"][data-mode="dark"][data-accent="mist"] { --terra:#8fb0d6; --terra-d:#a9c4e4; --tint:rgba(143,176,214,.14); }

/* ── 공통 구조 ── */
html[data-skin="zen"] { --shadow:0 1px 2px rgba(0,0,0,.04), 0 6px 18px rgba(0,0,0,.05); color-scheme:light; }
html[data-skin="zen"][data-mode="dark"] { color-scheme:dark; --shadow:0 1px 2px rgba(0,0,0,.25), 0 8px 22px rgba(0,0,0,.25); }
html[data-skin="zen"] body { background:var(--body-bg); color:var(--ink); font-family:var(--sans); letter-spacing:-.005em; }
html[data-skin="zen"] .app { background:var(--paper); background-image:none; box-shadow:0 0 0 1px var(--line); isolation:isolate; overflow-x:clip; }
html[data-skin="zen"] .app::before { content:""; position:absolute; z-index:-1; right:-70px; top:-70px; width:210px; height:210px; border-radius:50%; border:1px solid var(--ring); box-shadow:0 0 0 22px transparent, 0 0 0 23px var(--ring), 0 0 0 52px transparent, 0 0 0 53px var(--ring); pointer-events:none; }
@media (max-width:560px) { html[data-skin="zen"] body { background:var(--paper); } html[data-skin="zen"] .app { box-shadow:none; } }
html[data-skin="zen"] a { color:var(--terra-d); }

html[data-skin="zen"] .wob { background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); transform:none !important; }
html[data-skin="zen"] .wob.t, html[data-skin="zen"] .wob.s { background:var(--memo); }
html[data-skin="zen"] .squig { height:1px; background:var(--line2); margin:12px 0 0; width:36px; border-radius:1px; }

/* 상단 */
html[data-skin="zen"] .appbar { padding:18px 20px 8px; }
html[data-skin="zen"] .logo { font:700 17px/1.2 var(--hand); letter-spacing:-.01em; }
html[data-skin="zen"] .logo-sub, html[data-skin="zen"] .logo small { color:var(--terra-d); }

html[data-skin="zen"] .logo .logo-mark { color:var(--ink); }
html[data-skin="zen"] .avatar { width:34px; height:34px; border:1px solid var(--line2); background:var(--card); box-shadow:none; font:700 15px var(--serif); color:var(--ink); }
html[data-skin="zen"] .hd { padding:10px 20px 4px; }
html[data-skin="zen"] .hd small { font:500 12px var(--sans); letter-spacing:.14em; color:var(--mute); }
html[data-skin="zen"] .hd h1, html[data-skin="zen"] .hd h2 { font:700 25px/1.35 var(--hand); letter-spacing:-.02em; margin-top:4px; }

/* 카드·버튼·칩 */
html[data-skin="zen"] .card { margin:14px 20px 0; padding:18px 18px 16px; }
html[data-skin="zen"] .card h3 { font:700 15.5px/1.4 var(--hand); letter-spacing:0; margin:0 0 8px; color:var(--ink); }
html[data-skin="zen"] .btn { border:1px solid var(--line2); border-radius:12px; box-shadow:none; background:var(--card); color:var(--ink); font:600 15px var(--sans); padding:12px 20px; }
html[data-skin="zen"] .btn:active { transform:scale(.98); box-shadow:none; }
html[data-skin="zen"] .btn.primary { background:var(--terra); border-color:var(--terra); color:var(--on); }
html[data-skin="zen"] .btn.primary:disabled { background:var(--line2); border-color:var(--line2); color:var(--mute); }
html[data-skin="zen"] .btn.ghost { background:transparent; }
html[data-skin="zen"] .btn.sm { padding:8px 14px; font-size:13.5px; border-radius:10px; }
html[data-skin="zen"] .chip, html[data-skin="zen"] .badge, html[data-skin="zen"] .season-tag, html[data-skin="zen"] .prel { border:1px solid var(--line2); background:var(--field); color:var(--ink); font:500 12.5px var(--sans); }
html[data-skin="zen"] .chip.on { background:var(--terra); border-color:var(--terra); color:var(--on); }
html[data-skin="zen"] .toast { background:var(--ink); color:var(--paper); font:500 14px var(--sans); }
html[data-skin="zen"] .mode-badge { display:none; }

/* 폼 */
html[data-skin="zen"] .field > label, html[data-skin="zen"] .field > .lab, html[data-skin="zen"] details.adv summary { font:600 13.5px var(--sans); color:var(--mute); letter-spacing:.01em; }
html[data-skin="zen"] details.adv summary { color:var(--terra-d); }

html[data-skin="zen"] input[type=date], html[data-skin="zen"] input[type=time], html[data-skin="zen"] input[type=search], html[data-skin="zen"] input[type=text], html[data-skin="zen"] select {
  background:var(--field); color:var(--ink); border:1px solid var(--line2); border-radius:10px; }
html[data-skin="zen"] input:focus, html[data-skin="zen"] select:focus { box-shadow:0 0 0 3px var(--tint); border-color:var(--terra); }
html[data-skin="zen"] .seg label, html[data-skin="zen"] .themes span, html[data-skin="zen"] .pick span { border:1px solid var(--line2); border-radius:10px; background:var(--field); color:var(--ink); font:500 14px var(--sans); }
html[data-skin="zen"] .themes span, html[data-skin="zen"] .pick span { border-radius:99px; }
html[data-skin="zen"] .seg input:checked + label, html[data-skin="zen"] .themes input:checked + span, html[data-skin="zen"] .pick input:checked + span { background:var(--terra); border-color:var(--terra); color:var(--on); }
html[data-skin="zen"] .pick input:checked + span .prel { color:var(--ink); }
html[data-skin="zen"] .results { background:var(--card); border:1px solid var(--line2); box-shadow:var(--shadow); }
html[data-skin="zen"] .results button { border-bottom:1px solid var(--line); color:var(--ink); }
html[data-skin="zen"] .results button:hover { background:var(--memo); }

/* 온보딩·홈 */
html[data-skin="zen"] .hello { margin:12px 20px 0; padding:22px 20px 18px; }
html[data-skin="zen"] .hello p { font:400 16.5px/1.85 var(--hand); }
html[data-skin="zen"] .hello .to { color:var(--terra-d); font-weight:700; }

html[data-skin="zen"] .promise div { font:500 13px/1.5 var(--sans); padding:14px 6px; }
html[data-skin="zen"] .promise i { font:700 20px var(--serif); color:var(--terra-d); }

html[data-skin="zen"] .season-card { padding:22px 20px 18px; }
html[data-skin="zen"] .season-badge { background:var(--tint); color:var(--terra-d); font:600 12px var(--sans); letter-spacing:.04em; }

html[data-skin="zen"] .season-title { font:700 21px/1.45 var(--hand); letter-spacing:-.02em; }
html[data-skin="zen"] .season-title b { color:var(--terra-d); }

html[data-skin="zen"] .season-desc { font:400 15px/1.8 var(--sans); color:var(--ink); opacity:.88; }
html[data-skin="zen"] .season-track { border-top:1px solid var(--line); }
html[data-skin="zen"] .season-node { font:500 13px var(--sans); border-radius:12px; }
html[data-skin="zen"] .season-node.on { border-color:var(--terra); background:var(--tint); box-shadow:none; color:var(--ink); }
html[data-skin="zen"] .cta { background:var(--terra); color:var(--on); border-color:var(--terra); }
html[data-skin="zen"] .cta b { font:700 16.5px var(--hand); } html[data-skin="zen"] .cta span { font:400 13px var(--sans); opacity:.9; }
html[data-skin="zen"] .cta u { background:var(--on); color:var(--terra); border:0; }
html[data-skin="zen"] .cta-badge { background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.4); font:500 11px var(--sans); }

html[data-skin="zen"] .seed-ilgan { border:1px solid var(--line2); background:var(--field); font:700 24px var(--serif); border-radius:50%; }
html[data-skin="zen"] .seed-info { font:400 14.5px/1.6 var(--sans); } html[data-skin="zen"] .seed-info b { font-size:16px; }
html[data-skin="zen"] .stamps-header a { color:var(--terra-d); }
html[data-skin="zen"] .stamp { font:700 24px/1.1 var(--serif); padding:12px 0 10px; }
html[data-skin="zen"] .stamp small { font:400 12.5px var(--sans); }
html[data-skin="zen"] .foot { border-top:1px solid var(--line); color:var(--mute); }

/* 만세력 */
html[data-skin="zen"] .pc .l { font:500 12.5px var(--sans); } html[data-skin="zen"] .pc .s { font:400 12px var(--sans); }
html[data-skin="zen"] .pc .u { background:var(--field); border:1px solid var(--line2); font:500 12px var(--sans); }
html[data-skin="zen"] .pc.me { background:var(--memo); }
html[data-skin="zen"] .gl { border:1px solid var(--line2); border-radius:14px; }
html[data-skin="zen"] .gl b { font:700 25px/1.2 var(--serif); } html[data-skin="zen"] .gl small { font:400 11px var(--sans); }
html[data-skin="zen"] .hid span { background:var(--field); border:1px solid var(--line); }
html[data-skin="zen"] .blob { border:1px solid var(--line2); font:600 13px var(--sans); }
html[data-skin="zen"] .stone { border:1px solid var(--line2); border-radius:12px; background:var(--field); font:700 17px var(--serif); }
html[data-skin="zen"] .stone small { font:400 12px var(--sans); }
html[data-skin="zen"] .stone.cur { background:var(--terra); border-color:var(--terra); color:var(--on); transform:translateY(-6px); box-shadow:var(--shadow); }
html[data-skin="zen"] .stone.cur small { color:var(--on); opacity:.85; }
html[data-skin="zen"] .memo { background:var(--memo); border:1px solid var(--line); border-radius:14px; transform:none; font:400 14.5px/1.8 var(--sans); }
html[data-skin="zen"] .glossary summary { font:600 14px var(--sans); color:var(--terra-d); }

/* 리포트·진행·결과 */
html[data-skin="zen"] .ritem b { font:700 16px var(--hand); }
html[data-skin="zen"] .prog { padding:22px 18px; }
html[data-skin="zen"] .prog .count { font:700 34px/1.1 var(--serif); letter-spacing:.02em; }
html[data-skin="zen"] .prog p { font:400 14.5px var(--sans); }
html[data-skin="zen"] .bar { height:8px; border:0; background:var(--line); border-radius:99px; }
html[data-skin="zen"] .bar b { background:var(--terra) !important; border-radius:99px; transition:width .4s ease; }
html[data-skin="zen"] .steps li { color:var(--mute); border-bottom:1px solid var(--line); font-size:14px; }
html[data-skin="zen"] .steps .ic { border:1.5px solid var(--line2); border-radius:50%; }
html[data-skin="zen"] .steps li.run { color:var(--ink); } html[data-skin="zen"] .steps li.run .ic { border-color:var(--terra); border-top-color:transparent; }
html[data-skin="zen"] .steps li.done .ic { background:var(--terra); border-color:var(--terra); color:var(--on); }
html[data-skin="zen"] .feed h3 { font:600 13.5px var(--sans); color:var(--mute); letter-spacing:.04em; }
html[data-skin="zen"] .note, html[data-skin="zen"] .note:nth-child(n) { background:var(--card); transform:none; }
html[data-skin="zen"] .note b { font:700 15px var(--hand); color:var(--terra-d); }
html[data-skin="zen"] .note ul { font-size:14px; line-height:1.75; }
html[data-skin="zen"] .modal .box { background:var(--paper); border:1px solid var(--line2); }
html[data-skin="zen"] .modal canvas { border:1px solid var(--line2); }

/* 사주 선택·궁합 (people) */
html[data-skin="zen"] .prel { margin-left:6px; padding:0 8px; border-radius:99px; }
html[data-skin="zen"] .pav { border:1px solid var(--line2); background:var(--field); font:700 15px var(--serif); }
html[data-skin="zen"] .prow.on .pav { background:var(--terra); color:var(--on); border-color:var(--terra); }
html[data-skin="zen"] .pinfo b { font:700 16px var(--hand); } html[data-skin="zen"] .pacts { color:var(--terra-d); }
html[data-skin="zen"] .pitem { border:1px solid var(--line); border-radius:14px; }
html[data-skin="zen"] .sheet-box { background:var(--card); } html[data-skin="zen"] .sheet-box h3 { font:700 17px var(--hand); }
html[data-skin="zen"] .prow-btn { border:1px solid var(--line); } html[data-skin="zen"] .prow-btn:hover { background:var(--memo); }
html[data-skin="zen"] .rtarget b { font:700 18px var(--hand); }
html[data-skin="zen"] .mnames { font:700 17px var(--hand); } html[data-skin="zen"] .mnames u { color:var(--terra-d); }

html[data-skin="zen"] .mrank { background:var(--terra); color:var(--on); font:700 14px var(--serif); }
html[data-skin="zen"] .mscore b { font:700 32px/1 var(--serif); color:var(--terra-d); }

/* 하단 탭 */
html[data-skin="zen"] .tabbar { background:var(--card); border-top:1px solid var(--line); height:72px; }
html[data-skin="zen"] .tab { font:500 11.5px var(--sans); color:var(--mute); }
html[data-skin="zen"] .tab.on { color:var(--terra-d); font-weight:700; }
html[data-skin="zen"] .tab svg { stroke-width:1.5; }

/* 포인트별 배경 장식: 모서리에 아주 옅게 */
html[data-skin="zen"] .app::before { box-shadow:none; border:0; border-radius:0; width:260px; height:340px; right:-30px; top:-10px; background-repeat:no-repeat; background-position:center; background-size:contain; opacity:var(--deco-o,1); }
html[data-skin="zen"][data-mode="dark"] { --deco-o:.9; }
html[data-skin="zen"][data-accent="mist"][data-mode="light"] .app::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 340'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%233d6396' stop-opacity='.26'/%3E%3Cstop offset='1' stop-color='%233d6396' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M220 8 C90 60 230 150 110 300' fill='none' stroke='url(%23g)' stroke-width='38' stroke-linecap='round'/%3E%3Cpath d='M238 22 C122 80 242 162 140 312' fill='none' stroke='url(%23g)' stroke-width='5' stroke-linecap='round' stroke-dasharray='2 7'/%3E%3C/svg%3E"); }
html[data-skin="zen"][data-accent="mist"][data-mode="dark"] .app::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 340'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%238fb0d6' stop-opacity='.26'/%3E%3Cstop offset='1' stop-color='%238fb0d6' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M220 8 C90 60 230 150 110 300' fill='none' stroke='url(%23g)' stroke-width='38' stroke-linecap='round'/%3E%3Cpath d='M238 22 C122 80 242 162 140 312' fill='none' stroke='url(%23g)' stroke-width='5' stroke-linecap='round' stroke-dasharray='2 7'/%3E%3C/svg%3E"); }
html[data-mode="dark"] .logo .logo-mark .dot { fill:#f0705f; }
html[data-skin="zen"] .logo .logo-name { font-family:var(--hand); font-weight:700; font-size:15.5px; letter-spacing:-.01em; }
html[data-skin="zen"] .logo .logo-sub { font:400 11px var(--sans); }