/* openchair.tech — structural styles only (design pass comes later). */
:root { --ink:#1a1a1a; --muted:#6b6b6b; --line:#e5e2dc; --bg:#faf9f6; --maxw:760px; }
* { box-sizing:border-box }
html { -webkit-text-size-adjust:100% }
body { margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Noto Sans KR",Pretendard,Roboto,sans-serif; }
a { color:inherit }
main { max-width:var(--maxw); margin:0 auto; padding:24px 20px 96px }
header.top { display:flex; align-items:center; gap:16px; padding:12px 20px; border-bottom:1px solid var(--line); flex-wrap:wrap }
header.top .brand { font-weight:700; text-decoration:none }
header.top nav.primary { display:flex; gap:14px; align-items:center; flex-wrap:wrap; font-size:14px }
header.top nav.primary a[aria-current] { text-decoration:none; font-weight:600 }
header.top .account { margin-left:auto; font-size:14px }
.account-menu { position:relative; display:inline-block }
.account-menu > summary { list-style:none; cursor:pointer }
.account-menu > summary::-webkit-details-marker,
.account-menu > summary::marker { display:none; content:"" }
.account-menu .dropdown {
  display:none; position:absolute; right:0; top:calc(100% + 8px); z-index:10;
  background:#fff; border:1px solid var(--line); border-radius:8px; padding:6px; min-width:120px;
  box-shadow:0 4px 16px rgba(0,0,0,.08);
}
.account-menu .dropdown .handle { display:block; padding:2px 10px 6px; margin-bottom:4px; border-bottom:1px solid var(--line); font-size:12px; color:var(--muted) }
.account-menu .dropdown a { display:block; padding:6px 10px; border-radius:4px; text-decoration:none; font-size:13px }
.account-menu .dropdown a:hover { background:var(--bg) }
.account-menu[open] .dropdown, .account-menu:hover .dropdown { display:block }
.who { display:inline-flex; align-items:center; gap:6px }
.avatar { width:24px; height:24px; border-radius:50%; object-fit:cover; vertical-align:middle }
.avatar-fallback { display:inline-flex; align-items:center; justify-content:center; background:#ddd; font-size:12px }
footer.foot { padding:24px 20px; border-top:1px solid var(--line); font-size:13px; color:var(--muted) }
.muted { color:var(--muted) }
.badge { font-size:11px; padding:1px 6px; border:1px solid var(--ink); border-radius:999px; margin-right:6px }
.badge.draft { border-style:dashed; color:var(--muted) }
.meta { font-size:13px; color:var(--muted); display:flex; align-items:center; gap:6px; flex-wrap:wrap }
h1 { font-size:28px; line-height:1.25; letter-spacing:-.02em; margin:24px 0 12px }
h2 { font-size:20px; margin:32px 0 8px }
.list-head { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap }
.list-head h1 { margin:0 }
.btn { display:inline-block; padding:8px 16px; border:1px solid var(--ink); border-radius:6px; text-decoration:none; font-size:14px; white-space:nowrap }
.btn:hover { background:var(--ink); color:var(--bg) }

/* landing: full-viewport screens with generous whitespace */
main.wide { max-width:none; padding:0 }
.screen { min-height:100vh; min-height:100lvh; display:flex; flex-direction:column; justify-content:center;
  padding:clamp(48px, 10vh, 120px) 24px; box-sizing:border-box }
.screen-inner { width:100%; max-width:var(--maxw); margin:0 auto }
.screen + .screen { border-top:1px solid var(--line) }
.hero { text-align:center }
.hero h1 { font-size:clamp(40px, 9vw, 72px); margin:0 0 24px; letter-spacing:-.03em }
.hero .lede { font-size:clamp(17px, 2.4vw, 22px); color:var(--ink); margin:0 auto; max-width:32em; line-height:1.5 }
.hero .lede.sub { font-size:clamp(14px, 1.8vw, 16px); color:var(--muted); margin-top:20px; line-height:1.7 }
.scroll-cue { display:inline-block; margin-top:56px; color:var(--muted); text-decoration:none; font-size:22px }
.screen .posts { margin-top:8px }
.screen h1 { margin-top:0 }
.more { margin:24px 0 0; font-size:14px }

/* 3D stage */
.stage { padding-left:0; padding-right:0; background:#111; color:#ccc; border-top:0 }
.stage-scroller { position:relative; height:min(70vh, 720px); height:min(70lvh, 720px); overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch; scrollbar-width:thin; background:#111; }
.stage-track { width:400%; height:1px }           /* scroll extent = yaw range */
.stage-canvas { position:sticky; left:0; top:0; display:block; width:100%; height:100%; margin-top:-1px }
.stage .hint { font-size:12px; text-align:center; margin:24px 24px 0; color:#888 }

/* lists */
ul.posts { list-style:none; padding:0; margin:0 }
ul.posts li { padding:12px 0; border-bottom:1px solid var(--line) }
.post-link { display:flex; gap:12px; align-items:center; text-decoration:none }
.post-link .thumb { width:96px; height:54px; object-fit:cover; border-radius:4px; flex:none }
.post-title { font-weight:600 }

/* post body (injected html) */
.body { margin:16px 0 }
.body img { max-width:100%; height:auto }
.body p > img:only-child { display:block; margin:16px 0 }
.body pre { overflow:auto; background:#f1efe9; padding:12px; border-radius:6px; font-size:13px }
.body code { font-size:.92em }
.body blockquote { margin:12px 0; padding-left:12px; border-left:3px solid var(--line); color:var(--muted) }
.body .table-wrap { overflow-x:auto }
.body table { border-collapse:collapse; font-size:14px }
.body th, .body td { border:1px solid var(--line); padding:4px 8px }
.yt { position:relative; aspect-ratio:16/9; margin:12px 0; background:#000 }
.yt iframe { position:absolute; inset:0; width:100%; height:100%; border:0 }

/* comments */
ul.thread, ul.replies { list-style:none; padding:0; margin:0 }
ul.replies { margin-left:20px; border-left:2px solid var(--line); padding-left:12px }
li.comment { padding:10px 0 }
.comment-body { white-space:pre-wrap; overflow-wrap:anywhere }
.comment-body.deleted { color:var(--muted); font-style:italic }
.actions { display:flex; gap:8px; margin-top:4px }
.actions button { font-size:12px; background:none; border:0; padding:0; color:var(--muted); cursor:pointer; text-decoration:underline }
form.comment-form { margin:8px 0 }
form.comment-form textarea { width:100%; font:inherit; padding:8px }

/* editor */
.editor label { display:block; margin:12px 0; font-size:13px; color:var(--muted) }
.editor input, .editor textarea, .editor select { display:block; width:100%; font:inherit; padding:8px; margin-top:4px; color:var(--ink) }
.editor textarea { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:14px }
.editor .actions { align-items:center }
.preview { border:1px dashed var(--line); padding:0 16px; margin-top:16px }