/* 5dnotes.com — 채널 화풍 '빈 종이 위의 재질 도해'(화풍_정의와_작가비교.md)를 웹으로.
   바탕 #FFFAE8 · 이름표 = 타자체 이탤릭(TeX Gyre Cursor) · 글 = 명조(Noto Serif KR) · 화면의 대부분은 여백. */

@font-face{font-family:"5DN Serif";src:url("/assets/fonts/serif-kr.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"5DN Type";src:url("/assets/fonts/type-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
  --paper:#FFFAE8;   /* 바탕(도안 32장 전부) */
  --ink:#1B1915;     /* 글 */
  --label:#080707;   /* 라벨 잉크(쇼펜하우어 편) */
  --stone:#6B665D;   /* 버금 글: 니체 편 돌색 #7A756C을 조금 짙게(바탕 대비 5.5:1) */
  --ring:#1E245D;    /* 막의 남색 — 링크에 손을 대면 */
  --khaki:#CDC7A7;   /* 서명 원판 */
  --line:rgba(8,7,7,.28);
  --serif:"5DN Serif","Noto Serif KR","Noto Serif CJK KR","Nanum Myeongjo","AppleMyungjo","Batang",serif;
  --type:"5DN Type","Courier New",Courier,"Nimbus Mono PS",monospace;
  --pad:clamp(16px,4vw,48px);
  color-scheme:light;
}
*{box-sizing:border-box}
html{background:var(--paper);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:17px;line-height:1.85;word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
main{flex:1;padding:0 var(--pad)}
img{display:block;max-width:100%;height:auto}
.type{font-family:var(--type),var(--serif);font-style:italic;font-weight:400;letter-spacing:0}
a{color:inherit;text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:.24em;text-decoration-color:var(--line);transition:color .2s,text-decoration-color .2s}
a:hover{color:var(--ring);text-decoration-color:var(--ring)}
a:focus-visible{outline:2px solid var(--ring);outline-offset:4px;border-radius:2px}
::selection{background:var(--khaki);color:var(--label)}

/* 머리: 서명 원판 + 이름 */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px var(--pad)}
.brand{margin:0;font-size:inherit;font-weight:400;line-height:1}
.brand a{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{width:44px;height:44px}
.brand .ko{font-size:17px;letter-spacing:.01em}
.brand .en{font-size:15px;color:var(--stone)}
.top .yt{font-size:15px;text-decoration:none}
.top .yt:hover{text-decoration:underline}

/* 차원의 사다리: 한 칸 = 배너의 간격. 칸이 하나씩 놓인다(한 번에 한 속성). */
.ladder{list-style:none;margin:clamp(24px,7vh,88px) auto 0;padding:0;max-width:1008px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.ladder li{display:flex;flex-direction:column;align-items:center;animation:appear .9s cubic-bezier(.2,.6,.2,1) both;animation-delay:calc(var(--i) * 120ms + 120ms)}
.ladder img{width:100%}
.ladder span{margin-top:-.1em;font-size:clamp(14px,1.6vw,20px);line-height:1;color:var(--label)}
@keyframes appear{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* 소개(은석의 문장, 유튜브 설명과 같음) */
.lead{max-width:52em;margin:clamp(40px,7vh,72px) auto 0;text-align:center;font-size:clamp(16.5px,1.45vw,19px);line-height:2.05}
.lead p{margin:0;text-wrap:balance}
.lead-en{max-width:37em;margin:28px auto 0;text-align:center;font-size:15px;line-height:1.8;color:var(--stone);text-wrap:pretty}

/* 편·연락: 왼쪽에 이름표, 오른쪽에 내용 */
.note{max-width:860px;margin:clamp(88px,15vh,160px) auto 0;display:grid;grid-template-columns:150px minmax(0,1fr);gap:0 32px;align-items:start}
.note + .note{margin-top:clamp(56px,9vh,96px)}
.note h2{margin:0;font-size:17px;line-height:1.6;color:var(--label)}
.episodes{list-style:none;margin:0;padding:0}
.episodes li + li{margin-top:36px}
.ep{display:grid;grid-template-columns:clamp(150px,20vw,210px) minmax(0,1fr);gap:24px;align-items:center;text-decoration:none}
.ep img{width:100%}
.ep-body{display:flex;flex-direction:column;gap:6px}
.ep-label{font-size:16px;color:var(--label)}
.ep-title{font-size:18px;line-height:1.6;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.24em;text-decoration-color:var(--line);transition:color .2s,text-decoration-color .2s}
.ep:hover .ep-title{color:var(--ring);text-decoration-color:var(--ring)}
.ep-meta{font-size:14px;color:var(--stone)}
.contact{margin:0;font-size:18px;line-height:1.6}
.contact a{font-family:var(--type);font-style:italic;overflow-wrap:anywhere}

/* 발 */
.bottom{display:flex;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;padding:clamp(96px,16vh,168px) var(--pad) 24px;font-size:13px;color:var(--stone)}
.bottom a{text-decoration:none}
.bottom a:hover{text-decoration:underline}

/* 없는 페이지(404): 점 하나와 이름표 */
.nf main{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding-bottom:10vh}
.nf .scene{position:relative;width:min(220px,56vw)}
.nf .scene .type{position:absolute;top:22%;left:68%;font-size:20px;color:var(--label);white-space:nowrap}
.nf p{margin:8px 0 0}

@media (max-width:640px){
  body{font-size:16px}
  .ladder{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:12px;max-width:420px}
  .lead p + p{margin-top:.5em}
  .note{grid-template-columns:1fr;gap:12px}
  .ep{grid-template-columns:112px minmax(0,1fr);gap:16px}
  .ep-title{font-size:17px}
}
@media (max-width:380px){.brand .en{display:none}}
@media (prefers-reduced-motion:reduce){.ladder li{animation:none}a,.ep-title{transition:none}}