/* ═════════ v5 (2026-11-02): v3(style.css) 그대로 + 본사 톤(글자 로고 · 2칸 첫 화면) + 본사 규정(예약·환불·다른 점)
   v6 보완: 휴대폰 메뉴 바 · 첫 화면 열리기 · 계기판+계산기 하나로 · 실사진 컬러 · 지도 · 본사식 바닥 ═════════ */
:root { --navh: 76px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 라벨 통일: 01 ── 정찰가 */
.eyebrow i, .duo__no i { font-style: normal; font-variant-numeric: tabular-nums; }
.eyebrow i::after, .duo__no i::after { content: ""; display: inline-block; width: 28px; height: 1px; background: currentColor; opacity: .55; vertical-align: middle; margin: 0 12px 3px; }

/* 머리: 본사식 글자 로고 + 메뉴 (지금 보는 구역에 불) */
.wordmark { display: flex; align-items: flex-end; gap: 12px; }
.wordmark__word { font-family: "Montserrat", var(--sans); font-weight: 700; font-size: 19px; line-height: 1.02; letter-spacing: -.01em; }
.wordmark__branch { font-size: 12.5px; font-weight: 700; color: var(--accent); padding-bottom: 2px; }
.nav { background: rgba(0,0,0,.92); border-bottom: 1px solid #222; }
.nav__links { gap: 30px; font-weight: 600; }
.nav__links a.is-on { color: #fff; }
.nav__links a.is-on::after { transform: scaleX(1); }

/* 첫 화면: 본사식 2칸, 흑백 → 마우스 올리면 넓어지며 색 */
.duo { display: flex; height: 100svh; min-height: 640px; padding-top: var(--navh); background: #000; border-bottom: 1px solid #222; }
.duo__panel { position: relative; flex: 1 1 50%; overflow: hidden; border-right: 1px solid #2a2a2a; transition: flex-grow .9s var(--ease); isolation: isolate; color: #fff; }
.duo__panel:last-child { border-right: 0; }
.duo__panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; filter: grayscale(1) contrast(1.15) brightness(.62); transform: scale(1.04); translate: 0 0; transition: filter 1.1s var(--ease), transform 1.6s var(--ease), translate 1.2s var(--ease); }
.duo__panel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,0) 45%); }
.duo:hover .duo__panel { flex-grow: .8; }
.duo .duo__panel:hover { flex-grow: 1.25; }
.duo__panel:hover img { filter: grayscale(0) contrast(1.05) brightness(.82); transform: scale(1); }
.duo__no { position: absolute; top: 48px; left: 40px; font-size: 14px; font-weight: 700; }
.duo__tag { position: absolute; top: 38px; right: 52px; height: 36px; padding: 0 16px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.7); border-radius: 99px; font-size: 13px; font-weight: 600; transition: background .3s, color .3s, border-color .3s; }
.duo__panel:hover .duo__tag { background: var(--accent); border-color: var(--accent); color: #1a0c02; }
.duo__panel--r .duo__no { left: auto; right: 40px; }
.duo__panel--r .duo__tag { right: auto; left: 52px; }
.duo__body { position: absolute; left: 40px; right: 40px; bottom: 56px; }
.duo__panel--r .duo__body { text-align: right; }
.duo__title { margin: 0 0 20px; font-size: clamp(34px, 3.4vw, 48px); font-weight: 700; letter-spacing: -.04em; line-height: 1.15; overflow: hidden; }
.duo__title > span { display: inline-block; }
.duo__body p { margin: 0 0 36px; font-size: 17px; color: #e6e6e6; }
.duo__line { position: relative; display: block; width: min(450px, 80%); height: 1px; background: rgba(255,255,255,.55); font-style: normal; transform-origin: left; }
.duo__panel--r .duo__line { margin-left: auto; transform-origin: right; }
.duo__line b { position: absolute; right: 0; top: 14px; font-weight: 400; font-size: 20px; transition: transform .4s var(--ease), color .3s; }
.duo__panel--r .duo__line b { right: auto; left: 0; }
.duo__panel:hover .duo__line b { color: var(--accent); transform: translate(4px, -4px); }
.duo__panel--r:hover .duo__line b { transform: translate(-4px, -4px); }
/* 등장 전 (연출 켜짐일 때만 감춘다 — 연출 라이브러리가 없으면 그냥 보인다) */
.fx:not(.duo-ready) .duo__panel { clip-path: inset(0 0 0 100%); }
.fx:not(.duo-ready) .duo__panel--r { clip-path: inset(0 100% 0 0); }
.fx:not(.duo-ready) .duo__panel img { transition: none; }
.fx:not(.duo-ready) .duo__title > span { opacity: 0; }
.fx:not(.duo-ready) .duo__no, .fx:not(.duo-ready) .duo__tag, .fx:not(.duo-ready) .duo__body p { opacity: 0; }
.fx:not(.duo-ready) .duo__line { transform: scaleX(0); }

/* 약속 줄: 아이콘 + 가는 선 4칸 */
.trust__list li { display: grid; grid-template-columns: 46px 1fr; column-gap: 16px; row-gap: 2px; align-items: center; padding: 40px 28px; }
.trust__list li:first-child { padding-left: 0; }
.trust__list b::before { display: none; }
.trust__list b { align-self: end; }
.trust__list span:not(.trust__ico) { align-self: start; }
.trust__ico { grid-row: span 2; width: 46px; height: 46px; border-radius: 50%; border: 1px solid #3a2414; background: radial-gradient(circle at 30% 25%, #2a1a0e, #140c06); position: relative; }
.trust__ico::after { content: ""; position: absolute; inset: 12px; background: var(--accent); -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat; }
.ico-tag { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M20.6 13.4l-7.2 7.2a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8zM7.5 5.5a2 2 0 1 0 0 4 2 2 0 0 0 0-4z'/%3E%3C/svg%3E"); }
.ico-shield { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2L4 5v6c0 5 3.4 9.7 8 11 4.6-1.3 8-6 8-11V5l-8-3zm-1.2 14.2l-3.5-3.5 1.4-1.4 2.1 2.1 4.9-4.9 1.4 1.4-6.3 6.3z'/%3E%3C/svg%3E"); }
.ico-clock { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 5h-2v6.2l4.9 2.9 1-1.7-3.9-2.3V7z'/%3E%3C/svg%3E"); }
.ico-drop { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2s-7 7.6-7 12.5a7 7 0 0 0 14 0C19 9.6 12 2 12 2z'/%3E%3C/svg%3E"); }

/* 정찰가 + 견적 계산: 왼쪽 고르기 / 오른쪽 계기판·합계 */
.price__grid { grid-template-areas: "head gauge" "calc gauge"; gap: 10px 70px; }
.pcalc { grid-area: calc; }
.pcalc__row { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; }
.pcalc__k { flex: none; width: 60px; font-weight: 700; font-size: 14.5px; }
.pcalc__cnt { display: flex; gap: 6px; flex-wrap: wrap; }
.price .pill span { background: #fff; }
.price .pill input:checked + span { background: var(--paper-ink); color: #fff; }
.pcalc .h3 { margin-top: 30px; }
.extra__list li { position: relative; align-items: center; }
.opt__r { display: flex; align-items: center; gap: 12px; }
.price .step { background: #fff; }
.chk { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.chk input { position: absolute; opacity: 0; pointer-events: none; }
.chk i { position: relative; flex: none; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid #bdb8ae; background: #fff; transition: background .25s, border-color .25s; }
.chk input:checked + i { background: var(--paper-ink); border-color: var(--paper-ink); }
.chk input:checked + i::after { content: ""; position: absolute; left: 5.5px; top: 1.5px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.chk input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }
.extra__plus { margin: 16px 0 0; padding: 14px 16px; border-radius: 12px; background: #fff; font-size: 14.5px; color: var(--paper-ink); }
.extra__plus b { color: #c4581a; }
.gsum { display: grid; gap: 4px; margin: 26px 0 20px; padding-top: 22px; border-top: 1px solid #26272b; }
.gsum > div { display: flex; align-items: baseline; gap: 6px; }
.gsum span { margin-right: auto; color: var(--muted); font-weight: 600; font-size: 14.5px; }
.gsum small { font-weight: 500; color: #6f737a; margin-left: 4px; font-size: 12.5px; }
.gsum i { font-style: normal; font-weight: 700; }
.gsum__main span { color: #fff; }
.gsum__main b { font-size: clamp(34px, 3.4vw, 44px); line-height: 1.1; }
.gsum__sub b { font-size: 18px; color: #d6d8db; }
.gsum__note { margin: 6px 0 0; font-size: 12.5px; color: var(--accent-2); }
.gauge .btn--block { position: relative; }

/* 복원 쇼: 큰 단계 번호 + 진행 막대 */
.process__count { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 14px; }
.process__no { position: relative; display: block; width: 1.3em; height: 1em; font-size: clamp(64px, 7vw, 104px); line-height: 1; overflow: hidden; }
.process__no b { position: absolute; left: 0; top: 0; font-weight: 800; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.5px var(--accent); }
.process__no b.in-up { animation: noIn .6s var(--ease) both; }
.process__no b.in-down { animation: noInDown .6s var(--ease) both; }
.process__no b.out-up { animation: noOutUp .6s var(--ease) both; }
.process__no b.out-down { animation: noOutDown .6s var(--ease) both; }
@keyframes noIn { from { transform: translateY(100%); } to { transform: none; } }
@keyframes noInDown { from { transform: translateY(-100%); } to { transform: none; } }
@keyframes noOutUp { to { transform: translateY(-100%); } }
@keyframes noOutDown { to { transform: translateY(100%); } }
.process__of { font-weight: 700; color: #5b5f66; font-size: 18px; padding-bottom: 10px; }
/* 시공 사례: 브랜드·썸네일은 가로로 밀어 보기 */
.works__chips, .works__thumbs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-mask: linear-gradient(90deg, #000 90%, transparent); mask: linear-gradient(90deg, #000 90%, transparent); }
.works__chips::-webkit-scrollbar, .works__thumbs::-webkit-scrollbar { display: none; }
.works__chips button { flex: none; }
.works__thumbs { display: flex; gap: 10px; padding-right: 40px; }
.works__thumbs button { flex: 0 0 calc((100% - 50px) / 6.5); }

/* 약속 아래: 다른 점 4칸 */
.diff { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 70px auto 0; max-width: 1180px; text-align: left; }
.diff__i { position: relative; padding: 26px 22px; border-radius: 18px; background: rgba(17,17,19,.86); border: 1px solid #262629; backdrop-filter: blur(6px); }
.diff__i em { font-style: normal; font-weight: 700; font-size: 13px; color: var(--accent); }
.diff__i b { display: block; font-size: 18px; margin: 8px 0; }
.diff__i p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.paints { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 14px; }
.paints span { background: #fff; border-radius: 8px; height: 44px; display: grid; place-items: center; padding: 6px; }
.paints img { max-height: 26px; width: auto; object-fit: contain; }

/* 예약 · 취소/환불 */
.booking { padding: 140px 0; }
.booking__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: start; }
.bsteps { list-style: none; margin: 30px 0 18px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bsteps li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: #fff; font-weight: 700; font-size: 15.5px; }
.bsteps li b { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--paper-ink); color: #fff; font-size: 12.5px; flex: none; }
.bsteps li em { margin-left: auto; font-style: normal; font-size: 12.5px; color: #c4581a; }
.bnote { margin: 0 0 22px; color: var(--paper-muted); }
.bbtns { display: flex; gap: 10px; flex-wrap: wrap; }
.bbtns .btn { flex: 1; min-width: 200px; }
.refund-card { background: var(--ink); color: #fff; border-radius: 28px; padding: 34px 32px; box-shadow: 0 40px 80px -40px rgba(0,0,0,.45); }
.refund-card__t { display: flex; align-items: baseline; gap: 10px; font-size: 22px; margin-bottom: 10px; }
.refund-card__t small { font-size: 13px; color: var(--muted); font-weight: 500; }
.refund { list-style: none; margin: 0; padding: 0; }
.refund li { display: grid; grid-template-columns: 96px 1fr 76px; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid #222; font-size: 16px; }
.refund li i { height: 3px; background: #2a2a2a; border-radius: 3px; position: relative; overflow: hidden; }
.refund li i::after { content: ""; position: absolute; inset: 0; width: var(--w); background: linear-gradient(90deg, #ff7a1e, #ffa15c); transform-origin: left; transform: scaleX(0); transition: transform 1.2s var(--ease) .2s; }
.refund-card.is-in .refund li i::after { transform: scaleX(1); }
.refund li b { text-align: right; }
.refund li.no b { color: var(--accent); }
.refund-card__as { margin-top: 22px; padding: 18px; border-radius: 16px; background: linear-gradient(120deg, #2a1608, #170c04); border: 1px solid rgba(255,122,30,.35); }
.refund-card__as b { display: block; color: var(--accent); margin-bottom: 4px; }
.refund-card__as span { color: #ccc; font-size: 14.5px; }

/* FAQ: 어두운 바탕 (밝은 예약 · 사진 견적 사이 쉼표) */
.faq { background: var(--ink-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.faq__list details { border-bottom-color: var(--line); }
.faq__list details:first-child { border-top: 1px solid var(--line); }
.faq__list summary { transition: color .3s; }
.faq__list summary:hover { color: var(--accent); }
.faq__list summary::after { background: linear-gradient(var(--text), var(--text)) center/14px 2px no-repeat, linear-gradient(var(--text), var(--text)) center/2px 14px no-repeat; }
.faq__list p { color: var(--muted); }

/* 오시는 길: 실제 지도 (어둡게 뒤집어 사이트 톤에 맞춤) */
.visit__card { background: #111; border: 1px solid var(--line); }
.visit__map { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: invert(.9) hue-rotate(180deg) grayscale(.25) contrast(.92); }
.visit__pin { pointer-events: none; }

/* 바닥: 본사식 글자 로고 + 사업자 정보 */
.foot { padding: 80px 0 0; overflow: hidden; }
.foot__top { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; padding-bottom: 36px; border-bottom: 1px solid var(--line); }
.foot__mark { display: flex; align-items: flex-end; gap: 12px; color: #fff; }
.foot__mark span { font-family: "Montserrat", var(--sans); font-weight: 700; font-size: 30px; line-height: 1.02; letter-spacing: -.01em; }
.foot__mark em { font-style: normal; color: var(--accent); font-weight: 700; font-size: 14px; padding-bottom: 3px; }
.foot__nav { display: flex; gap: 22px; flex-wrap: wrap; color: #c9ccd1; font-weight: 600; font-size: 15px; }
.foot__nav a:hover { color: var(--accent); }
.foot__grid { padding-top: 32px; align-items: flex-start; }
.foot__info { display: grid; grid-template-columns: 56px 1fr; gap: 8px 12px; margin: 0; font-size: 14px; }
.foot__info dt { color: #5b5f66; }
.foot__info dd { margin: 0; color: #a3a7ad; }
.foot__links { flex-direction: column; gap: 10px; align-items: flex-end; }
.foot__fine { margin-top: 36px; }
/* 관리자 페이지로 가는 작은 링크 (손님 눈에 띄지 않게) */
.foot__admin { margin: 16px auto 0; font-size: 12.5px; }
.foot__admin a { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 13px; border: 1px solid #45474c; border-radius: 99px; color: #b5b9bf; font-weight: 600; transition: color .3s, border-color .3s; }
.foot__admin a::before { content: ""; width: 12px; height: 12px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 9V7A5 5 0 0 0 7 7v2H5v13h14V9zm-8 0V7a3 3 0 0 1 6 0v2z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 9V7A5 5 0 0 0 7 7v2H5v13h14V9zm-8 0V7a3 3 0 0 1 6 0v2z'/%3E%3C/svg%3E") center/contain no-repeat; }
.foot__admin a:hover { color: var(--accent); border-color: var(--accent); }
.foot__big { margin-top: 40px; font-family: "Montserrat", var(--sans); font-weight: 700; font-size: clamp(54px, 12.6vw, 200px); line-height: .82; letter-spacing: -.04em; text-align: center; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px #2c2d31; user-select: none; transform: translateY(10%); }

/* 휠구매 = 준비 중 */
.soon { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,.7); backdrop-filter: blur(6px); }
.soon[hidden] { display: none; }
.soon__box { width: min(380px, 100%); background: #111; border: 1px solid #2a2a2a; border-radius: 22px; padding: 30px 24px 22px; text-align: center; color: #fff; animation: soonPop .35s var(--ease); }
@keyframes soonPop { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.soon__box > b { display: block; color: var(--accent); font-size: 14px; margin-bottom: 6px; }
.soon__box p { margin: 0 0 10px; font-size: 26px; font-weight: 700; }
.soon__box > span { display: block; color: #b4b4b4; font-size: 15px; margin-bottom: 22px; }
.soon__box > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.soon__box .btn { height: 48px; }

/* PC: 본사식 오렌지 원형 버튼 — 첫 화면을 지나면 나타난다 (휴대폰은 아래 고정 바) */
.fab { position: fixed; z-index: 65; right: 22px; bottom: 26px; display: grid; gap: 12px; opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .5s, transform .5s var(--ease); }
.fab.is-on { opacity: 1; transform: none; pointer-events: auto; }
.fab__b { width: 60px; height: 60px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 700; box-shadow: 0 8px 24px rgba(0,0,0,.45); transition: transform .3s var(--ease); }
.fab__b:hover { transform: translateY(-3px); }
.fab__b--line { background: #111; border: 2px solid var(--accent); }

/* ── 태블릿·휴대폰: 메뉴는 로고 아래 가로로 밀리는 한 줄 ── */
@media (max-width: 1080px) {
  :root { --navh: 106px; }
  .nav, .nav.is-solid { flex-wrap: wrap; height: auto; padding: 10px var(--gut) 0; gap: 0 12px; background: rgba(0,0,0,.94); }
  .nav__links { display: flex; order: 3; flex: 0 0 calc(100% + 2 * var(--gut)); align-items: center; gap: 4px; height: 46px; margin: 10px calc(-1 * var(--gut)) 0; padding: 0 var(--gut); overflow-x: auto; scrollbar-width: none; border-top: 1px solid #1d1d1f; }
  .nav__links::-webkit-scrollbar { display: none; }
  .nav__links a { flex: none; padding: 6px 14px; border-radius: 99px; font-size: 14.5px; transition: background .3s, color .3s; }
  .nav__links a::after { display: none; }
  .nav__links a.is-on { background: #fff; color: #111; }
  .diff { grid-template-columns: 1fr 1fr; }
  .booking__grid { grid-template-columns: 1fr; gap: 40px; }
  .trust__list li { padding: 28px 20px; }
  .trust__list li:nth-child(3) { padding-left: 0; }
}
@media (max-width: 860px) {
  .price__grid { grid-template-areas: "head" "calc" "gauge"; gap: 10px; }
  .gauge { margin-top: 30px; }
  .works__thumbs button { flex-basis: 26%; }
  .foot__links { align-items: flex-start; }
}
@media (max-width: 760px) {
  :root { --navh: 100px; }
  .wordmark__word { font-size: 15.5px; }
  .wordmark__branch { font-size: 11.5px; }
  .nav__call { display: inline-flex; width: 40px; height: 40px; padding: 0; border-radius: 50%; }
  .nav__tel { display: none; }
  .nav__links { height: 42px; margin-top: 8px; }
  .duo { flex-direction: column; height: auto; min-height: 0; padding-bottom: 76px; }
  .duo__panel { flex: none; height: calc((100svh - var(--navh) - 76px) / 2); min-height: 280px; border-right: 0; border-bottom: 1px solid #2a2a2a; }
  .duo:hover .duo__panel, .duo .duo__panel:hover { flex-grow: 0; }
  .fx:not(.duo-ready) .duo__panel { clip-path: inset(100% 0 0 0); }
  .fx:not(.duo-ready) .duo__panel--r { clip-path: inset(0 0 100% 0); }
  .duo__no { top: 20px; left: 20px; font-size: 13px; }
  .duo__no i::after { width: 18px; margin: 0 8px 3px; }
  .duo__tag { top: 14px; right: 20px; height: 32px; font-size: 12px; }
  .duo__panel--r .duo__no { right: 20px; }
  .duo__panel--r .duo__tag { left: 20px; }
  .duo__body { left: 20px; right: 20px; bottom: 22px; }
  .duo__title { font-size: 30px; margin-bottom: 6px; }
  .duo__body p { margin-bottom: 18px; font-size: 15px; }
  .trust__list li { grid-template-columns: 36px 1fr; column-gap: 10px; padding: 20px 10px; }
  .trust__list li:nth-child(odd) { padding-left: 0; }
  .trust__ico { width: 36px; height: 36px; }
  .trust__ico::after { inset: 9px; }
  .pcalc__row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .pcalc__cnt .pill span { padding: 0 16px; }
  .extra__list li { flex-wrap: wrap; row-gap: 6px; }
  .booking { padding: 90px 0; }
  .diff { grid-template-columns: 1fr; margin-top: 50px; }
  .bsteps { grid-template-columns: 1fr; }
  .refund-card { padding: 26px 20px; border-radius: 22px; }
  .refund li { grid-template-columns: 84px 1fr 64px; gap: 10px; font-size: 14.5px; }
  .faq__list summary { font-size: 16.5px; }
  .visit__card { aspect-ratio: 4 / 3.4; border-radius: 22px; }
  .visit__pin { left: 14px; bottom: 14px; }
  .foot { padding: 60px 0 92px; }
  .foot__big { margin-top: 30px; }
  .foot__mark span { font-size: 24px; }
  .foot__nav { gap: 10px 18px; }
  .fab { display: none; }
}

/* ═══ 매장 · 신규 오픈 (실제 매장 사진) ═══ */
.store { background: #050506; padding-bottom: 140px; overflow: hidden; }
.store__hero { position: relative; min-height: min(92svh, 860px); display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; }
.store__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; z-index: -2; transform-origin: 50% 45%; }
.store__hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5,5,6,.92) 0%, rgba(5,5,6,.55) 42%, rgba(5,5,6,.05) 75%), linear-gradient(0deg, #050506 0%, rgba(5,5,6,0) 35%); }
.store__copy { position: relative; padding-top: 140px; padding-bottom: 110px; }
.store__copy .h2 { font-size: clamp(34px, 4.6vw, 64px); line-height: 1.18; max-width: 760px; }
.store__copy .lead { max-width: 560px; color: #c9ccd1; }
.store__badge { display: inline-flex; align-items: center; gap: 10px; margin: 6px 0 22px; padding: 8px 18px 8px 12px; border-radius: 99px; background: rgba(255,122,30,.12); border: 1px solid rgba(255,122,30,.55); color: #ffd2b0; font-size: 14.5px; font-weight: 600; }
.store__badge b { color: #1a0c02; background: var(--accent); padding: 3px 10px; border-radius: 99px; font-size: 12.5px; letter-spacing: .06em; }
.store__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(255,122,30,.7); animation: ping 1.8s infinite; }
.store__btns { display: flex; gap: 10px; flex-wrap: wrap; }
/* 네온처럼 깜빡이며 켜지는 큰 NEW OPEN (간판의 네온과 맞춤) */
.store__neon { position: absolute; right: 40px; bottom: 64px; z-index: 0; font-family: "Montserrat", var(--sans); font-weight: 700; font-size: clamp(64px, 9vw, 140px); line-height: .9; letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1.5px rgba(255,122,30,.9); text-shadow: 0 0 18px rgba(255,122,30,.55), 0 0 42px rgba(255,122,30,.3); opacity: .9; pointer-events: none; white-space: nowrap; }
.store.is-lit .store__neon { animation: neonOn 1.6s steps(1) both, neonHum 4s 1.6s ease-in-out infinite; }
@keyframes neonOn { 0% { opacity: 0; } 10% { opacity: .9; } 14% { opacity: .1; } 22% { opacity: .9; } 26% { opacity: .2; } 40%, 100% { opacity: .9; } }
@keyframes neonHum { 50% { opacity: .7; } }
.fx .store:not(.is-lit) .store__neon { opacity: 0; }
.store__grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; grid-auto-rows: clamp(220px, 22vw, 320px); gap: 14px; margin-top: -40px; position: relative; z-index: 2; }
.store__pic { position: relative; margin: 0; border-radius: 22px; overflow: hidden; background: #111; border: 1px solid #1f1f22; }
.store__pic img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.55) brightness(.8); transform: scale(1.03); transition: filter .9s var(--ease), transform 1.4s var(--ease); }
.store__pic:hover img { filter: none; transform: scale(1); }
.store__pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.8), rgba(0,0,0,0) 50%); pointer-events: none; }
.store__pic figcaption { position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 16px; color: #c9ccd1; font-size: 14px; }
.store__pic figcaption b { display: block; color: #fff; font-size: 18px; margin-bottom: 2px; }

/* 오시는 길: 지도 | 매장 외관 */
.vtabs { position: absolute; z-index: 3; top: 16px; right: 16px; display: flex; gap: 4px; padding: 4px; border-radius: 99px; background: rgba(10,10,11,.8); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.1); }
.vtabs button { height: 36px; padding: 0 16px; border: 0; border-radius: 99px; background: transparent; color: #c9ccd1; font-weight: 600; font-size: 14px; cursor: pointer; transition: background .3s, color .3s; }
.vtabs button.is-on { background: var(--accent); color: #1a0c02; }
.visit__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; opacity: 0; transform: scale(1.06); transition: opacity .7s var(--ease), transform 1.2s var(--ease); pointer-events: none; }
.visit__card.is-photo .visit__photo { opacity: 1; transform: none; }
.visit__pin { z-index: 3; }

@media (max-width: 860px) {
  .store__grid { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; margin-top: -20px; }
  .store__pic { aspect-ratio: 4 / 3; }
  .store__pic:first-child { grid-column: span 2; aspect-ratio: 16 / 9; }
}
@media (max-width: 760px) {
  .store { padding-bottom: 90px; }
  .store__hero { min-height: 0; display: block; }
  .store__bg { position: relative; height: 56vw; z-index: 0; }
  .store__hero::after { background: linear-gradient(0deg, #050506 0%, rgba(5,5,6,0) 30%); height: 56vw; }
  .store__neon { bottom: auto; left: 16px; right: auto; top: calc(56vw - 0.62em); font-size: 54px; z-index: 1; }
  .store__copy { padding-top: 34px; padding-bottom: 50px; }
  .store__copy .lead br { display: none; }
  .store__btns .btn { flex: 1; padding: 0 14px; }
  .store__grid { margin-top: 0; gap: 10px; }
  .store__pic { border-radius: 16px; }
  .store__pic figcaption { left: 14px; bottom: 10px; font-size: 12.5px; }
  .store__pic figcaption b { font-size: 15.5px; }
  .vtabs { top: 10px; right: 10px; }
}


/* ═══ 복원 쇼 v8: 단계마다 한 바퀴 + 원형으로 덮기 + 빛줄기 + 글자 튀어 오르기 · 단계 칸 · 건너뛰기 ═══ */
.process { height: 420vh; }
.process__pin { padding-top: calc(var(--navh) + 10px); }
.process__spin { position: absolute; inset: 0; transition: transform 1.1s cubic-bezier(.65, 0, .25, 1); }
.process__zoom { position: absolute; inset: 3%; border-radius: 50%; overflow: hidden; box-shadow: 0 50px 100px -30px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.04); transition: box-shadow 1s; }
.process__imgs { position: absolute; inset: 0; border-radius: 0; overflow: visible; box-shadow: none; transition: transform 1.3s var(--ease); }
.process__imgs img { opacity: 0; transition: filter 1s; }
.process__imgs img.is-on { opacity: 1; z-index: 1; }
.process__imgs img.is-in { opacity: 1; z-index: 2; animation: iris 1s cubic-bezier(.65, 0, .25, 1) both; }
@keyframes iris { from { clip-path: circle(0% at 50% 50%); } to { clip-path: circle(71% at 50% 50%); } }
.process.is-final .process__zoom { box-shadow: 0 0 90px rgba(255,122,30,.3), 0 50px 100px -30px rgba(0,0,0,.9); }
.process.is-final .process__imgs img { filter: brightness(1.08) contrast(1.05); }
.process__sweep { position: absolute; inset: 3%; z-index: 3; border-radius: 50%; overflow: hidden; pointer-events: none; }
.process__sweep::before { content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,140,60,.5), transparent); transform: skewX(-14deg); opacity: 0; }
.process__sweep.is-white::before { background: linear-gradient(100deg, transparent, rgba(255,255,255,.7), transparent); }
.process__sweep.is-go::before { animation: sweep 1.1s .2s var(--ease) both; }
@keyframes sweep { 0% { left: -60%; opacity: 1; } 100% { left: 130%; opacity: 1; } }
.process__skip { position: absolute; z-index: 4; right: -4px; bottom: 1%; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 99px; background: rgba(20,20,22,.85); border: 1px solid #34353a; color: #d8dade; font-size: 13.5px; font-weight: 600; backdrop-filter: blur(8px); transition: border-color .3s, color .3s; }
.process__skip:hover { border-color: var(--accent); color: var(--accent); }
.process__skip span { display: inline-block; animation: skipBob 1.6s ease-in-out infinite; }
@keyframes skipBob { 50% { transform: translateY(3px); } }
.process__dots { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin: 24px 0 20px; }
.process__dots button { padding: 8px 0 0; border: 0; background: transparent; cursor: pointer; text-align: left; color: #5b5f66; font-size: 11.5px; font-weight: 700; transition: color .4s; }
.process__dots button i { display: block; height: 3px; margin-bottom: 7px; border-radius: 3px; background: #2a2b2f; transition: background .4s, box-shadow .4s; }
.process__dots button.is-done i { background: rgba(255,122,30,.45); }
.process__dots button.is-on { color: #fff; }
.process__dots button.is-on i { background: var(--accent); box-shadow: 0 0 10px rgba(255,122,30,.6); }
.process__dots button:hover { color: #c9ccd1; }
.process__now { min-height: 200px; }
.process__count { margin-bottom: 4px; }
.process__no { font-size: clamp(54px, 5vw, 80px); }
.process__title { display: block; margin: 2px 0 10px; font-size: clamp(30px, 3.2vw, 44px); font-weight: 800; letter-spacing: -.04em; line-height: 1.2; }
.process__title span { display: inline-block; }
.process__title.is-pop span { animation: charUp .65s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes charUp { from { opacity: 0; transform: translateY(70%) scale(.6); } }
.process__desc { margin: 0; max-width: 440px; color: var(--muted); font-size: 16px; }
.process__desc.is-pop { animation: descUp .6s .22s var(--ease) both; }
@keyframes descUp { from { opacity: 0; transform: translateY(14px); } }

/* ═══ 컬러 v8: 사진 · 토글 · 이름 붙은 칩을 한 화면에 ═══ */
.color__grid { grid-template-columns: 1.1fr 1fr; grid-template-areas: "view head" "view pick"; gap: 0 60px; align-items: start; }
.color__grid > * { min-width: 0; } /* 가로로 밀리는 칩 줄이 칸을 넓히지 않게 */
.color__head { grid-area: head; align-self: end; }
.color__view { grid-area: view; position: relative; aspect-ratio: 1; }
.color__pick { grid-area: pick; margin-top: 6px; }
.color__frame { position: absolute; inset: 0; border-radius: 28px; overflow: hidden; background: #0d0d0e; box-shadow: 0 50px 100px -40px rgba(0,0,0,.8); }
.color__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(0 0 0 0); transform: none; transition: clip-path .95s var(--ease), transform 1.4s var(--ease); }
.color__frame img.is-enter { clip-path: inset(0 0 0 100%); transform: scale(1.12); transition: none; }
.color__frame img.is-enter.is-from-l { clip-path: inset(0 100% 0 0); }
.color__toggle { position: absolute; z-index: 3; top: 16px; right: 16px; display: flex; gap: 4px; padding: 4px; border-radius: 99px; background: rgba(10,10,11,.75); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.12); }
.color__toggle button { height: 34px; padding: 0 14px; border: 0; border-radius: 99px; background: transparent; color: #ddd; font-weight: 600; font-size: 13.5px; cursor: pointer; transition: background .3s, color .3s; }
.color__toggle button.is-on { background: var(--accent); color: #1a0c02; }
.color__now { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; margin: 0; min-height: 0; padding: 80px 24px 22px; border-radius: 0 0 28px 28px; background: linear-gradient(0deg, rgba(0,0,0,.86), rgba(0,0,0,0)); pointer-events: none; }
.color__name { font-size: 30px; margin: 2px 0; color: #fff; }
.color__now > * { text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.color__desc { color: #d0d2d6; font-size: 14.5px; }
.color__view.is-swap .color__now > * { animation: descUp .5s var(--ease) both; }
.color__arrow { position: absolute; z-index: 3; top: 50%; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(10,10,11,.55); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; backdrop-filter: blur(6px); transition: background .3s, border-color .3s; }
.color__arrow:hover { background: var(--accent); border-color: var(--accent); color: #1a0c02; }
.color__arrow--prev { left: 14px; } .color__arrow--next { right: 14px; }
.color__credit { position: absolute; z-index: 3; top: 16px; left: 16px; padding: 5px 11px; border-radius: 99px; background: rgba(0,0,0,.5); font-size: 11px; color: rgba(255,255,255,.75); }
.cpills { display: flex; flex-wrap: wrap; gap: 8px; }
.cpill { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 6px; border-radius: 99px; border: 1px solid var(--line-2); background: transparent; color: #c5c8cd; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.cpill i { flex: none; width: 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 2px 5px rgba(255,255,255,.25), inset 0 -5px 8px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.14); }
.cpill:hover { border-color: #6b6e74; color: #fff; }
.cpill.is-on { background: #fff; color: #111; border-color: #fff; }
.color__pick .fine { margin-top: 18px; }

@media (max-width: 860px) {
  .process { height: 340vh; }
  .process__pin { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: start; gap: 14px; padding-top: calc(var(--navh) + 14px); }
  .process__stage { width: min(64vw, 36vh); }
  .process__copy .eyebrow { margin-bottom: 6px; font-size: 14px; }
  .process__copy .h2 { font-size: 20px; margin-bottom: 0; }
  .process__dots { margin: 14px 0 10px; gap: 4px; }
  .process__dots button { font-size: 10.5px; }
  .process__now { min-height: 170px; }
  .process__count { display: flex; }
  .process__no { font-size: 44px; }
  .process__of { font-size: 14px; padding-bottom: 6px; }
  .process__title { font-size: 28px; margin-bottom: 6px; }
  .process__desc { font-size: 14.5px; }
  .process__skip { right: -14px; bottom: -2%; height: 36px; padding: 0 13px; font-size: 12.5px; }
  .color__grid { grid-template-columns: 1fr; grid-template-areas: "head" "view" "pick"; gap: 0; }
  .color__head .h2 { margin-bottom: 20px; }
  .color__view { aspect-ratio: 4 / 3; width: 100%; max-width: none; margin: 0; }
  .color__pick { margin-top: 12px; }
  .cpills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gut)); padding: 2px var(--gut) 4px; }
  .cpills::-webkit-scrollbar { display: none; }
  .cpill { flex: none; height: 42px; font-size: 13.5px; }
  .cpill i { width: 30px; height: 30px; }
}
@media (max-width: 760px) {
  .color { padding: 70px 0; }
  .color__frame { border-radius: 20px; }
  .color__now { padding: 50px 16px 14px; border-radius: 0 0 20px 20px; }
  .color__name { font-size: 22px; }
  .color__desc { font-size: 13px; }
  .color__toggle { top: 10px; right: 10px; }
  .color__toggle button { height: 30px; padding: 0 11px; font-size: 12.5px; }
  .color__credit { top: 12px; left: 10px; font-size: 10px; }
  .color__arrow { width: 36px; height: 36px; margin-top: -18px; font-size: 20px; }
  .color__arrow--prev { left: 8px; } .color__arrow--next { right: 8px; }
}