/* =====================================================================
   pricing.css — 가격과 업무 범위 (pricing.html) · 디자인 F (2026-10-07)
   f.css · vignettes.css 다음에 연결. 내용은 assets/d/pricing.js 가 그립니다.
   넓은 화면 기준 1240px: 여정 지도 = 6칸 지도 + 점선 궤적(SVG) · 업무 범위 표 = 페이지에 붙는 머리줄
   그보다 좁으면: 여정 지도 = 세로 목록(점선 등뼈) · 표 = 상자 안에서 가로·세로로 밀기 (첫 열 · 머리줄 고정)
   ===================================================================== */

/* ---------- 공통 ---------- */
#pricing-hero .btn .arr{display:inline-block}
@media (hover:hover) and (pointer:fine){#pricing-hero .btn:hover .arr{transform:translateY(2px)}}
#journey .lede,#plans .lede,#scope .lede,#extras .lede{max-width:64ch}

/* =====================================================================
   1. 여정 지도 (.jm)
   ===================================================================== */
.jm{position:relative;margin-top:52px;--g:16px;--rail:46px;container-type:inline-size}
.jm-lanes{display:grid;gap:52px}
.jm-lane{position:relative;z-index:1;min-width:0}
.jm-lh{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px;row-gap:2px;margin-bottom:18px}
.jm-lh .k{font:500 11px/1 var(--mono-e);letter-spacing:.12em;color:var(--fg-3);display:inline-flex;align-items:center;gap:8px}
.jm-lh .k::before{content:"";width:6px;height:6px;background:var(--go);box-shadow:0 0 0 3px rgba(34,160,90,.16)}
.jm-lh h3{font-size:22px;font-weight:800;letter-spacing:-.03em;line-height:1.2}
.jm-lh p{font-size:15px;color:var(--fg-2);line-height:1.5}

/* 목록 (좁은 화면 기본): 왼쪽 점선 등뼈 + 가로 카드 */
.jm-row,.jm-zrow{list-style:none;margin:0;padding:0}
.jm-row{position:relative;display:grid;gap:14px;padding-left:24px}
.jm-row::before{content:"";position:absolute;left:7px;top:10px;bottom:10px;width:2px;
  background:repeating-linear-gradient(180deg,rgba(14,18,16,.46) 0 2px,transparent 2px 6px)}
.jm-n{position:relative;min-width:0;display:flex;flex-direction:column}
.jm-card{position:relative;display:grid;grid-template-columns:168px minmax(0,1fr);align-items:center;column-gap:14px;
  background:var(--card);border:1px solid var(--line-2);border-radius:12px;min-height:108px;flex:1 1 auto;
  transition:border-color .24s var(--ease-out),box-shadow .3s var(--ease-out),transform .2s var(--ease-out)}
.jm-card::before{content:"";position:absolute;left:-21px;top:50%;width:6px;height:6px;margin-top:-3px;background:var(--fg)}   /* 등뼈 위 정거장 */
.jm-pic{border-radius:11px 0 0 11px;overflow:hidden;align-self:stretch;display:flex;align-items:center}
.jm-pic canvas[data-vignette]{width:168px;height:108px;aspect-ratio:auto}
.jm-tx{display:flex;flex-direction:column;gap:3px;padding:12px 14px 12px 0;min-width:0}
.jm-when{font-size:13px;line-height:1.45;color:var(--fg-2);text-wrap:balance}
.jm-name{font-size:16px;font-weight:700;letter-spacing:-.02em;line-height:1.3;color:var(--fg);overflow-wrap:anywhere}
.jm-name::after{content:"";position:absolute;inset:0;border-radius:12px}   /* 카드 전체를 누를 수 있게 */
.jm-d{display:none}
.jm-pr{font-size:14.5px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.jm-pr small{display:inline-block;white-space:nowrap;font-size:12.5px;font-weight:500;color:var(--fg-2);margin-left:2px}
.jm-name:focus-visible{outline:none}
.jm-name:focus-visible::after{outline:2px solid var(--accent);outline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .jm-card:hover{border-color:var(--line-3);box-shadow:var(--sh-1)}
  .jm-card:hover .jm-name{color:var(--accent)}
}
.jm-card:active{transform:scale(.99)}

/* 연결 문구 (목록에서 카드 앞) */
.jm-via{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;margin:0 0 8px -2px;padding:5px 11px;border-radius:999px;
  font-size:13px;font-weight:600;line-height:1.35;color:var(--fg-2);background:var(--bg);border:1px solid var(--line-2)}
.jm-via::before{content:"↓";font-size:12px;color:var(--fg-3)}
.jm-via b{color:var(--fg);font-weight:700}
.jm-x{margin:18px 0 0 24px;padding:11px 14px;border:1px dashed rgba(28,112,63,.55);border-radius:12px;background:var(--tint-go);
  font-size:14px;line-height:1.55;color:var(--fg-2)}
.jm-x b{color:var(--accent);font-weight:700}

/* 묶음 (점선 상자) */
.jm-zone{position:relative;border:1px dashed var(--line-3);border-radius:14px;padding:12px 12px 12px;list-style:none;min-width:0}
.jm-zl{font-size:13.5px;font-weight:700;line-height:1.4;color:var(--fg);margin:0 0 10px}
.jm-zrow{display:grid;gap:12px}
.jm-zone .jm-card::before{left:-34px}
.jm-zc{margin:10px 0 0;font-size:13px;line-height:1.5;color:var(--fg-2)}

.jm-svg{position:absolute;left:0;top:0;pointer-events:none;overflow:visible;z-index:0;display:none}
.jm-ov{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:3;display:none}

/* 가운데 폭: 761–1239 는 장면을 조금 크게 · 1000–1239 는 두 길을 나란히 */
@media(min-width:761px) and (max-width:1239px){
  .jm-card{grid-template-columns:196px minmax(0,1fr);min-height:126px}
  .jm-pic canvas[data-vignette]{width:196px;height:126px}
}
@media(min-width:1000px) and (max-width:1239px){
  .jm-lanes{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
}
@media(max-width:400px){
  .jm-row{padding-left:20px}
  .jm-row::before{left:5px}
  .jm-card::before{left:-19px}
  .jm-zone{padding:10px}
  .jm-zone .jm-card::before{left:-30px}
  .jm-card{grid-template-columns:168px minmax(0,1fr);column-gap:12px;min-height:104px}
  .jm-pic canvas[data-vignette]{width:168px;height:104px}   /* 2px 칸 → 84×52 칸 = 장면이 잘리지 않는 안쪽 전체 (vignettes.js CW·CH) */
  .jm-tx{padding-right:10px}
}

/* 넓은 화면 (≥1240): 6칸 지도 + 점선 궤적 */
@media(min-width:1240px){
  .jm{margin-top:60px}
  .jm-lanes{gap:6px}
  .jm-lh{margin:0;max-width:calc((100% - 5 * var(--g)) / 3 + var(--g) - 28px)}   /* 판매 중 머리글이 안정화로 내려가는 선을 가리지 않게 */
  .jm-lh p{flex-basis:100%;font-size:14.5px}
  .jm-lane.pre .jm-lh{max-width:none}
  .jm-row{grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--g);padding:var(--rail) 0 66px;align-items:stretch}
  .jm-row::before{display:none}
  .jm-n.wide{grid-column:span 2}
  .jm-zone{grid-column:span var(--n);border:0;border-radius:0;padding:0;display:flex}
  .jm-zone::before{content:"";position:absolute;left:-8px;right:-8px;top:calc(-1 * var(--rail) + 8px);bottom:-8px;
    border:1px dashed var(--line-3);border-radius:16px;pointer-events:none}
  .jm-zrow{grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:var(--g);flex:1 1 auto}
  .jm-zl{position:absolute;left:8px;top:calc(-1 * var(--rail) + 8px);transform:translateY(-50%);margin:0;padding:0 8px;
    background:var(--bg);font-size:13px;white-space:nowrap;z-index:2;max-width:calc(100% - 16px);overflow:hidden;text-overflow:ellipsis}
  .jm-zc{position:absolute;left:0;right:0;top:calc(100% + 16px);margin:0;font-size:13px}
  .jm-lane.live .jm-zc{right:auto;width:calc(75% + var(--g) / 4 - 24px)}   /* 판매 중 묶음(방향 제안 · 안정화 두 칸): 안정화 가운데 앞까지만 (오른쪽은 4개월 곡선 자리) */
  .jm-lane.live .jm-row{padding-bottom:86px}
  .jm-card{display:flex;flex-direction:column;align-items:stretch;min-height:0;height:100%}
  .jm-card::before{display:none}
  .jm-pic{border-radius:11px 11px 0 0;align-self:auto;display:block}
  .jm-pic canvas[data-vignette]{width:100%;height:calc((100cqw - 5 * var(--g)) / 6 * 9 / 14)}
  .jm-tx{padding:10px 14px 14px;gap:4px;border-top:1px solid var(--line)}
  .jm-when{font-size:12.5px;min-height:2.9em}
  .jm-name{font-size:15.5px}
  .jm-n.wide .jm-d{display:block;font-size:13.5px;line-height:1.5;color:var(--fg-2)}
  .jm-via,.jm-x{display:none}
  .jm-svg,.jm-ov{display:block}
}
@media(min-width:1240px) and (max-width:1365px){.jm{--g:14px}.jm-name{font-size:15px}.jm-when{font-size:12px}}

/* 궤적 (SVG): 2px 망점 · 6px 간격 — 사이트 전체의 비행운과 같은 점선 */
.jm-svg .tr{fill:none;stroke:rgba(14,18,16,.5);stroke-width:2;stroke-dasharray:2 4}
.jm-svg .tr.fan{stroke:rgba(14,18,16,.42)}
.jm-svg .tr.go{stroke:var(--accent);stroke-dasharray:2 3.4;stroke-width:2.2}
.jm-svg .tw{fill:none;stroke:none}
.jm-svg .st{fill:var(--fg)}
.jm-svg .st.go{fill:var(--accent)}
.jm-svg .ah{fill:none;stroke:rgba(14,18,16,.7);stroke-width:1.8;stroke-linecap:square;stroke-linejoin:miter}
.jm-svg .ah.go{stroke:var(--accent)}
.jm-chip{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;padding:5px 10px;border-radius:999px;
  font-size:12.5px;font-weight:600;line-height:1.2;color:var(--fg-2);background:var(--bg);border:1px solid var(--line-2)}
.jm-chip.go{color:var(--accent);border-color:rgba(28,112,63,.5);background:var(--tint-go)}
/* 들어올 때: 궤적이 왼쪽부터 그어지고, 문구가 뒤따라 켜짐 */
.jm-svg{-webkit-clip-path:inset(0 100% 0 0);clip-path:inset(0 100% 0 0);transition:clip-path 1.9s cubic-bezier(.77,0,.175,1) .25s,-webkit-clip-path 1.9s cubic-bezier(.77,0,.175,1) .25s}
#journey.in .jm-svg{-webkit-clip-path:inset(0 -2% 0 0);clip-path:inset(-60px -2% -60px 0)}
.jm-chip{opacity:0;transition:opacity .45s var(--ease-out) var(--d,.4s)}
#journey.in .jm-chip{opacity:1}
/* 로켓 (launch.css 의 픽셀 로켓과 같은 칸 그림 · 2px 칸) */
.jm-rk{pointer-events:none;opacity:0}
.jm-rk .h{fill:var(--fg)}
.jm-rk .w{fill:var(--card)}
.jm-rk .fl{fill:var(--fire,#FF5A1F)}
.jm-rk .fc{fill:var(--fire-core,#FFC23D)}
.jm-rk .flame{opacity:0}
.jm-rk.burn .flame{opacity:1;animation:jm-flick .36s steps(2,jump-none) infinite;transform-box:fill-box;transform-origin:50% 0}
@keyframes jm-flick{0%{transform:scaleY(1)}100%{transform:scaleY(.6)}}
@media (prefers-reduced-motion:reduce){
  .jm-svg,#journey.in .jm-svg{-webkit-clip-path:none;clip-path:none;transition:none}
  .jm-chip{opacity:1;transition:none}
  .jm-rk{display:none}
}

/* =====================================================================
   2. 서비스별 가격 카드 (.pcg · .pc)
   ===================================================================== */
.pcg-list{margin-top:48px;display:grid;gap:64px}
.pcg-h{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:14px;row-gap:4px;padding-bottom:16px;border-bottom:1px solid var(--line-2);margin-bottom:20px}
.pcg-h h3{font-size:24px;font-weight:800;letter-spacing:-.03em}
.pcg-h .mono{font:500 12px/1 var(--mono-e);letter-spacing:.08em;color:var(--fg-3)}
.pcg-h p{flex-basis:100%;font-size:15.5px;color:var(--fg-2);line-height:1.6}
.pcs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
/* 정가제 카드가 있는 묶음 (성장·자립 5장): 6칸 격자 — 첫 줄 세 장(2칸씩) · 둘째 줄 두 장(3칸씩). 카드 순서는 pricing.js CARD_ORDER */
@media(min-width:1100px){
  .pcs.has-feat,.pcs.five{grid-template-columns:repeat(6,minmax(0,1fr))}
  .pcs.has-feat>.pc,.pcs.five>.pc{grid-column:span 2}
  .pcs.has-feat>.pc:nth-child(n+4),.pcs.five>.pc:nth-child(n+4){grid-column:span 3}
}
@media(max-width:1099px){.pcs{grid-template-columns:repeat(2,minmax(0,1fr))}.pcs.has-feat .pc.feat{grid-column:1 / -1}}
@media(max-width:700px){.pcs{grid-template-columns:1fr}}

.pc{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--card);border:1px solid var(--line-2);border-radius:18px;padding:26px 24px 24px;
  scroll-margin-top:calc(var(--nav-h) + 20px)}
.pc.feat{border:1.5px solid var(--fg);box-shadow:var(--sh-2)}
.pc:target{border-color:var(--accent);box-shadow:0 0 0 3px rgba(28,112,63,.18)}
.pc-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.pc-n{font-size:22px;font-weight:800;letter-spacing:-.03em;line-height:1.25}
.pc-badge{flex:none;display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;background:var(--fg);color:var(--card);
  font-size:12.5px;font-weight:700;letter-spacing:.02em;line-height:1}
.pc-badge::before{content:"";width:6px;height:6px;background:var(--go)}
.pc-d{margin-top:8px;font-size:15px;line-height:1.6;color:var(--fg-2);text-wrap:pretty}
.pc-price{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.pc-big{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px;row-gap:2px;color:var(--accent);line-height:1.1}
.pc-big .num{font-size:clamp(30px,2.5vw,38px);font-weight:800;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.pc-big .pre{font-size:17px;font-weight:700;letter-spacing:-.02em}
.pc-big .suf{font-size:22px;font-weight:700;margin-left:-4px}
.pc-big .vat{font-size:13px;font-weight:600;color:var(--fg-3);letter-spacing:0;margin-left:4px}
.pc-note{margin-top:6px;font-size:14px;line-height:1.5;color:var(--fg-2)}
.pc-meta{margin-top:14px;display:grid;gap:6px;align-content:start}
.pc-meta>div{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px;font-size:14px;line-height:1.55}
.pc-meta dt{color:var(--fg-3);font-weight:600}
.pc-meta dd{margin:0;color:var(--fg)}
.pc-rules{list-style:none;margin:14px 0 0;padding:12px 14px;display:grid;gap:6px;background:var(--bg);border-radius:12px;font-size:14px;line-height:1.5;color:var(--fg-2)}
.pc-rules b{color:var(--fg);margin-right:6px}
.pc-body{margin-top:18px;display:grid;gap:16px}
.pc-lb{font-size:12.5px;font-weight:700;letter-spacing:.02em;color:var(--fg-3);margin-bottom:6px}
.pc-inc,.pc-exc,.pc-mo{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.pc-inc li,.pc-exc li{position:relative;padding-left:22px;font-size:14.5px;line-height:1.55;color:var(--fg)}
.pc-inc li::before{content:"✓";position:absolute;left:2px;top:0;color:var(--accent);font-weight:700}
.pc-exc li{color:var(--fg-2)}
.pc-exc li::before{content:"—";position:absolute;left:0;top:0;color:var(--fg-3)}
.pc-mo{counter-reset:none;border-left:2px solid var(--line-2);margin-left:4px;padding-left:14px;gap:6px}
.pc-mo li{font-size:14.5px;line-height:1.5;color:var(--fg)}
.pc-mo li span{display:inline-block;min-width:64px;font-size:13px;font-weight:600;line-height:1.4;color:var(--fg-3);font-variant-numeric:tabular-nums}
.pc-ctas{margin-top:auto;padding-top:22px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px}
.pc-ctas .btn{padding:12px 18px;font-size:14px}
/* 보조 링크 (자세히 보기): 꽉 찬 버튼은 카드마다 하나 */
.pc-lnk{align-self:center;padding:12px 4px;font-size:14px;font-weight:600;line-height:1.2;color:var(--fg);text-decoration:none;
  border-bottom:1px solid var(--line-3);padding-bottom:3px;margin-top:9px;margin-bottom:9px;transition:border-color .2s var(--ease-out)}
.pc-lnk:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
@media (hover:hover) and (pointer:fine){.pc-lnk:hover{border-color:var(--fg)}}
/* 나머지 범위 (좁은 화면에서만 접힘 · pricing.js foldPlans) */
.pc-more>summary{display:none}
.pc-more>.pc-inc{margin-top:4px}
.pc-more>.pc-x{margin-top:16px}
@media(max-width:700px){
  .pc-more>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;margin-top:10px;padding:8px 0;
    font-size:14px;font-weight:700;color:var(--accent);-webkit-tap-highlight-color:transparent}
  .pc-more>summary::-webkit-details-marker{display:none}
  .pc-more>summary::after{content:"+";font-size:18px;font-weight:400;line-height:1;transition:transform .25s var(--ease-out)}
  .pc-more[open]>summary::after{transform:rotate(45deg)}
  .pc-more>summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
  .pc-more>.pc-inc{margin-top:2px}
  .pc{padding:22px 20px 20px}
  .pc-price{margin-top:14px;padding-top:14px}
  .pc-body{margin-top:14px}
  .pc-ctas{padding-top:16px}
}
/* 2026-10-08: 구간별 가격 표 (광고 구조 최적화) · 진행 순서 · 가격 기준 · 옵션 (Listing Studio) */
.pc .tierbox.in-pc{margin-top:16px;max-width:none}
.pc .tierbox.in-pc .tiers{font-size:14px}
.pc .tierbox.in-pc .tiers th,.pc .tierbox.in-pc .tiers td{padding:8px 12px}
.pc .tierbox.in-pc .tiers thead th{padding-top:7px;padding-bottom:5px}
.svsteps.in-pc{display:flex;flex-wrap:wrap;align-items:center;gap:6px 4px}
.svsteps.in-pc li{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;font-size:14px;line-height:1.4;color:var(--fg)}
.svsteps.in-pc li b{font-weight:600;padding:4px 9px;border:1px solid var(--line-2);border-radius:999px;background:var(--bg);white-space:nowrap}
.svsteps.in-pc li .k,.svsteps.in-pc li .t{display:none}
.svsteps.in-pc li:not(:last-child)::after{content:"→";content:"→" / "";color:var(--fg-3);font-size:13px}
.pc-tx{font-size:14.5px;line-height:1.6;color:var(--fg-2)}
.pc-opt{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.pc-opt li{font-size:14.5px;line-height:1.55;color:var(--fg-2)}
.pc-opt b{color:var(--fg);margin-right:4px}
.pc-opt small{display:block;font-size:13px;color:var(--fg-3)}
@container (max-width:340px){.pc .tierbox.in-pc .tiers th,.pc .tierbox.in-pc .tiers td{padding-left:9px;padding-right:9px}}
@container (max-width:280px){.pc .tierbox.in-pc .tiers{font-size:13px}.pc .tierbox.in-pc .tiers th,.pc .tierbox.in-pc .tiers td{padding-left:7px;padding-right:7px}}
.pc.feat .pc-body{grid-template-columns:1fr}
@media(min-width:701px) and (max-width:1099px){
  .pc.feat .pc-body{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
  .pc.feat .pc-body>.pc-blk:first-child{grid-row:span 2}
}

/* =====================================================================
   3. 업무 범위 비교표 (.sc)
   ===================================================================== */
#scope{overflow:visible}   /* 머리줄이 페이지에 붙도록 (.band 의 overflow:hidden 해제) */
.sc-legend{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:34px;font-size:14.5px;color:var(--fg-2)}
.sc-legend span{display:inline-flex;align-items:center;gap:8px}
.sc-legend i{font-style:normal}
.sc-legend .ck{color:var(--accent);font-weight:700}
.sc-legend .no{color:var(--fg-3)}
.sc-legend .op{display:inline-block;padding:1px 7px;border-radius:999px;border:1px solid var(--line-3);font-size:12px;font-weight:600;line-height:1.35;color:var(--fg-2)}
.sc-tools{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px}
.sc-hint{display:none;margin-top:10px;font-size:14px;color:var(--fg-3)}
.sc-mode{display:none;margin-top:10px;padding:8px 2px 3px;border:0;border-bottom:1px solid var(--line-3);background:none;border-radius:0;
  font:inherit;font-size:14px;font-weight:700;color:var(--fg);cursor:pointer;-webkit-tap-highlight-color:transparent}
.sc-mode:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.sc-two{display:none}
.sc-wrap{margin-top:16px;position:relative;border:1px solid var(--line-2);border-radius:16px;background:var(--card)}
.sc-wrap:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sc-tbl{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:14.5px;line-height:1.45}
.sc-tbl col.c0{width:23%}
.sc-tbl th,.sc-tbl td{border-bottom:1px solid var(--line);padding:11px 6px;vertical-align:middle;text-align:center;font-weight:400}
.sc-tbl thead th{position:sticky;top:var(--nav-h);z-index:3;background:var(--bg-2);border-bottom:1px solid var(--line-2)}
.sc-tbl thead .r1 th{height:36px;padding:0 6px;font-size:13px;font-weight:700;color:var(--fg);letter-spacing:.01em}
.sc-tbl thead .r1 .g{border-left:1px solid var(--line-2)}
.sc-tbl thead .r1 th:first-child{border-top-left-radius:15px;text-align:left;padding-left:16px;vertical-align:bottom;padding-bottom:12px;z-index:4}
.sc-tbl thead .r1 th:last-child{border-top-right-radius:15px}
.sc-tbl thead .r1 .c0 span{font-size:13px;font-weight:600;color:var(--fg-3)}
.sc-tbl thead .r2 th{top:calc(var(--nav-h) + 36px);padding:10px 4px 11px;vertical-align:top;border-top:1px solid var(--line)}
.sc-tbl thead .r2 a{min-height:2.6em;display:block;font-size:13px;font-weight:700;line-height:1.3;letter-spacing:-.01em;color:var(--fg);overflow-wrap:anywhere;text-wrap:balance}
.sc-tbl thead .r2 small{display:block;margin-top:4px;font-size:12px;font-weight:600;color:var(--accent);font-variant-numeric:tabular-nums;line-height:1.3}
.sc-tbl .gs{border-left:1px solid var(--line-2)}
.sc-tbl tbody th{text-align:left;padding:11px 14px 11px 16px;color:var(--fg);font-size:14.5px;line-height:1.45;background:var(--card)}
.sc-tbl tbody tr.gr th{padding:18px 16px 8px;font-size:13px;font-weight:700;color:var(--fg-3);letter-spacing:.02em;background:var(--card);border-bottom:1px solid var(--line-2)}
.sc-tbl tbody tr.gr th span{display:inline-block}
.sc-tbl td.y .ck{color:var(--accent);font-weight:700;font-size:16px}
.sc-tbl td.o .op{display:inline-block;padding:2px 7px;border-radius:999px;border:1px solid var(--line-3);font-size:12px;font-weight:600;color:var(--fg-2);line-height:1.35}
.sc-tbl td.n{color:var(--fg-3)}
.sc-tbl td.nn{text-align:left;padding-left:14px;color:var(--fg-2);font-size:14px}
.sc-tbl td.nn span{display:inline-block;padding-left:18px;position:relative}
.sc-tbl td.nn span::before{content:"—";position:absolute;left:0;color:var(--fg-3)}
.sc-tbl tbody.none tr:not(.gr) th,.sc-tbl tbody.none td{background:var(--bg)}
.sc-tbl tbody:last-of-type tr:last-child th,.sc-tbl tbody:last-of-type tr:last-child td{border-bottom:none}
.sc-tbl tbody:last-of-type tr:last-child th{border-bottom-left-radius:15px}
.sc-tbl tbody:last-of-type tr:last-child td:last-child{border-bottom-right-radius:15px}
.sc-tbl .hv{background:var(--tint-go)}
.sc-tbl thead .hv{background:#DCE6D4}
.sc-foot{margin-top:14px;font-size:14px;line-height:1.6;color:var(--fg-2)}
.sc-foot b{color:var(--fg);margin-right:6px}

/* 넓고 낮은 화면 (예: 1280×720): 묶음 머리줄은 같이 올라가고, 서비스 이름 줄만 붙음 → 고정 머리가 화면을 덜 차지
   첫 칸('업무', 두 줄 높이)은 위 36px 만큼 메뉴 밑으로 숨긴 채 붙어, 서비스 이름 줄과 같은 높이에 남음 */
@media(min-width:1240px) and (max-height:820px){
  .sc-tbl thead .r1 th{position:static}
  .sc-tbl thead .r1 th.c0{position:sticky;top:calc(var(--nav-h) - 36px)}
  .sc-tbl thead .r2 th{top:var(--nav-h)}
  .sc-tbl thead .r2 a{min-height:2.6em;font-size:12.5px}
}

/* 좁은 화면: 표는 상자 안에서 밀기 (머리줄 · 첫 열 고정) */
@media(max-width:1239px){
  .sc-hint{display:block}
  .sc-wrap{overflow:auto;max-height:min(78vh,760px);max-height:min(78svh,760px);overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .sc-tbl{--c0:200px;--cw:86px;width:calc(var(--c0) + var(--n,11) * var(--cw));min-width:100%}
  .sc-tbl col.c0{width:var(--c0)}
  .sc-tbl col:not(.c0){width:var(--cw)}
  .sc-tbl thead th{top:0}
  .sc-tbl thead .r2 th{top:36px}
  .sc-tbl thead .r1 th:first-child,.sc-tbl tbody th{position:sticky;left:0;z-index:2;box-shadow:1px 0 0 var(--line-2)}
  .sc-tbl thead .r1 th:first-child{z-index:5;background:var(--bg-2)}
  .sc-tbl tbody tr.gr th{position:static;box-shadow:none}
  .sc-tbl tbody tr.gr th span{position:sticky;left:16px}
  .sc-tbl thead .r1 .g{text-align:left;padding-left:12px}
  .sc-tbl thead .r1 .g span{position:sticky;left:calc(var(--c0) + 12px)}
  .sc-tbl td.nn span{position:sticky;left:214px}
}
/* 좁은 화면 (≤760): 기본은 '두 서비스 비교' · '11개 모두 보기' 를 누르면 전체 표 (상자 안에서 밀기) */
@media(max-width:760px){
  .sc:not(.all) .sc-two .sc-mode,.sc.all .sc-tools .sc-mode{display:inline-block}
  .sc:not(.all) .sc-wrap,.sc:not(.all) .sc-tools{display:none}
  .sc:not(.all) .sc-two{display:block}
  .sc-two{margin-top:22px}
  .sc-two-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 14px}
  .sc-two-h .sc-mode{margin-top:0}
  .sc-two-l{font-size:14.5px;font-weight:700;color:var(--fg)}
  .sc-sel{margin-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .sc-sel label{display:block;min-width:0}
  .sc-sel select{width:100%;min-width:0;-webkit-appearance:none;appearance:none;padding:11px 30px 11px 12px;border:1px solid var(--line-3);border-radius:12px;
    background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%230E1210' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center;
    font:inherit;font-size:16px;font-weight:600;line-height:1.3;color:var(--fg);text-overflow:ellipsis}
  .sc-sel select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .sc2{margin-top:12px;width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;font-size:14px;line-height:1.45;
    background:var(--card);border:1px solid var(--line-2);border-radius:16px}
  .sc2 th,.sc2 td{border-bottom:1px solid var(--line);padding:10px 6px;vertical-align:middle;text-align:center;font-weight:400}
  .sc2 thead th{position:sticky;top:var(--nav-h);z-index:3;background:var(--bg-2);border-bottom:1px solid var(--line-2);vertical-align:top;padding:11px 6px}
  .sc2 thead th:first-child{width:46%;text-align:left;padding-left:12px;vertical-align:bottom;border-top-left-radius:15px}
  .sc2 thead th:last-child{border-top-right-radius:15px}
  .sc2 thead th.c0 span{font-size:13px;font-weight:600;color:var(--fg-3)}
  .sc2 thead a{display:block;font-size:13.5px;font-weight:700;line-height:1.3;color:var(--fg);overflow-wrap:anywhere;text-wrap:balance}
  .sc2 thead small{display:block;margin-top:3px;font-size:12px;font-weight:600;color:var(--accent);font-variant-numeric:tabular-nums}
  .sc2 tbody th{text-align:left;padding:10px 8px 10px 12px;color:var(--fg);font-size:13.5px;line-height:1.45}
  .sc2 tbody tr.gr th{padding:16px 12px 8px;font-size:13px;font-weight:700;color:var(--fg-3);border-bottom:1px solid var(--line-2)}
  .sc2 td.y .ck{color:var(--accent);font-weight:700;font-size:16px}
  .sc2 td.o .op{display:inline-block;padding:2px 7px;border-radius:999px;border:1px solid var(--line-3);font-size:12px;font-weight:600;color:var(--fg-2);line-height:1.35}
  .sc2 td.n{color:var(--fg-3)}
  .sc2 td.nn{text-align:left;padding-left:8px;color:var(--fg-2);font-size:13.5px}
  .sc2 td.nn span{display:inline-block;padding-left:18px;position:relative}
  .sc2 td.nn span::before{content:"—";position:absolute;left:0;color:var(--fg-3)}
  .sc2 tbody.none tr:not(.gr) th,.sc2 tbody.none td{background:var(--bg)}
  .sc2 tbody:last-of-type tr:last-child th,.sc2 tbody:last-of-type tr:last-child td{border-bottom:none}
  .sc2 tbody:last-of-type tr:last-child th{border-bottom-left-radius:15px}
  .sc2 tbody:last-of-type tr:last-child td:last-child{border-bottom-right-radius:15px}
}
@media(max-width:760px){
  .sc-tbl{--c0:136px;--cw:78px}
  .sc-tbl tbody th{padding:10px 10px 10px 12px;font-size:13.5px}
  .sc-tbl tbody tr.gr th{padding:16px 12px 8px}
  .sc-tbl tbody tr.gr th span{left:12px}
  .sc-tbl td.nn span{left:148px}
  .sc-tbl thead .r1 th:first-child{padding-left:12px}
  .sc-tbl thead .r2 a{min-height:2.6em;font-size:12.5px}
  .sc-tbl thead .r2 small{font-size:11.5px}
}

/* =====================================================================
   4. 실비 · 차감·연계 · 결제·환불 (.ex)
   ===================================================================== */
.ex{margin-top:44px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
@media(max-width:1099px){.ex{grid-template-columns:1fr 1fr}.ex>.ex-p:nth-child(2){grid-row:span 2}}
@media(max-width:760px){.ex{grid-template-columns:1fr}.ex>.ex-p:nth-child(2){grid-row:auto}}
.ex-p{background:var(--card);border:1px solid var(--line-2);border-radius:18px;padding:26px 24px;min-width:0}
.ex-p h3{font-size:20px;font-weight:800;letter-spacing:-.03em;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.ex-p h3 small{font-size:13px;font-weight:600;color:var(--fg-3);letter-spacing:0}
.ex-dl{margin:14px 0 0;display:grid}
.ex-dl>div{padding:12px 0;border-top:1px solid var(--line)}
.ex-dl dt{font-size:13px;font-weight:700;color:var(--fg-3);margin-bottom:3px}
.ex-dl dd{margin:0;font-size:15px;line-height:1.6;color:var(--fg)}
.ex-dl.sm dd{font-size:14px;color:var(--fg-2)}
.ex-lb{margin-top:18px;font-size:13.5px;font-weight:800;color:var(--fg)}
.ex-lb+.ex-dl{margin-top:6px}
.ex-rules{list-style:none;margin:14px 0 0;padding:0;display:grid}
.ex-rules li{padding:12px 0;border-top:1px solid var(--line);display:grid;gap:3px}
.ex-rules b{font-size:15px;font-weight:700;color:var(--fg);line-height:1.5}
.ex-rules span{font-size:14.5px;line-height:1.6;color:var(--fg-2)}
.ex-rules small{font-size:13.5px;line-height:1.55;color:var(--fg-3)}
.ex-more{margin-top:6px;border-top:1px solid var(--line)}
.ex-more summary{cursor:pointer;list-style:none;padding:12px 0 4px;font-size:14px;font-weight:700;color:var(--accent);display:flex;align-items:center;gap:8px}
.ex-more summary::-webkit-details-marker{display:none}
.ex-more summary::after{content:"+";font-size:18px;font-weight:400;line-height:1;transition:transform .25s var(--ease-out)}
.ex-more[open] summary::after{transform:rotate(45deg)}
.ex-more summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.ex-more .ex-dl{margin-top:4px}

/* =====================================================================
   5. FAQ
   ===================================================================== */
#pricing-faq .faq{margin-top:34px}

/* 인쇄 */
@media print{
  .jm-svg,.jm-ov{display:none!important}
  .sc-wrap{overflow:visible!important;max-height:none!important}
  .sc-tbl thead th{position:static!important}
}

/* 모바일 전체 비교표: 표 안에서 스크롤해 서비스 이름 줄이 위에 붙어 있게 */
@media (max-width:760px){#sc-full{max-height:calc(100svh - 140px);overflow:auto;overscroll-behavior:contain}#sc-full thead th{position:sticky;top:0;z-index:3}#sc-full thead th.c0{z-index:4}}
/* 2026-10-12: 판매 중 묶음 6장(아마존 운영대행 추가) = 세 장씩 두 줄 */
@media(min-width:1100px){.pcs.has-feat.six>.pc,.pcs.has-feat.six>.pc:nth-child(n+4){grid-column:span 2}}