/* 아틀라스 매거진 — 편집 지면 스타일 (2026-09-13)
   사이트(styles.css) 위에 얹는다. 헤더·푸터는 사이트 것을 그대로 쓰고, 지면만 잡지 문법으로 바꾼다.
   시그니처: 로고를 매트 판에 올린 도판(plate)과, 기사에 나온 브랜드의 실제 팔레트로 만든 색 띠(band).
   서체: 제목 Hahmlet(대비 강한 한글 명조) · 라틴 표제 Archivo Expanded · 본문 Pretendard. 강조색은 사이트의 빨강 하나. */

.mag{
  --m-ink:#0e0f11; --m-ink-2:#34373d; --m-graphite:#5a5e66; --m-line:#d9d8d2;
  --m-mat:#eeede8; --m-mat-2:#e4e3dc; --m-paper:#fff; --m-red:#e5252b;
  --m-serif:"Hahmlet","Nanum Myeongjo",serif;
  --m-wide:"Archivo",var(--font);
  background:var(--m-paper);
}
.mag main{background:var(--m-paper)}
.mag .mw{max-width:1180px;margin:0 auto;padding:0 var(--gutter)}
.mag .mw-wide{max-width:1400px;margin:0 auto;padding:0 var(--gutter)}
.mag .crumbs{font-size:13px;color:var(--m-graphite);margin-bottom:34px}
.mag .crumbs a:hover{color:var(--m-ink)}

/* ── 공통 라벨 ─────────────────────────────────────────────── */
.eyebrow,.issue-line,.sec-h span,.pl,.story .no,.story .k,.byline,.band-label,.cover-story .k,.cover-story .go{
  font-family:var(--m-wide);font-stretch:125%;text-transform:uppercase;letter-spacing:.06em;font-weight:700;font-size:11.5px}
.eyebrow{display:flex;gap:14px;flex-wrap:wrap;color:var(--m-graphite);margin-bottom:22px}
.eyebrow a{color:var(--m-red)}
.eyebrow span+span::before{content:"/";margin-right:14px;color:var(--m-line)}

/* ── 기사 오프너 ───────────────────────────────────────────── */
.mag-article .opener{padding:34px 0 0;border-bottom:1px solid var(--m-ink)}
.mag-article h1{font-family:var(--m-serif);font-weight:700;font-size:clamp(38px,6.4vw,84px);line-height:1.08;letter-spacing:-.035em;max-width:15ch;color:var(--m-ink)}
.mag-article .dek{font-family:var(--m-serif);font-weight:300;font-size:clamp(19px,2.1vw,26px);line-height:1.55;color:var(--m-ink-2);max-width:40ch;margin-top:26px}
.byline{display:flex;flex-wrap:wrap;gap:8px 22px;color:var(--m-graphite);margin:34px 0 40px;font-weight:600;font-size:11px}
.byline span:first-child{color:var(--m-ink)}

/* 오프너 도판: 기사에 나온 로고를 매트 위에 한 줄로 */
.hero-board{display:grid;grid-template-columns:repeat(var(--n,6),1fr);gap:2px;background:var(--m-mat-2);border:2px solid var(--m-mat-2)}
.hero-board .mount{background:var(--m-mat)}

/* 색 띠: 브랜드 팔레트의 실제 값 */
.band{display:flex;height:22px;margin-top:0}
.band span{flex:1;background:var(--c)}
.band.tall{height:auto;min-height:88px;position:relative;margin-top:48px;align-items:stretch}
.band.tall span[style]{min-height:88px;transition:flex .35s ease}
.band.tall span[style]:hover{flex:4}
.band-label{position:absolute;left:0;top:-26px;color:var(--m-graphite)}

/* ── 본문 ──────────────────────────────────────────────────── */
.mag .article-grid{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:72px;padding-top:64px;padding-bottom:40px}
.prose{max-width:720px}
.prose>p{font-size:18px;line-height:1.92;color:var(--m-ink);margin:0 0 1.35em}
.prose>p:first-child::first-line{font-weight:600}
.prose h2{font-family:var(--m-serif);font-weight:600;font-size:clamp(24px,2.6vw,31px);line-height:1.3;letter-spacing:-.02em;margin:2.4em 0 .9em;padding-top:22px;position:relative}
.prose h2::before{content:"";position:absolute;top:0;left:0;width:36px;height:3px;background:var(--m-red)}
.prose a.bl{color:inherit;text-decoration:underline;text-decoration-color:rgba(229,37,43,.45);text-decoration-thickness:1.5px;text-underline-offset:4px}
.prose a.bl:hover{text-decoration-color:var(--m-red)}

/* 도판 — 본문 칼럼 폭 안에 둔다. 오른쪽 여백에는 스크롤을 따라오는 '이 글의 브랜드'가 있어 넓히면 겹친다(2026-09-13). */
.plate,.swatch{margin:2.6em 0 2.8em;width:100%}
.board{display:grid;gap:2px;background:var(--m-mat-2);border:2px solid var(--m-mat-2)}
.plate.n1 .board{grid-template-columns:1fr}
.plate.n2 .board{grid-template-columns:repeat(2,1fr)}
.plate.n3 .board,.plate.n6 .board{grid-template-columns:repeat(3,1fr)}
.plate.n4 .board{grid-template-columns:repeat(4,1fr)}
.plate.n5 .board{grid-template-columns:repeat(5,1fr)}
.mount{display:flex;flex-direction:column;background:var(--m-mat);position:relative}
.mount .art{aspect-ratio:4/3;display:grid;place-items:center;padding:16% 14%}
.mount img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply}
.mount .wm{font-family:var(--m-wide);font-stretch:125%;font-weight:800;font-size:clamp(14px,1.5vw,20px);letter-spacing:-.01em;color:var(--m-ink);text-align:center;line-height:1.1}
.mount .cap{font-size:12px;color:var(--m-graphite);padding:0 12px 11px;letter-spacing:.01em}
a.mount{transition:background var(--t)}
a.mount:hover{background:#fff}
figcaption{display:flex;gap:14px;align-items:baseline;font-size:13.5px;line-height:1.6;color:var(--m-graphite);margin-top:12px}
.pl{color:var(--m-red);white-space:nowrap;font-size:10.5px}
.swatch .strip{display:flex;height:150px;border:1px solid var(--m-line)}
.swatch .strip span{flex:1;background:var(--c);position:relative}
.swatch .strip i{position:absolute;left:8px;bottom:8px;font:600 10.5px/1 var(--mono);font-style:normal;color:#fff;mix-blend-mode:difference;writing-mode:vertical-rl;transform:rotate(180deg)}

/* 인용 */
.pull{margin:2.2em 0;padding:4px 0 4px 26px;border-left:3px solid var(--m-red)}
.pull p{font-family:var(--m-serif);font-weight:300;font-size:clamp(22px,2.5vw,30px);line-height:1.5;letter-spacing:-.015em;color:var(--m-ink)}
.pull cite{display:block;font-style:normal;font-size:13px;color:var(--m-graphite);margin-top:12px}

/* 근거 박스 */
.source{margin-top:3.2em;padding-top:22px;border-top:1px solid var(--m-line)}
.source h2{font-family:var(--m-wide);font-stretch:125%;text-transform:uppercase;letter-spacing:.06em;font-size:11.5px;font-weight:700;color:var(--m-graphite);margin:0 0 8px;padding:0}
.source h2::before{display:none}
.source p{font-size:14px;line-height:1.8;color:var(--m-graphite)}

/* 등장 브랜드 — 오른쪽 여백 */
.cast{position:sticky;top:96px;align-self:start}
.cast h2{font-family:var(--m-wide);font-stretch:125%;text-transform:uppercase;letter-spacing:.06em;font-size:11px;font-weight:700;color:var(--m-graphite);padding-bottom:12px;border-bottom:1px solid var(--m-ink);margin-bottom:6px}
.cast li a{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--m-line);font-size:13.5px;line-height:1.35}
.cast li img{width:44px;height:32px;object-fit:contain;background:var(--m-mat);padding:4px;mix-blend-mode:multiply}
.cast li .dot{width:44px;height:32px;background:var(--m-mat)}
.cast li a:hover span{color:var(--m-red)}

/* 이전·다음 */
.next{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:40px;margin-bottom:80px;border-top:1px solid var(--m-ink)}
.next a{padding:24px 0;display:block}
.next .nxt{text-align:right}
.next small{display:block;font-size:12px;color:var(--m-graphite);margin-bottom:6px}
.next b{font-family:var(--m-serif);font-weight:600;font-size:21px;line-height:1.35}
.next a:hover b{color:var(--m-red)}

/* ── 이번 호(표지) ─────────────────────────────────────────── */
.mag-index main{background:var(--m-paper)}
.cover{background:var(--m-mat);padding:36px 0 0;border-bottom:1px solid var(--m-ink)}
.masthead{display:flex;justify-content:space-between;align-items:baseline;gap:.25em;white-space:nowrap;font-family:var(--m-wide);font-stretch:125%;font-weight:900;text-transform:uppercase;font-size:clamp(34px,7.4vw,118px);line-height:.86;letter-spacing:-.04em;color:var(--m-ink);border-bottom:6px solid var(--m-ink);padding-bottom:14px}
.issue-line{display:flex;gap:10px 26px;flex-wrap:wrap;padding:14px 0 38px;color:var(--m-ink-2);font-size:11px}
.issue-line .red{color:var(--m-red)}
.issue-line time{margin-left:auto}
.cover-story{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:end;padding-bottom:12px}
.cs-text .k{color:var(--m-red)}
.cs-text h1{font-family:var(--m-serif);font-weight:700;font-size:clamp(36px,5vw,72px);line-height:1.08;letter-spacing:-.035em;margin:14px 0 20px;max-width:12ch}
.cs-text p{font-family:var(--m-serif);font-weight:300;font-size:clamp(17px,1.6vw,21px);line-height:1.6;color:var(--m-ink-2);max-width:34ch}
.cs-text .go{display:inline-block;margin-top:28px;padding-bottom:4px;border-bottom:2px solid var(--m-ink)}
.cover-story:hover .go{color:var(--m-red);border-color:var(--m-red)}
.cs-board{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--m-mat-2);border:2px solid var(--m-mat-2)}
.cs-board .mount{background:#f7f6f2}
.cover-story:hover .cs-board .mount{background:#fff}

.mag .toc-sec{padding:72px 0 30px}
.sec-h{font-family:var(--m-serif);font-weight:700;font-size:clamp(28px,3.2vw,40px);letter-spacing:-.03em;display:flex;align-items:baseline;gap:18px;border-bottom:1px solid var(--m-ink);padding-bottom:14px;margin-bottom:0}
.sec-h span{color:var(--m-red)}
.stories{display:grid;grid-template-columns:repeat(12,1fr)}
.story{grid-column:span 4;display:flex;flex-direction:column;gap:10px;padding:26px 26px 30px 0;border-bottom:1px solid var(--m-line);position:relative}
.story+.story{padding-left:26px;border-left:1px solid var(--m-line)}
.story.s0{grid-column:span 6}.story.s1{grid-column:span 6}
.story.s2{border-left:0;padding-left:0}
.story .no{color:var(--m-red);font-size:12px}
.story .k{color:var(--m-graphite)}
.story b{font-family:var(--m-serif);font-weight:700;font-size:clamp(22px,2.2vw,30px);line-height:1.22;letter-spacing:-.025em}
.story.s0 b{font-size:clamp(26px,2.8vw,38px)}
.story p{font-size:15px;line-height:1.7;color:var(--m-ink-2)}
.story .logos{display:flex;gap:2px;margin-top:auto;padding-top:14px}
.story .logos img{width:64px;height:44px;object-fit:contain;background:var(--m-mat);padding:7px;mix-blend-mode:multiply}
.story:hover b{color:var(--m-red)}
.upcoming{display:flex;flex-wrap:wrap;gap:0;border-bottom:1px solid var(--m-line)}
.upcoming li{flex:1 1 280px;display:flex;gap:16px;align-items:baseline;padding:18px 20px 18px 0;color:var(--m-graphite)}
.upcoming time{font-family:var(--m-wide);font-stretch:125%;font-weight:700;font-size:11px;letter-spacing:.06em;color:var(--m-red);white-space:nowrap}
.upcoming b{font-family:var(--m-serif);font-weight:600;font-size:17px;color:var(--m-ink-2)}
.mag .about-mag{padding:40px 0 96px}
.about-mag h2{font-family:var(--m-serif);font-weight:600;font-size:22px;margin-bottom:10px}
.about-mag p{max-width:62ch;font-size:15.5px;line-height:1.85;color:var(--m-ink-2)}

/* ── 반응형 ────────────────────────────────────────────────── */
@media (max-width:1100px){
  .hero-board{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
  .mag .article-grid{grid-template-columns:1fr;gap:40px}
  .cast{position:static}
  .cast ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));column-gap:24px}
}
@media (max-width:860px){
  .cover-story{grid-template-columns:1fr;gap:32px}
  .story,.story.s0,.story.s1{grid-column:1/-1;padding-left:0!important;border-left:0!important}
  .plate.n4 .board,.plate.n5 .board,.plate.n6 .board,.plate.n3 .board{grid-template-columns:repeat(2,1fr)}
  .issue-line time{margin-left:0}
  .swatch .strip{height:110px}
  .next{grid-template-columns:1fr}
  .next .nxt{text-align:left;border-top:1px solid var(--m-line)}
}
@media (max-width:640px){
  .masthead{flex-direction:column;align-items:flex-start;gap:0;font-size:12.6vw;line-height:.9}
  .masthead span:first-child{font-size:1.45em;line-height:.86}
  .hero-board{grid-template-columns:repeat(3,1fr)}
  .hero-board .mount .cap{display:none}
  .band.tall span[style]{min-height:64px}
}
@media (prefers-reduced-motion:reduce){.band.tall span[style]{transition:none}.band.tall span[style]:hover{flex:1}}