/* 치수 카드 (/fit) — 휴대폰 먼저(375px). 색·모서리는 base.css 토큰만 쓴다. 숫자가 주인공, 나머지는 조용하게. */
/* 색은 구독자 화면(app.css)과 같게 — base.css 기본 강조색(남보라)은 개발자 콘솔 것이라, 공고 화면에서 넘어오면 다른 사이트처럼 보였다 */
:root { --bg: #fafaf9; --surface-2: #f5f5f4; --line: #e7e5e4; --line-soft: #f0efed;
  --ink: #1c1917; --ink-2: #44403c; --mute: #78716c; --faint: #a8a29e;
  --accent: #0f766e; --accent-soft: #f0fdfa; --accent-ink: #115e59; --on-accent: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0f0e0d; --surface: #171514; --surface-2: #1f1d1b; --line: #2c2926; --line-soft: #23201e;
  --ink: #f5f5f4; --ink-2: #d6d3d1; --mute: #a8a29e; --faint: #78716c;
  --accent: #2dd4bf; --accent-soft: #042f2e; --accent-ink: #99f6e4; --on-accent: #042f2e; } }
:root[data-theme="dark"] { --bg: #0f0e0d; --surface: #171514; --surface-2: #1f1d1b; --line: #2c2926; --line-soft: #23201e;
  --ink: #f5f5f4; --ink-2: #d6d3d1; --mute: #a8a29e; --faint: #78716c; --accent: #2dd4bf; --accent-soft: #042f2e; --accent-ink: #99f6e4; --on-accent: #042f2e; }
.fit-wrap { max-width: 640px; margin: 0 auto; padding: 0 16px; }
.fit-bar { border-bottom: 1px solid var(--line); background: var(--bg); }
.fit-bar .fit-wrap { display: flex; align-items: center; justify-content: space-between; height: 56px; }
.fit-logo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 18px; letter-spacing: -0.04em; color: var(--ink); }
.fit-logo i { width: 26px; height: 26px; border-radius: 8px; background: var(--accent); display: grid; place-items: center; color: var(--on-accent); font-style: normal; font-size: 14px; }
.fit-logo:hover { text-decoration: none; }
.fit-barlink { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--ink-2); }

.fit { padding-top: 20px; padding-bottom: 8px; word-break: keep-all; overflow-wrap: anywhere; }
.fit h1 { margin: 4px 0 4px; font-size: 24px; line-height: 1.3; font-weight: 700; letter-spacing: -0.02em; }
.fit h1 span { color: var(--accent); }
.fit h2 { margin: 0 0 12px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.fit h2 .num { color: var(--mute); font-weight: 500; }
.fit h3 { margin: 20px 0 8px; font-size: 13px; font-weight: 600; color: var(--mute); }
.fit p { margin: 0; }
.fit-crumb { font-size: 13px; }
.fit-crumb a { display: inline-flex; align-items: center; min-height: 32px; color: var(--mute); }
.fit-meta { color: var(--mute); font-size: 14px; }
.fit .fit-lead { margin-top: 16px; font-size: 15px; color: var(--ink-2); }
.fit .fit-ad { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--r); background: var(--warn-soft); color: var(--ink);
  font-size: 14px; font-weight: 500; border: 1px solid var(--warn); }
.fit .fit-cta { margin-top: 16px; }

.fit-types { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.fit-types a { display: inline-flex; align-items: center; justify-content: center; min-width: 60px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink-2); font-weight: 500; font-size: 15px; }
.fit-types a:hover { text-decoration: none; background: var(--surface-2); }
.fit-types a[aria-current] { border-color: var(--ink); background: var(--ink); color: var(--surface); }

.fit-space { margin-top: 20px; padding: 20px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.fit-dims { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.fit-dim { display: flex; align-items: baseline; gap: 4px; }
.fit-dim span { margin-right: 6px; font-size: 13px; color: var(--mute); }
.fit-dim b { font-size: 40px; line-height: 1.1; font-weight: 600; letter-spacing: -0.03em; }
.fit-dim i { font-style: normal; font-size: 16px; color: var(--ink-2); }
.fit-dim em, .fit-urow em { font-style: normal; font-size: 15px; color: var(--mute); }
.fit .fit-src { margin-top: 8px; font-size: 13px; color: var(--mute); }
.fit-quote { margin-top: 2px; font-size: 13px; color: var(--ink-2); }
.fit-quote summary, .fit-tell summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--accent); font-size: 14px; }
.fit-quote p { padding: 10px 12px; background: var(--surface-2); border-radius: var(--r); }

.fit-items { list-style: none; margin: 0; padding: 0; }
.fit-items li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line-soft); }
.fit-items li div { min-width: 0; display: flex; flex-direction: column; }
.fit-items b { font-size: 15px; font-weight: 600; }
.fit-items span { font-size: 14px; color: var(--ink-2); }
.fit-items small { font-size: 12px; color: var(--ok); }
.fit-items li.no small { color: var(--bad); }
.fit-items li.ask small { color: var(--warn); }
.fit-go, .fit-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.fit-go:hover, .fit-btn:hover { text-decoration: none; background: var(--surface-2); }
.fit-btn { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.fit-btn:hover { background: var(--ink); opacity: .9; }
.fit-btn.quiet { background: var(--surface); color: var(--ink); border-color: var(--line); }
.fit .fit-check { margin-top: 8px; font-size: 13px; color: var(--mute); }

.fit-caution h3 { margin-top: 16px; }
.fit-caution ul { margin: 0; padding-left: 18px; font-size: 14px; color: var(--ink-2); }
.fit-caution li + li { margin-top: 6px; }
.fit-pg { color: var(--faint); font-size: 12px; white-space: nowrap; }

.fit-ulist { list-style: none; margin: 0; padding: 0; }
.fit-ulist > li { padding: 12px 0; border-top: 1px solid var(--line-soft); }
.fit-ulist > li:first-child { border-top: 0; padding-top: 0; }
.fit-urow { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.fit-urow b { font-size: 15px; font-weight: 600; }
.fit-ulist .fit-caution h3 { margin-top: 8px; }

.fit-tell { margin-top: 8px; border-top: 1px solid var(--line-soft); }
.fit form label { display: block; margin-top: 12px; font-size: 13px; color: var(--ink-2); }
.fit form input, .fit form select { display: block; width: 100%; min-height: 44px; margin-top: 4px; padding: 0 12px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; }
.fit-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fit .fit-hint { margin-top: 10px; font-size: 13px; color: var(--mute); }
.fit form .fit-btn { margin-top: 12px; width: 100%; }
.fit-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fit .fit-thanks { margin-top: 12px; padding: 10px 12px; border-radius: var(--r); background: var(--ok-soft); color: var(--ink); font-size: 14px; }

.fit-about { margin-top: 24px; font-size: 13px; color: var(--mute); }
.fit-about p + p { margin-top: 8px; }
.fit-about a { display: inline-flex; align-items: center; min-height: 44px; }
.fit-foot { margin-top: 32px; padding: 20px 0 40px; border-top: 1px solid var(--line); font-size: 12px; color: var(--faint); }
.fit-foot p { margin: 0 0 4px; }
.fit-foot a { color: var(--mute); display: inline-flex; align-items: center; min-height: 32px; }

/* 운영자 화면 */
.fit-dev { max-width: 880px; }
.fit-tbl { overflow-x: auto; margin-top: 12px; }
.fit-tbl table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fit-tbl th, .fit-tbl td { padding: 8px; border-top: 1px solid var(--line-soft); text-align: left; vertical-align: top; }
.fit-tbl th { color: var(--mute); font-weight: 500; white-space: nowrap; }
.fit-tbl form { display: flex; gap: 6px; }
.fit-tbl form .fit-btn { width: auto; margin: 0; }
.fit-url { word-break: break-all; }
@media (min-width: 720px) { .fit-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } .fit-form p, .fit-form button { grid-column: 1 / -1; } }

/* 가구 놓아 보기 (/place) */
.fp [hidden] { display: none !important; }
.fp h2 { margin: 24px 0 10px; }
.fp-rooms { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; }
.fp-rooms button, .fp-palette button { min-height: 44px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
  color: var(--ink-2); font-size: 15px; font-weight: 500; cursor: pointer; }
.fp-rooms button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--surface); }
.fp-size { display: flex; align-items: flex-end; gap: 8px; margin-top: 12px; }
.fp-size label { flex: 1; font-size: 13px; color: var(--ink-2); }
.fp-size span { padding-bottom: 12px; color: var(--mute); }
.fp input:not([type="range"]), .fp select { display: block; width: 100%; min-height: 44px; margin-top: 4px; padding: 0 12px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; }
.fp input[type="range"] { display: block; width: 100%; height: 44px; margin: 0; }
.fit .fp-empty { margin-top: 16px; padding: 28px 16px; border: 1px dashed var(--line); border-radius: var(--r-lg); text-align: center; color: var(--mute); font-size: 15px; }
.fp-svg { display: block; width: 100%; max-height: 70vh; margin-top: 16px; -webkit-user-select: none; user-select: none; }
.fp-room { fill: var(--surface); stroke: var(--ink); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.fp-door { fill: var(--surface-2); stroke: var(--faint); stroke-width: 1px; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.fp-svg text { text-anchor: middle; dominant-baseline: central; pointer-events: none; fill: var(--ink); font-weight: 500; }
.fp-svg .fp-doort { fill: var(--mute); font-weight: 400; }
.fp-piece { cursor: grab; touch-action: none; }
.fp-piece rect { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.fp-piece.on rect { stroke-width: 3px; }
.fp-piece.bad rect { fill: var(--bad-soft); stroke: var(--bad); }
.fp-sel { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.fp-sel p { display: flex; flex-direction: column; min-width: 0; }
.fp-sel b { font-size: 15px; font-weight: 600; }
.fp-sel span { font-size: 13px; color: var(--ink-2); }
.fp-sel div { display: flex; gap: 8px; flex: none; }
.fp-warn { list-style: none; margin: 12px 0 0; padding: 0; }
.fp-warn li { padding: 10px 12px; border-radius: var(--r); background: var(--bad-soft); color: var(--bad); font-size: 14px; font-weight: 500; }
.fp-warn li + li { margin-top: 6px; }
.fp-palette { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.fp-palette button { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 6px 12px; text-align: left; }
.fp-palette b { font-size: 15px; font-weight: 600; color: var(--ink); }
.fp-palette span { font-size: 12px; color: var(--mute); }
.fp-placed { list-style: none; margin: 0; padding: 0; }
.fp-placed li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line-soft); font-size: 14px; }
.fp-door-ctl label { display: block; margin-top: 8px; font-size: 13px; color: var(--ink-2); }
.fp #fp-reset { margin-top: 16px; }
@media (min-width: 560px) { .fp-palette { grid-template-columns: repeat(3, 1fr); } }

/* 3D로 보기 (/3d) */
.fit .fp-to3d { margin-top: 12px; }
.f3-views { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 16px; }
.f3-views button { min-height: 44px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink-2);
  font-size: 15px; font-weight: 500; cursor: pointer; }
.f3-views button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--surface); }
.f3-canvas { display: block; width: 100%; aspect-ratio: 4 / 3; margin-top: 12px; border-radius: var(--r-lg); background: var(--surface-2);
  touch-action: none; cursor: grab; -webkit-user-select: none; user-select: none; }
.fp-empty a { text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 520px) { .f3-canvas { aspect-ratio: 4 / 5; } }

/* 예시 배치 · '실제 평면이 아니에요' 안내 (2D·3D 공통) */
.fit .fp-notice { margin-top: 12px; padding: 10px 12px; border-radius: var(--r); background: var(--warn-soft); border: 1px solid var(--warn); color: var(--ink); font-size: 14px; font-weight: 500; }
.fit .fp-notice.real { background: var(--ok-soft); border-color: var(--ok); }
.fp-exbox { margin-top: 12px; }
.fp-exrow { display: flex; flex-wrap: wrap; gap: 8px; }
.fp-exrow button { min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: 14px; font-weight: 500; cursor: pointer; }
.fp-exrow button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.fit .fp-exline { margin-top: 6px; font-size: 13px; color: var(--mute); }
.fp-link { min-height: 32px; padding: 0 2px; border: 0; background: none; color: var(--accent); font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.fp-fix { fill: var(--surface-2); stroke: var(--mute); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.fp-win { stroke: var(--info); stroke-width: 5px; vector-effect: non-scaling-stroke; stroke-linecap: butt; }
.fit-form textarea { display: block; width: 100%; margin-top: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink); font: 12px/1.5 var(--mono); }
.fit-form .fit-wide { grid-column: 1 / -1; }
.fp-open { stroke: var(--surface); stroke-width: 4px; vector-effect: non-scaling-stroke; stroke-dasharray: 2 5; stroke-linecap: butt; }
.fp-sizebox .fp-size { margin-top: 0; }