/* UX Review Board — AS-IS / TO-BE 비교 검토용 화면 */

:root{
  --bg:#f4f5f7;
  --panel:#ffffff;
  --line:#e3e6ea;
  --line-2:#eef0f3;
  --text:#1c2330;
  --muted:#6b7280;
  --muted-2:#9aa3af;
  --accent:#2870ff;
  --bar-h:56px;
  --nav-h:52px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:'Freesentation','Pretendard',-apple-system,BlinkMacSystemFont,
    'Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;cursor:pointer}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}

.board{display:flex;flex-direction:column;height:100dvh;overflow:hidden}

/* ── 상단 바 ───────────────────────────────────── */
.bar{
  flex:none;height:var(--bar-h);display:flex;align-items:center;gap:16px;
  padding:0 18px;background:var(--panel);border-bottom:1px solid var(--line);
}
.bar__title{display:flex;align-items:baseline;gap:10px;min-width:0}
.bar__title h1{font-size:16px;font-weight:800;margin:0;white-space:nowrap}
.bar__sub{font-size:13px;color:var(--muted-2);margin:0;white-space:nowrap}
.bar__right{margin-left:auto;display:flex;align-items:center;gap:10px}

.seg{display:inline-flex;background:#eef0f3;border-radius:8px;padding:3px}
.seg button{
  height:30px;padding:0 14px;border:0;border-radius:6px;background:none;
  font-size:13px;font-weight:700;color:var(--muted);
}
.seg button.is-on{background:var(--panel);color:var(--text);box-shadow:0 1px 2px rgba(16,24,40,.1)}
.seg--sm button{height:26px;padding:0 11px;font-size:12px}

.linkbtn{
  height:32px;padding:0 12px;border:1px solid var(--line);border-radius:8px;
  background:var(--panel);font-size:13px;font-weight:700;color:var(--muted);
  display:inline-flex;align-items:center;
}
.linkbtn:hover{color:var(--text);border-color:#d3d8de}

/* ── 화면 선택 줄 ──────────────────────────────── */
.nav{
  flex:none;min-height:var(--nav-h);display:flex;align-items:center;gap:8px;
  padding:0 12px 0 8px;background:var(--panel);border-bottom:1px solid var(--line);
}
.arrow{
  width:30px;height:30px;flex:none;border:1px solid var(--line);border-radius:8px;
  background:var(--panel);color:var(--muted);font-size:15px;line-height:1;
  display:grid;place-items:center;
}
.arrow:hover{color:var(--text)}
.chips{display:flex;gap:6px;overflow-x:auto;padding:8px 2px;scrollbar-width:none;flex:1}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:none;height:30px;padding:0 13px;border:1px solid var(--line);border-radius:8px;
  background:var(--panel);font-size:13px;font-weight:700;color:var(--muted);white-space:nowrap;
}
.chip:hover{color:var(--text)}
.chip.is-on{background:var(--text);border-color:var(--text);color:#fff}
.counter{flex:none;font-size:12px;font-weight:700;color:var(--muted-2);padding-left:4px}

/* ── 본문 ─────────────────────────────────────── */
.stage{flex:1;min-height:0;padding:14px 18px 18px}

.cmp{height:100%;min-height:0;display:grid;grid-template-columns:1fr 1fr 320px;gap:14px}
.tabs{display:none}

.pane{display:flex;flex-direction:column;min-height:0;min-width:0}
.pane__head{flex:none;display:flex;align-items:center;gap:8px;padding:0 2px 8px}
.tag{
  font-size:11px;font-weight:800;letter-spacing:.04em;border-radius:5px;padding:3px 7px;
}
.tag--as{background:#eceff3;color:#5b6472}
.tag--to{background:#e8f0ff;color:var(--accent)}
.pane__name{font-size:13px;font-weight:700;color:var(--muted)}
.pane__body{
  flex:1;min-height:0;display:flex;align-items:center;justify-content:center;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px;
}
.shotimg{
  height:100%;width:auto;max-width:100%;max-height:100%;
  object-fit:contain;display:block;cursor:zoom-in;
  border:1px solid var(--line-2);border-radius:4px;background:#fff;
}
.pane__miss{
  font-size:13px;color:var(--muted-2);text-align:center;line-height:1.6;
}

.notes{
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:16px 16px 18px;overflow:auto;min-height:0;
}
.notes__head{display:flex;align-items:baseline;gap:8px;margin-bottom:12px}
.notes__head h2{font-size:14px;font-weight:800;margin:0}
.notes__screen{font-size:12px;color:var(--muted-2);font-weight:700}
.note{padding:12px 0;border-top:1px solid var(--line-2)}
.note:first-of-type{border-top:0;padding-top:0}
.note__title{font-size:14px;font-weight:800;margin:0 0 5px}
.note__body{font-size:13px;line-height:1.65;color:#4b5563;margin:0}
.notes__empty{
  border:1px dashed var(--line);border-radius:8px;padding:22px 14px;text-align:center;
  font-size:13px;color:var(--muted-2);line-height:1.6;
}

/* ── 프로토타입 보기 ───────────────────────────── */
.proto{height:100%;min-height:0;display:flex;flex-direction:column;align-items:center;gap:10px}
.proto__stage{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center}
.proto__frame{
  border:1px solid var(--line);border-radius:12px;background:var(--panel);
  display:block;overflow:hidden;
}
.proto__hint{flex:none;margin:0;font-size:12px;color:var(--muted-2)}

/* ── 원본 크기 보기 ────────────────────────────── */
.zoom{
  position:fixed;inset:0;z-index:80;background:rgba(20,24,31,.72);
  display:none;overflow:auto;padding:24px;cursor:zoom-out;
}
.zoom.is-on{display:block}
.zoom img{display:block;margin:0 auto;background:#fff;border-radius:4px}
.zoom__close{
  position:fixed;top:16px;right:20px;height:32px;padding:0 12px;border:0;border-radius:8px;
  background:rgba(255,255,255,.92);font-size:13px;font-weight:700;color:var(--text);
}

/* ── 모바일 ───────────────────────────────────── */
@media (max-width:900px){
  .bar{height:auto;min-height:var(--bar-h);padding:10px 14px;flex-wrap:wrap;gap:8px}
  .bar__sub{display:none}
  .bar__right{width:100%;margin-left:0}
  .stage{padding:10px 12px 12px}

  .cmp{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) auto;gap:10px}
  .tabs{display:inline-flex;background:#eef0f3;border-radius:8px;padding:3px;justify-self:start}
  .tabs button{
    height:30px;padding:0 16px;border:0;border-radius:6px;background:none;
    font-size:13px;font-weight:700;color:var(--muted);
  }
  .tabs button.is-on{background:var(--panel);color:var(--text);box-shadow:0 1px 2px rgba(16,24,40,.1)}
  .pane__head{display:none}
  body[data-side="current"]  .pane--proposal{display:none}
  body[data-side="proposal"] .pane--current{display:none}
  .notes{max-height:34dvh}
}