/* =========================================================
   요술나무 — 그린/우드(나무) 톤 · 좌측 고정 사이드바 2단
   ========================================================= */
:root{
  --green:#2f7d4f; --green-d:#225f3c; --green-l:#e8f3ec;
  --wood:#8a5a33; --wood-l:#f3eadf; --sand:#f7f4ee;
  --ink:#20321f; --muted:#5d6b59; --line:#e2e6dc;
  --bg:#fbfcf8; --surface:#ffffff; --surface-2:#f2f6ee;
  --free:#2f7d4f; --free-bg:#e8f3ec; --paid:#b5742a; --paid-bg:#f6ecdd;
  --ok:#2f7d4f; --mv:#b5742a; --radius:16px;
  --shadow:0 2px 10px rgba(34,95,60,.07); --shadow-h:0 10px 26px rgba(34,95,60,.14);
  --maxw:1240px; --rail:248px;
  --sans:"Noto Sans KR",system-ui,-apple-system,"Malgun Gothic",sans-serif;
  --round:"Gaegu","Noto Sans KR",sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --green:#64c58a; --green-d:#3f9a63; --green-l:#17291d;
    --wood:#c99a6a; --wood-l:#2a2117; --sand:#161a14;
    --ink:#e7efe3; --muted:#9db197; --line:#2a3327;
    --bg:#0f140d; --surface:#161c13; --surface-2:#1a2116;
    --free:#64c58a; --free-bg:#17291d; --paid:#d9a85f; --paid-bg:#2a2117;
    --ok:#64c58a; --mv:#d9a85f;
    --shadow:0 2px 10px rgba(0,0,0,.4); --shadow-h:0 10px 26px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --green:#64c58a; --green-d:#3f9a63; --green-l:#17291d;
  --wood:#c99a6a; --wood-l:#2a2117; --sand:#161a14;
  --ink:#e7efe3; --muted:#9db197; --line:#2a3327;
  --bg:#0f140d; --surface:#161c13; --surface-2:#1a2116;
  --free:#64c58a; --free-bg:#17291d; --paid:#d9a85f; --paid-bg:#2a2117;
  --ok:#64c58a; --mv:#d9a85f;
  --shadow:0 2px 10px rgba(0,0,0,.4); --shadow-h:0 10px 26px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
body.yn-body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--green-d);text-decoration:none}

/* ---------- 상단바 ---------- */
.yn-top{position:sticky;top:0;z-index:40;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
.yn-top-in{max-width:var(--maxw);margin:0 auto;padding:12px 16px;display:flex;align-items:center;gap:18px}
.yn-logo img{width:240px;height:60px;object-fit:contain}
.yn-topnav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.yn-topnav a{padding:8px 13px;border-radius:999px;font-weight:700;font-size:.95rem;color:var(--ink)}
.yn-topnav a:hover{background:var(--green-l);color:var(--green-d)}
.yn-rail-btn{display:none;margin-left:auto;background:var(--green);color:#fff;border:0;border-radius:10px;padding:9px 13px;font-weight:700;font-family:var(--sans);cursor:pointer}

/* ---------- 2단 셸 ---------- */
.yn-shell{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:var(--rail) 1fr;gap:28px;padding:0 16px}
.yn-rail{position:relative}
.yn-rail-in{position:sticky;top:84px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 12px;box-shadow:var(--shadow);max-height:calc(100vh - 104px);overflow:auto}
.yn-rail-h{margin:2px 6px 10px;font-family:var(--round);font-size:1.2rem;color:var(--green-d)}
.yn-rail-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.yn-rail-list a{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:10px;color:var(--ink);font-weight:600;font-size:.95rem}
.yn-rail-list a .ico{width:20px;text-align:center}
.yn-rail-list a .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.yn-rail-list a .ct{font-size:.78rem;color:var(--muted);background:var(--surface-2);border-radius:999px;padding:1px 8px}
.yn-rail-list a:hover{background:var(--green-l);color:var(--green-d)}
.yn-rail-list a.on,.yn-rail-list a[aria-current="page"]{background:var(--green);color:#fff}
.yn-rail-list a.on .ct,.yn-rail-list a[aria-current="page"] .ct{background:rgba(255,255,255,.22);color:#fff}
.yn-rail-list a.home{color:var(--wood);font-weight:700}
.yn-rail-foot{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);display:flex;flex-wrap:wrap;gap:6px}
.yn-rail-foot a{font-size:.82rem;color:var(--muted);background:var(--surface-2);padding:4px 9px;border-radius:999px}
.yn-rail-foot a:hover{color:var(--green-d)}
.yn-main{min-width:0;padding:28px 0 10px}

/* ---------- 공통 섹션 ---------- */
.yn-sec{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px;margin:0 0 22px;box-shadow:var(--shadow)}
.yn-sec-tint{background:var(--surface-2)}
.yn-eyebrow{margin:0 0 6px;font-size:.8rem;font-weight:800;letter-spacing:.04em;color:var(--green);text-transform:uppercase}
.yn-sec h2{margin:0 0 10px;font-size:1.5rem;color:var(--ink);font-family:var(--round);letter-spacing:.01em}
.yn-lead{margin:0 0 16px;color:var(--muted);max-width:76ch}
.yn-sub{margin:0 0 14px;color:var(--muted);font-size:.92rem}
.yn-note{margin:14px 0 0;font-size:.84rem;color:var(--muted);background:var(--wood-l);border-left:3px solid var(--wood);padding:10px 14px;border-radius:0 10px 10px 0}
.yn-prose h3{margin:18px 0 6px;font-size:1.12rem;color:var(--green-d)}
.yn-prose p{margin:0 0 12px;color:var(--ink)}
.yn-prose ul,.yn-prose ol{margin:0 0 12px;padding-left:1.3em;color:var(--ink)}
.yn-prose li{margin:4px 0}

/* ---------- 히어로 ---------- */
.yn-hero{display:grid;grid-template-columns:1.25fr .9fr;gap:24px;align-items:center;background:linear-gradient(135deg,var(--green-l),var(--surface));border:1px solid var(--line);border-radius:var(--radius);padding:30px;margin:0 0 22px;box-shadow:var(--shadow)}
.yn-badge-pill{display:inline-block;background:var(--surface);border:1px solid var(--line);color:var(--green-d);font-weight:700;font-size:.85rem;padding:6px 12px;border-radius:999px;margin-bottom:12px}
.yn-hero h1{margin:0 0 12px;font-size:2.15rem;line-height:1.28;font-family:var(--round);color:var(--ink)}
.yn-hero h1 .pt{color:var(--green)}
.yn-hero p{margin:0 0 18px;color:var(--muted)}
.yn-hero-cta{display:flex;gap:10px;flex-wrap:wrap}
.cta{display:inline-block;background:var(--green);color:#fff;font-weight:700;padding:12px 20px;border-radius:12px;box-shadow:var(--shadow)}
.cta:hover{background:var(--green-d)}
.cta.ghost{background:var(--surface);color:var(--green-d);border:1px solid var(--line)}
.yn-hero-img img{width:100%;max-width:640px;aspect-ratio:640/400;object-fit:contain;border-radius:14px}

/* ---------- 통계바 ---------- */
.yn-statbar{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.yn-statbar .sb{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:16px;text-align:center}
.yn-statbar .sb b{display:block;font-size:1.5rem;color:var(--green-d);font-family:var(--round)}
.yn-statbar .sb.g b{color:var(--wood)}
.yn-statbar .sb.o b{color:var(--green)}
.yn-statbar .sb small{color:var(--muted);font-size:.82rem}

/* ---------- 필터바 ---------- */
.yn-filterbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0 0 14px}
.yn-search-wrap{position:relative;flex:1;min-width:230px}
.yn-search-ico{position:absolute;left:13px;top:50%;transform:translateY(-50%);opacity:.6}
.yn-search{width:100%;padding:11px 14px 11px 38px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font-family:var(--sans);font-size:.95rem}
.yn-search:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-l)}
.yn-chips{display:flex;align-items:center;gap:6px}
.yn-chip-g{font-size:.82rem;color:var(--muted);font-weight:700;margin-right:2px}
.yn-chip{background:var(--surface-2);border:1px solid var(--line);color:var(--muted);font-weight:700;font-size:.85rem;padding:7px 13px;border-radius:999px;cursor:pointer;font-family:var(--sans)}
.yn-chip:hover{border-color:var(--green);color:var(--green-d)}
.yn-chip.on{background:var(--green);border-color:var(--green);color:#fff}

/* ---------- 테이블 ---------- */
.yn-tablecard{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface)}
.yn-scroll{overflow-x:auto}
.yn-table{width:100%;border-collapse:collapse;min-width:720px;font-size:.92rem}
.yn-table th,.yn-table td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
.yn-table thead th{background:var(--green-l);color:var(--green-d);font-weight:800;font-size:.84rem;position:sticky;top:0}
.yn-table td.site{font-weight:700;color:var(--ink);white-space:normal}
.yn-table td.dom{color:var(--muted);font-family:ui-monospace,monospace;font-size:.86rem}
.yn-table td.num{color:var(--muted);font-variant-numeric:tabular-nums}
.yn-table tbody tr:hover{background:var(--green-l)}
.yn-cost{display:inline-block;font-weight:700;font-size:.78rem;padding:3px 10px;border-radius:999px}
.yn-cost.free{background:var(--free-bg);color:var(--free)}
.yn-cost.paid{background:var(--paid-bg);color:var(--paid)}
.yn-badge{display:inline-block;font-weight:700;font-size:.78rem;padding:3px 10px;border-radius:999px}
.yn-badge.ok{background:var(--free-bg);color:var(--ok)}
.yn-badge.mv{background:var(--paid-bg);color:var(--mv)}
.yn-go{color:var(--green-d);font-weight:700}
.yn-go:hover{text-decoration:underline}
.yn-noresult{margin:0;padding:22px 16px;text-align:center;color:var(--muted);font-size:.92rem}

/* ---------- 본문 이미지 ---------- */
.yn-figure{margin:0 0 18px}
.yn-figure img{width:100%;max-width:640px;aspect-ratio:640/400;object-fit:cover;border-radius:14px;border:1px solid var(--line)}
.yn-figure.wide img{max-width:none}

/* ---------- 카드(분야) ---------- */
.yn-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.yn-card{display:block;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;height:100%;transition:transform .15s,box-shadow .15s}
.yn-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-h);border-color:var(--green)}
.yn-card .ico{font-size:1.6rem}
.yn-card b{display:block;margin:8px 0 4px;color:var(--ink);font-size:1.05rem}
.yn-card small{display:block;color:var(--muted);font-size:.84rem;min-height:2.4em}
.yn-card .mini{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.yn-card .mini span{font-size:.74rem;background:var(--surface-2);color:var(--muted);padding:3px 8px;border-radius:999px}
.yn-card .mini .more{background:var(--green-l);color:var(--green-d);font-weight:700}

/* ---------- 선택 기준 ---------- */
.yn-criteria{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.yn-crit{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 16px 16px}
.yn-crit .n{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--green);color:#fff;font-weight:800;font-family:var(--round);margin-bottom:8px}
.yn-crit h3{margin:0 0 6px;font-size:1.05rem;color:var(--green-d)}
.yn-crit p{margin:0;color:var(--muted);font-size:.9rem}

/* ---------- 정의/프로세스/체크/관련 ---------- */
.yn-defs,.yn-process{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.yn-defs .def{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:16px}
.yn-defs .tag{display:inline-block;background:var(--green);color:#fff;font-weight:700;font-size:.78rem;padding:3px 10px;border-radius:999px;margin-bottom:8px}
.yn-defs h3{margin:0 0 6px;font-size:1.02rem;color:var(--ink)}
.yn-defs p{margin:0;color:var(--muted);font-size:.9rem}
.yn-process .pstep{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:16px;border-top:3px solid var(--green)}
.yn-process h3{margin:0 0 6px;font-size:1rem;color:var(--green-d)}
.yn-process p{margin:0;color:var(--muted);font-size:.9rem}
.yn-checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.yn-checks .check{display:flex;gap:9px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px}
.yn-checks .ck{color:var(--green);font-weight:800}
.yn-related{display:flex;flex-wrap:wrap;gap:9px}
.yn-related a{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-weight:600;color:var(--ink)}
.yn-related a:hover{background:var(--green);color:#fff;border-color:var(--green)}

/* ---------- 목차/빵부스러기/제목 ---------- */
.yn-toc{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin:0 0 20px;box-shadow:var(--shadow)}
.yn-toc span{font-weight:800;color:var(--green-d);font-size:.86rem;margin-right:4px}
.yn-toc a{font-size:.88rem;color:var(--ink);background:var(--surface-2);padding:5px 12px;border-radius:999px}
.yn-toc a:hover{background:var(--green-l);color:var(--green-d)}
.yn-crumb{font-size:.85rem;color:var(--muted);margin:0 0 10px}
.yn-crumb a{color:var(--green-d)}
.yn-phead{margin:0 0 20px}
.yn-phead h1{margin:0 0 8px;font-size:1.9rem;font-family:var(--round);color:var(--ink);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.yn-phead h1 .ico{font-size:1.6rem}

/* ---------- FAQ ---------- */
.yn-faq details{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:0;margin:0 0 10px;overflow:hidden}
.yn-faq summary{cursor:pointer;padding:14px 16px;font-weight:700;color:var(--ink);list-style:none}
.yn-faq summary::-webkit-details-marker{display:none}
.yn-faq summary::before{content:"＋";color:var(--green);font-weight:800;margin-right:8px}
.yn-faq details[open] summary::before{content:"－"}
.yn-faq details p{margin:0;padding:0 16px 14px;color:var(--muted)}

/* ---------- Trends ---------- */
.trends .thead{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.trends .thead b{font-family:var(--round);font-size:1.15rem;color:var(--green-d)}
.trends .live{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;color:var(--muted)}
.trends .live .dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px var(--green-l)}
.trend-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:9px}
.trend-grid a{display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 13px;color:var(--ink);font-weight:600}
.trend-grid a:hover{background:var(--green-l);color:var(--green-d);border-color:var(--green)}
.trend-grid .rk{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--surface-2);color:var(--muted);font-weight:800;font-size:.8rem;flex:none}
.trend-grid .rk.top{background:var(--green);color:#fff}
.trend-grid .kw{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- 푸터 ---------- */
.yn-foot{background:var(--green-d);color:#dceee2;margin-top:30px}
.yn-foot-in{max-width:var(--maxw);margin:0 auto;padding:34px 16px;display:grid;grid-template-columns:2fr 1fr 1fr;gap:26px}
.yn-foot h4{margin:0 0 12px;color:#fff;font-family:var(--round);font-size:1.2rem}
.yn-foot-brand p{margin:0 0 14px;color:#b9d8c6;font-size:.9rem;line-height:1.7}
.yn-foot-links,.yn-foot-cats{display:flex;flex-wrap:wrap;gap:8px 14px}
.yn-foot-links a,.yn-foot-cats a{color:#cfe8d9;font-size:.88rem}
.yn-foot-links a:hover,.yn-foot-cats a:hover{color:#fff;text-decoration:underline}
.yn-copy{border-top:1px solid rgba(255,255,255,.14);text-align:center;padding:16px;font-size:.82rem;color:#a9cbb7}

/* ---------- 반응형 ---------- */
@media (max-width:980px){
  .yn-hero{grid-template-columns:1fr}
  .yn-hero-img{order:-1}
  .yn-foot-in{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .yn-shell{grid-template-columns:1fr;gap:0}
  .yn-rail{position:fixed;inset:0 auto 0 0;width:min(84vw,300px);z-index:60;transform:translateX(-102%);transition:transform .22s;padding:12px}
  .yn-rail.open{transform:none}
  .yn-rail-in{position:static;max-height:100%;height:100%}
  .yn-rail-btn{display:inline-block}
  .yn-topnav{display:none}
  .yn-main{padding:20px 0 10px}
}
@media (max-width:560px){
  .yn-statbar{grid-template-columns:1fr 1fr}
  .yn-hero h1{font-size:1.7rem}
  .yn-sec{padding:18px}
  .yn-foot-in{grid-template-columns:1fr}
}