/* =====================================================================
   f.css — 디자인 F 페이지 스타일 (모든 F 페이지에서 launch.css 다음에 연결)
   묶음마다 머리말을 두고, 다른 담당이 덧붙일 때는 새 묶음을 아래에 추가합니다.
   ===================================================================== */

/* ---------- [콘텐츠] 2026-10-07 서비스 구성 변경에 따른 배치 ---------- */

/* 4단계 · 3단계 타임라인 (입점 초기 안정화 4개월 등). 기본 .phases 는 3칸 */
.phases.p4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1000px) and (min-width:801px){
  .phases.p4{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}
  .timeline:has(.phases.p4) .line{display:none}
}
@media(max-width:800px){.phases.p4{grid-template-columns:1fr}}

/* 소통 방식 3칸 (.whys 기본은 4칸) */
.whys.w3{grid-template-columns:repeat(3,minmax(0,1fr))}
.whys.w3 .why{min-height:200px}
@media(max-width:700px){.whys.w3{grid-template-columns:1fr}.whys.w3 .why{min-height:0}}

/* 카드 가격 옆 총액 */
.pkc .pr small{font-size:.6em;font-weight:500;letter-spacing:0;color:var(--fg-2)}

/* 메인 05 서비스 레일: 그룹이 2개(진단·검증 6 · 성장·자립 5)로 줄어 카드마다 두 줄 목록 */
@media(min-width:701px){
  .hscroll{height:240vh;height:240svh}
  .tcard.g-verify,.tcard.g-grow{width:min(640px,84vw)}
  .tcard.g-verify ul,.tcard.g-grow ul{display:grid;grid-template-columns:1fr 1fr;column-gap:22px}
  .tcard.g-verify li:nth-last-child(-n+2),.tcard.g-grow li:last-child{border-bottom:none}
}
@media (orientation:landscape) and (max-height:500px){
  .tcard.g-verify,.tcard.g-grow{width:auto;grid-column:1/-1}
}

/* 포함 목록은 ✓ (가격 페이지와 같은 표시) */
[data-sv-incexc]>div:not(.no) li::before{content:"✓";font-size:12px}

/* ---------- [통합] 2026-10-07 서비스 장면(vignettes.js) 배치 ----------
   한 화면에 장면 1~2개까지. 캔버스는 장식(aria-hidden) · 이름표는 둘레의 HTML 제목이 맡음.
   폭은 14의 배수(280 · 294 · 308)로 두어 칸이 고르게 (vignettes.css 참고) */

/* 1. 상세 페이지 '추천 대상' 머리말 옆 장면 (poc · mf · lt · mi · acc · stab) */
.sec-vg{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 48px}
.sec-vg>.sec-vg-t{min-width:0;flex:1 1 auto}
.sec-vg>.vg-pic{flex:0 0 auto;width:308px;margin:0 0 -6px}
.sec-vg+.cols2{margin-top:28px}
@media(max-width:760px){
  .sec-vg{flex-direction:column;align-items:stretch}
  .sec-vg>.vg-pic{width:min(100%,308px);margin:4px 0 0}
  .sec-vg+.cols2{margin-top:20px}
}

/* 2. 서비스 전체 목록: 그룹 머리말에 장면 하나 (data-sv-list data-sv-vig="group") */
.svc-tier.has-vg .tier-head>.tier-t>.mut{font-size:16px;color:var(--fg-2)}
.svc-tier.has-vg .tier-vg canvas[data-vignette]{width:294px}
@media(min-width:1200px){
  .svc-tier.has-vg{display:grid;grid-template-columns:294px minmax(0,1fr);column-gap:clamp(40px,4vw,72px);align-items:start}
  .svc-tier.has-vg .tier-head{position:sticky;top:calc(var(--nav-h) + 28px)}
  .svc-tier.has-vg .tier-vg{margin-top:22px}
  .svc-tier.has-vg .items{margin-top:0}
}
@media(min-width:761px) and (max-width:1199px){
  .svc-tier.has-vg .tier-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px}
  .svc-tier.has-vg .tier-t{min-width:0;flex:1 1 auto}
  .svc-tier.has-vg .tier-vg{flex:0 0 auto;margin-bottom:-4px}
  .svc-tier.has-vg .tier-vg canvas[data-vignette]{width:280px}
}
@media(max-width:760px){
  .svc-tier.has-vg .tier-vg{margin-top:14px}
  .svc-tier.has-vg .tier-vg canvas[data-vignette]{width:min(100%,294px)}
}

/* 3. 성장·자립 카드 맨 위 장면 띠 (addons · data-sv-cards + data-sv-vig) */
.pk[data-sv-vig] .pkc{padding-top:0;overflow:hidden}
.pk[data-sv-vig] .pkc>canvas.vig{flex:none;width:calc(100% + 56px);max-width:none;height:180px;aspect-ratio:auto;margin:0 -28px 26px;border-radius:0;box-shadow:inset 0 -1px 0 var(--line-2)}

/* 4. 칸이 3개인 시작 경로(입점 초기 안정화 #fit)는 3칸으로 꽉 채움 (기본 4칸 → 오른쪽 빈칸 방지) */
@media(min-width:1101px){.route:has(>:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- [수정] 2026-10-07 리뷰 반영 ---------- */

/* 5. 입점 초기 안정화 #cadence: 정원제 카드와 정가제 안내를 나란히 (오른쪽 끝을 위 3칸 카드와 맞춤) */
@media(min-width:900px){
  #cadence .wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;align-items:stretch}
  #cadence .wrap>:not(.quota):not(.callout){grid-column:1/-1}
  #cadence .quota,#cadence .callout{max-width:none;margin-top:16px}
  #cadence .wrap:not(:has(>.quota))>.callout{grid-column:1/-1}   /* 2026-10-13: 정원 카드가 없는 운영대행은 한 줄 전체 */
}

/* 6. 히어로 태그가 같은 페이지 안 바로가기일 때 (성장·자립 #plan · #adsx · #ls · #coach) */
.tags.jump a{text-decoration:none;transition:border-color .2s var(--ease-out),color .2s var(--ease-out)}
.tags.jump a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.tags.jump a:hover{border-color:var(--fg);color:var(--fg)}}

/* ---------- [2차 결정] 2026-10-08 구간별 가격 표 · 진행 순서 · 넓은 카드 ---------- */

/* 7. 구간별 가격 표 (services.js tiers() — 광고 구조 최적화: 일 광고 예산별 월 고정비)
   한 표를 가격 카드(in-pc) · 성장·자립 카드(in-card) · FAQ(in-faq) · 이용 조건 표(in-terms)가 함께 씀 */
.tierbox{margin-top:14px;border:1px solid var(--line-2);border-radius:12px;background:var(--card);overflow:hidden;max-width:460px;container-type:inline-size}
.tiers{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.4;font-variant-numeric:tabular-nums}
.tiers caption{caption-side:top;text-align:left;padding:10px 14px 9px;font-size:13px;font-weight:700;color:var(--fg);background:var(--bg-2);border-bottom:1px solid var(--line-2)}
.tiers th,.tiers td{padding:9px 14px;text-align:left;vertical-align:baseline;border-top:1px solid var(--line);font-weight:400}
.tiers thead th{border-top:0;padding-top:8px;padding-bottom:6px;font-size:12.5px;font-weight:600;color:var(--fg-3)}
.tiers tbody th{font-weight:700;color:var(--fg);white-space:nowrap}
.tiers td.m{font-weight:700;color:var(--accent);white-space:nowrap}
.tiers td.t{color:var(--fg-2)}
.tierbox.in-faq{margin:14px 0 4px}
.tierbox.in-terms{margin-top:10px}
/* 표가 놓인 상자 폭에 맞춰 칸 여백 · 글자를 줄임 (좁은 카드 · 작은 휴대폰). 그래도 모자라면 합계 칸만 줄바꿈 */
@container (max-width:340px){.tiers th,.tiers td{padding-left:9px;padding-right:9px}.tiers caption{padding-left:9px}}
@container (max-width:280px){.tiers{font-size:13.5px}.tiers th,.tiers td{padding-left:7px;padding-right:7px}.tiers thead th{font-size:11.5px}.tiers caption{padding-left:7px}}
@container (max-width:240px){.tiers{font-size:13px}.tiers th,.tiers td{padding-left:5px;padding-right:5px}}

/* 8. 진행 순서 (services.js steps() — Listing Studio) */
.svsteps{list-style:none;margin:0;padding:0}
.pkc .svsteps li,.svsteps li{position:relative;display:grid;grid-template-columns:30px minmax(0,9.5em) minmax(0,1fr);column-gap:12px;align-items:baseline;
  padding:9px 0;border-top:1px dashed var(--line-2);font-size:15px;line-height:1.55;color:var(--fg-2)}
.pkc .svsteps li::before{content:none}
.svsteps li:first-child{border-top:0}
.svsteps .k{font:500 12px/1.55 var(--mono-e);letter-spacing:.06em;color:var(--fg-3)}
.svsteps b{font-weight:700;color:var(--fg)}
.svsteps .t{min-width:0}
@media(max-width:560px){
  .pkc .svsteps li,.svsteps li{grid-template-columns:26px minmax(0,1fr);row-gap:2px}
  .svsteps .t{grid-column:2}
}
.pk-steps{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.pk-steps .lb{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-bottom:4px;font-size:13px;font-weight:700;color:var(--fg-3)}
.pk-steps .lb small{font-size:13px;font-weight:700;color:var(--accent)}
.pkc .tierbox+.pd{margin-top:14px}

/* 9. 성장·자립 넓은 카드 (data-sv-wide="adsx,ls"): 넓은 화면에서 왼쪽 이름·가격·대상·조건 / 오른쪽 범위·진행 순서·세부 조건 */
@media(min-width:761px){
  .pk .pkc.wide{grid-column:1/-1}
}
@media(min-width:1000px){
  .pk .pkc.wide{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto auto 1fr;
    grid-template-areas:"vg vg" "a b" "c b";column-gap:clamp(36px,4vw,64px)}
  .pk .pkc.wide>canvas.vig{grid-area:vg}
  .pk .pkc.wide>.pk-a{grid-area:a;min-width:0}
  .pk .pkc.wide>.pk-b{grid-area:b;min-width:0}
  .pk .pkc.wide>.ctas{grid-area:c;align-self:start;margin-top:0;padding-top:24px}
  .pk .pkc.wide>.pk-b>ul:first-child{margin-top:0;padding-top:0;border-top:0}
  .pk .pkc.wide>.pk-b>.tierbox:first-child{margin-top:0;max-width:560px}
  .pk .pkc.wide>.pk-a>.sum:first-of-type{margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
}
/* 좁은 화면(<1000): 넓은 카드도 한 줄로 쌓되, 보통 카드와 같은 순서로 (이름 · 가격 → 구간 표 → 한 줄 설명 → 범위 → 대상·조건 → 참고 → 버튼) */
@media(max-width:999px){
  .pk .pkc.wide>.pk-a,.pk .pkc.wide>.pk-b{display:contents}
  .pk .pkc.wide>.pk-a>*,.pk .pkc.wide>.pk-b>*{order:3}
  .pk .pkc.wide>.pk-a>.nm,.pk .pkc.wide>.pk-a>.pr{order:0}
  .pk .pkc.wide>.pk-b>.tierbox{order:1}
  .pk .pkc.wide>.pk-a>.pd{order:2}
  .pk .pkc.wide>.pk-a>.sum{order:4}
  .pk .pkc.wide>.pk-b>.sum.nt{order:5}
  .pk .pkc.wide>.ctas{order:6}
}

/* 맞는 서비스 찾기: 선택지 안의 조건은 고민 아래 작은 줄로 (예: 입점 초기 안정화 대상 기준 · quiz.js q5) */
#quiz .opt small{display:block;margin-top:4px;font-size:13.5px;line-height:1.5;color:var(--fg-2)}

/* 광고 구간표: 구간 이름이 길어져 좁은 칸에서는 ~ 뒤에서 줄바꿈 (2026-10-08) */
.tiers tbody th{white-space:normal}

/* =====================================================================
   F2 · 브랜드 단계 × 서비스 표 (TundraSvc.stages · data-sv-stages) — 2026-10-10
   넓은 화면(>900px): 표 · 열 머리를 누르면 그 단계 강조 / 좁은 화면: 단계 단추 + 목록
   ===================================================================== */
.stg-host{margin-top:36px}
.stg{position:relative}
.stg-tabs{display:none}
.stg-lists{display:none}
.stg-wrap{border:1px solid var(--line-2);border-radius:18px;background:var(--card);overflow:hidden;box-shadow:var(--sh-1)}
.stg-t{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:14px;line-height:1.45}
.stg-t th,.stg-t td{border-bottom:1px solid var(--line);padding:0;vertical-align:middle;font-weight:400}
.stg-t tbody tr:last-child th,.stg-t tbody tr:last-child td{border-bottom:none}
.stg-t thead th{background:var(--bg-2);border-bottom:1px solid var(--line-2);vertical-align:bottom}
.stg-t thead th.c0{width:34%;text-align:left;padding:16px 18px}
.stg-t thead th.c0 span{display:block;font-size:13px;font-weight:700;color:var(--fg-2)}
.stg-t thead th.c0 small{display:block;margin-top:4px;font-size:12px;color:var(--fg-3);line-height:1.4}
.stg-h{display:block;width:100%;height:100%;padding:16px 10px 14px;border:0;background:none;font:inherit;color:inherit;text-align:center;cursor:pointer;transition:background-color .2s var(--ease-out),color .2s var(--ease-out)}
.stg-h .no{display:block;font:500 11px/1 var(--mono-e);letter-spacing:.08em;color:var(--fg-3)}
.stg-h b{display:block;margin-top:7px;font-size:15px;font-weight:800;letter-spacing:-.02em;color:var(--fg);text-wrap:balance}
.stg-h small{display:block;margin-top:5px;font-size:12px;line-height:1.4;color:var(--fg-3);text-wrap:balance}
@media(hover:hover){.stg-h:hover{background:var(--tint-go)}.stg-h:hover b{color:var(--accent)}}
.stg-h:focus-visible{outline:2px solid var(--accent);outline-offset:-3px;border-radius:12px}
.stg-t tbody th{text-align:left;padding:14px 18px}
.stg-t tbody th a{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:10px;row-gap:2px;color:var(--fg);text-decoration:none}
.stg-t tbody th a b{font-size:15.5px;font-weight:800;letter-spacing:-.02em}
.stg-t tbody th a .p{font-size:13px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
.stg-t tbody th a .p small{font-size:12px;font-weight:600;color:var(--fg-3)}
@media(hover:hover){.stg-t tbody th a:hover b{color:var(--accent);text-decoration:underline;text-underline-offset:3px}}
.stg-t tbody th small{display:block;margin-top:4px;font-size:13px;line-height:1.5;color:var(--fg-3)}
.stg-t td{text-align:center;transition:background-color .2s var(--ease-out)}
.stg .dot{display:inline-block;width:16px;height:16px;border-radius:50%;vertical-align:middle;transition:opacity .2s var(--ease-out),transform .2s var(--ease-out)}
.stg .v2 .dot,.stg .dot.v2{background:var(--accent);box-shadow:0 0 0 4px rgba(28,112,63,.12)}
.stg .v1 .dot,.stg .dot.v1{background:transparent;border:2px solid var(--accent)}
@media(hover:hover){.stg-t tbody tr:hover th,.stg-t tbody tr:hover td{background:rgba(14,18,16,.025)}}
/* 단계 강조 (열 머리 · 칸) */
.stg[data-on="plan"] th[data-st="plan"],.stg[data-on="plan"] td[data-st="plan"],
.stg[data-on="ready"] th[data-st="ready"],.stg[data-on="ready"] td[data-st="ready"],
.stg[data-on="stuck"] th[data-st="stuck"],.stg[data-on="stuck"] td[data-st="stuck"],
.stg[data-on="early"] th[data-st="early"],.stg[data-on="early"] td[data-st="early"],
.stg[data-on="grow"] th[data-st="grow"],.stg[data-on="grow"] td[data-st="grow"]{background:var(--tint-go)}
.stg[data-on] td .dot{opacity:.28}
.stg[data-on="plan"] td[data-st="plan"] .dot,.stg[data-on="ready"] td[data-st="ready"] .dot,.stg[data-on="stuck"] td[data-st="stuck"] .dot,
.stg[data-on="early"] td[data-st="early"] .dot,.stg[data-on="grow"] td[data-st="grow"] .dot{opacity:1;transform:scale(1.12)}
.stg[data-on="plan"] .stg-h[data-st="plan"] b,.stg[data-on="ready"] .stg-h[data-st="ready"] b,.stg[data-on="stuck"] .stg-h[data-st="stuck"] b,
.stg[data-on="early"] .stg-h[data-st="early"] b,.stg[data-on="grow"] .stg-h[data-st="grow"] b{color:var(--accent)}
.stg-lg{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:14px;font-size:13px;color:var(--fg-2)}
.stg-lg span{display:inline-flex;align-items:center;gap:8px}
.stg-lg .dot{width:12px;height:12px}
.stg-lg .dot.v2{box-shadow:none}

/* 좁은 화면: 단계 단추 + 그 단계 목록 */
@media(max-width:900px){
  .stg-wrap{display:none}
  .stg-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .stg-tab{display:flex;align-items:baseline;gap:8px;min-width:0;padding:11px 12px;border:1px solid var(--line-2);border-radius:12px;background:var(--card);font:inherit;color:var(--fg);text-align:left;cursor:pointer;transition:background-color .2s var(--ease-out),border-color .2s var(--ease-out)}
  .stg-tab:last-child{grid-column:1 / -1}
  .stg-tab .no{font:500 11px/1 var(--mono-e);letter-spacing:.06em;color:var(--fg-3)}
  .stg-tab b{font-size:14.5px;font-weight:800;letter-spacing:-.02em}
  .stg-tab small{display:none}
  .stg-tab[aria-pressed="true"]{background:var(--fg);border-color:var(--fg);color:var(--paper)}
  .stg-tab[aria-pressed="true"] .no{color:rgba(243,241,234,.7)}
  .stg-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .stg-lists{display:block;margin-top:14px}
  .stg-pd{font-size:13.5px;color:var(--fg-2);margin-bottom:10px}
  .stg-pd b{color:var(--fg)}
  .stg-p ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
  .stg-p li a{display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:10px;row-gap:3px;padding:14px;border:1px solid var(--line-2);border-radius:14px;background:var(--card);color:var(--fg);text-decoration:none}
  .stg-p li .mk{grid-row:1;align-self:center;padding:3px 8px;border-radius:999px;font-size:11.5px;font-weight:700;white-space:nowrap}
  .stg-p li.v2 .mk{background:var(--accent);color:#fff}
  .stg-p li.v1 .mk{border:1px solid var(--accent);color:var(--accent)}
  .stg-p li b{font-size:15.5px;font-weight:800;letter-spacing:-.02em}
  .stg-p li .p{grid-column:2;font-size:13px;font-weight:700;color:var(--accent)}
  .stg-p li .p small{font-weight:600;color:var(--fg-3)}
  .stg-p li > a > small{display:block;grid-column:1 / -1;max-width:none;font-size:13px;line-height:1.5;color:var(--fg-3)}
  .stg-lg{display:none}
}
@media(prefers-reduced-motion:reduce){.stg-h,.stg-t td,.stg .dot,.stg-tab{transition:none}}
/* F2: 4개월 이후 경로가 하나뿐일 때 (자체 운영 코칭 제외) */
.paths > .path:only-child{grid-column:1 / -1}

/* ===== F2 2라운드 (2026-10-11) ===== */
/* 로고 띠: 위쪽 발사대 그림과 붙지 않게 */
.marquee.logos{margin-top:48px}
@media(max-width:700px){.marquee.logos{margin-top:28px}}
/* 메인 02: 결과 4가지 = 이름 + 한 줄 뜻 */
.answer .chips4.desc{max-width:760px}
.answer .chips4.desc span{position:relative;display:block;padding:12px 14px 12px 30px;text-align:left}
.answer .chips4.desc span::before{position:absolute;left:13px;top:19px}
.answer .chips4.desc b{display:block;font-size:15px;font-weight:700;color:var(--fg);letter-spacing:-.01em}
.answer .chips4.desc small{display:block;margin-top:3px;font-size:13px;font-weight:500;line-height:1.5;color:var(--fg-3);text-wrap:pretty}
@media(max-width:480px){.answer .chips4.desc{max-width:none}.answer .chips4.desc span{padding:9px 12px 9px 28px}.answer .chips4.desc b{font-size:14px}.answer .chips4.desc small{font-size:12.5px;line-height:1.45}}
@media(max-height:760px){.answer .chips4.desc small{font-size:12px;line-height:1.4}}
/* 서비스 이름 + 영문 부제 (표 · 메뉴 · 목록 · 카드 · 퀴즈 결과) */
.en{font-family:var(--sans);font-size:.72em;font-weight:500;letter-spacing:0;color:var(--fg-3);white-space:nowrap}
.drop-name .en{margin-left:8px;font-size:11.5px}
.item-name .en,.pkc .nm .en,.pc-n .en,.vname .en,.tbl thead th .en{display:block;margin-top:3px;font-size:12.5px}
.stg-t tbody th a .en{font-size:12px;font-weight:500;color:var(--fg-3)}
.stg-p li .en{margin-left:8px;font-size:12px;font-weight:500;color:var(--fg-3)}
/* 단계 표: 위쪽 안내 · 같은 원 하나 */
.stg-guide{margin-bottom:16px}
.stg-q{font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--fg)}
.stg-s{margin-top:4px;font-size:14px;color:var(--fg-2)}
.stg .v1 .dot{background:var(--accent);border:0;box-shadow:0 0 0 4px rgba(28,112,63,.12)}
.stg-t thead th.c0{vertical-align:bottom}
@media(max-width:900px){.stg-p li a{display:block}.stg-p li small{display:block;margin-top:4px}}
/* 가격 페이지로 잇는 링크 */
.to-price{font-weight:700;color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.facts .pf .n{font-size:clamp(22px,2.4vw,28px)}
/* 메인 02 결과 설명: 좁거나 낮은 화면에서는 한 줄짜리 짧은 설명 (고정 장면이 한 화면에 들어가게) */
.answer .chips4.desc small.s{display:none}
.answer .chips4.desc span{padding:10px 14px 10px 30px}
.answer .chips4.desc span::before{top:17px}
@media(max-width:600px),(max-height:820px){
  .answer .chips4.desc small.l{display:none}
  .answer .chips4.desc small.s{display:block;font-size:12.5px;line-height:1.4}
  .answer .chips4.desc span{padding:8px 12px 8px 28px}
  .answer .chips4.desc span::before{top:15px}
  .answer .averdict{margin-top:14px}
  .answer .averdict .vlb{margin-bottom:8px}
}
@media(max-width:480px){.answer .chips4.desc{gap:5px}.answer .chips4.desc b{font-size:13.5px}}
@media(max-height:700px){.answer .chips4.desc small.s{font-size:11.5px}.answer .chips4.desc span{padding:6px 10px 6px 26px}.answer .chips4.desc span::before{top:12px}.answer .afacts{display:none}}
/* 메가 메뉴 설명은 세 줄까지 (2줄이면 사장님이 쓰신 설명 끝이 잘림) */
.drop.mega .drop-desc{-webkit-line-clamp:3;line-clamp:3}

/* 2026-10-12 문의하기: 상담 신청 · 무료 진출 진단 선택 카드 (contact.html 첫 화면) */
.paths.pick{margin-top:32px;max-width:980px}
.paths.pick a.path{display:flex;flex-direction:column;color:inherit;text-decoration:none;border-bottom:1px solid var(--line-2);transition:border-color .2s var(--ease-out),transform .2s var(--ease-out),box-shadow .2s var(--ease-out)}
.paths.pick a.path:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 10px 24px -16px rgba(40,34,20,.45)}
.paths.pick a.path:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.paths.pick .tag{display:flex;align-items:center;gap:8px}
.paths.pick .pt{display:block;font-size:24px;font-weight:800;line-height:1.3;letter-spacing:-.01em;color:var(--fg);margin-bottom:8px}
.paths.pick p{margin:0}
.paths.pick .go{margin-top:auto;padding-top:18px;font-size:15px;font-weight:600;color:var(--accent)}
.free-badge{font-style:normal;font-family:inherit;font-size:12px;font-weight:700;letter-spacing:0;line-height:1;padding:4px 8px;border-radius:999px;background:var(--accent);color:#fff}
@media(max-width:760px){.paths.pick{margin-top:24px}.paths.pick .pt{font-size:21px}}

/* 2026-10-13: 단계 표 머리 줄맞춤 — 설명이 1줄인 칸(01·02)이 아래로 처지지 않게 번호·이름을 위로 맞춤 */
.stg-t thead th:not(.c0){vertical-align:top}

/* ===== 2026-10-13 배치·간격 점검 반영 (site-layout-qa) ===== */
/* 메인 03: 휴대폰 줄바꿈 (PC 는 <br> 다섯 줄) */
.mani .bm{display:none}
@media(max-width:600px){.mani .bm{display:block;width:100%;height:0}}
/* 서비스 히어로: 태그 줄이 오른쪽 픽셀 그림과 겹치지 않게 글 칸 폭으로 */
.page-hero.has-pic .tags{max-width:min(100%,62%)}
@media(min-width:901px) and (max-width:1180px){.page-hero.has-pic .facts,.page-hero.has-pic .tags{max-width:min(100%,56%)}}
@media(max-width:900px){.page-hero.has-pic .tags{max-width:100%}}
/* 서비스 목록: 화살표를 한글 이름 바로 뒤로 (영문 부제는 아래 줄) */
.item-name{display:flex;flex-wrap:wrap;align-items:baseline}
.item-name .arw{order:1}
.item-name .en{order:2;flex-basis:100%}
/* 같은 줄 카드끼리 번호·제목·설명·다음 단계 높이 맞춤 */
@media(min-width:561px){@supports (grid-template-rows:subgrid){
  .verdicts>.vd{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:10px;align-content:start}
  .verdicts .vd .then{margin-top:0}
  .whys>.why{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:12px;align-content:start}
  .whys>.why p{margin-top:0}
}}
@media(min-width:521px){@supports (grid-template-rows:subgrid){
  .steps>.step{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:8px;align-content:start}
}}
@media(max-width:560px){.whys .why{min-height:0}.whys .why p{margin-top:0}}
@media(min-width:561px) and (max-width:1100px){#why .whys{grid-template-columns:repeat(2,1fr)}}
.post .tx{flex:1;display:flex;flex-direction:column;align-items:flex-start}
.post .meta{margin-top:auto;padding-top:14px}
.two.duo{align-items:stretch}
.two.duo>div{display:flex;flex-direction:column;align-items:flex-start}
.two.duo>div>.ctas{margin-top:auto;padding-top:34px}
@media(min-width:772px){.tiles>.tile:not(.wait) .stat{min-height:56px;align-content:flex-start}}
@media(max-width:700px){.tiles>.tile:not(.wait){padding-top:60px}}
.repgrid{align-items:stretch}
.repgrid>.rep{display:flex;flex-direction:column}
.repgrid>.rep figcaption{flex:1 0 auto}
/* 표·작은 글자 */
.tiers td.t{white-space:nowrap}
.sc2 thead a{min-height:2.6em}
@media(min-width:768px){.tblwrap.kv .tbl tbody th{white-space:nowrap}}
@media(min-width:761px){#vs .tbl{table-layout:fixed}#vs .tbl thead th:first-child{width:120px}}
.tags a span{padding:0;border:0;border-radius:0;background:none;font-size:inherit;letter-spacing:inherit;color:inherit}
.route .st,.vprice{font-family:var(--sans);letter-spacing:.02em}
#quiz .opt{text-wrap:balance;line-height:1.45}
.vd .then a,.legend small a{white-space:nowrap}
@media(max-width:480px){.facts .l .to-price{font-size:13.5px}}
@media(min-width:768px) and (max-width:1180px){.answer .eyebrow .sep{display:none}.answer .eyebrow .tl{flex-basis:100%}}
/* 공통 머리말 · 꼬리말 */
@media(max-width:980px){.mi>button{line-height:inherit}}
@media(min-width:1400px){.drop.mega{min-width:1000px}}
@media(max-width:520px){.fgrid>:nth-child(2){grid-row:span 2}}
/* 2026-10-14 사례 · 툰드라 프로젝트: 새 사례 3칸(PC 한 줄 · 772~1164px 는 첫 칸을 넓게) + 실패 사례 묶음 */
#tundra .tiles-3{grid-template-columns:minmax(0,1fr)}
@media(min-width:772px){#tundra .tiles-3{grid-template-columns:repeat(2,minmax(0,1fr))}#tundra .tiles-3>.tile:first-child{grid-column:1/-1}}
@media(min-width:1165px){#tundra .tiles-3{grid-template-columns:repeat(3,minmax(0,1fr))}#tundra .tiles-3>.tile:first-child{grid-column:auto}}
#tundra .tile:hover .more,#tundra .tile:focus .more,#tundra .tile:focus-within .more{max-height:420px}
#tundra .lessons{margin-top:clamp(72px,9vw,120px)}
#tundra .lessons .lede{margin-top:14px}
#tundra .lessons .versus{margin-left:0}

/* ---------- 2026-10-14 메인 로고 띠: 브랜드 수 캡션 + 사례 보기 링크 (index.html .lg-cap) ---------- */
.marquee.logos .lg-cap{position:relative;z-index:3;display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:2px 14px;margin:0 auto clamp(10px,1.4vw,16px);padding:0 16px;font-size:13px;line-height:1.5;letter-spacing:-.005em;color:var(--fg-3);text-align:center}
.marquee.logos .lg-cap b{font-weight:600;color:var(--fg)}
.marquee.logos .lg-cap a{color:var(--accent);font-weight:600;text-decoration:none;border-bottom:1px solid currentColor;border-bottom-color:color-mix(in srgb,currentColor 35%,transparent);transition:border-color .2s}
.marquee.logos .lg-cap a:hover,.marquee.logos .lg-cap a:focus-visible{border-bottom-color:currentColor}
@media(max-width:700px){.marquee.logos .lg-cap{font-size:12.5px}}

/* ===== 2026-10-13 인사이트: 글 페이지 · 목록 (자료/build_insights.py 가 만드는 마크업) ===== */
a.post{color:inherit;text-decoration:none}
a.post:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.eyebrow .mono{font-family:var(--mono-e);font-weight:500;letter-spacing:.08em;color:var(--fg-3)}
.ins-list{list-style:none;margin:32px 0 0;padding:0;border-top:1px solid var(--line-2)}
.ins-list li{border-bottom:1px solid var(--line-2)}
.ins-list li.empty{padding:22px 4px;color:var(--fg-3);font-size:15px}
.ins-list a{display:grid;grid-template-columns:112px minmax(0,1fr) 24px;gap:6px 20px;align-items:baseline;padding:20px 6px;color:inherit;text-decoration:none;border-radius:10px;transition:background-color .2s var(--ease-out)}
.ins-list time{font-size:14px;color:var(--fg-3);font-variant-numeric:tabular-nums}
.ins-list .t{min-width:0}
.ins-list .t b{display:block;font-size:17.5px;font-weight:700;letter-spacing:-.015em;line-height:1.45;color:var(--fg);text-wrap:balance}
.ins-list .t small{display:block;margin-top:5px;font-size:14.5px;line-height:1.65;color:var(--fg-3)}
.ins-list .go{justify-self:end;font-weight:700;color:var(--accent)}
.ins-list a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(hover:hover){.ins-list a:hover{background:var(--tint-go)}.ins-list a:hover .t b{color:var(--accent)}}
@media(max-width:600px){.ins-list a{grid-template-columns:minmax(0,1fr) 18px;padding:18px 2px}.ins-list time{grid-column:1/-1}}
.post-kind{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 14px;font-size:13.5px;font-weight:700;color:var(--accent)}
.post-kind .mono{font-family:var(--mono-e);font-size:11.5px;font-weight:500;letter-spacing:.1em;color:var(--fg-3)}
.post-hero .h1.post-h1{font-size:clamp(28px,4.1vw,46px);line-height:1.3;letter-spacing:-.025em;text-wrap:balance}
.post-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:18px;font-size:14px;color:var(--fg-3);font-variant-numeric:tabular-nums}
.post-meta a{color:var(--accent);font-weight:600;text-decoration:none}
.post-meta a:hover{text-decoration:underline;text-underline-offset:3px}
.post-band{padding-top:clamp(40px,6vw,72px)}
.post-wrap{display:grid;gap:48px}
.post-body{max-width:720px;min-width:0}
.post-body>:first-child{margin-top:0}
.post-body p{margin:0 0 16px;font-size:16.5px;line-height:1.9;color:var(--fg-2)}
.post-body h2{margin:48px 0 14px;font-size:clamp(21px,2.4vw,25px);font-weight:800;line-height:1.4;letter-spacing:-.02em;color:var(--fg);text-wrap:balance}
.post-body h3{margin:30px 0 10px;font-size:18px;font-weight:800;letter-spacing:-.015em;color:var(--fg)}
.post-body ul,.post-body ol{margin:0 0 18px;padding-left:1.25em;display:grid;gap:8px;font-size:16px;line-height:1.75;color:var(--fg-2)}
.post-body strong{font-weight:700;color:var(--fg)}
.post-body a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;word-break:break-word}
.post-body .tblwrap{margin:6px 0 24px}
.post-body .tbl th[scope=row]{white-space:normal}
.post-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:28px 0}
.post-stats>div{padding:16px 16px 14px;border:1px solid var(--line-2);border-radius:14px;background:var(--card)}
.post-stats b{display:block;font-size:clamp(26px,3vw,32px);font-weight:800;line-height:1.1;letter-spacing:-.02em;color:var(--fg);font-variant-numeric:tabular-nums}
.post-stats span{display:block;margin-top:8px;font-size:13.5px;line-height:1.5;color:var(--fg-3)}
.post-box,.post-check{margin:28px 0;padding:20px 22px;border:1px solid var(--line-2);border-radius:16px;background:var(--card)}
.post-check{background:var(--tint-go)}
.post-box h3,.post-check h3{margin:0 0 10px;font-size:16px;font-weight:800;color:var(--fg)}
.post-box ul{margin:0;gap:6px;font-size:15.5px}
.post-box p:last-child{margin-bottom:0}
.post-check ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.post-check li{position:relative;padding-left:28px;font-size:15.5px;line-height:1.7;color:var(--fg-2)}
.post-check li::before{content:"";position:absolute;left:2px;top:.42em;width:13px;height:13px;border:2px solid var(--accent);border-radius:4px}
.post-note{margin:30px 0 0;padding-top:16px;border-top:1px solid var(--line)}
.post-note h3,.post-src h3{margin:0 0 6px;font-size:13.5px;font-weight:700;color:var(--fg-2)}
.post-note p{margin:0 0 6px;font-size:13.5px;line-height:1.75;color:var(--fg-3)}
.post-src{margin-top:22px}
.post-src ol{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:13.5px;line-height:1.6;color:var(--fg-3)}
.post-src a{color:var(--fg-2);text-decoration:underline;text-underline-offset:2px;word-break:break-all}
.post-svc{max-width:720px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;padding:20px 22px;border:1px solid var(--line-2);border-radius:16px;background:var(--card)}
.post-svc>div{min-width:0;flex:1 1 320px}
.post-svc .k{display:block;font-size:12.5px;font-weight:600;color:var(--fg-3)}
.post-svc b{display:block;margin-top:4px;font-size:18px;font-weight:800;letter-spacing:-.015em;color:var(--fg)}
.post-svc p{margin:4px 0 0;font-size:14.5px;line-height:1.6;color:var(--fg-3)}
.post-rel{max-width:880px}
.post-rel .ins-list{margin-top:14px}
.post-all{margin:16px 0 0;font-size:15px}
.post-all a{color:var(--accent);font-weight:700;text-decoration:none}