@charset "UTF-8";
:root{color-scheme:light;--navy:#14213a;--mint:#a9edcf;--ink:#17223b;--muted:#516077;--line:#dbe3eb;--paper:#f5f7fa;--white:#fff;--teal:#145d50;--radius:15px}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:var(--paper);font:15px/1.65 "Pretendard","Malgun Gothic","Apple SD Gothic Neo",sans-serif;word-break:keep-all;overflow-wrap:break-word}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:3px solid #378c76;outline-offset:3px}
section[id]{scroll-margin-top:82px}
.wrap{width:min(1180px,calc(100% - 64px));margin-inline:auto}
.skip,.sr-only{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}
.skip:focus{clip-path:none;width:auto;height:auto;z-index:5;padding:12px;background:var(--white)}
.top{position:sticky;top:0;z-index:3;background:var(--white);border-bottom:1px solid var(--line)}
.top-inner,.top nav,.wordmark{display:flex;align-items:center}
.top-inner{min-height:62px;justify-content:space-between;gap:12px}
.wordmark{font-size:19px;font-weight:900;letter-spacing:-.045em;gap:12px;white-space:nowrap}
.wordmark span{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:0;border-left:1px solid var(--line);padding-left:12px}
.top nav{gap:clamp(10px,2.5vw,30px);font-size:13px;font-weight:700;color:var(--muted)}
.top nav a:hover{color:var(--teal);text-decoration:underline}
.hero{background:var(--navy);color:var(--white)}
.hero-inner{display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:44px;padding-block:59px 62px}
.eyebrow,.section-label,.art-top,.art-bottom{font:700 11px/1.4 "Consolas",monospace;letter-spacing:.13em}
.eyebrow{color:var(--mint);display:flex;align-items:center;gap:9px}
.eyebrow span{width:8px;height:8px;background:var(--mint);border-radius:50%}
h1,h2,h3,p{margin:0}
h1{font-size:clamp(40px,5.45vw,76px);line-height:1.08;letter-spacing:-.068em;margin:16px 0 20px;font-weight:900}
.hero p{color:#d4dfed;font-size:clamp(14px,1.5vw,17px)}
.primary{display:inline-flex;gap:20px;align-items:center;background:var(--mint);color:#16352e;padding:10px 16px;border-radius:7px;font-weight:800;margin-top:25px}
.primary:hover{background:#d1f8e6}
.art{min-width:0;border:1px solid #455470;border-radius:14px;overflow:hidden;background:#182841}
.art svg{display:block;width:100%;height:auto}
.art-top,.art-bottom{display:flex;justify-content:space-between;padding:14px 17px;color:#c5d6eb}
.art-top{border-bottom:1px solid #455470;color:var(--mint)}
.art-bottom{border-top:1px solid #455470;letter-spacing:.03em}
.summary{background:var(--white);border-bottom:1px solid var(--line)}
.summary-inner{display:grid;grid-template-columns:1fr 1fr 1.35fr auto;align-items:center;min-height:74px}
.summary-inner>div{display:flex;align-items:center;gap:10px}
.summary strong{font-size:26px;font-variant-numeric:tabular-nums;line-height:1;color:var(--teal);letter-spacing:-.05em}
.summary span{color:var(--muted);font-size:13px}
.summary .date{flex-direction:column;gap:0;align-items:flex-end}
.date b{font-size:12px}
.content{padding-bottom:54px}
.content>section{margin-top:53px}
.section-label{color:var(--teal);margin-bottom:8px}
h2{font-size:clamp(25px,3vw,36px);line-height:1.25;letter-spacing:-.055em}
.section-intro{color:var(--muted);margin-top:7px}
.routes,.grid,.brief-grid{display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr))}
.routes{margin-top:20px}
.derma{--tone:#146255;--wash:#e5f4ee}
.device{--tone:#28558e;--wash:#eaf1fb}
.brand{--tone:#62477c;--wash:#f0ebf7}
.route{position:relative;display:block;padding:18px 28px 17px 17px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius)}
.route:hover{border-color:var(--tone);background:var(--wash)}
.route-kicker{font:700 12px/1.4 Consolas,monospace;color:var(--tone)}
.route h3{font-size:19px;letter-spacing:-.045em;margin:4px 0}
.route p{font-size:13px;color:var(--muted)}
.route b{display:block;font-size:12px;margin-top:11px;color:var(--tone)}
.arrow{position:absolute;right:15px;top:15px;color:var(--tone);font-size:20px;line-height:1}
.note{background:#edf3f6;border-left:3px solid #8da6b7;padding:9px 12px;margin:17px 0 19px;color:#3d5266;font-size:13px;border-radius:0 7px 7px 0}
.note b{margin-right:7px}
.controls,.filters,.viewbar,.views,.search,.card-top{display:flex;align-items:center}
.controls{justify-content:space-between;gap:12px;flex-wrap:wrap}
.filters{gap:6px;flex-wrap:wrap}
.filters button,.views button,.empty button{border:1px solid var(--line);border-radius:7px;background:var(--white);color:var(--ink);padding:6px 10px;font-weight:700;font-size:13px}
.filters button span{opacity:.8;font-size:11px;margin-left:3px}
.filters button[aria-pressed=true],.views button[aria-pressed=true]{background:var(--navy);color:var(--white);border-color:var(--navy)}
.search{background:var(--white);border:1px solid var(--line);color:var(--muted);padding-left:10px;border-radius:8px;flex:0 1 253px}
.search input{width:100%;min-width:0;border:0;background:transparent;color:var(--ink);padding:7px 9px;border-radius:8px;font-size:14px}
.viewbar{justify-content:space-between;margin:11px 0;color:var(--muted);font-size:13px}
.views{gap:4px}
.views button{padding:4px 9px;font-size:12px}
.card{min-width:0;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column}
.card-top{justify-content:space-between;gap:8px;margin-bottom:9px}
.badge,.tag{display:inline-block;font-size:11px;font-weight:750;border-radius:5px;padding:2px 7px}
.badge{background:var(--wash);color:var(--tone)}
.index{color:#65748b;font:700 12px Consolas,monospace}
.card h3{font-size:21px;line-height:1.25;letter-spacing:-.045em}
.name-note{font-size:11px;color:var(--muted);margin:3px 0 13px}
.facts,.ask{font-size:13px}
.facts span,.ask span{display:block;font-size:11px;font-weight:800;color:var(--teal);margin-bottom:2px}
.ask{margin:10px 0;padding:8px 10px;border-radius:7px;background:var(--paper);color:#3d5067}
.tags,.links{display:flex;flex-wrap:wrap;gap:5px}
.tags{margin-bottom:11px}
.tag{background:#edf1f5;color:#42556d}
.links{margin-top:auto;border-top:1px solid var(--line);padding-top:9px;gap:7px}
.btn{padding:5px 9px;font-size:12px;border:1px solid var(--line);border-radius:6px;font-weight:750;display:inline-block}
.btn:hover,.explore a:hover{border-color:var(--teal);color:var(--teal);text-decoration:underline}
.btn::after{content:" ↗";color:var(--teal)}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--white)}
table{border-collapse:collapse;width:100%;min-width:730px;font-size:13px}
th,td{text-align:left;vertical-align:top;padding:11px 13px;border-bottom:1px solid var(--line)}
thead th{background:#e8eef5;color:#364962;font-size:12px}
tbody th{width:175px}
tbody td:last-child{width:150px}
tbody th small{display:block;color:var(--muted);font-weight:500}
tbody tr:last-child>*{border-bottom:0}
.empty{padding:26px;text-align:center;border:1px dashed var(--line);border-radius:var(--radius);background:var(--white)}
.empty button{margin-top:8px}
.brief-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:18px}
.brief-grid>div{border-top:2px solid #9fb3c4;padding:12px 4px 8px}
.brief-grid span{color:var(--teal);font:700 12px Consolas,monospace}
.brief-grid h3{font-size:17px;margin:2px 0 5px}
.brief-grid p,.explore p{color:var(--muted);font-size:13px}
.explore{background:#e9eef5;border:1px solid var(--line);border-radius:var(--radius);padding:13px 16px;margin-top:15px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.explore a{font-size:13px;font-weight:800;color:var(--teal);flex-shrink:0}
footer{border-top:1px solid var(--line);background:var(--white);color:var(--muted);padding:18px 0;font-size:12px}
footer .wrap{display:flex;justify-content:space-between;gap:5px 16px;flex-wrap:wrap}
footer b{color:var(--ink)}
@media(max-width:950px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-inner{gap:24px}}
@media(max-width:720px){.wrap{width:calc(100% - 32px)}.hero-inner{padding-block:36px;grid-template-columns:1fr 0.8fr;gap:12px}.desktop{display:none}.art-bottom{flex-wrap:wrap;gap:3px}.summary-inner{grid-template-columns:1fr 1fr;gap:13px;padding-block:13px}.summary .date{align-items:flex-start}.routes,.brief-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.content>section{margin-top:37px}}
@media(max-width:520px){.top-inner{min-height:54px}.wordmark{font-size:16px;gap:6px}.wordmark span{padding-left:6px;font-size:11px}.top nav{gap:9px;font-size:11px}.hero-inner{grid-template-columns:1fr}.art{display:none}.hero p{max-width:320px}.routes,.grid{grid-template-columns:1fr}.controls{gap:8px}.search{flex-basis:100%}.summary strong{font-size:23px}.summary span{font-size:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media print{body{background:white;font-size:11px}.top,.art,.primary,.controls,.viewbar,footer{display:none!important}.hero{background:white;color:var(--ink)}.hero-inner{display:block;padding:0}.hero p{color:var(--ink)}h1{font-size:32px}h1 br{display:none}.wrap{width:100%}.content>section{margin-top:20px}.grid[hidden],.grid>.card[hidden]{display:grid!important}.grid,.grid[hidden]{grid-template-columns:repeat(2,minmax(0,1fr))}.card{break-inside:avoid}.table-wrap,.empty{display:none!important}}