/* ══════════════════════════════════════
   Unity 2D Platformer Tutorial Site
   Aesthetic: Retro-pixel meets modern
   ══════════════════════════════════════ */
:root{
  --bg:#0a0c10;--bg2:#0f1218;--bg3:#151a24;--sf:#1a2030;--sf2:#222840;
  --bd:#252e44;--bd2:#334060;--tx:#bfc8dc;--tx2:#7d8aa4;--tx3:#4e5a74;
  --hd:#e4e9f4;--ac:#5ce0d8;--ac2:#3dd6a8;--acg:rgba(92,224,216,.1);
  --red:#ff6b6b;--org:#ffb347;--grn:#6bcb77;--ylw:#ffd93d;--prp:#b39ddb;
  --cyan:#4dd0e1;--gray:#78909c;
  --sbw:270px;--tbh:52px;
  --body:'Noto Sans KR',sans-serif;--mono:'Fira Code',monospace;--pixel:'Silkscreen',cursive;
  --r:8px;--rs:5px;
}
[data-theme="light"]{
  --bg:#f2f4f7;--bg2:#e8ecf0;--bg3:#dde2e8;--sf:#fff;--sf2:#f0f2f6;
  --bd:#cdd4de;--bd2:#b8c2d0;--tx:#2a3040;--tx2:#5a6480;--tx3:#8892a8;
  --hd:#161c2c;--ac:#0d8078;--ac2:#06a080;--acg:rgba(13,128,120,.06);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--bg);color:var(--tx);line-height:1.72;overflow:hidden;height:100vh;display:flex}
a{color:var(--ac);text-decoration:none}a:hover{color:var(--ac2);text-decoration:underline}
::selection{background:var(--ac);color:var(--bg)}
img{max-width:100%;display:block}

/* ═══ SIDEBAR ═══ */
.sidebar{width:var(--sbw);height:100vh;background:var(--bg2);border-right:1px solid var(--bd);display:flex;flex-direction:column;flex-shrink:0;z-index:100;transition:transform .3s ease}
.sidebar-header{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--bd)}
.logo{font-family:var(--pixel);font-size:15px;color:var(--ac);letter-spacing:1px}
.logo-pixel{display:inline-block;animation:blink 1s step-end infinite;color:var(--grn)}
@keyframes blink{50%{opacity:0}}
.sidebar-close{display:none;margin-left:auto;background:none;border:none;color:var(--tx3);font-size:22px;cursor:pointer}
.search-wrap{padding:10px 14px;border-bottom:1px solid var(--bd)}
.search-wrap input{width:100%;padding:7px 11px;background:var(--bg3);border:1px solid var(--bd);border-radius:var(--rs);color:var(--tx);font-size:12.5px;font-family:var(--body);outline:none}
.search-wrap input:focus{border-color:var(--ac)}
.search-wrap input::placeholder{color:var(--tx3)}
.nav-list{list-style:none;overflow-y:auto;flex:1;padding:6px 0}
.nav-list::-webkit-scrollbar{width:3px}.nav-list::-webkit-scrollbar-thumb{background:var(--bd2);border-radius:3px}
.nav-part{display:block;padding:10px 16px 4px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--tx3);font-family:var(--pixel)}
.nav-link{display:block;padding:5px 16px 5px 24px;font-size:13px;color:var(--tx2);cursor:pointer;transition:.15s;border-left:2px solid transparent}
.nav-link:hover{color:var(--tx);background:var(--acg);text-decoration:none}
.nav-link.active{color:var(--ac);border-left-color:var(--ac);background:var(--acg)}
.sidebar-foot{padding:12px 16px;border-top:1px solid var(--bd)}
.phimir-link{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;background:linear-gradient(135deg,#1a237e,#311b92);border-radius:16px;font-size:11.5px;font-weight:600;color:#e8eaf6;transition:transform .2s}
.phimir-link:hover{transform:scale(1.03);text-decoration:none;color:#fff}

/* ═══ MAIN ═══ */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden}
.topbar{height:var(--tbh);display:flex;align-items:center;padding:0 20px;gap:14px;border-bottom:1px solid var(--bd);background:var(--bg2);flex-shrink:0}
.hamburger{display:none;flex-direction:column;gap:3.5px;background:none;border:none;cursor:pointer;padding:3px}
.hamburger span{display:block;width:18px;height:2px;background:var(--tx2);border-radius:2px}
.crumb{font-size:12.5px;color:var(--tx3);flex:1;font-family:var(--pixel)}
.topbar-r{display:flex;align-items:center;gap:10px}
.theme-btn{background:none;border:none;font-size:16px;cursor:pointer;filter:grayscale(.5);transition:.2s}.theme-btn:hover{filter:none}
.pct{font-family:var(--mono);font-size:11px;padding:2px 8px;background:var(--sf);border:1px solid var(--bd);border-radius:10px;color:var(--ac)}
.scroll{flex:1;overflow-y:auto;scroll-behavior:smooth}
.scroll::-webkit-scrollbar{width:5px}.scroll::-webkit-scrollbar-thumb{background:var(--bd2);border-radius:5px}

/* ═══ HERO ═══ */
.hero{position:relative;min-height:82vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:60px 24px;overflow:hidden;
  background:radial-gradient(ellipse at 40% 40%,rgba(92,224,216,.06),transparent 55%),
             radial-gradient(ellipse at 80% 70%,rgba(107,203,119,.04),transparent 50%)}
.hero-scanlines{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.04) 2px,rgba(0,0,0,.04) 4px);pointer-events:none;z-index:1}
.hero-inner{position:relative;z-index:2}
.hero-sprite{margin:0 auto 28px;max-width:380px;image-rendering:pixelated;animation:float 3s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.hero-badge{display:inline-block;padding:3px 14px;background:var(--sf);border:1px solid var(--ac);border-radius:16px;font-family:var(--pixel);font-size:11px;color:var(--ac);margin-bottom:20px;animation:fadeUp .5s ease both}
.hero-t1{font-family:var(--pixel);font-size:clamp(30px,6vw,56px);color:var(--hd);line-height:1.15;margin-bottom:8px;animation:fadeUp .5s ease .1s both}
.hero-t2{font-size:clamp(18px,3vw,26px);font-weight:700;color:var(--ac);margin-bottom:10px;animation:fadeUp .5s ease .2s both}
.hero-sub{font-size:14px;color:var(--tx2);margin-bottom:28px;animation:fadeUp .5s ease .3s both}
.hero-tags{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:32px;animation:fadeUp .5s ease .35s both}
.hero-tags span{padding:4px 12px;background:var(--sf);border:1px solid var(--bd);border-radius:14px;font-size:12px;color:var(--tx2);font-family:var(--mono)}
.hero-cta{display:inline-block;padding:12px 30px;background:linear-gradient(135deg,var(--ac),var(--ac2));color:var(--bg)!important;font-weight:700;font-size:14px;font-family:var(--pixel);border-radius:6px;transition:transform .2s,box-shadow .2s;animation:fadeUp .5s ease .4s both}
.hero-cta:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(92,224,216,.25);text-decoration:none}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* ═══ PARTS / CHAPTERS ═══ */
.part{max-width:860px;margin:0 auto;padding:56px 24px 36px}
.part-head{display:flex;align-items:baseline;gap:14px;margin-bottom:36px;padding-bottom:12px;border-bottom:2px solid var(--ac)}
.pn{font-family:var(--pixel);font-size:40px;color:var(--ac);opacity:.35;line-height:1}
.part-head h2{font-size:26px;font-weight:800;color:var(--hd)}
.ch{margin-bottom:48px;padding:28px;background:var(--sf);border:1px solid var(--bd);border-radius:var(--r)}
.ch h3{display:flex;align-items:center;gap:12px;font-size:22px;font-weight:800;color:var(--hd);margin-bottom:18px}
.ch h3 em{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;background:var(--ac);color:var(--bg);font-family:var(--pixel);font-size:13px;font-style:normal;border-radius:6px;flex-shrink:0}
.ch h4{font-size:15.5px;font-weight:700;color:var(--hd);margin:24px 0 12px;padding-left:10px;border-left:3px solid var(--ac)}
.ch p{margin-bottom:12px;font-size:14.5px}
.ch ul,.ch ol{padding-left:22px;margin-bottom:14px;font-size:14.5px}
.ch li{margin-bottom:5px}

/* ─ CODE ─ */
code{font-family:var(--mono);font-size:.85em;padding:1px 6px;background:var(--bg3);border:1px solid var(--bd);border-radius:3px;color:var(--ac)}
pre{margin:14px 0;border-radius:var(--rs);overflow-x:auto;border:1px solid var(--bd);background:var(--bg)!important}
pre code{display:block;padding:16px 18px;background:none!important;border:none!important;font-size:12.5px;line-height:1.75;color:var(--tx);white-space:pre}
.kw{color:var(--prp)}.tp{color:var(--cyan)}.st{color:var(--grn)}.cm{color:var(--tx3)}

/* ─ TABLES ─ */
table{width:100%;border-collapse:collapse;font-size:13.5px;margin:14px 0}
thead th{background:var(--sf2);padding:9px 12px;text-align:left;font-weight:700;color:var(--hd);border-bottom:2px solid var(--ac);font-size:12px;text-transform:uppercase;letter-spacing:.4px}
tbody td{padding:9px 12px;border-bottom:1px solid var(--bd);vertical-align:top}
tbody tr:hover{background:var(--acg)}
kbd{display:inline-block;padding:1px 7px;background:var(--sf2);border:1px solid var(--bd2);border-radius:3px;font-family:var(--mono);font-size:11.5px;color:var(--hd);box-shadow:0 1px 0 var(--bd)}

/* ─ CALLOUTS ─ */
.callout{padding:14px 18px;border-radius:var(--rs);margin:16px 0;border-left:4px solid;font-size:14px}
.callout.info{background:rgba(92,224,216,.05);border-color:var(--ac)}
.callout.warn{background:rgba(255,213,61,.05);border-color:var(--ylw)}

/* ─ CHECKLIST ─ */
.checklist{display:flex;flex-direction:column;gap:6px;margin:12px 0}
.checklist label{display:flex;align-items:center;gap:9px;padding:9px 12px;background:var(--bg3);border:1px solid var(--bd);border-radius:var(--rs);cursor:pointer;font-size:13.5px;transition:.15s}
.checklist label:hover{border-color:var(--ac)}
.checklist input[type="checkbox"]{accent-color:var(--ac);width:15px;height:15px}

/* ─ SPRITE CARDS ─ */
.sprite-card{margin:20px 0;padding:20px;background:var(--bg3);border:1px solid var(--bd);border-radius:var(--r);transition:border-color .2s}
.sprite-card:hover{border-color:var(--ac)}
.sprite-label{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;color:var(--hd);margin-bottom:12px}
.sprite-tag{display:inline-block;padding:2px 10px;border-radius:10px;font-size:10.5px;font-weight:700;font-family:var(--pixel);letter-spacing:.5px;background:var(--ac);color:var(--bg)}
.tag-green{background:var(--grn)}.tag-cyan{background:var(--cyan);color:var(--bg)}
.tag-red{background:var(--red);color:#fff}.tag-orange{background:var(--org);color:var(--bg)}
.tag-gray{background:var(--gray);color:#fff}.tag-purple{background:var(--prp);color:var(--bg)}
.sprite-img{border-radius:6px;background:#000;padding:4px;image-rendering:pixelated;margin-bottom:10px}
.sprite-info{font-family:var(--mono);font-size:12.5px;color:var(--tx2);margin-bottom:8px}
.sprite-card>p:last-child{margin:0;font-size:13.5px;color:var(--tx2)}

/* ─ BADGES ─ */
.badge-yes{background:rgba(107,203,119,.15);color:var(--grn);padding:2px 8px;border-radius:8px;font-size:12px;font-weight:700}
.badge-no{background:rgba(255,107,107,.1);color:var(--red);padding:2px 8px;border-radius:8px;font-size:12px;font-weight:700}

/* ─ STATE GRID ─ */
.state-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin:16px 0}
.state-node{padding:14px 10px;text-align:center;background:var(--bg3);border:2px solid var(--bd);border-radius:var(--r);font-size:14px;font-weight:700;color:var(--hd);transition:.2s}
.state-node small{display:block;font-size:11px;font-weight:400;color:var(--tx3);margin-top:3px}
.state-default{border-color:var(--ac);background:var(--acg)}
.state-air{border-color:var(--cyan)}.state-atk{border-color:var(--red)}.state-hurt{border-color:var(--org)}.state-die{border-color:var(--gray)}

/* ─ CTA BTN ─ */
.btn-cta{display:inline-block;padding:10px 24px;background:linear-gradient(135deg,var(--ac),var(--ac2));color:var(--bg)!important;font-weight:700;font-size:13px;border-radius:6px;margin-top:12px;transition:transform .2s,box-shadow .2s}
.btn-cta:hover{transform:translateY(-2px);box-shadow:0 5px 20px rgba(92,224,216,.2);text-decoration:none}

/* ─ FOOTER ─ */
.site-foot{padding:36px 24px;text-align:center;border-top:1px solid var(--bd);background:var(--bg2)}
.site-foot p{font-size:13px;color:var(--tx2);margin-bottom:4px}.foot-sub{font-size:11.5px;color:var(--tx3)}

/* ═══ RESPONSIVE ═══ */
@media(max-width:860px){
  .sidebar{position:fixed;top:0;left:0;transform:translateX(-100%);box-shadow:4px 0 30px rgba(0,0,0,.4)}
  .sidebar.open{transform:translateX(0)}.sidebar-close{display:block}.hamburger{display:flex}
  .part{padding:36px 16px 28px}.ch{padding:20px 16px}
}
@media(max-width:480px){.state-grid{grid-template-columns:repeat(2,1fr)}}