.shot img{height:auto}

:root{
  --navy:#1C3B6B; --teal:#3DD2D2; --teal-d:#1FA9AC;
  --ink:#12203a; --grey:#5b6779; --line:#dfe5ee; --soft:#F3F6FA; --wrap:1280px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",
  "Malgun Gothic","Apple SD Gothic Neo",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased;word-break:keep-all}
img{max-width:100%;display:block}
a{color:var(--navy)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
html[data-lang="ko"] .en,html[data-lang="en"] .ko{display:none}

.topbar{position:sticky;top:0;z-index:60;background:var(--navy);color:#fff}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:56px;gap:16px}
.tb-title{font-size:15px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-title b{font-weight:700}
.lang{display:flex;border:1px solid rgba(255,255,255,.45);border-radius:999px;overflow:hidden;flex:none}
.lang button{appearance:none;border:0;background:transparent;color:#fff;font:inherit;font-size:12.5px;
  font-weight:600;letter-spacing:.04em;padding:6px 15px;cursor:pointer;transition:.15s}
.lang button[aria-pressed="true"]{background:var(--teal);color:#0c2b45}

.tabs{position:sticky;top:56px;z-index:55;background:#fff;border-bottom:1px solid var(--line)}
.tabs .wrap{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.tabs .wrap::-webkit-scrollbar{display:none}
.tabs button{appearance:none;border:0;background:none;font:inherit;font-size:14.5px;font-weight:600;
  color:#7c8798;padding:15px 16px 13px;cursor:pointer;border-bottom:3px solid transparent;
  white-space:nowrap;transition:.15s;letter-spacing:-.01em}
.tabs button:hover{color:var(--navy)}
.tabs button[aria-selected="true"]{color:var(--navy);border-bottom-color:var(--teal)}
.tabs .n{display:inline-block;min-width:19px;height:19px;line-height:19px;border-radius:5px;
  background:#e8edf5;color:#7c8798;font-size:11px;text-align:center;margin-right:7px;font-weight:700}
.tabs button[aria-selected="true"] .n{background:var(--teal);color:#08343a}
.panel[hidden]{display:none}

.hero{background:var(--navy);color:#fff;padding:54px 0 60px;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.hero-mark{position:absolute;top:32px;right:34px;width:150px;opacity:.95}
.note-logo{width:148px;margin-bottom:14px}
.kicker{margin:0 0 6px;color:var(--teal);font-weight:600;font-size:15px}
.hero h1{margin:0;font-size:clamp(32px,4.2vw,52px);line-height:1.14;font-weight:800;letter-spacing:-.025em}
.hero h1.bloghead{font-size:clamp(26px,3.1vw,40px);line-height:1.28;max-width:22em}
.hero .rule{display:block;width:56px;height:3px;background:var(--teal);margin:24px 0 18px}
.hero .s1{margin:0 0 6px;font-size:16px;font-weight:500;max-width:44em}
.hero .s2{margin:0;font-size:13.5px;color:#9FB4D1}
.hero .s2 a{color:#bcd0e8}
.hero .s3{margin:12px 0 0;font-size:12.5px;color:#7d95b8}
.hero-visual img{width:100%;filter:drop-shadow(0 22px 46px rgba(0,0,0,.35))}
.blog-hero{padding:52px 0 56px}

.toc{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:26px auto 4px}
.toc a{display:flex;gap:10px;align-items:baseline;text-decoration:none;border:1px solid var(--line);
  border-radius:8px;padding:12px 14px;font-size:14.5px;color:var(--navy);font-weight:600;transition:.15s}
.toc a:hover{border-color:var(--teal);background:var(--soft)}
.toc a b{color:var(--teal-d);font-size:12.5px;flex:none;min-width:1.2em}
.zoomhint{margin:14px auto 0;font-size:12.5px;color:#8b98ab}

.chap{padding:46px 0;border-bottom:1px solid var(--line)}
.chap:last-child{border-bottom:0}
.chead{display:flex;gap:14px;align-items:flex-start;margin-bottom:20px}
.cno{flex:none;min-width:34px;height:26px;line-height:26px;text-align:center;background:var(--navy);
  color:#fff;font-size:12px;font-weight:700;letter-spacing:.06em;padding:0 8px;border-radius:999px;
  margin-top:4px}
.chap h2{margin:0;font-size:clamp(20px,2.2vw,25px);font-weight:700;letter-spacing:-.025em;line-height:1.35}
.cdesc{margin:3px 0 0;font-size:14.5px;color:var(--grey)}
.bh{margin:26px 0 12px;font-size:16.5px;font-weight:700;color:var(--navy);letter-spacing:-.02em}
.bh::before{content:"";display:inline-block;width:4px;height:14px;background:var(--teal);
  border-radius:2px;margin-right:9px;vertical-align:-1px}
.link{margin:0 0 14px;font-size:15px;color:var(--navy)}
.link a{color:var(--teal-d);text-underline-offset:3px}
.subs{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:9px}
.subs li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;color:#26364f}
.badge{flex:none;width:22px;height:22px;border-radius:50%;background:var(--teal);color:#0c3b3d;
  font-size:12px;font-weight:700;font-style:normal;display:flex;align-items:center;
  justify-content:center;margin-top:3px}
.subs em{font-style:normal;color:#c0392b;font-weight:600}

.figs{display:grid;gap:24px}
.figs.two{grid-template-columns:1fr 1fr}
.figs.three{grid-template-columns:repeat(3,1fr)}
.figs.one figure{max-width:780px;margin-left:auto;margin-right:auto;width:100%}
figure{margin:0}
.shot{position:relative;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff;
  box-shadow:0 2px 14px rgba(24,45,80,.06);cursor:zoom-in}
.shot::after{content:"⤢";position:absolute;right:8px;bottom:8px;width:26px;height:26px;border-radius:6px;
  background:rgba(28,59,107,.82);color:#fff;font-size:13px;line-height:26px;text-align:center;
  opacity:0;transition:.16s;pointer-events:none}
.shot:hover::after{opacity:1}
.shot img{width:100%}
.hl{position:absolute;border:2px solid var(--teal);border-radius:6px;
  box-shadow:0 0 0 3px rgba(61,210,210,.16)}
.cur{position:absolute;pointer-events:none}
.bdg{position:absolute;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;
  background:var(--teal);color:#083a3c;font-size:13px;font-weight:800;font-style:normal;
  display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(12,40,60,.28)}
figcaption{margin-top:10px;text-align:center;font-size:13px;color:var(--grey)}
figcaption::before{content:"▲  ";color:var(--teal-d)}

.note{display:flex;gap:12px;align-items:flex-start;margin-top:26px;background:var(--soft);
  border-left:4px solid var(--teal);border-radius:0 6px 6px 0;padding:14px 18px;font-size:14.5px;
  color:var(--navy)}
.note>b{flex:none;font-weight:700}
.note>b::after{content:"";display:inline-block;width:1px;height:12px;background:#b9c6d8;
  margin:0 0 0 12px;vertical-align:-1px}
.note b{font-weight:700}

/* blog */
.blogsec p{font-size:16px;color:#26364f;margin:0 0 16px;max-width:62em}
.bhead{display:flex;gap:12px;align-items:baseline;margin-bottom:18px;flex-wrap:wrap}
.bnum{flex:none;font-size:13px;font-weight:700;color:var(--teal-d);background:#eafafa;
  padding:5px 11px;border-radius:999px;letter-spacing:.03em}
.blist{list-style:none;margin:4px 0 20px;padding:0;display:grid;gap:10px}
.blist li{position:relative;padding-left:26px;font-size:15.5px;color:#26364f;max-width:62em}
.blist li::before{content:"›";position:absolute;left:8px;top:-1px;color:var(--teal-d);font-weight:800}
.tip{margin:22px 0;background:#fffaf0;border:1px solid #f5e2bd;border-radius:10px;padding:16px 20px}
.tip>b{display:block;color:#a5711c;font-size:14.5px;margin-bottom:5px}
.tip>span{font-size:15.5px;color:#4a3a1c}
.refbox{margin:24px 0 0;border-top:1px dashed var(--line);padding-top:18px}
.refbox>p{margin:0 0 12px;font-size:14.5px;color:var(--navy);font-weight:600}
.refs{display:grid;gap:10px;grid-template-columns:1fr 1fr}
.refcard{display:block;border:1px solid var(--line);border-radius:9px;padding:14px 16px;
  text-decoration:none;transition:.15s;background:#fff}
.refcard:hover{border-color:var(--teal);background:var(--soft)}
.refcard b{display:block;font-size:14.5px;color:var(--navy);margin-bottom:3px}
.refcard span{display:block;font-size:13px;color:var(--grey);line-height:1.5}
.blogshot{cursor:default}
.blogshot::after{display:none}

footer{background:var(--navy);color:#fff;margin-top:8px}
footer .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-top:24px;padding-bottom:24px;flex-wrap:wrap}
footer img{width:108px;opacity:.95}
footer p{margin:0;font-size:12.5px;color:#9FB4D1}

#zoom{position:fixed;inset:0;z-index:200;background:rgba(11,25,48,.92);display:none;
  align-items:center;justify-content:center;padding:24px;cursor:zoom-out}
#zoom.on{display:flex}
#zoom .box{position:relative;max-width:1600px;width:100%;max-height:92vh;overflow:auto;
  border-radius:8px;background:#fff}
#zoom .box img{width:100%}
#zoom .hl,#zoom .bdg,#zoom .cur{position:absolute}
#zoom .close{position:absolute;top:14px;right:18px;color:#fff;font-size:30px;line-height:1;
  background:none;border:0;cursor:pointer}

@media (max-width:900px){
  .hero{padding:38px 0 42px}
  .hero-grid{grid-template-columns:1fr;gap:26px}
  .hero-visual{order:-1}
  .hero-mark{width:112px;top:18px;right:20px}
  .figs.two,.figs.three,.toc,.refs{grid-template-columns:1fr}
  .wrap{padding:0 20px}
  .chap{padding:34px 0}
  .tabs button{font-size:13.5px;padding:13px 11px 11px}
  .bdg{width:22px;height:22px;font-size:11px}
}

/* ---- one badge style for every tab ---- */
.bnum{flex:none;min-width:30px;height:24px;line-height:24px;text-align:center;padding:0 8px;
  border-radius:999px;background:var(--navy);color:#fff;font-size:12px;font-weight:700;
  letter-spacing:.04em}
.bhead{align-items:center;gap:12px}

/* ---- Manual Download ---- */
.tabs .wrap{overflow:visible;justify-content:space-between;align-items:center}
.tabs .tabset{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;min-width:0}
.tabs .tabset::-webkit-scrollbar{display:none}
.tabs .dl{position:relative;flex:none;padding:7px 0 7px 14px}
.tabs .dl-btn{appearance:none;display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font:inherit;font-size:13px;font-weight:700;letter-spacing:.01em;white-space:nowrap;
  color:var(--navy);background:#fff;border:1px solid #cfd9e7;border-bottom:1px solid #cfd9e7;
  border-radius:999px;padding:8px 15px 8px 13px;transition:.15s}
.tabs .dl-btn:hover{border-color:var(--teal-d);background:var(--soft);color:var(--navy)}
.tabs .dl-btn svg{width:15px;height:15px;flex:none;stroke:var(--teal-d);stroke-width:2;
  fill:none;stroke-linecap:round;stroke-linejoin:round}
.tabs .dl-btn .ca{font-size:8.5px;color:#93a1b5;transition:transform .18s;line-height:1}
.tabs .dl-btn[aria-expanded="true"]{border-color:var(--navy);background:var(--navy);color:#fff}
.tabs .dl-btn[aria-expanded="true"] svg{stroke:var(--teal)}
.tabs .dl-btn[aria-expanded="true"] .ca{color:var(--teal);transform:rotate(180deg)}
.tabs .dl-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:80;min-width:222px;
  background:#fff;border:1px solid var(--line);border-radius:11px;padding:6px;
  box-shadow:0 14px 34px rgba(20,40,74,.17);display:grid;gap:2px}
.tabs .dl-menu[hidden]{display:none}
.tabs .dl-menu button{appearance:none;width:100%;display:flex;align-items:center;gap:11px;
  cursor:pointer;font:inherit;font-size:14px;font-weight:600;text-align:left;background:none;
  border:0;border-bottom:0;border-radius:8px;padding:9px 12px;transition:.13s;white-space:normal}
.tabs .dl-menu button:hover{background:var(--soft)}
.tabs .dl-menu button:disabled{opacity:.55;cursor:default}
.tabs .dl-menu .fl{flex:none;width:27px;height:27px;border-radius:7px;background:#eef3fa;
  color:var(--navy);font-size:10px;font-weight:800;letter-spacing:.02em;
  display:flex;align-items:center;justify-content:center}
.tabs .dl-menu button:hover .fl{background:var(--teal);color:#08343a}
.tabs .dl-menu .tx{display:block;min-width:0}
.tabs .dl-menu .tx b{display:block;font-size:14px;font-weight:700;color:var(--navy);line-height:1.35}
.tabs .dl-menu .tx span{display:block;font-size:11.5px;font-weight:500;color:var(--grey);
  font-variant-numeric:tabular-nums;line-height:1.4}

/* ---- quick-nav: inline by default, hidden extras ---- */
.rail-h,.rail-top{display:none}
.chap{scroll-margin-top:calc(var(--sticky,106px) + 18px)}

/* ---- quick-nav: floating rail once there is room beside the content ---- */
@media (min-width:1120px){
  :root{--rail-w:238px; --rail-gap:30px}
  .panel > .wrap:not(.rail){
    padding-left:calc(28px + var(--rail-w) + var(--rail-gap));
  }
  .toc.rail{
    position:fixed; z-index:50;
    top:calc(var(--sticky,106px) + 20px);
    left:calc(max(0px,(100vw - var(--wrap)) / 2) + 28px);
    width:var(--rail-w);
    max-height:calc(100vh - var(--sticky,106px) - 52px);
    overflow-y:auto; overscroll-behavior:contain;
    max-width:none; margin:0; padding:11px 9px 9px;
    grid-template-columns:1fr; gap:2px; align-content:start;
    background:#fff; border:1px solid var(--line); border-radius:13px;
    box-shadow:0 12px 32px rgba(20,40,74,.10);
    opacity:0; visibility:hidden; transform:translateY(-6px);
    transition:opacity .22s ease, transform .22s ease, visibility .22s;
  }
  .toc.rail.on{opacity:1; visibility:visible; transform:none}
  .toc.rail::-webkit-scrollbar{width:8px}
  .toc.rail::-webkit-scrollbar-thumb{background:#dbe2ec;border-radius:99px;
    border:2px solid #fff}
  .rail-h{display:block;margin:2px 0 8px;padding:0 8px;font-size:10.5px;font-weight:800;
    letter-spacing:.13em;color:#9aa6b8;text-transform:uppercase}
  .toc.rail a{border:1px solid transparent;border-radius:9px;padding:9px 10px;
    font-size:13.5px;font-weight:600;line-height:1.45;align-items:flex-start;gap:9px;
    color:#33445e;transition:.13s}
  .toc.rail a:hover{background:var(--soft);border-color:transparent;color:var(--navy)}
  .toc.rail a b{min-width:1.5em;font-size:11.5px;font-weight:800;color:var(--teal-d);
    line-height:1.7;font-variant-numeric:tabular-nums}
  .toc.rail a[aria-current="true"]{background:var(--navy);color:#fff}
  .toc.rail a[aria-current="true"] b{color:var(--teal)}
  .rail-top{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;
    margin-top:7px;padding:8px 10px;appearance:none;cursor:pointer;font:inherit;
    font-size:12px;font-weight:700;color:#8b98ab;background:none;
    border:0;border-top:1px solid var(--line);border-radius:0;transition:.13s}
  .rail-top:hover{color:var(--navy)}
  .rail-top::before{content:"\2191";font-weight:800;color:var(--teal-d)}
}
@media print{
  .topbar,.tabs{position:static} .lang,.zoomhint,#zoom,.dl,.rail-h,.rail-top{display:none!important}
  .toc.rail{position:static;opacity:1;visibility:visible;transform:none;width:auto;max-width:none;max-height:none;overflow:visible;border:0;box-shadow:none;padding:0;grid-template-columns:repeat(3,1fr);gap:10px}
  .panel>.wrap:not(.rail){padding-left:28px}
  .shot::after{display:none}
  .panel[hidden]{display:block!important}
  .chap{break-inside:avoid;page-break-inside:avoid}
  body{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
.toolbar .dl{position:relative;flex:none;padding:7px 0 7px 14px}
.toolbar .dl-btn{appearance:none;display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font:inherit;font-size:13px;font-weight:700;letter-spacing:.01em;white-space:nowrap;
  color:var(--navy);background:#fff;border:1px solid #cfd9e7;border-bottom:1px solid #cfd9e7;
  border-radius:999px;padding:8px 15px 8px 13px;transition:.15s}
.toolbar .dl-btn:hover{border-color:var(--teal-d);background:var(--soft);color:var(--navy)}
.toolbar .dl-btn svg{width:15px;height:15px;flex:none;stroke:var(--teal-d);stroke-width:2;
  fill:none;stroke-linecap:round;stroke-linejoin:round}
.toolbar .dl-btn .ca{font-size:8.5px;color:#93a1b5;transition:transform .18s;line-height:1}
.toolbar .dl-btn[aria-expanded="true"]{border-color:var(--navy);background:var(--navy);color:#fff}
.toolbar .dl-btn[aria-expanded="true"] svg{stroke:var(--teal)}
.toolbar .dl-btn[aria-expanded="true"] .ca{color:var(--teal);transform:rotate(180deg)}
.toolbar .dl-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:80;min-width:222px;
  background:#fff;border:1px solid var(--line);border-radius:11px;padding:6px;
  box-shadow:0 14px 34px rgba(20,40,74,.17);display:grid;gap:2px}
.toolbar .dl-menu[hidden]{display:none}
.toolbar .dl-menu button{appearance:none;width:100%;display:flex;align-items:center;gap:11px;
  cursor:pointer;font:inherit;font-size:14px;font-weight:600;text-align:left;background:none;
  border:0;border-bottom:0;border-radius:8px;padding:9px 12px;transition:.13s;white-space:normal}
.toolbar .dl-menu button:hover{background:var(--soft)}
.toolbar .dl-menu button:disabled{opacity:.55;cursor:default}
.toolbar .dl-menu .fl{flex:none;width:27px;height:27px;border-radius:7px;background:#eef3fa;
  color:var(--navy);font-size:10px;font-weight:800;letter-spacing:.02em;
  display:flex;align-items:center;justify-content:center}
.toolbar .dl-menu button:hover .fl{background:var(--teal);color:#08343a}
.toolbar .dl-menu .tx{display:block;min-width:0}
.toolbar .dl-menu .tx b{display:block;font-size:14px;font-weight:700;color:var(--navy);line-height:1.35}
.toolbar .dl-menu .tx span{display:block;font-size:11.5px;font-weight:500;color:var(--grey);
  font-variant-numeric:tabular-nums;line-height:1.4}
/* ---- 통합 매뉴얼: 뷰 전환 ---- */
.view[hidden]{display:none}
.tabs .wrap{justify-content:flex-start}
.refs.one{grid-template-columns:1fr}
a.xlink{color:var(--teal-d);text-underline-offset:3px}
.hero-grid.solo{grid-template-columns:1fr}
.hero-grid.solo .s1{max-width:52em}
.topbar .wrap{gap:12px}
.back{appearance:none;display:none;align-items:center;gap:7px;flex:none;cursor:pointer;
  font:inherit;font-size:12.5px;font-weight:600;color:#fff;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:6px 13px 6px 10px;transition:.15s}
.back:hover{background:rgba(255,255,255,.22)}
.back::before{content:"\2190";font-weight:800;color:var(--teal)}
body[data-view="meet"] .back,body[data-view="conf"] .back{display:inline-flex}
.tb-title{flex:1;min-width:0}

/* ---- 메인(랜딩) ---- */
.home{background:var(--navy);color:#fff;position:relative;overflow:hidden;
  min-height:calc(100vh - 56px);display:flex;align-items:center}
.home-mark{position:absolute;top:34px;right:36px;width:150px;opacity:.95}
.home-in{text-align:center;padding-top:56px;padding-bottom:64px;width:100%}
.home-logo{width:158px;margin:0 auto 18px}
.home .kicker{margin:0 0 10px;color:var(--teal);font-weight:600;font-size:15px;letter-spacing:.01em}
.home h1{margin:0;font-size:clamp(30px,4vw,48px);line-height:1.16;font-weight:800;letter-spacing:-.03em}
.home-sub{margin:16px 0 0;font-size:16px;color:#9FB4D1}
.picker{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:900px;margin:44px auto 0}
.pick{appearance:none;cursor:pointer;font:inherit;text-align:center;color:#fff;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.22);border-radius:18px;
  padding:38px 26px 32px;transition:.18s;display:block}
.pick:hover{background:rgba(61,210,210,.14);border-color:var(--teal);transform:translateY(-3px);
  box-shadow:0 18px 40px rgba(0,0,0,.28)}
.pick svg{width:34px;height:34px;display:block;margin:0 auto 16px;stroke:var(--teal);
  stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.pick b{display:block;font-size:clamp(21px,2.4vw,27px);font-weight:800;letter-spacing:-.03em;line-height:1.25}
.pick > span{display:block;margin-top:10px;font-size:14px;font-weight:500;color:#A9BFDA;line-height:1.55}
.pick:hover > span{color:#cfe0f2}
.pick b span,.pick > span > span{display:inline;margin:0;font:inherit;color:inherit}
.home-help{display:inline-flex;align-items:center;gap:9px;margin:30px auto 0;
  text-decoration:none;color:#bcd3e8;font-size:13.5px;font-weight:600;
  border:1px solid rgba(255,255,255,.20);border-radius:999px;padding:9px 16px 9px 13px;
  transition:.16s}
.home-help:hover{color:#fff;border-color:var(--teal);background:rgba(61,210,210,.12)}
.home-help svg{width:17px;height:17px;flex:none;stroke:var(--teal);stroke-width:1.8;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.home-help i{font-style:normal;font-size:14px;font-weight:800;opacity:.55}
.home-foot{margin:26px 0 0;font-size:12.5px;color:#7d95b8}
@media (max-width:820px){.picker{grid-template-columns:1fr;gap:16px;margin-top:32px}
  .home-mark{width:104px;top:20px;right:20px}.pick{padding:28px 22px 24px}}

/* ---- 툴바: 검색 + 매뉴얼 다운로드 ---- */
.toolbar{position:sticky;top:56px;z-index:58;background:#fff;border-bottom:1px solid var(--line)}
.toolbar .wrap{display:flex;align-items:center;justify-content:flex-end;gap:8px;
  padding-top:6px;padding-bottom:6px}
.toolbar .dl{padding:0 0 0 10px}
.search{position:relative;display:flex;align-items:center;gap:7px;flex:0 1 400px;min-width:0;
  border:1px solid #cfd9e7;border-radius:999px;padding:6px 8px 6px 12px;background:#fff;transition:.15s}
.search:focus-within{border-color:var(--teal-d);box-shadow:0 0 0 3px rgba(61,210,210,.16)}
.search>svg{width:15px;height:15px;flex:none;stroke:#8b98ab;stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.search input{flex:1;min-width:0;width:100%;appearance:none;border:0;outline:0;background:none;
  font:inherit;font-size:13.5px;color:var(--ink);padding:0;height:22px}
.search input::placeholder{color:#9aa6b8}
.search input::-webkit-search-cancel-button,.search input::-webkit-search-decoration{
  -webkit-appearance:none;display:none}
.sq-nav{display:none;align-items:center;gap:1px;flex:none}
.sq-nav.on{display:flex}
.sq-count{font-size:11.5px;font-weight:700;color:var(--grey);padding:0 3px;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.search.none .sq-count{color:#c0392b}
.sq-nav button,.sq-clear{appearance:none;border:0;background:none;cursor:pointer;color:#8b98ab;
  width:21px;height:21px;border-radius:6px;font:inherit;font-size:9px;line-height:1;padding:0;
  display:flex;align-items:center;justify-content:center;transition:.13s;flex:none}
.sq-nav button:hover,.sq-clear:hover{background:var(--soft);color:var(--navy)}
.sq-nav button:disabled{opacity:.35;cursor:default;background:none}
.sq-clear{display:none;font-size:16px}
.sq-clear.on{display:flex}
.toolbar .dl-btn svg{width:15px;height:15px}
.toolbar .dl-menu .st{display:block;font-size:11.5px;font-weight:500;color:var(--grey);line-height:1.4}
/* 복제한 `.toolbar .dl-menu .tx span{display:block}` 이 언어 숨김 규칙(.ko/.en)보다
   구체성이 높아 두 언어가 같이 보이던 문제를 막는다 */
html[data-lang="ko"] .toolbar .en,html[data-lang="en"] .toolbar .ko{display:none!important}
html[data-lang="ko"] .toolbar .ja,html[data-lang="en"] .toolbar .ja{display:none!important}
html[data-lang="ja"] .toolbar .ko,html[data-lang="ja"] .toolbar .en{display:none!important}

/* ---- 일본어 ---- */
html[data-lang="ko"] .ja,html[data-lang="en"] .ja{display:none}
html[data-lang="ja"] .ko,html[data-lang="ja"] .en{display:none}
/* 일본어일 때는 일본어 자형(한자 모양이 한국어 폰트와 다르다)을 쓰도록 시스템 폰트를 앞에 둔다 */
html[data-lang="ja"] body{font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic Medium",
  "Yu Gothic","Meiryo","Noto Sans JP","Noto Sans CJK JP","Pretendard Variable",Pretendard,sans-serif;
  word-break:normal;line-break:strict;overflow-wrap:break-word}
.lang button{padding:6px 12px}
@media (max-width:1200px){.tabs button{font-size:13.5px;padding:14px 11px 12px}}

/* ---- 검색어 하이라이트 (형광 노랑) ---- */
mark.sq{background:#fdff4f;color:inherit;border-radius:2px;padding:0 .5px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
mark.sq.on{background:#ffcb14;box-shadow:0 0 0 2px #e39a00}

@media (max-width:900px){
  .toolbar .wrap{flex-wrap:wrap}
  .search{flex:1 1 100%}
  .toolbar .dl{padding-left:0}
}

/* ---- 라이트박스: 이미지 실제 비율에 맞춰 .box 크기를 잡아 오버레이 좌표를 보존 ---- */
#zoom .box{width:auto;max-width:none;max-height:none;overflow:visible}
#zoom .box img{width:100%;height:auto;display:block}

/* ---- 인쇄(PDF) ---- */
@media print{
  .chap{break-inside:auto;page-break-inside:auto}
  figure{break-inside:avoid;page-break-inside:avoid;max-width:var(--pw,175mm)!important}
  .toc.rail{break-after:avoid;page-break-after:avoid;margin-bottom:6px}
  .chead,.bh{break-after:avoid;page-break-after:avoid}
  .subs li{break-inside:avoid;page-break-inside:avoid}
  .figs{gap:10px}
  .hero{padding:26px 0 28px}
  .hero-visual{display:none}
  .hero-grid{grid-template-columns:1fr!important}
  .view[hidden]{display:block!important}
  .panel[hidden]{display:block!important}
  .view{break-before:page;page-break-before:always}
  /* 툴바(div)가 앞에 끼면서 :first-of-type 이 홈에 걸리지 않아 빈 첫 장이 생겼다 → 클래스로 지정 */
  .home{break-before:auto;page-break-before:avoid}
  .back,.toolbar{display:none!important}
  mark.sq{background:none;box-shadow:none}
  .home{min-height:0;color:#fff}
  .pick{border-color:#8ea6c8}
}

/* ---- 동영상 매뉴얼 바로가기 (미팅 통역 1탭 히어로) ---- */
.vcta{display:inline-flex;align-items:center;gap:14px;margin-top:22px;padding:14px 22px 14px 18px;
  border-radius:999px;background:var(--teal);color:#06343a;text-decoration:none;font-weight:800;
  box-shadow:0 10px 24px rgba(61,210,210,.28),0 2px 0 rgba(0,0,0,.04);
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease}
.vcta:hover{transform:translateY(-2px);background:#5ee0e0;
  box-shadow:0 14px 30px rgba(61,210,210,.38)}
.vcta svg{width:26px;height:26px;flex:none;fill:#06343a;
  background:rgba(255,255,255,.55);border-radius:50%;padding:3px}
.vcta span{display:flex;flex-direction:column;line-height:1.25;text-align:left}
.vcta b{font-size:16.5px;letter-spacing:-.01em}
.vcta em{font-style:normal;font-weight:600;font-size:12.5px;color:#0b4a51;opacity:.82;margin-top:2px}
.vcta i{font-style:normal;font-size:17px;font-weight:800;opacity:.6;margin-left:2px}
@media (max-width:720px){.vcta{padding:12px 18px 12px 14px}.vcta b{font-size:15px}}
/* 인쇄본에서는 버튼 대신 주소를 글자로 남긴다.
   히어로 배경이 네이비로 인쇄되므로 글자색을 어둡게 두면 안 보인다(민트/흰색으로 둔다). */
@media print{
  .vcta{background:none;box-shadow:none;padding:6px 0 0;display:block;color:var(--teal)}
  .vcta svg,.vcta i{display:none}
  .vcta b{font-size:14px}
  .vcta em{color:#cfe4ea;opacity:1}
  .vcta:after{content:" (https://youtu.be/CzKTjeM4jn4)";display:block;font-weight:600;font-size:11.5px;
    color:#fff;opacity:.9;margin-top:2px}
  .vcta.conf:after{content:" (https://youtu.be/le-a8OD6U0M)"}
}

/* ---- 문제 해결 탭 ---- */
.etbl{width:100%;border-collapse:collapse;margin-top:18px;font-size:14px;
  border-top:2px solid var(--navy)}
.etbl th,.etbl td{text-align:left;vertical-align:top;padding:11px 14px;
  border-bottom:1px solid var(--line);line-height:1.6}
.etbl th{background:var(--soft);font-weight:700;color:var(--navy);white-space:nowrap}
/* 1열(문구·코드)은 좁게, 2·3열(원인·조치)은 같은 폭으로 — 이사님 요청 2026-09-02.
   합이 100% 가 되게 세 열 모두 명시한다. 3열을 비워 두면 브라우저가 남는 폭을
   글자량에 따라 나눠 원인/조치 폭이 표마다 달라진다. */
.etbl td:first-child,.etbl th:first-child{white-space:normal;width:26%}
.etbl td:nth-child(2),.etbl th:nth-child(2){width:37%;color:var(--grey)}
.etbl th:nth-child(2){color:var(--navy)}
.etbl td:nth-child(3),.etbl th:nth-child(3){width:37%}
/* 1열을 좁히면 break-all 이 `timeout_waiting_to_join_cal / l` 처럼 코드를 글자 단위로
   끊어 버린다. break-word 는 **한 줄에 안 들어갈 때만** 끊으므로 지금 폭에서는 온전히 들어간다. */
.etbl code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;
  background:#eef3f9;border-radius:4px;padding:1px 5px;color:#20415f;
  word-break:keep-all;overflow-wrap:break-word;display:inline-block;max-width:100%}
.etbl tr:hover td{background:#fafcfe}
@media (max-width:860px){
  .etbl,.etbl tbody,.etbl tr,.etbl td{display:block;width:auto!important}
  .etbl thead{display:none}
  .etbl tr{border-bottom:1px solid var(--line);padding:8px 0}
  .etbl td{border:0;padding:3px 0}
  .etbl td:first-child{font-weight:700;color:var(--navy)}
}
/* 경고 박스 — .note 와 같은 모양에 색만 바꾼다 */
.warn{display:flex;gap:12px;align-items:flex-start;margin-top:26px;background:#fff5f5;
  border-left:4px solid #d64545;border-radius:0 6px 6px 0;padding:14px 18px;font-size:14.5px;
  color:var(--navy)}
.warn>b{flex:none;font-weight:800;color:#b02a2a}
.warn>b::after{content:"";display:inline-block;width:1px;height:12px;background:#e2b3b3;
  margin:0 0 0 12px;vertical-align:-1px}
.warn b{font-weight:700}
/* 링크 예시 */
.lex{margin-top:18px;display:grid;gap:10px}
.lex div{display:flex;gap:12px;align-items:baseline;border:1px solid var(--line);
  border-radius:8px;padding:11px 14px;background:#fbfcfe}
.lex .ok,.lex .no{flex:none;font-weight:800;font-size:12px;letter-spacing:.02em;
  border-radius:999px;padding:3px 10px}
.lex .ok{background:#e3f7f2;color:#0d6b58}
.lex .no{background:#fdeaea;color:#b02a2a}
.lex code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;
  color:#20415f;word-break:break-all}
.lex p{margin:4px 0 0;font-size:13px;color:var(--grey);line-height:1.6}
@media print{
  .etbl{font-size:11.5px}
  .etbl tr{break-inside:avoid;page-break-inside:avoid}
  .warn{break-inside:avoid;page-break-inside:avoid}
  .lex div{break-inside:avoid;page-break-inside:avoid}
}

/* 첫 화면 로고 정렬 (2026-09-10) — 언어 버튼과 오른쪽 끝을 맞춘다.
   612px = 본문 열 절반(640) - 안쪽 여백(28). 50% 는 .home 폭 기준이라 스크롤바와 무관하다.
   좁은 화면은 아래 @media 의 right:20px 이 그대로 이긴다. */
.home-mark{right:max(28px, calc(50% - 612px))}

/* 좌측 상단 버튼을 첫 화면에서도 보이게 한다 (2026-09-10).
   원래는 뷰 안에서만 보였다 — 첫 화면에서 허브로 나갈 길이 없었다. */
body[data-view="home"] .back{display:inline-flex}

/* ---------- 매뉴얼 전체 검색 (확대판) ---------- */
.toolbar .wrap{gap:12px}
.search{flex:1 1 auto;max-width:760px;margin:0 auto;padding:9px 10px 9px 15px;
  border-radius:14px;border:1.5px solid #cfd9e7;box-shadow:0 1px 2px rgba(20,40,70,.04)}
.search:focus-within{border-color:var(--teal-d);box-shadow:0 0 0 3px rgba(61,210,210,.18)}
.search svg{flex:none;width:17px;height:17px;stroke:var(--navy);fill:none;stroke-width:2.1;
  stroke-linecap:round;opacity:.8}
.search input{font-size:15px;height:26px}
.search input::placeholder{color:#93a1b5}
.sk{display:none;flex:none;gap:2px;align-items:center;font-size:11px;font-weight:700;color:#8b98ab;
  border:1px solid #dbe3ee;border-radius:6px;padding:2px 6px;background:#f7f9fc;white-space:nowrap}
@media (min-width:820px){ .search .sk{display:flex} }
.search:focus-within .sk{display:none}

/* 결과 목록 */
.sres{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:90;background:#fff;
  border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 44px rgba(18,34,62,.17);
  overflow:hidden;max-height:min(70vh,560px);overflow-y:auto}
.sres[hidden]{display:none}
.sres-h{padding:9px 14px;font-size:11.5px;font-weight:800;letter-spacing:.02em;color:var(--grey);
  background:var(--soft);border-bottom:1px solid var(--line)}
.sres a{display:block;padding:10px 14px;border-bottom:1px solid #eef2f7;text-decoration:none;color:inherit;
  cursor:pointer}
.sres a:last-child{border-bottom:0}
.sres a:hover,.sres a.on{background:#eefbfb}
.sres a.on{box-shadow:inset 3px 0 0 var(--teal-d)}
.sres .p{font-size:11.5px;font-weight:700;color:var(--teal-d);margin-bottom:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sres .p i{font-style:normal;color:#9aa6b8;font-weight:600;margin-left:5px}
.sres .t{font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.35}
.sres .s{font-size:12.5px;color:var(--grey);line-height:1.5;margin-top:3px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sres .s b{color:var(--ink);background:#fdff8a;border-radius:2px;padding:0 1px}
.sres .none{padding:18px 14px;font-size:13.5px;color:var(--grey)}
.sres .none b{color:var(--ink)}

/* 빈 칸일 때 보여 주는 자주 찾는 말 */
.schips{padding:11px 13px 13px;display:flex;flex-wrap:wrap;gap:7px}
.schips button{appearance:none;cursor:pointer;font:inherit;font-size:12.5px;font-weight:600;
  color:var(--navy);background:#fff;border:1px solid #d7e0ec;border-radius:999px;padding:5px 11px;
  transition:.13s}
.schips button:hover{background:var(--navy);color:#fff;border-color:var(--navy)}

/* 이동한 자리를 잠깐 짚어 준다 */
@keyframes sflash{0%{box-shadow:0 0 0 0 rgba(61,210,210,.0)}
  18%{box-shadow:0 0 0 6px rgba(61,210,210,.30)}100%{box-shadow:0 0 0 0 rgba(61,210,210,0)}}
.sflash{animation:sflash 1.5s ease-out 1;border-radius:12px}

@media (max-width:720px){
  .search{padding:8px 8px 8px 12px}
  .search input{font-size:14.5px}
  .sres{max-height:60vh}
}
@media print{ .sres,.schips{display:none!important} }


/* ── 탭별 주소로 쪼갠 뒤 추가 ───────────────────────────────── */
/* 탭이 버튼에서 링크로 바뀌었다. 밑줄과 색을 버튼과 같게 맞춘다. */
.tabs a[role="tab"]{text-decoration:none}
/* 쪽마다 패널이 하나뿐이므로 항상 보인다 */
.view > .panel[hidden]{display:block}
/* 버튼이던 것이 링크가 되면서 밑줄과 링크색이 생겼다 — 원래 모양으로 되돌린다.
   (a{color:var(--navy)} 와 브라우저 기본 밑줄이 걸린다) */
.back,.pick,.home-help,.tabs a{text-decoration:none;color:inherit}
.back:hover,.pick:hover,.home-help:hover{text-decoration:none}

/* ══ aness.ai 홈페이지 톤 맞춤 (2026-11) ═══════════════════════
   값은 홈페이지 캡처에서 직접 뽑았다. 홈페이지는 흰색·연민트가 기본이고
   짙은 네이비는 푸터에만 쓴다. 매뉴얼도 같은 규칙을 따른다. */
:root{
  --navy:#00172E; --teal:#49D1CF; --teal-d:#26B7CB;
  --ink:#172033; --grey:#5B6779; --line:#E5E9EC; --soft:#F3F7F7;
}

/* 버튼이던 것이 링크가 되면서 생긴 밑줄·링크색을 없앤다 (허브·AI·FAQ 쪽도 같이) */
.back,.pick,.home-help,.tabs a,.home-acts a{text-decoration:none}

/* ── 상단바 — 홈페이지 네비와 같은 흰 바탕 ── */
.topbar{background:#fff;color:var(--ink);border-bottom:1px solid var(--line)}
.topbar .tb-title,.topbar .tb-title b{color:var(--ink)}
.back{background:var(--soft);color:var(--ink);border:1px solid var(--line);border-radius:10px}
.back:hover{background:#E9EFEF;border-color:#D7DFDF}
.lang{background:var(--soft);border:1px solid var(--line)}
.lang button{color:var(--grey)}
.lang button[aria-pressed="true"]{background:var(--teal);color:#06343A}

/* ── 탭 줄 ──────────────────────────────────────────────────
   원래 탭 모양 규칙은 전부 `.tabs button` 에 걸려 있었다. 탭을 **링크**로 바꾸면서
   그 규칙이 하나도 먹지 않아 글자 크기·굵기·여백·선택 표시가 전부 빠져 있었다.
   `[role="tab"]` 로 다시 걸고(버튼·링크 양쪽에 먹는다) 넉넉하게 다듬는다. */
.tabs{background:#fff;border-bottom:1px solid var(--line)}
.tabs .tabset{gap:10px}
.tabs [role="tab"]{
  display:inline-flex;align-items:center;gap:9px;
  font-size:14.5px;font-weight:700;letter-spacing:-.012em;color:var(--grey);
  padding:17px 16px 14px;
  border-bottom:3px solid transparent;border-radius:10px 10px 0 0;
  white-space:nowrap;transition:.16s}
.tabs [role="tab"]:hover{color:var(--ink);background:#F4FBFB}
.tabs [role="tab"][aria-selected="true"]{color:var(--ink);border-bottom-color:var(--teal)}

/* 번호 — 아네스 민트로. 선택된 탭은 꽉 찬 민트, 나머지는 연한 민트 */
.tabs .n{
  flex:none;min-width:23px;height:23px;line-height:23px;border-radius:7px;margin-right:0;
  background:#E4F5F5;color:#1C9AA8;font-size:11.5px;font-weight:800;
  text-align:center;transition:.16s}
.tabs [role="tab"]:hover .n{background:#D4EFEF;color:#12838F}
.tabs [role="tab"][aria-selected="true"] .n{background:var(--teal);color:#06343A}

@media (max-width:900px){
  .tabs .tabset{gap:6px}
  .tabs [role="tab"]{font-size:13.5px;padding:14px 12px 11px;gap:7px}
}

/* ── 히어로 — 네이비 슬래브에서 연민트 → 흰색으로 ── */
.hero{background:linear-gradient(100deg,#F1FEFD 0%,#F7FCFC 48%,#FFFFFF 100%);
      color:var(--ink);border-bottom:1px solid var(--line)}
.hero h1,.hero .s1{color:var(--ink)}
.hero .s3{color:var(--grey)}
.hero .kicker{color:var(--teal-d)}

/* ── 첫 화면 — 홈페이지 섹션처럼 밝게 ── */
.home{background:linear-gradient(168deg,#F1FEFD 0%,#F8FCFC 46%,#FFFFFF 100%);color:var(--ink)}
.home h1{color:var(--ink)}
.home .kicker{color:var(--teal-d)}
.home-sub{color:var(--grey)}
.home-foot{color:#8A949F}

/* 서비스 카드 — 홈페이지 기능 카드와 같은 꼴 (흰 바탕 + 얇은 테두리) */
.pick{background:#fff;border:1px solid var(--line);border-radius:16px;color:var(--ink);
      box-shadow:0 1px 2px rgba(23,32,51,.04)}
.pick:hover{border-color:var(--teal);box-shadow:0 10px 24px rgba(23,32,51,.09);
            transform:translateY(-2px)}
.pick b{color:var(--ink)}
.pick > span{color:var(--grey)}
.pick svg{color:var(--teal-d)}
.pick .go{color:var(--teal-d)}

/* 문제 해결 바로가기 알약 */
.home-help{background:#F8F8F8;border:1px solid var(--line);color:var(--ink)}
.home-help:hover{background:#fff;border-color:var(--teal);color:var(--ink)}
.home-help svg,.home-help i{color:var(--teal-d)}

/* ── 푸터 — 홈페이지 푸터와 같은 딥네이비. 어두운 곳은 여기뿐이다 ── */
footer{background:var(--navy);color:#fff}

.xlink{color:var(--teal-d)}
.rule{background:var(--teal)}