/* 블라인드를 걷으면 — 먹녹색 판 · 칸막이 크림 판 · 원목 주황 한 점 / Orbit + Pretendard + Space Mono */
:root {
  --bg: #F4EFE6;
  --ink: #1E2A24;
  --ink-2: #3B4740;
  --ink-3: #6E7A70;
  --line: #D9DDD3;
  --accent: #C2652A;
  --accent-2: #C2652A;
  --font: "Pretendard Variable", Pretendard, system-ui, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --wrap: 1240px;
  --gutter: 24px;
  --green: #1E2A24;
  --green-2: #26342D;
  --cream: #F4EFE6;
  --paper: #FBF8F2;
  --apricot: #E9B48A;
  --line-g: rgba(244, 239, 230, .14);
  --head: "Orbit", var(--font);
  --mono: "Space Mono", ui-monospace, monospace;
  --edge: max(var(--gutter), calc((100vw - var(--wrap)) / 2));
}
@media (min-width: 1024px) { :root { --gutter: 40px; } }

body { background: var(--cream); }
.i { width: 20px; height: 20px; }

/* ── 머리글: 늘 크림 판(로고 검정 글자가 보이게) ── */
.hd { background: rgba(244, 239, 230, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--ink); }
.hd.is-scrolled { border-bottom-color: var(--line); }
.hd__nav a { font-weight: 600; }
.hd__nav a[aria-current="page"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 8px; height: 2px; background: var(--accent); }
.hd__call { background: var(--accent); color: #fff; border-radius: 2px; }
.hd__call:hover { background: #A9541F; }
.mnav { background: var(--cream); }
.mnav__call { background: var(--accent); color: #fff; border-radius: 2px; }

/* ── 공통 글 ── */
.ln { display: block; }
/* 영문 낱말 Space Mono 는 Orbit 큰 제목 안에서만 — 본문 속 영문은 Pretendard 그대로 */
.hero__t .lat, .h2 .lat, .ph__t .lat, .cta__t .lat, .svd__t .lat { font-family: var(--mono); font-size: .86em; letter-spacing: -.01em; }
.hero__t .sp, .h2 .sp, .ph__t .sp, .cta__t .sp, .svd__t .sp { font-family: var(--font); }
.kk { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 24px; font-family: var(--font); font-weight: 600; font-size: 13px; letter-spacing: .04em; color: var(--accent); }
.kk::before { content: ""; width: 24px; height: 2px; background: currentColor; }
.kk--lt { color: var(--apricot); }
.h2 { font-family: var(--head); font-weight: 400; font-size: clamp(30px, 3.6vw, 50px); line-height: 1.2; letter-spacing: -.01em; word-spacing: -.04em; }
.sh { margin-bottom: 64px; }
.sh--row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.go { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; border-bottom: 1px solid currentColor; font-weight: 650; transition: gap .3s var(--ease), color .2s; }
.go:hover { gap: 14px; color: var(--accent); }
.go--lt { color: var(--cream); }
.go--lt:hover { color: var(--apricot); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 24px; border-radius: 2px; font-weight: 650; transition: background-color .2s, color .2s, border-color .2s; }
.btn--tel { background: var(--accent); color: #fff; font-variant-numeric: tabular-nums; }
.btn--tel:hover { background: #A9541F; }
.btn--ghost { border: 1px solid rgba(244, 239, 230, .38); color: var(--cream); }
.btn--ghost:hover { border-color: var(--apricot); color: var(--apricot); }
.btn--line { border: 1px solid var(--ink); color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--cream); }

.sec { padding: 96px 0; background: var(--paper); }
.sec--cream { background: var(--cream); }
.sec--green, .hero, .ph, .cta, .ft {
  background-color: var(--green); color: var(--cream);
  background-image: repeating-linear-gradient(180deg, rgba(244, 239, 230, .035) 0 2px, transparent 2px 24px);
}
@media (max-width: 1023px) { .sec { padding: 64px 0; } .sh { margin-bottom: 40px; } }

/* ── 블라인드 날개(첫 화면·페이지 머리) ── */
.slats { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; perspective: 1400px; pointer-events: none; }
.slats i {
  flex: 1; display: block; position: relative;
  --o: max(0, calc(var(--draw, 0) - .58));
  translate: 0 calc(var(--o) * var(--k) * -9px);
}
.slats i::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: 3px; opacity: .45; background: #8A4A22; transform-origin: 50% 0;
  box-shadow: 0 2px 3px -1px rgba(0, 0, 0, .25);
  animation: slat-open 1.15s var(--ease) both;
  animation-delay: calc(.15s + var(--k) * 55ms);
}
/* 들어올 때: 진한 주황 날개가 덮고 있다가 → 얇은 원목 선으로 접히며 열림 */
@keyframes slat-open {
  0%, 18% { height: 100%; opacity: 1; transform: rotateX(0deg); background: linear-gradient(180deg, #D7843F 0%, #C2652A 55%, #93441A 100%); }
  70% { opacity: .8; background: linear-gradient(180deg, #C2652A 0%, #93441A 100%); }
  100% { height: 3px; opacity: .45; transform: rotateX(40deg); background: #8A4A22; }
}

/* ── 첫 화면 ── */
.hero { position: relative; min-height: 100svh; padding-top: 72px; display: flex; overflow: hidden; }
.hero__in { display: grid; width: 100%; grid-template-columns: 1fr; grid-template-rows: auto minmax(240px, 1fr) auto; }
.hero__txt { padding: 40px var(--gutter) 32px; }
.hero__eb { font-family: var(--font); font-weight: 600; font-size: 14px; letter-spacing: .04em; color: var(--apricot); animation: fade .8s var(--ease) .1s both; }
.hero__t { margin: 20px 0 24px; font-family: var(--head); font-weight: 400; font-size: clamp(34px, 3.7vw, 56px); line-height: 1.16; letter-spacing: -.01em; word-spacing: -.04em; }
@media (min-width: 1024px) { .hero__t .ln { white-space: nowrap; } }
.hero__t .ln, .ph__t .ln { overflow: hidden; padding-bottom: .06em; }
.hero__t .ln > span, .ph__t .ln > span { display: inline-block; animation: rise 1s var(--ease) both; animation-delay: calc(.3s + var(--i) * .13s); }
.hero__lead { max-width: 30em; color: rgba(244, 239, 230, .78); animation: fade .9s var(--ease) .65s both; }
.hero__act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; animation: fade .9s var(--ease) .8s both; }
.hero__blind { position: relative; overflow: hidden; background: #2b2a26; }
.hero__blind .px, .ph__pic .px, .office__pic .px { position: absolute; inset: 0; }
.hero__blind img, .ph__pic img, .office__pic img { width: 100%; height: 100%; object-fit: cover; }
.hero__blind img { object-position: 70% 75%; }
.hero__rail { display: grid; border-top: 1px solid var(--line-g); counter-reset: rail; }
.hero__rail a { counter-increment: rail; display: flex; align-items: center; gap: 16px; min-height: 60px; padding: 0 var(--gutter); border-bottom: 1px solid var(--line-g); font-family: var(--font); font-weight: 600; font-size: 17px; transition: background-color .3s, color .3s; animation: fade .8s var(--ease) both; animation-delay: calc(1s + var(--i) * .08s); }
.hero__rail a:hover { background: rgba(244, 239, 230, .06); color: var(--apricot); }
.hero__rail-n::before { content: counter(rail, decimal-leading-zero); font-family: var(--mono); font-size: 12px; color: var(--apricot); }
.hero__rail-t { flex: 1; }
.hero__rail .i { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.hero__rail a:hover .i { transform: translateX(4px); }
@media (min-width: 1024px) {
  .hero__in { grid-template-columns: 9fr 11fr; grid-template-rows: 1fr auto; }
  .hero__txt { align-self: center; padding: 56px 64px 56px var(--edge); }
  .hero__blind { grid-column: 2; grid-row: 1; }
  .hero__rail { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); padding-left: var(--edge); }
  .hero__rail a { min-height: 84px; border-bottom: 0; border-left: 1px solid var(--line-g); padding: 0 32px; font-size: 19px; }
  .hero__rail a:first-child { border-left: 0; padding-left: 0; }
}
@keyframes rise { from { transform: translateY(105%); } }
@keyframes fade { from { opacity: 0; transform: translateY(14px); } }

/* ── 페이지 머리 ── */
.ph { padding: calc(72px + 64px) 0 72px; overflow: hidden; }
.ph__in { display: grid; gap: 40px; align-items: end; }
.ph__t { font-family: var(--head); font-weight: 400; font-size: clamp(34px, 4.4vw, 64px); line-height: 1.16; letter-spacing: -.01em; word-spacing: -.04em; }
.ph__pic { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: #2b2a26; }
.ph__pic .slats { display: block; }
.ph__pic .slats i { position: absolute; left: 0; right: 0; height: 7%; }
.ph__pic .slats i:nth-child(1) { top: 3%; }
.ph__pic .slats i:nth-child(2) { top: 10%; }
.ph__pic .slats i:nth-child(3) { top: 84%; }
.ph__pic .slats i:nth-child(4) { top: 91%; }
@media (min-width: 1024px) { .ph__in { grid-template-columns: 1fr 1.15fr; gap: 64px; } }
/* 사진 없는 낮은 머리(영상) */
.ph--low { padding: calc(72px + 64px) 0 48px; }
.ph--low .ph__in { grid-template-columns: 1fr; min-height: 128px; }
@media (min-width: 1024px) { .ph--low { min-height: calc(72px + 240px); } }

/* ── 고민 ── */
.pains__list { counter-reset: pain; border-bottom: 1px solid var(--line); }
.pain { counter-increment: pain; display: grid; gap: 16px 40px; padding: 40px 0; border-top: 1px solid var(--line); }
.pain__n::before { content: counter(pain, decimal-leading-zero); font-family: var(--mono); font-size: 40px; line-height: 1; color: var(--accent); }
.pain__q h3 { font-family: var(--font); font-weight: 600; font-size: clamp(21px, 2vw, 27px); line-height: 1.4; }
.pain__q p { margin-top: 16px; color: var(--ink-2); }
.pain__a { color: var(--ink-2); }
.pain__a .go { margin-top: 16px; color: var(--ink); }
@media (min-width: 1024px) { .pain { grid-template-columns: 96px 1.35fr 1fr; padding: 48px 0; } .pain__a { padding-top: 6px; } }

/* ── 대표 업무 ── */
.svc__grid { display: grid; gap: 24px; }
.card { position: relative; display: flex; flex-direction: column; background: #FFFDF8; border: 1px solid var(--line); transition: border-color .3s; }
.card:hover { border-color: var(--accent); }
.card__pic { position: relative; overflow: hidden; aspect-ratio: 3 / 2; background: var(--line); }
.card__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.card:hover .card__pic img { transform: scale(1.04); }
.card__body { position: relative; flex: 1; padding: 24px 80px 24px 24px; }
.card__t { font-family: var(--font); font-weight: 600; font-size: clamp(21px, 1.9vw, 26px); line-height: 1.3; }
.card__d { margin-top: 8px; color: var(--ink-2); }
.card__go { position: absolute; right: 24px; bottom: 24px; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--ink); transition: background-color .3s, color .3s, border-color .3s; }
.card:hover .card__go { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (min-width: 1024px) {
  .svc__grid { grid-template-columns: 1.55fr 1fr; grid-template-rows: 1fr 1fr; }
  .card--lg { grid-row: 1 / 3; }
  .card--lg .card__pic { aspect-ratio: auto; flex: 1; min-height: 360px; }
  .card--lg .card__body { flex: none; padding: 32px 96px 32px 32px; }
  .card--lg .card__t { font-size: 32px; }
  .card--sm { display: grid; grid-template-columns: 42% 1fr; }
  .card--sm .card__pic { aspect-ratio: auto; height: 100%; }
  .card--sm .card__body { padding: 24px 24px 80px; }
}

/* ── 진행 단계(현황판 막대) ── */
.proc__board { position: relative; }
.proc__bar { display: none; }
.proc__list { display: grid; gap: 0; counter-reset: step; }
.step { --on: clamp(0, calc(var(--draw, 1) * 7.5 - var(--k) - .2), 1); counter-increment: step; position: relative; padding: 24px 0 24px 32px; }
.step::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--line-g); }
.step::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); transform-origin: 50% 0; transform: scaleY(var(--on)); transition: transform .35s linear; }
.step__n::before { content: counter(step, decimal-leading-zero); font-family: var(--mono); font-size: 13px; color: var(--apricot); }
.step__t { margin-top: 8px; font-family: var(--font); font-weight: 600; font-size: 22px; line-height: 1.3; opacity: calc(.5 + var(--on) * .5); transition: opacity .35s; }
.step__d { margin-top: 8px; color: rgba(244, 239, 230, .72); opacity: calc(.5 + var(--on) * .5); transition: opacity .35s; }
.proc__note { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line-g); color: var(--apricot); }
@media (min-width: 1024px) {
  .proc__bar { display: block; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line-g); }
  .proc__list { grid-template-columns: repeat(5, 1fr); gap: 24px; }
  .step { padding: 40px 0 0; }
  .step::before, .step::after { right: 0; bottom: auto; width: auto; height: 10px; }
  .step::after { transform-origin: 0 50%; transform: scaleX(var(--on)); }
  .step__n { display: block; margin-top: 8px; }
}

/* ── 직접 만든 것 ── */
.works__in { display: grid; gap: 48px; }
.works__tags { margin-top: 40px; border-top: 1px solid var(--line); }
.works__tags li { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.works__name { font-family: var(--mono); font-weight: 700; font-size: 20px; letter-spacing: .02em; }
.works__line { grid-column: 1; color: var(--ink-2); }
.works__yr { grid-column: 2; grid-row: 1 / 3; align-self: center; font-family: var(--font); font-weight: 500; font-size: 13px; color: var(--accent); }
.works__y { font-family: var(--mono); }
.works__stack { display: grid; min-height: 100%; }
.shot { grid-area: 1 / 1; position: relative; overflow: hidden; background: #fff; box-shadow: 0 30px 60px -30px rgba(30, 42, 36, .45); }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot .px { position: absolute; inset: 0; }
.shot--a { width: 92%; aspect-ratio: 1600 / 873; align-self: start; }
.shot--b { width: 64%; aspect-ratio: 1600 / 1091; justify-self: end; align-self: end; margin-top: 34%; border: 6px solid var(--cream); }
.works__logo { display: grid; gap: 16px; background: #fff; border: 1px solid var(--line); padding: 24px; }
.works__logo-pic { aspect-ratio: 1600 / 530; max-width: 640px; width: 100%; justify-self: center; }
.works__logo-pic img { width: 100%; height: 100%; object-fit: contain; }
.works__logo figcaption { font-family: var(--font); font-weight: 500; font-size: 13px; color: var(--accent); }
@media (min-width: 1024px) {
  .works__in { grid-template-columns: 5fr 7fr; gap: 64px 96px; }
  .works__txt { grid-row: 1; }
  .works__stack { grid-column: 2; grid-row: 1; align-self: stretch; }
  .works__logo { grid-column: 1 / -1; grid-row: 2; grid-template-columns: 5fr 7fr; gap: 96px; align-items: center; padding: 40px; }
  .works__logo-pic { justify-self: start; }
}

/* ── 영상 ── */
.vids__grid { display: grid; gap: 32px; }
.vids__side { display: grid; gap: 24px; align-content: start; }
.vid__pic { overflow: hidden; }
.vid__t { margin-top: 16px; font-weight: 650; font-size: 17px; line-height: 1.5; }
.vid--lg .vid__t { font-family: var(--font); font-weight: 600; font-size: clamp(20px, 1.8vw, 24px); line-height: 1.4; }
@media (min-width: 1024px) { .vids__grid { grid-template-columns: 1.7fr 1fr; gap: 40px; } }

/* ── 사무실 띠 ── */
.office { position: relative; min-height: 78svh; display: flex; align-items: flex-end; overflow: hidden; background: #1a1d24; }
.office__pic { position: absolute; inset: 0; }
.office__pic img { object-position: 55% 59%; }
.office__in { position: relative; z-index: 1; padding-top: 160px; padding-bottom: 64px; }
.office__card { max-width: 640px; padding: 40px; background: rgba(30, 42, 36, .9); color: var(--cream); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.office__q { font-family: var(--font); font-weight: 500; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.6; }
.office__card .go { margin-top: 24px; }
@media (max-width: 1023px) { .office { min-height: 0; flex-direction: column; align-items: stretch; } .office__pic { position: relative; aspect-ratio: 4 / 3; } .office__in { padding: 0; } .office__card { max-width: none; padding: 32px var(--gutter); } }

/* ── 상담 띠 ── */
.cta { position: relative; overflow: hidden; padding: 112px 0; }
.cta__bars { position: absolute; top: 0; bottom: 0; right: 0; width: 38%; opacity: .16; }
@media (max-width: 1023px) { .cta__bars { width: 60%; } }
.cta__in { position: relative; z-index: 1; display: grid; gap: 40px; align-items: end; }
.cta__t { font-family: var(--head); font-weight: 400; font-size: clamp(34px, 4.6vw, 66px); line-height: 1.15; letter-spacing: -.01em; word-spacing: -.04em; }
.cta__lead { color: rgba(244, 239, 230, .78); }
.cta__tel { display: inline-flex; align-items: center; gap: 16px; margin-top: 16px; font-family: var(--mono); font-weight: 700; font-size: clamp(28px, 3vw, 40px); color: var(--apricot); transition: color .2s; }
.cta__tel .i { width: 30px; height: 30px; }
.cta__tel:hover { color: #fff; }
.cta__meta { display: grid; gap: 4px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line-g); }
.cta__meta li, .cta__meta a { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; color: rgba(244, 239, 230, .85); }
.cta__meta a:hover { color: var(--apricot); }
.cta__meta .i { width: 18px; height: 18px; color: var(--apricot); }
@media (min-width: 1024px) { .cta__in { grid-template-columns: 1.2fr 1fr; gap: 96px; } }
@media (max-width: 1023px) { .cta { padding: 80px 0; } }

/* ── 소개: 인사 ── */
.greet__in { display: grid; gap: 32px; }
.greet__owner { font-family: var(--font); font-weight: 600; font-size: 22px; }
.greet__q { font-family: var(--font); font-weight: 500; font-size: clamp(22px, 2.3vw, 32px); line-height: 1.55; letter-spacing: -.015em; }
.greet__more { display: grid; gap: 16px; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); color: var(--ink-2); max-width: 44em; }
@media (min-width: 1024px) { .greet__in { grid-template-columns: 1fr 2.4fr; gap: 64px; } }

/* ── 소개: 걸어온 길 ── */
.hist__in { display: grid; gap: 40px; }
.hist__list { position: relative; padding-left: 40px; }
.hist__list::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 1px; background: var(--line); }
.hist__list::after { content: ""; position: absolute; left: 6px; top: 8px; width: 3px; height: calc((100% - 16px) * var(--draw, 1)); background: var(--accent); }
.hist__list li { position: relative; display: grid; gap: 4px; padding: 0 0 40px; }
.hist__list li:last-child { padding-bottom: 0; }
.hist__list li::before { content: ""; position: absolute; left: -38px; top: 8px; width: 11px; height: 11px; border: 2px solid var(--accent); background: var(--paper); }
.hist__y { font-family: var(--mono); font-weight: 700; font-size: 22px; color: var(--accent); }
.hist__t { font-family: var(--font); font-weight: 500; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.45; }
@media (min-width: 1024px) {
  .hist__in { grid-template-columns: 1fr 1.4fr; gap: 96px; align-items: start; }
  .hist__in .sh { position: sticky; top: 120px; }
  .hist__list li { grid-template-columns: 120px 1fr; gap: 24px; }
}

/* ── 소개: 인증 ── */
.cert__in { display: grid; gap: 0; }
.cert__in .kk { margin-bottom: 16px; }
.cert__plate { display: flex; align-items: center; gap: 24px; padding: 32px; background: #FFFDF8; border: 1px solid var(--line); border-left: 6px solid var(--accent); }
.cert__plate .i { width: 40px; height: 40px; color: var(--accent); }
.cert__plate p { font-family: var(--font); font-weight: 500; font-size: clamp(19px, 2vw, 26px); line-height: 1.45; }
.cert__plate .nw { font-family: var(--mono); font-size: .62em; color: var(--ink-3); white-space: normal; display: inline-block; }

/* ── 소개: 함께한 곳 ── */
.clients__grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line-g); }
.clients__grid li { display: flex; align-items: center; min-height: 110px; padding: 24px 16px 24px 0; border-bottom: 1px solid var(--line-g); font-family: var(--font); font-weight: 600; font-size: clamp(19px, 2.1vw, 28px); }
@media (min-width: 1024px) { .clients__grid { grid-template-columns: repeat(3, 1fr); } .clients__grid li { min-height: 140px; padding-left: 32px; border-left: 1px solid var(--line-g); } .clients__grid li:nth-child(3n + 1) { padding-left: 0; border-left: 0; } }

/* ── 소개: 사무실 둘러보기 ── */
.tour__list { display: grid; gap: 64px; counter-reset: tour; }
.tour__row { counter-increment: tour; display: grid; gap: 24px; align-items: end; }
.tour__pic { position: relative; overflow: hidden; aspect-ratio: 4 / 3; }
.tour__pic img { width: 100%; height: 100%; object-fit: cover; }
.tour__t { padding-top: 16px; border-top: 1px solid var(--line); font-family: var(--font); font-weight: 600; font-size: clamp(20px, 2vw, 26px); line-height: 1.4; }
.tour__t::before { content: counter(tour, decimal-leading-zero); display: block; margin-bottom: 8px; font-family: var(--mono); font-size: 13px; color: var(--accent); }
@media (min-width: 1024px) {
  .tour__row { grid-template-columns: 7fr 5fr; gap: 64px; }
  .tour__row.is-rev { grid-template-columns: 5fr 7fr; }
  .tour__row.is-rev .tour__pic { order: 2; }
}

/* ── 소개: 일하는 방식 ── */
.ways__in { display: grid; gap: 40px; }
.ways__aud { margin-top: 24px; color: var(--ink-2); max-width: 34em; }
.ways__list { display: grid; gap: 0; counter-reset: way; border-top: 1px solid var(--line); }
.ways__list li { counter-increment: way; padding: 32px 0; border-bottom: 1px solid var(--line); }
.ways__n::before { content: counter(way, decimal-leading-zero); font-family: var(--mono); font-size: 13px; color: var(--accent); }
.ways__list h3 { margin-top: 8px; font-family: var(--font); font-weight: 600; font-size: 23px; }
.ways__list p { margin-top: 8px; color: var(--ink-2); }
@media (min-width: 1024px) {
  .ways__in .sh { margin-bottom: 0; }
  .ways__list { grid-template-columns: repeat(3, 1fr); gap: 0 40px; border-top: 0; }
  .ways__list li { padding: 24px 0 0; border-top: 10px solid var(--accent); border-bottom: 0; }
}

/* ── 업무 페이지 ── */
.svd { display: grid; gap: 40px; padding: 96px 0; border-top: 1px solid var(--line); counter-increment: svd; scroll-margin-top: 72px; }
.svd:first-child { padding-top: 0; border-top: 0; }
.svd:last-child { padding-bottom: 0; }
.svcs .wrap { counter-reset: svd; }
.svd__pics { display: flex; flex-direction: column; gap: 16px; }
.svd__pic { position: relative; overflow: hidden; background: var(--line); }
.svd__pic img { width: 100%; height: 100%; object-fit: cover; }
.svd__pics--1 .svd__pic { aspect-ratio: 3 / 2; }
.svd__pics--2 .svd__pic--0 { aspect-ratio: 3 / 2; }
.svd__pics--2 .svd__pic--1 { aspect-ratio: 16 / 9; }
.svd__n::before { content: counter(svd, decimal-leading-zero); font-family: var(--mono); font-size: 40px; line-height: 1; color: var(--accent); }
.svd__t { margin-top: 16px; font-family: var(--head); font-weight: 400; font-size: clamp(28px, 3vw, 42px); line-height: 1.2; letter-spacing: -.01em; word-spacing: -.04em; }
.svd__d { margin-top: 16px; font-size: 19px; color: var(--ink-2); }
.svd__dl { margin-top: 40px; border-top: 1px solid var(--line); }
.svd__dl > div { display: grid; gap: 8px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.svd__dl dt { font-family: var(--font); font-weight: 600; font-size: 13px; color: var(--accent); }
.svd__dl dd { margin: 0; }
.svd__do { display: grid; gap: 8px; counter-reset: do; }
.svd__do li { counter-increment: do; display: grid; grid-template-columns: 32px 1fr; }
.svd__do li::before { content: counter(do); font-family: var(--mono); font-size: 14px; color: var(--ink-3); padding-top: 3px; }
@media (min-width: 1024px) {
  .svd { grid-template-columns: 1fr 1fr; gap: 80px; align-items: stretch; }
  .svd.is-rev .svd__pics { order: 2; }
  .svd__dl > div { grid-template-columns: 160px 1fr; gap: 24px; }
  .svd__pics--1 .svd__pic { aspect-ratio: auto; flex: 1; }
  .svd__pics--2 .svd__pic--1 { aspect-ratio: auto; flex: 1; min-height: 220px; }
}

/* 질문 접기 */
.qa__in { display: grid; gap: 40px; }
.qa__note { margin-top: 24px; color: rgba(244, 239, 230, .7); max-width: 30em; font-size: 15px; }
.qa__list { border-top: 1px solid var(--line); }
.qa__it { border-bottom: 1px solid var(--line); }
.qa__it summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; padding: 16px 0; cursor: pointer; list-style: none; font-family: var(--font); font-weight: 600; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.45; }
.qa__it summary::-webkit-details-marker { display: none; }
.qa__it summary .i { flex: none; width: 22px; height: 22px; color: var(--accent); transition: transform .35s var(--ease); }
.qa__it[open] summary .i { transform: rotate(45deg); }
.qa__it p { padding: 0 48px 32px 0; color: var(--ink-2); }
.qa--tips .qa__list, .qa--tips .qa__it { border-color: var(--line-g); }
.qa--tips .qa__it summary .i { color: var(--apricot); }
.qa--tips .qa__it p { color: rgba(244, 239, 230, .78); }
@media (min-width: 1024px) { .qa__in { grid-template-columns: 1fr 1.6fr; gap: 96px; align-items: start; } .qa__in .sh { margin-bottom: 0; } }

/* ── 영상 페이지 ── */
.vlist__ol { display: grid; gap: 0; counter-reset: vr; }
.vrow { counter-increment: vr; display: grid; gap: 24px; padding: 48px 0; border-top: 1px solid var(--line); }
.vrow:first-child { padding-top: 0; border-top: 0; }
.vrow__pic { overflow: hidden; }
.vrow__n::before { content: counter(vr, decimal-leading-zero); font-family: var(--mono); font-size: 40px; line-height: 1; color: var(--accent); }
.vrow__t { margin-top: 16px; font-family: var(--font); font-weight: 600; font-size: clamp(21px, 2.1vw, 29px); line-height: 1.4; }
@media (min-width: 1024px) { .vrow { grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: center; } }
.chs__list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.chs__list a { display: flex; align-items: center; gap: 16px; min-height: 88px; padding: 0 8px; border-bottom: 1px solid var(--line); font-family: var(--font); font-weight: 600; font-size: 21px; transition: color .2s, background-color .2s; }
.chs__list a span { flex: 1; }
.chs__list a .i:first-child { width: 26px; height: 26px; color: var(--accent); }
.chs__list a:hover { background: var(--cream); color: var(--accent); }
@media (min-width: 1024px) { .chs__list { grid-template-columns: repeat(4, 1fr); border-top: 0; gap: 24px; } .chs__list a { flex-direction: column; align-items: flex-start; justify-content: space-between; min-height: 180px; padding: 24px; border: 1px solid var(--line); } .chs__list a span { flex: none; } }

/* ── 오시는 길 ── */
.visit__in { display: grid; gap: 64px; }
.visit__addr { font-family: var(--font); font-weight: 600; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.45; }
.visit__maps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.visit__note { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--ink-2); }
.visit__list { border-top: 1px solid var(--line); }
.visit__list li { display: grid; grid-template-columns: 96px 1fr; align-items: center; min-height: 64px; border-bottom: 1px solid var(--line); }
.visit__list span { font-family: var(--font); font-weight: 600; font-size: 13px; color: var(--accent); }
.visit__list a, .visit__list p { font-size: 19px; font-weight: 600; }
.visit__list a:hover { color: var(--accent); }
@media (min-width: 1024px) { .visit__in { grid-template-columns: 1fr 1fr; gap: 96px; } }

/* ── 바닥글 ── */
.ft { padding: 80px 0 48px; color: rgba(244, 239, 230, .78); font-size: 15px; }
.ft__brand img { height: 26px; padding: 10px 14px; box-sizing: content-box; background: var(--cream); border-radius: 2px; }
.ft__brand p { color: var(--cream); font-size: 17px; font-weight: 600; }
.ft__ch a { color: var(--cream); border: 1px solid var(--line-g); border-radius: 2px; }
.ft__ch a:hover { color: var(--apricot); border-color: var(--apricot); }
.ft__nav a { color: var(--cream); }
.ft__nav a:hover { color: var(--apricot); }
.ft__info a:hover { color: var(--apricot); }
.ft__copy { margin-top: 16px; font-family: var(--font); font-weight: 500; font-size: 12px; color: rgba(244, 239, 230, .5); }

@media (prefers-reduced-motion: reduce) {
  .slats i { translate: none; }
  .slats i::before { animation: none; }
  .step { --on: 1; }
}