html{color-scheme:light}body{margin:0}
/* Layout: 모델 카탈로그(모델별 / 프로젝트별 전환 + 필터) → 모델 상세(#id) */
:root{
  --bg:#dbe9fd; --bg-grad:linear-gradient(180deg,#c3dbfb 0%,#e9f2fe 100%);
  --surface:rgba(255,255,255,.62); --fg:#0f2250; --muted:#263f6b; --line:rgba(60,100,180,.22);
  --accent:#3b82f6; --accent-ink:#123a94; --accent-soft:rgba(59,130,246,.14); --warn:#9a5b00; --warn-soft:rgba(251,239,217,.85);
  --c-co:#1f6f68; --c-co-soft:rgba(79,184,166,.24); --c-wt:#2b5fc4; --c-wt-soft:rgba(99,137,230,.22); --c-gr:#5b46a8; --c-gr-soft:rgba(143,120,228,.22);
  --code-bg:#14264d; --code-fg:#dbe7ff;
  --card-grad:linear-gradient(160deg,rgba(255,255,255,.78),rgba(214,229,253,.55));
  --hot-grad:linear-gradient(150deg,#2f6fe4 0%,#2a5fd0 55%,#244fb8 100%);
  --shadow:0 10px 30px -12px rgba(30,70,150,.35); --radius:22px;
  --font-body:"Manrope","IBM Plex Sans KR","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
}
:root[data-theme="dark"]{
  --bg:#0b1630; --bg-grad:linear-gradient(180deg,#0b1630 0%,#122550 100%);
  --surface:rgba(30,50,95,.55); --fg:#e4ecff; --muted:#93a8d4; --line:rgba(140,175,255,.18);
  --accent:#6aa2ff; --accent-ink:#8fb7ff; --accent-soft:rgba(106,162,255,.18); --warn:#f0b35a; --warn-soft:rgba(51,39,15,.8);
  --c-co:#8fe6d4; --c-co-soft:rgba(79,184,166,.26); --c-wt:#a9c6ff; --c-wt-soft:rgba(99,137,230,.28); --c-gr:#cdbdff; --c-gr-soft:rgba(143,120,228,.28);
  --code-bg:#0a1228; --code-fg:#dbe7ff;
  --card-grad:linear-gradient(160deg,rgba(60,90,160,.4),rgba(25,45,95,.5));
  --hot-grad:linear-gradient(150deg,#2f6fe4 0%,#2563d8 60%,#1e4fb8 100%);
  --shadow:0 10px 30px -12px rgba(0,0,0,.6); color-scheme:dark;}

*{box-sizing:border-box}
body{background:var(--bg-grad) fixed,var(--bg);min-height:100vh;color:var(--fg);font:16px/1.7 var(--font-body);padding-inline:16px;padding-block:40px 72px;word-break:keep-all}
.wrap{max-width:1180px;margin-inline:auto}
.wrap.narrow{max-width:1000px}
a{color:var(--accent-ink)}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mono{font-family:var(--font-mono)}
.label{font:600 12px/1.2 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.todo{color:var(--muted);font-style:italic}

.top h1{font-size:clamp(28px,5vw,40px);line-height:1.15;margin:10px 0 10px;font-weight:800;letter-spacing:-.02em;text-wrap:balance}
.top p{color:var(--muted);max-width:62ch;margin:0;font-size:16.5px}
.stats{display:flex;gap:20px;flex-wrap:wrap;margin-top:18px}
.stats span{font:500 14px var(--font-mono);color:var(--muted)}
.stats b{color:var(--fg);font-weight:700}
.themebtn{float:right;border:1px solid var(--line);background:var(--surface);backdrop-filter:blur(10px);border-radius:99px;padding:7px 15px;font-size:13px;font-weight:600;cursor:pointer}

.tabs{display:inline-flex;gap:4px;margin-top:26px;padding:4px;background:var(--surface);border:1px solid var(--line);border-radius:99px;backdrop-filter:blur(10px)}
.tab{border:0;background:none;font-size:15px;padding:8px 20px;cursor:pointer;color:var(--muted);border-radius:99px;font-weight:600}
.tab[aria-selected="true"]{color:#fff;background:var(--hot-grad);box-shadow:0 4px 12px -4px rgba(47,111,228,.6)}

.filters{display:grid;gap:12px;margin-block:22px 20px}
.search{width:100%;padding:12px 16px;font-size:15px;border:1px solid var(--line);background:var(--surface);color:var(--fg);border-radius:14px;font:inherit;backdrop-filter:blur(10px)}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.row .label{margin-right:4px;min-width:48px}
.chip{border:1px solid var(--line);background:var(--surface);padding:6px 14px;border-radius:99px;font-size:14px;font-weight:500;cursor:pointer;backdrop-filter:blur(10px)}
.chip[aria-pressed="true"]{background:var(--hot-grad);border-color:transparent;color:#fff}
:root[data-theme="dark"] .chip[aria-pressed="true"]{color:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .chip[aria-pressed="true"]{color:#fff}}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
[data-ctx="co"]{--c1:#d9f7ee;--c2:#c3e9f2}
[data-ctx="wt"]{--c1:#dde9ff;--c2:#d3d9fb}
[data-ctx="gr"]{--c1:#ebe2ff;--c2:#f2dcf6}
.card{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:8px;min-height:285px;text-align:left;color:#12224a;background:linear-gradient(145deg,var(--c1,#dde9ff),var(--c2,#d3d9fb));border:1px solid rgba(255,255,255,.9);border-radius:22px;padding:18px 20px;cursor:pointer;min-width:0;box-shadow:0 12px 28px -14px rgba(60,90,160,.4);transition:transform .25s,box-shadow .25s}
.card::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 0% 0%,rgba(255,255,255,.85),rgba(255,255,255,0) 55%);pointer-events:none}
.card:hover,.card:focus-visible{transform:translateY(-3px);box-shadow:0 20px 34px -14px rgba(60,90,160,.5)}
.card>*:not(.card-art){position:relative}
.card-art{position:absolute;opacity:.95;left:0;right:-6%;bottom:40px;height:50%;pointer-events:none;-webkit-mask-image:radial-gradient(ellipse 60% 68% at 64% 58%,#000 28%,rgba(0,0,0,.6) 52%,transparent 82%);mask-image:radial-gradient(ellipse 60% 68% at 64% 58%,#000 28%,rgba(0,0,0,.6) 52%,transparent 82%)}
.card-art svg{width:100%;height:100%;display:block}
.card .badges{gap:5px}
.card .badges .badge{background:rgba(255,255,255,.75);color:#1d3a8a;padding:4px 8px;font-size:11px}
.card h2{margin:0;color:#12224a;font-size:20px;line-height:1.2;font-weight:800;letter-spacing:-.015em;text-wrap:balance;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .desc{margin:0;font-size:13px;line-height:1.5;color:#3a4f7a;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:94%}
.card-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px}
.pill{background:#2f6fe4;color:#fff;font:600 11.5px/1 var(--font-body);padding:8px 13px;border-radius:99px;max-width:75%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.go{flex:none;width:30px;height:30px;border-radius:50%;background:#fff;color:#2f6fe4;box-shadow:0 2px 8px -2px rgba(60,90,160,.35);display:grid;place-items:center;font-size:14px;font-weight:700;transition:transform .25s}
.card:hover .go{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.card,.go{transition:none}.card:hover{transform:none}}
.badges{display:flex;gap:6px;flex-wrap:wrap}
.badge{display:inline-block;font:600 12px/1 var(--font-mono);letter-spacing:.03em;padding:6px 10px;border-radius:99px;background:var(--accent-soft);color:var(--accent-ink)}
.badge.co{background:var(--c-co-soft);color:var(--c-co)}
.badge.gr{background:var(--c-gr-soft);color:var(--c-gr)}
.badge.wt{background:var(--c-wt-soft);color:var(--c-wt)}
.badge.warn{background:var(--warn-soft);color:var(--warn)}
.empty{padding:40px 0;color:var(--muted)}

/* project view */
/* 상세 화면 상단: 모델 카드와 같은 파란 카드 + 일러스트 */
.dhero{position:relative;overflow:hidden;color:#12224a;background:linear-gradient(145deg,var(--c1,#dde9ff),var(--c2,#d3d9fb));border:1px solid rgba(255,255,255,.9);border-radius:30px;padding:30px 32px;min-height:270px;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;box-shadow:0 18px 40px -20px rgba(60,90,160,.4)}
.dhero::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 0% 0%,rgba(255,255,255,.85),rgba(255,255,255,0) 55%);pointer-events:none}
.dhero-art{position:absolute;right:-2%;top:4%;bottom:4%;width:52%;opacity:.95;pointer-events:none;-webkit-mask-image:radial-gradient(ellipse 62% 72% at 62% 55%,#000 30%,rgba(0,0,0,.6) 55%,transparent 85%);mask-image:radial-gradient(ellipse 62% 72% at 62% 55%,#000 30%,rgba(0,0,0,.6) 55%,transparent 85%)}
.dhero-art svg{width:100%;height:100%;display:block}
.dhero>*:not(.dhero-art){position:relative;max-width:58%}
.dhero h1{margin:0;color:#12224a;font-size:clamp(30px,5vw,44px);line-height:1.1;font-weight:800;letter-spacing:-.02em;text-wrap:balance}
.dhero .sub{margin:0;color:#3a4f7a;font-size:16.5px}
.dhero .badge{background:rgba(255,255,255,.75);color:#1d3a8a}
@media (max-width:700px){.dhero>*:not(.dhero-art){max-width:none}.dhero-art{opacity:.35;width:85%}}
/* 프로젝트 카드: 연한 카드 */
.proj{position:relative;overflow:hidden;color:#12224a;background:linear-gradient(145deg,var(--c1,#dde9ff),var(--c2,#d3d9fb));border:1px solid rgba(255,255,255,.9);border-radius:22px;padding:22px 26px;min-width:0;box-shadow:0 12px 28px -14px rgba(60,90,160,.4)}
.proj::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 0% 0%,rgba(255,255,255,.85),rgba(255,255,255,0) 55%);pointer-events:none}
.proj>*{position:relative}.proj-body{max-width:78ch}
.proj h3{margin:0 0 6px;color:#12224a;font-size:19px;line-height:1.3;font-weight:800;letter-spacing:-.01em}
.proj .pm{font:500 13px var(--font-mono);color:#3a4f7a;margin-bottom:10px}
.proj p{margin:0 0 14px;color:#25396b}
.ptags{display:flex;gap:8px;flex-wrap:wrap}
.proj .pill{border:0;cursor:pointer;background:rgba(255,255,255,.75);color:#1d3a8a;font:600 12.5px/1 var(--font-body);padding:8px 13px;max-width:none}
.proj .pill:hover,.proj .pill:focus-visible{background:#2f6fe4;color:#fff}

.pgroup{margin-top:30px}
.pgroup>h2{font-size:18px;margin:0 0 12px;display:flex;gap:10px;align-items:center}
.plist{display:grid;gap:12px}

/* detail */
.back{border:1px solid var(--line);background:var(--surface);backdrop-filter:blur(10px);color:var(--accent-ink);cursor:pointer;padding:8px 16px;border-radius:99px;margin-bottom:18px;font-size:15px;font-weight:600}
.dhead h1{font-size:clamp(28px,5vw,40px);margin:12px 0 6px;line-height:1.15;letter-spacing:-.02em}
.dhead .sub{color:var(--muted);margin:0}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-block:24px}
.facts div{background:var(--card-grad);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);backdrop-filter:blur(14px);padding:16px 18px;min-width:0}
.facts dt{margin:0 0 6px}
.facts dd{margin:0;font-size:15.5px}
section.sec{margin-block:20px 0;background:var(--card-grad);border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px;box-shadow:var(--shadow);backdrop-filter:blur(14px)}
section.sec.bare{background:none;border:0;box-shadow:none;padding:0;backdrop-filter:none;margin-top:36px}
section.sec>h2{font-size:21px;margin:0 0 16px;font-weight:700;letter-spacing:-.01em}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.two h3{font-size:15.5px;margin:0 0 8px;font-weight:700}
ul.plain{margin:0;padding-left:1.1em;display:grid;gap:6px}
.tags{display:flex;gap:8px;flex-wrap:wrap}
.tag{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--line);background:var(--surface);backdrop-filter:blur(10px);padding:7px 14px;border-radius:99px;font-size:14px;color:var(--fg)}
.tag small{font:500 12px var(--font-mono);color:var(--muted)}
button.tag{cursor:pointer;border-color:var(--accent);color:var(--accent-ink);font-weight:500}
pre{background:var(--code-bg);color:var(--code-fg);padding:18px;border-radius:18px;overflow-x:auto;font:400 14px/1.65 var(--font-mono);margin:0}
.steps{counter-reset:s;list-style:none;margin:0;padding:0;display:grid;gap:10px}
.steps li{counter-increment:s;display:grid;grid-template-columns:28px 1fr;gap:10px}
.steps li::before{content:counter(s);font:500 12px var(--font-mono);color:#fff;background:var(--hot-grad);border-radius:50%;width:24px;height:24px;display:grid;place-items:center;margin-top:2px}
.table-wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:15px}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{font:600 12px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

.log{display:grid;gap:16px}
.rec{background:var(--card-grad);border:1px solid var(--line);border-radius:var(--radius);padding:24px;min-width:0;box-shadow:var(--shadow);backdrop-filter:blur(14px)}
.rec-head{display:flex;gap:10px;flex-wrap:wrap;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.rec-head h3{margin:0;font-size:18px;font-weight:700}
.rec-head h3 button{border:0;background:none;padding:0;color:inherit;font:inherit;cursor:pointer;text-align:left}
.rec-head h3 button:hover{color:var(--accent-ink)}
.rec dl{display:grid;grid-template-columns:110px 1fr;gap:10px 16px;margin:0}
.rec dt{font:600 12px/1.9 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.rec dd{margin:0;min-width:0}
@media(max-width:560px){.rec dl{grid-template-columns:1fr;gap:2px}.rec dd{margin-bottom:10px}}
.mchips{display:flex;gap:8px;flex-wrap:wrap}
.mchip{display:inline-flex;gap:8px;align-items:baseline;border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:5px 13px;font-size:14px}
.mchip small{font:500 12px var(--font-mono);color:var(--muted)}
.mchip b{font:700 14px var(--font-mono)}
.note{font-size:14px;color:var(--warn);background:var(--warn-soft);padding:10px 14px;border-radius:14px;margin-top:12px}
.hint{margin:-4px 0 16px;font-size:14px;color:var(--muted)}
.foot{margin-top:56px;padding-top:18px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}