
/* Layout: 첫 화면은 여백 많은 브랜드 히어로 + 감사 씰 + 진입점 3개. 상세는 메뉴별 하위 페이지(#certificates 등) */
@font-face{font-family:"NanumSquare";font-weight:400;font-display:swap;src:url("/font/NanumSquare-Regular.woff") format("woff")}
@font-face{font-family:"NanumSquare";font-weight:700;font-display:swap;src:url("/font/NanumSquare-Bold.woff") format("woff")}
@font-face{font-family:"NanumSquare";font-weight:800;font-display:swap;src:url("/font/NanumSquare-ExtraBold.woff") format("woff")}
:root{
  --bg:#f6f8f5; --surface:#ffffff; --tint:#ecf3ee; --fg:#17211c; --dim:#5f6d66; --line:#e1e8e3; --mesh:#c9d6ce;
  --brand:#03c75a; --brand-ink:#08793f; --brand-soft:#dff4e7;
  --ok:#17804a; --warn:#9a5a00; --bad:#b3262f;
  --f-display:"NanumSquare",-apple-system,"Segoe UI","Malgun Gothic",system-ui,sans-serif;
  --f-body:"NanumSquare",-apple-system,"Segoe UI","Malgun Gothic",system-ui,sans-serif;
  --f-mono:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --r:14px; color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0e1411; --surface:#151d19; --tint:#18231d; --fg:#e5ede8; --dim:#94a49b; --line:#24302a; --mesh:#34453c;
  --brand:#2fd67a; --brand-ink:#5fe39a; --brand-soft:#173325; --ok:#55d48f; --warn:#f0ab4c; --bad:#ff7d84; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0e1411; --surface:#151d19; --tint:#18231d; --fg:#e5ede8; --dim:#94a49b; --line:#24302a; --mesh:#34453c;
  --brand:#2fd67a; --brand-ink:#5fe39a; --brand-soft:#173325; --ok:#55d48f; --warn:#f0ab4c; --bad:#ff7d84; color-scheme:dark}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:break-word}
img{max-width:100%}
[hidden]{display:none!important}
a{color:var(--brand-ink);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--f-display);text-wrap:balance;margin:0;line-height:1.2;letter-spacing:-.015em;font-weight:800}
p{margin:0}
.mono,code{font-family:var(--f-mono);font-size:.85em}
.page-pad{padding-inline:20px}
.wrap{max-width:1120px;margin:0 auto}
.skip{position:absolute;left:-999px;top:8px;background:var(--fg);color:var(--bg);padding:8px 12px;border-radius:8px;z-index:50}
.skip:focus{left:12px}

.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:border-color .2s}
.hdr.scrolled{border-bottom-color:var(--line)}
.hdr .wrap{display:flex;align-items:center;gap:28px;height:68px;position:relative}
.logo{display:flex;align-items:center;text-decoration:none;flex:none}
.logo img{height:17px;width:auto;display:block}
.logo .lw{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo .lb{display:none} :root:not([data-theme="light"]) .logo .lw{display:block}}
:root[data-theme="dark"] .logo .lb{display:none} :root[data-theme="dark"] .logo .lw{display:block}
.menu{display:flex;gap:2px;flex:1;min-width:0}
.menu a{color:var(--fg);text-decoration:none;font-size:14.5px;font-weight:700;padding:7px 12px;border-radius:999px;white-space:nowrap}
.menu a:hover{background:var(--tint)}
.menu a[aria-current="page"]{background:var(--brand-soft);color:var(--brand-ink)}
.hdr-r{display:flex;align-items:center;gap:10px}
.lang{display:flex;gap:2px}
.lang button{all:unset;cursor:pointer;font-size:13px;color:var(--dim);padding:3px 8px;border-radius:6px}
.lang button[aria-pressed="true"]{color:var(--fg);font-weight:800;background:var(--tint)}
.report-link{font-size:13.5px;font-weight:700;color:var(--fg);text-decoration:none;border:1px solid var(--line);padding:6px 12px;border-radius:999px;white-space:nowrap}
.burger{all:unset;display:none;cursor:pointer;padding:8px;border-radius:8px}
.burger span{display:block;width:20px;height:2px;background:var(--fg);margin:4px 0;border-radius:2px}

.hero{position:relative;overflow:hidden}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero .wrap{position:relative;padding-block:120px 108px;display:grid;gap:26px}
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--brand-ink);background:var(--surface);border:1px solid var(--line);padding:5px 12px 5px 8px;border-radius:999px;justify-self:start}
.kicker i{width:8px;height:8px;border-radius:50%;background:var(--brand)}
.hero h1{font-size:clamp(36px,6vw,68px);max-width:14ch;letter-spacing:-.03em;line-height:1.12}
.hero h1 em{font-style:normal;color:var(--brand-ink)}
:lang(ko) .hero h1{max-width:12em;letter-spacing:-.04em}
.lead{font-size:clamp(16px,1.6vw,19px);color:var(--dim);max-width:46ch}
:lang(ko) .lead{max-width:34em}
.cta{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:15px;font-weight:700;padding:11px 20px;border-radius:999px;text-decoration:none;border:1px solid var(--line);background:var(--surface);color:var(--fg);cursor:pointer}
.btn.primary{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn .arr{transition:transform .2s}
.btn:hover .arr{transform:translateX(3px)}

.roots{border-block:1px solid var(--line);background:var(--surface)}
.roots .wrap{display:flex;align-items:center;gap:14px 36px;flex-wrap:wrap;padding-block:22px;justify-content:space-between}
.roots .lbl{font-size:13.5px;color:var(--dim)}
.roots ul{list-style:none;margin:0;padding:0;display:flex;gap:10px 30px;flex-wrap:wrap;font-family:var(--f-display);font-weight:800;font-size:16px;color:var(--dim)}

.audited{padding-block:80px 0}
.audited .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px 56px;align-items:center}
.audited h2{font-size:clamp(24px,3vw,32px)}
.audited p{color:var(--dim);margin-top:10px;max-width:48ch}
.audited .more{display:inline-block;margin-top:16px;font-weight:700;font-size:14.5px;text-decoration:none}
.sealrow{display:flex;gap:28px;align-items:flex-end;flex-wrap:wrap}
.sealrow a{display:grid;justify-items:center;gap:10px;text-decoration:none;color:var(--dim);font-size:12.5px;font-weight:700;text-align:center}
.sealrow img{height:112px;width:auto;display:block;transition:transform .2s}
.sealrow a:hover img{transform:translateY(-3px)}
.sealimg{background:#fff;border-radius:12px;padding:10px 12px;box-shadow:0 0 0 1px var(--line)}

.doors{padding-block:88px 40px}
.doors h2{font-size:clamp(24px,3vw,32px)}
.doors .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:32px}
.door{display:grid;gap:10px;align-content:start;padding:26px 24px 22px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);text-decoration:none;color:var(--fg);transition:border-color .2s,transform .2s}
.door:hover{border-color:var(--brand);transform:translateY(-2px)}
.door .ic{width:40px;height:40px;border-radius:10px;background:var(--brand-soft);display:grid;place-items:center;color:var(--brand-ink)}
.door h3{font-size:19px}
.door p{font-size:14.5px;color:var(--dim)}
.door .go{font-size:14px;font-weight:700;color:var(--brand-ink);margin-top:6px}

.latest{padding-block:24px 96px}
.latest a{display:flex;gap:16px;align-items:center;flex-wrap:wrap;text-decoration:none;color:var(--fg);padding:16px 20px;border-radius:var(--r);background:var(--tint)}
.latest .tag{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-ink)}
.latest time{font-size:13.5px;color:var(--dim);font-variant-numeric:tabular-nums}
.latest .all{margin-left:auto;color:var(--brand-ink);font-weight:700}

.sub-hd{padding-block:64px 36px;display:grid;gap:12px}
.crumb{font-size:13px;color:var(--dim)}
.crumb a{color:var(--dim)}
.sub-hd h1{font-size:clamp(30px,4.2vw,46px)}
.sub-hd p{color:var(--dim);max-width:62ch;font-size:17px}
.sub-body{display:grid;gap:48px;padding-bottom:110px}
.blk{display:grid;gap:16px;min-width:0}
.blk>h2{font-size:21px}
.note{color:var(--dim);font-size:14.5px;max-width:68ch}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px;min-width:0}
.card.tbl{padding:6px 10px}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;padding:2px 10px;border-radius:999px;border:1px solid var(--line);white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--dim)}
.pill.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent)}
.pill.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent)}
.pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.links{display:flex;gap:6px;flex-wrap:wrap}
.links a{font-size:13px;text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:2px 10px;color:var(--fg);background:var(--surface);white-space:nowrap}
.links a:hover{border-color:var(--brand)}
.links a.t-valid{color:var(--ok)} .links a.t-revoked{color:var(--bad)} .links a.t-expired{color:var(--warn)}
.fp{font-family:var(--f-mono);font-size:12px;color:var(--dim);word-break:break-all;line-height:1.5}
.copy{font:inherit;font-size:11.5px;border:1px solid var(--line);background:transparent;color:var(--dim);border-radius:999px;padding:1px 9px;cursor:pointer}
.scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14.5px}
th{font-size:12.5px;color:var(--dim);font-weight:700;text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:13px 12px;border-bottom:1px solid var(--line);vertical-align:top;font-variant-numeric:tabular-nums}
tr:last-child td{border-bottom:0}

.cert-stage{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:20px;align-items:start}
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.col{display:grid;gap:10px;align-content:start;min-width:0}
.node{all:unset;box-sizing:border-box;cursor:pointer;display:grid;gap:2px;border:1px solid var(--line);border-radius:10px;padding:11px 12px;background:var(--bg);min-width:0}
.node.root{background:var(--surface);border-color:var(--fg)}
.node.sel{background:var(--brand-soft);border-color:var(--brand)}
.node b{font-family:var(--f-display);font-size:14px;font-weight:800;line-height:1.25}
.node span{font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}
.kids{display:grid;gap:8px;padding-left:12px;border-left:1.5px solid var(--mesh);margin-left:12px}
.kids.x{border-left:1.5px dashed var(--brand)}
.xchip{font-size:11.5px;color:var(--brand-ink)}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--dim);margin-bottom:14px}
.legend i{display:inline-block;width:16px;border-top:1.5px solid var(--mesh);vertical-align:middle;margin-right:6px}
.legend i.x{border-top:1.5px dashed var(--brand)}
.detail{position:sticky;top:84px;display:grid;gap:14px}
.detail h3{font-size:20px}
.detail dl{display:grid;grid-template-columns:100px minmax(0,1fr);gap:8px 12px;margin:0;font-size:13.5px}
.detail dt{color:var(--dim)} .detail dd{margin:0;min-width:0;word-break:break-all}
.eyebrow{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--dim);font-weight:800}

.cur{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;background:var(--tint);border-radius:var(--r);padding:26px}
.cur h3{font-size:22px}
.cur p{color:var(--dim);font-size:14.5px;margin-top:4px}
.fam{font-size:11.5px;color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:0 7px;margin-left:6px;white-space:nowrap}
details.more summary{cursor:pointer;font-weight:800;font-size:15px;padding:4px 0;color:var(--brand-ink)}

.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.kv{display:grid;grid-template-columns:120px minmax(0,1fr);gap:7px 12px;font-size:14px;margin:12px 0 0}
.kv dt{color:var(--dim)} .kv dd{margin:0;word-break:break-word}
.tool{display:grid;gap:12px}
.tool .row{display:flex;gap:12px;flex-wrap:wrap;align-items:end}
.tool label{display:grid;gap:4px;font-size:13px;color:var(--dim)}
.tool input,.tool select{font:inherit;font-size:14.5px;padding:8px 11px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--fg);min-width:0}
.tool pre{margin:0;font-family:var(--f-mono);font-size:13px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px;white-space:pre-wrap;word-break:break-all}
.steps{margin:0;padding-left:22px;display:grid;gap:8px}
.mail{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-family:var(--f-mono);font-size:15px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 14px}
.notice-list{display:grid}
.notice-list a{display:grid;grid-template-columns:110px 90px minmax(0,1fr);gap:14px;padding:16px 4px;border-bottom:1px solid var(--line);color:var(--fg);text-decoration:none}
.notice-list time{color:var(--dim);font-variant-numeric:tabular-nums;font-size:14px}
.ntype{font-size:12px;font-weight:800;color:var(--brand-ink);text-transform:uppercase;letter-spacing:.05em;padding-top:2px}
.seals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.seal{display:grid;gap:4px;text-decoration:none;color:var(--fg)}
.seal small{color:var(--dim)}
.seal .verify{margin-top:8px;font-size:13.5px;font-weight:700;color:var(--brand-ink)}

.ft{border-top:1px solid var(--line);background:var(--surface)}
.ft .wrap{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:28px;padding-block:44px 52px;font-size:14px}
.ft h4{margin:0 0 10px;font-size:13px;color:var(--dim);font-weight:700}
.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ft a{color:var(--fg);text-decoration:none}
.ft p{color:var(--dim);font-size:13.5px}
.ft .logo img{height:14px}
.ft .copy-r{grid-column:1/-1;color:var(--dim);font-size:12.5px;border-top:1px solid var(--line);padding-top:18px}

@media (max-width:920px){
  .menu{display:none}
  .menu.open{display:grid;position:absolute;top:68px;left:0;right:0;background:var(--surface);border-bottom:1px solid var(--line);padding:10px 20px 16px;gap:2px}
  .burger{display:block}
  .hdr .wrap{justify-content:space-between}
  .report-link{display:none}
  .hero .wrap{padding-block:80px 72px}
  .audited .wrap{grid-template-columns:1fr}
  .sealrow img{height:92px}
  .doors .grid,.cert-stage,.cols,.two,.seals{grid-template-columns:1fr}
  .detail{position:static}
  .cur{grid-template-columns:1fr}
  .ft .wrap{grid-template-columns:1fr 1fr}
  .notice-list a{grid-template-columns:96px minmax(0,1fr)}
  .notice-list .ntype{display:none}
  .latest .all{margin-left:0}
}
@media (max-width:480px){ .logo img{height:14px} .ft .wrap{grid-template-columns:1fr} .sealrow{gap:14px} .sealrow img{height:78px} }
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* --- v2.1: 인라인 style 대체 클래스 (CSP style-src 'self') --- */
.mt8{margin-top:8px}
.stack{display:grid;gap:12px;align-content:start}
.stack14{display:grid;gap:14px;align-content:start}
.row6{display:flex;gap:6px;flex-wrap:wrap}
.links.gap8{gap:8px}
.h19{font-size:19px}
.mw200{min-width:200px} .mw220{min-width:220px} .nowrap{white-space:nowrap}
.mt12{margin-top:12px}
.kv.flush{margin:0}
.muted{color:var(--dim);font-size:14.5px}
.card-head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center}
.seal .sealimg{justify-self:start}
.seal .sealimg img{height:96px;width:auto;display:block}
.seal b{font-family:var(--f-display);font-size:18px;margin-top:10px}
.detail-panel[hidden]{display:none!important}
.noscript-note{font-size:13px;color:var(--dim)}
.lang a{font-size:13px;color:var(--dim);padding:3px 8px;border-radius:6px;text-decoration:none}
.lang a[aria-current="true"]{color:var(--fg);font-weight:800;background:var(--tint)}
