/* oratilo — 크림 지면 + 로고의 앰버 한 점.
   다크는 크림을 반전한 게 아니라 "따뜻한 어둠"으로 짝을 맞춘다(갈색쪽 near-black),
   그래야 두 테마가 같은 브랜드로 읽힌다. */
:root{
  --ground:#F3EEE2; --surface:#FBF8F1; --surface-2:#EBE4D4;
  --ink:#221E18; --ink-soft:#453E33; --muted:#6B6252; --faint:#9A9081;
  --amber:#8E5B0C; --amber-bright:#F5B01E; --amber-soft:#F0E3C6; --teal:#2E645C;
  --line:#DDD4C1; --line-soft:#E9E2D2;
  --shadow:0 1px 2px rgba(52,42,24,.07),0 8px 24px -12px rgba(52,42,24,.20);
  --sans:"Pretendard",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",ui-sans-serif,system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,"Cascadia Mono","Roboto Mono",monospace;
  --logo-img:url("/logo-light.png");
}
@media (prefers-color-scheme:dark){
  :root{
    --ground:#1A1713; --surface:#241F19; --surface-2:#2E2822;
    --ink:#EFE8DA; --ink-soft:#CDC3B1; --muted:#968B78; --faint:#726858;
    --amber:#F0B33C; --amber-bright:#F5B01E; --amber-soft:#3A2C13; --teal:#6FAFA3;
    --logo-img:url("/logo-dark.png");
    --line:#3A332B; --line-soft:#2E2821;
    --shadow:0 1px 2px rgba(0,0,0,.34),0 10px 30px -14px rgba(0,0,0,.62);
  }
}
:root[data-theme="dark"]{
  --ground:#1A1713; --surface:#241F19; --surface-2:#2E2822;
  --ink:#EFE8DA; --ink-soft:#CDC3B1; --muted:#968B78; --faint:#726858;
  --amber:#F0B33C; --amber-bright:#F5B01E; --amber-soft:#3A2C13; --teal:#6FAFA3;
    --logo-img:url("/logo-dark.png");
  --line:#3A332B; --line-soft:#2E2821;
  --shadow:0 1px 2px rgba(0,0,0,.34),0 10px 30px -14px rgba(0,0,0,.62);
}
:root[data-theme="light"]{
  --ground:#F3EEE2; --surface:#FBF8F1; --surface-2:#EBE4D4;
  --ink:#221E18; --ink-soft:#453E33; --muted:#6B6252; --faint:#9A9081;
  --amber:#8E5B0C; --amber-bright:#F5B01E; --amber-soft:#F0E3C6; --teal:#2E645C;
  --line:#DDD4C1; --line-soft:#E9E2D2;
  --shadow:0 1px 2px rgba(52,42,24,.07),0 8px 24px -12px rgba(52,42,24,.20);
  --logo-img:url("/logo-light.png");
}

*{box-sizing:border-box}
html{background:var(--ground)}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
:focus-visible{outline:2px solid var(--amber); outline-offset:2px; border-radius:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.top{position:sticky; top:0; z-index:20; background:var(--ground); border-bottom:1px solid var(--line)}
.top-in{max-width:1360px; margin:0 auto; padding:14px 24px; display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:11px; margin-right:auto}
/* 로고는 원본 락업(마크가 곧 'o')을 그대로 쓴다. 검은 워드마크는 다크 지면에서
   사라지므로 잉크색만 갈아끼운 두 변형을 토큰으로 스왑한다. */
.brand h1{
  margin:0; width:105px; height:24px;              /* 원본 비율 4.375:1 */
  background:var(--logo-img) no-repeat left center/contain;
}
.brand h1 span{
  position:absolute; width:1px; height:1px; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}
.brand .cnt{font-family:var(--mono); font-size:.6875rem; color:var(--muted); letter-spacing:.06em; font-variant-numeric:tabular-nums}
.tools{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.search{display:flex; align-items:center; gap:7px; background:var(--surface); border:1px solid var(--line); border-radius:7px; padding:6px 10px; min-width:230px}
.search svg{flex:none; opacity:.5}
.search input{border:0; background:transparent; color:var(--ink); font-family:var(--sans); font-size:.875rem; width:100%; outline:none}
.search input::placeholder{color:var(--faint)}
select.sort{font-family:var(--mono); font-size:.75rem; color:var(--ink-soft); background:var(--surface); border:1px solid var(--line); border-radius:7px; padding:7px 9px; cursor:pointer}
.iconbtn{font:inherit; font-size:.8125rem; cursor:pointer; color:var(--ink-soft); background:var(--surface); border:1px solid var(--line); border-radius:7px; width:34px; height:34px; display:grid; place-items:center}
.iconbtn:hover{border-color:var(--amber); color:var(--amber)}

main{max-width:1360px; margin:0 auto; padding:26px 24px 80px}
.grid{display:grid; gap:26px 20px; grid-template-columns:repeat(auto-fill,minmax(252px,1fr))}
.card{display:flex; flex-direction:column; gap:10px; background:none; border:0; padding:0; margin:0; font:inherit; color:inherit; text-align:left; cursor:pointer}
.still{position:relative; aspect-ratio:16/9; border-radius:9px; overflow:hidden; background:var(--surface-2); box-shadow:var(--shadow); border:1px solid var(--line-soft); display:block}
.still img{width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.78) contrast(1.02); transition:filter .28s ease, transform .28s ease}
.card:hover .still img,.card:focus-visible .still img{filter:saturate(1.05); transform:scale(1.03)}
.badge{position:absolute; right:7px; bottom:7px; font-family:var(--mono); font-size:.6875rem; font-variant-numeric:tabular-nums; background:rgba(10,16,22,.82); color:#F2F5F8; padding:2px 6px; border-radius:4px; letter-spacing:.02em}
.nodoc{position:absolute; left:7px; top:7px; font-family:var(--mono); font-size:.625rem; letter-spacing:.06em; background:var(--amber); color:var(--ground); padding:2px 6px; border-radius:4px; font-weight:600}
.card h2{margin:0; font-size:.9375rem; font-weight:600; line-height:1.42; letter-spacing:-.005em; text-wrap:balance; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.card:hover h2{color:var(--amber)}
.cmeta{font-family:var(--mono); font-size:.6875rem; color:var(--muted); letter-spacing:.02em; display:flex; gap:7px; flex-wrap:wrap}
.cmeta .ch{color:var(--ink-soft)}

/* 컬렉션 칩 — 손으로 큐레이팅한 묶음. 활성 칩이 그리드를 그 묶음의 "지정 순서"로 필터한다 */
.colls{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 22px}
.coll{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.03em; color:var(--muted);
  background:var(--surface); border:1px solid var(--line); border-radius:20px;
  padding:5px 12px; cursor:pointer;
}
.coll:hover{border-color:var(--amber); color:var(--amber)}
.coll.on{background:var(--amber); border-color:var(--amber); color:var(--ground); font-weight:600}
.coll i{font-style:normal; opacity:.72; margin-left:3px}
.colldesc{margin:-8px 0 24px; font-size:.875rem; color:var(--muted)}
.note{grid-column:1/-1; padding:70px 0; text-align:center; color:var(--muted); font-family:var(--mono); font-size:.8125rem; line-height:1.9}
.note b{color:var(--ink)}
.deep{font-family:var(--mono); font-size:.6875rem; color:var(--amber); letter-spacing:.04em}

.detail{max-width:1360px; margin:0 auto; padding:0 24px 90px}
.back{display:inline-flex; align-items:center; gap:7px; margin:22px 0 26px; font-family:var(--mono); font-size:.75rem; letter-spacing:.04em; color:var(--muted); background:none; border:0; padding:0; cursor:pointer}
.back:hover{color:var(--amber)}
.dhead{display:grid; grid-template-columns:296px 1fr; gap:28px; padding-bottom:24px; border-bottom:1px solid var(--line)}
@media (max-width:720px){.dhead{grid-template-columns:1fr}}
.dhead .still img{filter:none}
.dtitle{margin:0 0 12px; font-size:1.625rem; line-height:1.28; font-weight:700; letter-spacing:-.02em; text-wrap:balance}
@media (max-width:720px){.dtitle{font-size:1.3125rem}}
.drow{font-family:var(--mono); font-size:.75rem; color:var(--muted); display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:16px}
.drow b{color:var(--ink-soft); font-weight:500}
.chip{border:1px solid var(--line); border-radius:20px; padding:2px 9px; color:var(--teal); letter-spacing:.03em}
.ytlink{display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:.75rem; letter-spacing:.03em; color:var(--amber); text-decoration:none; border:1px solid var(--amber); border-radius:7px; padding:6px 11px}
.ytlink:hover{background:var(--amber); color:var(--ground)}
.tabs{display:flex; margin:26px 0 0; border-bottom:1px solid var(--line)}
.tab{font-family:var(--mono); font-size:.75rem; letter-spacing:.06em; background:none; border:0; border-bottom:2px solid transparent; padding:10px 15px; margin-bottom:-1px; color:var(--muted); cursor:pointer}
.tab[aria-selected="true"]{color:var(--amber); border-bottom-color:var(--amber)}
.tab:disabled{opacity:.35; cursor:not-allowed}

.prose{max-width:70ch; padding-top:28px; font-size:1rem; color:var(--ink-soft)}
.prose h2{margin:38px 0 12px; font-size:1.125rem; font-weight:700; color:var(--ink); line-height:1.4; letter-spacing:-.01em; text-wrap:balance; display:flex; gap:10px; align-items:baseline}
.prose h2:first-child{margin-top:0}
.prose h2 .ts{flex:none; font-family:var(--mono); font-size:.75rem; font-weight:500; color:var(--amber); background:var(--amber-soft); padding:2px 7px; border-radius:4px; font-variant-numeric:tabular-nums; text-decoration:none}
a.ts:hover,a.ts:focus-visible{background:var(--amber); color:var(--ground)}
.prose h3{margin:36px 0 12px; font-size:1rem; font-weight:700; color:var(--ink); padding-top:18px; border-top:1px solid var(--line)}
.prose h4{margin:22px 0 8px; font-size:.9375rem; font-weight:700; color:var(--ink)}
.prose p{margin:12px 0}
.prose ul,.prose ol{margin:12px 0; padding-left:22px}
.prose li{margin:7px 0}
.prose li>ul,.prose li>ol{margin:6px 0}
.prose strong{color:var(--ink); font-weight:600}
.prose em{font-style:italic; color:var(--muted)}
.prose code{font-family:var(--mono); font-size:.8125em; background:var(--surface-2); border:1px solid var(--line-soft); border-radius:4px; padding:1px 5px}
.prose a{color:var(--amber); text-decoration:underline; text-underline-offset:2px}
.prose blockquote{margin:18px 0; padding:12px 16px; border-left:3px solid var(--amber); background:var(--surface); border-radius:0 7px 7px 0; color:var(--ink)}
.prose blockquote p{margin:6px 0}
.prose hr{border:0; border-top:1px solid var(--line); margin:30px 0}
.tablewrap{overflow-x:auto; margin:18px 0; border:1px solid var(--line); border-radius:8px}
.prose table{border-collapse:collapse; width:100%; font-size:.875rem}
.prose th,.prose td{padding:9px 12px; text-align:left; border-bottom:1px solid var(--line-soft); vertical-align:top}
.prose th{background:var(--surface-2); font-weight:600; color:var(--ink); white-space:nowrap}
.prose tr:last-child td{border-bottom:0}

.tr{padding-top:26px; max-width:96ch; font-family:var(--mono); font-size:.8125rem; line-height:1.85}
.tr .ln{display:flex; gap:12px}
.tr .t{flex:none; color:var(--amber); font-variant-numeric:tabular-nums; user-select:none; opacity:.75}
.tr .x{color:var(--ink-soft); white-space:pre-wrap}

.skel{padding-top:28px; max-width:70ch; display:flex; flex-direction:column; gap:12px}
.skel i{display:block; height:13px; border-radius:4px; background:var(--surface-2); animation:pulse 1.3s ease-in-out infinite}
.skel i:nth-child(3n){width:72%} .skel i:nth-child(4n){width:88%}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}

/* ---------- click-to-load player ---------- */
.still.playable{cursor:pointer}
.playbtn{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:58px; height:40px; border-radius:10px;
  background:rgba(14,11,6,.72); display:grid; place-items:center;
  transition:background .18s ease;
}
.playbtn::after{
  content:''; border-style:solid; border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent #F5F2E9; margin-left:3px;
}
.still.playable:hover .playbtn,
.still.playable:focus-visible .playbtn{background:var(--amber)}
.still.playing{background:#000}
.still iframe{width:100%; height:100%; border:0; display:block}