/* ==========================================================================
   insightimes.com — design system
   구조: OpenAI 계열(유동 타이포 · 잉크 알파 사다리 · 알약 · 하드 그리드)
   서체: Poppins + Pretendard + Lora
   기본 다크, [data-theme="light"]로 라이트 전환
   ========================================================================== */

/* --------------------------------------------------------------- 1. 토큰 */
:root{
  color-scheme: dark;

  /* 캔버스와 잉크
     순검정(#000)은 장례식장 같다. 파랑을 아주 조금 섞은 짙은 회색으로 바꿨다.
     같은 절제인데 공기가 돈다 (2026-09-09 성동님)

     다만 글자가 회색으로 가라앉아 있었다. 폰을 밝은 데서 보면 더 그렇다.
     바탕은 검정 쪽으로 더 내리고 글자는 흰색 쪽으로 더 올렸다.
     본문이 82%에서 93%로 간다. 읽히는 것이 먼저다 (2026-09-11 성동님) */
  --canvas:#07090d;
  --canvas-sub:#101620;
  --canvas-raise:#18202b;
  --hairline:rgb(255 255 255/.17);
  --ink-100:rgb(255 255 255/1);
  --ink-80:rgb(255 255 255/.93);
  --ink-60:rgb(255 255 255/.76);
  --ink-44:rgb(255 255 255/.6);
  --ink-12:rgb(255 255 255/.18);
  --ink-4:rgb(255 255 255/.07);
  /* 본문 강조에 까는 띠. 형광펜보다 절제되고 볼드보다 확실하다 */
  /* 밑색이 배경에 묻혀 밑줄이 있는지도 몰랐다. 하늘색 쪽으로 맑게 올린다
     (2026-09-11 성동님: "상쾌한 하늘색") */
  --accent-wash:rgb(56 189 248/.62);
  --accent-line:rgb(125 211 252/.95);

  /* 액센트. 파랑 하나로 버티지 않고 따뜻한 색을 하나 더 둔다 */
  --brand:#4d9dff;
  --brand-2:#6ee7d5;
  --brand-text:#a9cfff;
  --brand-soft:#10263f;
  --warm:#ff9a62;
  --cta-bg:#fff; --cta-fg:#07090d;
  --link:#6aabff; --link-ui:#6aabff;

  /* 갈래 색: 점 하나와 유형 태그에만 쓴다 */
  --cat-money:#3ddc97;
  --cat-life:#ff9a7b;
  --cat-world:#4d9dff;
  --cat-people:#b48bff;
  --cat-culture:#ffc857;
  --cat-pop:#ff77ab;
  --cat-tech:#4fd6ec;
  --cat-sports:#8fe36a;
  /* 옛 이름을 쓰던 자리들이 아직 있다. 끊기지 않게 이어 둔다 */
  --cat-plan:var(--cat-money);
  --cat-book:var(--cat-culture);

  /* 유동 타이포 (375px -> 1440px 보간) */
  --fluid:((100vw - 23.4375rem)/66.5625);
  --t-display:clamp(2.75rem, calc(2.75rem + 3.25 * var(--fluid)), 6rem);
  --t-h1:clamp(2rem, calc(2rem + 1.75 * var(--fluid)), 3.75rem);
  --t-h2:clamp(1.625rem, calc(1.625rem + 1 * var(--fluid)), 2.625rem);
  --t-h3:clamp(1.3125rem, calc(1.3125rem + .4375 * var(--fluid)), 1.75rem);
  --t-h4:clamp(1.0625rem, calc(1.0625rem + .1875 * var(--fluid)), 1.25rem);
  --t-body:1.0625rem;
  /* 한 단계 올린다. 너무 크면 이 줄만 예전 값으로 되돌리면 된다.
     예전 값: clamp(1.0625rem, calc(1.0625rem + .25 * var(--fluid)), 1.3125rem)
     (2026-09-11 성동님) */
  --t-read:clamp(1.1875rem, calc(1.1875rem + .25 * var(--fluid)), 1.4375rem);
  --t-small:.875rem;
  --t-micro:.75rem;

  /* 레이아웃 */
  --container:78rem;
  --measure:50rem;
  --gutter:clamp(1.25rem,4vw,2.5rem);
  --header-h:3.75rem;
  --sec-gap:clamp(4.5rem,9vw,7.5rem);
  --grid-gap:clamp(1.75rem,2.4vw,2.25rem);
  /* 카드와 카드 사이는 카드 안쪽보다 훨씬 넓어야 한다.
     그래야 사진이 위 기사 것인지 아래 기사 것인지 헷갈리지 않는다 (2026-09-09 성동님) */
  --card-gap:clamp(3.25rem,7vw,4.5rem);
  --card-inner:.75rem;

  /* 형태와 모션 */
  --r-pill:9999px;
  --r-card:.75rem;
  --r-media:.5rem;
  --r-xs:.25rem;
  --ease:cubic-bezier(.4,0,.2,1);
  --dur-fast:.12s; --dur:.22s; --dur-slow:.36s;

  /* 서체 */
  --font-display:"Poppins","Pretendard Variable",Pretendard,system-ui,sans-serif;
  --font-sans:"Pretendard Variable",Pretendard,Inter,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --font-serif:"Lora",Georgia,serif;
}

[data-theme="light"]{
  color-scheme: light;
  /* 밝은 지면도 같은 이유로 글자를 더 검게 내렸다 (2026-09-11 성동님) */
  --canvas:#fff;
  --canvas-sub:#f4f6f9;
  --canvas-raise:#eaeef4;
  --hairline:rgb(12 16 22/.17);
  --ink-100:rgb(12 16 22/1);
  --ink-80:rgb(12 16 22/.92);
  --ink-60:rgb(12 16 22/.72);
  --ink-44:rgb(12 16 22/.56);
  --ink-12:rgb(12 16 22/.16);
  --ink-4:rgb(12 16 22/.05);
  --accent-wash:rgb(14 165 233/.34);
  --accent-line:rgb(2 132 199/.95);
  --brand:#1f6fe5;
  --brand-2:#0f9e8a;
  --brand-text:#1858bd;
  --brand-soft:#e8f2ff;
  --warm:#d2691e;
  --cta-bg:#07090d; --cta-fg:#fff;
  --link:#1858bd; --link-ui:#1f6fe5;
  --cat-money:#0f9e63;
  --cat-life:#d2603c;
  --cat-world:#1f6fe5;
  --cat-people:#7b4fd6;
  --cat-culture:#b57d12;
  --cat-pop:#d43f7d;
  --cat-tech:#0e91ad;
  --cat-sports:#4a9c22;
  --cat-plan:var(--cat-money);
  --cat-book:var(--cat-culture);
}

/* --------------------------------------------------------------- 2. 베이스 */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--canvas);
  color:var(--ink-100);
  font-family:var(--font-sans);
  font-size:var(--t-body);
  line-height:1.7;
  letter-spacing:-.011em;
  word-break:keep-all;
  overflow-wrap:anywhere;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background var(--dur-slow) var(--ease),color var(--dur-slow) var(--ease);
}
/* ★ 한글 제목에서 balance 는 뜻이 아니라 길이를 맞춘다. ★
   성동님: "한 문장에서 굳이 줄 바꿈이 어색한 부분에서 발생한다. 왜 이럴까?"
   (2026-09-19) — '머스크의 진짜 베팅은 LLM이 / 아니다' 가 그 예다.

   balance 는 줄 길이를 고르게 나누는 것이 일이다. 한국어 문장은 서술어가
   끝에 오므로, 반반으로 가르면 하필 그 서술어 바로 앞이 잘린다. 'LLM이'
   와 '아니다' 는 한 덩어리인데 자는 그것을 모른다.
   pretty 는 앞줄을 채울 수 있는 만큼 채우고 마지막 줄만 돌본다. 읽는
   차례와 같은 쪽이라 한글에서는 이쪽이 낫다. 긴 제목(h1·h2)은 pretty,
   두세 낱말로 끝나는 짧은 이름표(h3·h4)는 balance 가 보기 좋으므로 남긴다 */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:500;line-height:1.22;margin:0;text-wrap:balance}
h1,h2{text-wrap:pretty}
h1{font-size:var(--t-h1);letter-spacing:-.032em}
h2{font-size:var(--t-h2);letter-spacing:-.026em}
h3{font-size:var(--t-h3);letter-spacing:-.018em;line-height:1.3}
h4{font-size:var(--t-h4);letter-spacing:-.012em;line-height:1.4}
p{margin:0 0 1.5rem;text-wrap:pretty}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
hr{border:0;border-top:1px solid var(--hairline);margin:var(--sec-gap) 0}
:focus-visible{outline:2px solid var(--link-ui);outline-offset:3px;border-radius:var(--r-xs)}
::selection{background:var(--brand);color:#fff}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--canvas);
  padding:.75rem 1rem;border:1px solid var(--hairline);border-radius:var(--r-xs)}
.skip:focus{left:1rem;top:1rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* hidden 을 붙였는데도 보이는 것을 막는다.
   .drop-busy 처럼 display 를 지정한 규칙이 [hidden] 과 힘이 같아 이겨 버렸다.
   (2026-09-06: 대표 이미지 칸에 '올리는 중…' 이 늘 떠 있던 원인) */
[hidden]{display:none !important}

/* --------------------------------------------------------------- 3. 레이아웃 */
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.measure{max-width:var(--measure)}
.band{padding-block:var(--sec-gap)}
.band-sub{background:var(--canvas-sub)}
.stack{display:flex;flex-direction:column;gap:var(--sec-gap)}

/* --------------------------------------------------------------- 4. 헤더 */
.nav{
  position:sticky;top:0;z-index:60;height:var(--header-h);display:flex;align-items:center;
  isolation:isolate;
  background:color-mix(in srgb,var(--canvas) 76%,transparent);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--hairline);
}
.nav-inner{display:flex;align-items:center;gap:1.75rem;width:100%}
.wordmark{
  font-family:var(--font-display);font-size:1.125rem;font-weight:600;
  letter-spacing:-.03em;line-height:1;display:inline-flex;align-items:baseline;gap:.05em;
}
/* 로고. 'Times' 가 회색으로 가라앉아 제호 전체가 죽어 보였다.
   두 번째 낱말에 색을 준다. 이 색이 이 매체의 색이다 (2026-09-09 성동님) */
.wordmark em{
  font-style:normal;
  background:linear-gradient(92deg,var(--brand) 0%,var(--brand-2) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--brand);
  transition:filter var(--dur) var(--ease);
}
.wordmark:hover em{filter:brightness(1.15)}
/* 색을 못 칠하는 브라우저에서는 그냥 브랜드색으로 */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .wordmark em{-webkit-text-fill-color:var(--brand);color:var(--brand)}
}
/* 머리 맨 위에 머리카락 굵기의 색 띠. 제호와 같은 색이라 매체의 표식이 된다 */
.nav::before{
  content:'';position:absolute;inset:0 0 auto 0;height:2px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2),var(--warm));
  opacity:.9;
}
.nav-links{display:flex;align-items:center;gap:1.25rem}
.nav-link{font-size:var(--t-small);font-weight:500;color:var(--ink-60);
  transition:color var(--dur-fast) var(--ease)}
.nav-link:hover,.nav-link[aria-current="page"]{color:var(--ink-100)}
.spacer{flex:1}
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.25rem;height:2.25rem;border-radius:var(--r-pill);color:var(--ink-60);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.icon-btn:hover{background:var(--ink-4);color:var(--ink-100)}
.icon-btn svg{width:1.125rem;height:1.125rem;fill:none;stroke:currentColor;stroke-width:1.6}
.theme-btn .moon{display:none}
[data-theme="light"] .theme-btn .moon{display:block}
[data-theme="light"] .theme-btn .sun{display:none}

/* --------------------------------------------------------------- 5. 버튼 */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  height:2.25rem;padding-inline:1.125rem;border-radius:var(--r-pill);
  font:500 var(--t-small)/1 var(--font-sans);letter-spacing:-.01em;white-space:nowrap;
  cursor:pointer;
  transition:background var(--dur) var(--ease),opacity var(--dur) var(--ease),
             color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.btn-solid{background:var(--cta-bg);color:var(--cta-fg)}
.btn-solid:hover{opacity:.84}
.btn-ghost{background:var(--ink-4);color:var(--ink-100);box-shadow:inset 0 0 0 1px var(--ink-12)}
.btn-ghost:hover{background:var(--ink-12)}
.btn-brand{background:var(--brand);color:#fff}
.btn-brand:hover{opacity:.88}
.btn-lg{height:2.75rem;padding-inline:1.5rem;font-size:var(--t-body)}

/* --------------------------------------------------------------- 6. 조각 */
.eyebrow{display:inline-block;font-size:var(--t-small);font-weight:500;color:var(--brand-text)}
.meta{font-size:var(--t-small);color:var(--ink-60)}
.lede{
  font-weight:400;color:var(--ink-80);
  font-size:clamp(1.125rem,calc(1.125rem + .25 * var(--fluid)),1.4375rem);
  line-height:1.6;letter-spacing:-.02em;
}
.display{font-family:var(--font-display);font-size:var(--t-display);font-weight:500;
  line-height:1.03;letter-spacing:-.035em;margin:0}
.display i{font-style:normal;font-weight:400;color:var(--brand)}
.display i:lang(en){font-family:var(--font-serif);font-style:italic}
.rule{border-top:2px solid var(--brand);width:2.5rem;margin:0 0 1.25rem}
.tag{
  display:inline-flex;align-items:center;gap:.375rem;height:1.75rem;padding-inline:.75rem;
  border:1px solid var(--ink-12);border-radius:var(--r-pill);
  font-size:var(--t-micro);font-weight:500;color:var(--ink-60);
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
a.tag:hover{border-color:var(--ink-44);color:var(--ink-100)}
/* 기사 머리의 태그 줄. 좁은 화면에서는 줄이 바뀐다 (2026-09-13 성동님) */
.tagrow{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.25rem 0 0}
.tagrow .tag{text-decoration:none}
@media (max-width:480px){.tagrow{gap:.375rem}}
.dot{width:.4rem;height:.4rem;border-radius:50%;background:var(--ink-44);flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb,currentColor 0%,transparent)}

/* --------------------------------------------------------------- 7. 페이지 헤드 */
.pagehead{padding-block:clamp(2.5rem,6vw,4.5rem) clamp(1.5rem,3vw,2.25rem)}
.pagehead .display{margin-bottom:1.25rem}
.pagehead .lede{max-width:34rem}

/* 필터 바 */
.filterbar{
  position:sticky;top:var(--header-h);z-index:50;
  display:flex;align-items:center;gap:1rem;
  padding-block:.875rem;
  background:color-mix(in srgb,var(--canvas) 88%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hairline);
}
.filters{display:flex;gap:.25rem;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.filters::-webkit-scrollbar{display:none}
.filter{
  padding:.375rem .75rem;border-radius:var(--r-pill);
  font-size:var(--t-small);font-weight:500;color:var(--ink-60);white-space:nowrap;
  transition:color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
}
.filter:hover{color:var(--ink-100)}
.filter[aria-pressed="true"]{color:var(--ink-100);background:var(--ink-4);
  box-shadow:inset 0 0 0 1px var(--ink-12)}
.viewtoggle{display:flex;gap:.125rem;flex:none}
.viewtoggle .icon-btn[aria-pressed="true"]{background:var(--ink-12);color:var(--ink-100)}
.sortbtn{display:inline-flex;align-items:center;gap:.375rem;font-size:var(--t-small);
  font-weight:500;color:var(--ink-60);padding:.375rem .5rem;border-radius:var(--r-xs)}
.sortbtn:hover{color:var(--ink-100)}

/* --------------------------------------------------------------- 8. 카드 그리드 */
.grid{
  display:grid;
  row-gap:var(--card-gap);
  column-gap:var(--grid-gap);
  grid-template-columns:repeat(4,minmax(0,1fr));
  padding-top:clamp(2.5rem,5vw,3.5rem);
}
/* 한 기사는 한 덩어리로 보여야 한다. 안쪽은 좁게, 바깥쪽은 넓게 */
.card{display:flex;flex-direction:column;gap:var(--card-inner);min-width:0}
.card-body{display:flex;flex-direction:column;gap:.5rem;min-width:0}
.card-media{
  position:relative;overflow:hidden;border-radius:var(--r-media);
  aspect-ratio:4/3;background:var(--canvas-raise);
}
.card-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgb(0 0 0/.35));
  opacity:0;transition:opacity var(--dur) var(--ease);
}
.card:hover .card-media::after{opacity:1}
.card-media .art{position:absolute;inset:0;transition:transform var(--dur-slow) var(--ease)}
.card:hover .art{transform:scale(1.035)}
.card-title{
  font-family:var(--font-display);font-weight:500;font-size:var(--t-h4);
  line-height:1.4;letter-spacing:-.015em;margin:0;
  transition:color var(--dur-fast) var(--ease);
}
.card:hover .card-title{color:var(--brand-text)}
.card-media + *{margin-top:.375rem}
/* 꼬리표 한 줄: 갈래 · 날짜 · (분) · 유형 딱지. 제목 아래에 조용히 */
.card-meta{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem .75rem;
  font-size:var(--t-small);color:var(--ink-44);margin:0}
.card-meta > * + *::before{content:'';display:none}
.card-meta .type{margin-left:.125rem;height:1.375rem;padding-inline:.5rem;
  font-size:.6875rem;letter-spacing:.06em}
/* 갈래 이름에 제 색을 준다. 점 하나만으로는 색이 일하지 않는다 */
.card-meta .cat{display:inline-flex;align-items:center;gap:.4375rem;
  color:var(--sec-c,var(--ink-80));font-weight:500}
/* 카드의 리드문. 제목 아래 딱 두 줄, 넘치면 말줄임표.
   제목만 놓인 카드는 무슨 글인지 알 수 없었다 (2026-09-10 성동님) */
.card-excerpt{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
  overflow:hidden;margin:.125rem 0 0;max-width:38rem;
  font-size:var(--t-body);line-height:1.55;color:var(--ink-60);
}

/* 피처 카드: 3열 x 2행 */
.card--feature{grid-column:span 3;grid-row:span 2}
.card--feature .card-media{aspect-ratio:16/9}
.card--feature .card-title{
  font-size:var(--t-h2);line-height:1.18;letter-spacing:-.026em;
}
.card--feature .card-excerpt{line-height:1.6}

/* 리스트 뷰 */
.grid[data-view="list"]{grid-template-columns:1fr;gap:0;padding-top:0}
.grid[data-view="list"] .card{
  flex-direction:row;align-items:center;gap:1.25rem;
  padding-block:1.25rem;border-bottom:1px solid var(--hairline);
  grid-column:auto;grid-row:auto;
}
.grid[data-view="list"] .card-media{flex:none;width:clamp(5rem,14vw,8.5rem);aspect-ratio:16/10}
.grid[data-view="list"] .card-title{font-size:var(--t-h4);line-height:1.4}
.grid[data-view="list"] .card-excerpt{display:none}
.grid[data-view="list"] .card-body{display:flex;flex-direction:column;gap:.375rem;min-width:0}

.card[hidden]{display:none}
.loadmore{display:flex;justify-content:center;padding-top:clamp(2.5rem,5vw,4rem)}

/* --------------------------------------------------------------- 9. 플레이스홀더 아트 */
.art{background-color:var(--canvas-raise)}
.art-1{background-image:radial-gradient(120% 120% at 18% 12%,#2b4a7a 0%,#12203a 45%,#070b14 100%)}
.art-2{background-image:radial-gradient(110% 110% at 82% 18%,#7a4a2b 0%,#3a2318 48%,#0d0906 100%)}
.art-3{background-image:radial-gradient(120% 120% at 30% 85%,#2f5f3a 0%,#17301d 50%,#08110a 100%)}
.art-4{background-image:radial-gradient(120% 120% at 70% 20%,#4a3a72 0%,#241c38 50%,#0b0912 100%)}
.art-5{background-image:radial-gradient(120% 120% at 20% 30%,#6b5a2a 0%,#332c14 50%,#100e06 100%)}
.art-6{background-image:radial-gradient(120% 120% at 78% 78%,#2a5a63 0%,#142c31 50%,#070f11 100%)}
.art-7{background-image:linear-gradient(135deg,#1b1b1b 0%,#2e2e2e 50%,#101010 100%)}
.art-8{background-image:radial-gradient(120% 120% at 50% 0%,#3b4b6b 0%,#1a2233 55%,#080a10 100%)}
.art::before{
  content:"";position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(90deg,rgb(255 255 255/.05) 0 1px,transparent 1px 34px),
    repeating-linear-gradient(0deg,rgb(255 255 255/.05) 0 1px,transparent 1px 34px);
  mask-image:radial-gradient(120% 120% at 50% 50%,#000 0%,transparent 72%);
  -webkit-mask-image:radial-gradient(120% 120% at 50% 50%,#000 0%,transparent 72%);
}

/* ---------------------------------------------------------------------------
   낱말 얹은 빈 판.
   사진을 못 구한 기사는 사진 없이 낸다. 다만 목록에서 빈 칸이 '엑박'처럼
   보이면 안 된다. 바탕색 위에 이 기사가 무엇에 관한 것인지 한 낱말을 얹는다
   (2026-09-13 성동님).
   --------------------------------------------------------------------------- */
.art-word{
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  gap:.375rem;padding:clamp(.875rem,4%,1.5rem);
  text-align:left;
}
.art-word > *{position:relative;z-index:1}
.art-sec{
  font-size:var(--t-micro,.6875rem);letter-spacing:.14em;text-transform:uppercase;
  color:rgb(255 255 255/.52);
}
.art-key{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1rem,2.1vw + .55rem,1.75rem);line-height:1.15;
  letter-spacing:-.01em;color:rgb(255 255 255/.92);
  text-wrap:balance;
  /* 긴 낱말이 판을 넘지 않게 */
  overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
}
/* 낱말 아래 짧은 밑줄. 지면이라는 표시다 */
.art-key::after{
  content:'';display:block;width:1.75rem;height:2px;margin-top:.5rem;
  background:rgb(255 255 255/.34);
}
/* 작은 자리(레일 썸네일, 목록 보기)에서는 낱말만, 더 작게 */
.rail-thumb .art-word,
.grid[data-view="list"] .art-word{padding:.5rem .625rem;gap:0}
.rail-thumb .art-key,
.grid[data-view="list"] .art-key{font-size:.75rem;-webkit-line-clamp:3}
.rail-thumb .art-key::after,
.grid[data-view="list"] .art-key::after{display:none}
/* 큰 판에서는 조금 더 크게 */
.hero-card .art-key,
.card--feature .art-key{font-size:clamp(1.25rem,2.6vw + .6rem,2.25rem)}

/* --------------------------------------------------------------- 10. 뉴스레터 */
.subscribe{
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  background:var(--canvas-sub);
}
.subscribe-inner{display:grid;gap:2rem;grid-template-columns:minmax(0,1fr) minmax(0,22rem);
  align-items:center}
.subscribe h2{margin-bottom:.75rem}
.subscribe p{color:var(--ink-60);margin:0;max-width:30rem}
.field{display:flex;gap:.5rem}
.input{
  flex:1;min-width:0;height:2.75rem;padding-inline:1rem;
  border-radius:var(--r-pill);border:1px solid var(--ink-12);
  background:var(--canvas);color:var(--ink-100);font:400 var(--t-small)/1 var(--font-sans);
  transition:border-color var(--dur) var(--ease);
}
.input::placeholder{color:var(--ink-44)}
.input:focus{border-color:var(--brand);outline:none}
/* 안 보일 만큼 작았다. 읽으라고 쓴 안내면 읽히는 크기여야 한다
   (2026-09-11 성동님) */
.field-note{font-size:var(--t-small);color:var(--ink-60);margin:.625rem 0 0;line-height:1.6}

/* --------------------------------------------------------------- 11. 푸터 */
.footer{padding-block:var(--sec-gap) 3rem;border-top:1px solid var(--hairline)}
/* 칸이 셋인데 넷을 잡아 두어 오른쪽 한 칸이 늘 비어 있었다 (2026-09-09) */
.footer-grid{display:grid;gap:2.5rem;align-items:start;
  grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr))}
.footer h4{font-size:var(--t-small);color:var(--ink-44);font-weight:500;margin-bottom:1rem;
  letter-spacing:0}
.footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.625rem}
.footer li a{font-size:var(--t-small);color:var(--ink-80);transition:color var(--dur-fast) var(--ease)}
.footer li a:hover{color:var(--ink-100)}
.footer-bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--hairline);
  font-size:var(--t-small);color:var(--ink-44)}
.footer-note{max-width:24rem;font-size:var(--t-small);color:var(--ink-60);margin:1rem 0 0}

/* --------------------------------------------------------------- 12. 기사 상세 */
.progress{position:fixed;top:0;left:0;height:2px;background:var(--brand);z-index:70;width:0}
.article-grid{
  display:grid;gap:clamp(1.5rem,3vw,2.5rem);
  grid-template-columns:minmax(0,1fr) minmax(0,17.5rem);
  padding-block:clamp(2.5rem,6vw,4rem) var(--sec-gap);
}
.article-main{min-width:0}
.article-head{padding-bottom:0}
.article-head .eyebrow{margin-bottom:1rem}
.article-title{font-size:var(--t-h1);letter-spacing:-.032em;line-height:1.15;max-width:26ch}
.article-lede{margin-top:1.5rem;max-width:36rem}
.byline{display:flex;align-items:center;gap:.75rem;margin-top:2rem;
  font-size:var(--t-small);color:var(--ink-60);flex-wrap:wrap}
.avatar{width:2.25rem;height:2.25rem;border-radius:50%;flex:none;
  background:linear-gradient(135deg,#3b4b6b,#1a2233);
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:.8125rem;font-weight:600;color:#fff}
.byline strong{color:var(--ink-100);font-weight:500}
.byline .sep{width:1px;height:.875rem;background:var(--ink-12)}
/* 머리에는 날짜 하나만 선다. 이름이 빠져 허전하지 않도록 위 여백을 줄인다
   (2026-09-15 성동님) */
.byline-date{margin-top:1.25rem;gap:.5rem}
/* 기사 맨 아래 한 줄. 눈에 띄되 본문을 가리지 않게 (2026-09-15 성동님) */
.desk-sign{margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid var(--ink-12);
  font-size:var(--t-small);color:var(--ink-60);letter-spacing:.01em}
.hero-figure{margin:clamp(2rem,4vw,3rem) 0 0}
.hero-figure .card-media{aspect-ratio:21/9;border-radius:var(--r-media)}
figure{margin:0}
figcaption{margin-top:.75rem;font-size:var(--t-small);line-height:1.55;color:var(--ink-60)}

.prose{padding-top:clamp(2.5rem,5vw,3.5rem)}
.prose{font-size:var(--t-read);line-height:1.85;color:var(--ink-80);min-width:0}
.prose > h2{margin:clamp(2.5rem,5vw,3.5rem) 0 1rem;color:var(--ink-100);scroll-margin-top:6rem}
.prose > h3{margin:2.25rem 0 .75rem;color:var(--ink-100);scroll-margin-top:6rem}
.prose p{margin:0 0 1.5rem}
/* 본문 강조. 굵게만 하면 회색 글 사이에서 눈에 걸리지 않는다.
   글자 아래쪽에 얇은 띠를 깐다. 형광펜처럼 요란하지 않고,
   볼드보다는 확실히 붙잡는다. 숫자는 자릿수를 맞춰 세운다
   (2026-09-11 성동님: "단순히 볼드체인데 너무 심심하고 단조롭다") */
.prose strong{
  color:var(--ink-100);font-weight:600;
  font-variant-numeric:tabular-nums;
  padding:0 .12em;margin:0 -.02em;border-radius:.15em;
  /* 띠 높이를 .36em 으로 올렸더니 글자 아랫부분을 덮어 읽기가 걸렸다.
     밑줄에 가깝게 낮추고 색을 조금 올린다. 한글은 baseline 아래로
     내려오는 획이 적어 이 높이면 글자를 가리지 않는다 */
  background-image:linear-gradient(to top,var(--accent-wash) 0 .22em,transparent .22em);
  background-repeat:no-repeat;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
/* 상자 안, 머리말, 목록의 굵은 글씨까지 띠를 두르면 지면이 얼룩진다.
   띠는 본문 문단에서만 쓴다 */
.prose .brief strong,.prose .watch strong,.prose .metric strong,
.prose .oneline strong,.prose .faq strong,.prose .scope strong,
.prose figcaption strong,.prose .sources strong,.prose h2 strong,.prose h3 strong,
.prose .disclaimer strong,.prose .note strong,.prose .table-wrap strong{
  background-image:none;padding:0;margin:0}
.prose a{color:var(--brand-text);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:.2em;
  text-decoration-color:var(--ink-44);transition:text-decoration-color var(--dur-fast) var(--ease)}
.prose a:hover{text-decoration-color:var(--brand)}
.prose ul,.prose ol{margin:0 0 1.5rem;padding-left:1.25rem;display:flex;
  flex-direction:column;gap:.5rem}
.prose li::marker{color:var(--ink-44)}
.prose figure{margin:clamp(2rem,4vw,2.75rem) 0}
.prose blockquote{
  margin:clamp(2rem,4vw,2.75rem) 0;padding-left:1.5rem;border-left:2px solid var(--brand);
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.25rem,calc(1.25rem + .25 * var(--fluid)),1.5rem);
  line-height:1.5;letter-spacing:-.02em;color:var(--ink-100);
}
.prose blockquote cite{display:block;margin-top:.75rem;font-family:var(--font-sans);
  font-size:var(--t-small);font-style:normal;color:var(--ink-60)}
.callout{
  margin:clamp(2rem,4vw,2.75rem) 0;padding:1.5rem;border-radius:var(--r-card);
  background:var(--canvas-sub);border:1px solid var(--hairline);
  font-size:var(--t-body);line-height:1.7;
}
.callout h4{margin-bottom:.5rem;color:var(--ink-100)}
.callout p:last-child{margin:0}
.pull-wide{margin-inline:calc(-1 * clamp(0rem,6vw,7rem))}

/* 목차 */
.toc{position:sticky;top:calc(var(--header-h) + 1.5rem);align-self:start;
  padding-left:1.25rem;border-left:1px solid var(--hairline)}
.toc h4{font-size:var(--t-micro);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-44);font-weight:500;margin-bottom:.875rem}
.toc ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.625rem}
.toc a{font-size:var(--t-small);line-height:1.45;color:var(--ink-60);
  transition:color var(--dur-fast) var(--ease)}
.toc a:hover,.toc a.active{color:var(--ink-100)}
.share{display:flex;gap:.5rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--hairline)}

/* 오른쪽 칼럼: 함께 읽을 기사와 세로형 광고 자리 (2026-09-09) */
.rail{position:sticky;top:calc(var(--header-h) + 1.5rem);align-self:start;
  display:flex;flex-direction:column;gap:1.5rem}
.rail-box{padding-left:1.25rem;border-left:1px solid var(--hairline)}
.rail h4{font-size:var(--t-micro);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-44);font-weight:500;margin:0 0 .875rem}
.rail-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1rem}
.rail-item{display:grid;grid-template-columns:3.5rem minmax(0,1fr);gap:.75rem;align-items:start}
.rail-thumb{position:relative;overflow:hidden;border-radius:.5rem;aspect-ratio:1/1;
  background:var(--canvas-raise)}
.rail-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.rail-thumb .art{position:absolute;inset:0}
.rail-title{font-size:var(--t-small);line-height:1.4;color:var(--ink-80);
  transition:color var(--dur-fast) var(--ease)}
.rail-item:hover .rail-title{color:var(--ink-100)}
.ad-rail{min-height:600px;border:1px dashed var(--hairline);border-radius:var(--r-card);
  display:flex;align-items:center;justify-content:center;padding:.5rem}
.ad-rail .ad-unit{max-width:300px;min-height:600px}

/* 본문 안 광고 한 칸. 글의 흐름을 끊지 않게 위아래로 넉넉히 띄운다 */
.ad-inline{display:block;margin:2.5rem 0;text-align:center}
.ad-inline .ad-unit{max-width:100%;min-height:100px;margin-inline:auto}
.prose > .ad-inline{clear:both}
/* 출처. 갖추되 부각시키지 않는다. 본문보다 한 단 낮은 목소리로 둔다.
   읽으라고 놓는 것이 아니라 확인하려는 사람과 검색엔진을 위한 자리다
   (2026-09-11 성동님: 다시 살리되 톤은 낮게) */
.srchead{font-family:var(--font-display);font-size:var(--t-micro);color:var(--ink-44);
  font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  margin:clamp(2.25rem,4.5vw,3rem) 0 .625rem;
  padding-top:1.25rem;border-top:1px solid var(--hairline)}
.srclist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.375rem}
.srclist li{font-size:var(--t-small);line-height:1.6;color:var(--ink-60);
  padding-left:.875rem;position:relative;word-break:break-word}
.srclist li::before{content:'';position:absolute;left:0;top:.6875rem;
  width:.3125rem;height:1px;background:var(--ink-12)}
.srclist a{color:var(--ink-60);border-bottom:1px solid var(--ink-12);
  transition:color .15s,border-color .15s}
.srclist a:hover,.srclist a:focus-visible{color:var(--ink-100);border-bottom-color:var(--ink-44)}

.article-foot{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:clamp(2.5rem,5vw,3.5rem);
  padding-top:1.75rem;border-top:1px solid var(--hairline)}
.author-box{display:flex;gap:1rem;margin-top:2.5rem;padding:1.5rem;
  border:1px solid var(--hairline);border-radius:var(--r-card);background:var(--canvas-sub)}
.author-box .avatar{width:3rem;height:3rem;font-size:.9375rem}
.author-box p{margin:.375rem 0 0;font-size:var(--t-small);line-height:1.6;color:var(--ink-60)}
.related h2{margin-bottom:clamp(1.5rem,3vw,2rem)}
.related .grid{grid-template-columns:repeat(3,minmax(0,1fr));padding-top:0}

/* --------------------------------------------------------------- 13. 반응형 */
@media (max-width:64rem){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card--feature{grid-column:span 2;grid-row:auto}
  .card--feature .card-title{font-size:var(--t-h3)}
  .related .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .article-grid{grid-template-columns:minmax(0,1fr)}
  .article-main{max-width:52rem}
  .toc{display:none}
  .rail{display:none}
  /* 좁아지면 이름표가 한 줄을 다 쓰고, 링크 두 묶음이 나란히 선다.
     그냥 두 칸으로 접으면 섹션 목록(여덟 줄)이 첫 줄을 늘려 아래가 텅 빈다 */
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid>*:first-child{grid-column:1/-1}
  .subscribe-inner{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:48rem){
  /* 한 줄로 세우면 글이 전부 왼쪽에 몰리고 오른쪽이 텅 빈다.
     좁은 화면에서도 두 칸으로 두고, 섹션 목록은 두 줄로 접는다 (2026-09-09 성동님) */
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.25rem 1.5rem}
  .footer-grid>*:first-child{grid-column:1/-1}
  .footer-grid>*:nth-child(2) ul{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem 1rem;
  }
  .footer-grid>*:nth-child(2){grid-column:1/-1}
  .footer-bottom{margin-top:2.5rem}
  .nav-links{display:none}
  .nav-inner{gap:.75rem}
  .grid{grid-template-columns:minmax(0,1fr)}
  /* 한 줄로 설 때가 가장 헷갈린다. 손가락으로 스크롤하는 값은 싸다 */
  .grid{row-gap:clamp(4rem,12vw,5.5rem)}
  .card--feature{grid-column:auto}
  .related .grid{grid-template-columns:minmax(0,1fr)}
  .filterbar .sortbtn{display:none}
  .pull-wide{margin-inline:0}
  .grid[data-view="list"] .card{gap:1rem}
}

/* --------------------------------------------------------------- 14. 모션 */
.reveal{opacity:0;transform:translateY(14px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important;
    scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}
html{scroll-behavior:smooth}

/* 필터가 걸리면 피처 카드도 일반 카드 크기로 */
.grid.is-filtered .card--feature{grid-column:auto;grid-row:auto}
.grid.is-filtered .card--feature .card-media{aspect-ratio:4/3}
.grid.is-filtered .card--feature .card-title{font-size:var(--t-h4);line-height:1.4;letter-spacing:-.015em}
.empty{padding:4rem 0;color:var(--ink-60);font-size:var(--t-small)}

/* ==========================================================================
   15. 기사 본문 블록 (분석 기사용 모듈)
   badge · deck · brief · metric · quote · stack · view · watch · faq · sources
   ========================================================================== */
.topline{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:1.75rem}
.badge{
  display:inline-flex;align-items:center;height:1.75rem;padding-inline:.75rem;
  border-radius:var(--r-pill);background:var(--brand);color:#fff;
  font-family:var(--font-display);font-size:var(--t-micro);font-weight:600;
  letter-spacing:.04em;
}
[data-theme="light"] .badge{background:var(--brand-text)}
.pill{
  display:inline-flex;align-items:center;height:1.75rem;padding-inline:.75rem;
  border-radius:var(--r-pill);border:1px solid var(--ink-12);background:var(--ink-4);
  font-size:var(--t-micro);font-weight:500;color:var(--ink-80);letter-spacing:.01em;
}
/* 편집실 머리의 '편집실' 은 누를 수 있는 알약이다 (2026-09-20 성동님) */
a.pill-link{text-decoration:none;transition:color .15s ease,border-color .15s ease}
a.pill-link:hover{color:var(--ink-100);border-color:var(--ink-44)}

.topline .meta{font-size:var(--t-small)}

.article-head .article-title{font-weight:600;letter-spacing:-.038em}
.deck{
  margin:1.375rem 0 0;max-width:44rem;color:var(--ink-80);
  font-size:clamp(1.125rem,calc(1.125rem + .25 * var(--fluid)),1.4375rem);
  line-height:1.6;letter-spacing:-.018em;
}

/* 핵심 브리핑 */
.brief{
  margin:clamp(2rem,4vw,2.75rem) 0 0;padding:clamp(1.25rem,3vw,1.875rem);
  border-radius:1.25rem;border:1px solid color-mix(in srgb,var(--brand) 34%,transparent);
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--brand) 13%,transparent),
    color-mix(in srgb,var(--brand) 4%,transparent));
}
.brief h2{font-size:var(--t-h4);margin-bottom:1rem;color:var(--ink-100);font-weight:600}
.brief-item{display:grid;grid-template-columns:1.5rem 1fr;gap:.75rem;margin:1rem 0;
  font-size:var(--t-read);line-height:1.85;color:var(--ink-80)}
.brief-item:last-child{margin-bottom:0}
.brief-num{font-family:var(--font-display);font-weight:600;color:var(--brand-text)}

/* 수치 카드. 낱장 상자 셋이 아니라 한 장의 판이다. 숫자가 먼저 눈에 들어오고
   설명이 뒤따라야 한다. 원고의 큰 타이포를 지면이 죽이지 않는다 (2026-09-10 성동님) */
.metric-grid,.metrics{display:grid;gap:0;grid-template-columns:repeat(3,minmax(0,1fr));
  margin:clamp(2.25rem,4.5vw,3rem) 0;border:1px solid var(--hairline);
  border-radius:1.5rem;background:var(--canvas-sub);overflow:hidden}
/* 칸과 칸 사이의 줄은 판 안에서만 그어진다.
   낱개로 흘러나온 .metric 에도 줄이 그어져, 아무것도 나누지 않는 가로선이
   본문 한가운데 서 있었다. 성동님: "구분선은 왜 넣었지?" (2026-09-21)
   넣은 적 없다. 판을 위한 줄이 엉뚱한 데에 걸린 것이다 */
.metric{padding:clamp(1.5rem,3vw,2.125rem);border-radius:0;background:transparent;border:0}
.metrics > .metric,.metric-grid > .metric{border-left:1px solid var(--hairline)}
.metrics > .metric:first-child,.metric-grid > .metric:first-child{border-left:0}
/* 글쓴이가 .num 으로 적어 오기도 하고, 이름표 없이 그냥 <div> 로 오기도 한다.
   어느 쪽이든 첫 줄이 숫자다 (2026-09-09, 2026-09-10) */
/* 자리로 짐작하는 규칙은 이름표가 하나도 없을 때만 쓴다.
   글자를 보고 붙인 이름표(.value/.mlabel/.delta)가 있으면 그쪽이 맞다.
   둘을 같이 두었더니 뒤에 있는 자리 규칙이 이름표를 이겨,
   시황 상자의 지수 숫자가 본문 크기로 나갔다 (2026-09-10 성동님) */
.metric .value,.metric .num,
.metric:not(:has(> .value)):not(:has(> .num)) > :first-child{display:block;
  font-family:var(--font-display);font-weight:700;letter-spacing:-.045em;
  font-size:clamp(2.5rem,calc(2.5rem + 1.5 * var(--fluid)),3.75rem);line-height:1;
  font-variant-numeric:tabular-nums;
  color:var(--ink-100);margin:0 0 .75rem}
.metric .label,
.metric:not(:has(> .value)):not(:has(> .num)) > :first-child + *{display:block;margin:0;
  font-size:var(--t-body);line-height:1.55;color:var(--ink-60);
  word-break:keep-all;overflow-wrap:break-word;text-wrap:pretty;max-width:26rem}
.metric .sub,
.metric:not(:has(> .value)):not(:has(> .num)) > :first-child + * + *{display:block;
  font-size:var(--t-small);line-height:1.5;color:var(--ink-44);margin-top:.5rem}

/* 원고에서 클래스 없이 한 줄로 던져 놓은 강조. 텍스트만 이어지는 기사에
   숨 돌릴 자리를 만든다 */
.prose .keyline{
  margin:clamp(2.5rem,5vw,3.25rem) 0;
  padding:clamp(1.5rem,3.5vw,2.25rem) clamp(1.25rem,3vw,2rem);
  border-radius:1.5rem;text-align:center;
  border:1px solid color-mix(in srgb,var(--brand) 26%,transparent);
  background:linear-gradient(145deg,
    color-mix(in srgb,var(--brand) 15%,transparent),var(--canvas-sub) 72%);
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.1875rem,calc(1.1875rem + .4375 * var(--fluid)),1.625rem);
  line-height:1.5;letter-spacing:-.022em;color:var(--ink-100);
}
.prose .eyebrow{
  display:flex;align-items:center;gap:.875rem;
  margin:clamp(2.75rem,5.5vw,3.5rem) 0 clamp(1rem,2vw,1.375rem);
  font-family:var(--font-display);font-size:var(--t-small);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-44);
}
.prose .eyebrow::before,.prose .eyebrow::after{
  content:'';height:1px;flex:1;background:var(--hairline)}

/* 용어와 설명이 짝을 이룬 줄. 일정표, 기준표, 용어 풀이가 여기로 온다.
   원고는 이걸 이름표 없이 div 두 겹으로 짜 온다 (2026-09-10 성동님) */
.prose .drows{
  margin:clamp(2.25rem,4.5vw,3rem) 0;border:1px solid var(--hairline);
  border-radius:1.5rem;background:var(--canvas-sub);overflow:hidden}
.prose .drow{
  display:grid;grid-template-columns:minmax(6.5rem,11rem) minmax(0,1fr);
  gap:clamp(1rem,2.5vw,1.75rem);align-items:baseline;
  padding:clamp(1.125rem,2.5vw,1.5rem) clamp(1.25rem,3vw,1.75rem);
  border-top:1px solid var(--hairline)}
.prose .drows .drow:first-child{border-top:0}
/* 판 밖에 홀로 선 줄은 제 상자를 쓴다 */
.prose > .drow,.prose section > .drow{
  border:1px solid var(--hairline);border-radius:1.25rem;background:var(--canvas-sub);
  margin:clamp(1.75rem,3.5vw,2.25rem) 0}
.prose .drow .dt{
  font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.0625rem,calc(1.0625rem + .25 * var(--fluid)),1.3125rem);
  line-height:1.35;color:var(--ink-100);font-variant-numeric:tabular-nums}
.prose .drow .dd{font-size:var(--t-read);line-height:1.65;color:var(--ink-80)}
@media (max-width:48rem){
  .prose .drow{grid-template-columns:minmax(0,1fr);gap:.375rem}
}

/* 이름표 없이 잇달아 선 줄들. 목록으로 묶어 한 장의 판에 담는다 */
.prose .linelist{
  margin:clamp(2.25rem,4.5vw,3rem) 0;border:1px solid var(--hairline);
  border-radius:1.5rem;background:var(--canvas-sub);overflow:hidden}
.prose .lineitem{
  padding:clamp(1rem,2.25vw,1.375rem) clamp(1.25rem,3vw,1.75rem);
  border-top:1px solid var(--hairline);
  font-size:var(--t-read);line-height:1.65;color:var(--ink-80)}
.prose .linelist .lineitem:first-child{border-top:0}
/* 화살표 한 자처럼 글자 없는 이음표 */
.prose .sepline{margin:clamp(1.5rem,3vw,2rem) 0;text-align:center;
  font-size:1.25rem;line-height:1;color:var(--ink-44)}
/* 상자와 상자를 잇는 화살표. 흐름도로 보이려면 사이가 좁아야 한다
   (2026-09-11 성동님) */
.prose .sepline:has(+ .keyline){margin-block:clamp(.875rem,2vw,1.125rem)}
.prose .keyline:has(+ .sepline){margin-bottom:clamp(.875rem,2vw,1.125rem)}
/* 흐름도 안의 상자는 조금 눌러 준다. 한 장일 때의 크기로 다섯 칸이 이어지면
   화면이 상자로 꽉 찬다. 이어진 것은 낱낱이 아니라 한 덩어리로 읽혀야 한다
   (2026-09-14 성동님: "표처럼 답답해보인다") */
.prose .keyline:has(+ .sepline),
.prose .sepline + .keyline{
  padding:clamp(1rem,2.4vw,1.375rem) clamp(1.125rem,2.6vw,1.5rem);
  border-radius:1.125rem;
  font-size:clamp(1.0625rem,calc(1.0625rem + .25 * var(--fluid)),1.3125rem);
}
.prose .keyline + .sepline{color:var(--brand-text);font-size:1.5rem}

/* ---------------------------------------------------------------- 흐름도
   성동님: "인포그래픽이 여전히 가운데 정렬이 안되고 좌측 정렬이 되고 있다.
   텍스트는 좌측 정렬이 되고, 화살표만 제대로 가운데 정렬을 하고 있다. (…)
   위/아래 본문과의 간격이 없어서, 인포그래픽이 삽입된 것인지, 원래 본문
   중의 일부인지 헷갈린다." (2026-09-20)

   원고는 <div class="flow"> 로 짜 왔는데 flow 는 우리가 아는 이름표가
   아니라 떨어져 나가고 맨 <div> 가 됐다. 화살표만 이음표(.sepline)로 따로
   세워져서 그것만 가운데에 섰다.

   ★ 이름표를 더 받아 주는 쪽으로 풀지 않는다. ★ 원고마다 이름이 다르고
   (flow · concept · card), card 같은 이름은 우리 목록 카드와 부딪힌다.
   대신 **모양으로 알아본다** — 이음표를 품은 묶음은 흐름도다. 원고가 어떤
   이름을 달고 오든, 이름을 아예 안 달아도 걸린다 */
.prose div:has(> .sepline){
  margin-block:clamp(2.5rem,5.5vw,3.5rem);
  padding:clamp(1.5rem,3.5vw,2rem) 1rem;
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
}
/* 흐름도 안의 칸. 이름과 설명을 위아래로 나눠 세운다 */
.prose div:has(> .sepline) > :not(.sepline){
  max-width:30rem;margin:0;
}
.prose div:has(> .sepline) > :not(.sepline) > b,
.prose div:has(> .sepline) > :not(.sepline) > strong{
  display:block;font-family:var(--font-display);font-weight:600;
  font-size:var(--t-h4);line-height:1.3;letter-spacing:-.012em;
  color:var(--brand-text);
}
.prose div:has(> .sepline) > :not(.sepline) > span{
  display:block;margin-top:.2rem;
  font-size:var(--t-small);line-height:1.5;color:var(--ink-60);
}
/* 안에서는 화살표 사이를 좁힌다. 한 덩어리로 읽혀야 한다 */
.prose div:has(> .sepline) > .sepline{margin:.7rem 0}

/* ------------------------------------------------------- 번호 붙은 단계 줄
   성동님: "리드 부분과 우측에 이어지는 텍스트가 띄어쓰지 않아서 정보 해독이
   어렵다. 띄어쓰기를 해줘." (2026-09-20)

   원고는 <div><b>01</b><strong>정렬</strong><span>자본, 수요…</span></div>
   꼴로 짜 왔다. 감싼 이름표(steps 같은 것)는 떨어져 나가고 세 조각만 남아,
   지면에서 '01정렬자본, 수요…' 한 낱말로 붙었다. 흐름도와 같은 병이고
   (10-118) 같은 처방을 쓴다 — 이름이 아니라 **모양**으로 알아본다.

   ★ 단, 모양은 충분히 좀아야 한다. ★
   성동님: "'체크 포인트'에 인포그래픽 부분… 숫자와 텍스트가 겹친다." (2026-09-20)

   처음 모양을 '설명(span)을 품은 줄' 로 잡았는데, 그 그물에 체크 포인트의
   .watch-item 이 같이 걸렸다. 체크 포인트는 번호를 카운터로 그려 왼쪽에
   절대로 앚히고, 그 자리를 왼쪽 여백으로 비워 둔다. 여기서 padding 을
   멋대로 덮어 그 여백이 사라졌고, 번호 01 이 제목 위에 겁쳐 찍혔다.

   단계 줄에는 번호를 <b> 로 직접 적어 보낸다. 체크 포인트에는 <b> 가 없다.
   그래서 '번호(b)와 설명(span)을 함께 품은 줄' 로 좀힌다. 감싼 묶음도
   이름표가 붙은 것(.watch 같은 진짜 모듈)은 뺄다 — 이름이 있는 모듈은
   제 규칙을 이미 가지고 있으니 모양으로 다시 잡을 이유가 없다.

   흐름도 안(.sepline 을 품은 묶음)은 이미 가운데로 세웠으므로 뚜다 */
.prose div:not([class]):not(:has(> .sepline)) > div:has(> b):has(> span){
  display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:center;text-align:center;
  column-gap:.6rem;row-gap:.25rem;
  padding:clamp(.9rem,2vw,1.25rem) 0;
  border-top:1px solid var(--ink-12);
}
.prose div:not([class]):not(:has(> .sepline)) > div:has(> b):has(> span):first-child{
  border-top:0;padding-top:0;
}
.prose div:not([class]):not(:has(> .sepline)) > div:has(> b):has(> span):last-child{
  padding-bottom:0;
}
/* 묶음은 본문과 띄운다. 삽입물임이 보여야 한다 */
.prose div:not([class]):not(:has(> .sepline)):has(> div > b + strong),
.prose div:not([class]):not(:has(> .sepline)):has(> div > b + span){
  margin-block:clamp(2.75rem,6vw,4rem);
  padding-block:clamp(1.5rem,3.5vw,2.25rem);
  border-top:1px solid var(--ink-12);
  border-bottom:1px solid var(--ink-12);
}
/* 설명은 줄을 바꿔 통째로 받는다. 이름 옆에 이어 붙으면 또 붙어 읽힌다 */
.prose div:not([class]):not(:has(> .sepline)) > div:has(> b):has(> span) > span{
  flex:1 0 100%;color:var(--ink-80);line-height:1.6;
  max-width:34rem;margin-inline:auto;
}
/* 뒤에 이름이 따라오면 그 앞은 번호다. 혼자면 그것이 이름이다 */
.prose div:not([class]):not(:has(> .sepline)) > div:has(> span) > b:has(+ strong){
  font-family:var(--font-display);font-weight:600;
  font-size:var(--t-small);color:var(--ink-44);
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
.prose div:not([class]):not(:has(> .sepline)) > div:has(> b):has(> span) > strong,
.prose div:not([class]):not(:has(> .sepline)) > div:has(> b):has(> span) > b:not(:has(+ strong)){
  font-family:var(--font-display);font-weight:600;
  font-size:var(--t-h4);line-height:1.3;letter-spacing:-.012em;
  color:var(--brand-text);
}

/* 인용 */
.prose .quote{
  margin:clamp(2rem,4vw,2.75rem) 0;padding:1.375rem 1.5rem;
  border-left:3px solid var(--brand);border-radius:0 1.25rem 1.25rem 0;
  background:var(--canvas-raise);color:var(--ink-100);
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.1875rem,calc(1.1875rem + .3125 * var(--fluid)),1.5rem);
  line-height:1.5;letter-spacing:-.024em;
}
.prose .quote small{display:block;margin-top:.75rem;font-family:var(--font-sans);
  font-size:var(--t-small);font-weight:400;letter-spacing:-.01em;color:var(--ink-60)}

/* 단계 카드 */
.stack-cards{display:grid;gap:.875rem;grid-template-columns:repeat(2,minmax(0,1fr));
  margin:clamp(2rem,4vw,2.5rem) 0}
.stack-card{padding:1.375rem;border-radius:1.25rem;border:1px solid var(--hairline);
  background:var(--canvas-sub)}
.stack-card .kicker{font-family:var(--font-display);font-size:var(--t-micro);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--brand-text);margin-bottom:.5rem}
.stack-card h4{margin:0 0 .5rem;color:var(--ink-100)}
.stack-card p{margin:0;font-size:var(--t-read);line-height:1.85;color:var(--ink-80)}

/* 편집자 관점 */
.view{
  margin:clamp(2.5rem,5vw,3.5rem) 0;padding:clamp(1.5rem,3vw,2.125rem);
  border-radius:1.5rem;border:1px solid color-mix(in srgb,var(--brand) 34%,transparent);
  background:linear-gradient(145deg,
    color-mix(in srgb,var(--brand) 17%,transparent),
    var(--canvas-sub) 58%);
}
.view .kicker{font-family:var(--font-display);font-size:var(--t-small);font-weight:600;
  letter-spacing:.08em;color:var(--brand-text);margin-bottom:.625rem;display:block}
.view h2{margin:0 0 1rem;font-size:var(--t-h3);color:var(--ink-100)}
.view p:last-of-type{margin-bottom:0}
.confidence{display:inline-flex;align-items:center;height:1.875rem;padding-inline:.75rem;
  margin-top:1.25rem;border-radius:var(--r-pill);
  border:1px solid color-mix(in srgb,var(--cat-plan) 40%,transparent);
  background:color-mix(in srgb,var(--cat-plan) 12%,transparent);
  font-size:var(--t-small);color:var(--ink-80)}

/* What to Watch */
/* 체크 포인트. 둥근 회색 상자를 줄줄이 세워 두었더니 덩어리만 보이고
   읽을 마음이 안 났다. 상자를 걷어내고 번호와 여백으로 세운다.
   큰 번호가 줄을 잡아 주므로 상자가 없어도 흩어지지 않는다
   (2026-09-11 성동님: "디자인적으로 더 세련되고 덜 지루하게") */
.watch{display:grid;gap:0 clamp(2rem,4vw,3.5rem);
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin:clamp(1.5rem,3vw,2rem) 0 0;counter-reset:watch}
.watch-item{position:relative;padding:clamp(1.25rem,2.5vw,1.75rem) 0
  clamp(1.25rem,2.5vw,1.75rem) clamp(2.75rem,5vw,3.5rem);
  border:0;border-top:1px solid var(--hairline);background:transparent;border-radius:0}
/* 첫 줄에 선을 얹지 않는다. 머리글 바로 아래에 선이 또 오면 답답하다 */
.watch-item:nth-child(-n+2){border-top:0;padding-top:.25rem}
.watch-item::before{
  counter-increment:watch;content:counter(watch,decimal-leading-zero);
  position:absolute;left:0;top:clamp(1.25rem,2.5vw,1.75rem);
  font-family:var(--font-display);font-weight:600;
  font-size:var(--t-h4);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  color:var(--accent-line);
  /* 줄높이를 1 로 두었더니 번호만 위로 떠서 오른쪽 첫 줄과 윗선이 어긋났다.
     제목과 같은 크기, 같은 줄높이, 같은 자리에 두면 저절로 맞는다
     (2026-09-11 성동님) */
  line-height:1.35;
}
.watch-item:nth-child(-n+2)::before{top:.25rem}
/* 제목 없이 문장만 있는 항목은 첫 줄이 본문 크기다. 번호도 그 줄에 맞춘다 */
.watch-item:not(:has(strong))::before{font-size:var(--t-read);line-height:1.8}
.watch-item strong{display:block;font-family:var(--font-display);font-weight:600;
  font-size:var(--t-h4);line-height:1.35;color:var(--ink-100);margin-bottom:.5rem;
  letter-spacing:-.02em;text-wrap:pretty}
/* 상자 안이라고 글씨를 줄이고 흐리게 하지 않는다. 읽으라고 쓴 문장이면
   본문과 같은 크기, 같은 색이다 (2026-09-10 성동님) */
.watch-item span{display:block;font-size:var(--t-read);line-height:1.8;color:var(--ink-80);
  text-wrap:pretty}

/* FAQ */
/* 모듈 머리글. 본문 소제목(h2)과 급이 다르다. 작고 조용하게, 앞에 색 막대 하나 */
.blockhead{
  display:flex;align-items:center;gap:.625rem;
  margin:clamp(2.75rem,5vw,3.5rem) 0 1rem;
  font-family:var(--font-display);font-size:var(--t-small);font-weight:600;
  letter-spacing:.02em;color:var(--ink-60);
}
.blockhead::before{
  content:'';width:1.5rem;height:2px;border-radius:2px;flex:none;
  background:var(--sec-c,var(--brand));
}

.faq{border-top:1px solid var(--hairline);margin-top:clamp(2.75rem,5vw,3.5rem)}
.faq-item{padding:1.5rem 0;border-bottom:1px solid var(--hairline)}
.faq-q{font-family:var(--font-display);font-weight:600;font-size:var(--t-h4);
  line-height:1.45;letter-spacing:-.012em;color:var(--ink-100);margin-bottom:.75rem}
.prose .faq-a{margin:0;padding-left:1.25rem;gap:.625rem}
.faq-a li{font-size:var(--t-read);line-height:1.85;color:var(--ink-80)}

/* 출처 */
.sources{font-size:var(--t-small);line-height:1.65;color:var(--ink-60)}
.sources p{margin:0 0 .625rem}
.sources a{color:var(--brand-text)}
.disclaimer{margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:1.5rem;
  border-top:1px solid var(--hairline);font-size:var(--t-small);line-height:1.65;
  color:var(--ink-44)}
.disclaimer strong{color:var(--ink-60);font-weight:500}

@media (max-width:48rem){
  .metric-grid,.metrics{grid-template-columns:minmax(0,1fr)}
  .metrics > .metric,.metric-grid > .metric{border-left:0;border-top:1px solid var(--hairline)}
  .metrics > .metric:first-child,.metric-grid > .metric:first-child{border-top:0}
  .stack-cards,.watch{grid-template-columns:minmax(0,1fr)}
  /* 한 줄로 서면 둘째 항목부터는 선이 있어야 칸이 나뉜다 */
  .watch-item:nth-child(2){border-top:1px solid var(--hairline);
    padding-top:clamp(1.25rem,2.5vw,1.75rem)}
  .watch-item:nth-child(2)::before{top:clamp(1.25rem,2.5vw,1.75rem)}
  .brief{border-radius:1rem}
}

/* ==========================================================================
   16. 헌장 반영 모듈: 데스크 스트립 · 오늘의 지면 · 레일 · 유형 태그 · 수명
   ========================================================================== */

/* 유형 태그: WHY / SO WHAT / REALLY? / EXPLAIN / WHAT NEXT */
.type{
  display:inline-flex;align-items:center;height:1.5rem;padding-inline:.625rem;
  border-radius:var(--r-pill);
  font-family:var(--font-display);font-size:var(--t-micro);font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;
  border:1px solid color-mix(in srgb,var(--type-c,var(--ink-60)) 45%,transparent);
  background:color-mix(in srgb,var(--type-c,var(--ink-60)) 14%,transparent);
  color:var(--type-c,var(--ink-60));
}
[data-type="WHY"]{--type-c:var(--cat-world)}
[data-type="SO WHAT"]{--type-c:var(--cat-money)}
[data-type="REALLY?"]{--type-c:var(--cat-pop)}
[data-type="EXPLAIN"]{--type-c:var(--cat-people)}
[data-type="WHAT NEXT"]{--type-c:var(--cat-culture)}
[data-theme="light"] .type{background:color-mix(in srgb,var(--type-c) 9%,transparent)}

/* 수명 배지 */
.life{font-size:var(--t-micro);color:var(--ink-44);letter-spacing:.01em}


/* 오늘의 지면: HERO + SECOND + 레일 */
.today{
  display:grid;gap:clamp(1.5rem,3vw,2.5rem);
  grid-template-columns:minmax(0,1fr) minmax(0,17.5rem);
  padding-block:clamp(2rem,4vw,3rem);
}
.today-main{display:flex;flex-direction:column;gap:clamp(1.75rem,3vw,2.5rem)}
.hero-card .card-media{aspect-ratio:16/9}
@media (min-width:64rem){.hero-card .card-media{aspect-ratio:2.2/1}}
.hero-card .card-title{
  font-size:clamp(1.875rem,calc(1.875rem + 1.375 * var(--fluid)),3.25rem);
  line-height:1.14;letter-spacing:-.03em;font-weight:600;
}
.hero-card .card-body{gap:.75rem}
.hero-card .card-excerpt{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
  overflow:hidden;font-size:var(--t-read);line-height:1.6;
  color:var(--ink-60);margin:0;max-width:40rem}
.second-row{display:grid;gap:clamp(1.25rem,2.5vw,1.75rem);
  grid-template-columns:repeat(2,minmax(0,1fr))}
.second-row .card-title{font-size:var(--t-h3);line-height:1.28;letter-spacing:-.02em}
.second-row .card-media{aspect-ratio:16/10}

/* 레일: 특집이 아닌 짧은 것들 */
.rail{align-self:start;position:sticky;top:calc(var(--header-h) + 1.5rem);
  padding-left:1.25rem;border-left:1px solid var(--hairline)}
.rail-head{display:flex;align-items:baseline;gap:.625rem;margin-bottom:1rem}
.rail-head h2{font-size:var(--t-small);font-weight:500;color:var(--ink-44);
  letter-spacing:.06em;text-transform:uppercase}
.rail-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.rail-item{padding-block:.875rem;border-bottom:1px solid var(--hairline)}
.rail-item:first-child{padding-top:0}
.rail-item a{display:block;font-size:var(--t-small);line-height:1.5;color:var(--ink-80);
  transition:color var(--dur-fast) var(--ease)}
.rail-item a:hover{color:var(--ink-100)}
.rail-item .time{display:block;margin-top:.375rem;font-size:var(--t-micro);color:var(--ink-44)}
.rail-note{margin:1rem 0 0;font-size:var(--t-micro);line-height:1.6;color:var(--ink-44)}

/* 카드 상단 라벨 줄 */
.card-labels{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}

/* 시리즈 */
/* ---------------------------------------------------------------------------
   연재 칸.

   성동님: "저렇게 텍스트로 리스트를 보여주는 게 아니라, 그냥 일반적인 기사처럼
   썸네일 방식으로 보여줘라. 다 펼쳐놓으면 된다." (2026-09-14)

   여기만 줄글 목록이었다. 한 지면 안에서 기사를 보여 주는 법이 둘이면 독자는
   이 자리를 기사가 아닌 무엇으로 읽는다. 연재 이름을 머리로 세우고, 회차는
   여느 기사와 **같은 카드**로 편다. 그래서 .grid 를 그대로 쓴다.
   --------------------------------------------------------------------------- */
.series-wrap{display:flex;flex-direction:column;gap:clamp(3rem,6vw,4.5rem)}
.series-run-head{max-width:42rem}
.series-name{display:block}
.series-run-head .kicker{font-family:var(--font-display);font-size:var(--t-micro);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-44);margin-bottom:.5rem;display:block}
.series-run-head h3{font-size:var(--t-h3);line-height:1.25;letter-spacing:-.022em;margin:0}
.series-name:hover h3{color:var(--brand-text)}
.series-deck{margin:.5rem 0 0;font-size:var(--t-small);line-height:1.65;color:var(--ink-60)}
/* 회차 줄은 여느 목록과 같은 그리드다. 위 여백만 조금 줄인다 */
.series-eps-grid{padding-top:clamp(1.5rem,3vw,2.25rem)}
/* 회차 번호. 갈래 딱지가 서는 자리에 같이 선다 */
.ep-badge{display:inline-flex;align-items:center;justify-content:center;
  min-width:1.5rem;height:1.5rem;padding:0 .4375rem;border-radius:999px;
  background:color-mix(in oklab, var(--sec-c, var(--brand)) 22%, transparent);
  color:var(--ink-80);font-family:var(--font-display);font-size:var(--t-micro);
  font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:0}

/* 편집 기준 4칸 */
.gates{display:grid;gap:.875rem;grid-template-columns:repeat(4,minmax(0,1fr))}
.gate{padding:1.25rem;border:1px solid var(--hairline);border-radius:var(--r-card);
  background:var(--canvas-sub)}
.gate .n{font-family:var(--font-display);font-size:var(--t-small);font-weight:600;
  color:var(--brand-text);display:block;margin-bottom:.5rem}
.gate strong{display:block;font-family:var(--font-display);font-weight:500;
  font-size:var(--t-h4);color:var(--ink-100);margin-bottom:.375rem;letter-spacing:-.012em}
.gate span{font-size:var(--t-small);line-height:1.6;color:var(--ink-60)}

/* 본문 표 (헌장: 특집당 표 1개) */
.prose .table-wrap{margin:clamp(2rem,4vw,2.5rem) 0;overflow-x:auto;
  border:1px solid var(--hairline);border-radius:var(--r-card);background:var(--canvas-sub)}
.prose table{border-collapse:collapse;width:100%;min-width:32rem;font-size:var(--t-small)}
.prose th,.prose td{padding:.875rem 1rem;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--hairline);line-height:1.55}
.prose thead th{font-family:var(--font-display);font-weight:500;color:var(--ink-100);
  font-size:var(--t-micro);letter-spacing:.04em;text-transform:uppercase;
  background:var(--canvas-raise)}
.prose tbody tr:last-child td{border-bottom:0}
.prose td strong{color:var(--ink-100)}
.table-note{margin:.75rem 0 0;font-size:var(--t-micro);color:var(--ink-44);line-height:1.6}

/* 나와의 관계 5축 */
.relate{display:grid;gap:.75rem;
  grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));
  margin:clamp(2rem,4vw,2.5rem) 0}
.relate div{padding:1.125rem .875rem;border:1px solid var(--hairline);border-radius:var(--r-media);
  background:var(--canvas-sub)}
.relate .k{font-family:var(--font-display);font-size:var(--t-micro);font-weight:600;
  letter-spacing:.06em;color:var(--ink-44);display:block;margin-bottom:.375rem}
.relate p{margin:0;font-size:.9375rem;line-height:1.6;color:var(--ink-80)}

/* 한 줄 결론 */
.oneline{
  margin:clamp(2.5rem,5vw,3.5rem) 0 0;padding:clamp(1.5rem,3vw,2rem);
  border-radius:1.25rem;border:1px solid var(--ink-12);background:var(--canvas-raise);
}
.oneline .kicker{font-family:var(--font-display);font-size:var(--t-micro);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-44);display:block;
  margin-bottom:.75rem}
.oneline p{margin:0;font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.25rem,calc(1.25rem + .375 * var(--fluid)),1.625rem);
  line-height:1.45;letter-spacing:-.024em;color:var(--ink-100)}

/* 범위 문장 */
.scope{margin:0 0 clamp(2rem,4vw,2.5rem);padding:1rem 1.25rem;
  border-left:2px solid var(--ink-12);font-size:var(--t-small);line-height:1.65;
  color:var(--ink-60)}
.scope strong{color:var(--ink-80);font-weight:500}

/* 언어 전환: 조용하게 */
.langs{display:flex;align-items:center;gap:.375rem;font-size:var(--t-micro);
  color:var(--ink-44);letter-spacing:.02em}
.langs a{padding:.25rem .375rem;border-radius:var(--r-xs);
  transition:color var(--dur-fast) var(--ease)}
.langs a:hover{color:var(--ink-100)}
.langs a[aria-current="true"]{color:var(--ink-100)}

@media (max-width:64rem){
  .today{grid-template-columns:minmax(0,1fr)}
  .rail{position:static;padding-left:0;border-left:0;padding-top:1.5rem;
    border-top:1px solid var(--hairline)}
  .gates{grid-template-columns:repeat(2,minmax(0,1fr))}
  .relate{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:48rem){
  /* 손전화 첫 화면. 둘째 기사의 사진이 화면 아래에 걸쳐 보여야
     아래에 더 있다는 것을 안다 (2026-09-10 성동님) */
  .today{padding-block:1.25rem clamp(2rem,4vw,3rem)}
  /* ★ 톱 기사와 그 아래 기사 사이. ★
     성동님: "모바일에서 볼 때 최상단 탑 기사와 그 아래 썸네일 간격이 좁아서,
     이 썸네일 기사가 위의 제목인지 아래의 제목인지 헷갈림." (2026-09-14)

     2026-09-10 에 카드 사이를 넓게 벌렸는데(아래 second-row) **이 자리를
     빠뜨렸다.** 톱 기사에서 둘째 기사로 넘어가는 자리만 2rem 이었다.
     그래서 카드끼리는 잘 갈리는데 톱 기사 바로 밑에서만 헷갈렸다.
     카드 사이 값과 같게 맞춘다 — 한 지면 안에서 '기사가 바뀐다' 는 신호는
     늘 같은 크기여야 한다 */
  .today-main{gap:clamp(4rem,12vw,5.5rem)}
  .rowhead{margin:1rem 0 .625rem}
  .hero-card .card-media{aspect-ratio:16/8.6}
  /* ★ 바깥을 벌렸으면 안쪽은 죈다. ★ 가까운 것끼리 한 덩어리로 보인다.
     사진과 그 사진의 제목은 붙어 있어야 짝인 줄 안다 */
  .card{gap:.5rem}
  .card-body{gap:.375rem}
  .hero-card .card-body{gap:.5rem}
  /* 카드 사이를 카드 안쪽보다 훨씬 넓게 벌린다. 앞 기사 밑에 붙은 사진이
     그 기사 것인지 다음 기사 것인지 헷갈리면 안 된다.
     이 값이 파일 앞쪽에 있어 뒤에 오는 기본값에 먹히고 있었다 (2026-09-10 성동님) */
  .second-row{grid-template-columns:minmax(0,1fr);row-gap:clamp(4rem,12vw,5.5rem)}
  .gates{grid-template-columns:minmax(0,1fr)}
  .relate{grid-template-columns:minmax(0,1fr)}
}

/* 갈래마다 제 색을 준다. 지금 지면에 실제로 있는 여덟 갈래 이름 그대로다.
   옛 이름으로 적혀 있어서 거의 모든 점이 회색으로 나오고 있었다 (2026-09-09) */
[data-cat="투자·경제"]{--sec-c:var(--cat-money)}
[data-cat="건강·생활"]{--sec-c:var(--cat-life)}
[data-cat="세계"]{--sec-c:var(--cat-world)}
[data-cat="사람·사회"]{--sec-c:var(--cat-people)}
[data-cat="문화"]{--sec-c:var(--cat-culture)}
[data-cat="화제"]{--sec-c:var(--cat-pop)}
[data-cat="테크·과학"]{--sec-c:var(--cat-tech)}
[data-cat="스포츠"]{--sec-c:var(--cat-sports)}
[data-cat] .dot{background:var(--sec-c,var(--ink-44))}
/* 사진 아래에 갈래 색 실선 하나. 그리드가 한눈에 알록달록해지지 않으면서
   지면이 살아난다. ::after 가 이미 그라데이션을 그리고 있으므로 층을 하나 더 얹는다
   (inset 그림자로 그렸더니 <img> 에 가려 안 보였다) */
[data-cat] .card-media::after{
  background:
    linear-gradient(to top,var(--sec-c,transparent) 0 2px,transparent 2px),
    linear-gradient(180deg,transparent 55%,rgb(0 0 0/.35));
}
.hero-card[data-cat] .card-media::after{
  background:
    linear-gradient(to top,var(--sec-c,transparent) 0 3px,transparent 3px),
    linear-gradient(180deg,transparent 55%,rgb(0 0 0/.35));
}
[data-cat] .card-meta .cat{color:var(--ink-80)}

/* 스와치 (설계서용) */
.swatches{display:flex;flex-wrap:wrap;gap:.75rem;list-style:none;padding:0;margin:0}
.swatches li{width:6rem;font-size:var(--t-micro);color:var(--ink-60);line-height:1.4}
.chip{display:block;height:3rem;border-radius:var(--r-xs);
  box-shadow:inset 0 0 0 1px var(--ink-12);margin-bottom:.375rem}

/* ==========================================================================
   17. 편집실 (CMS 관리자 화면)
   ========================================================================== */
/* ★ 메뉴는 오른쪽에 선다. ★
   성동님: "편집실을 스마트폰에서 보면, 상단에 '메뉴'가 나와서 자리 차지를
   너무 많이 한다. 해당 페이지는 한참 스크롤해야 나온다." (2026-09-20)
   좌우로 놓은 것을 위아래로 내려놓으면 메뉴가 본문 앞을 막는다. 순서를
   바꾸면 넓은 화면에선 메뉴가 오른쪽에, 좁은 화면에선 본문 아래로 간다 —
   둘 다 '볼 것이 먼저' 라는 한 가지 규칙이다 */
.admin{display:grid;grid-template-columns:minmax(0,1fr) 15rem;min-height:calc(100vh - var(--header-h))}
.admin > .work{order:1}
.admin > .side{order:2}
.side{border-left:1px solid var(--hairline);padding:1.5rem 1.25rem;background:var(--canvas-sub)}
.side h4{font-size:var(--t-micro);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-44);font-weight:500;margin:1.75rem 0 .75rem}
.side h4:first-child{margin-top:0}
.side ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.125rem}
.side a{display:flex;align-items:center;gap:.5rem;padding:.5rem .625rem;border-radius:var(--r-xs);
  font-size:var(--t-small);color:var(--ink-80);transition:background var(--dur-fast) var(--ease)}
.side a:hover{background:var(--ink-4)}
.side a[aria-current="true"]{background:var(--ink-12);color:var(--ink-100);font-weight:500}
.side .count{margin-left:auto;font-size:var(--t-micro);color:var(--ink-44)}
.quota{margin-top:1.75rem;padding:.875rem;border:1px solid var(--hairline);border-radius:var(--r-media);
  background:var(--canvas);font-size:var(--t-micro);line-height:1.6;color:var(--ink-60)}
.quota strong{display:block;color:var(--ink-100);font-weight:500;margin-bottom:.375rem;
  font-size:var(--t-small)}

.work{padding:1.75rem clamp(1.25rem,3vw,2.25rem)}
.work-head{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem}
.work-head h1{font-size:var(--t-h3)}
.tabs{display:flex;gap:.25rem;background:var(--ink-4);padding:.25rem;border-radius:var(--r-pill)}
.tabs button{padding:.375rem .875rem;border-radius:var(--r-pill);font-size:var(--t-small);
  font-weight:500;color:var(--ink-60)}
.tabs button[aria-pressed="true"]{background:var(--canvas);color:var(--ink-100);
  box-shadow:0 1px 2px rgb(0 0 0/.2)}

.rows{border:1px solid var(--hairline);border-radius:var(--r-card);overflow:hidden;
  background:var(--canvas-sub)}
.row{display:grid;grid-template-columns:6.5rem minmax(0,1fr) 7rem 6rem 5rem 6.5rem;
  gap:1rem;align-items:center;padding:.875rem 1.125rem;
  border-bottom:1px solid var(--hairline);cursor:pointer;
  transition:background var(--dur-fast) var(--ease)}
.row:last-child{border-bottom:0}
.row:hover{background:var(--ink-4)}
.row .title{font-weight:500;color:var(--ink-100);font-size:var(--t-small);line-height:1.45}
.row .sub{font-size:var(--t-micro);color:var(--ink-44);margin-top:.25rem}
/* ★ 목록의 섹션·날짜는 상자가 아니라 글자다. ★
   성동님: "기사 리스트에서 우측에 섹션/입력일/발행일/수정일이 왜 박스로
   되어있지? 그냥 단순 텍스트로 보여줘." (2026-09-20)
   원인은 이름표 충돌이었다 — '오늘의 편성' 지면 칸도 .cell 이어서,
   그쪽의 점선 상자와 높이가 목록 칸까지 씨워졌다. 이름을 갈라 둔다(10-124) */
.row .rcell{font-size:var(--t-micro);color:var(--ink-60);
  display:block;min-height:0;padding:0;border:0;background:none;border-radius:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .rcell.when{font-variant-numeric:tabular-nums}
.state{display:inline-flex;align-items:center;gap:.375rem;height:1.5rem;padding-inline:.5rem;
  border-radius:var(--r-pill);font-size:var(--t-micro);font-weight:500;
  border:1px solid color-mix(in srgb,var(--st) 45%,transparent);
  background:color-mix(in srgb,var(--st) 14%,transparent);color:var(--st);--st:var(--ink-60)}
.state[data-state="AI 초안"]{--st:var(--cat-people)}
.state[data-state="검수 대기"]{--st:var(--cat-life)}
.state[data-state="발행됨"]{--st:var(--cat-plan)}
.state[data-state="보류"]{--st:var(--ink-44)}
.gatedots{display:flex;gap:.25rem}
.gatedots i{width:.5rem;height:.5rem;border-radius:50%;background:var(--ink-12);display:block}
.gatedots i.on{background:var(--cat-plan)}
.row[hidden]{display:none}

.editor{display:grid;grid-template-columns:minmax(0,1fr) 20rem;gap:1.75rem;align-items:start}
.fieldset{border:1px solid var(--hairline);border-radius:var(--r-card);padding:1.25rem;
  background:var(--canvas-sub);margin-bottom:1rem}
.fieldset legend,.fieldset .lg{font-family:var(--font-display);font-size:var(--t-small);
  font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-44);
  margin-bottom:1rem;display:block}
.f{margin-bottom:1rem}
.f:last-child{margin-bottom:0}
.f label{display:block;font-size:var(--t-micro);color:var(--ink-60);margin-bottom:.375rem}
.f label b{color:var(--ink-80);font-weight:500}
.f input[type=text],.f textarea,.f select{
  width:100%;padding:.625rem .75rem;border-radius:var(--r-media);
  border:1px solid var(--ink-12);background:var(--canvas);color:var(--ink-100);
  font:400 var(--t-small)/1.55 var(--font-sans);transition:border-color var(--dur) var(--ease)}
.f textarea{min-height:12rem;resize:vertical;line-height:1.7}
.f input:focus,.f textarea:focus,.f select:focus{border-color:var(--brand);outline:none}
.f .hint{font-size:var(--t-micro);color:var(--ink-44);margin:.375rem 0 0}
.f .count{float:right;font-size:var(--t-micro);color:var(--ink-44)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.checks{display:flex;flex-direction:column;gap:.75rem}
.check{display:flex;gap:.625rem;align-items:flex-start;font-size:var(--t-small);color:var(--ink-80);
  cursor:pointer}
.check input{margin:.25rem 0 0;accent-color:var(--brand);width:1rem;height:1rem;flex:none}
.check span small{display:block;font-size:var(--t-micro);color:var(--ink-44);margin-top:.125rem}
.panel{position:sticky;top:calc(var(--header-h) + 1.5rem)}
.publishbar{display:flex;flex-direction:column;gap:.625rem;margin-top:1rem}
/* 발행 단추는 패널 맨 위. 스크롤을 내려도 늘 손 닿는 자리에 둔다 */
.publishbar--top{margin-top:0;margin-bottom:1.25rem;padding-bottom:1.25rem;
  border-bottom:1px solid var(--hairline)}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.byline-note{font-size:var(--t-micro);color:var(--ink-44);line-height:1.6}
.origin{display:inline-flex;align-items:center;gap:.375rem;font-size:var(--t-micro);
  color:var(--ink-60)}
.origin i{width:.375rem;height:.375rem;border-radius:50%;background:var(--cat-people);display:block}
.origin.human i{background:var(--cat-tech)}

@media (max-width:64rem){
  .admin{grid-template-columns:minmax(0,1fr)}
  .side{border-left:0;border-top:1px solid var(--hairline)}
  .editor{grid-template-columns:minmax(0,1fr)}
  .panel{position:static}
  .row{grid-template-columns:6.5rem minmax(0,1fr);gap:.75rem}
  .row .rcell{display:none}
}

/* --------------------------------------------- 머리의 기사 검색 (2026-09-20)
   성동님: "고정 헤더에 검색이 없어서 불편했어."
   목록 막대에 있던 것을 머리로 올렸다. 칸은 하나다 — 둘이면 어느
   것이 듣는지 몰라 서로 엇갈린다 */
.nav .hsearch{
  flex:1 1 12rem;min-width:6rem;max-width:30rem;height:2.25rem;padding:0 .875rem;
  border:1px solid var(--ink-12);border-radius:var(--r-pill);
  background:var(--canvas-sub);color:var(--ink-100);font-size:var(--t-small);
  transition:border-color var(--dur-fast) var(--ease)
}
.nav .hsearch::placeholder{color:var(--ink-44)}
.nav .hsearch:focus{outline:none;border-color:var(--brand)}
@media (max-width:48rem){
  .nav .hsearch{flex-basis:6rem;height:2rem;padding:0 .625rem;font-size:var(--t-micro)}
}

/* --------------------------------------------- 목록의 사진 썸네일 (2026-09-20)
   성동님: "기사 제목 밑에, 그 기사 사진의 썸네일을 보여줘." */
.row .rthumb{display:block;margin-top:.5rem}
.row .rthumb img{
  display:block;width:7.5rem;height:4.25rem;object-fit:cover;
  border-radius:.5rem;border:1px solid var(--hairline);background:var(--canvas-sub);
  cursor:zoom-in;transition:border-color var(--dur-fast) var(--ease)
}
.row .rthumb img:hover{border-color:var(--brand)}
.row .rthumb[data-gone]{display:none}
.row .rthumb.none{
  display:inline-block;margin-top:.5rem;padding:.25rem .5rem;border-radius:var(--r-xs);
  border:1px dashed var(--ink-12);font-size:var(--t-micro);color:var(--ink-44)
}

/* 큰 사진 판. 누르면 뜨고, 한 번 더 누르면 사라진다 */
.bigshot{
  position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  padding:1.5rem;background:rgb(0 0 0/.86);cursor:zoom-out;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)
}
.bigshot[hidden]{display:none}
.bigshot img{max-width:min(96vw,1400px);max-height:92vh;width:auto;height:auto;
  border-radius:.75rem;box-shadow:0 24px 60px rgb(0 0 0/.6)}

/* HTML 올리기: 단추가 위에, 설명이 아래에 (2026-09-20) */
.updrop{min-height:0;padding:clamp(1.5rem,4vw,2.5rem);flex-direction:column;
  align-items:center;justify-content:center;gap:.875rem;text-align:center;overflow:visible}
.updrop .dropwhy{font-size:var(--t-small);color:var(--ink-60);line-height:1.7;max-width:46rem}

/* ---------------------------------------- 영문판 원고 안내 (2026-09-20) */
.enbox{
  margin:0 0 1.25rem;padding:1rem 1.25rem;
  border:1px solid color-mix(in srgb,var(--brand) 40%,transparent);
  border-radius:var(--r-card);
  background:color-mix(in srgb,var(--brand) 9%,transparent);
  font-size:var(--t-small);line-height:1.7;color:var(--ink-80)
}
.enbox[hidden]{display:none}
.enbox > b{display:block;margin-bottom:.5rem;color:var(--brand-text);font-size:var(--t-body)}
.enbox p{margin:0 0 .5rem}
.enbox p:last-of-type{margin-bottom:0}
.enbox .enbox-warn{color:var(--ink-100)}
.enbox .enbox-link{display:block;margin-top:.625rem;font-size:var(--t-micro);color:var(--ink-60)}
.enbox .enbox-link a{color:var(--link-ui)}

/* ------------------------- 삽화를 영문판에서만 다르게 (2026-09-20) */
.figen{display:inline-flex;align-items:center;gap:.4rem;margin-top:.5rem;
  font-size:var(--t-micro);color:var(--ink-60);cursor:pointer}
.figen input{width:.875rem;height:.875rem;accent-color:var(--brand);margin:0;cursor:pointer}
.figen-box{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:.4rem}
.figen-box[hidden]{display:none}
.figen-thumb{width:4rem;height:2.5rem;object-fit:cover;border-radius:.375rem;
  border:1px solid var(--hairline)}
.figen-pick{height:1.875rem;padding-inline:.75rem;font-size:var(--t-micro)}
.figen-msg{font-size:var(--t-micro);color:var(--ink-44)}

/* ------------------------------------------ 용어 사전 (2026-09-20 성동님)
   태그 쪽 맨 위에 서는 설명 한 덩이. 기사 목록보다 먼저 읽힌다 */
.glossbox{
  max-width:44rem;margin:1.25rem 0 0;padding:1.25rem 1.5rem;
  border:1px solid var(--hairline);border-left:3px solid var(--brand);
  border-radius:0 var(--r-card) var(--r-card) 0;
  background:var(--canvas-sub);
  font-size:var(--t-small);line-height:1.8;color:var(--ink-80)
}
.glossbox .glosshead{
  display:block;margin:0 0 .375rem;
  font-family:var(--font-display);font-size:var(--t-micro);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-44)
}
.glossbox .glosshead + .glosshead{margin-top:1rem}
.glossbox .glosshead:not(:first-child){margin-top:1.125rem}
@media (max-width:48rem){
  .glossbox{padding:1rem 1.125rem;margin-top:1rem}
}

/* ==========================================================================
   수치 카드 새 판 (2026-09-21 성동님)

   "밋밋하고 타이포그래피의 아름다운 임팩트를 못 보여준다. 정보 구분도 오히려
   어렵다. 폰트 사이즈나 컴러, 비례 등이 밋밋하다."

   상자를 걸치지 않고 **크기 대비**로 세운다. 숫자가 라벨보다 네 배는 커야
   한눈에 읽힌다. 색은 한 군데에만 쓴다 — 부호. 나머지는 회색조로 둔다.
   상자 안에 상자를 넣지 않는다 — 이번 사고의 절반은 그것이었다.
   ========================================================================== */

/* 바깥판: 테두리 상자를 걷어내고 위아래 가는 줄만 남긴다.
   본문에 떠 있는 카드가 아니라 본문에 박힌 한 판이 된다 */
.prose .metrics,
.prose .metric-grid{
  margin-block:clamp(2.75rem,6vw,4rem);
  padding-block:clamp(1.75rem,4vw,2.5rem);
  border:0;border-top:1px solid var(--ink-12);border-bottom:1px solid var(--ink-12);
  border-radius:0;background:transparent;overflow:visible;
  gap:clamp(1.5rem,3.5vw,2.5rem)
}
.prose .metrics > .metric,
.prose .metric-grid > .metric{
  padding:0;border:0;background:transparent;border-radius:0;
  display:flex;flex-direction:column;gap:.5rem;
  align-items:center;text-align:center
}
/* 칸과 칸 사이는 가는 줄 하나. 상자가 아니라 경계다 */
@media (min-width:48rem){
  .prose .metrics > .metric,
  .prose .metric-grid > .metric{padding-inline:clamp(.75rem,1.75vw,1.25rem)}
  .prose .metrics > .metric + .metric,
  .prose .metric-grid > .metric + .metric{
    border-left:1px solid var(--ink-12)
  }
}
@media (max-width:48rem){
  .prose .metrics > .metric + .metric,
  .prose .metric-grid > .metric + .metric{
    border-top:1px solid var(--ink-12);padding-top:clamp(1.5rem,3.5vw,2rem)
  }
}

/* 숫자 줄. 이 한 줄이 카드의 주인이다 */
.prose .metrics > .metric > :first-child,
.prose .metric-grid > .metric > :first-child{
  display:block;margin:0;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.75rem,calc(2.75rem + 2.25 * var(--fluid)),4.5rem);
  line-height:.95;letter-spacing:-.05em;
  font-variant-numeric:tabular-nums lining-nums;
  color:var(--ink-100);
  text-wrap:nowrap
}
/* 라벨. 작고 조용하게. 큰 숫자와의 대비가 계층을 만든다 */
.prose .metrics > .metric > :first-child ~ *,
.prose .metric-grid > .metric > :first-child ~ *{
  display:block;margin:0;padding:0;border:0;background:transparent;border-radius:0;
  font-family:var(--font-sans);font-weight:400;
  font-size:var(--t-small);line-height:1.6;letter-spacing:-.005em;
  color:var(--ink-60);
  word-break:keep-all;overflow-wrap:break-word;text-wrap:pretty;
  max-width:22rem;margin-inline:auto
}
/* 셋째 줄이 있으면 그것은 각주다 */
.prose .metrics > .metric > :first-child ~ * ~ *,
.prose .metric-grid > .metric > :first-child ~ * ~ *{
  font-size:var(--t-micro);color:var(--ink-44);margin-top:.125rem
}

/* --- 숫자 안의 세 조각. render 가 쪬개 준다 ---------------------- */
/* 부호는 수보다 작게, 위로 올려 붙인다. 색은 여기에만 쓴다 */
.prose .metric .m-sign{
  font-size:.46em;line-height:1;vertical-align:.62em;
  margin-right:.06em;letter-spacing:0;font-weight:600;
  color:var(--ink-44)
}
.prose .metric .m-sign.up{color:var(--cat-money)}
.prose .metric .m-sign.down{color:var(--warm)}
/* 수. 주인공이므로 손대지 않는다 */
.prose .metric .m-num{letter-spacing:-.05em}
/* 단위는 수보다 훨씬 작고 흐리게. '%'가 숫자만 큼 크면 수가 안 보인다 */
.prose .metric .m-unit{
  font-size:.4em;line-height:1;vertical-align:.14em;
  margin-left:.1em;letter-spacing:-.01em;font-weight:600;
  color:var(--ink-44)
}

/* 시황 지수판(.mlabel 이 있는 칸)은 짜임새가 다르다. 예전 규칙을 지킨다 */
.prose .metrics:has(.mlabel),
.prose .metric-grid:has(.mlabel){
  padding-block:clamp(1.25rem,3vw,1.75rem);gap:clamp(1rem,2.5vw,1.5rem)
}
.prose .metrics:has(.mlabel) > .metric,
.prose .metric-grid:has(.mlabel) > .metric{
  align-items:stretch;text-align:left
}
.prose .metrics:has(.mlabel) > .metric > :first-child,
.prose .metric-grid:has(.mlabel) > .metric > :first-child{
  font-size:var(--t-small);font-weight:500;line-height:1.4;letter-spacing:.02em;
  color:var(--ink-60)
}

/* 필터 바는 특집 구역 안에서만 따라온다 */
.feature-zone{position:relative}

/* ==========================================================================
   19. 편집실 업로드: HTML 기사 가져오기
   ========================================================================== */
.drop{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;
  padding:clamp(2rem,5vw,3.5rem);text-align:center;
  border:1.5px dashed var(--ink-12);border-radius:var(--r-card);
  background:var(--canvas-sub);cursor:pointer;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.drop:hover,.drop.over{border-color:var(--brand);background:var(--ink-4)}
.drop strong{font-family:var(--font-display);font-weight:500;font-size:var(--t-h4);color:var(--ink-100)}
.drop span{font-size:var(--t-small);color:var(--ink-60);max-width:34rem;line-height:1.6}
/* ★ 상자 안의 단추는 상자 설명글이 아니다. ★
   성동님: "'파일 선택' 버튼 레이블이 안 보이고, 버튼이 온통 하얀다."
   (2026-09-20)
   단추를 span 으로 짜 놓았는데 위의 `.drop span` 이 글자색을 연회색으로
   덮었다. 흰 바탕에 연회색 글자니 글자가 사라졌다. 설명글 규칙이 단추까지
   잡은 것이다 — 10-121 과 같은 병이다. 단추는 단추색을 되찾는다 */
.drop .btn{max-width:none;line-height:1;font-size:var(--t-small)}
.drop .btn-solid{color:var(--cta-fg)}
.drop .btn-ghost{color:var(--ink-100)}
.drop .btn-brand{color:#fff}
.drop input{display:none}

.up-list{display:flex;flex-direction:column;gap:1rem;margin-top:1.5rem}
.up-card{border:1px solid var(--hairline);border-radius:var(--r-card);
  background:var(--canvas-sub);padding:1.25rem}
.up-card.stop{border-color:color-mix(in srgb,var(--cat-book) 55%,transparent)}
.up-head{display:flex;align-items:center;gap:.625rem;flex-wrap:wrap;margin-bottom:.875rem}
.up-file{font-size:var(--t-micro);color:var(--ink-44);font-family:ui-monospace,Menlo,monospace}
.up-title{width:100%;margin-bottom:.75rem}
.up-title input{width:100%;padding:.625rem .75rem;border-radius:var(--r-media);
  border:1px solid var(--ink-12);background:var(--canvas);color:var(--ink-100);
  font:500 var(--t-body)/1.4 var(--font-sans)}
.up-fields{display:grid;gap:.625rem;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:.875rem}
.up-fields label{display:block;font-size:var(--t-micro);color:var(--ink-44);margin-bottom:.25rem}
.up-fields select,.up-fields input{width:100%;padding:.5rem .625rem;border-radius:var(--r-media);
  border:1px solid var(--ink-12);background:var(--canvas);color:var(--ink-100);
  font:400 var(--t-small)/1.4 var(--font-sans)}
.up-fields input::placeholder{color:var(--ink-44)}
.up-fields input:focus,.up-fields select:focus{border-color:var(--brand);outline:none}
.up-stats{display:flex;flex-wrap:wrap;gap:.375rem;margin-bottom:.875rem}
.stat-pill{display:inline-flex;align-items:center;height:1.5rem;padding-inline:.5rem;
  border-radius:var(--r-pill);border:1px solid var(--ink-12);background:var(--ink-4);
  font-size:var(--t-micro);color:var(--ink-60)}
.stat-pill.miss{border-color:color-mix(in srgb,var(--cat-book) 45%,transparent);
  color:var(--cat-book);background:color-mix(in srgb,var(--cat-book) 10%,transparent)}
.up-warn{list-style:none;margin:0 0 .875rem;padding:0;display:flex;flex-direction:column;gap:.375rem}
.up-warn li{display:flex;gap:.5rem;font-size:var(--t-small);line-height:1.5;color:var(--ink-60)}
.up-warn li::before{content:"";width:.4rem;height:.4rem;border-radius:50%;flex:none;margin-top:.55em;
  background:var(--ink-44)}
.up-warn li.stop{color:var(--ink-100)}
.up-warn li.stop::before{background:var(--cat-book)}
.up-warn li.warn::before{background:var(--cat-life)}
.up-actions{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.up-pre{margin:.875rem 0 0;padding:1rem;border-radius:var(--r-media);background:var(--canvas);
  border:1px solid var(--hairline);overflow-x:auto;max-height:22rem;
  font:400 .75rem/1.6 ui-monospace,Menlo,monospace;color:var(--ink-80);white-space:pre}
.up-bar{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;
  margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--hairline)}
@media (max-width:64rem){.up-fields{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ==========================================================================
   20. 시리즈: 이전 편 · 다음 편 · 회차 목록
   ========================================================================== */
.series-line{
  display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;
  margin:1.5rem 0 0;padding:.875rem 1.125rem;
  border:1px solid var(--hairline);border-radius:var(--r-pill);
  background:var(--canvas-sub);
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.series-line:hover{border-color:var(--brand);background:var(--ink-4)}
.series-line .label{
  font-family:var(--font-display);font-size:var(--t-micro);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-44);white-space:nowrap;
}
.series-line .no{font-size:var(--t-micro);color:var(--brand-text);font-weight:500;white-space:nowrap}
.series-line .t{font-size:var(--t-small);font-weight:500;color:var(--ink-100);
  line-height:1.45;min-width:0}
.series-line .arrow{margin-left:auto;color:var(--ink-44);flex:none}

.series-next{
  display:block;margin:clamp(2.5rem,5vw,3.5rem) 0 0;padding:clamp(1.5rem,3vw,2rem);
  border-radius:1.25rem;border:1px solid color-mix(in srgb,var(--brand) 34%,transparent);
  background:linear-gradient(145deg,
    color-mix(in srgb,var(--brand) 14%,transparent), var(--canvas-sub) 62%);
  transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.series-next:hover{transform:translateY(-2px);border-color:var(--brand)}
.series-next .kicker{display:block;font-family:var(--font-display);font-size:var(--t-micro);
  font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-text);
  margin-bottom:.75rem}
.series-next h3{font-size:var(--t-h3);line-height:1.3;color:var(--ink-100);margin-bottom:.625rem}
.series-next p{margin:0;font-size:var(--t-small);line-height:1.6;color:var(--ink-60)}
.series-next .go{display:inline-flex;align-items:center;gap:.375rem;margin-top:1rem;
  font-size:var(--t-small);font-weight:500;color:var(--brand-text)}

.series-toc{margin:clamp(2rem,4vw,2.5rem) 0 0;padding-top:1.5rem;
  border-top:1px solid var(--hairline)}
.series-toc h4{font-family:var(--font-display);font-size:var(--t-micro);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-44);margin-bottom:.25rem}
.series-toc .series-name{font-family:var(--font-display);font-weight:500;
  font-size:var(--t-h4);color:var(--ink-100);margin-bottom:1rem;display:block}
.series-toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.series-toc li{border-bottom:1px solid var(--hairline)}
.series-toc li:last-child{border-bottom:0}
.series-toc a,.series-toc span.cur{
  display:flex;gap:.875rem;align-items:baseline;padding:.875rem .25rem;
  font-size:var(--t-small);line-height:1.5;color:var(--ink-60);
  transition:color var(--dur-fast) var(--ease);
}
.series-toc a:hover{color:var(--ink-100)}
.series-toc .n{font-family:var(--font-display);font-weight:600;font-size:var(--t-micro);
  color:var(--ink-44);flex:none;width:2.25rem}
.series-toc span.cur{color:var(--ink-100);font-weight:500}
.series-toc span.cur .n{color:var(--brand-text)}
.series-toc .now{margin-left:auto;font-size:var(--t-micro);color:var(--ink-44);flex:none}
.series-toc .soon{color:var(--ink-44)}

/* 시리즈 블록 안의 링크는 밑줄을 걷어낸다 */
.prose .series-line,.prose .series-next,.prose .series-toc a{
  text-decoration:none;color:inherit}
.prose .series-toc a{text-decoration-color:transparent}
.prose .series-toc a:hover{text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.2em;text-decoration-color:var(--ink-44)}

/* ==========================================================================
   21. 편집실 목록: 다중 선택과 일괄 처리
   ========================================================================== */
.rows-head{display:grid;grid-template-columns:2rem 6.5rem minmax(0,1fr) 7.5rem 6.5rem 6.5rem 6.5rem;
  gap:1rem;align-items:center;padding:.625rem 1.125rem;
  border-bottom:1px solid var(--hairline);background:var(--canvas-raise);
  font-size:var(--t-micro);color:var(--ink-44);letter-spacing:.02em}
.row{grid-template-columns:2rem 6.5rem minmax(0,1fr) 7.5rem 6.5rem 6.5rem 6.5rem}
.row.sel{background:color-mix(in srgb,var(--brand) 12%,transparent)}
.row .pick,.rows-head .pick{display:flex;align-items:center;justify-content:center}
/* 입력일·발행일·수정일 머리. 누르면 그 칸으로 정렬하고, 다시 누르면 방향이 바뀐다 */
.sorth{display:inline-flex;align-items:center;gap:.3rem;padding:0;border:0;background:none;
  font:inherit;color:inherit;cursor:pointer;text-align:left;letter-spacing:inherit}
.sorth:hover{color:var(--ink-100)}
.sorth i{width:0;height:0;border-left:.28rem solid transparent;border-right:.28rem solid transparent;
  border-top:.32rem solid currentColor;opacity:0;transition:opacity var(--dur),transform var(--dur)}
.sorth.on{color:var(--brand);font-weight:600}
.sorth.on i{opacity:1}
.sorth.on.asc i{transform:rotate(180deg)}

.row input[type=checkbox],.rows-head input[type=checkbox]{
  width:1rem;height:1rem;accent-color:var(--brand);cursor:pointer;margin:0}
.row .who{font-size:var(--t-micro);color:var(--ink-44);margin-top:.25rem;
  display:inline-flex;align-items:center;gap:.375rem}
.row .who i{width:.375rem;height:.375rem;border-radius:50%;background:var(--cat-people);display:block}
.row .who.human i{background:var(--cat-tech)}
.row .who.phone i{background:var(--cat-life)}

.bulkbar{position:sticky;bottom:0;z-index:40;
  display:flex;align-items:center;gap:.625rem;flex-wrap:wrap;
  margin-top:1rem;padding:.875rem 1.125rem;
  border:1px solid var(--brand);border-radius:var(--r-card);
  background:color-mix(in srgb,var(--canvas) 92%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 8px 24px rgb(0 0 0/.25)}
.bulkbar .n{font-family:var(--font-display);font-weight:600;color:var(--ink-100);
  font-size:var(--t-small)}
.bulkbar .sp{flex:1}
.bulkbar[hidden]{display:none}
.emptyrow{padding:3rem 1rem;text-align:center;color:var(--ink-44);font-size:var(--t-small)}

.store-note{margin-top:1rem;font-size:var(--t-micro);color:var(--ink-44);line-height:1.6}

@media (max-width:64rem){
  .rows-head{display:none}
  .row{grid-template-columns:2rem 6.5rem minmax(0,1fr);gap:.75rem}
}

/* --------------------------------------------------- 22. 제목 링크와 미리보기 */
.row .tlink{
  background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;
  text-align:left;cursor:pointer;display:block;width:100%;
}
.row .tlink:hover{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.row .tlink:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:.25rem}
.rowact{
  background:none;border:0;padding:0;margin-left:.5rem;font:inherit;font-size:var(--t-micro);
  color:var(--ink-44);cursor:pointer;text-decoration:underline;text-underline-offset:.2em;
}
.rowact:hover{color:var(--ink-100)}

.prev-wrap{position:fixed;inset:0;z-index:90;background:var(--canvas);display:flex;flex-direction:column}
.prev-wrap[hidden]{display:none}
.prev-bar{
  display:flex;align-items:center;gap:.75rem;flex:0 0 auto;
  padding:.75rem clamp(1rem,3vw,1.75rem);
  border-bottom:1px solid var(--hairline);background:var(--canvas-sub);
}
.prev-name{
  font-size:var(--t-micro);color:var(--ink-60);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:36ch;
}
.prev-body{flex:1 1 auto;overflow:auto;padding:clamp(1.5rem,4vw,3rem) var(--gutter) 6rem}
/* 홈 미리보기는 진짜 홈을 그대로 띄운다. 편집실 글꼴이 섞이지 않게 틀 안에 넣는다 */
.prev-frame{display:block;width:100%;height:calc(100vh - 10rem);border:0;border-radius:.75rem;background:var(--canvas)}
.prev-wrap.phone .prev-frame{height:calc(100vh - 11rem)}
.prev-stage{margin:0 auto;max-width:var(--measure)}
.prev-wrap.phone .prev-body{background:var(--canvas-sub)}
.prev-wrap.phone .prev-stage{
  max-width:23.4375rem;background:var(--canvas);border:1px solid var(--hairline);
  border-radius:1.5rem;padding:1.5rem 1.25rem 2.5rem;box-shadow:0 1.5rem 3rem rgb(0 0 0/.45);
}
.prev-wrap.phone .article-title{font-size:1.75rem}
.prev-wrap.phone .deck{font-size:1.0625rem}
.prev-note{
  margin:0 auto 2rem;max-width:var(--measure);font-size:var(--t-micro);color:var(--ink-44);
  border-left:2px solid var(--ink-12);padding-left:.75rem;line-height:1.6;
}
.store-note.legend{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem;margin-top:1.25rem}
.store-note.legend b{color:var(--ink-60);font-weight:500;margin-right:.125rem}
.lg-dot{width:.375rem;height:.375rem;border-radius:50%;display:inline-block;margin-left:.5rem}
.lg-dot.phone{background:var(--cat-life)}
.lg-dot.bot{background:var(--cat-people)}
.lg-dot.human{background:var(--cat-tech)}

/* --------------------------------------------------------- 23. 오늘의 편성 */
.planwrap{display:grid;grid-template-columns:minmax(0,1fr) 23rem;gap:1.5rem;align-items:start}
@media (max-width:64rem){.planwrap{grid-template-columns:minmax(0,1fr)}}

/* ---------------------------------------------- 첫 화면 축소판 (오늘의 편성)
   성동님: "실제 배치된 기사의 축소판을 보여주고 ... 드래그&드랍으로 상단 총
   9개의 기사를 수동 배치할 수 있게 해주면 좋겠다" (2026-09-14)
   지면의 생김새를 그대로 줄여 놓는다. 1번이 크고, 2·3번이 나란히, 4번이 넓고
   5·6번이 옆에 세로로, 7·8·9번이 아래에 셋. */
.pagemap{display:flex;flex-direction:column;gap:.75rem}
.pagemap .map-note{margin:0 0 .25rem;font-size:var(--t-micro);color:var(--ink-60);line-height:1.5}
.map-row{display:grid;gap:.75rem}
.map-1{grid-template-columns:1fr}
.map-2{grid-template-columns:1fr 1fr}
.map-3{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.map-4{grid-template-columns:1fr 1fr 1fr}
.map-col{display:grid;gap:.75rem;grid-template-rows:1fr 1fr}
.cell{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:5.5rem;padding:.75rem .875rem;
  border:1px dashed var(--ink-12);border-radius:1rem;background:var(--ink-04,rgba(127,127,127,.05));
  cursor:grab;overflow:hidden;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.cell.big{min-height:10rem}
.cell.wide{min-height:8.5rem}
.cell.small{min-height:3.75rem}
.cell.has{border-style:solid;border-color:var(--ink-22,rgba(127,127,127,.25));background:var(--card,rgba(127,127,127,.08))}
/* 손으로 잡지 않은 자리. 지금 거기 설 기사를 흐리게 보여 준다 */
.cell.auto .ct{color:var(--ink-60)}
.cell.auto .cs{color:var(--ink-44)}
.cell.auto{border-style:dashed}
.cell.over{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 12%,transparent)}
.cell.drag{opacity:.4}
.cell .num{
  position:absolute;top:.5rem;left:.625rem;
  font-size:var(--t-micro);font-weight:700;color:var(--ink-44);letter-spacing:.02em;
}
.cell.has .num{color:var(--brand)}
.cell .ct{font-size:.8125rem;font-weight:600;line-height:1.35;color:var(--ink-100);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cell .cs{margin-top:.25rem;font-size:var(--t-micro);color:var(--ink-60)}
.cell .cx{position:absolute;top:.375rem;right:.375rem;border:0;background:transparent;
  color:var(--ink-44);font-size:.875rem;line-height:1;padding:.25rem .375rem;cursor:pointer;border-radius:.5rem}
.cell .cx:hover{color:var(--ink-100);background:var(--ink-08,rgba(127,127,127,.1))}
.cell .hint{font-size:var(--t-micro);color:var(--ink-44)}
.cand.drag{opacity:.4}
.cand[draggable="true"]{cursor:grab}
.cand .on{border-color:var(--brand);color:var(--brand)}

.slot{border:1px solid var(--hairline);border-radius:1rem;background:var(--canvas-sub);
  margin-bottom:1rem;overflow:hidden}
.slot-head{display:flex;align-items:baseline;gap:.625rem;padding:.875rem 1.125rem;
  border-bottom:1px solid var(--hairline)}
.slot-head b{font-family:'Poppins',sans-serif;font-size:var(--t-small);font-weight:600;letter-spacing:.02em}
.slot-head span{font-size:var(--t-micro);color:var(--ink-44)}
.slot-head i{margin-left:auto;font-style:normal;font-size:var(--t-micro);color:var(--ink-60);white-space:nowrap}
.slot-head i.over{color:var(--warm)}
.slot-body{padding:.5rem}
.slot-empty{padding:1.5rem 1rem;text-align:center;color:var(--ink-44);font-size:var(--t-micro)}

.prow{display:flex;align-items:center;gap:.625rem;padding:.5rem .75rem;border-radius:.625rem}
.prow:hover{background:var(--ink-4)}
.prow .n{font-size:var(--t-micro);color:var(--ink-44);width:1.25rem;flex:0 0 auto}
.prow .t{flex:1;min-width:0;font-size:var(--t-small);line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prow .s{font-size:var(--t-micro);color:var(--ink-44);white-space:nowrap}

.minibtn{background:none;border:1px solid var(--ink-12);border-radius:.5rem;color:var(--ink-60);
  font:inherit;font-size:var(--t-micro);padding:.125rem .5rem;cursor:pointer;line-height:1.6;flex:0 0 auto}
.minibtn:hover{color:var(--ink-100);border-color:var(--ink-44)}
.minibtn.on{background:var(--brand);border-color:var(--brand);color:#fff}
.minibtn[disabled]{opacity:.35;cursor:default}
.minisel{appearance:auto;-webkit-appearance:menulist;padding-right:.35rem;cursor:pointer;background:var(--bg,transparent)}

.cands{border:1px solid var(--hairline);border-radius:1rem;background:var(--canvas-sub);
  position:sticky;top:1rem;overflow:hidden}
.cand-head{display:flex;align-items:center;gap:.75rem;padding:.875rem 1.125rem;
  border-bottom:1px solid var(--hairline)}
.cand-head b{font-family:'Poppins',sans-serif;font-size:var(--t-small);font-weight:600}
.cand-list{max-height:34rem;overflow:auto;padding:.5rem}
.cand{padding:.625rem .75rem;border-radius:.625rem}
.cand + .cand{border-top:1px solid var(--ink-4)}
.cand .t{font-size:var(--t-small);line-height:1.4;color:var(--ink-100)}
.cand .s{font-size:var(--t-micro);color:var(--ink-44);margin-top:.25rem}
.cand .acts{display:flex;gap:.375rem;margin-top:.5rem;flex-wrap:wrap}

/* ------------------------------------------- 24. 게이트 낱말, 레일, 시리즈, 이슈 지도, 설정 */
.gatewords{display:flex;gap:.3125rem;flex-wrap:wrap}
.gatewords b{font-weight:400;font-size:var(--t-micro);line-height:1.5;
  padding:.0625rem .375rem;border-radius:.375rem;color:var(--ink-44);
  background:var(--ink-4);white-space:nowrap}
.gatewords b.on{color:var(--canvas);background:var(--cat-plan);font-weight:500}

.panel-note{font-size:var(--t-micro);color:var(--ink-60);line-height:1.7;
  border-left:2px solid var(--ink-12);padding-left:.875rem;margin:0 0 1.25rem;max-width:46rem}

.sgroup{border:1px solid var(--hairline);border-radius:1rem;background:var(--canvas-sub);
  margin-bottom:1rem;overflow:hidden}
.sgroup-head{display:flex;align-items:baseline;gap:.625rem;padding:.875rem 1.125rem;
  border-bottom:1px solid var(--hairline)}
.sgroup-head b{font-size:var(--t-body);font-weight:500}
.sgroup-head span{font-size:var(--t-micro);color:var(--ink-44)}
.sgroup-head i{margin-left:auto;font-style:normal;font-size:var(--t-micro);color:var(--ink-60)}
.sgroup-body{padding:.5rem}
.gap-note{margin:.25rem .75rem .75rem;font-size:var(--t-micro);color:var(--warm)}

.issuewrap{display:grid;grid-template-columns:minmax(0,1fr) 21rem;gap:1.5rem;align-items:start}
@media (max-width:64rem){.issuewrap{grid-template-columns:minmax(0,1fr)}}
.cross{width:100%;border-collapse:collapse;font-size:var(--t-micro)}
.cross th,.cross td{padding:.5rem .625rem;text-align:center;border-bottom:1px solid var(--ink-4)}
.cross th{color:var(--ink-44);font-weight:400}
.cross th:first-child,.cross td:first-child{text-align:left;color:var(--ink-80)}
.cross td.z{color:var(--ink-12)}
.cross td.hot{color:var(--ink-100);font-weight:500}
.wordcloud{display:flex;flex-wrap:wrap;gap:.5rem;padding:.5rem}
.wordbtn{background:var(--ink-4);border:1px solid transparent;border-radius:var(--r-pill);
  color:var(--ink-80);font:inherit;font-size:var(--t-small);padding:.25rem .75rem;cursor:pointer}
.wordbtn:hover{border-color:var(--ink-44);color:var(--ink-100)}
.wordbtn.on{background:var(--brand);color:#fff}
.wordbtn i{font-style:normal;color:var(--ink-44);margin-left:.375rem;font-size:var(--t-micro)}
.wordbtn.on i{color:rgb(255 255 255/.7)}

.setpane[hidden]{display:none}
.gaterow{border:1px solid var(--hairline);border-radius:.875rem;padding:1rem 1.125rem;
  margin-bottom:.75rem;background:var(--canvas-sub);max-width:46rem}
.gaterow .k{font-size:var(--t-micro);color:var(--ink-44);margin-bottom:.5rem}
.gaterow input,.gaterow textarea{width:100%}
.gaterow .g2{display:grid;grid-template-columns:12rem minmax(0,1fr);gap:.75rem}
@media (max-width:48rem){.gaterow .g2{grid-template-columns:minmax(0,1fr)}}

/* --------------------------------------------------- 25. 편집기 도움말과 제안 */
.helpbox{border:1px solid var(--hairline);border-radius:1rem;background:var(--canvas-sub);
  padding:1.5rem 1.75rem;margin-bottom:1.5rem;max-width:56rem}
.helpbox[hidden]{display:none}
.helpbox h3{font-size:var(--t-small);font-weight:600;margin:1.5rem 0 .5rem;color:var(--ink-100)}
.helpbox h3:first-child{margin-top:0}
.helpbox p,.helpbox li{font-size:var(--t-small);line-height:1.75;color:var(--ink-80);margin:0}
.helpbox ol{margin:0;padding-left:1.25rem;display:flex;flex-direction:column;gap:.375rem}
.helpbox b{color:var(--ink-100);font-weight:500}
.f label .minibtn{margin-left:.5rem;vertical-align:baseline}
.f .hint b{color:var(--ink-80);font-weight:500}

/* ------------------------------------------------------- 26. 블로그 3편 */
.nvpost{border:1px solid var(--hairline);border-radius:1rem;background:var(--canvas-sub);
  margin-bottom:1.5rem;overflow:hidden}
.nvpost-head{display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap;
  padding:1rem 1.25rem;border-bottom:1px solid var(--hairline)}
.nvpost-head .n{font-family:'Poppins',sans-serif;font-size:var(--t-small);font-weight:600;color:var(--brand-text)}
.nvpost-head .k{font-size:var(--t-micro);color:var(--ink-44)}
.nvpost-body{padding:1.25rem}
.nvrow{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:1rem}
.nvrow .lab{flex:0 0 4.5rem;font-size:var(--t-micro);color:var(--ink-44);padding-top:.375rem}
.nvrow .val{flex:1;min-width:0;font-size:var(--t-small);line-height:1.6;color:var(--ink-100)}
.nvrow .val.title{font-size:var(--t-h4);font-weight:500;line-height:1.4}
.nvtext{width:100%;min-height:20rem;background:var(--canvas);color:var(--ink-100);
  border:1px solid var(--ink-12);border-radius:.75rem;padding:1rem 1.125rem;
  font:inherit;font-size:var(--t-small);line-height:1.85;resize:vertical;white-space:pre-wrap}
.nvchips{display:flex;flex-wrap:wrap;gap:.375rem}
.nvchip{background:var(--ink-4);border-radius:var(--r-pill);padding:.125rem .625rem;
  font-size:var(--t-micro);color:var(--ink-80)}
.nvmeta{font-size:var(--t-micro);color:var(--ink-44);margin-top:.75rem;line-height:1.7}

/* 27. 섹션 목표 비중 안내 ------------------------------------------------ */
.fhint{display:block;margin-top:.375rem;font-size:var(--t-micro);
  color:var(--ink-44);line-height:1.5}

/* 28. 블로그 3편: 언제 뽑았는지 ------------------------------------------ */
.prev-when{font-size:var(--t-micro);color:var(--ink-44);
  margin-right:.5rem;white-space:nowrap}
@media (max-width:34rem){ .prev-when{display:none} }


/* 29. 상단 광고 자리 ----------------------------------------------------
   헤더 위, 너비 전체. 스크롤하면 함께 올라가고 헤더만 남는다. */
.ad-top{background:var(--canvas-sub);border-bottom:1px solid var(--hairline)}
.ad-top-inner{position:relative;display:flex;align-items:center;justify-content:center;
  padding-block:.875rem;min-height:calc(90px + 1.75rem)}
.ad-label{position:absolute;top:.375rem;right:var(--gutter);
  font-size:.625rem;font-weight:500;letter-spacing:.08em;color:var(--ink-44)}
.ad-unit{width:100%;max-width:970px;min-height:90px;
  display:flex;align-items:center;justify-content:center}
.ad-unit ins{display:block;width:100%}
/* 미리보기: 광고 코드가 없을 때 자리만 보여 준다 */
.ad-unit.is-preview{border:1px dashed var(--ink-12);border-radius:.5rem;
  color:var(--ink-44);font-size:var(--t-micro);letter-spacing:.02em}
@media (max-width:48rem){
  .ad-top-inner{min-height:calc(100px + 1.5rem);padding-block:.75rem}
  .ad-unit{max-width:100%;min-height:100px}
}

/* 30. 본문 표 감싸개 ---------------------------------------------------- */
.prose .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
  margin:1.75rem 0;border:1px solid var(--hairline);border-radius:.75rem}
.prose .table-wrap table{margin:0;border:0}

/* ★ 표 글자는 본문보다 작지 않다. ★
   성동님: "왜 인포그래픽이 폰트 사이즈가 본문보다 작지? 더 크게 돋보이고
   강조되는 게 아니라 더 약소해 보이지? 이러면 안 된다." (2026-09-22)

   칸 글자가 14px, 머리가 12px 대문자였고 본문은 20px 이었다. 표는 본문을
   정리해 보여 주는 자리인데 본문보다 작으면 각주처럼 읽힌다.
   - 칸도 머리도 본문 크기(--t-read)
   - 머리는 굵게, 대문자·자간 벌리기는 버린다(한글에는 소용없다)
   - 첫 칸은 행의 이름이므로 굵고 밝게
   - 세 칸까지는 화면 폭 안에 들인다. 옆으로 흐르면 셋째 칸이 잘려
     있는 줄도 모른다. 넷 칸 이상일 때만 옆으로 흐르게 둔다 */
.prose table{font-size:var(--t-read);min-width:0;font-variant-numeric:tabular-nums}
.prose th,.prose td{padding:clamp(.85rem,2vw,1.15rem) clamp(.7rem,2vw,1.25rem);
  line-height:1.5;word-break:keep-all;overflow-wrap:break-word}
.prose thead th{font-family:var(--font-display);font-weight:700;
  font-size:var(--t-read);letter-spacing:-.01em;text-transform:none;
  color:var(--ink-100);background:var(--canvas-raise);border-bottom:2px solid var(--ink-12)}
.prose tbody td{color:var(--ink-80)}
.prose tbody td:first-child{font-family:var(--font-display);font-weight:600;color:var(--ink-100)}
.prose table:has(tr > :nth-child(4)){min-width:40rem}

/* 31. 발행 뒤 올라간 주소 ------------------------------------------------ */
.pub-live{margin:.75rem 0 0;font-size:var(--t-micro);color:var(--ink-60);line-height:1.6;
  word-break:break-all}
.pub-live a{color:var(--brand-text)}

/* 32. 대표 이미지 없는 기사의 머리와 본문 사이 ---------------------------- */
.prose-nofig{margin-top:0}
.article-head:not(:has(.hero-figure)){margin-bottom:2.25rem}

/* 33. 편집실 이미지 올리기 ---------------------------------------------- */
.drop{position:relative;display:flex;align-items:center;justify-content:center;
  min-height:11rem;border:1px dashed var(--ink-12);border-radius:.875rem;
  background:var(--canvas-sub);cursor:pointer;overflow:hidden;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.drop:hover,.drop:focus-visible{border-color:var(--brand);outline:none}
.drop.over{border-color:var(--brand);background:var(--brand-soft)}
.drop-empty{padding:1.5rem;text-align:center;font-size:var(--t-small);color:var(--ink-60);line-height:1.6}
.drop-empty small{display:block;margin-top:.375rem;font-size:var(--t-micro);color:var(--ink-44)}
.drop-prev{display:block;width:100%;height:auto;max-height:20rem;object-fit:cover}
.drop-busy{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--canvas) 78%,transparent);
  font-size:var(--t-small);color:var(--ink-80)}
.figbar{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.fighint{font-size:var(--t-micro);color:var(--ink-44)}

/* 34. 기사 본문 삽화 ----------------------------------------------------- */
.prose .body-figure{margin:2rem 0}
.prose .body-figure img{display:block;width:100%;height:auto;border-radius:.5rem}
.prose .body-figure figcaption{margin-top:.75rem;font-size:var(--t-small);
  line-height:1.6;color:var(--ink-60)}
.prose p img{display:block;width:100%;height:auto;border-radius:.5rem;margin:.5rem 0}
.hero-figure img{display:block;width:100%;height:auto}

/* ==========================================================================
   인물 사진을 지면으로 앉히는 판.

   얼굴 사진을 통째로 깔면 증명사진이 된다. 이코노미스트와 더버지는 그렇게
   안 한다. 색면을 깔고 인물을 한쪽으로 몰아 앉힌 다음, 남은 쪽을 여백과
   가는 선으로 채운다. 사진 자체는 손대지 않는다. 합성으로 얼굴을 건드리면
   다시 어색해진다 (2026-09-11 성동님)
   ========================================================================== */
.hero-face{
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:var(--r-media);
  background:var(--canvas-sub);
  isolation:isolate;
}
/* 색면. 갈래 색을 옅게 깔고 위에서 아래로 가라앉힌다 */
.hero-face .hero-field{
  position:absolute;inset:0;z-index:0;
  background:
    linear-gradient(150deg,
      color-mix(in oklab, var(--sec-c, var(--brand)) 26%, var(--canvas-sub)) 0%,
      var(--canvas-sub) 62%);
}
/* 가는 세로줄. 지면이라는 표시다. 너무 세면 사진을 방해한다 */
.hero-face .hero-field::after{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,
    rgb(255 255 255/.045) 0 1px, transparent 1px 3.25rem);
}
/* 인물은 오른쪽에 앉는다. 위를 기준으로 잘라야 머리가 안 잘린다 */
.hero-face img{
  position:relative;z-index:1;
  grid-area:1/1;
  width:62%;height:100%;
  justify-self:end;
  object-fit:cover;object-position:50% 16%;
  /* 사진 자체의 스튜디오 배경이 네모로 도드라지지 않게 왼쪽을 길게 푼다 */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgb(0 0 0/.35) 10%,#000 30%,#000 100%);
          mask-image:linear-gradient(90deg,transparent 0,rgb(0 0 0/.35) 10%,#000 30%,#000 100%);
  /* 색을 아주 조금 죽여 색면과 같은 공기로 만든다 */
  filter:saturate(.88) contrast(1.04);
}
/* 사진 위에 색면과 같은 색을 옅게 덮어 한 장처럼 만든다.
   이코노미스트가 인물을 지면에 앉힐 때 쓰는 손질이다 */
.hero-face::after{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(100deg,
    color-mix(in oklab, var(--sec-c, var(--brand)) 34%, var(--canvas-sub)) 0%,
    color-mix(in oklab, var(--sec-c, var(--brand)) 18%, transparent) 34%,
    transparent 62%);
}
.hero-face figcaption{position:absolute;left:0;bottom:0;z-index:3;
  margin:0;padding:0 0 .875rem 1.125rem;max-width:46%;
  font-size:var(--t-micro);color:var(--ink-44)}
/* 폰에서는 인물을 더 넓게 둔다. 좁은 화면에서 58% 는 너무 작다 */
@media (max-width:34rem){
  .hero-face{aspect-ratio:4/3}
  .hero-face img{width:78%}
  .hero-face figcaption{max-width:60%;padding-left:.875rem}
}

/* 35. 이미지 한꺼번에 붙이기 -------------------------------------------- */
.bulkimg{display:block;margin:0 0 1.25rem;padding:1rem 1.125rem;
  border:1px dashed var(--ink-12);border-radius:.875rem;background:var(--canvas-sub);
  cursor:pointer;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.bulkimg:hover,.bulkimg:focus-visible{border-color:var(--brand);outline:none}
.bulkimg.over{border-color:var(--brand);background:var(--brand-soft)}
.bulkimg.busy{border-style:solid;border-color:var(--brand)}
.bulkimg b{display:block;font-weight:500;font-size:var(--t-small);margin-bottom:.25rem}
.bulkimg span{display:block;font-size:var(--t-micro);color:var(--ink-60);line-height:1.6}
.bulkimg em{display:block;font-style:normal;margin-top:.5rem;
  font-size:var(--t-micro);font-weight:500;color:var(--brand-text)}
.who .idtag{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.6875rem;padding:.0625rem .375rem;border-radius:.25rem;
  background:var(--ink-4);color:var(--ink-44);margin-right:.4375rem;user-select:all}

/* 36. 기자 이름 옆 메일 주소 --------------------------------------------- */
.byline .bymail{font-size:var(--t-micro);color:var(--ink-44);margin-left:.5rem;
  text-decoration:none;border-bottom:1px solid var(--ink-12)}
.byline .bymail:hover{color:var(--brand-text);border-bottom-color:var(--brand)}

/* 37. 목록 카드의 대표 이미지 ------------------------------------------- */
.card-media img{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;
  transition:transform var(--dur-slow) var(--ease);
}
.card:hover .card-media img{transform:scale(1.035)}

/* 38. 편집실 서랍 저장 상태 --------------------------------------------- */
.syncline{margin:.75rem 1rem 0;font-size:var(--t-micro);color:var(--ink-44);line-height:1.5}
.syncline.bad{color:var(--warn,#e0a33e)}

/* 39. 자동 처리 진행 막대 ----------------------------------------------- */
.autobar{position:fixed;left:1rem;bottom:1rem;z-index:60;
  display:flex;align-items:center;gap:.75rem;
  max-width:min(30rem,calc(100vw - 2rem));
  padding:.75rem 1rem;border-radius:var(--r-pill);
  background:var(--canvas-raise);border:1px solid var(--hairline);
  box-shadow:0 .75rem 2rem rgb(0 0 0/.35);
  font-size:var(--t-micro);color:var(--ink-80)}
.autobar strong{font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.autobar .btn{flex:none;padding:.25rem .75rem;font-size:var(--t-micro)}
.autobar .dotpulse{flex:none;width:.5rem;height:.5rem;border-radius:50%;
  background:var(--brand);animation:autopulse 1.2s ease-in-out infinite}
.autobar.done .dotpulse{animation:none;background:var(--ink-44)}
@keyframes autopulse{0%,100%{opacity:.25}50%{opacity:1}}
@media (max-width:40rem){.autobar{left:.75rem;right:.75rem;bottom:.75rem;max-width:none}}

/* ★ 기사 처리 현황판 (편집실 맨 위). ★
   성동님: "속도 업로드가 급한데, 진행이 되고 있나 걱정스럽다." (2026-09-14)
   급할 때 보는 화면이다. 숫자가 커야 하고, 단계가 한눈에 갈라져 보여야 한다 */
.jobs{margin:0 0 1.5rem;padding:1rem 1.125rem 1.125rem;border-radius:1rem;
  border:1px solid var(--hairline);background:var(--canvas-sub)}
.jobs-head{display:flex;align-items:center;gap:.75rem;margin-bottom:.875rem}
.jobs-head strong{font-family:var(--font-display);font-weight:600;font-size:1rem;letter-spacing:-.02em}
.jobs-head .sp{flex:1}
.jobs-head .dotpulse{flex:none;width:.5rem;height:.5rem;border-radius:50%;
  background:var(--brand);animation:abpulse 1.4s ease-in-out infinite}
.jobs-sum{font-size:var(--t-micro);color:var(--ink-44);letter-spacing:-.01em}
.jobs-rows{display:flex;flex-direction:column;gap:.625rem}
.jrow{padding:.875rem 1rem;border-radius:.75rem;border:1px solid var(--ink-4);
  background:var(--canvas)}
.jrow.is-fail{border-color:color-mix(in srgb,var(--bad,#ff6b6b) 40%,transparent)}
.jtop{display:flex;align-items:center;gap:.625rem;margin-bottom:.625rem}
.jname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:var(--t-small);color:var(--ink-80)}
.jtime{flex:none;font-size:var(--t-micro);color:var(--ink-60);
  font-variant-numeric:tabular-nums}
.jmark{flex:none;font-size:var(--t-micro);font-weight:600;padding:.1875rem .5rem;
  border-radius:999px;border:1px solid var(--ink-12);color:var(--ink-60)}
.jmark.is-run{color:var(--brand);border-color:color-mix(in srgb,var(--brand) 45%,transparent)}
.jmark.is-done{color:var(--brand-2);border-color:color-mix(in srgb,var(--brand-2) 40%,transparent)}
.jmark.is-retry{color:#ffb26e;border-color:rgb(255 178 110/.45)}
.jmark.is-fail{color:#ff8f8f;border-color:rgb(255 143 143/.45)}
/* 단계 칸. 네 개가 나란히 서고 좁아지면 접힌다 */
.jsteps{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}
@media (max-width:44rem){.jsteps{grid-template-columns:repeat(2,1fr)}}
.jstep{display:flex;flex-direction:column;gap:.1875rem;padding:.5rem .625rem;
  border-radius:.5rem;border:1px solid var(--ink-4);background:var(--canvas-sub)}
.jstep b{font-size:var(--t-micro);font-weight:600;color:var(--ink-60);letter-spacing:-.01em}
.jstep i{font-style:normal;font-size:var(--t-micro);color:var(--ink-44);
  font-variant-numeric:tabular-nums}
.jstep u{text-decoration:none;font-size:var(--t-micro);color:#ffb26e}
.jstep.is-wait{opacity:.55}
.jstep.is-skip{opacity:.4}
.jstep.is-skip b{text-decoration:line-through}
.jstep.is-run{border-color:color-mix(in srgb,var(--brand) 50%,transparent);
  background:color-mix(in srgb,var(--brand) 10%,var(--canvas-sub))}
.jstep.is-run b{color:var(--ink-100)}
.jstep.is-run i{color:var(--brand-text)}
.jstep.is-slow{border-color:rgb(255 178 110/.55)}
.jstep.is-done{border-color:color-mix(in srgb,var(--brand-2) 32%,transparent)}
.jstep.is-done b{color:var(--ink-80)}
.jstep.is-fail{border-color:rgb(255 143 143/.5)}
.jstep.is-fail i{color:#ff8f8f}
.jerr{margin:.625rem 0 0;font-size:var(--t-micro);color:#ff8f8f;line-height:1.5}
.jobs-note{margin:.875rem 0 0;font-size:var(--t-micro);color:var(--ink-44);
  min-height:1.2em;line-height:1.5}

/* 40. 섹션 쪽과 연재 쪽 머리 ------------------------------------------- */
.listhead{margin-bottom:clamp(1.5rem,3vw,2.25rem)}
.listhead .kicker{font-family:var(--font-display);font-size:var(--t-micro);font-weight:600;
  letter-spacing:.08em;color:var(--brand-text);display:block;margin-bottom:.5rem}
.listhead h1{font-size:var(--t-h1);margin:0 0 .5rem}
.listhead p{margin:0;color:var(--ink-60);font-size:var(--t-body);max-width:44rem}
.emptyzone{padding:clamp(2.5rem,7vw,5rem) 0;text-align:center}
.emptyzone h1{font-size:var(--t-h2);margin-bottom:.75rem}
.emptyzone p{color:var(--ink-60);margin:0 0 1rem}
.langs .soon{color:var(--ink-44)}

/* 41. 레일이 없는 날은 오늘의 지면이 한 칸을 다 쓴다 -------------------- */
.today.no-rail{grid-template-columns:minmax(0,1fr)}

/* 42. 판 번호 ------------------------------------------------------------
   창간(2026-09-13)까지는 또렷하게 보여 준다. 그 뒤에는 site.js 가
   .ver--quiet 를 붙여 연회색으로 가라앉힌다. 자리는 그대로 둔다. */
.ver{
  display:inline-block;margin-left:.5rem;flex:none;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.6875rem;line-height:1;letter-spacing:0;
  padding:.25rem .4375rem;border-radius:.375rem;
  color:var(--brand-text);
  background:color-mix(in srgb,var(--brand) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--brand) 28%,transparent);
  vertical-align:middle;user-select:all;
}
.ver--quiet{
  color:var(--ink-44);background:transparent;border-color:transparent;
}
/* 편집실은 늘 눈에 띈다 */
.ver--loud{
  font-size:.75rem;padding:.3125rem .5625rem;font-weight:600;
  color:#fff;background:var(--brand);border-color:var(--brand);
}
@media (max-width:48rem){ .ver{margin-left:.375rem;font-size:.625rem;padding:.1875rem .375rem} }

/* 43. 기사·소개 쪽의 판 번호 한 줄 --------------------------------------
   머리 바로 아래에 자기 줄로 앉는다. 창간(2026-09-13) 뒤에는 site.js 가
   이 줄을 통째로 감춘다. 독자가 읽는 쪽에 판 번호를 계속 보일 이유가 없다. */
.verstrip{border-bottom:1px solid var(--hairline);background:var(--canvas-sub)}
.verstrip .container{display:flex;align-items:center;
  padding-block:.4375rem;min-height:2rem}
.verstrip .ver{margin-left:0}

/* 44. 본문이 숨 쉴 자리 ---------------------------------------------------
   HTML 로 올린 원고는 <section> 안에 소제목이 들어와 `.prose > h2` 규칙을 못 받았다.
   깊이와 상관없이 소제목·문단·상자 사이를 시원하게 띄운다. ------------------ */
.prose{--gap-para:1.75rem;--gap-box:clamp(2.75rem,5.5vw,3.5rem);--gap-h2:clamp(3.25rem,6.5vw,4.25rem)}
.prose p{margin:0 0 var(--gap-para)}
.prose h2{margin:var(--gap-h2) 0 1.375rem;color:var(--ink-100);scroll-margin-top:6rem}
.prose h3{margin:2.75rem 0 1.125rem;color:var(--ink-100);scroll-margin-top:6rem}
.prose h4{margin:2.25rem 0 .875rem;color:var(--ink-100)}
.prose > :first-child,.prose section:first-child > :first-child{margin-top:0}
.prose section + section{margin-top:var(--gap-h2)}
.prose section + section > h2:first-child{margin-top:0}
.prose ul,.prose ol{margin:0 0 var(--gap-para);gap:.625rem}

/* 상자는 앞뒤 본문과 넉넉히 떨어지고, 상자끼리도 붙지 않는다 */
.prose .quote,.prose blockquote,.prose figure,.prose .callout,.prose .table-wrap,
.prose .metric-grid,.prose .metrics,.prose .stack-cards,.prose .relate,.prose .note,.prose .pullquote{
  margin-top:var(--gap-box);margin-bottom:var(--gap-box)}
.prose .quote + .quote,.prose .metric-grid + .stack-cards,.prose .stack-cards + .metric-grid,
.prose .table-wrap + .metric-grid,.prose .metric-grid + .table-wrap{margin-top:var(--gap-box)}
.prose .quote{padding:1.625rem 1.75rem}
.prose .metric-grid,.prose .metrics{display:grid;gap:1rem;grid-template-columns:repeat(3,minmax(0,1fr))}
.prose .metrics .metric .num{display:block;font-family:var(--font-display);font-weight:600;letter-spacing:-.04em;
  font-size:clamp(1.875rem,calc(1.875rem + .75 * var(--fluid)),2.5rem);line-height:1.05;color:var(--ink-100);margin-bottom:.625rem}
.prose .metrics .metric .label{display:block;font-size:var(--t-small);line-height:1.5;color:var(--ink-80)}
.prose .stack-cards{gap:1rem}
.prose .table-wrap + .table-note{margin-top:calc(-1 * var(--gap-box) + .875rem)}

/* 머리 쪽 상자들 */
.brief{margin-top:clamp(2.5rem,5vw,3.25rem);padding:clamp(1.5rem,3.5vw,2.125rem)}
.prose .brief{margin-bottom:var(--gap-box)}
.prose .scope{margin:0 0 var(--gap-box)}
.brief h2{margin:0 0 1.25rem}
.brief-item{margin:1.125rem 0;line-height:1.7}
.prose{padding-top:clamp(3rem,6vw,4rem)}
.view{margin:var(--gap-box) 0;padding:clamp(1.75rem,3.5vw,2.375rem)}
.view p{margin-bottom:1.25rem}
.oneline{margin-top:var(--gap-box)}
/* 모듈 머리글의 위 여백을 .prose p 가 덮어써 앞 문단에 딱 붙어 버렸다.
   '체크 포인트' 가 윗줄에 매달려 보인 까닭이다 (2026-09-11 성동님) */
.prose .blockhead{margin:var(--gap-box) 0 1rem}
.watch{margin-top:clamp(1.75rem,3.5vw,2.25rem)}
.faq-item{padding:1.75rem 0}
.faq-q{margin-bottom:.875rem}
.article-foot{margin-top:var(--gap-box)}
.disclaimer{margin-top:var(--gap-box)}

@media (max-width:48rem){
  .prose{--gap-para:1.625rem;--gap-box:2.5rem;--gap-h2:3rem}
  .prose .metric-grid,.prose .metrics{grid-template-columns:minmax(0,1fr)}
  .prose .quote{padding:1.375rem 1.375rem}
}

/* 45. 원고함: 검색·정렬·날짜 -------------------------------------------- */
.work-head .search{flex:1 1 14rem;min-width:10rem;max-width:26rem;height:2.25rem;padding:0 .875rem;
  border:1px solid var(--ink-12);border-radius:var(--r-pill);background:var(--canvas-sub);
  color:var(--ink-100);font-size:var(--t-small)}
.work-head .search:focus{outline:2px solid color-mix(in srgb,var(--brand) 55%,transparent);outline-offset:1px}
.work-head .sortsel{height:2.25rem;padding:0 .75rem;border:1px solid var(--ink-12);border-radius:var(--r-pill);
  background:var(--canvas-sub);color:var(--ink-80);font-size:var(--t-micro)}
.row .cell.when{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink-80)}
.row .cell.when i{font-style:normal;color:var(--ink-44)}
@media (max-width:64rem){.work-head .search{flex-basis:100%;max-width:none}}

/* 46. 편집실 좁은 화면 --------------------------------------------------- */
.up-auto{display:flex;align-items:center;gap:.5rem;font-size:var(--t-small);color:var(--ink-80);flex-basis:100%}
.up-auto input{width:1rem;height:1rem;accent-color:var(--brand)}
.up-bar{flex-wrap:wrap}
@media (max-width:64rem){
  /* 머리: 워드마크·편집실·판 번호는 한 줄에 붙고, 날짜는 숨긴다 */
  .nav .wordmark{white-space:nowrap;flex:none}
  .nav .pill{white-space:nowrap;flex:none}
  .nav .ver{white-space:nowrap;flex:none}
  .nav .nav-inner [data-today]{display:none}
  .nav .nav-inner{gap:.5rem;flex-wrap:nowrap}
  /* 옆 메뉴: 세로 목록 대신 가로 알약 줄. 화면을 다 먹지 않는다 */
  .side{padding-bottom:.75rem}
  .side h4{margin-top:.75rem}
  .side ul{display:flex;flex-direction:row;flex-wrap:wrap;gap:.375rem}
  .side li{flex:none}
  .side a{display:inline-flex;align-items:center;gap:.375rem;height:2rem;padding:0 .75rem;border-radius:var(--r-pill);
    border:1px solid var(--ink-12);font-size:var(--t-small)}
  .side a .count{margin-left:0}
  .side .quota,.side .syncline{font-size:var(--t-micro)}
  .work-head{gap:.625rem}
  .work-head h1{flex-basis:100%}
  .work{scroll-margin-top:4.25rem}
  /* 목록 행: 한 줄에 상태와 제목, 그 아래 날짜, 게이트는 맨 아래 한 줄 */
  .rows-head{display:none}
  .row{grid-template-columns:minmax(0,1fr);gap:.5rem;padding:.875rem 1rem}
  .row .pick{display:none}
  .row .state{justify-self:start}
  .row .cell{display:none}
  .row .cell.when{display:inline-block;color:var(--ink-60)}
  .row .who{flex-wrap:wrap;row-gap:.25rem}
  .row .gatewords{display:flex;flex-wrap:wrap;gap:.25rem}
}

/* 48. 초안·보류 칸 안내 한 줄 ------------------------------------------- */
.draftnote{margin:0 0 .875rem;padding:.75rem 1rem;border-radius:var(--r-xs);
  border:1px solid color-mix(in srgb,var(--cat-plan) 34%,transparent);
  background:color-mix(in srgb,var(--cat-plan) 10%,transparent);
  font-size:var(--t-small);line-height:1.6;color:var(--ink-80)}

/* ------------------------------------------------------------- 퍼가기 줄
   글자 대신 그림표. 설명 문장은 없다. */
/* 위쪽 목차 옆에 있던 옛 .share 규칙이 display:flex 를 남겨 두어
   퍼가기 줄이 내용 너비만큼만 잡히고 왼쪽에 붙었다. 여기서 되돌린다
   (2026-09-11 성동님) */
.share{display:block;margin:1.5rem 0 0;padding-top:0;border-top:0}
/* 한 줄에 다 들어가야 한다. 좁은 화면에서는 단추가 같이 줄어든다
   (2026-09-11 성동님) */
.share-row{display:flex;flex-wrap:nowrap;gap:clamp(.375rem,2.4vw,.625rem);
  align-items:center;justify-content:center}
.sbtn{
  display:inline-flex;align-items:center;justify-content:center;
  width:clamp(2.125rem,9vw,2.5rem);height:clamp(2.125rem,9vw,2.5rem);flex:none;
  border-radius:var(--r-pill);border:1px solid var(--hairline);
  background:transparent;color:var(--ink-60);cursor:pointer;
  transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),
             background var(--dur-fast) var(--ease);
}
.sbtn:hover{color:var(--ink-100);border-color:var(--ink-44);background:var(--ink-4)}
.sbtn svg{width:1.125rem;height:1.125rem;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sbtn-ch{
  font-family:var(--font-display);font-size:1rem;font-weight:600;line-height:1;
  letter-spacing:0;transform:translateY(-.02em);
}
.share-big{
  margin:clamp(2.25rem,4vw,3rem) 0 0;padding-top:clamp(1.5rem,3vw,2rem);
  border-top:1px solid var(--hairline);
}
/* 퍼가기 단추 바로 아래 한마디. 빈 채로 자리만 잡고 있다가 잠깐 떴다 사라진다
   (2026-09-13 성동님) */
.share-tip{
  margin:.5rem 0 0;min-height:1.25rem;text-align:center;
  font-size:var(--fs-xs,.8125rem);line-height:1.25rem;color:var(--ink-60);
  opacity:0;transition:opacity var(--dur-fast) var(--ease);
}
.share-tip.on{opacity:1}
@media (prefers-reduced-motion:reduce){.share-tip{transition:none}}
/* 아래 줄도 위 줄과 같은 모양이다. 따로 키우지 않는다 (2026-09-11 성동님) */
@media (min-width:40rem){
  .share-row{gap:.625rem}
  .sbtn{width:2.5rem;height:2.5rem}
}
/* 아래 퍼가기 줄은 본문 안에 있다. 본문 링크 꼴(파란 밑줄)이 묻어 왔다 */
.prose .share a.sbtn{color:var(--ink-60);text-decoration:none}
.prose .share a.sbtn:hover{color:var(--ink-100);text-decoration:none}

/* 복사했다고 잠깐 알려 주는 띠 */
/* 알림 띠는 아래 한 곳에서만 정한다. 예전에 여기에도 같은 이름이
   있었고, 그 블록의 pointer-events:none 이 살아남아 '목록 보기'가
   눌리지 않았다 (2026-09-11 성동님) */

@media (max-width:640px){
  .share-btn{min-height:2.375rem;padding:0 .75rem}
  .share-mail{display:none}          /* 좁은 화면에서는 메일 대신 '보내기' 를 쓴다 */
}

/* 두 번째 줄 머리말. 숫자가 있을 때만 붙는다 */
.rowhead{
  margin:1.5rem 0 .75rem;font-family:var(--font-display);
  font-size:var(--t-micro);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-44);
}

/* ---------------------------------------------------------------- 쉼표
   카드가 줄줄이 이어지면 눈이 쉬지 못한다. 여섯 장마다 한 번 숨을 돌린다. */
.reststop{
  grid-column:1/-1;
  padding-block:clamp(2.5rem,6vw,4rem);
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
}
.reststop-lead{
  margin:0 0 1.25rem;font-family:var(--font-display);
  font-size:var(--t-micro);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-44);
}
.reststop-chips{display:flex;flex-wrap:wrap;gap:.625rem}
.chip{
  display:inline-flex;align-items:center;gap:.5rem;
  height:2.375rem;padding-inline:1rem;border-radius:var(--r-pill);
  font-size:var(--t-small);font-weight:500;color:var(--ink-80);
  border:1px solid color-mix(in srgb,var(--sec-c,var(--ink-44)) 34%,transparent);
  background:color-mix(in srgb,var(--sec-c,var(--ink-44)) 8%,transparent);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.chip:hover{
  color:var(--ink-100);
  background:color-mix(in srgb,var(--sec-c,var(--ink-44)) 18%,transparent);
  border-color:color-mix(in srgb,var(--sec-c,var(--ink-44)) 60%,transparent);
}

.reststop--say{text-align:center}
.reststop-mark{
  margin:0 0 1.25rem;font-family:var(--font-display);font-size:1rem;font-weight:600;
  letter-spacing:-.03em;color:var(--ink-44);
}
.reststop-mark em{
  font-style:normal;
  background:linear-gradient(92deg,var(--brand),var(--brand-2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.reststop-line{
  margin:0;font-family:var(--font-serif);font-style:italic;
  font-size:clamp(1.5rem,calc(1.5rem + 1 * var(--fluid)),2.375rem);
  line-height:1.35;letter-spacing:-.02em;color:var(--ink-80);
}
.reststop-sub{
  margin:1rem auto 0;max-width:30rem;
  font-size:var(--t-small);line-height:1.75;color:var(--ink-44);
}

/* --------------------------------------------------------------------- 검색
   머리의 돋보기, 키보드 / 또는 cmd+K 로 열린다. */
.sbox{position:fixed;inset:0;z-index:90;display:flex;justify-content:center;align-items:flex-start;
  padding:clamp(3rem,10vh,7rem) 1rem 2rem}
.sbox[hidden]{display:none}
.sbox-veil{position:absolute;inset:0;background:rgb(0 0 0/.55);backdrop-filter:blur(3px)}
.sbox-panel{
  position:relative;width:min(42rem,100%);max-height:min(34rem,80vh);
  display:flex;flex-direction:column;
  background:var(--canvas-sub);border:1px solid var(--hairline);
  border-radius:1.25rem;box-shadow:0 24px 60px rgb(0 0 0/.45);overflow:hidden;
  animation:sboxIn var(--dur) var(--ease);
}
@keyframes sboxIn{from{opacity:0;transform:translateY(-.5rem)}to{opacity:1;transform:none}}
.sbox-head{display:flex;align-items:center;gap:.75rem;padding:.875rem 1rem;
  border-bottom:1px solid var(--hairline)}
.sbox-ico{width:1.125rem;height:1.125rem;flex:none;fill:none;stroke:var(--ink-44);
  stroke-width:1.8;stroke-linecap:round}
.sbox-in{
  flex:1;min-width:0;border:0;background:transparent;outline:none;
  font-family:inherit;font-size:1.0625rem;color:var(--ink-100);
}
.sbox-in::placeholder{color:var(--ink-44)}
.sbox-in::-webkit-search-cancel-button{display:none}
.sbox-x{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:2rem;height:2rem;border-radius:var(--r-pill);border:0;background:transparent;
  color:var(--ink-44);cursor:pointer}
.sbox-x:hover{background:var(--ink-4);color:var(--ink-100)}
.sbox-x svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.sbox-note{margin:0;padding:.75rem 1.125rem;font-size:var(--t-small);color:var(--ink-44)}
.sbox-note:empty{display:none}
.sbox-list{list-style:none;margin:0;padding:0 .5rem .5rem;overflow-y:auto;flex:0 1 auto}
.sbox-list:empty{padding:0}
.sbox-list a{
  display:flex;align-items:center;gap:.875rem;padding:.625rem .625rem;
  border-radius:.75rem;text-decoration:none;
}
.sbox-list a:hover,.sbox-list a.is-on{background:var(--ink-4)}
.sbox-thumb{flex:none;width:3.5rem;height:2.5rem;border-radius:.375rem;overflow:hidden;
  background:var(--canvas-raise)}
.sbox-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.sbox-body{display:flex;flex-direction:column;gap:.1875rem;min-width:0}
.sbox-title{font-family:var(--font-display);font-size:var(--t-body);font-weight:500;
  line-height:1.35;color:var(--ink-100);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sbox-meta{font-size:var(--t-micro);color:var(--ink-44)}
@media (max-width:48rem){
  .sbox{padding-top:1rem}
  .sbox-panel{max-height:88vh;border-radius:1rem}
  .sbox-thumb{width:3rem;height:2.25rem}
}

/* 사진 출처. 자유 이용 사진이라도 촬영자와 허가를 밝힌다 (2026-09-09) */
.hero-figure .credit{margin-top:.5rem;font-size:var(--t-micro);color:var(--ink-44)}
.hero-figure .credit a{color:inherit;text-decoration:none;border-bottom:1px solid var(--hairline)}
.hero-figure .credit a:hover{color:var(--ink-100)}
/* 무엇을 찍은 사진인지 먼저, 촬영자와 허가는 그 아래 한 단 낮은 톤으로
   (2026-09-11 성동님) */
.hero-figure .shotcap{margin-top:.625rem;display:flex;flex-direction:column;gap:.25rem}
.shotcap-what{font-size:var(--t-small);line-height:1.5;color:var(--ink-60)}
.shotcap-who{font-size:var(--t-micro);line-height:1.5;color:var(--ink-44)}
.shotcap-who a{color:inherit;text-decoration:none;border-bottom:1px solid var(--hairline)}
.shotcap-who a:hover{color:var(--ink-100)}


/* 필자 이름을 눌러 그 사람의 글 모음으로 간다.
   "누가 썼는가"에 답하는 쪽이다. 밑줄은 마우스를 올렸을 때만 (2026-09-10) */
.byline strong a.byname{color:inherit;text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color .15s}
.byline strong a.byname:hover,
.byline strong a.byname:focus-visible{border-bottom-color:var(--brand)}

/* 필자 쪽 머리말. 필명 안내는 본문보다 작게, 다만 읽을 수 있게 */
.listhead-by h1{letter-spacing:-.01em}
.listhead .by-note{margin-top:.625rem;font-size:var(--t-small);color:var(--ink-60)}
.listhead .by-note a{color:var(--brand-text);border-bottom:1px solid var(--ink-12)}
.listhead .by-note a:hover{border-bottom-color:var(--brand)}

/* 구글 '선호 출처' 단추. 뉴스레터 칸 아래에 붙는다 (2026-09-10) */
.prefsrc{margin-top:1.25rem}
.prefsrc-note{margin:.5rem 0 0;font-size:var(--t-micro);color:var(--ink-60);line-height:1.6}

/* 홈 화면에 얹기 안내. 아래에서 한 번 떠오르고, 닫으면 90일 동안 안 뜬다 */
.a2hs{position:fixed;left:0;right:0;bottom:0;z-index:80;padding:0 max(.75rem,env(safe-area-inset-left)) calc(.75rem + env(safe-area-inset-bottom));
  transform:translateY(120%);transition:transform .28s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.a2hs.on{transform:translateY(0);pointer-events:auto}
.a2hs-in{display:flex;align-items:center;gap:.875rem;max-width:34rem;margin:0 auto;
  background:var(--canvas-raise);border:1px solid var(--ink-12);border-radius:1rem;
  padding:.875rem 1rem;box-shadow:0 .75rem 2.5rem rgba(0,0,0,.16)}
.a2hs-in img{border-radius:.625rem;flex:none}
.a2hs-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1875rem}
.a2hs-txt strong{font-size:var(--t-small);font-weight:600;color:var(--ink-100);line-height:1.35}
.a2hs-txt span{font-size:var(--t-micro);color:var(--ink-60);line-height:1.5}
.a2hs-go{flex:none;padding:.5rem .875rem;font-size:var(--t-micro)}
.a2hs-x{flex:none;width:1.75rem;height:1.75rem;border:0;background:none;cursor:pointer;
  font-size:1.25rem;line-height:1;color:var(--ink-44);border-radius:.5rem}
.a2hs-x:hover{color:var(--ink-100);background:var(--ink-4)}
@media (prefers-reduced-motion:reduce){.a2hs{transition:none}}

/* 체크 포인트가 한 항목뿐이면 두 칸을 다 쓴다.
   왼쪽에만 좁은 상자가 서고 오른쪽이 비면 만들다 만 것처럼 보인다 (2026-09-10) */
.watch-one{grid-template-columns:minmax(0,1fr)}
.watch-one .watch-item{border-top:0;padding-top:.25rem}
.watch-one .watch-item::before{top:.25rem}

/* 수치 카드 칸수. 넷을 세 칸에 넣으면 둘째 줄에 두 칸이 빈다.
   개수를 세어 균형을 맞춘다. 넷이면 2×2, 둘이면 1×2 (2026-09-10 성동님) */
.prose .metric-grid:has(> :nth-child(4):last-child),
.prose .metrics:has(> :nth-child(4):last-child),
.metric-grid:has(> :nth-child(4):last-child),
.metrics:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
.prose .metric-grid:has(> :nth-child(2):last-child),
.prose .metrics:has(> :nth-child(2):last-child),
.metric-grid:has(> :nth-child(2):last-child),
.metrics:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
.prose .metric-grid:has(> :only-child),
.prose .metrics:has(> :only-child),
.metric-grid:has(> :only-child),
.metrics:has(> :only-child){grid-template-columns:minmax(0,1fr)}
/* 넷을 2×2로 세우면 셋째 칸의 왼쪽 선이 없어야 줄이 맞는다 */
.metric-grid:has(> :nth-child(4):last-child) > .metric:nth-child(3),
.metrics:has(> :nth-child(4):last-child) > .metric:nth-child(3){border-left:0}
.metric-grid:has(> :nth-child(4):last-child) > .metric:nth-child(n+3),
.metrics:has(> :nth-child(4):last-child) > .metric:nth-child(n+3){border-top:1px solid var(--hairline)}

/* 시황 상자. 세 줄이 아니라 두 줄이다. 첫 줄에 지수 이름과 등락률이
   나란히 서고, 둘째 줄에 지수가 온다. 세 줄로 세우면 네 지수가
   화면 한 판을 다 먹는다 (2026-09-11 성동님)

     S&P 500  -0.58%
     7,591.70

   원고의 차례는 이름·지수·등락률이라 자리를 이름으로 정해 준다 */
.metric:has(> .mlabel){display:grid;align-items:baseline;
  grid-template-columns:auto auto minmax(0,1fr);
  grid-template-areas:'name delta pad' 'value value value';
  column-gap:.625rem;row-gap:.375rem}
.metric:has(> .mlabel) > .mlabel{grid-area:name}
.metric:has(> .mlabel) > .delta{grid-area:delta}
.metric:has(> .mlabel) > .value{grid-area:value}

.metric .mlabel{display:block;margin:0;font-family:var(--font-display);
  font-size:var(--t-small);font-weight:500;letter-spacing:.02em;color:var(--ink-60);
  word-break:keep-all;overflow-wrap:normal;text-wrap:nowrap}
.metric .delta{display:block;margin:0;font-family:var(--font-display);
  font-size:var(--t-body);font-weight:600;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--ink-80);text-wrap:nowrap}
/* 오르면 초록, 내리면 주황. 미국장 표기를 따른다 */
.metric .delta.up{color:var(--cat-money)}
.metric .delta.down{color:var(--warm)}
/* 이름이 앞에 온 카드에서는 첫 줄이 숫자가 아니므로 큰 글씨를 물린다 */
.metric .mlabel + .value{margin-top:0}
.metric:has(> .mlabel) > .value{margin:0}

/* 시황 지수판은 늘 두 칸이다. 개수를 세지 않는다.
   앞서 '넷일 때만' 으로 걸어 두었더니, 칸이 넷이 아니거나 사이에 다른
   덩이가 하나만 끼어도 규칙이 통째로 빗나가 세로 한 줄로 무너졌다.
   두 줄짜리 칸은 키가 낮으므로 폰에서도 두 칸이 들어간다.
   홀수로 끝나면 마지막 칸이 한 줄을 다 쓴다 (2026-09-11 성동님) */
@media (min-width:23rem){
  .metrics:has(.mlabel),
  .metric-grid:has(.mlabel),
  .prose .metrics:has(.mlabel),
  .prose .metric-grid:has(.mlabel){
    grid-template-columns:repeat(2,minmax(0,1fr))}
  .metrics:has(.mlabel) > .metric:nth-child(2n),
  .metric-grid:has(.mlabel) > .metric:nth-child(2n){border-left:1px solid var(--hairline)}
  .metrics:has(.mlabel) > .metric:nth-child(2n+1),
  .metric-grid:has(.mlabel) > .metric:nth-child(2n+1){border-left:0}
  .metrics:has(.mlabel) > .metric:nth-child(n+3),
  .metric-grid:has(.mlabel) > .metric:nth-child(n+3){border-top:1px solid var(--hairline)}
  .metrics:has(.mlabel) > .metric:nth-child(-n+2),
  .metric-grid:has(.mlabel) > .metric:nth-child(-n+2){border-top:0}
  /* 홀수로 끝나는 마지막 칸은 한 줄을 다 쓴다. 오른쪽이 비면 만들다 만 것 같다 */
  .metrics:has(.mlabel) > .metric:last-child:nth-child(odd),
  .metric-grid:has(.mlabel) > .metric:last-child:nth-child(odd){grid-column:1/-1}
}
/* 지수 두 줄이면 칸을 크게 벌릴 이유가 없다 */
.metric:has(> .mlabel){padding:clamp(1.125rem,2.4vw,1.625rem)}
.metric:has(> .mlabel) > .value{
  font-size:clamp(1.875rem,calc(1.875rem + 1 * var(--fluid)),2.75rem)}

/* 본문 삽화 여러 장 떨어뜨리는 자리. 대표 이미지 칸보다 낮고 조용하게 (2026-09-10) */
.figdrop{margin-top:.875rem;padding:1.25rem 1rem;gap:.25rem}
.figdrop b{font-family:var(--font-display);font-weight:500;font-size:var(--t-small);color:var(--ink-100)}
.figdrop span{font-size:var(--t-micro);color:var(--ink-60)}

/* ---------------------------------------------------------- 보기 편집(편집실)
   마크다운을 덩이로 잘라 눈에 보이게 고친다. 원본은 늘 마크다운 칸이다.
   여기는 그 칸을 대신 만져 주는 손일 뿐이다 (2026-09-10 성동님) */
.editmode{display:flex;align-items:center;gap:.5rem;margin:0 0 .75rem}
.editmode .btn{padding:.4rem .75rem;font-size:var(--t-micro)}
.editmode .btn.is-on{background:var(--cta-bg);color:var(--cta-fg);border-color:transparent}
.blocks{display:flex;flex-direction:column;gap:.5rem}
.blk{border:1px solid var(--ink-12);border-radius:.875rem;background:var(--canvas-sub);
  padding:.625rem .75rem .5rem;position:relative}
.blk:hover{border-color:var(--ink-12)}
.blk-bar{display:flex;align-items:center;gap:.375rem;margin-bottom:.5rem}
.blk-sp{flex:1}
.blk-kind{font-size:var(--t-micro);padding:.25rem 1.5rem .25rem .5rem;border-radius:.5rem;
  border:1px solid var(--ink-12);background:var(--canvas);color:var(--ink-80)}
.blk-b{width:1.75rem;height:1.75rem;border:1px solid var(--ink-12);border-radius:.5rem;
  background:transparent;color:var(--ink-60);cursor:pointer;line-height:1;font-size:.875rem}
.blk-b:hover:not(:disabled){color:var(--ink-100);border-color:var(--ink-44)}
.blk-b:disabled{opacity:.3;cursor:default}
.blk-edit{min-height:1.75rem;padding:.5rem .625rem;border-radius:.625rem;
  background:var(--canvas);border:1px solid transparent;
  font-size:var(--t-read);line-height:1.75;color:var(--ink-100);
  white-space:pre-wrap;word-break:break-word;outline:0}
.blk-edit:focus{border-color:var(--brand)}
.blk-h2 .blk-edit,.blk-h3 .blk-edit{font-family:var(--font-display);font-weight:600;letter-spacing:-.02em}
.blk-h2 .blk-edit{font-size:var(--t-h4)}
.blk-h3 .blk-edit{font-size:var(--t-body);color:var(--ink-80)}
.blk-quote .blk-edit{border-left:3px solid var(--brand);border-radius:0 .625rem .625rem 0;font-style:italic}
.blk-list .blk-edit{font-size:var(--t-body)}
.blk-hint{margin:.375rem 0 0;font-size:var(--t-micro);color:var(--ink-44)}
.blk-hr{height:1px;background:var(--ink-12);margin:.75rem 0}
.blk-raw{margin:0;padding:.625rem;border-radius:.625rem;background:var(--canvas);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--t-micro);
  color:var(--ink-60);white-space:pre-wrap;word-break:break-all;max-height:11rem;overflow:auto}
.blk-img{display:flex;gap:.75rem;align-items:flex-start}
.blk-img img{width:9rem;height:auto;border-radius:.625rem;flex:none;background:var(--canvas)}
.blk-imgside{flex:1;min-width:0;display:flex;flex-direction:column;gap:.5rem}
.blk-alt{width:100%;padding:.5rem .625rem;border-radius:.625rem;border:1px solid var(--ink-12);
  background:var(--canvas);color:var(--ink-100);font-size:var(--t-small)}
/* 삽화 목록판. 올린 그림을 썸네일과 파일 이름으로 늘어놓는다.
   자리는 소제목 이름으로 고른다 (2026-09-11 성동님) */
.figcards{display:flex;flex-direction:column;gap:.625rem;margin-top:.75rem}
.figempty{margin:.75rem 0 0;font-size:var(--t-micro);color:var(--ink-44)}
.figcard{display:flex;gap:.75rem;align-items:flex-start;padding:.625rem;
  border:1px solid var(--ink-12);border-radius:.75rem;background:var(--canvas)}
.figthumb{width:7rem;height:4.5rem;object-fit:cover;border-radius:.5rem;flex:none;
  background:var(--ink-06);border:1px solid var(--ink-12)}
.figside{flex:1;min-width:0;display:flex;flex-direction:column;gap:.5rem}
.figtop{display:flex;align-items:center;gap:.5rem}
.figname{flex:1;min-width:0;font-family:var(--font-mono,ui-monospace,SFMono-Regular,Menlo,monospace);
  font-size:var(--t-micro);color:var(--ink-80);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.figx{flex:none;border:1px solid var(--ink-12);background:transparent;color:var(--ink-44);
  border-radius:.5rem;padding:.25rem .5rem;font-size:var(--t-micro);cursor:pointer}
.figx:hover{color:var(--warm,#c2410c);border-color:var(--warm,#c2410c)}
/* 편집실의 label 은 기본이 block 이라 그대로 두면 '자리' 가 한 줄을
   통째로 먹는다. 여기서는 한 줄에 나란히 세운다 */
.figcard .figrow{display:flex;align-items:center;gap:.5rem}
.figcard .figrow>span{flex:none;font-size:var(--t-micro);color:var(--ink-60)}
.figcard .figslot,.blk-imgside .blk-slot{flex:1;min-width:0;height:auto;min-height:2.25rem;
  padding:.375rem .5rem;line-height:1.35;border-radius:.5rem;
  border:1px solid var(--ink-12);background:var(--paper,var(--canvas));color:var(--ink-100);
  font-size:var(--t-small)}
.figcard .figslot:focus,.blk-imgside .blk-slot:focus{border-color:var(--brand);outline:none}
.figcard .figalt{width:100%;padding:.375rem .5rem;border-radius:.5rem;border:1px solid var(--ink-12);
  background:var(--paper,var(--canvas));color:var(--ink-100);font-size:var(--t-small)}
.figcard .figalt:focus{border-color:var(--brand);outline:none}
@media (max-width:34rem){
  .figcard{flex-direction:column}
  .figthumb{width:100%;height:auto;aspect-ratio:16/9}
}

/* 그림 번호가 곧 자리다. 01은 첫 소제목 위, 02는 둘째 소제목 위.
   숫자를 바꾸면 그림이 그 자리로 옮겨 간다 (2026-09-11 성동님) */
.blk-numrow{display:flex;align-items:center;gap:.5rem}
.blk-numrow .figname{flex:none;max-width:7rem}
.blk-num{width:3.5rem;padding:.375rem .5rem;border-radius:.5rem;border:1px solid var(--ink-12);
  background:var(--canvas);color:var(--ink-100);font-size:var(--t-small);
  font-variant-numeric:tabular-nums;text-align:center}
.blk-num:focus{border-color:var(--brand);outline:none}
.blk-numhint{font-size:var(--t-micro);color:var(--ink-44);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.blk-imgside .btn{align-self:flex-start;padding:.375rem .75rem;font-size:var(--t-micro)}
.blk-add{display:flex;gap:.375rem;margin-top:.5rem;opacity:0;transition:opacity .15s}
.blk:hover .blk-add,.blk:focus-within .blk-add{opacity:1}
.blk-a{border:1px dashed var(--ink-12);background:transparent;color:var(--ink-44);
  border-radius:.5rem;padding:.25rem .5rem;font-size:var(--t-micro);cursor:pointer}
.blk-a:hover{color:var(--brand-text);border-color:var(--brand)}
.blk-empty .blk-add{opacity:1}
.blk-empty p{margin:0 0 .5rem;font-size:var(--t-small);color:var(--ink-60)}
@media (max-width:48rem){
  .blk-img{flex-direction:column}
  .blk-img img{width:100%}
}
/* 저자 쪽 아래 바깥 자취. 눈에 띄지 않되 구글이 읽을 자리 (2026-09-11 성동님) */
.listhead .bylinks{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.375rem}
.listhead .bylinks a{color:var(--ink-60);text-decoration:none;border-bottom:1px solid var(--ink-12)}
.listhead .bylinks a:hover{color:var(--brand-text);border-bottom-color:var(--brand)}
.listhead .bysep{color:var(--ink-28)}
.listhead .bybook{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.375rem}

/* ==========================================================================
   등장 — 애플 방식 그대로.

   애플 페이지(apple.com/kr/iphone-duo)를 브라우저로 열어 직접 재 봤다.
   글 덩어리마다 .ric-type-lockup-element 라는 껍데기가 있고, 화면에 들어오기
   전에는 이 값으로 놓여 있다.

     진하기 0.17,  아래로 22px 밀림,  흐림 없음

   그리고 화면에 들어오면 한 번에 진하기 1, 제자리로 간다. 스크롤 위치에
   매달려 있지 않다. 시간으로 도는 애니메이션이다. 그래서 화면에 뿌연 띠가
   생기지 않는다. 들어오기 직전의 덩어리 하나만 옅게 보일 뿐이다.

   내가 앞서 쓴 animation-timeline:view() 는 스크롤 위치에 진하기를 묶는
   방식이라, 화면 아래쪽에 늘 뿌연 띠가 깔렸다. 그 띠가 성동님이 싫다고 한
   그것이다. 애플은 그렇게 안 한다. 그 방식을 버린다.

   흐림은 쓰지 않는다. 밀림은 22px 하나뿐이다.
   (2026-09-11 성동님: "애플 방식을 완전히 모방하거나 찾아내보자")
   ========================================================================== */
/* 애플의 실측값은 22px 이었다. 그 쪽은 화면을 가득 채우는 큰 글씨라
   22px 도 충분히 보인다. 우리 글씨는 그보다 작아 움직임이 덜 보였다.
   두 배로 키운다 (2026-09-11 성동님) */
.rv{opacity:.17;transform:translateY(44px);
  transition:opacity 1s cubic-bezier(.28,.11,.32,1) var(--rv-d,0s),
             transform 1s cubic-bezier(.28,.11,.32,1) var(--rv-d,0s);
  will-change:opacity,transform}
.rv-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
}

/* ==========================================================================
   이 기기에 담아 두는 것 — 최근 검색어 · '나중에 보기' 북마크 · 확인 대화 · 알림 띠
   로그인이 없어 브라우저 안에만 남는다 (2026-09-11 성동님)
   ========================================================================== */

/* --- 검색 상자의 최근 검색어 --- */
.sbox-wipe{background:none;border:0;padding:0 0 0 .5rem;cursor:pointer;
  color:var(--brand-text);font:inherit;font-size:var(--t-micro);text-decoration:underline}
.sbox-recent{display:flex;align-items:center;gap:.5rem;
  border-bottom:1px solid var(--hairline)}
.sbox-q{flex:1;min-width:0;text-align:left;background:none;border:0;cursor:pointer;
  padding:.875rem .25rem;color:var(--ink-80);font:inherit;font-size:var(--t-read);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sbox-q:hover{color:var(--ink-100)}
.sbox-qx{flex:none;width:2rem;height:2rem;border-radius:999px;border:0;cursor:pointer;
  background:transparent;color:var(--ink-44);font-size:1.25rem;line-height:1}
.sbox-qx:hover{background:var(--ink-4);color:var(--ink-80)}
.sbox-recent-head{display:none}

/* --- '나중에 보기' 북마크 단추 --- */
.sbtn-mark .mark-ico{fill:none}
.sbtn-mark.is-on{border-color:var(--accent-line);color:var(--accent-line)}
.sbtn-mark.is-on .mark-ico{fill:currentColor}

/* --- '나중에 보기' 북마크 목록 쪽 --- */
.saved-title{font-family:var(--font-display);font-weight:600;letter-spacing:-.025em;
  font-size:var(--t-h2);margin:0 0 .75rem;color:var(--ink-100)}
.saved-note{color:var(--ink-60);font-size:var(--t-small);line-height:1.7;margin:0 0 2rem}
.saved-list{list-style:none;margin:0;padding:0}
.saved-item{display:flex;align-items:center;gap:.75rem;
  border-top:1px solid var(--hairline)}
.saved-item:last-child{border-bottom:1px solid var(--hairline)}
.saved-go{flex:1;min-width:0;display:flex;align-items:center;gap:1rem;
  padding:1.125rem 0;color:inherit;text-decoration:none}
.saved-thumb{flex:none;width:5.5rem;aspect-ratio:16/10;border-radius:.5rem;overflow:hidden;
  background:var(--canvas-raise)}
.saved-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.saved-body{min-width:0;display:flex;flex-direction:column;gap:.3rem}
.saved-t{font-family:var(--font-display);font-weight:600;font-size:var(--t-h4);
  line-height:1.4;color:var(--ink-100);text-wrap:pretty}
.saved-m{font-size:var(--t-small);color:var(--ink-60)}
.saved-x{flex:none;width:2.25rem;height:2.25rem;border-radius:999px;border:0;cursor:pointer;
  background:transparent;color:var(--ink-44);font-size:1.375rem;line-height:1}
.saved-x:hover{background:var(--ink-4);color:var(--ink-100)}

/* --- 물어보는 상자 --- */
.ask{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  padding:1.25rem}
.ask-veil{position:absolute;inset:0;background:rgb(0 0 0/.6);backdrop-filter:blur(3px)}
.ask-panel{position:relative;max-width:24rem;width:100%;
  background:var(--canvas-sub);border:1px solid var(--hairline);border-radius:1rem;
  padding:1.75rem 1.5rem 1.25rem;box-shadow:0 1.5rem 3rem rgb(0 0 0/.45)}
.ask-msg{margin:0 0 1.5rem;color:var(--ink-100);font-size:var(--t-read);line-height:1.6;
  text-wrap:pretty}
.ask-row{display:flex;gap:.625rem;justify-content:flex-end}

/* --- 알림 띠 --- */
/* 화면 한가운데 띄운다. 아래에 두었더니 눌러 놓고도 못 찾았다.
   글과 '목록 보기'는 위아래로 쌓는다. 옆에 붙이면 글이 두 줄로 접힌다
   (2026-09-11 성동님) */
.toast{position:fixed;left:50%;top:50%;z-index:130;
  transform:translate(-50%,calc(-50% + .75rem));opacity:0;pointer-events:none;
  transition:opacity .25s ease,transform .25s cubic-bezier(.2,.8,.2,1);
  display:flex;flex-direction:column;align-items:center;gap:.625rem;
  max-width:min(22rem,calc(100vw - 3rem));
  padding:1.125rem 1.5rem;border-radius:1.25rem;
  background:var(--canvas-raise);border:1px solid var(--hairline);
  color:var(--ink-80);font-size:var(--t-body);line-height:1.45;text-align:center;
  box-shadow:0 1.5rem 3rem rgb(0 0 0/.45)}
.toast.on{opacity:1;transform:translate(-50%,-50%);pointer-events:auto}
.toast > span{display:block}
.toast a{display:inline-flex;align-items:center;justify-content:center;
  min-height:2.375rem;padding:0 1.125rem;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--brand) 40%,transparent);
  color:var(--brand-text);font-weight:600;text-decoration:none}
.toast a:hover{background:var(--ink-4)}
@media (prefers-reduced-motion:reduce){.toast{transition:none}}

/* 34-1. 카드 안의 인물 사진 -------------------------------------------------
   기사 쪽 .hero-face 와 같은 손질을 홈·목록 카드에도 준다. 2026-09-11 에
   기사 쪽만 고치고 카드를 안 훑어서, 나델라 얼굴이 홈 첫 화면을 가득 채웠다.
   성동님: "사람 얼굴을 저렇게 크게 쓰면 놀란다" (2026-09-13)
   ========================================================================== */
.card-face{position:relative;overflow:hidden;isolation:isolate;background:var(--canvas-sub)}
.card-face .card-field{
  position:absolute;inset:0;z-index:0;
  background:linear-gradient(150deg,
    color-mix(in oklab, var(--sec-c, var(--brand)) 24%, var(--canvas-sub)) 0%,
    var(--canvas-sub) 64%);
}
.card-face .card-field::after{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,
    rgb(255 255 255/.04) 0 1px, transparent 1px 2.5rem);
}
/* 인물은 오른쪽에 앉는다. 위를 기준으로 잘라야 머리가 안 잘린다 */
.card-face img{
  position:relative;z-index:1;
  width:62%;height:100%;margin-left:auto;
  object-fit:cover;object-position:50% 16%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgb(0 0 0/.35) 10%,#000 30%,#000 100%);
          mask-image:linear-gradient(90deg,transparent 0,rgb(0 0 0/.35) 10%,#000 30%,#000 100%);
  filter:saturate(.88) contrast(1.04);
}
.card-face::after{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(100deg,
    color-mix(in oklab, var(--sec-c, var(--brand)) 30%, var(--canvas-sub)) 0%,
    color-mix(in oklab, var(--sec-c, var(--brand)) 16%, transparent) 34%,
    transparent 62%);
}
@media (max-width:34rem){ .card-face img{width:76%} }

/* ---------------------------------------------------------------------------
   로고·심벌 판.
   애플 인텔리전스 심벌은 정사각형이다. 그것을 16:9 썸네일에 억지로 맞추니
   위아래가 잘려 나가 무엇인지 알 수 없는 조각이 됐다 (2026-09-13 성동님).
   사람 판과 같은 색면을 깔되, 심벌은 **자르지 않고 가운데에 통째로** 앉힌다.
   여백이 넉넉해야 심벌이 심벌로 보인다.
   --------------------------------------------------------------------------- */
.card-mark,
.hero-mark{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--canvas-sub);
  display:grid;place-items:center;
}
.hero-mark{aspect-ratio:16/9;border-radius:var(--r-media)}
.card-mark .card-field,
.hero-mark .hero-field{
  position:absolute;inset:0;z-index:0;
  background:linear-gradient(150deg,
    color-mix(in oklab, var(--sec-c, var(--brand)) 22%, var(--canvas-sub)) 0%,
    var(--canvas-sub) 66%);
}
.card-mark .card-field::after,
.hero-mark .hero-field::after{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,
    rgb(255 255 255/.04) 0 1px, transparent 1px 2.75rem);
}
/* 통째로 담는다. object-fit:contain 이 이 판의 전부다 */
.card-mark img,
.hero-mark img{
  position:relative;z-index:1;grid-area:1/1;
  width:auto;height:auto;
  max-width:56%;max-height:74%;
  object-fit:contain;
  justify-self:center;align-self:center;
  filter:saturate(.95);
}
.hero-mark img{max-width:38%;max-height:78%}
.hero-mark figcaption{position:absolute;left:0;bottom:0;z-index:3;
  margin:0;padding:0 0 .875rem 1.125rem;max-width:56%;
  font-size:var(--t-micro);color:var(--ink-44)}
@media (max-width:34rem){
  .hero-mark{aspect-ratio:4/3}
  .hero-mark img{max-width:56%}
  .card-mark img{max-width:64%}
}

/* ---------------------------------------------------------------------------
   이어 붙인 띠 판. 로고 넉 장, 얼굴 넉 장을 나란히 앉힌 그림이다.

   성동님: "메인 이미지와 썸네일 이미지의 width를 같게 하면 좋겠다. 썸네일은
   좌우가 좀 잘린다. (…) 본문의 메인 이미지를 기준으로 썸네일은 적응을
   해야하는 게 맞는 것 같다." (2026-09-14)

   이 그림은 가장자리에 뜻이 있다. 카드 자리는 4:3 인데 그림은 16:9 라서,
   통째로 깔면 좌우가 잘렸다. 앤트로픽의 A 와 제미나이가 반쪽씩 날아갔다.

   자르지 않는다. **가로를 꽉 채우고 위아래를 비운다.** 그러면 본문 그림과
   썸네일에서 로고가 같은 폭으로 보인다. 카드 높이는 그대로라 줄이 흐트러지지
   않는다 — 심벌 판(card-mark)이 쓰던 색면을 그대로 깐다.
   --------------------------------------------------------------------------- */
.card-strip{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--canvas-sub);
  display:grid;place-items:center;
}
.card-strip .card-field{
  position:absolute;inset:0;z-index:0;
  background:linear-gradient(150deg,
    color-mix(in oklab, var(--sec-c, var(--brand)) 22%, var(--canvas-sub)) 0%,
    var(--canvas-sub) 66%);
}
/* ★ contain 하나가 이 판의 전부다. ★ 자리가 어떤 비율이든 통째로 담는다.
   4:3 카드에서는 가로가 꽉 차고 위아래가 남는다 — 본문 그림과 로고 폭이 같아진다.
   자리가 더 납작하면 세로가 꽉 차고 좌우가 남는다. 어느 쪽이든 잘리지 않는다 */
.card-strip img{
  position:absolute;inset:0;z-index:1;
  width:100%;height:100%;
  object-fit:contain;
  transform:none;
}
/* 띠는 커서를 올려도 커지지 않는다. 커지면 가장자리가 또 잘린다 */
.card:hover .card-strip img{transform:none}
/* 좁은 화면에서는 카드가 더 납작해진다. 띠가 더 시원하게 보인다 */
@media (max-width:34rem){
  .card-strip{aspect-ratio:16/9}
}

/* ---------------------------------------------------------------------------
   기사 끝의 '다음은 이것'.

   성동님: "본문 2줄이 아니라 더 많은 본문을 보여주면 더 많은 이들이 꼬리에
   꼬리를 물고 보지않을까? (…) 암튼 본문을 좀더 많이 보여줘서 리드해보자."
   (2026-09-14)

   두 줄에서 다섯 줄로 늘린다. 좁은 화면에서는 여섯 줄까지 — 폰에서는 한 장씩
   내려가므로 자리가 넉넉하고, 여기서 마음이 정해진다.
   --------------------------------------------------------------------------- */
.band-head{
  margin:0 0 .25rem;
  font-size:var(--t-h3);line-height:1.25;letter-spacing:-.022em;
  color:var(--ink);
}
.band-sub-note{
  margin:0 0 1.5rem;
  font-size:var(--t-small);line-height:1.6;color:var(--ink-44);
}
.related .card-excerpt{
  -webkit-line-clamp:5;line-clamp:5;
  font-size:var(--t-body);line-height:1.62;color:var(--ink-80);
  max-width:42rem;
}
@media (max-width:48rem){
  .related .card-excerpt{-webkit-line-clamp:6;line-clamp:6}
}

/* 아래로 당겨 새로 읽기. 홈 화면 바로가기에서만 뜬다 (2026-09-14 성동님) */
.ptr{position:fixed;top:.5rem;left:50%;z-index:70;opacity:0;pointer-events:none;
  transform:translate(-50%,0);will-change:transform,opacity}
.ptr--back{transition:transform .22s ease,opacity .22s ease}
.ptr-ring{display:block;width:1.75rem;height:1.75rem;border-radius:999px;
  border:2px solid var(--ink-12);border-top-color:var(--ink-60);
  background:var(--canvas-sub);box-shadow:0 .25rem .75rem rgb(0 0 0/.28)}
.ptr--armed .ptr-ring{border-top-color:var(--accent-line);border-color:var(--ink-12)}
.ptr--go .ptr-ring{animation:ptr-spin .7s linear infinite}
@keyframes ptr-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.ptr--go .ptr-ring{animation:none}}

/* 신청 화면의 '지난 편지 보기'. 무엇이 오는지는 말보다 한 통이 빠르다
   (2026-09-14 성동님) */
.letter-see{margin:.875rem 0 0}
.letter-see a{font-size:var(--t-small);color:var(--ink-60);
  border-bottom:1px solid var(--hairline);padding-bottom:.125rem}
.letter-see a:hover{color:var(--ink-100);border-bottom-color:var(--brand)}


/* ---------------------------------------------------------------- 편집실
   태그 줄과 그림 서랍 (2026-09-19 성동님)
   ★ 이 파일에 있는 이름만 쓴다. ★ 처음에 --paper·--ink-08·--ink-45 처럼
   없는 이름을 적었더니 어두운 판에서 서랍이 하얗게 떴다 */
.tagchips{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.6rem;min-height:1.9rem}
.tagempty{font-size:var(--t-small);color:var(--ink-44)}
.tagchip{display:inline-flex;align-items:center;gap:.3rem;
  padding:.28rem .5rem .28rem .6rem;border-radius:999px;
  border:1px solid var(--hairline);background:var(--ink-4);color:var(--ink-80);
  font-size:var(--t-small);line-height:1.2;white-space:nowrap}
.tagchip.is-open{border-style:dashed}
.tagx{border:0;background:none;cursor:pointer;color:var(--ink-44);
  font-size:1rem;line-height:1;padding:0 .1rem}
.tagx:hover{color:var(--ink-100)}
.tagadd{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.tagadd input{flex:1 1 20rem;min-width:12rem}
.tagnew{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-top:.6rem;
  padding:.6rem;border:1px dashed var(--hairline);border-radius:var(--r-xs)}
.tagnew span{font-size:var(--t-small);color:var(--ink-60)}
.tagnew input{flex:0 1 11rem;min-width:8rem}
[data-tag-hint].bad{color:var(--link-ui)}

.libwrap{position:fixed;inset:0;z-index:90;background:rgb(0 0 0/.62);
  display:flex;align-items:center;justify-content:center;padding:1.5rem}
.libwrap[hidden]{display:none}
.libbox{background:var(--canvas-sub,var(--canvas));color:var(--ink-80);
  border:1px solid var(--hairline);border-radius:var(--r-card);
  width:min(64rem,100%);max-height:86vh;display:flex;flex-direction:column;
  box-shadow:0 1.5rem 3rem rgb(0 0 0/.45);overflow:hidden}
.libhead{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;
  padding:.9rem 1.1rem;border-bottom:1px solid var(--hairline)}
.libhead b{font-family:var(--font-display);font-size:var(--t-small);color:var(--ink-100)}
.libhead input{flex:1 1 14rem;min-width:10rem}
/* ★ align-content 를 start 로, 줄 높이를 max-content 로 못박는다. ★
   그냥 두었더니 크롬이 넘치는 판에서 줄 높이를 73px 로 눌러 버렸고,
   그림(116px) 아래 붙인 태그 줄과 출처 줄이 통째로 잘렸다 (2026-09-19) */
.libgrid{display:grid;gap:.75rem;padding:1.1rem;overflow:auto;
  grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));
  grid-auto-rows:max-content;align-content:start}
.libgrid .hint{grid-column:1/-1}
.libcard{display:flex;flex-direction:column;text-align:left;padding:0;
  border:1px solid var(--hairline);
  border-radius:var(--r-xs);overflow:hidden;background:var(--canvas-raise,var(--ink-4));
  color:var(--ink-80);cursor:pointer}
.libcard:focus-visible{outline:2px solid var(--link-ui);outline-offset:2px}
.libcard.is-fit{border-color:var(--link-ui);box-shadow:0 0 0 1px var(--link-ui)}
.libcard:hover{transform:translateY(-1px)}
.libcard img{width:100%;aspect-ratio:16/10;object-fit:cover;
  background:var(--canvas);display:block;flex:none}
/* 사라진 그림은 칸만 남기고 조용히 접는다. 빈 흰 판이 줄지어 서는 것보다 낫다 */
.libcard img[data-gone]{display:none}
.libcard[data-gone]{display:none}
.libtags{display:flex;flex-wrap:wrap;gap:.25rem;padding:.45rem .5rem 0}
.libtags i{font-style:normal;font-size:var(--t-micro);
  padding:.1rem .35rem;border-radius:999px;background:var(--ink-4);color:var(--ink-60)}
.libtags i.on{background:var(--link-ui);color:#fff}
.libfrom{display:block;padding:.35rem .5rem .55rem;
  font-size:var(--t-micro);color:var(--ink-44);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 태그가 없는 그림에 제목에서 뽑아 붙인 낱말. 진짜 태그와
   구분되어야 한다 — 재기로 붙인 것이지 손으로 고른 것이 아니다 */
.libtags i.soft{background:transparent;border:1px dashed var(--ink-12);color:var(--ink-44)}

/* 키워드 줄. 서랍에 무엇이 들어 있는지를 먼저 보여 준다.
   찾는 칸 하나만 두면 무엇을 치는지 알고 있어야 한다 (2026-09-21 성동님) */
.libchips{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.35rem;
  margin:0 0 .35rem;padding:0 0 .75rem;border-bottom:1px solid var(--hairline)}
.libchip{display:inline-flex;align-items:center;gap:.3rem;
  padding:.28rem .6rem;border-radius:999px;cursor:pointer;
  border:1px solid var(--hairline);background:var(--ink-4);color:var(--ink-80);
  font-family:inherit;font-size:var(--t-micro);line-height:1.2}
.libchip b{font-weight:600;color:var(--ink-44);font-variant-numeric:tabular-nums}
.libchip:hover{border-color:var(--link-ui)}
/* 이 기사의 태그는 앞에 서고 테두리로 표를 한다 */
.libchip.mine{border-color:var(--link-ui);color:var(--ink-100)}
.libchip.on{background:var(--link-ui);border-color:var(--link-ui);color:#fff}
.libchip.on b{color:#fff}
/* 분류 없는 그림을 모으는 칩. 손을 대야 할 줄이므로 따로 세운다 */
/* 무엇을 보여 줄지 — 전체 · 대표로 올린 것 · 삽화로 올린 것 (2026-09-22) */
.libkinds{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.35rem;margin:0 0 .5rem}
.libkind{padding:.3rem .7rem;border-radius:var(--r-xs);cursor:pointer;
  border:1px solid var(--hairline);background:transparent;color:var(--ink-60);
  font-family:inherit;font-size:var(--t-micro);font-weight:600}
.libkind.on{background:var(--ink-100);border-color:var(--ink-100);color:var(--canvas)}
.libwhere{font-style:normal;font-weight:600;color:var(--ink-60);margin-right:.35rem}
.libchip.none{border-style:dashed;color:var(--ink-60)}
.libchip.none.on{border-style:solid;background:var(--ink-60);border-color:var(--ink-60);color:var(--canvas)}
.libchip.none.on b{color:var(--canvas)}

/* 그림 한 장에 키워드를 손으로 넣는 줄 (2026-09-21 성동님) */
.libtagbtn{margin-left:auto;padding:.05rem .3rem;line-height:1;cursor:pointer;
  border:1px solid var(--hairline);border-radius:999px;
  background:transparent;color:var(--ink-44);font-size:var(--t-micro)}
.libtagbtn:hover{border-color:var(--link-ui);color:var(--ink-100)}
.libtagedit{display:flex;gap:.3rem;padding:.35rem .5rem .5rem}
.libtagedit input{flex:1;min-width:0;padding:.25rem .4rem;
  border:1px solid var(--link-ui);border-radius:var(--r-xs);
  background:var(--canvas);color:var(--ink-100);
  font-family:inherit;font-size:var(--t-micro)}
.libtagedit .minibtn{flex:none}
/* 손으로 넣은 키워드는 표를 한다 — 기계가 얹은 것과 구분된다 */
.libtags i.hand{background:var(--cat-money,var(--link-ui));color:#fff}

/* 발행 때 걷은 작업 메모 목록. 기계가 지운 것은 숨기지 않는다 (2026-09-21) */
/* 편집실 목록 맨 아래 '더보기'. 하루치씩 뒤로 받는다 (2026-09-22) */
.morerow{display:flex;flex-direction:column;align-items:center;gap:.5rem;
  padding:1.5rem 0 1rem;font-size:var(--t-micro);color:var(--ink-44)}
.morerow .btn{min-width:12rem}
.tidydrop{margin:.75rem 0 0;padding:.75rem .9rem;border-radius:var(--r-xs);
  border:1px dashed var(--ink-12);background:var(--ink-4);
  font-size:var(--t-micro);line-height:1.55;color:var(--ink-60)}
.tidydrop[hidden]{display:none}
.tidydrop b{display:block;color:var(--ink-80);font-weight:600;margin-bottom:.35rem}
.tidydrop ul{margin:0 0 .4rem;padding-left:1.1rem}
.tidydrop li{margin:.15rem 0}
.tidydrop i{font-style:normal;color:var(--ink-44);margin-right:.25rem}

/* 갈래 칩을 누르면 격자 끝에 뜨는 길. 홈에 실린 것보다 그 갈래 기사가
   더 있을 때만 보인다 (2026-09-19 성동님) */
.secmore{margin:1.5rem 0 0;text-align:center}
.secmore[hidden]{display:none}