@charset "utf-8"; /* ════════════════════════════════════════════════════════════════════ 일선모바일 — IGNITE 전환형 랜딩 스타일 · style.css / themes.css 다음에 불러옵니다(마지막 로드 = 최종 결정). · 색은 전부 themes.css 의 토큰을 씁니다. 여기서 색값을 새로 만들지 않습니다. 예외 : 카카오 브랜드색, 통신사 로고색, 순백 QR 배경. · 모바일 390px 기준으로 먼저 설계하고 데스크톱으로 확장합니다. ════════════════════════════════════════════════════════════════════ */ :root{ /* ── 디자인 시스템 기본값 (= 지금 화면 값) — 프리셋은 html[data-preset] 에서 이 변수를 덮어쓴다. signature-black-gold 는 아무것도 덮어쓰지 않으므로 아래 값이 그대로 쓰인다. ── */ --ink3-ivory:#3E3320; --ink4-ivory:#7A6844; --d-input:#FFFFFF; --d-input-border:color-mix(in srgb, var(--gold-deep) 42%, transparent); --d-heading:var(--text-primary); --d-price:var(--ink-ivory); --d-benefit:var(--gold-deep); --d-special:var(--gold-deep); --d-ok:#1E6B3A; --d-err:#96291A; --d-warn:#A96F0A; --d-info:#0E5361; --d-overlay:rgba(10,7,2,.68); --d-header:color-mix(in srgb, var(--bg-page) 82%, transparent); --d-header-scroll:color-mix(in srgb, var(--bg-page) 94%, transparent); --d-menu:var(--text-secondary); --d-menu-active:var(--text-primary); --d-footer:var(--bg-section); --d-mcta:var(--ig-gold); --d-mcta-text:var(--ig-on-accent); --d-fab-hover:#332C1F; --d-chip-dark:#2A251C; --d-btn-hover-edge:#FFF0C4; --d-btn-disabled:var(--cream); --d-btn-disabled-text:var(--ink2-ivory); --d-btn2:var(--bg-section-alt); --d-btn2-text:var(--text-primary); --d-btn2-border:var(--border-strong); --d-btn2-hover:#332C1F; --d-ghost-text:var(--text-primary); --d-ghost-border:var(--border-strong); --d-ghost-hover:var(--bg-section-alt); --d-teal:#8FDCCD; --d-teal-2:#A3E5D8; --d-teal-ink:#0C2723; --d-logo-ink:var(--text-primary); --d-selection:color-mix(in srgb, var(--brand-primary) 35%, transparent); --d-accent-deep-2:#A96F0A; --d-eyebrow:#F0E7D2; /* 강조 wash·glow·그림자 — 아래 값은 지금 화면 값 그대로. 프리셋이 덮어쓴다 */ --d-accent-wash:rgba(226,189,98,.07); --d-accent-wash-2:rgba(255,247,225,.07); --d-glow:rgba(255,214,110,.24); --d-glow-soft:rgba(255,214,110,.10); --d-glow-strong:rgba(255,214,110,.26); --d-sh-accent-sm:0 4px 14px rgba(202,153,48,.20); --d-sh-accent-md:0 6px 16px rgba(200,140,20,.30); --d-sh-accent-lg:0 22px 50px -26px rgba(80,52,4,.45); --d-sh-accent-chip:0 7px 18px rgba(200,140,20,.28); --d-sh-accent-eyebrow:0 6px 16px rgba(200,140,20,.26); --d-sh-accent-tab:0 6px 16px rgba(200,140,20,.28); --d-sh-accent-pick:0 8px 20px rgba(200,140,20,.26); --d-sh-surface-sm:0 12px 30px -22px rgba(80,52,4,.45); --d-sh-surface-md:0 26px 60px -38px rgba(10,8,4,.68); --d-sh-surface-lg:0 30px 70px -20px rgba(10,7,2,.7); --d-chip-overlay:rgba(21,19,15,.74); --d-chip-overlay-2:rgba(255,247,225,.07); --d-sh-product:0 26px 48px rgba(10,7,2,.66); --d-sh-product-sm:0 16px 28px rgba(12,9,4,.46); --d-sh-card-strong:0 26px 62px -42px rgba(10,8,4,.72); --d-underline:linear-gradient(90deg, rgba(255,226,138,.95), rgba(217,168,46,.22)); --d-radius-sm:8px; --d-shadow-sm:0 4px 12px rgba(10,7,2,.25); --d-shadow-md:0 12px 28px rgba(10,7,2,.55); --d-shadow-lg:0 20px 60px rgba(10,7,2,.6); --ig-accent:var(--accent-primary); --ig-on-accent:#17130B; /* 골드 위에는 항상 어두운 글자 */ /* 주 CTA 골드 — 평면 단색이 아니라 얕은 금속 그라데이션 한 겹. 반짝임·반복 애니메이션은 넣지 않는다 (촌스러워진다) */ /* 지정하신 #A96F0A 는 버튼 글자(#171108) 대비가 4.43:1 로 AA 에 0.07 모자라 가장 어두운 끝만 #AE7410 로 미세 조정했습니다 (4.74:1). 색감 차이는 없습니다 */ --ig-gold:linear-gradient(135deg,#FFF0A6 0%,#E1B638 48%,#AE7410 100%); --ig-gold-h:linear-gradient(135deg,#FFF7C6 0%,#F0C852 48%,#C0810F 100%); --ig-gold-a:linear-gradient(135deg,#F0DE93 0%,#CFA42C 48%,#8F5D06 100%); --ig-gold-edge:rgba(255,240,166,.78); --ig-gold-sh:0 12px 30px rgba(200,140,20,.30); --kakao-y:#FEE500; --ig-radius:12px; --ig-radius-lg:16px; --bar-h:calc(96px + env(safe-area-inset-bottom)); --ig-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.55 18 3.6 12.05l1.86-1.86 4.09 4.09 8.99-8.99 1.86 1.86z'/%3E%3C/svg%3E"); --ig-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.2 5 11.8 6.4l4.6 4.6H4v2h12.4l-4.6 4.6 1.4 1.4 7-7z'/%3E%3C/svg%3E"); --ig-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 4h2v7h7v2h-7v7h-2v-7H4v-2h7z'/%3E%3C/svg%3E"); --ig-kakao:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.2c-4.3 0-7.8 2.7-7.8 6.1 0 2.2 1.5 4.1 3.7 5.2l-.9 3.3 3.6-2.2c.5.06.95.09 1.4.09 4.3 0 7.8-2.7 7.8-6.1S16.3 4.2 12 4.2z'/%3E%3C/svg%3E"); /* 첫 화면 배너 조작 버튼 (좌우 화살표·정지) — 배너 색과 무관하게 항상 같은 반투명 판 */ --hxs-ctl-bg:rgba(12,9,5,.62); --hxs-ctl-bg-on:rgba(12,9,5,.82); --hxs-ctl-bd:color-mix(in srgb, #F0C852 55%, transparent); --hxs-ctl-bd-on:#F0C852; --hxs-ctl-bd-light:color-mix(in srgb, #8C5D08 50%, transparent); --hxs-ctl-fg:#F7F0DE; /* 배너 바탕이 흰색이라 점은 어둡게, 지금 배너는 진한 금색 캡슐로 (어두운 배너 위에서도 보이게 흰 테두리) */ --hxs-dot:rgba(12,9,5,.32); --hxs-dot-bd:rgba(255,255,255,.75); --hxs-dot-on:var(--d-dot-on,#A96F0A); --hxs-ctl-bg-light:rgba(12,9,5,.55); /* 밝은 배너 위에서 원판을 조금 더 진하게 */ --hxs-ink:#171108; /* 흰 배너 위 글자·테두리 (대비 확보) */ /* 화면 아래쪽 고정 상담 UI 가 실제로 차지하는 높이 (상담 바 94px + 챗봇 56px + 간격) */ --hxs-safe-bottom:calc(94px + 56px + 12px + env(safe-area-inset-bottom,0px)); } /* 카카오 아이콘 — 노란색은 여기에만 쓴다 */ .ic-kakao{ flex:none;width:17px;height:17px;background:var(--kakao-y); -webkit-mask:var(--ig-kakao) center/contain no-repeat;mask:var(--ig-kakao) center/contain no-repeat; } /* 로고는 단색으로 — 주황을 브랜드 전체에 뿌리지 않는다 */ .brand__logo{ background: linear-gradient(var(--d-logo-ink), var(--d-logo-ink)), linear-gradient(var(--d-logo-ink), var(--d-logo-ink)); } body{ background:var(--bg-page); color:var(--text-primary); padding-bottom:var(--bar-h); } /* 스크롤 애니메이션 — 짧고 절제되게 */ .reveal{opacity:0;transform:translateY(14px);transition:opacity .45s var(--ease), transform .45s var(--ease)} .reveal.is-in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} html{scroll-behavior:auto} } :focus-visible{outline:2px solid var(--ig-accent);outline-offset:3px;border-radius:2px} /* ── 공통 타이포 ── */ .ig-eyebrow{ display:inline-flex;align-items:center;gap:8px; font-size:12px;font-weight:700;letter-spacing:.1em; color:var(--ig-accent);text-transform:none; } .ig-eyebrow::before{content:'';width:18px;height:2px;background:var(--ig-accent)} .ig-h2{ font-size:clamp(26px,6.4vw,42px);font-weight:800;line-height:1.25; letter-spacing:-.045em;color:var(--text-primary); } .ig-h2 em{font-style:normal;color:var(--ig-accent)} .ig-sub{margin-top:14px;font-size:clamp(14.5px,3.7vw,17px);line-height:1.75;color:var(--text-secondary)} .ig-sec{padding-block:clamp(56px,11vw,104px);background:var(--bg-page)} .ig-sec--alt{background:var(--bg-section);border-block:1px solid var(--border-default)} /* 섹션 명도 리듬 — 인접한 두 섹션이 같은 밝기로 이어지지 않게 한 단씩 엇갈린다. 히어로 → 배지띠 → 특판 → 프로모션 → 인기기종 → 견적 → 매장 → FAQ → 푸터 #18150F #15130F #201B13 #15130F #201B13 #15130F #201B13 #15130F #201B13 */ .sp{background:var(--bg-section);border-block:1px solid var(--border-default)} .ig-head{max-width:640px} /* ── 버튼 ── 1순위 비교견적만 솔리드 오렌지. 나머지는 전부 아웃라인/차콜. */ .ig-btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; min-height:54px;padding:0 24px;border-radius:var(--ig-radius); font-size:15.5px;font-weight:700;letter-spacing:-.025em;white-space:nowrap; border:1px solid transparent;cursor:pointer; transition:background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .12s var(--ease); } .ig-btn:active{transform:translateY(1px)} .ig-btn--fill{ background:var(--ig-gold);color:var(--ig-on-accent); border-color:var(--ig-gold-edge);font-weight:800;box-shadow:var(--ig-gold-sh); } .ig-btn--fill:hover{background:var(--ig-gold-h);border-color:var(--d-btn-hover-edge)} .ig-btn--fill:active{background:var(--ig-gold-a);box-shadow:var(--d-sh-accent-sm)} .ig-btn--fill:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px} /* 보조 CTA — 어두운 카드 위 아이보리 글자 + 얇은 골드 테두리 */ .ig-btn--ghost{background:var(--bg-elevated);color:var(--text-primary);border-color:var(--border-strong)} .ig-btn--ghost:hover{border-color:var(--brand-primary);background:var(--bg-section-alt)} .ig-btn--line{background:transparent;color:var(--text-primary);border-color:var(--border-strong)} .ig-btn--line:hover{border-color:var(--brand-primary);background:var(--d-accent-wash)} .ig-btn--full{display:flex;width:100%} .ig-btn--sm{min-height:44px;padding:0 16px;font-size:14px} .ig-btn--xl{min-height:58px;font-size:16.5px} /* ════════ 헤더 ════════ */ .hd{ background:var(--d-header); border-bottom:1px solid transparent; } .hd.is-scroll{ background:var(--d-header-scroll); border-bottom-color:var(--border-default); box-shadow:none; } .hd__in{height:60px} .gnb a{color:var(--d-menu);font-weight:600} .gnb a:hover{color:var(--d-menu-active)} /* 지금 보고 있는 화면의 메뉴 — 색만이 아니라 밑줄로도 알린다 */ .gnb a[aria-current="page"]{color:var(--d-menu-active);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px} .nav__list a[aria-current="page"]{font-weight:800;text-decoration:underline;text-underline-offset:5px} /* 머리띠 글자 — 바탕이 본문과 다른 디자인(밝은 본문 + 차콜 머리띠)에서도 읽히게 토큰으로 둔다. 값을 따로 주지 않는 디자인에서는 지금까지처럼 본문 글자색이 그대로 들어온다. */ .hd__tel{color:var(--d-header-ink,var(--text-primary))} .hd__menu{color:var(--d-header-ink,var(--text-primary))} .hd .ig-btn--sm{min-height:44px} /* ════════ 01 히어로 ════════ */ .hx{ position:relative;overflow:hidden;background:var(--bg-hero); padding-top:calc(60px + clamp(26px,6vw,46px)); } /* 샴페인 골드 조명 — 오른쪽 제품 쪽에만 은은하게. 왼쪽 글자 영역까지 번지지 않게 중심을 오른쪽으로 밀어 둔다 */ .hx::before{ content:'';position:absolute;left:-6%;right:-6%;top:-18%;height:78%; background:radial-gradient(48% 58% at 78% 32%, var(--d-glow), transparent 72%); pointer-events:none; } /* 바닥 쪽 아주 옅은 웜 라이트 — 히어로가 통짜 검정으로 보이지 않게 */ .hx::after{ content:'';position:absolute;left:0;right:0;bottom:0;height:46%; background:radial-gradient(74% 100% at 50% 100%, var(--d-glow-soft), transparent 74%); pointer-events:none; } .hx__in{position:relative;padding-bottom:clamp(24px,5vw,44px)} .hx__h1{ margin-top:16px;font-weight:800;line-height:1.04;letter-spacing:-.05em; font-size:clamp(34px,9.2vw,64px);color:var(--text-primary); } .hx__h1 em{font-style:normal;color:var(--ig-accent)} /* 강조는 한 줄만 */ .hx__sub{ margin-top:20px;max-width:32ch; font-size:clamp(15.5px,4vw,17px);line-height:1.7;color:var(--text-secondary); } .hx__sub2{margin-top:6px;max-width:32ch;font-size:clamp(15.5px,4vw,17px);line-height:1.7;color:var(--text-secondary)} .hx__cta{display:grid;gap:10px;margin-top:26px} .hx__micro{margin-top:14px;font-size:13.5px;font-weight:600;color:var(--text-secondary);letter-spacing:-.02em} .hx__warn{margin-top:6px;max-width:44ch;font-size:11.5px;line-height:1.6;color:var(--text-muted)} .hx__vis{position:relative;display:flex;justify-content:center;margin-top:8px} /* 제품 뒤 금빛 조명 — 이미지 자체에는 손대지 않고 뒤쪽만 밝힌다 */ .hx__vis::before{ content:'';position:absolute;z-index:0;inset:-10% -8% -14%; background:radial-gradient(52% 50% at 50% 46%, var(--d-glow-strong), transparent 72%); pointer-events:none; } .hx__phone{ position:relative;z-index:1;display:block;width:auto; height:clamp(250px,62vw,330px); filter:drop-shadow(var(--d-sh-product)); } /* 실리 배지 — 주황 배경 띠를 없애고 차분한 줄로 */ .hx__badges{ position:relative;border-top:1px solid var(--border-default); border-bottom:1px solid var(--border-default);background:var(--bg-page); } .hx__badgeIn{ display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain; padding-block:13px;scrollbar-width:none; } .hx__badgeIn::-webkit-scrollbar{display:none} .bg1{ flex:none;display:inline-flex;align-items:center;gap:7px;white-space:nowrap; padding:8px 13px;border-radius:999px; border:1px solid var(--border-default);background:transparent; font-size:12.5px;font-weight:600;letter-spacing:-.02em;color:var(--text-secondary); } .bg1::before{ content:'';flex:none;width:12px;height:12px;background:var(--text-muted); -webkit-mask:var(--ig-check) center/contain no-repeat;mask:var(--ig-check) center/contain no-repeat; } /* ════════ 02 이번 달 특판 — 매장 게시물을 크게 ════════ 게시물이 이미 제품명·대상·핵심 혜택을 담고 있으므로 이미지를 카드 폭 전체로 크게 넣고, 아래에는 요약·조건·CTA 만 둔다. */ .sp__grid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:36px} .sp__card{ overflow:hidden;border-radius:var(--ig-radius-lg); background:var(--bg-elevated);border:1px solid var(--border-default); box-shadow:var(--d-sh-surface-md); } /* 게시물 — 카드 가장자리까지 꽉 채운다 */ .sp__shot{display:block;position:relative} .sp__shot picture{display:block} .sp__shot img{ width:100%;height:auto;display:block; border-bottom:1px solid var(--border-default); transition:opacity .18s var(--ease); } .sp__shot:hover img{opacity:.95} /* 사진만 있을 때 */ .sp__media{display:grid;place-items:center;padding:26px 24px 0} .sp__media img{width:auto;height:clamp(160px,42vw,210px);object-fit:contain; filter:drop-shadow(var(--d-sh-product-sm))} .sp__media:empty{display:none} .sp__bd{padding:22px 24px 24px;display:grid;gap:18px} .sp__sum{font-size:15px;line-height:1.6;letter-spacing:-.025em;color:var(--text-secondary)} .sp__sum b{color:var(--text-primary);font-weight:800} .sp__badge{ display:inline-block;padding:6px 11px;border-radius:999px; border:1px solid var(--border-strong);background:transparent; font-size:11.5px;font-weight:700;letter-spacing:-.02em;color:var(--text-secondary); } .sp__model{margin-top:14px;font-size:17px;font-weight:700;letter-spacing:-.03em;color:var(--text-primary)} .sp__head{ margin-top:4px;font-size:clamp(36px,9vw,54px);font-weight:800; line-height:1.04;letter-spacing:-.05em;color:var(--ig-accent); } .sp__lines{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px} .sp__lines li{ padding:9px 14px;border-radius:10px; border:1px solid var(--border-default);background:var(--bg-section-alt); font-size:13.5px;font-weight:700;letter-spacing:-.03em;color:var(--text-primary); } .sp__cond{margin-top:12px;font-size:12.5px;line-height:1.65;color:var(--text-muted)} .sp__card .ig-btn{width:100%} .sp__at{margin-top:20px;font-size:11.5px;line-height:1.65;color:var(--text-muted)} .sp__none{margin-top:26px;font-size:15px;color:var(--text-secondary)} /* ════════ 프로모션 배너 — 블랙 × 샴페인 골드 ════════ 전체 사이트가 같은 골드 체계로 통일되어, 여기 색도 사이트 토큰을 따릅니다. 금색은 핵심 혜택 문구 · 얇은 테두리 · 주 CTA · 배지에만 씁니다. 데스크톱 : 왼쪽 글자 / 오른쪽 제품 모바일 : 위 제품 / 아래 글자 */ .pm{ --g:var(--brand-primary); /* 샴페인 골드 */ --g2:var(--brand-strong); /* 밝은 골드 (hover) */ --gl:var(--border-default); /* 얇은 골드 테두리 */ --ivory:var(--text-primary); --pm-txt:var(--text-primary); --pm-txt2:var(--text-secondary); --pm-card:var(--bg-elevated); padding-block:clamp(40px,7vw,64px); background:var(--bg-page); } .pm__card{ display:grid;overflow:hidden; border-radius:20px;border:1px solid var(--gl); background:var(--pm-card); box-shadow:var(--d-sh-card-strong); } .pm__vis{position:relative;background:var(--bg-section);aspect-ratio:3/2} /* 모바일 제품 높이 210~250px */ .pm__vis picture{display:block;height:100%} .pm__vis img{width:100%;height:100%;object-fit:cover;object-position:center;display:block} /* 모바일 — 사진 아래를 어둡게 깔아 글자와 이어지게 */ .pm__vis::after{ content:'';position:absolute;left:0;right:0;bottom:-1px;height:26%; background:linear-gradient(180deg, transparent, var(--pm-card)); pointer-events:none; } /* 절제된 가치 표시 — 지폐·금액 없이 얇은 골드 카드 하나 */ .pm__badge{ position:absolute;left:14px;top:14px;z-index:2; display:inline-flex;align-items:center; padding:8px 13px;border-radius:10px; background:var(--d-chip-overlay); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); border:1px solid var(--gl); font-size:12px;font-weight:700;letter-spacing:-.01em;color:var(--g); white-space:nowrap; } .pm__bd{padding:20px 20px 24px;background:var(--pm-card)} .pm__label{ display:inline-block;align-self:flex-start;padding:6px 13px;border-radius:999px; border:1px solid var(--gl);background:transparent; font-size:11.5px;font-weight:700;letter-spacing:.01em;color:var(--g); } .pm__t{ margin-top:14px;font-size:clamp(25px,6.4vw,38px);font-weight:800; line-height:1.22;letter-spacing:-.04em;color:var(--pm-txt); } .pm__t em{font-style:normal;color:var(--g)} .pm__d{margin-top:14px;font-size:15.5px;line-height:1.7;color:var(--pm-txt2);max-width:44ch} .pm__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px} .pm__chips li{ display:inline-flex;align-items:center;gap:7px; padding:9px 13px;border-radius:10px; border:1px solid var(--gl);background:var(--d-accent-wash); font-size:13px;font-weight:700;letter-spacing:-.025em;color:var(--ivory); } .pm__chips li::before{ content:'';flex:none;width:12px;height:12px;background:var(--g); -webkit-mask:var(--ig-check) center/contain no-repeat;mask:var(--ig-check) center/contain no-repeat; } .pm__cta{display:grid;gap:9px;margin-top:22px} .pm__cta .ig-btn{min-height:52px;width:100%;border-radius:11px} .pm__cta .ig-btn--xl{min-height:56px;font-size:16.5px} /* 주 CTA — 사이트 전체와 같은 골드 (별도 색을 두지 않는다) */ /* 보조 CTA — 차콜 + 얇은 골드 테두리 */ .pm .ig-btn--ghost{background:var(--bg-section);border-color:var(--border-strong);color:var(--ivory)} .pm .ig-btn--ghost:hover{background:var(--bg-section-alt);border-color:var(--g)} .pm__copied{margin-top:12px;font-size:12.5px;font-weight:700;color:var(--g)} .pm__copied:empty{display:none} .pm__note{margin-top:16px;font-size:11.5px;line-height:1.7;color:var(--text-muted);max-width:56ch} .pm :focus-visible{outline-color:var(--g2)} /* 헬스케어 — 현금 표현 없이 얇은 골드 라인 + 절제된 청록 */ .pm--teal .pm__t em{color:var(--d-teal)} .pm--teal .pm__chips li::before{background:var(--d-teal)} .pm--teal .pm__label{color:var(--d-teal-2);border-color:color-mix(in srgb, var(--d-teal) 34%, transparent)} /* ════════ 03 인기 모델 ════════ */ .md__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:30px} .md__i{ display:flex;flex-direction:column; background:var(--bg-elevated);border:1px solid var(--border-default); border-radius:var(--ig-radius);overflow:hidden; transition:border-color .18s var(--ease); } .md__i:hover{border-color:var(--border-strong)} /* 앞의 두 모델은 시각 비중을 크게 */ .md__i--lead{grid-column:span 2} .md__i--lead .md__media{aspect-ratio:4/5} .md__i--lead .md__name{font-size:clamp(18px,4.8vw,24px)} .md__media{ position:relative;aspect-ratio:4/5;display:grid;place-items:center; background:var(--bg-section-alt);overflow:hidden; } /* 기기 전체가 보이도록 요소 크기를 프레임 콘텐츠 박스에 고정한다 (확대·크롭 금지) */ .md__media > img,.md__media > .md__pair{ position:absolute;top:6%;left:6%;width:88%;height:88%; max-width:none;max-height:none; object-fit:contain;object-position:center;transform:none;scale:1; } .md__media > img{display:block} /* 사진이 없거나 불러오지 못했을 때 — 카드는 그대로 두고 자리만 안내한다 */ .md__none{font-size:12.5px;font-weight:700;color:var(--text-muted);letter-spacing:-.02em} .md__media.is-none::after{ content:'사진 준비 중';font-size:12.5px;font-weight:700;color:var(--text-muted);letter-spacing:-.02em; } .md__tag{ position:absolute;left:12px;top:12px; padding:5px 9px;border-radius:999px; background:var(--d-accent-wash-2);border:1px solid var(--border-default); font-size:10.5px;font-weight:700;letter-spacing:-.02em;color:var(--text-secondary); } .md__bd{padding:18px;display:flex;flex-direction:column;gap:6px;flex:1} .md__cat{font-size:11.5px;font-weight:600;letter-spacing:.01em;color:var(--text-muted)} /* 모델명은 최대 두 줄까지만 (긴 이름이 카드를 밀지 않게) */ .md__name{font-size:15px;font-weight:800;letter-spacing:-.035em;line-height:1.3;color:var(--text-primary); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:keep-all} /* 카드 CTA — 솔리드 오렌지를 6개 늘어놓지 않는다. 평소에는 오렌지 글자 + 얇은 테두리, 올리면 솔리드로 바뀐다. */ .md__btn{ margin-top:auto;padding:0 14px;min-height:46px; display:inline-flex;align-items:center;justify-content:center;gap:7px; border-radius:10px;border:1px solid var(--border-strong); background:transparent;color:var(--ig-accent); font-size:13.5px;font-weight:700;letter-spacing:-.03em;white-space:nowrap; transition:background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease); } /* 긴 버튼 글자만 두 줄로 (지금 쓰는 짧은 문구는 예전 그대로 한 줄) */ .md__btn--long{white-space:normal;word-break:keep-all;text-align:center;line-height:1.25;padding-block:8px} .md__btn::after{ content:'';width:13px;height:13px;background:currentColor; -webkit-mask:var(--ig-arrow) center/contain no-repeat;mask:var(--ig-arrow) center/contain no-repeat; } .md__btn:hover{background:var(--ig-gold);border-color:var(--ig-gold-edge);color:var(--ig-on-accent)} /* ════════ 인기 모델 — 통신사·가입유형 선택과 가격 안내 ════════ · 어르신도 읽을 수 있게 글자를 크게 씁니다 (모바일 최소 크기를 CSS 로 보장). · 통신사 고유색은 첫 버전 표식(.cr--skt · --kt · --lgu)의 값을 그대로 씁니다. · 360px 에서도 글자를 줄이지 않고 줄바꿈·배치로 해결합니다. */ /* ── 카드마다 붙는 통신사 3사 선택 ── 세그먼트 컨트롤 하나처럼 보이되, 통신사 고유색은 선택했을 때 판으로 드러난다. 고르지 않은 버튼도 흐리게 두지 않는다(선택 가능한 조건이라는 뜻이므로). */ .md__carrierPick{ display:flex;flex-wrap:wrap;gap:7px;padding:5px;border-radius:15px; background:var(--bg-section-alt);border:1px solid var(--border-default); } .md__carrierBtn{ min-height:48px;min-width:56px;padding:0 14px;border-radius:11px;cursor:pointer; display:inline-flex;align-items:center;justify-content:center; border:1.5px solid var(--border-default);background:var(--bg-elevated); color:var(--text-primary);font-size:23px;line-height:1; transition:background .16s var(--ease), border-color .16s var(--ease), box-shadow .16s var(--ease); } .md__carrierBtn:hover{border-color:var(--border-strong)} .md__carrierBtn:focus-visible{outline:3px solid var(--brand-primary);outline-offset:2px} .md__carrierBtn .cr{font-size:1em} /* 고르지 않은 상태에서도 브랜드 색이 보이게 (어두운 카드 위 대비 보정) */ .md__carrierBtn--skt .cr--skt{color:#7566FF} .md__carrierBtn--kt .cr--kt{color:#FFFDF7} .md__carrierBtn--kt .cr--kt::after{background:#E6002D} .md__carrierBtn--lgu .cr--lgu{color:#E6007E} /* 고른 통신사 — 고유색 판 */ .md__carrierBtn--skt.is-on{background:#3617CE;border-color:#3617CE;box-shadow:0 6px 16px -8px #3617CE} .md__carrierBtn--skt.is-on .cr--skt{color:#FFFFFF} .md__carrierBtn--kt.is-on{background:#F7F0DE;border-color:#1A1A1A;box-shadow:inset 0 -4px 0 #E6002D} .md__carrierBtn--kt.is-on .cr--kt{color:#1A1A1A} .md__carrierBtn--kt.is-on .cr--kt::after{background:#E6002D} .md__carrierBtn--lgu.is-on{background:#E6007E;border-color:#E6007E;box-shadow:0 6px 16px -8px #E6007E} .md__carrierBtn--lgu.is-on .cr--lgu{color:#FFFFFF} /* ── 카드마다 붙는 가입유형 선택 ── */ .md__typePick{display:flex;flex-wrap:wrap;gap:8px} .md__typeBtn{ min-height:54px;padding:0 14px;border-radius:13px;cursor:pointer; flex:1 1 auto;min-width:0;white-space:nowrap; border:1.5px solid var(--border-default);background:var(--bg-elevated); color:var(--text-secondary);font-size:clamp(19px,4.6vw,22px);font-weight:800;letter-spacing:-.03em; display:inline-flex;align-items:center;justify-content:center; transition:border-color .16s var(--ease), color .16s var(--ease), background .16s var(--ease); } .md__typeBtn:hover{border-color:var(--border-strong);color:var(--text-primary)} .md__typeBtn:focus-visible{outline:3px solid var(--brand-primary);outline-offset:2px} .md__typeBtn.is-on{ background:var(--d-accent-wash);border-color:var(--brand-primary);color:var(--text-primary); box-shadow:inset 0 0 0 1.5px var(--brand-primary); } /* 버튼에는 '번호이동' 만 적고, 뜻은 바로 아래 한 줄로 밝힌다 */ .md__typeNote{margin:8px 0 0;font-size:clamp(17px,4.2vw,19px);font-weight:700;color:var(--text-secondary);letter-spacing:-.02em} .md__grid--offer{grid-template-columns:1fr} .md__grid--offer .md__i--lead{grid-column:span 1} /* 가격 카드 : 배지 → 모델명 → 사진 → 가격 → 세부조건 → 상담 버튼 */ .md__i--offer{padding:14px 14px 16px;gap:2px;container-type:inline-size} /* 왼쪽 통신사 선택 · 오른쪽 특판 배지. 좁으면 배지가 다음 줄 오른쪽으로 내려간다 */ .md__i--offer .md__top{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap} .md__spSlot{margin-left:auto;display:inline-flex;align-items:center} .md__spSlot:empty{display:none} .md__sp{ display:inline-flex;align-items:center;min-height:38px;padding:0 16px;border-radius:10px; background:var(--ig-gold, #D9A82E);border:1.5px solid var(--ig-gold-edge, #8C5D08); color:#171108;font-size:15px;font-weight:900;letter-spacing:-.02em; } .md__i--offer .md__cat{margin-top:8px;font-size:13px} .md__i--offer .md__name{font-size:19px;line-height:1.3;margin-top:2px} /* 사진 : 자르지 않고 전체를 보여 준다 (확대 크롭 금지) */ .md__media--full{ position:relative;margin-top:10px;border-radius:12px;aspect-ratio:4/5;overflow:hidden; display:grid;place-items:center;background:var(--bg-section-alt); } /* 앞·뒤 두 장을 나란히 놓을 때만 가로로 넓힌다 (:has 미지원 브라우저는 4/5 로도 전체가 보인다) */ .md__media--full:has(> .md__pair){aspect-ratio:4/3} /* 한 장짜리 사진도, 전면·후면 묶음도 프레임 안쪽 8% 여백 안에 전체가 들어온다 */ .md__media--full > img,.md__media--full > .md__pair{ position:absolute;top:8%;left:8%;width:84%;height:84%; max-width:none;max-height:none; object-fit:contain;object-position:center;transform:none;scale:1; } .md__media--full > img{display:block} .md__media > .md__pair{display:grid;grid-template-columns:1fr 1fr;align-items:center; justify-items:center;column-gap:clamp(4px,1.5vw,12px)} /* 앞·뒤 두 장은 각자 자기 칸 안에서 전체가 보인다 (겹치거나 넘치지 않는다) */ .md__pair > .md__dev{ position:static;display:block;width:100%;height:100%;max-width:100%;max-height:100%; object-fit:contain;object-position:center;transform:none;scale:1; } .md__i--offer .md__bd{padding:0;gap:12px;margin-top:12px} .md__price{ padding:14px;border-radius:12px; background:var(--bg-section-alt);border:1px solid var(--border-default); } .md__priceT{font-size:clamp(17px,4.4vw,21px);font-weight:800;letter-spacing:-.02em;color:var(--text-secondary);margin-bottom:10px} .md__rows{margin:0;display:grid;gap:10px} .md__r{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;width:100%;column-gap:18px} .md__r dt{font-size:clamp(17px,4.4vw,21px);color:var(--text-secondary);white-space:nowrap;min-width:0} .md__r dd{margin:0;font-size:clamp(20px,5.2vw,27px);font-weight:800;color:var(--text-primary);white-space:nowrap; font-variant-numeric:tabular-nums;text-align:right;letter-spacing:-.03em} .md__r--minus dd{color:var(--text-secondary)} /* 라벨 왼쪽 · 금액 오른쪽. 한 줄에 못 들어가면 글자를 줄이지 않고 금액이 다음 줄로 내려간다 (그리드로 묶어 두면 라벨이 눌려 '실제 구매가격' 이 잘려 보였다) */ .md__final{ margin-top:12px;padding-top:12px;border-top:1.5px solid var(--border-default); display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;column-gap:16px;row-gap:2px;min-width:0; } .md__finalL{font-size:clamp(21px,5.4vw,24px);font-weight:800;color:var(--text-secondary);white-space:nowrap; min-width:0;flex:0 1 auto} .md__finalV{font-size:clamp(38px,10vw,56px);font-weight:900;letter-spacing:-.05em;color:var(--ig-accent); font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1.05;text-align:right;margin-left:auto;flex:0 0 auto} /* 셋팅가 카드와 같은 이유 : 카드 폭 기준으로 재야 다단 화면에서 금액이 카드를 넘지 않는다 */ @supports (width:1cqw){ .md__finalV{font-size:clamp(38px,14cqw,56px)} } .md__final--ask{display:grid;grid-template-columns:1fr;gap:8px} .md__final--ask .md__finalL{font-size:clamp(19px,4.8vw,22px);font-weight:900;color:var(--text-primary);white-space:normal;text-align:left} .md__askS{font-size:clamp(16.5px,4.2vw,20px);color:var(--text-secondary);line-height:1.55;word-break:keep-all} .md__asof{margin-top:12px;font-size:clamp(14px,3.6vw,16px);color:var(--text-muted);line-height:1.6} .md__det{margin-top:2px} .md__detS{ min-height:50px;padding:0 16px;border-radius:12px;border:1.5px solid var(--border-default); background:transparent;color:var(--text-primary);font-size:17px;font-weight:800;letter-spacing:-.03em; display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;list-style:none; } .md__detS::-webkit-details-marker{display:none} .md__detS:hover{border-color:var(--border-strong)} .md__detS:focus-visible{outline:3px solid var(--brand-primary);outline-offset:2px} .md__det .md__detOff{display:none} .md__det[open] .md__detOn{display:none} .md__det[open] .md__detOff{display:inline} .md__detBd{margin-top:12px;display:grid;gap:12px} .md__carrierBtn,.md__sp,.md__typeBtn{-webkit-tap-highlight-color:transparent} .md__crT{font-size:14px;font-weight:700;letter-spacing:.02em;color:var(--text-muted)} .md__crN{margin-top:4px;font-size:16.5px;font-weight:800;color:var(--text-primary);letter-spacing:-.03em;word-break:keep-all} .md__crK{font-size:15.5px;font-weight:700;color:var(--text-secondary)} .md__crD{margin-top:5px;font-size:15.5px;color:var(--text-secondary);line-height:1.6;word-break:keep-all} .md__i--offer .md__btn{min-height:54px;font-size:17px;font-weight:800;white-space:normal;word-break:keep-all;padding:10px 16px} .md__ask{ margin-top:16px;padding:26px 24px;border-radius:var(--ig-radius-lg); border:1px solid var(--border-default);background:var(--bg-elevated); display:grid;gap:16px; } .md__askT{font-size:clamp(18px,4.6vw,22px);font-weight:800;letter-spacing:-.04em;line-height:1.3} .md__askD{margin-top:7px;font-size:13.5px;line-height:1.6;color:var(--text-secondary)} /* 카카오 사용 예시 */ .kk{margin-top:12px;padding:24px;border-radius:var(--ig-radius-lg); background:var(--bg-section-alt);border:1px solid var(--border-default)} .kk__t{font-size:14.5px;font-weight:800;letter-spacing:-.03em;color:var(--text-primary)} .kk__ex{display:grid;gap:7px;margin-top:12px} .kk__b{ width:100%;text-align:left;padding:12px 14px;min-height:46px; border:1px dashed var(--border-strong);border-radius:var(--ig-radius); background:var(--d-chip-dark);color:var(--text-secondary); font-size:13.5px;font-weight:600;letter-spacing:-.02em; } .kk__b:hover{border-color:var(--text-muted);color:var(--text-primary)} .kk__b::before{content:'"';color:var(--text-muted)} .kk__b::after{content:'"';color:var(--text-muted)} .kk__hint{margin-top:11px;font-size:12px;line-height:1.55;color:var(--text-muted)} .kk__hint.is-ok{color:var(--ig-accent);font-weight:700} /* ════════ 08 FAQ ════════ */ .fq{margin-top:28px;border-top:1px solid var(--border-default)} .fq__item{border-bottom:1px solid var(--border-default)} .fq__q{ width:100%;display:flex;gap:14px;align-items:flex-start;justify-content:space-between; padding:20px 0;text-align:left; font-size:15.5px;font-weight:700;letter-spacing:-.03em;line-height:1.5;color:var(--text-primary); } .fq__q::after{ content:'';flex:none;width:16px;height:16px;margin-top:3px; border:0;background:var(--text-muted);transform:none; -webkit-mask:var(--ig-plus) center/contain no-repeat;mask:var(--ig-plus) center/contain no-repeat; transition:transform .25s var(--ease), background .2s var(--ease); } .fq__item.is-on .fq__q::after{transform:rotate(45deg) !important;background:var(--ig-accent)} .fq__item.is-on .fq__q{color:var(--text-primary)} :root{--ig-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 4h2v7h7v2h-7v7h-2v-7H4v-2h7z'/%3E%3C/svg%3E")} .fq__a{max-height:0;overflow:hidden;transition:max-height .3s var(--ease)} .fq__a p{padding:0 0 20px;font-size:14.5px;line-height:1.8;color:var(--text-secondary);max-width:64ch} @media (prefers-reduced-motion:reduce){ .fq__a{transition:none} } /* 제도 상세 (접이식) */ .more{margin-top:26px;border:1px solid var(--border-default);border-radius:var(--ig-radius-lg);overflow:hidden} .more>summary{ padding:18px 20px;cursor:pointer;list-style:none; font-size:14.5px;font-weight:700;letter-spacing:-.025em;color:var(--text-primary); display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px; } .more>summary::-webkit-details-marker{display:none} .more>summary::after{content:'펼치기';font-size:12.5px;font-weight:600;color:var(--ig-accent);flex:none} .more[open]>summary::after{content:'접기'} .more__bd{padding:0 20px 20px;border-top:1px solid var(--border-default)} .more__bd p{margin-top:16px;font-size:13.5px;line-height:1.8;color:var(--text-secondary)} .more__bd b{color:var(--text-primary);font-weight:700} .more__bd ul{margin-top:14px;display:grid;gap:9px} .more__bd li{position:relative;padding-left:15px;font-size:13.5px;line-height:1.7;color:var(--text-secondary)} .more__bd li::before{content:'';position:absolute;left:2px;top:.72em;width:5px;height:5px;border-radius:50%;background:var(--ig-accent);opacity:.7} .more__at{margin-top:16px;font-size:11.5px;line-height:1.6;color:var(--text-muted)} /* ════════ 09 푸터 ════════ */ .ft{background:var(--d-footer);border-top:1px solid var(--border-default);padding-block:44px 34px} .ft__top{display:grid;gap:22px} .ft__brand{font-size:17px;font-weight:800;letter-spacing:-.03em} .ft__desc{margin-top:8px;font-size:13px;line-height:1.7;color:var(--text-secondary);max-width:44ch} .ft__nav{display:flex;flex-wrap:wrap;gap:0 18px} .ft__nav a{display:inline-flex;align-items:center;min-height:44px;font-size:13.5px;font-weight:600;color:var(--text-secondary)} .ft__nav a:hover{color:var(--text-primary)} .ft__biz{ margin-top:26px;padding-top:20px;border-top:1px solid var(--border-default); display:flex;flex-wrap:wrap;gap:5px 14px;font-size:12px;line-height:1.7;color:var(--text-muted); } .ft__biz a{color:var(--text-secondary);text-decoration:underline;text-underline-offset:3px} .ft__legal{margin-top:16px;font-size:11.5px;line-height:1.75;color:var(--text-muted)} .ft__copy{margin-top:16px;font-size:11.5px;color:var(--text-muted)} /* ════════ 모바일 하단 고정 CTA ════════ */ .bar{ position:fixed;left:0;right:0;bottom:0;z-index:90; display:block;grid-template-columns:none; /* style.css 의 grid 배치를 덮는다 */ background:var(--bg-page);border-top:1px solid var(--border-default); padding-bottom:env(safe-area-inset-bottom); } .bar__status{ padding:6px 12px 5px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; font-size:11px;font-weight:600;letter-spacing:-.02em;color:var(--text-muted); border-bottom:1px solid var(--border-default); } .bar__status.is-open{color:var(--text-secondary)} .bar__status:empty{display:none} .bar__row{display:grid;grid-template-columns:1fr 1fr 2.35fr;gap:1px;background:var(--border-default)} .bar__i{ min-height:62px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px; background:var(--bg-page);color:var(--text-secondary); font-size:11.5px;font-weight:700;letter-spacing:-.02em; } .bar__i svg{width:19px;height:19px;fill:currentColor;stroke:none} .bar__i:active{background:var(--bg-section-alt)} .bar__i,.bar__i+.bar__i{box-shadow:none} .bar__i--cta{ flex-direction:row;gap:8px;white-space:nowrap; font-size:17px;font-weight:800;letter-spacing:-.04em; background:var(--d-mcta);color:var(--d-mcta-text); } .bar__i--cta::after{ content:'';width:15px;height:15px;background:currentColor; -webkit-mask:var(--ig-arrow) center/contain no-repeat;mask:var(--ig-arrow) center/contain no-repeat; } .bar__i--cta:active{background:var(--ig-gold-a)} /* ════════ 우측 플로팅 상담 버튼 ════════ 예전 방식 그대로 — 접히는 도크가 아니라 버튼이 항상 떠 있습니다. 순서·모양·동작은 이전 버전과 동일하고, 색만 지금의 골드 체계에 맞췄습니다. 데스크톱 : 견적 신청 · 전화 상담 · 카톡 상담 · 챗봇상담 모바일 : 하단 고정 바가 같은 역할을 하므로 챗봇상담만 남깁니다. */ .fab{gap:8px;align-items:stretch} .fab__ttl{ display:none;padding:0 4px 2px;text-align:right; font-size:11.5px;font-weight:800;letter-spacing:-.02em;color:var(--text-muted); } .fab__btn{ border-radius:var(--ig-radius);box-shadow:var(--d-shadow-md); border:1px solid var(--border-default); } .fab__lb{color:inherit} /* 주 행동만 골드 */ .fab__btn--quote{background:var(--ig-gold);color:var(--ig-on-accent); border-color:var(--ig-gold-edge);box-shadow:var(--ig-gold-sh)} .fab__btn--quote:hover{background:var(--ig-gold-h);border-color:var(--d-btn-hover-edge)} .fab__btn--quote:active{background:var(--ig-gold-a)} .fab__btn--quote .fab__lb{font-weight:800} /* 보조 행동은 차콜 + 골드 라인 */ .fab__btn--tel, .fab__btn--kakao, .fab__btn--bot{background:var(--bg-section-alt);color:var(--text-primary);border-color:var(--border-strong)} .fab__btn--tel:hover, .fab__btn--kakao:hover, .fab__btn--bot:hover{background:var(--d-fab-hover);border-color:var(--brand-primary)} .fab__btn--tel svg{fill:currentColor} /* 카카오 말풍선은 브랜드 노랑을 유지 */ .fab__btn--kakao svg{fill:var(--kakao-y)} .fab__btn--bot svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} /* 프로모션 CTA·혜택 칩 위에 겹치는 동안만 비켜섰다가 곧바로 돌아온다 */ .fab__btn--bot{transition:background .18s var(--ease), border-color .18s var(--ease), transform .24s var(--ease), opacity .2s var(--ease)} .fab__btn--bot.is-away{transform:translateX(calc(100% + 18px));opacity:0;pointer-events:none} @media (prefers-reduced-motion:reduce){ .fab__btn--bot{transition:none} } /* ══════════════════════════════════════════════════════════════════════ 상담 메뉴 (접이식) — .fab--dock · 큰 화면 : 오른쪽에 붙는 세로 메뉴. [접기] 를 누르면 아이콘만 남는다(60px). 접힌 상태에서는 아이콘 옆에 메뉴 이름이 뜬다 (마우스·키보드 모두). · 휴대폰 : 작은 '상담' 버튼으로 시작하고, 누르면 같은 메뉴가 열린다. 아래 고정 바(전화·카톡·셋팅가)와 겹치는 항목은 메뉴에서 빼서 중복을 없앤다. · 버튼과 동작은 지금까지 쓰던 것 그대로다 (전화·카카오·상담 신청·챗봇). ══════════════════════════════════════════════════════════════════════ */ /* 메뉴가 실제로 차지하는 폭 — 자리가 되는지 JS 가 이 값을 읽어 판단한다 (CSS 와 값을 하나로 둔다) */ .fab--dock{gap:0;align-items:flex-end;--fab-w-full:212px;--fab-w-min:60px} .fab--dock .fab__panel{ display:flex;flex-direction:column;gap:8px; width:var(--fab-w-full);padding:10px; background:var(--bg-elevated);border:1px solid var(--border-default); border-radius:18px;box-shadow:var(--d-shadow-md); max-height:calc(100dvh - 40px);overflow:hidden auto; } .fab--dock .fab__hd{display:flex;align-items:center;gap:6px;padding:2px 2px 0} .fab--dock .fab__ttl{ display:block;flex:1;margin:0;padding:0;text-align:left; font-size:12px;font-weight:800;letter-spacing:-.02em;color:var(--text-muted); } .fab__fold,.fab__x{ display:inline-flex;align-items:center;justify-content:center; width:34px;height:34px;min-width:34px;flex:none; border:1px solid var(--border-default);border-radius:10px; background:var(--bg-section-alt);color:var(--text-secondary);cursor:pointer; } .fab__fold svg,.fab__x svg{width:18px;height:18px} .fab__fold:hover,.fab__x:hover{border-color:var(--brand-primary);color:var(--text-primary)} .fab__fold:focus-visible,.fab__x:focus-visible,.fab__open:focus-visible{outline:3px solid var(--brand-primary);outline-offset:2px} .fab--dock .fab__btn{ width:100%;height:48px;min-height:44px; justify-content:flex-start;gap:10px;padding:0 12px; border-radius:12px;box-shadow:none; } .fab--dock .fab__btn svg{width:22px;height:22px;flex:none} /* 일반 메뉴 : 연한 중립 바탕 · 짙은 글자 · 중립색 아이콘 (골드 광택을 반복하지 않는다) */ .fab--dock .fab__btn--ask, .fab--dock .fab__btn--bot, .fab--dock .fab__btn--tel{background:var(--bg-section-alt);color:var(--text-primary);border-color:var(--border-default)} .fab--dock .fab__btn--ask:hover, .fab--dock .fab__btn--bot:hover, .fab--dock .fab__btn--tel:hover{background:var(--d-fab-hover);border-color:var(--border-strong)} .fab--dock .fab__btn--ask svg, .fab--dock .fab__btn--bot svg{fill:none;stroke:var(--text-muted);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .fab--dock .fab__btn--tel svg{fill:var(--text-muted)} .fab--dock .fab__btn--quote svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .fab--dock .fab__lb{font-size:14.5px;font-weight:700} /* 카카오는 브랜드 노랑으로 구분한다 (노랑 + 검정 글자는 카카오 표기 규정) */ .fab--dock .fab__btn--kakao{ background:var(--kakao-y);color:#111111; border-color:color-mix(in srgb, var(--kakao-y) 82%, #111111); } .fab--dock .fab__btn--kakao:hover{filter:brightness(1.04)} .fab--dock .fab__btn--kakao svg{fill:#111111} /* 전화번호·영업시간 — 관리자에 등록된 값만 보여 준다 */ .fab__info{margin-top:2px;padding:8px 6px 2px;border-top:1px solid var(--border-default)} .fab__num{display:block;font-size:15.5px;font-weight:800;letter-spacing:-.02em;color:var(--text-primary);text-decoration:none} .fab__num:hover{color:var(--brand-primary)} .fab__hours{margin:3px 0 0;font-size:12px;color:var(--text-muted)} .fab__hours:empty{display:none} /* ── 접힌 상태 : 아이콘만 ── */ .fab--min .fab__panel{width:var(--fab-w-min);padding:8px;gap:6px} .fab--min .fab__ttl,.fab--min .fab__lb,.fab--min .fab__info{display:none} .fab--min .fab__hd{justify-content:center;padding:0} .fab--min .fab__fold svg{transform:rotate(180deg)} .fab--min .fab__btn{width:44px;height:44px;padding:0;justify-content:center;margin-inline:auto} /* 접었을 때 아이콘 옆에 메뉴 이름 (마우스·키보드 모두) */ .fab--min .fab__btn{position:relative} .fab--min .fab__btn::after{ content:attr(data-tip);position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%); padding:6px 10px;border-radius:9px;white-space:nowrap; background:var(--text-primary);color:var(--bg-page); font-size:12.5px;font-weight:700;letter-spacing:-.02em; opacity:0;pointer-events:none;transition:opacity .14s var(--ease); } .fab--min .fab__btn:hover::after,.fab--min .fab__btn:focus-visible::after{opacity:1} @media (prefers-reduced-motion:reduce){ .fab--min .fab__btn::after{transition:none} } /* ── 휴대폰 : 작은 '상담' 버튼 → 메뉴 열기 ── */ .fab__open{ display:none;align-items:center;gap:7px; height:52px;min-height:44px;padding:0 17px;border-radius:999px;cursor:pointer; background:var(--ig-gold);color:var(--ig-on-accent); border:1px solid var(--ig-gold-edge);box-shadow:var(--d-shadow-md); } .fab__open svg{width:22px;height:22px} /* 본문 버튼(프로모션 CTA·혜택 칩) 위에 겹치는 동안만 비켜섰다가 곧바로 돌아온다 — 기존 챗봇 버튼과 같은 동작 */ .fab__open{transition:transform .24s var(--ease),opacity .2s var(--ease),background .18s var(--ease)} .fab__open.is-away{transform:translateX(calc(100% + 18px));opacity:0;pointer-events:none} /* 버튼이 비켜서도 겉 상자(투명)는 제자리에 남는다 — 겉 상자는 누름을 받지 않고 안의 버튼만 받게 해, 보이지 않는 자리가 가격·링크 누름을 가로채지 않게 한다 (실제 200% 확대 · 390~899px 실측) */ .fab--dock{pointer-events:none} .fab--dock > *{pointer-events:auto} @media (prefers-reduced-motion:reduce){ .fab__open{transition:none} } .fab__openLb{font-size:15px;font-weight:800;letter-spacing:-.02em} .fab__x{display:none} @media (max-width:899px){ .fab--dock{right:14px;bottom:calc(var(--bar-h,94px) + 12px);align-items:flex-end} .fab__open{display:inline-flex} .fab--dock .fab__panel{display:none;width:min(272px,calc(100vw - 28px));max-height:min(62dvh,420px)} .fab--dock.is-open .fab__panel{display:flex} .fab--dock.is-open .fab__open{display:none} .fab__fold{display:none} .fab--dock.is-open .fab__x{display:inline-flex} /* 아래 고정 바(전화·카톡·셋팅가)와 같은 항목은 메뉴에 두지 않는다 — 중복 금지 */ .fab--dock .fab__btn--quote,.fab--dock .fab__btn--kakao,.fab--dock .fab__btn--tel{display:none} .fab--min .fab__panel{width:min(272px,calc(100vw - 28px));padding:10px;gap:8px} .fab--min .fab__lb,.fab--min .fab__info{display:block} .fab--min .fab__btn{width:100%;height:48px;padding:0 12px;justify-content:flex-start} .fab--min .fab__btn::after{display:none} } /* ── 큰 화면인데 옆자리가 모자랄 때 : 작은 '상담' 버튼으로 ── 메뉴가 본문(모델명·가격·조건·상담 버튼) 위에 얹히지 않도록, 옆 여백이 접힌 메뉴(60px)조차 담지 못하면 버튼 하나만 남긴다. 누르면 임시 상담 패널이 열리고, 닫기·ESC·바깥 클릭으로 닫는다. (어느 폭에서 바뀌는지는 JS 가 본문 오른쪽 여백을 실제로 재서 정한다) */ @media (min-width:900px){ .fab--dock.fab--tiny .fab__open{display:inline-flex} .fab--dock.fab--tiny .fab__panel{ display:none;position:fixed;right:var(--floating-right);bottom:var(--floating-bottom); width:min(272px,calc(100vw - 48px));max-height:min(70dvh,480px); } .fab--dock.fab--tiny.is-open .fab__panel{display:flex} .fab--dock.fab--tiny.is-open .fab__open{display:none} .fab--dock.fab--tiny .fab__fold{display:none} .fab--dock.fab--tiny.is-open .fab__x{display:inline-flex} } /* ════════ 모바일 메뉴 ════════ */ .nav{background:var(--bg-page)} .nav__list a{color:var(--text-primary)} .nav__hours{color:var(--text-muted)} /* ════════ 스킵 링크 ════════ */ /* 본문 바로가기(키보드 초점 때만 보임) — 어느 디자인에서나 대비가 확실한 본문 글자색 바탕 + 페이지 바탕색 글자 (강조색 조합은 일부 밝은 프리셋에서 2.9~3.8:1 이었다) */ .skip{background:var(--text-primary);color:var(--bg-page);font-weight:700} /* ════════════════ 데스크톱 확장 ════════════════ */ @media (min-width:600px){ .hx__cta{grid-template-columns:1.15fr .85fr} .md__grid{grid-template-columns:repeat(3,1fr)} .md__grid--offer{grid-template-columns:repeat(2,1fr)} .md__i--lead{grid-column:span 1} .md__i--lead .md__media{aspect-ratio:4/5} .md__ask{grid-template-columns:1fr auto;align-items:center} .kk__ex{grid-template-columns:repeat(3,1fr)} .pm__cta{grid-template-columns:auto auto;justify-content:start} .pm__cta .ig-btn{width:auto;min-width:210px} } @media (min-width:900px){ :root{--bar-h:0px} body{padding-bottom:0} .bar{display:none} .fab{right:24px;bottom:24px} .fab__ttl{display:block} .hd__in{height:72px} .ig-sec{padding-block:clamp(88px,7vw,132px)} .hx{padding-top:calc(72px + clamp(44px,4.5vw,76px))} .hx__in{display:grid;grid-template-columns:1.04fr .96fr;align-items:center; gap:clamp(28px,3.4vw,56px);padding-bottom:clamp(40px,4.5vw,66px)} .hx__h1{font-size:clamp(46px,4.6vw,64px)} .hx__sub,.hx__sub2{font-size:17px} .hx__cta{max-width:560px} /* 제품 이미지 위로 버튼이 겹치지 않도록 오른쪽 여백을 확보한다 */ .hx__vis{padding-right:clamp(0px,6vw,96px)} .hx__phone{height:clamp(340px,36vw,430px)} .hx__badgeIn{justify-content:center;overflow:visible;flex-wrap:wrap;padding-block:15px} .sp__bd{grid-template-columns:1fr auto;align-items:center;padding:26px 32px 28px;gap:32px} .sp__card .ig-btn{width:auto;min-width:300px} .sp__sum{font-size:16px} .sp__media{padding:32px} .sp__media img{height:clamp(220px,21vw,290px)} .md__grid{grid-template-columns:repeat(3,1fr);gap:16px} .md__grid--offer{grid-template-columns:repeat(3,1fr)} .pm{padding-block:clamp(52px,5vw,80px)} .pm__card{grid-template-columns:45fr 55fr;align-items:stretch} .pm__vis{order:2;min-height:380px;aspect-ratio:auto} .pm__vis::after{display:none} .pm__bd{order:1;padding:48px 48px 46px;display:flex;flex-direction:column;justify-content:center} .pm__t{font-size:clamp(30px,2.6vw,38px)} .pm__d{font-size:16px} .ft__top{grid-template-columns:1.2fr 1fr;align-items:start} .ft__nav{justify-content:flex-end} .fq__cta{grid-template-columns:1fr auto;align-items:center;justify-items:stretch} } @media (min-width:1200px){ .hx__h1{font-size:64px} } /* 모바일 — 제품을 글자와 같은 왼쪽 기준선에 맞추고, 오른쪽에 챗봇 버튼이 들어갈 자리를 비워 둔다 (겹침 방지) */ @media (max-width:899px){ .hx__vis{justify-content:flex-start} .hx__phone{height:clamp(198px,56vw,250px)} } /* 가로가 아주 좁을 때 */ @media (max-width:359px){ .md__grid{grid-template-columns:1fr} .md__i--lead{grid-column:span 1} .bar__row{grid-template-columns:1fr 1fr 2fr} .bar__i--cta{font-size:15px} } /* ════════ 히어로 통신사 표식 ════════ 첫 버전(커밋 3f63558 '통신사 표식을 각 사 심볼 형태로 재작업')의 마크업과 CSS 를 그대로 가져왔습니다. 새로 만들거나 받아온 로고가 아닙니다. 달라진 점은 배경뿐입니다 — 첫 버전은 밝은 배경이었고 지금은 딥 블랙이라, 각 사 고유색(SKT #3617CE · KT #1A1A1A · LG U+ #E6007E)을 그대로 쓰기 위해 아이보리 판 위에 얹었습니다. 색을 바꾸지 않기 위한 선택입니다. */ /* ---------- 히어로 제목의 통신사 표식 ---------- '세' 자리에 SKT · KT · LG U+ 를 같은 크기로 나란히 놓습니다. 화면낭독기·검색엔진에는 원래 문장('세 통신사를 한 번에.')이 그대로 전달됩니다. ※ 각 사 공식 로고 파일이 준비되면 아래 span 을 로 바꾸면 됩니다. 예) .cr{width:auto;height:.78em} */ .carriers{ display:inline-flex;align-items:flex-end; /* 밑선 기준 열 맞춤 */ gap:.3em;margin-right:.24em; vertical-align:baseline; } .cr{ display:inline-flex;align-items:flex-end;justify-content:center; width:1.05em;height:.78em; /* 세 개 모두 같은 크기 */ font-size:.86em;font-weight:800;line-height:.78; letter-spacing:-.03em;position:relative; } /* SKT — 보라색 T */ .cr--skt{color:#3617CE} /* KT — 검정 소문자 kt + 빨강 액센트 */ .cr--kt{color:#1A1A1A;letter-spacing:-.06em} .cr--kt::after{ /* k 의 팔 부분에 얹히는 빨강 액센트 */ content:'';position:absolute;left:.30em;bottom:.33em; width:.25em;height:.125em;border-radius:.01em;background:#E6002D; transform:rotate(-42deg);transform-origin:left center; } /* LG U+ — 자홍색 U 와 위첨자 + */ .cr--lgu{color:#E6007E} .cr--lgu i{font-style:normal;font-size:.62em;line-height:1;align-self:flex-start;margin-left:.02em} /* 바탕판 없이 로고만 — 어두운 히어로 위에 그대로 얹습니다. 형태·비율·간격은 첫 버전 그대로이고, 판을 없앤 대신 SKT 보라(#3617CE 1.94:1)와 KT 검정(#1A1A1A 1.08:1)은 어두운 배경에서 보이지 않으므로 각 사가 어두운 배경에 쓰는 반전 표기를 씁니다. · SKT 같은 보라 계열을 밝게 (#7566FF) · KT 흰색 워드마크 + 빨강 액센트 (KT 공식 반전 표기) · LG U+ 자홍 #E6007E 그대로 (어두운 배경에서 그대로 읽힙니다) */ .ig-eyebrow--cr{ display:inline-flex;align-items:center;gap:10px; padding:0;background:none;box-shadow:none; color:var(--d-eyebrow);font-size:13.5px;font-weight:700;letter-spacing:-.01em; } .ig-eyebrow--cr::before{display:none} .ig-eyebrow--cr .carriers{ font-size:23px; /* 판이 사라진 만큼 표식 자체를 키운다 */ gap:.34em;margin-right:0;padding:0;background:none; } .ig-eyebrow--cr .cr--skt{color:#7566FF} .ig-eyebrow--cr .cr--kt{color:#FFFDF7} .ig-eyebrow--cr .cr--kt::after{background:#FF2B4E} .ig-eyebrow--cr .cr--lgu{color:#E6007E} @media (max-width:599px){ .ig-eyebrow--cr{gap:9px;font-size:13px} .ig-eyebrow--cr .carriers{font-size:20px;gap:.3em} } @media (max-width:359px){ .ig-eyebrow--cr{flex-wrap:wrap;row-gap:7px} } /* ══════════════════════════════════════════════════════════════════════ 판매형 재보정 — 검정 / 아이보리 / 골드 면적 재배분 ▸ 어두운 히어로 → 밝은 특판 → 어두운 프로모션 → 밝은 인기기종 → 어두운 견적·매장·FAQ 로 명암이 확실히 전환됩니다. ▸ 골드를 가는 선이 아니라 CTA·칩·헤더 같은 '면'에 씁니다. ▸ 구조·문구·데이터·동작은 그대로입니다. 색과 크기, 순서만 조정합니다. ══════════════════════════════════════════════════════════════════════ */ /* ── 섹션 배경 리듬 ── */ .hx{background:var(--bg-page)} .hx__badges{background:var(--bg-section)} #faq{background:var(--bg-page)} .ft{background:var(--d-footer,var(--bg-section));color:var(--d-footer-ink,var(--text-primary))} .ft__brand{color:var(--d-footer-ink,var(--text-primary))} .ft__desc,.ft__nav a,.ft__biz a{color:var(--d-footer-ink-2,var(--text-secondary))} .ft__nav a:hover{color:var(--d-footer-ink,var(--text-primary))} /* 사업자 정보 줄도 바닥글 글자색으로 — 밝은 바탕용 회색이 어두운 바닥글 위에서 3.05:1 이었다 */ .ft__legal,.ft__copy,.ft__notice,.ft__biz{color:var(--d-footer-ink-3,var(--text-muted))} /* ════════ 밝은 아이보리 강조면 (특판 · 인기기종) ════════ 토큰만 지역적으로 뒤집어 기존 컴포넌트를 그대로 재사용합니다. */ #special, #setting-prices{ background:var(--ivory); color:var(--ink-ivory); /* body 에서 상속된 흰 글자를 여기서 끊는다 */ /* 칸 경계는 장식용 금색 선이 아니라 중립 구분선으로 둔다 */ border-block:1px solid var(--line-ivory); --text-primary:var(--ink-ivory); --text-secondary:var(--ink3-ivory); --text-muted:var(--ink2-ivory); --bg-page:var(--ivory); --bg-section:var(--ivory); --bg-section-alt:var(--cream); --bg-elevated:var(--ivory-card); --border-default:var(--line-ivory); --border-strong:color-mix(in srgb, var(--gold-deep) 44%, transparent); --accent-primary:var(--gold-deep); --accent-hover:var(--d-accent-deep-2); --ig-accent:var(--gold-deep); --focus-ring:var(--gold-deep); } /* 아이보리 면 위 눈에 띄는 골드 헤더 칩 — 가는 선 대신 면으로 */ #special .ig-eyebrow, #setting-prices .ig-eyebrow{ padding:8px 15px;border-radius:999px; background:var(--ig-gold);color:var(--ink-ivory); font-size:12.5px;font-weight:800;letter-spacing:.02em; box-shadow:var(--d-sh-accent-md); } #special .ig-eyebrow::before, #setting-prices .ig-eyebrow::before{display:none} #special .ig-h2, #setting-prices .ig-h2{margin-top:14px;font-size:clamp(29px,7vw,46px)} #special .ig-h2 em, #setting-prices .ig-h2 em{color:var(--gold-deep)} /* 아이보리 위 주 CTA — 골드 면이 바탕에 묻히지 않게 깊은 골드 테두리를 두른다 */ #special .ig-btn--fill, #setting-prices .ig-btn--fill{border-color:var(--gold-deep);box-shadow:0 10px 26px color-mix(in srgb, var(--gold-deep) 30%, transparent)} /* 보조 행동은 골드를 쓰지 않는다 — 검정 라인으로 구분 */ #special .ig-btn--ghost, #setting-prices .ig-btn--ghost{background:transparent;border-color:color-mix(in srgb, var(--ink-ivory) 32%, transparent);color:var(--ink-ivory)} #special .ig-btn--ghost:hover, #setting-prices .ig-btn--ghost:hover{background:color-mix(in srgb, var(--ink-ivory) 5%, transparent);border-color:var(--ink-ivory)} /* ════════ 02 특판 — 페이지에서 가장 강한 판매 구간 ════════ */ #special{padding-block:clamp(42px,6.4vw,72px)} #special .sp__grid{margin-top:22px} /* 원본 배너를 골드 프레임으로 감싼다 (배너 이미지는 그대로) */ #special .sp__card{ background:var(--ivory-card); border:2px solid var(--gold-deep); box-shadow:var(--d-sh-accent-lg); } #special .sp__shot img{border-bottom:2px solid var(--gold-deep)} #special .sp__bd{padding:20px 22px 22px;gap:22px} #special .sp__sum{font-size:clamp(15.5px,3.9vw,18px);font-weight:600;color:var(--ink-ivory)} #special .sp__sum b{font-weight:800} /* 70만원 + 60만원 — 가장 먼저 읽히도록 골드 면 칩으로 */ #special .sp__lines{gap:10px;margin-top:14px} #special .sp__lines li{ padding:12px 17px;border-radius:12px;border:0; background:var(--ig-gold);color:var(--ink-ivory); font-size:clamp(15px,3.7vw,19px);font-weight:800;letter-spacing:-.03em; box-shadow:var(--d-sh-accent-chip); } #special .sp__cond{margin-top:12px;font-size:12.5px;color:var(--ink2-ivory)} #special .sp__card .ig-btn{min-height:62px;font-size:17px} #special .sp__at{margin-top:14px;font-size:11.5px;color:var(--ink2-ivory)} /* ════════ 프로모션 — 화보에서 행동형 배너로 ════════ */ .pm{background:var(--bg-page);padding-block:clamp(28px,4.6vw,46px)} /* 사진 위 어두운 겹침을 낮춰 상품이 더 보이게 */ .pm__vis::after{height:20%} .pm__t{font-size:clamp(27px,7vw,42px);line-height:1.18;letter-spacing:-.045em} .pm__d{margin-top:12px} .pm__chips{margin-top:16px} .pm__cta{margin-top:20px} .pm__cta .ig-btn--xl{min-height:60px;font-size:17px} .pm__note{margin-top:14px} /* 라벨을 골드 면으로 — 얇은 테두리만으로는 약하다 */ .pm__label{padding:7px 14px;font-size:12px;font-weight:800;letter-spacing:.02em; background:var(--ig-gold);border-color:transparent;color:var(--ink-ivory)} .pm--teal .pm__label{background:var(--d-teal);border-color:transparent;color:var(--d-teal-ink)} /* 크림 카피 패널 — 인터넷·TV / 중고폰. 헬스케어는 어두운 면으로 남겨 교차시킨다 */ .pm--lite{ --pm-card:var(--cream); --pm-txt:var(--ink-ivory); --pm-txt2:var(--ink3-ivory); --g:var(--gold-deep); --g2:var(--d-accent-deep-2); --gl:color-mix(in srgb, var(--gold-deep) 34%, transparent); --ivory:var(--ink-ivory); } .pm--lite .pm__chips li{background:color-mix(in srgb, var(--gold-deep) 10%, transparent);border-color:color-mix(in srgb, var(--gold-deep) 30%, transparent);color:var(--ink-ivory)} .pm--lite .pm__note{color:var(--ink2-ivory)} .pm--lite .ig-btn--fill{border-color:var(--gold-deep);box-shadow:0 10px 26px color-mix(in srgb, var(--gold-deep) 30%, transparent)} .pm--lite .ig-btn--ghost{background:transparent;border-color:color-mix(in srgb, var(--ink-ivory) 34%, transparent);color:var(--ink-ivory)} .pm--lite .ig-btn--ghost:hover{background:color-mix(in srgb, var(--ink-ivory) 5%, transparent);border-color:var(--ink-ivory)} .pm--lite .pm__badge{background:color-mix(in srgb, var(--ink-ivory) 78%, transparent);color:var(--brand-strong);border-color:color-mix(in srgb, var(--brand-strong) 40%, transparent)} .pm--lite :focus-visible{outline-color:var(--gold-deep)} /* ════════ 인기 기종 — 어두운 면. 제품 타일만 크림으로 띄운다 ════════ 섹션 전체를 밝게 하면 아이보리 면적이 과해져 검정이 주인공에서 밀려납니다. 제품 사진만 밝은 타일에 얹어 선명하게 보이도록 했습니다. */ #devices{background:var(--bg-section)} #devices .md__i{background:var(--bg-elevated)} #devices .md__i:hover{border-color:var(--brand-primary)} #devices .md__media{background:var(--cream);border-bottom:1px solid var(--border-default)} #devices .md__tag{background:color-mix(in srgb, var(--ink-ivory) 72%, transparent);border-color:color-mix(in srgb, var(--brand-strong) 34%, transparent);color:var(--brand-strong)} /* 카드의 주 행동이므로 골드 면으로 채운다 (보조 행동에는 골드를 쓰지 않는다) */ #devices .md__btn{background:var(--ig-gold);border-color:var(--ig-gold-edge);color:var(--ink-ivory);font-weight:800} #devices .md__btn:hover{background:var(--ig-gold-h);border-color:var(--d-btn-hover-edge)} #devices .md__btn:active{background:var(--ig-gold-a)} /* ════════ 히어로 — 첫 3초 ════════ */ /* 골드 강조 행은 더 밝은 메탈릭 골드 + 얇은 언더라인 (글로우 없음) */ .hx__h1 em{ color:var(--brand-strong); background-image:var(--d-underline); background-repeat:no-repeat;background-size:100% 3px;background-position:0 100%; padding-bottom:.09em; } .hx__micro{color:var(--text-primary);font-size:14.5px} .hx__warn{color:var(--text-muted)} /* 주 CTA 를 확실히 무겁게, 보조는 확실히 가볍게 */ .hx__cta .ig-btn--fill{min-height:64px;font-size:18px;font-weight:800;letter-spacing:-.03em} .hx__cta .ig-btn--ghost{min-height:56px;background:transparent;border-color:var(--border-default); color:var(--text-secondary);font-weight:700} .hx__cta .ig-btn--ghost:hover{background:var(--bg-elevated);border-color:var(--border-strong);color:var(--text-primary)} /* 신뢰 배지 — 골드 라인 카드로 */ /* 히어로 아래 전폭 골드 띠 — 골드를 가는 선이 아니라 '면'으로 쓰는 자리 */ .hx__badges{background:var(--ig-gold);border-top-color:var(--gold-deep);border-bottom-color:var(--gold-deep)} .bg1{background:color-mix(in srgb, var(--ivory-card) 34%, transparent);border-color:color-mix(in srgb, var(--ink-ivory) 22%, transparent);color:var(--ink-ivory); font-weight:700;font-size:13px;padding:10px 15px} .bg1::before{background:var(--ink-ivory);width:13px;height:13px} /* ── 모바일 첫 화면 : 표식 → H1 → 주 CTA → 제품 순서로 압축 ── 설명문은 지우지 않고 제품 아래로 내립니다. */ @media (max-width:899px){ .hx{padding-top:calc(60px + clamp(16px,3.6vw,26px))} .hx__in{display:flex;flex-direction:column;padding-bottom:0} .hx__tx{display:contents} .ig-eyebrow--cr{order:1} .hx__h1{order:2;margin-top:12px} .hx__cta{order:3;margin-top:18px;gap:9px} .hx__micro{order:4;margin-top:11px} .hx__vis{order:5;margin-top:6px} .hx__sub{order:6;margin-top:14px;max-width:none} .hx__sub2{order:7} .hx__warn{order:8;margin-bottom:18px} .hx__cta .ig-btn--fill{min-height:60px;font-size:17px} .hx__cta .ig-btn--ghost{min-height:52px} .hx__phone{height:clamp(230px,64vw,300px)} } /* 어두운 섹션의 섹션 헤더도 가는 선 대신 골드 칩으로 */ .ig-eyebrow{padding:7px 14px;border-radius:999px;background:var(--d-eyebrow-chip,var(--ig-gold)); color:var(--d-eyebrow-chip-ink,var(--ink-ivory));font-size:12.5px;font-weight:800;letter-spacing:.02em; box-shadow:var(--d-sh-accent-eyebrow)} .ig-eyebrow::before{display:none} .ig-h2{margin-top:14px} /* 통신사 표식 줄은 골드 칩이 아니라 로고만 — 바탕판 없음 (순서상 여기서 되돌린다) */ .ig-eyebrow--cr{ padding:0;background:none;box-shadow:none;border-radius:0; color:var(--d-eyebrow);font-size:13.5px;font-weight:700;letter-spacing:-.01em;gap:10px; } .ig-eyebrow--cr .carriers{font-size:23px;gap:.34em;margin-right:0;padding:0;background:none;box-shadow:none} .ig-eyebrow--cr .cr--skt{color:#7566FF} .ig-eyebrow--cr .cr--kt{color:#FFFDF7} .ig-eyebrow--cr .cr--kt::after{background:#FF2B4E} .ig-eyebrow--cr .cr--lgu{color:#E6007E} @media (max-width:599px){ .ig-eyebrow--cr{gap:9px;font-size:13px} .ig-eyebrow--cr .carriers{font-size:20px;gap:.3em} } @media (max-width:359px){ .ig-eyebrow--cr{flex-wrap:wrap;row-gap:7px} } /* ══════════════════════════════════════════════════════════════════════ 통신사별 오늘의 셋팅가 밝은 아이보리 면 위에 카드를 얹습니다(위 #special · #setting-prices 토큰 그룹). 가격이 가장 먼저 읽히도록 최종가 두 개를 큰 선택 버튼으로 둡니다. ══════════════════════════════════════════════════════════════════════ */ .stp{padding-block:clamp(44px,6.6vw,76px)} /* 공통 통신사 탭은 없앴다 — 선택은 카드 안 .stp__carrierPick 이 맡는다 */ /* ── 카드 격자 ── */ .stp__grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:20px;padding:0;list-style:none} .stp__card{ /* 카드 폭 기준으로 글자 크기를 정하기 위한 컨테이너 (PC 다단에서 카드가 좁아져도 금액이 카드보다 넓어지지 않는다). 폭이 내용에 끌려가지 않으므로 가로 스크롤도 막힌다. */ container-type:inline-size; display:flex;flex-direction:column;min-width:0; background:var(--ivory-card);border:1px solid var(--line-ivory);border-radius:16px; padding:16px 16px 18px;box-shadow:var(--d-sh-surface-sm); } .stp__card.is-focus{border-color:var(--gold-deep);border-width:2px;padding:15px 15px 17px; box-shadow:0 16px 36px -20px color-mix(in srgb, var(--gold-deep) 50%, transparent)} /* PC 에서는 카드 안쪽 여백을 조금 더 둔다 (배지가 모서리에 붙지 않게) */ @media (min-width:768px){ .stp__card{padding:20px 20px 22px} .stp__card.is-focus{padding:19px 19px 21px} } .stp__top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap; column-gap:16px;row-gap:18px;width:100%; /* 특판 배지가 있는 카드와 없는 카드의 시작선을 맞춘다 — 배지가 들어갈 높이를 늘 확보해 두고, 없는 카드에 가짜 배지를 그리지는 않는다. (배지 최소 높이 : 휴대폰 58px · PC 62px) */ min-height:58px;align-content:center} @media (min-width:768px){ .stp__top{min-height:62px} } .stp__spSlot{margin-left:auto;display:inline-flex;align-items:center;justify-content:flex-end} .stp__spSlot:empty{display:none} /* ── 카드 안 통신사 선택 (예전 LG U+ 배지 자리) ── 같은 모델·용량 카드에서 통신사만 바꾼다. 사진·모델명은 그대로 두고 가격·조건만 갱신된다. */ /* 버튼을 감싸는 판은 두지 않는다 — 개별 버튼만 보이고 컨테이너는 역할만 한다 */ .stp__carrierPick{ display:inline-flex;align-items:center;flex-wrap:wrap;gap:7px; width:fit-content;max-width:100%;margin:0;padding:0;border:0;border-radius:0; background:transparent;background-image:none;box-shadow:none;min-height:0; } .stp__carrierPick:focus{outline:none} .stp__carrierBtn{ min-height:48px;min-width:56px;padding:0 12px;border-radius:12px;cursor:pointer; display:inline-flex;align-items:center;justify-content:center; border:1.5px solid var(--line-ivory);background:var(--ivory-card); color:var(--ink-ivory);font-size:22px;line-height:1; transition:background .16s var(--ease), border-color .16s var(--ease), box-shadow .16s var(--ease); } .stp__carrierBtn:hover{border-color:var(--gold-deep)} .stp__carrierBtn:focus-visible{outline:3px solid var(--gold-deep);outline-offset:2px} .stp__carrierBtn .cr{font-size:1em} /* 고른 통신사만 고유색 판 (고르지 않은 버튼도 흐리게 두지 않는다) */ .stp__carrierBtn--lgu.is-on{background:#E6007E;border-color:#E6007E;box-shadow:0 6px 16px -8px #E6007E} .stp__carrierBtn--lgu.is-on .cr--lgu{color:#FFFFFF} .stp__carrierBtn--skt.is-on{background:#3617CE;border-color:#3617CE;box-shadow:0 6px 16px -8px #3617CE} .stp__carrierBtn--skt.is-on .cr--skt{color:#FFFFFF} .stp__carrierBtn--kt.is-on{background:#F7F0DE;border-color:#1A1A1A;box-shadow:inset 0 -4px 0 #E6002D} .stp__carrierBtn--kt.is-on .cr--kt{color:#1A1A1A} /* 통신사를 바꿀 때 다시 그려지는 영역 (사진·모델명은 이 밖에 있다) */ .stp__body{display:contents} /* 아직 조건이 없는 통신사 */ .stp__soon{ margin-top:14px;padding:16px;border-radius:12px;text-align:center; background:color-mix(in srgb, var(--gold-deep) 7%, transparent);border:1px dashed color-mix(in srgb, var(--gold-deep) 40%, transparent); } .stp__soon .stp__soonT{font-size:clamp(19px,4.8vw,22px);font-weight:900;color:var(--ink-ivory);margin:0} .stp__soon .stp__soonD{margin:6px 0 12px;font-size:clamp(16px,4vw,18px);color:var(--ink2-ivory);line-height:1.5} /* ── 카드 오른쪽 위 상태 배지 ── 판매 강조 표시이므로 통신사 버튼보다 작아 보이지 않게 크게 두고, 카드 배경과 명암을 확실히 벌린다. (transform:scale 로 키우지 않고 실제 크기를 키운다) */ .stp__badges{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;align-items:center;margin-left:auto} .stp__badge{ display:inline-flex;align-items:center;justify-content:center; min-height:54px;min-width:88px;padding:0 20px;border-radius:14px;border:2px solid transparent; font-size:clamp(19px,5vw,23px);font-weight:900;line-height:1;letter-spacing:-.02em;white-space:nowrap; } /* '매우 크게' */ .stp__badge--xl{min-height:58px;min-width:96px;padding:0 22px;font-size:clamp(22px,5.6vw,26px)} /* PC 에서는 한 단계 더 크게 (모바일 52px 이상 · PC 56px 이상) */ @media (min-width:768px){ .stp__badge{min-height:58px;min-width:96px} .stp__badge--xl{min-height:62px;min-width:104px} } /* 색은 프리셋에서만 고른다 (functions/_sp.js BADGE_PRESETS 와 같은 값) */ .stp__badge--gold{background:#17110A;color:#FFD34E;border-color:#D89A16;box-shadow:0 8px 20px rgba(117,73,0,.24)} .stp__badge--navy{background:#1746C7;color:#FFFFFF;border-color:#0F2F8A} .stp__badge--orange{background:#E85D04;color:#FFFFFF;border-color:#A34203} .stp__badge--black{background:#A11224;color:#FFFFFF;border-color:#6E0C18} .stp__badge--violet{background:#6D28D9;color:#FFFFFF;border-color:#4A1B94} .stp__badge--red{background:#C81E1E;color:#FFFFFF;border-color:#8A1414} .stp__badge--green{background:#087F5B;color:#FFFFFF;border-color:#05563E} .stp__badge--ivory{background:#172554;color:#F7F0DE;border-color:#0C1533} .stp__model{ margin:16px 0 0;font-size:clamp(19px,4.6vw,22px);font-weight:800; letter-spacing:-.04em;line-height:1.3;color:var(--ink-ivory); overflow-wrap:anywhere; } .stp__model span{font-weight:700;color:var(--ink2-ivory);font-size:.82em} .stp__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} .stp__tag{ padding:4px 9px;border-radius:999px;border:1px solid color-mix(in srgb, var(--gold-deep) 40%, transparent); font-size:11px;font-weight:800;color:var(--gold-deep);letter-spacing:-.02em; } .stp__tag--off{border-color:color-mix(in srgb, var(--ink-ivory) 30%, transparent);color:var(--ink2-ivory);background:color-mix(in srgb, var(--ink-ivory) 6%, transparent)} /* 제품 이미지 — 휴대폰 **전체**가 보여야 한다 (위·아래·좌우 어느 쪽도 잘리지 않게). 예전 규칙은 `width:auto;height:100%` 였는데, aspect-ratio 프레임 안에서 100% 높이가 해결되지 않아 요소 자체가 프레임보다 커졌고(301×376 vs 301×188) overflow 로 하단이 잘렸다. 요소 크기를 프레임 콘텐츠 박스에 고정하고, 그 안에서 object-fit:contain 이 비율을 지킨다. */ .stp__media{ position:relative;margin-top:12px;border-radius:12px;background:var(--cream); border:1px solid var(--line-ivory); aspect-ratio:1/1;overflow:hidden;display:grid;place-items:center; } /* 절대 위치 + 네 방향 inset : 요소 박스가 프레임 안쪽으로 확정된다. (aspect-ratio 그리드 안에서는 height:100% 가 해결되지 않아 기기 하단이 잘렸다) */ .stp__media img{ position:absolute;top:6%;left:6%;width:88%;height:88%; max-width:none;max-height:none; object-fit:contain;object-position:center;transform:none;scale:1;display:block; filter:drop-shadow(0 6px 14px color-mix(in srgb, var(--ink-ivory) 12%, transparent)); } .stp__media.is-none::after{ content:'사진 준비 중';font-size:12.5px;font-weight:700;color:var(--ink4-ivory);letter-spacing:-.02em; } /* 출고가 · 할인 내역 */ .stp__rows{margin:16px 0 0;border-top:1px solid var(--line-ivory)} .stp__rows>div{ display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;width:100%;column-gap:18px; padding:11px 0;border-bottom:1px solid var(--line-ivory); } .stp__rows dt{font-size:clamp(17px,4.4vw,21px);color:var(--ink2-ivory);font-weight:700;letter-spacing:-.02em;min-width:0} .stp__rows dd{margin:0;font-size:clamp(20px,5.2vw,27px);font-weight:800;letter-spacing:-.03em; color:var(--ink-ivory);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right} .stp__cut{color:var(--gold-deep)} /* 최종가 — 카드에서 가장 강한 요소이자 선택 버튼 */ .stp__picks{display:grid;gap:10px;margin:16px 0 0;padding:0;list-style:none;width:100%} /* 라벨과 금액을 한 열로 세워 가운데 축을 맞춘다 (좌우 끝 정렬 · 2열 그리드 금지). 금액이 길어져도 글자를 줄이지 않고 칸의 안쪽 여백으로 흡수한다. */ .stp__pickBtn{ width:100%;min-width:0;min-height:clamp(112px,28vw,140px);padding:18px 8px;border-radius:14px;cursor:pointer; display:grid;grid-template-columns:minmax(0,1fr);place-items:center;align-content:center;gap:8px;text-align:center; /* 최종 가격 판 — 상담 버튼과 다른 색을 쓸 수 있게 토큰으로 둔다 (값이 없으면 지금 색 그대로) */ background:var(--d-price-btn,var(--ig-gold)); border:1px solid var(--d-price-btn-edge,var(--gold-deep)); color:var(--d-price-btn-ink,var(--ink-ivory)); box-shadow:var(--d-sh-accent-pick); transition:background .16s var(--ease), transform .12s var(--ease); } .stp__pickBtn:hover{background:var(--d-price-btn-hover,var(--ig-gold-h))} .stp__pickBtn:active{transform:translateY(1px)} .stp__pickBtn:focus-visible{outline:2px solid var(--ink-ivory);outline-offset:2px} .stp__pickBtn.is-off{background:color-mix(in srgb, var(--ink-ivory) 8%, transparent);border-color:color-mix(in srgb, var(--ink-ivory) 20%, transparent); color:var(--ink2-ivory);box-shadow:none;cursor:not-allowed} .stp__pickK{width:100%;margin:0;font-size:clamp(22px,5.6vw,28px);font-weight:900;letter-spacing:-.03em; line-height:1.2;text-align:center;word-break:keep-all} .stp__pickV{width:100%;margin:0;font-size:clamp(44px,10vw,56px);font-weight:900;letter-spacing:-.06em;line-height:1; font-variant-numeric:tabular-nums;white-space:nowrap;text-align:center} /* 카드 폭 기준(16cqw) 이면 좁은 다단 화면에서도 금액이 칸을 넘지 않는다 (지원 없으면 위 vw 기준) */ @supports (width:1cqw){ .stp__pickV{font-size:clamp(44px,16cqw,60px)} .stp__pickK{font-size:clamp(22px,7.4cqw,28px)} } .stp__pick--note{ width:100%;min-width:0;min-height:clamp(96px,24vw,120px);padding:16px;border-radius:14px; display:grid;grid-template-columns:minmax(0,1fr);place-items:center;align-content:center;gap:6px;text-align:center; background:color-mix(in srgb, var(--gold-deep) 9%, transparent);border:1px dashed color-mix(in srgb, var(--gold-deep) 40%, transparent); } .stp__pick--note .stp__pickK{font-size:clamp(19px,4.8vw,24px);color:var(--ink-ivory)} /* 안내 문구는 길 수 있으므로 줄바꿈을 허용하고, 라벨과 같은 가운데 축에 둔다 */ .stp__pickNote{width:100%;margin:0;font-size:clamp(19px,4.8vw,22px);font-weight:800;color:var(--ink2-ivory); letter-spacing:-.025em;text-align:center;white-space:normal;word-break:keep-all;line-height:1.45} .stp__plan{margin:15px 0 0;font-size:clamp(16.5px,4.2vw,20px);line-height:1.6;color:var(--ink2-ivory);font-weight:700;word-break:keep-all} .stp__plan b,.stp__plan strong{font-weight:800;color:var(--ink-ivory)} /* 세부 조건 */ .stp__det{margin-top:12px;border-top:1px solid var(--line-ivory)} .stp__det>summary{ list-style:none;cursor:pointer;min-height:46px;display:flex;align-items:center; justify-content:space-between;gap:10px;font-size:13.5px;font-weight:700; letter-spacing:-.025em;color:var(--gold-deep); } .stp__det>summary::-webkit-details-marker{display:none} .stp__det>summary::after{content:'＋';font-size:15px;font-weight:800} .stp__det[open]>summary::after{content:'－'} .stp__det>summary:focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px;border-radius:6px} .stp__detBd{padding-bottom:12px} .stp__detBd h4{margin:10px 0 5px;font-size:12px;font-weight:800;color:var(--ink4-ivory);letter-spacing:.02em} .stp__detBd ul{margin:0;padding-left:16px;display:grid;gap:5px} .stp__detBd li,.stp__detBd p{font-size:12.5px;line-height:1.7;color:var(--ink3-ivory);margin:0} .stp__dnote{margin-top:10px !important;color:var(--ink2-ivory) !important;font-size:11.5px !important} .stp__soldCta{margin-top:12px} /* 업데이트 예정 · 오류 안내 */ .stp__note{ margin-top:18px;padding:26px 22px;border-radius:16px;text-align:center; background:var(--cream);border:1px dashed color-mix(in srgb, var(--gold-deep) 42%, transparent); } .stp__soonT{margin:0;font-size:clamp(16px,4.2vw,19px);font-weight:800; letter-spacing:-.035em;color:var(--ink-ivory);line-height:1.45} .stp__soonD{margin:8px 0 0;font-size:13.5px;color:var(--ink2-ivory)} .stp__soonBtns{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:16px} .stp__soonBtns .ig-btn{min-width:180px} .stp__note--ns{display:block} .stp__at{margin:16px 0 0;font-size:11.5px;line-height:1.7;color:var(--ink2-ivory)} /* 불러오는 중 — 카드 크기를 유지한다 */ .stp__card--skel{gap:10px;pointer-events:none} .stp__skelImg{display:block;aspect-ratio:16/10;border-radius:12px} .stp__skelLine{display:block;height:18px;border-radius:6px;width:70%} .stp__skelLine--s{width:45%;height:14px} .stp__skelBox{display:block;height:60px;border-radius:12px;margin-top:6px} .stp__skelImg,.stp__skelLine,.stp__skelBox{ background:linear-gradient(100deg, color-mix(in srgb, var(--gold-deep) 10%, transparent) 30%, color-mix(in srgb, var(--gold-deep) 18%, transparent) 50%, color-mix(in srgb, var(--gold-deep) 10%, transparent) 70%); background-size:200% 100%;animation:stpSkel 1.2s linear infinite; } @keyframes stpSkel{from{background-position:200% 0}to{background-position:-200% 0}} @media (prefers-reduced-motion:reduce){ .stp__skelImg,.stp__skelLine,.stp__skelBox{animation:none} } @media (min-width:768px){ /* 카드가 너무 좁아지면 금액이 카드보다 넓어진다. 폭을 320px 아래로 내리지 않는다. */ .stp__grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px} } @media (min-width:1024px){ .stp__grid{gap:18px} } /* ══════════ 셋팅가 선택 후 연락처 패널 ══════════ 하단 고정 CTA·플로팅 버튼보다 위에 뜨므로 겹칠 일이 없습니다. */ body.stp-open{overflow:hidden} .stpf{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:16px} .stpf[hidden]{display:none} .stpf__dim{position:absolute;inset:0;background:var(--d-overlay);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)} .stpf__box{ position:relative;width:min(440px,100%);max-height:calc(100dvh - 32px);overflow-y:auto; background:var(--ivory-card);color:var(--ink-ivory); border:1px solid var(--gold-deep);border-radius:18px;padding:24px 20px 22px; box-shadow:var(--d-sh-surface-lg); } .stpf__x{ position:absolute;top:8px;right:8px;width:44px;height:44px;border:0;background:none; display:grid;place-items:center;border-radius:10px;color:var(--ink2-ivory);cursor:pointer; } .stpf__x:hover{background:color-mix(in srgb, var(--ink-ivory) 7%, transparent);color:var(--ink-ivory)} .stpf__x svg{width:20px;height:20px} .stpf__k{margin:0;font-size:11.5px;font-weight:800;letter-spacing:.04em;color:var(--ink4-ivory)} .stpf__t{margin:6px 0 0;font-size:17px;font-weight:800;letter-spacing:-.035em;line-height:1.4;padding-right:40px} .stpf__price{margin:10px 0 0;font-size:14px;color:var(--ink3-ivory)} .stpf__price b{font-size:23px;font-weight:800;letter-spacing:-.04em;color:var(--gold-deep); font-variant-numeric:tabular-nums} .stpf__price:empty{display:none} .stpf__cond{margin:12px 0 0;padding:12px 0 0;border-top:1px solid var(--line-ivory); display:grid;gap:5px;list-style:none} .stpf__cond li{font-size:12.5px;line-height:1.6;color:var(--ink2-ivory);padding-left:13px;position:relative} .stpf__cond li::before{content:'';position:absolute;left:2px;top:.6em;width:4px;height:4px; border-radius:50%;background:var(--gold-deep)} .stpf__form{margin-top:18px;display:grid;gap:12px} .stpf__fld{display:grid;gap:6px} .stpf__fld label{font-size:13px;font-weight:700;color:var(--ink3-ivory);letter-spacing:-.02em} .stpf__opt{font-weight:600;color:var(--ink4-ivory)} .stpf__fld .req{color:var(--gold-deep)} .stpf__fld input{ width:100%;min-height:52px;padding:13px 14px;border-radius:11px; background:var(--d-input);border:1px solid var(--d-input-border);color:var(--ink-ivory); font:inherit;font-size:16px;letter-spacing:-.02em; } .stpf__fld input::placeholder{color:var(--ink4-ivory)} .stpf__fld input:focus{outline:none;border-color:var(--gold-deep);box-shadow:0 0 0 3px color-mix(in srgb, var(--gold-deep) 18%, transparent)} .stpf__agree{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.6; color:var(--ink3-ivory);cursor:pointer} .stpf__agree input{flex:none;width:22px;height:22px;margin-top:1px;accent-color:var(--gold-deep)} .stpf__agree a{color:var(--ink-ivory);text-decoration:underline;text-underline-offset:3px} .stpf__msg{margin:0;font-size:13px;line-height:1.6;min-height:1px;font-weight:700} .stpf__msg.is-err{color:var(--d-err)} .stpf__msg.is-ok{color:var(--d-ok)} .stpf__guard{margin:0;font-size:11px;line-height:1.6;color:var(--ink4-ivory)} .stpf .ig-btn--fill{border-color:var(--gold-deep)} /* 봇 차단용 숨김 항목 — 사람에게는 보이지 않는다 */ .stpf__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* ── 특판 최종가 예외 카드 (대표가 확인한 조건) ── 고객 화면에는 반복 설명 문구를 두지 않고, 카드 오른쪽 위 '특판' 배지 하나만 남긴다. (특판 판정·서버 검증·상담 전달값은 그대로다) */ /* 특판 카드도 실제 구매가격이 카드에서 가장 큰 글자여야 한다 (예전에는 여기서 23px 로 줄었다) */ /* 금액이 재확인되지 않은 가입 유형 — 숫자 대신 상담으로 */ .stp__pickBtn--ask{ background:transparent;border:1px solid color-mix(in srgb, var(--ink-ivory) 34%, transparent);color:var(--ink-ivory); box-shadow:none;min-height:clamp(96px,24vw,120px); } .stp__pickBtn--ask:hover{background:color-mix(in srgb, var(--ink-ivory) 5%, transparent);border-color:var(--ink-ivory)} .stp__pickAsk{width:100%;margin:0;font-size:clamp(19px,4.8vw,22px);font-weight:800;letter-spacing:-.03em; text-align:center;line-height:1.35;word-break:keep-all} /* 푸터 안내 문구 (관리자 전역 설정 · 비어 있으면 표시되지 않음) */ .ft__notice{margin:10px 0 0;font-size:12.5px;line-height:1.6;color:var(--text-muted)} /* ══════════════════════════════════════════════════════════════════════ 극소 폭 안전장치 (240~359px) ★ 240px 까지는 "글자를 억지로 줄이지 않고" 줄바꿈·한 열 배치로 해결합니다. 실측에서 240px 헤더가 가로 스크롤(266>225)을 만들고, 금액(279,000원)이 칸을 넘어 잘리던 것을 여기서 막습니다. ★ 터치 영역은 44×44px 아래로 내려가지 않습니다. ══════════════════════════════════════════════════════════════════════ */ @media (max-width:359px){ /* 헤더 : 전화번호·버튼이 한 줄에 못 들어가면 자연스럽게 접힌다 */ .hd__in{flex-wrap:wrap;row-gap:8px} .hd__act{flex-wrap:wrap;gap:8px;min-width:0} .hd__tel{font-size:14px;white-space:nowrap} .hd__act .ig-btn{padding-inline:12px;font-size:14px} .hd__brand img,.hd__brand svg{max-width:118px;height:auto} /* 카드·가격 : 한 열로 두고 금액은 칸 안에서 읽히도록 */ .stp__grid,.md__grid{grid-template-columns:minmax(0,1fr)} .stp__card,.md__i{min-width:0} .stp__pickBtn{padding:16px 6px} .stp__pickV{font-size:clamp(30px,12.5cqw,40px);letter-spacing:-.06em} .md__finalV{font-size:clamp(28px,12cqw,38px)} .stp__rows dd,.md__r dd{font-size:clamp(17px,5vw,20px)} .stp__badge{min-width:74px;padding:0 12px;font-size:17px} .stp__carrierBtn{min-width:52px;padding:0 8px} /* 버튼 글자가 두 줄이 돼도 높이가 늘어나게 */ .ig-btn,.md__btn,.stp__pickBtn,.bar__i{white-space:normal;word-break:keep-all;height:auto} .ig-btn{min-height:48px;padding-block:10px} } @media (max-width:319px){ .stp__picks,.md__rows{gap:8px} .stp__card{padding:12px 12px 14px} .md__i--offer{padding:12px 12px 14px} .stp__model{font-size:clamp(17px,5.4vw,19px)} .stp__badges{width:100%;justify-content:flex-start} } /* 모바일 하단 CTA 가 마지막 내용을 가리지 않게 + 홈 인디케이터 여백 ※ 마지막 내용 아래 공간은 body 한 곳에서만 잡는다 (--bar-h 에 고정 바 높이와 하단 안전 영역이 함께 들어 있으므로 섹션·푸터에 다시 더하지 않는다). 예전에는 여기서 body 여백을 지우고 `footer` 에 84px 을 줬는데, `.ft` 의 padding-block 이 더 세서 그 값이 먹지 않아 마지막 줄이 24px 가렸다. */ @media (max-width:767px){ body{padding-bottom:var(--bar-h)} .bar{padding-bottom:env(safe-area-inset-bottom,0px)} } /* 상담 패널·모달 : 화면이 낮거나 키보드가 열려도 내부 스크롤로 모두 접근 */ .stpf__box{max-height:min(88vh, calc(100dvh - 24px));overflow:auto;-webkit-overflow-scrolling:touch} @supports (height: 100dvh){ .stpf{height:100dvh} } /* ══════════════════════════════════════════════════════════════════════ 첫 화면 배너 슬라이드 (최대 8장) · 좌우 translate 전환 · 0.56s · 자연스러운 감속 · 제목·강조·설명·버튼은 전부 HTML 텍스트라 어느 화면에서도 선명합니다. · 240px 까지 글자를 줄이지 않고 세로 재배치로 해결합니다. ══════════════════════════════════════════════════════════════════════ */ /* 배너 바탕은 순백으로 고정한다 (테마의 먹색·아이보리를 물려받지 않는다). 대표님이 만든 완성 이미지 색이 그대로 보여야 하므로, 배너 위에 어떤 색도 얹지 않는다. */ .hxs{position:relative;overflow:visible;background:#FFFFFF} /* .hx 의 장식 조명(골드 radial)은 배너에서 쓰지 않는다 — 흰 바탕이 누렇게 보이던 원인 */ .hxs::before{display:none} .hxs__view{overflow:hidden} /* 좌우로 미는 띠는 여기서만 잘린다 (조작부는 이 상자 밖) */ .hxs__track{ display:flex;margin:0;padding:0;list-style:none; transition:transform .56s cubic-bezier(.22,.61,.36,1);will-change:transform; } .hxs.is-jump .hxs__track{transition:none} /* 무한 반복에서 끝↔처음으로 순간 이동 */ .hxs__s{flex:0 0 100%;min-width:0;position:relative} .hxs__in{ display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(18px,3vw,44px); align-items:center;padding-block:clamp(28px,4.4vw,64px);min-height:clamp(360px,38vw,520px); } .hxs__s--right .hxs__in{direction:rtl} .hxs__s--right .hxs__in>*{direction:ltr} .hxs__tx{min-width:0;display:grid;gap:clamp(10px,1.4vw,16px);align-content:center} .hxs__eye{margin:0;font-size:clamp(13px,3.4vw,15px);font-weight:800;letter-spacing:.06em; color:var(--hxs-ac,#F0C852);text-transform:none} .hxs__h{ margin:0;font-size:clamp(32px,5.4vw,54px);font-weight:900;line-height:1.16;letter-spacing:-.035em; color:var(--hxs-fg,var(--text-primary));word-break:keep-all;text-wrap:balance; } .hxs__hl{font-style:normal;color:var(--hxs-ac,#F0C852)} .hxs__d{margin:0;font-size:clamp(16px,4vw,19px);line-height:1.65;color:var(--hxs-fg2,var(--text-secondary));word-break:keep-all} .hxs__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px} .hxs__cta .ig-btn{min-height:52px} /* 사진 상자 — 프레임 → picture → img 의 크기를 끝까지 이어 준다. 가 크기 없는 인라인 상자면 img 의 height:100% 가 기준을 못 찾아 사진이 원래 비율대로 커지고 프레임 밖 아래쪽이 잘렸다 (390px 실측 230.31 안에 418.75). */ .hxs__vis{position:relative;min-width:0;display:block;aspect-ratio:4/3;overflow:hidden;border-radius:16px} .hxs__vis>picture{position:absolute;inset:0;display:block} .hxs__vis--contain{background:transparent} .hxs__img{display:block;width:100%;height:100%;max-width:100%} /* 색 조합 (allowlist) */ .hxs__s--ink{background:var(--bg-page)} .hxs__s--ink-soft{background:var(--bg-section-alt)} .hxs__s--ivory{background:var(--ivory-bg,#F7F0DE)} .hxs__s--gold-wash{background:linear-gradient(180deg,var(--bg-page),color-mix(in srgb,var(--ig-gold) 12%,var(--bg-page)))} /* 글자색 : 어두운 배경에서는 화면 기본 글자색(밝음), 아이보리 배경에서는 진한 잉크색 */ .hxs__s--fg-ivory{--hxs-fg:var(--text-primary);--hxs-fg2:var(--text-secondary)} .hxs__s--fg-ink{--hxs-fg:#171108;--hxs-fg2:#4A4238} .hxs__s--ivory{--hxs-fg:#171108;--hxs-fg2:#4A4238} .hxs__s--ivory .hxs__hl{color:#8C5D08} /* 강조색은 '색' 이어야 한다 (--ig-gold 는 그라데이션이라 글자색으로 쓸 수 없다) */ .hxs__s--ac-gold{--hxs-ac:#F0C852} .hxs__s--ivory.hxs__s--ac-gold{--hxs-ac:#8C5D08} .hxs__s--ac-pink{--hxs-ac:#E6007E} .hxs__s--ac-violet{--hxs-ac:#6D28D9} .hxs__s--ac-red{--hxs-ac:#C81E1E} .hxs__s--ac-green{--hxs-ac:#087F5B} /* ── 전체 이미지형 배너 ──────────────────────────────────────────────── 대표님이 만든 완성 배너 한 장이 PC·휴대폰에서 좌우를 다 채운다. · 본문 폭(.wrap)·2열 그리드·카드 패딩·둥근 모서리·제품 사진 프레임을 쓰지 않는다 · 높이는 원본 비율대로 자동으로 정해진다 (고정 틀에 넣어 자르거나 늘이지 않는다) · 좌우에 남는 여백이 생기지 않는다 — 폭을 100% 로 채우고 높이만 따라간다 · 화면 전체 폭 단위를 쓰지 않으므로 스크롤바 폭만큼 넘치지 않는다 ──────────────────────────────────────────────────────────────────── */ .hxs__s--img{display:flex;flex-direction:column;justify-content:center;padding:0;background:#FFFFFF} .hxs__full{position:relative;width:100%} .hxs__fullI{display:block;width:100%;height:auto} /* ★ 배너 칸 크기는 지금까지 쓰던 그대로 둔다. 이미지 슬라이드가 '원본 비율대로' 높이를 가지면 가장 높은 슬라이드가 되어 배너 전체가 커졌다 (실측 1440px 748→842 · 1920px 760→1066 · 768px 1002→1045). 큰 화면에서는 이미지 상자를 슬라이드에 겹쳐 두어 높이를 만들지 않게 하고, 그 안에서 원본 전체가 보이도록(contain) 넣는다 — 자르지도 늘이지도 않는다. 비율이 다르면 좌우에 여백이 생기며, 그 여백은 숨기지 않는다. 휴대폰·태블릿(1023px 이하)은 이미지가 낮아 배너 높이를 늘리지 않으므로 지금처럼 흐름에 둔다 (실측 390px 902→895 · 768px 1045 로 수정 전후 같음). */ @media (min-width:1024px){ .hxs__s--img{position:relative} .hxs__s--img .hxs__full{position:absolute;inset:0} .hxs__s--img .hxs__fullI{height:100%;object-fit:contain;object-position:center} /* 배너가 전부 이미지형이면 높이를 정해 줄 문구형이 없으므로 원본 비율대로 둔다 */ .hxs--allimg .hxs__s--img{position:static} .hxs--allimg .hxs__s--img .hxs__full{position:relative;inset:auto} .hxs--allimg .hxs__s--img .hxs__fullI{height:auto;object-fit:fill} } /* 이미지 위에 얹는 버튼 — 이미지 내용을 가리지 않도록 아래쪽에, 조작부 자리는 비켜 둔다 */ .hxs__cta--ov{ position:absolute;left:0;right:0; bottom:max(10%, var(--hxs-ctl-clear, 96px)); /* 좌우도 화살표 자리를 비켜 준다 (PC 화살표는 88px) */ display:flex;flex-wrap:wrap;gap:10px;padding:0 max(6%, 120px); margin:0;pointer-events:none; } .hxs__cta--ov .ig-btn{pointer-events:auto;min-height:44px} /* 흰 배너 위에서는 '테두리만' 버튼이 보이지 않는다 — 글자·테두리를 진하게 */ .hxs__s--img .ig-btn--line{color:var(--hxs-ink);border-color:var(--hxs-ink);background:#FFFFFF} .hxs__s--img .ig-btn--line:hover,.hxs__s--img .ig-btn--line:focus-visible{background:#FFFFFF;color:var(--hxs-ink)} .hxs__cta--d-left{justify-content:flex-start} .hxs__cta--d-center{justify-content:center} .hxs__cta--d-right{justify-content:flex-end} /* 고급 설정(직접 지정) — 이미지 안 비율 자리. 밖으로 나가지 않게 서버에서 4~96% / 4~86% 로 묶는다 */ .hxs__cta--d-custom{ left:var(--hxc-dx,50%);right:auto;bottom:auto; top:min(var(--hxc-dy,78%), calc(100% - var(--hxs-ctl-clear, 96px))); transform:translate(-50%,-50%);width:max-content;max-width:88%;padding:0;justify-content:center; } /* 휴대폰(767px 이하) : 이미지 위가 좁으므로 버튼을 이미지 아래 제자리로 내린다. 이미지 속 문구·제품을 가리지 않고, 조작부(화살표·점·정지)와도 겹치지 않는다. */ @media (max-width:767px){ .hxs__cta--ov, .hxs__cta--m-left,.hxs__cta--m-center,.hxs__cta--m-right,.hxs__cta--m-custom{ position:static;left:auto;right:auto;top:auto;bottom:auto;transform:none; width:auto;max-width:none; padding:12px clamp(12px,4vw,20px) 4px;justify-content:center; } .hxs__cta--m-left{justify-content:flex-start} .hxs__cta--m-right{justify-content:flex-end} .hxs__cta--ov .ig-btn{flex:1 1 auto} /* 이미지+버튼 묶음을 배너 칸 가운데에 둔다 — 위쪽에 붙이면 아래에 큰 빈 공간이 한꺼번에 남는다. 조작 줄(화살표·점·정지)이 머무는 아래쪽은 그만큼 비워 둔다. */ .hxs__s--img{justify-content:center;padding-bottom:var(--hxs-ctl-clear,150px)} } /* ══════════════════════════════════════════════════════════════════════ 메인 프로모션 카드 슬라이더 (.hxs--cards) · 아래에 있던 특판 · 인터넷/TV · 헬스케어 · 중고폰 카드를 첫 화면 한 자리에서 넘겨 본다. · 카드는 본문에 있을 때와 같은 칸(.sp / .pm)을 그대로 쓴다 — 폭·테두리·사진·버튼이 같다. · 화면을 찍은 그림이 아니라 진짜 카드라서 버튼이 그대로 동작하고 글자도 다시 흐른다. · 높이는 지금 보이는 카드에 맞춘다 (가장 높은 카드 때문에 빈 공간이 생기지 않는다). JS 가 --hxs-cards-h 를 정해 주기 전에는 가장 높은 카드 높이로 서 있는다 (잘리지 않는다). ══════════════════════════════════════════════════════════════════════ */ /* 배너 칸 바탕은 바로 아래 칸과 같은 면으로 둔다 — 조작 줄 자리가 별도의 '띠' 로 보이지 않게 */ .hxs--cards{background:var(--bg-section);padding-top:60px} /* 위 고정 머리띠(60px) 아래에서 시작 */ /* 슬라이드 안으로 들어온 **바깥 섹션**은 슬라이더 바탕을 그대로 이어받는다. 이 섹션들(.pm 등)은 원래 한 화면을 통째로 차지할 때를 기준으로 제 배경(--bg-page)을 갖는데, 슬라이더 안에서는 그 배경이 '흰 면' 으로 끊겨 보인다(장마다 배경이 달라진다). 직계 자식(바깥 섹션)만 투명하게 한다 — 카드 안쪽 흰 글 영역·사진·가격은 그대로 둔다. */ .hxs--cards .hxs__s > section{background:transparent} /* 점·정지 줄의 아래 여백만 조금 줄인다 (점·캡슐·정지 버튼과 화살표 크기는 그대로) */ .hxs--cards .hxs__dots{padding-bottom:clamp(12px,1.2vw,18px)} .hxs--cards::before,.hxs--cards::after{display:none} /* 히어로 장식 조명은 쓰지 않는다 */ .hxs--cards .hxs__view{ height:var(--hxs-cards-h,auto); transition:height .56s cubic-bezier(.22,.61,.36,1); } .hxs--cards .hxs__s{display:block;align-self:flex-start} /* 카드마다 제 높이 (가장 높은 카드에 맞춰 늘이지 않는다) */ /* PC 에서 칸을 가장 높은 카드에 고정했을 때 : 짧은 카드는 칸 가운데에 (늘이지 않는다 — 카드 모양은 그대로) */ .hxs--cards.is-fixed .hxs__s{align-self:center} /* 슬라이더 안에서는 '따로 선 칸'을 위한 겉치레를 가져오지 않는다. 칸 제목 묶음(작은 제목 + 큰 제목)과 큰 위아래 여백은 본문에서 칸을 나누려고 둔 것이고, 첫 화면에서는 카드 자체가 주인공이다. (1440px 실측 : 특판 카드 1064px 중 제목 묶음 167 + 칸 여백 144 = 311px 이 겉치레였다) ※ #special 같은 ID 규칙이 클래스 규칙보다 세므로 여기서만 !important 로 눌러 준다. */ .hxs--cards .ig-head{display:none} .hxs--cards .ig-sec{padding-block:clamp(16px,2.2vw,26px)!important} .hxs--cards .sp__grid{margin-top:0} /* 특판 배너 사진 : 원본 비율 그대로 두되 첫 화면에서 지나치게 커지지 않게 높이를 묶는다. 자르지 않는다 — 폭이 같이 줄고 카드 안 좌우에 여백이 생긴다. (1440px 실측 : 사진 한 장이 499px 을 차지했다) */ @media (min-width:900px){ .hxs--cards .sp__shot img{max-height:340px;width:auto;max-width:100%;margin-inline:auto} } /* 휴대폰 : 프로모션 카드 안의 줄 사이 여백만 조금 좁힌다 (글자 크기·내용은 그대로). 첫 화면이라 한 화면에 더 들어가는 쪽이 낫다 — 본문에 있을 때의 여백은 그대로 둔다. */ @media (max-width:899px){ .hxs--cards .pm__bd{padding:16px 18px 18px} .hxs--cards .pm__d{margin-top:8px} .hxs--cards .pm__chips{margin-top:11px} .hxs--cards .pm__cta{margin-top:13px} .hxs--cards .pm__note{margin-top:9px} .hxs--cards .sp__bd{padding-top:16px} } @media (prefers-reduced-motion:reduce){ .hxs--cards .hxs__view{transition:none} } /* ── 첫 화면 슬라이더 안의 특판 카드 : 매장 게시물 한 장 + 진짜 버튼 하나 ────── 게시물 안에 제품·혜택·조건이 이미 그려져 있어, 같은 내용을 글자로 다시 쓰지 않는다. · 사진이 카드 네모를 좌우까지 꽉 채운다 (원본 비율 그대로 · 자르거나 늘이지 않는다) · 카드 테두리가 사진 외곽을 감싼다 · 사진 아래에 설명 패널을 두지 않는다 · 카드 높이는 사진에 필요한 만큼만 쓴다 */ .hxs--cards .sp__card--only{position:relative;padding:0;overflow:hidden} .hxs--cards .sp__card--only picture{display:block} .hxs--cards .sp__card--only img{display:block;width:100%;height:auto;max-height:none;border:0} /* 사진 위 버튼 한 개 — 자리는 관리자가 PC·휴대폰을 따로 정한다 (가운데 기준 %) */ .hxs--cards .sp__ovCta{ position:absolute;left:var(--hxc-mx,76%);top:var(--hxc-my,78%); transform:translate(-50%,-50%);margin:0;width:max-content;max-width:86%; } /* 게시물을 되도록 덜 가리도록, 손가락이 닿는 최소 크기(44px)까지만 줄인다. ※ #special .sp__card .ig-btn 같은 ID 규칙이 더 세므로 여기서만 !important 로 눌러 준다. */ .hxs--cards .sp__ovCta .ig-btn{ min-height:44px!important;font-size:14.5px!important;padding:10px 16px!important; width:auto!important;min-width:0!important; box-shadow:var(--d-sh-card-strong); } @media (min-width:900px){ .hxs--cards .sp__ovCta{left:var(--hxc-dx,82%);top:var(--hxc-dy,71%);max-width:34%} .hxs--cards .sp__ovCta .ig-btn{min-height:48px!important;font-size:15px!important;padding:10px 16px!important; width:auto!important;min-width:0!important} } /* ══════════════════════════════════════════════════════════════════════ 메인 배너 '낮고 넓게' (관리자 디자인 → 메인 배너 = 낮고 넓게) · 사진 한 장짜리 배너 카드를 3.2 : 1 틀에 넣는다. · 원본을 자르지도 늘이지도 않는다 — 비율이 다르면 좌우(또는 위아래)에 여백이 그대로 보인다. · 이 옵션을 고르지 않으면 아무것도 달라지지 않는다. ══════════════════════════════════════════════════════════════════════ */ /* 낮고 넓은 틀은 큰 화면에서만 쓴다 — 휴대폰에서는 원본 비율 그대로 전체를 보여 준다 (PC 배너 높이를 휴대폰에 그대로 강제하지 않는다) */ /* 흰 바탕 · 외곽선 없음 · 번지는 그림자 없음 (휴대폰·PC 모두) — 색은 버튼과 조작부에만 쓴다. ※ #special .sp__card 같은 ID 규칙이 더 세므로 이 모드에서만 !important 로 눌러 준다. */ html[data-d-banner="wide"] .hxs--cards .sp__card--only{ background:var(--bg-section)!important;border:0!important;box-shadow:none!important;border-radius:20px; } @media (min-width:900px){ html[data-d-banner="wide"] .hxs--cards .sp__card--only{ position:relative;aspect-ratio:3.2 / 1;overflow:hidden; } html[data-d-banner="wide"] .hxs--cards .sp__card--only picture{position:absolute;inset:0;display:block} /* 원본 전체를 넣는다 — 자르지도 늘이지도 않으므로 비율이 다르면 좌우에 여백이 그대로 보인다 */ html[data-d-banner="wide"] .hxs--cards .sp__card--only img{ width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;object-position:center; } } /* 그 위 버튼은 사진이 실제로 그려진 자리를 기준으로 두 번째 줄에 둔다 */ html[data-d-banner="wide"] .hxs--cards .sp__ovCta .ig-btn{box-shadow:none} /* 카드 테두리는 얇은 중립선, 금색·파란 외곽선과 광택은 쓰지 않는다 */ html[data-d-banner="wide"] .hxs--cards .sp__card{border-color:var(--border-default);box-shadow:none;border-radius:20px} html[data-d-banner="wide"] .hxs--cards .sp__card--only .sp__ovCta .ig-btn{box-shadow:none} html[data-d-banner="wide"] .hxs--cards .pm__card, html[data-d-banner="wide"] .hxs--cards .sp__card--only{box-shadow:none} /* 화살표는 반투명 중립색으로 가볍게 */ html[data-d-banner="wide"] .hxs--cards .hxs__nav{ background:color-mix(in srgb, var(--text-primary) 8%, transparent); border-color:color-mix(in srgb, var(--text-primary) 12%, transparent); color:var(--text-primary);backdrop-filter:none;-webkit-backdrop-filter:none;opacity:1; } html[data-d-banner="wide"] .hxs--cards .hxs__nav:hover{background:color-mix(in srgb, var(--text-primary) 14%, transparent)} /* 후보 테마(클린 블루 와이드)에서만 — 색·표면 표현만 다듬는다. 크기·구조는 그대로 */ html[data-preset="clean-blue-wide"] .stp__badge--gold{box-shadow:var(--d-shadow-sm)} /* 키보드(Tab)로 버튼에 옮겨 왔을 때 브라우저가 스스로 스크롤해 주는 자리. 위 고정 머리띠(61px)와 아래 고정 상담바(94px) 뒤에 숨지 않도록 여유를 둔다 (390px 실측 : 화면 844 · 상담바 위 750 · 챗봇 버튼 위 680 → 아래로 176px 을 비워 둔다). */ .hxs--cards .ig-btn, .hxs--cards .sp__shot, .hxs--cards .sp__ovCta .ig-btn, .hxs--cards .hxs__row button{scroll-margin-top:84px;scroll-margin-bottom:176px} /* 좁은 화면 : 조작 줄은 카드 바로 아래 제자리에 둔다. (배너와 달리 카드는 아래 본문이 곧바로 이어지므로, 화면 아래에 붙여 두면 카드 내용을 덮거나 그만큼 큰 빈자리를 만들어야 한다) */ /* 화살표는 본문 카드 바깥(좌우 여백)에 둔다 — 카드 내용·버튼을 가리지 않는다. 카드 옆에 화살표가 들어갈 자리(본문 폭 + 좌우 94px)가 없는 화면에서는 아래 조작 줄에 [◀] [정지·점] [▶] 로 함께 놓는다 (실측 1024·1280px 에서 특판 버튼을 덮었다). */ @media (min-width:1388px){ .hxs--cards .hxs__nav--prev{left:calc((100% - var(--wrap,1200px)) / 2 - 84px)} .hxs--cards .hxs__nav--next{right:calc((100% - var(--wrap,1200px)) / 2 - 84px)} } @media (max-width:1387px){ .hxs--cards .hxs__row{ position:static;bottom:auto; display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; row-gap:10px;padding:4px 8px clamp(12px,2.4vw,20px); } .hxs--cards .hxs__nav{position:static;top:auto;transform:none;flex:0 0 auto; width:56px;height:56px;min-width:56px;min-height:56px} .hxs--cards .hxs__navI{width:26px;height:26px} .hxs--cards .hxs__nav--prev{order:1} .hxs--cards .hxs__nav--next{order:2} .hxs--cards .hxs__dots{order:3;flex:1 0 100%;position:static;padding-bottom:0} } @media (max-width:1023px){ .hxs--cards .hxs__nav{width:44px;height:44px;min-width:44px;min-height:44px} .hxs--cards .hxs__navI{width:24px;height:24px} } /* 관리자 미리보기에서만 보이는 안전 영역 안내선 (손님 화면에는 없다) */ .is-adminPreview .hxs__full::after{ content:'';position:absolute;inset:0;pointer-events:none;z-index:2; background: linear-gradient(to right, rgba(255,0,120,.16) 0 6%, transparent 6% 94%, rgba(255,0,120,.16) 94% 100%), linear-gradient(to top, rgba(0,160,255,.16) 0 12%, transparent 12%); outline:1px dashed var(--hxs-dot);outline-offset:-1px; } /* ── 배너 조작부 ──────────────────────────────────────────────────────── · 배너 좌우 : 큰 반투명 원형 화살표 (세로 가운데) · 배너 아래 가운데 : 작은 정지 버튼 + 배너 수만큼의 점 (현재 배너는 긴 캡슐) · 페이지 숫자·전체 폭 조작 띠·두꺼운 테두리·짙은 그림자는 두지 않는다. · 점 묶음은 배너 안에 실제 자리를 차지하므로 사진·글자 위에 겹치지 않는다. · 아래쪽 고정 상담 UI(휴대폰 : 상담 바 94px + 챗봇 56px, 큰 화면 : 오른쪽 세로 메뉴)와 겹치지 않도록, 좁은 화면에서는 점 묶음이 배너가 보이는 동안 그 위에 붙어 있는다. ──────────────────────────────────────────────────────────────────── */ /* 조작 줄 상자 — 빈 곳은 클릭을 통과시켜 아래 상담 UI 를 가리지 않는다 */ .hxs__row{position:relative;z-index:5;pointer-events:none} .hxs__row button{pointer-events:auto} .hxs__nav{ position:absolute;top:50%;transform:translateY(-50%);z-index:5; /* 헤더(80)·상담 패널(200) 보다 아래 */ display:inline-flex;align-items:center;justify-content:center; width:88px;height:88px;min-width:88px;min-height:88px; border-radius:999px;cursor:pointer; border:1px solid var(--hxs-ctl-bd); background:var(--hxs-ctl-bg);color:var(--hxs-ctl-fg); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); opacity:.72; transition:opacity .16s var(--ease),background .16s var(--ease),border-color .16s var(--ease); } .hxs__navI{width:38px;height:38px;display:block} .hxs__row{position:static} /* 화살표의 기준은 배너 전체(.hxs) */ .hxs__nav--prev{left:clamp(10px,1.4vw,26px)} .hxs__nav--next{right:clamp(10px,1.4vw,26px)} /* 본문 열(1240px) 과 화살표가 닿지 않는 폭에서만 88px 을 쓴다 */ @media (max-width:1439px){ .hxs__nav{width:72px;height:72px;min-width:72px;min-height:72px} .hxs__navI{width:32px;height:32px} } .hxs__nav:hover,.hxs__play:hover,.hxs__dot:hover, .hxs__nav:focus-visible,.hxs__play:focus-visible,.hxs__dot:focus-visible{opacity:1} .hxs__nav:hover,.hxs__nav:focus-visible{background:var(--hxs-ctl-bg-on);border-color:var(--hxs-ctl-bd-on)} .hxs__play:hover .hxs__playI,.hxs__play:focus-visible .hxs__playI{background:var(--hxs-ctl-bg-on);border-color:var(--hxs-ctl-bd-on)} .hxs__nav:focus-visible,.hxs__play:focus-visible,.hxs__dot:focus-visible{outline:3px solid var(--brand-primary);outline-offset:3px} /* 아이보리(밝은) 배너 위에서도 경계와 화살표가 보이게 */ .hxs.is-light .hxs__nav,.hxs.is-light .hxs__playI{border-color:var(--hxs-ctl-bd-light)} .hxs.is-light .hxs__nav{background:var(--hxs-ctl-bg-light)} /* 점 묶음 : [정지] [점] [현재 캡슐] [점] … */ .hxs__dots{ position:relative;z-index:5;pointer-events:none; display:flex;align-items:center;justify-content:center;flex-wrap:nowrap; gap:0; /* 간격은 각 버튼의 클릭 영역이 만든다 */ padding-bottom:clamp(24px,2.2vw,32px); } .hxs__dots button{pointer-events:auto} /* 정지 : 보이는 원판은 작게(20px), 손가락이 닿는 자리는 44×44 로 넓게 */ .hxs__play{ display:inline-flex;align-items:center;justify-content:center; width:44px;height:44px;min-width:44px;min-height:44px; /* 클릭 영역 44×44 */ margin-right:10px; /* 정지와 첫 점 사이 간격 */ padding:0;border:0;background:none;cursor:pointer;color:var(--hxs-ctl-fg); opacity:.85;transition:opacity .16s var(--ease); } .hxs__playI{ /* 눈에 보이는 원판 */ display:inline-flex;align-items:center;justify-content:center; width:20px;height:20px;border-radius:999px; border:1px solid var(--hxs-ctl-bd);background:var(--hxs-ctl-bg); transition:background .16s var(--ease),border-color .16s var(--ease); } .hxs__playI svg{display:block;width:12px;height:12px} .hxs__dot{ display:inline-flex;align-items:center;justify-content:center; width:24px;height:24px;min-width:24px;min-height:24px; /* 클릭 영역 24×24 (서로 겹치지 않음) */ padding:0;border:0;background:none;cursor:pointer; opacity:.85;transition:opacity .16s var(--ease); } .hxs__dotI{ display:block;width:8px;height:8px;border-radius:999px; background:var(--hxs-dot); box-shadow:0 0 0 1px var(--hxs-dot-bd); /* 밝은 배너에서도 보이게 */ transition:width .18s var(--ease),background .18s var(--ease); } .hxs__dot.is-on{opacity:1} .hxs__dot.is-on .hxs__dotI{width:36px;background:var(--hxs-dot-on);box-shadow:none} .hxs__dot.is-on{width:44px;min-width:44px} /* 캡슐이 들어갈 만큼만 넓힌다 */ /* 좁은 화면 : 화살표를 줄이고, 점 묶음은 아래 고정 상담 UI 위에 머문다 */ /* 좁은 화면 : 배너 아래 전용 자리에 두 줄로 놓는다. 첫 줄 [◀] [▶] ← 좌우 끝 · 대칭 둘째 줄 [정지 · 점] ← 가운데 · 본문 글자·CTA 위에 겹치지 않는다 (실측 : 320·360px 에서 화살표가 CTA 를 덮었다) · 한 줄에 다 넣으면 320px 에서 344px 이 필요해 넘친다 — 그래서 두 줄이고, 화살표는 늘 보인다 · 점 묶음 자체는 언제나 한 줄이다 (배너는 최대 8장 · 320px 에서 274px) · 배너가 보이는 동안 아래 고정 상담 UI 위에 머문다 */ @media (max-width:1023px){ .hxs__row{ position:sticky;bottom:calc(var(--hxs-safe-bottom) + 12px); display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; row-gap:10px;padding:0 8px clamp(16px,3vw,24px); } .hxs__nav{position:static;top:auto;transform:none;flex:0 0 auto; width:44px;height:44px;min-width:44px;min-height:44px} .hxs__navI{width:24px;height:24px} .hxs__nav--prev{order:1} .hxs__nav--next{order:2} .hxs__dots{order:3;flex:1 0 100%;position:static;padding-bottom:0} .hxs__dot.is-on{width:36px;min-width:36px} } @media (max-width:359px){ .hxs__nav{width:44px;height:44px;min-width:44px;min-height:44px} .hxs__navI{width:22px;height:22px} /* 점 클릭 영역은 어느 폭에서도 24×24 아래로 줄이지 않는다 (화살표가 먼저 접힌다) */ .hxs__dot.is-on{width:36px;min-width:36px} .hxs__dot.is-on .hxs__dotI{width:32px} } @media (max-width:900px){ .hxs__in{grid-template-columns:minmax(0,1fr);gap:16px;padding-block:24px;min-height:0} .hxs__s--right .hxs__in{direction:ltr} .hxs__vis{aspect-ratio:16/11;order:2} .hxs__tx{order:1} .hxs__cta .ig-btn{flex:1 1 100%} } /* 제품 컷(사진 맞춤 = 맞춰 넣기)은 세로로 긴 휴대폰이라, 가로로 넓은 상자에서는 세로에 맞춰 줄어들며 좌우가 크게 비었다 (390px 실측 : 기기 184×230, 좌우 여백 151px). 손에 드는 화면에서만 사진 상자를 정사각으로 두어 기기가 제 크기로 보이게 한다. */ @media (max-width:599px){ .hxs__vis--contain{aspect-ratio:1/1} } @media (max-width:359px){ .hxs__in{gap:14px} .hxs__h{font-size:clamp(28px,8vw,32px)} .hxs__d{font-size:15px} } @media (prefers-reduced-motion:reduce){ .hxs__track{transition:none} } /* ══════════════════════════════════════════════════════════════════════ [클린 블루] 마감 레이어 — 강조 순서 정리 이 프리셋을 고른 화면에서만 적용됩니다. 다른 테마와 지금 운영 화면은 그대로입니다. 원칙 : 누르는 것만 버튼처럼 보이고, 읽기만 하는 것은 조용한 안내로 둔다. 색은 이미 정한 것(차분한 블루 · 샴페인 가격판 · 흰 카드)을 그대로 쓰고, 여기서는 크기 · 무게 · 테두리 · 그림자 · 간격만 정리한다. ※ 이 레이어가 쓰는 색은 아래 한 블록에 모아 두고, 규칙에서는 변수만 부릅니다. ══════════════════════════════════════════════════════════════════════ */ html[data-preset="clean-blue-wide"]{ /* 면과 선 */ --cb-card:#FFFFFF; --cb-line:#E3E8EF; /* 경계선은 한 겹만 */ --cb-line-soft:#EEF1F6; --cb-quiet:#F3F5F8; /* 읽기만 하는 칩 · 배지 바탕 */ --cb-edge:#C9D2E2; /* 보조 버튼 테두리 */ --cb-edge-h:#AEBACD; --cb-focus-line:#A8B6D0; /* 고른 카드 표시 */ /* 글자 */ --cb-text:#20242B; --cb-ink:#39404C; --cb-quiet-ink:color-mix(in srgb, var(--ink-ivory) 62%, transparent); --cb-icon:#7C8494; --cb-cut:#44598A; /* 할인 금액 */ /* 사진판 · 유리 칩 */ --cb-shot:linear-gradient(180deg, #F7F9FC, #EDF1F6); --cb-glass:#FFFFFFEB; --cb-glass-edge:#E3E8EFE6; /* 배너 조작부 원판 — 사진 위에서도 화살표가 읽히게 흰 판을 충분히 불투명하게 */ --cb-ctl-bg:#FFFFFFD9; --cb-ctl-bg-on:#FFFFFFF2; /* 그림자 — 낮고 작게 */ --cb-sh-panel:0 6px 18px rgba(32,36,43,.08); --cb-sh-float:0 6px 18px rgba(32,36,43,.10); --cb-sh-shot:drop-shadow(0 4px 10px rgba(32,36,43,.10)); /* 모서리 — 크기에 맞춰 세 단계로만 */ --cb-r-sm:8px; /* 작은 배지 · 칩 */ --cb-r-md:12px; /* 버튼 · 사진판 */ --cb-r-lg:16px; /* 카드 · 패널 */ --cb-step:16px; /* 카드 안 세로 리듬 */ /* 상태 배지 — 의미색은 그대로 두되 면을 옅게 깔고 글자를 진하게 (대비 7:1 이상) */ --cb-bd-gold:#FAF2DD; --cb-bi-gold:#6A4E05; --cb-be-gold:#EBDCB2; --cb-bd-navy:#E7EDFB; --cb-bi-navy:#1A3E9E; --cb-be-navy:#C7D5F2; --cb-bd-orange:#FDEEE2; --cb-bi-orange:#9A3E03; --cb-be-orange:#F5D6BC; --cb-bd-black:#FBE9EC; --cb-bi-black:#8A0E1D; --cb-be-black:#F2CDD3; --cb-bd-violet:#F0EAFC; --cb-bi-violet:#56209F; --cb-be-violet:#DDD0F5; --cb-bd-red:#FCEAEA; --cb-bi-red:#A31818; --cb-be-red:#F3CFCF; --cb-bd-green:#E4F4EE; --cb-bi-green:#06664A; --cb-be-green:#C4E5D9; --cb-bd-ivory:#E8EDF8; --cb-bi-ivory:#1E3A78; --cb-be-ivory:#CBD8EE; } /* ── 섹션 머리 : 눌리는 칩처럼 보이지 않게 ── */ html[data-preset="clean-blue-wide"] .ig-eyebrow, html[data-preset="clean-blue-wide"] #special .ig-eyebrow, html[data-preset="clean-blue-wide"] #setting-prices .ig-eyebrow{ padding:6px 12px;border-radius:var(--cb-r-sm); background:var(--d-eyebrow-chip);color:var(--d-eyebrow-chip-ink); font-size:12px;font-weight:700;letter-spacing:.01em;box-shadow:none; } /* 섹션 구분은 배경과 여백으로 — 선을 겹쳐 긋지 않는다 */ html[data-preset="clean-blue-wide"] #special, html[data-preset="clean-blue-wide"] #setting-prices, html[data-preset="clean-blue-wide"] .sp, html[data-preset="clean-blue-wide"] .ig-sec--alt{border-block:0} /* 밝은 면 위 주 CTA — 번지는 금색 그림자를 두지 않는다 */ html[data-preset="clean-blue-wide"] #special .ig-btn--fill, html[data-preset="clean-blue-wide"] #setting-prices .ig-btn--fill{ border-color:transparent;box-shadow:none; } html[data-preset="clean-blue-wide"] #special .ig-btn--ghost, html[data-preset="clean-blue-wide"] #setting-prices .ig-btn--ghost{ background:var(--cb-card);border-color:var(--cb-edge);color:var(--cb-text); } /* ── 프로모션 카드 : 배지 · 혜택 칩 · 버튼의 무게를 갈라 놓는다 ── */ html[data-preset="clean-blue-wide"] .pm__card{ border-radius:var(--cb-r-lg);border-color:var(--cb-line);box-shadow:var(--d-sh-surface-sm); } /* 크림 패널도 흰 카드로 통일 (같은 목록 안에서 카드 바탕이 갈리지 않게) */ html[data-preset="clean-blue-wide"] .pm--lite{ --pm-card:var(--cb-card);--pm-txt:var(--cb-text);--pm-txt2:var(--cb-quiet-ink); --g:var(--brand-primary);--g2:var(--accent-hover);--gl:var(--cb-line);--ivory:var(--cb-text); } /* 사진 위 배지 — 누르는 것이 아니므로 옅은 바탕 · 작은 글자 · 그림자 없음 */ html[data-preset="clean-blue-wide"] .pm__badge, html[data-preset="clean-blue-wide"] .pm--lite .pm__badge{ padding:5px 10px;border-radius:var(--cb-r-sm); background:var(--cb-glass);border:1px solid var(--cb-glass-edge); font-size:11.5px;font-weight:600;letter-spacing:-.01em;color:var(--cb-quiet-ink); box-shadow:none; } /* 분류 라벨 — 면을 채운 칩에서 옅은 안내 칩으로 */ html[data-preset="clean-blue-wide"] .pm__label, html[data-preset="clean-blue-wide"] .pm--teal .pm__label{ padding:5px 11px;border-radius:var(--cb-r-sm); background:var(--d-eyebrow-chip);border-color:transparent;color:var(--d-eyebrow-chip-ink); font-size:12px;font-weight:700;letter-spacing:.01em;box-shadow:none; } html[data-preset="clean-blue-wide"] .pm--teal .pm__label{ background:color-mix(in srgb, var(--d-teal) 10%, var(--cb-card));color:var(--d-teal); } /* 혜택 칩 — 테두리와 면을 걷어 내고 글로 읽히게 (문구는 그대로) */ html[data-preset="clean-blue-wide"] .pm__chips{gap:7px 16px;margin-top:14px} html[data-preset="clean-blue-wide"] .pm__chips li, html[data-preset="clean-blue-wide"] .pm--lite .pm__chips li{ padding:0;border:0;border-radius:0;background:none;gap:6px; font-size:13.5px;font-weight:500;letter-spacing:-.015em;color:var(--cb-quiet-ink); } html[data-preset="clean-blue-wide"] .pm__chips li::before{ width:11px;height:11px;background:color-mix(in srgb, var(--brand-primary) 60%, transparent); } html[data-preset="clean-blue-wide"] .pm--teal .pm__chips li::before{ background:color-mix(in srgb, var(--d-teal) 60%, transparent); } /* 주 CTA 는 채운 블루 하나 · 보조 CTA 는 중립 테두리 (카카오 아이콘색은 그대로) */ html[data-preset="clean-blue-wide"] .pm__cta .ig-btn{border-radius:var(--cb-r-md)} html[data-preset="clean-blue-wide"] .pm .ig-btn--fill, html[data-preset="clean-blue-wide"] .pm--lite .ig-btn--fill{border-color:transparent;box-shadow:none} html[data-preset="clean-blue-wide"] .pm .ig-btn--ghost, html[data-preset="clean-blue-wide"] .pm--lite .ig-btn--ghost{ background:var(--cb-card);border-color:var(--cb-edge);color:var(--cb-text); font-weight:600;box-shadow:none; } html[data-preset="clean-blue-wide"] .pm .ig-btn--ghost:hover, html[data-preset="clean-blue-wide"] .pm--lite .ig-btn--ghost:hover{ background:var(--cb-quiet);border-color:var(--cb-edge-h); } /* ── 셋팅가 카드 : 최종 가격이 먼저, 계산 내역은 한 단계 뒤 ── */ html[data-preset="clean-blue-wide"] .stp__card{ border-radius:var(--cb-r-lg);border-color:var(--cb-line);box-shadow:none; } /* 고른 카드 표시는 테두리 색만 (두께를 바꿔 글자가 밀리지 않게) */ html[data-preset="clean-blue-wide"] .stp__card.is-focus{ border-width:1px;border-color:var(--cb-focus-line);padding:16px 16px 18px; box-shadow:var(--d-sh-surface-sm); } @media (min-width:768px){ html[data-preset="clean-blue-wide"] .stp__card.is-focus{padding:20px 20px 22px} } /* 윗줄 높이는 통신사 버튼(48px)에 맞춘다 — 큰 배지를 위한 빈자리를 남기지 않는다 */ html[data-preset="clean-blue-wide"] .stp__top{min-height:48px;row-gap:12px} @media (min-width:768px){ html[data-preset="clean-blue-wide"] .stp__top{min-height:48px} } /* 상태 배지 — 누르는 것이 아니므로 옅은 바탕 · 작은 글자 · 그림자 없음 */ html[data-preset="clean-blue-wide"] .stp__badge, html[data-preset="clean-blue-wide"] .stp__badge--xl{ min-height:30px;min-width:0;padding:0 11px;border-radius:var(--cb-r-sm); border:1px solid transparent;font-size:12.5px;font-weight:700;letter-spacing:-.01em; box-shadow:none; } @media (min-width:768px){ html[data-preset="clean-blue-wide"] .stp__badge, html[data-preset="clean-blue-wide"] .stp__badge--xl{min-height:32px;min-width:0} } html[data-preset="clean-blue-wide"] .stp__badge--gold{background:var(--cb-bd-gold);color:var(--cb-bi-gold);border-color:var(--cb-be-gold)} html[data-preset="clean-blue-wide"] .stp__badge--navy{background:var(--cb-bd-navy);color:var(--cb-bi-navy);border-color:var(--cb-be-navy)} html[data-preset="clean-blue-wide"] .stp__badge--orange{background:var(--cb-bd-orange);color:var(--cb-bi-orange);border-color:var(--cb-be-orange)} html[data-preset="clean-blue-wide"] .stp__badge--black{background:var(--cb-bd-black);color:var(--cb-bi-black);border-color:var(--cb-be-black)} html[data-preset="clean-blue-wide"] .stp__badge--violet{background:var(--cb-bd-violet);color:var(--cb-bi-violet);border-color:var(--cb-be-violet)} html[data-preset="clean-blue-wide"] .stp__badge--red{background:var(--cb-bd-red);color:var(--cb-bi-red);border-color:var(--cb-be-red)} html[data-preset="clean-blue-wide"] .stp__badge--green{background:var(--cb-bd-green);color:var(--cb-bi-green);border-color:var(--cb-be-green)} html[data-preset="clean-blue-wide"] .stp__badge--ivory{background:var(--cb-bd-ivory);color:var(--cb-bi-ivory);border-color:var(--cb-be-ivory)} /* 조건 태그도 안내 정보로 */ html[data-preset="clean-blue-wide"] .stp__tag, html[data-preset="clean-blue-wide"] .stp__tag--off{ border-radius:var(--cb-r-sm);border-color:var(--cb-line); background:var(--cb-quiet);color:var(--cb-quiet-ink);font-weight:600; } /* 카드 안 세로 리듬을 한 값(16px)으로 맞춘다 — 모델명 · 사진 · 계산 내역 · 최종 가격 */ html[data-preset="clean-blue-wide"] .stp__model, html[data-preset="clean-blue-wide"] .stp__media, html[data-preset="clean-blue-wide"] .stp__rows, html[data-preset="clean-blue-wide"] .stp__picks, html[data-preset="clean-blue-wide"] .stp__plan, html[data-preset="clean-blue-wide"] .stp__det, html[data-preset="clean-blue-wide"] .stp__soon{margin-top:var(--cb-step)} html[data-preset="clean-blue-wide"] .stp__tags{margin-top:8px} /* 사진판 — 테두리를 겹치지 않고 바탕만 아주 옅게 */ html[data-preset="clean-blue-wide"] .stp__media{ border:0;border-radius:var(--cb-r-md);background:var(--cb-shot); } html[data-preset="clean-blue-wide"] .stp__media img{filter:var(--cb-sh-shot)} /* 출고가 · 지원금 — 최종 가격보다 한 단계 낮춘다 (숫자는 그대로) */ html[data-preset="clean-blue-wide"] .stp__rows{border-top-color:var(--cb-line)} html[data-preset="clean-blue-wide"] .stp__rows>div{padding:9px 0;border-bottom-color:var(--cb-line-soft)} html[data-preset="clean-blue-wide"] .stp__rows dt{ font-size:clamp(14px,3.6vw,16px);font-weight:600;color:var(--cb-quiet-ink); } html[data-preset="clean-blue-wide"] .stp__rows dd{ font-size:clamp(16.5px,4.1vw,19px);font-weight:700;color:var(--cb-ink); } html[data-preset="clean-blue-wide"] .stp__cut{color:var(--cb-cut)} /* 최종 가격 판 — 색은 그대로, 판을 띄우는 그림자만 걷는다 */ html[data-preset="clean-blue-wide"] .stp__pickBtn{border-radius:var(--cb-r-md);box-shadow:none} html[data-preset="clean-blue-wide"] .stp__pickBtn.is-off{ background:var(--cb-quiet);border-color:var(--cb-line);color:var(--cb-quiet-ink); } /* 조건 준비 중 — 가격처럼 보이지 않게 중립 점선으로 */ html[data-preset="clean-blue-wide"] .stp__soon{ background:var(--cb-quiet);border:1px dashed var(--cb-edge);border-radius:var(--cb-r-md); } html[data-preset="clean-blue-wide"] .stp__carrierBtn{border-radius:var(--cb-r-md);border-color:var(--cb-line)} html[data-preset="clean-blue-wide"] .stp__det{border-top-color:var(--cb-line)} /* ── 상담 메뉴 : 흰 패널 · 약한 그림자 · 항목마다 다른 무게 ── */ html[data-preset="clean-blue-wide"] .fab--dock .fab__panel{ background:var(--cb-card);border-color:var(--cb-line);border-radius:var(--cb-r-lg); box-shadow:var(--cb-sh-panel); } html[data-preset="clean-blue-wide"] .fab--dock .fab__btn{border-radius:var(--cb-r-md);gap:10px} /* 주 메뉴(셋팅가)만 채운 블루 — 나머지는 흰 바탕 · 얇은 중립선 */ html[data-preset="clean-blue-wide"] .fab--dock .fab__btn--quote{border-color:transparent;box-shadow:none} html[data-preset="clean-blue-wide"] .fab--dock .fab__btn--ask, html[data-preset="clean-blue-wide"] .fab--dock .fab__btn--bot, html[data-preset="clean-blue-wide"] .fab--dock .fab__btn--tel{ background:var(--cb-card);border-color:var(--cb-line);color:var(--cb-ink); } html[data-preset="clean-blue-wide"] .fab--dock .fab__btn--ask:hover, html[data-preset="clean-blue-wide"] .fab--dock .fab__btn--bot:hover, html[data-preset="clean-blue-wide"] .fab--dock .fab__btn--tel:hover{ background:var(--cb-quiet);border-color:var(--cb-edge); } html[data-preset="clean-blue-wide"] .fab--dock .fab__lb{font-size:14px;font-weight:600} html[data-preset="clean-blue-wide"] .fab--dock .fab__btn--quote .fab__lb, html[data-preset="clean-blue-wide"] .fab--dock .fab__btn--kakao .fab__lb{font-weight:700} /* 아이콘 크기 · 선 굵기 · 글자와의 간격을 한 값으로 통일 */ html[data-preset="clean-blue-wide"] .fab--dock .fab__btn svg{width:20px;height:20px} html[data-preset="clean-blue-wide"] .fab--dock .fab__btn--ask svg, html[data-preset="clean-blue-wide"] .fab--dock .fab__btn--bot svg, html[data-preset="clean-blue-wide"] .fab--dock .fab__btn--quote svg{stroke-width:1.6} html[data-preset="clean-blue-wide"] .fab--dock .fab__btn--ask svg, html[data-preset="clean-blue-wide"] .fab--dock .fab__btn--bot svg{stroke:var(--cb-icon)} html[data-preset="clean-blue-wide"] .fab--dock .fab__btn--tel svg{fill:var(--cb-icon)} html[data-preset="clean-blue-wide"] .fab__fold, html[data-preset="clean-blue-wide"] .fab__x{ border-radius:var(--cb-r-sm);border-color:var(--cb-line);background:var(--cb-card);color:var(--cb-icon); } html[data-preset="clean-blue-wide"] .fab__info{border-top-color:var(--cb-line)} html[data-preset="clean-blue-wide"] .fab__open{border-radius:var(--cb-r-md);box-shadow:var(--cb-sh-float)} /* ── 배너 좌우 화살표 · 정지 버튼 : 회갈색 원판을 중립으로 ── 흰 반투명 판 + 짙은 회색 화살표. 크기 · 자리 · 누르는 영역은 그대로 둔다. */ html[data-preset="clean-blue-wide"]{ --hxs-ctl-bg:var(--cb-ctl-bg); --hxs-ctl-bg-on:var(--cb-ctl-bg-on); --hxs-ctl-bg-light:var(--cb-ctl-bg); --hxs-ctl-bd:var(--cb-line); --hxs-ctl-bd-on:var(--cb-edge-h); --hxs-ctl-bd-light:var(--cb-line); --hxs-ctl-fg:var(--cb-ink); } html[data-preset="clean-blue-wide"] .hxs__play{color:var(--cb-ink)} /* ══════════════════════════════════════════════════════════════════════ 상품 목록 (간결형) · 상품 상세 · 색은 기존 토큰만 씁니다 (새 프리셋·새 특수효과를 만들지 않습니다). · 목록은 사진 → 모델명·용량 → 통신사별 기기값 한 줄씩. 계산표와 긴 안내는 상세로. · 파란색은 주요 행동과 고른 상태에만 씁니다. ══════════════════════════════════════════════════════════════════════ */ /* ── 상단 : 기기변경 · 번호이동 ── */ .stp__typeWrap{margin-top:18px} .stp__typePick{display:flex;flex-wrap:wrap;align-items:center;gap:8px} .stp__typeBtn{ min-height:44px;padding:0 18px;border-radius:999px;cursor:pointer; border:1px solid var(--border-default);background:var(--ivory-card); color:var(--text-secondary);font-size:15px;font-weight:700;letter-spacing:-.02em; transition:background .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease); } .stp__typeBtn:hover{border-color:var(--border-strong);color:var(--text-primary)} .stp__typeBtn.is-on{background:var(--brand-primary);border-color:var(--brand-primary);color:var(--ig-on-accent)} .stp__typeBtn:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px} .stp__typeNote{flex:1 0 100%;margin:4px 0 0;font-size:12.5px;line-height:1.6;color:var(--text-muted)} .stp__typeNote b{font-weight:700;color:var(--text-secondary)} /* ── 목록 ── */ .stp__grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:18px;padding:0;list-style:none} @media (min-width:900px){ .stp__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px} } /* 카드 : 좁으면 사진 위·정보 아래, 넓으면(카드 폭 520px 이상) 사진 왼쪽·정보 오른쪽 */ .pl{ display:flex;flex-direction:column;gap:14px;min-width:0; background:var(--ivory-card);border:1px solid var(--line-ivory);border-radius:16px; padding:16px 16px 14px; } .pl.is-focus{border-color:var(--border-strong)} /* 사진판 — 아주 옅은 중립 회색. 로딩 전에도 높이를 잡아 아래 내용이 밀리지 않는다 */ .pl__shot{ position:relative;display:block;flex:none;width:100%;height:184px;overflow:hidden; border-radius:12px;background:color-mix(in srgb, var(--text-primary) 4%, var(--ivory-card)); } .pl__shot img{position:absolute;top:7%;left:0;width:100%;height:86%;object-fit:contain;display:block} .pl__shot.is-none::after{ content:'사진 준비 중';position:absolute;inset:0;display:grid;place-items:center; font-size:13px;font-weight:600;color:var(--text-muted); } .pl__info{display:flex;flex-direction:column;min-width:0} .pl__head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px} .pl__top{min-width:0;text-decoration:none;color:inherit;border-radius:8px} .pl__top:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px} .pl__name{display:block;font-size:19px;font-weight:700;letter-spacing:-.03em;line-height:1.35;color:var(--ink-ivory);word-break:keep-all} .pl__cap{font-weight:500;font-size:.84em;color:var(--ink2-ivory)} /* 가격 요약 — 작은 설명표. 최종 기기값만 크고 진하게 */ .pl__sum{display:block;margin-top:10px;text-decoration:none;color:inherit;border-radius:10px} .pl__sum:focus-visible{outline:3px solid var(--focus-ring);outline-offset:4px} .ps__basis{margin:0 0 6px;font-size:14px;line-height:1.5;color:var(--text-secondary)} .ps__basis b{font-weight:700;color:var(--text-primary)} .ps__rows{margin:0} .ps__rows>div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:2px 0} .ps__rows dt{font-size:15px;font-weight:400;line-height:1.55;color:var(--text-secondary)} .ps__rows dd{margin:0;font-size:15px;font-weight:500;line-height:1.55;color:var(--text-primary);font-variant-numeric:tabular-nums;white-space:nowrap} .ps__final{ display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap; margin:8px 0 0;padding-top:8px;border-top:1px solid var(--line-ivory); } .ps__finalK{font-size:15px;font-weight:600;color:var(--text-primary)} .ps__finalV{margin-left:auto;font-size:23px;font-weight:800;letter-spacing:-.03em;line-height:1.2;color:var(--ink-ivory);font-variant-numeric:tabular-nums;white-space:nowrap} .ps__finalS{margin-left:auto;font-size:17px;font-weight:700;color:var(--ink-ivory);text-align:right} .ps__note{margin:6px 0 0;font-size:14px;line-height:1.55;color:var(--text-secondary);word-break:keep-all} /* 다른 통신사 조건 — 누르면 그 통신사 조건 상세로 */ .pl__lines{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:0;border-top:1px solid var(--line-ivory)} .pl__row{margin:0} .pl__line{ display:flex;align-items:center;gap:12px;min-height:44px;padding:4px 6px; border-radius:8px;text-decoration:none;color:inherit; } .pl__line:hover{background:var(--bg-section-alt)} .pl__line:focus-visible{outline:3px solid var(--focus-ring);outline-offset:-2px} .pl__cr{flex:none;min-width:56px;font-size:14px;font-weight:600;letter-spacing:-.02em;color:var(--ink2-ivory)} .pl__v{margin-left:auto;font-size:16px;font-weight:700;color:var(--ink-ivory);font-variant-numeric:tabular-nums;white-space:nowrap} .pl__soft{margin-left:auto;font-size:14px;font-weight:500;color:var(--text-muted);text-align:right;word-break:keep-all} .pl__arrow{flex:none;width:14px;text-align:center;font-size:17px;line-height:1;color:var(--text-muted)} .pl__line:hover .pl__arrow{color:var(--brand-primary)} .pl__terms{margin:10px 0 0;font-size:14px;line-height:1.55;color:var(--text-secondary);word-break:keep-all} .pl__more{ align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;margin-top:4px;padding:0 2px; /* 밝은 카드 위의 글자 — 어두운 디자인의 금색(--brand-primary)은 아이보리 카드에서 2:1 이라 진한 강조색 */ font-size:15px;font-weight:600;color:var(--gold-deep,var(--brand-primary));text-decoration:none;border-radius:8px; } .pl__more:hover{text-decoration:underline} .pl__more:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px} /* 카드가 넉넉한 폭(한 열 태블릿 · 1180px 이상 두 열)에서는 사진 왼쪽 · 정보 오른쪽 */ @media (min-width:600px) and (max-width:899px), (min-width:1180px){ .pl{flex-direction:row;align-items:flex-start;gap:18px} .pl__shot{width:190px;height:210px} .pl__info{flex:1 1 auto} } @media (min-width:900px) and (max-width:1179px){ .pl__shot{height:200px} } @media (min-width:900px){ .pl__name{font-size:21px} } /* ══════════ 상품 상세 ══════════ */ .pd{padding-block:clamp(24px,3.6vw,44px)} .pd__back{margin-bottom:14px} .pd__back a{ display:inline-flex;align-items:center;min-height:44px;padding:0 4px; font-size:14px;font-weight:600;color:var(--text-secondary);text-decoration:none; } .pd__back a:hover{color:var(--brand-primary)} .pd__head{display:grid;grid-template-columns:1fr;gap:20px} @media (min-width:900px){ .pd__head{grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:36px;align-items:start} } .pd__shot{ position:relative;display:block;overflow:hidden;border-radius:16px; background:var(--bg-section-alt);aspect-ratio:4/5;max-width:420px;margin-inline:auto;width:100%; } .pd__shot img{position:absolute;top:6%;left:6%;width:88%;height:88%;object-fit:contain;display:block} .pd__shot.is-none::after{ content:'사진 준비 중';position:absolute;inset:0;display:grid;place-items:center; font-size:13px;font-weight:600;color:var(--text-muted); } .pd__buy{min-width:0} .pd__badges{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px} .pd__badge{ display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border-radius:8px; border:1px solid var(--border-default);background:var(--bg-section-alt); font-size:12px;font-weight:700;letter-spacing:-.01em;color:var(--text-secondary); } .pd__name{margin:0;font-size:clamp(24px,5.6vw,32px);font-weight:800;letter-spacing:-.04em;line-height:1.25;color:var(--text-primary);word-break:keep-all} .pd__name span{font-size:.72em;font-weight:700;color:var(--text-secondary)} /* 조건 고르기 */ .pd__pick{margin-top:18px;display:grid;gap:12px} .pd__row{display:grid;grid-template-columns:1fr;gap:7px} @media (min-width:600px){ .pd__row{grid-template-columns:92px minmax(0,1fr);align-items:center;gap:12px} } .pd__rowK{font-size:13px;font-weight:600;color:var(--text-muted)} .pd__chips{display:flex;flex-wrap:wrap;gap:8px} .pd__chip{ min-height:44px;padding:0 16px;border-radius:10px;cursor:pointer; border:1px solid var(--border-default);background:var(--bg-elevated); color:var(--text-secondary);font-size:14.5px;font-weight:700;letter-spacing:-.02em; transition:background .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease); } .pd__chip:hover{border-color:var(--border-strong);color:var(--text-primary)} .pd__chip.is-on{background:var(--brand-primary);border-color:var(--brand-primary);color:var(--ig-on-accent)} .pd__chip:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px} /* 최종 기기값 */ .pd__price{margin-top:20px;padding-top:18px;border-top:1px solid var(--border-default)} .pd__priceK{margin:0;font-size:13.5px;font-weight:600;color:var(--text-muted)} .pd__priceV{ margin:4px 0 0;font-size:clamp(34px,8vw,44px);font-weight:900;letter-spacing:-.05em;line-height:1.05; color:var(--text-primary);font-variant-numeric:tabular-nums; } .pd__priceAsk{margin:4px 0 0;font-size:clamp(19px,4.6vw,23px);font-weight:800;letter-spacing:-.03em;color:var(--text-primary)} .pd__priceNote{margin:8px 0 0;font-size:13px;line-height:1.65;color:var(--text-secondary);word-break:keep-all} .pd__cta--top{margin-top:18px;width:100%} @media (min-width:600px){ .pd__cta--top{width:auto;min-width:280px} } /* 아래 : 상세 조건 · 견적 요약 */ .pd__body{display:grid;grid-template-columns:1fr;gap:24px;margin-top:clamp(28px,4vw,44px)} @media (min-width:900px){ .pd__body{grid-template-columns:minmax(0,1fr) 320px;gap:36px;align-items:start} } .pd__sec{padding-top:22px;border-top:1px solid var(--border-default)} .pd__sec:first-child{padding-top:0;border-top:0} .pd__sec h2{margin:0 0 12px;font-size:clamp(17px,4vw,19px);font-weight:800;letter-spacing:-.03em;color:var(--text-primary)} .pd__sec h3{margin:14px 0 6px;font-size:14px;font-weight:700;color:var(--text-secondary)} .pd__calc{margin:0} .pd__calc>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--border-default)} .pd__calc dt{font-size:14px;font-weight:600;color:var(--text-secondary)} .pd__calc dd{margin:0;font-size:16px;font-weight:700;color:var(--text-primary);font-variant-numeric:tabular-nums;white-space:nowrap} .pd__calcLast{border-bottom:0!important;padding-top:12px!important} .pd__calcLast dt{font-weight:800;color:var(--text-primary)} .pd__calcLast dd{font-size:clamp(20px,5vw,24px);font-weight:900;letter-spacing:-.03em} .pd__cut{color:var(--brand-strong)} .pd__list{margin:0;padding-left:18px;display:grid;gap:7px} .pd__list li{font-size:14px;line-height:1.7;color:var(--text-secondary);word-break:keep-all} .pd__list li b{font-weight:700;color:var(--text-primary);margin-right:4px} .pd__list--care li{font-size:13px;color:var(--text-muted)} .pd__secNote{margin:10px 0 0;font-size:13px;line-height:1.65;color:var(--text-secondary)} .pd__at{margin:12px 0 0;font-size:12.5px;color:var(--text-muted)} .pd__other{margin:0;padding:0;list-style:none;display:grid;gap:2px} .pd__other li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--border-default)} .pd__other li:last-child{border-bottom:0} .pd__other span{font-size:14px;font-weight:600;color:var(--text-secondary)} .pd__other b{font-size:14px;font-weight:700;color:var(--text-primary);text-align:right;word-break:keep-all} /* 견적 요약 — 스크롤을 따라오되 자기 칸 안에서만 움직인다 (헤더·푸터·본문을 덮지 않는다) */ .pd__side{min-width:0} .pd__sum{ background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:16px;padding:18px; } @media (min-width:900px){ .pd__sum{position:sticky;top:calc(72px + 16px);max-height:calc(100dvh - 104px);overflow:auto} } .pd__sumT{margin:0 0 12px;font-size:13px;font-weight:700;letter-spacing:.01em;color:var(--text-muted)} .pd__sumL{margin:0} .pd__sumL>div{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:12px;align-items:baseline;padding:7px 0} .pd__sumL dt{font-size:13px;font-weight:600;color:var(--text-muted)} .pd__sumL dd{margin:0;font-size:14px;font-weight:700;color:var(--text-primary);text-align:right;word-break:keep-all} .pd__sumLast{padding-top:12px!important;margin-top:6px;border-top:1px solid var(--border-default)} .pd__sumLast dd{font-size:clamp(19px,4.6vw,22px);font-weight:900;letter-spacing:-.03em;font-variant-numeric:tabular-nums} .pd__sumTerms{margin:10px 0 0;font-size:12.5px;line-height:1.6;color:var(--text-muted);word-break:keep-all} .pd__sum .pd__cta{margin-top:14px} .pd__sumFoot{margin:10px 0 0;font-size:12px;line-height:1.6;color:var(--text-muted)} /* 휴대폰 : 아래 고정 상담 바가 있으므로 상세에 버튼을 겹쳐 쌓지 않는다 (본문 버튼만 둔다) */ @media (max-width:899px){ .pd__body{margin-top:24px} .pd__side{order:2} .pd__sum{position:static;max-height:none} } /* 상품 표시(특판·추천 등) — 작은 칩 하나. 예전의 큰 배지판을 쓰지 않는다 */ .pl__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px} .pl__badges,.pd__badges{display:inline-flex;flex-wrap:wrap;gap:6px} .pl__badge,.pd__badge{ display:inline-flex;align-items:center;min-height:26px;padding:0 9px;border-radius:8px; border:1px solid var(--border-default);background:var(--bg-section-alt); font-size:11.5px;font-weight:700;letter-spacing:-.01em;color:var(--text-secondary);white-space:nowrap; } .pd__badge{min-height:28px;padding:0 10px;font-size:12px} /* ══════ 목록·상세 개선(순위 별 · 선택 상태 · 상세 사진/글자) — 앞선 기본 규칙 뒤에 두어 실제로 적용되게 한다 ══════ */ /* ── 순위·인기 표시(별) — 누르는 것이 아니므로 버튼처럼 보이지 않게 ── */ .rk{ flex:none;display:inline-flex;align-items:center;gap:4px; padding:3px 8px 3px 6px;border-radius:8px; border:1px solid color-mix(in srgb, var(--d-rank-star) 38%, transparent); background:color-mix(in srgb, var(--d-rank-star) 9%, var(--ivory-card)); font-size:13px;font-weight:700;letter-spacing:-.01em;line-height:1.3;color:var(--text-primary); white-space:nowrap;cursor:default; } .rk__star{display:block;width:14px;height:14px;fill:var(--d-rank-star)} .rk--card{margin-top:2px} .rk--detail{margin-bottom:0} .pd__headMarks{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:8px} .pd__headMarks:empty{display:none} /* ── 조건 선택(통신사 · 가입 유형 · 용량) : 선택 전 흰 바탕+얇은 선 / 선택 후 옅은 파랑+분명한 경계+체크 ── */ .stp__typeBtn,.pd__chip{ display:inline-flex;align-items:center;justify-content:center;gap:6px; min-height:44px;background:var(--bg-elevated);border:1px solid var(--border-strong); color:var(--text-primary);font-size:15px;font-weight:600; } .stp__typeBtn.is-on,.pd__chip.is-on{ background:color-mix(in srgb, var(--brand-primary) 10%, var(--bg-elevated)); border-color:var(--brand-primary);box-shadow:inset 0 0 0 1px var(--brand-primary); color:var(--text-primary);font-weight:700; } /* 색만으로 구분하지 않도록 체크 표시를 함께 */ .stp__typeBtn.is-on::before,.pd__chip.is-on::before{ content:'';flex:none;width:14px;height:14px;background:var(--brand-primary); -webkit-mask:var(--ig-check) center/contain no-repeat;mask:var(--ig-check) center/contain no-repeat; } .stp__typeNote{font-size:14px} /* ── 구역 제목 크기 ── */ #setting-prices .ig-h2{font-size:27px;line-height:1.3} @media (min-width:900px){ #setting-prices .ig-h2{font-size:34px} } /* ── 상품 상세 : 휴대폰은 사진을 낮춰 모델명·기기값이 첫 화면에 들어오게, 글자는 읽기 좋게 ── */ .pd__name{font-size:23px;font-weight:700;line-height:1.3} .pd__name span{font-weight:500} .pd__rowK{font-size:14px} .pd__priceK{font-size:14px} .pd__priceV{font-size:34px;font-weight:800} .pd__priceNote{font-size:14px;line-height:1.55} .pd__list li{font-size:15px;line-height:1.6} .pd__list--care li{font-size:14px} .pd__secNote{font-size:14px;line-height:1.55} /* 상세는 첫 칸이 배너가 아니라서, 고정 헤더(휴대폰 60px · PC 72px) 높이만큼 위를 비워야 '← 셋팅가 목록' 과 사진 윗부분이 헤더 뒤로 숨지 않는다 */ .pd{padding-top:calc(72px + 28px)} @media (max-width:899px){ .pd{padding-block:calc(60px + 10px) 28px} .pd__back{margin-bottom:4px} .pd__head{gap:14px} /* 사진판 높이를 고정해 로딩 전에도 자리가 잡힌다 (원본 비율은 그대로 맞춰 넣기) */ .pd__shot{aspect-ratio:auto;height:240px;max-width:none} .pd__pick{margin-top:12px;gap:10px} .pd__price{margin-top:14px;padding-top:12px} .pd__cta--top{margin-top:12px} } @media (min-width:900px){ .pd__name{font-size:29px} .pd__priceV{font-size:36px} } /* ══════════════════════════════════════════════════════════════════════ 희망 색상 (상세 · 목록) · 작은 원형 색상칩 + 색상명. 선택은 바깥 테두리와 체크로 알린다 (색만으로 구분하지 않는다). · 흰색·은색이 흰 바탕에 묻히지 않게 색상 원에 중립색 경계를 둔다. 색상값은 자료에서 --sw 로만 받는다. · 누르는 영역은 44×44px 이상, 이름이 길면 줄바꿈 (글자를 줄이지 않는다). 그림자·반짝임·회전 없음. ══════════════════════════════════════════════════════════════════════ */ .pd__row--color{align-items:start} .pd__row--color[hidden]{display:none} .pd__colorName{margin-left:4px;font-weight:700;color:var(--text-primary)} .pd__swatches{display:flex;flex-wrap:wrap;gap:8px} .pd__sw{ display:inline-flex;align-items:center;gap:8px;min-height:44px;min-width:44px;max-width:100%; padding:6px 14px 6px 8px;border-radius:999px;cursor:pointer; border:1px solid var(--border-strong);background:var(--ivory-card);color:var(--text-primary); font:inherit;font-size:15px;font-weight:600;line-height:1.3;text-align:left;word-break:keep-all; } .pd__sw:hover{border-color:var(--text-muted)} .pd__sw:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px} .pd__sw.is-on{border-color:var(--brand-primary);box-shadow:inset 0 0 0 1px var(--brand-primary); background:color-mix(in srgb,var(--brand-primary) 8%,var(--ivory-card))} .pd__sw.is-on::after{content:'';flex:none;width:14px;height:14px;background:var(--brand-primary); -webkit-mask:var(--ig-check) center/contain no-repeat;mask:var(--ig-check) center/contain no-repeat} .pd__swDot,.pl__swDot{flex:none;display:block;border-radius:50%;background:var(--sw,transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text-primary) 30%,transparent)} .pd__swDot{width:22px;height:22px} /* 색상 버튼은 상아색 바탕이라 어두운 테마 글자색(--text-primary)으로는 이름이 읽히지 않는다 — 상아색 바탕용 짙은 글자로 */ .pd__swName{min-width:0;color:var(--ink-ivory)} .pd__colorMsg{margin:2px 0 0;font-size:14px;font-weight:600;line-height:1.5;color:var(--text-primary)} .pd__colorMsg:empty{display:none} .pd__colorHint,.pd__colorNone{margin:2px 0 0;font-size:13px;line-height:1.5;color:var(--text-muted);word-break:keep-all} @media (min-width:600px){ .pd__row--color>.pd__colorMsg,.pd__row--color>.pd__colorHint,.pd__row--color>.pd__colorNone{grid-column:2} } /* 사진틀 — 불러오는 중에는 옛 사진을 새 색상 사진처럼 보여 주지 않고, 실패해도 틀은 남긴다 */ .pd__shot.is-loading img,.pd__shot.is-none img{visibility:hidden} .pd__shotNote,.pl__shotNote{position:absolute;left:10px;bottom:10px;margin:0;padding:3px 8px;border-radius:6px; font-size:12px;font-weight:600;line-height:1.4;color:var(--text-primary); background:color-mix(in srgb,var(--ivory-card) 90%,transparent);box-shadow:inset 0 0 0 1px var(--border-default)} .pd__shotNote[hidden],.pl__shotNote[hidden]{display:none} /* 목록 카드의 짧은 한 줄 */ .pl__colors{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;margin-top:8px} .pl__colorsK{font-size:13px;font-weight:600;color:var(--text-muted)} .pl__sws{display:flex;flex-wrap:wrap} .pl__sw{display:inline-grid;place-items:center;width:44px;height:44px;padding:0;margin:0;border:0;border-radius:50%; background:transparent;cursor:pointer} .pl__sw:focus-visible{outline:3px solid var(--focus-ring);outline-offset:-2px} .pl__swDot{width:22px;height:22px} .pl__sw.is-on .pl__swDot{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text-primary) 30%,transparent), 0 0 0 2px var(--ivory-card),0 0 0 4px var(--brand-primary)} .pl__colorName{font-size:14px;font-weight:600;color:var(--text-primary);word-break:keep-all} /* 희망 색상 — 서버 거절 뒤 상담창에서 다시 고르기 · 확인 중 안내 */ .stpf__colorFix{display:grid;gap:8px;padding:12px;border:1px solid var(--line-ivory);border-radius:10px} .stpf__colorFix[hidden]{display:none} .stpf__colorFixT{margin:0;font-size:15px;font-weight:700;line-height:1.5;color:var(--ink3-ivory);word-break:keep-all} .stpf__colorFixL{display:flex;flex-wrap:wrap;gap:8px} .stpf__colorOpt{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid var(--line-ivory);border-radius:22px; background:transparent;color:var(--ink3-ivory);font:inherit;font-size:15px;font-weight:600;line-height:1.3;cursor:pointer;word-break:keep-all;text-align:left} .stpf__colorOpt:focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px} .stpf__colorOpt--later{border-style:dashed} .stpf__colorDot{width:18px;height:18px;border-radius:50%;flex:none;background:var(--sw,transparent);box-shadow:inset 0 0 0 1px rgba(0,0,0,.22)} .pd__colorChecking{margin:2px 0 0;font-size:15px;font-weight:600;line-height:1.5;color:var(--text-primary);word-break:keep-all} @media (min-width:600px){ .pd__row--color>.pd__colorChecking{grid-column:2} } /* ── 인터넷·TV 카테고리 ───────────────────────────────────── 색은 전부 디자인 설정 토큰만 쓴다 (여기서 색값을 새로 만들지 않는다). 역할을 나눠 쓴다 : 넓은 면 --bg-section · 카드/입력칸 --ivory-card(흰색) · 고른 것 --net-pick(옅은 파랑) 글자 --text-primary / 설명 --text-secondary · 경계 --border-default / 뚜렷한 경계 --border-strong 주요 동작과 고른 표시만 --accent-primary 통신사 고유색은 표식(왼쪽 선·글자)에만 좁게 쓴다. 모서리 : 카드 16px · 버튼 12px. 누르는 것은 최소 44px, 주요 버튼 48px. */ .net{ /* 카드 바탕은 테마 방향을 따르는 --bg-elevated 로 — --ivory-card 는 어두운 프리셋에서도 밝은 색이라 글자(--text-primary, 밝음)와 겹쳐 보이지 않았다. 밝은 프리셋에서는 두 값이 같다(운영 화면 변화 없음). */ --ivory-card: var(--bg-elevated); --net-pick: var(--accent-soft); /* 고른 항목의 옅은 바탕 (디자인 설정 토큰) */ /* 누르는 것의 경계는 바탕과 3:1 이상이어야 형태가 보인다. 옅은 경계(--border-strong)는 흰 바탕에서 1.52:1 이라 조작 요소에는 쓰지 않는다. */ --net-ctl-edge: var(--text-secondary); --net-card-r: 16px; --net-btn-r: 12px; max-width:1240px;margin:0 auto;padding:clamp(24px,5vw,56px) 16px; display:grid;gap:clamp(20px,3vw,28px); font-size:16px; } .net__head{display:grid;gap:8px} /* 인터넷 화면도 첫 칸이 배너가 아니다 — 고정 헤더(휴대폰 60px · PC 72px) 높이만큼 비워야 머리말(「인터넷 · TV」·마이셋 줄)이 헤더 뒤로 숨지 않는다 */ .net{padding-top:calc(72px + clamp(20px,3vw,36px))} @media (max-width:899px){ .net{padding-top:calc(60px + 16px)} } /* 관리자 미리보기 : 위의 미리보기 안내가 이미 헤더 아래를 차지한다 — 본문은 원래 간격으로 */ .netprev + .net,.netprev ~ .net{padding-top:clamp(24px,5vw,56px)} .net__lead{font-size:16px;line-height:1.6;color:var(--text-secondary);max-width:62ch} /* 조건 고르기 ── 넓은 면 위에 흰 칩 */ .net__pickers{display:grid;gap:14px;padding:18px;border:1px solid var(--border-default); border-radius:var(--net-card-r);background:var(--bg-section)} .net__row{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .net__label{font-size:14px;font-weight:700;min-width:56px;color:var(--text-primary)} .net__hint{flex-basis:100%;font-size:14px;line-height:1.55;color:var(--text-secondary)} .net__chip{position:relative;min-height:48px;padding:0 16px;border-radius:var(--net-btn-r); border:1px solid var(--net-ctl-edge);background:var(--ivory-card);color:var(--text-primary); font:inherit;font-size:15px;font-weight:600;cursor:pointer; display:inline-flex;align-items:center;gap:6px} .net__chip:hover:not([disabled]){border-color:var(--accent-primary);background:var(--net-pick)} .net__chip:focus-visible{outline:3px solid var(--accent-primary);outline-offset:2px} /* 고른 상태 : 옅은 파랑 바탕 + 파란 경계 + 체크 (색만으로 알리지 않는다) */ .net__chip.is-on{background:var(--net-pick);border-color:var(--accent-primary); box-shadow:inset 0 0 0 1px var(--accent-primary);color:var(--text-primary);font-weight:700} .net__chip.is-on::before{content:'✓';font-weight:800;color:var(--accent-primary)} .net__chip[disabled]{cursor:not-allowed;background:var(--bg-section);color:var(--text-secondary); border-style:dashed;border-color:var(--net-ctl-edge)} /* 할인 조건 칩 ── 기본 구성 칩과 **생김새를 달리한다.** 같아 보이면 「요금을 고르는 것」으로 오해한다. 이것은 조건을 켜는 것일 뿐 금액을 바꾸지 않는다(켜도 월 금액은 그대로다). */ .net__chip--dc{flex-direction:column;align-items:flex-start;gap:1px; min-height:52px;padding:7px 14px;border-style:dashed;font-weight:600} .net__chip--dc small{font-size:11.5px;font-weight:500;color:var(--text-secondary)} .net__chip--dc.is-on{border-style:solid;background:var(--net-pick)} .net__chip--dc.is-on::before{position:absolute;top:6px;right:9px;content:'✓';font-size:12px} .net__chip--dc.is-on small{color:var(--text-primary)} /* 옛 주소로 들어왔다는 안내 — 조용히 바꿔 읽지 않는다는 표시라서 눈에 띄어야 한다 */ .net__hint--legacy{flex-basis:100%;margin:8px 0 0;padding:10px 12px;border-radius:10px; background:var(--bg-section);box-shadow:inset 0 0 0 1px var(--net-ctl-edge); font-size:13.5px;line-height:1.6;color:var(--text-primary)} /* 상품 목록 ── 흰 카드. 테두리와 그림자를 겹치지 않는다 */ .net__listWrap{display:grid;gap:10px} .net__list{list-style:none;margin:0;padding:0;display:grid;gap:12px} .net__item{border:1px solid var(--border-default);border-radius:var(--net-card-r); background:var(--ivory-card);overflow:hidden} .net__item.is-on{border-color:var(--accent-primary);box-shadow:inset 0 0 0 1px var(--accent-primary)} .net__pick{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:2px 14px;align-items:center; width:100%;padding:16px;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer} .net__pick:hover{background:var(--net-pick)} .net__pick:focus-visible{outline:3px solid var(--accent-primary);outline-offset:-3px} /* 통신사 자리 : 공식 로고 + 이름을 한 묶음으로. 로고를 숨겼거나 못 불러오면 이름만 남는다. */ .net__head2{grid-row:1 / span 2;align-self:stretch;display:flex;flex-direction:column; align-items:flex-start;justify-content:center;gap:5px;padding-right:14px; border-left:4px solid var(--border-strong);padding-left:10px;min-width:0} .net__head2 .net__carrier{grid-row:auto;align-self:auto;padding:0;border-left:0} .net__itemLogo{display:flex;align-items:center;justify-content:flex-start;height:22px} .net__itemLogo img{display:block;height:18px;width:auto;max-width:100%;object-fit:contain} .net__itemLogo.is-off{display:none} .net__carrier{grid-row:1 / span 2;align-self:stretch;display:flex;align-items:center;padding-right:14px; border-left:4px solid var(--border-strong);padding-left:10px;font-size:13px;font-weight:700; color:var(--text-secondary);white-space:nowrap} .net__carrier--kt{border-left-color:#E6002D} .net__carrier--lgu{border-left-color:#E6007E} .net__carrier--skb{border-left-color:#EA1917} /* 읽는 차례 : 상품명 → 속도·구성 → 월 금액 → 조건. 굵기는 이름과 금액에만 준다 */ .net__name{font-size:17px;font-weight:700;color:var(--text-primary);overflow-wrap:anywhere} .net__speed{grid-column:2;font-size:14px;font-weight:500;color:var(--text-secondary)} .net__price{grid-column:3;grid-row:1 / span 2;text-align:right;font-size:20px;font-weight:800; color:var(--text-primary);font-variant-numeric:tabular-nums;white-space:nowrap} .net__price small{display:block;font-size:12.5px;font-weight:500;color:var(--text-secondary);white-space:normal;overflow-wrap:anywhere} /* 휴대폰 폭 : 금액 칸 설명이 길어도 상품명 칸을 밀어내지 않게 금액 칸 폭을 제한한다 (설명이 줄바꿈 없이 늘어나 상품명 칸이 0 이 되어 한 글자씩 세로로 쌓이던 문제) */ @media (max-width:719px){ .net__pick{grid-template-columns:auto minmax(0,1fr) minmax(0,max-content)} .net__price{max-width:42vw} } /* 좁은 휴대폰(480px 미만) : 세 칸이 모자라 한 줄씩 쌓는다 — 통신사 → 상품명 → 속도·구성 → 금액 */ @media (max-width:479px){ .net__pick{grid-template-columns:minmax(0,1fr);gap:4px} .net__head2{grid-row:auto;grid-column:1;flex-direction:row;align-items:center;gap:8px; border-left:0;padding:0 0 3px;width:max-content;max-width:100%;border-bottom:2px solid var(--border-strong)} .net__head2 .net__carrier{border-left:0;padding:0} .net__carrier{grid-row:auto;grid-column:1;border-left:0;padding:0 0 2px;width:max-content} .net__name,.net__speed{grid-column:1} .net__price{grid-column:1;grid-row:auto;text-align:left;max-width:none;margin-top:4px} } .net__priceBase{font-size:11.5px!important;opacity:.85} /* 금액이 없을 때 — 큰 금액처럼 보이지 않게 낮추고, 왜 없는지는 아래 작은 글씨가 말한다 */ .net__price--none{font-size:15px;font-weight:700;color:var(--text-secondary);white-space:normal} .net__item--noprice{background:var(--bg-section)} /* 고른 약정 요금이 한 상품도 없을 때의 안내 + 확인된 약정으로 옮기는 단추 */ .net__termNote{margin:0 0 12px;padding:14px 16px;border:1px solid var(--net-ctl-edge); border-radius:var(--net-card-r);background:var(--net-soft);display:grid;gap:10px} .net__termNoteT{margin:0;font-size:14.5px;line-height:1.6;color:var(--text-primary)} .net__termNoteB{margin:0;display:flex;flex-wrap:wrap;gap:8px} .net__termGo{font-weight:700;display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px; line-height:1.35;text-align:left} .net__termGo small{font-size:11.5px;font-weight:500;color:var(--text-secondary)} /* 일부만 확인된 금액 — 확정 합계처럼 보이지 않게 이유를 붙인다 */ .net__priceWarn{display:block;font-size:11.5px;font-weight:500;color:var(--text-secondary); margin-top:2px;white-space:normal;max-width:24em} .net__item--partial .net__price{color:var(--text-primary)} /* 고른 상품 표시 — 자리를 늘 차지해 고르기 전후로 카드가 흔들리지 않는다 */ .net__on{grid-column:2;justify-self:start;margin-top:4px;padding:2px 8px;border-radius:999px; background:var(--net-pick);box-shadow:inset 0 0 0 1px var(--accent-primary); font-size:12.5px;font-weight:700;color:var(--text-primary)} /* 선택 바탕 위 글자는 본문 글자색 — 강조색은 테두리로(강조색 글자는 일부 프리셋 3.8~4.25:1) */ .net__why,.net__sub{margin:0;padding:0 16px 14px;font-size:14px;line-height:1.55;color:var(--text-secondary)} .net__why{color:var(--accent-primary);font-weight:600;padding-bottom:6px} .net__empty,.net__warn{padding:16px;border:1px solid var(--border-default);border-radius:var(--net-card-r); background:var(--ivory-card);font-size:15px;line-height:1.6;color:var(--text-primary);margin:0} .net__warn{border-color:var(--accent-primary);background:var(--net-pick)} /* ── 통신사별 안내 배너 ── 흰 바탕이 기본이고 통신사 색은 왼쪽 띠로만 쓴다. 큰 장식·그라데이션으로 내용을 가리지 않는다. */ .net__bans{display:grid;gap:12px;margin:16px 0 4px} @media (min-width:900px){ .net__bans{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} } .net__ban{border:1px solid var(--border-default);border-left:4px solid var(--border-strong); border-radius:var(--net-card-r);background:var(--bg-page);padding:16px 18px;display:grid;gap:10px;align-content:start} .net__ban--kt{border-left-color:#E6002D} .net__ban--lgu{border-left-color:#E6007E} .net__ban--skb{border-left-color:#EA1917} .net__banImg{display:block;width:100%;height:auto;max-height:160px;object-fit:cover; border-radius:12px;background:var(--bg-section)} .net__banHead{display:flex;align-items:center;gap:12px;min-width:0} .net__banLogo{display:flex;align-items:center;justify-content:center;height:28px;flex:none} .net__banLogo img{display:block;height:24px;width:auto;max-width:120px;object-fit:contain} .net__banLogo.is-off{display:none} .net__banTxt{min-width:0} .net__banT{margin:0;font-size:17px;font-weight:800;color:var(--text-primary);overflow-wrap:anywhere} .net__banD{margin:4px 0 0;font-size:13.5px;line-height:1.6;color:var(--text-secondary)} .net__banFacts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 10px; font-size:13px;color:var(--text-secondary)} .net__banFacts li{padding:3px 9px;border-radius:999px;background:var(--net-soft)} .net__banPrice{font-weight:800;color:var(--text-primary);display:flex;align-items:baseline;gap:6px} .net__banPrice small{font-size:11.5px;font-weight:500;color:var(--text-secondary)} .net__banGo{margin:0;display:flex;flex-wrap:wrap;gap:8px} .net__banBtn{text-decoration:none;font-weight:700} @media (max-width:560px){ .net__ban{padding:14px} .net__banHead{flex-direction:column;align-items:flex-start;gap:8px} .net__banGo .net__banBtn{flex:1 1 auto;justify-content:center;text-align:center} } /* ── 통신사별 전체 요금표 ── */ .net__rate{border:1px solid var(--border-default);border-radius:var(--net-card-r); background:var(--ivory-card);padding:18px;display:grid;gap:12px;margin-top:18px;min-width:0} .net__rateT{margin:0;font-size:18px;font-weight:800;color:var(--text-primary);display:grid;gap:3px} .net__rateT small{font-size:12.5px;font-weight:500;color:var(--text-secondary)} .net__rtDev{margin:0;font-size:12.5px;line-height:1.6;color:var(--text-secondary)} /* 표는 **가로로 밀지 않는다.** 줄이 구성, 열이 속도라 열 수가 통신사당 4개를 넘지 않는다. 그래도 좁아지면 표를 감추고 아래 카드로 보여 준다 — 잘라내거나 숨기는 것이 아니라 같은 값을 다른 모양으로 그린다(둘 다 같은 계산 결과를 쓴다). */ .net__rateWide{display:none;min-width:0} .net__rtTable{border-collapse:collapse;width:100%;font-size:14px;table-layout:fixed} .net__rtCap{text-align:left;font-size:12.5px;color:var(--text-secondary);padding:0 0 8px} .net__rtTable th,.net__rtTable td{border:1px solid var(--net-line);padding:8px 10px;text-align:right; vertical-align:middle;overflow-wrap:anywhere} .net__rtTable thead th{background:var(--net-soft);font-size:12.5px;font-weight:700; color:var(--text-secondary);text-align:right} .net__rtCorner{text-align:left!important;width:27%} .net__rtSpeed b{display:block;font-size:15px;font-weight:800;color:var(--text-primary)} .net__rtSpeed small{display:block;margin-top:2px;font-size:11.5px;font-weight:500; color:var(--text-secondary);line-height:1.45} /* 줄 이름(구성)은 왼쪽 정렬 — 긴 요금제 이름은 자연스럽게 줄바꿈한다 */ .net__rtName{text-align:left!important;background:var(--ivory-card)} .net__rtName b{display:block;font-size:14.5px;font-weight:700;color:var(--text-primary);line-height:1.45} .net__rtName small{display:block;margin-top:2px;font-size:11.5px;font-weight:500;color:var(--text-secondary)} .net__rtCell{font-variant-numeric:tabular-nums} .net__rtGo{display:block;color:inherit;text-decoration:none;border-radius:8px;padding:2px 4px} .net__rtGo:hover{background:var(--net-pick)} .net__rtGo:focus-visible{outline:3px solid var(--focus-ring);outline-offset:1px} .net__rtGo b{font-size:15px;font-weight:800;color:var(--text-primary)} .net__rtGo small{display:block;font-size:11px;font-weight:500;color:var(--text-secondary)} .net__rtNone{font-size:12.5px;color:var(--text-secondary)} /* 부분 소계 — 확정 금액보다 한 단계 낮게(굵게 하지 않는다) */ .net__rtPart{font-size:13.5px;font-weight:500;color:var(--text-secondary);font-variant-numeric:tabular-nums} .net__rtPart small{display:block;margin-top:1px;font-size:11px;font-weight:500;color:var(--text-secondary)} .net__rtCell.is-term,.net__rtCell.is-combo,.net__rtCell.is-na{background:var(--bg-section)} /* 좁은 화면 : 구성별 카드 — 금액마다 속도·상품명을 붙여 조건을 바로 알 수 있게 한다 */ /* TV 요금제로 볼 수 있는 것 · OTT 이용권 */ .net__tvFeat{display:block;margin-top:2px;font-size:12px;font-weight:500;line-height:1.5; color:var(--text-secondary);white-space:normal;overflow-wrap:anywhere} .net__tvOtt{display:block;margin-top:2px;font-size:11.5px;font-weight:700;color:var(--accent-primary)} .net__rtCardsHint{margin:0;font-size:12.5px;line-height:1.6;color:var(--text-secondary)} @media (min-width:900px){ .net__rtCardsHint{display:none} } .net__rtCards{list-style:none;margin:0;padding:0;display:grid;gap:12px;min-width:0} .net__rtCard{border:1px solid var(--net-line);border-radius:var(--net-btn-r); background:var(--bg-section);padding:12px;min-width:0} .net__rtCardT{margin:0 0 8px;font-size:14.5px;font-weight:800;color:var(--text-primary);line-height:1.45} .net__rtCardT small{display:block;margin-top:2px;font-size:11.5px;font-weight:500;color:var(--text-secondary)} .net__rtCardL{list-style:none;margin:0;padding:0;display:grid;gap:6px;min-width:0} .net__rtCardI{border-radius:10px;background:var(--ivory-card);min-width:0} .net__rtCardI.is-term,.net__rtCardI.is-combo,.net__rtCardI.is-na{background:transparent; box-shadow:inset 0 0 0 1px var(--net-line)} .net__rtCardI .net__rtGo{display:flex;align-items:baseline;justify-content:space-between; gap:10px;padding:9px 11px;min-width:0} .net__rtSp{min-width:0;flex:1 1 auto} .net__rtSp b{display:block;font-size:14px;font-weight:800;color:var(--text-primary)} .net__rtSp small{display:block;margin-top:1px;font-size:11.5px;font-weight:500; color:var(--text-secondary);line-height:1.45;overflow-wrap:anywhere} .net__rtVal{flex:0 0 auto;text-align:right;font-variant-numeric:tabular-nums} .net__rtVal b{font-size:15px} .net__rtGo--off{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:9px 11px} /* 줄 전체가 같은 사유로 비어 있을 때 — 칸마다 되풀이하지 않고 한 줄로 모은다 */ .net__rtAll{text-align:left!important;background:var(--bg-section)} .net__rtAll .net__rtNone small{display:inline;margin-left:6px;font-size:11.5px} .net__rtCardNone{margin:0;padding:9px 11px;border-radius:10px;background:var(--ivory-card); font-size:12.5px;line-height:1.55;color:var(--text-secondary)} .net__rtCardNone small{display:block;margin-top:2px;font-size:11.5px} .net__rateNote{margin:0;font-size:12.5px;line-height:1.6;color:var(--text-secondary)} /* 할인 조건 안내는 요금표 전체에 걸리는 말이라 한 단계 또렷하게 */ .net__rateNote--dc{padding:10px 12px;border-radius:10px;background:var(--bg-section); color:var(--text-primary)} /* 열이 4개까지 들어갈 만큼 넓어지면 표로 바꾼다 (그 아래는 카드가 기본) */ @media (min-width:900px){ .net__rateWide{display:block} .net__rtCards{display:none} } @media (max-width:560px){ .net__rate{padding:14px} } /* ── 통신사별 자주 묻는 질문 ── */ .net__faq{border:1px solid var(--border-default);border-radius:var(--net-card-r); background:var(--ivory-card);padding:18px;display:grid;gap:10px;margin-top:18px} .net__faqT{margin:0;font-size:18px;font-weight:800;color:var(--text-primary)} .net__faqList{list-style:none;margin:0;padding:0;display:grid;gap:8px} .net__faqI{border:1px solid var(--net-line);border-radius:12px;background:var(--bg-page)} .net__faqI > summary{cursor:pointer;padding:12px 14px;font-size:15px;font-weight:700; color:var(--text-primary);list-style:none} .net__faqI > summary::-webkit-details-marker{display:none} .net__faqI > summary::after{content:"＋";float:right;color:var(--text-secondary);font-weight:500} .net__faqI[open] > summary::after{content:"－"} .net__faqI > summary:focus-visible{outline:3px solid var(--focus-ring);outline-offset:-3px;border-radius:12px} .net__faqI > p{margin:0;padding:0 14px 14px;font-size:14px;line-height:1.7;color:var(--text-secondary)} .net__faqNote{margin:0;font-size:12.5px;color:var(--text-secondary)} /* 견적 요약 ── 흰 카드 안에서 계산 내역과 최종 금액을 나눈다 */ .net__summary{border:1px solid var(--border-default);border-radius:var(--net-card-r); background:var(--ivory-card);padding:18px;display:grid;gap:12px;align-content:start} .net__sumT{margin:0;font-size:17px;font-weight:700;color:var(--text-primary);overflow-wrap:anywhere} .net__sumCond,.net__sumEmpty{margin:0;font-size:14px;line-height:1.55;color:var(--text-secondary)} .net__quote{margin:0;display:grid;gap:8px;font-size:15px} .net__quote > div{display:flex;justify-content:space-between;gap:12px;align-items:baseline} .net__quote dt{margin:0;color:var(--text-primary)} .net__quote dt small{display:block;font-size:12.5px;font-weight:500;color:var(--text-secondary)} .net__quote dd{margin:0;font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap;color:var(--text-primary)} /* 월 예상 금액만 옅은 배경으로 강조 — 계산 내역보다 뚜렷하게 크게 */ .net__quoteSum{margin-top:2px;padding:12px 14px;border-radius:var(--net-btn-r);background:var(--net-pick); box-shadow:inset 0 0 0 1px var(--border-strong)} .net__quoteSum dt{font-size:15px;font-weight:700} .net__quoteSum dd{font-size:24px;font-weight:800;line-height:1.2} /* 합계를 확정하지 못했을 때 — 확인된 것만 더한 소계임을 눈에 띄게 구분한다 */ .net__quoteSum--part{background:var(--bg-section);box-shadow:inset 0 0 0 1px var(--net-ctl-edge)} .net__quoteSum--part dt small{display:block;margin-top:2px;font-size:12.5px;font-weight:500;color:var(--text-secondary)} .net__quoteSum--part dd{font-size:20px} /* 소계에 무엇이 들어 있고 무엇이 빠졌는지 — 숫자 바로 옆에서 읽히게 */ .net__sumParts{display:block;margin-top:6px;padding-top:6px;border-top:1px solid var(--net-ctl-edge); font-size:12px;font-weight:500;line-height:1.6;color:var(--text-secondary)} .net__sumParts b{font-weight:700;color:var(--text-primary)} /* 결합 할인 조건 — 금액을 빼지 않고 조건만 보여 준다 */ .net__bundleList{list-style:none;margin:6px 0 4px;padding:0;display:grid;gap:4px} .net__bundleList li{padding:6px 9px;border-radius:8px;background:var(--ivory-card); font-size:12.5px;line-height:1.55} .net__bundleList small{display:block;margin-top:1px;color:var(--text-secondary)} /* 요금표 기준액 + 고르신 장비 — 합계 옆에서 바로 읽히게 */ .net__sumBase{display:block;margin-top:4px;font-size:12px;font-weight:500;line-height:1.55; color:var(--text-secondary)} .net__sumBase b{font-weight:700;color:var(--text-primary)} .net__sumBase span{display:block} /* ── 견적 요약 + 자세히 보기 ── 요약은 늘 보이고, 자세한 내역만 접는다. 월 요금과 설치비는 각각 따로 보여 준다. */ /* ── 상품 사진 ── 불러오는 동안 자리를 잡아 두고, 실패하면 빈 틀 대신 안내를 보여 준다 */ .net__photo{margin:0 0 12px;border-radius:var(--net-card-r);overflow:hidden;background:var(--bg-section)} .net__phMain{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--bg-section)} .net__phCap{padding:8px 12px;font-size:12.5px;line-height:1.5;color:var(--text-secondary)} .net__phSrc{display:block;margin-top:2px;font-size:11.5px;color:var(--text-secondary);opacity:.85} .net__phOff{display:none;padding:12px;margin:0;font-size:13px;color:var(--text-secondary)} .net__photo.is-off .net__phMain,.net__photo.is-off .net__phCap,.net__photo.is-off .net__phMore{display:none} .net__photo.is-off .net__phOff{display:block} .net__phMore{list-style:none;display:flex;gap:6px;margin:0;padding:0 12px 12px;flex-wrap:wrap} .net__phMore img{width:62px;height:62px;object-fit:cover;border-radius:8px;background:var(--bg-section)} .net__quote--sum{display:grid;gap:8px;margin:0 0 10px} .net__quoteOnce{display:flex;align-items:baseline;justify-content:space-between;gap:12px; padding:11px 14px;border-radius:var(--net-btn-r);background:var(--bg-section); box-shadow:inset 0 0 0 1px var(--border-default)} .net__quoteOnce dt{font-size:14.5px;font-weight:700;color:var(--text-primary)} .net__quoteOnce dt small{display:block;margin-top:2px;font-size:12px;font-weight:500;color:var(--text-secondary)} .net__quoteOnce dd{font-size:19px;font-weight:800;line-height:1.2;white-space:nowrap} .net__quoteOnce--part{box-shadow:inset 0 0 0 1px var(--net-ctl-edge)} /* 꼭 보여야 하는 안내 — 접지 않는다 */ .net__flags{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px} .net__flags li{position:relative;padding:8px 10px 8px 26px;border-radius:10px; background:var(--bg-section);font-size:13px;line-height:1.55;color:var(--text-secondary)} .net__flags li::before{content:"•";position:absolute;left:11px;top:8px;color:var(--text-secondary)} .net__flags li b{color:var(--text-primary)} .net__flags li.is-warn{background:var(--accent-soft);color:var(--text-primary)} .net__flags li.is-warn::before{content:"!";font-weight:800;color:var(--accent-primary)} /* 자세히 보기 */ .net__more{margin-top:12px;border-radius:var(--net-btn-r);background:var(--bg-section); box-shadow:inset 0 0 0 1px var(--border-default)} .net__moreT{cursor:pointer;list-style:none;padding:11px 14px;font-size:14px;font-weight:700; color:var(--text-primary);display:flex;align-items:center;gap:8px;border-radius:var(--net-btn-r)} .net__moreT::-webkit-details-marker{display:none} .net__moreT::after{content:"펼치기";margin-left:auto;font-size:12.5px;font-weight:600;color:var(--text-secondary)} .net__more[open] .net__moreT::after{content:"접기"} .net__moreT::before{content:"";width:8px;height:8px;border-right:2px solid var(--text-secondary); border-bottom:2px solid var(--text-secondary);transform:rotate(45deg) translateY(-2px);transition:transform .15s} .net__more[open] .net__moreT::before{transform:rotate(-135deg) translateY(-2px)} .net__moreT:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px} .net__moreBody{padding:0 14px 14px} .net__moreH{margin:12px 0 6px;font-size:12.5px;font-weight:700;letter-spacing:.02em;color:var(--text-secondary)} .net__moreList{list-style:none;margin:0;padding:0;display:grid;gap:5px;font-size:12.8px;line-height:1.6;color:var(--text-secondary)} .net__moreList li{padding-left:12px;position:relative} .net__moreList li::before{content:"·";position:absolute;left:3px;color:var(--text-secondary)} .net__moreList b{color:var(--text-primary)} .net__moreSrc li{word-break:break-all} @media (prefers-reduced-motion:reduce){ .net__moreT::before{transition:none} } .net__quoteMobile dd{color:var(--text-secondary);font-weight:600} /* 한 번만 내는 금액은 월 요금과 선으로 나눈다 */ .net__quote--once{border-top:1px solid var(--border-default);padding-top:12px} .net__onceHead dt{font-weight:700;color:var(--text-primary)} /* 한 번만 내는 금액이 '전체 금액' 으로 오해되지 않게 — 확인 못 한 비용이 있으면 눈에 띄게 알린다 */ .net__onceWarn{margin:6px 0 0;padding:8px 10px;border-radius:10px; background:var(--accent-soft);color:var(--text-secondary);font-size:.82rem;line-height:1.5} .net__onceWarn b{color:var(--text-primary)} .net__opt dt,.net__opt dd{color:var(--text-secondary);font-weight:500} .net__card,.net__note{margin:0;font-size:14px;line-height:1.55;color:var(--text-secondary)} .net__must{margin:0;padding-left:18px;display:grid;gap:6px;font-size:14px;line-height:1.55;color:var(--text-secondary)} .net__cta{margin-top:2px;min-height:48px;border-radius:var(--net-btn-r)} /* TV 요금제 고르기 */ .net__tv{display:grid;gap:12px;padding:18px;border:1px solid var(--border-default); border-radius:var(--net-card-r);background:var(--bg-section)} .net__tvT{margin:0;font-size:17px;font-weight:700;color:var(--text-primary)} .net__tvT small{display:block;margin-top:4px;font-size:14px;font-weight:500;color:var(--text-secondary)} /* TV 요금제 카드 — 글자 길이에 따라 폭이 제각각이던 것을 격자로(휴대폰 한 열 꽉 채움 · 넓은 화면 같은 폭 여러 열) */ .net__tvRow{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:8px} .net__tvChip{flex-direction:column;align-items:flex-start;gap:2px;min-height:64px;padding:10px 14px;text-align:left} .net__tvName{font-size:15px;font-weight:700} .net__tvSub{font-size:13px;font-weight:500;color:var(--text-secondary)} .net__tvChip.is-on .net__tvSub{color:var(--text-primary)} .net__tvHint,.net__tvNote{margin:0;font-size:14px;line-height:1.55;color:var(--text-secondary)} /* 장비 고르기 */ .net__dev{display:grid;gap:12px;padding:18px;border:1px solid var(--border-default); border-radius:var(--net-card-r);background:var(--bg-section)} .net__devT{margin:0;font-size:17px;font-weight:700;color:var(--text-primary)} .net__devT small{display:block;margin-top:4px;font-size:14px;font-weight:500;color:var(--text-secondary)} .net__devList{list-style:none;margin:0;padding:0;display:grid;gap:10px} .net__devI{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 12px;align-items:center; padding:12px 14px;border:1px solid var(--border-default);border-radius:var(--net-btn-r);background:var(--ivory-card)} .net__devName{font-size:15px;font-weight:700;min-width:0;overflow-wrap:anywhere;color:var(--text-primary)} .net__devSub{grid-column:2;font-size:14px;line-height:1.5;min-width:0;overflow-wrap:anywhere;color:var(--text-secondary)} .net__devCount{grid-column:1 / -1;display:flex;align-items:center;gap:8px;justify-content:flex-end} .net__devBtn{width:44px;min-height:44px;border-radius:var(--net-btn-r);border:1px solid var(--net-ctl-edge); background:var(--ivory-card);color:var(--text-primary);font:inherit;font-size:18px;font-weight:800;cursor:pointer} .net__devBtn:hover:not(:disabled){border-color:var(--accent-primary);background:var(--net-pick)} .net__devBtn:disabled{cursor:not-allowed;color:var(--text-secondary);background:var(--bg-section);border-style:dashed} .net__devBtn:focus-visible{outline:3px solid var(--accent-primary);outline-offset:2px} .net__devN{min-width:48px;text-align:center;font-size:16px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--text-primary)} .net__devNone,.net__devNote{margin:0;font-size:14px;line-height:1.55;color:var(--text-secondary)} /* 장비 모델 고르기 — 카드 전체 폭(아이콘 칸에 끼지 않게) · 누르는 칸 44px 이상 */ .net__devModels{grid-column:1 / -1;min-width:0;margin:4px 0 0;padding:0;border:0;display:grid;gap:8px} .net__devModels legend{padding:0;margin:0 0 4px;font-size:14px;font-weight:700;color:var(--text-primary)} .net__devModel{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;row-gap:2px;align-items:center; min-height:44px;padding:10px 12px;border:1px solid var(--net-ctl-edge);border-radius:var(--net-btn-r); background:var(--ivory-card);cursor:pointer} .net__devModel input{width:20px;height:20px;margin:0;grid-row:1 / span 3;accent-color:var(--accent-primary)} .net__devModel.is-on{background:var(--net-pick);border-color:var(--accent-primary)} .net__devModel:focus-within{outline:3px solid var(--accent-primary);outline-offset:2px} .net__devModelN{font-size:15px;font-weight:700;color:var(--text-primary);min-width:0;overflow-wrap:anywhere} .net__devModelP{font-size:14px;font-weight:600;color:var(--text-primary);font-variant-numeric:tabular-nums} .net__devModelD{font-size:13px;line-height:1.5;color:var(--text-secondary);min-width:0;overflow-wrap:anywhere} @media (min-width:480px){ .net__devI{grid-template-columns:auto minmax(0,1fr) auto} .net__devCount{grid-column:3;grid-row:1 / span 2} } /* 비교 ── 담기 단추(보조 동작)와 비교표 */ .net__cmpAdd{margin:0 16px 14px;min-height:44px;padding:0 14px;border-radius:var(--net-btn-r); border:1px solid var(--net-ctl-edge);background:var(--ivory-card);color:var(--text-primary); font:inherit;font-size:14px;font-weight:700;cursor:pointer} .net__cmpAdd:hover:not(:disabled){border-color:var(--accent-primary);background:var(--net-pick)} .net__cmpAdd.is-on{background:var(--net-pick);border-color:var(--accent-primary); box-shadow:inset 0 0 0 1px var(--accent-primary);color:var(--text-primary)} .net__cmpAdd.is-on::before{content:'✓ ';color:var(--accent-primary);font-weight:800} .net__cmpAdd:disabled{cursor:not-allowed;color:var(--text-secondary);background:var(--bg-section);border-style:dashed} .net__cmpAdd:focus-visible{outline:3px solid var(--accent-primary);outline-offset:2px} .net__cmp{display:grid;gap:12px} .net__cmpT{margin:0;font-size:17px;font-weight:700;color:var(--text-primary)} .net__cmpT small{display:block;margin-top:4px;font-size:14px;font-weight:500;color:var(--text-secondary)} .net__cmpEmpty,.net__cmpNote{margin:0;font-size:14px;line-height:1.55;color:var(--text-secondary)} .net__cmpScroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border-default); border-radius:var(--net-card-r);background:var(--ivory-card)} .net__cmpTable{border-collapse:collapse;width:100%;min-width:560px;font-size:15px} .net__cmpTable th,.net__cmpTable td{padding:12px 14px;text-align:left;vertical-align:top; border-bottom:1px solid var(--border-default);color:var(--text-primary)} .net__cmpTable tbody th{width:140px;font-size:14px;font-weight:700;background:var(--bg-section);color:var(--text-primary)} .net__cmpTable thead th{position:sticky;top:0;z-index:1;background:var(--bg-section)} .net__cmpTable td{font-variant-numeric:tabular-nums} .net__cmpTable small{display:block;margin-top:2px;font-size:13px;font-weight:500;color:var(--text-secondary)} .net__cmpName{display:block;font-size:15px;font-weight:700;margin-top:4px;color:var(--text-primary)} .net__cmpX{margin-top:8px;min-height:44px;padding:0 12px;border-radius:var(--net-btn-r); border:1px solid var(--net-ctl-edge);background:var(--ivory-card);color:var(--text-primary); font:inherit;font-size:13px;font-weight:700;cursor:pointer} .net__cmpX:hover{border-color:var(--accent-primary);background:var(--net-pick)} .net__cmpX:focus-visible,.net__cmpGo:focus-visible{outline:3px solid var(--accent-primary);outline-offset:2px} .net__cmpGo{min-height:44px;border-radius:var(--net-btn-r)} .net__cmpGo[aria-pressed="true"]{background:var(--net-pick);border-color:var(--accent-primary); box-shadow:inset 0 0 0 1px var(--accent-primary);color:var(--text-primary)} .net__cmpNo{color:var(--text-secondary);font-weight:600} /* 관리자 미리보기 띠 */ .netprev{display:grid;gap:6px;padding:16px;margin:0 0 4px;border-radius:var(--net-card-r); border:1px solid var(--accent-primary);background:var(--net-pick)} .netprev__t{font-size:16px;font-weight:800;color:var(--text-primary)} .netprev__d{font-size:14px;line-height:1.55;color:var(--text-primary)} .netprev__d:empty{display:none} .netprev__flag{color:var(--accent-primary)!important;font-weight:700} /* 안내 그림 — 선 굵기·크기·배경·간격을 하나로 맞춘다 (번쩍임·큰 그림자 없음) */ .netart{display:block;width:100%;max-width:300px;height:auto;color:var(--accent-primary)} .netart--home{margin-top:4px} .netart__t{margin:0 0 12px;font-size:17px;font-weight:700;color:var(--text-primary)} .netart__speed,.netart__inst{padding:18px;border:1px solid var(--border-default); border-radius:var(--net-card-r);background:var(--bg-section)} /* ── 월 요금 구성 · 결합 청구서 도식 ────────────────────────── 메인과 같은 색·글자·여백을 쓰고, 실제 장비처럼 보이는 그림을 만들지 않는다. 금액은 그림에 박지 않는다 — 자료에서 계산해 글자로 나간다. */ .netart__cost,.netart__bundle{padding:18px;border:1px solid var(--border-default); border-radius:var(--net-card-r);background:var(--ivory-card);margin-top:18px;min-width:0} .netart__costList{list-style:none;margin:0;padding:0;display:grid;gap:10px} @media (min-width:720px){ .netart__costList{grid-template-columns:repeat(3,1fr)} } .netart__costItem{position:relative;padding:12px 14px 12px 16px;border-radius:var(--net-btn-r); background:var(--bg-section);box-shadow:inset 0 0 0 1px var(--net-line);min-width:0} .netart__costItem::before{content:'';position:absolute;left:0;top:10px;bottom:10px;width:4px; border-radius:999px;background:var(--net-ctl-edge)} .netart__costItem--net::before{background:var(--accent-primary)} .netart__costItem--tv::before{background:var(--net-ctl-edge)} .netart__costItem--dev::before{background:var(--text-secondary);opacity:.45} .netart__costT{display:block;font-size:14.5px;font-weight:700;color:var(--text-primary)} .netart__costD{display:block;margin-top:3px;font-size:12.5px;line-height:1.55;color:var(--text-secondary)} .netart__bills{display:grid;gap:10px;align-items:stretch} @media (min-width:720px){ .netart__bills{grid-template-columns:1fr auto 1fr;align-items:center} } .netart__bill{padding:12px 14px;border-radius:var(--net-btn-r);background:var(--bg-section); box-shadow:inset 0 0 0 1px var(--net-line);min-width:0} .netart__bill--net{box-shadow:inset 0 0 0 1px var(--accent-primary)} .netart__billT{display:block;font-size:14.5px;font-weight:700;color:var(--text-primary)} .netart__billD{display:block;margin-top:3px;font-size:12.5px;line-height:1.55;color:var(--text-secondary)} .netart__billSep{display:block;text-align:center;font-size:15px;font-weight:800;color:var(--text-secondary)} .netart__bars{list-style:none;margin:0;padding:0;display:grid;gap:12px} .netart__bar{display:grid;grid-template-columns:64px minmax(0,1fr);gap:4px 12px;align-items:center} .netart__barL{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text-primary)} .netart__barT{height:12px;border-radius:999px;background:var(--ivory-card); border:1px solid var(--border-default);overflow:hidden} .netart__barF{display:block;height:100%;background:var(--accent-primary);border-radius:999px} .netart__barU{grid-column:2;font-size:14px;line-height:1.5;color:var(--text-secondary)} .netart__note{margin:12px 0 0;font-size:14px;line-height:1.55;color:var(--text-secondary)} .netart__steps{list-style:none;margin:0;padding:0;display:grid;gap:10px} .netart__step{display:grid;grid-template-columns:36px minmax(0,1fr);gap:2px 12px;align-items:start; padding:12px 14px;border:1px solid var(--border-default);border-radius:var(--net-btn-r);background:var(--ivory-card)} .netart__stepN{grid-row:1 / span 2;width:36px;height:36px;border-radius:999px; display:flex;align-items:center;justify-content:center; background:var(--net-pick);box-shadow:inset 0 0 0 1px var(--accent-primary); color:var(--accent-primary);font-weight:800;font-size:16px} .netart__stepT{font-size:15px;font-weight:700;color:var(--text-primary)} .netart__stepD{grid-column:2;font-size:14px;line-height:1.55;color:var(--text-secondary)} .netart__dev{grid-row:1 / span 2;width:40px;height:30px;color:var(--accent-primary);flex:0 0 auto} @media (min-width:720px){ .netart__steps{grid-template-columns:repeat(2,1fr)} } /* 배치 ── 넓은 화면에서 어느 칸에 놓을지 분명히 정한다 (자동 배치에 맡기지 않는다) 견적 상자는 **고르는 영역(.net__work) 안에서만** 따라다닌다. 예전에는 .net 격자에 직접 놓여 있어서 sticky 가 페이지 끝까지 따라왔고, 아래 요금표를 덮은 채 금액 누르는 것을 가로챘다. 이제 칸 밖으로 나가지 못한다. */ .net__work{display:grid;gap:18px;min-width:0} @media (min-width:1100px){ .net{grid-template-columns:minmax(0,1fr);align-items:start; /* 화면 오른쪽에 붙어 있는 상담 메뉴가 견적 금액을 가리지 않게 그만큼 자리를 비운다. (메뉴는 뷰포트 오른쪽에서 약 99px 를 차지한다. 화면 폭을 직접 계산에 쓰면 세로 스크롤막대 때문에 가로로 밀릴 수 있어, 폭 구간으로 나눠 정한다) */ padding-right:107px} .net > *{grid-column:1} /* 목록 왼쪽 · 견적 오른쪽. 요금표·배너·FAQ 는 이 칸 밖이라 겹칠 일이 없다 */ .net__work{grid-template-columns:minmax(0,1fr) 340px;align-items:start} .net__listWrap,.net__dev{grid-column:1} .net__summary,.netart__speed{grid-column:2} /* 요금 구성은 속도 안내(오른쪽 칸) 왼쪽에 나란히 — 빈자리를 남기지 않는다 */ .netart__cost{grid-column:1;margin-top:0} .netart__bundle{grid-column:1 / -1} /* 견적 칸이 화면보다 높으면(904px > 720·900px) 위에 붙은 채 아래 「상담 신청」 단추가 페이지 끝까지 가야 보였다. 화면 높이 안에 두고 칸 안에서 스크롤 · 상담 단추는 칸 아래에 늘 보이게 */ .net__summary{position:sticky;top:96px;max-height:calc(100vh - 96px - 16px);overflow-y:auto;overscroll-behavior:contain} /* 단추 아래·위로 스크롤되는 글이 비치지 않게 칸 바탕색 띠를 두른다 */ .net__summary .net__cta{position:sticky;bottom:0;z-index:1;box-shadow:0 0 0 12px var(--net-soft),0 26px 0 12px var(--net-soft)} } /* 화면이 충분히 넓으면 본문 좌우 여백만으로 상담 메뉴를 피할 수 있다 (1240 + 107 × 2) */ @media (min-width:1454px){ .net{padding-right:16px} } /* 좁은 화면 읽는 차례 : 목록 → 장비 → 견적 → 속도 안내 → 비교 → 설치 (장비를 고친 뒤 바로 아래에서 금액을 보도록 견적을 장비 다음에 둔다) */ @media (max-width:1099px){ .net__bans{order:0} .net__work{order:1} .net__rate{order:5} .net__faq{order:6} .net__cmp{order:7} .netart__inst{order:8} .net__listWrap{order:1} .net__dev{order:2} .net__summary{order:3} .netart__cost{order:4} .netart__speed{order:5} } @media (prefers-reduced-motion:reduce){ .net__chip,.net__item{transition:none} } /* ── 관리자 : 상품 사진 편집 ── */ .niphoto{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap} .niphoto__img{width:120px;height:90px;object-fit:cover;border-radius:10px;background:var(--bg-section);flex:none} .niphoto__img.is-off{visibility:hidden} .niphoto__body{flex:1 1 260px;min-width:0} .niphotos{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px;margin:8px 0 0;padding:0} .niphotos__b{display:block;width:100%;padding:0;border:1px solid var(--border-default);border-radius:10px; background:var(--bg-elevated);cursor:pointer;overflow:hidden;text-align:left} .niphotos__b:hover{border-color:var(--border-strong)} .niphotos__b:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px} .niphotos__b img{display:block;width:100%;height:92px;object-fit:cover;background:var(--bg-section)} .niphotos__b span{display:block;padding:6px 8px;font-size:12px;line-height:1.4;color:var(--text-primary); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .niphotos__b small{display:block;font-size:11px;color:var(--text-secondary)} /* 관리자 : 매장 취급 승인 — 눈에 띄게 */ .nichk--big{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:10px; background:var(--accent-soft);font-size:14px} .nichk--big small{color:var(--text-secondary);font-weight:500} /* ══════════════════════════════════════════════════════════════ 인터넷 선택 화면 — 통신사 로고 카드 · 단계 · 상품 카드 · 견적 · 바탕은 흰색. 고른 항목과 견적에만 아주 옅은 차가운 회색·파랑을 쓴다. · 강조색은 상담 버튼과 '고름' 표시에만 모은다. 전역을 파랑으로 덮지 않는다. · 큰 그림자·광택·금색 효과는 쓰지 않는다. ══════════════════════════════════════════════════════════════ */ /* 옅은 바탕·경계는 기존 토큰을 그대로 쓴다 (밝고 어두운 화면 모두 이미 맞춰져 있다) */ .net{--net-soft:var(--bg-section);--net-line:var(--border-default)} /* ── 단계 구역 ── */ .net__step{display:grid;gap:10px} .net__stepT{display:flex;align-items:center;gap:8px;margin:0;font-size:15px;font-weight:700;color:var(--text-primary);flex-wrap:wrap} .net__stepT small{flex-basis:100%;margin-top:2px;font-size:12.5px;font-weight:500;line-height:1.55;color:var(--text-secondary)} .net__stepN{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px; border-radius:999px;background:var(--net-soft);box-shadow:inset 0 0 0 1px var(--net-line); font-size:12.5px;font-weight:800;color:var(--text-secondary)} .net__row--sub{margin-top:2px} /* ── 통신사 로고 카드 ── */ .net__cars{list-style:none;margin:0;padding:0;display:grid;gap:10px; grid-template-columns:repeat(3,minmax(0,1fr))} .net__cars>li{min-width:0;display:flex} .net__car{position:relative;width:100%;min-width:0;height:100%;display:grid;gap:6px;justify-items:center;align-content:center; min-height:112px;padding:16px 12px;border:1px solid var(--net-line);border-radius:var(--net-card-r); background:var(--bg-page);color:inherit;font:inherit;cursor:pointer;transition:border-color .12s,background .12s} .net__car:hover{border-color:var(--net-ctl-edge)} .net__car:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px} .net__car.is-on{background:var(--net-soft);border-color:var(--accent-primary); box-shadow:inset 0 0 0 1px var(--accent-primary)} /* 로고는 원본 색 그대로 — 파랗게 물들이지 않는다 */ .net__carLogo{display:flex;align-items:center;justify-content:center;height:40px} /* 보이는 높이를 통신사별로 눈에 맞춘다 — 원본 비율과 색은 그대로 둔다. 높이를 「정해진 값」으로 준다 : max-height 로만 두면 파일에 제 크기가 안 적힌 로고가 0 으로 그려진다. LG 로고는 141×40 그림 파일이 원본이라, 원본보다 크게 늘리지 않도록 20px 를 넘기지 않는다. */ .net__carLogo img{display:block;height:26px;width:auto;max-width:100%;object-fit:contain} .net__car--kt .net__carLogo img{height:30px} .net__car--lgu .net__carLogo img{height:20px} .net__car--skb .net__carLogo img{height:24px} @media (max-width:560px){ .net__carLogo img{height:22px} .net__car--kt .net__carLogo img{height:25px} .net__car--lgu .net__carLogo img{height:17px} .net__car--skb .net__carLogo img{height:20px} } .net__carLogo.is-off{display:none} /* ── 통신사 브랜드 표시 중복 정리 ────────────────────────── 로고 그림에 이미 상호가 들어 있어서, 바로 옆에 같은 이름을 또 쓰면 눈으로도 두 번 보이고 화면 낭독기도 두 번 읽는다. · 로고 그림은 장식(alt 없음 · aria-hidden) — 이름은 **글자 쪽이 맡는다**. · 로고가 실제로 보이는 동안에만 그 글자를 **시각적으로만** 감춘다. · 관리자가 로고를 숨겼거나(.is-off) 그림을 못 불러오면 글자가 **다시 보인다**. :has() 를 못 읽는 브라우저에서는 글자가 그대로 보인다 — 겹쳐 보일 뿐 기능은 멀쩡하다. */ .net__srOnly, .net__car:has(.net__carLogo:not(.is-off)) .net__carName, .net__ban:has(.net__banLogo:not(.is-off)) .net__banWho.is-dup{ position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} /* 배너 : 제목이 통신사 이름으로 시작하지 않으면 소속을 눈에도 보여 준다 */ .net__banWho{display:block;font-size:12px;font-weight:700;letter-spacing:.02em; color:var(--text-secondary);margin-bottom:2px} /* 상품 카드 : 한 통신사만 걸러 볼 때는 로고 없이 이름만 작게 */ .net__head2--one .net__carrier{font-size:12px;font-weight:700;color:var(--text-secondary)} .net__carName{font-size:15px;font-weight:700;color:var(--text-primary);text-align:center;line-height:1.3; max-width:100%;overflow-wrap:anywhere;word-break:keep-all} /* 로고를 못 불러오면 이름을 키워 통신사를 분명히 남긴다 */ .net__carLogo.is-off + .net__carName{font-size:19px} .net__carCnt{font-size:12.5px;color:var(--text-secondary)} .net__carTick{position:absolute;top:10px;right:10px;width:20px;height:20px;border-radius:999px; background:var(--accent-primary);opacity:0;transform:scale(.8);transition:opacity .12s,transform .12s} .net__carTick::after{content:"";position:absolute;left:6px;top:4px;width:5px;height:10px; border-right:2px solid var(--bg-page);border-bottom:2px solid var(--bg-page);transform:rotate(45deg)} .net__car.is-on .net__carTick{opacity:1;transform:scale(1)} .net__carAll{display:flex;justify-content:flex-start} @media (max-width:560px){ .net__cars{gap:8px} .net__car{min-height:100px;padding:12px 8px} .net__carLogo{height:32px} .net__carName{font-size:13px} .net__carCnt{font-size:11.5px} } /* ── 상품 카드 : 화면 폭에 맞춘 묶음 ── */ @media (min-width:720px){ .net__list{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))} .net__pick{grid-template-columns:minmax(0,1fr) auto;align-content:start;gap:4px 12px;min-height:150px} /* 넓은 화면에서는 로고와 통신사명을 한 줄로 나란히 두고, 통신사 색은 밑줄로만 준다 */ .net__head2{grid-row:auto;grid-column:1 / -1;flex-direction:row;align-items:center;gap:9px; border-left:0;padding:0 0 3px;width:max-content;max-width:100%; border-bottom:2px solid var(--border-strong)} .net__head2 .net__carrier{border-bottom:0;padding:0} .net__carrier{grid-row:auto;grid-column:1 / -1;align-self:start;border-left:0;padding:0 0 2px; border-bottom:2px solid var(--border-strong);display:inline-flex;width:max-content} .net__head2 .net__carrier--kt,.net__head2 .net__carrier--lgu,.net__head2 .net__carrier--skb{border-bottom:0} .net__carrier--kt{border-bottom-color:#E6002D} .net__carrier--lgu{border-bottom-color:#E6007E} .net__carrier--skb{border-bottom-color:#EA1917} .net__name{grid-column:1 / -1} .net__speed{grid-column:1 / -1} .net__price{grid-column:1 / -1;grid-row:auto;text-align:left;margin-top:auto;padding-top:6px} .net__on{grid-column:1 / -1} } /* ── 견적 상자 ── */ .net__summary{border:1px solid var(--net-line);border-radius:var(--net-card-r); background:var(--net-soft);padding:clamp(14px,2.2vw,20px)} .net__sumT{margin:0 0 2px;font-size:18px;font-weight:800;color:var(--text-primary);line-height:1.35} .net__sumCond{margin:0 0 12px;font-size:13px;color:var(--text-secondary)} .net__quote,.net__quote--sum,.net__more{background:var(--bg-page)} .net__quote--sum{padding:12px;border-radius:var(--net-btn-r);box-shadow:inset 0 0 0 1px var(--net-line)} .net__more{box-shadow:inset 0 0 0 1px var(--net-line)} /* 고르기 전 — 이 자리가 무엇을 하는 곳인지 알려 준다. 가짜 금액으로 채우지 않는다. */ .net__sumEmpty{margin:0;padding:0;color:var(--text-secondary);font-size:14px;line-height:1.7} .net__guide{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px;counter-reset:g} .net__guide li{counter-increment:g;position:relative;padding-left:28px;font-size:13.5px; color:var(--text-secondary);line-height:1.6} .net__guide li::before{content:counter(g);position:absolute;left:0;top:0;width:20px;height:20px; display:flex;align-items:center;justify-content:center;border-radius:999px;background:var(--bg-page); box-shadow:inset 0 0 0 1px var(--net-line);font-size:11.5px;font-weight:800;color:var(--text-secondary)} /* ── 제목 옆 작은 그림 ── */ .net__head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 20px;align-items:center} .net__head .ig-eyebrow,.net__head .ig-h2,.net__lead{grid-column:1} .netart--home{grid-column:2;grid-row:1 / span 3;width:clamp(96px,14vw,168px);height:auto; color:var(--text-secondary);opacity:.55} @media (max-width:640px){ .net__head{grid-template-columns:minmax(0,1fr) auto} .netart--home{width:84px;align-self:start;margin-top:2px} } /* 휴대폰에서는 장식 그림이 제목 폭을 깎아 제목이 3~4줄이 된다 — 글이 먼저다 */ @media (max-width:430px){ .net__head{grid-template-columns:minmax(0,1fr)} .netart--home{display:none} } /* 관리자 : 공용 로고 미리보기 칸 */ .niphoto__img--logo{object-fit:contain;background:var(--bg-page);padding:8px} .niphoto__none{width:120px;height:90px;display:flex;align-items:center;justify-content:center; border-radius:10px;background:var(--bg-section);color:var(--text-secondary);font-size:12.5px;flex:none} /* ── 할인 조건 질문 · 입력 조건 기준 예상 할인 ── 기본 요금과 나눠 보인다 */ .net__asks{display:grid;gap:10px;margin-top:10px;padding:12px 14px;border:1px dashed var(--net-ctl-edge);border-radius:var(--net-btn-r);background:var(--ivory-card)} .net__ask{display:grid;gap:4px;font-size:14px;font-weight:700;color:var(--text-primary);min-width:0;border:0;padding:0;margin:0} .net__ask small{font-weight:500;color:var(--text-secondary)} .net__ask select{min-height:44px;padding:0 10px;border:1px solid var(--net-ctl-edge);border-radius:var(--net-btn-r);background:var(--ivory-card);color:var(--text-primary);font:inherit;font-size:15px;max-width:100%} .net__ask select:focus-visible,.net__ask input:focus-visible{outline:3px solid var(--accent-primary);outline-offset:2px} .net__ask legend{padding:0;margin-bottom:4px} .net__ask label{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-right:14px;font-weight:600} .net__ask--chk{display:flex;align-items:center;gap:8px;min-height:44px;font-weight:600} .net__ask input[type=radio],.net__ask input[type=checkbox]{width:20px;height:20px;margin:0;accent-color:var(--accent-primary)} .net__est{margin-top:12px;padding:14px;border:1px solid var(--border-default);border-radius:var(--net-btn-r);background:var(--net-pick);display:grid;gap:8px} .net__estT{margin:0;font-size:15px;font-weight:800;color:var(--text-primary)} .net__estT small{display:block;margin-top:2px;font-size:12.5px;font-weight:500;color:var(--text-secondary)} .net__estList,.net__estPend,.net__estSkip{margin:0;padding-left:18px;display:grid;gap:4px;font-size:14px;line-height:1.55;color:var(--text-primary)} .net__estList small,.net__estAfter small{color:var(--text-secondary)} .net__estSkip{color:var(--text-secondary)} .net__estAfter{margin:0;font-size:15px;color:var(--text-primary)} .net__estNote{margin:0;font-size:13px;line-height:1.55;color:var(--text-secondary)} /* ── 마이셋(고객 화면 단일 브랜드) ───────────────────────────── 로고 비율 그대로, 그림자·광택·움직임 없음. 크기는 functions/_brand.js 의 크기표(BRAND_HEIGHTS) 한 곳에서 정하고 그림 요소의 CSS 변수(--mh PC · --mhm 900px 미만)로 받는다 — 여기에는 고정 높이를 두지 않는다. */ .myset-sr,.myset-line .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* 300px 아래(작은 화면을 크게 확대한 경우 등)는 헤더의 「셋팅가」 버튼을 뺀다 — 같은 버튼이 화면 아래 고정 띠에 그대로 있다 */ @media (max-width:299px){ .hd__act .ig-btn{display:none} } /* 로고 그림을 못 불러온 경우 : 그림 칸을 접고 이름 글자로 대신한다 */ .myset-alt{display:none} .is-fail{display:none!important} .is-fail + .myset-alt{display:inline-block;font-weight:800;font-size:15px;line-height:1.2;letter-spacing:-.01em;color:inherit} .myset-intro .is-fail + .myset-alt{font-size:24px;color:var(--text-primary)} /* 푸터 : 브랜드 관계와 운영 주체 */ .ft__myset{display:flex;align-items:center;gap:12px;margin:14px 0 0;font-size:13px;line-height:1.6;color:var(--d-footer-ink-2,var(--text-secondary))} .ft__myset b{color:var(--d-footer-ink,var(--text-primary))} .ft__myset small{font-size:12px;color:var(--d-footer-ink-2,var(--text-secondary))} .ft__mysetImg,.ft__mysetImg img{display:block;line-height:0} /* 메인 소개 띠 — 큰 배너가 아니라 얇은 한 줄 카드 */ .myset-intro{padding-block:clamp(16px,3vw,28px)} .myset-intro__in{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;padding:18px 22px; border:1px solid var(--border-default);border-radius:16px;background:var(--bg-elevated)} .myset-intro__logo,.myset-intro__logo img{display:block;line-height:0} .myset-intro__txt{flex:1 1 240px;min-width:0} .myset-intro__t{margin:0;font-size:17px;font-weight:800;color:var(--text-primary);text-wrap:balance} .myset-intro__d{margin:4px 0 0;font-size:14.5px;line-height:1.6;color:var(--text-secondary)} /* 인터넷·휴대폰 상세 : 제목 위 한 줄 */ .myset-line{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:13.5px;font-weight:600;color:var(--text-secondary)} .myset-line__img,.myset-line__img img{display:block;line-height:0} .myset-line--phone{margin:0 0 12px} /* 상담창 제목 위 작은 표시 — 닫기 단추(오른쪽 위)와 겹치지 않게 왼쪽·오른쪽 여백 */ .stpf__myset{display:flex;align-items:center;gap:6px;margin:0 48px 6px 0;font-size:12.5px;font-weight:700;color:var(--text-secondary)} .stpf__mysetImg,.stpf__mysetImg img{display:block;line-height:0} /* 상담 양식 : 잘못 입력한 칸을 테두리로도 알린다(색만이 아니라 두께) */ .stpf input[aria-invalid="true"]{border-color:var(--d-err);box-shadow:0 0 0 2px color-mix(in srgb,var(--d-err) 35%,transparent)} .stpf input[type="checkbox"][aria-invalid="true"]{outline:2px solid var(--d-err);outline-offset:2px} /* 관리자 인터넷 미리보기 : 안내 첫 줄(「미리보기입니다」)이 고정 헤더 뒤로 숨지 않게 헤더 높이만큼 내린다 (아래쪽 .netprev{margin:…} 보다 뒤에 두어야 이긴다) */ .netprev{margin-top:calc(72px + 12px)} @media (max-width:899px){ .netprev{margin-top:calc(60px + 10px)} } /* 인터넷 견적 : 셋톱 미선택일 때 바로 고르는 단추 */ .net__pendAct{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:10px 0 0} .net__pendAct small{font-size:12.5px;color:var(--text-secondary)} /* 바닥글 : 윗블록 아래선(ft__top) 바로 밑에 사업자 정보 윗선(밝은 바탕용 색)이 한 번 더 그어져 두 줄로 보였다 — 윗블록 선 하나만 */ .ft__top + .ft__biz{border-top:0;padding-top:0} /* 휴대폰 폭 : 약정 세 단추가 한 줄에 들도록 안쪽 여백만 줄인다 · 아주 좁으면 「약정」 을 위 줄로 */ @media (max-width:420px){.net__row--sub .net__chip{padding:0 12px}} @media (max-width:379px){.net__row--sub .net__label{flex-basis:100%}} /* TV 요금제를 고르기 전 견적 상자 : 확인된 인터넷 금액 */ .net__tvBase{margin:10px 0 0;font-size:15px;color:var(--text-primary)} .net__tvBase b{font-size:20px;font-weight:800} .net__tvBase small{display:block;margin-top:2px;font-size:13px;color:var(--text-secondary)} /* ── 마이셋 단일 브랜드 ───────────────────────────────────────── 헤더 주 로고 : 원래 로고 칸(.brand, 28px · 900px 이상 34px) 높이 안에서 비율 그대로(늘이거나 찌그러뜨리지 않는다). width·height 속성으로 자리를 미리 잡아 불러오는 동안 밀리지 않는다. */ .brand--myset{display:inline-flex;align-items:center;width:auto;color:var(--d-header-ink,var(--text-primary))} .brand--myset .brand__myset,.brand--myset .brand__myset img{display:block;height:100%;width:auto;max-width:none} /* 좁은 화면 아이콘형은 정사각 — 같은 높이에서 조금 더 키워 알아보게 */ .brand--myset .is-fail + .myset-alt{font-size:18px;line-height:28px;color:var(--d-header-ink,var(--text-primary))} /* 바닥글 로고 — 글자 로고 자리에 그림 로고. 사업자 정보 줄은 그대로 */ .ft__brand--myset{line-height:0} .ft__brand--myset .is-fail + .myset-alt{font-size:17px;color:var(--d-footer-ink,var(--text-primary))} .ft__myset{display:block} .ft__mysetT{display:block;color:var(--d-footer-ink,var(--text-primary));font-weight:600} /* 상담창 제목 위 — 로고만 */ .stpf__myset .is-fail + .myset-alt{font-size:13px;color:var(--text-secondary)} /* 챗봇 머리 — 원래 심벌(마스크) 대신 마이셋 아이콘 그림 */ .cb__mark--myset{background:none;-webkit-mask:none;mask:none;display:grid;place-items:center;border-radius:10px;overflow:hidden} .cb__mark--myset .cb__markImg,.cb__mark--myset img{display:block;width:40px;height:auto} .cb__mark--myset .is-fail + .myset-alt{font-size:12px;color:inherit} /* PC 좁은 폭(1024~1387px) : 카드 옆에 화살표 둘 자리가 없고, 카드가 첫 화면보다 커서(1280×720 : 카드 700px) 아래 조작 줄이 화면 밖으로 나갔다 → 조작 줄을 **카드 위 한 줄**로 : [정지·점] …… [◀] [▶] 카드 내용은 자르거나 줄이지 않는다. 1388px 이상(카드 옆 화살표)·1023px 이하(카드 아래)는 그대로. */ @media (min-width:1024px) and (max-width:1387px){ .hxs--cards{display:flex;flex-direction:column} .hxs--cards .hxs__view{order:1} .hxs--cards .hxs__row{ order:0;box-sizing:border-box;width:100%;max-width:var(--wrap);margin-inline:auto; padding:clamp(10px,1.2vw,16px) var(--gutter) 0;flex-wrap:nowrap;column-gap:10px;justify-content:flex-end; } .hxs--cards .hxs__dots{order:0;flex:1 1 auto;justify-content:flex-start;padding-bottom:0} .hxs--cards .hxs__nav{width:48px;height:48px;min-width:48px;min-height:48px} .hxs--cards .hxs__navI{width:24px;height:24px} .hxs--cards .hxs__nav--prev{order:1} .hxs--cards .hxs__nav--next{order:2} } /* ── 마이셋 크기 한 곳 : 모든 로고 그림은 --mhm(900px 미만) · --mh(PC) 높이, 너비는 비율대로 ── */ .myset-img{display:block;line-height:0;flex:none} .myset-img img{display:block;height:var(--mhm,28px);width:auto;max-width:none} @media (min-width:900px){ .myset-img img{height:var(--mh,28px)} } /* 헤더 : 로고 칸 높이도 같은 변수 — 머리띠 높이(60 · 900px 이상 76)는 그대로라 앵커 여백·본문 시작점이 바뀌지 않는다 */ .brand--myset{display:inline-flex;align-items:center;width:auto;height:var(--mhm,36px);color:var(--d-header-ink,var(--text-primary))} @media (min-width:900px){ .brand--myset{height:var(--mh,48px)} } .brand--myset .brand__myset,.brand--myset .brand__myset img{height:100%} @media (max-width:299px){ .brand--myset{height:32px} } .brand--myset .is-fail + .myset-alt{font-size:clamp(18px,4.6vw,24px);line-height:1;color:var(--d-header-ink,var(--text-primary))} /* 헤더 메뉴와 로고 사이 : PC 메뉴가 로고에 붙지 않게 · 좁은 PC(900~1099px)에서는 메뉴 간격만 조금 좁힌다(글자 크기는 그대로) */ @media (min-width:900px){ .hd .brand--myset + .gnb, .hd .brand--myset ~ .gnb{margin-left:clamp(28px,3vw,44px)} } /* 바닥글 : 로고 · 설명 · 통신사 안내 · 링크 · 사업자 정보의 간격 정돈 */ .ft__brand--myset{margin:0 0 clamp(14px,1.6vw,20px)} .ft__brand--myset + .ft__desc{margin-top:0} .ft__myset{display:block;margin:12px 0 0;font-size:13px;line-height:1.6;color:var(--d-footer-ink-2,var(--text-secondary))} .ft__brand--myset .is-fail + .myset-alt{font-size:26px;color:var(--d-footer-ink,var(--text-primary))} /* 메인 브랜드 영역 : 상단 메뉴 바로 아래 · 배너 슬라이더 바로 위 한 번 — 넓은 로고 · 절제된 바탕 · 위아래 얇은 선 */ /* 바깥은 배너 구역과 같은 바탕으로 이어지고, 안쪽만 밝은 면 + 위아래 얇은 선. 본문 맨 앞이므로 고정 머리띠 높이(--myset-hd)만큼 위 여백을 이 영역이 갖는다(고정·sticky 아님 — 문서 흐름 그대로). 바로 뒤 배너는 위 여백 0 : 머리띠 → 영역 간격 ≈ 영역 → 배너 카드 간격(카드 구역 자체 여백) */ .myset-band{--myset-hd:60px;padding-block:calc(var(--myset-hd) + clamp(16px,2.8vw,40px)) clamp(14px,2.2vw,26px);background:var(--bg-section)} @media (min-width:900px){ .myset-band{--myset-hd:72px} } html[data-d-header="compact"] .myset-band{--myset-hd:52px} .myset-band:has(+ .hxs--cards){padding-bottom:0} .myset-band + .hx{padding-top:0} /* 배너(카드형·일반형) 위 여백은 영역이 이미 가졌다 */ .myset-band__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px 36px; padding:clamp(22px,3.4vw,40px) clamp(16px,3vw,32px);border-block:1px solid transparent; background:transparent} /* 로고 뒤 흰 사각형·경계선 없이 바깥 바탕(--bg-section)과 이어지게. 선은 투명으로만 바꿔 영역 높이는 그대로 둔다. 구역 디자인 「테두리형」의 위 선과 「카드형」의 안쪽 상자도 이 영역에서만 지운다(높이 유지 — 선 두께·여백은 그대로) */ html[data-d-section="outline"] .ig-sec.myset-band{border-top-color:transparent} html[data-d-section="card"] .ig-sec.myset-band>.wrap{background:transparent;border-color:transparent;box-shadow:none} .myset-band__logo img{max-width:100%} /* 좁은 화면 : 높이 대신 칸 폭에 맞춰 비율대로 줄인다(모바일 높이 × 영문 워드마크 비율을 넘지 않게) */ @media (max-width:899px){ .myset-band__logo{max-width:100%} .myset-band__logo img{width:min(100%,calc(var(--mhm,52px) * 2.95));height:auto} } .myset-band--text .myset-band__in{justify-content:flex-start} .myset-band__txt{flex:1 1 260px;min-width:0} .myset-band__t{margin:0;font-size:clamp(17px,1.6vw,20px);font-weight:800;color:var(--text-primary);text-wrap:balance} .myset-band__d{margin:6px 0 0;font-size:14.5px;line-height:1.6;color:var(--text-secondary)} .myset-band .is-fail + .myset-alt{font-size:clamp(28px,5vw,44px);color:var(--text-primary)} /* 카테고리 줄 : 「마이셋 로고 │ 카테고리 이름」 — 구역 큰 제목 위 한 번 */ .myset-cat{display:flex;align-items:center;gap:12px;margin:0 0 clamp(10px,1.2vw,14px);font-size:clamp(13.5px,1.1vw,15px);font-weight:700;letter-spacing:-.01em;color:var(--text-secondary)} .myset-cat__rule{width:1px;height:1.15em;background:var(--border-strong,var(--border-default))} .myset-cat__t{color:var(--text-secondary)} .ig-head .myset-cat{justify-content:inherit} .myset-cat .is-fail + .myset-alt{font-size:15px;color:var(--text-primary)} /* 헤더 로고를 키운 뒤 900~959px 에서는 PC 메뉴 한 칸이 두 줄로 꺾이고 단추와의 틈이 20px 로 좁았다 — 글자를 줄이지 않고 이 폭에서는 메뉴 단추(☰)로 전환한다 */ @media (min-width:900px) and (max-width:959px){ .gnb{display:none} .hd__menu{display:grid} } /* 오른쪽 상담 메뉴 머리 : [마이셋 로고][상담 메뉴] …… [접기][닫기] — 로고는 한 번, 버튼·전화번호 옆에는 두지 않는다 */ .fab--dock .fab__hd{gap:8px} .fab__brand{display:flex;align-items:center;flex:none;line-height:0} .fab__brand + .fab__ttl{flex:1;min-width:0;white-space:nowrap} .fab__brand .is-fail + .myset-alt{font-size:14px;line-height:1;color:var(--text-primary)} /* 접힌 상태(아이콘만 60px)에서는 제목처럼 로고도 숨긴다 — 접기/펼치기 단추만 남는다 */ .fab--min .fab__brand{display:none} @media (max-width:899px){ .fab--min .fab__brand{display:flex} }