/* 애플 스타일 스킨 (v15) — 구조·동작은 그대로 두고 겉모양과 움직임만 덮어씁니다.
   되돌리려면 index.html에서 apple.css 링크만 지우세요.
   원칙: 큰 제목과 넉넉한 여백 · 연한 회색 바탕 위의 흰 카드 · 유리처럼 비치는 머리말과 견적 패널 · 파란색 하나 ·
   iOS 세그먼트와 스텝퍼 · 알약 버튼 · 스프링 곡선의 움직임. 움직임은 transform·opacity만 써서 레이아웃을 흔들지 않고,
   '동작 줄이기'를 켠 기기에서는 모두 꺼집니다. */
:root{
  --bg:#f5f5f7;--surface:#fff;--ink:#1d1d1f;--text2:#6e6e73;--text3:#86868b;--line:rgba(0,0,0,.09);--fill:rgba(118,118,128,.12);
  --blue:#0071e3;--blue-h:#0077ed;--blue-soft:rgba(0,113,227,.1);--red:#ff3b30;
  --muted:#6e6e73;--soft:#f5f5f7;--paper:#fff;
  --r-xl:28px;--r-l:20px;--r-m:14px;--r-s:10px;
  --shadow:0 1px 2px rgba(0,0,0,.04),0 12px 40px rgba(0,0,0,.07);--shadow-up:0 2px 6px rgba(0,0,0,.06),0 18px 44px rgba(0,0,0,.12);
  --ease:cubic-bezier(.16,1,.3,1);--spring:cubic-bezier(.34,1.56,.64,1);--out:cubic-bezier(.22,1,.36,1);
}
html{background:var(--bg);scroll-behavior:smooth}
body.stepped-estimate{background:var(--bg);color:var(--ink);letter-spacing:-.022em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.stepped-estimate ::selection{background:var(--blue);color:#fff}
body.stepped-estimate :focus-visible{outline:none;box-shadow:0 0 0 4px rgba(0,113,227,.35);border-radius:inherit}

/* ───────── 머리말: 유리 ───────── */
.site-header{position:sticky;top:0;z-index:60;max-width:none;margin:0;height:54px;padding:0 max(22px,calc((100vw - 1200px)/2));display:flex;align-items:center;justify-content:space-between;background:rgba(245,245,247,.72);-webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px);border-bottom:1px solid transparent;transition:border-color .4s var(--ease),background .4s var(--ease)}
.site-header.scrolled{border-bottom-color:var(--line);background:rgba(245,245,247,.86)}
.site-header .brand{font-size:17px;font-weight:600;letter-spacing:-.03em}
.site-header .brand span{font-size:12px;font-weight:400;color:var(--text3);margin-left:10px;letter-spacing:0}
.site-header nav{gap:26px;font-size:13px}
.site-header nav a,.site-header nav button{color:var(--text2);transition:color .25s}
.site-header nav a:hover,.site-header nav button:hover{color:var(--ink)}

/* ───────── 첫 화면 ───────── */
.stepped-estimate .intro{display:block;text-align:center;max-width:760px;margin:0 auto;padding:56px 22px 26px}
.eyebrow{font-size:17px;font-weight:600;letter-spacing:-.02em;color:var(--blue);text-transform:none}
.stepped-estimate .intro h1{font-size:clamp(32px,5.4vw,52px);line-height:1.15;letter-spacing:-.045em;font-weight:600;margin:0;color:var(--ink)}
.intro h1 .blue{color:var(--blue)}
.stepped-estimate .intro>p{font-size:clamp(16px,1.6vw,19px);line-height:1.5;color:var(--text2);margin:14px auto 0;max-width:34em;border:0;padding:0}
.workspace-header{max-width:1200px;margin:6px auto 0;padding:0 22px;border:0;display:flex;justify-content:center;align-items:center;gap:22px;position:relative}
.mode-nav{display:inline-flex;gap:0;background:var(--fill);padding:2px;border-radius:var(--r-s);border:0}
.mode-nav button{padding:8px 24px;border-radius:8px;font-size:14px;font-weight:500;color:var(--ink);background:transparent;transition:background .3s var(--ease),box-shadow .3s var(--ease),transform .2s}
.mode-nav button[aria-pressed=true]{background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04);font-weight:600}
.mode-nav button:active{transform:scale(.97)}
.workspace-header .text-button{position:absolute;right:22px;font-size:13px;color:var(--blue);transition:opacity .2s}
.workspace-header .text-button:hover{text-decoration:none;opacity:.7}

/* ───────── 작업대 ───────── */
.estimate-workspace{max-width:1200px;margin:34px auto 0;padding:0 22px;background:transparent;border:0;border-radius:0}
.flow-progress{padding:0;margin:0 0 18px}
.flow-progress ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;border:0;list-style:none;padding:0;margin:0}
.flow-progress li{border:0}
.flow-progress button{position:relative;display:flex;align-items:baseline;gap:10px;width:100%;min-height:0;padding:0 0 14px;border:0;border-radius:0;background:transparent;text-align:left;font-size:15px;font-weight:600;letter-spacing:-.02em;color:var(--text3);text-transform:none;transition:color .35s var(--ease)}
.flow-progress button:before,.flow-progress button:after{content:'';position:absolute;left:0;bottom:0;height:4px;border-radius:2px}
.flow-progress button:after{right:0;background:rgba(0,0,0,.08)}
.flow-progress button:before{width:0;background:var(--blue);z-index:1;transform-origin:left}
.flow-progress .current button:before,.flow-progress .complete button:before{width:100%}
.flow-progress .current button,.flow-progress .complete button{color:var(--ink)}
.flow-progress button:hover:not(:disabled):not([aria-current=step]){background:transparent;color:var(--ink)}
.flow-progress [aria-current=step]{background:transparent;color:var(--ink)}
.flow-progress .step-number{width:auto;height:auto;flex:none;border:0;background:none;border-radius:0;font-size:13px;color:var(--blue);font-weight:600;letter-spacing:0}
.flow-progress .step-number svg{width:14px;height:14px}

.stepped-estimate .studio{display:grid;grid-template-columns:minmax(0,1fr) 392px;column-gap:24px;row-gap:0;padding:0 0 88px;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;align-items:start}
.stepped-estimate .form{background:var(--surface);border-radius:var(--r-xl);padding:48px 48px 44px;box-shadow:var(--shadow);min-width:0}
.stepped-estimate .quote-column{padding:0;border:0;background:none;margin:0}
.stepped-estimate .quote-sticky{position:sticky;top:76px;max-height:calc(100dvh - 100px);overflow:auto;scrollbar-width:thin;background:rgba(255,255,255,.76);-webkit-backdrop-filter:saturate(180%) blur(28px);backdrop-filter:saturate(180%) blur(28px);border:1px solid rgba(255,255,255,.7);border-radius:var(--r-xl);padding:30px 28px;box-shadow:var(--shadow)}
.step-actions{margin-top:20px;padding:0;border:0;background:transparent}
.stepped-estimate .studio>.step-actions{grid-column:1}

.stage-heading{margin-bottom:34px}
.stage-heading h2{font-size:clamp(28px,3.4vw,40px);font-weight:600;letter-spacing:-.045em;line-height:1.15}
.stage-heading p{font-size:17px;line-height:1.5;color:var(--text2);margin-top:10px}
.selected-project{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.selected-project span{border:0!important;background:transparent!important;padding:0!important;border-radius:0!important;font-size:15px;font-weight:600;color:var(--blue);letter-spacing:-.01em}
.selected-project .text-button,.text-button{color:var(--blue);font-size:14px}
.text-button:hover{text-decoration:none;opacity:.7}
.question{margin:0 0 34px}
.question .label,.question>label.label{font-size:17px;font-weight:600;letter-spacing:-.025em;color:var(--ink);text-transform:none;margin-bottom:14px;display:block}
.hint{font-size:14px;line-height:1.55;color:var(--text3)}
.design-scope-note,.scope-note,.request-note,.included-note,.display-preview{border:0;border-left:0;border-radius:var(--r-m);background:var(--bg);padding:16px 18px;color:var(--text2)}
.included-note strong{font-weight:600;color:var(--ink)}
.input-notice{border-radius:var(--r-m)}

/* ───────── 제품 선택 타일 ───────── */
.stepped-estimate .product-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;border:0}
.stepped-estimate .product-list button{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:150px;padding:24px 22px 22px;border:0;border-radius:var(--r-l);background:var(--bg);text-align:left;font-size:17px;box-shadow:inset 0 0 0 1px transparent;transition:transform .5s var(--ease),box-shadow .5s var(--ease),background .4s var(--ease)}
.stepped-estimate .product-list .pname{font-size:23px;font-weight:600;letter-spacing:-.04em;line-height:1.2;word-break:keep-all}
.stepped-estimate .product-list button>span{font-size:15px;color:var(--text2);line-height:1.4;margin:0;font-weight:400}
.stepped-estimate .product-list em.from{margin-top:auto;padding-top:14px;font-style:normal;font-size:14px;font-weight:600;color:var(--blue);letter-spacing:-.015em}
.stepped-estimate .product-list button:hover:not([aria-pressed=true]){transform:translateY(-4px) scale(1.012);background:#fff;box-shadow:var(--shadow-up),inset 0 0 0 1px var(--line)}
.stepped-estimate .product-list button:active{transform:scale(.975);transition-duration:.15s}
.stepped-estimate .product-list button[aria-pressed=true]{background:#fff;color:var(--ink);box-shadow:0 0 0 2px var(--blue),var(--shadow-up);transform:translateY(-2px)}
.stepped-estimate .product-list button[aria-pressed=true]:after{content:none!important;display:none!important}
.stepped-estimate .product-list button[aria-pressed=true]>span{color:var(--text2)}
.stepped-estimate .product-list button[aria-pressed=true] em.from{color:var(--blue)}

/* ───────── 선택 요소 ───────── */
.service-options{gap:14px}
.service-options button{border:0;border-radius:var(--r-l);background:var(--bg);padding:24px 22px;box-shadow:inset 0 0 0 1px transparent;transition:transform .5s var(--ease),box-shadow .5s var(--ease),background .4s}
.service-options button:hover:not([aria-pressed=true]){transform:translateY(-3px);background:#fff;box-shadow:var(--shadow-up),inset 0 0 0 1px var(--line)}
.service-options button[aria-pressed=true]{background:#fff;border:0;box-shadow:0 0 0 2px var(--blue),var(--shadow-up);padding:24px 22px}
.service-options .service-tag{border:0;background:var(--blue-soft);color:var(--blue);border-radius:99px;padding:4px 11px;font-size:12px;font-weight:600;letter-spacing:0;margin-bottom:14px}
.service-options [aria-pressed=true] .service-tag{background:var(--blue);color:#fff;border:0}
.service-options strong{font-size:19px;font-weight:600;letter-spacing:-.035em}
.service-options button>span:not(.service-tag){color:var(--text2)}
.segments,.paper-presets{display:flex;width:100%;gap:0;background:var(--fill);padding:2px;border-radius:var(--r-s);border:0}
.segments button,.paper-presets button{flex:1;padding:10px 14px;border:0!important;border-radius:8px!important;font-size:14px;font-weight:500;color:var(--ink);background:transparent;box-shadow:none!important;transition:background .35s var(--ease),box-shadow .35s var(--ease),transform .2s}
.segments button[aria-pressed=true],.paper-presets button[aria-pressed=true]{background:#fff!important;color:var(--ink)!important;font-weight:600;box-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04)!important}
.segments button:active,.paper-presets button:active{transform:scale(.97)}
.segments.wide{width:100%}
.quantity-options{gap:10px}
.quantity-options button{border:0;border-radius:var(--r-m);background:var(--bg);padding:16px 10px;box-shadow:inset 0 0 0 1px transparent;transition:transform .45s var(--ease),box-shadow .45s var(--ease),background .3s}
.quantity-options button:hover:not([aria-pressed=true]){transform:translateY(-2px);background:#fff;box-shadow:var(--shadow),inset 0 0 0 1px var(--line)}
.quantity-options button[aria-pressed=true]{background:#fff;color:var(--blue);box-shadow:0 0 0 2px var(--blue)}
.quantity-options strong{font-weight:600}
.stepper{display:inline-flex;align-items:center;height:48px;border:0;border-radius:99px;background:var(--fill);padding:3px;overflow:visible}
.stepper button{width:42px;height:42px;border-radius:50%;font-size:20px;color:var(--ink);background:transparent;transition:background .25s,transform .25s var(--spring)}
.stepper button:not(:disabled):hover{background:#fff;color:var(--ink);box-shadow:0 2px 6px rgba(0,0,0,.12)}
.stepper button:not(:disabled):active{transform:scale(.88)}
.stepper button:disabled{opacity:.3}
.stepper input{width:64px;font-size:18px;font-weight:600;border:0;background:transparent;text-align:center}
.task-row{border-bottom:1px solid var(--line)}
.select-wrap select,input[type=text],input[type=email],textarea,select{border:1px solid rgba(0,0,0,.14);border-radius:12px;background:#fff;padding:13px 14px;font-size:16px;transition:box-shadow .25s,border-color .25s}
.select-wrap select:focus,input:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(0,113,227,.2);outline:none}

/* ───────── 버튼 ───────── */
.primary{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--blue);color:#fff;border-radius:99px!important;padding:14px 26px;min-height:48px;font-size:17px;font-weight:500;letter-spacing:-.02em;transition:background .25s,transform .35s var(--spring),box-shadow .35s}
.primary:hover{background:var(--blue-h);transform:scale(1.025);box-shadow:0 10px 26px rgba(0,113,227,.35)}
.primary:active{transform:scale(.97);transition-duration:.12s}
.primary span{display:inline-block;transition:transform .35s var(--spring)}
.primary:hover span{transform:translateX(4px)}
.primary:disabled{background:var(--fill);color:var(--text3);box-shadow:none;transform:none}
.step-actions .step-next{width:auto;min-width:220px;border-radius:99px}
.step-actions .step-back{border:0;background:transparent;color:var(--blue);border-radius:99px;font-size:16px}
.step-actions .step-back:hover{background:var(--blue-soft)}
.step-actions>p{color:var(--text3);font-size:14px}

/* ───────── 견적 패널 ───────── */
.stepped-estimate .quote-head{font-size:13px;color:var(--text3);margin-bottom:20px;letter-spacing:0}
.stepped-estimate .quote-head b{color:var(--ink);font-weight:600;font-size:15px;letter-spacing:-.02em}
.quote-head i{background:#0071e3;border-radius:50%;width:7px;height:7px}
.stepped-estimate .quote-title{font-size:26px;font-weight:600;letter-spacing:-.045em}
.quote-desc{color:var(--text2);font-size:14px}
.stepped-estimate .quote-costs{border-top:1px solid var(--line);margin:14px 0 20px}
.stepped-estimate .quote-costs>div{border-bottom:1px solid var(--line)}
.stepped-estimate .quote-costs dt{font-size:14px;color:var(--text2)}
.stepped-estimate .quote-costs dd{font-size:18px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.quote-costs .production dd{color:var(--ink)}
.quote-total-label{font-size:14px;color:var(--text2);letter-spacing:0;text-transform:none;margin-top:6px}
.stepped-estimate .quote-amount{font-size:clamp(42px,4.2vw,56px);font-weight:600;letter-spacing:-.06em;line-height:1.05;margin:6px 0 8px;font-variant-numeric:tabular-nums}
.quote-amount small{font-size:20px;font-weight:600;letter-spacing:-.02em;margin-left:3px}
.quote-tax{font-size:13px;color:var(--text3);line-height:1.5}
.stepped-estimate .quote-cta{width:100%;border-radius:99px;margin:20px 0 18px}
.stepped-estimate .quote-detail{border-top:1px solid var(--line);margin-top:0}
.stepped-estimate .quote-detail>summary{font-size:14px;color:var(--ink);padding:14px 0;transition:color .2s}
.stepped-estimate .quote-detail>summary:hover{color:var(--blue)}
.quote-detail .production-price{background:var(--bg);border:0;border-radius:var(--r-m)}
.budget-note{border:0;border-radius:var(--r-m);background:var(--bg);padding:14px 16px;border-left:0}
.quote-from{display:block;margin:18px 0 10px}
.quote-from span{font-size:15px;color:var(--text2);letter-spacing:0;text-transform:none;display:block;margin-bottom:2px}
.quote-from b{font-size:clamp(38px,3.8vw,48px);font-weight:600;letter-spacing:-.055em;color:var(--ink)}
.quote-from small{font-size:13px;color:var(--text3)}
.empty-quote h2{font-size:24px;font-weight:600;letter-spacing:-.04em;line-height:1.25}
.empty-quote p{color:var(--text2);font-size:15px}
.empty-art{display:none}
.quote-actions .secondary,.quote-actions button{border-radius:99px}

/* ───────── 바닥 ───────── */
.footnotes{max-width:1200px;margin:0 auto;padding:36px 22px 56px;border-top:1px solid var(--line);color:var(--text3);font-size:13px}
.footnotes>span{color:var(--text2)}
.site-footer{max-width:1200px;margin:0 auto;padding:26px 22px 40px;border-top:1px solid var(--line);color:var(--text3);font-size:13px}
.site-footer>span{color:var(--text2)}
.site-footer a,.site-footer .email-button{color:var(--text2)}
.mobile-dock:not([hidden]){left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));border:1px solid rgba(255,255,255,.7);border-radius:24px;background:rgba(255,255,255,.8);-webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px);box-shadow:0 10px 40px rgba(0,0,0,.18);padding:12px 12px 12px 20px;animation:dockUp .7s var(--spring) both}
.mobile-dock small{color:var(--text3)}
.mobile-dock strong{font-weight:600;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.mobile-dock button{background:var(--blue);color:#fff;border-radius:99px;padding:12px 18px;font-weight:600}
dialog#contact-dialog{border:0;border-radius:var(--r-xl);box-shadow:0 30px 90px rgba(0,0,0,.3);padding:34px;max-width:640px;width:calc(100% - 28px)}
dialog#contact-dialog[open]{animation:dialogIn .6s var(--spring) both}
dialog#contact-dialog::backdrop{background:rgba(0,0,0,.35);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:fadeIn .4s both}
#toast,.toast{border-radius:99px}

/* ───────── 움직임: 절제 ─────────
   화면이 다시 그려질 때마다 재생되는 애니메이션은 쓰지 않습니다.
   반응은 사용자가 누른 그 요소(체크 표시)와 그 결과(바뀐 금액)에서만 나옵니다. */
@keyframes stepFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes introIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes dockUp{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:none}}
@keyframes dialogIn{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.stepped-estimate .intro{animation:introIn .5s var(--ease) both}
.stepped-estimate .form.step-fade{animation:stepFade .3s var(--ease) both}

/* ───────── 화면 폭 ───────── */
@media (min-width:981px) and (max-width:1190px){.stepped-estimate .studio{grid-template-columns:minmax(0,1fr) 340px}.stepped-estimate .form{padding:36px}}
@media (max-width:980px){
  .stepped-estimate .studio{display:flex!important;flex-direction:column}
  .stepped-estimate .form{order:1;width:100%;padding:32px 24px 30px}
  .stepped-estimate .step-actions{order:2;width:100%}
  .stepped-estimate .quote-column{order:3;width:100%;margin:20px 0 0;grid-column:auto}
  .stepped-estimate .quote-sticky{position:static;max-height:none;overflow:visible}
  .stepped-estimate .intro{padding-top:60px}
}
@media (max-width:720px){
  .site-header{padding:0 18px}
  .site-header .brand span{display:none}
  .estimate-workspace,.workspace-header,.footnotes,.site-footer{padding-left:14px;padding-right:14px}
  .stepped-estimate .intro h1{font-size:clamp(34px,10.4vw,46px)}
  .stepped-estimate .form{padding:26px 18px;border-radius:24px}
  .stepped-estimate .product-list{grid-template-columns:1fr}
  .stepped-estimate .product-list button{min-height:0}
  .workspace-header .text-button{position:static}
  .workspace-header{flex-wrap:wrap;gap:10px}
  .stepped-estimate .quote-amount{font-size:42px}
}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js-motion .footnotes,.js-motion .site-footer{opacity:1;transform:none}
}
.sr-only{overflow:hidden!important;clip-path:inset(50%)!important;max-width:1px}

/* 보정 */
.quote-from small{display:block;margin-top:8px}
.workspace-header .mode-nav button{border-radius:8px!important;background:transparent!important;color:var(--ink)!important}
.workspace-header .mode-nav button[aria-pressed=true]{background:#fff!important;box-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04)!important}

@media (max-width:720px){.step-actions .step-next{min-width:0!important;flex:1;padding-inline:14px;font-size:15px}.step-actions .step-back{padding-inline:12px;font-size:15px}}

/* 스텝퍼·섹션 번호: 이전 스킨 규칙을 확실히 덮음 */
.stepped-estimate .stepper{background:var(--fill)!important;border:0!important;border-radius:99px!important;padding:3px;overflow:visible!important}
.stepped-estimate .stepper button{border-radius:50%!important}
.stepped-estimate .section-title .no{background:var(--blue-soft)!important;color:var(--blue)!important;border-radius:99px!important;font-weight:600}
.stepped-estimate .section-title{align-items:center}

/* 선택 표시가 분명하게: 폼 안의 선택 막대는 선택된 쪽을 파랗게 채웁니다(흰 바탕 위 흰 도형 금지) */
.stepped-estimate .form .segments,.stepped-estimate .form .paper-presets{background:#e8e8ed;padding:3px;border-radius:12px}
.stepped-estimate .form .segments button,.stepped-estimate .form .paper-presets button{border-radius:9px!important;color:var(--ink)}
.stepped-estimate .form .segments button[aria-pressed=true],.stepped-estimate .form .paper-presets button[aria-pressed=true]{background:var(--blue)!important;color:#fff!important;box-shadow:0 2px 8px rgba(0,113,227,.35)!important}
.stepped-estimate .form .segments button[aria-pressed=true] *,.stepped-estimate .form .paper-presets button[aria-pressed=true] *{color:rgba(255,255,255,.85)!important}
.stepped-estimate .form .segments button:not([aria-pressed=true]):hover,.stepped-estimate .form .paper-presets button:not([aria-pressed=true]):hover{background:rgba(255,255,255,.7)}
/* 위쪽 '직접 견적/간편 문의'는 회색 바탕이라 흰 막대가 선명 */
.workspace-header .mode-nav{background:#e8e8ed}

/* ───────── v18 정리 ───────── */
/* 질문 사이 여백을 조금 더: 선택 막대끼리 붙어 보이지 않게 */
.stepped-estimate .question{margin-bottom:40px}
.stepped-estimate .question .label,.stepped-estimate .question>label.label{margin-bottom:16px}
/* '처음부터'는 선택 막대 바로 옆에 붙여서 한 덩어리로 */
.workspace-header{gap:16px}
.workspace-header .text-button{position:static;padding:8px 4px}

/* 문의 창: 옛 네모·녹색 스타일 제거 */
#contact-dialog{background:#fff}
#contact-dialog .eyebrow{font-size:14px;letter-spacing:0;font-weight:600}
#contact-dialog h2{font-size:28px;font-weight:600;letter-spacing:-.04em;margin:6px 0 10px}
#contact-dialog .dialog-intro{color:var(--text2);font-size:15px;line-height:1.55;margin-bottom:22px}
#contact-dialog .dialog-top button{width:32px;height:32px;border-radius:50%;background:var(--fill);color:var(--ink);display:grid;place-items:center;transition:background .2s}
#contact-dialog .dialog-top button:hover{background:rgba(118,118,128,.22)}
#contact-dialog .contact-fields{gap:18px 16px}
#contact-dialog label{font-size:14px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
#contact-dialog label small{font-weight:400;color:var(--text3);margin-left:6px;font-size:12px}
#contact-dialog input:not([type=checkbox]),#contact-dialog textarea{width:100%;border:1px solid rgba(0,0,0,.14);border-radius:12px;background:#fff;padding:13px 14px;font-size:16px;margin-top:8px;box-shadow:none;transition:border-color .2s,box-shadow .2s}
#contact-dialog input:not([type=checkbox]):focus,#contact-dialog textarea:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(0,113,227,.2);outline:none}
#contact-dialog input[type=checkbox]{accent-color:var(--blue);width:18px;height:18px;margin:0;border-radius:5px}
#contact-dialog .check-row{display:flex;align-items:center;gap:10px;font-weight:400;font-size:14px;color:var(--text2)}
#contact-dialog .form-help{font-size:13px;color:var(--text3)}
#inquiry-status{border-radius:14px;padding:14px 16px;font-size:14px;line-height:1.55;background:var(--bg);color:var(--text2);border:0}
#inquiry-status[data-kind=unavailable]{background:rgba(255,149,0,.12);color:#9a5700}
#inquiry-status[data-kind=error]{background:rgba(255,59,48,.1);color:#c4291f}
#inquiry-status[data-kind=success]{background:rgba(0,113,227,.1);color:#0058b0}
#inquiry-submit,#contact-form .primary{width:100%;border-radius:99px!important;background:var(--blue);color:#fff;border:0}
#inquiry-submit:disabled{background:rgba(118,118,128,.16)!important;color:var(--text3)!important;box-shadow:none;transform:none}
#email-ready{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:14px}
#email-ready .text-button{color:var(--blue);font-size:14px}
/* 간편 문의 화면 */
.stepped-estimate[data-mode=quick] .form{border-radius:var(--r-xl)}
.stepped-estimate .quick-contact,.stepped-estimate .project-description textarea{border-radius:12px}
.stepped-estimate .quick-contact{border-radius:99px!important;background:var(--blue);color:#fff}

/* 간편 문의에서는 금액을 계산하지 않으므로 '부터' 표시를 숨김 */
body[data-mode=quick] .product-list em.from{display:none}

/* ───────── v19: 칩 선택 · 밀도 · 줄바꿈 ───────── */
/* 드롭다운 대신 칩 버튼: 운영체제 기본 네모 목록이 뜨지 않음 */
.opt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
.opt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:46px;padding:11px 14px;border-radius:12px;background:#e8e8ed;color:var(--ink);font-size:15px;font-weight:500;line-height:1.3;text-align:center;transition:background .2s,transform .25s var(--spring),box-shadow .2s}
.opt:hover:not([aria-checked=true]){background:#dcdce1}
.opt:active{transform:scale(.97)}
.opt[aria-checked=true]{background:var(--blue);color:#fff;box-shadow:0 2px 8px rgba(0,113,227,.3)}
.opt b{font-weight:600}
.opt small{font-size:12px;font-weight:400;opacity:.78}
.opt-grid.sizes{grid-template-columns:repeat(auto-fit,minmax(104px,1fr))}
.opt.size{gap:3px;padding:14px 10px 12px}
.sheet{display:block;width:calc(30px*var(--w));min-width:14px;height:30px;border:2px solid currentColor;border-radius:3px;opacity:.7;margin-bottom:5px}
.opt-grid.thickness{margin-top:10px;grid-template-columns:repeat(auto-fit,minmax(92px,1fr))}
.stock-row{display:block;margin:0 0 20px}
.stock-row>.label{display:block;margin-bottom:10px}
.stock-note{font-size:13px;color:var(--text3);margin:8px 0 0}
.quantity-options small{display:block;font-size:12px;color:var(--text3);margin-top:2px}
.quantity-options button[aria-pressed=true] small{color:var(--blue)}

/* 밀도: 전체를 조금 조이고, 묶음(그룹) 안은 좁게·묶음 사이는 분명하게 */
.stepped-estimate .form{padding:38px 40px 34px}
.stage-heading{margin-bottom:24px}
.stage-heading h2{font-size:clamp(26px,3vw,34px);line-height:1.2}
.stage-heading p{font-size:16px;line-height:1.5;margin-top:8px}
.selected-project{margin-bottom:16px}
.stepped-estimate .question{margin:0 0 24px}
.stepped-estimate .question:last-child{margin-bottom:0}
.stepped-estimate .question .label,.stepped-estimate .question>label.label{font-size:16px;margin-bottom:10px;line-height:1.35}
.hint{font-size:13px;line-height:1.5;margin-top:8px}
.hint.lead{margin:-2px 0 12px}
.stepped-estimate .section{margin-top:0;padding-top:0}
.stepped-estimate .section+.section{margin-top:34px;padding-top:30px;border-top:1px solid var(--line)}
.stepped-estimate .section-title{margin-bottom:18px}
.design-scope-note,.scope-note,.request-note,.included-note,.display-preview{padding:12px 16px;line-height:1.5;font-size:14px;margin:4px 0 24px}
.included-note p{margin-top:3px;line-height:1.5}
.service-options{gap:12px;margin-bottom:22px}
.service-options button{padding:20px 20px}
.service-options button[aria-pressed=true]{padding:20px 20px}
.service-options strong{font-size:18px;margin-bottom:6px}
.service-options button>span:not(.service-tag){line-height:1.5;font-size:14px}
.service-options .service-tag{margin-bottom:10px}
.stepped-estimate .product-list{gap:12px}
.stepped-estimate .product-list button{min-height:124px;padding:20px 20px 18px;gap:4px}
.stepped-estimate .product-list .pname{font-size:21px}
.stepped-estimate .product-list em.from{padding-top:10px}
.stepper{height:44px}
.stepper button{width:38px;height:38px}
.task-row{padding:12px 0}
.task-row p{margin-top:2px;line-height:1.45}
.stepped-estimate .quote-sticky{padding:24px 24px}
.stepped-estimate .quote-head{margin-bottom:14px}
.stepped-estimate .quote-costs>div{padding:12px 0}
.stepped-estimate .quote-costs{margin:10px 0 16px}
.stepped-estimate .quote-detail>summary{padding:12px 0}
.quote-detail .spec-list p{margin:0 0 4px;line-height:1.45}
.stepped-estimate .quote-cta{margin:16px 0 14px}

/* 줄바꿈: 한글은 단어 단위로 끊고, 마지막 줄에 한 글자만 남지 않게 */
.stepped-estimate{word-break:keep-all;overflow-wrap:break-word}
.stepped-estimate h1,.stepped-estimate h2,.stepped-estimate h3,.quote-title,.service-options strong,.pname,.empty-quote h2{text-wrap:balance}
.stepped-estimate p,.hint,li,small,.opt,.opt small,.task-row p,summary,dd,dt,.quote-tax,.budget-note,.included-note,.scope-note,.design-scope-note,.step-actions>p,.stock-note{text-wrap:pretty}

/* 규격 칩은 한 줄 전체를 쓰고, 수량은 그 아래로 */
.paper-controls .question.form-row{display:grid;grid-template-columns:1fr;gap:22px}
.paper-controls .form-row .field-label{display:block}
.paper-controls .form-row .field-label>span{display:block;font-size:16px;font-weight:600;margin-bottom:10px}
.paper-controls .trim-note{font-size:14px;color:var(--text2)}

/* 숫자·단위·짧은 라벨은 중간에서 끊기지 않게(한 글자만 다음 줄로 넘어가는 것 방지) */
.opt,.opt b,.opt small,.quantity-options strong,.quantity-options span,.quantity-options small,.segments button,.paper-presets button,.stepper .suffix,.unit,.quote-amount,.quote-costs dd,.production-amount,.mobile-dock strong{white-space:nowrap}
.opt{overflow-wrap:normal}
/* 칩 안 긴 문장(원고 준비 상태 등)은 줄바꿈 허용 */
.opt-grid:not(.sizes):not(.thickness) .opt{white-space:normal}
.opt-grid:not(.sizes):not(.thickness) .opt:not(:has(small)){white-space:normal}
/* 좁은 화면 */
@media (max-width:480px){
  .quantity-options{grid-template-columns:1fr}
  .quantity-options button{display:flex;align-items:baseline;justify-content:space-between;gap:12px;text-align:left;padding:14px 16px}
  .quantity-options small{margin:0}
  .segments button,.paper-presets button{padding:10px 6px;font-size:13.5px}
  .size-fields{grid-template-columns:1fr}
  .size-fields label{display:block}
  .opt-grid.sizes{grid-template-columns:repeat(2,1fr)}
  .opt-grid.thickness{grid-template-columns:repeat(3,1fr)}
}
.size-fields .quantity-line{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
@media (max-width:380px){.size-fields .stepper input{width:52px}.size-fields .stepper button{width:34px;height:34px}}

/* 옛 녹색 배경 제거 · 그룹 제목 위 여백 */
.flow-progress .step-number,.flow-progress .complete .step-number,.flow-progress .current .step-number{background:none!important;border:0!important;color:var(--blue)!important}
.stepped-estimate .stage-heading{margin-bottom:6px}
.stepped-estimate .section,.stepped-estimate .section+.section{margin-top:28px;padding-top:26px;border-top:1px solid var(--line)}
.stepped-estimate .section-title{margin-bottom:18px}

/* 옛 녹회색 글자·테두리·미리보기 아이콘을 모두 중립 회색/파랑으로 */
.workspace-header .mode-nav button{border-color:transparent!important}
.flow-progress button:disabled,.flow-progress li:not(.current):not(.complete) button{color:var(--text3)!important}
.flow-progress .step-label{color:inherit!important}
.step-actions .step-next:disabled{background:rgba(118,118,128,.16)!important;color:var(--text3)!important}
.step-actions .step-next:disabled span{color:var(--text3)!important}
.quote-costs dt small,.quote-costs small{color:var(--text3)!important}
.budget-note strong{color:var(--ink)!important}
.budget-note p,.quote-note,.included-note p,.included-note br,.display-preview span,.production-includes,.production-unit,.production-price-head>span,.spec-list p{color:var(--text2)!important}
.display-preview{background:var(--bg)}
.display-preview>i{background:linear-gradient(0deg,#d2d2d7 45%,transparent 45%)!important;border-color:#86868b!important}
.display-preview>i:before{background:#a1a1a6!important;box-shadow:0 7px #a1a1a6,0 14px #a1a1a6!important}
.display-preview.banner>i:after{background:#86868b!important}
.display-preview.outdoor>i{background:#d2d2d7!important}
.display-preview.outdoor>i:before{background:#a1a1a6!important;box-shadow:0 6px #a1a1a6!important}

/* v21: 오른쪽 견적 패널은 스크롤은 되되 스크롤바는 보이지 않게(회녹색 막대 제거) */
.stepped-estimate .quote-sticky{scrollbar-width:none!important;scrollbar-color:transparent transparent!important;-ms-overflow-style:none}
.stepped-estimate .quote-sticky::-webkit-scrollbar{display:none;width:0;height:0}

/* v22: 오른쪽 견적 패널 행간 정리 */
.stepped-estimate .budget-note{padding:12px 14px}
.stepped-estimate .budget-note strong{line-height:1.35;display:block}
.stepped-estimate .budget-note p{line-height:1.4;margin:3px 0 0}
.stepped-estimate .quote-costs dt{line-height:1.3}
.stepped-estimate .quote-costs dt small,.stepped-estimate .quote-costs dd small,.stepped-estimate .quote-costs small{display:block;line-height:1.35;margin-top:2px}
.stepped-estimate .quote-costs dd{line-height:1.3}
.stepped-estimate .quote-column p,.stepped-estimate .quote-column li{line-height:1.45}

/* v23: 단계 막대가 왼쪽에서 오른쪽으로 차오르고, 이전 단계로 가면 반대로 줄어듭니다 */
@keyframes barIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes barOut{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.flow-progress li.bar-in button:before{animation:barIn .7s var(--ease) both}
.flow-progress li.bar-out button:before{width:100%;animation:barOut .6s var(--ease) both}
@media (prefers-reduced-motion:reduce){.flow-progress li.bar-in button:before,.flow-progress li.bar-out button:before{animation:none}}

/* v24: '처음부터'는 단계 막대 줄의 맨 오른쪽, 라벨 줄 세로 중앙 */
.flow-progress{position:relative}
.flow-progress .flow-reset{position:absolute;right:0;top:2px;height:20px;display:flex;align-items:center;padding:0;font-size:13px;line-height:1}
.flow-progress ol{padding-right:0}
.flow-progress li:last-child button{padding-right:88px}
@media (max-width:640px){.flow-progress li:last-child button{padding-right:72px}}
.flow-progress .flow-reset{width:auto!important;left:auto!important;min-height:0!important;background:transparent!important;border:0!important}
.flow-progress .flow-reset,.flow-progress .flow-reset:hover,.flow-progress .flow-reset:focus-visible{text-decoration:none!important}

/* v25: 처음부터 버튼에는 막대(회색 줄) 없음, 단계 글자와 막대 간격 좁힘, 직접 견적/간편 문의는 완전한 알약 토글 */
.flow-progress .flow-reset:before,.flow-progress .flow-reset:after{content:none!important;display:none!important}
.flow-progress li button{padding-bottom:8px!important}
.flow-progress .flow-reset{padding:0!important;top:0}
.workspace-header .mode-nav{border-radius:999px!important;padding:3px;gap:0}
.workspace-header .mode-nav button{border-radius:999px!important;padding:8px 22px}
/* 사이트 공통 메뉴(작업·견적·블로그·문의): 현재 페이지 표시 */
.site-header nav a[aria-current]{color:#1d1d1f;font-weight:600}
@media(max-width:420px){.site-header .brand span{display:none}.site-header nav{gap:12px}.site-header nav button,.site-header nav a{white-space:nowrap}}

/* 모바일: 위아래 길이 줄이기. 제작물은 한 줄(이름·설명 왼쪽, 금액 오른쪽) */
@media(max-width:760px){
  .stepped-estimate .intro{padding:26px 22px 10px}
  .stepped-estimate .intro h1{font-size:28px;line-height:1.2}
  .stepped-estimate .intro>p{margin-top:6px;font-size:14.5px;line-height:1.5}
  body[data-step="1"] .quote-column{display:none}
  .workspace-header{margin-top:0;padding-bottom:8px}
  .estimate-workspace{margin-top:14px}
  .stepped-estimate .form{padding:22px 18px 20px}
  .stage-heading h2{font-size:22px}
  .stepped-estimate .product-list{gap:8px}
  .stepped-estimate .product-list button{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:center;min-height:0;padding:14px 16px;gap:2px 12px}
  .stepped-estimate .product-list .pname{grid-column:1;font-size:18px}
  .stepped-estimate .product-list button>span{grid-column:1;font-size:13.5px}
  .stepped-estimate .product-list em.from{grid-column:2;grid-row:1/3;margin:0;padding:0;text-align:right;white-space:nowrap;font-size:13px}
  .studio{padding-bottom:64px}
}
@media(max-width:760px){
  /* 간편 문의: 제작물을 2열 짧은 칩으로 */
  body[data-mode=quick] .stepped-estimate .product-list{grid-template-columns:1fr 1fr;gap:8px}
  body[data-mode=quick] .stepped-estimate .product-list button{display:flex;align-items:center;min-height:52px;padding:12px 14px}
  body[data-mode=quick] .stepped-estimate .product-list .pname{font-size:16px}
  body[data-mode=quick] .stepped-estimate .product-list button>span{display:none}
  body[data-mode=quick] .quick-contact{margin-top:6px}
}
/* 검색엔진용 안내 글: 도구 아래, 조용한 톤 */
.about-estimate{max-width:760px;margin:0 auto;padding:8px 22px 56px;color:var(--text2);font-size:14px;line-height:1.75}
.about-estimate h2{font-size:16px;font-weight:600;color:var(--ink);margin:0 0 10px;letter-spacing:-.02em}
.about-estimate p{margin:0 0 10px}
.about-estimate ul{margin:0 0 12px;padding-left:18px}
.about-estimate li{margin:3px 0}

/* 애플 방식: 채워진 파랑 버튼은 문의 하나뿐. 선택된 칩은 파랑 테두리, 나머지 강조는 회색·검정 */
.primary,.stepped-estimate .quick-contact,#inquiry-submit,#contact-form .primary{background:#0071e3}
.primary:hover{background:#0077ed}
.opt[aria-checked=true],.stepped-estimate .form .segments button[aria-pressed=true],.stepped-estimate .form .paper-presets button[aria-pressed=true]{background:#fff!important;color:var(--ink)!important;box-shadow:0 0 0 2px #0071e3!important}
.quantity-options button[aria-pressed=true],.quantity-options button[aria-pressed=true] small{color:var(--ink)}
.service-options .service-tag,.service-options [aria-pressed=true] .service-tag{background:rgba(0,0,0,.06);color:var(--text2)}
.stepped-estimate .product-list em.from,.stepped-estimate .product-list button[aria-pressed=true] em.from{color:var(--text2)}
.stepped-estimate .section-title .no{background:rgba(0,0,0,.06)!important;color:var(--text2)!important}
.eyebrow,.selected-project span,.flow-progress .step-number,.flow-progress .complete .step-number,.flow-progress .current .step-number{color:var(--ink)!important}
.flow-progress button:before{background:var(--ink)}
.workspace-header .text-button,.selected-project .text-button,.text-button,.step-actions .step-back,#email-ready .text-button{color:var(--text2)}
.text-button:hover,.step-actions .step-back:hover{color:var(--ink)}
.mobile-dock button{background:var(--ink)}
.quote-head i{background:var(--ink)}

/* 애플 구매 화면처럼: 선택지는 흰 카드에 얇은 회색 윤곽, 선택하면 파랑 2px 테두리(채움·들썩임 없음) */
.service-options button,.stepped-estimate .product-list button,.quantity-options button{background:#fff;box-shadow:inset 0 0 0 1px #c7c7cc;transition:box-shadow .2s ease}
.service-options button:hover:not([aria-pressed=true]),.stepped-estimate .product-list button:hover:not([aria-pressed=true]),.quantity-options button:hover:not([aria-pressed=true]){background:#fff;transform:none;box-shadow:inset 0 0 0 1px #86868b}
.service-options button[aria-pressed=true],.stepped-estimate .product-list button[aria-pressed=true],.quantity-options button[aria-pressed=true]{background:#fff;transform:none;box-shadow:0 0 0 2px #0071e3}
.stepped-estimate .form .segments button:not([aria-pressed=true]),.stepped-estimate .form .paper-presets button:not([aria-pressed=true]),.opt:not([aria-checked=true]){background:#fff!important;box-shadow:inset 0 0 0 1px #c7c7cc!important}
.stepped-estimate .form .segments button:not([aria-pressed=true]):hover,.stepped-estimate .form .paper-presets button:not([aria-pressed=true]):hover,.opt:not([aria-checked=true]):hover{box-shadow:inset 0 0 0 1px #86868b!important}

/* 구분 선택(책자 형태·접지 리플렛·종이 느낌 등): 붙어 있는 막대 대신 간격 있는 카드로.
   파랑 테두리가 이웃에 잘리거나 가려지지 않고, 선택 시 글자가 흰색으로 사라지지 않게 한다. */
.stepped-estimate .form .segments,.stepped-estimate .form .paper-presets{background:transparent;padding:0;gap:10px;overflow:visible;border-radius:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.stepped-estimate .form .segments button,.stepped-estimate .form .paper-presets button{border-radius:12px;min-height:46px}
.stepped-estimate .form .segments button[aria-pressed="true"] *,.stepped-estimate .form .paper-presets button[aria-pressed="true"] *{color:var(--ink)!important}
.stepped-estimate .form .paper-presets button span{color:var(--text2)!important}

/* 순서대로 선택: 아직 차례가 아닌 항목은 흐리게(애플 구매 화면처럼) */
.pending{opacity:.32;pointer-events:none;transition:opacity .3s ease;user-select:none}