/* 칸 모양 변형(모든 스타일 공통). lp.css 다음에 불러온다.
   한 페이지 안에서 칸마다 하나씩 고른다. 어떤 칸에 무엇을 썼는지는 작업기록에 적고, 직전 고객과 같은 조합은 피한다(tools/check.mjs).
   - 첫 화면: .hero(기본: 글 + 숫자 장부) / .hero.v-type(큰 글씨 한 단, 숫자는 아래 띠) / .hero.v-calc(글 + 계산기) / .hero.v-center(가운데 정렬 + 숫자 카드)
   - 칸 머리: 기본은 칸마다 다름 / .stack(머리를 위에 두고 내용은 아래 한 단)
   - 증거: .results(큰 숫자 하나 + 나머지) / .band(숫자 3~4개 가로 띠)
   - 진행: .steps(고정 스크롤) / .cards5(단계 카드 가로 나열) */

/* 첫 화면: 큰 글씨 한 단 */
.hero.v-type .wrap{grid-template-columns:1fr;gap:56px}
.hero.v-type h1{font-size:clamp(40px,7.2vw,104px);line-height:1.08;letter-spacing:-.05em;max-width:14em}
.hero.v-type .sub{font-size:clamp(18px,1.6vw,22px);max-width:36em}
.hero.v-type .ledger{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px;border-top:3px solid var(--line)}
.hero.v-type .ledger .row{flex-direction:column;align-items:flex-start;gap:8px;padding:22px 0 0;border-bottom:0}
.hero.v-type .ledger dt::after{content:none}
.hero.v-type .ledger dd{font-size:clamp(34px,4vw,56px)}
@media (max-width:900px){
  .hero.v-type .wrap{gap:36px}
  .hero.v-type .ledger{grid-template-columns:1fr;gap:0}
  .hero.v-type .ledger .row{flex-direction:row;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--rule)}
  .hero.v-type .ledger dd{font-size:28px}
}

/* 첫 화면: 가운데 정렬 + 숫자 카드 */
.hero.v-center .wrap{grid-template-columns:1fr;justify-items:center;text-align:center;gap:48px}
.hero.v-center h1{max-width:16em}
.hero.v-center .sub{margin-inline:auto}
.hero.v-center .ledger{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;border-top:0;width:100%;max-width:960px;text-align:left}
.hero.v-center .ledger .row{flex-direction:column;align-items:flex-start;gap:10px;padding:22px 24px;border:1px solid var(--rule);border-radius:var(--r);background:var(--tint)}
.hero.v-center .ledger dt::after{content:none}
@media (max-width:900px){.hero.v-center .wrap{text-align:left;justify-items:stretch}.hero.v-center .ledger{grid-template-columns:1fr;gap:10px}}

/* 첫 화면: 글 + 계산기(비교형 상품). 계산식은 data-* 로 넣고 lp.js가 계산한다. 비교 기준은 작은 글씨로 꼭 밝힌다 */
.calc{border:1px solid var(--rule);border-radius:var(--r);background:var(--tint);padding:28px}
.calc .ct{font-weight:700;font-size:17px}
.calc label{display:block;margin-top:18px;font-weight:650;font-size:15.5px}
.calc .in{display:flex;align-items:center;gap:14px;margin-top:10px}
.calc input[type=range]{flex:1;accent-color:var(--blue);height:28px}
.calc output{font-weight:720;font-size:20px;min-width:7.5em;text-align:right}
.calc .rows{margin:22px 0 0;display:grid;gap:0;border-top:2px solid var(--line)}
.calc .rows>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 0;border-bottom:1px solid var(--rule)}
.calc .rows dt{font-size:15.5px}
.calc .rows dd{margin:0;font-weight:720;font-size:clamp(22px,2.2vw,28px)}
.calc .rows .us dd{color:var(--blue)}
.calc .cgap{margin-top:16px;font-size:17px;font-weight:650}
.calc .cgap b{color:var(--blue);font-size:1.25em}
.calc .basis{margin-top:12px;font-size:13.5px;line-height:1.6}
@media (max-width:900px){.calc{padding:20px 18px}}

/* 칸 머리를 위로: 머리 + 내용 한 단(옆 칸 구조를 쓰는 칸에 붙인다) */
.stack.cost,.stack.steps,.stack.faqwrap,.stack.contact,.stack.results{grid-template-columns:1fr!important;gap:32px}
.stack .rail{position:static}

/* 증거: 숫자 띠 */
.band{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0;border-top:3px solid var(--line)}
.band article{padding:24px 24px 26px 0;border-right:1px solid var(--rule);margin-right:24px}
.band article:last-child{border-right:0;margin-right:0}
.band .v{font-size:clamp(44px,5vw,72px);font-weight:780;line-height:1;letter-spacing:-.05em;color:var(--blue);margin:10px 0 12px}
.band .k{font-weight:650}
@media (max-width:760px){.band{grid-template-columns:1fr}.band article{border-right:0;margin-right:0;border-bottom:1px solid var(--rule);padding:20px 0}}

/* 진행: 단계 카드 가로 나열 */
.cards5{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;counter-reset:st}
.cards5>li{counter-increment:st;background:var(--tint);border-radius:var(--r);padding:22px 20px 24px;border-top:3px solid var(--blue);display:flex;flex-direction:column;gap:8px}
.cards5>li::before{content:counter(st,decimal-leading-zero);font-weight:780;font-size:28px;letter-spacing:-.03em;color:var(--blue)}
.cards5>li>b{font-size:19px;font-weight:720}
.cards5>li>p{font-size:15.5px}
@media (max-width:1100px){.cards5{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.cards5{grid-template-columns:1fr}}
.calc .rows dd small{font-size:.55em;font-weight:500;margin-left:4px;white-space:nowrap}
@media (max-width:480px){.calc .rows>div{flex-wrap:wrap}.calc .rows dd{margin-left:auto}}

/* ===== 즉시 상담형 템플릿 (2026-10-08, ../템플릿-설계도.md 1번) =====
   첫 화면에 신청서를 같이 둔다. 넓은 화면: 왼쪽 글·근거, 오른쪽 신청서 / 휴대폰: 글 → 신청서 → 근거 순서 */
.offer{padding-block:56px 64px}
.offer .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);grid-template-areas:"copy form" "proof form";grid-template-rows:auto 1fr;column-gap:64px;row-gap:36px;align-items:start}
.offer .copy{grid-area:copy}
.offer .f{grid-area:form;padding:28px}
.offer .proof{grid-area:proof}
.offer h1{font-size:clamp(30px,4.2vw,52px);font-weight:760;line-height:1.2;letter-spacing:-.04em;text-wrap:balance}
.offer .sub{margin-top:18px;font-size:18px;color:var(--muted);max-width:30em}
.offer .ft{font-size:19px;font-weight:720;line-height:1.35}
.proof{list-style:none;margin:0;padding:0;border-top:2px solid var(--line);max-width:30em}
.proof li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid var(--rule);font-size:16px}
.proof b{font-weight:720;font-size:20px;letter-spacing:-.02em;white-space:nowrap}
@media (max-width:900px){
  .offer{padding-block:28px 8px}
  .offer .wrap{grid-template-columns:1fr;grid-template-areas:"copy" "form" "proof";row-gap:22px}
  .offer .sub{font-size:16.5px;margin-top:12px}
  .offer .f{padding:22px 18px}
}

/* 고르기 카드: 기존 선택 질문(name=budget)을 그대로 쓰고 모양만 크게. 한 개만 고른다(서버 선택지와 글자까지 같게) */
.chips.cards span{flex-direction:column;gap:3px;min-height:68px;padding:12px 10px;white-space:normal}
.chips.cards span b{font-size:15.5px;font-weight:700}
.chips.cards span small{font-size:13px;font-weight:500;color:var(--muted)}
.chips.cards input:checked+span small{color:inherit;opacity:.85}

/* 고르는 이유 */
.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px}
.why article{background:var(--tint);border-radius:var(--r);padding:24px}
.why h3{font-size:19px;font-weight:720;line-height:1.35}
.why p{margin-top:8px;font-size:15.5px;color:var(--muted)}

/* 진행 단계가 3개일 때 */
.cards5.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:760px){.cards5.n3{grid-template-columns:1fr}}

/* 후기 카드: 고객이 공개에 동의한 후기만. 출처(서비스·지역·시기)를 아래에 적는다 */
.reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.reviews figure{margin:0;border:1px solid var(--rule);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;justify-content:space-between;gap:16px;background:var(--paper)}
.reviews blockquote{margin:0;font-size:16.5px;line-height:1.65}
.reviews figcaption{font-size:14px;color:var(--muted)}
.reviews figcaption b{color:var(--ink);font-weight:650}
@media (max-width:900px){.reviews{grid-template-columns:1fr}}

/* 전화·채팅 칸: 카카오톡 채팅은 고객의 카카오톡 채널이 있을 때만(대표님 결정 2026-10-08) */
.callrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;border-top:2px solid var(--line);padding-top:28px}
.callrow h2{font-size:clamp(22px,2.4vw,28px);font-weight:720;line-height:1.35}
.callrow p{margin-top:6px;color:var(--muted);font-size:15.5px}
.callrow .acts{display:flex;gap:10px;flex-wrap:wrap}
.callrow .btn{gap:6px}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
@media (max-width:760px){.callrow{grid-template-columns:1fr}.callrow .acts .btn{flex:1}}

/* ── 요금·정보형 (2026-10-08, 템플릿-설계도.md 3번) ──
   첫 화면 .hero.v-price(글 + 대표 요금 카드 .pcard, 실제 상품 화면이 있으면 .shot) / 서비스 전체 목록 .catalog / 요금표 .plans + 공통 조건 .sheet */
.hero.v-price h1{font-size:clamp(32px,4.4vw,58px);text-wrap:balance}
.hero.v-price .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:32px}
.hero.v-price .acts .btn{margin-top:0}
.pcard{border:2px solid var(--line);border-radius:var(--r);padding:28px;background:var(--field)}
.pcard .tag{font-size:14px;font-weight:650;color:var(--blue)}
.pcard .pn{margin-top:6px;font-size:20px;font-weight:720}
.pcard .pr{margin-top:12px;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.pcard .pr b{font-size:clamp(36px,4vw,52px);font-weight:760;letter-spacing:-.04em;line-height:1.1;color:var(--blue)}
.pcard .pr span{font-size:16px;color:var(--muted)}
.pcard ul,.plan ul{list-style:none;margin:20px 0 0;padding:18px 0 0;border-top:1px solid var(--rule);display:flex;flex-direction:column;gap:9px}
.pcard li,.plan li{position:relative;padding-left:22px;font-size:15.5px}
.pcard li::before,.plan li::before{content:"";position:absolute;left:2px;top:.42em;width:10px;height:6px;border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(-45deg)}
.pcard .fine{margin-top:18px}
.shot{margin:0;border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;background:var(--tint)}
.shot img{display:block;width:100%;height:auto}
@media (max-width:900px){
  .hero.v-price .acts{margin-top:24px;flex-direction:column}
  .hero.v-price .acts .btn{width:100%}
  .pcard{padding:22px 18px}
}

.catalog{border-top:2px solid var(--line)}
.catalog>div:last-child{border-bottom:0}
.blk+.logos{margin-top:112px}
.catalog>div{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;padding:28px 0;border-bottom:1px solid var(--rule)}
.catalog h3{font-size:18px;font-weight:720;line-height:1.4}
.catalog h3 small{display:block;margin-top:4px;font-size:14.5px;font-weight:400;color:var(--muted)}
.catalog ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 36px}
.catalog li b{display:block;font-size:18px;font-weight:680}
.catalog li span{display:block;margin-top:3px;font-size:16px;color:var(--muted)}
.catalog li em{display:inline-block;margin-top:7px;padding:2px 9px;border-radius:999px;background:var(--tint);font-style:normal;font-size:13px;font-weight:650}
@media (max-width:760px){
  .catalog>div{grid-template-columns:1fr;gap:14px;padding:22px 0}
  .catalog ul{grid-template-columns:1fr;gap:16px}
  .blk+.logos{margin-top:80px}
}

.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px;align-items:stretch;padding-top:12px}
.plan{position:relative;display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:var(--r);padding:28px 24px 24px;background:var(--field)}
.plan.pick{border:2px solid var(--blue)}
.plan .badge{position:absolute;top:-13px;left:22px;padding:3px 10px;border-radius:999px;background:var(--blue);color:var(--on-blue);font-size:13px;font-weight:650}
.plan h3{font-size:20px;font-weight:720}
.plan .for{margin-top:6px;font-size:15px;color:var(--muted)}
.plan .pr{margin-top:18px;display:flex;align-items:baseline;gap:4px;flex-wrap:wrap}
.plan .pr b{font-size:34px;font-weight:760;letter-spacing:-.03em;line-height:1.15}
.plan.pick .pr b{color:var(--blue)}
.plan .pr span{font-size:15px;color:var(--muted)}
.plan ul{margin-bottom:24px;flex:1}
.plan .btn{width:100%}
.plans+.sheet{margin-top:28px}
@media (max-width:760px){.plans{gap:22px}.plan.pick{order:-1}}

/* ── 단계·증명형 (2026-10-08, 템플릿-설계도.md 2번) ──
   첫 화면 .hero.v-media(글 + 고객 실제 사진 또는 실제 화면 캡처) / 이용 3단계 휴대폰 화면 .flow + .phone / 큰 숫자 + 막대 .metric + .bars
   / 수상·인증 띠 .awards(있을 때만) / 사진 사례 카드 .pcases / 사진 자리 표시 .slot(남아 있으면 check.mjs가 운영 배포를 막는다) */
.slot{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:4/3;padding:16px;border:2px dashed var(--rule);border-radius:var(--r);background:var(--tint);color:var(--muted);font-size:14px;font-weight:600;text-align:center;line-height:1.5}

.hero.v-media .wrap{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:64px}
.hero.v-media .media{margin:0;display:flex;justify-content:center}
.hero.v-media h1{font-size:clamp(32px,4.4vw,58px);text-wrap:balance}
.hero.v-media .media>img{display:block}
.hero.v-media .media>img,.hero.v-media .media>.slot{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r)}
.hero.v-media .trust{margin-top:16px;font-size:14.5px;color:var(--muted)}
@media (max-width:900px){
  .hero.v-media .wrap{grid-template-columns:1fr;gap:32px}
  .hero.v-media .media>img,.hero.v-media .media>.slot{aspect-ratio:4/3}
  .hero.v-media .media .phone{width:min(64%,240px)}
}

/* 휴대폰 틀: 안에는 고객이 준 실제 화면 캡처(img)만 넣는다 */
.phone{container-type:inline-size;position:relative;text-align:left;width:min(100%,280px);aspect-ratio:9/19;border:9px solid #1A1C21;border-radius:34px;overflow:hidden;background:var(--field);box-shadow:0 0 0 1px var(--rule)}
.phone>img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}

.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;counter-reset:fl}
.flow>li{counter-increment:fl;display:flex;flex-direction:column;align-items:center;text-align:center}
.flow .phone{width:min(100%,240px)}
.flow b{margin-top:24px;font-size:18px;font-weight:720}
.flow b::before{content:counter(fl,decimal-leading-zero);display:block;margin-bottom:4px;color:var(--blue);font-size:15px;font-weight:720}
.flow p{margin-top:6px;max-width:22em;font-size:15.5px;color:var(--muted)}
@media (max-width:760px){
  .flow{grid-template-columns:1fr;gap:26px}
  .flow>li{display:grid;grid-template-columns:128px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:18px;align-items:start;text-align:left}
  .flow .phone{grid-row:1/3;width:128px;border-width:6px;border-radius:22px}
  .flow b{margin-top:8px}
}

.metric{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:56px;align-items:center;border-top:2px solid var(--line);padding-top:32px}
.metric .k{font-size:17px;font-weight:650}
.metric .v{margin:10px 0 14px;font-size:clamp(64px,9vw,120px);font-weight:780;line-height:1;letter-spacing:-.05em;color:var(--blue)}
.metric .d{font-size:16.5px}
.bars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
.bars li{display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px;align-items:center}
.bars span{font-size:15px;font-weight:600}
.bars i{display:flex;align-items:center;justify-content:flex-end;width:var(--w,50%);min-width:max-content;height:44px;padding-inline:14px;border-radius:4px;background:var(--rule);font-style:normal;font-size:16px;font-weight:720}
.bars li.us i{background:var(--blue);color:var(--on-blue)}
@media (max-width:860px){.metric{grid-template-columns:1fr;gap:28px}.bars li{grid-template-columns:84px minmax(0,1fr);gap:10px}}

.blk.tight{padding-top:64px}
.awards{list-style:none;margin:0;padding:22px 0;display:flex;flex-wrap:wrap;gap:16px 48px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.awards li{display:flex;flex-direction:column;gap:2px}
.awards b{font-size:16px;font-weight:700}
.awards span{font-size:14px;color:var(--muted)}
@media (max-width:900px){.blk.tight{padding-top:48px}}

.pcases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pcases figure{margin:0;display:flex;flex-direction:column}
.pcases img{display:block}
.pcases img,.pcases .slot{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.pcases figcaption{margin-top:14px;display:flex;flex-direction:column;gap:4px}
.pcases .k{font-size:16.5px;font-weight:700}
.pcases .v{font-size:28px;font-weight:760;line-height:1.2;letter-spacing:-.03em;color:var(--blue)}
.pcases .d{font-size:15px;color:var(--muted)}
@media (max-width:760px){.pcases{grid-template-columns:1fr;gap:28px}}

/* ── 브랜드 이야기형 (2026-10-08, 템플릿-설계도.md 4번) ──
   어두운 사진 첫 화면 .hero.v-story(.bg에 고객 실제 사진) / 사명 .mission / 사진·글 번갈아 .svc / 연혁 .timeline
   / 분야별 색 블록 .fields(색은 --f1~--f4만 바꾼다) / 언론 보도 .press(글만, 기사 링크 없음) */
.hero.v-story{position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:min(78vh,760px);margin-inline:-20px;padding:120px 20px 72px;background:#0F1013;color:#FFFFFF;overflow:hidden}
.hero.v-story .wrap{position:relative;z-index:1;width:100%;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:end}
.hero.v-story .bg{position:absolute;inset:0;z-index:-1;margin:0}
.hero.v-story .bg img{width:100%;height:100%;object-fit:cover}
.hero.v-story .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,11,13,.82) 0%,rgba(10,11,13,.55) 55%,rgba(10,11,13,.3) 100%)}
.hero.v-story .bg.slot{display:flex;align-items:flex-start;justify-content:flex-end;aspect-ratio:auto;padding:96px 28px;border:0;border-radius:0;background:#1A1C21;color:rgba(255,255,255,.55);font-size:13.5px}
.hero.v-story .bg.slot::after{content:none}
.hero.v-story h1{color:#FFFFFF;text-wrap:balance}
.hero.v-story .sub{color:rgba(255,255,255,.82)}
.hero.v-story .btn{background:#FFFFFF;color:#111318}
.hero.v-story .ledger{border-top-color:rgba(255,255,255,.55)}
.hero.v-story .ledger .row{border-bottom-color:rgba(255,255,255,.22)}
.hero.v-story .ledger dt{color:rgba(255,255,255,.8)}
.hero.v-story .ledger dt::after{border-bottom-color:rgba(255,255,255,.5)}
.hero.v-story .ledger dd{color:#FFFFFF}
.hero.v-story .ledger dd.note{color:rgba(255,255,255,.7)}
@media (max-width:900px){
  .hero.v-story{min-height:0;padding:56px 20px 40px}
  .hero.v-story .wrap{grid-template-columns:1fr}
  .hero.v-story .bg.slot{padding:16px 18px}
}

.mission{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:56px;align-items:start}
.mission .h2{font-size:17px;font-weight:700;letter-spacing:0}
.mission .say{font-size:clamp(26px,3.2vw,42px);font-weight:700;line-height:1.42;letter-spacing:-.03em;text-wrap:pretty}
.mission .who{margin-top:24px;font-size:15.5px;color:var(--muted)}
@media (max-width:860px){.mission{grid-template-columns:1fr;gap:16px}}

.svc{display:flex;flex-direction:column;gap:72px}
.svc article{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:56px;align-items:center}
.svc article:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
.svc article:nth-child(even) figure{order:2}
.svc figure{margin:0}
.svc figure img{display:block}
.svc figure img,.svc figure .slot{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.svc h3{font-size:clamp(22px,2.2vw,28px);font-weight:720;letter-spacing:-.02em}
.svc p{margin-top:12px;font-size:16.5px}
.svc ul{list-style:none;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--rule);display:flex;flex-direction:column;gap:8px}
.svc li{display:flex;justify-content:space-between;gap:16px;font-size:15.5px}
.svc li b{font-weight:700}
@media (max-width:860px){.svc{gap:48px}.svc article,.svc article:nth-child(even){grid-template-columns:1fr;gap:20px}.svc article:nth-child(even) figure{order:0}}

.timeline{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:32px}
.timeline::before{content:"";position:absolute;left:0;right:0;top:7px;height:2px;background:var(--line)}
.timeline li{position:relative;padding-top:40px}
.timeline li::before{content:"";position:absolute;left:0;top:0;width:16px;height:16px;box-sizing:border-box;border:3px solid var(--blue);border-radius:50%;background:var(--paper)}
.timeline b{display:block;font-size:30px;font-weight:780;letter-spacing:-.03em;line-height:1.1;color:var(--blue)}
.timeline p{margin-top:10px;font-size:16.5px;font-weight:600}
.timeline p span{display:block;margin-top:4px;font-size:15px;font-weight:400;color:var(--muted)}
@media (max-width:760px){
  .timeline{grid-auto-flow:row;gap:26px}
  .timeline::before{left:7px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .timeline li{padding:0 0 0 36px}
  .timeline li::before{top:4px}
  .timeline b{font-size:22px}
  .timeline p{margin-top:4px}
}

.fields{--f1:#E6EBF5;--f2:#F4EDDC;--f3:#E3EFE8;--f4:#ECEDEF;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fields{--f1:#1A2131;--f2:#2A2418;--f3:#17251E;--f4:#202227}}
:root[data-theme="dark"] .fields{--f1:#1A2131;--f2:#2A2418;--f3:#17251E;--f4:#202227}
.fields article{display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:220px;padding:28px;border-radius:var(--r);background:var(--f1)}
.fields article:nth-child(2){background:var(--f2)}
.fields article:nth-child(3){background:var(--f3)}
.fields article:nth-child(4){background:var(--f4)}
.fields h3{font-size:22px;font-weight:720}
.fields p{margin-top:8px;font-size:16px}
.fields .v{font-size:clamp(30px,3vw,40px);font-weight:760;letter-spacing:-.03em;line-height:1.1}
.fields .v small{display:block;margin-top:4px;font-size:14px;font-weight:500;letter-spacing:0;color:var(--muted)}
@media (max-width:760px){.fields{grid-template-columns:1fr}.fields article{min-height:0;padding:22px 20px}}

.press{list-style:none;margin:0;padding:0;border-top:2px solid var(--line)}
.press li{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;padding:20px 0;border-bottom:1px solid var(--rule)}
.press .src{font-size:15px;font-weight:650}
.press .src span{display:block;font-weight:400;color:var(--muted)}
.press q{quotes:none;font-size:17px;font-weight:600}
@media (max-width:760px){.press li{grid-template-columns:1fr;gap:6px;padding:16px 0}.press .src span{display:inline;margin-left:6px}}

/* ── 스타일 묶음(editorial·dark)과 템플릿 골격을 같이 쓸 때 보정 (2026-10-08 12조합 캡처 검사) ── */
.mission>header{margin-bottom:0!important}
.blk .mission .h2{font-size:17px;font-weight:700;letter-spacing:0;line-height:1.5;max-width:none}
:root[data-style="dark"] .fields{--f1:#1A2131;--f2:#2A2418;--f3:#17251E;--f4:#202227}
:root[data-style="editorial"] .fields{--f1:#E6EBF5;--f2:#F4EDDC;--f3:#E3EFE8;--f4:#ECEDEF}
[data-style="editorial"] .blk.tight{counter-increment:none;margin-top:56px;border-top:0;padding-top:0}
[data-style="editorial"] .callrow{border-top:0;padding-top:0}