/* juntoart.ai — 현재 사이트의 문법을 잇는다: 검정 바탕, Instrument Sans 굵은 영문을 크게,
   작업 제목은 Instrument Serif, 둥근 카드에 알약 태그, 얇은 구분선. 보라는 아주 조금만. */
:root {
  --bg: #000000;
  --bg-2: #111113;
  --bg-3: #1c1c1f;
  --fg: #ffffff;
  --muted: #a3a3a8;
  --faint: #6b6b70;
  --line: rgba(255,255,255,.18);
  --acc: #C8FF2E;
  --on-acc: #0A0A0A;
  --acc-2: #C8FF2E;
  --r: 22px;
  --pad: clamp(20px, 6vw, 120px);
  --ease: cubic-bezier(.15,.75,.5,1);
  --sans: "SUIT Variable", "SUIT", "Pretendard Variable", Pretendard, -apple-system, sans-serif;
  --serif: "Instrument Serif", "Pretendard Variable", Georgia, serif;
  --mono: "SUIT Variable", "SUIT", "Pretendard Variable", sans-serif;
  --code: "Geist Mono", ui-monospace, Menlo, monospace;
  --font: "Pretendard Variable", Pretendard, -apple-system, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--fg); font-family: var(--font); font-size: 15px; line-height: 1.55; word-break: keep-all; overflow-x: hidden; }
body.lock { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: left; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
sup { font-family: var(--mono); font-size: .58em; font-weight: 400; vertical-align: top; position: relative; top: .1em; margin-left: .2em; color: var(--muted); }
.lbl { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 10px; }
.link { font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--muted); transition: color .2s; }
.link:hover { color: var(--fg); }
main > section { padding-left: var(--pad); padding-right: var(--pad); }

/* 상단바 */
.hd { position: sticky; top: 0; z-index: 40; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; height: 64px; padding: 0 var(--pad); background: rgba(0,0,0,.72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.mark { font-family: var(--sans); font-size: 17px; font-weight: 500; letter-spacing: .14em; justify-self: start; }
.gnb { display: flex; gap: 6px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.08); }
.gnb a { font-family: var(--sans); font-size: 14px; font-weight: 500; padding: 7px 16px; border-radius: 999px; color: rgba(255,255,255,.75); transition: background .25s var(--ease), color .25s; }
.gnb a:hover { color: #fff; background: rgba(255,255,255,.1); }
.gnb a.on { background: #fff; color: #000; }
.hd-r { justify-self: end; display: flex; align-items: center; gap: 18px; }
.clock { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--muted); white-space: nowrap; }
.cta { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 9px 16px; border-radius: 999px; background: #fff; color: #000; white-space: nowrap; transition: transform .25s var(--ease), background .25s; }
.cta:hover { background: var(--acc); color: var(--on-acc); }

/* 홈 첫 화면: 현재 사이트처럼 굵은 영문을 크게 */
.intro { padding-top: clamp(48px, 9vw, 140px); padding-bottom: 32px; }
.display { font-family: var(--sans); font-weight: 700; font-size: clamp(56px, 10.5vw, 188px); line-height: .95; letter-spacing: -0.035em; }
.intro-meta { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); }
.intro-meta .serif { font-family: var(--serif); font-size: clamp(22px, 2.2vw, 30px); line-height: 1.15; }
.intro-meta span:last-child { font-family: var(--sans); font-size: 15px; }
.intro-cols { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end; margin-top: 56px; }
.intro-ko { color: var(--muted); max-width: 46ch; line-height: 1.75; }
.nums { display: flex; gap: clamp(24px, 4vw, 64px); }
.nums dt { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.nums dd { font-family: var(--sans); font-size: clamp(40px, 5vw, 72px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; margin-top: 6px; font-variant-numeric: tabular-nums; }

/* 카드: 둥근 모서리, 왼쪽 위 태그, 왼쪽 아래 세리프 제목, 마우스를 올리면 천천히 확대 */
.card { position: relative; display: block; width: 100%; border-radius: var(--r); overflow: hidden; background: var(--bg-2); color: #fff; isolation: isolate;
  transition: box-shadow .45s var(--ease), transform .45s var(--ease); }
.card-img { display: block; width: 100%; height: 100%; aspect-ratio: 16/10; overflow: hidden; }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease), filter .45s var(--ease); }
.card::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, transparent 28%, transparent 55%, rgba(0,0,0,.62) 100%); transition: opacity .45s var(--ease); }
.card:hover { box-shadow: 0 28px 60px -18px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.08); }
.card:hover .card-img img { transform: scale(1.07); }
.tag { position: absolute; z-index: 2; top: 18px; left: 18px; font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,.18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.card .yr { position: absolute; z-index: 2; top: 20px; right: 20px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: rgba(255,255,255,.75); }
.card-txt { position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 18px; display: grid; gap: 2px; transition: transform .45s var(--ease); }
.card:hover .card-txt { transform: translateY(-4px); }
.card-txt .cl { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.card-txt .ttl { font-family: var(--serif); font-size: clamp(22px, 2vw, 32px); line-height: 1.05; letter-spacing: -0.01em; }

/* 커서를 따라오는 원 (Play / View) */
.cursor { position: fixed; left: 0; top: 0; z-index: 90; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; background: #fff; color: #000;
  display: grid; place-items: center; font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .04em; pointer-events: none;
  transform: translate3d(var(--x, -200px), var(--y, -200px), 0) scale(0); transition: transform .35s var(--ease); will-change: transform; }
.cursor.on { transform: translate3d(var(--x), var(--y), 0) scale(1); }
@media (hover: hover) and (pointer: fine) { .card[data-cursor] { cursor: none; } }

/* 홈: 대표 영상, 선별 영상 */
.feature { padding-top: 16px; }
.feature-media .card-img { aspect-ratio: 21/9; }
.feature-media .card-txt .ttl { font-size: clamp(32px, 4.4vw, 72px); }
.sh { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 96px 0 24px; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.h2 { font-family: var(--sans); font-size: clamp(36px, 5vw, 80px); font-weight: 700; letter-spacing: -0.035em; line-height: 1; }
.sel-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 10px; }
.sel { grid-column: span 6; }
.sel.s1 { grid-column: span 7; } .sel.s2 { grid-column: span 5; }
.sel.s3 { grid-column: span 5; } .sel.s4 { grid-column: span 7; }
.sel .card-img { aspect-ratio: auto; height: clamp(260px, 30vw, 460px); }

/* 페이지 머리 */
.ph { display: grid; grid-template-columns: 1fr minmax(0, 420px); gap: 32px; align-items: end; padding-top: clamp(40px, 7vw, 110px); padding-bottom: 28px; border-bottom: 1px solid var(--line); margin: 0 var(--pad); padding-left: 0 !important; padding-right: 0 !important; }
.ph h1 .en { font-family: var(--sans); font-weight: 600; font-size: clamp(52px, 9vw, 168px); line-height: .9; letter-spacing: -0.03em; text-transform: uppercase; }
.ph h1 sup { font-size: clamp(14px, 1.4vw, 20px); top: .6em; }
.ph-meta p:not(.lbl) { color: var(--muted); line-height: 1.7; }
.ph-meta a { color: var(--fg); border-bottom: 1px solid var(--line); }

/* 도구줄: 분류, 형식, 보기 */
.tools { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px 24px; padding: 20px 0 24px; }
.tools-r { display: flex; gap: 10px; flex-wrap: wrap; }
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.f { font-family: var(--sans); font-size: 13px; font-weight: 500; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); color: rgba(255,255,255,.75); transition: all .25s var(--ease); }
.f sup { font-size: 10px; top: -.2em; }
.f:hover { border-color: #fff; color: #fff; }
.f.on { background: #fff; border-color: #fff; color: #000; }
.f.on sup { color: #555; }
.tog { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.08); }
.tog button { font-family: var(--sans); font-size: 13px; font-weight: 500; padding: 6px 14px; border-radius: 999px; color: rgba(255,255,255,.7); transition: all .25s var(--ease); }
.tog button sup { font-size: 10px; top: -.2em; }
.tog button.on { background: #fff; color: #000; }
.tog button.on sup { color: #555; }

/* 영상: 그리드 / 목록 두 보기 */
.films .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; grid-auto-flow: dense; }
.films .grid .card-img { aspect-ratio: 16/11; }
.films .grid .card.tall { grid-row: span 2; }
.films .grid .card.tall .card-img { aspect-ratio: auto; height: 100%; min-height: 100%; }
.films .grid .card.tall { display: flex; }
.films .grid .card-txt .ttl { font-size: clamp(20px, 1.6vw, 26px); }
.films[data-view="grid"] .index, .films[data-view="index"] .grid, .films[data-view="index"] .grid + .index .head:not(:first-child) { display: none; }
.index { border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: 56px 1.1fr 2fr 1fr 70px 60px 56px; gap: 16px; align-items: baseline; width: 100%; padding: 18px 0; border-bottom: 1px solid var(--line); transition: padding .35s var(--ease), color .25s; color: rgba(255,255,255,.88); }
.row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .no, .row .fm, .row .du, .row .yr { font-family: var(--mono); font-size: 12px; color: var(--faint); }
.row .cl { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.row .ttl { font-family: var(--serif); font-size: clamp(20px, 1.8vw, 26px); line-height: 1.1; white-space: normal; }
.row .ct { font-size: 13px; color: var(--muted); }
.row .yr { text-align: right; }
.row:not(.head):hover { padding-left: 14px; color: #fff; }
.row:not(.head):hover .ttl { color: var(--acc); }
.row.head { cursor: default; padding: 10px 0; }
.row.head span { font-family: var(--mono); font-size: 10px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.row.head .ttl { font-size: 10px; font-family: var(--mono); }
.card.hide, .row.hide { display: none; }
.none { color: var(--muted); padding: 40px 0; }

/* 목록에서 커서를 따라오는 썸네일 */
.peek { position: fixed; left: 0; top: 0; z-index: 80; width: 300px; aspect-ratio: 16/10; border-radius: 14px; overflow: hidden; pointer-events: none; opacity: 0;
  transform: translate3d(var(--x, 0), var(--y, 0), 0) translate(24px, -50%) scale(.92); transition: opacity .25s, transform .3s var(--ease); box-shadow: 0 24px 60px rgba(0,0,0,.6); }
.peek.on { opacity: 1; transform: translate3d(var(--x), var(--y), 0) translate(24px, -50%) scale(1); }
.peek img { width: 100%; height: 100%; object-fit: cover; }
.peek.v { width: 180px; aspect-ratio: 9/14; }

/* 이미지: 실제 비율로 쌓기 */
.masonry { columns: 3; column-gap: 10px; }
.masonry.four { columns: 4; }
.masonry .card { break-inside: avoid; margin-bottom: 10px; }
.masonry .card-img { aspect-ratio: auto; }
.masonry .card-txt .ttl { font-size: clamp(22px, 2vw, 30px); }

/* 문의 띠 */
.contact-band { padding-top: 140px; padding-bottom: 120px; border-top: 1px solid var(--line); margin-top: 96px; }
.big-link { display: inline-flex; align-items: baseline; gap: .2em; font-family: var(--sans); font-weight: 700; font-size: clamp(48px, 9vw, 160px); line-height: 1; letter-spacing: -0.04em; transition: color .3s; }
.big-link span { font-weight: 400; transition: transform .45s var(--ease); display: inline-block; }
.big-link:hover { color: var(--acc); }
.big-link:hover span { transform: translate(8px, -8px); }
.cb-ko { color: var(--muted); margin-top: 20px; }

/* 푸터: 큰 워드마크 */
.ft { padding: 64px var(--pad) 24px; border-top: 1px solid var(--line); margin-top: 0; }
.ft-top { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.ft-top a:hover { color: var(--fg); }
.ft-word { font-family: var(--sans); font-weight: 700; font-size: clamp(64px, 19vw, 360px); line-height: .8; letter-spacing: -0.045em; margin: 72px 0 24px; color: #fff; white-space: nowrap; }
.ft-copy { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }

/* 팝업: 영상 재생 / 이미지 넘겨 보기 */
.lb[hidden] { display: none; }
.lb { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.94); display: grid; place-items: center; padding: 24px; animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; } }
.lb-box { position: relative; width: min(1320px, 100%); max-height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 320px; background: var(--bg-2); border-radius: var(--r); overflow: hidden; }
.lb-box.v-tall { width: min(880px, 100%); }
.lb-media { position: relative; background: #000; display: grid; place-items: center; min-height: 0; }
.lb-media iframe { width: 100%; aspect-ratio: 16/9; border: 0; display: block; }
.v-tall .lb-media iframe { aspect-ratio: 9/16; height: min(80vh, 760px); width: auto; max-width: 100%; }
.lb-info { padding: 28px 24px; display: grid; gap: 14px; align-content: start; overflow-y: auto; max-height: 86vh; }
.lb-info .vc-client { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.lb-info h2 { font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 1.05; }
.lb-info dl { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.lb-info dl div { display: grid; grid-template-columns: 64px 1fr; gap: 8px; font-size: 14px; }
.lb-info dt { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--faint); padding-top: 2px; }
.lb-info p.cr { font-size: 13px; color: var(--muted); line-height: 1.7; }
.lb-link { font-family: var(--sans); font-size: 13px; font-weight: 600; padding: 9px 14px; border-radius: 999px; background: #fff; color: #000; justify-self: start; }
.lb-x { position: absolute; top: 12px; right: 12px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; background: rgba(0,0,0,.55); display: grid; place-items: center; font-size: 22px; line-height: 1; color: #fff; }
.lb-nav { position: fixed; top: 50%; z-index: 101; width: 48px; height: 48px; margin-top: -24px; border-radius: 50%; background: rgba(255,255,255,.12); display: grid; place-items: center; font-size: 22px; color: #fff; transition: background .2s; }
.lb-nav:hover { background: #fff; color: #000; }
.lb-nav.prev { left: 16px; } .lb-nav.next { right: 16px; }
.lb-count { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.slider { position: relative; width: 100%; height: min(82vh, 900px); overflow: hidden; touch-action: pan-y; }
.slides { display: flex; height: 100%; transition: transform .45s var(--ease); }
.slides img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.s-btn { position: absolute; top: 50%; margin-top: -20px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.9); color: #000; display: grid; place-items: center; font-size: 18px; z-index: 2; }
.s-btn.prev { left: 12px; } .s-btn.next { right: 12px; }
.s-btn[disabled] { opacity: 0; pointer-events: none; }
.dots { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 6px; z-index: 2; }
.dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.4); transition: background .2s, transform .2s; }
.dots span.on { background: #fff; transform: scale(1.2); }

/* 뉴스레터 공용 클래스 보정 */
.sec { padding-top: 24px; padding-bottom: 24px; }
.sec.tight { padding-top: 8px; }
.wrap { max-width: none; padding: 0; }
.empty { color: var(--muted); padding: 32px 0; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

@media (max-width: 1100px) {
  .hd { grid-template-columns: 1fr auto; }
  .gnb { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
  .hd { height: auto; padding-top: 12px; padding-bottom: 10px; row-gap: 10px; }
  .films .grid { grid-template-columns: repeat(3, 1fr); }
  .masonry.four { columns: 3; }
  .lb-box { grid-template-columns: 1fr; }
  .lb-info { max-height: none; }
  .ft-top { grid-template-columns: repeat(2, 1fr); }
  .row { grid-template-columns: 44px 1fr 2fr auto; }
  .row .ct, .row .fm, .row .du { display: none; }
}
@media (max-width: 760px) {
  .clock { display: none; }
  .gnb { overflow-x: auto; max-width: 100%; }
  .gnb a { padding: 7px 12px; }
  .intro-cols, .ph { grid-template-columns: 1fr; }
  .intro-meta { flex-direction: column; align-items: start; }
  .nums dd { font-size: 40px; }
  .feature-media .card-img { aspect-ratio: 4/5; }
  .sel-grid { grid-template-columns: 1fr; }
  .sel, .sel.s1, .sel.s2, .sel.s3, .sel.s4 { grid-column: auto; }
  .films .grid { grid-template-columns: repeat(2, 1fr); }
  .masonry, .masonry.four { columns: 2; column-gap: 6px; }
  .masonry .card { margin-bottom: 6px; }
  .card-txt { left: 14px; right: 14px; bottom: 12px; }
  .tag { top: 12px; left: 12px; font-size: 10px; }
  .card .yr { display: none; }
  .row { grid-template-columns: 1fr auto; gap: 4px 12px; }
  .row .no { display: none; }
  .row .cl { grid-column: 1; }
  .row .yr { grid-row: 1; grid-column: 2; }
  .row .ttl { grid-column: 1 / -1; }
  .row.head { display: none; }
  .ft-top { grid-template-columns: 1fr; }
  .lb { padding: 0; }
  .lb-box { border-radius: 0; max-height: 100vh; overflow-y: auto; }
  .slider { height: 62vh; }
  .lb-nav, .peek, .cursor { display: none; }
  .v-tall .lb-media iframe { height: 70vh; }
}
/* ================= 뉴스레터 ================= */
/* 뉴스레터 목록 (번호 · 출처 · 제목 · 부제 · 태그 · 썸네일) */
.nl-head { padding-top: 64px; }
.nl-top { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid var(--fg); }
.nl-top h1 { font-size: clamp(40px, 6vw, 72px); font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.nl-meta { font-size: 12px; letter-spacing: .1em; color: var(--muted); padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; }
.nl-lead { color: var(--muted); padding: 18px 0 8px; }
.nl-list { list-style: none; border-top: 1px solid var(--line); margin-top: 24px; }
.nl-list li { border-bottom: 1px solid var(--line); }
.nl-row { display: grid; grid-template-columns: 80px minmax(0, 1fr) 240px; gap: 32px; padding: 40px 0; align-items: start; }
.nl-no { font-size: 28px; font-weight: 300; color: var(--faint); font-variant-numeric: tabular-nums; }
.nl-body { display: grid; gap: 8px; min-width: 0; }
.nl-src { font-size: 11.5px; letter-spacing: .1em; color: var(--muted); display: flex; align-items: center; gap: 10px; }
.nl-src::before { content: ""; width: 18px; height: 1px; background: var(--muted); }
.draft { font-style: normal; letter-spacing: 0; color: #f0b25a; border: 1px solid rgba(240,178,90,.4); border-radius: 999px; padding: 1px 8px; }
.nl-title { font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.3; transition: color .2s; }
.nl-row:hover .nl-title { color: var(--acc); }
.nl-sub { color: var(--muted); line-height: 1.6; max-width: 56ch; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tags span { font-size: 12px; color: var(--muted); padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; }
.nl-thumb { aspect-ratio: 16/10; border-radius: 10px; overflow: hidden; background: var(--bg-2); display: grid; }
.nl-thumb img { width: 100%; height: 100%; object-fit: cover; }
.nl-type { color: var(--fg); padding: 16px; font-size: 15px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.35; align-self: end;
  background: radial-gradient(90% 90% at 100% 0%, rgba(200,255,46,.22), transparent 70%); height: 100%; display: flex; align-items: flex-end; }
.nl-sub-box { margin-top: 48px; padding: 28px 32px; border-radius: var(--r); background: var(--bg-2); display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.nl-sub-box b { font-size: 18px; }
.nl-sub-box p { color: var(--muted); margin-top: 4px; max-width: 56ch; }
.mail { font-size: 18px; font-weight: 600; user-select: all; }

/* 뉴스레터 본문 */
.art { padding: 56px 0 40px; }
.art-wrap { max-width: 860px; }
.art-nav { display: flex; justify-content: space-between; font-size: 12px; letter-spacing: .1em; color: var(--muted); padding-bottom: 14px; border-bottom: 1px solid var(--fg); margin-bottom: 40px; }
.art-nav a:hover { color: var(--fg); }
.art h1 { font-size: clamp(30px, 4.4vw, 48px); font-weight: 700; letter-spacing: -0.045em; line-height: 1.2; margin: 14px 0 14px; text-wrap: balance; }
.art-sub { color: var(--muted); font-size: 17px; }
.art-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 28px 0 40px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.art-meta .tags { margin: 0; }
.art-meta time { font-size: 13px; color: var(--faint); font-variant-numeric: tabular-nums; }
.art-cover { border-radius: var(--r); overflow: hidden; margin-bottom: 48px; }
.art-body { font-size: 17px; line-height: 1.9; color: #dcd8e6; display: grid; gap: 22px; }
.art-body h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.03em; color: var(--fg); margin-top: 28px; }
.art-body ul { padding-left: 20px; display: grid; gap: 6px; }
.art-body blockquote { font-size: 20px; font-weight: 600; line-height: 1.6; color: var(--fg); padding: 8px 0 8px 22px; border-left: 2px solid var(--acc); }
.stat { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 24px; align-items: baseline; padding: 22px 24px; border-radius: 12px; background: var(--bg-2); line-height: 1.4; }
.st-l { color: var(--muted); font-size: 15px; }
.st-v { font-size: clamp(22px, 3vw, 32px); font-weight: 700; letter-spacing: -0.03em; color: var(--fg); font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-n { font-size: 14px; color: var(--acc); white-space: nowrap; }
.art-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line); }
.art-pn a { display: grid; gap: 4px; font-weight: 600; }
.art-pn a.r { text-align: right; }
.art-pn small { font-size: 12px; color: var(--faint); font-weight: 400; }
.art-pn a:hover { color: var(--acc); }

@media (max-width: 760px) { /* nl */
  .nl-row { grid-template-columns: 1fr; gap: 14px; padding: 28px 0; }
  .nl-no { font-size: 20px; }
  .nl-thumb { order: -1; }
  .stat { grid-template-columns: 1fr; }
  .art-body { font-size: 16px; }
}


/* 뉴스레터: juntoart.ai 문법에 맞춤 */
.art { padding-left: var(--pad); padding-right: var(--pad); }
.art-wrap { margin: 0 auto; }
.nl-top h1, .art h1 { font-family: var(--sans); font-weight: 700; letter-spacing: -0.04em; }
.nl-top h1 { font-size: clamp(52px, 9vw, 168px); line-height: .9; font-weight: 600; letter-spacing: -0.03em; text-transform: uppercase; }
.nl-title { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.6vw, 38px); letter-spacing: -0.01em; line-height: 1.1; }
.nl-thumb { border-radius: 16px; }
.nl-sub-box { border-radius: var(--r); }

/* 프롬프트 카드 */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 10px; }
.pc { display: grid; gap: 14px; align-content: start; padding: 22px; border-radius: var(--r); background: var(--bg-2); border: 1px solid transparent; transition: border-color .35s var(--ease), transform .45s var(--ease); }
.pc:hover { border-color: var(--line); transform: translateY(-3px); }
.pc.hide { display: none; }
.pc-hd { display: flex; align-items: center; gap: 10px; }
.tag.solid { position: static; background: #fff; color: #000; backdrop-filter: none; }
.pc-src { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--muted); }
.pc-no { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--faint); }
.pc-title { font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2vw, 30px); line-height: 1.1; }
.pc-ko { color: var(--muted); font-size: 14px; }
.pc-box { position: relative; border-radius: 14px; background: #000; border: 1px solid var(--line); }
.pc-text { font-family: var(--code); font-size: 12.5px; line-height: 1.7; color: #e6e6ea; white-space: pre-wrap; word-break: break-word; padding: 16px 16px 44px; max-height: 260px; overflow: auto; }
.copy { position: absolute; right: 10px; bottom: 10px; font-family: var(--sans); font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: #fff; color: #000; transition: background .2s; }
.copy:hover { background: var(--acc); color: var(--on-acc); }
.pc-ft { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--faint); }
.pc-ft a { color: var(--fg); border-bottom: 1px solid var(--line); }

/* 프롬프트 카드: 원작 미디어 + 프롬프트 + 원작자 */
.pc { padding: 0; overflow: hidden; gap: 0; }
.pc-media { position: relative; display: block; width: 100%; aspect-ratio: 4/3; background: #000; overflow: hidden; }
.pc-media img, .pc-media video { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.pc:hover .pc-media img, .pc:hover .pc-media video { transform: scale(1.05); }
.pc-kind { position: absolute; left: 14px; top: 14px; font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; background: rgba(0,0,0,.55); backdrop-filter: blur(8px); color: #fff; }
.pc-body { display: grid; gap: 12px; padding: 20px 22px 22px; }
.pc-credit { font-size: 13px; color: var(--muted); }
.pc-credit a { color: var(--fg); border-bottom: 1px solid var(--line); }
.pc-orig { font-size: 13px; color: var(--muted); justify-self: start; }
.pc-orig:hover { color: var(--fg); }
.lb-video { width: 100%; max-height: 82vh; background: #000; display: block; }

/* 홈 상단: 큰 영문 한 줄 → 작업 화면이 흐르는 넓은 프레임 → 한국어 정체성 문장과 소개 (림앤코식) */
.lead-hero { padding-top: clamp(56px, 8vw, 120px); padding-bottom: clamp(56px, 7vw, 100px); text-align: center; display: grid; justify-items: center; }
.lead-title { font-family: var(--sans); font-weight: 600; font-size: clamp(44px, 7.2vw, 132px); line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance; max-width: 100%; }
.lead-frame { width: 100%; max-width: 1320px; margin-top: clamp(28px, 3.5vw, 48px); background: #0b0b0d; border: 1px solid var(--line); aspect-ratio: 16 / 6.2; overflow: hidden; display: flex; align-items: center;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.lead-track { display: flex; gap: clamp(24px, 5vw, 90px); width: max-content; animation: lead-flow 60s linear infinite; }
.lead-shot { width: clamp(260px, 42vw, 600px); aspect-ratio: 16 / 9; overflow: hidden; flex: none; box-shadow: 0 20px 50px rgba(0,0,0,.6); }
.lead-shot img { width: 100%; height: 100%; object-fit: cover; }
@keyframes lead-flow { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.lead-frame:hover .lead-track { animation-play-state: paused; }
.lead-id { margin-top: clamp(48px, 6vw, 88px); font-family: var(--font); font-weight: 700; font-size: clamp(22px, 2.4vw, 34px); letter-spacing: -0.03em; }
.lead-copy { margin-top: 24px; max-width: 760px; font-size: clamp(16px, 1.4vw, 20px); line-height: 2; color: rgba(255,255,255,.82); word-break: keep-all; }
.lead-nums { margin-top: 48px; justify-content: center; }
@media (max-width: 760px) {
  .lead-title { white-space: normal; font-size: clamp(48px, 13vw, 72px); }
  .lead-frame { aspect-ratio: 4 / 3; }
  .lead-shot { width: 72vw; }
  .lead-copy { line-height: 1.85; text-align: left; }
}

/* 뉴스레터 구독 상자 */
.nl-sub-box { align-items: center; }
.sub-text { flex: 1 1 280px; }
.sub-form { flex: 1 1 420px; display: grid; gap: 10px; }
.sub-row { display: flex; gap: 8px; }
.sub-row input { flex: 1; min-width: 0; font: inherit; font-size: 15px; padding: 13px 16px; border-radius: 999px; border: 1px solid var(--line); background: #000; color: var(--fg); }
.sub-row input:focus { outline: none; border-color: var(--acc); }
.sub-row button { font: inherit; font-size: 15px; font-weight: 600; padding: 13px 22px; border-radius: 999px; border: 0; background: #fff; color: #000; cursor: pointer; white-space: nowrap; }
.sub-row button:hover { background: var(--acc); color: var(--on-acc); }
.sub-row button[disabled] { opacity: .5; pointer-events: none; }
.sub-agree { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); cursor: pointer; }
.sub-agree input { width: 16px; height: 16px; accent-color: var(--acc); }
.sub-msg { font-size: 13px; min-height: 1.2em; color: var(--acc); }
.sub-msg.bad { color: #d9534f; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.art .nl-sub-box { margin-top: 64px; }
@media (max-width: 560px) { .sub-row { flex-direction: column; } }

/* ================= 움직임 (motion.js) — 현재 juntoart.ai 효과를 이어받음 ================= */
/* 스크립트가 켜질 때만 숨긴다. 스크립트가 없거나 움직임 줄이기 설정이면 처음부터 보인다 */
.motion .split .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0 .08em .1em 0; margin: 0 -.08em -.1em 0; }
.motion .split .wi { display: inline-block; transform: translateY(115%); transition: transform 1.2s cubic-bezier(.25, 1, .5, 1); }
.motion .split.in .wi { transform: none; }
.motion .rv { opacity: 0; transform: translateY(42px); transition: opacity 1.3s cubic-bezier(.215, .61, .355, 1), transform 1.3s cubic-bezier(.215, .61, .355, 1); }
.motion .rv.in { opacity: 1; transform: none; }
/* 작업 이미지: 아래에서 위로 열리며 살짝 줌아웃 */
.motion .rv .card-img, .motion .rv .pc-media { clip-path: inset(18% 0 0 0 round var(--r)); transition: clip-path 1.4s cubic-bezier(.25, 1, .5, 1); }
.motion .rv.in .card-img, .motion .rv.in .pc-media { clip-path: inset(0 0 0 0 round var(--r)); }
.motion .lead-frame.rv { transform: translateY(60px) scale(.97); }
.motion .lead-frame.rv.in { transform: none; }



/* 하단 상시 뉴스레터 구독 */
.ft-sub { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 40px; align-items: end; padding-bottom: 56px; margin-bottom: 56px; border-bottom: 1px solid var(--line); }
.ft-sub h2 { font-size: clamp(22px, 2.4vw, 34px); font-weight: 600; line-height: 1.35; letter-spacing: -0.03em; max-width: 22ch; }
.ft-sub-more { display: inline-block; margin-top: 14px; font-size: 14px; color: var(--muted); }
.ft-sub-more:hover { color: var(--fg); }
.ft-sub .sub-form { flex: none; }
@media (max-width: 860px) { .ft-sub { grid-template-columns: 1fr; gap: 24px; } }

/* ---------- Lab ---------- */
.lab-tabs { display: flex; gap: 6px; margin: 24px var(--pad) 0; }
.lab-tabs a { font-family: var(--sans); font-size: 14px; font-weight: 500; padding: 8px 18px; border-radius: 999px; border: 1px solid var(--line); color: rgba(255,255,255,.75); transition: all .25s var(--ease); }
.lab-tabs a:hover { color: #fff; border-color: rgba(255,255,255,.4); }
.lab-tabs a.on { background: #fff; color: #000; border-color: #fff; }
.lab { padding: 32px var(--pad) 120px; }
.lab .filters { margin-bottom: 28px; }
.g-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.g-card { display: grid; gap: 10px; align-content: start; padding: 28px; border-radius: var(--r); background: var(--bg-2); border: 1px solid transparent; transition: border-color .25s, transform .35s var(--ease); }
.g-card:hover { border-color: rgba(255,255,255,.25); transform: translateY(-3px); }
.g-card figure { margin: -28px -28px 8px; aspect-ratio: 16/9; overflow: hidden; border-radius: var(--r) var(--r) 0 0; }
.g-card figure img { width: 100%; height: 100%; object-fit: cover; }
.g-tool, .g-ver { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.g-card h2 { font-family: var(--sans); font-size: clamp(22px, 2vw, 28px); font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; }
.g-sub { color: var(--muted); line-height: 1.6; }
.g-draft { margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--acc); color: var(--on-acc); letter-spacing: 0; text-transform: none; }

.guide { padding: 40px var(--pad) 120px; }
.g-crumb { font-size: 14px; color: var(--muted); }
.g-crumb a:hover { color: var(--fg); }
.g-head { max-width: 860px; margin: 48px 0 56px; padding-left: calc(220px + 56px); }
.g-head h1 { font-family: var(--sans); font-size: clamp(34px, 4.4vw, 60px); font-weight: 700; line-height: 1.15; letter-spacing: -0.035em; margin-top: 8px; }
.g-lead { font-size: 18px; color: var(--muted); line-height: 1.6; margin-top: 16px; }
.g-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.g-meta span { font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.g-wrap { display: grid; grid-template-columns: 220px minmax(0, 860px); gap: 56px; align-items: start; }
.g-toc { position: sticky; top: 96px; display: grid; gap: 2px; max-height: calc(100vh - 120px); overflow: auto; }
.g-toc a { font-size: 13.5px; line-height: 1.45; padding: 6px 0 6px 12px; border-left: 1px solid var(--line); color: var(--faint); transition: color .2s, border-color .2s; }
.g-toc a:hover, .g-toc a.on { color: var(--fg); border-color: var(--fg); }
.g-body { font-size: 16px; line-height: 1.8; color: rgba(255,255,255,.82); }
.g-body h2 { font-family: var(--sans); font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; letter-spacing: -0.02em; color: #fff; margin: 72px 0 18px; padding-top: 24px; border-top: 1px solid var(--line); scroll-margin-top: 90px; }
.g-body h2:first-child { margin-top: 0; }
.g-body h3 { font-size: 19px; font-weight: 600; color: #fff; margin: 36px 0 12px; }
.g-body p { margin-bottom: 14px; }
.g-body ul { margin: 0 0 16px 1.2em; } .g-body li { margin-bottom: 6px; }
.g-body blockquote { margin: 20px 0; padding: 14px 18px; border-left: 2px solid var(--acc); background: var(--bg-2); color: var(--fg); }
.g-body code { font-family: var(--code); font-size: .88em; padding: 1px 6px; border-radius: 6px; background: var(--bg-2); }
.g-body a { text-decoration: underline; text-underline-offset: 3px; }
.g-prompt { margin: 18px 0 24px; }
.g-set { font-family: var(--mono); font-size: 12px; color: var(--faint); margin-bottom: 8px !important; }
.g-prompt .pc-text { max-height: none; }
.g-memo { margin: 24px 0; padding: 20px 22px; border-radius: 14px; border: 1px solid rgba(255,255,255,.18); background: linear-gradient(135deg, rgba(200,255,46,.08), rgba(255,255,255,.02)); }
.g-memo .lbl { color: var(--acc); }
.g-memo p:last-child, .g-memo ul:last-child { margin-bottom: 0; }
.g-row { display: grid; gap: 12px; margin: 20px 0 28px; } .g-row.n2 { grid-template-columns: 1fr 1fr; } .g-row.n3 { grid-template-columns: repeat(3, 1fr); }
.g-row img { width: 100%; border-radius: 10px; } .g-row figcaption { font-size: 12px; color: var(--faint); margin-top: 6px; }
@media (max-width: 960px) { .g-wrap { grid-template-columns: 1fr; } .g-toc { display: none; } .g-head { padding-left: 0; } }
@media (max-width: 640px) { .g-row.n2, .g-row.n3 { grid-template-columns: 1fr; } }

/* 프롬프트 분석 카드: 한 줄 전체, 원작 | 분석·원문/한글 비교 */
.pc.has-study { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.pc.has-study .pc-media { aspect-ratio: auto; height: 100%; min-height: 420px; }
.pc.has-study .pc-body { padding: 28px 30px 30px; gap: 16px; }
.tag.study { background: var(--acc); color: var(--on-acc); }
.ps { padding: 18px 20px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.ps .lbl { color: var(--acc); }
.ps-point { font-size: 16px; line-height: 1.65; color: var(--fg); }
.ps-keys { list-style: none; display: grid; gap: 10px; margin-top: 14px; }
.ps-keys li { display: grid; grid-template-columns: 22px 1fr; column-gap: 10px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.ps-keys li::before { content: attr(data-n); grid-row: span 2; width: 22px; height: 22px; border-radius: 50%; background: var(--acc); color: var(--on-acc); font: 600 12px/22px var(--mono); text-align: center; }
.ps-keys b { color: var(--fg); font-weight: 600; }
.ps-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ps-lang { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--faint); margin-bottom: 6px; }
.ps-compare .pc-text { max-height: 360px; }
.pc-text mark { background: rgba(200, 255, 46, .22); color: #fff; border-radius: 3px; padding: 0 2px; }
.pc-text mark::before { content: attr(data-n); display: inline-block; margin-right: 4px; padding: 0 5px; border-radius: 999px; background: var(--acc); color: var(--on-acc); font-size: 10px; line-height: 15px; vertical-align: 1px; }
@media (max-width: 1100px) { .pc.has-study { grid-template-columns: 1fr; } .pc.has-study .pc-media { min-height: 0; aspect-ratio: 16/9; } }
@media (max-width: 700px) { .ps-compare { grid-template-columns: 1fr; } }

/* Lab 피드 */
.lf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; }
.lf { display: grid; gap: 12px; align-content: start; padding: 24px 24px 22px; border-radius: var(--r); background: var(--bg-2); border: 1px solid transparent; transition: border-color .25s, transform .35s var(--ease); }
.lf:hover { border-color: rgba(255,255,255,.25); transform: translateY(-3px); }
.lf[hidden] { display: none; }
.lf-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--faint); text-transform: uppercase; }
.lf-kind { padding: 2px 9px; border-radius: 999px; background: #fff; color: #000; font-weight: 600; }
.lf-guide .lf-kind { background: var(--acc); color: var(--on-acc); }
.lf-scrap .lf-kind { background: transparent; color: var(--fg); border: 1px solid var(--line); }
.lf-study { padding: 2px 8px; border-radius: 999px; border: 1px solid var(--acc); color: var(--acc); text-transform: none; letter-spacing: 0; }
.lf h2 { font-family: var(--sans); font-size: 20px; font-weight: 600; line-height: 1.35; letter-spacing: -0.02em; }
.lf-note { font-size: 14px; line-height: 1.6; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lf-note b { color: var(--acc); font-weight: 600; margin-right: 4px; }
.lf-go { font-size: 13px; color: var(--faint); }
.lf:hover .lf-go { color: var(--fg); }

/* 가이드 표 */
.g-table { margin: 18px 0 28px; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.g-table table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.55; }
.g-table th { text-align: left; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); padding: 12px 14px; background: rgba(255,255,255,.03); border-bottom: 1px solid var(--line); white-space: nowrap; }
.g-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; color: rgba(255,255,255,.8); }
.g-table tr:last-child td { border-bottom: 0; }
.g-table td:first-child { color: #fff; font-weight: 600; white-space: nowrap; }
.g-table td code { cursor: copy; color: #fff; background: rgba(200, 255, 46, .16); white-space: nowrap; }
.g-table td code.copied { background: var(--acc); color: var(--on-acc); }
.g-table table { table-layout: fixed; min-width: 640px; }
.g-table th:nth-child(1), .g-table td:nth-child(1) { width: 17%; white-space: normal; }
.g-table th:nth-child(2), .g-table td:nth-child(2) { width: 37%; }
.g-table td code { white-space: normal; word-break: break-word; display: inline; line-height: 1.7; }

/* 이미지 팝업: 설명 · 유의 사항 */
.lb-desc { font-size: 14px; line-height: 1.7; color: var(--muted); }
.lb-notice { font-size: 12.5px; line-height: 1.7; color: var(--faint); border-top: 1px solid var(--line); padding-top: 12px; }
.lb-notice summary { cursor: pointer; font-weight: 600; color: var(--muted); }
.lb-notice p { margin-top: 8px; }

/* 첫 화면 라벨 — 고정폭 대신 SUIT */
.lead-kick { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .16em; color: var(--muted); }

/* 로고 — junto.kr 과 같은 글꼴 규칙: SUIT 900, 소문자, 좁은 자간, 라임 점 */
.mark { display: inline-flex; align-items: flex-end; gap: 3px; font-size: 26px; font-weight: 900; letter-spacing: -0.04em; line-height: 1; }
.mark .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--acc); margin-bottom: 4px; }
.ft-word { font-weight: 900; letter-spacing: -0.05em; display: flex; align-items: flex-end; gap: .03em; }
.ft-word .dot { width: .22em; height: .22em; border-radius: 50%; background: var(--acc); margin-bottom: .02em; flex: none; }
.ft-word { font-size: clamp(44px, 14.5vw, 280px); }
.ft-word .dot { display: inline-block; margin: 0 .02em .02em; }

/* 뉴스레터 — 입력칸은 줄이고, 구독 버튼은 크게·라임으로 */
.sub-row { align-items: stretch; gap: 10px; }
.sub-row input { flex: 0 1 340px; }
.sub-row button { flex: none; font-size: 17px; font-weight: 700; padding: 18px 40px; background: var(--acc); color: var(--on-acc); box-shadow: 0 0 0 0 rgba(200,255,46,.5), 0 8px 30px rgba(200,255,46,.25); animation: sub-pulse 2.6s ease-out infinite; transition: transform .2s, background .2s; }
.sub-row button:hover { background: #fff; color: #000; transform: translateY(-2px); animation: none; }
@keyframes sub-pulse { 0% { box-shadow: 0 0 0 0 rgba(200,255,46,.45), 0 8px 30px rgba(200,255,46,.25); } 70%, 100% { box-shadow: 0 0 0 14px rgba(200,255,46,0), 0 8px 30px rgba(200,255,46,.25); } }
@media (prefers-reduced-motion: reduce) { .sub-row button { animation: none; } }
@media (max-width: 560px) { .sub-row input { flex: 1 1 auto; } }

/* 상단 메뉴 — 대문자, 감싼 칸에 junto.kr 박스 라인(흰색 40%, 1px) */
.gnb { border: 1px solid rgba(255,255,255,.4); }
.gnb a { text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }

/* 소개 영문 제목 — 작업 제목과 같은 세리프 */
.lead-id { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; }

/* 언어 선택 — 한국어 / English / 日本語 (영어·일본어는 준비 중) */
.lang-wrap { position: relative; }
.lang { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: inherit; opacity: .85; }
.lang:hover, .lang[aria-expanded="true"] { opacity: 1; }
.lang-menu { position: absolute; top: calc(100% + 12px); right: 0; z-index: 60; min-width: 150px; list-style: none; margin: 0; padding: 6px; border-radius: 14px; background: #111; border: 1px solid rgba(255,255,255,.4); opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .18s, transform .18s; }
.lang-wrap.open .lang-menu { opacity: 1; transform: none; pointer-events: auto; }
.lang-menu a, .lang-menu span { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; font-size: 14px; font-weight: 600; color: #fff; white-space: nowrap; }
.lang-menu a.on { background: #C8FF2E; color: #0A0A0A; }
.lang-menu span { color: rgba(255,255,255,.45); cursor: default; }
.lang-menu small { font-size: 11px; font-weight: 500; }
.hd-r { display: flex; align-items: center; gap: 18px; }

/* 첫 화면 작업 무대 — 흘러가는 띠 대신, 한 장씩 와이프로 열리며 줌아웃·캡션·진행 막대 */
.lead-stage { position: relative; display: block; aspect-ratio: 16 / 7.2; border-radius: 22px; background: #000; perspective: 1400px; }
.lead-stage .ls-shot { position: absolute; inset: 0; margin: 0; overflow: hidden; clip-path: inset(0 0 0 100%); z-index: 1; transition: clip-path 1.2s cubic-bezier(.77,0,.18,1); }
.lead-stage .ls-shot img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.22); filter: brightness(.9); transition: transform 6s cubic-bezier(.2,.6,.2,1), filter 1.2s; }
.lead-stage .ls-shot.on { clip-path: inset(0 0 0 0); z-index: 3; }
.lead-stage .ls-shot.on img { transform: scale(1.02); }
.lead-stage .ls-shot.out { clip-path: inset(0); z-index: 2; }
.lead-stage .ls-shot.out img { transform: scale(.92) translateX(-4%); filter: brightness(.35); transition: transform 1.2s cubic-bezier(.77,0,.18,1), filter 1.2s; }
.lead-stage .ls-shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.65)); pointer-events: none; }
.ls-cap { position: absolute; left: clamp(20px, 3vw, 44px); bottom: clamp(44px, 5vw, 64px); z-index: 2; text-align: left; display: grid; gap: 6px; }
.ls-cap small, .ls-cap b { display: block; overflow: hidden; }
.ls-cap span { display: inline-block; transform: translateY(110%); transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.ls-cap small { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--acc); }
.ls-cap b { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2.6vw, 40px); line-height: 1.15; color: #fff; }
.ls-shot.on .ls-cap span { transform: none; transition-delay: .55s; }
.ls-shot.on .ls-cap b span { transition-delay: .68s; }
.ls-bar { position: absolute; left: clamp(20px, 3vw, 44px); right: clamp(20px, 3vw, 44px); bottom: clamp(18px, 2vw, 26px); z-index: 5; display: flex; gap: 6px; }
.ls-bar i { flex: 1; height: 2px; background: rgba(255,255,255,.25); position: relative; overflow: hidden; }
.ls-bar i::after { content: ""; position: absolute; inset: 0; background: var(--acc); transform: scaleX(0); transform-origin: left; }
.ls-bar i.done::after { transform: scaleX(1); }
.ls-bar i.on::after { animation: ls-fill var(--ls-dur, 4.2s) linear forwards; }
.lead-stage.paused .ls-bar i.on::after { animation-play-state: paused; }
@keyframes ls-fill { to { transform: scaleX(1); } }
.lead-stage .stage-tilt { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
@media (max-width: 760px) { .lead-stage { aspect-ratio: 4 / 3; } }
@media (prefers-reduced-motion: reduce) { .lead-stage .ls-shot, .lead-stage .ls-shot img, .ls-cap span { transition: none; } }
.ls-shot.out .ls-cap span { transform: translateY(-110%); transition: transform .45s cubic-bezier(.7,0,.3,1); }
.ls-shot:not(.on):not(.out) .ls-cap { visibility: hidden; }

/* Lab · Prompt — 가이드와 같은 문서 구조 (왼쪽 목차, 오른쪽 본문) */
.plab { padding-top: 24px; }
.pl-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-family: var(--mono); font-size: 12px; color: var(--faint); margin: -6px 0 22px !important; }
.pl-meta a { color: var(--muted); border-bottom: 1px solid var(--line); }
.pl-media { margin: 0 0 24px; border-radius: 16px; overflow: hidden; }
.pl-media > * { margin: 0 !important; }
.pl-keys { list-style: none; padding: 0; margin: 14px 0 24px; display: grid; gap: 10px; }
.pl-keys li { position: relative; padding-left: 34px; }
.pl-keys li::before { content: attr(data-n); position: absolute; left: 0; top: 4px; width: 22px; height: 22px; border-radius: 50%; background: var(--acc); color: var(--on-acc); font: 600 12px/22px var(--mono); text-align: center; }
.pl-keys b { color: #fff; }
.pl-orig { margin-top: 8px; font-size: 14px; }
.pl-orig a { color: var(--muted); border-bottom: 1px solid var(--line); }
@media (max-width: 900px) { .plab .g-wrap { grid-template-columns: 1fr; } .plab .g-toc { display: none; } }

/* 로고 글꼴 — Outfit Medium (junto.kr 과 같음) */
.mark, .ft-word { font-family: "Outfit", var(--sans); font-weight: 500; }
.mark { letter-spacing: -0.03em; }

/* 상단바 — junto.kr 기준으로 맞춤: 높이 72, 좌우 40, 로고 26, 메뉴 15/600, 버튼은 테두리형 13/600 */
.hd { height: 72px; padding: 0 clamp(16px, 4vw, 40px); }
.mark { font-size: 26px; }
.gnb a { font-size: 15px; font-weight: 600; letter-spacing: .04em; padding: 7px 18px; }
.cta { font-size: 13px; font-weight: 600; letter-spacing: 0; padding: 6px 12px; border-radius: 999px; border: 1px solid currentColor; background: transparent; color: #fff; opacity: .8; text-transform: none; }
.cta:hover { opacity: 1; background: transparent; color: #fff; }
.hd-r { gap: 16px; }

/* 숫자·라벨 — 고정폭 대신 SUIT, 숫자는 같은 폭으로 줄 맞춤 */
body { font-variant-numeric: tabular-nums; }

/* View index 링크 — 라임 */
.sh .link { color: var(--acc); }
.sh .link:hover { color: #fff; }

/* 하단 뉴스레터 라벨 — 라임 */
.ft-sub .lbl { color: var(--acc); }

/* 상단 3개 메뉴 바 — 한 단계 작게 */
.gnb { padding: 3px; gap: 2px; }
.gnb a { font-size: 13px; letter-spacing: .05em; padding: 6px 14px; }
.lang-wrap { display: flex; align-items: center; }

p, li, dd { text-wrap: pretty; }

/* Lab 피드 가이드 카드 — 위에 썸네일, 마우스를 올리면 살짝 확대 */
.lf-img { display: block; margin: -24px -24px 6px; aspect-ratio: 16 / 8; overflow: hidden; border-radius: var(--r) var(--r) 0 0; background: #111; }
.lf-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.lf:hover .lf-img img { transform: scale(1.05); }

/* 뉴스레터 아래 고정 코너: TREND SHORTS · AI PROMPT (src/newsletter.mjs corners) — 밝은/어두운 바탕 모두 currentColor 기준 */
.nl-corner { margin-top: 64px; padding-top: 32px; border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.nl-c-lbl { font-size: 12px; font-weight: 800; letter-spacing: .16em; margin: 0 0 6px; }
.nl-c-title { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 22px; }
.nl-c-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.nl-short { display: grid; gap: 6px; color: inherit; text-decoration: none; }
.nl-short-img { position: relative; display: block; aspect-ratio: 9/16; border-radius: 10px; overflow: hidden; background: color-mix(in srgb, currentColor 8%, transparent); }
.nl-short-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s; }
.nl-short:hover img { transform: scale(1.04); }
.nl-short-img em { position: absolute; left: 8px; top: 8px; font-style: normal; font-size: 11px; padding: 3px 8px; border-radius: 99px; background: rgba(0,0,0,.6); color: #fff; }
.nl-short b { font-size: 15px; line-height: 1.4; }
.nl-short > span:last-child { font-size: 13px; line-height: 1.55; opacity: .7; }
.nl-c-list { display: grid; gap: 16px; }
.nl-prompt { display: grid; grid-template-columns: 180px 1fr; gap: 20px; padding: 18px; border-radius: 12px; border: 1px solid color-mix(in srgb, currentColor 18%, transparent); color: inherit; text-decoration: none; transition: border-color .3s; }
.nl-prompt:hover { border-color: currentColor; }
.nl-prompt-img { border-radius: 8px; overflow: hidden; aspect-ratio: 4/3; }
.nl-prompt-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nl-prompt-txt { display: grid; gap: 6px; align-content: start; }
.nl-prompt-txt small { font-size: 12px; opacity: .6; }
.nl-prompt-txt b { font-size: 17px; line-height: 1.4; }
.nl-prompt-txt > span { font-size: 14px; line-height: 1.6; opacity: .8; }
.nl-prompt-txt code { justify-self: start; font: 12px/1.5 Menlo, monospace; padding: 2px 8px; border-radius: 4px; background: color-mix(in srgb, currentColor 8%, transparent); }
.nl-prompt-txt em { font-style: normal; font-size: 13px; font-weight: 700; margin-top: 4px; }
@media (max-width: 640px) { .nl-c-grid { grid-template-columns: repeat(2, 1fr); } .nl-prompt { grid-template-columns: 1fr; } }
.nl-c-lead { font-size: 15px; line-height: 1.7; opacity: .75; margin: -10px 0 22px; }