:root{
  --paper:#F2F4F6;
  --card:#FFFFFF;
  --ink:#191F28;
  --ink-soft:#4E5968;
  --ink-faint:#8B95A1;
  --line:#E5E8EB;
  --accent:#3182F6;
  --accent-ink:#1B64DA;
  --accent-soft:#EBF2FF;
  --null:#F04452;
  --null-soft:#FFEEEF;
  --shadow-card:0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.05);
  --shadow-pop:0 4px 14px rgba(49,130,246,.25);
  --r-lg:20px;
  --r-md:14px;
  --r-sm:10px;
  --r-pill:999px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#15171C; --card:#1F222A; --ink:#F2F4F6; --ink-soft:#B0B8C1; --ink-faint:#6B7684;
    --line:#2E3138; --accent:#4593FC; --accent-ink:#7EB2FF; --accent-soft:#22333B;
    --null:#FF6B75; --null-soft:#3A1E20;
    --shadow-card:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.28);
    --shadow-pop:0 4px 16px rgba(69,147,252,.3);
  }
}
:root[data-theme="dark"]{
  --paper:#15171C; --card:#1F222A; --ink:#F2F4F6; --ink-soft:#B0B8C1; --ink-faint:#6B7684;
  --line:#2E3138; --accent:#4593FC; --accent-ink:#7EB2FF; --accent-soft:#22333B;
  --null:#FF6B75; --null-soft:#3A1E20;
  --shadow-card:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.28);
  --shadow-pop:0 4px 16px rgba(69,147,252,.3);
}

*{box-sizing:border-box;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Noto Sans KR","Gothic A1",system-ui,sans-serif;
  line-height:1.75; word-break:keep-all; overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important;} }
a{color:var(--accent-ink); text-decoration:none; font-weight:600;}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums;}
.wrap{max-width:1040px; margin:0 auto; padding:0 24px;}

/* ================= hero ================= */
.hero{padding:80px 0 88px; border-bottom:1px solid var(--line); overflow:hidden;}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center;}
.eyebrow{font-family:"Gothic A1"; font-size:.82rem; font-weight:700; color:var(--accent-ink); margin:0 0 16px;}
.wordmark{
  font-family:"Gothic A1"; font-weight:900; letter-spacing:-.03em;
  font-size:clamp(2.6rem,5.4vw,3.6rem); line-height:1.15; margin:0 0 18px; color:var(--ink);
}
.wordmark span{color:var(--accent);}
.hero-sub{font-size:1.05rem; line-height:1.75; color:var(--ink-soft); margin:0 0 32px; max-width:36em;}
.br-desktop{display:none;}
@media (min-width:640px){ .br-desktop{display:inline;} }

.hero-preview{position:relative;}
.hero-frame{
  margin-bottom:0; transform:rotate(1.2deg); box-shadow:0 24px 56px rgba(15,23,42,.14);
  transition:transform .35s ease, box-shadow .35s ease;
}
.hero-frame:hover{transform:rotate(0deg) scale(1.01); box-shadow:0 30px 64px rgba(15,23,42,.18);}
.hero-iframe{height:340px;}
.hero-live-badge{
  display:inline-flex; align-items:center; gap:8px; margin-top:18px;
  font-family:"Gothic A1"; font-size:.82rem; font-weight:700; color:var(--ink-soft);
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr; gap:36px;}
  .hero-frame{transform:none;}
}
@media (max-width:480px){ .hero-iframe{height:260px;} }

.cta-row{display:flex; flex-wrap:wrap; gap:10px;}
.btn{
  display:inline-flex; align-items:center; gap:6px; font-family:"Gothic A1"; font-weight:700; font-size:.92rem;
  border-radius:var(--r-sm); padding:12px 22px; cursor:pointer; border:1px solid transparent; transition:filter .15s ease, transform .1s ease;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--accent); color:#fff; box-shadow:var(--shadow-pop);}
.btn-primary:hover{filter:brightness(1.06);}
.btn-ghost{background:var(--card); color:var(--ink); border-color:var(--line);}
.btn-ghost:hover{border-color:var(--accent);}

/* ================= shared section chrome ================= */
section{padding:72px 0;}
.section-eyebrow{font-family:"Gothic A1"; font-size:.78rem; font-weight:700; letter-spacing:-.005em; color:var(--accent-ink); margin:0 0 12px;}
.section-title{font-family:"Gothic A1"; font-size:clamp(1.6rem,3.6vw,2.05rem); font-weight:900; letter-spacing:-.02em; margin:0 0 14px;}
.section-lede{color:var(--ink-soft); font-size:1rem; line-height:1.75; max-width:42em; margin:0 0 36px;}

/* ================= gallery: filters ================= */
.filter-row{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px;}
.filter-chip{
  font-family:"Gothic A1"; font-size:.84rem; font-weight:700; color:var(--ink-soft);
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-pill); padding:9px 18px;
  cursor:pointer; transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.filter-chip.active{color:#fff; background:var(--accent); border-color:var(--accent);}

/* ================= gallery: project cards ================= */
.project-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px;}
.project-card{
  border-radius:var(--r-lg); overflow:hidden; cursor:pointer; border:1px solid var(--line);
  background:var(--card); box-shadow:var(--shadow-card);
  transition:transform .2s ease, box-shadow .2s ease;
}
.project-card:hover{transform:translateY(-4px); box-shadow:0 16px 32px rgba(15,23,42,.1);}
.card-cover{
  position:relative; aspect-ratio:16/10; display:flex; align-items:flex-end; padding:20px;
  background:var(--accent-soft); overflow:hidden;
}
.card-cover-name{position:relative; z-index:1; font-family:"Gothic A1"; font-size:1.4rem; font-weight:900; letter-spacing:-.02em; color:var(--accent-ink);}
.live-badge{
  position:absolute; top:14px; right:14px; z-index:1; display:flex; align-items:center; gap:6px;
  font-family:"IBM Plex Mono"; font-size:.68rem; font-weight:600; color:var(--ink);
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-pill); padding:5px 11px;
}
.live-dot{width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 0 rgba(49,130,246,.5); animation:pulse 1.8s infinite;}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(49,130,246,.45);}
  70%{box-shadow:0 0 0 8px rgba(49,130,246,0);}
  100%{box-shadow:0 0 0 0 rgba(49,130,246,0);}
}
.card-body{padding:20px;}
.card-year{font-family:"IBM Plex Mono"; font-size:.72rem; color:var(--ink-faint); margin-bottom:8px;}
.card-tagline{font-size:.92rem; color:var(--ink-soft); line-height:1.65; margin:0 0 14px;}
.card-tags{display:flex; flex-wrap:wrap; gap:6px;}
.card-tag{font-family:"Gothic A1"; font-size:.72rem; font-weight:700; color:var(--accent-ink); background:var(--accent-soft); border-radius:var(--r-pill); padding:4px 11px;}

/* ================= modal ================= */
.modal-backdrop{
  position:fixed; inset:0; z-index:100; background:rgba(15,23,42,.5);
  display:flex; align-items:flex-start; justify-content:center; padding:5vh 16px;
}
.modal-backdrop[hidden]{display:none;}
.modal{
  position:relative; width:100%; max-width:900px; max-height:90vh;
  background:var(--paper); border-radius:var(--r-lg); box-shadow:0 24px 64px rgba(0,0,0,.25);
  overflow:hidden; display:flex; flex-direction:column;
}
.modal-scroll{overflow-y:auto; padding:40px 40px 56px;}
.modal-close{
  position:absolute; top:18px; right:18px; z-index:5; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--line); background:var(--card); color:var(--ink); font-size:1rem; cursor:pointer;
}
@media (max-width:640px){ .modal-scroll{padding:30px 20px 40px;} }

/* ================= project detail (inside modal) ================= */
.browser-frame{
  border-radius:var(--r-md); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-card);
  margin-bottom:32px; background:var(--card);
}
.browser-bar{display:flex; align-items:center; gap:10px; padding:12px 16px; background:var(--paper); border-bottom:1px solid var(--line);}
.dot{width:10px; height:10px; border-radius:50%; display:inline-block;}
.dot.r{background:#FF5F57;} .dot.y{background:#FEBC2E;} .dot.g{background:#28C840;}
.browser-url{
  margin-left:8px; font-family:"IBM Plex Mono"; font-size:.76rem; color:var(--ink-faint);
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-pill); padding:4px 14px; flex:1; max-width:320px;
}
.browser-iframe{width:100%; height:520px; border:none; display:block; background:var(--paper);}
@media (max-width:640px){ .browser-iframe{height:400px;} }

.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;}
.stat-tile{background:var(--card); padding:20px 14px; text-align:center;}
.stat-n{font-size:1.5rem; font-weight:700; color:var(--ink);}
.stat-null .stat-n{color:var(--null);}
.stat-l{font-family:"Gothic A1"; font-size:.74rem; color:var(--ink-faint); margin-top:6px; font-weight:600;}

.pivot-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.pivot-card{border-radius:var(--r-md); padding:22px 20px; background:var(--card); border:1px solid var(--line);}
.pivot-n{font-family:"IBM Plex Mono"; font-size:.95rem; font-weight:700; color:var(--accent-ink); margin-bottom:12px; opacity:.75;}
.pivot-card h3{font-family:"Gothic A1"; font-size:1rem; font-weight:800; letter-spacing:-.008em; margin:0 0 8px; line-height:1.4;}
.pivot-card p{font-size:.88rem; color:var(--ink-soft); margin:0; line-height:1.7;}

/* ================= skills ================= */
.skill-grid{display:flex; flex-wrap:wrap; gap:10px;}
.skill-chip{
  font-family:"Gothic A1"; font-size:.86rem; font-weight:700; color:var(--ink);
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-pill); padding:10px 18px;
}

/* ================= footer ================= */
.site-footer{border-top:1px solid var(--line); padding:32px 0;}
.footer-inner{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px;}
.footer-brand{font-family:"Gothic A1"; font-weight:800; letter-spacing:-.01em;}
.footer-links{display:flex; flex-wrap:wrap; gap:20px;}
.footer-links a{font-size:.88rem; color:var(--ink-soft); font-weight:600;}
.footer-links a:hover{color:var(--accent-ink);}
.footer-meta{margin:4px 0 0; font-size:.8rem; color:var(--ink-faint);}
.footer-meta a{color:var(--ink-faint); font-weight:600;}
.footer-meta a:hover{color:var(--accent-ink);}
.footer-link-btn{
  font-family:"Gothic A1"; font-size:.88rem; font-weight:600; color:var(--ink-soft);
  background:none; border:none; cursor:pointer; padding:0;
}
.footer-link-btn:hover{color:var(--accent-ink);}

.theme-toggle{
  position:fixed; right:20px; bottom:20px; z-index:40;
  width:46px; height:46px; border-radius:50%; border:1px solid var(--line);
  background:var(--card); box-shadow:var(--shadow-card); font-size:1.15rem; cursor:pointer;
}
.theme-toggle:hover{border-color:var(--accent);}

@media (max-width:760px){
  .stat-grid{grid-template-columns:repeat(2,1fr);}
  .pivot-grid{grid-template-columns:1fr;}
}

/* ================= scroll reveal ================= */
.reveal-init{opacity:0; transform:translateY(24px); transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);}
.reveal-visible{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){
  .reveal-init{opacity:1; transform:none; transition:none;}
}