/* APPDITOR — Stack Edition
   Layout: 왼쪽 절반은 고정된 편집 영역, 오른쪽은 3D로 접힌 카드 스택(홈) 또는 세로 스크롤 리더(상세). */
:root {
  /* 흰 바탕 단일 테마: 표면은 아주 옅은 회색, 강조는 로고 라임 */
  color-scheme: light;
  --bg: #ffffff;
  --ink: #111111;
  --mute: #8d8d89;
  --slab: #ededea;
  --surface: #f4f4f2;
  --line: rgba(17, 17, 17, .09);
  --on-cover: #1b1b1a;
  --device: #151514;
  --screen: #ffffff;
  --badge-bg: #1b1b1a;
  --badge-fg: #ffffff;
  /* 브랜드: 로고의 라임과 검정 */
  --lime: #dfff69;
  --brand-ink: #101010;
  --accent-bg: #101010;
  --accent-fg: #dfff69;

  --sans: 'Geist', 'Noto Sans KR', 'Apple SD Gothic Neo', system-ui, sans-serif;
  --mono: 'Geist Mono', 'Noto Sans KR', ui-monospace, Menlo, monospace;
  --serif-kr: 'Noto Serif KR', 'Instrument Serif', Georgia, serif;
  --serif: 'Instrument Serif', Georgia, serif;

  --ease-out: cubic-bezier(.2, .75, .1, 1);
  --ease-io: cubic-bezier(.65, 0, .15, 1);
  --r-card: 32px;
  --r-big: 48px;
  --side-pad: clamp(24px, 17.8vw, 257px);
  --stack-right: clamp(24px, 17.8vw, 257px);
  --cw: 335px;
  --ch: 344px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; overflow: hidden; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 14px; line-height: 1.5;
  word-break: keep-all; overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--lime); color: var(--brand-ink); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--mono); font-size: 11px; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.app { position: fixed; inset: 0; }

/* ───────── 왼쪽 고정 영역 ───────── */
.side {
  position: fixed; top: 0; bottom: 0; left: 0; width: 50vw; z-index: 20;
  display: flex; align-items: center; align-items: safe center; padding-left: var(--side-pad); padding-right: 24px;
  padding-top: 96px; padding-bottom: 64px; /* 위쪽 로고, 아래쪽 안내 문구와 겹치지 않게 */
  overflow-y: auto; scrollbar-width: none; pointer-events: none;
}
.side::-webkit-scrollbar { display: none; }
.side-content { width: min(400px, 100%); display: flex; flex-direction: column; gap: 28px; pointer-events: auto; }
.side-head { display: flex; flex-direction: column; gap: 14px; }
.eyebrow { color: var(--mute); margin: 0; }
.title { margin: 0; font-weight: 500; font-size: 32px; line-height: 1.04; letter-spacing: -.025em; }
.title .ln { display: block; overflow: hidden; padding-bottom: .08em; }
.title .ln > span { display: block; }
.title .ln.grey { color: var(--mute); }
.lede { margin: 0; color: var(--mute); font-size: 15px; line-height: 1.6; max-width: 31em; text-wrap: pretty; }
.lede b { color: var(--ink); font-weight: 500; }

.btns { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.icon-btn {
  width: 54px; height: 54px; border-radius: 16px; background: var(--surface);
  display: grid; place-items: center; transition: transform .35s var(--ease-out), background .2s, color .2s;
}
.icon-btn:hover { transform: translateY(-2px); }
.icon-btn:active { transform: scale(.95); }
.icon-btn svg, .pill svg, .back-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn.is-on, .icon-btn.solid { background: var(--accent-bg); color: var(--accent-fg); }
.pill {
  height: 54px; border-radius: 16px; background: var(--surface); padding: 0 20px;
  display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500;
  transition: transform .35s var(--ease-out);
}
.pill:hover { transform: translateY(-2px); }
.pill[aria-disabled="true"] { color: var(--mute); cursor: default; transform: none; }

.toc { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.toc button {
  display: grid; grid-template-columns: 34px 1fr auto; align-items: baseline; gap: 8px; width: 100%;
  text-align: left; padding: 5px 0; color: var(--mute); transition: color .25s;
}
.toc button:hover, .toc .is-active button { color: var(--ink); }
.toc .toc-no { font-family: var(--mono); font-size: 11px; font-variant-numeric: tabular-nums; }
.toc .toc-name { font-size: 15px; font-weight: 500; letter-spacing: -.01em; }
.toc .toc-cat { font-size: 12px; }
.toc .is-active .toc-name::after { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--tone); margin-left: 9px; vertical-align: middle; box-shadow: 0 0 0 1px var(--line); }

.meta { margin: 0; display: grid; grid-template-columns: 76px 1fr; border-top: 1px solid var(--line); max-width: 360px; }
.meta dt, .meta dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.meta dt { color: var(--mute); }
.meta dd { font-variant-numeric: tabular-nums; }

.foot { position: absolute; left: var(--side-pad); bottom: 30px; color: var(--mute); margin: 0; pointer-events: none; }

/* 왼쪽 텍스트 전환: 줄 단위로 아래에서 올라오고, 나갈 땐 위로 빠짐 */
.side-content .ln > span { animation: lnIn .8s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms + 60ms); }
.side-content .rise { animation: rise .7s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms + 120ms); }
.side-content.is-out .ln > span { animation: lnOut .3s cubic-bezier(.5, 0, .75, 0) both; animation-delay: 0ms; }
.side-content.is-out .rise { animation: fadeOut .25s ease both; animation-delay: 0ms; }
@keyframes lnIn { from { transform: translateY(108%); } to { transform: none; } }
@keyframes lnOut { to { transform: translateY(-108%); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fadeOut { to { opacity: 0; transform: translateY(-8px); } }

/* ───────── 오른쪽: 카드 스택 ───────── */
.stage { position: fixed; inset: 0; transition: opacity .45s ease; }
.stack {
  position: absolute; top: 0; bottom: 0; right: var(--stack-right); width: var(--cw);
  user-select: none; -webkit-user-select: none; touch-action: none; cursor: grab;
}
.stack.is-dragging { cursor: grabbing; }
.stack-list { list-style: none; margin: 0; padding: 0; position: relative; height: 100%; perspective: 1500px; transform-style: preserve-3d; }
.card {
  position: absolute; top: 50%; left: 0; width: var(--cw); height: var(--ch); margin-top: calc(var(--ch) / -2);
  transform-style: preserve-3d; will-change: transform, opacity; border-radius: var(--r-card);
}
.card-link { display: block; width: 100%; height: 100%; border-radius: var(--r-card); }
.card-mag { width: 100%; height: 100%; will-change: transform; }
.card-face {
  position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: var(--r-card);
  background: var(--slab); color: var(--on-cover); isolation: isolate;
}
.card-face > * { opacity: var(--c, 1); }
/* 접힌 카드의 유리 효과: 표지는 흐리게 비치고, 위에 반투명한 흰 막과 밝은 테두리 */
.card-face .cover { filter: blur(calc(var(--g, 0) * 4px)) saturate(calc(1 - var(--g, 0) * .2)); }
.card-face > .card-glass {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; opacity: var(--g, 0);
  background: linear-gradient(180deg, rgba(255, 255, 255, .58), rgba(255, 255, 255, .22) 55%, rgba(255, 255, 255, .42));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .75), inset 0 2px 0 rgba(255, 255, 255, .95);
}
.card-face > .badges, .card-face > .card-name { opacity: calc(var(--c, 1) * (1 - var(--g, 0))); }
.card-face .cover { pointer-events: none; transform-origin: 60% 40%; }
.card.is-active .card-face .cover { animation: drift 16s ease-in-out infinite alternate; }
@keyframes drift { from { transform: scale(1.02); } to { transform: scale(1.09) translate(-1.5%, 1%); } }
.card-tag { position: absolute; top: 20px; left: 22px; z-index: 1; opacity: calc(var(--c, 1) * .7); }
.card-name { position: absolute; left: 22px; bottom: 18px; z-index: 1; font-size: 15px; font-weight: 500; letter-spacing: -.01em; }

.fade { position: absolute; left: -40px; right: -40px; height: 64px; pointer-events: none; z-index: 60; }
.fade-top { top: 0; background: linear-gradient(var(--bg), rgba(255, 255, 255, 0)); }
.fade-bottom { bottom: 0; background: linear-gradient(rgba(255, 255, 255, 0), var(--bg)); }

.dots { position: absolute; right: 81px; top: 50%; transform: translateY(-50%); display: grid; gap: 8px; }
.dots i { display: block; width: 3px; height: 3px; border-radius: 50%; background: var(--ink); opacity: .2; transition: opacity .3s, transform .3s; }
.dots i.is-on { opacity: 1; transform: scale(1.35); background: var(--brand-ink); box-shadow: 0 0 0 2.5px var(--lime); }

/* ───────── 상세/소개 리더 ───────── */
.reader {
  position: fixed; top: 0; bottom: 0; right: 0; left: calc(50vw + 10px); z-index: 30;
  overflow-y: auto; overscroll-behavior: contain; padding: 20px 20px 20px 0; scrollbar-width: none;
}
.reader::-webkit-scrollbar { display: none; }
.reader-col { display: flex; flex-direction: column; gap: 20px; max-width: 760px; }
.reader-head { display: none; }
.r-card {
  position: relative; width: 100%; aspect-ratio: 690 / 708; border-radius: var(--r-big); overflow: hidden;
  background: var(--surface); container-type: inline-size;
  animation: cardIn .8s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 80ms);
}
.reader.no-anim .r-card { animation: none; }
.reader.is-out .reader-col { opacity: 0; transform: translateY(-10px); transition: opacity .22s ease, transform .22s ease; }
@keyframes cardIn { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
.r-card.is-cover { background: var(--slab); color: var(--on-cover); }
.r-card.is-cover .cover-wrap { position: absolute; inset: 0; }
.r-card.is-cover .badges { top: 28px; right: 28px; }
.r-card.is-cover .card-tag { top: 30px; left: 34px; opacity: .7; }
.r-card.is-cover .card-name { left: 34px; bottom: 30px; font-size: 18px; }
.r-card.is-hidden { visibility: hidden; }

/* 텍스트 카드 (레퍼런스의 Mandate / Challenge 구조) */
.r-card.is-text { display: flex; flex-direction: column; justify-content: space-between; padding: 34px; }
.r-label { color: var(--ink); margin: 0; }
.r-body { margin: 0; font-size: clamp(17px, 3.3cqw, 23px); line-height: 1.55; letter-spacing: -.012em; text-wrap: pretty; max-width: 30em; }
.r-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; font-size: clamp(16px, 3cqw, 21px); line-height: 1.45; }
.r-list li { display: grid; grid-template-columns: 22px 1fr; }
.r-list li::before { content: '+'; font-family: var(--mono); color: var(--mute); }
.r-list.minus li::before { content: '–'; }

/* 인용 카드 */
.r-card.is-quote { display: flex; flex-direction: column; justify-content: space-between; padding: 34px; }
.q-mark { font-family: var(--serif); font-size: clamp(90px, 22cqw, 160px); line-height: .7; color: var(--tone); margin: 0; height: .5em; -webkit-text-stroke: 1px rgba(0, 0, 0, .06); }
.q-text { margin: 0; font-family: var(--serif-kr); font-weight: 500; font-size: clamp(24px, 5.6cqw, 40px); line-height: 1.38; letter-spacing: -.03em; text-wrap: balance; }
.q-by { color: var(--mute); margin: 0; }

/* 화면 목업 카드 */
.r-card.is-screens { background: var(--tone); display: flex; align-items: center; justify-content: center; gap: 5cqw; color: #1b1b1a; }
.r-card.is-screens .card-tag { top: 30px; left: 34px; color: var(--on-cover); opacity: .65; }
.phone { width: 34cqw; aspect-ratio: 9 / 19; background: var(--device); border-radius: 6cqw; padding: 1.1cqw; box-shadow: 0 3cqw 6cqw rgba(0, 0, 0, .14); flex: none; }
.phone:nth-child(3) { transform: translateY(7cqw); }
.screen { width: 100%; height: 100%; border-radius: 5cqw; background: var(--screen); padding: 3.4cqw 2.8cqw; display: flex; flex-direction: column; gap: 1.6cqw; overflow: hidden; color: #1b1b1a; }
.island { width: 9cqw; height: 2.2cqw; border-radius: 9cqw; background: var(--device); align-self: center; margin-bottom: 1.6cqw; flex: none; }
.s-title { font-weight: 600; font-size: 3.4cqw; letter-spacing: -.02em; margin: 0 0 .8cqw; }
.s-row { display: flex; justify-content: space-between; gap: 1cqw; align-items: center; background: color-mix(in srgb, var(--tone) 32%, #fff); border-radius: 2cqw; padding: 2cqw 2.2cqw; font-size: 2cqw; }
.s-row span:first-child { font-family: var(--mono); font-size: 1.7cqw; opacity: .6; }
.s-big { margin-top: auto; background: var(--tone); border-radius: 3.2cqw; padding: 3cqw 2.6cqw; }
.s-big b { display: block; font-size: 9cqw; font-weight: 500; letter-spacing: -.05em; line-height: 1; }
.s-big span { font-size: 1.9cqw; opacity: .7; }
.s-circle { width: 22cqw; aspect-ratio: 1; border-radius: 50%; align-self: center; margin: 2cqw 0; background: conic-gradient(var(--ink-on, #1b1b1a) 0 68%, color-mix(in srgb, var(--tone) 45%, #fff) 0); -webkit-mask: radial-gradient(circle, transparent 54%, #000 55%); mask: radial-gradient(circle, transparent 54%, #000 55%); }

/* 포인트 카드 */
.r-card.is-points { display: flex; flex-direction: column; justify-content: space-between; padding: 34px; }
.points { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.points li { display: grid; grid-template-columns: 24px 1fr; gap: 4px 10px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.points i { width: 10px; height: 10px; border-radius: 50%; background: var(--tone); margin-top: .5em; grid-row: span 2; box-shadow: 0 0 0 1px var(--line); }
.points b { font-weight: 500; font-size: clamp(17px, 3.2cqw, 22px); letter-spacing: -.015em; }
.points span { color: var(--mute); font-size: 15px; }

/* 다음 앱 카드 */
/* 사진 카드: 관리자 페이지에서 올린 사진이 원래 비율 그대로 들어가요 */
.r-card.is-photo { aspect-ratio: auto; margin: 0; padding: 8px; display: grid; gap: 0; }
.r-card.is-photo img { display: block; width: 100%; height: auto; max-height: 82vh; object-fit: cover; border-radius: 40px; background: var(--slab); }
.r-card.is-photo figcaption { padding: 14px 24px 10px; color: var(--mute); font-size: 14px; line-height: 1.55; }

/* 이전 날의 앱: 본문 카드와 구분되는 작은 한 줄 링크 */
.r-next {
  display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 18px;
  width: 100%; text-align: left; color: var(--ink); margin-top: 18px; padding: 10px 20px 10px 10px;
  border-radius: 24px; background: transparent; border: 1px solid var(--line);
  animation: cardIn .8s var(--ease-out) both; animation-delay: .35s; transition: background .25s, border-color .25s;
}
.r-next:hover { background: var(--surface); border-color: transparent; }
.n-thumb { position: relative; width: 76px; height: 76px; border-radius: 16px; overflow: hidden; background: var(--tone); }
.n-thumb .g-kind, .n-thumb .g-bar { display: none; }
.n-text { display: grid; gap: 2px; min-width: 0; }
.n-text .mono { color: var(--mute); font-size: 11px; }
.n-name { font-size: 19px; font-weight: 500; letter-spacing: -.02em; }
.n-tag { color: var(--mute); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n-arrow { width: 40px; height: 40px; border-radius: 50%; background: var(--accent-bg); color: var(--accent-fg); display: grid; place-items: center; font-size: 16px; transition: transform .3s var(--ease-out); }
.r-next:hover .n-arrow { transform: translateX(3px); }

/* 소개: 이번 호 색인 카드 */
.r-card.is-index { padding: 34px; display: flex; flex-direction: column; gap: 24px; }
.swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; flex: 1; }
.swatch { border-radius: 22px; background: var(--tone); color: #1b1b1a; padding: 14px; display: flex; flex-direction: column; justify-content: space-between; text-align: left; min-height: 0; transition: transform .4s var(--ease-out); }
.swatch:hover { transform: translateY(-4px); }
.swatch b { font-weight: 500; font-size: clamp(13px, 2.4cqw, 17px); letter-spacing: -.01em; }
.swatch .mono { opacity: .6; }
.swatch.is-blank { background: transparent; border: 1px dashed var(--line); color: var(--mute); }
.copy-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.copy-row code { font-family: var(--mono); font-size: 15px; user-select: all; padding: 12px 16px; border-radius: 14px; background: var(--slab); }

/* 경계의 '접기' 버튼 */
.back-btn {
  position: fixed; z-index: 40; top: 50%; left: calc(50vw - 64px); width: 54px; height: 54px; margin-top: -27px;
  border-radius: 16px; background: var(--surface); display: grid; place-items: center;
  opacity: 0; transform: scale(.8); pointer-events: none; transition: opacity .3s ease, transform .5s var(--ease-out);
}
[data-view="detail"] .back-btn, [data-view="about"] .back-btn, [data-view="archive"] .back-btn { opacity: 1; transform: none; pointer-events: auto; transition-delay: .35s; }
.back-btn:hover { transform: scale(1.06); }

[data-view="detail"] .stage, [data-view="about"] .stage, [data-view="archive"] .stage { opacity: 0; pointer-events: none; }
[data-view="detail"] .foot, [data-view="about"] .foot, [data-view="archive"] .foot { opacity: 0; }

/* FLIP 고스트 */
.ghost { position: fixed; z-index: 50; overflow: hidden; pointer-events: none; background: var(--slab); color: var(--on-cover); }

.ghost .card-tag, .ghost .card-name { opacity: 0; }

.toast {
  position: fixed; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom, 0px)); z-index: 90; transform: translate(-50%, 20px);
  background: var(--accent-bg); color: var(--accent-fg); padding: 11px 16px; border-radius: 12px; font-size: 13px;
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .4s var(--ease-out);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ───────── 표지 (이미지 / 자동 생성) ───────── */
.cover { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
img.cover { object-fit: cover; object-position: 18% 50%; }
.gen-cover { background: var(--tone); color: var(--on-cover); overflow: hidden; container-type: size; }
.g-shape { position: absolute; display: block; background: color-mix(in srgb, var(--tone) 78%, #000); opacity: .28; }
.gen-cover[data-shape="0"] .g-shape { width: 82cqmin; height: 82cqmin; border-radius: 50%; right: -18cqmin; top: -16cqmin; }
.gen-cover[data-shape="1"] .g-shape { width: 70cqmin; height: 70cqmin; border-radius: 16cqmin; right: -10cqmin; bottom: -14cqmin; transform: rotate(14deg); }
.gen-cover[data-shape="2"] .g-shape { width: 120cqmin; height: 60cqmin; border-radius: 60cqmin 60cqmin 0 0; left: -10cqmin; bottom: -2cqmin; opacity: .2; }
.gen-cover[data-shape="3"] .g-shape { width: 74cqmin; height: 74cqmin; border-radius: 50%; right: -8cqmin; bottom: -10cqmin; background: transparent; border: 9cqmin solid color-mix(in srgb, var(--tone) 72%, #000); opacity: .22; }
.g-mono { position: absolute; left: 7cqmin; top: 2cqmin; font-family: var(--sans); font-weight: 500; font-size: 64cqmin; line-height: 1; letter-spacing: -.06em; }
.g-kind { position: absolute; right: 7cqmin; bottom: 7cqmin; font-family: var(--mono); font-size: max(9px, 4cqmin); opacity: .55; }

/* ───────── 시상 표시 ───────── */
.mk { display: inline-block; width: 7px; height: 7px; background: currentColor; flex: none; }
.mk-day { border-radius: 50%; }
.mk-week { transform: rotate(45deg) scale(.88); }
.mk-month { width: 10px; height: 10px; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.badges { position: absolute; top: 16px; right: 16px; z-index: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; pointer-events: none; }
.badge { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px 0 9px; border-radius: 999px; background: var(--badge-bg); color: var(--badge-fg); font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.badge.on-page { background: var(--accent-bg); color: var(--accent-fg); height: 30px; font-size: 12.5px; padding: 0 13px 0 11px; }
.plaques { display: flex; flex-wrap: wrap; gap: 6px; }

.awards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 400px; }
.award {
  display: flex; flex-direction: column; gap: 2px; text-align: left; min-width: 0;
  background: var(--surface); border-radius: 18px; padding: 7px 7px 12px; transition: transform .45s var(--ease-out);
}
.award:hover { transform: translateY(-3px); }
.aw-thumb { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--tone); margin-bottom: 8px; }
.aw-label { display: flex; align-items: center; gap: 6px; padding: 0 5px; font-size: 11.5px; font-weight: 500; }
.aw-name { padding: 0 5px; font-size: 17px; font-weight: 500; letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aw-when { padding: 0 5px; color: var(--mute); font-size: 10.5px; }

.toc-wrap { display: grid; gap: 6px; }
.toc-head { margin: 0; color: var(--mute); }
.toc button { grid-template-columns: 44px minmax(0, 1fr) max-content; }
.toc .toc-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toc .toc-cat { white-space: nowrap; display: inline-flex; align-items: center; }
.toc-mk { display: inline-flex; gap: 5px; margin-left: 8px; vertical-align: middle; color: var(--ink); }
.toc .is-active .toc-name::after { display: none; }
.more-link { justify-self: start; margin-top: 6px; font-size: 13px; color: var(--ink); padding: 2px 4px 3px; margin-left: -4px; border-radius: 6px; background: linear-gradient(transparent calc(100% - 3px), var(--lime) 0); transition: background .25s, color .25s; }
.more-link:hover { background: var(--lime); color: var(--brand-ink); }

.rules { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.rules li { display: grid; grid-template-columns: 22px 1fr; gap: 2px 8px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.rules b { font-weight: 500; font-size: clamp(17px, 3.2cqw, 22px); letter-spacing: -.015em; }
.rules li > :first-child { grid-row: span 2; align-self: start; margin-top: .3em; }
.rules li > span:last-child { grid-column: 2; color: var(--mute); font-size: 15px; }

/* ───────── 아카이브 ───────── */
.filters { display: grid; gap: 10px; max-width: 400px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  height: 34px; padding: 0 14px; border-radius: 999px; background: var(--surface); color: var(--mute);
  font-size: 13px; display: inline-flex; align-items: center; gap: 7px; transition: background .2s, color .2s;
}
.chip:hover { color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--accent-bg); color: var(--accent-fg); }
.search-wrap { display: block; margin-top: 4px; }
.search {
  width: 100%; height: 46px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg);
  color: var(--ink); font: inherit; font-size: 14px; padding: 0 16px; outline: none;
}
.search:focus { border-color: var(--ink); }
.search::placeholder { color: var(--mute); }

.arch { display: flex; flex-direction: column; gap: 40px; padding-bottom: 20px; }
.arch-week { display: flex; flex-direction: column; gap: 14px; }
.arch-week > header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 4px 6px 10px; border-bottom: 1px solid var(--line); }
.arch-week h2 { margin: 0; font-size: 22px; font-weight: 500; letter-spacing: -.025em; }
.arch-week header .mono { color: var(--mute); }
.arch-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.arch-item {
  display: flex; flex-direction: column; gap: 10px; text-align: left; min-width: 0;
  background: var(--surface); border-radius: 26px; padding: 8px 8px 16px;
  animation: cardIn .7s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 40ms);
  transition: transform .45s var(--ease-out);
}
.arch-item:hover { transform: translateY(-4px); }
.ai-thumb { position: relative; display: block; aspect-ratio: 1; border-radius: 19px; overflow: hidden; background: var(--tone); }
.ai-thumb .badges { top: 10px; right: 10px; }
.ai-thumb .badge { height: 22px; font-size: 10.5px; padding: 0 9px 0 8px; gap: 6px; }
.ai-text { display: grid; gap: 3px; padding: 0 8px; min-width: 0; }
.ai-text .mono { color: var(--mute); font-size: 10.5px; }
.ai-text b { font-size: 17px; font-weight: 500; letter-spacing: -.02em; }
.ai-tag { color: var(--mute); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arch-item.is-pick { grid-column: 1 / -1; flex-direction: row; align-items: stretch; padding: 8px; gap: 0; }
.arch-item.is-pick .ai-thumb { width: 56%; aspect-ratio: 4 / 3; flex: none; }
.arch-item.is-pick .ai-text { align-content: end; padding: 18px 22px; gap: 6px; }
.arch-item.is-pick .ai-text b { font-size: clamp(26px, 3vw, 40px); letter-spacing: -.04em; line-height: 1.05; }
.arch-item.is-pick .ai-tag { white-space: normal; font-size: 15px; line-height: 1.5; }
.arch-empty { background: var(--surface); border-radius: var(--r-big); padding: 34px; display: grid; gap: 14px; justify-items: start; }
.arch-empty p { margin: 0; font-size: 18px; }
.reader.no-anim .arch-item { animation: none; }

@media (max-height: 820px) and (min-width: 761px) { .side .toc-wrap { display: none; } }
@media (max-height: 640px) and (min-width: 761px) { .side .aw-thumb { display: none; } }

/* ───────── 종류 표시 (서비스 · 웹) ───────── */
.type-tag {
  display: inline-flex; align-items: center; height: 18px; padding: 0 6px; margin-left: 8px; border-radius: 6px;
  border: 1px solid currentColor; font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .02em;
  vertical-align: middle; opacity: .7; white-space: nowrap; line-height: 1;
}
.type-tag.on-cover { color: var(--on-cover); }
.toc-cat .type-tag { margin: 0 6px 0 0; }
.type-tag.big { margin: 0; height: 24px; padding: 0 8px; font-size: 11px; justify-self: start; }
.rules li { grid-template-columns: minmax(22px, auto) 1fr; column-gap: 12px; }

.g-bar {
  position: absolute; left: 6cqmin; right: 6cqmin; top: 6cqmin; height: 10cqmin; border-radius: 3.4cqmin;
  background: rgba(255, 255, 255, .55); display: flex; align-items: center; gap: 1.8cqmin; padding: 0 3.4cqmin; z-index: 1;
}
.g-bar i { width: 2.4cqmin; height: 2.4cqmin; border-radius: 50%; background: rgba(0, 0, 0, .22); flex: none; }
.g-url { margin-left: 2cqmin; font-family: var(--mono); font-size: max(8px, 3.8cqmin); opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.has-bar .g-mono { top: 16cqmin; font-size: 54cqmin; }
.has-bar ~ .badges { top: auto; bottom: 16px; }

.r-card.is-browser { gap: 0; }
.browser { width: 84cqw; background: var(--screen); border-radius: 3.4cqw; overflow: hidden; box-shadow: 0 3cqw 6cqw rgba(0, 0, 0, .14); color: #1b1b1a; margin-top: 5cqw; }
.b-bar { display: flex; align-items: center; gap: 1.2cqw; padding: 2.2cqw 2.6cqw; background: color-mix(in srgb, var(--tone) 35%, #efeee9); }
.b-bar i { width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: rgba(0, 0, 0, .18); flex: none; }
.b-url { margin-left: 2cqw; flex: 1; background: rgba(255, 255, 255, .8); border-radius: 1.4cqw; padding: .9cqw 2cqw; font-family: var(--mono); font-size: 1.9cqw; color: rgba(0, 0, 0, .6); }
.b-body { display: grid; grid-template-columns: 1.4fr 1fr; gap: 3cqw; padding: 4.4cqw 4cqw; }
.b-main { display: flex; flex-direction: column; gap: 1.4cqw; min-width: 0; }
.b-brand { margin: 0; font-family: var(--mono); font-size: 1.8cqw; opacity: .55; }
.is-browser .s-title { font-size: 4.4cqw; margin-bottom: 1.4cqw; }
.is-browser .s-row { font-size: 2.1cqw; }
.is-browser .s-row span:first-child { font-size: 1.8cqw; }
.is-browser .s-big { margin-top: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.is-browser .s-big b { font-size: 7.4cqw; }

/* ───────── 브랜드 ───────── */
.brand {
  position: fixed; z-index: 45; top: calc(28px + env(safe-area-inset-top, 0px)); left: var(--side-pad);
  width: 44px; height: 44px; border-radius: 50%; display: block; transition: transform .6s var(--ease-out);
}
.brand img { width: 100%; height: 100%; display: block; border-radius: 50%; box-shadow: 0 0 0 1px var(--line); }
.brand:hover { transform: rotate(-12deg) scale(1.06); }
.wordmark { display: inline-block; height: 31px; width: auto; vertical-align: top; margin: 3px 0 4px; }
.wm-dark { display: none; }
.badge.is-day, .badge.on-page.is-day { background: var(--lime); color: var(--brand-ink); }
.award.is-today { background: var(--lime); color: var(--brand-ink); }
.award.is-today .aw-when { color: rgba(16, 16, 16, .55); }
.toc .is-active .toc-no { background: var(--lime); color: var(--brand-ink); border-radius: 5px; padding: 1px 5px; margin-left: -5px; justify-self: start; }
.arch-week.is-now h2 { background: var(--lime); color: var(--brand-ink); border-radius: 9px; padding: 1px 10px 3px; margin-left: -4px; }
.r-card.is-brand { background: var(--lime); color: var(--brand-ink); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3cqw; }
.brand-wm { width: 58%; height: auto; }
.brand-sub { margin: 0; font-size: clamp(15px, 3cqw, 20px); font-weight: 500; letter-spacing: -.01em; opacity: .72; }
.brand-circle { position: absolute; right: 34px; bottom: 34px; width: 13cqw; height: auto; border-radius: 50%; }
.r-card.is-brand::before { content: 'appditor. · since 2026'; position: absolute; left: 34px; top: 32px; font-family: var(--mono); font-size: 11px; opacity: .6; }

/* ───────── 중간 폭 ───────── */
@media (max-width: 1100px) and (min-width: 761px) {
  :root { --side-pad: 40px; --stack-right: 9vw; }
  .dots { right: 28px; }
  .toc .toc-cat { display: none; }
}

/* ───────── 모바일 ───────── */
@media (max-width: 760px) {
  .side {
    width: 100%; bottom: auto; align-items: flex-start; justify-content: center; text-align: center;
    padding-top: calc(26px + env(safe-area-inset-top, 0px));
    padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  .side .side-content { gap: 0; align-items: center; }
  .side .side-head { gap: 8px; align-items: center; }
  .title { font-size: 26px; }
  .side .lede, .side .toc, .side .meta, .foot { display: none; }
  .side .btns {
    position: fixed; left: 0; right: 0; bottom: calc(26px + env(safe-area-inset-bottom, 0px)); justify-content: center;
  }
  .stack { right: auto; left: 50%; margin-left: calc(var(--cw) / -2); }
  .dots { right: max(14px, env(safe-area-inset-right, 0px)); }
  .fade { height: 90px; }
  [data-view="detail"] .side, [data-view="about"] .side, [data-view="archive"] .side { display: none; }

  .reader { left: 0; padding: calc(84px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); background: var(--bg); }
  .reader-col { gap: 14px; }
  .reader-head { display: flex; flex-direction: column; gap: 18px; padding: 0 4px 12px; }
  .reader-head .title { font-size: 30px; }
  .reader-head .side-head { gap: 12px; }
  .reader-head .meta { max-width: none; }
  .r-card { border-radius: 30px; }
  .r-card.is-photo img { border-radius: 24px; }
  .r-card.is-text, .r-card.is-points, .r-card.is-quote, .r-card.is-index { aspect-ratio: auto; min-height: 340px; padding: 26px; gap: 40px; }
  .swatches { grid-template-columns: repeat(2, 1fr); }
  .swatch { min-height: 96px; }
  .back-btn { top: calc(16px + env(safe-area-inset-top, 0px)); left: max(16px, env(safe-area-inset-left, 0px)); margin-top: 0; }
}

@media (max-width: 760px) {
  .brand { display: none; }
  .wordmark { height: 26px; margin: 2px 0; }
  .side .awards { display: flex; gap: 6px; margin-top: 14px; max-width: none; justify-content: center; }
  .side .award { flex-direction: row; align-items: center; gap: 6px; padding: 7px 12px 7px 10px; border-radius: 999px; }
  .side .aw-thumb, .side .aw-when { display: none; }
  .side .aw-label { padding: 0; font-size: 0; gap: 0; }
  .side .aw-label .mk { font-size: 0; }
  .side .aw-name { padding: 0; font-size: 13px; }
  .side .toc-wrap { display: none; }
  .stack { top: 150px; bottom: 96px; }
  .fade { height: 56px; }
  .arch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .arch-item.is-pick { flex-direction: column; }
  .arch-item.is-pick .ai-thumb { width: 100%; }
  .arch-item.is-pick .ai-text { padding: 14px 10px 8px; }
  .reader-head .filters { max-width: none; }
  .reader-head .chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px; scrollbar-width: none; }
  .reader-head .chip { flex: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
}