/* TradeBlocks 웹 매뉴얼 — trade-blocks.com/menu (manual.css 위에 덮어씀) */
:root{
  --navy:#0D3349; --navy-2:#0A2738; --teal:#0EA5A0; --teal-ink:#0B7F7B; --teal-soft:#E3F4F3;
  --paper:#F5F3EE; --paper-2:#ECE8DF; --line2:#DCD7CC; --ink2:#14232E; --muted2:#5C6B75; --amber-soft:#FBF0DC;
}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;padding:0!important;background:var(--paper)!important;font-family:'IBM Plex Sans KR','Noto Sans CJK KR','Apple SD Gothic Neo','Malgun Gothic',sans-serif;font-size:15px;color:var(--ink2)}
a{color:var(--teal-ink)}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
/* 헤더 */
.hd{position:sticky;top:0;z-index:50;background:rgba(245,243,238,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line2)}
.hd .wrap{display:flex;align-items:center;gap:14px;min-height:64px}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;color:var(--navy);text-decoration:none;font-size:17px;white-space:nowrap}
.brand img{border-radius:8px}
.brand small{font-weight:600;color:var(--muted2);font-size:12.5px;margin-left:2px}
.hd-actions{margin-left:auto;display:flex;gap:8px;align-items:center}
.hbtn{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 13px;border-radius:10px;border:1px solid var(--line2);background:#fff;color:var(--navy);font:600 13.5px/1 inherit;font-family:inherit;text-decoration:none;cursor:pointer;white-space:nowrap}
.hbtn.navy{background:var(--navy);border-color:var(--navy);color:#fff}
.hbtn:focus-visible,.pk a:focus-visible,.toc-side a:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
@media (max-width:640px){.hbtn .tx{display:none}.brand small{display:none}.hd .wrap{gap:8px}}
/* 본문 레이아웃 */
.layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:26px;padding:24px 0 30px}
.toc-side{position:sticky;top:84px;align-self:start;max-height:calc(100vh - 100px);overflow:auto;background:#fff;border:1px solid var(--line2);border-radius:14px;padding:14px 12px;font-size:13.5px}
.toc-side h3{margin:2px 6px 8px;font-size:12px;letter-spacing:.1em;color:var(--muted2);font-family:'IBM Plex Mono',ui-monospace,monospace}
.toc-side a{display:block;text-decoration:none;color:var(--ink2);padding:6px 8px;border-radius:8px;line-height:1.35}
.toc-side a:hover{background:var(--teal-soft)}
.toc-side a b{color:var(--teal-ink);margin-right:6px;display:inline-block;min-width:16px}
.toc-side .sub a{padding:3px 8px 3px 30px;font-size:12.5px;color:var(--muted2)}
.toc-mobile{display:none}
@media (max-width:980px){
  .layout{grid-template-columns:minmax(0,1fr);gap:14px;padding-top:14px}
  .toc-side{display:none}
  .toc-mobile{display:block;background:#fff;border:1px solid var(--line2);border-radius:12px;padding:10px 14px}
  .toc-mobile summary{font-weight:700;cursor:pointer;color:var(--navy)}
  .toc-mobile a{display:block;padding:6px 0;text-decoration:none;color:var(--ink2);border-bottom:1px dashed var(--line2)}
}
/* 장 = 카드 */
.page{max-width:none!important;margin:0 0 20px!important;background:#fff;border:1px solid var(--line2);border-radius:16px;padding:32px 36px!important;box-shadow:none!important}
@media (max-width:640px){.page{padding:20px 16px!important;border-radius:12px}}
.chap .no{background:var(--navy)}
h2 .sn,.toc td.ch{color:var(--teal-ink)}
figure img{cursor:zoom-in;height:auto;background:#fff}
figure img.w70,figure img.w60,figure img.w50{max-width:100%}
@media (min-width:981px){figure img.w70{max-width:78%}figure img.w60{max-width:66%}figure img.w50{max-width:56%}}
@media (max-width:760px){.two{grid-template-columns:1fr!important}table.f,table.cmp{font-size:13px}table.f td.ex{width:auto}table.f td.k{width:auto}}
.tblwrap{overflow-x:auto}
/* 패키지 머리 */
.pkhead{background:var(--navy);color:#fff;border-radius:16px;padding:24px 26px;margin-bottom:16px;position:relative;overflow:hidden}
.pkhead:after{content:'';position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--teal)}
.pkhead .k{font:600 12px/1 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.12em;color:#9fd8d5}
.pkhead h1{margin:8px 0 6px;font-size:26px;letter-spacing:-.4px}
.pkhead p{margin:0;color:#d6e2ea;font-size:14px;overflow-wrap:anywhere}
.pkhead .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.pkhead .acts a{background:#fff;color:var(--navy);border-radius:10px;padding:9px 13px;font-weight:700;font-size:13.5px;text-decoration:none}
.pkhead .acts a.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4)}
/* 인덱스 */
.hero{padding:34px 0 10px}
.hero .k{font:600 12px/1 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.14em;color:var(--teal-ink)}
.hero h1{font-size:clamp(28px,4.4vw,42px);line-height:1.15;margin:10px 0 10px;color:var(--navy);letter-spacing:-1px}
.hero p{color:var(--muted2);font-size:16px;max-width:680px;margin:0}
.pk{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:24px 0}
@media (max-width:900px){.pk{grid-template-columns:1fr}}
.pk .c{background:#fff;border:1px solid var(--line2);border-radius:16px;padding:20px;display:flex;flex-direction:column}
.pk .c.pm{border:2px solid var(--navy)}
.pk .tag{font:600 12px/1 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.12em;color:var(--teal-ink)}
.pk h2{margin:8px 0 2px;font-size:22px;color:var(--navy);border:0;padding:0}
.pk .t{color:var(--muted2);font-size:14px;margin-bottom:10px}
.pk ul{margin:0 0 14px;padding-left:18px;font-size:14px;line-height:1.75}
.pk .blk{font-size:12.5px;color:var(--muted2);background:var(--paper);border-radius:8px;padding:7px 10px;margin-bottom:14px}
.pk .go{margin-top:auto;display:flex;gap:8px;flex-wrap:wrap}
.pk .go a{flex:1;text-align:center;border-radius:10px;padding:11px 10px;font-weight:700;font-size:14px;text-decoration:none;border:1px solid var(--line2);color:var(--navy);background:#fff;white-space:nowrap}
.pk .go a.p{background:var(--navy);border-color:var(--navy);color:#fff}
.info2{background:#fff;border:1px solid var(--line2);border-radius:16px;padding:20px 22px;margin-bottom:14px}
.info2 h2{font-size:17px;margin:0 0 8px;color:var(--navy);border:0;padding:0}
.info2 ol{margin:0;padding-left:20px;line-height:1.9}
.navband{padding:8px 0 24px}
/* 푸터 */
.ft{border-top:1px solid var(--line2);padding:22px 0 30px;color:var(--muted2);font-size:12.5px;line-height:1.7}
.ft .legal{margin:0}
/* 기준·사용법 모달 */
.gmask{position:fixed;inset:0;background:rgba(13,51,73,.5);display:none;align-items:flex-start;justify-content:center;padding:28px 14px;overflow-y:auto;z-index:200}
.gmask.on{display:flex}
.gbox{background:#fff;border-radius:16px;max-width:620px;width:100%;padding:24px 24px 18px;position:relative;margin:auto 0}
.gbox h2{margin:0 34px 8px 0;font-size:19px;color:var(--navy);border:0;padding:0}
.gbox .badge{display:inline-block;font:600 11.5px/1 'IBM Plex Mono',monospace;background:var(--teal-soft);color:var(--teal-ink);border-radius:6px;padding:4px 7px;margin-left:6px;vertical-align:3px}
.gbox h4{margin:16px 0 6px;font-size:14px;color:var(--ink2)}
.gbox ul{margin:0;padding-left:18px;font-size:14px;line-height:1.75}
.gbox .x{position:absolute;top:12px;right:14px;border:0;background:none;font-size:26px;line-height:1;color:var(--muted2);cursor:pointer}
.foldBox{margin-top:14px;border:1px solid var(--line2);border-radius:10px;padding:8px 12px;font-size:13.5px}
.foldBox summary{cursor:pointer;font-weight:700}
.foldBox .cnt{font-weight:500;color:var(--muted2);font-size:12px;margin-left:6px}
.foldBox table{width:100%;border-collapse:collapse;margin-top:8px}
.foldBox td{border-top:1px solid var(--line2);padding:6px 4px;vertical-align:top;font-size:13px}
/* 큰 그림 보기 */
.zoom{position:fixed;inset:0;background:rgba(10,20,30,.85);display:none;z-index:300;overflow:auto;padding:20px;cursor:zoom-out}
.zoom.on{display:block}
.zoom img{display:block;max-width:none;width:min(1600px,100%);margin:0 auto;border-radius:6px;background:#fff}
@media print{.hd,.toc-side,.toc-mobile,.navband,.ft,.pkhead .acts{display:none!important}.layout{display:block}.page{border:0!important;padding:0!important}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.page,.pkhead,.info2{min-width:0}
.page code{overflow-wrap:anywhere}
@media (max-width:640px){.legend{grid-template-columns:auto minmax(0,1fr)}body{font-size:14.5px}}