/* STUDY FILES — styles (recreated from the Claude Design "Study Archive.dc.html" prototype) */
:root {
  --ink: #141414;
  --paper: #FDFAF7;
  --hl: #FFE927;
  --f-display: 'Antonio', sans-serif;
  --f-serif: 'Noto Serif KR', serif;
  --f-mono: 'IBM Plex Mono', 'IBM Plex Sans KR', monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: var(--ink); color: var(--paper); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-underline-offset: 3px; }
a:hover { color: var(--hl); }
::selection { background: var(--hl); color: var(--ink); }
button { font: inherit; }
body.locked { overflow: hidden; }

.app {
  min-height: 100vh; display: flex; flex-direction: column;
  background: var(--ink); color: var(--paper);
  font-family: var(--f-serif); word-break: keep-all; overflow-x: hidden;
}

/* ── Header ─────────────────────────────────────────── */
.top {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px;
  padding: 18px clamp(16px, 3vw, 40px);
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  border-bottom: 1px solid rgba(253, 250, 247, .25);
}
.top > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top .brand { font-size: 14px; font-weight: 500; letter-spacing: .22em; overflow: visible; }
.top .right { text-align: right; }

/* ── Hero ───────────────────────────────────────────── */
.hero {
  flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: clamp(14px, 2vw, 24px); padding: clamp(32px, 5vw, 64px) 16px 88px;
}
.hero h1 {
  margin: 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(96px, 26vw, 460px);
  line-height: .9; padding-bottom: .04em; letter-spacing: -.01em; text-transform: uppercase; color: var(--paper);
}
.hero p { margin: 0; max-width: 580px; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.6; font-weight: 300; text-wrap: pretty; }
.hero .hint { font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; opacity: .7; }

/* ── Folder cabinet ─────────────────────────────────── */
.cabinet { padding: 0 clamp(6px, 1.6vw, 24px); }
.folder {
  --c: #1E4BD7; --fg: #FDFAF7;
  position: relative; margin-top: -40px; color: var(--fg);
}
.tabs {
  height: 40px; display: flex; align-items: flex-end; gap: 6px; padding-right: 48px;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; cursor: grab; user-select: none;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
}
.tabs::-webkit-scrollbar { display: none; }
.tabs.dragging { cursor: grabbing; }
.tab {
  flex: 0 0 220px; min-width: 0; height: 34px; border: 0; padding: 0 24px;
  background: var(--c); color: var(--fg);
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 100%, 0 100%);
  font-family: var(--f-mono); font-size: 12px; display: flex; align-items: center; gap: 8px; cursor: pointer;
  transition: transform .22s var(--ease), filter .2s;
}
.tab:hover, .tab:focus-visible { transform: translateY(-6px); filter: brightness(1.15); outline: none; }
.tab .no { opacity: .7; white-space: nowrap; }
.tab .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.folder-body { background: var(--c); padding: 16px clamp(16px, 2.5vw, 32px) 56px; box-shadow: 0 -12px 30px rgba(0, 0, 0, .35); }
.folder-head { display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); cursor: pointer; }
.folder-head .num { font-family: 'IBM Plex Mono', monospace; font-size: 13px; }
.folder-head .names { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 22px; min-width: 0; }
.folder-head .name { font-family: var(--f-display); font-weight: 700; font-size: clamp(40px, 6vw, 84px); line-height: .95; text-transform: uppercase; }
.folder-head .ko { font-size: 16px; font-weight: 300; }
.folder-head .spacer { flex: 1; }
.folder-head .zone { display: flex; align-items: center; gap: clamp(12px, 2vw, 24px); padding: 8px 0 8px 24px; }
.folder-head .count { font-family: 'IBM Plex Mono', monospace; font-size: 12px; white-space: nowrap; }
.circle {
  position: relative; overflow: hidden; flex: none; width: 46px; height: 46px;
  border: 1px solid var(--fg); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.circle .fill {
  position: absolute; inset: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--fg) 30%, transparent);
  transform: scale(0); transition: transform .2s;
}
.folder.filling .circle .fill { transform: scale(1); transition: transform 1.5s linear; }
.circle .arrow { position: relative; transition: transform .35s; }
.folder.open .circle .arrow { transform: rotate(180deg); }

.acc { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.folder.open .acc { grid-template-rows: 1fr; }
.acc > div { overflow: hidden; min-height: 0; }
.acc-inner { padding-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.acc-tools {
  display: flex; flex-wrap: wrap; gap: 20px 48px; align-items: flex-end; justify-content: space-between;
  border-top: 1px solid color-mix(in srgb, var(--fg) 55%, transparent); padding: 20px 0 8px;
}
.acc-tools p { flex: 1 1 320px; max-width: 600px; margin: 0; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.65; font-weight: 300; text-wrap: pretty; }
.acc-tools .ctl { flex: 0 1 420px; display: flex; flex-wrap: wrap; gap: 10px; }
.search {
  flex: 1 1 180px; min-width: 0; border: 1px solid var(--fg); background: transparent; color: var(--fg);
  padding: 9px 12px; font-family: var(--f-mono); font-size: 13px; outline: 0; border-radius: 0;
}
.search::placeholder { color: color-mix(in srgb, var(--fg) 60%, transparent); }
.chips { display: flex; border: 1px solid var(--fg); }
.chip { font-family: 'IBM Plex Mono', monospace; font-size: 12px; padding: 8px 12px; border: 0; cursor: pointer; background: transparent; color: var(--fg); }
.chip.on { background: var(--fg); color: var(--c); }
.row {
  width: 100%; display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 16px; align-items: baseline;
  text-align: left; background: transparent; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--fg) 35%, transparent);
  color: var(--fg); padding: 14px 8px; cursor: pointer; transition: background .2s;
}
.row:hover, .row:focus-visible { background: color-mix(in srgb, var(--fg) 12%, transparent); outline: none; }
.row .no { font-family: 'IBM Plex Mono', monospace; font-size: 12px; }
.row .t { font-family: var(--f-serif); font-size: 18px; line-height: 1.45; }
.row .f { font-family: var(--f-mono); font-size: 12px; white-space: nowrap; }
.empty { font-family: var(--f-mono); font-size: 13px; margin: 16px 0 0; }

/* ── Dossier overlay ────────────────────────────────── */
.overlay { position: fixed; inset: 0; z-index: 50; pointer-events: none; overflow: hidden; }
.overlay.open { pointer-events: auto; }
.dim { position: absolute; inset: 0; background: rgba(8, 8, 8, .84); opacity: 0; transition: opacity .45s; }
.overlay.open .dim { opacity: 1; }
.sheet-wrap {
  position: absolute; top: 28px; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: center; padding: 0 52px 0 12px; pointer-events: none;
}
.sheet {
  pointer-events: auto; position: relative; flex: 1 1 auto; max-width: 1180px; height: 100%;
  background: var(--paper); color: var(--ink); border-radius: 6px 6px 0 0;
  box-shadow: 0 -24px 60px rgba(0, 0, 0, .5);
  transform: translateY(108%); transition: transform .65s cubic-bezier(.2, .85, .2, 1);
}
.overlay.open .sheet { transform: translateY(0); }
.holes {
  position: absolute; left: 0; top: 0; bottom: 0; width: 56px; border-right: 1px solid rgba(20, 20, 20, .1);
  background-image: radial-gradient(circle, var(--ink) 0 9px, transparent 10px);
  background-size: 100% 68px; background-repeat: repeat-y; background-position: center 30px; border-radius: 6px 0 0 0;
}
.idx { position: absolute; left: 100%; top: 56px; display: flex; flex-direction: column; gap: 6px; }
.idx .gap { height: 14px; }
.itab, .ctab {
  writing-mode: vertical-rl; width: 40px; border: 0; border-radius: 0 6px 6px 0; cursor: pointer;
  transition: transform .2s; white-space: nowrap; text-decoration: none; display: block;
}
.itab:hover, .ctab:hover, .itab:focus-visible, .ctab:focus-visible { transform: translateX(4px); outline: none; }
.itab { padding: 14px 0; font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em; }
.itab.cur { transform: translateX(-2px); }
.ctab { padding: 16px 0; font-family: var(--f-display); font-weight: 600; font-size: 17px; letter-spacing: .06em; text-transform: uppercase; }
a.itab:hover, a.ctab:hover { color: inherit; }

.sheet-scroll { position: absolute; top: 0; bottom: 0; left: 56px; right: 0; overflow-y: auto; overflow-x: hidden; }
.turn { transform-origin: left center; padding: 20px clamp(16px, 3.5vw, 56px) 96px; }
.bar {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
  padding-bottom: 14px; border-bottom: 1px solid var(--ink);
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .04em;
}
.bar .back { font: inherit; background: var(--ink); color: var(--paper); border: 0; padding: 7px 12px; cursor: pointer; white-space: nowrap; text-decoration: none; }
.bar .back:hover { background: var(--hl); color: var(--ink); }
.bar .crumb { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.bar .sw { width: 10px; height: 10px; box-shadow: inset 0 0 0 1px rgba(20, 20, 20, .15); }
.bar .nav { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.bar .nav .step { font: inherit; background: transparent; color: var(--ink); border: 1px solid var(--ink); padding: 6px 10px; cursor: pointer; text-decoration: none; }
.bar .nav .step:hover { background: var(--ink); color: var(--paper); }
.bar .nav .ctr { padding: 0 8px; }

.cols { display: flex; flex-wrap: wrap; gap: 48px clamp(32px, 5vw, 72px); margin-top: 44px; align-items: flex-start; }
.col-l { flex: 1 1 260px; max-width: 340px; display: flex; flex-direction: column; gap: 32px; }
.col-r { flex: 999 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 32px; }

.thumb {
  position: relative; margin-top: 18px; background: #fff; border: 1px solid rgba(20, 20, 20, .12); padding: 12px 12px 14px;
  box-shadow: 0 14px 30px rgba(20, 20, 20, .14); transform: rotate(-2.5deg);
  transition: transform .35s var(--ease), box-shadow .35s;
}
.thumb:hover { transform: rotate(0deg); box-shadow: 0 6px 16px rgba(20, 20, 20, .12); }
.thumb svg { position: absolute; top: -24px; left: 34px; z-index: 2; }
.thumb .img {
  aspect-ratio: 4 / 3; background-color: #f3f0ec; display: flex; align-items: flex-end; padding: 10px;
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--ink); background-size: cover; background-position: center;
}
.thumb .cap { display: flex; justify-content: space-between; margin-top: 10px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; }

.meta { font-family: var(--f-mono); font-size: 12.5px; }
.meta > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px dotted rgba(20, 20, 20, .35); }
.meta .k { opacity: .55; }
.meta .v { overflow-wrap: anywhere; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.act {
  font-family: var(--f-mono); font-size: 12px; padding: 11px 14px; border: 1px solid var(--ink);
  background: var(--ink); color: var(--paper); cursor: pointer; white-space: nowrap; text-decoration: none; display: inline-block;
}
.act:hover, .act.done { background: var(--hl); color: var(--ink); }

.head { display: flex; flex-direction: column; gap: 14px; }
.head .src { font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; }
.head h2 { margin: 0; font-family: var(--f-serif); font-weight: 400; font-size: clamp(34px, 4.4vw, 62px); line-height: 1.2; letter-spacing: -.01em; text-wrap: balance; }
.body { margin: 0; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.85; font-weight: 300; text-wrap: pretty; max-width: 680px; }
.body .dropcap { float: left; font-size: 4.4em; line-height: .9; margin: 8px 14px 0 0; font-weight: 600; }

.kt { max-width: 680px; }
.kt-head {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--ink);
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em;
}
.kt-head .lbl { opacity: .6; }
.pt {
  width: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr) 24px; gap: 12px; text-align: left;
  background: transparent; border: 0; border-bottom: 1px solid rgba(20, 20, 20, .18); padding: 18px 0; cursor: pointer;
  font-family: var(--f-serif); font-size: clamp(17px, 1.4vw, 19px); line-height: 1.65; color: var(--ink);
}
.pt:hover { background: rgba(20, 20, 20, .03); }
.pt .n { font-family: 'IBM Plex Mono', monospace; font-size: 12px; padding-top: 5px; }
.pt .mk { font-family: 'IBM Plex Mono', monospace; font-size: 13px; padding-top: 3px; }
.pt .txt {
  background-image: linear-gradient(transparent 52%, var(--hl) 52%); background-repeat: no-repeat; background-size: 0% 100%;
  transition: background-size .55s var(--ease); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 1px 3px;
}
.hl-block .pt .txt { background-image: linear-gradient(var(--hl), var(--hl)); }
.pt.on .txt { background-size: 100% 100%; }

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