:root{
  --navy:#14315f; --navy2:#1b3f7a; --navy-d:#0d2647;
  --accent:#ffd21e; --teal:#1fae9f; --teal-d:#158b7e;
  --red:#d8362a; --red-bg:#fdeceb; --green:#2e9e5b; --green-bg:#eaf6ef;
  --amber:#e8a300;
  --ink:#1f2733; --muted:#5c6675; --line:#e3e8ef; --bg:#eef1f6; --card:#ffffff;
  --shadow:0 1px 3px rgba(16,32,60,.08),0 8px 24px rgba(16,32,60,.06);
  --radius:16px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:'Pretendard','Noto Sans KR',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  line-height:1.62;font-size:16px;letter-spacing:-.01em;-webkit-text-size-adjust:100%;}
img{max-width:100%;display:block;}
.wrap{max-width:860px;margin:0 auto;padding:0 16px;}

.topbar{position:sticky;top:0;z-index:40;background:rgba(20,49,95,.96);
  backdrop-filter:saturate(140%) blur(8px);color:#fff;box-shadow:0 2px 12px rgba(13,38,71,.25);}
.topbar .inner{max-width:860px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:12px;}
.logo{font-weight:900;letter-spacing:2px;font-size:20px;display:inline-flex;gap:3px;align-items:center;}
.logo span{background:#fff;color:var(--navy);border-radius:4px;padding:1px 6px;line-height:1.3;}
.topbar .t{font-size:13px;font-weight:600;opacity:.92;}
.topbar .t small{display:block;font-size:10.5px;font-weight:400;opacity:.7;}

.hero{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-d) 100%);color:#fff;position:relative;overflow:hidden;}
.hero:before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(-45deg,rgba(255,255,255,.05) 0 2px,transparent 2px 22px);}
.hero .inner{position:relative;max-width:860px;margin:0 auto;padding:32px 16px 28px;}
.hero .eyebrow{display:inline-block;font-size:11.5px;letter-spacing:.14em;font-weight:700;color:var(--navy);background:var(--accent);padding:4px 10px;border-radius:20px;}
.hero h1{margin:14px 0 8px;font-size:27px;font-weight:900;line-height:1.22;}
.hero h1 b{color:var(--accent);}
.hero .sub{font-size:14px;opacity:.86;}
.hero .applies{margin-top:14px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
  border-radius:12px;padding:10px 14px;font-size:13px;display:flex;gap:10px;align-items:center;}
.hero .applies b{color:var(--accent);}
.hero .meta{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px;}
.hero .chip{font-size:12px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);padding:5px 11px;border-radius:20px;}

.nav{position:sticky;top:52px;z-index:30;background:var(--bg);padding:10px 0 4px;}
.nav .row{max-width:860px;margin:0 auto;padding:0 12px;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;}
.nav .row::-webkit-scrollbar{display:none;}
.nav a{flex:0 0 auto;text-decoration:none;font-size:13.5px;font-weight:700;color:var(--navy);
  background:#fff;border:1px solid var(--line);padding:9px 15px;border-radius:30px;box-shadow:var(--shadow);white-space:nowrap;transition:.15s;}
.nav a .n{color:var(--teal);font-weight:900;margin-right:5px;}
.nav a.active{background:var(--navy);color:#fff;border-color:var(--navy);}
.nav a.active .n{color:var(--accent);}

section{scroll-margin-top:106px;padding:22px 0 8px;}
.sechead{background:linear-gradient(135deg,var(--navy) 0%,var(--navy2) 100%);color:#fff;border-radius:var(--radius);
  padding:16px 18px;position:relative;overflow:hidden;box-shadow:var(--shadow);}
.sechead:before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(-45deg,rgba(255,255,255,.06) 0 2px,transparent 2px 20px);}
.sechead .k{position:relative;font-size:12px;letter-spacing:.16em;font-weight:700;color:var(--accent);}
.sechead h2{position:relative;margin:2px 0 0;font-size:22px;font-weight:900;}
.sechead h2 em{font-style:normal;color:var(--accent);}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;margin-top:14px;}
.card > h3{margin:0 0 10px;font-size:17px;font-weight:800;color:var(--navy);display:flex;align-items:center;gap:9px;}
.card p{margin:0 0 10px;}
.lead{color:var(--muted);font-size:14.5px;margin:12px 2px 2px;}

.cp{display:grid;gap:12px;}
.cp .box{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;}
.cp .box .hd{background:var(--navy);color:#fff;padding:10px 14px;font-weight:800;font-size:15px;display:flex;align-items:center;gap:9px;}
.cp .box .hd .num{background:var(--accent);color:var(--navy);width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:900;font-size:13px;flex:0 0 auto;}
.cp .box ul{margin:0;padding:12px 16px 14px 16px;list-style:none;}
.cp .box li{position:relative;padding:5px 0 5px 20px;font-size:14.5px;border-bottom:1px dashed #eef1f6;}
.cp .box li:last-child{border-bottom:0;}
.cp .box li:before{content:"";position:absolute;left:2px;top:12px;width:7px;height:7px;border-radius:2px;background:var(--teal);}

.formula{background:#f4f8ff;border:1px solid #dce8ff;border-left:4px solid var(--navy);border-radius:12px;padding:14px 16px;margin:12px 0;}
.formula .eq{font-weight:800;color:var(--navy);font-size:15.5px;background:#fff;border:1px solid #dce8ff;border-radius:8px;padding:8px 12px;display:inline-block;margin:6px 8px 0 0;}
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;margin-top:14px;-webkit-overflow-scrolling:touch;}
table.dt{border-collapse:collapse;width:100%;font-size:11.6px;}
table.dt thead th{background:var(--navy);color:#fff;font-weight:700;padding:6px 7px;text-align:center;border-right:1px solid rgba(255,255,255,.12);line-height:1.25;}
table.dt thead th small{display:block;font-size:9px;font-weight:400;opacity:.78;}
table.dt tbody td{padding:3px 7px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);}
.angle2{display:grid;grid-template-columns:1fr;gap:14px;margin-top:12px;}
.angle2 .a2left figure{margin:0;}
.angle2 .a2left figure img{width:100%;height:auto;max-height:230px;object-fit:contain;padding:8px;background:#fff;}
.angle2 .a2left .formula{margin:12px 0 0;}
.angle2 .a2right{min-width:0;}
.angle2 .a2right .tbl-wrap{margin-top:0;}
@media(min-width:640px){
  .angle2{grid-template-columns:0.92fr 1.08fr;align-items:start;}
  .angle2 .a2left figure img{max-height:200px;}
}
table.dt tbody tr:nth-child(even){background:#f7f9fc;}
table.dt tbody tr:last-child td{border-bottom:0;}
table.dt td.c{text-align:center;} table.dt td.b{font-weight:800;color:var(--navy);}
.tnote{font-size:12px;color:var(--muted);margin:9px 2px 0;line-height:1.5;}

figure{margin:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;}
figure img{width:100%;height:auto;background:#fff;}
figure figcaption{font-size:12.5px;color:var(--muted);padding:8px 12px;border-top:1px solid var(--line);}
.figrow{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px;align-items:stretch;}
.figrow figure{display:flex;flex-direction:column;}
.figrow figure img{flex:1;height:132px;object-fit:contain;padding:8px;}
.figfull{margin-top:12px;}
.figfull img{padding:6px;}

/* product tabs */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px;}
.tabs button{flex:1 1 auto;min-width:calc(50% - 6px);font:inherit;font-weight:800;font-size:13.5px;color:var(--navy);
  background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:10px 8px;cursor:pointer;transition:.15s;}
.tabs button.on{background:var(--teal);border-color:var(--teal);color:#fff;box-shadow:var(--shadow);}
.tabpane{display:none;margin-top:10px;}
.tabpane.on{display:block;animation:fade .25s ease;}
@keyframes fade{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}
.prodfig img{padding:6px;background:#fff;}

/* section2 illustrated cards */
.grouptag{display:inline-flex;align-items:center;gap:8px;font-weight:900;font-size:15px;margin:16px 2px 8px;}
.grouptag.ok{color:var(--green);} .grouptag.no{color:var(--red);}
.icards{display:grid;grid-template-columns:1fr;gap:12px;}
.icard2{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;display:flex;flex-direction:column;}
.icard2.ok{border-top:4px solid var(--green);} .icard2.no{border-top:4px solid var(--red);}
.icard2 .imgwrap{width:100%;background:#f3f7fa;display:flex;align-items:center;justify-content:center;padding:12px;border-bottom:1px solid var(--line);}
.icard2 .imgwrap img{max-height:172px;width:auto;object-fit:contain;}
.icard2 .ibody{padding:13px 15px;}
.icard2 .ibody h4{margin:0 0 6px;font-size:15.5px;font-weight:800;color:var(--navy);display:flex;align-items:center;gap:7px;}
.icard2.ok .ibody h4:before{content:"✔";color:var(--green);font-weight:900;}
.icard2.no .ibody h4:before{content:"✕";color:var(--red);font-weight:900;}
.icard2 .ibody p{margin:0;font-size:13.8px;color:var(--ink);line-height:1.6;}

/* inspection */
.insp{display:grid;gap:14px;margin-top:6px;}
.icard{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;}
.icard .ihd{padding:9px 14px;min-height:52px;font-weight:800;font-size:14.5px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.icard.rep .ihd{background:var(--green);} .icard.ret .ihd{background:var(--red);} .icard.cont .ihd{background:var(--amber);}
.icard .ihd .tag{font-size:11px;font-weight:800;background:rgba(255,255,255,.22);padding:3px 9px;border-radius:20px;white-space:nowrap;flex:0 0 auto;}
.icard .ibody2{padding:12px 14px;font-size:14px;}
.icard .ibody2 .row{display:grid;grid-template-columns:1fr;gap:10px;}
.icard .ibody2 .row img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:10px;border:1px solid var(--line);}
.icard .kv{margin:2px 0;} .icard .kv b{color:var(--navy);}

.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:4px;}
.pgrid .ph{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;aspect-ratio:4/3;}
.pgrid .ph img{width:100%;height:100%;object-fit:contain;background:#fff;}
.rblock{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;margin-top:12px;}
.rblock .rh{padding:10px 14px;color:#fff;font-weight:800;font-size:14.5px;display:flex;justify-content:space-between;align-items:center;}
.rblock.rep .rh{background:var(--green);} .rblock.ret .rh{background:var(--red);}
.rblock .rh .tag{font-size:11px;background:rgba(255,255,255,.22);padding:3px 9px;border-radius:20px;}
.rblock .rb{padding:12px 14px;} .rblock .rb p{margin:10px 2px 0;font-size:13.5px;}

.callout{border-radius:14px;padding:14px 16px;margin-top:14px;font-size:14px;}
.callout.warn{background:var(--red-bg);border:1px solid #f3c9c5;color:#7a1e17;}
.callout b{font-weight:800;}
ol.clean{margin:6px 0 0;padding-left:20px;} ol.clean li{margin:6px 0;font-size:14.5px;}

footer{margin-top:26px;background:var(--navy-d);color:#cdd7e6;}
footer .inner{max-width:860px;margin:0 auto;padding:24px 16px 34px;}
footer .logo{color:#fff;margin-bottom:10px;}
footer p{margin:4px 0;font-size:13px;}
footer .std{margin-top:12px;font-size:12px;opacity:.8;}
footer .cr{margin-top:16px;font-size:11.5px;opacity:.6;border-top:1px solid rgba(255,255,255,.12);padding-top:12px;}
.backtop{position:fixed;right:16px;bottom:16px;z-index:50;background:var(--navy);color:#fff;border:none;width:46px;height:46px;border-radius:50%;box-shadow:0 6px 18px rgba(13,38,71,.4);font-size:20px;cursor:pointer;opacity:0;pointer-events:none;transition:.2s;}
.backtop.show{opacity:1;pointer-events:auto;}
@media(min-width:560px){
  .icards{grid-template-columns:1fr 1fr;}
  .insp{grid-template-columns:1fr 1fr;align-items:stretch;}
  .icard{display:flex;flex-direction:column;}
  .pgrid{grid-template-columns:repeat(4,1fr);}
}
@media(max-width:420px){.hero h1{font-size:23px;}}