/* 테토남 랩 — 공통 스타일.
   팔레트: 차가운 종이 바탕 + 계측기 틸(물리) + 자두(비서).
   서체: Gowun Batang(표제) / IBM Plex Sans KR(본문) / IBM Plex Mono(수치) */

:root{
  --bg:#f6f8f7; --panel:#ffffff; --panel2:#f0f3f2;
  --ink:#13171a; --ink2:#4b565b; --ink3:#848f95;
  --rule:#dfe5e3; --rule2:#eceff0;
  --teal:#0a6b63; --teal-soft:#e2f0ee;
  --plum:#6b3f89; --plum-soft:#efe8f5;
  --warn:#b0531d;
  --shadow:0 1px 2px rgba(16,22,24,.05), 0 10px 28px -16px rgba(16,22,24,.22);
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --bg:#0d1113; --panel:#151a1d; --panel2:#1b2226;
  --ink:#e7ecea; --ink2:#a3aeb2; --ink3:#6e797e;
  --rule:#242d31; --rule2:#1d2528;
  --teal:#3fc3b6; --teal-soft:#13272a;
  --plum:#b58adb; --plum-soft:#1f1a2a;
  --warn:#e0945c;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 12px 32px -18px rgba(0,0,0,.8);
}}
:root[data-theme="dark"]{
  --bg:#0d1113; --panel:#151a1d; --panel2:#1b2226;
  --ink:#e7ecea; --ink2:#a3aeb2; --ink3:#6e797e;
  --rule:#242d31; --rule2:#1d2528;
  --teal:#3fc3b6; --teal-soft:#13272a;
  --plum:#b58adb; --plum-soft:#1f1a2a;
  --warn:#e0945c;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 12px 32px -18px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
body{
  background:var(--bg); color:var(--ink);
  font-family:'IBM Plex Sans KR',ui-sans-serif,system-ui,-apple-system,'Apple SD Gothic Neo',sans-serif;
  line-height:1.68; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:900px;margin:0 auto;padding-block:30px 72px;padding-left:20px;padding-right:20px}
@media(max-width:560px){.wrap{padding-block:22px 52px;padding-left:16px;padding-right:16px}}

a{color:inherit}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}

/* ── 머리말 ── */
.top{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:baseline;
  padding-bottom:14px;border-bottom:1px solid var(--rule);margin-bottom:34px}
.brand{font-family:'Gowun Batang',Georgia,serif;font-weight:700;font-size:17px;
  letter-spacing:.01em;text-decoration:none}
.brand span{color:var(--teal)}
.navlinks{margin-left:auto;display:flex;gap:16px;
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.04em}
.navlinks a{color:var(--ink3);text-decoration:none}
.navlinks a:hover,.navlinks a[aria-current]{color:var(--ink)}

/* ── 글자 ── */
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink3);margin-bottom:12px}
h1{font-family:'Gowun Batang',Georgia,serif;font-weight:700;
  font-size:clamp(27px,4.4vw,41px);line-height:1.26;letter-spacing:-.01em;
  margin:0 0 16px;text-wrap:balance;max-width:22ch}
h2{font-family:'Gowun Batang',Georgia,serif;font-weight:700;
  font-size:clamp(19px,2.4vw,24px);line-height:1.4;margin:0 0 12px;letter-spacing:-.005em}
h3{font-size:14.5px;font-weight:600;margin:0 0 6px;letter-spacing:-.005em}
.lede{font-size:clamp(15px,1.7vw,17px);color:var(--ink2);max-width:60ch;margin:0 0 30px}
.lede b{color:var(--ink);font-weight:600}
p{max-width:64ch}

section{margin-top:52px}
.sechead{display:flex;align-items:baseline;gap:12px;margin-bottom:20px;
  padding-bottom:9px;border-bottom:1px solid var(--rule)}
.sechead h2{margin:0}
.sechead .tag{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}

/* ── 방(프로젝트) ── */
.rooms{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.room{background:var(--panel);border:1px solid var(--rule);border-radius:12px;
  padding:24px 24px 22px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px;
  text-decoration:none;color:inherit;transition:border-color .12s,transform .12s}
.room:hover{border-color:var(--ink3);transform:translateY(-1px)}
.room .kicker{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase}
.room.phys .kicker{color:var(--teal)}
.room.asst .kicker{color:var(--plum)}
.room h2{margin:0}
.room p{margin:0;font-size:14.5px;color:var(--ink2);max-width:none}
.room .state{margin-top:auto;padding-top:14px;border-top:1px solid var(--rule2);
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--ink3)}

/* ── 열려 있는 창 목록 ── */
.doors{display:flex;flex-direction:column;gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:12px;overflow:hidden}
.door{display:grid;grid-template-columns:auto 1fr auto;gap:4px 16px;align-items:center;
  background:var(--panel);padding:17px 20px;text-decoration:none;transition:background .12s}
.door:hover{background:var(--panel2)}
.door .n{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--ink3);
  align-self:start;padding-top:3px}
.door .t{font-weight:600;font-size:15px}
.door .d{grid-column:2;font-size:13.5px;color:var(--ink2);line-height:1.55}
.door .go{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;
  color:var(--teal);white-space:nowrap}
.door.soon{pointer-events:none}
.door.soon .t,.door.soon .d{color:var(--ink3)}
.door.soon .go{color:var(--ink3)}
@media(max-width:520px){
  .door{grid-template-columns:1fr auto}
  .door .n{display:none}
  .door .d{grid-column:1/-1}
}

/* ── 광고 자리 ── */
.adslot{margin-top:52px;min-height:0}
.adslot[hidden]{display:none!important}
.adslot .adlabel{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink3);margin-bottom:6px}

/* ── 메모/각주 ── */
.notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.note{border-left:2px solid var(--rule);padding:2px 0 2px 15px}
.note p{margin:0;font-size:13.5px;color:var(--ink2);line-height:1.62;max-width:none}

.callout{background:var(--teal-soft);border:1px solid var(--rule);border-radius:10px;
  padding:18px 20px;font-size:14.5px;color:var(--ink2)}
.callout b{color:var(--ink)}
.callout.plum{background:var(--plum-soft)}

.btn{display:inline-block;appearance:none;border:0;cursor:pointer;text-decoration:none;
  background:var(--ink);color:var(--bg);border-radius:8px;padding:11px 20px;
  font:600 13.5px/1.2 'IBM Plex Sans KR',sans-serif}
.btn:hover{opacity:.87}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--rule)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

footer{margin-top:64px;padding-top:18px;border-top:1px solid var(--rule);
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--ink3);line-height:1.9}
footer a{color:var(--ink3)}