/* 아라봄 사이트 v3 · 상세 — 자동 생성 docs/design-qa-261001/port/build_live.py · 원본 docs/design-qa-261001/{v3f3,pdp/v3,process}/src · 손편집 금지 */
/* ===== 아라봄 상세 페이지 v3 — 홈 v3.2 디자인 시스템 공유(home.css 뒤에 붙음) =====
   첫 화면 = 무엇·얼마·누가·언제 + 실제 리포트 / 글자 고정·사물만 움직임 / 노랑 단일 강조 */

/* ---------- 첫 화면 ---------- */
.p-hero{background:var(--night);color:#fff;overflow:hidden}
.p-hero .in{display:grid;grid-template-columns:1.06fr .94fr;gap:48px;align-items:center;min-height:min(860px,calc(100vh - 108px));padding-top:36px;padding-bottom:64px}
.crumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:var(--on-night-3);margin-bottom:26px}
.crumb a{transition:color var(--t-fast)}.crumb a:hover{color:#fff}
.crumb i{font-style:normal}
.p-eyebrow{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--on-night-2)}
.p-hero h1{margin-top:16px;font-size:clamp(32px,3.6vw,48px);line-height:1.2;letter-spacing:-.045em;font-weight:800;max-width:640px}
.p-hero h1.name{font-size:clamp(60px,7.4vw,104px);line-height:1;letter-spacing:-.055em}
.p-hero .tagline{margin-top:14px;font-size:clamp(22px,2.2vw,28px);font-weight:700;letter-spacing:-.03em;color:#fff}
.p-hero .lede{margin-top:16px;font-size:18px;line-height:1.6;color:var(--on-night-2);max-width:540px}
.p-specs{display:flex;flex-wrap:wrap;margin-top:30px;border-top:1px solid var(--line-night);border-bottom:1px solid var(--line-night)}
.p-specs div{padding:14px 22px 14px 0;font-size:13px;color:var(--on-night-3)}
.p-specs div+div{padding-left:22px;border-left:1px solid var(--line-night)}
.p-specs b{display:block;color:#fff;font-size:16px;font-weight:700;letter-spacing:-.01em;margin-bottom:2px}
.p-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;margin-top:26px}
.p-price s{font-size:16px;color:var(--on-night-3)}
.p-price b{font-size:46px;font-weight:800;letter-spacing:-.04em;line-height:1.1}
.p-price b small{font-size:20px;font-weight:700;margin-left:2px}
.p-price .plus{font-size:20px;font-weight:700;color:var(--on-night-2)}
.p-price em{font-style:normal;font-size:13px;font-weight:600;color:var(--on-night-2)}
.p-cta{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
.p-proof{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:20px;font-size:14px;color:var(--on-night-2)}
.p-proof b{color:#fff;font-weight:700}
.p-proof a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:4px}
.p-proof a:hover{text-decoration-color:#fff}
.p-hero .stage{--pw:clamp(250px,calc((100vh - 300px) * .466),330px)}
.p-hero .layer{opacity:0;transform:translateY(10px);transition:opacity var(--t-slow) var(--e-std),transform var(--t-slow) var(--e-out)}
.p-hero .layer.on{opacity:1;transform:none}
@media(max-width:900px){.p-hero .in{grid-template-columns:1fr;gap:44px;min-height:0;padding-top:28px;padding-bottom:64px}.p-hero .stage{--pw:260px}.p-hero .lede{font-size:17px}}
@media(max-width:560px){
  .p-specs{display:grid;grid-template-columns:1fr 1fr}
  .p-specs div{padding:12px 12px 12px 0}
  .p-specs div+div{padding-left:0;border-left:0}
  .p-specs div:nth-child(even){padding-left:14px;border-left:1px solid var(--line-night)}
  .p-specs div:nth-child(n+3){border-top:1px solid var(--line-night)}
  .p-cta{display:grid;grid-template-columns:1fr;gap:8px}
  .p-cta .btn{width:100%}
  .p-price b{font-size:40px}
}

/* ---------- 리포트 구성 (목차 ↔ 실제 화면) ---------- */
.toc .tgrid{display:grid;grid-template-columns:.9fr 1.1fr;gap:72px;margin-top:var(--gap-head)}
.toc .sticky{position:sticky;top:120px;display:flex;flex-direction:column;align-items:center;--pw:300px}
.toc .sticky .tag{margin-bottom:18px}
.toc .tphone .layer{opacity:0;transition:opacity var(--t-slow) var(--e-std)}
.toc .tphone .layer.on{opacity:1}
.tlist{list-style:none}
.t{min-height:40vh;display:flex;flex-direction:column;justify-content:center;padding:32px 0 32px 32px;border-left:2px solid var(--line);position:relative;cursor:pointer}
.t::before{content:'';position:absolute;left:-2px;top:0;bottom:0;width:2px;background:var(--ink);transform:scaleY(0);transform-origin:top;transition:transform var(--t-base) var(--e-out)}
.t.on::before{transform:scaleY(1)}
.t .pt{font-size:13px;font-weight:700;color:var(--ink-3);margin-bottom:10px}
.t h3{font-size:30px;line-height:1.25;letter-spacing:-.035em;font-weight:800;color:var(--ink-dim);transition:color var(--t-base) var(--e-std)}
.t p{margin-top:10px;font-size:17px;color:var(--ink-3);max-width:440px;transition:color var(--t-base)}
.t.on .pt{color:var(--ink)}.t.on h3{color:var(--ink)}.t.on p{color:var(--ink-2)}
.t .tshot{display:none}
@media(max-width:900px){
  .toc .tgrid{display:block;margin-top:36px}
  .toc .tphone{display:none}
  .tlist{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -20px;padding:4px 20px 18px;scrollbar-width:none}
  .tlist::-webkit-scrollbar{display:none}
  .t{flex:none;width:min(78vw,300px);min-height:0;scroll-snap-align:start;border-left:0;padding:0;cursor:default}
  .t::before{display:none}
  .t .tshot{display:flex;justify-content:center;background:var(--bg-2);border-radius:var(--r-md);padding:22px 0;margin-bottom:16px;--pw:190px}
  .t h3{font-size:22px;color:var(--ink)}.t .pt{color:var(--ink-3)}.t p{font-size:15px;color:var(--ink-2)}
}

/* ---------- 이럴 때 읽어요 ---------- */
.fit .grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}
.fit ul{list-style:none;border-top:1.5px solid var(--ink)}
.fit li{display:flex;gap:16px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line);font-size:19px;font-weight:600;letter-spacing:-.02em;line-height:1.45}
.fit li .lens{flex:none;transform:rotate(45deg) translateY(-2px)}
@media(max-width:900px){.fit .grid{grid-template-columns:1fr;gap:28px}.fit li{font-size:17px;padding:18px 0}}

/* ---------- 실제 후기 ---------- */

/* ---------- 상세 페이지 배경 리듬: 흰 ↔ 회 교대 (편마다 섹션 구성이 달라 빌더가 .alt 부여) ---------- */
.fit{background:var(--bg-2)}
.rv{background:#fff}
.rv .rq{background:var(--bg-2)}
.faqs{background:var(--bg-2)}
.who.alt{background:var(--bg-2)}

.rv .top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.rv .sum{margin-top:14px;font-size:15px;color:var(--ink-2)}
.rv .sum b{color:var(--ink);font-size:17px}
.rv-grid{columns:2;column-gap:20px;margin-top:var(--gap-head)}
.rq{break-inside:avoid;margin:0 0 20px;background:#fff;border-radius:var(--r-md);padding:26px 26px 22px}
.rq .st{font-size:13px;letter-spacing:.12em;color:var(--ink)}
.rq blockquote{margin-top:12px;font-size:17px;line-height:1.65;color:var(--ink);font-weight:500;letter-spacing:-.015em}
.rq figcaption{margin-top:14px;font-size:13px;color:var(--ink-3);font-weight:500}
.rq.pre-tag figcaption{color:var(--ink-3)}
@media(max-width:760px){.rv-grid{columns:1}.rq{padding:22px 20px 18px}.rq blockquote{font-size:16px}}

/* ---------- 가격 ---------- */
.pricing .grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}
.pbox{border:1.5px solid var(--ink);border-radius:var(--r-lg);padding:30px 30px 26px}
.prow{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font-size:16px}
.prow span:first-child{color:var(--ink-2)}
.prow.main{padding-top:0}
.prow.main span:first-child{font-size:18px;font-weight:800;color:var(--ink)}
.prow b{font-size:18px;font-weight:800;letter-spacing:-.02em}
.prow.main b{font-size:28px;letter-spacing:-.03em}
.prow s{font-size:15px;color:var(--ink-3);margin-right:8px}
.pnotes{list-style:none;margin-top:18px}
.pnotes li{display:flex;gap:10px;align-items:baseline;font-size:15px;color:var(--ink-2);padding:4px 0}
.pnotes li .lens{transform:rotate(45deg) translateY(-2px)}
.pbox .acts{display:flex;gap:18px;align-items:center;margin-top:22px;flex-wrap:wrap}
@media(max-width:900px){.pricing .grid{grid-template-columns:1fr;gap:28px}.pbox{padding:22px 20px}.prow.main b{font-size:24px}}

/* ---------- 함께 보면 좋은 리포트 ---------- */
.cross .row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:var(--gap-head)}
.xc{display:grid;grid-template-columns:96px 1fr;gap:18px;align-items:center;padding:18px;border-radius:var(--r-md);box-shadow:inset 0 0 0 1.5px var(--line);transition:box-shadow var(--t-fast) var(--e-std),transform var(--t-fast) var(--e-std)}
.xc:hover{box-shadow:inset 0 0 0 1.5px var(--ink);transform:translateY(-2px)}
.xc .th{width:96px;height:132px;border-radius:10px}
.xc small{display:block;font-size:13px;color:var(--ink-3);font-weight:600}
.xc b{display:block;font-size:19px;font-weight:800;letter-spacing:-.02em;margin-top:2px}
.xc span.d{display:block;font-size:14px;color:var(--ink-2);margin-top:4px;line-height:1.5}
.xc em{display:block;font-style:normal;font-size:15px;font-weight:700;margin-top:8px}
@media(max-width:900px){.cross .row{grid-template-columns:1fr;gap:12px}}

/* ---------- 마지막(상세) ---------- */
.fin .p-fin-price{margin-top:14px;font-size:18px;color:var(--on-night-2)}
.fin .p-fin-price b{color:#fff;font-weight:800}

/* =====================================================================
   v3.4 에디토리얼 정리 (상세) — 둥근 후기 카드·테두리 가격 상자·썸네일 교차 카드 걷어내기
   ===================================================================== */
/* 후기: 회색 둥근 카드 → 헤어라인 사이의 인용 */
.rv .rq,.rq{background:none;border-radius:0;padding:26px 0 24px;margin:0;border-top:1px solid var(--line-2)}
.rv-grid{column-gap:56px;border-top:1.5px solid var(--ink);margin-top:var(--gap-head)}
.rv-grid .rq:first-child{border-top:0}
.rq .st{font-size:12px;letter-spacing:.18em;color:var(--ink-3)}
.rq blockquote{margin-top:10px;font-size:18px;line-height:1.65;font-weight:600}
.rq figcaption{margin-top:12px}
@media(max-width:760px){.rq{padding:22px 0 20px}.rq blockquote{font-size:16.5px}}
/* 가격: 테두리 상자 → 위아래 헤어라인 표 */
.pbox{border:0;border-radius:0;padding:0;border-top:1.5px solid var(--ink)}
.prow{padding:18px 0}
.prow.main{padding-top:20px}
.pnotes{margin-top:14px}
.pbox .acts{margin-top:26px}
@media(max-width:900px){.pbox{padding:0}}
/* 함께 보면 좋은 리포트: 썸네일 카드 → 줄 목록 */
.cross .row{display:block;margin-top:var(--gap-head);border-top:1.5px solid var(--ink)}
.xc{display:grid;grid-template-columns:200px 1fr 190px;gap:8px 32px;align-items:baseline;padding:24px 0;border-bottom:1px solid var(--line-2);border-radius:0;box-shadow:none;transition:background var(--t-fast) var(--e-std)}
.xc:hover{box-shadow:none;transform:none;background:rgba(17,17,17,.03)}
.xc b{font-size:24px;font-weight:800;letter-spacing:-.03em;margin:0}
.xc span.d{font-size:15.5px;color:var(--ink-2);margin:0}
.xc em{font-size:15px;font-weight:700;margin:0;white-space:nowrap;text-align:right}
.xc em .arr{display:inline-block;margin-left:6px;transition:transform var(--t-base) var(--e-out)}
.xc:hover em .arr{transform:translateX(4px)}
@media(max-width:760px){.xc{grid-template-columns:1fr auto;padding:20px 0}.xc span.d{grid-column:1 / -1;grid-row:2}.xc b{font-size:21px}}
/* 목차(모바일 가로 넘김): 회색 둥근 상자 제거 */
@media(max-width:900px){.t .tshot{background:none;border-radius:0;padding:6px 0 4px;border-bottom:1px solid var(--line-2)}}
/* v3.5: 장 목록 가로 스크롤 — 스냅 위치가 화면 여백(20px)을 지키도록 */
@media(max-width:900px){.tlist{scroll-padding-inline:20px}}
/* v3.5: 이름 충돌 정리 — 장 목록의 .t 규칙이 '진행 4단계'의 시간 표기(b.t)에 새어 들어가 폭·높이·왼쪽 막대가 붙던 문제 */
.itin b.t{width:auto;min-height:0;flex:none;border-left:0;scroll-snap-align:none;justify-content:flex-start}