/* 저작권 (c) 2026 (주)한국바코드시스템. 값의 원본: kbs-websites/디자인-적용-사양.md (먹색 장부 결 + 지금 색). 새 글꼴 없음.
   색 아이콘 열 가지 색은 2026-10-24 회의의 예외, 아이콘(.ci)에만 씁니다. 시안: kbs-websites/play/시안/시안.html */
:root{--ink:#1c2530;--ink-2:#5b6673;--ink-3:#6b7480;--line:#dde2e8;--line-2:#e9edf2;--bg:#fff;--soft:#f2f4f7;--input-line:#8a949e;
 --head:#1e2b3c;--head-2:#2c3d54;--head-ink:#c5d0dd;--brand:#2B3990;--accent:#2f5fa8;--accent-2:#27508e;--warn:#b54708;--bad:#b42318;--good:#067647;
 --cell:32px;--cell-sm:24px;--ctl:13px;--pad:24px}
@media screen and (pointer:coarse),screen and (max-width:860px){:root{--cell:48px;--cell-sm:48px;--ctl:16px;--pad:16px}}
@media screen and (max-width:400px){:root{--pad:12px}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Segoe UI","Malgun Gothic","맑은 고딕",sans-serif;font-size:13px;line-height:20px;color:var(--ink);background:var(--bg);font-variant-numeric:tabular-nums;word-break:keep-all;overflow-wrap:anywhere;min-height:100vh;display:flex;flex-direction:column}
a{color:var(--brand);text-decoration:none}a:hover{text-decoration:underline}
b,strong{font-weight:700}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
header :focus-visible{outline-color:#fff;outline-offset:-4px}
::placeholder{color:var(--ink-3);opacity:1}
h1{font-size:16px;line-height:24px;font-weight:700;margin:0;display:flex;align-items:center;gap:8px;min-width:0}
h2{font-size:13px;line-height:20px;font-weight:700;margin:0 0 8px;padding-bottom:4px;border-bottom:2px solid var(--ink);display:flex;align-items:center;gap:6px}
h3{font-size:13px;line-height:20px;font-weight:700;margin:16px 0 4px}
p{margin:0 0 8px}
code,.mono{font-family:Consolas,"D2Coding",monospace}
.logo-mark{width:17px;height:16px;flex:none}

/* 색 아이콘 */
.ci{width:32px;height:32px;flex:none;overflow:visible;display:inline-block;vertical-align:middle}
.ci.sm{width:18px;height:18px}.ci.md{width:24px;height:24px}
.ci.g{--f:#DCF2E3;--s:#1E8A4C}.ci.o{--f:#FDE8D5;--s:#C4570F}.ci.b{--f:#DCE9FB;--s:#2563B8}.ci.p{--f:#EAE3FA;--s:#6B46C1}.ci.t{--f:#D4F0EE;--s:#0F7C77}
.ci.y{--f:#FFEFC2;--s:#A86B00}.ci.r{--f:#FCDEDD;--s:#C42F2B}.ci.s{--f:#E3E8EE;--s:#4A5868}.ci.k{--f:#FADDEB;--s:#B5367A}.ci.n{--f:#DFE3F5;--s:#29358E}

/* 머리띠 */
header.top{background:var(--head);color:#fff;display:flex;flex-wrap:wrap;align-items:center;padding:0 var(--pad)}
header.top .row1{display:flex;align-items:center;gap:24px;height:48px;flex:1 1 100%;min-width:0}
.brand{color:#fff;font-weight:700;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.brand small{font-weight:400;color:var(--head-ink);font-size:12px}
.brand:hover{text-decoration:none}
header .srch{margin-left:auto;display:flex;gap:16px;align-items:center;flex:none}
header .srch form{margin:0;display:flex}
header .srch input{height:32px;width:260px;border:1px solid var(--head-2);background:var(--head-2);color:#fff;border-radius:2px;padding:0 8px;font:inherit;font-size:13px}
header .srch input::placeholder{color:var(--head-ink)}
header .lnk{color:var(--head-ink);white-space:nowrap;background:none;border:0;padding:0;margin:0;font:inherit;cursor:pointer;min-height:44px;display:inline-flex;align-items:center}
header .lnk:hover{color:#fff;text-decoration:none}
header .lnk.on{color:#fff;font-weight:700}header .lnk b{color:#fff}
nav.m{display:none;flex:0 0 100%;height:44px;align-items:stretch;overflow-x:auto;scrollbar-width:none;border-top:1px solid #3a4c61}
nav.m::-webkit-scrollbar{display:none}
nav.m a{display:inline-flex;align-items:center;padding:0 12px;color:var(--head-ink);white-space:nowrap}
nav.m a.on{color:#fff;font-weight:700}
nav.m a:first-child{padding-left:0}

/* 본문 틀 */
.page{display:grid;grid-template-columns:208px minmax(0,1fr);flex:1}
aside{border-right:1px solid var(--line);padding:16px 0}
aside a{display:flex;align-items:center;gap:10px;height:36px;padding:0 16px 0 14px;color:var(--ink);border-left:2px solid transparent}
aside a:hover{text-decoration:none;background:var(--soft)}
aside a.on{border-left-color:var(--brand);font-weight:700;background:var(--soft)}
aside .grp{font-size:12px;line-height:16px;color:var(--ink-2);padding:16px 16px 4px}
main{padding:var(--pad);min-width:0}
.crumb{font-size:12px;line-height:16px;color:var(--ink-2);margin-bottom:4px}
.crumb a{color:var(--ink-2)}
.titlebar{display:flex;align-items:center;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.titlebar .cnt{color:var(--ink-2)}
.titlebar .acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
footer{border-top:1px solid var(--line);padding:12px var(--pad);font-size:12px;line-height:16px;color:var(--ink-3);display:flex;gap:4px 16px;flex-wrap:wrap}
footer span+span{margin-left:-12px}
footer a{color:var(--brand)}

/* 단추·입력 */
.btn,button.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:var(--cell);padding:0 14px;border:1px solid var(--input-line);border-radius:2px;background:#fff;color:var(--ink);font:inherit;font-weight:700;cursor:pointer;white-space:nowrap;text-decoration:none}
.btn:hover{text-decoration:none;background:var(--soft)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:#fff}.btn.pri:hover{background:var(--accent-2);border-color:var(--accent-2)}
.btn.sm{height:var(--cell-sm);font-size:12px;padding:0 10px}
.btn.danger{border-color:var(--bad);color:var(--bad)}
.btn.off,.btn:disabled{background:#fff;border-color:var(--line);color:var(--ink-2);cursor:default}
.inp,select.inp,textarea.inp{height:var(--cell);border:1px solid var(--input-line);border-radius:2px;padding:0 8px;font:inherit;font-size:var(--ctl);background:#fff;color:var(--ink);width:100%;display:block;max-width:100%}
textarea.inp{height:auto;padding:6px 8px;font-family:Consolas,"D2Coding",monospace;font-size:12px;line-height:16px;resize:vertical}
.inp.ro{background:var(--soft);color:var(--ink-2)}
.inp.bad,.inp[aria-invalid="true"]{border:2px solid var(--bad);padding-left:7px;padding-right:7px}
p.err{margin:0 0 4px;font-size:12px;line-height:16px;font-weight:700;color:var(--bad)}
label.f{display:block;min-width:0}
label.f>span{display:block;font-size:12px;line-height:16px;color:var(--ink-2);margin-bottom:4px}
.filt{display:flex;gap:8px;flex-wrap:wrap;align-items:end;margin-bottom:16px}
.filt label.f{width:160px}.filt .q{flex:1;min-width:200px}
.radios{display:flex;flex-wrap:wrap;gap:4px 16px}
.radios label{display:inline-flex;align-items:center;gap:6px;min-height:var(--cell)}
input[type=radio],input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent);margin:0}
@media screen and (pointer:coarse),screen and (max-width:860px){input[type=radio],input[type=checkbox]{width:24px;height:24px}}
.chk{display:inline-flex;align-items:center;gap:6px;min-height:var(--cell)}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.stack{display:flex;flex-direction:column;gap:8px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sp{flex:1}
.muted{color:var(--ink-2);font-size:12px;line-height:16px}
.nb{white-space:nowrap}

/* 표 */
.tbl{width:100%;border-collapse:collapse;table-layout:fixed}
.tbl th{text-align:left;font-size:12px;line-height:16px;color:var(--ink-2);font-weight:700;padding:8px 12px;border-bottom:2px solid var(--ink);white-space:nowrap}
.tbl td{padding:6px 12px;border-bottom:1px solid var(--line);vertical-align:middle;overflow-wrap:anywhere}
.tbl tbody tr:hover td{background:var(--soft)}
.tbl .n{text-align:right}
.tbl td.acts{white-space:nowrap;text-align:right}
.tbl td.acts .btn{margin-left:4px}
.tbl tr.sel td:first-child{box-shadow:inset 2px 0 var(--brand)}
.tbl td .ci{vertical-align:-4px;margin-right:6px}
.tbl td[colspan]{color:var(--ink-2);padding:16px 12px}
.badge{font-size:12px;font-weight:700;white-space:nowrap}.ok{color:var(--good)}.warn{color:var(--warn)}.bad{color:var(--bad)}.off{color:var(--ink-2)}
.lang{display:inline-flex;gap:4px;font-size:12px;line-height:16px}
.lang span{border:1px solid var(--input-line);border-radius:2px;padding:0 4px;color:var(--ink-2)}
.lang span.on{border-color:var(--brand);color:var(--brand);font-weight:700}
.pager{display:flex;justify-content:center;gap:4px;margin-top:16px}
.pager .btn.on{border-color:var(--ink)}

/* 묶음 */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tile{border:1px solid var(--line);padding:16px;display:flex;gap:12px;align-items:flex-start;color:var(--ink);min-height:96px}
.tile:hover{text-decoration:none;background:var(--soft)}
.tile b{display:block}.tile span{color:var(--ink-2);font-size:12px;line-height:16px;display:block}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.cols-side{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
.cols-side.wide{grid-template-columns:minmax(0,1fr) 400px}
.cols-side.photo-left{grid-template-columns:380px minmax(0,1fr)}
.cols-toc{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;align-items:start}
.cols2>*,.cols-side>*,.cols-toc>*{min-width:0}
.box{border:1px solid var(--line);background:#fff}
.box+.box{margin-top:16px}
.box .bh{padding:6px 12px;border-bottom:2px solid var(--ink);font-weight:700;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.box .bh .cnt{color:var(--ink-2);font-weight:400}
.box .bb{padding:12px}
.tabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:16px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{display:inline-flex;align-items:center;min-height:var(--cell);padding:6px 12px;color:var(--ink-2);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs a.on{color:var(--ink);font-weight:700;border-bottom-color:var(--brand)}
.tabs a:hover{text-decoration:none;color:var(--ink)}
.notice{border-left:3px solid var(--brand);padding:8px 12px;margin:0 0 16px;white-space:pre-line}
.notice.bad{border-color:var(--bad)}.notice.good{border-color:var(--good)}.notice.warn{border-color:var(--warn)}
.mono{font-size:12px;line-height:16px;white-space:pre-wrap;background:var(--soft);padding:8px 12px;border:1px solid var(--line);margin:0;min-height:96px;overflow-wrap:anywhere}
.big{font-size:20px;line-height:28px;font-weight:700}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;margin:0}
.kv dt{color:var(--ink-2);font-size:12px;line-height:20px}.kv dd{margin:0;min-width:0}
.toc a{display:block;padding:4px 0 4px 10px;border-left:2px solid transparent;color:var(--ink)}
.toc a.on{border-left-color:var(--brand);font-weight:700}
.toc a.sub{padding-left:22px;color:var(--ink-2)}
.steps{counter-reset:s;margin:0;padding:0;list-style:none}
.steps li{display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--line-2)}
.steps li::before{counter-increment:s;content:counter(s);width:24px;height:24px;border:1px solid var(--ink);border-radius:2px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:none}
.steps li .t{font-weight:700}
.drop{border:1px dashed var(--input-line);padding:24px;text-align:center;color:var(--ink-2)}
.empty{padding:24px 0;color:var(--ink-2)}

/* 동영상·제품 */
.vid{aspect-ratio:16/9;color:#fff;display:flex;align-items:center;justify-content:center;position:relative;background:var(--head);overflow:hidden}
.vid img{width:100%;height:100%;object-fit:cover;display:block}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid .dur{position:absolute;right:8px;bottom:8px;font-size:12px;line-height:16px;color:#fff;background:rgba(0,0,0,.6);padding:0 4px;border-radius:2px}
.vid .play{position:absolute;width:48px;height:34px;border-radius:8px;background:#C42F2B;display:flex;align-items:center;justify-content:center}
.vid .play::after{content:"";border-left:14px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:3px}
.vcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.vcard{border:1px solid var(--line);color:var(--ink);display:block}
.vcard:hover{text-decoration:none;background:var(--soft)}
.vcard .vt{padding:8px 12px}.vcard .vt b{display:block}.vcard .vt span{color:var(--ink-2);font-size:12px;line-height:16px}
.pcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.pcard{border:1px solid var(--line);color:var(--ink);display:block}
.pcard:hover{text-decoration:none;background:var(--soft)}
.photo{aspect-ratio:4/3;background:var(--soft);display:flex;align-items:center;justify-content:center;color:var(--ink-3);font-size:12px;flex-direction:column;gap:4px;border-bottom:1px solid var(--line);overflow:hidden}
.photo img{width:100%;height:100%;object-fit:contain;display:block;background:#fff}
.pcard .pt{padding:8px 12px}.pcard .pt b{display:block}.pcard .pt span{color:var(--ink-2);font-size:12px;line-height:16px;display:block}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}
.gallery .photo{aspect-ratio:1;border:1px solid var(--line);cursor:pointer}
.gallery .photo.on{border:2px solid var(--brand)}
.main-photo{border:1px solid var(--line)}
.main-photo .photo{aspect-ratio:4/3;border:0}
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.twocol .pane{border:1px solid var(--line);padding:12px}
.twocol .pane h4{margin:0 0 8px;font-size:12px;line-height:16px;color:var(--ink-2);font-weight:700}
.scanbox{border:2px solid var(--ink);padding:16px;text-align:center}
.scanbox .inp{text-align:center;font-size:16px;height:48px}
.label-prev{border:1px solid var(--ink);background:#fff;width:300px;max-width:100%;padding:12px;display:grid;grid-template-columns:1fr 72px;gap:8px;align-items:end}
.label-prev .co{font-weight:700;font-size:16px;line-height:24px}
.label-prev .ln{font-size:12px;line-height:16px}
.label-prev .bar{grid-column:1/-1}
.bar svg,.bar img{display:block;max-width:100%}
.bar .hr{font-family:Consolas,"D2Coding",monospace;font-size:12px;line-height:16px;letter-spacing:2px;text-align:center}

/* 휴대폰·태블릿 */
@media screen and (max-width:860px){
 header.top .row1{height:44px}
 header .srch{gap:12px}
 header .srch input{width:160px}
 nav.m{display:flex}
 .page{grid-template-columns:1fr}
 aside{display:none}
 .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
 .cols2,.cols-side,.cols-side.wide,.cols-side.photo-left,.cols-toc,.twocol{grid-template-columns:1fr}
 .vcards{grid-template-columns:repeat(2,minmax(0,1fr))}
 .pcards{grid-template-columns:repeat(2,minmax(0,1fr))}
 .filt label.f{width:calc(50% - 4px)}.filt .q{width:100%;flex:none}
 .g3{grid-template-columns:1fr 1fr}
 .titlebar .acts{margin-left:0;width:100%}
 .titlebar .acts .btn{flex:1}
}
@media screen and (max-width:600px){
 header .srch input{display:none}
 .brand small{display:none}
 .vcards{grid-template-columns:1fr}
 .tile{min-height:0;padding:12px}
 .tbl.fold thead{display:none}
 .tbl.fold tr{display:flex;flex-direction:column;padding:8px 0;border-bottom:1px solid var(--line)}
 .tbl.fold td.ttl{order:-1}
 .tbl.fold td{display:flex;gap:12px;border:0;padding:2px 0;text-align:left}
 .tbl.fold td::before{content:attr(data-h);width:88px;flex:none;color:var(--ink-2);font-size:12px;line-height:20px}
 .tbl.fold td.ttl{font-weight:700}.tbl.fold td.ttl::before,.tbl.fold td.acts::before,.tbl.fold td[colspan]::before{content:none}
 .tbl.fold td.acts{padding-top:8px;justify-content:flex-start;flex-wrap:wrap;gap:8px}.tbl.fold td.acts .btn{margin:0}
 .tbl.fold tr.sel td:first-child{box-shadow:none}
 .tbl.fold td.n{text-align:left}
 .tbl.fold tbody tr:hover td{background:none}
 .g2{grid-template-columns:1fr}
}
@media print{header.top,aside,footer,.tabs,.titlebar .acts,.filt{display:none !important}.page{display:block}main{padding:0}}