/* 차곡하루 이사 — 포장이사 디자인 샘플 (디코랩)
   색은 이삿날 실물에서: 택배 라벨 종이, 유성 매직, 골판지, 취급주의 테이프, 스트레치 필름, 방 색 스티커 */
:root {
  --color-label: #FAF7F0;       /* 배경 — 라벨 종이 */
  --color-marker: #241C16;      /* 본문 글자·선 — 유성 매직 */
  --color-kraft: #C68A4C;       /* 히어로 면·시간축 채움 — 골판지 */
  --color-kraft-deep: #8C5A2B;  /* 시간 글자·보조 선 — 골판지 단면 */
  --color-kraft-pale: #F1E4D1;  /* 견적 구역 면 — 상자 안쪽 */
  --color-box: #D9A066;         /* 그림 속 상자 */
  --color-tape: #C9362B;        /* 주 버튼(견적 신청)에만 — 취급주의 테이프 */
  --color-tape-deep: #A92B22;
  --color-film: #E3ECEA;        /* 보조 면 — 스트레치 필름 */
  --color-muted: #6A5E54;
  --color-white: #FFFFFF;
  /* 방 색 스티커 — 포장 라벨, 트럭 속 상자, 배치도에 같은 색 */
  --sticker-kitchen: #F2C14E;
  --sticker-bedroom: #7FB7A9;
  --sticker-living: #9BBF6A;
  --sticker-bath: #E89A9A;

  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui,
          "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-display: "Dongle", var(--font);

  /* Dongle 은 글자가 작게 그려져서 한 단계 크게 잡는다 */
  --fs-h1: clamp(3.6rem, 2.4rem + 5vw, 6.6rem);
  --fs-h2: clamp(2.9rem, 2.1rem + 3vw, 4.4rem);
  --fs-h3: clamp(2.5rem, 1.9rem + 2.2vw, 3.6rem);
  --fs-body: 1.0625rem;
  --fs-small: .875rem;

  --radius: 10px;
  --header-h: 64px;
  --rail-h: 58px;
  --gutter: 20px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--color-marker);
  background: var(--color-label);
  word-break: keep-all;
  overflow-wrap: anywhere;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; line-height: 1.3; letter-spacing: -.02em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.container { width: min(1200px, 100% - var(--gutter) * 2); margin-inline: auto; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--color-marker); color: #fff; border-radius: 8px; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--color-tape); outline-offset: 3px; }
.br-pc { display: none; }

/* 실제 정보 자리 */
.ph { display: inline-block; padding: 0 .4em; border: 1.5px dashed currentColor; border-radius: 6px; opacity: .8; font-size: .92em; line-height: 1.6; }

/* 샘플 안내 띠 */
.sample-banner { background: var(--color-marker); color: #EDE6DC; font-size: var(--fs-small); line-height: 1.6; }
.sample-banner__inner { display: flex; gap: 10px; align-items: baseline; padding: 9px 0; }
.sample-banner__tag { flex: none; padding: 1px 8px; border-radius: 99px; background: var(--color-kraft); color: var(--color-marker); font-weight: 700; font-size: .78rem; }
.sample-banner a { color: #F2C98F; font-weight: 600; }

/* 헤더 — backdrop-filter 를 쓰지 않는다(모바일 메뉴가 헤더 높이로 잘리는 문제) */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--color-label); border-bottom: 2px solid var(--color-marker); }
.site-header__inner { display: flex; align-items: center; gap: 12px; height: var(--header-h); }
.logo { display: flex; align-items: center; gap: 8px; text-decoration: none; margin-right: auto; }
.logo svg { width: 36px; height: 36px; }
.logo b { font-family: var(--font-display); font-weight: 700; font-size: 2.15rem; line-height: 1; letter-spacing: 0; padding-top: 4px; }
.logo b span { margin-left: 4px; color: var(--color-kraft-deep); }
.gnb { display: flex; align-items: center; gap: 2px; }
.gnb a { position: relative; padding: 8px 10px; text-decoration: none; font-weight: 600; font-size: .95rem; border-radius: 8px; }
.gnb a:not(.gnb__cta):hover { background: var(--color-film); }
.gnb a.is-active:not(.gnb__cta)::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 3px; border-radius: 3px; background: var(--color-kraft); }
.gnb__cta { margin-left: 8px; background: var(--color-tape); color: #fff; padding: 8px 16px !important; border-radius: 99px !important; }
.gnb__cta:hover { background: var(--color-tape-deep); }
.header-tel { display: none; width: 42px; height: 42px; border: 2px solid var(--color-marker); border-radius: 50%; place-items: center; color: var(--color-marker); }
.header-tel svg { width: 20px; height: 20px; }
.menu-toggle { display: none; width: 44px; height: 44px; border: 0; background: none; padding: 0; cursor: pointer; position: relative; }
.menu-toggle__bar, .menu-toggle__bar::before, .menu-toggle__bar::after { position: absolute; left: 10px; width: 24px; height: 2.5px; border-radius: 2px; background: var(--color-marker); content: ""; transition: transform .25s, opacity .2s; }
.menu-toggle__bar { top: 21px; }
.menu-toggle__bar::before { left: 0; top: -7px; }
.menu-toggle__bar::after { left: 0; top: 7px; }
.site-header.is-open .menu-toggle__bar { background: transparent; }
.site-header.is-open .menu-toggle__bar::before { transform: translateY(7px) rotate(45deg); }
.site-header.is-open .menu-toggle__bar::after { transform: translateY(-7px) rotate(-45deg); }

/* 버튼 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 24px; border-radius: 999px; font-weight: 700; font-size: 1.02rem; text-decoration: none; border: 2px solid var(--color-marker); cursor: pointer; font-family: inherit; line-height: 1.3; text-align: center; transition: transform .18s ease, background-color .18s ease; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px); }
.btn--tape { background: var(--color-tape); border-color: var(--color-tape); color: #fff; }
.btn--tape:hover { background: var(--color-tape-deep); border-color: var(--color-tape-deep); }
.btn--line { background: transparent; color: var(--color-marker); }
.btn--line:hover { background: rgba(255,255,255,.35); }
.btn--line-dark { background: var(--color-white); color: var(--color-marker); }
.btn--line-dark:hover { background: var(--color-film); }
.btn--kakao { background: #FEE500; color: #191919; }
.btn--kakao:hover { background: #F5DA00; }
.btn--block { width: 100%; }
.btn--sm { min-height: 46px; font-size: .95rem; padding: 0 18px; }

/* 섹션 공통 — 섹션 여백은 .section 과 .step 에서만 정한다 */
.section { padding: clamp(72px, 9vw, 120px) 0; }
.kicker { display: inline-block; margin-bottom: 10px; padding: 1px 12px; border: 2px solid currentColor; border-radius: 6px; font-weight: 700; font-size: var(--fs-small); }
.section-head { max-width: 38em; margin-bottom: 36px; }
.section-head h2, .day__intro h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); line-height: 1; letter-spacing: 0; margin-bottom: 14px; }
.section-head > p:not(.kicker), .day__intro > p:not(.kicker) { color: var(--color-muted); }

/* ---------- 1. 히어로: 상자 옆면 ---------- */
.hero { position: relative; overflow: hidden; background-color: var(--color-kraft);
  background-image: repeating-linear-gradient(90deg, rgba(36,28,22,.05) 0 2px, transparent 2px 10px);
  padding: 92px 0 0; border-bottom: 2px solid var(--color-marker); }
.hero__tape { position: absolute; left: -5%; right: -5%; top: 22px; height: 44px; display: flex; align-items: center; background: var(--color-tape); color: #fff; transform: rotate(-1.6deg); overflow: hidden; white-space: nowrap; border-block: 2px solid rgba(36,28,22,.35); }
.hero__tape span { font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; line-height: 1; padding-top: 4px; letter-spacing: .02em; }
.hero__grid { position: relative; display: grid; gap: 30px; }
.hero__kicker { font-weight: 700; margin-bottom: 12px; }
.hero__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h1); line-height: .95; letter-spacing: 0; margin-bottom: 18px; }
.hero__lead { max-width: 31em; margin-bottom: 26px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.hero__call { font-weight: 600; }
.hero__call a { font-weight: 800; font-variant-numeric: tabular-nums; }
.hero__call small { font-weight: 500; }
.hero__art { position: relative; display: grid; justify-items: center; gap: 0; }
.ship-label { width: min(100%, 400px); background: var(--color-white); border: 2.5px solid var(--color-marker); border-radius: 8px; padding: 18px 20px 16px; transform: rotate(-2deg); position: relative; z-index: 1; }
.ship-label::before { content: ""; position: absolute; left: 50%; top: -14px; width: 120px; height: 26px; margin-left: -60px; background: rgba(250,247,240,.75); border: 1.5px solid rgba(36,28,22,.25); transform: rotate(3deg); }
.ship-label__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; border-bottom: 2.5px solid var(--color-marker); padding-bottom: 6px; margin-bottom: 4px; }
.ship-label__head p:first-child { font-family: var(--font-display); font-weight: 700; font-size: 2.2rem; line-height: 1; }
.ship-label__to { font-size: var(--fs-small); color: var(--color-muted); }
.ship-label__to b { color: var(--color-marker); font-size: 1rem; }
.ship-label__rows { list-style: none; margin: 0; padding: 0; }
.ship-label__rows li { display: grid; grid-template-columns: 3.6em 1fr; align-items: baseline; padding: 3px 0; border-bottom: 1.5px dashed rgba(36,28,22,.3); font-weight: 700; }
.ship-label__rows time { font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; line-height: 1.1; color: var(--color-kraft-deep); }
.ship-label__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; font-size: .8rem; color: var(--color-muted); }
.ship-label__code { width: 130px; height: 30px; background: repeating-linear-gradient(90deg, var(--color-marker) 0 2px, transparent 2px 4px, var(--color-marker) 4px 7px, transparent 7px 9px, var(--color-marker) 9px 10px, transparent 10px 13px); }
.hero-truck { width: min(100%, 460px); height: auto; margin-top: 18px; position: relative; z-index: 2; }
.hero-truck__body { transform-box: view-box; }

/* 등장: 보이는 상태가 기본, has-motion 일 때만 숨겼다 보여 준다 */
.has-motion [data-hero-item] { opacity: 0; transform: translateY(16px); }
.has-motion .is-ready [data-hero-item] { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1); }
.has-motion .is-ready [data-hero-item]:nth-child(2) { transition-delay: .07s; }
.has-motion .is-ready [data-hero-item]:nth-child(3) { transition-delay: .14s; }
.has-motion .is-ready [data-hero-item]:nth-child(4) { transition-delay: .21s; }
.has-motion .is-ready [data-hero-item]:nth-child(5) { transition-delay: .28s; }
.has-motion .hero .ship-label { opacity: 0; transform: rotate(-6deg) scale(1.08); }
.has-motion .hero.is-ready .ship-label { opacity: 1; transform: rotate(-2deg); transition: opacity .3s ease .25s, transform .55s cubic-bezier(.3,1.4,.5,1) .25s; }
.has-motion .hero .hero-truck__body { opacity: 0; transform: translateX(-90px); }
.has-motion .hero.is-ready .hero-truck__body { opacity: 1; transform: none; transition: opacity .3s ease .5s, transform 1s cubic-bezier(.2,.8,.25,1) .5s; }

.has-motion .reveal { opacity: 0; transform: translateY(22px); }
.has-motion .reveal.is-in { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1); }

/* ---------- 2. 이사 당일 하루 — 시간축 + 단계 ---------- */
.day { position: relative; }
.day__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.day__steps { min-width: 0; }
.day__intro { padding: 56px 0 8px; max-width: 38em; }

/* 시간축 — 모바일: #day 안에서만 헤더 아래 붙는 얇은 진행 막대 */
.rail { position: sticky; top: var(--header-h); z-index: 30; margin-inline: calc(var(--gutter) * -1); padding: 8px var(--gutter) 10px; background: var(--color-label); border-bottom: 2px solid var(--color-marker); }
.rail__now { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.rail__label { display: none; }
.rail__step { order: -1; font-weight: 700; font-size: .95rem; line-height: 1.4; }
.rail__step time { font-family: var(--font-display); font-size: 1.7rem; line-height: .8; color: var(--color-kraft-deep); margin-right: 4px; }
.rail__clock { font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; line-height: .9; font-variant-numeric: tabular-nums; }
.rail__clock small { font-size: .7em; margin-left: 1px; color: var(--color-muted); }
.rail__bar { position: relative; height: 8px; margin-top: 6px; border-radius: 99px; background: var(--color-film); border: 1.5px solid var(--color-marker); overflow: hidden; }
.rail__bar-fill { position: absolute; inset: 0; background: var(--color-kraft); transform-origin: left center; transform: scaleX(var(--p, 0)); }
.rail__body { display: none; }

.step { padding: 64px 0; border-top: 2px dashed rgba(36,28,22,.28); scroll-margin-top: var(--rail-h); }
.day__intro + .step { border-top: 0; }
.step__head { max-width: 40em; margin-bottom: 30px; }
.step__time { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 10px; font-weight: 700; }
.step__time time { font-family: var(--font-display); font-weight: 700; font-size: clamp(4rem, 3rem + 3vw, 5.6rem); line-height: .7; color: var(--color-kraft-deep); font-variant-numeric: tabular-nums; }
.step__head h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); line-height: 1; letter-spacing: 0; margin-bottom: 12px; }
.step__head > p:last-child { color: var(--color-muted); }
.step h4 { font-size: 1.12rem; line-height: 1.45; margin-bottom: 4px; }

/* 07:00 도착·보양 */
.arrive__grid { display: grid; gap: 22px; align-items: start; }
.cover-list { list-style: none; margin: 0; padding: 0; }
.cover-list li { display: grid; grid-template-columns: 48px 1fr; gap: 14px; padding: 16px 0; border-top: 1.5px solid rgba(36,28,22,.18); }
.cover-list li:first-child { border-top: 2px solid var(--color-marker); }
.cover-list svg { width: 48px; height: 48px; color: var(--color-kraft-deep); }
.cover-list p { color: var(--color-muted); }
.memo { position: relative; background: var(--color-film); border: 2px solid var(--color-marker); border-radius: var(--radius); padding: 28px 22px 22px; }
.memo::before { content: ""; position: absolute; top: -13px; left: 24px; width: 92px; height: 24px; background: var(--color-kraft); opacity: .9; transform: rotate(-4deg); }
.memo ul { margin: 8px 0 14px; padding-left: 1.15em; }
.memo li { margin-bottom: 6px; }
.memo__team { font-size: .95rem; padding-top: 12px; border-top: 1.5px dashed rgba(36,28,22,.35); }
.memo__team a { font-weight: 700; }

/* 07:30 방별 포장 — 방 라벨 */
.labels { display: grid; gap: 16px; }
.room-label { --sticker: var(--color-kraft); position: relative; background: var(--color-white); border: 2px solid var(--color-marker); border-radius: 8px; padding: 18px 20px 20px; }
.room-label--kitchen { --sticker: var(--sticker-kitchen); }
.room-label--bedroom { --sticker: var(--sticker-bedroom); }
.room-label--living { --sticker: var(--sticker-living); }
.room-label--bath { --sticker: var(--sticker-bath); }
.room-label__tag { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-family: var(--font-display); font-weight: 700; font-size: 2.1rem; line-height: 1; padding-bottom: 8px; border-bottom: 2px solid var(--color-marker); }
.room-label__tag i { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--sticker); border: 2px solid var(--color-marker); }
.room-label__tag span { margin-left: auto; font-family: var(--font); font-size: .8rem; font-weight: 600; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.room-label ul { margin: 6px 0 0; padding-left: 1.1em; color: var(--color-muted); }
.room-label li { margin-bottom: 4px; }
.room-label li::marker { color: var(--color-kraft-deep); }

/* 10:30 싣기·이동 — 트럭 적재 가늠 */
.loader { display: grid; gap: 18px; }
.loader__stage { position: sticky; top: calc(var(--header-h) + var(--rail-h)); z-index: 5; background: var(--color-label); border: 2px solid var(--color-marker); border-radius: 12px; padding: 8px 10px 8px; }
.loader__svg { width: 100%; height: auto; }
.loader__mini { text-align: center; font-weight: 800; font-size: .95rem; padding-top: 2px; font-variant-numeric: tabular-nums; }
.loader__grid { display: grid; gap: 18px; align-items: start; }
.loader__form { display: grid; gap: 16px; }
.opt { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.opt legend { width: 100%; margin-bottom: 8px; font-weight: 800; }
.opt legend small { font-weight: 500; color: var(--color-muted); margin-left: 6px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 15px; border-radius: 8px; border: 2px solid var(--color-marker); background: var(--color-white); font-weight: 700; font-size: .95rem; line-height: 1.3; transition: background-color .18s, color .18s; }
.chip input:checked + span { background: var(--color-marker); color: var(--color-label); }
.chip input[type="checkbox"]:checked + span::before { content: ""; width: 9px; height: 5px; margin-right: 8px; border-left: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: translateY(-2px) rotate(-45deg); }
.chip input:focus-visible + span { outline: 3px solid var(--color-tape); outline-offset: 2px; }
.loader__result { background: var(--color-film); border: 2px solid var(--color-marker); border-radius: 12px; padding: 20px 20px 22px; }
.loader__kicker { font-weight: 700; color: var(--color-muted); font-size: var(--fs-small); }
.loader__truck { font-family: var(--font-display); font-weight: 700; font-size: 3rem; line-height: 1; margin: 2px 0 10px; }
.loader__facts { margin: 0 0 12px; border-top: 2px solid var(--color-marker); }
.loader__facts div { display: grid; grid-template-columns: 6em 1fr; gap: 8px; padding: 8px 0; border-bottom: 1.5px solid rgba(36,28,22,.2); }
.loader__facts dt { font-weight: 700; }
.loader__facts dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.loader__notes { margin: 0 0 12px; padding-left: 1.1em; font-size: .95rem; }
.loader__notes li { margin-bottom: 4px; }
.loader__notes:empty { display: none; }
.loader__caution { font-size: var(--fs-small); color: var(--color-muted); margin-bottom: 14px; }

/* 트럭 그림 */
.tb-cargo { fill: var(--color-film); }
.tb-grid { stroke: rgba(36,28,22,.08); stroke-width: 1; }
.tb-frame { fill: none; stroke: var(--color-marker); stroke-width: 4; }
.tb-roof { fill: #F4F2EC; stroke: var(--color-marker); stroke-width: 3; }
.tb-chassis { fill: var(--color-marker); }
.tb-cab { fill: #F4F2EC; stroke: var(--color-marker); stroke-width: 4; stroke-linejoin: round; }
.tb-window { fill: var(--color-film); stroke: var(--color-marker); stroke-width: 3; stroke-linejoin: round; }
.tb-wheel { fill: var(--color-marker); }
.tb-hub { fill: #F4F2EC; }
.tb-light { fill: var(--sticker-kitchen); stroke: var(--color-marker); stroke-width: 2.5; }
.tb-name { font: 700 46px var(--font-display); fill: var(--color-marker); }
.tb-cap { font: 700 16px var(--font); fill: var(--color-muted); }
.ci rect, .ci path, .ci circle, .ci line { stroke: var(--color-marker); stroke-width: 2.5; stroke-linejoin: round; }
.ci .ci-detail { fill: none; stroke-width: 2; }
.ci-label { font: 800 14px var(--font); fill: var(--color-marker); text-anchor: middle; stroke: none !important; }
.ci-label--v { writing-mode: vertical-rl; }
.ci-box rect { fill: var(--color-box); }
.ci-box .ci-tape { stroke: var(--color-kraft-deep); stroke-width: 3; }
.ci-place { transition: transform .45s cubic-bezier(.3,1.25,.5,1); }

/* 13:30 입주 정리 */
.settle__grid { display: grid; gap: 22px; align-items: start; }
.plan { margin: 0; }
.plan svg { width: 100%; height: auto; }
.plan figcaption { font-size: var(--fs-small); color: var(--color-muted); margin-top: 8px; }
.plan__room { font: 700 34px var(--font-display); fill: var(--color-marker); text-anchor: middle; }
.plan__item { font: 700 14px var(--font); fill: var(--color-marker); text-anchor: middle; }
.settle__list { list-style: none; margin: 0; padding: 0; }
.settle__list li { padding: 16px 0; border-top: 1.5px solid rgba(36,28,22,.18); }
.settle__list li:first-child { border-top: 2px solid var(--color-marker); }
.settle__list p { color: var(--color-muted); }

/* 16:30 마무리 점검 */
.check__grid { display: grid; gap: 22px; align-items: start; }
.checklist { border: 2px solid var(--color-marker); border-radius: var(--radius); background: var(--color-white); margin: 0; padding: 8px 20px 12px; }
.checklist legend { padding: 0 8px; margin-left: -8px; font-weight: 800; background: var(--color-label); }
.checklist legend small { font-weight: 500; color: var(--color-muted); margin-left: 6px; }
.checklist label { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; padding: 12px 0; border-bottom: 1.5px dashed rgba(36,28,22,.3); cursor: pointer; }
.checklist label:last-child { border-bottom: 0; }
.checklist input { width: 22px; height: 22px; margin: 3px 0 0; accent-color: var(--color-marker); }
.checklist input:checked + span { color: var(--color-muted); }
.damage { border: 2px dashed var(--color-kraft-deep); border-radius: var(--radius); padding: 20px; }
.damage p { color: var(--color-muted); }
.damage p + p { margin-top: 10px; }
.day-end { margin-top: 36px; display: grid; gap: 4px 24px; align-items: center; background: var(--color-marker); color: var(--color-label); border-radius: 12px; padding: 22px 24px; }
.day-end__time { font-family: var(--font-display); font-weight: 700; font-size: 4.4rem; line-height: .8; color: var(--color-kraft); padding-top: 6px; }
.day-end__text { font-weight: 600; }

/* ---------- 3. 견적 방식 + 신청 ---------- */
.estimate { background: var(--color-kraft-pale); border-top: 2px solid var(--color-marker); }
.ways { display: grid; gap: 16px; margin-bottom: 40px; }
.way { background: var(--color-white); border: 2px solid var(--color-marker); border-radius: var(--radius); padding: 22px 22px 24px; }
.way h3 { font-family: var(--font-display); font-weight: 700; font-size: 2.6rem; line-height: 1; letter-spacing: 0; }
.way__meta { font-weight: 700; color: var(--color-kraft-deep); margin: 4px 0 10px; }
.way ul { margin: 0; padding-left: 1.1em; color: var(--color-muted); }
.way li { margin-bottom: 4px; }
.way--video { background: var(--color-film); }

.apply { display: grid; gap: 22px; align-items: start; }
.apply__form { background: var(--color-white); border: 2px solid var(--color-marker); border-radius: 12px; padding: 22px; display: grid; gap: 16px; }
.apply__form h3 { font-family: var(--font-display); font-weight: 700; font-size: 2.8rem; line-height: 1; letter-spacing: 0; }
.apply__lead { color: var(--color-muted); margin-top: -10px; }
.apply__row { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; border: 0; margin: 0; padding: 0; min-width: 0; }
.field label, .field legend { font-weight: 700; font-size: .95rem; }
.field label small { font-weight: 500; color: var(--color-muted); margin-left: 4px; }
.field--chips { display: flex; flex-wrap: wrap; gap: 8px; }
.field--chips legend { width: 100%; margin-bottom: 6px; }
.field input[type="text"], .field input[type="tel"], .field input[type="date"], .field textarea { width: 100%; min-height: 50px; padding: 10px 14px; border: 2px solid var(--color-marker); border-radius: 8px; background: #fff; font: inherit; font-size: 16px; color: var(--color-marker); }
.field textarea { resize: vertical; background: var(--color-film); line-height: 1.6; }
.consent { font-size: .95rem; }
.consent label { display: flex; gap: 8px; align-items: center; font-weight: 600; }
.consent input { width: 20px; height: 20px; accent-color: var(--color-marker); }
.consent details { margin-top: 6px; color: var(--color-muted); font-size: var(--fs-small); }
.consent summary { cursor: pointer; text-decoration: underline; }
.apply__error { color: #B3261E; font-weight: 700; font-size: .95rem; }
.apply__done { padding: 14px 16px; border-radius: 10px; background: var(--color-film); border: 2px solid var(--color-marker); font-weight: 600; }
.apply__side { display: grid; gap: 10px; padding: 4px 0; }
.apply__side-title { font-family: var(--font-display); font-weight: 700; font-size: 2.2rem; line-height: 1; }
.apply__side-note { font-size: var(--fs-small); color: var(--color-muted); }

/* ---------- 4. FAQ ---------- */
.faq__grid { display: grid; gap: 10px; }
.qa { border-bottom: 2px solid var(--color-marker); }
.qa:first-child { border-top: 2px solid var(--color-marker); }
.qa h3 { font-size: 1.08rem; }
.qa button { width: 100%; display: flex; justify-content: space-between; gap: 16px; align-items: center; text-align: left; padding: 18px 2px; border: 0; background: none; font: inherit; font-weight: 700; color: inherit; cursor: pointer; line-height: 1.45; }
.qa button::after { content: ""; flex: none; width: 26px; height: 26px; border-radius: 6px; border: 2px solid var(--color-marker); background: linear-gradient(var(--color-marker), var(--color-marker)) center / 12px 2px no-repeat, linear-gradient(var(--color-marker), var(--color-marker)) center / 2px 12px no-repeat; transition: transform .25s ease, background-color .2s; }
.qa button[aria-expanded="true"]::after { transform: rotate(45deg); background-color: var(--color-kraft); }
.qa__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.qa__panel > div { overflow: hidden; min-height: 0; }
.qa__panel p { padding: 0 2px 18px; color: var(--color-muted); }
.qa h3:has(button[aria-expanded="true"]) + .qa__panel { grid-template-rows: 1fr; }

/* ---------- 5. 상담 안내 ---------- */
.location { background: var(--color-white); border-top: 2px solid var(--color-marker); }
.location__grid { display: grid; gap: 30px; align-items: center; }
.info { margin: 0 0 24px; }
.info div { display: grid; grid-template-columns: 6.5em 1fr; gap: 10px; padding: 10px 0; border-bottom: 1.5px solid rgba(36,28,22,.18); }
.info dt { font-weight: 700; }
.info dd { margin: 0; color: var(--color-muted); }
.info a { font-weight: 800; color: var(--color-marker); }
.location__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.map-art svg { width: 100%; height: auto; border: 2px solid var(--color-marker); border-radius: 12px; }
.map-art__label { font: 700 34px var(--font-display); fill: var(--color-marker); }
.map-art__sub { font: 700 16px var(--font); fill: var(--color-marker); }
.map-art__sub2 { font: 600 16px var(--font); fill: var(--color-marker); }

/* 푸터 */
.site-footer { background: var(--color-marker); color: #D7CFC5; font-size: var(--fs-small); padding: 40px 0 calc(40px + 64px + env(safe-area-inset-bottom)); }
.site-footer__inner { display: grid; gap: 18px; }
.site-footer__logo { font-family: var(--font-display); font-weight: 700; font-size: 2.2rem; line-height: 1; color: #fff; margin-bottom: 10px; }
.site-footer__biz { line-height: 1.9; }
.site-footer__links { margin-top: 10px; display: flex; gap: 16px; }
.site-footer__links .strong { font-weight: 800; color: #fff; }
.site-footer__credit a { color: #F2C98F; }

/* 모바일 하단 고정 바 */
.quickbar { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1fr 1.5fr; background: var(--color-label); border-top: 2px solid var(--color-marker); padding-bottom: env(safe-area-inset-bottom); }
.quickbar a { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 58px; text-decoration: none; font-weight: 700; font-size: .95rem; }
.quickbar a + a { border-left: 1.5px solid rgba(36,28,22,.2); }
.quickbar svg { width: 20px; height: 20px; }
.quickbar__cta { background: var(--color-tape); color: #fff; }
body.nav-open .quickbar { visibility: hidden; }

/* 모바일 메뉴 */
@media (max-width: 1023px) {
  .header-tel { display: grid; }
  .menu-toggle { display: block; }
  .gnb { position: fixed; z-index: 45; left: 0; right: 0; top: var(--menu-top, var(--header-h)); bottom: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 12px var(--gutter) 40px; background: var(--color-label); overflow-y: auto; visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease, visibility 0s .2s; }
  .site-header.is-open .gnb { visibility: visible; opacity: 1; transform: none; transition: opacity .2s ease, transform .2s ease; }
  .gnb a { padding: 15px 4px; font-size: 1.1rem; border-radius: 0; border-bottom: 1.5px solid rgba(36,28,22,.15); }
  .gnb a.is-active:not(.gnb__cta)::after { left: auto; right: 4px; top: 50%; bottom: auto; width: 10px; height: 10px; border-radius: 50%; transform: translateY(-50%); }
  .gnb__cta { margin: 18px 0 0; text-align: center; border-bottom: 0 !important; }
  body.nav-open .rail { visibility: hidden; }
}

@media (min-width: 600px) {
  .apply__row { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 720px) {
  .ways { grid-template-columns: 1.15fr 1fr; }
  .labels { grid-template-columns: 1.1fr 1fr; }
  .room-label--kitchen { grid-row: span 2; }
  .room-label--bath { grid-column: 1 / -1; }
  .room-label--bath ul { columns: 2; column-gap: 32px; }
  .arrive__grid { grid-template-columns: 1.25fr 1fr; gap: 32px; }
  .settle__grid { grid-template-columns: 1.1fr 1fr; gap: 32px; }
  .check__grid { grid-template-columns: 1.2fr 1fr; gap: 28px; }
  .day-end { grid-template-columns: auto 1fr; }
  .site-footer__inner { grid-template-columns: 1fr auto; align-items: end; }
}

@media (min-width: 1024px) {
  :root { --header-h: 72px; }
  .br-pc { display: inline; }
  .quickbar { display: none; }
  .site-footer { padding-bottom: 40px; }
  .hero { padding-top: 104px; }
  .hero__grid { grid-template-columns: 1.1fr .9fr; align-items: end; gap: 40px; }
  .hero__copy { padding-bottom: 72px; }
  .hero__art { padding-top: 10px; }

  /* 시간축 — 데스크톱: 왼쪽 열에 고정 */
  .day__grid { grid-template-columns: 250px minmax(0, 1fr); column-gap: 64px; }
  .rail { align-self: start; top: calc(var(--header-h) + 28px); margin: 56px 0 56px; padding: 0; border: 0; background: none; z-index: 2; }
  .rail__now { display: block; }
  .rail__label { display: block; font-size: var(--fs-small); color: var(--color-muted); font-weight: 600; }
  .rail__clock { font-size: 4.6rem; line-height: .8; padding-top: 8px; }
  .rail__step, .rail__bar { display: none; }
  .rail__body { --row: 60px; --list-top: 18px; display: block; position: relative; }
  .rail__list { list-style: none; margin: var(--list-top) 0 22px; padding: 0; }
  .rail__list li { position: relative; height: var(--row); }
  .rail__list a, .rail__end { display: grid; grid-template-columns: 3em 1fr; align-items: center; column-gap: 6px; height: 100%; padding-left: 40px; text-decoration: none; border-radius: 8px; transition: background-color .2s; }
  .rail__list a:hover { background: var(--color-film); }
  .rail__list a::before, .rail__end::before { content: ""; position: absolute; left: 8px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; border: 3px solid var(--color-marker); background: var(--color-label); z-index: 1; transition: background-color .2s; }
  .rail__list time { font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; line-height: 1; padding-top: 3px; color: var(--color-kraft-deep); font-variant-numeric: tabular-nums; }
  .rail__list span { font-weight: 600; font-size: .95rem; line-height: 1.3; }
  .rail__list small { display: block; font-size: .78rem; color: var(--color-muted); font-weight: 600; }
  .rail__list .is-past::before { background: var(--color-kraft); }
  .rail__list .is-active { background: var(--color-film); }
  .rail__list .is-active::before { background: var(--color-marker); }
  .rail__list .is-active span { font-weight: 800; }
  .rail__track { position: absolute; left: 15px; width: 4px; top: calc(var(--list-top) + var(--row) / 2); height: calc(var(--row) * 5); background: rgba(36,28,22,.18); border-radius: 2px; }
  .rail__fill { position: absolute; inset: 0; background: var(--color-kraft); transform-origin: center top; transform: scaleY(var(--p, 0)); border-radius: 2px; }
  .rail__truck { position: absolute; left: 50%; top: 0; z-index: 2; width: 34px; height: 24px; display: grid; place-items: center; background: var(--color-label); border-radius: 6px; transform: translate(-50%, calc(var(--p, 0) * var(--row) * 5 - 50%)); }
  .rail__truck svg { width: 30px; height: 19px; }
  .rail__cta { width: 100%; }

  .day__intro { padding-top: 72px; }
  .step { padding: 88px 0; scroll-margin-top: 0; }
  .loader__stage { top: calc(var(--header-h) + 14px); padding: 12px 16px 10px; }
  .loader__grid { grid-template-columns: 1.3fr 1fr; gap: 28px; }
  .chip span { min-height: 42px; padding: 7px 13px; }
  .apply { grid-template-columns: 1.7fr 1fr; gap: 32px; }
  .faq__grid { grid-template-columns: .8fr 1.2fr; gap: 50px; align-items: start; }
  .location__grid { grid-template-columns: 1fr 1fr; gap: 50px; }
}

@media (max-width: 599px) {
  .ci-label, .tb-cap, .tb-name { display: none; }
}

/* 동작 줄이기 — 마지막 안전망. 3단계(색·투명도 피드백)는 다시 살린다 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover { transform: none; }
  .chip span, .qa__panel, .rail__list a { transition-duration: .2s !important; }
}
.reduce-motion .ci-place { transition: none; }