/* 김하린 통번역 — 영한 통번역가 개인 사이트 디자인 샘플 (디코랩)
   구성: 페이지 전체가 좌우 대역본. 왼쪽 한국어 | 가운데 축(메뉴) | 오른쪽 영어.
   색은 번역가의 책상에서: 회색 편집기 책상, 흰 원고지, 만년필 잉크, 색인 플래그 코랄 */
:root {
  --color-desk: #F3F4F6;       /* 바탕 */
  --color-sheet: #FFFFFF;      /* 대역본 종이 */
  --color-ink: #1D2230;        /* 본문 글자 */
  --color-nib: #2F4A8A;        /* 영어 단 라벨·번호 */
  --color-flag: #FF6F61;       /* 주 버튼·견적 결과 — 전환에만 */
  --color-flag-deep: #E2483A;  /* 코랄 위 글자 대신 선·테두리 */
  --color-tint: #FFE8E4;       /* 짝 문단 강조 바탕 */
  --color-nib-tint: #E6ECF8;   /* 용어 짝 강조 */
  --color-rule: #C9CED8;       /* 정렬선·가운데 축 */
  --color-rule-soft: #E3E6EC;
  --color-muted: #5A6170;

  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui,
          "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-ko: "Nanum Gothic", var(--font);
  --font-en: "Source Serif 4", Georgia, "Times New Roman", serif;

  --fs-h1: clamp(1.95rem, 1.35rem + 2.2vw, 3rem);
  --fs-h2: clamp(1.55rem, 1.2rem + 1.3vw, 2.25rem);
  --fs-h3: 1.15rem;
  --fs-ko: 1.0625rem;
  --fs-en: 1.125rem;
  --fs-small: .875rem;

  --radius: 4px;
  --header-h: 60px;
  --axis: 168px;
  --pad: 20px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-ko);
  line-height: 1.75;
  color: var(--color-ink);
  background: var(--color-desk);
  word-break: keep-all;
  overflow-wrap: anywhere;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { line-height: 1.3; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
p, ul, ol, dl, dd { margin: 0; }
p { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
[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; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--color-ink); color: #fff; border-radius: 6px; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--color-nib); outline-offset: 3px; }

/* 실제 정보 자리 */
.ph { display: inline-block; padding: 0 .4em; border: 1.5px dashed currentColor; border-radius: 4px; opacity: .78; font-size: .9em; line-height: 1.5; font-family: var(--font); }

/* 샘플 안내 띠 (고정은 /demo/_shared/sample-banner.*) */
.sample-banner { background: var(--color-ink); color: #E8EBF1; font-size: var(--fs-small); line-height: 1.6; }
.sample-banner__inner { display: flex; gap: 10px; align-items: baseline; padding: 8px var(--pad); max-width: 1320px; margin: 0 auto; }
.sample-banner__tag { flex: none; padding: 1px 8px; border-radius: 99px; background: var(--color-flag); color: var(--color-ink); font-weight: 700; font-size: .78rem; }
.sample-banner a { color: #FFB3AA; font-weight: 600; }

/* ---------- 헤더 ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--color-sheet); border-bottom: 1px solid var(--color-rule); }
.site-header__inner { display: flex; align-items: center; gap: 10px; height: var(--header-h); padding: 0 var(--pad); max-width: 1320px; margin: 0 auto; }
.logo { display: flex; align-items: center; gap: 9px; text-decoration: none; margin-right: auto; min-width: 0; }
.logo svg { width: 34px; height: 34px; flex: none; }
.logo__name { display: flex; flex-direction: column; line-height: 1.15; }
.logo__name b { font-family: var(--font-ko); font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; }
.logo__name span { font-family: var(--font-en); font-size: .82rem; color: var(--color-nib); }

.lang-switch { display: inline-flex; border: 1px solid var(--color-ink); border-radius: 99px; padding: 2px; flex: none; }
.lang-switch button { border: 0; background: none; padding: 5px 10px; min-height: 34px; border-radius: 99px; font-size: .82rem; font-weight: 700; cursor: pointer; transition: background-color .2s, color .2s; }
.lang-switch button[aria-pressed="true"] { background: var(--color-ink); color: #fff; }
.header-tel { display: none; font-weight: 700; font-size: .92rem; text-decoration: none; font-variant-numeric: tabular-nums; }
.site-header .header-cta { display: none; }
.logo__name { white-space: nowrap; }

.menu-toggle { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--color-rule); border-radius: 8px; background: var(--color-sheet); cursor: pointer; flex: none; }
.menu-toggle__bar, .menu-toggle__bar::before, .menu-toggle__bar::after { display: block; width: 18px; height: 2px; background: var(--color-ink); border-radius: 2px; transition: transform .2s ease; }
.menu-toggle__bar { position: relative; }
.menu-toggle__bar::before, .menu-toggle__bar::after { content: ""; position: absolute; left: 0; }
.menu-toggle__bar::before { transform: translateY(-6px); }
.menu-toggle__bar::after { transform: translateY(6px); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar::before { transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar::after { transform: rotate(-45deg); }

/* ---------- 버튼 ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border-radius: 99px; font-family: var(--font); font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer; border: 1.5px solid var(--color-ink); transition: background-color .2s, color .2s, transform .2s; }
.btn--flag { background: var(--color-flag); border-color: var(--color-flag); color: var(--color-ink); }
.btn--flag:hover { background: #FF5A4B; }
.btn--line { background: var(--color-sheet); color: var(--color-ink); }
.btn--line:hover { background: var(--color-ink); color: #fff; }
.btn:active { transform: translateY(1px); }

/* ---------- 가운데 축 메뉴: 모바일은 헤더 아래 서랍 ---------- */
.axis { position: fixed; z-index: 45; left: 0; right: 0; top: var(--menu-top, 120px); bottom: 0; background: var(--color-sheet); padding: 8px var(--pad) 40px; overflow-y: auto; visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease, visibility 0s .2s; }
body.nav-open .axis { visibility: visible; opacity: 1; transform: none; transition: opacity .2s ease, transform .2s ease; }
.axis a { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px; padding: 14px 4px; border-bottom: 1px solid var(--color-rule-soft); text-decoration: none; }
.axis b { order: -1; display: grid; place-items: center; width: 32px; height: 32px; border: 1.5px solid var(--color-ink); border-radius: 50%; font-size: .9rem; font-variant-numeric: tabular-nums; }
.axis__ko { font-family: var(--font-ko); font-weight: 700; font-size: 1.05rem; }
.axis__en { font-family: var(--font-en); color: var(--color-nib); }
.axis a.is-active b { background: var(--color-flag); border-color: var(--color-flag); }
.axis a.is-active .axis__ko { text-decoration: underline; text-decoration-color: var(--color-flag); text-decoration-thickness: 3px; text-underline-offset: 6px; }

/* ---------- 종이(대역본 한 장) ---------- */
.sheet { display: block; background: var(--color-sheet); max-width: 1320px; margin: 0 auto; padding: 0 var(--pad) 40px; }
.block, .hero { scroll-margin-top: calc(var(--header-h) + 8px); }
.block { padding-top: 56px; }

/* 짝 문단 — 모바일은 한 단 */
.seg { position: relative; padding: 8px 0; }
.ko { font-family: var(--font-ko); font-size: var(--fs-ko); line-height: 1.8; }
.en { font-family: var(--font-en); font-size: var(--fs-en); line-height: 1.65; color: #232838; }
.ko, .en { border-radius: var(--radius); transition: background-color .25s ease; }
.ko > * + *, .en > * + * { margin-top: 10px; }
.en { margin-top: 8px; padding-left: 12px; border-left: 2px solid var(--color-nib-tint); }

.kicker { font-family: var(--font); font-size: .9rem; font-weight: 700; color: var(--color-muted); }
.en .kicker { font-family: var(--font-en); font-weight: 600; color: var(--color-nib); font-size: .98rem; }
h1 { font-family: var(--font-ko); font-weight: 800; font-size: var(--fs-h1); line-height: 1.28; }
.h1-line { display: block; text-wrap: balance; }
.h1-en { font-family: var(--font-en); font-weight: 600; font-size: calc(var(--fs-h1) * .84); line-height: 1.2; letter-spacing: -.01em; text-wrap: balance; }
h2 { font-family: var(--font-ko); font-weight: 800; font-size: var(--fs-h2); }
.h2-en { font-family: var(--font-en); font-weight: 600; font-size: var(--fs-h2); line-height: 1.2; letter-spacing: -.01em; }
h3 { font-family: var(--font-ko); font-weight: 800; font-size: var(--fs-h3); }
.h3-en { font-family: var(--font-en); font-weight: 600; font-size: 1.22rem; line-height: 1.3; }
.lead { font-size: 1.08em; }
.muted { color: var(--color-muted); font-size: .95em; }
.sec-no { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--color-ink); font-family: var(--font); font-weight: 700; font-size: .95rem; }
.sec-no + h2 { margin-top: 10px; }

/* 접힌 영어(모바일) — JS 가 각 짝에 「English」 단추를 넣는다. JS 가 없으면 두 언어가 다 보인다 */
.seg__fold { display: none; align-items: center; gap: 6px; margin-top: 8px; padding: 4px 12px; min-height: 32px; border: 1px solid var(--color-rule); border-radius: 99px; background: var(--color-sheet); font-family: var(--font-en); font-size: .9rem; color: var(--color-nib); cursor: pointer; }
.seg__fold::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.seg.is-open > .seg__fold::after { transform: translateY(1px) rotate(-135deg); }
.seg__fold[data-to="ko"] { font-family: var(--font); color: var(--color-ink); }

@media (max-width: 899px) {
  html.js[data-lang="ko"] .seg > .en { display: none; }
  html.js[data-lang="ko"] .seg.is-open > .en { display: block; }
  html.js[data-lang="en"] .seg > .ko { display: none; }
  html.js[data-lang="en"] .seg.is-open > .ko { display: block; margin-top: 8px; }
  html.js[data-lang="en"] .seg > .en { margin-top: 0; }
  html.js[data-lang="en"] .seg > .en { order: 1; }
  html.js[data-lang="en"] .seg > .seg__fold { order: 2; }
  html.js[data-lang="en"] .seg > .ko { order: 3; }
  html.js[data-lang="ko"] .seg__fold, html.js[data-lang="en"] .seg__fold { display: inline-flex; }
  html.js[data-lang="en"] .seg { display: flex; flex-direction: column; align-items: flex-start; }
  html.js[data-lang="en"] .seg > * { width: 100%; }
  html.js[data-lang="en"] .seg > .seg__fold { width: auto; }
}

/* ---------- 히어로 ---------- */
.hero { padding-top: 24px; }
.hero .seg--hero .ko > * + * { margin-top: 12px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.hero__links { display: flex; flex-wrap: wrap; gap: 6px 20px; font-family: var(--font-en); }
.hero__links a { color: var(--color-nib); text-underline-offset: 4px; }
.avail { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-family: var(--font); font-size: .92rem; color: var(--color-muted); }
.en .avail { font-family: var(--font-en); font-size: 1rem; }
.avail__dot { width: 9px; height: 9px; border-radius: 50%; background: #3BA675; box-shadow: 0 0 0 3px #D7F0E3; }
.hero__art { margin: 18px auto 0; max-width: 640px; }
.hero__art svg { width: 100%; height: auto; }
.bubble__ko { font-family: var(--font-ko); font-weight: 800; font-size: 19px; fill: var(--color-ink); }
.bubble__en { font-family: var(--font-en); font-weight: 600; font-size: 17px; fill: var(--color-nib); }
.paper__ko { font-family: var(--font-ko); font-weight: 700; font-size: 15px; fill: var(--color-ink); }
.paper__en { font-family: var(--font-en); font-weight: 600; font-size: 15px; fill: #fff; }

/* ---------- 하는 일 ---------- */
.fields { display: flex; flex-wrap: wrap; gap: 6px; }
.fields li { padding: 3px 12px; border: 1px solid var(--color-rule); border-radius: 99px; font-size: .92em; background: var(--color-sheet); }
.en .fields li { font-size: .9em; }

/* ---------- 작업 예시 ---------- */
.example { margin-top: 26px; padding: 6px 0 10px; border-top: 1px dashed var(--color-rule); }
.ex-tag { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-family: var(--font); font-size: .9rem; color: var(--color-muted); }
.en .ex-tag { font-family: var(--font-en); font-size: .98rem; }
.ex-tag b { color: var(--color-ink); }
.role { padding: 1px 9px; border-radius: 99px; border: 1px solid var(--color-ink); color: var(--color-ink); font-family: var(--font); font-size: .78rem; font-weight: 700; }
.role--target { background: var(--color-ink); color: #fff; }
.ex-text { font-size: 1.16em; line-height: 1.9; }
.en .ex-text { line-height: 1.75; }
mark.t { background: none; color: inherit; border-bottom: 2px solid var(--color-nib); padding: 1px 1px 0; border-radius: 2px; cursor: pointer; transition: background-color .2s, border-color .2s; }
mark.t:focus-visible { outline-offset: 1px; }
mark.t.is-pair { background: var(--color-nib-tint); border-bottom-color: var(--color-flag-deep); }
.count { font-family: var(--font); font-size: .82rem; color: var(--color-muted); }
.count span { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--color-ink); }
.literal { font-size: .95em; color: var(--color-muted); }
.literal s { text-decoration-color: var(--color-flag-deep); text-decoration-thickness: 1.5px; }
.literal__tag { font-family: var(--font); font-size: .74rem; font-weight: 700; padding: 1px 7px; border-radius: 99px; background: var(--color-desk); color: var(--color-muted); }
.note { font-size: .94em; color: #3B4152; padding: 10px 14px; background: var(--color-desk); border-radius: var(--radius); }
.note b { display: block; font-family: var(--font); font-size: .82rem; color: var(--color-ink); margin-bottom: 2px; }

/* ---------- 견적 가늠 ---------- */
.quote { display: grid; gap: 22px; margin-top: 20px; }
.quote__form { display: grid; gap: 18px; }
.q-group { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.q-group legend { width: 100%; padding: 0; margin-bottom: 8px; font-weight: 800; font-size: .95rem; }
.q-group legend span, .r-label span { font-family: var(--font-en); font-weight: 400; color: var(--color-nib); margin-left: 4px; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; flex-direction: column; justify-content: center; min-height: 44px; padding: 6px 14px; border: 1.5px solid var(--color-rule); border-radius: 10px; background: var(--color-sheet); font-weight: 700; font-size: .95rem; line-height: 1.3; transition: background-color .2s, border-color .2s, color .2s; }
.chip small { font-weight: 400; font-size: .78rem; color: var(--color-muted); }
.chip input:checked + span { border-color: var(--color-ink); background: var(--color-ink); color: #fff; }
.chip input:checked + span small { color: #C9CED8; }
.chip input:focus-visible + span { outline: 3px solid var(--color-nib); outline-offset: 2px; }
.amount { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.amount input[type="number"] { width: 150px; min-height: 48px; padding: 0 14px; border: 1.5px solid var(--color-ink); border-radius: 10px; font: 700 1.15rem var(--font); font-variant-numeric: tabular-nums; background: var(--color-sheet); color: var(--color-ink); }
.unit { display: flex; gap: 6px; }
.q-help { width: 100%; font-size: .85rem; color: var(--color-muted); }
.rush { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1.5px dashed var(--color-rule); border-radius: 10px; cursor: pointer; font-size: .95rem; }
.rush input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--color-ink); flex: none; }

.quote__result { padding: 20px; border: 1.5px solid var(--color-ink); border-radius: 12px; background: var(--color-sheet); position: relative; }
.quote__result::before { content: ""; position: absolute; top: -1.5px; right: 22px; width: 28px; height: 40px; background: var(--color-flag); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%); }
.r-label { font-size: .86rem; font-weight: 700; color: var(--color-muted); }
.r-label + * { margin-top: 2px; }
.r-price { font-weight: 800; font-size: clamp(2.1rem, 1.6rem + 2vw, 2.9rem); line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.r-price small { font-size: .45em; margin-left: 4px; }
.r-calc { font-size: .86rem; color: var(--color-muted); margin-bottom: 14px; font-variant-numeric: tabular-nums; }
.r-date { font-family: var(--font-ko); font-weight: 800; font-size: 1.5rem; line-height: 1.3; }
.r-days { font-size: .86rem; color: var(--color-muted); }
.steps { display: flex; gap: 3px; margin-top: 14px; min-height: 52px; }
.steps__part { flex-basis: 0; min-width: 64px; display: flex; flex-direction: column; justify-content: center; padding: 6px 10px; border-radius: 6px; font-size: .84rem; line-height: 1.3; transition: flex-grow .5s ease; }
.steps__part b { font-size: .9rem; }
.steps__part--t { background: var(--color-ink); color: #fff; }
.steps__part--r { background: var(--color-nib); color: #fff; }
.steps__part--f { background: var(--color-flag); color: var(--color-ink); }
.r-note { margin-top: 14px; font-size: .8rem; color: var(--color-muted); line-height: 1.6; }

.cal-wrap { margin-top: 24px; }
.cal-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; margin-bottom: 8px; }
.cal-title { font-weight: 800; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .82rem; color: var(--color-muted); }
.cal-legend li { display: inline-flex; align-items: center; gap: 5px; }
.lg { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.lg--t { background: var(--color-ink); } .lg--r { background: var(--color-nib); } .lg--f { background: var(--color-flag); }
.lg--w { background: repeating-linear-gradient(135deg, #D5D9E0 0 2px, #fff 2px 5px); border: 1px solid var(--color-rule); }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; font-variant-numeric: tabular-nums; }
.cal__dow { font-size: .74rem; font-weight: 700; color: var(--color-muted); text-align: center; padding-bottom: 2px; }
.cal__day { position: relative; min-height: 46px; padding: 4px 6px; border-radius: 6px; background: var(--color-desk); font-size: .82rem; line-height: 1.2; }
.cal__day small { display: block; font-size: .68rem; margin-top: 2px; }
.cal__day.is-wknd { background: repeating-linear-gradient(135deg, #E4E7EC 0 2px, #F7F8FA 2px 6px); color: #8B92A0; }
.cal__day.is-t { background: var(--color-ink); color: #fff; }
.cal__day.is-r { background: var(--color-nib); color: #fff; }
.cal__day.is-f { background: var(--color-flag); color: var(--color-ink); font-weight: 700; }
.cal__day.is-today { box-shadow: inset 0 0 0 2px var(--color-flag-deep); }
.cal__day b { white-space: nowrap; }
.cal__day.is-month b { font-weight: 800; font-size: .74rem; letter-spacing: -.02em; }
@media (min-width: 900px) { .cal__day.is-month b { font-size: .82rem; } }
.cal-note { margin-top: 8px; font-size: .82rem; color: var(--color-muted); }
html.has-motion .cal__day.is-in { animation: cal-pop .35s ease both; }
@keyframes cal-pop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.seg--request { margin-top: 18px; }
.req-label { font-family: var(--font); font-size: .86rem; font-weight: 700; color: var(--color-muted); }
.req { padding: 14px 16px; border-radius: 10px; background: var(--color-desk); border-left: 3px solid var(--color-ink); }
.en .req { border-left-color: var(--color-nib); }
.req-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.en .btn { font-family: var(--font); }
.copied { margin-top: 10px; padding: 10px 14px; border-radius: 10px; background: var(--color-ink); color: #fff; font-size: .92rem; }

/* ---------- 진행 순서 ---------- */
.steps-list .n { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 8px; border-radius: 50%; background: var(--color-ink); color: #fff; font-family: var(--font); font-size: .8rem; font-weight: 700; vertical-align: 2px; letter-spacing: 0; }
.en .n { background: var(--color-nib); }

/* ---------- 소개 ---------- */
.cv { display: grid; gap: 0; border-top: 1px solid var(--color-rule-soft); }
.cv div { display: grid; grid-template-columns: 6.5em 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--color-rule-soft); }
.en .cv div { grid-template-columns: 7.5em 1fr; }
.cv dt { font-family: var(--font); font-weight: 700; font-size: .9rem; color: var(--color-muted); padding-top: 2px; }
.cv a { color: var(--color-ink); font-weight: 700; text-underline-offset: 4px; }
.en .cv a { color: var(--color-nib); }

/* ---------- 연락 ---------- */
.check li { position: relative; padding-left: 26px; }
.check li + li { margin-top: 6px; }
.check li::before { content: ""; position: absolute; left: 0; top: .45em; width: 15px; height: 15px; border: 1.5px solid currentColor; border-radius: 3px; }

/* ---------- 푸터 ---------- */
.site-footer { background: var(--color-ink); color: #C9CED8; font-size: .86rem; padding: 32px 0 calc(96px + env(safe-area-inset-bottom)); }
.site-footer__inner { max-width: 1320px; margin: 0 auto; padding: 0 var(--pad); display: grid; gap: 16px; }
.site-footer__logo { color: #fff; font-family: var(--font-ko); font-weight: 800; font-size: 1.05rem; }
.site-footer__logo span { font-family: var(--font-en); font-weight: 400; color: #AEB8D6; margin-left: 6px; }
.site-footer__biz { margin-top: 6px; line-height: 1.8; }
.site-footer__links { margin-top: 8px; }
.site-footer__links .strong { color: #fff; font-weight: 800; }
.site-footer__credit a { color: #FFB3AA; }

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

/* =================== 데스크톱: 좌우 대역 =================== */
@media (min-width: 900px) {
  :root { --pad: 40px; --header-h: 68px; }
  .header-tel { display: inline-block; margin-left: 6px; }
  .site-header .header-cta { display: inline-flex; min-height: 42px; }
  .menu-toggle { display: none; }
  .quickbar { display: none; }
  .site-footer { padding-bottom: 40px; }
  .site-footer__inner { grid-template-columns: 1fr auto; align-items: end; }

  /* 가운데 축: 종이 한가운데를 위아래로 지나는 가는 선 */
  .sheet { padding: 0 var(--pad) 80px; background-image: linear-gradient(var(--color-rule), var(--color-rule)); background-size: 1px 100%; background-position: center top; background-repeat: no-repeat; }

  .seg { display: grid; grid-template-columns: minmax(0, 1fr) var(--axis) minmax(0, 1fr); align-items: start; padding: 10px 0; }
  .seg > .ko { grid-column: 1; padding: 10px 20px 12px 14px; box-shadow: inset -1px 0 0 var(--color-rule-soft); }
  .seg > .en { grid-column: 3; margin-top: 0; padding: 10px 14px 12px 20px; border-left: 0; box-shadow: inset 1px 0 0 var(--color-rule-soft); }
  .seg__fold { display: none !important; }
  .sec-no { display: none; }
  .sec-no + h2 { margin-top: 0; }

  /* 정렬선: 한국어 문단 끝 → 축 → 영어 문단 첫머리 */
  .seg::before { content: ""; position: absolute; top: calc(10px + 1.35em); left: calc(50% - var(--axis) / 2); width: var(--axis); height: 1px; background: var(--color-rule); transform-origin: left center; transition: transform .7s cubic-bezier(.4,0,.2,1), background-color .25s; }
  .seg::after { content: ""; position: absolute; top: calc(10px + 1.35em - 3px); left: calc(50% - 3.5px); width: 7px; height: 7px; border-radius: 50%; background: var(--color-sheet); box-shadow: 0 0 0 1.5px var(--color-rule); transition: background-color .25s, box-shadow .25s; }
  .seg--head::before, .seg--head::after { top: calc(10px + 1.1em); }
  .seg--head::after { top: calc(10px + 1.1em - 3px); }

  /* 짝 강조 — 한쪽에 올리면 짝도 함께 */
  .seg:hover > .ko, .seg:hover > .en, .seg:focus-within > .ko, .seg:focus-within > .en, .seg.is-pair > .ko, .seg.is-pair > .en { background-color: var(--color-tint); box-shadow: none; }
  .seg:hover::before, .seg:focus-within::before, .seg.is-pair::before { background: var(--color-flag-deep); }
  .seg:hover::after, .seg:focus-within::after, .seg.is-pair::after { background: var(--color-flag); box-shadow: 0 0 0 1.5px var(--color-flag-deep); }
  .seg--request:hover > .ko, .seg--request:hover > .en, .seg--request:focus-within > .ko, .seg--request:focus-within > .en { background: none; }

  /* 언어 초점: 다른 쪽 단을 흐리게 (데스크톱은 두 단을 늘 둔다) */
  html[data-lang="ko"] .seg > .en, html[data-lang="en"] .seg > .ko { opacity: .3; transition: opacity .25s, background-color .25s; }
  html[data-lang="ko"] .seg:hover > .en, html[data-lang="en"] .seg:hover > .ko { opacity: .75; }

  /* 등장: 정렬선이 한국어 쪽에서 영어 쪽으로 그어지고 영어 문단이 이어서 나타난다 (화면에 들어오면 한 번) */
  html.has-motion .seg.will-in::before { transform: scaleX(0); }
  html.has-motion .seg.will-in > .en { opacity: 0; transform: translateX(-10px); }
  html.has-motion .seg > .en { transition: opacity .5s ease .35s, transform .5s ease .35s, background-color .25s; }

  /* 축 메뉴: 종이 가운데 축 위에 고정된 번호. 지금 번호 양옆으로 한·영 이름 */
  .axis { position: fixed; top: calc(var(--header-h) + 36px); bottom: auto; left: 50%; right: auto; width: var(--axis); margin-left: calc(var(--axis) / -2); padding: 0; background: none; overflow: visible; visibility: visible; opacity: 1; transform: none; z-index: 30; }
  .axis ol { display: grid; gap: 6px; justify-items: center; }
  .axis li { width: 100%; }
  .axis a { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr); gap: 6px; padding: 0; border: 0; align-items: center; }
  .axis b { order: 0; width: 32px; height: 32px; background: var(--color-sheet); border: 1.5px solid var(--color-rule); color: var(--color-muted); font-size: .85rem; transition: background-color .2s, border-color .2s, color .2s; }
  .axis__ko, .axis__en { font-size: .78rem; line-height: 1.2; white-space: nowrap; opacity: 0; transition: opacity .2s, transform .2s; background: var(--color-sheet); padding: 2px 4px; border-radius: 3px; }
  .axis__ko { justify-self: end; font-weight: 700; transform: translateX(6px); }
  .axis__en { justify-self: start; font-size: .82rem; transform: translateX(-6px); }
  .axis a:hover b, .axis a:focus-visible b { border-color: var(--color-ink); color: var(--color-ink); }
  .axis a:hover .axis__ko, .axis a:hover .axis__en, .axis a:focus-visible .axis__ko, .axis a:focus-visible .axis__en,
  .axis a.is-active .axis__ko, .axis a.is-active .axis__en { opacity: 1; transform: none; }
  .axis a.is-active b { background: var(--color-flag); border-color: var(--color-flag); color: var(--color-ink); }
  .axis a.is-active .axis__ko { text-decoration: none; }

  /* 히어로 */
  .hero { padding-top: 28px; }
  .hero .seg--hero::before, .hero .seg--hero::after { top: calc(10px + 2.6em); }
  .hero__art { margin-top: 8px; position: relative; z-index: 1; }

  .block { padding-top: 84px; }
  .ex-text { font-size: 1.22em; }

  /* 견적: 왼쪽 단 = 조건, 오른쪽 단 = 결과, 축을 건너 화살표 */
  .quote { grid-template-columns: minmax(0, 1fr) var(--axis) minmax(0, 1fr); gap: 0; align-items: start; }
  .quote__form { grid-column: 1; padding: 6px 20px 0 14px; }
  .quote__result { grid-column: 3; position: sticky; top: calc(var(--header-h) + 24px); margin-left: 20px; }
  .quote::before { content: ""; grid-column: 2; grid-row: 1; justify-self: center; align-self: start; margin-top: 60px; width: 54px; height: 54px; border-radius: 50%; background: var(--color-sheet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h14m-5-5 5 5-5 5' fill='none' stroke='%231D2230' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 24px no-repeat; box-shadow: 0 0 0 1.5px var(--color-ink); position: relative; z-index: 2; }
  .cal-wrap { padding: 18px 20px; border: 1px solid var(--color-rule); border-radius: 12px; background: var(--color-sheet); position: relative; z-index: 2; }
  .cal__day { min-height: 54px; }
}

@media (min-width: 1200px) {
  :root { --axis: 184px; }
}

/* 동작 줄이기 — 0.01ms 안전망, 색·투명도 피드백은 둔다 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .ko, .en, mark.t, .btn, .chip span, .axis b, .lang-switch button { transition-duration: .2s !important; }
  .seg::before, .seg::after { transition-duration: .2s !important; }
}