@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');
:root{--bg1:#EEF2F5;--bg2:#E1E8EE;--glass:rgba(255,255,255,.62);--card:#FFFFFF;--line:rgba(27,36,52,.08);--ink:#1B2434;--body:#4B5666;--dim:#7C8796;--mute:#A9B2BE;--acc:#1B2434;--soft:#F1F4F7;--soft2:#E7ECF1;--sh:0 10px 30px rgba(27,36,52,.06),0 1px 2px rgba(27,36,52,.04);--r:18px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Pretendard',system-ui,sans-serif;color:var(--body);line-height:1.85;font-size:14.5px;letter-spacing:-.2px;min-height:100vh;
  background:linear-gradient(160deg,var(--bg1) 0%,var(--bg2) 60%,#D9E2EA 100%);background-attachment:fixed}
a{color:inherit;text-decoration:none}
.doc a{color:var(--ink);border-bottom:1px solid rgba(27,36,52,.25)}
.doc a:hover{border-bottom-color:var(--ink)}
code{font-family:'Pretendard',monospace;font-size:12.5px;background:var(--soft2);padding:1px 7px;border-radius:6px;color:var(--ink);font-weight:500}
b{font-weight:600;color:var(--ink)}
/* ── top ── */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:22px;padding:0 32px;height:64px;background:rgba(238,242,245,.75);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.brand{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:var(--ink);letter-spacing:.02em}
.brand::before{content:'';width:26px;height:26px;border-radius:8px;background:var(--acc);box-shadow:0 4px 10px rgba(27,36,52,.25);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Crect width='26' height='26' rx='8' fill='black'/%3E%3Cpath d='M8 9h10M8 13h10M8 17h6' stroke='white' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Crect width='26' height='26' rx='8' fill='black'/%3E%3Cpath d='M8 9h10M8 13h10M8 17h6' stroke='white' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.brand span{color:var(--dim);font-weight:500;margin-left:2px}
.svc{display:flex;gap:4px;background:rgba(255,255,255,.5);padding:4px;border-radius:12px}
.svc a{font-size:13px;color:var(--dim);padding:5px 13px;border-radius:9px;font-weight:500;transition:all .15s}
.svc a.on{color:var(--ink);background:#fff;box-shadow:0 1px 3px rgba(27,36,52,.08)}
.menu{display:none;border:none;background:rgba(255,255,255,.6);border-radius:10px;width:36px;height:36px;font-size:17px;cursor:pointer;color:var(--ink)}
.search{position:relative;margin-left:auto;width:min(300px,38vw)}
.search input{width:100%;height:38px;border:1px solid transparent;border-radius:12px;background:rgba(255,255,255,.6);padding:0 14px 0 36px;font:inherit;font-size:13px;color:var(--ink);transition:all .15s}
.search::before{content:'';position:absolute;left:13px;top:11px;width:15px;height:15px;background:var(--dim);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center/contain no-repeat}
.search input::placeholder{color:var(--mute)}
.search input:focus{outline:none;background:#fff;border-color:rgba(27,36,52,.12);box-shadow:var(--sh)}
.qr{display:none;position:absolute;left:0;right:0;top:46px;background:#fff;border-radius:14px;box-shadow:0 20px 50px rgba(27,36,52,.14);overflow:hidden;padding:6px}
.qr.on{display:block}
.qr a{display:block;padding:9px 12px;border-radius:9px}
.qr a:hover{background:var(--soft)}
.qr b{display:block;font-size:13px;font-weight:600}
.qr i{font-style:normal;font-size:11px;color:var(--dim)}
.qr p{padding:12px;font-size:12.5px;color:var(--dim)}
.qr em{display:block;font-style:normal;font-size:11.5px;color:var(--body);line-height:1.5;margin-top:3px}
.qr mark{background:#FFF1B8;color:var(--ink);border-radius:3px;padding:0 1px}
/* ── layout ── */
.wrap{display:grid;grid-template-columns:236px minmax(0,1fr);max-width:1160px;margin:0 auto;gap:26px;padding:8px 32px 60px}
.side{position:sticky;top:76px;height:calc(100vh - 92px);overflow-y:auto;padding:14px 10px;background:var(--glass);border-radius:var(--r);backdrop-filter:blur(10px);scrollbar-width:none}
.side::-webkit-scrollbar{display:none}
.side .s-svc{font-size:12.5px;font-weight:600;color:var(--ink);margin:16px 12px 6px}
.side .s-svc:first-child{margin-top:4px}
.side .s-cat{font-size:11px;font-weight:600;color:var(--mute);letter-spacing:.04em;margin:16px 12px 4px}
.side .s-cat:first-child{margin-top:4px}
.side a{display:block;font-size:13px;color:var(--body);padding:7px 12px;border-radius:10px;line-height:1.5;font-weight:500;transition:all .12s}
.side a:hover{background:rgba(255,255,255,.7);color:var(--ink)}
.side a.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(27,36,52,.08)}
.doc{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:44px 52px 56px;max-width:820px}
.crumb{font-size:12px;color:var(--dim);margin-bottom:10px;font-weight:500}
h1{font-size:27px;font-weight:700;color:var(--ink);letter-spacing:-.03em;line-height:1.3;margin-bottom:22px}
h2{font-size:16px;font-weight:700;color:var(--ink);letter-spacing:-.02em;margin:40px 0 12px;padding-top:22px;border-top:1px solid var(--line)}
h2 small{font-size:12px;color:var(--mute);font-weight:500;margin-left:8px}
p{margin:0 0 12px}
p.lead{font-size:15.5px;color:var(--ink);line-height:1.85;margin-bottom:22px;font-weight:500}
ul,ol{margin:0 0 16px 0;list-style:none}
ul li{position:relative;padding-left:18px;margin:6px 0}
ul li::before{content:'';position:absolute;left:3px;top:11px;width:5px;height:5px;border-radius:50%;background:var(--mute)}
ol.steps{counter-reset:s;margin:6px 0 18px}
ol.steps li{counter-increment:s;position:relative;padding-left:38px;margin:10px 0}
ol.steps li::before{content:counter(s);position:absolute;left:0;top:3px;width:24px;height:24px;border-radius:8px;background:var(--acc);color:#fff;font-size:11.5px;font-weight:600;display:flex;align-items:center;justify-content:center}
dl.kv{margin:4px 0 18px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
dl.kv dt{font-weight:600;color:var(--ink);font-size:13.5px;padding:11px 16px 0;background:var(--soft)}
dl.kv dd{margin:0;padding:2px 16px 11px;background:var(--soft);border-bottom:1px solid #fff}
dl.kv dd:last-child{border-bottom:none}
@media(min-width:821px){
  dl.kv{display:grid;grid-template-columns:136px 1fr}
  dl.kv dt{padding:11px 16px;border-bottom:1px solid #fff}
  dl.kv dd{padding:11px 16px 11px 4px}
  dl.kv dt:last-of-type,dl.kv dd:last-of-type{border-bottom:none}
}
aside.tip,aside.warn{background:var(--soft);border-radius:14px;padding:12px 16px 12px 44px;font-size:13.5px;margin:16px 0 18px;position:relative}
aside.tip::before,aside.warn::before{content:'';position:absolute;left:15px;top:14px;width:18px;height:18px;background:var(--ink);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8v.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8v.5'/%3E%3C/svg%3E") center/contain no-repeat}
aside.warn{background:#FBF1EE;color:#6B3D31}
aside.warn::before{background:#B85C47;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l9.5 17h-19z'/%3E%3Cpath d='M12 10v4M12 17v.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l9.5 17h-19z'/%3E%3Cpath d='M12 10v4M12 17v.5'/%3E%3C/svg%3E") center/contain no-repeat}
/* ── shot ── */
figure.shot{margin:18px 0 24px}
figure.shot img{display:block;width:100%;border-radius:14px;box-shadow:var(--sh)}
figure.shot .ph{display:none}
figure.shot.empty img{display:none}
figure.shot.empty .ph{display:flex;align-items:center;justify-content:space-between;padding:0 18px;height:130px;border-radius:14px;background:linear-gradient(135deg,var(--soft),var(--soft2))}
figure.shot .ph b{font-size:12.5px;color:var(--dim);font-weight:500}
figure.shot .ph i{font-style:normal;font-size:11px;color:var(--mute)}
figure.shot figcaption{font-size:12px;color:var(--dim);padding:8px 4px 0}
/* ── prev/next ── */
.pn{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:52px;padding-top:24px;border-top:1px solid var(--line)}
.pn a{display:block;background:var(--soft);border-radius:14px;padding:12px 16px;color:var(--ink);font-size:14px;font-weight:600;border:none;transition:background .12s}
.pn a small{display:block;font-size:11px;color:var(--dim);font-weight:500;margin-bottom:2px}
.pn a.next{text-align:right}
.pn a:hover{background:var(--soft2)}
/* ── index ── */
.two{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:24px 0 20px}
.card{background:var(--soft);border-radius:16px;padding:22px 24px}
.card h2{border:none;margin:0 0 4px;padding:0;font-size:19px}
.card h2 small{font-size:11.5px;color:var(--dim);margin-left:8px;font-weight:500}
.card>p{font-size:13px;color:var(--dim);margin-bottom:10px}
ol.toc{margin:0}
ol.toc li{padding:0;margin:0}
ol.toc li::before{display:none}
ol.toc li.cat{font-size:11px;font-weight:600;color:var(--mute);letter-spacing:.04em;margin:14px 0 4px}
ol.toc li a{display:block;font-size:13.5px;color:var(--body);padding:4px 10px;margin:0 -10px;border-radius:9px;border:none;font-weight:500}
ol.toc li a:hover{background:#fff;color:var(--ink)}
.foot-note{font-size:12.5px;color:var(--dim)}
/* ── updates ── */
.upd{display:grid;grid-template-columns:104px 64px 1fr;gap:14px;padding:16px 0;border-top:1px solid var(--line);align-items:start}
.upd time{font-size:12px;color:var(--dim);font-weight:500;padding-top:3px}
.upd b{font-size:12px;color:var(--ink);background:var(--soft);padding:2px 9px;border-radius:7px;font-weight:600;white-space:nowrap}
.upd ul{margin:0}
/* ── mobile ── */
@media(max-width:820px){
  .top{padding:0 16px;gap:10px;height:58px}
  .wrap{grid-template-columns:1fr;gap:0;padding:4px 12px 50px}
  .menu{display:block}
  .svc{display:none}
  .search{width:auto;flex:1}
  .side{display:none;position:fixed;left:12px;right:12px;top:66px;height:auto;max-height:calc(100vh - 80px);background:rgba(255,255,255,.96);border-radius:16px;padding:14px 10px;box-shadow:0 20px 60px rgba(27,36,52,.18);z-index:19}
  body.nav-open .side{display:block}
  .doc{padding:28px 22px 40px;border-radius:16px}
  h1{font-size:23px}
  .two{grid-template-columns:1fr;gap:14px}
  .upd{grid-template-columns:96px 1fr;gap:6px 12px}
  .upd b{grid-column:2;justify-self:start}
  .upd ul{grid-column:2}
}
/* 좁은 그림은 왼쪽 칼럼, 설명은 오른쪽 (메뉴 위젯 페이지) */
.split{display:grid;grid-template-columns:250px minmax(0,1fr);gap:30px;align-items:start;margin:14px 0 28px}
.split.rail{grid-template-columns:84px minmax(0,1fr)}
.split figure.shot{margin:0}
.split .shot img{width:100%;height:auto;display:block}
.split>div>p:first-child{margin-top:0}
@media(max-width:720px){.split,.split.rail{grid-template-columns:1fr}.split figure.shot{max-width:260px}.split.rail figure.shot{max-width:84px}}