:root{--bg:#FBF5EC;--card:#FFFFFF;--ink:#2B211A;--sub:#7A6A5D;--line:#EADFD0;--accent:#FF6A3D;--accent2:#14A39A;--key:#FFFDF9;--keysh:#E3D6C4;
--sk0:#FFC83D;--sk1:#F7DECE;--sk2:#F3D2A2;--sk3:#D5AB88;--sk4:#AF7E57;--sk5:#7C533E;
--r:16px;--f:system-ui,-apple-system,"Segoe UI","Apple SD Gothic Neo","Malgun Gothic","Hiragino Sans","Noto Sans",sans-serif;--h:"Nunito",var(--f)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#1D1915;--card:#28221D;--ink:#F4ECE2;--sub:#B5A797;--line:#3A322B;--key:#332B24;--keysh:#14110E}}
:root[data-theme=dark]{--bg:#1D1915;--card:#28221D;--ink:#F4ECE2;--sub:#B5A797;--line:#3A322B;--key:#332B24;--keysh:#14110E}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--f);padding-bottom:96px}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}
/* 헤더 */
.top{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:2px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:10px}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;font:900 20px var(--h);letter-spacing:-.01em}
.logo svg{width:34px;height:34px}
.langs{display:flex;gap:2px;flex-wrap:wrap}
.langs a{font-size:13px;text-decoration:none;padding:4px 8px;border-radius:999px;color:var(--sub)}
.langs a[aria-current]{background:var(--ink);color:var(--bg)}
.tools{display:flex;gap:10px;align-items:center;padding-top:10px;padding-bottom:10px}
.sbox{flex:1;display:flex;align-items:center;gap:8px;background:var(--card);border:2px solid var(--line);border-radius:999px;padding:0 14px;height:46px}
.sbox:focus-within{border-color:var(--accent)}
.sbox svg{width:20px;height:20px;fill:none;stroke:var(--sub);stroke-width:2.2;stroke-linecap:round;flex:none}
.sbox input{flex:1;min-width:0;border:0;background:none;font:inherit;color:inherit;outline:none}
.tones{display:flex;gap:4px;flex:none}
.tn{width:22px;height:22px;border-radius:50%;border:2px solid var(--card);background:var(--sw);box-shadow:0 0 0 1px var(--line);cursor:pointer;padding:0}
.tn[aria-pressed=true]{box-shadow:0 0 0 2px var(--accent)}
/* 본문 */
.hero{padding:28px 0 8px}
.hero h1{font:900 clamp(26px,5vw,38px)/1.2 var(--h);margin:0 0 8px;letter-spacing:-.02em}
.hero p{color:var(--sub);margin:0 0 14px;max-width:720px}
.hero.sm h1 span{display:inline-block;transform:rotate(-8deg)}
.crumb{font-size:13px;color:var(--sub);padding-top:16px}
.crumb a{text-decoration:none}
.panel{background:var(--card);border-radius:22px;padding:18px;margin:14px 0;box-shadow:0 1px 0 var(--line)}
.panel h2{font:800 18px var(--h);margin:0 0 12px}
.panel h2:not(:first-child){margin-top:20px}
.sec{font:800 14px var(--h);color:var(--accent);text-transform:uppercase;letter-spacing:.06em;margin:20px 0 8px}
.sec:first-of-type{margin-top:0}
/* 키 */
.keys{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:8px}
.k{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--key);border:0;border-radius:12px;box-shadow:0 3px 0 var(--keysh),0 0 0 1px var(--line);height:52px;font-size:28px;line-height:1;cursor:pointer;color:inherit;padding:0;transition:transform .05s}
.k:hover{box-shadow:0 3px 0 var(--keysh),0 0 0 2px var(--accent)}
.k:active,.k.hit{transform:translateY(3px);box-shadow:0 0 0 var(--keysh),0 0 0 2px var(--accent)}
.k img{width:30px;height:30px}
.keys.named{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
.kn{height:auto;min-height:96px;padding:10px 6px 8px;gap:6px}
.kn .g{font-size:34px}
.kn img{width:36px;height:36px}
.kn .n{font-size:11.5px;line-height:1.3;color:var(--sub);text-align:center;word-break:keep-all;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#recent:empty::before{content:attr(data-empty);color:var(--sub);font-size:14px;grid-column:1/-1}
/* 주제 카드 */
.topics{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.topic{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:2px 12px;align-items:center;text-decoration:none;background:var(--bg);border-radius:var(--r);padding:12px 14px;border:2px solid transparent}
.topic:hover{border-color:var(--accent)}
.ti{grid-row:1/3;font-size:34px;width:52px;height:52px;display:grid;place-items:center;background:var(--card);border-radius:14px}
.tt{display:flex;align-items:baseline;gap:6px;min-width:0}
.tt b{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tt small{color:var(--accent2);font-weight:700;font-size:12px}
.tp{font-size:16px;letter-spacing:2px;white-space:nowrap;overflow:hidden}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips a{text-decoration:none;background:var(--bg);border-radius:999px;padding:6px 12px;font-size:14px}
.chips a:hover{background:var(--accent);color:#fff}
.how ol{margin:0;padding-left:20px;color:var(--sub)}
.note{font-size:13px;color:var(--sub);margin:12px 0 0}
.prose h1{font:900 26px var(--h)}
.prose h2{margin-top:22px}
/* 버튼 */
.tb{font:700 14px var(--f);border:0;border-radius:999px;padding:10px 16px;background:var(--bg);color:var(--ink);cursor:pointer;box-shadow:0 0 0 1px var(--line)}
.tb.main{background:var(--accent);color:#fff;box-shadow:none}
.tb:active{transform:translateY(1px)}
/* 검색 결과 */
.sr{background:var(--card);border-radius:22px;padding:18px;margin:14px 0}
.srh{margin:0 0 12px;font-weight:700}
/* 하단 모음 칸 */
.tray{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--ink);padding:10px 0 calc(10px + env(safe-area-inset-bottom))}
.trayin{display:flex;gap:8px;align-items:center}
.tbox{flex:1;min-width:0;height:44px;background:var(--bg);border-radius:12px;padding:0 12px;display:flex;align-items:center;font-size:24px;overflow-x:auto;white-space:nowrap}
.tbox:empty::before{content:attr(data-ph);font-size:14px;color:var(--sub)}
.tray .tb{background:#ffffff1f;color:#fff;box-shadow:none;flex:none}
.tray .tb.main{background:var(--accent)}
.toast{position:fixed;left:50%;bottom:86px;transform:translate(-50%,20px);opacity:0;background:var(--accent2);color:#fff;padding:8px 16px;border-radius:999px;font-weight:700;transition:.2s;pointer-events:none;z-index:40;font-size:15px}
.toast.on{opacity:1;transform:translate(-50%,0)}
.foot{color:var(--sub);font-size:14px;padding-top:20px;padding-bottom:20px;text-align:center}
.foot .small{font-size:12px}
@media (max-width:600px){
  .tools{flex-wrap:wrap}.tones{width:100%;justify-content:flex-end}
  .tn{width:24px;height:24px}
  .panel{padding:14px;border-radius:18px}
  .keys{grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:6px}
  .k{height:46px;font-size:26px}
  .keys.named{grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}
  .topics{grid-template-columns:1fr 1fr}.topic{grid-template-columns:1fr;text-align:left;padding:10px}.ti{grid-row:auto;width:44px;height:44px;font-size:28px}.tp{display:none}
  .tray .tb{padding:10px 12px}#tclr{display:none}
}
@media (max-width:600px){.tt{flex-wrap:wrap}.tt b{white-space:normal}}
@media (max-width:600px){.logo{font-size:17px;white-space:nowrap}.logo svg{width:28px;height:28px}.langs{flex-wrap:nowrap;overflow-x:auto}.langs a{font-size:12px;padding:3px 6px;white-space:nowrap}}
/* 뜻 표·고르는 법 */
.lead{font-size:16.5px;color:var(--ink)!important;max-width:820px!important}
.mt{width:100%;border-collapse:collapse;font-size:15px}
.mt th{text-align:left;font-weight:800;font-size:13px;color:var(--sub);padding:8px 10px;border-bottom:2px solid var(--line)}
.mt td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}
.mt tr:last-child td{border-bottom:0}
.mt td.mk{width:64px}
.mt td.mk .k{width:52px}
.mt td b{font-weight:800}
.guide p{margin:0 0 10px;color:var(--sub)}
.guide .more{margin:12px 0 0}
.guide .more a,.faq summary{color:var(--accent);font-weight:700;text-decoration:none}
.picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.k.combo{height:auto;padding:12px 8px 10px;gap:6px}
.k.combo .g{font-size:26px;letter-spacing:2px}
.k.combo .n{font-size:13px;color:var(--sub);font-weight:700}
.tips{margin:0;padding-left:20px;color:var(--sub)}
.tips li{margin:4px 0}
.faq details{border-bottom:1px solid var(--line);padding:10px 0}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer;color:var(--ink)}
.faq details p{margin:8px 0 0;color:var(--sub)}
@media (max-width:600px){
  .mt.full thead{display:none}
  .mt.full tr{display:grid;grid-template-columns:56px 1fr;gap:4px 10px;padding:10px 0;border-bottom:1px solid var(--line)}
  .mt.full td{border:0;padding:0}
  .mt.full td.mk{grid-row:1/3}
  .mt.full td:last-child{font-size:13.5px;color:var(--sub)}
}