/* 글꼴 — 둘 다 SIL OFL 1.1 */
  @font-face{font-family:Galmuri11; font-weight:400; font-display:swap; src:url("/fonts/Galmuri11.woff2") format("woff2")}
  @font-face{font-family:SUIT; font-weight:400; font-display:swap; src:url("/fonts/SUIT-Regular.woff2") format("woff2")}
  @font-face{font-family:SUIT; font-weight:600; font-display:swap; src:url("/fonts/SUIT-SemiBold.woff2") format("woff2")}

  :root{
    /* DESIGN.md — 레트로 바탕화면 */
    --desk:#2c4a78;  --desk2:#22395e;            /* 바탕화면 (앱 스크린샷의 파란 바탕과 같은 계열) */
    --face:#e6e0d4;  --paper:#fbf9f4;            /* 창 테두리 면 / 창 안쪽 종이 */
    --hi:#ffffff;    --sh:#8c8475;  --edge:#1f1d1a;   /* 입체 테두리: 빛 · 그림자 · 바깥선 */
    --ink:#1b1a17;   --mut:#545049;              /* 글씨 (종이 위 7.6:1) */
    --pink:#b23a64;  --pink2:#962f53;            /* 주 버튼 · 강조 글씨 (A안 2026-10-30: 분홍은 포인트로만) */
    --title:linear-gradient(90deg, #2f2c29, #4a4540); --title-ink:#f4f0e9;   /* 앞에 있는 창 제목 표시줄: 따뜻한 먹색 */
    --idle:#d6cfc1;  --idle-ink:#3b3833;         /* 뒤에 있는 창 제목 */
    --select:#b23a64; --note:#fff1a8;            /* 선택한 줄 · 포스트잇 */
    --on-desk:#eef2f8;                           /* 바탕화면 위 글씨 (8.6:1) */
    --sans:SUIT,"Malgun Gothic",system-ui,sans-serif;
    --pixel:Galmuri11,"Malgun Gothic",monospace;
    --bevel-out: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--sh), 0 0 0 1px var(--edge);
    --bevel-in:  inset 1px 1px 0 var(--sh), inset -1px -1px 0 var(--hi), 0 0 0 1px var(--edge);
  }
  *{box-sizing:border-box; margin:0; padding:0}
  html{scroll-behavior:smooth; color-scheme:light; -webkit-tap-highlight-color:transparent}
  body{background:var(--desk); color:var(--ink); font-family:var(--sans); line-height:1.65;
       overflow-x:hidden; -webkit-font-smoothing:antialiased; word-break:keep-all; overflow-wrap:break-word;
       padding-bottom:56px;   /* 작업 표시줄 높이 */
       background-image:radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);   /* 8px 도트 격자 */
       background-size:8px 8px; background-attachment:fixed}
  ::selection{background:var(--pink); color:#fff}
  :focus-visible{outline:2px dotted var(--ink); outline-offset:2px}
  .tbar :focus-visible, .taskbar :focus-visible, .desk-icons :focus-visible{outline-color:#fff}
  a{color:inherit}
  h1,h2{text-wrap:balance}
  kbd{font-family:var(--pixel); font-size:11px; background:var(--face); box-shadow:var(--bevel-out); padding:1px 5px; margin:0 1px; white-space:nowrap}
  .skip{position:absolute; left:-9999px; top:0; background:var(--pink); color:#fff; padding:10px 16px; z-index:100}
  .skip:focus{left:0}
  .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .pix{display:block; flex:none}
  /* 레트로 스크롤바 */
  ::-webkit-scrollbar{width:16px; height:16px}
  ::-webkit-scrollbar-track{background:var(--face); background-image:radial-gradient(var(--sh) .6px, transparent .6px); background-size:2px 2px}
  ::-webkit-scrollbar-thumb{background:var(--face); box-shadow:var(--bevel-out)}

  /* ── 창 ─────────────────────────────────────────────── */
  .wrap{max-width:1040px; margin:0 auto; padding:0 20px}
  .win{background:var(--face); box-shadow:var(--bevel-out), 0 18px 40px rgba(8,18,36,.35); padding:3px; position:relative}
  .tbar{display:flex; align-items:center; justify-content:space-between; gap:8px; height:26px; padding:0 4px 0 8px;
        background:var(--idle); color:var(--idle-ink)}
  .win.active .tbar{background-color:#2f2c29; background-image:var(--title); color:var(--title-ink)}
  .ttl{font-family:var(--pixel); font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .tbtn{display:flex; gap:2px}
  .tbtn i{width:18px; height:16px; display:grid; place-items:center; background:var(--face); color:var(--ink);
          box-shadow:var(--bevel-out); font:11px/1 var(--pixel); font-style:normal}
  .menu{display:flex; gap:14px; padding:3px 8px; font-size:13px; color:var(--mut)}
  .menu span::first-letter{text-decoration:underline}
  .wbody{background:var(--paper); box-shadow:var(--bevel-in); padding:28px 30px; margin-top:3px}
  .win h2{font-size:28px; font-weight:600; letter-spacing:-.4px; line-height:1.3; margin-bottom:8px}
  .lead{color:var(--mut); font-size:15.5px; max-width:640px; margin-bottom:22px}

  /* ── 버튼 ─────────────────────────────────────────────── */
  .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:10px 20px;
       background:var(--face); color:var(--ink); box-shadow:var(--bevel-out); font:600 15px/1.2 var(--sans);
       text-decoration:none; border:0; cursor:pointer}
  .btn:active{box-shadow:var(--bevel-in); transform:translate(1px,1px)}
  .btn.primary{background:var(--pink); color:#fff; box-shadow:inset 1px 1px 0 #d77a99, inset -1px -1px 0 #6b1f3a, 0 0 0 1px var(--edge)}
  .btn.primary:hover{background:var(--pink2)}
  .btn:not(.primary):hover{background:#efeae0}
  .btn.big{min-height:52px; padding:14px 26px; font-size:16px}

  /* ── 바닥 글씨 (바탕화면 위) ───────────────────────────── */
  footer{color:var(--on-desk); font-size:13px; padding:20px 20px 30px; text-align:center}
  footer a{color:#fff; display:inline-block; padding:8px 2px; margin:-8px 0}
  footer .biz{margin-top:10px; font-size:12px; line-height:1.9; opacity:.92}

  /* ── 작업 표시줄 ───────────────────────────────────────── */
  .taskbar{position:fixed; left:0; right:0; bottom:0; height:48px; z-index:50; display:flex; align-items:center; gap:6px;
           padding:5px 6px; background:var(--face); box-shadow:inset 0 1px 0 var(--hi), 0 -1px 0 var(--edge)}
  .start{display:flex; align-items:center; gap:7px; height:36px; padding:0 12px 0 8px; font:600 14px var(--sans); text-decoration:none;
         background:var(--face); box-shadow:var(--bevel-out); color:var(--ink); white-space:nowrap}
  .start img{width:22px; height:22px}
  .tasks{display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; flex:1; min-width:0}
  .tasks::-webkit-scrollbar{display:none}
  .tasks a{display:flex; align-items:center; height:36px; padding:0 14px; font-size:13.5px; text-decoration:none; white-space:nowrap;
           background:var(--face); box-shadow:var(--bevel-out)}
  .tasks a:hover{background:#efeae0}
  .tasks a:active{box-shadow:var(--bevel-in)}
  .tray{display:flex; align-items:center; gap:10px; height:36px; padding:0 6px 0 10px; box-shadow:var(--bevel-in); white-space:nowrap}
  .tray .btn{min-height:28px; padding:4px 12px; font-size:13px}
  .clock{font:11px var(--pixel); min-width:52px; text-align:right}

  @media (max-width:720px){ .wrap{padding:0 12px} .wbody{padding:22px 18px} .tray .clock{display:none} .start span{display:none} }
  @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }