/* 뮤즈 보드 — 추구미 콜라주 (전체 화면 오버레이)
 * 사진이 디자인의 전부: 흰 종이 보드, 먹색 글자, 헤어라인. 강조색 없음.
 * 사이트 테마([data-theme="dark"])를 따르고, 보드(종이)는 늘 흰색. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

.muse {
  --m-bg: #F1F0ED; --m-paper: #FFFFFF; --m-ink: #111111; --m-ink-2: #4A4A48; --m-ink-3: #8B8A86;
  --m-rule: #D9D7D2; --m-hover: #E7E5E0; --m-good: #2F6B3F; --m-warn: #9A4A1C;
  --m-ui: 'IBM Plex Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
  --m-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --m-brand: 'Bodoni Moda', Didot, 'Times New Roman', serif;
  position: fixed; inset: 0; z-index: 10050; background: var(--m-bg); color: var(--m-ink);
  font-family: var(--m-ui); font-weight: 400; line-height: 1.5; -webkit-font-smoothing: antialiased;
  padding-top: env(safe-area-inset-top, 0px);
}
[data-theme="dark"] .muse {
  --m-bg: #0E0E0E; --m-paper: #FFFFFF; --m-ink: #ECECEA; --m-ink-2: #B4B3AF; --m-ink-3: #75746F;
  --m-rule: #2B2B29; --m-hover: #1C1C1B; --m-good: #8FC79C; --m-warn: #E3A27A;
}
.muse[hidden] { display: none !important; }
.muse *, .muse *::before, .muse *::after { box-sizing: border-box; }
.muse button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; border-radius: 0; }
.muse button:focus-visible, .muse label:focus-visible { outline: 1px solid var(--m-ink); outline-offset: 3px; }
.muse .mb-meta { font-family: var(--m-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--m-ink-3); }

.muse .mb-screen { height: 100%; display: grid; grid-template-rows: auto 1fr auto; max-width: 560px; margin: 0 auto; }
.muse .mb-screen[hidden] { display: none !important; }

.muse .mb-head { padding: 14px 16px 0; display: grid; gap: 12px; }
.muse .mb-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.muse .mb-icon { width: 40px; height: 40px; margin: -10px 0 -10px -10px; display: inline-grid; place-items: center; color: var(--m-ink); }
.muse .mb-icon:hover { color: var(--m-ink-2); }
.muse .mb-row > * { display: grid; place-items: center; grid-auto-flow: column; gap: 6px; }
.muse .mb-row svg { display: block; }
.muse .mb-row #mbFrameName { font-size: 9.5px; }
.muse .mb-word { font-family: var(--m-brand); font-weight: 500; font-size: 15px; letter-spacing: .32em; }
.muse .mb-tabs { display: flex; gap: 18px; border-bottom: 1px solid var(--m-rule); }
.muse .mb-tabs button { font-size: 13.5px; color: var(--m-ink-3); padding: 0 0 8px; margin-bottom: -1px; border-bottom: 1px solid transparent; }
.muse .mb-tabs button[aria-pressed="true"] { color: var(--m-ink); border-bottom-color: var(--m-ink); }

.muse .mb-stage { position: relative; min-height: 0; display: grid; place-items: center; padding: 6px 16px 10px; }
.muse .mb-board { position: relative; background: var(--m-paper); overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 12px 32px rgba(0,0,0,.06); max-width: 100%; }
.muse .mb-empty { position: absolute; inset: 0; display: grid; place-content: center; gap: 10px; text-align: center; padding: 24px; color: #4A4A48; font-size: 13.5px; }
.muse .mb-empty b { font-weight: 500; color: #111111; font-size: 15px; }
.muse .mb-item { position: absolute; transform-origin: center; }
.muse .mb-item img { display: block; width: 100%; height: auto; pointer-events: none; }
.muse .mb-item.crop img { aspect-ratio: 3 / 4; object-fit: cover; }
.muse .mb-item.f-border { background: #FFFFFF; padding: 4px; box-shadow: 0 1px 1px rgba(0,0,0,.12), 0 6px 14px rgba(0,0,0,.14); }
.muse .mb-item.f-bleed { box-shadow: 0 6px 14px rgba(0,0,0,.12); }
.muse .mb-item.sel { z-index: 9999 !important; outline: 1px solid #111111; outline-offset: 3px; }
.muse .mb-item.sel::before, .muse .mb-item.sel::after { content: ''; position: absolute; width: 7px; height: 7px; background: #FFFFFF; border: 1px solid #111111; top: -7px; }
.muse .mb-item.sel::before { left: -7px; }
.muse .mb-item.sel::after { right: -7px; }
.muse .mb-handle { position: absolute; right: -11px; bottom: -11px; width: 22px; height: 22px; display: none; z-index: 2; cursor: nwse-resize; }
.muse .mb-handle::after { content: ''; position: absolute; inset: 5px; background: #111111; }
.muse .mb-item.sel .mb-handle { display: block; }
.muse .mb-text { font-family: var(--m-mono); font-weight: 500; letter-spacing: .04em; color: #111111; white-space: nowrap; line-height: 1.1; }
.muse .mb-text.v { writing-mode: vertical-rl; text-orientation: mixed; }
.muse .mb-chip .c { aspect-ratio: 1; }

.muse .mb-toast { position: absolute; left: 16px; right: 16px; bottom: 16px; margin: 0 auto; max-width: 420px; background: #111111; color: #F1F0ED; font-size: 12.5px; padding: 11px 14px; display: flex; gap: 12px; align-items: center; justify-content: space-between; z-index: 100; }
.muse .mb-toast[hidden] { display: none !important; }
.muse .mb-toast button { font-family: var(--m-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #F1F0ED; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

.muse .mb-bar { padding: 0 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
.muse .mb-bar[hidden] { display: none !important; }
.muse .mb-readout { padding-top: 8px; min-height: 2.1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.muse .mb-readout b { color: var(--m-ink); font-weight: 500; }
.muse .mb-row { display: flex; border-top: 1px solid var(--m-rule); }
.muse .mb-row > * { flex: 1; min-width: 0; text-align: center; font-size: 13.5px; padding: 14px 4px; border-left: 1px solid var(--m-rule); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.muse .mb-row > *[hidden] { display: none !important; }
.muse .mb-row > *:first-child { border-left: 0; }
@media (hover: hover) and (pointer: fine) { .muse .mb-row > *:hover { background: var(--m-hover); } }
.muse .mb-row .go { flex: 1.5; background: var(--m-ink); color: var(--m-bg); font-weight: 500; border-left: 0; }
.muse .mb-row .go:hover { background: var(--m-ink); opacity: .88; }
.muse .mb-row .go[disabled] { background: transparent; color: var(--m-ink-3); cursor: wait; }
.muse .mb-row .del { color: var(--m-warn); }
.muse .mb-field { display: flex; border-top: 1px solid var(--m-rule); }
.muse .mb-field[hidden] { display: none !important; }
.muse .mb-field input { flex: 1; min-width: 0; font: inherit; font-size: 16px; background: transparent; color: var(--m-ink); border: 0; border-bottom: 1px solid transparent; padding: 12px 2px; outline: none; }
.muse .mb-field input:focus-visible { border-bottom-color: var(--m-ink); }
.muse .mb-field .mb-meta { align-self: center; padding-right: 10px; }

/* 결과 */
.muse .mb-res-head { padding: 14px 16px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.muse .mb-pages { display: flex; gap: 14px; }
.muse .mb-pages button { font-family: var(--m-mono); font-size: 11px; color: var(--m-ink-3); padding-bottom: 2px; border-bottom: 1px solid transparent; }
.muse .mb-pages button.on { color: var(--m-ink); border-bottom-color: var(--m-ink); }
.muse .mb-pager { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; min-height: 0; }
.muse .mb-pager::-webkit-scrollbar { display: none; }
.muse .mb-card { flex: 0 0 100%; scroll-snap-align: start; padding: 18px 16px; overflow-y: auto; display: grid; align-content: start; gap: 18px; min-width: 0; }
.muse .mb-card h2 { margin: 0; font-size: 13px; font-weight: 500; padding-bottom: 8px; border-bottom: 1px solid var(--m-rule); display: flex; justify-content: space-between; gap: 10px; color: var(--m-ink); font-family: var(--m-ui); letter-spacing: 0; }
.muse .mb-sig-wrap { display: grid; grid-template-columns: 38% 1fr; gap: 16px; align-items: end; }
.muse .mb-thumb { aspect-ratio: 3 / 4; background: var(--m-paper); overflow: hidden; }
.muse .mb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.muse .mb-signature { margin: 0; font-size: clamp(22px, 6.4vw, 30px); line-height: 1.32; font-weight: 300; letter-spacing: -.02em; text-wrap: balance; }
.muse .mb-signature strong { font-weight: 600; }
.muse .mb-kw { margin: 0; font-family: var(--m-mono); font-size: 12px; line-height: 1.8; color: var(--m-ink-2); }
.muse .mb-lead { margin: 0; font-size: 13px; color: var(--m-ink-2); }
.muse .mb-status { font-family: var(--m-mono); font-size: 11px; color: var(--m-ink-3); }
.muse .mb-status.err { color: var(--m-warn); }
.muse .mb-axes { display: grid; gap: 22px; }
.muse .mb-axis { display: grid; gap: 7px; }
.muse .mb-axis .ends { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--m-ink-3); }
.muse .mb-axis .ends .on { color: var(--m-ink); font-weight: 500; }
.muse .mb-axis .track { position: relative; height: 1px; background: var(--m-rule); }
.muse .mb-axis .track i { position: absolute; top: -5px; width: 1px; height: 11px; background: var(--m-ink); }
.muse .mb-axis .track::before { content: ''; position: absolute; left: 50%; top: -3px; height: 7px; width: 1px; background: var(--m-rule); }
.muse .mb-season { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; align-items: baseline; }
.muse .mb-season button { color: var(--m-ink-3); padding-bottom: 2px; border-bottom: 1px solid transparent; }
.muse .mb-season button[aria-pressed="true"] { color: var(--m-ink); border-bottom-color: var(--m-ink); }
.muse .mb-swatches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; }
.muse .mb-sw .c { aspect-ratio: 1 / 1.1; }
.muse .mb-sw .nm { font-size: 13px; margin-top: 7px; }
.muse .mb-sw .mb-meta { display: block; margin-top: 2px; }
.muse .mb-sw .fit { display: block; font-size: 12px; margin-top: 4px; }
.muse .fit.good { color: var(--m-good); }
.muse .fit.warn { color: var(--m-warn); }
.muse .fit.mid { color: var(--m-ink-3); }
.muse .mb-idx { list-style: none; margin: 0; padding: 0; }
.muse .mb-idx li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--m-rule); }
.muse .mb-idx b { font-weight: 500; font-size: 14px; }
.muse .mb-idx .mb-meta { align-self: baseline; }
.muse .mb-idx p { grid-column: 1 / -1; margin: 0; font-size: 12.5px; color: var(--m-ink-2); }
.muse .mb-res-bar { padding: 0 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
.muse .mb-res-bar .mb-note { text-align: center; padding-top: 8px; }

/* 결과 화면 밖: 진단 결과의 진입 줄, 룩 생성기 하단 도크 */
.muse-entry { display: flex; align-items: center; gap: 12px; width: 100%; margin: 16px 0; padding: 14px 4px; background: none; border: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); color: var(--text-primary); font: inherit; cursor: pointer; text-align: left; }
.muse-entry .t { flex: 1; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.muse-entry .s { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .08em; color: var(--accent); }
.muse-entry:hover .t { color: var(--accent); }

.look-dock { position: sticky; bottom: 0; z-index: 5; display: grid; grid-template-columns: 56px 56px 1fr; gap: 8px; padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to top, var(--bg-primary) 78%, transparent); margin-bottom: 1rem; }
.look-dock .look-gen-submit { margin: 0; height: 56px; padding: 0 1rem; letter-spacing: .04em; }
.dock-btn { position: relative; height: 56px; display: grid; place-items: center; align-content: center; gap: 3px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); color: var(--text-secondary); cursor: pointer; font: inherit; padding: 0; }
.dock-btn span { font-size: 10.5px; letter-spacing: .02em; line-height: 1; }
.dock-btn[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
.dock-btn .dot { position: absolute; top: 7px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: none; }
.dock-btn[aria-pressed="true"] .dot { display: block; }
.dock-btn.empty { color: var(--text-muted); border-style: dashed; }

/* 터치·눌림 피드백 (web interface guidelines + emil-design-eng) */
.muse { overscroll-behavior: contain; }
.muse .mb-card, .muse .mb-pager { overscroll-behavior: contain; }
.muse button, .muse label, .dock-btn, .muse-entry, .look-dock .look-gen-submit { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.muse .mb-row > *, .muse .mb-icon, .dock-btn, .look-dock .look-gen-submit { transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), background-color 160ms ease, color 160ms ease; }
.muse .mb-row > *:active, .muse .mb-icon:active, .dock-btn:active, .look-dock .look-gen-submit:not(:disabled):active { transform: scale(0.97); }
.muse .mb-sw .mb-meta, .muse .mb-sig-wrap .mb-meta { font-variant-numeric: tabular-nums; }
.muse .mb-board.dragging { cursor: grabbing; }
@media (hover: hover) and (pointer: fine) { .dock-btn:hover { color: var(--text-primary); border-color: var(--text-muted); } }
@media (prefers-reduced-motion: reduce) {
  .muse .mb-row > *, .muse .mb-icon, .dock-btn, .look-dock .look-gen-submit { transition: background-color 120ms ease, color 120ms ease; }
  .muse .mb-row > *:active, .muse .mb-icon:active, .dock-btn:active, .look-dock .look-gen-submit:active { transform: none; }
}

/* 취향 읽기 상태: 읽는 중 → 저장 완료 + 룩에 반영되는 것 */
.muse .mb-card.reading .mb-signature, .muse .mb-card.reading .mb-kw { opacity: .38; transition: opacity 240ms ease; }
.muse .mb-state:empty { display: none; }
.muse .mb-state { display: grid; gap: 6px; padding-top: 14px; border-top: 1px solid var(--m-rule); }
.muse .mb-st-title { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--m-ink); }
.muse .mb-st-title svg { width: 18px; height: 18px; flex-shrink: 0; }
.muse .mb-st-title.ok { color: var(--m-good); }
.muse .mb-st-title.ok span { color: var(--m-ink); }
.muse .mb-st-title.warn { color: var(--m-warn); }
.muse .mb-progress { height: 1px; background: var(--m-rule); overflow: hidden; margin-bottom: 6px; }
.muse .mb-progress i { display: block; width: 32%; height: 100%; background: var(--m-ink); animation: mbProg 1.4s cubic-bezier(.45, 0, .25, 1) infinite; }
@keyframes mbProg { from { transform: translateX(-100%); } to { transform: translateX(320%); } }
.muse .mb-retry { justify-self: start; min-height: 40px; margin-top: 4px; padding: 0 18px; border: 1px solid var(--m-ink); font-size: 13px; font-weight: 500; }
.muse .mb-apply { margin: 0; display: grid; }
.muse .mb-apply h3 { margin: 0 0 4px; font-weight: 400; }
.muse .mb-apply > div { display: grid; grid-template-columns: 76px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--m-rule); }
.muse .mb-apply > div:first-of-type { border-top: 1px solid var(--m-rule); }
.muse .mb-apply dt { font-size: 12px; color: var(--m-ink-3); }
.muse .mb-apply dd { margin: 0; font-size: 13.5px; color: var(--m-ink); line-height: 1.45; }
@media (prefers-reduced-motion: reduce) { .muse .mb-progress i { animation: none; width: 100%; opacity: .4; } }
.muse .mb-card.reading .mb-state { border-top: 0; padding-top: 0; } .muse .mb-card.reading .mb-progress { margin-bottom: 12px; }

/* 빈 보드: 사진 추가가 먼저, 예시는 버튼으로 */
.muse .mb-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; pointer-events: auto; }
.muse .mb-empty b { font-size: 16px; font-weight: 500; letter-spacing: -.01em; color: var(--m-ink); }
.muse .mb-empty > span { max-width: 260px; font-size: 12.5px; line-height: 1.55; color: var(--m-ink-2); }
.muse .mb-empty-add { display: grid; place-items: center; gap: 6px; width: 92px; height: 112px; margin-bottom: 8px; border: 1px dashed var(--m-ink-3); color: var(--m-ink); cursor: pointer; }
.muse .mb-empty-add svg { width: 26px; height: 26px; }
.muse .mb-empty-add span { font-family: var(--m-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
.muse .mb-empty-add:focus-visible { outline: 1px solid var(--m-ink); outline-offset: 3px; }
.muse .mb-empty-note { max-width: 260px; font-size: 11px; line-height: 1.5; color: var(--m-ink-3); }
.muse .mb-empty-example { margin-top: 6px; padding: 8px 2px; font-size: 12.5px; color: var(--m-ink-2); border-bottom: 1px solid currentColor; }