/* ══════════════════════════════════════════════════════════════
   슈퍼캣 자리배치도 — v7 "오후 네 시의 사무실"
   팔레트: 종이 / 파우더블루 도면 / 로즈 / 버터 / 자두
   서체: Pretendard(본문·UI) + Gowun Batang(워드마크·영역명·층 표시)
   ══════════════════════════════════════════════════════════════ */
:root{
  /* 표면 */
  --paper:#FBF8F4;        /* 앱 배경 */
  --paper2:#F5F0EA;       /* 패널 안쪽, 칩 */
  --panelbg:#FFFFFF;      /* 카드 */
  --line:#E7DFD7;         /* 테두리 */
  --line-soft:#F0EAE3;

  /* 도면 */
  --floor:#DEE8EF;        /* 도면 바닥 */
  --floor-warm:#EAE1E1;   /* 바닥 오른쪽 온기 */

  /* 좌석 */
  --butter:#F6E3AC;       /* 구성원 타일 */
  --butter-edge:#E3C577;
  --lilac:#D6D0E2;        /* 장비·기타 타일 */
  --lilac-edge:#B9B1CC;
  --rose:#E8CDC9;
  --sky:#BFD8EB;

  /* 강조 */
  --plum:#8E5470;         /* 선택·현재 층·주요 동작 */
  --plum-soft:#F4E7EC;
  --moss:#5F7A5A;         /* 저장 등 확정 동작 */
  --clay:#B4553F;         /* 위험 */

  /* 글자 */
  --ink:#332F39;
  --muted:#857F8D;
  --ink-faint:#A9A3B0;

  /* app.js 인라인 스타일이 참조하는 이름 (유지) */
  --panel2:var(--paper2);
  --bone-soft:var(--muted);
  --bone:var(--ink);
  --dokkaebi:var(--plum);
  --gold:#C08A2E;
  --vermilion:var(--clay);

  --f:'Pretendard','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --fd:'Gowun Batang','Pretendard',serif;
  --r:14px;
  --shadow-1:0 1px 2px rgba(70,58,50,.06),0 4px 14px rgba(70,58,50,.06);
  --shadow-2:0 10px 30px rgba(70,58,50,.13);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{font-family:var(--f);background:var(--paper);color:var(--ink);overflow:hidden;
  -webkit-font-smoothing:antialiased;font-size:14px}
button,input,select,textarea{font-family:inherit;color:inherit;font-size:inherit}
button{cursor:pointer;border:none;background:none}
b{font-weight:700}
::selection{background:var(--plum);color:#fff}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#DCD3CB;border-radius:9px}
::-webkit-scrollbar-track{background:transparent}
:focus-visible{outline:2px solid var(--plum);outline-offset:2px;border-radius:4px}
kbd{font-family:var(--f);font-size:10.5px;padding:1.5px 5px;border-radius:5px;
  background:var(--paper2);border:1px solid var(--line);color:var(--muted)}

/* ═════════ 로그인(모달) ═════════ */
#loginModal .card{position:relative;width:min(392px,90vw);background:var(--panelbg);border:1px solid var(--line);
  border-radius:20px;padding:38px 32px 30px;text-align:center;box-shadow:var(--shadow-2)}
#loginModal .card .close{position:absolute;right:14px;top:14px;width:26px;height:26px;border-radius:8px;
  color:var(--ink-faint);font-size:13px}
#loginModal .card .close:hover{background:var(--paper2);color:var(--ink)}
#loginModal .mark{width:50px;height:50px;margin:0 auto 16px;border-radius:15px;display:grid;place-items:center;
  background:var(--plum);color:#FBF3E8;font-family:var(--fd);font-weight:700;font-size:24px;
  box-shadow:0 3px 0 #6F3F57}
#loginModal h1{margin:0;font-family:var(--fd);font-size:20px;font-weight:700;letter-spacing:-.01em}
#loginModal .sub{margin:3px 0 20px;font-size:11.5px;letter-spacing:.16em;color:var(--ink-faint)}
#loginModal p{margin:0 0 22px;font-size:13px;color:var(--muted);line-height:1.75}
.sso-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;padding:13px;
  border-radius:12px;background:var(--plum);color:#FBF3E8;font-weight:600;font-size:14px;
  box-shadow:0 2px 0 #6F3F57;transition:transform .14s,box-shadow .14s}
.sso-btn:hover{transform:translateY(-1px);box-shadow:0 3px 0 #6F3F57,0 10px 20px rgba(142,84,112,.22)}
.sso-btn:active{transform:translateY(1px);box-shadow:0 1px 0 #6F3F57}
.gate-alt{margin-top:16px;padding-top:16px;border-top:1px solid var(--line-soft)}
.gate-alt input{width:100%;padding:11px 13px;border-radius:11px;background:var(--paper);
  border:1px solid var(--line);font-size:13.5px;margin-bottom:9px}
.gate-alt button{width:100%;padding:10px;border-radius:11px;border:1px solid var(--line);
  background:var(--paper2);font-size:12.5px;color:var(--muted)}
.gate-alt button:hover{border-color:var(--plum);color:var(--plum)}
.gate-alt button.linklike{border:0;background:none;color:var(--muted);text-decoration:underline;padding:6px;margin-top:2px}
.gate-alt button.linklike:hover{color:var(--plum)}
#gateErr{color:var(--clay);font-size:12.5px;margin-top:9px;min-height:16px}

/* ═════════ 상단 바 ═════════ */
#app{display:flex;height:100%;flex-direction:column}
.top{height:58px;flex:none;display:flex;align-items:center;gap:11px;padding:0 15px;min-width:0;
  background:rgba(251,248,244,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);z-index:20}
.brand{display:flex;align-items:center;gap:9px;flex:none}
.brand .m{width:31px;height:31px;border-radius:10px;display:grid;place-items:center;
  font-family:var(--fd);font-weight:700;font-size:16px;background:var(--plum);color:#FBF3E8;
  box-shadow:0 2px 0 #6F3F57}
.brand b{font-size:13.5px;display:block;line-height:1.25;letter-spacing:-.01em}
.brand span{font-size:10px;color:var(--ink-faint);letter-spacing:.1em}

.floors{display:flex;gap:2px;background:var(--paper2);padding:3px;border-radius:12px;
  border:1px solid var(--line-soft);flex:none}
.floors button{padding:5px 11px 6px;border-radius:9px;font-size:12.5px;color:var(--muted);
  font-weight:500;display:flex;flex-direction:column;align-items:center;gap:3px;transition:.13s}
.floors button:hover{color:var(--ink);background:rgba(255,255,255,.7)}
.floors button.on{background:var(--panelbg);color:var(--plum);font-weight:700;
  box-shadow:0 1px 3px rgba(70,58,50,.1)}
.floors .fb{display:block;width:22px;height:2.5px;border-radius:2px;background:#DFD7CE;overflow:hidden}
.floors .fb i{display:block;height:100%;background:#C9BFD0;border-radius:2px}
.floors button.on .fb i{background:var(--plum)}

.hstats{display:flex;align-items:center;gap:12px;padding:0 4px;flex:none}
.hs{font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:5px;white-space:nowrap}
.hs b{font-size:13px;color:var(--ink);font-variant-numeric:tabular-nums}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block}
.dot.person{background:var(--butter-edge)}
.dot.vacant{background:#CFC7BE}

.spacer{flex:1}
.clock{flex:none;text-align:right;padding-right:4px;line-height:1.15}
.clock b{display:block;font-family:var(--fd);font-size:15px;font-weight:700;letter-spacing:.01em;
  color:var(--ink);font-variant-numeric:tabular-nums}
.clock small{display:block;font-size:10px;color:var(--ink-faint);letter-spacing:.04em}
.weather{flex:none;display:flex;align-items:center;gap:5px;padding:0 10px 0 6px;margin-right:2px;
  border-right:1px solid var(--line-soft)}
.weather span{font-size:17px;line-height:1}
.weather b{font-family:var(--fd);font-size:14px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.search{position:relative;flex:0 1 210px;min-width:110px}
.search input{width:100%;padding:9px 13px 9px 32px;border-radius:11px;background:var(--panelbg);
  border:1px solid var(--line);font-size:13px}
.search input:focus{border-color:var(--plum);outline:none;box-shadow:0 0 0 3px var(--plum-soft)}
.search input::placeholder{color:var(--ink-faint)}
.search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--ink-faint)}
.tbtn{padding:8px 13px;border-radius:11px;font-size:12.5px;font-weight:500;border:1px solid var(--line);
  background:var(--panelbg);color:var(--muted);white-space:nowrap;transition:.13s}
.tbtn:hover{border-color:var(--muted);color:var(--ink)}
.tbtn.admin{background:var(--plum-soft);border-color:#E2CBD5;color:var(--plum);font-weight:600}
.tbtn.admin:hover{background:var(--plum);color:#FBF3E8;border-color:var(--plum)}
.tbtn.on{background:var(--plum);color:#FBF3E8;border-color:var(--plum);font-weight:600}
.me{display:flex;align-items:center;gap:8px;padding-left:12px;border-left:1px solid var(--line);flex:none}
.me .logout{width:26px;height:26px;border-radius:8px;color:var(--ink-faint);font-size:14px;display:grid;place-items:center;margin-left:2px}
.me .logout:hover{background:var(--paper2);color:var(--clay)}
.me .av{width:30px;height:30px;border-radius:50%;background:var(--rose);color:#7A4C58;
  display:grid;place-items:center;font-size:12px;font-weight:700}
.me b{font-size:12.5px;display:block;line-height:1.25}
.me small{font-size:10.5px;color:var(--ink-faint)}

/* ═════════ 본문 · 사이드 ═════════ */
.body{flex:1;display:flex;min-height:0}
.side{width:238px;flex:none;background:var(--paper);border-right:1px solid var(--line);
  overflow-y:auto;padding:16px 15px 30px}
.side section{margin-bottom:22px}
.side h4{margin:0 0 10px;font-size:10.5px;letter-spacing:.14em;color:var(--ink-faint);font-weight:600}
.stat{display:flex;justify-content:space-between;align-items:baseline;padding:5px 0;font-size:12.5px;color:var(--muted)}
.stat b{font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums}
.stat b.hi{color:var(--plum);font-size:19px;font-family:var(--fd)}
.bar{height:5px;border-radius:5px;background:var(--paper2);overflow:hidden;margin-top:7px;
  border:1px solid var(--line-soft)}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--rose),var(--plum));
  border-radius:5px;transition:width .5s cubic-bezier(.2,.7,.3,1)}
.hint{margin:0;font-size:11.5px;line-height:1.75;color:var(--muted)}

/* ═════════ 캔버스 ═════════ */
.canvas-wrap{flex:1;position:relative;overflow:hidden;cursor:grab;
  background:
    radial-gradient(60% 50% at 18% 12%,rgba(232,205,201,.32),transparent 70%),
    radial-gradient(55% 55% at 88% 88%,rgba(191,216,235,.3),transparent 72%),
    var(--paper)}
.canvas-wrap.grabbing{cursor:grabbing}
.canvas-wrap.placing{cursor:crosshair}
#stage{position:absolute;top:0;left:0;transform-origin:0 0}
/* #plan 은 좌석 좌표계일 뿐 — 배경도 그림자도 없다.
   보이는 '종이'는 아래 #planPaper 가 맡고, 그 크기는 render()에서 도면 그림에 맞춘다. */
#plan{position:relative}
#planPaper{position:absolute;z-index:0;border-radius:20px;
  background:linear-gradient(118deg,#D3E2EE 0%,#DDE8EF 46%,#E8DCDC 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 18px 50px rgba(70,58,50,.14),
             0 0 0 1px rgba(140,128,120,.14)}
/* 창으로 드는 빛 (시각에 따라 색과 방향이 바뀐다) */
.daylight{position:absolute;inset:0;pointer-events:none;z-index:1;border-radius:20px;mix-blend-mode:soft-light;
  transition:background 1.2s ease}

/* ═════════ 실외 층 날씨 효과 ═════════ */
#weatherFx{position:absolute;inset:0;pointer-events:none;z-index:2;border-radius:20px;overflow:hidden;opacity:0;transition:opacity .6s ease}
#weatherFx.on{opacity:1}
/* 밤: 화면 전체를 덮지 않는다. 위쪽만 옅게 깔리다 중간쯤에서 완전히 사라지는
   그라데이션이라, 좌석이 몰린 아래쪽 밝기는 낮과 똑같이 유지된다.
   이 바탕이 있어야 별이 '먼지'가 아니라 '별'로 읽힌다.
   더 밝게 하고 싶으면 아래 .20 값만 낮추면 된다(0으로 두면 바탕 없음). */
#weatherFx.night::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(24,30,58,.20) 0%,rgba(24,30,58,.08) 38%,transparent 62%)}
/* 별: 위쪽 절반에만 흩뿌리고, 각자 다른 속도로 천천히 밝아졌다 흐려진다 */
#weatherFx .star{position:absolute;border-radius:50%;background:#FFFDF4;
  box-shadow:0 0 6px 1px rgba(255,248,220,.7);
  animation-name:starTwinkle;animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;animation-direction:alternate}
@keyframes starTwinkle{
  from{opacity:.18;transform:scale(.75)}
  to{opacity:var(--peak,.95);transform:scale(1)}
}
/* 비: 눈처럼 빗줄기 하나하나를 개별 요소로 떨어뜨림(타일 이음새 없이 자연스럽게) */
#weatherFx .drop{position:absolute;top:-8%;width:2px;border-radius:1px;
  background:linear-gradient(to bottom,rgba(200,220,255,0),rgba(190,215,255,.9));
  animation-name:rainDrop;animation-timing-function:linear;animation-iteration-count:infinite}
@keyframes rainDrop{
  from{transform:skewX(-9deg) translateY(0)}
  to{transform:skewX(-9deg) translateY(var(--fall,900px))}
}
/* 눈: 작은 점들을 개별 요소로 흩뿌려 각자 다른 속도로 떨어뜨림 */
#weatherFx .flake{position:absolute;top:-8%;border-radius:50%;background:#fff;opacity:.85;
  animation-name:snowFall;animation-timing-function:linear;animation-iteration-count:infinite}
@keyframes snowFall{
  from{transform:translateY(0) translateX(0)}
  to{transform:translateY(var(--fall,900px)) translateX(var(--drift,20px))}
}

/* 도면 선을 종이 위 연필선처럼: 흰 배경은 곱셈으로 사라지고 검은 선만 남는다.
   ─ 이 효과는 옛날 흰 바탕 선그림 전용이라, 직접 올린 컬러 그림에는 걸지 않는다
   (planImg-line 클래스가 있을 때만 적용 — render()에서 f.bg.custom 유무로 판정). */
#planImg{transition:filter .35s,opacity .35s}
#planImg.planImg-line{mix-blend-mode:multiply;filter:sepia(.3) saturate(.55) contrast(1.06);opacity:.95}
.searching #planImg.planImg-line{filter:sepia(.3) saturate(.2) contrast(.9);opacity:.5}
.searching #planImg:not(.planImg-line){opacity:.62;filter:saturate(.75) brightness(.94)}
/* 결(그레인) + 비네트 */
#planPaper::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;border-radius:20px;
  background:radial-gradient(115% 90% at 50% 40%,transparent 58%,rgba(88,74,80,.13) 100%)}
#planPaper::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.5;border-radius:20px;overflow:hidden;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E")}
/* ═════════ 좌석 타일 — 진짜 정사각형 ═════════
   가로=세로 정사각형. 이름은 항상 안에 보이고, 길면 2줄까지 줄바꿈된다(잘리지 않음).
   위쪽에 팀 색 얇은 바(정사각형이라 왼쪽 세로바 대신 위쪽 가로바로). */
.seat{position:absolute;z-index:2;border-radius:7px;display:flex;align-items:center;justify-content:center;
  padding:3px 4px;overflow:hidden;cursor:pointer;touch-action:none;
  background:linear-gradient(180deg,#FDF3D6,var(--butter));
  border:1px solid var(--butter-edge);
  box-shadow:0 1.5px 0 var(--butter-edge),0 3px 7px rgba(70,58,50,.13);
  transition:transform .13s cubic-bezier(.2,.7,.3,1),box-shadow .13s,opacity .18s}
.seat::before{content:"";position:absolute;left:6px;right:6px;top:0;height:5px;border-radius:0 0 3px 3px;
  background:var(--bd,#C4BCC9);opacity:.85}
.seat b{font-size:11px;line-height:1.15;font-weight:600;letter-spacing:-.02em;color:#453B4D;
  pointer-events:none;text-align:center;white-space:normal;word-break:break-all;overflow-wrap:anywhere;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.seat:hover{transform:translateY(-3px) scale(1.05);z-index:5;
  box-shadow:0 1.5px 0 var(--butter-edge),0 10px 18px rgba(70,58,50,.2)}
.seat.k-vacant{background:rgba(255,255,255,.62);border:1.5px dashed #C6BDB4;box-shadow:none}
.seat.k-vacant b{color:#9C948E;font-weight:500}
.seat.k-vacant:hover{box-shadow:0 8px 16px rgba(70,58,50,.14)}
.seat.nodata b{color:#7D7484;font-weight:500}

.seat.sel{border-color:var(--plum);z-index:7;
  box-shadow:0 0 0 2px var(--plum),0 1.5px 0 #6F3F57,0 12px 22px rgba(142,84,112,.28)}
.seat.mate{box-shadow:0 0 0 1.5px var(--bd),0 3px 7px rgba(70,58,50,.13)}
.seat.dim{opacity:.14}
.seat.hit{box-shadow:0 0 0 2px #C08A2E,0 4px 10px rgba(192,138,46,.28);z-index:4}

/* 자리 찾기 조명 — 이 앱의 시그니처 */
.seat.spot{z-index:9;animation:spotPulse 1.9s cubic-bezier(.2,.7,.3,1)}
.seat.spot .ring{content:"";position:absolute;inset:-9px;border-radius:14px;pointer-events:none;
  box-shadow:0 0 0 2px var(--plum);animation:spotRing 1.9s cubic-bezier(.2,.7,.3,1)}
@keyframes spotPulse{
  0%{transform:translateY(-7px) scale(1.14);box-shadow:0 0 0 3px var(--plum),0 22px 34px rgba(142,84,112,.34)}
  100%{transform:none}}
@keyframes spotRing{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.5)}}

@keyframes riseIn{
  from{opacity:0;transform:translateY(10px) scale(.94)}
  to{opacity:1;transform:none}}
.seat.in{animation:riseIn .46s cubic-bezier(.2,.75,.25,1) backwards}

.zone{position:absolute;z-index:1;display:flex;align-items:center;justify-content:center;
  font-family:var(--fd);font-size:12px;font-weight:700;letter-spacing:.22em;
  color:rgba(107,84,96,.5);pointer-events:none;text-transform:uppercase;
  text-shadow:0 1px 0 rgba(255,255,255,.72)}
.zone-editable{pointer-events:auto;cursor:pointer;border-radius:8px;transition:background .15s,color .15s}
.zone-editable:hover{background:rgba(200,60,60,.12);color:rgba(180,40,40,.85)}

.editing .seat{cursor:grab}
.seat.dragging{opacity:.3}
.seat.drop{box-shadow:0 0 0 3px #C08A2E,0 0 20px rgba(192,138,46,.4);transform:translateY(-4px) scale(1.06);z-index:6}
.seat.picked{box-shadow:0 0 0 2px #5D86AE,0 4px 12px rgba(93,134,174,.3);z-index:5}
.seat .del{position:absolute;top:-8px;right:-8px;width:18px;height:18px;border-radius:50%;
  background:var(--clay);color:#fff;font-size:11px;line-height:18px;text-align:center;display:none;z-index:7}
.editing .seat.sel .del{display:block}
.canvas-wrap.aligning{cursor:default}
/* 리더 전용 좌석 배정 모드 — 책상은 못 옮기지만 클릭해서 이름을 채우고 비울 수 있음을 시각적으로 표시 */
.assigning .seat{cursor:pointer}
.assigning .seat.k-vacant{box-shadow:0 0 0 2px var(--moss),0 8px 16px rgba(95,122,90,.18)}
.assigning .banner{display:block;background:rgba(95,122,90,.1);border-color:#C7D4C4;color:var(--moss)}
#band{position:absolute;border:1.5px solid #5D86AE;background:rgba(93,134,174,.12);
  border-radius:4px;pointer-events:none;z-index:8;display:none}

/* ═════════ 범례 ═════════ */
.legend{position:absolute;left:18px;bottom:20px;display:flex;gap:13px;padding:8px 13px;
  border-radius:12px;background:rgba(255,255,255,.84);backdrop-filter:blur(6px);
  border:1px solid var(--line);box-shadow:var(--shadow-1);z-index:9;font-size:11.5px;color:var(--muted)}
.legend span{display:flex;align-items:center;gap:6px}
.sw{width:15px;height:11px;border-radius:4px;display:inline-block}
.sw.person{background:var(--butter);border:1px solid var(--butter-edge)}
.sw.vacant{background:rgba(255,255,255,.7);border:1.5px dashed #C6BDB4}

/* ═════════ 하단 도구 ═════════ */
.dock{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);display:flex;align-items:center;gap:5px;
  padding:7px 9px;border-radius:14px;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);
  border:1px solid var(--line);box-shadow:var(--shadow-1);z-index:10;max-width:calc(100% - 36px);flex-wrap:wrap}
.dock button{padding:7px 11px;border-radius:9px;font-size:12.5px;color:var(--muted);
  border:1px solid transparent;transition:.12s}
.dock button:hover{background:var(--paper2);color:var(--ink)}
.dock button.on{background:var(--plum);color:#FBF3E8}
.dock button.key{background:var(--moss);color:#F7F4EA;font-weight:600}
.dock button.key:hover{background:#4E6849;color:#fff}
.dock button.key.dirty{background:var(--clay);animation:dirtyPulse 1.4s ease-in-out infinite}
.dock button.key.dirty:hover{background:#9C4A38}
@keyframes dirtyPulse{0%,100%{box-shadow:0 0 0 0 rgba(180,85,63,.45)}50%{box-shadow:0 0 0 6px rgba(180,85,63,0)}}
.zoomlbl{font-size:11.5px;color:var(--muted);min-width:42px;text-align:center;font-variant-numeric:tabular-nums}
.sep{width:1px;height:18px;background:var(--line);margin:0 3px}
.aligndock{position:absolute;left:50%;bottom:80px;transform:translateX(-50%);display:none;align-items:center;gap:4px;
  padding:7px 9px;border-radius:14px;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);
  border:1px solid var(--line);box-shadow:var(--shadow-2);z-index:11;flex-wrap:wrap;max-width:calc(100% - 36px)}
.aligndock.show{display:flex}
.aligndock button{padding:6px 10px;border-radius:9px;font-size:12px;color:var(--muted)}
.aligndock button:hover{background:var(--paper2);color:var(--ink)}
.albl{font-size:11.5px;color:var(--plum);font-weight:600;padding:0 4px}
.banner{position:absolute;left:50%;top:16px;transform:translateX(-50%);display:none;
  padding:9px 16px;border-radius:12px;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);
  border:1px solid #E2CBD5;box-shadow:var(--shadow-1);z-index:10;font-size:12px;color:var(--plum);
  max-width:calc(100% - 40px);text-align:center}
.editing .banner{display:block}

/* ═════════ 정보 패널 ═════════ */
.info{position:absolute;right:0;top:0;bottom:0;width:296px;background:var(--panelbg);
  border-left:1px solid var(--line);transform:translateX(101%);transition:transform .26s cubic-bezier(.2,.7,.3,1);
  z-index:30;overflow-y:auto;box-shadow:-14px 0 34px rgba(70,58,50,.1)}
.info.show{transform:none}
.info .hd{padding:26px 22px 20px;border-bottom:1px solid var(--line-soft);position:relative;
  background:linear-gradient(160deg,var(--plum-soft),var(--panelbg) 70%)}
.info .close{position:absolute;right:14px;top:14px;width:26px;height:26px;border-radius:8px;
  color:var(--ink-faint);font-size:13px}
.info .close:hover{background:var(--paper2);color:var(--ink)}
.info .av{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;
  font-size:17px;font-weight:700;margin-bottom:12px;color:#fff}
.info h3{margin:0 0 8px;font-family:var(--fd);font-size:21px;font-weight:700;letter-spacing:-.01em}
.info .tag{display:inline-block;padding:4px 10px;border-radius:8px;font-size:11.5px;font-weight:600}
.rows{padding:6px 22px 14px}
.row{display:flex;padding:10px 0;border-bottom:1px solid var(--line-soft);font-size:13px;gap:12px}
.row:last-child{border-bottom:none}
.row .k{width:66px;flex:none;color:var(--ink-faint);font-size:12px}
.row .v{flex:1;font-weight:500}
.row .v.na{color:var(--ink-faint);font-weight:400}
.editbox{display:block;padding:16px 22px 20px;border-top:1px solid var(--line-soft);background:var(--paper)}
/* danger(비우기/삭제) 노출은 이제 pick()에서 역할별로 직접 제어 */
.editbox label{display:block;font-size:10.5px;letter-spacing:.1em;color:var(--ink-faint);margin:10px 0 5px}
.editbox input{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--line);
  background:var(--panelbg);font-size:13px}
.editbox input:focus{border-color:var(--plum);outline:none;box-shadow:0 0 0 3px var(--plum-soft)}
.editbox .save{width:100%;margin-top:16px;padding:11px;border-radius:11px;background:var(--moss);
  color:#F7F4EA;font-weight:600;font-size:13.5px;box-shadow:0 2px 0 #4A6245}
.editbox .save:hover{background:#4E6849}
.danger{display:none;padding:0 22px 26px;gap:7px}
.danger button{width:100%;margin-top:7px;padding:9px;border-radius:10px;border:1px solid var(--line);
  font-size:12.5px;color:var(--muted);background:var(--panelbg)}
.danger button:hover{border-color:var(--clay);color:var(--clay);background:#FBF2F0}

/* ═════════ 인트로 스플래시 ═════════ */
#splash{position:fixed;inset:0;z-index:500;overflow:hidden;cursor:pointer;
  background:#EFE6DA;opacity:1;transition:opacity .55s ease;}
#splash.hide{opacity:0;pointer-events:none}
#splash img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 30%;transform:scale(1.03)}
.splashScrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(30,24,20,.08) 0%,rgba(30,24,20,.02) 38%,rgba(30,24,20,.55) 100%)}
.splashBrand{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);text-align:center;color:#fff}
.splashLogo{width:52px;height:52px;margin:0 auto 14px;border-radius:16px;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.4);display:grid;place-items:center;font:700 22px/1 Pretendard,sans-serif;
  backdrop-filter:blur(6px)}
.splashTitle{font:700 30px/1 Pretendard,sans-serif;letter-spacing:.14em;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.splashSub{margin-top:8px;font:400 13px/1 Pretendard,sans-serif;letter-spacing:.04em;opacity:.85}
.splashHint{position:absolute;left:50%;bottom:8%;transform:translateX(-50%);color:#fff;
  font:600 12.5px/1 Pretendard,sans-serif;letter-spacing:.08em;opacity:.9;
  animation:splashPulse 1.7s ease-in-out infinite}
@keyframes splashPulse{0%,100%{opacity:.45}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.splashHint{animation:none}}

/* ═════════ 모달 ═════════ */
.modal{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;
  background:rgba(60,50,54,.34);backdrop-filter:blur(3px);padding:20px}
.modal.show{display:flex}
.modal .box{width:min(600px,100%);max-height:88vh;overflow-y:auto;background:var(--panelbg);
  border:1px solid var(--line);border-radius:20px;padding:28px;box-shadow:var(--shadow-2)}
.modal h3{margin:0 0 10px;font-family:var(--fd);font-size:19px;font-weight:700}
.modal p{margin:0 0 16px;font-size:12.5px;color:var(--muted);line-height:1.8}
.modal textarea{width:100%;height:210px;padding:14px;border-radius:12px;border:1px solid var(--line);
  background:var(--paper);font-size:13px;line-height:1.7;resize:vertical}
.modal textarea:focus{border-color:var(--plum);outline:none;box-shadow:0 0 0 3px var(--plum-soft)}
.btns{display:flex;gap:8px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}
.btns button{padding:10px 16px;border-radius:11px;border:1px solid var(--line);font-size:13px;
  color:var(--muted);background:var(--panelbg)}
.btns button:hover{border-color:var(--muted);color:var(--ink)}
.btns button.key{background:var(--plum);color:#FBF3E8;border-color:var(--plum);font-weight:600}
.btns button.key:hover{background:#7C4560;color:#fff}
.adminGrid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.adminCard{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:15px;border-radius:14px;
  border:1px solid var(--line);background:var(--panelbg);text-align:left;transition:.13s}
.adminCard:hover{border-color:var(--plum);background:var(--plum-soft);transform:translateY(-2px)}
.adminCard .ic{font-size:18px;margin-bottom:5px}
.adminCard b{font-size:13.5px}
.adminCard small{font-size:11px;color:var(--muted);line-height:1.5}
.planrow{display:flex;gap:16px;flex-wrap:wrap}
.planprev{flex:0 0 210px;height:150px;border-radius:12px;border:1px solid var(--line);
  background:var(--paper) center/contain no-repeat;display:grid;place-items:center;
  font-size:11.5px;color:var(--ink-faint);overflow:hidden}
.planprev img{width:100%;height:100%;object-fit:contain;display:block}
.planprev span{padding:16px;text-align:center;line-height:1.5}
.planctl{flex:1;min-width:190px}
.filebtn{display:inline-block;padding:10px 15px;border-radius:11px;border:1px dashed var(--plum);
  color:var(--plum);font-size:12.5px;cursor:pointer;background:var(--plum-soft)}
.filebtn:hover{background:#EDDCE3}

/* ═════════ 토스트 ═════════ */
/* 하단(맞춤·좌석추가·정렬·되돌리기·저장 도구모음)과 자꾸 겹쳐서 상단으로 옮김.
   도구모음은 화면이 좁아지면 두 줄로 접히기도 해서, 하단에 두는 한 픽셀값을
   아무리 조정해도 다시 겹칠 수 있음 — 헤더 바로 아래(위쪽)가 항상 안전함. */
#toast{position:fixed;left:50%;top:70px;transform:translate(-50%,-14px);opacity:0;pointer-events:none;
  padding:12px 20px;border-radius:13px;background:#413A44;color:#F7F1EA;font-size:13px;z-index:300;
  transition:.24s cubic-bezier(.2,.7,.3,1);box-shadow:var(--shadow-2);max-width:min(560px,88vw);text-align:center}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* ═════════ 반응형 ═════════ */
@media (max-width:1180px){.hstats{display:none}}
@media (max-width:980px){
  .side{width:196px}
  .brand span{display:none}
}
@media (max-width:760px){
  .top{height:auto;flex-wrap:wrap;padding:10px 12px;gap:8px}
  .side{display:none}
  .search{flex:1 1 100%;max-width:none}
  .info{width:100%}
  .adminGrid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* 변경 이력 표 */
#logRows tr:hover{background:var(--paper2)}
#logList table{table-layout:fixed}
#logList th{font-weight:600;color:var(--muted);font-size:11px;letter-spacing:.04em}
#logList td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}