:root{
  --bg:#f4f3f1; --panel:#ffffff; --panel-2:#faf9f7; --ink:#1c1b1a; --ink-2:#5d5a56;
  --ink-3:#8d8983; --line:#e2dfda; --line-2:#d3cfc8; --accent:#1c1b1a; --accent-ink:#ffffff;
  --chip:#efedea; --shadow:0 1px 2px rgba(0,0,0,.05),0 8px 24px rgba(0,0,0,.06);
  --sky-a:#e9e6e0; --sky-b:#cfcac2;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#141414; --panel:#1c1c1c; --panel-2:#232323; --ink:#f0eeea; --ink-2:#b3aea6;
    --ink-3:#7e7973; --line:#2e2e2e; --line-2:#3b3b3b; --accent:#f0eeea; --accent-ink:#141414;
    --chip:#2a2a2a; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
    --sky-a:#232323; --sky-b:#151515;
  }
}
:root[data-theme="dark"]{
  --bg:#141414; --panel:#1c1c1c; --panel-2:#232323; --ink:#f0eeea; --ink-2:#b3aea6;
  --ink-3:#7e7973; --line:#2e2e2e; --line-2:#3b3b3b; --accent:#f0eeea; --accent-ink:#141414;
  --chip:#2a2a2a; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
  --sky-a:#232323; --sky-b:#151515;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:Pretendard,'Noto Sans KR','Apple SD Gothic Neo',-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif;
  -webkit-font-smoothing:antialiased; overflow:hidden;
}
#app{display:flex; flex-direction:column; height:100vh; height:100dvh;}

/* ---------- header ---------- */
header{
    position:relative; display:flex; align-items:center; gap:18px; padding:9px 16px; min-height:68px;
  border-bottom:1px solid var(--line); background:var(--panel); flex:none; overflow:hidden;
}
.brand{display:flex; align-items:baseline; gap:9px; flex:none;}
.brand b{font-size:15px; letter-spacing:-.02em; font-weight:700;}
.brand span{font-size:11.5px; color:var(--ink-3); letter-spacing:-.01em;}
.rooms{
  display:flex; gap:6px; overflow-x:auto; scrollbar-width:none;
  position:absolute; left:50%; transform:translateX(-50%);
  background:var(--chip); padding:3px; border-radius:99px;
}
.rooms::-webkit-scrollbar{display:none}
.rooms button{
  font:inherit; font-size:14px; font-weight:600; letter-spacing:-.02em; white-space:nowrap;
  padding:9px 26px; border-radius:99px; border:0; background:transparent;
  color:var(--ink-2); cursor:pointer; transition:.15s;
}
.rooms button:hover{background:var(--chip); color:var(--ink)}
.rooms button[aria-selected="true"]{background:var(--accent); color:var(--accent-ink)}

/* ---------- layout ---------- */
main{display:flex; flex:1; min-height:0;}
#stage{position:relative; flex:1; min-width:0; background:linear-gradient(var(--sky-a),var(--sky-b));}
#stage canvas{display:block; width:100%; height:100%;}
#loading{
  position:absolute; inset:0; display:grid; place-items:center; z-index:5;
  background:var(--bg); color:var(--ink-3); font-size:13px; letter-spacing:-.01em;
}
#loading.done{opacity:0; pointer-events:none; transition:opacity .5s}
#loading.failed{color:#9d2b24; padding:24px; text-align:center}

.hud{position:absolute; left:14px; bottom:14px; display:flex; gap:6px; flex-wrap:wrap; z-index:3}
.hud button{
  font:inherit; font-size:11.5px; font-weight:500; padding:7px 11px; border-radius:8px;
  border:1px solid var(--line-2); background:var(--panel); color:var(--ink-2);
  cursor:pointer; box-shadow:var(--shadow); transition:.15s; letter-spacing:-.01em;
}
.hud button:hover{color:var(--ink)}
.hud button[aria-pressed="true"]{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.seg{
  display:flex; align-items:center; gap:2px; padding:3px 3px 3px 9px; border-radius:9px;
  border:1px solid var(--line-2); background:var(--panel); box-shadow:var(--shadow);
}
.seg > b{
  font-size:10px; font-weight:600; color:var(--ink-3); letter-spacing:.02em;
  margin-right:5px; white-space:nowrap;
}
.seg button{
  border:0; box-shadow:none; background:transparent; padding:5px 9px; border-radius:6px;
  font-size:11.5px; font-weight:500; color:var(--ink-2); letter-spacing:-.01em; cursor:pointer;
}
.seg button:hover{background:var(--chip); color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--accent); color:var(--accent-ink)}
.hint{
  position:absolute; right:14px; top:14px; z-index:3; font-size:11px; color:var(--ink-3);
  background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:6px 10px;
  box-shadow:var(--shadow); letter-spacing:-.01em; max-width:170px; line-height:1.55;
}

/* ---------- side panel ---------- */
aside{
  width:326px; flex:none; background:var(--panel); border-left:1px solid var(--line);
  display:flex; flex-direction:column; min-height:0;
}
.parts{display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid var(--line); flex:none;}
.parts button{
  font:inherit; font-size:12.5px; font-weight:500; letter-spacing:-.02em; padding:13px 4px;
  border:0; border-bottom:2px solid transparent; background:transparent; color:var(--ink-3); cursor:pointer;
}
.parts button:hover{color:var(--ink-2)}
.parts button[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--accent)}

.current{display:flex; align-items:center; gap:11px; padding:14px 16px; border-bottom:1px solid var(--line); flex:none;}
.current .chip{width:42px; height:42px; border-radius:9px; border:1px solid var(--line-2); flex:none; background:#ccc;}
.current .meta{min-width:0}
.current .meta strong{display:block; font-size:13.5px; font-weight:600; letter-spacing:-.02em;}
.current .meta span{display:block; font-size:11.5px; color:var(--ink-3); margin-top:2px; letter-spacing:-.01em;}

.filters{display:flex; gap:5px; padding:11px 16px 0; flex-wrap:wrap; flex:none;}
.filters + .filters{padding-top:6px}
.cnt{padding:9px 16px 0; font-size:10.5px; color:var(--ink-3); letter-spacing:-.01em; flex:none;}
.filters button{
  font:inherit; font-size:11.5px; font-weight:500; padding:5px 11px; border-radius:99px;
  border:1px solid var(--line-2); background:transparent; color:var(--ink-2); cursor:pointer; letter-spacing:-.01em;
}
.filters button[aria-pressed="true"]{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}

.swatches{
  flex:1; min-height:0; overflow-y:auto; padding:8px 16px 16px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:9px; align-content:start;
}
.sw{
  border:0; padding:0; background:transparent; cursor:pointer; text-align:center;
}
.sw i{
  display:block; width:100%; aspect-ratio:1; border-radius:9px; border:1px solid var(--line-2);
  background-size:cover; transition:.15s;
}
.sw:hover i{transform:translateY(-2px)}
.sw[aria-pressed="true"] i{outline:2px solid var(--accent); outline-offset:2px}
.sw b{display:block; font-size:9.5px; font-variant-numeric:tabular-nums; font-weight:500; color:var(--ink-3); margin-top:5px; letter-spacing:-.02em; line-height:1.3}
.sw[aria-pressed="true"] b{color:var(--ink)}

.foot{padding:13px 16px 16px; border-top:1px solid var(--line); flex:none; background:var(--panel-2);}
.note{font-size:10.5px; line-height:1.65; color:var(--ink-3); letter-spacing:-.01em; margin:0 0 11px;}

/* 모바일 UI 보정 */
@media (max-width: 900px) {
  main {
    flex-direction: column;
  }

  #stage {
    flex: 0 0 auto;
    height: 38dvh;
    min-height: 220px;
  }

  aside {
    width: auto;
    border-left: 0;
    border-top: 1px solid var(--line);
    flex: 1;
    min-height: 0;
  }

  header {
    gap: 7px;
        padding: 7px 9px; min-height: 0;
  }

  .brand {
    min-width: 0;
  }

  .brand span {
    display: none;
  }

  .brand b {
    white-space: nowrap;
  }

  .rooms {
    position: static;
    transform: none;
    min-width: 0;
    margin-left: auto;
    padding: 2px;
  }

  .rooms button {
    flex: 0 0 auto;
    padding: 6px 10px;
    font-size: 11.5px;
  }

  .hint {
    display: none;
  }

  .parts button {
    padding: 9px 4px;
  }

  .current {
    gap: 8px;
    padding: 8px 12px;
  }

  .current .chip {
    width: 36px;
    height: 36px;
  }

  .filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 8px 12px 0;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }

  .filters + .filters {
    padding-top: 6px;
  }

  .filters::-webkit-scrollbar {
    display: none;
  }

  .filters button {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 5px 9px;
  }

  .cnt {
    padding: 7px 12px 0;
  }

  .swatches {
    min-height: 100px;
    padding: 7px 12px 12px;
    gap: 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .foot {
    padding: 8px 12px 10px;
  }

  .note {
    display: none;
  }

  .hud {
    left: 8px;
    right: 8px;
    bottom: 8px;
    gap: 4px;
  }

  .hud button,
  .seg button {
    padding: 5px 7px;
    font-size: 10.5px;
  }

  .seg {
    padding: 2px 2px 2px 6px;
  }
}

@media (max-width: 420px) {
  .brand b {
    font-size: 12.5px;
  }

  .rooms button {
    padding: 6px 8px;
    font-size: 11px;
  }

  .seg > b {
    display: none;
  }

  .swatches {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* 스마트폰 가로모드 */
@media (max-width: 900px) and (max-height: 500px) {
  main {
    flex-direction: row;
  }

  #stage {
    width: 58%;
    height: auto;
    min-height: 0;
  }

  aside {
    width: 42%;
    min-width: 250px;
    border-top: 0;
    border-left: 1px solid var(--line);
  }

  .current,
  .foot {
    display: none;
  }

  .swatches {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hud {
    display: none;
  }
}