/* 참가자 화면과 관리자 화면이 공유하는 스타일
 * 색·폰트·반경 토큰은 00. design/ex-ceed-design-system.md 를 그대로 따른다. */
:root{
  --color-primary:#0038A8;
  --color-primary-hover:#002B82;
  --color-accent:#0072F5;
  --color-accent-secondary:#E6007A;
  --color-accent-secondary-bg:#FBD6E9;
  --color-ink:#111111;
  --color-text-secondary:#5B6472;
  --color-border:#D8DCE2;
  --color-bg-subtle:#F4F6F8;
  --color-bg:#FFFFFF;
  --color-success:#2E9E6D;
  --color-warning:#E0A526;
  --color-error:#D64545;

  --radius-button:8px;
  --radius-card:12px;
  --radius-badge:20px;
  --shadow-card:0 2px 8px rgba(0,56,168,.10);

  /* 레거시 별칭 — 아래 스타일 규칙이 참조하는 이름은 그대로 두고 값만 위 토큰에 맞춘다 */
  --ink:var(--color-ink);
  --card-bg:var(--color-bg);
  --card-bg-hover:var(--color-bg-subtle);
  --card-line:var(--color-border);
  --canvas:var(--color-bg-subtle);     /* 카드가 놓이는 바닥 */
  --line:var(--color-border);
  --bg:var(--color-bg-subtle);
  --muted:var(--color-text-secondary);

  /* OCAI 경쟁가치모형 문화유형 색 — exceed 브랜드 색과는 별개인 도메인 표준 배색.
     cards.js 의 TYPE_META 와 정확히 일치해야 하므로 브랜드 톤에 맞춰 바꾸지 않는다. */
  --clan:#17a67c;
  --adhoc:#12305e;
  --market:#f5b301;
  --hier:#c0392b;
  --asis:var(--color-ink);   /* As-is(현재) 그래프 선 색 */
  --tobe:var(--color-accent); /* To-be(희망) 그래프 선 색 */

  /* 카드 크기 — 세로는 pool 6행이 화면에 들어가도록 뷰포트에서 역산하되 상·하한을 둔다.
     (상한이 없으면 카드가 적을 때 행이 남는 높이를 나눠 가져 비정상적으로 커진다)
     가로는 세로에 비례시켜 어느 화면에서도 카드 비율이 유지되게 한다. */
  --card-h: clamp(74px, calc((100vh - 268px) / 6), 132px);
  --card-w: min(236px, calc(var(--card-h) * 1.85));
}
*{box-sizing:border-box; margin:0; padding:0}
html,body{height:100%}
body{
  font-family:'Noto Sans KR','Inter',-apple-system,'Malgun Gothic','맑은 고딕',sans-serif;
  background:var(--bg); color:var(--ink);
  display:flex; flex-direction:column; height:100vh; overflow:hidden;
}

/* ---------- header ---------- */
header{
  display:flex; align-items:center; gap:24px;
  padding:0 20px; height:60px; background:#fff;
  border-bottom:1px solid var(--line); flex:none; z-index:5;
}
.brand{display:flex; align-items:center; gap:9px; font-weight:700; font-size:14px; color:var(--muted); white-space:nowrap}
.brand img{height:22px; width:auto; display:block}
.brand .div{color:var(--line)}
.steps{display:flex; gap:6px; list-style:none; flex:1}
.steps li{
  display:flex; align-items:center; gap:7px;
  padding:6px 13px; border-radius:999px; font-size:13px;
  color:var(--muted); background:#f0f2f5; white-space:nowrap;
}
.steps li b{
  width:19px; height:19px; border-radius:50%; background:#c9cfd6; color:#fff;
  display:grid; place-items:center; font-size:11px; font-weight:700; flex:none;
}
.steps li.on{background:var(--ink); color:#fff}
.steps li.on b{background:var(--color-accent)}
.steps li.done{background:#e8f5f0; color:var(--clan)}
.steps li.done b{background:var(--clan)}
.hdr-actions{display:flex; gap:8px; align-items:center}

/* ---------- form ---------- */
.field{margin-bottom:12px}
.field label{display:block; font-size:12px; font-weight:700; color:var(--muted); margin-bottom:5px}
.field input,.field textarea,.field select{
  width:100%; border:1px solid var(--line); border-radius:9px; padding:11px 12px;
  font-family:inherit; font-size:14.5px; background:#fff; color:var(--ink);
}
.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--color-accent); outline-offset:-1px}
.err{
  background:#FBE8E8; color:var(--color-error); border-radius:var(--radius-button); padding:9px 11px;
  font-size:12.5px; margin-bottom:12px; display:none; line-height:1.6; white-space:pre-wrap;
}
.err.on{display:block}
.ok{
  background:#E4F3EC; color:var(--color-success); border-radius:var(--radius-button); padding:9px 11px;
  font-size:12.5px; margin-bottom:12px; display:none; line-height:1.6;
}
.ok.on{display:block}

/* ---------- buttons ---------- */
button{font-family:inherit; cursor:pointer; border:none; border-radius:var(--radius-button)}
.btn{padding:9px 16px; font-size:13.5px; font-weight:600; background:#fff; border:1px solid var(--line); color:var(--ink)}
.btn:hover{background:#f7f8fa}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn-primary{background:var(--color-accent); color:#fff; border-color:var(--color-accent)}
.btn-primary:hover{background:var(--color-primary)}
.btn-primary:disabled{background:#d4d8dd; border-color:#d4d8dd; color:#fff}
.btn-ghost{background:transparent; border-color:transparent; color:var(--muted)}
.btn-ghost:hover{background:#f0f2f5}
.btn-danger{color:var(--color-error); border-color:#f0cfcb}
.btn-danger:hover{background:#FBE8E8}
.btn-sm{padding:6px 11px; font-size:12px}
.btn .pill{display:inline-block; margin-left:6px; background:var(--color-accent); color:#fff; border-radius:var(--radius-badge); padding:0 6px; font-size:11px; font-weight:700}
.btn .pill.zero{background:var(--color-success)}

/* ---------- layout ---------- */
main{flex:1; display:flex; flex-direction:column; overflow:hidden}
#board{flex:1; display:grid; grid-template-columns:280px 1fr 280px; gap:14px; padding:14px; overflow:hidden}

.panel{background:#fff; border:1px solid var(--line); border-radius:12px; display:flex; flex-direction:column; overflow:hidden}
.panel-head{padding:10px 12px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; flex:none}
.panel-title{font-size:13px; font-weight:700}
.panel-title small{color:var(--muted); font-weight:500; margin-left:5px}
.counter{font-size:12px; font-weight:700; color:var(--muted)}
.counter.full{color:var(--clan)}
.panel-body{
  flex:1; padding:10px; overflow-y:auto; display:grid; grid-template-columns:1fr 1fr;
  grid-auto-rows:var(--card-h); align-content:start; justify-items:center; gap:8px;
  background:var(--canvas);
}
.panel.drop-hot{border-color:var(--color-accent); box-shadow:0 0 0 3px rgba(0,114,245,.12)}
.panel.locked{opacity:.62}

.slot{
  border:1.5px dashed #c3cad2; border-radius:9px; display:grid; place-items:center;
  color:#a9b1ba; font-size:11px; width:100%; height:100%; max-width:var(--card-w);
  background:rgba(255,255,255,.35);
}
.slot.want{border-color:var(--tobe); background:rgba(26,127,212,.07); color:var(--tobe); font-weight:700}

.center{background:#fff; border:1px solid var(--line); border-radius:12px; display:flex; flex-direction:column; overflow:hidden}
.center-head{padding:11px 14px; border-bottom:1px solid var(--line); flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px}
.center-title{font-size:13.5px; font-weight:700}
.center-title small{color:var(--muted); font-weight:500; margin-left:6px}
.center-body{flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; background:var(--canvas)}
/* 그래프가 보이는 단계에서는 캔버스가 아니라 흰 배경이 맞다 */
.center-body:has(.chart-wrap){background:#fff}
.pool-grid{
  flex:1; display:grid; grid-template-columns:repeat(4,1fr);
  grid-auto-rows:var(--card-h); align-content:start; justify-items:center; gap:9px;
}
.center.drop-hot{border-color:var(--color-accent); box-shadow:0 0 0 3px rgba(0,114,245,.12)}
/* 버림 트레이는 붉은 기를 살짝 섞어 버리는 곳임을 알린다 */
.center.tray .center-body{background:#f2eded}
.tray-empty{
  flex:1; border:2px dashed #c3cad2; border-radius:12px; display:grid; place-items:center;
  text-align:center; color:#98a1ab; font-size:13.5px; line-height:2; background:rgba(255,255,255,.35);
}

/* ---------- card ---------- */
.card{
  position:relative; background:var(--card-bg); color:var(--ink); border-radius:9px;
  border:1px solid var(--card-line); box-shadow:0 1px 2px rgba(20,23,26,.05);
  padding:20px 11px 16px; cursor:grab; user-select:none;
  width:100%; height:100%; max-width:var(--card-w);
  display:flex; align-items:center; justify-content:center; text-align:center;
  transition:background .12s, box-shadow .12s, border-color .12s; overflow:hidden;
}
.card:hover{background:var(--card-bg-hover); border-color:#bfc7d0; box-shadow:0 2px 8px rgba(20,23,26,.1)}
.card:active{cursor:grabbing}
.card.dragging{opacity:.3}
.card-text{font-size:12.5px; line-height:1.5; font-weight:500; word-break:keep-all}
.card-num{
  position:absolute; top:6px; left:6px; width:18px; height:18px; border-radius:50%;
  background:var(--color-accent); color:#fff; font-size:10px; font-weight:700; display:grid; place-items:center;
}
.card-type{position:absolute; bottom:4px; right:7px; font-size:9.5px; color:#cbd1d8; font-weight:700}
/* 실물 카드의 하단 색 띠. 테두리가 생겼으므로 안쪽 모서리에 맞춰 라운딩한다 */
.card::after{content:''; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--color-accent); border-radius:0 0 8px 8px}
.card.set-b::after{background:var(--market)}
.card-set{position:absolute; top:6px; right:7px; font-size:9px; font-weight:700; background:#f0f2f5; color:var(--muted); padding:1px 5px; border-radius:4px}
.card.discarded{background:#fbf0ef; border-color:#e6c9c5}
.card.discarded .card-text{color:#94534c}
.card.is-new{border-color:var(--tobe); box-shadow:0 0 0 1px var(--tobe)}
.card.clickable{cursor:pointer}

/* ---------- footer ---------- */
footer{
  flex:none; height:58px; background:#fff; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; padding:0 18px; gap:16px; z-index:5;
}
.hint{font-size:13px; color:var(--muted)}
.hint b{color:var(--ink)}
.hint em{font-style:normal; color:var(--color-accent); font-weight:700}
.foot-actions{display:flex; gap:8px; align-items:center}

/* ---------- drawer ---------- */
#scrim{position:fixed; inset:0; background:rgba(20,23,26,.34); z-index:20; opacity:0; pointer-events:none; transition:opacity .2s}
#scrim.on{opacity:1; pointer-events:auto}
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(430px,92vw); z-index:21;
  background:#fff; box-shadow:-8px 0 32px rgba(0,0,0,.16);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .26s cubic-bezier(.32,.72,0,1);
}
.drawer.on{transform:none}
.drawer-head{padding:16px 18px; border-bottom:1px solid var(--line); flex:none; display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.drawer-kind{font-size:19px; font-weight:800; line-height:1.2}
.drawer-kind.stop{color:var(--color-error)}
.drawer-kind.start{color:var(--tobe)}
.drawer-kind.more{color:var(--color-success)}
.drawer-sub{font-size:12.5px; color:var(--muted); margin-top:3px}
.drawer-x{width:30px; height:30px; border-radius:8px; background:#f0f2f5; color:var(--muted); font-size:15px; flex:none}
.drawer-x:hover{background:#e4e7eb}
.drawer-body{flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:12px}
.drawer-q{font-size:13.5px; font-weight:700; line-height:1.6}
.drawer-q span{color:var(--muted); font-weight:500; display:block; margin-top:3px; font-size:12.5px}
.drawer-foot{flex:none; border-top:1px solid var(--line); padding:11px 14px; display:flex; align-items:center; justify-content:space-between; gap:10px}
.drawer-pos{font-size:12.5px; color:var(--muted); font-weight:600}
.drawer-pos b{color:var(--ink)}
.chip{border:1px solid var(--line); border-radius:999px; padding:2px 9px; font-weight:600}
.chip.type{color:#fff; border:none}

/* ---------- 불릿 목록 편집기 ---------- */
.plan-list{display:flex; flex-direction:column; gap:5px}
.plan-row{display:flex; gap:7px; align-items:flex-start; border-radius:8px; padding:2px}
.plan-row:focus-within{background:#f7f8fa}
.plan-dot{color:var(--muted); font-weight:800; font-size:15px; line-height:1; padding:11px 0 0 5px; flex:none}
.plan-row textarea{
  flex:1; border:1px solid transparent; border-radius:7px; background:transparent;
  padding:8px 9px; font-family:inherit; font-size:14px; line-height:1.6;
  resize:none; overflow:hidden; min-height:36px;
}
.plan-row textarea:hover{border-color:var(--line)}
.plan-row textarea:focus{outline:none; border-color:var(--color-accent); background:#fff}
.plan-x{
  width:26px; height:26px; margin-top:5px; flex:none; border-radius:6px;
  background:transparent; color:#c2c8d0; font-size:13px; line-height:1;
}
.plan-row:hover .plan-x{color:var(--muted)}
.plan-x:hover{background:#FBE8E8; color:var(--color-error)}
.plan-empty{color:#b6bcc4; font-size:13px; line-height:1.8; padding:10px 6px}
.plan-tip{font-size:11.5px; color:#aeb5bd; line-height:1.7; padding:2px 6px}
.plan-tip kbd{
  background:#f0f2f5; border:1px solid var(--line); border-radius:4px;
  padding:1px 5px; font-family:inherit; font-size:10.5px; font-weight:700; color:var(--muted);
}

/* ---------- chart ---------- */
.chart-wrap{display:flex; flex-direction:column; align-items:center; gap:14px; padding:6px}
.chart-wrap svg{max-width:min(100%,560px); height:auto}
.score-table{border-collapse:collapse; font-size:12.5px}
.score-table th,.score-table td{border:1px solid var(--line); padding:6px 14px; text-align:center}
.score-table th{background:#f7f8fa; font-weight:700}
.score-table td.k{text-align:left; font-weight:700}
.dot{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px}
.delta.up{color:var(--color-success); font-weight:700}
.delta.down{color:var(--color-error); font-weight:700}

/* ---------- 규율(rules) ---------- */
#rulesView{flex:1; overflow-y:auto; padding:20px; display:none}
#rulesView.on{display:block}
.rules-wrap{max-width:900px; margin:0 auto; display:flex; flex-direction:column; gap:16px}
.rules-card{background:#fff; border:1px solid var(--line); border-radius:12px; padding:20px}
.rules-card h2{font-size:15px; margin-bottom:6px; display:flex; align-items:center; gap:8px}
.rules-card h2::before{content:''; width:3px; height:14px; background:var(--color-accent); border-radius:2px}
.rules-desc{font-size:12.5px; color:var(--muted); line-height:1.7; margin-bottom:16px}
.rules-wait{color:#98a1ab; font-size:13.5px; line-height:2; text-align:center; padding:56px 20px}

.rule-row{display:flex; gap:9px; align-items:flex-start; border:1px solid var(--line); border-radius:10px; padding:12px; margin-bottom:9px}
.rule-row .rule-fields{flex:1; display:flex; flex-direction:column; gap:7px}
.rule-row input.rule-text{border:1px solid var(--line); border-radius:7px; padding:9px 10px; font-family:inherit; font-size:14px; font-weight:600}
.rule-row input.rule-text:focus{outline:none; border-color:var(--color-accent)}
.rule-row textarea.rule-desc{
  border:1px solid transparent; border-radius:7px; padding:8px 10px; font-family:inherit; font-size:12.5px;
  color:var(--muted); resize:none; overflow:hidden; min-height:32px; background:var(--bg);
}
.rule-row textarea.rule-desc:hover{border-color:var(--line)}
.rule-row textarea.rule-desc:focus{outline:none; border-color:var(--color-accent); background:#fff; color:var(--ink)}
.rule-x{width:28px; height:28px; margin-top:2px; flex:none; border-radius:6px; background:transparent; color:#c2c8d0; font-size:13px}
.rule-x:hover{background:#FBE8E8; color:var(--color-error)}
.rule-save-tag{font-size:12px; color:var(--muted); margin-left:auto}
.rule-save-tag.err{color:var(--color-error); font-weight:700}

.vote-item{border:1px solid var(--line); border-radius:10px; padding:13px 14px; margin-bottom:9px; display:flex; align-items:flex-start; gap:14px}
.vote-item .vi-text{flex:1; min-width:0}
.vote-item .vi-text b{font-size:14px; font-weight:700; display:block; margin-bottom:3px; word-break:keep-all}
.vote-item .vi-text span{font-size:12.5px; color:var(--muted); line-height:1.6; word-break:keep-all}
.vote-stars{display:flex; gap:6px; flex:none}
.star-btn{
  width:40px; height:40px; border-radius:9px; border:1px solid var(--line); background:#fff;
  font-size:12px; font-weight:800; color:var(--muted); display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.3;
}
.star-btn:hover{border-color:var(--color-accent); color:var(--color-accent)}
.star-btn.on{background:var(--color-accent); border-color:var(--color-accent); color:#fff}
.vote-progress{font-size:13px; color:var(--muted); margin-bottom:14px}
.vote-progress b{color:var(--ink)}

.rank-row{display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin-bottom:8px}
.rank-badge{width:28px; height:28px; border-radius:50%; background:#f0f2f5; color:var(--muted); font-weight:800; font-size:13px; display:grid; place-items:center; flex:none}
.rank-row:nth-child(1) .rank-badge{background:#F5B301; color:#fff}
.rank-row:nth-child(2) .rank-badge{background:#c2c8d0; color:#fff}
.rank-row:nth-child(3) .rank-badge{background:#c98a5a; color:#fff}
.rank-main{flex:1; min-width:0}
.rank-main b{font-size:14px; font-weight:700; display:block; word-break:keep-all}
.rank-main span{font-size:12px; color:var(--muted); display:block; margin-top:2px; word-break:keep-all}
.rank-star{font-size:17px; font-weight:800; color:var(--color-accent); flex:none}
.rank-star small{font-size:11px; color:var(--muted); font-weight:600; display:block; text-align:center}

/* ---------- result ---------- */
#result{flex:1; overflow-y:auto; padding:20px; display:none}
#result.on{display:block}
#board.hidden,footer.hidden{display:none}
.res-wrap{max-width:1180px; margin:0 auto; display:flex; flex-direction:column; gap:18px}
.res-card{background:#fff; border:1px solid var(--line); border-radius:12px; padding:20px}
.res-card h2{font-size:15px; margin-bottom:14px; display:flex; align-items:center; gap:8px}
.res-card h2::before{content:''; width:3px; height:14px; background:var(--color-accent); border-radius:2px}
.res-top{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:18px; align-items:start}
.res-list{display:flex; flex-direction:column; gap:9px}
.res-item{
  border:1px solid var(--line); border-left:3px solid var(--muted); border-radius:7px;
  padding:9px 12px; font-size:13px; line-height:1.6; white-space:pre-wrap;
}
.res-item.stop{border-left-color:var(--color-error)}
.res-item.start{border-left-color:var(--tobe)}
.res-item.more{border-left-color:var(--color-success)}
.res-cols{display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; align-items:start}
.empty{color:#b6bcc4; font-size:12.5px; text-align:center; padding:22px 8px; line-height:1.7}

::-webkit-scrollbar{width:9px; height:9px}
::-webkit-scrollbar-thumb{background:#d3d8de; border-radius:9px}
::-webkit-scrollbar-track{background:transparent}

/* 카드가 칸 사이를 실제로 이동하는 느낌 (Chrome View Transitions) */
::view-transition-group(*){animation-duration:.28s}
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s}

@media print{
  body{height:auto; overflow:visible; background:#fff}
  header,footer,#board,.drawer,#scrim,.no-print,.closed-bar{display:none !important}
  #result{overflow:visible; padding:0; display:block}
  .res-card{break-inside:avoid; border:none}
  .res-top{grid-template-columns:1fr 1fr}
  #rulesView{overflow:visible; padding:0; display:block}
  .rules-card{break-inside:avoid; border:none}
}