/* 업그레이드 묶음 (10/31 시안) — 기존 틀은 그대로, 읽기 쉽게 · 깔끔하게 · 효과 */

/* ── 읽기 쉽게: 상세 사양 ── */
.specs .sl>div{display:grid;grid-template-columns:132px minmax(0,1fr);gap:16px;align-items:start;padding:15px 0;font-size:16px;line-height:1.55}
.specs .sl>div span{color:#4e5968;font-weight:600;font-size:15px;width:auto;max-width:none;flex:none}
.specs .sl>div b{color:#191f28;font-weight:600;text-align:left;word-break:keep-all;overflow-wrap:anywhere}
.specs .sh2 h3{font-size:20px}
.specs .sx{transition:background-color .2s,transform .15s}
.specs .sx:active{transform:scale(.98)}

/* 금액 한 곳만: 위 칸은 보증금 · 약정 · 매수 · 초과 네 칸 */
.pd .kv.up-np{grid-template-columns:1fr 1fr!important}

/* 상품 정보 글자 진하게 */
.pd .kv span{color:#4e5968}
.pd h1 small{color:#4e5968}

/* ── 제품 사진: 크게 · 마우스 따라 확대 ── */
.pd .gal{overflow:hidden;cursor:zoom-in}
.pd .gal img{transition:transform .5s cubic-bezier(.2,.7,.2,1);transform-origin:var(--zx,50%) var(--zy,50%);will-change:transform}
.pd .gal.zoom img{transform:scale(1.9)}

/* ── 위 메뉴: 내리면 얇은 그림자 ── */
.hd{transition:box-shadow .3s}
.hd.up-sc{box-shadow:0 6px 24px rgba(0,0,0,.06)}

/* ── 설치 사례 · 다른 기종 카드: 올리면 사진 살짝 확대 ── */
.cg a img,.cg>div img,.pgrid a img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.cg a:hover img,.cg>div:hover img,.pgrid a:hover img{transform:scale(1.05)}
.pgrid a{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.pgrid a:hover{transform:translateY(-4px)}

/* ── 상세 설명 그림: 들어올 때 ── */
.det img{transition:opacity .8s,transform .8s cubic-bezier(.2,.7,.2,1)}

/* ── 휴대폰 ── */
@media (max-width:860px){
  /* 위치 줄: 단추가 화면 밖으로 안 나가게 */
  .ph-s .w{flex-wrap:wrap;row-gap:12px}
  .phs-r{flex-wrap:wrap;width:100%}
  .phs-r a{flex:1;justify-content:center;white-space:nowrap}

  /* 순서: 사진 → 금액 · 옵션 → 상세 사양 */
  .pd{display:flex;flex-direction:column}
  .pd .lc{display:contents}
  .pd>*,.pd .gal,.pd .specs{width:100%}
  .pd .gal{order:1;height:64vw!important;max-height:340px}
  .pd>div:last-child{order:2}
  .pd .specs{order:3}

  /* 사양: 이름 위 · 값 아래 */
  .specs .sl>div{grid-template-columns:1fr;gap:4px;padding:14px 0}
  .specs .sl>div span{font-size:15px}
  .pd .gal{cursor:default}

  /* 금액 띠: 상자와 띠가 따로 붙어 어긋나던 것 → 띠만 아래에 붙음 (원래 화면 고장 고침) */
  .stk{background:none!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;padding:0!important;bottom:84px}
  .stk .sum{position:relative!important;bottom:auto!important}

  /* 기능 꼬리표: 붙지 않게 줄바꿈 */
  .pd .feat.up-wrap{display:flex!important;flex-wrap:wrap;gap:6px}
  .pd .feat.up-wrap span{flex:0 0 auto!important;width:auto!important;min-width:0!important;height:34px;padding:0 14px}
}

@media (prefers-reduced-motion:reduce){
  .pd .gal img,.pgrid a,.cg a img,.pgrid a img,.det img{transition:none;animation:none}
}

/* 낮은 화면(노트북 1280×720 등): 위쪽 여백 · 칸 높이를 줄여 옵션이 더 많이 보이게 */
@media (min-width:861px) and (max-height:900px){
  .pd>div:last-child>.kv{margin-top:20px!important}
  .pd .kv div{padding:12px 18px}
  .pd>div:last-child>.cfg{margin-top:20px!important;margin-bottom:18px}
  .pd .cfg{row-gap:12px}
  .pd .cfg .seg button{height:42px}.pd .cfg .tog button{height:46px}
  .pd .stk{padding:8px}.pd .stk .sum{padding:14px 22px}.pd .stk .sum b{font-size:30px}
  .pd .stk .act{margin-top:8px}.pd .stk .act .b{height:50px;font-size:16px}
}
/* 낮은 PC 화면: 화면 맨 위 큰 제목 구역을 줄여 고르는 칸 · 결과가 한 화면에 더 들어오게 (모든 화면 공통) */
@media (min-width:861px) and (max-height:900px){
  body.dA .ph:not(.ph-s){padding:106px 0 24px!important}
  body.dA .ph:not(.ph-s) h1{font-size:44px!important}
  body.dA .ph:not(.ph-s) p{font-size:18px!important;margin-top:12px!important}
  body.dA .ph:not(.ph-s) .eb{margin-bottom:8px!important}
}
/* 기종 비교: 긴 기종 이름 때문에 B 칸이 화면 밖으로 밀리던 것 */
.cmp-pick{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.cmp-slot{min-width:0}
@media (max-width:860px){.cmp-pick{grid-template-columns:minmax(0,1fr)}}
@media (min-width:861px) and (max-height:900px){
  .sec.tight:has(.cmp-pick){padding-top:14px}
  .cmp-pre{margin-bottom:10px}.cmp-pre button{height:34px}
  .cmp-pick{margin-bottom:10px}.cmp-slot{padding-top:4px;padding-bottom:4px}
  .cmp-q{padding:14px 20px;gap:8px;margin-bottom:10px}
  .cmp-q .hq-seg button{height:36px!important}
}

/* 화면 아래 얇은 한 줄 (PC · 큰 금액 칸이 화면 밖일 때만) */
.up-bar{position:fixed;bottom:16px;z-index:40;display:flex;align-items:center;gap:12px;padding:10px 10px 10px 22px;border-radius:20px;background:#1D1D1F;color:#fff;box-shadow:0 18px 40px -14px rgba(29,29,31,.55);opacity:0;transform:translateY(24px);pointer-events:none;transition:opacity .3s,transform .4s cubic-bezier(.2,.8,.2,1)}
.up-bar.on{opacity:1;transform:none;pointer-events:auto}
.up-bt{flex:1;min-width:0}
.up-bt small{display:block;font-size:13px;font-weight:600;color:#A1A1A6;line-height:1.4;word-break:keep-all}
.up-bt small:empty{display:none}
.up-bt span{display:block;font-size:14px;font-weight:700;color:#D2D2D7;margin-top:2px}
.up-bt b{font-size:24px;font-weight:800;color:#fff;letter-spacing:-.02em;margin-left:6px;font-variant-numeric:tabular-nums}
.up-bq{flex:none;display:flex;align-items:center;height:52px;padding:0 22px;border-radius:14px;background:#FF6B1A;color:#fff;font-size:16px;font-weight:800;transition:background .2s}
.up-bq:hover{background:#F25C0C}
@media (prefers-reduced-motion:reduce){.up-bar{transition:none}}
.up-sl{display:none}
@media (max-width:860px){.up-sl{display:block;font-style:normal;font-size:12.5px;font-weight:700;color:#FFB48A;margin-top:4px;line-height:1.4;word-break:keep-all}.up-sl:empty{display:none}}

/* 조건 고르기 드롭박스 (11/1 대표님 「드롭박스를 고급스럽게 · 효과」) */
.cfg.up-on{display:block!important}
.cfg.up-on>:not(.up-dd){display:none!important}
.up-dd{border-radius:24px;background:#F5F5F7;padding:6px;font-variant-numeric:tabular-nums}
.up-ddh{display:flex;justify-content:space-between;align-items:baseline;padding:12px 16px 8px}
.up-ddh b{font-size:16px;font-weight:800;color:#1D1D1F;letter-spacing:-.01em}
.up-ddh span{font-size:13px;font-weight:600;color:#86868B}
.up-row{position:relative;background:#fff;border-radius:18px;margin-top:6px;transition:box-shadow .35s,transform .35s cubic-bezier(.2,.8,.2,1)}
.up-row:hover{box-shadow:0 10px 24px -18px rgba(29,29,31,.35)}
.up-row.open{z-index:2;box-shadow:0 0 0 1.5px #FF6B1A,0 22px 40px -22px rgba(255,107,26,.55)}
.up-rb{display:grid;grid-template-columns:118px minmax(0,1fr) auto 18px;align-items:center;gap:12px;width:100%;min-height:58px;padding:8px 18px;border:0;background:none;font:inherit;text-align:left;cursor:pointer;color:#1D1D1F}
.up-k{font-size:14px;font-weight:600;color:#6E6E73}
.up-v{font-size:16px;font-weight:800;letter-spacing:-.01em;word-break:keep-all}
.up-p{font-size:15px;font-weight:800;white-space:nowrap;color:#1D1D1F}
.up-p.z{font-size:14px;font-weight:600;color:#86868B}
.up-p.up-pop{animation:uppop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes uppop{0%{transform:scale(1);color:#FF6B1A}35%{transform:scale(1.14);color:#FF6B1A}100%{transform:scale(1)}}
.up-ar{width:18px;height:18px;border-radius:50%;background:#F5F5F7;position:relative;transition:transform .4s cubic-bezier(.2,.8,.2,1),background .25s}
.up-ar:after{content:"";position:absolute;left:6px;top:5px;width:5px;height:5px;border-right:1.6px solid #1D1D1F;border-bottom:1.6px solid #1D1D1F;transform:rotate(45deg)}
.up-row:hover .up-ar{background:#E8E8ED}
.up-row.open .up-ar{transform:rotate(180deg);background:#FF6B1A}
.up-row.open .up-ar:after{border-color:#fff}
.up-pn{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s cubic-bezier(.2,.8,.2,1)}
.up-row.open .up-pn{grid-template-rows:1fr}
.up-pi{min-height:0;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:0 8px}
.up-pi:before{content:"";grid-column:1/-1;height:1px;background:#F0F0F2;margin:0 10px 4px}
.up-pi:after{content:"";grid-column:1/-1;height:4px}
.up-o{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:46px;padding:6px 12px;border:0;border-radius:12px;background:none;font:inherit;font-size:15px;font-weight:600;color:#1D1D1F;text-align:left;cursor:pointer;opacity:0;transform:translateY(-8px);transition:background .2s,opacity .3s,transform .4s cubic-bezier(.2,.8,.2,1)}
.up-row.open .up-o{opacity:1;transform:none}
.up-row.open .up-o:nth-child(2){transition-delay:0s,.03s,.03s}.up-row.open .up-o:nth-child(3){transition-delay:0s,.06s,.06s}.up-row.open .up-o:nth-child(4){transition-delay:0s,.09s,.09s}.up-row.open .up-o:nth-child(5){transition-delay:0s,.12s,.12s}.up-row.open .up-o:nth-child(6){transition-delay:0s,.15s,.15s}.up-row.open .up-o:nth-child(7){transition-delay:0s,.18s,.18s}
.up-o:hover{background:#F5F5F7}
.up-o.on{background:#FFF4EC}
.up-o.on span{font-weight:800}
.up-o em{font-style:normal;font-size:13.5px;font-weight:700;color:#86868B;white-space:nowrap}
.up-o.on em{color:#FF6B1A}
.up-ck{width:22px;height:22px;border-radius:50%;border:1.5px solid #D2D2D7;display:flex;align-items:center;justify-content:center;transition:background .25s,border-color .25s,transform .3s cubic-bezier(.3,1.6,.5,1)}
.up-m .up-ck{border-radius:7px}
.up-ck svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:14;stroke-dashoffset:14;transition:stroke-dashoffset .3s .08s}
.up-o.on .up-ck{background:#FF6B1A;border-color:#FF6B1A;transform:scale(1.06)}
.up-o.on .up-ck svg{stroke-dashoffset:0}
.up-hint{grid-column:1/-1;font-size:12.5px;font-weight:600;color:#86868B;padding:4px 12px 2px}
@media (min-width:861px) and (max-height:900px){.up-rb{min-height:52px}.up-ddh{padding:10px 16px 6px}}
@media (max-width:860px){
  .up-dd{border-radius:20px;padding:5px;margin-top:6px}
  .up-ddh{padding:10px 12px 6px}
  .up-rb{grid-template-columns:86px minmax(0,1fr) auto 18px;gap:8px;min-height:54px;padding:8px 12px}
  .up-k{font-size:13px}.up-v{font-size:15px}.up-p{font-size:14px}.up-p.z{font-size:13px}
  .up-pi{padding:0 5px}
  .up-o{padding:6px 8px;gap:8px;font-size:14px}.up-o em{font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){.up-pn,.up-o,.up-ar,.up-ck,.up-ck svg,.up-row{transition:none!important}.up-p.up-pop{animation:none}}
@media (max-width:860px){.pd .stk .sum small{text-wrap:balance}.up-bar{display:none}.pd .stk .sum:has(.up-sl:not(:empty)) small{display:none}}
/* 화면 맨 위 큰 제목: 메인처럼 문구 여러 개가 돌아감 (11/2 대표님 「메인 문구를 몇 개 등록해서 돌리면 · 전부 통일」) — 윗말 글자가 차례로 → 끝말(주황)이 내리꽂힘 → 흩어지며 다음 */
.rot{min-height:1.2em}
.rot .rl2{display:inline-block}
.rot em{font-style:normal;color:var(--o)}
.rot .rc{display:inline-block;opacity:0;transform:translateY(.55em) rotate(7deg) scale(.9);filter:blur(8px);animation:rotIn .5s cubic-bezier(.2,.9,.25,1.2) forwards;animation-delay:var(--t)}
.rot em.rx{display:inline-block;transform-origin:20% 70%;animation:rotSlam .52s cubic-bezier(.2,1.2,.35,1) both;animation-delay:var(--sd)}
.rot .rl2.hit{animation:rotHit .32s linear;animation-delay:var(--hit)}
.rot.out .rc{animation:rotOut .34s cubic-bezier(.5,0,.75,0) forwards;animation-delay:var(--od)}
.rot.out em.rx{animation:rotOut .3s cubic-bezier(.5,0,.75,0) forwards;animation-delay:.1s}
@keyframes rotIn{70%{filter:blur(0)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes rotSlam{0%{opacity:0;transform:scale(2.6) rotate(-8deg);filter:blur(10px)}55%{opacity:1;transform:scale(.92) rotate(1.5deg);filter:blur(0)}78%{transform:scale(1.04)}100%{opacity:1;transform:none}}
@keyframes rotHit{0%,100%{transform:none}20%{transform:translate(-3px,2px)}45%{transform:translate(3px,-1px)}70%{transform:translate(-1px,1px)}}
@keyframes rotOut{from{opacity:1;transform:none;filter:blur(0)}to{opacity:0;transform:translateY(-.45em) scale(.96);filter:blur(8px)}}
/* 위 제목 구역은 모든 화면 같은 높이 · 한 줄 제목 (PC) */
@media (min-width:861px){body.dA .ph:not(.ph-s){padding:118px 0 30px}}
@media (max-width:860px){.rot{min-height:2.4em}.rot .rl2{display:block}}
@media (prefers-reduced-motion:reduce){.rot .rc,.rot em.rx,.rot .rl2.hit{animation:none!important;opacity:1!important;transform:none!important;filter:none!important}}
/* 회사 소개 큰 제목: 원래 줄 글자를 주황으로 칠하던 규칙이 돌아가는 글자에도 붙어 전부 주황이 되던 것 (11/2) */
.ab2-top h1.rot span{color:inherit!important;background:none!important;-webkit-text-fill-color:currentColor}
.ab2-top h1.rot em,.ab2-top h1.rot em *{color:var(--o)!important;-webkit-text-fill-color:var(--o)}
.ab2-top h1.rot{color:var(--k)}
/* 큰 제목 앞 큰 따옴표 「“」 — 메인과 같은 모양 (11/2 대표님 「전부 다 이게 있었으면 · 통일성」) */
.rot .rw{position:relative;display:inline-block}
.rot .rq{position:absolute;left:-.34em;top:-.3em;font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:2.4em;line-height:1;color:var(--o);opacity:.14;pointer-events:none;user-select:none;animation:rqIn 1s cubic-bezier(.2,.7,.2,1) both}
.ab2-top h1.rot .rq{color:var(--o)!important;-webkit-text-fill-color:var(--o)}
@keyframes rqIn{from{opacity:0;transform:translateY(.15em) scale(.9)}to{opacity:.14;transform:none}}
@media (max-width:860px){.rot .rq{left:-.22em;top:-.24em;font-size:2em}}
@media (prefers-reduced-motion:reduce){.rot .rq{animation:none}}
.rot.q0 .rq{animation:none;opacity:.14}
/* 끝말 뒤 닫는 따옴표 「”」 — 메인과 같음 (11/2 대표님 「이걸 마지막에도」) */
.rot .rq2{display:inline-block;vertical-align:top;margin-left:.06em;font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:1.1em;line-height:.9;color:var(--o);opacity:0;animation:rqIn2 .42s cubic-bezier(.2,1.2,.35,1) forwards;animation-delay:var(--qd)}
@keyframes rqIn2{from{opacity:0;transform:scale(1.8) rotate(-10deg);filter:blur(6px)}to{opacity:.9;transform:none;filter:blur(0)}}
.rot.out .rq2{animation:rotOut .3s cubic-bezier(.5,0,.75,0) forwards;animation-delay:.1s}
.ab2-top h1.rot .rq2{color:var(--o)!important;-webkit-text-fill-color:var(--o)}
@media (prefers-reduced-motion:reduce){.rot .rq2{animation:none;opacity:.9}}
/* 큰 따옴표 = 배경처럼 고정 (11/2 대표님 그림 — 메인 첫 화면의 연한 큰 따옴표 느낌을 앞 · 뒤 둘 다) */
.rot{position:relative}
.rot .rt{position:relative;z-index:1}
.rot .rq{top:-.34em;z-index:0}
.rot .rq-l{left:auto;right:calc(50% + var(--qw,0px) - .32em)}
.rot .rq-r{right:auto;left:calc(50% + var(--qw,0px) - .32em)}
@media (max-width:860px){.rot .rq{top:-.22em}.rot .rq-l{left:auto}}
@media (max-width:860px){.rot .rq{top:-.3em;font-size:1.9em}.rot .rq-l{right:calc(50% + var(--qw,0px) - .2em)}.rot .rq-r{left:auto;right:calc(50% - var(--qw,0px) - .5em);top:auto;bottom:-.75em}}
/* 판매 · 옵션 없는 상품의 안내 한 칸 (11/2) — 조건 고르기 칸과 같은 모양 */
.up-inf{margin-top:18px;padding:6px;border-radius:24px;background:var(--bg)}
.up-inf .up-ddh{display:flex;justify-content:space-between;align-items:center}
.up-inf .up-ddh a{font-size:13px;font-weight:700;color:var(--t2);text-decoration:none}
.up-inf .up-ddh a:hover{color:var(--o)}
.up-inf ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.up-inf li{display:grid;grid-template-columns:auto 84px 1fr;align-items:center;gap:12px;min-height:52px;padding:0 18px;border-radius:18px;background:#fff;font-size:15px}
.up-inf li span{font-weight:600;color:var(--t3);font-size:14px}
.up-inf li b{font-weight:700;color:var(--k)}
.up-inf .up-ic{display:flex;width:20px;height:20px;border-radius:50%;background:var(--o);align-items:center;justify-content:center}
.up-inf .up-ic svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:860px){.up-inf li{grid-template-columns:auto 1fr;padding:12px 16px;row-gap:2px}.up-inf li b{grid-column:2}}
.up-inf .up-ic{flex:none}
.pd .kv:not(:has(>div:not([style*="display: none"]))){display:none}
/* 기종 비교 A · B 아이콘: 「b」 이름이 사이트 단추 모양과 겹쳐 B만 넓던 것 (11/2) */
.cmp-ab.b,.cmp-ab.a{width:28px!important;height:28px!important;padding:0!important;border-radius:9px!important;box-shadow:none!important;font-size:14px!important;line-height:1}
/* 기종 비교 고르기 (11/2 대표님 「드롭 목록을 고급스럽게」) — 상품 화면 조건 고르기와 같은 느낌 */
.cmp-slot.cx-on{position:relative;padding:8px 8px 8px 14px;border:0;border-radius:20px;background:#fff;box-shadow:0 0 0 1px #E8E8ED,0 10px 24px -18px rgba(29,29,31,.35);transition:box-shadow .3s}
.cmp-slot.cx-on:hover{box-shadow:0 0 0 1px #D2D2D7,0 14px 28px -18px rgba(29,29,31,.4)}
.cmp-slot.cx-on.open{z-index:30;box-shadow:0 0 0 1.5px var(--o),0 22px 40px -22px rgba(255,107,26,.55)}
.cmp-slot.cx-on select{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.cx-btn{flex:1;min-width:0;display:flex;align-items:center;gap:12px;height:60px;padding:0 6px 0 0;border:0;background:none;font:inherit;text-align:left;cursor:pointer;color:var(--k)}
.cx-im{flex:none;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px;background:#F5F5F7;overflow:hidden}
.cx-im img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.cx-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cx-t small{font-size:12px;font-weight:600;color:#86868B;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-t b{font-size:17px;font-weight:800;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-t b em{font-style:normal;font-size:13px;font-weight:700;color:var(--t2)}
.cx-p{flex:none;font-size:13px;font-weight:600;color:var(--t2);white-space:nowrap}
.cx-p b{font-size:17px;font-weight:800;color:var(--k);letter-spacing:-.01em}
.cx-ar{flex:none;position:relative;width:32px;height:32px;border-radius:50%;background:#F5F5F7;transition:transform .35s cubic-bezier(.2,.8,.2,1),background .25s}
.cx-ar:after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-5px 0 0 -3.5px;border:solid var(--k);border-width:0 2px 2px 0;transform:rotate(45deg)}
.cmp-slot.open .cx-ar{transform:rotate(180deg);background:var(--o)}
.cmp-slot.open .cx-ar:after{border-color:#fff}
.cx-pn{position:absolute;left:0;right:0;top:calc(100% + 8px);border-radius:20px;background:#fff;box-shadow:0 0 0 1px #E8E8ED,0 30px 60px -24px rgba(29,29,31,.35);opacity:0;transform:translateY(-8px) scale(.98);transform-origin:top;pointer-events:none;transition:opacity .25s,transform .35s cubic-bezier(.2,.8,.2,1)}
.cmp-slot.open .cx-pn{opacity:1;transform:none;pointer-events:auto}
.cx-in{max-height:min(460px,60vh);overflow-y:auto;padding:8px;overscroll-behavior:contain;scrollbar-width:thin}
.cx-gh{position:sticky;top:-8px;z-index:1;display:flex;align-items:center;gap:6px;padding:12px 12px 6px;background:#fff;font-size:12px;font-weight:800;color:#86868B;letter-spacing:.02em}
.cx-gh span{font-weight:700;color:#C7C7CC}
.cx-o{width:100%;display:flex;align-items:center;gap:12px;padding:8px 10px;border:0;border-radius:14px;background:none;font:inherit;text-align:left;cursor:pointer;color:var(--k);transition:background .2s}
.cx-o:hover{background:#F5F5F7}
.cx-o .cx-im{width:44px;height:44px}
.cx-o .cx-t b{font-size:15px}
.cx-o .cx-p b{font-size:15px}
.cx-ck{flex:none;display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #D2D2D7;transition:background .2s,box-shadow .2s}
.cx-ck svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.cx-o.on{background:#FFF5EE}
.cx-o.on .cx-ck{background:var(--o);box-shadow:none}
.cx-o.on .cx-ck svg{opacity:1}
.cx-o.dim{opacity:.4}
@media (max-width:860px){
  .cx-btn{height:56px;gap:10px}.cx-im{width:42px;height:42px}
  .cx-t b{font-size:15px}.cx-p b{font-size:15px}.cx-p{font-size:12px}
  .cx-o{gap:10px;padding:8px}.cx-o .cx-im{width:38px;height:38px}.cx-o .cx-t b{font-size:14px}.cx-ck{display:none}
}
@media (prefers-reduced-motion:reduce){.cx-pn,.cx-ar{transition:none}}
.cx-t b,.cx-t small{white-space:normal;overflow:visible;text-overflow:clip;word-break:keep-all}.cx-o .cx-t b em{display:inline-block}
/* 기종 비교 · 조건 맞춤 추천 3대 (11/2) */
.cmp-rec{margin:14px 0 16px}
.rc-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 4px 10px}
.rc-h b{font-size:16px;font-weight:800;color:var(--k)}
.rc-h span{font-size:13px;font-weight:600;color:#86868B}
.rc-g{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.rc-c{position:relative;display:grid;grid-template-columns:96px 1fr;gap:6px 16px;padding:18px;border-radius:22px;background:#fff;box-shadow:0 0 0 1px #E8E8ED;transition:box-shadow .3s,transform .3s cubic-bezier(.2,.8,.2,1);animation:rcIn .45s cubic-bezier(.2,.8,.2,1) both}
.rc-c:nth-child(2){animation-delay:.06s}.rc-c:nth-child(3){animation-delay:.12s}
@keyframes rcIn{from{opacity:0;transform:translateY(10px)}}
.rc-c:hover{transform:translateY(-3px);box-shadow:0 0 0 1px #D2D2D7,0 18px 30px -20px rgba(29,29,31,.35)}
.rc-c.on{box-shadow:0 0 0 1.5px var(--o),0 18px 34px -22px rgba(255,107,26,.55);background:#FFFBF8}
.rc-best{position:absolute;top:-10px;left:18px;padding:4px 10px;border-radius:99px;background:var(--o);color:#fff;font-size:12px;font-weight:800}
.rc-im{grid-row:1 / span 2;display:flex;align-items:center;justify-content:center;width:96px;height:96px;border-radius:16px;background:#F5F5F7;overflow:hidden}
.rc-im img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.rc-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.rc-t em{font-style:normal;font-size:12px;font-weight:800;color:var(--o)}
.rc-t b{font-size:18px;font-weight:800;letter-spacing:-.01em;color:var(--k)}
.rc-t small{font-size:13px;font-weight:600;color:#86868B}
.rc-p{margin-top:4px;font-size:13px;font-weight:600;color:var(--t2)}
.rc-p b{font-size:18px;font-weight:800;color:var(--k)}
.rc-ab{display:flex;gap:6px;align-self:end}
.rc-ab button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 10px;border:0;border-radius:12px;background:#F5F5F7;font:inherit;font-size:13px;font-weight:700;color:var(--k);cursor:pointer;transition:background .2s}
.rc-ab button:hover{background:#E8E8ED}
.rc-ab .cmp-ab{width:20px!important;height:20px!important;border-radius:6px!important;font-size:11px!important;font-style:normal}
.rc-none{padding:18px 22px;border-radius:18px;background:#F5F5F7;font-size:15px;font-weight:600;color:var(--t2)}
@media (max-width:1100px){.rc-c{grid-template-columns:72px 1fr}.rc-im{width:72px;height:72px}}
@media (max-width:860px){.rc-g{grid-template-columns:1fr;gap:16px}.rc-c{grid-template-columns:80px 1fr}.rc-im{width:80px;height:80px}.rc-ab{grid-column:1 / -1}}
@media (prefers-reduced-motion:reduce){.rc-c{animation:none;transition:none}}
.rc-ab button{gap:3px}
@media (max-width:860px){.cmp-pre{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;margin:0 -20px 12px;padding:0 20px 4px;scrollbar-width:none}.cmp-pre::-webkit-scrollbar{display:none}.cmp-pre>*{flex:none}}
/* 미리 넣어 둔 글자 (검색 · AI 로봇용 · 화면이 다 그려지면 원래 모양으로 바뀜) — 잠깐 보여도 깔끔하게 (11/2) */
.pre-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pre-list li{font-size:15px;color:var(--t2);line-height:1.6}
.pre-list img{display:none}
.pre-list b,.pre-list a{color:var(--k);font-weight:700;text-decoration:none}
.pre-list em{font-style:normal;font-weight:800;color:var(--k);margin-left:6px}
.pre-pd{padding:20px 0;color:var(--t2);font-size:15px;line-height:1.7}
.pre-pd img{width:160px;height:auto}
.pre-pd h1{font-size:32px;color:var(--k)}
.pre-pd dl{display:grid;grid-template-columns:auto 1fr;gap:4px 16px}
.pre-pd dt{font-weight:700;color:var(--k)}
.pre-pd a{color:var(--o)}
/* 문의 보내기 (11/2 실제 연결) */
.oa-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}
.qx-err{margin:10px 2px 0;font-size:14px;font-weight:700;color:#D93A1A;min-height:0}
.qx-err:empty{display:none}
.qx-go[aria-busy=true]{pointer-events:none}
.hq-msg{margin:10px 0 0;font-size:14px;font-weight:700;color:#D93A1A}
.hq-msg:empty{display:none}
.hq-msg.ok{color:#0E8A5F}
.hq-go:disabled{opacity:.6;pointer-events:none}
.qk-go:disabled{opacity:.6}

/* 휴대폰에서 큰 제목 끝말이 커지며 튀어나오는 순간 화면이 옆으로 넓어지던 것 (11/2 최종 점검) — 화면 밖은 잘라서 가로 흔들림 없게 */
html,body{overflow-x:clip}
.ph,.qx,.m-hero{overflow-x:clip}