/* 윤다온 그림 전시실 — 프리랜서 일러스트레이터 디자인 샘플 (디코랩)
   구성: 전시 벽 액자 — 섹션 = 갤러리 벽의 방, 크기·테 재질이 다른 액자 + 미술관 캡션 라벨, 메뉴 = 전시장 평면도 */

:root {
  --wall: #F1EFF3;          /* 갤러리 벽 — 배경 */
  --wall-deep: #E7E3EC;     /* 벽 그늘 */
  --ink: #25212C;           /* 먹 — 본문 글자 */
  --ink-soft: #57505F;      /* 보조 글자 */
  --lavender: #6F5BA7;      /* 라벤더 과슈 — 주 버튼·지금 방 */
  --lavender-deep: #574591;
  --lavender-pale: #E4DEF2;
  --oak: #B98C5D;           /* 원목 액자·마루 */
  --oak-deep: #8F6640;
  --label: #FFFFFF;         /* 캡션 라벨 카드 */
  --paper: #FFFDF8;         /* 액자 속 종이 */
  --lamp: #FFE7B0;          /* 조명 빛 */
  --red-pencil: #D2453B;    /* 수정 메모 */

  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --hand: "Gamja Flower", "Pretendard Variable", Pretendard, sans-serif;

  --fs-h1: clamp(2.5rem, 1.5rem + 3.8vw, 4.4rem);
  --fs-h2: clamp(1.9rem, 1.45rem + 1.6vw, 2.6rem);
  --fs-body: 1rem;
  --fs-small: .84rem;
  --radius: 2px;

  --header-h: 104px;        /* 헤더 막대 + 평면 띠 (좁은 화면) */
  --plan-w: 0px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 112px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--ink);
  background: var(--wall);
  word-break: keep-all;
  overflow-wrap: anywhere;
  overflow-x: clip;
}
h1, h2, h3 { margin: 0; line-height: 1.25; letter-spacing: -.02em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
.nowrap { white-space: nowrap; }
.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; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 4px; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--lavender); outline-offset: 2px; }
.svg-hand { font-family: var(--hand); }

/* 자리표시 */
.ph { display: inline-block; border: 1.5px dashed #9C93AA; border-radius: 3px; padding: 0 6px; font-size: .92em; line-height: 1.5; color: var(--ink-soft); background: rgba(255,255,255,.5); }

/* ---------- 샘플 안내 띠 (위치·고정은 /demo/_shared/sample-banner.css) ---------- */
.sample-banner { background: var(--ink); color: #EDE9F3; font-size: 13px; line-height: 1.5; }
.sample-banner__inner { max-width: 1240px; margin: 0 auto; padding: 8px 20px; display: flex; gap: 10px; align-items: flex-start; }
.sample-banner__tag { flex: none; background: var(--lavender-pale); color: var(--ink); font-weight: 700; font-size: 12px; padding: 2px 8px; border-radius: 3px; }
.sample-banner a { color: #fff; font-weight: 600; }

/* ---------- 버튼 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 48px; padding: 10px 22px; border-radius: var(--radius);
  font: inherit; font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer;
  border: 2px solid transparent;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.btn--lav { background: var(--lavender); color: #fff; }
.btn--lav:hover { background: var(--lavender-deep); }
.btn--line { background: rgba(255,255,255,.6); color: var(--ink); border-color: var(--ink); }
.btn--line:hover { background: #fff; }
.btn--sm { min-height: 40px; padding: 6px 14px; font-size: .92rem; }
.btn--lg { min-height: 56px; font-size: 1.05rem; }
.btn:active { transform: translateY(1px); }

/* ---------- 머리글 ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--wall);
  border-bottom: 1px solid #D9D4E0;
}
.site-header__bar { max-width: 1240px; margin: 0 auto; height: 56px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.logo svg { width: 34px; height: 34px; }
.logo b { font-family: var(--hand); font-weight: 400; font-size: 1.7rem; line-height: 1; letter-spacing: 0; }
.logo b span { font-family: var(--font); font-size: .78rem; font-weight: 600; color: var(--ink-soft); margin-left: 6px; letter-spacing: 0; }
.site-header__links { display: flex; align-items: center; gap: 4px; }
.hlink { display: inline-flex; align-items: center; gap: 6px; min-width: 44px; min-height: 44px; justify-content: center; padding: 0 8px; text-decoration: none; font-weight: 600; font-size: .92rem; border-radius: var(--radius); }
.hlink svg { width: 20px; height: 20px; }
.hlink span { display: none; }
.hlink:hover { background: var(--lavender-pale); }
.hcta { display: none; }

/* ---------- 평면도 메뉴 — 좁은 화면: 헤더 아래 평면 띠 ---------- */
.plan { padding: 0 16px 8px; max-width: 1240px; margin: 0 auto; }
.plan__title, .plan__now { display: none; }
.plan__map {
  display: flex; gap: 2px; height: 38px;
  background: var(--ink); border: 2px solid var(--ink); border-radius: 2px;
}
.plan__room, .plan__entry {
  position: relative; flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  background: #FBFAFC; color: var(--ink); text-decoration: none;
  font-size: .8rem; line-height: 1.2;
  transition: background-color .3s, color .3s, flex-grow .3s;
}
.plan__room i { font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; font-size: .95rem; }
.plan__room span { display: none; white-space: nowrap; font-weight: 700; }
.plan__entry { order: -1; flex: 1.3 1 0; background: var(--wall-deep); font-weight: 700; color: var(--ink-soft); font-size: .75rem; }
.plan__corridor { display: none; }
.plan__room.is-active { flex-grow: 3.4; background: var(--lavender); color: #fff; }
.plan__room.is-active span { display: inline; }
.plan__room:hover { background: var(--lavender-pale); }
.plan__room.is-active:hover { background: var(--lavender-deep); }
/* 「현재 위치」 핀 */
.plan__room.is-active::after, .plan__entry.is-here::after {
  content: ""; position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%;
  background: #FFD465; box-shadow: 0 0 0 2px var(--ink);
}

/* ---------- 방(섹션) ---------- */
.room { position: relative; background: var(--wall); padding-top: 56px; }
.room:nth-of-type(even) { background: #EEEBF1; }
.room__inner { position: relative; max-width: 1120px; margin: 0 auto; padding: 0 16px 56px; }
.room__inner > * { position: relative; z-index: 1; }
/* 천장 레일 조명 */
.room__track { position: absolute; top: 0; left: 0; right: 0; height: 40px; display: flex; justify-content: space-evenly; pointer-events: none; }
.room__track::before { content: ""; position: absolute; top: 4px; left: 0; right: 0; height: 4px; background: #CFC9D7; }
.lamp { position: relative; top: 6px; width: 16px; height: 24px; background: #3A3442; border-radius: 3px 3px 7px 7px; transform: rotate(10deg); transform-origin: 50% 0; }
.lamp:nth-child(2n) { transform: rotate(-10deg); }
.lamp::after { content: ""; position: absolute; left: 2px; right: 2px; bottom: -3px; height: 6px; border-radius: 50%; background: var(--lamp); box-shadow: 0 0 12px 4px rgba(255,220,140,.7); transition: opacity .4s; }
/* 벽에 떨어지는 빛 웅덩이 */
.room__inner::before {
  content: ""; position: absolute; z-index: 0; top: -56px; left: 4%; right: 4%; height: 560px; pointer-events: none;
  background: radial-gradient(ellipse 50% 60% at 50% 0, rgba(255,231,176,.5), rgba(255,231,176,0) 72%);
  transition: opacity .9s ease;
}
/* 바닥: 걸레받이 + 마루 */
.room__floor { height: 30px; border-top: 8px solid #FBFAFC; background: repeating-linear-gradient(90deg, #C99E6E 0 118px, #B98C5D 118px 120px, #C3966A 120px 236px, #B98C5D 236px 238px); box-shadow: inset 0 6px 8px -6px rgba(60,40,20,.45); }

/* 조명 켜짐 — JS(has-motion)가 있을 때만 어둡게 시작해서 화면에 들어오면 한 번 깜빡이며 켜진다 */
.has-motion.lights .room::after { content: ""; position: absolute; inset: 0; z-index: 5; background: #1E1A26; opacity: .4; pointer-events: none; }
.has-motion.lights .room.is-lit::after { animation: lights-on 1.1s ease-out forwards; }
.has-motion.lights .room:not(.is-lit) .room__inner::before,
.has-motion.lights .room:not(.is-lit) .lamp::after { opacity: 0; }
@keyframes lights-on {
  0% { opacity: .4; }
  10% { opacity: .08; }
  20% { opacity: .32; }
  34% { opacity: .03; }
  100% { opacity: 0; }
}

/* ---------- 액자 공통 ---------- */
.frame { position: relative; background: var(--paper); }
.frame .art { width: 100%; height: auto; }
/* 금박 고전 테 */
.frame--gilt {
  border: 22px solid #B8913F;
  border-image: linear-gradient(135deg, #EAD38E, #A57E2E 28%, #F2DC9A 48%, #94701F 72%, #DDBE6E) 1;
  padding: 20px; background: #F6F1E4;
  box-shadow: inset 0 0 0 2px #CDAE62, 0 22px 34px -16px rgba(30,20,40,.5);
}
/* 원목 테 + 흰 매트 */
.frame--oak {
  border: 16px solid var(--oak);
  border-image: linear-gradient(90deg, #C99E6E, #A97B4C 30%, #C79B69 55%, #A07246 80%, #BD9061) 1;
  padding: 26px; background: #FCFBF7;
  box-shadow: inset 0 2px 6px rgba(60,40,20,.25), 0 16px 26px -14px rgba(40,25,10,.45);
}
/* 검정 알루미늄 얇은 테 */
.frame--alu { border: 6px solid #2A2930; padding: 18px; background: #FBFAF7; box-shadow: 0 12px 22px -12px rgba(20,20,30,.5); }
/* 흰 상자 액자(깊이 있는) */
.frame--box { border: 14px solid #FAFAFA; padding: 14px; background: #fff; box-shadow: inset 0 0 0 1px #E2DFE6, inset 0 8px 12px -8px rgba(0,0,0,.18), 0 18px 28px -16px rgba(30,20,40,.4); }
/* 라벤더 칠 나무 테 */
.frame--paint { border: 14px solid #8D7CC0; padding: 18px; background: #FFFDF8; box-shadow: inset 0 0 0 3px #7764B0, 0 16px 26px -14px rgba(50,30,80,.45); }
/* 집게로 집은 종이 */
.frame--clip { padding: 10px; background: #FBF7EE; box-shadow: 0 10px 16px -10px rgba(30,20,10,.45); transform: rotate(-1.5deg); margin-top: 18px; }
.frame--clip::before { content: ""; position: absolute; left: 50%; top: -16px; width: 46px; height: 26px; margin-left: -23px; border-radius: 3px; background: linear-gradient(#55505C, #2C2832); }
/* 클립으로 집은 캔버스 천 */
.frame--canvas {
  padding: 22px 18px 18px;
  background-color: #F5F1E7;
  background-image: repeating-linear-gradient(0deg, rgba(120,100,70,.05) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(120,100,70,.05) 0 1px, transparent 1px 4px);
  box-shadow: 8px 8px 0 #D9D1BE, 0 24px 34px -18px rgba(30,20,40,.45);
  margin-top: 24px;
}
.frame--canvas::before, .frame--canvas::after { content: ""; position: absolute; top: -18px; width: 54px; height: 30px; border-radius: 4px 4px 2px 2px; background: linear-gradient(#5A5562, #2C2832); }
.frame--canvas::before { left: 12%; }
.frame--canvas::after { right: 12%; }
/* 나사로 단 아크릴 안내판 */
.frame--acrylic { padding: 26px 22px; background: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.95); box-shadow: 0 1px 0 #fff inset, 0 14px 24px -16px rgba(30,20,40,.35); }
.frame--acrylic::before, .frame--acrylic::after { content: ""; position: absolute; top: 10px; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #F2F0F4, #9C97A3 70%); }
.frame--acrylic::before { left: 10px; }
.frame--acrylic::after { right: 10px; }

/* ---------- 캡션 라벨 ---------- */
.label { background: var(--label); padding: 16px 18px 18px; border-radius: 1px; box-shadow: 0 1px 0 #D5D0DB, 0 6px 12px -10px rgba(30,20,40,.4); max-width: 30rem; }
.label__no { font-size: var(--fs-small); font-weight: 700; color: var(--lavender-deep); font-variant-numeric: tabular-nums; }
.label__title { font-family: var(--hand); font-weight: 400; font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -.01em; margin-top: 2px; }
p.label__title { font-size: 1.5rem; }
.label__meta { margin-top: 8px; font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.6; border-top: 1px solid #E6E2EA; padding-top: 8px; }
.label__desc { margin-top: 10px; font-size: .95rem; }
.label--small { max-width: 17rem; padding: 12px 14px; }
.label--wall { margin-bottom: 28px; }
.label--mini { margin-top: 12px; padding: 8px 10px; font-size: .82rem; line-height: 1.5; color: var(--ink-soft); max-width: 22rem; }
.label--mini b { display: block; color: var(--ink); font-size: .95rem; }

/* ---------- 액자 + 라벨 걸기 ---------- */
.hang { display: grid; gap: 18px; }

/* ---------- 입구(히어로) ---------- */
.room--hero { padding-top: 40px; }
.hero { display: grid; gap: 32px; }
.hero__show { font-size: .95rem; color: var(--ink-soft); }
.hero__show b { font-family: var(--hand); font-weight: 400; font-size: 1.35rem; color: var(--ink); margin-left: 4px; }
.hero__title { font-family: var(--hand); font-weight: 400; font-size: var(--fs-h1); line-height: 1.12; margin-top: 6px; letter-spacing: -.01em; }
.hero__lead { margin-top: 14px; max-width: 34em; font-size: 1.02rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.hero__status { margin-top: 18px; font-size: .9rem; color: var(--ink-soft); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: #3E8A5E; box-shadow: 0 0 0 3px rgba(62,138,94,.2); }
.hang--hero { justify-items: start; }
.hang--hero .frame { max-width: 380px; width: 100%; }

/* ---------- 제1전시실: 살롱식 걸기 ---------- */
.salon { display: grid; gap: 34px; }
.work { margin: 0; }

/* ---------- 제2전시실: 4창 매트 ---------- */
.mat-grid { display: grid; gap: 14px; background: #F6F3F8; padding: 14px; }
.win { background: #fff; padding: 16px; box-shadow: inset 0 0 0 1px #E6E1EA, inset 3px 3px 0 #EDE9F1; }
.win svg { width: 52px; height: 52px; }
.win h3 { font-size: 1.15rem; margin-top: 8px; }
.win p { margin-top: 6px; font-size: .95rem; }
.win dl { margin: 10px 0 0; font-size: .88rem; display: grid; gap: 4px; }
.win dl div { display: flex; gap: 8px; }
.win dt { flex: none; color: var(--ink-soft); min-width: 4.5em; }
.win dd { margin: 0; font-weight: 600; }

/* ---------- 제3전시실: 의뢰 가늠 ---------- */
.quote { display: grid; gap: 26px; }
.opt { border: 0; margin: 0 0 18px; padding: 0; min-width: 0; }
.opt legend, .opt__label { display: block; font-weight: 700; margin-bottom: 8px; padding: 0; }
.opt__label output { font-family: var(--hand); font-weight: 400; font-size: 1.5rem; color: var(--lavender-deep); margin-left: 6px; }
.opt__hint { margin-top: 6px; font-size: .86rem; color: var(--ink-soft); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.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 14px; background: #fff; border: 2px solid #CFC8D8; border-radius: 2px; font-weight: 600; transition: background-color .2s, border-color .2s, color .2s; }
.chip input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip input:focus-visible + span { outline: 3px solid var(--lavender); outline-offset: 2px; }
.chip:hover span { border-color: var(--ink); }
.stepper { display: flex; align-items: center; gap: 10px; }
.stepper input[type="range"] { flex: 1; accent-color: var(--lavender); height: 32px; }
.stepper__btn { width: 44px; height: 44px; flex: none; border: 2px solid var(--ink); background: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; border-radius: 2px; color: var(--ink); }
.stepper__btn:hover { background: var(--lavender-pale); }

.preview { background: #fff; padding: 10px; box-shadow: inset 0 0 0 1px #E3DEE8; }
.preview__svg { width: 100%; max-width: 420px; margin: 0 auto; }
.preview__paper { fill: #FFFDF8; }
.preview__cap { text-align: center; font-size: .9rem; color: var(--ink-soft); margin-top: 4px; min-height: 1.6em; }
.mock { display: none; fill: none; stroke: #B9B2C4; stroke-width: 2.5; }
.mock text { stroke: none; fill: #8A8296; }
.mock rect[fill="#FFFDF8"] { fill: #FFFDF8; }
.preview[data-mock="cover"] .mock--cover,
.preview[data-mock="inner"] .mock--inner,
.preview[data-mock="emoji"] .mock--emoji,
.preview[data-mock="character"] .mock--character { display: inline; }
/* 그림 단계: 러프(파란 연필) → 스케치(먹 선) → 채색 → 수정 메모 */
.lines { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.lines--main { stroke: var(--ink); stroke-width: 3; transition: stroke .4s, opacity .4s; }
.lines--rough { stroke: #7E95C9; stroke-width: 2; stroke-dasharray: .05 .02; opacity: 0; transition: opacity .4s; }
.fills { transition: opacity .6s; }
.eyes { fill: var(--ink); stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; transition: opacity .4s; }
.eyes path { fill: none; }
.notes { opacity: 0; transition: opacity .4s; }
.preview[data-stage="rough"] .fills, .preview[data-stage="sketch"] .fills { opacity: 0; }
.preview[data-stage="rough"] .lines--main { stroke: #7E95C9; stroke-width: 2.2; stroke-dasharray: .03 .015; opacity: .9; }
.preview[data-stage="rough"] .lines--rough { opacity: .55; }
.preview[data-stage="rough"] .eyes { opacity: .3; }
.preview[data-stage="revise"] .notes { opacity: 1; }
.lines--rough { transform: translate(4px, 3px) rotate(.8deg); transform-origin: 200px 200px; }
.has-motion .preview.is-drawing .lines--main { stroke-dasharray: 1; animation: draw-line .9s ease-out both; }
@keyframes draw-line { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

.tl { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tl button {
  width: 100%; display: grid; grid-template-columns: 6.5em 4.5em 1fr; grid-template-areas: "name days bar" "note note note";
  align-items: center; gap: 2px 10px; text-align: left; padding: 8px 10px;
  font: inherit; color: inherit; background: #fff; border: 2px solid transparent; border-radius: 2px; cursor: pointer;
  transition: background-color .2s, border-color .2s;
}
.tl button b { grid-area: name; font-size: .98rem; }
.tl__days { grid-area: days; font-size: .88rem; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.tl__bar { grid-area: bar; height: 12px; position: relative; background: #EEEAF2; border-radius: 1px; overflow: hidden; }
.tl__bar::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--x, 0%); width: var(--w, 25%); background: repeating-linear-gradient(-55deg, #57505F 0 2px, transparent 2px 5px); border-left: 2px solid var(--ink); border-right: 2px solid var(--ink); }
.tl button small { grid-area: note; font-size: .8rem; color: var(--ink-soft); }
.tl button:hover { border-color: #CFC8D8; }
.tl button[aria-pressed="true"] { border-color: var(--ink); background: var(--lavender-pale); }
.tl button[aria-pressed="true"] .tl__bar::after { background: repeating-linear-gradient(-55deg, var(--lavender) 0 2px, transparent 2px 5px); }

.sum { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.sum > div { background: #fff; padding: 12px 14px; border-top: 3px solid var(--ink); }
.sum__label { font-size: .84rem; color: var(--ink-soft); font-weight: 700; }
.sum__value { font-family: var(--hand); font-size: 1.85rem; line-height: 1.2; margin-top: 2px; }
.sum__note, .sum__fit { font-size: .82rem; margin-top: 6px; color: var(--ink-soft); }
.sum__fit[data-fit="tight"] { color: #9A4A12; font-weight: 600; }
.sum__fit[data-fit="hard"] { color: var(--red-pencil); font-weight: 700; }

.letter { margin-top: 16px; }
.letter__title { display: block; font-weight: 700; margin-bottom: 6px; }
.letter__title small { font-weight: 500; color: var(--ink-soft); margin-left: 4px; }
.letter textarea {
  width: 100%; font: inherit; font-size: 16px; line-height: 1.7; padding: 12px 14px; resize: vertical; color: var(--ink);
  background-color: #FFFEFA; background-image: repeating-linear-gradient(transparent 0 26.2px, #E4DEEC 26.2px 27.2px); background-attachment: local;
  border: 2px solid #CFC8D8; border-radius: 2px;
}
.letter__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.letter__status { font-size: .9rem; font-weight: 700; color: #3E8A5E; }
.quote__disclaimer { margin-top: 18px; font-size: .84rem; color: var(--ink-soft); }

/* ---------- 제4전시실: 작업 방식 ---------- */
.terms { display: grid; gap: 26px; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: st; display: grid; gap: 12px; }
.steps li { counter-increment: st; display: grid; grid-template-columns: 34px 1fr; gap: 2px 12px; }
.steps li::before { content: counter(st); grid-row: span 2; width: 30px; height: 30px; border: 2px solid var(--ink); border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .9rem; }
.steps b { font-size: 1.02rem; }
.steps span { font-size: .94rem; color: var(--ink-soft); }
.rights h3 { font-family: var(--hand); font-weight: 400; font-size: 1.6rem; }
.rights table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: .92rem; }
.rights th, .rights td { text-align: left; padding: 9px 8px; border-bottom: 1px solid #E2DDE6; vertical-align: top; }
.rights thead th { font-size: .82rem; color: var(--ink-soft); border-bottom: 2px solid var(--ink); }
.rights tbody th { white-space: nowrap; }
.rights__note { margin-top: 10px; font-size: .86rem; color: var(--ink-soft); }

/* ---------- 제5전시실: 작가 ---------- */
.frame--small { max-width: 300px; }
.walltext { display: grid; gap: 22px; margin-top: 34px; max-width: 980px; }
.walltext h3 { font-family: var(--hand); font-weight: 400; font-size: 1.6rem; margin-bottom: 6px; }
.walltext p + p { margin-top: 8px; }
.cv { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cv li { display: grid; grid-template-columns: 3.4em 1fr; gap: 8px; font-size: .95rem; }
.cv li > span:first-child { color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* ---------- 제6전시실: 질문 ---------- */
.qa { border-bottom: 1px solid rgba(37,33,44,.16); }
.qa h3 button {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: left;
  padding: 14px 0; background: none; border: 0; font: inherit; font-weight: 700; font-size: 1.02rem; color: inherit; cursor: pointer;
}
.qa h3 button::after { content: ""; flex: none; width: 12px; height: 12px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .25s; margin-top: -6px; }
.qa h3 button[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 4px; }
.qa__panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .3s ease; }
.qa__panel > div { overflow: hidden; min-height: 0; }
.qa__panel p { padding-bottom: 14px; color: var(--ink-soft); }
.js .qa__panel { grid-template-rows: 0fr; }
.js .qa:has(button[aria-expanded="true"]) .qa__panel, .js .qa.is-open .qa__panel { grid-template-rows: 1fr; }

/* ---------- 제7전시실: 연락 ---------- */
.contact__hand { font-family: var(--hand); font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.5rem); line-height: 1.2; }
.contact__actions { display: grid; gap: 10px; margin-top: 18px; }
.contact__actions .btn { justify-content: flex-start; text-align: left; flex-wrap: wrap; }
.months { margin-top: 22px; }
.months__title { font-weight: 700; font-size: .95rem; }
.months__title small { color: var(--ink-soft); font-weight: 500; margin-left: 4px; }
.months ol { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.months li { background: #EEF5F1; padding: 8px 4px; text-align: center; border-top: 4px solid #3E8A5E; }
.months li b { display: block; font-size: .95rem; }
.months li span { font-size: .76rem; color: var(--ink-soft); }
.months li.is-full { background: #F1EEF4; border-top-color: #A49CB0; }
.months li.is-few { background: #FFF4DD; border-top-color: #D69A2D; }
.contact__sns { margin-top: 18px; font-size: .9rem; color: var(--ink-soft); }

/* ---------- 푸터 ---------- */
.site-footer { background: var(--ink); color: #D8D2E2; padding: 34px 0 calc(94px + env(safe-area-inset-bottom)); font-size: .88rem; }
.site-footer__inner { max-width: 1120px; margin: 0 auto; padding: 0 16px; display: grid; gap: 18px; }
.site-footer__logo { font-family: var(--hand); font-size: 1.6rem; color: #fff; }
.site-footer__biz { margin-top: 6px; line-height: 1.8; }
.site-footer .ph { color: #D8D2E2; border-color: #7E7690; background: transparent; }
.site-footer__links { margin-top: 8px; }
.site-footer__links .strong { font-weight: 800; color: #fff; }
.site-footer__note { margin-top: 6px; color: #A9A1B6; }
.site-footer__credit a { color: #fff; font-weight: 700; }

/* ---------- 하단 고정 연락 바 (좁은 화면) ---------- */
.quickbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: grid; grid-template-columns: 1fr 1fr 1.6fr; gap: 1px;
  background: #3A3442; padding-bottom: env(safe-area-inset-bottom);
}
.quickbar a { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 56px; background: var(--ink); color: #fff; text-decoration: none; font-weight: 700; font-size: .95rem; }
.quickbar svg { width: 18px; height: 18px; }
.quickbar .quickbar__cta { background: var(--lavender); }

/* ================= 화면이 넓어지면 ================= */
@media (min-width: 560px) {
  .mat-grid { grid-template-columns: 1fr 1fr; }
  .contact__actions { grid-template-columns: 1fr 1fr; }
  .contact__actions .btn--lg { grid-column: 1 / -1; }
}

@media (min-width: 760px) {
  .hlink span { display: inline; }
  .room { padding-top: 72px; }
  .room__inner { padding: 0 28px 72px; }
  .hero { grid-template-columns: 1.15fr .85fr; align-items: center; gap: 40px; }
  .hang--hero { justify-items: center; }
  /* 액자 + 오른쪽 아래 라벨 (미술관 관례). 라벨이 DOM 앞(모바일에서 제목이 먼저) */
  .hang { grid-template-columns: minmax(0, 1fr) minmax(220px, 280px); align-items: end; gap: 28px; }
  .hang > .label { order: 2; }
  .hang > .frame { order: 1; }
  .room--flip .hang { grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); }
  .room--flip .hang > .label { order: 1; }
  .room--flip .hang > .frame { order: 2; }
  .hang--hero { grid-template-columns: 1fr; }
  .salon { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; gap: 40px 30px; }
  .work--spread { grid-column: 1 / 9; }
  .work--cover { grid-column: 9 / 13; }
  .work--bear { grid-column: 1 / 5; }
  .work--emoji { grid-column: 5 / 9; }
  .work--market { grid-column: 9 / 13; align-self: start; }
  .mat-grid { grid-template-columns: 1.2fr 1fr; }
  .quote { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 34px; align-items: start; }
  .terms { grid-template-columns: 1fr 1fr; gap: 34px; }
  .walltext { grid-template-columns: 1.3fr 1.2fr 1fr; gap: 34px; }
  .room--about .hang { grid-template-columns: minmax(0, 300px) minmax(220px, 280px); justify-content: start; }
  .site-footer__inner { padding: 0 28px; }
}

@media (min-width: 1100px) {
  :root { --plan-w: 268px; }
  html { scroll-padding-top: 76px; }
  body { padding-bottom: 0; }
  .quickbar { display: none; }
  .hcta { display: inline-flex; margin-left: 6px; }
  .site-header__bar { max-width: none; height: 64px; padding: 0 28px; }
  /* 평면도: 왼쪽에 고정된 전시 안내도 카드 */
  .plan {
    position: fixed; top: 80px; left: 20px; width: 238px; padding: 14px 14px 12px; margin: 0;
    background: #FBFAFC; box-shadow: 0 1px 0 #D5D0DB, 0 10px 22px -14px rgba(30,20,40,.45);
  }
  .plan__title { display: block; font-weight: 800; font-size: .95rem; margin-bottom: 8px; }
  .plan__title small { display: block; font-weight: 500; font-size: .76rem; color: var(--ink-soft); }
  .plan__map {
    display: grid; height: auto; gap: 2px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 64px 30px 64px 56px;
    grid-template-areas: "r7 r6 r5" "co co co" "r2 r3 r4" "r1 r1 e";
  }
  .plan__room, .plan__entry { flex-direction: column; gap: 0; padding: 4px 2px; text-align: center; }
  .plan__room span { display: block; font-weight: 600; font-size: .74rem; white-space: normal; line-height: 1.25; }
  .plan__room i { font-size: 1.1rem; }
  .plan__corridor { display: flex; align-items: center; justify-content: center; background: #EEEAF2; font-size: .7rem; color: var(--ink-soft); }
  .plan__corridor span { display: inline-flex; align-items: center; gap: 6px; }
  .plan__corridor span::before { content: ""; width: 30px; border-top: 2px dashed #A49CB0; }
  .plan__entry { font-size: .82rem; }
  .plan__room.is-active::after, .plan__entry.is-here::after { top: 6px; right: 6px; width: 9px; height: 9px; }
  .plan__now { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: .84rem; color: var(--ink-soft); }
  .plan__now b { color: var(--ink); }
  .plan__pin { width: 9px; height: 9px; border-radius: 50%; background: #FFD465; box-shadow: 0 0 0 2px var(--ink); }
  main, .site-footer { padding-left: var(--plan-w); }
  .site-footer { padding-bottom: 30px; }
  .room__inner { padding: 0 36px 80px; }
}

@media (min-width: 1440px) {
  .room__inner { padding-left: 48px; padding-right: 48px; }
}

/* ---------- 동작 줄이기 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* 3단계: 색·투명도 피드백은 남긴다 */
  .btn, .chip span, .tl button, .plan__room, .fills, .lines--main, .notes, .qa__panel { transition-duration: .2s !important; }
}