/* 편의기능 백과 — 개별 페이지 공통 스타일 (첫 화면 앱과 같은 색·글꼴) */
:root{
  --bg:#EDF0F3; --surface:#FFFFFF; --ink:#18212B; --muted:#5B6877; --line:#D6DCE3;
  --accent:#0D6E61; --accent-soft:#DCEFEB; --on-accent:#FFFFFF;
  --warn:#9A4A00; --warn-soft:#FFF1DF; --ok:#1F7A3A;
  --cap:#F7F8FA; --cap-edge:#BFC8D2; --code:#EEF1F6;
  --f-body:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono","Consolas","D2Coding",ui-monospace,monospace;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#11161B; --surface:#192028; --ink:#E5EAEF; --muted:#94A1AF; --line:#2B343E;
  --accent:#4CC2AE; --accent-soft:#163A35; --on-accent:#0B1714;
  --warn:#F2B66D; --warn-soft:#3A2A14; --ok:#6CCB8A;
  --cap:#222B35; --cap-edge:#0A0D10; --code:#202831; color-scheme:dark}
html{font-size:16px} html.big{font-size:19px}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);line-height:1.65;padding-top:env(safe-area-inset-top,0px)}
a{color:var(--accent)}
button{font:inherit;color:inherit}
.in{max-width:820px;margin:0 auto;padding-inline:16px}
header.top{background:var(--surface);border-bottom:1px solid var(--line)}
header.top .in{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding-block:12px}
.thm{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:8px;padding:4px 10px;cursor:pointer;font-size:.85rem}
.fbk{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:22px;padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:10px}
.fbk button{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:8px;padding:7px 14px;cursor:pointer;font-weight:500}
.fbk #fbY{border-color:var(--ok);color:var(--ok)}
.fbk #fbN{border-color:var(--warn);color:var(--warn)}
.fbmsg{margin:10px 0 0;font-weight:500}
.lunchwrap{max-width:340px;margin-top:12px}
.logo{font-weight:700;font-size:1.1rem;color:var(--ink);text-decoration:none;letter-spacing:-.02em}
.sf{display:flex;flex:1 1 260px;gap:6px;min-width:0}
.sf input{flex:1;min-width:0;font:inherit;padding:8px 12px;border:2px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink)}
.sf input:focus{outline:none;border-color:var(--accent)}
.sf button{border:0;background:var(--accent);color:var(--on-accent);border-radius:8px;padding:0 14px;cursor:pointer;font-weight:500}
.mainnav{display:flex;gap:14px;flex-wrap:wrap;font-size:.92rem}
.mainnav a{color:var(--muted);text-decoration:none}
.mainnav a:hover{color:var(--accent)}
main.in{padding-block:22px 48px}
.crumbs{font-size:.82rem;color:var(--muted);margin-bottom:14px;display:flex;flex-wrap:wrap;gap:4px}
.crumbs a{color:var(--muted)}
h1{font-size:1.6rem;line-height:1.3;margin:0 0 6px;letter-spacing:-.02em;text-wrap:balance}
h2{font-size:1.15rem;margin:30px 0 10px;text-wrap:balance}
.lead,.meta{color:var(--muted);margin:0 0 16px;font-size:.92rem}
.meta .fs button{border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:0 8px;cursor:pointer;margin-left:2px}
.cause{background:var(--accent-soft);border-radius:10px;padding:12px 14px}
.cause b{color:var(--accent)}
.cause.big{font-size:1.08rem}
ol.steps{list-style:none;margin:0;padding:0;display:grid;gap:8px;counter-reset:s}
ol.steps li{counter-increment:s;display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:start;padding:10px 12px;background:var(--surface);border:1px solid var(--line);border-radius:10px;cursor:pointer}
ol.steps li::before{content:counter(s);width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--surface);display:grid;place-items:center;font-size:.85rem;font-weight:700}
ol.steps li.done{opacity:.55}
ol.steps li.done::before{content:"✓";background:var(--ok)}
ol.steps li span{min-width:0;overflow-wrap:anywhere}
.tip{font-size:.82rem;color:var(--muted)}
.warn{background:var(--warn-soft);border-left:3px solid var(--warn);padding:10px 14px;border-radius:0 10px 10px 0;margin-top:14px}
.aka{font-size:.82rem;color:var(--muted)}
ul.body{padding-left:1.2em;display:grid;gap:8px}
ul.links{padding-left:1.2em;display:grid;gap:4px}
ul.list{list-style:none;padding:0;margin:0;display:grid;gap:8px}
ul.list a{display:grid;gap:2px;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--ink)}
ul.list a:hover{border-color:var(--accent)}
ul.list span{font-size:.85rem;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.tile{display:grid;gap:4px;padding:14px;background:var(--surface);border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--ink);min-width:0}
.tile:hover{border-color:var(--accent)}
.tile span{font-size:.84rem;color:var(--muted)}
.tile em{font-style:normal;font-size:.78rem;color:var(--accent)}
.jump{display:flex;flex-wrap:wrap;gap:6px}
.jump a{font-size:.85rem;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:3px 11px;text-decoration:none}
table.kt{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden;display:block;overflow-x:auto}
table.kt tbody{display:table;width:100%}
table.kt th,table.kt td{padding:9px 14px;border-top:1px solid var(--line);text-align:left;vertical-align:middle}
table.kt tr:first-child th,table.kt tr:first-child td{border-top:0}
table.kt th{font-weight:500;width:45%}
.others{line-height:2}
kbd{font-family:var(--f-mono);font-size:.82rem;background:var(--cap);border:1px solid var(--cap-edge);border-bottom-width:3px;border-radius:6px;padding:0 6px;white-space:nowrap;color:var(--ink)}
code{font-family:var(--f-mono);font-size:.82rem;background:var(--code);padding:1px 6px;border-radius:4px;overflow-wrap:anywhere}
.sep{color:var(--muted);font-size:.8rem;padding-inline:1px}
.arrow{color:var(--accent);font-weight:700;padding-inline:3px}
footer{border-top:1px solid var(--line);background:var(--surface);padding-block:18px calc(18px + env(safe-area-inset-bottom,0px));font-size:.85rem;color:var(--muted)}
footer nav{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:6px}
footer a{color:var(--muted)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:560px){h1{font-size:1.35rem} table.kt th{width:auto} table.kt tr{display:grid} table.kt th{padding-bottom:0} table.kt td{border-top:0}}