/* AI시대 부모백과 — 시안 E3 '오늘 해 볼 한 가지'. 폰 먼저, PC는 가운데 한 줄(최대 640px) */
:root{
  --bg:#FFFDF6; --card:#FFFFFF; --ink:#1C1A12; --soft:#77705A; --sun:#FFD25C; --dark:#1C1A12; --line:#ECE5CF; --accent:#8A6A00;
  --font:"Noto Sans KR",system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{--bg:#16140D;--card:#221F15;--ink:#F3EEDD;--soft:#B3AA90;--sun:#F2C64E;--dark:#0E0D08;--line:#34301F;--accent:#F2C64E;color-scheme:dark}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.7;word-break:keep-all;overflow-wrap:anywhere}
a{color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.bar,.pad,.foot{max-width:640px;margin:0 auto;padding-inline:16px}
.bar{display:flex;justify-content:space-between;align-items:center;padding-block:calc(14px + env(safe-area-inset-top,0px)) 10px}
.logo{font-weight:900;font-size:18px;letter-spacing:-.02em;text-decoration:none}
.logo b{font-weight:900}
.by{font-size:13px;color:var(--soft);text-decoration:none}
.pad{display:grid;gap:16px;padding-block:4px 32px}
.foot{padding-block:24px calc(32px + env(safe-area-inset-bottom,0px));font-size:12px;color:var(--soft);border-top:1px solid var(--line)}
.foot p{margin:0}
h1,h2{margin:0;text-wrap:balance}
.q{font-size:23px;font-weight:900;line-height:1.35;letter-spacing:-.02em}
.crumb{margin:0;font-size:13px;color:var(--soft)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
[hidden]{display:none!important}

/* 노란 큰 카드: 첫 화면의 새 질문, 글 화면의 질문·결론 */
.hero{background:var(--sun);color:#1C1A12;border-radius:26px;padding:20px;display:grid;gap:12px;position:relative;overflow:hidden}
.hero>*{position:relative}
.hero .no{position:absolute;right:-6px;top:-22px;font-size:120px;font-weight:900;line-height:1;color:rgba(28,26,18,.08);letter-spacing:-.05em;pointer-events:none}
.hero .tag{margin:0;font-size:13px;font-weight:700}
.hero h1{font-size:26px;font-weight:900;line-height:1.32;letter-spacing:-.03em}
.hero h1 a{text-decoration:none}
.hero-ans{display:grid;gap:8px;font-size:16px;line-height:1.65}
.hero-ans>b{font-size:21px;font-weight:900;line-height:1.35}
.hero-ans p{margin:0}
.hero-ans ol{margin:0;padding-left:22px}
.todo{background:#1C1A12;color:#FFF6D6;border-radius:16px;padding:14px 16px;font-size:15px;line-height:1.65}
.todo b{display:block;color:#FFD25C;font-size:13px;margin-bottom:2px}
.act{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;text-decoration:none}
.act span{background:rgba(255,255,255,.65);color:#1C1A12;border-radius:12px;padding:10px 6px;text-align:center;font-size:13px;font-weight:700;line-height:1.35}
.act i{display:block;font-style:normal;font-size:18px;font-weight:900}
.go{display:block;background:#1C1A12;color:#fff;text-align:center;border-radius:14px;padding:14px;font-weight:900;text-decoration:none}
mark{background:var(--sun);color:#1C1A12;padding:0 2px;border-radius:3px}
.hero mark{background:#fff}

/* 첫 화면 */
.next-sec,.sit-sec,.all{display:grid;gap:10px}
.next-sec h2,.sit-sec h2,.all h2{font-size:18px;font-weight:900;padding-top:12px}
.all h2 small{font-size:13px;font-weight:500;color:var(--soft);margin-left:4px}
.next{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin-right:-16px;padding:0 16px 4px 0;scrollbar-width:none}
.next::-webkit-scrollbar{display:none}
.card{flex:none;width:210px;scroll-snap-align:start;border:2px solid var(--ink);border-radius:18px;padding:14px;display:grid;gap:14px;align-content:space-between;min-height:140px;text-decoration:none}
.card small{font-size:12px;font-weight:700;color:var(--soft)}
.card b{font-size:16px;line-height:1.45}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;display:grid;gap:10px;min-height:104px;align-content:space-between;text-decoration:none}
.tile b{font-size:15px;line-height:1.4}
.tile small{font-size:12px;color:var(--soft)}
.seg{display:flex;gap:6px}
.seg button{flex:1;font:inherit;font-size:15px;font-weight:700;border:2px solid var(--ink);border-radius:999px;padding:8px 0;background:transparent;color:var(--ink);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.rows{display:grid}
.row{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--line);text-decoration:none}
.row:first-child{border-top:0}
.row b{font-weight:700;font-size:16px;line-height:1.5}
.row span{font-size:12px;color:var(--soft);white-space:nowrap;padding-top:3px}
.row.soon b{font-weight:400;color:var(--soft)}
.empty{margin:0;font-size:14px;color:var(--soft)}
.pick{display:grid;gap:10px}

/* 글 화면 */
.tabs{display:flex;gap:6px;position:sticky;top:env(safe-area-inset-top,0px);background:var(--bg);padding:8px 0;z-index:1}
.tabs a{flex:1;text-align:center;font-size:14px;padding:8px 0;border-radius:999px;border:2px solid var(--ink);text-decoration:none;font-weight:700}
section[id]{scroll-margin-top:64px}
.ans{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;display:grid;gap:10px}
.ans .big{font-size:20px;font-weight:900;line-height:1.4}
.ans p,.ans ol{margin:0}
.ans ol{padding-left:22px}
.evs{display:grid;gap:8px}
.evs h2,.paid h2{font-size:18px;font-weight:900}
details{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 16px;font-size:15px}
summary{font-weight:700;cursor:pointer;line-height:1.5}
details p{margin:8px 0 0}
details ol{margin:8px 0 0;padding-left:22px}
.sum{margin:0;background:var(--card);border-left:4px solid var(--sun);border-radius:4px 14px 14px 4px;padding:12px 16px;font-size:15px;font-weight:500}
.paid{background:#1C1A12;color:#FFF6D6;border-radius:22px;padding:18px;display:grid;gap:10px}
.paid .act span{background:#FFD25C}
.paid h2{color:#fff}
.paid .kitname{margin:0;font-weight:700}
.paid ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:15px}
.paid li{background:rgba(255,255,255,.08);border-radius:12px;padding:10px 12px}
.paid li b{color:#FFD25C}
.paid .btn{display:block;margin:4px 0 0;background:#FFD25C;color:#1C1A12;border-radius:12px;padding:13px;text-align:center;font-weight:900;text-decoration:none}
.paid .btn.off{background:#3A3626;color:#CFC8B0;font-weight:500}
.paid .wb{margin:0;font-size:13px;opacity:.8}
.back{font-size:14px;color:var(--accent);font-weight:700}
@media (min-width:700px){.hero h1{font-size:32px}.q{font-size:28px}.tiles{grid-template-columns:repeat(4,1fr)}}