/* ==========================================================================
   ATLAS 기획실 (ATLAS STUDIO) — 와인 버건디 · 로즈골드 · 금박 · 제도판
   어두운 제도 필름 위에 로즈골드 선으로 설계도가 그려지는 세계.
   진행 방식 · 이런 분께 · FAQ 는 아이보리 제도지로 숨을 고른다.
   ========================================================================== */
.world-studio {
  --rose: #f2cdb8; --rose-2: #d9a48d; --rose-3: #e0687f; --gilt: #f0d48a;
  --film: #2a0e15; --film-2: #1e0a0f; --wine-ink: #8c2a3e;
}
.world-studio .sec-title { font-family: var(--f-serif); font-weight: 700; letter-spacing: -.04em; line-height: 1.3; }
.world-studio .tone-ivory { --accent: #8c2a3e; --accent-2: #6b1f31; --label-c: #8c2a3e; --glow: rgba(140, 42, 62, .3); }
.st-em { color: var(--rose); }
.tone-ivory .st-em { color: var(--wine-ink); }

/* 로즈골드 박 글자 */
.foil-rose { background-image: linear-gradient(110deg, #b98270 0%, #f6dccd 26%, #d9a48d 44%, #f0d48a 60%, #c88f78 78%, #f6dccd 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: foilShift 7s ease-in-out infinite alternate; }

/* 상단 띠 · 헤더 (아이보리 구간 위에서는 밝은 유리) */
.world-studio .topline { background: var(--film-2); color: #cdb8a6; border-bottom: 1px solid rgba(242, 205, 184, .08); }
.world-studio .topline__static b { color: var(--rose); font: 600 11.5px/1.2 var(--f-mark); letter-spacing: .16em; align-self: center; }
.st-top--short { display: none; }
@media (max-width: 760px) { .st-top--long { display: none; } .st-top--short { display: inline; } }

/* 도면 번호 (섹션 오른쪽 위) */
.st-sheet { position: absolute; z-index: 2; top: clamp(22px, 3vw, 36px); right: max(var(--gut-r), calc((100% - var(--maxw)) / 2)); display: inline-flex; align-items: center; gap: 10px; font-size: 10.5px; line-height: 1; letter-spacing: .22em; color: var(--muted); opacity: .7; pointer-events: none; }
.st-sheet i { width: 22px; height: 1px; background: currentColor; opacity: .6; }

/* ==========================================================================
   1. 히어로
   ========================================================================== */
/* 배경 빛은 정지된 그라데이션으로 (흐림 필터 애니메이션 없이 가볍게) */
.st-hero { position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(ellipse 52% 62% at 80% 34%, rgba(180, 50, 77, .42), transparent 72%), radial-gradient(ellipse 46% 52% at 6% 96%, rgba(242, 205, 184, .07), transparent 70%), radial-gradient(ellipse 36% 40% at 26% 6%, rgba(240, 212, 138, .07), transparent 70%), var(--bg); }
.st-hero__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(242, 205, 184, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(242, 205, 184, .05) 1px, transparent 1px); background-size: 56px 56px; background-position: -1px -1px; -webkit-mask-image: radial-gradient(ellipse 70% 80% at 72% 42%, #000 8%, transparent 70%); mask-image: radial-gradient(ellipse 70% 80% at 72% 42%, #000 8%, transparent 70%); }
.st-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 220px; background: linear-gradient(180deg, transparent, rgba(30, 10, 15, .55)); pointer-events: none; z-index: -1; }
.st-hero__in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: clamp(32px, 4.6vw, 76px); align-items: center; padding-top: clamp(28px, 3.6vw, 52px); padding-bottom: clamp(44px, 5vw, 72px); }

.st-kicker { display: inline-flex; align-items: center; gap: 12px; padding: 9px 14px 9px 12px; margin-bottom: clamp(20px, 2.4vw, 30px); font: 600 11.5px/1 var(--f-mark); letter-spacing: .26em; text-transform: uppercase; color: var(--rose); border: 1px solid rgba(242, 205, 184, .24); border-radius: 2px; background: rgba(30, 10, 15, .4); }
.st-kicker__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rose-3); animation: stPulse 2.4s ease-out infinite; }
@keyframes stPulse { 0% { box-shadow: 0 0 0 0 rgba(224, 104, 127, .6); } 70%, 100% { box-shadow: 0 0 0 9px rgba(224, 104, 127, 0); } }

.st-h1 { color: var(--cream); }
.st-h1__l1 { display: block; font: 900 clamp(44px, 5.5vw, 80px)/1.05 var(--f-body); letter-spacing: -.055em; }
.st-h1__l2 { display: block; margin-top: clamp(14px, 1.6vw, 22px); font: 600 clamp(25px, 2.6vw, 38px)/1.32 var(--f-serif); letter-spacing: -.035em; color: var(--cream); }
.st-lead { margin-top: clamp(20px, 2.2vw, 28px); max-width: 31em; font-size: clamp(16px, 1.22vw, 18px); line-height: 1.85; color: var(--cream-2); }
.st-hero__cta { margin-top: clamp(26px, 3vw, 36px); }
.st-btn-down:hover .ico { transform: translateY(3px); }
.st-facts { display: flex; margin-top: clamp(28px, 3.4vw, 44px); border-top: 1px solid var(--line); max-width: 520px; }
.st-facts li { flex: 1 1 0; min-width: 0; display: grid; gap: 4px; padding: 16px 16px 0 0; }
.st-facts li + li { padding-left: 18px; border-left: 1px solid var(--line); }
.st-facts b { font: 600 clamp(19px, 1.7vw, 23px)/1.2 var(--f-serif); color: #f6dccd; letter-spacing: -.02em; }
.st-facts span { font-size: 13px; line-height: 1.45; color: var(--muted); }

/* ---------- 설계도 ---------- */
.bp { position: relative; margin: 0; will-change: transform; }
.bp__paper { position: relative; isolation: isolate; }
.bp__paper::before, .bp__paper::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 6px; background: #2a0d14; border: 1px solid rgba(242, 205, 184, .12); box-shadow: 0 24px 50px -24px rgba(8, 2, 4, .7); }
.bp__paper::before { transform: rotate(-3.4deg) translate(-1.6%, 2.2%); opacity: .75; }
.bp__paper::after { transform: rotate(2.4deg) translate(1.8%, 1.4%); opacity: .5; }
.bp__svg { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 46px 90px -30px rgba(8, 2, 4, .85), 0 0 0 1px rgba(242, 205, 184, .16), inset 0 1px 0 rgba(255, 255, 255, .04); }
.bp-sheet { fill: #2b0e15; }
.bp-frame { fill: none; stroke: rgba(242, 205, 184, .22); stroke-width: 1; }
.bp-reg { fill: none; stroke: var(--rose); stroke-width: 1.4; opacity: .55; }
.bp-edge { font: 500 9px/1 var(--f-mono); fill: rgba(242, 205, 184, .45); letter-spacing: .12em; }

.bp-ink { transition: opacity .8s var(--ease); }
.bp.is-fading .bp-ink { opacity: 0; }

/* 메모 */
.bp-note { transform-box: fill-box; transform-origin: 50% 0%; transition: opacity .5s var(--ease), transform .8s var(--ease-out); }
.bp-note__shadow { fill: rgba(8, 2, 4, .38); }
.bp-note__paper { fill: #f3e6d2; }
.bp-note__tape { fill: rgba(242, 205, 184, .6); }
.bp-note__k { font: 600 9.5px/1 var(--f-mono); letter-spacing: .14em; fill: var(--wine-ink); }
.bp-note__t { font: 600 17px/1 var(--f-serif); letter-spacing: -.02em; fill: #2b0f15; }

/* 상자 */
.bp-fillr { fill: rgba(242, 205, 184, .045); transition: opacity .6s var(--ease) .3s; }
.bp-draw { fill: none; stroke: var(--rose); stroke-width: 1.3; stroke-dasharray: 1 2; stroke-dashoffset: 0; transition: stroke-dashoffset .9s var(--ease); }
.bp-corner { stroke: var(--gilt); stroke-width: 1.6; transition-delay: .5s; }
.bp-box text { transition: opacity .5s var(--ease), transform .5s var(--ease); }
.bp-no { font: 600 10.5px/1 var(--f-mono); fill: var(--gilt); letter-spacing: .16em; transition-delay: .3s !important; }
.bp-t { font: 700 21px/1 var(--f-body); fill: #f6ead9; letter-spacing: -.03em; transition-delay: .4s !important; }
.bp-sub { font: 500 12.5px/1 var(--f-body); fill: #cdb8a6; letter-spacing: -.01em; transition-delay: .5s !important; }
.bp-ann { font: 500 10px/1 var(--f-mono); fill: #e9a995; letter-spacing: .08em; transition: opacity .5s var(--ease) .75s; }

/* 연결선 · 화살표 */
.bp-line { fill: none; stroke: var(--rose); stroke-width: 1.3; stroke-dasharray: 1 2; stroke-dashoffset: 0; opacity: .9; transition: stroke-dashoffset .55s var(--ease); }
.bp-arrow { fill: none; stroke: var(--rose); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: opacity .25s var(--ease) .45s; }

/* 일정 치수선 */
.bp-dimline { fill: none; stroke: var(--gilt); stroke-width: 1.2; stroke-dasharray: 1 2; stroke-dashoffset: 0; transition: stroke-dashoffset .9s var(--ease); }
.bp-tick { fill: none; stroke: var(--gilt); stroke-width: 1.2; }
.bp-dim { font: 600 11.5px/1 var(--f-body); fill: #f2cdb8; letter-spacing: -.01em; }
.bp-tick, .bp-dim { transition: opacity .4s var(--ease); transition-delay: calc(var(--i) * .14s + .25s); }

/* 도장 */
.bp-stamp { transform-box: fill-box; transform-origin: 50% 50%; transition: opacity .2s var(--ease), transform .5s cubic-bezier(.3, 1.7, .5, 1); }
.bp-stamp__o { fill: rgba(30, 10, 15, .55); stroke: url(#bpStamp); stroke-width: 2.4; }
.bp-stamp__i { fill: rgba(224, 104, 127, .1); stroke: url(#bpStamp); stroke-width: 1; stroke-dasharray: 2 3; }
.bp-stamp__k { font: 700 8.5px/1 var(--f-mark); letter-spacing: .26em; fill: var(--rose); }
.bp-stamp__t { font: 800 17px/1 var(--f-body); fill: url(#bpStamp); letter-spacing: .02em; }

/* 제도 커서 */
.bp-pen { opacity: 0; transition: transform .6s var(--ease-out), opacity .4s var(--ease); pointer-events: none; }
.bp.has-pen:not(.is-done) .bp-pen { opacity: 1; }
.bp-pen__ring { fill: rgba(240, 212, 138, .08); stroke: var(--gilt); stroke-width: 1.2; transform-box: fill-box; transform-origin: 50% 50%; animation: penPulse 1.3s ease-in-out infinite; }
.bp-pen__dot { fill: #fff3e8; }
.bp-pen__x { fill: none; stroke: var(--gilt); stroke-width: 1.2; }
.bp-pen__t { font: 500 9px/1 var(--f-mono); fill: var(--gilt); letter-spacing: .08em; }
@keyframes penPulse { 50% { transform: scale(1.35); opacity: .55; } }

/* 표제란 */
.bp-title rect { fill: rgba(30, 10, 15, .6); stroke: rgba(242, 205, 184, .35); stroke-width: 1; }
.bp-title path { fill: none; stroke: rgba(242, 205, 184, .35); stroke-width: 1; }
.bp-title__k { font: 500 8.5px/1 var(--f-mono); fill: #cdb8a6; letter-spacing: .1em; }
.bp-title__v { font: 700 11px/1 var(--f-mono); fill: #f6ead9; letter-spacing: .12em; }
.bp-title__v--s { font-weight: 500; font-size: 9.5px; fill: #cdb8a6; }
.bp-title__ex { font: 700 15px/1 var(--f-body); fill: var(--rose-3); letter-spacing: .08em; }

/* 그리는 중 (JS가 is-live를 붙였을 때만 숨긴다 — 기본은 완성된 설계도) */
.bp.is-live .bp-note:not(.on) { opacity: 0; transform: translateY(-18px) rotate(-3deg) scale(.95); }
.bp.is-live .bp-box:not(.on) .bp-draw { stroke-dashoffset: 1; }
.bp.is-live .bp-box:not(.on) .bp-fillr { opacity: 0; }
.bp.is-live .bp-box:not(.on) text { opacity: 0; transform: translateY(6px); }
.bp.is-live .bp-ann:not(.on) { opacity: 0; }
.bp.is-live .bp-link:not(.on) .bp-line { stroke-dashoffset: 1; }
.bp.is-live .bp-link:not(.on) .bp-arrow { opacity: 0; }
.bp.is-live .bp-time:not(.on) .bp-dimline { stroke-dashoffset: 1; }
.bp.is-live .bp-time:not(.on) .bp-tick, .bp.is-live .bp-time:not(.on) .bp-dim { opacity: 0; }
.bp.is-live .bp-stamp:not(.on) { opacity: 0; transform: scale(1.8) rotate(8deg); }
.bp.no-tr, .bp.no-tr * { transition: none !important; }

/* 캡션 */
.bp__cap { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.bp__state { display: inline-flex; align-items: center; gap: 8px; flex: none; font: 700 11px/1 var(--f-mono); letter-spacing: .2em; color: var(--gilt); }
.bp__st { font-weight: 700; color: var(--gilt); }
.bp__state i { width: 7px; height: 7px; border-radius: 50%; background: var(--rose-3); animation: stPulse 1.6s ease-out infinite; }
.bp__st--b { display: none; }
.bp.is-done .bp__st--a { display: none; }
.bp.is-done .bp__st--b { display: inline; }
.bp.is-done .bp__state i { background: #b9e3b0; animation: none; box-shadow: 0 0 10px rgba(185, 227, 176, .6); }
.bp__txt { text-align: right; }

/* 기획 용어 띠 */
.st-band { position: relative; z-index: 1; padding-block: 17px; border-top: 1px solid var(--line); background: rgba(30, 10, 15, .32); }
.st-band__i { display: inline-flex; align-items: center; gap: 30px; padding-right: 30px; font: 500 clamp(15px, 1.15vw, 17px)/1 var(--f-serif); color: var(--cream-2); letter-spacing: -.01em; white-space: nowrap; }
.st-band__i::after { content: ""; width: 5px; height: 5px; transform: rotate(45deg); background: var(--rose-2); opacity: .85; }

/* ==========================================================================
   2. 막막함 — 고민에 금선을 긋고, 답을 적는다
   ========================================================================== */
.st-pain.tone-studio { --bg: var(--film); }
.st-pain__in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 100px); align-items: start; }
.st-pain__head { align-self: stretch; }
.st-pain__sticky { position: sticky; top: calc(var(--hdr-h) + 104px); display: grid; gap: 20px; }
.st-pain__sticky .sec-lead { max-width: 30em; }
.st-pain__list { border-top: 1px solid var(--line); }
.st-pain__i { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 0 14px; padding: clamp(24px, 2.6vw, 34px) 0; border-bottom: 1px solid var(--line); }
.st-pain__no { padding-top: .8em; font: 600 12px/1 var(--f-mono); letter-spacing: .16em; color: var(--gilt); }
.st-pain__q { font: 600 clamp(19px, 1.85vw, 25px)/1.5 var(--f-serif); letter-spacing: -.035em; }
.st-pain__qt { color: rgba(243, 230, 210, .74); background-image: linear-gradient(90deg, rgba(217, 164, 141, .85), rgba(240, 212, 138, .9)); background-repeat: no-repeat; background-position: 0 64%; background-size: 100% 1.5px; transition: background-size 1s var(--ease) .1s, color .8s var(--ease) .3s; }
.st-pain__a { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; font-size: clamp(15px, 1.12vw, 16.5px); font-weight: 500; line-height: 1.7; color: var(--rose); transition: opacity .6s var(--ease) .7s, transform .6s var(--ease) .7s; }
.st-pain__a .ico { flex: none; width: 18px; height: 18px; margin-top: 4px; color: var(--gilt); }
.st-pain__list.is-live .st-pain__i:not(.is-on) .st-pain__qt { background-size: 0% 1.5px; color: var(--cream); }
.st-pain__list.is-live .st-pain__i:not(.is-on) .st-pain__a { opacity: 0; transform: translateX(-10px); }

/* ==========================================================================
   3. 기획 영역 카드
   ========================================================================== */
.st-plan__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 20px); }
.st-card { display: flex; flex-direction: column; padding: clamp(22px, 2.1vw, 30px); }
.st-card__main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.st-card--wide { grid-column: span 2; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(20px, 2.4vw, 34px); background: linear-gradient(135deg, rgba(242, 205, 184, .1), rgba(242, 205, 184, .02) 55%), var(--card-bg); border-color: rgba(242, 205, 184, .2); }
.st-card__top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 22px; }
.st-card__ic { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 2px; border: 1px solid rgba(242, 205, 184, .22); background: radial-gradient(circle at 30% 20%, rgba(242, 205, 184, .16), rgba(242, 205, 184, .02) 70%); }
.st-card__no { font: 600 11px/1 var(--f-mono); letter-spacing: .18em; color: var(--muted); }
.st-card .card__t { font-size: clamp(18px, 1.35vw, 20px); }
.st-card .card__d { font-size: 14.5px; line-height: 1.75; }
.st-card__out { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.st-card__out li { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 4px 10px; font-size: 12.5px; line-height: 1.3; color: var(--cream-2); border: 1px solid var(--line); border-radius: 2px; background: rgba(30, 10, 15, .35); }
.st-card__out .ico { width: 13px; height: 13px; color: var(--rose-2); }
.st-card__note { display: flex; gap: 8px; margin-top: 14px; font-size: 12.5px; line-height: 1.6; color: var(--muted); }
.st-card__note .ico { width: 15px; height: 15px; margin-top: 2px; color: var(--gilt); }
.st-card__link { display: inline-flex; align-items: center; gap: 6px; width: fit-content; margin-top: auto; padding-top: 20px; font-size: 13.5px; font-weight: 700; color: var(--gilt); }
.st-card__link span { border-bottom: 1px solid rgba(240, 212, 138, .35); padding-bottom: 2px; transition: border-color .2s; }
.st-card__link .ico { width: 15px; height: 15px; transition: transform .2s var(--ease); }
.st-card__link:hover span { border-color: var(--gilt); }
.st-card__link:hover .ico { transform: translate(2px, -2px); }

/* 아이콘 선 (마우스를 올리면 움직인다) */
.si { width: 30px; height: 30px; fill: none; stroke: var(--rose); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.si-a { stroke-dasharray: 1 2; stroke-dashoffset: 0; }
.si-spin, .si-wave, .si-pop { transform-box: fill-box; transform-origin: 50% 50%; }
.si-wave { transform-origin: 0% 100%; }
.si-pop { fill: var(--gilt); stroke: none; }
.st-card:hover .si-a { animation: siDraw 1.1s var(--ease) both; }
.st-card:hover .si-a2 { animation-delay: .12s; }
.st-card:hover .si-a3 { animation-delay: .24s; }
.st-card:hover .si-spin { animation: siSpin 3s linear infinite; }
.st-card:hover .si-wave { animation: siWave .9s ease-in-out infinite alternate; }
.st-card:hover .si-pop { animation: siPop 1.2s ease-in-out infinite; }
.st-card:hover .si-blink { animation: siBlink 1s steps(2) infinite; }
.st-card:hover .si-ring { animation: siRing 1.4s ease-out infinite; }
.st-card:hover .si-ring2 { animation-delay: .25s; }
@keyframes siDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes siSpin { to { transform: rotate(360deg); } }
@keyframes siWave { to { transform: skewY(-9deg) scaleX(1.1); } }
@keyframes siPop { 50% { transform: scale(1.6); opacity: .55; } }
@keyframes siBlink { 50% { opacity: .2; } }
@keyframes siRing { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* 심사위원이 읽는 순서 */
.st-order { position: relative; align-self: stretch; padding: 18px 18px 16px; border: 1px solid var(--line); border-radius: 2px; background: rgba(30, 10, 15, .38); }
.st-order__k { margin-bottom: 12px; font: 600 10.5px/1.3 var(--f-mark); letter-spacing: .2em; color: var(--label-c); }
.st-order__l { position: relative; display: grid; gap: 2px; }
.st-order__l::before { content: ""; position: absolute; left: 20px; top: 16px; bottom: 16px; width: 1px; background: rgba(242, 205, 184, .22); }
.st-order__l li { position: relative; display: flex; align-items: center; gap: 12px; padding: 5px 10px; border-radius: 2px; font-size: 14.5px; font-weight: 600; color: var(--cream-2); animation: ordHi 7.2s var(--ease) infinite; animation-delay: calc(var(--i) * 1.2s); }
.st-order__n { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(242, 205, 184, .35); background: #3a1019; font: 600 10.5px/1 var(--f-mono); color: var(--rose); }
@keyframes ordHi { 0%, 17%, 100% { background: transparent; color: var(--cream-2); } 3%, 14% { background: rgba(242, 205, 184, .11); color: #fff3e8; } }

/* ==========================================================================
   4. 진행 방식 (아이보리 제도지)
   ========================================================================== */
.st-process { overflow: hidden; }
.st-process__paper { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(107, 31, 49, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(107, 31, 49, .055) 1px, transparent 1px); background-size: 28px 28px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent); }
.st-process .wrap { position: relative; }
.st-step .card__t { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.st-step__tag { font: 700 11.5px/1 var(--f-body); font-style: normal; letter-spacing: .02em; padding: 5px 9px; border-radius: 2px; background: var(--wine-ink); color: var(--cream); }
.st-step__k { margin-top: 18px; font: 600 10.5px/1 var(--f-mark); letter-spacing: .2em; color: var(--label-c); }
.st-step__out { display: grid; gap: 7px; margin-top: 10px; padding-top: 12px; border-top: 1px dashed var(--line-2); }
.st-step__out li { display: flex; gap: 8px; font-size: 14px; line-height: 1.55; color: var(--fg-2); }
.st-step__out .ico { flex: none; width: 15px; height: 15px; margin-top: 3px; color: var(--wine-ink); }
.st-process__note { margin-top: clamp(26px, 3vw, 36px); text-align: center; font-size: 13.5px; color: var(--muted); }

/* ==========================================================================
   5. 산출물 — 책상 위의 문서 더미
   ========================================================================== */
.st-docs.tone-studio { --bg: var(--film); }
.st-docs { overflow: hidden; }
.st-docs__in { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
.st-docs__copy { display: grid; gap: 20px; align-content: start; }
.st-docs__list { margin-top: 12px; border-top: 1px solid var(--line); }
.st-docs__list li { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 15px 6px; border-bottom: 1px solid var(--line); transition: background .4s var(--ease), padding .4s var(--ease); }
.st-docs__list li::before { content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; width: 2px; background: var(--gilt); transform: scaleY(0); transition: transform .45s var(--ease); }
.st-docs__list li.is-on { padding-left: 16px; background: linear-gradient(90deg, rgba(242, 205, 184, .09), transparent 75%); }
.st-docs__list li.is-on::before { transform: scaleY(1); }
.st-docs__n { font: 600 11px/1 var(--f-mono); letter-spacing: .1em; color: var(--gilt); }
.st-docs__t b { display: block; font: 700 17px/1.35 var(--f-body); letter-spacing: -.02em; color: var(--cream); }
.st-docs__t small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.st-docs__s { font: 500 10.5px/1 var(--f-mono); letter-spacing: .14em; color: var(--muted); }
.st-docs__list li.is-on .st-docs__s { color: var(--rose); }

.st-stack { position: relative; height: clamp(400px, 40vw, 560px); }
.st-stack__desk { position: absolute; inset: 0 -10% -6%; pointer-events: none; background: radial-gradient(ellipse 52% 50% at 50% 54%, rgba(242, 205, 184, .17), transparent 72%); }
.st-doc { --dw: clamp(210px, 21vw, 300px); position: absolute; left: 50%; top: 50%; width: var(--dw); aspect-ratio: 1 / 1.38; translate: -50% -50%; container-type: inline-size; display: flex; flex-direction: column; padding: clamp(18px, 1.9vw, 26px); border-radius: 3px; color: #2b0f15; background: linear-gradient(160deg, #fcf7ef, #efe3d1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 34px 60px -20px rgba(8, 2, 4, .8), 0 2px 6px rgba(8, 2, 4, .25); transition: transform 1s var(--ease-out), filter .8s var(--ease); isolation: isolate; }
.st-doc::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background-image: var(--grain); opacity: .2; mix-blend-mode: multiply; }
.st-doc[data-p="0"] { z-index: 4; transform: translate(0, 0) rotate(-1.5deg); }
.st-doc[data-p="1"] { z-index: 3; transform: translate(-44%, 6%) rotate(-9deg) scale(.93); filter: brightness(.9); }
.st-doc[data-p="2"] { z-index: 2; transform: translate(44%, 8%) rotate(8deg) scale(.91); filter: brightness(.84); }
.st-doc[data-p="3"] { z-index: 1; transform: translate(4%, -9%) rotate(3deg) scale(.86); filter: brightness(.72); }
.st-doc__head { display: flex; align-items: center; gap: 2.6cqi; padding-bottom: 4.4cqi; border-bottom: 1px solid rgba(107, 31, 49, .18); font: 600 3.7cqi/1 var(--f-mono); letter-spacing: .16em; color: #6b1f31; }
.st-doc__sym { width: 8cqi; height: auto; color: var(--wine-ink); }
.st-doc__head em { margin-left: auto; padding: 1.5cqi 2.4cqi; border: 1px dashed rgba(180, 50, 77, .55); border-radius: 2px; font: 700 3.8cqi/1 var(--f-body); font-style: normal; letter-spacing: .04em; color: #b4324d; }
.st-doc__s { margin-top: 9cqi; font: 600 3.8cqi/1 var(--f-mono); letter-spacing: .22em; color: var(--wine-ink); }
.st-doc__t { margin-top: 3.4cqi; font: 700 10.5cqi/1.15 var(--f-serif); letter-spacing: -.05em; color: #2b0f15; }
.st-doc__chart { margin-top: 7cqi; padding: 4cqi; border: 1px solid rgba(107, 31, 49, .14); border-radius: 2px; background: rgba(255, 255, 255, .4); }
.st-doc__chart svg { display: block; width: 100%; height: auto; }
.st-doc__lines { display: grid; gap: 3.2cqi; margin-top: 7cqi; }
.st-doc__lines i { display: block; width: var(--w); height: 2.2cqi; border-radius: 2px; background: rgba(43, 15, 21, .13); }
.st-doc__foot { display: flex; justify-content: space-between; margin-top: auto; padding-top: 4cqi; border-top: 1px solid rgba(107, 31, 49, .14); font: 500 3.3cqi/1 var(--f-mono); letter-spacing: .14em; color: rgba(43, 15, 21, .5); }
.dc-axis { stroke: rgba(43, 15, 21, .3); stroke-width: 1; }
.dc-bar { fill: rgba(140, 42, 62, .32); }
.dc-bar--hi { fill: var(--wine-ink); }
.dc-trend { fill: none; stroke: #c8a96a; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dc-ring { fill: none; stroke: rgba(140, 42, 62, .16); stroke-width: 8; }
.dc-arc { fill: none; stroke: var(--wine-ink); stroke-width: 8; transform: rotate(-90deg); transform-origin: 28px 27px; }
.dc-arc--2 { stroke: #c8a96a; }
.dc-slice { fill: var(--wine-ink); }
.dc-ln { stroke: rgba(43, 15, 21, .2); stroke-width: 5; stroke-linecap: round; }

/* ==========================================================================
   6. 이런 분께
   ========================================================================== */
.st-who__c { display: flex; flex-direction: column; }
.st-who__no { position: absolute !important; top: 24px; right: 24px; font: 600 11px/1 var(--f-mono); letter-spacing: .16em; color: var(--muted); }
.st-who .card__ico { border-radius: 2px; }
.st-who__li { display: grid; gap: 6px; margin-top: auto; padding-top: 16px; }
.st-who .card__d { margin-bottom: 16px; }
.st-who__li { border-top: 1px dashed var(--line-2); }
.st-who__li li { display: flex; gap: 8px; font-size: 14px; line-height: 1.55; color: var(--fg-2); }
.st-who__li .ico { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--wine-ink); }

/* ==========================================================================
   7. 왜 아틀라스 — 기획에서 운영까지 이어지는 선
   ========================================================================== */
.st-relay { --g: clamp(12px, 1.6vw, 20px); position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g); padding-top: 22px; }
.st-relay::before, .st-relay::after { content: ""; position: absolute; top: 21px; height: 2px; left: calc((100% - 3 * var(--g)) / 8); right: calc((100% - 3 * var(--g)) / 8); border-radius: 2px; pointer-events: none; }
.st-relay::before { background: linear-gradient(90deg, #e0687f, #a08bff 36%, #ff5a36 66%, #2fd3be); opacity: .5; }
.st-relay::after { z-index: 2; background: linear-gradient(90deg, transparent 0 42%, rgba(255, 243, 232, .95) 50%, transparent 58% 100%); background-size: 300% 100%; animation: relayRun 3.8s linear infinite; filter: drop-shadow(0 0 5px rgba(255, 243, 232, .8)); }
@keyframes relayRun { from { background-position: 100% 0; } to { background-position: 0% 0; } }
.st-relay__n { position: relative; min-width: 0; }
.st-relay__a { position: relative; display: grid; justify-items: center; gap: 8px; height: 100%; padding: 36px 18px 24px; text-align: center; border-radius: var(--card-r); border: 1px solid var(--card-line); background: var(--card-bg); box-shadow: var(--card-shadow); transition: transform .25s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.st-relay__a:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 55%, transparent); box-shadow: var(--card-shadow), 0 18px 44px -16px color-mix(in srgb, var(--c) 45%, transparent); }
.st-relay__dot { position: absolute; z-index: 3; top: -8px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: #3a1019; border: 3px solid var(--c); box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 16%, transparent), 0 0 18px var(--c); }
.st-relay__k { font: 600 11px/1 var(--f-mono); letter-spacing: .16em; color: var(--c); }
.st-relay__s { font: 700 clamp(16px, 1.3vw, 18px)/1.4 var(--f-body); letter-spacing: -.02em; color: var(--cream); }
.st-relay__d { font-size: 14px; line-height: 1.55; color: var(--muted); }
.st-relay__a .ico { width: 16px; height: 16px; margin-top: 2px; color: var(--c); opacity: .85; transition: transform .2s var(--ease); }
.st-relay__a:hover .ico { transform: translate(2px, -2px); }

.st-quote { display: grid; justify-items: center; gap: 22px; max-width: 820px; margin: clamp(56px, 7vw, 96px) auto 0; text-align: center; }
.st-quote blockquote { margin: 0; }
.st-quote p { font: 600 clamp(22px, 2.4vw, 32px)/1.6 var(--f-serif); letter-spacing: -.035em; color: var(--cream); }
.st-quote p::before { content: "\201C"; display: block; margin-bottom: 14px; font: 700 64px/.6 var(--f-serif); color: var(--rose-2); }
.st-quote figcaption { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 20px; font: 600 11px/1 var(--f-mark); letter-spacing: .26em; color: var(--label-c); }
.st-quote .link-arrow { font: 700 14px/1 var(--f-body); letter-spacing: 0; color: var(--gilt); }

/* ==========================================================================
   9. 무료 기획 진단 신청
   ========================================================================== */
.st-form { overflow: hidden; background: radial-gradient(ellipse 50% 60% at 82% 30%, rgba(180, 50, 77, .34), transparent 72%), radial-gradient(ellipse 44% 50% at 4% 90%, rgba(242, 205, 184, .06), transparent 70%), var(--bg); }
.st-form__in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(36px, 5vw, 84px); align-items: start; }
.st-form__info { position: sticky; top: calc(var(--hdr-h) + 84px); display: grid; gap: 20px; }
.st-flow { position: relative; margin-top: 10px; }
.st-flow li { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: 2px; padding: 9px 0; }
.st-flow li::before { content: ""; position: absolute; left: 20.5px; top: 51px; bottom: -9px; width: 1px; background: var(--line-2); }
.st-flow li:last-child::before { display: none; }
.st-flow__n { grid-row: span 2; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(242, 205, 184, .3); background: rgba(30, 10, 15, .5); font: 600 11.5px/1 var(--f-mono); color: var(--gilt); }
.st-flow b { align-self: end; font-size: 16px; color: var(--cream); }
.st-flow small { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.st-promise { display: grid; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line); }
.st-promise li { display: flex; gap: 10px; font-size: 14px; line-height: 1.6; color: var(--cream-2); }
.st-promise .ico { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--gilt); }
.st-form__card { background: linear-gradient(180deg, #4a1b25, #3d161e); border-color: rgba(242, 205, 184, .16); box-shadow: 0 44px 90px -30px rgba(8, 2, 4, .85), inset 0 1px 0 rgba(255, 255, 255, .05); }
.st-form__head { display: flex; justify-content: space-between; margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1px dashed var(--line-2); font: 600 10.5px/1 var(--f-mono); letter-spacing: .22em; color: var(--muted); }
.st-form .inp { background: rgba(30, 10, 15, .55); }
.st-form .chip span { background: rgba(30, 10, 15, .45); }
.st-form .chip input:checked + span { background: linear-gradient(110deg, #f6dccd, #e5b49d); color: #2b0f15; border-color: transparent; box-shadow: 0 8px 20px -10px rgba(242, 205, 184, .7); }
.st-form .check input:checked + .check__box { background: var(--rose); border-color: var(--rose); }
.st-form .consent { background: rgba(30, 10, 15, .35); }

/* ==========================================================================
   반응형
   ========================================================================== */
@media (max-width: 1100px) {
  .st-plan__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .st-hero__in { grid-template-columns: minmax(0, 1fr); }
  .bp { max-width: 640px; width: 100%; margin-inline: auto; }
  .st-form__in { grid-template-columns: minmax(0, 1fr); }
  .st-form__info { position: static; }
}
@media (max-width: 900px) {
  .st-pain__in, .st-docs__in { grid-template-columns: minmax(0, 1fr); }
  .st-pain__sticky { position: static; }
  .st-stack { height: clamp(380px, 92vw, 520px); }
  .st-doc { --dw: clamp(200px, 52vw, 290px); }
}
@media (max-width: 760px) {
  .st-relay { grid-template-columns: minmax(0, 1fr); padding-top: 0; padding-left: 30px; gap: 12px; }
  .st-relay::before, .st-relay::after { left: 7px; right: auto; top: 26px; bottom: 26px; width: 2px; height: auto; }
  .st-relay::before { background: linear-gradient(180deg, #e0687f, #a08bff 36%, #ff5a36 66%, #2fd3be); }
  .st-relay::after { background: linear-gradient(180deg, transparent 0 42%, rgba(255, 243, 232, .95) 50%, transparent 58% 100%); background-size: 100% 300%; animation-name: relayRunY; }
  .st-relay__a { justify-items: start; text-align: left; padding: 20px 20px 20px 22px; }
  .st-relay__dot { top: 50%; left: -31px; margin: -8px 0 0; }
  .st-relay__a .ico { position: absolute; right: 18px; top: 22px; }
  @keyframes relayRunY { from { background-position: 0 100%; } to { background-position: 0 0%; } }
}
@media (max-width: 680px) {
  .st-plan__grid { grid-template-columns: minmax(0, 1fr); }
  .st-card--wide { grid-column: auto; grid-template-columns: minmax(0, 1fr); }
  .st-order__l { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 8px; }
  .st-order__l::before { display: none; }
}
@media (max-width: 600px) {
  .st-h1__l1 { font-size: clamp(40px, 11.6vw, 52px); }
  .st-hero__cta .btn { flex: 1 1 100%; }
  .st-br { display: none; }
  .bp-t { font-size: 23px; }
  .bp-sub { font-size: 14px; }
  .bp-ann { font-size: 12px; }
  .bp-note__t { font-size: 18px; }
  .bp-no { font-size: 12px; }
  .bp__cap { flex-direction: column; align-items: flex-start; gap: 8px; }
  .bp__txt { text-align: left; }
  .st-facts li { padding-right: 10px; }
  .st-facts li + li { padding-left: 12px; }
  .st-pain__i { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .st-pain__no { padding-top: 0; }
  .st-docs__list li { grid-template-columns: 28px minmax(0, 1fr); }
  .st-docs__s { display: none; }
  .st-doc[data-p="1"] { transform: translate(-30%, 6%) rotate(-8deg) scale(.92); }
  .st-doc[data-p="2"] { transform: translate(30%, 8%) rotate(7deg) scale(.9); }
  .st-sheet { display: none; }
}

/* 동작 줄이기: 설계도·고민 목록은 JS가 완성 상태로 둔다 */
@media (prefers-reduced-motion: reduce) {
  .st-order__l li, .st-relay::after, .bp-pen__ring, .st-kicker__dot, .bp__state i { animation: none !important; }
  .st-relay::after { display: none; }
}