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

:root{
  --bg:#f4f6fa;
  --panel:#ffffff;
  --line:#e8ecf2;
  --line-2:#f0f3f7;
  --soft:#f6f8fb;
  --text:#1b2432;
  --muted:#8a94a6;
  --muted-2:#a8b1c0;
  --accent:#2f6df6;
  --accent-soft:#eaf1ff;
  --green:#00a86b;
  --green-soft:#e6f8f0;
  --warn:#f08a3c;
  --warn-soft:#fff2e6;
  --shadow:0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.05);
  --bar-h:60px;
  --nav-h:56px;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
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}
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 20px;background:var(--panel);border-bottom:1px solid var(--line);
}
.bar__brand{display:flex;align-items:center;gap:11px;min-width:0}
.bar__brand img{width:28px;height:28px;border-radius:8px;flex:none}
.bar__title{display:flex;align-items:baseline;gap:10px;min-width:0}
.bar__title h1{font-size:17px;font-weight:800;margin:0;white-space:nowrap;letter-spacing:-.01em}
.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:12px}

.seg{display:inline-flex;gap:2px;background:#f1f4f9;border-radius:11px;padding:4px}
.seg button{
  height:34px;padding:0 18px;border:0;border-radius:8px;background:none;
  font-size:14px;font-weight:700;color:var(--muted);white-space:nowrap;
}
.seg button:hover{color:var(--text)}
.seg button.is-on{
  background:var(--accent);color:#fff;
  box-shadow:0 2px 6px rgba(47,109,246,.28);
}
.seg--sm{padding:3px}
.seg--sm button{height:30px;padding:0 13px;font-size:12.5px}

/* 보기 방식: 흰 테두리 상자 안의 두 버튼, 선택된 쪽이 초록 */
.modes{
  display:inline-flex;align-items:center;gap:4px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:4px;
}
.modes button{
  height:34px;padding:0 14px;border:0;border-radius:9px;background:none;
  font-size:13.5px;font-weight:700;color:#6b7688;white-space:nowrap;
  display:inline-flex;align-items:center;gap:7px;
}
.modes button svg{width:16px;height:16px;flex:none}
.modes button:hover{color:var(--text);background:var(--soft)}
.modes button.is-on{
  background:var(--green);color:#fff;
  box-shadow:0 2px 6px rgba(0,168,107,.26);
}
.modes button.is-on:hover{background:var(--green)}

.linkbtn{
  height:42px;padding:0 15px;border:1px solid var(--line);border-radius:11px;
  background:var(--panel);font-size:14px;font-weight:700;color:var(--text);
  display:inline-flex;align-items:center;gap:7px;
}
.linkbtn svg{color:var(--muted)}
.linkbtn:hover{border-color:#d8dee7;background:#fbfcfe}

/* ── 화면 선택 줄 ──────────────────────────────── */
.nav{
  flex:none;height:var(--nav-h);display:flex;align-items:center;gap:14px;
  padding:0 20px;background:var(--panel);border-bottom:1px solid var(--line);
}
.nav__label{flex:none;font-size:13px;font-weight:700;color:var(--muted-2);white-space:nowrap}

/* 주요 화면: 밑줄 탭 */
.tabs2{
  display:flex;align-items:stretch;gap:2px;height:100%;min-width:0;
  overflow-x:auto;scrollbar-width:none;
}
.tabs2::-webkit-scrollbar{display:none}
.tab2{
  position:relative;flex:none;height:100%;padding:0 13px;border:0;background:none;
  font-size:14px;font-weight:700;color:#6b7688;white-space:nowrap;
  display:inline-flex;align-items:center;gap:7px;
}
.tab2 svg{width:17px;height:17px;flex:none;opacity:.75}
.tab2:hover{color:var(--text)}
.tab2::after{
  content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;
  border-radius:2px 2px 0 0;background:transparent;
}
.tab2.is-on{color:var(--accent)}
.tab2.is-on svg{opacity:1}
.tab2.is-on::after{background:var(--accent)}

/* 기타 화면: 펼침 목록 */
.more{position:relative;flex:none}
.more__btn{
  height:34px;padding:0 12px;border:1px solid var(--line);border-radius:9px;
  background:var(--panel);font-size:13.5px;font-weight:700;color:#6b7688;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
}
.more__btn:hover{color:var(--text);border-color:#d8dee7}
.more.is-on .more__btn{
  color:var(--accent);border-color:#c9dbff;background:var(--accent-soft);
}
.more__menu{
  position:absolute;top:calc(100% + 8px);left:0;z-index:60;
  min-width:206px;max-height:min(60vh,420px);overflow:auto;
  display:grid;gap:2px;padding:6px;
  background:var(--panel);border:1px solid var(--line);border-radius:13px;
  box-shadow:0 12px 30px rgba(16,24,40,.14);
}
.more__item{
  height:36px;padding:0 10px;border:0;border-radius:8px;background:none;
  font-size:13.5px;font-weight:600;color:var(--text);text-align:left;
  display:flex;align-items:center;gap:9px;
}
.more__item svg{width:16px;height:16px;flex:none;color:var(--muted)}
.more__item:hover{background:var(--soft)}
.more__item.is-on{background:var(--accent-soft);color:var(--accent);font-weight:700}
.more__item.is-on svg{color:var(--accent)}

.nav__right{flex:none;margin-left:auto;display:flex;align-items:center;gap:12px}
.nav__current{font-size:13px;font-weight:700;color:var(--muted);white-space:nowrap}
.nav__div{width:1px;height:18px;background:var(--line)}

.pager{flex:none;display:flex;align-items:center;gap:10px}
.arrow{
  width:34px;height:34px;border:1px solid var(--line);border-radius:9px;
  background:var(--panel);color:var(--muted);display:grid;place-items:center;
}
.arrow:hover{color:var(--text);border-color:#d8dee7}
.counter{font-size:13px;font-weight:700;color:var(--muted);min-width:46px;text-align:center}

/* ── 본문 ─────────────────────────────────────── */
.stage{flex:1;min-height:0;padding:16px 20px 20px}
.cmp{height:100%;min-height:0;display:grid;grid-template-columns:1fr 1fr minmax(340px,400px);gap:16px}
.tabs{display:none}

/* 패널 */
.pane{
  display:flex;flex-direction:column;min-height:0;min-width:0;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);
}
.pane__head{
  flex:none;display:flex;align-items:center;gap:10px;
  padding:15px 18px;border-bottom:1px solid var(--line-2);
}
.pane__mark{width:3px;height:17px;border-radius:2px;background:var(--accent)}
.pane--current .pane__mark{background:#3c4657}
.tag{font-size:12px;font-weight:800;letter-spacing:.02em;border-radius:6px;padding:4px 9px}
.tag--as{background:#eef1f5;color:#4a5567}
.tag--to{background:var(--accent-soft);color:var(--accent)}
.pane__name{font-size:13.5px;font-weight:700;color:var(--muted)}

.pane__body{
  flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;padding:16px 16px 14px;
}

/* 폰 목업 */
.device{
  flex:1;min-height:0;padding:8px;border-radius:30px;background:var(--panel);
  border:1px solid #e4e9f0;box-shadow:0 10px 28px rgba(16,24,40,.10);display:flex;
}
.shotbox{position:relative;height:100%;display:block}
.device img{
  height:100%;width:auto;max-width:100%;object-fit:contain;display:block;
  border-radius:23px;cursor:zoom-in;background:#fff;
}
.device iframe{border:0;border-radius:23px;display:block;background:#fff}
.caption{
  flex:none;font-size:12px;font-weight:700;color:var(--muted);
  background:var(--soft);border-radius:999px;padding:6px 14px;
}
.pane__miss{font-size:13px;color:var(--muted-2);text-align:center;line-height:1.6}
.pane__none{
  display:grid;place-content:center;justify-items:center;gap:7px;text-align:center;
  width:100%;height:100%;border:1px dashed var(--line);border-radius:14px;background:#fbfcfe;
}
.pane__none b{font-size:14.5px;font-weight:800;color:var(--muted)}
.pane__none span{font-size:12.5px;color:var(--muted-2)}

/* ── 개선 노트 ─────────────────────────────────── */
.notes{
  background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;min-height:0;
}
.notes__head{
  flex:none;display:flex;align-items:baseline;gap:10px;
  padding:19px 22px 15px;border-bottom:1px solid var(--line-2);
}
.notes__head h2{font-size:16.5px;font-weight:800;margin:0;letter-spacing:-.01em}
.notes__count{margin-left:auto;font-size:12.5px;color:var(--muted-2);font-weight:600}
/* 모바일 전용 조각 — 데스크톱에서는 숨긴다 */
.notes__close{display:none}
.tabrow{display:none}
.notes__body{flex:1;min-height:0;overflow:auto;padding:2px 22px 22px}

.note{display:grid;grid-template-columns:24px 1fr;gap:14px;padding:20px 0;border-top:1px solid var(--line-2)}
.note:first-child{border-top:0}
.note__num{font-size:13px;font-weight:800;color:#7a87a4;padding-top:3px;letter-spacing:.01em}
.note__text{border-left:1px solid var(--line);padding-left:15px}
.note__title{display:block;font-size:16px;font-weight:800;margin:0 0 7px;color:#212a3b;letter-spacing:-.01em}
.note__body{display:block;font-size:13.5px;line-height:1.75;color:#6d7787;margin:0;word-break:keep-all}

.effects{padding-top:20px;border-top:1px solid var(--line-2)}
.effects h3{font-size:16px;font-weight:800;margin:0 0 13px;letter-spacing:-.01em}
.effects ul{margin:0;padding:0;list-style:none}
.effects li{display:flex;gap:11px;font-size:13.5px;color:#6d7787;line-height:1.6;word-break:keep-all}
.effects li::before{
  content:"";flex:none;width:5px;height:5px;border-radius:50%;
  background:#aeb6c4;margin-top:8px;
}
.effects li + li{margin-top:10px}

.notes__empty{
  margin-top:18px;border:1px dashed var(--line);border-radius:12px;padding:26px 14px;
  text-align:center;font-size:13px;color:var(--muted-2);line-height:1.7;
}


/* ── 변경점 레이어 ─────────────────────────────── */
/* 평상시에는 아무것도 보이지 않는다. 목록을 가리키거나 '변경점 보기' 를 켤 때만 나타난다. */
.anno{position:absolute;inset:0;pointer-events:none;overflow:visible}
.anno__veil{
  position:absolute;inset:0;width:100%;height:100%;border-radius:23px;
  opacity:0;transition:opacity .26s ease;
}
.anno.has-active .anno__veil{opacity:.58}

.anno__box{
  --c:#2f6df6;
  position:absolute;border-radius:7px;opacity:0;transition:opacity .24s ease;
}
.anno__box::after{
  content:"";position:absolute;inset:0;border:1.5px solid var(--c);border-radius:inherit;
}
.anno.is-on .anno__box{opacity:.72;pointer-events:auto;cursor:pointer}
.anno.has-active .anno__box:not(.is-active){opacity:.14}
.anno__box.is-active{opacity:1;z-index:3;background:color-mix(in srgb, var(--c) 9%, transparent)}
.anno__box.is-active::after{border-width:2px}

.anno__box--add{--c:#1f9d63}
.anno__box--remove{--c:#c9584a}
.anno__box--remove::after{border-style:dashed}
.anno__box--restructure{--c:#6b7a99;border-radius:11px}
.anno__box--merge::after,.anno__box--move::after{border-style:solid}

.anno__num{
  position:absolute;left:-9px;top:-10px;min-width:19px;height:19px;padding:0 5px;
  border-radius:6px;background:#fff;border:1px solid var(--c);color:var(--c);
  font-size:10px;font-weight:800;display:grid;place-items:center;
  box-shadow:0 1px 3px rgba(16,24,40,.14);
}
.anno__label{
  position:absolute;top:-10px;right:0;height:19px;padding:0 8px;border-radius:999px;
  background:#fff;color:var(--c);border:1px solid var(--c);
  font-size:10px;font-weight:800;letter-spacing:.02em;
  display:none;align-items:center;
}
.anno.is-on .anno__label,
.anno__box.is-active .anno__label{display:inline-flex}
.anno__box.is-active .anno__label{background:var(--c);color:#fff}

.cmp{position:relative}
.linklayer{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:visible}

/* 목록 항목이 곧 조작 장치 */
button.note{
  width:100%;font:inherit;color:inherit;text-align:left;cursor:pointer;
  background:none;border:0;border-top:1px solid var(--line-2);
  margin:0 -12px;padding:20px 12px;width:calc(100% + 24px);
  border-radius:10px;transition:background .16s ease;
}
button.note:hover,button.note.is-on{background:#f6f9fe}
button.note.is-on .note__num{color:var(--accent)}
button.note.is-on .note__text{border-left-color:#c3d5fb}
button.note:focus-visible{outline:2px solid rgba(47,109,246,.55);outline-offset:-2px}
.note--static{cursor:default}

.note__type{
  display:inline-block;margin-left:8px;font-style:normal;font-size:10.5px;font-weight:800;
  color:#7a87a4;background:#eef1f6;border-radius:5px;padding:2px 6px;vertical-align:2px;
}
.note__type--add{color:#1a7d52;background:#e7f4ed}
.note__type--remove{color:#b04a3c;background:#fbeeeb}

.annobar{display:flex;justify-content:flex-end;padding:12px 0 4px}
.annotoggle{
  display:inline-flex;align-items:center;gap:9px;height:30px;padding:0 11px 0 13px;
  border:1px solid var(--line);border-radius:999px;background:var(--panel);
  font-size:12px;font-weight:700;color:var(--muted);
}
.annotoggle i{
  width:26px;height:15px;border-radius:999px;background:#dfe4ec;position:relative;
  transition:background .18s ease;
}
.annotoggle i::after{
  content:"";position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;
  background:#fff;transition:transform .18s ease;box-shadow:0 1px 2px rgba(16,24,40,.2);
}
.annotoggle:hover{color:var(--text)}
.annotoggle.is-on{color:var(--text);border-color:#c9d8f6}
.annotoggle.is-on i{background:var(--accent)}
.annotoggle.is-on i::after{transform:translateX(11px)}

@media (prefers-reduced-motion:reduce){
  .anno__veil,.anno__box,button.note,.annotoggle i,.annotoggle i::after{transition:none}
}

/* ── 프로토타입 보기 ───────────────────────────── */
.proto{height:100%;min-height:0;display:flex;flex-direction:column;align-items:center;gap:12px}
.proto__stage{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center}
.proto__stage .device{flex:none}
.proto__hint{flex:none;margin:0;font-size:12.5px;color:var(--muted-2)}

/* ── 원본 크기 보기 ────────────────────────────── */
.zoom{
  position:fixed;inset:0;z-index:80;background:rgba(17,22,31,.74);
  display:none;overflow:auto;padding:28px;cursor:zoom-out;
}
.zoom.is-on{display:block}
.zoom img{display:block;margin:0 auto;background:#fff;border-radius:8px}
.zoom__close{
  position:fixed;top:18px;right:22px;height:34px;padding:0 14px;border:0;border-radius:9px;
  background:rgba(255,255,255,.94);font-size:13px;font-weight:700;color:var(--text);
}

/* ── 모바일 ───────────────────────────────────── */
@media (max-width:980px){
  .bar{height:auto;padding:11px 14px;flex-wrap:wrap;gap:9px}
  .bar__sub{display:none}
  .bar__title h1{font-size:15.5px}
  .bar__right{width:100%;margin-left:0}
  .bar__right .seg{flex:1}
  .bar__right .seg button{flex:1;padding:0 10px;height:32px}
  .bar__right .modes{flex:1}
  .modes button{flex:1;justify-content:center;padding:0 8px;height:32px;font-size:13px}
  .linkbtn{height:40px;flex:none}
  .nav{height:48px;padding:0 14px;gap:8px}
  .nav__label,.nav__current,.nav__div{display:none}
  .tab2{padding:0 10px;font-size:13px;gap:5px}
  .tab2 svg{width:15px;height:15px}
  .more__btn{height:30px;padding:0 10px;font-size:12.5px}
  .more__menu{left:auto;right:0}
  .arrow{width:30px;height:30px}
  .counter{min-width:40px;font-size:12.5px}
  .stage{padding:10px 14px 12px}

  /* 스크린샷이 높이를 최대한 쓰도록, 노트는 아래에서 올라오는 시트로 */
  .cmp{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:10px}
  .tabrow{display:flex;align-items:center;gap:10px}
  .tabs{display:inline-flex;gap:2px;background:#f1f4f9;border-radius:10px;padding:3px}
  .tabs button{
    height:32px;padding:0 18px;border:0;border-radius:8px;background:none;
    font-size:13px;font-weight:700;color:var(--muted);
  }
  .tabs button.is-on{background:var(--accent);color:#fff}
  .notesbtn{
    margin-left:auto;height:36px;padding:0 14px;border:1px solid var(--line);border-radius:10px;
    background:var(--panel);font-size:13px;font-weight:700;color:var(--text);
    display:inline-flex;align-items:center;gap:6px;
  }
  .notesbtn b{
    font-size:11px;font-weight:800;color:var(--accent);
    background:var(--accent-soft);border-radius:999px;padding:2px 7px;
  }
  .pane__head{display:none}
  .pane__body{padding:12px 12px 10px;gap:9px}
  .caption{font-size:11px;padding:5px 12px}
  body[data-side="current"]  .pane--proposal{display:none}
  body[data-side="proposal"] .pane--current{display:none}

  .notes{
    position:fixed;left:0;right:0;bottom:0;z-index:70;
    max-height:66dvh;border-radius:18px 18px 0 0;border-bottom:0;
    transform:translateY(102%);transition:transform .2s ease;
    box-shadow:0 -10px 34px rgba(16,24,40,.18);
  }
  body.notes-open .notes{transform:none}
  .notes__close{
    display:inline-flex;align-items:center;height:30px;padding:0 12px;margin-left:12px;
    border:1px solid var(--line);border-radius:8px;background:var(--panel);
    font-size:12.5px;font-weight:700;color:var(--muted);
  }
  .notes__count{margin-left:auto}
}