/* ============================================================
   SOOYOUNG SON DASHBOARD — modern dark-blue theme (shared look)
   ============================================================ */
:root{
  color-scheme: dark;
  --bg:#070B16; --bg-soft:#0A1020; --surface:#0E1627; --surface-2:#141E36;
  --line:#1E2A45; --line-2:#2A395C;
  --ink:#EAF0FB; --ink-2:#C2CDE4; --muted:#8A97B6; --faint:#5C6A8C;
  --acc:#4D8DFF; --acc-2:#38BDF8; --acc-3:#7C5CFF; --acc-bright:#8FB6FF;
  --acc-soft:rgba(77,141,255,.13); --acc-line:rgba(77,141,255,.32); --acc-ring:rgba(77,141,255,.40);
  --gold:#F8B62B; --gold-soft:rgba(248,182,43,.13); --gold-line:rgba(248,182,43,.32);
  --grad:linear-gradient(135deg,#4D8DFF 0%,#6E7BFF 55%,#7C5CFF 100%);
  --grad-text:linear-gradient(108deg,#8FB6FF 0%,#38BDF8 48%,#9C8BFF 100%);
  --r:14px; --r-md:18px; --r-lg:24px; --r-xl:30px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.35),0 2px 8px rgba(0,0,0,.28);
  --shadow:0 4px 14px rgba(0,0,0,.40),0 20px 48px -22px rgba(0,0,0,.65);
  --shadow-lg:0 10px 30px rgba(0,0,0,.45),0 50px 90px -34px rgba(0,0,0,.75);
  --sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --maxw:1080px;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ margin:0; font-family:var(--sans); background:var(--bg); color:var(--ink);
  line-height:1.7; letter-spacing:-0.01em; -webkit-font-smoothing:antialiased; overflow-x:hidden;
  word-break:keep-all; }
/* balanced headings + orphan-free body wrapping (parity with the guide page) */
.dhero h1, .projects__head h2, .cat__title, .proj h3{ text-wrap:balance; }
.dhero__lead, .proj p, .cat__desc, .dfooter p{ text-wrap:pretty; }
a{ color:var(--acc-bright); text-decoration:none; }
strong,b{ color:var(--ink); font-weight:700; }
@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; } html{ scroll-behavior:auto; } }

/* i18n */
html[data-lang="ko"] [lang="en"]{ display:none !important; }
html[data-lang="en"] [lang="ko"]{ display:none !important; }

.bg-mesh{ position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(58vw 48vw at 10% -8%, rgba(77,141,255,.22), transparent 60%),
    radial-gradient(52vw 50vw at 100% 4%, rgba(124,92,255,.18), transparent 58%),
    radial-gradient(48vw 44vw at 50% 112%, rgba(34,211,238,.10), transparent 62%); }

/* ── top bar ── */
.topbar{ position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between;
  padding:16px clamp(20px,5vw,48px); background:rgba(7,11,22,.7); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  padding-top:calc(16px + env(safe-area-inset-top)); }
.brand{ display:flex; align-items:center; gap:11px; color:var(--ink)!important; }
.brand__logo{ width:30px; height:30px; border-radius:9px; position:relative; background:var(--grad);
  box-shadow:0 0 18px rgba(77,141,255,.5), inset 0 1px 0 rgba(255,255,255,.35); }
.brand__logo::after{ content:""; position:absolute; inset:0; margin:auto; width:11px; height:11px;
  border:2.5px solid #fff; border-radius:4px; transform:rotate(45deg); }
.brand__name{ font-weight:800; font-size:1.02rem; letter-spacing:.02em; }
.brand__name small{ color:var(--muted); font-weight:700; font-size:.8rem; }
.langtog{ display:inline-flex; border:1px solid var(--line-2); border-radius:10px; overflow:hidden; background:var(--surface); }
.langtog button{ font:inherit; font-size:.78rem; font-weight:700; padding:7px 13px; background:transparent;
  color:var(--muted); border:none; cursor:pointer; transition:.15s; }
.langtog button[aria-pressed="true"]{ background:var(--acc-soft); color:var(--acc-bright); }

/* top nav (Home / Blog) */
.topnav{ display:flex; align-items:center; gap:2px; margin-left:auto; margin-right:8px; }
.topnav__link{ font-size:.86rem; font-weight:700; color:var(--muted)!important; padding:7px 12px; border-radius:9px;
  transition:color .15s, background .15s; }
.topnav__link.is-active{ color:var(--ink)!important; }
@media (hover:hover) and (pointer:fine){ .topnav__link:hover{ color:var(--ink)!important; background:var(--surface); } }
.topnav__link:active{ background:var(--surface-2); }
@media (max-width:560px){ .topnav{ margin-right:4px; } .topnav__link{ padding:7px 9px; font-size:.82rem; } }
@media (max-width:360px){ .topnav__link{ padding:6px 6px; font-size:.76rem; } }

/* ── layout ── */
.dash{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,48px) 80px; }

/* ── hero ── */
.dhero{ padding:clamp(56px,9vw,104px) 0 clamp(40px,6vw,64px); position:relative; }
.pill{ display:inline-flex; align-items:center; gap:9px; margin:0 0 24px; padding:7px 15px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line-2); box-shadow:var(--shadow-sm);
  font-size:.78rem; font-weight:600; color:var(--ink-2); }
.pill__dot{ width:8px; height:8px; border-radius:50%; background:var(--acc); box-shadow:0 0 0 4px var(--acc-soft); }
.dhero h1{ margin:0 0 20px; font-size:clamp(2.6rem,8vw,5rem); line-height:1.04; font-weight:800; letter-spacing:-0.04em; }
.dhero h1 .grad{ background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
.dhero__lead{ margin:0 0 26px; font-size:clamp(1.02rem,2.2vw,1.18rem); color:var(--ink-2); max-width:40em; }
.rainbow{ font-weight:800; white-space:nowrap;
  background-image:linear-gradient(90deg,#ff6b81,#ffb347,#ffe14d,#3ce88f,#4d8dff,#b07bff,#ff6b81);
  background-size:200% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 7px rgba(130,170,255,.4));
  animation:rainbow-flow 6s linear infinite; }
@keyframes rainbow-flow{ to{ background-position:200% center; } }
.dhero__meta{ display:flex; flex-wrap:wrap; gap:12px; }
.metacard{ display:flex; flex-direction:column; padding:13px 18px; border-radius:var(--r); background:var(--surface);
  border:1px solid var(--line); box-shadow:var(--shadow-sm); min-width:120px; position:relative; overflow:hidden; }
.metacard::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--grad); }
.metacard b{ font-size:1.4rem; font-weight:800; letter-spacing:-0.03em;
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
.metacard span{ font-size:.76rem; color:var(--muted); margin-top:2px; }

/* ── projects ── */
.projects{ margin-top:18px; }
.projects__head{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:20px; flex-wrap:wrap; }
.projects__head h2{ margin:0; font-size:clamp(1.5rem,3.4vw,2rem); font-weight:800; letter-spacing:-0.03em; }
.projects__head p{ margin:0; font-size:.9rem; color:var(--muted); }

/* ── category groups ── */
.cat{ margin-top:34px; }
.cat:first-of-type{ margin-top:8px; }
.cat__head{ display:flex; align-items:center; gap:11px; flex-wrap:wrap;
  margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--line); }
.cat__icon{ font-size:1.2rem; color:var(--acc-bright); }
.cat__title{ margin:0; font-size:1.1rem; font-weight:800; letter-spacing:-0.02em; }
.cat__count{ font-family:var(--mono); font-size:.66rem; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; padding:3px 10px; border-radius:999px;
  border:1px solid var(--line); color:var(--muted); background:var(--surface-2); }
.cat__count--live{ color:#46d6a4; background:rgba(70,214,164,.12); border-color:rgba(70,214,164,.3); }
.cat__count--live::before{ content:"●"; margin-right:5px; font-size:.7em; vertical-align:middle; }
.cat__count--soon{ color:var(--gold); background:var(--gold-soft); border-color:var(--gold-line); }
.cat__desc{ margin:0 0 0 auto; font-size:.84rem; color:var(--muted); }

.proj-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px; }
.proj{ display:flex; flex-direction:column; gap:12px; padding:24px; border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-sm); color:var(--ink)!important;
  position:relative; overflow:hidden; transition:transform .22s cubic-bezier(.2,.7,.2,1), border-color .22s, box-shadow .22s; }
.proj::before{ content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--grad); opacity:.0; transition:opacity .22s; }
.proj--live{ grid-column:1 / -1; }
.proj--live::before{ opacity:1; }
.proj--live{ background:linear-gradient(180deg, var(--acc-soft), var(--surface)); border-color:var(--acc-line); }
/* hover lift ONLY where a real pointer exists — never on touch, so a tap-and-scroll
   on phones/tablets can't leave the card stuck in its hover state */
@media (hover:hover) and (pointer:fine){
  .proj:hover{ transform:translateY(-5px); border-color:var(--acc-line);
    box-shadow:0 0 0 1px var(--acc-line), 0 22px 55px -20px rgba(77,141,255,.5); }
  .proj:hover::before{ opacity:1; }
  .proj:hover .proj__open{ gap:10px; }
}
.proj__top{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.proj__status{ font-size:.7rem; font-weight:800; letter-spacing:.04em; padding:4px 11px; border-radius:999px;
  background:var(--surface-2); color:var(--muted); border:1px solid var(--line); text-transform:uppercase; }
.proj__status--live{ color:#46d6a4; background:rgba(70,214,164,.12); border-color:rgba(70,214,164,.3); }
.proj__status--live::before{ content:"●"; margin-right:5px; font-size:.6em; vertical-align:middle; }
.proj__status--soon{ color:var(--gold); background:var(--gold-soft); border-color:var(--gold-line); }
.proj__tags{ margin-left:auto; font-family:var(--mono); font-size:.7rem; color:var(--faint); }
.proj__icon{ font-size:1.9rem; line-height:1; color:var(--acc-bright); }
.proj--soon .proj__icon{ color:var(--muted); }
.proj h3{ margin:0; font-size:1.28rem; font-weight:800; letter-spacing:-0.02em; }
.proj p{ margin:0; font-size:.92rem; color:var(--muted); flex:1 1 auto; }
.proj__open{ display:inline-flex; align-items:center; gap:6px; font-size:.9rem; font-weight:700; color:var(--acc-bright);
  transition:gap .2s; }
.proj--soon{ opacity:.72; }
.proj--soon, .proj--soon:hover{ transform:none; cursor:default; border-color:var(--line); box-shadow:var(--shadow-sm); }
.proj--soon::before{ background:var(--gold-soft); }

/* ── blog / updates (CMS-driven) ── */
.blog{ margin-top:46px; }
.blog__all{ font-size:.9rem; font-weight:700; color:var(--acc-bright); white-space:nowrap; }
.blog__list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }

/* shared post card (home "Updates" preview + blog list page) */
.postcard{ display:flex; flex-direction:column; gap:9px; padding:22px 24px; border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-sm); color:var(--ink)!important;
  transition:transform .22s cubic-bezier(.2,.7,.2,1), border-color .22s, box-shadow .22s; }
.postcard__date{ align-self:flex-start; font-family:var(--mono); font-size:.72rem; color:var(--acc-bright);
  background:var(--acc-soft); border:1px solid var(--acc-line); padding:2px 9px; border-radius:999px; }
.postcard__title{ font-size:1.16rem; font-weight:800; letter-spacing:-0.02em; line-height:1.3; word-break:keep-all; }
.postcard__excerpt{ font-size:.92rem; color:var(--muted); flex:1 1 auto; word-break:keep-all; text-wrap:pretty; }
.postcard__more{ font-size:.88rem; font-weight:700; color:var(--acc-bright); }
@media (hover:hover) and (pointer:fine){
  .postcard:hover{ transform:translateY(-4px); border-color:var(--acc-line);
    box-shadow:0 0 0 1px var(--acc-line), 0 22px 55px -24px rgba(77,141,255,.5); }
}
.postcard:active{ transform:scale(.99); transition-duration:.05s; }

.empty-state{ padding:48px 24px; text-align:center; color:var(--muted); font-size:.95rem;
  border:1px dashed var(--line-2); border-radius:var(--r-lg); }

/* ── blog list page (/blog) ── */
.bloghead{ padding:clamp(36px,7vw,72px) 0 26px; }
.bloghead__title{ margin:14px 0; font-size:clamp(2rem,6vw,3rem); font-weight:800; letter-spacing:-0.04em; line-height:1.05;
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
.bloghead__lead{ margin:0; font-size:clamp(1.02rem,2.2vw,1.16rem); color:var(--ink-2); max-width:42em; word-break:keep-all; text-wrap:pretty; }
.bloglist{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; padding-bottom:24px; }

/* ── single post page (/blog/<id>) ── */
.postpage{ max-width:720px; margin:0 auto; padding:clamp(26px,5vw,46px) 0 40px; }
.postpage__back{ display:inline-flex; font-size:.88rem; font-weight:700; color:var(--acc-bright); margin-bottom:18px; }
.postpage__meta{ margin-bottom:12px; }
.postpage__date{ font-family:var(--mono); font-size:.74rem; color:var(--acc-bright);
  background:var(--acc-soft); border:1px solid var(--acc-line); padding:3px 10px; border-radius:999px; }
.postpage__title{ margin:0 0 26px; font-size:clamp(1.9rem,5vw,2.6rem); font-weight:800; letter-spacing:-0.03em; line-height:1.18;
  word-break:keep-all; text-wrap:balance; }
.postpage__body{ font-size:1.05rem; line-height:1.85; color:var(--ink-2); word-break:keep-all; text-wrap:pretty; }
.postpage__body p{ margin:0 0 18px; }
.postpage__body h2, .postpage__body h3, .postpage__body h4{ color:var(--ink); letter-spacing:-0.02em; margin:32px 0 12px; line-height:1.3; }
.postpage__body h2{ font-size:1.5rem; } .postpage__body h3{ font-size:1.26rem; } .postpage__body h4{ font-size:1.1rem; }
.postpage__body ul{ margin:0 0 18px; padding-left:22px; }
.postpage__body li{ margin:5px 0; }
.postpage__body a{ color:var(--acc-bright); text-decoration:underline; text-underline-offset:3px; }
.postpage__body strong{ color:var(--ink); }
.postpage__body em{ color:var(--ink-2); font-style:italic; }
.postpage__body code{ font-family:var(--mono); font-size:.88em; background:var(--surface-2);
  border:1px solid var(--line); padding:1.5px 6px; border-radius:6px; color:#A8C8FF; white-space:nowrap; }
.postpage__foot{ margin-top:36px; padding-top:22px; border-top:1px solid var(--line); }
.btnlink{ display:inline-flex; align-items:center; gap:7px; font-weight:700; color:var(--acc-bright); }
.postpage--404{ text-align:center; max-width:520px; margin:0 auto; padding:clamp(56px,12vw,120px) 0; }
.postpage--404 h1{ margin:0 0 10px; font-size:clamp(1.6rem,5vw,2.1rem); font-weight:800; letter-spacing:-0.02em; }
.postpage--404 p{ margin:0 0 24px; color:var(--muted); }

@media (max-width:560px){
  .blog__list, .bloglist{ grid-template-columns:1fr; }
  .postcard{ padding:18px; }
}

/* ── footer ── */
.dfooter{ margin-top:64px; padding-top:28px; border-top:1px solid var(--line); }
.dfooter p{ margin:0 0 8px; font-size:.86rem; color:var(--muted); }
.dfooter .copy{ font-size:.8rem; color:var(--muted); }

/* ============================================================
   📱 MOBILE OPTIMIZATION — intuitive · modern · polished
   ============================================================ */
*{ -webkit-tap-highlight-color:rgba(77,141,255,.16); }
a, button{ touch-action:manipulation; }
/* touch press feedback — a quick, honest tap response instead of a lingering hover */
.proj--live:active{ transform:scale(.985); transition-duration:.05s; }
.langtog button:active{ transform:scale(.94); }
/* fixed top bar respects notches / safe areas */
.topbar{
  padding-left:calc(clamp(20px,5vw,48px) + env(safe-area-inset-left));
  padding-right:calc(clamp(20px,5vw,48px) + env(safe-area-inset-right));
}

@media (max-width:720px){
  .proj--live{ grid-column:span 1; }
  .proj-grid{ grid-template-columns:1fr; }
}

@media (max-width:560px){
  /* top bar: compact, keep the language toggle fully on-screen */
  .topbar{
    padding:11px 16px;
    padding-top:calc(11px + env(safe-area-inset-top));
    padding-left:calc(16px + env(safe-area-inset-left));
    padding-right:calc(16px + env(safe-area-inset-right));
  }
  .brand{ min-width:0; gap:9px; }
  .brand__logo{ width:28px; height:28px; }
  .brand__name{ font-size:.95rem; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .brand__name small{ display:none; }          /* drop the "DASHBOARD" subtitle in the bar (still in the hero) */
  .langtog{ flex:0 0 auto; }
  .langtog button{ padding:10px 14px; font-size:.8rem; }   /* roomier tap targets */

  /* hero: tighter rhythm, content arrives sooner */
  .dash{
    padding-left:max(18px, env(safe-area-inset-left));
    padding-right:max(18px, env(safe-area-inset-right));
    padding-bottom:56px;
  }
  .dhero{ padding:30px 0 34px; }
  .dhero h1{ font-size:clamp(2.3rem,11vw,3rem); margin-bottom:16px; }
  .pill{ margin-bottom:16px; }
  .dhero__lead{ font-size:1.02rem; margin-bottom:24px; }

  /* stats: three equal, compact cards on one row */
  .dhero__meta{ gap:8px; }
  .metacard{ flex:1 1 0; min-width:0; padding:12px 11px; }
  .metacard b{ font-size:1.15rem; }
  .metacard span{ font-size:.66rem; }

  /* projects */
  .projects__head{ margin-bottom:16px; }
  .proj{ padding:20px; }

  /* categories: keep header tidy, push the blurb to its own line */
  .cat{ margin-top:26px; }
  .cat__head{ gap:9px; }
  .cat__desc{ margin-left:0; flex-basis:100%; font-size:.8rem; }
}

@media (max-width:360px){
  .dhero h1{ font-size:2.1rem; }
  .metacard span{ font-size:.62rem; }
}