/* yt-digest — 엔지니어 필드 노트북. 토큰은 세계의 재료 이름을 그대로 쓴다. */
:root{
  --desk:#c6c9c1;            /* 책상 */
  --paper:#f3f2ec;           /* 방안지 */
  --grid:rgba(70,128,128,.17);/* 5mm 청록 격자 */
  --cell:20px;
  --margin:#d3463a;          /* 빨간 여백선 */
  --ink:#1c1c1a;             /* 도장·본문 잉크 */
  --graphite:#4d4c48;        /* 연필 진하게 */
  --pencil:#6e6d68;          /* 연필 흐리게 — 종이 위 4.6:1 */
  --olive:#6b7a2f; --navy:#2f4b7c; --rust:#b8452c; --slate:#55554f;
  --gutter:64px;             /* 여백선 위치 */
  --sans:"Gothic A1",system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --mono:"Nanum Gothic Coding","D2Coding",ui-monospace,Menlo,monospace;
  --t-fast:160ms; --t-page:220ms; --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{background:var(--desk)}
body{margin:0;color:var(--ink);font:15px/1.6 var(--sans);-webkit-font-smoothing:antialiased;padding:24px;min-height:100vh}
button,input{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
img{max-width:100%}
[hidden]{display:none!important}

/* ── 펼친 노트 ─────────────────────────────── */
.book{
  position:relative;max-width:1440px;margin:0 auto;
  display:grid;grid-template-columns:2fr 3fr;
  height:calc(100vh - 48px);
  box-shadow:0 18px 40px -18px rgba(20,20,18,.45),0 2px 6px rgba(20,20,18,.18);
  border-radius:4px;
}
/* 노트는 책상 위에 고정, 페이지가 각자 넘어간다 — 색인을 훑는 동안 읽던 페이지가 도망가지 않는다 */
.page{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(28,28,26,.25) transparent}
.page{
  position:relative;background-color:var(--paper);
  background-image:
    repeating-linear-gradient(0deg,var(--grid) 0 1px,transparent 1px var(--cell)),
    repeating-linear-gradient(90deg,var(--grid) 0 1px,transparent 1px var(--cell));
  padding:36px 40px 48px calc(var(--gutter) + 20px);
  min-width:0;
}
.page::before{ /* 빨간 여백선 */
  content:"";position:absolute;top:0;bottom:0;left:var(--gutter);width:1px;background:var(--margin);opacity:.85
}
.page-index{border-radius:4px 0 0 4px;box-shadow:inset -14px 0 22px -16px rgba(20,20,18,.45)}
.page-read {border-radius:0 4px 4px 0;box-shadow:inset 14px 0 22px -16px rgba(20,20,18,.45)}

/* ── 머리(브랜드 + 클립 쪽지) ───────────────── */
.masthead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:28px}
.brand{margin:0;flex:none;white-space:nowrap;font-weight:800;font-size:26px;letter-spacing:-.02em;line-height:1;padding-top:6px}
/* 쪽지: 찢어 붙인 좁은 띠 + 손글씨. 노트북에서 유일하게 손으로 쓴 면 */
.slip{
  position:relative;isolation:isolate;flex:0 1 250px;padding:22px 14px 12px 16px;
  filter:drop-shadow(0 5px 6px rgba(20,20,18,.28)) drop-shadow(0 1px 1px rgba(20,20,18,.18));
  transform:rotate(-1.6deg);transform-origin:top left;
}
/* 찢긴 종이는 뒤 레이어에 — 클립(자식)이 잘리지 않는다 */
.slip::before{
  content:"";position:absolute;inset:0;z-index:-1;background:#fbfaf6;
  clip-path:polygon(0 3%,4% 0,9% 2%,14% 0,20% 3%,27% 1%,33% 3%,41% 0,47% 2%,54% 0,61% 3%,67% 1%,74% 3%,80% 0,86% 2%,93% 0,100% 3%,100% 96%,95% 100%,89% 98%,82% 100%,75% 97%,68% 100%,61% 98%,53% 100%,46% 97%,39% 100%,32% 98%,25% 100%,18% 97%,11% 100%,5% 98%,0 100%);
}
.slip .clip{position:absolute;top:-14px;left:12px;width:34px;height:auto;transform:rotate(-8deg);opacity:.85;z-index:1} /* 여백 위에 물린다 — 글자를 덮지 않는다 */
.slip-state,.slip-line{font-family:"Nanum Pen Script",var(--sans)}
.slip-state{font-size:34px;font-weight:400;line-height:1;letter-spacing:0}
.slip-line{font-size:22px;line-height:1.25;margin-top:6px;color:var(--ink)}
/* 실행 중이면 손으로 그린 링이 천천히 돈다 */
.slip-state[data-state="running"]::before{content:"";display:inline-block;width:18px;height:18px;margin-right:6px;vertical-align:-2px;background:url(/assets/pencil-circle.png) no-repeat center / contain;opacity:.8;animation:turn 6s linear infinite}
@keyframes turn{to{transform:rotate(360deg)}}
.slip-bar{display:none;height:10px;margin:6px 0 0;background:url(/assets/pencil-bar.png) no-repeat left center / auto 100%;width:60%}
.slip-state[data-state="running"] ~ .slip-bar{display:block;animation:scribble 2.4s var(--ease) infinite alternate}
@keyframes scribble{from{width:35%}to{width:85%}}
.slip-state[data-state="done"]::after{content:"";display:inline-block;width:16px;height:14px;margin-left:6px;vertical-align:-1px;background:url(/assets/pencil-check.png) no-repeat center / contain}
.slip p{margin:0}
.slip-state[data-state="running"]{color:var(--navy)}
.slip-state[data-state="done"]{color:var(--olive)}
.slip-state[data-state="error"]{color:var(--rust)}
.slip-state[data-state="idle"]{color:var(--graphite)}
.slip-line{color:var(--graphite);overflow-wrap:anywhere}
.slip-when{font-family:var(--mono);font-size:11px;color:var(--pencil);margin-top:6px}
.slip-note{font-size:12px;color:var(--navy);margin-top:6px}
.btn-run{
  margin-top:10px;background:none;border:2px solid var(--ink);border-radius:3px;padding:5px 10px;
  font-weight:800;font-size:12px;letter-spacing:.02em;cursor:pointer;
  transition:transform var(--t-fast) var(--ease),background var(--t-fast);
}
.btn-run:hover{background:rgba(28,28,26,.06)}
.btn-run:active{transform:scale(.97)}
.btn-run[disabled]{opacity:.5;cursor:default}

/* ── 고무도장 ───────────────────────────────── */
/* 도장: 잉크 마스크는 요소보다 조금 큰 타일을 쓰고, 분류마다 다른 자리를 샘플링해 찍힘이 매번 다르게 */
.stamp{
  display:inline-block;padding:2px 8px;border:2.5px solid currentColor;border-radius:2px;
  font-weight:800;font-size:12.5px;letter-spacing:.05em;line-height:1.45;white-space:nowrap;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
  transform:rotate(-3deg);color:var(--slate);
  -webkit-mask-image:url(/assets/stamp-ink.webp);mask-image:url(/assets/stamp-ink.webp);
  -webkit-mask-size:110px;mask-size:110px;-webkit-mask-mode:luminance;mask-mode:luminance;
  -webkit-mask-position:var(--ink-pos,0 0);mask-position:var(--ink-pos,0 0);
}
.stamp + .stamp{margin-left:6px;transform:rotate(2.5deg)}
.stamp.t-공부{color:var(--olive);--ink-pos:-12px -30px;transform:rotate(-4deg)}
.stamp.t-사업{color:var(--navy);--ink-pos:-48px -8px;transform:rotate(-2deg)}
.stamp.t-트렌드{color:var(--rust);--ink-pos:-70px -52px;transform:rotate(3deg)}
.stamp.t-기타{color:var(--slate);--ink-pos:-25px -75px;transform:rotate(-1.5deg)}
.stamp.trust-high{color:var(--olive)} .stamp.trust-mid{color:var(--navy)} .stamp.trust-low{color:var(--rust)}
.btn-stamp{
  background:none;border:2px solid var(--ink);border-radius:3px;padding:6px 12px;font-weight:800;font-size:12.5px;cursor:pointer;
  transition:transform var(--t-fast) var(--ease),background var(--t-fast)
}
.btn-stamp:hover{background:rgba(28,28,26,.06)} .btn-stamp:active{transform:scale(.97)}

/* ── 색인 목록 ──────────────────────────────── */
.index{list-style:none;margin:0;padding:0}
.entry{position:relative;padding:14px 0 16px;border-bottom:1px solid rgba(28,28,26,.28)}
.entry-btn{
  all:unset;display:grid;grid-template-columns:34px 1fr auto;column-gap:10px;row-gap:2px;width:100%;cursor:pointer;
  align-items:start;
}
.entry-btn:focus-visible{outline:2px solid var(--navy);outline-offset:4px}
.entry-no{font-family:var(--mono);font-weight:700;font-size:14px;color:var(--graphite);padding-top:2px;text-align:center}
.entry-title{
  margin:0;font-weight:700;font-size:16px;line-height:1.4;letter-spacing:-.01em;
  background:linear-gradient(transparent 0 0);
}
.entry-one{grid-column:2;margin:0;color:var(--pencil);font-size:13.5px;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.entry-date{grid-column:2;font-family:var(--mono);font-size:12px;color:var(--graphite);margin-top:4px}
.entry-stamps{grid-column:3;grid-row:1 / span 3;align-self:center;text-align:right;padding-left:8px}
.entry[aria-current="true"] .entry-title{
  background:url(/assets/pencil-line.png) no-repeat left bottom / 100% 5px;padding-bottom:4px
}
.entry:hover .entry-title{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--pencil)}
/* 연필로 번호에 동그라미 — 링은 번호보다 크고 옅어서 숫자를 먹지 않는다 */
.entry-no{position:relative}
.entry[aria-current="true"] .entry-no{color:var(--ink)}
.entry[aria-current="true"] .entry-no::before{content:"";position:absolute;left:50%;top:50%;width:34px;height:34px;transform:translate(-50%,-52%);background:url(/assets/pencil-circle.png) no-repeat center / contain;opacity:.7;pointer-events:none}
.index-empty{color:var(--graphite);font-size:14px;margin:8px 0 24px;padding:12px 14px;border:1px dashed var(--pencil);border-radius:3px}

/* ── 채널 ───────────────────────────────────── */
.channels{margin-top:40px}
.rule-title{
  margin:0 0 10px;font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--graphite);
  padding-top:10px;background:url(/assets/pencil-double.png) no-repeat left top / 100% 6px
}
.ch-list{list-style:none;margin:0 0 12px;padding:0;font-size:14px}
.ch-list li{display:flex;align-items:baseline;gap:10px;padding:3px 0}
.ch-list b{font-weight:700}
.ch-list .since{font-family:var(--mono);font-size:12px;color:var(--pencil)}
.ch-list .del{all:unset;cursor:pointer;margin-left:auto;font-size:12px;color:var(--rust);border-bottom:1px solid transparent}
.ch-list .del:hover{border-bottom-color:var(--rust)}
.ch-list .empty{color:var(--pencil)}
.ch-form{display:flex;flex-wrap:wrap;gap:10px;align-items:end}
.ch-field{display:flex;flex-direction:column;gap:2px;font-size:11px;color:var(--graphite);font-weight:700;letter-spacing:.04em}
.ch-field:first-child{flex:1 1 180px}
.ch-field input{
  background:transparent;border:0;border-bottom:1.5px solid var(--graphite);padding:6px 2px;font-size:14px;font-weight:500;color:var(--ink);
  border-radius:0;min-width:0;width:100%
}
.ch-field input::placeholder{color:var(--pencil);font-weight:400}
.ch-field input:focus{outline:none;border-bottom-color:var(--navy);border-bottom-width:2px}
.ch-since input{width:150px}

/* ── 읽기 페이지 ────────────────────────────── */
.reader-empty{color:var(--pencil);font-size:15px;margin:60px 0 0;max-width:36ch}
.article{animation:settle var(--t-page) var(--ease)}
@keyframes settle{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.article-head{display:grid;grid-template-columns:1fr auto;gap:16px 24px;align-items:start}
.article h2{margin:0 0 10px;font-weight:800;font-size:36px;line-height:1.2;letter-spacing:-.025em;text-wrap:balance}
/* 사진 마운트: 실제 썸네일을 흑연 톤으로 종이에 붙인다 — 테이프는 실물 자산 */
.still{position:relative;width:180px;padding:8px 8px 12px;background:#fbfaf6;box-shadow:0 4px 10px -5px rgba(20,20,18,.5),0 1px 2px rgba(20,20,18,.2);transform:rotate(1.5deg);margin:6px 4px 0 0}
.still img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;filter:grayscale(1) contrast(1.15) brightness(1.05);mix-blend-mode:multiply;background:#ddd}
/* 마스킹 테이프: 반투명 베이지 + 찢긴 양끝(clip-path) + 결(repeating-gradient). 힉스필드 벡터 출력이 흰색으로 나와 CSS 도형으로 그림 */
.still::before{
  content:"";position:absolute;top:-11px;left:50%;width:84px;height:24px;transform:translateX(-50%) rotate(-4deg);
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 2px,transparent 2px 7px),
    linear-gradient(rgba(226,210,176,.78),rgba(214,196,158,.78));
  mix-blend-mode:multiply;
  clip-path:polygon(0 12%,3% 0,6% 10%,9% 2%,12% 9%,100% 0,97% 30%,100% 55%,96% 78%,100% 100%,10% 96%,6% 100%,3% 88%,0 100%);
}
.meta .open svg,.btn-run svg{width:12px;height:12px;vertical-align:-1px;margin-left:2px}
.btn-run svg{margin:0 4px 0 0;vertical-align:-1px}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 26px;font-size:13px;color:var(--graphite)}
.meta .date{font-family:var(--mono);font-size:12.5px}
.meta .open{font-weight:700;color:var(--navy);text-decoration:none;border-bottom:1.5px solid currentColor}
.meta .open:hover{color:var(--rust)}
.sec{margin:0 0 26px;padding-top:12px;background:url(/assets/pencil-double.png) no-repeat left top / 100% 7px}
.sec h3{margin:0 0 8px;font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--graphite)}
.sec p{margin:0 0 8px;max-width:70ch;line-height:1.75}
.sec ul{list-style:none;margin:0;padding:0;max-width:72ch}
.sec li{position:relative;padding-left:18px;margin:0 0 8px;line-height:1.7}
.sec li::before{content:"";position:absolute;left:2px;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--graphite)}
.sec .tier{display:inline-block;font-weight:800;font-size:11px;letter-spacing:.06em;color:#fff;background:var(--graphite);padding:0 6px;border-radius:2px;margin-right:6px;vertical-align:1px}
.tier-1{background:var(--rust)!important}.tier-2{background:var(--navy)!important}.tier-3{background:var(--olive)!important}
/* 타임코드 행: 여백선 옆 모노 열 */
.sec.tc ul{max-width:none}
.sec.tc li{display:grid;grid-template-columns:52px 1fr;column-gap:12px;padding-left:0;margin:0 0 6px}
.sec.tc li::before{display:none}
.sec.tc time a{
  font-family:var(--mono);font-size:13px;font-weight:700;color:var(--navy);text-decoration:none;border-bottom:1px solid rgba(47,75,124,.4);
}
.sec.tc time a:hover{color:var(--rust);border-bottom-color:currentColor}
.sec.trust .stamp{margin-right:8px;vertical-align:2px}
.transcript{margin-top:8px;border-top:1px dashed var(--pencil);padding-top:10px}
.transcript summary{cursor:pointer;font-weight:700;font-size:13px;color:var(--graphite);list-style:none;display:flex;align-items:center;gap:6px}
.transcript summary::-webkit-details-marker{display:none}
.transcript summary svg{width:10px;height:10px;transition:transform var(--t-fast) var(--ease)}
.transcript[open] summary svg{transform:rotate(90deg)}
.transcript .missing{margin-top:8px}
.transcript pre{
  margin:10px 0 0;font-family:var(--mono);font-size:12.5px;line-height:1.6;white-space:pre-wrap;color:var(--graphite);
  max-height:60vh;overflow:auto;padding-right:8px
}
.article .missing{color:var(--pencil);border:1px dashed var(--pencil);padding:10px 12px;border-radius:3px;max-width:44ch}

/* ── 오른쪽 가장자리 색인 탭 ─────────────────── */
.tabs{position:absolute;right:-30px;top:72px;display:flex;flex-direction:column;gap:14px;z-index:2}
.tab{
  all:unset;cursor:pointer;writing-mode:vertical-rl;padding:16px 7px 16px 9px;min-height:72px;
  background:var(--tab,var(--slate));color:#f7f6f1;font-weight:800;font-size:12.5px;letter-spacing:.14em;
  border-radius:0 5px 5px 0;box-shadow:2px 3px 6px -2px rgba(20,20,18,.5);
  transform:translateX(0);transition:transform var(--t-fast) var(--ease),filter var(--t-fast);
  filter:saturate(.75);
}
.tab:hover{transform:translateX(-3px)}
.tab[aria-pressed="true"]{transform:translateX(-8px);filter:none;box-shadow:3px 4px 10px -3px rgba(20,20,18,.6)}
.tab:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.tab.t-전체{--tab:var(--ink)} .tab.t-공부{--tab:var(--olive)} .tab.t-사업{--tab:var(--navy)} .tab.t-트렌드{--tab:var(--rust)} .tab.t-기타{--tab:var(--slate)}

/* 좁은 화면용 칩 — 데스크톱에선 숨김 */
.chips{display:none}

/* ── 좁은 화면: 한 페이지 레저, 제자리 펼침 ──── */
@media (max-width:920px){
  body{padding:12px}
  .book{grid-template-columns:1fr;height:auto;min-height:calc(100vh - 24px)}
  .page{overflow:visible}
  .page{padding:24px 18px 40px calc(var(--gutter) - 12px)}
  :root{--gutter:44px}
  .page-index{border-radius:4px;box-shadow:none}
  .page-read{display:none}
  .tabs{display:none}
  .chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
  .chip{
    all:unset;cursor:pointer;padding:3px 10px;border:2px solid var(--tab,var(--slate));color:var(--tab,var(--slate));
    border-radius:3px;font-weight:800;font-size:12px;letter-spacing:.04em;
    -webkit-mask-image:url(/assets/stamp-ink.webp);mask-image:url(/assets/stamp-ink.webp);
    -webkit-mask-size:230px;mask-size:230px;-webkit-mask-mode:luminance;mask-mode:luminance;
  }
  .chip[aria-pressed="true"]{background:var(--tab,var(--slate));color:#f7f6f1}
  .chip.t-전체{--tab:var(--ink)} .chip.t-공부{--tab:var(--olive)} .chip.t-사업{--tab:var(--navy)} .chip.t-트렌드{--tab:var(--rust)} .chip.t-기타{--tab:var(--slate)}
  .masthead{flex-direction:column;align-items:stretch;margin-bottom:22px}
  .slip{flex:none;transform:rotate(-1deg);margin-top:18px;max-width:320px}
  .entry-btn{grid-template-columns:28px 1fr}
  .entry-stamps{grid-column:2;grid-row:auto;text-align:left;padding:6px 0 0;align-self:start}
  .stamp{transform:rotate(-2deg)}
  /* 제자리 펼침: 선택된 항목 아래에 읽기 페이지가 들어온다 */
  .entry .reader{margin:14px 0 4px;padding:14px 0 6px;border-top:1px dashed var(--pencil)}
  /* 제자리 펼침에선 색인 행 제목이 이미 위에 있다 — 본문 제목은 시각적으로만 숨김 */
  .entry .reader .article h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .article-head{grid-template-columns:1fr}
  .still{width:150px;margin:0 0 8px}
  .reader-empty{display:none}
}
@media (max-width:480px){
  .ch-since input{width:100%}
  .sec.tc li{grid-template-columns:46px 1fr}
}
@media (prefers-reduced-motion:reduce){
  .article{animation:none}
  .slip-bar,.slip-state[data-state="running"]::before{animation:none}
  .tab,.btn-run,.btn-stamp{transition:none}
}