/* ═══════════════════════════════════════════════════════════════
   BZO Common Stylesheet
   - 자동반응형 변수
   - 컨트롤바 / 사이드바 / 프레임(아이폰·탭·모니터) / 모달 / 토스트
═══════════════════════════════════════════════════════════════ */

* { margin:0; padding:0; box-sizing:border-box; }
:root {
  /* BZO 디자인 표준 */
  --navy:#0a1628; --navy-2:#142340; --navy-3:#1f3458;
  --gold:#d4a843; --gold-bright:#f0c560;
  --teal:#2a9d8f; --teal-light:#52c1b3;
  --green:#22c55e; --yellow:#fbbf24; --red:#ef4444;
  --white:#fff; --gray:#94a3b8; --line:rgba(212,168,67,0.2);
  --frame-bg:#0f0f10;

  /* ===== 폼 요소 공통 변수 (모든 모듈에서 사용) ===== */
  --form-bg:rgba(255,255,255,0.06);
  --form-border:rgba(212,168,67,0.2);
  --form-border-soft:rgba(212,168,67,0.15);
  --form-text:#fff;
  --form-placeholder:rgba(255,255,255,0.3);
  --form-label:rgba(255,255,255,0.6);
  --form-section-divider:rgba(212,168,67,0.25);
  --btn-cancel-color:rgba(255,255,255,0.6);
  --btn-cancel-border:rgba(255,255,255,0.2);
  --modal-overlay:rgba(10,22,40,0.92);

  /* ===== 라이트 톤 폼 변수 (아이폰 내부 전용 — .iphone-content 스코프에서 오버라이드) ===== */
  --form-bg-light:#ffffff;
  --form-bg-auto:#eaedf3;
  --form-border-light:#d1d6e0;
  --form-text-light:#0a1628;
  --form-label-light:#334155;
  --form-placeholder-light:#94a3b8;
  --form-content-bg:#eaedf3;

  /* 자동반응형 사이즈 */
  --top-h:60px;
  --bottom-h:0px;
  --gap:20px;
  --avail-h:calc(100vh - var(--top-h) - var(--bottom-h) - var(--gap) * 2);
  --layout-gap:40px;
  --avail-w:calc(100vw - 40px - var(--layout-gap));
  --tab-h:min(var(--avail-h), calc(var(--avail-w) / 2.06));
  --tab-w:calc(var(--tab-h) * 1.6);
  --phone-h:var(--tab-h);
  --phone-w:calc(var(--phone-h) * 0.462);
}
html, body { height:100%; overflow:hidden; }
body { font-family:'Noto Sans KR', sans-serif; background:linear-gradient(135deg, #eef0f3 0%, #e3e7ec 50%, #d8dde3 100%); color:var(--white); height:100vh; padding:10px 20px; display:flex; flex-direction:column; }
.mono { font-family:'Roboto Mono', monospace; }

/* ========== TOP CONTROL BAR ========== */
.control-bar { flex-shrink:0; height:var(--top-h); display:flex; align-items:center; justify-content:space-between; padding:0 20px; background:var(--navy); border:1px solid var(--line); border-radius:10px; margin-bottom:var(--gap); }
.control-brand { display:flex; align-items:center; gap:14px; }
.control-brand .logo { color:var(--white); font-size:18px; font-weight:900; letter-spacing:1px; }
.control-brand .sub { font-size:11px; color:var(--gray); letter-spacing:2px; padding-left:14px; border-left:1px solid var(--line); }
.frame-switch { display:flex; gap:0; background:rgba(0,0,0,0.4); border:1px solid var(--line); padding:4px; border-radius:8px; }
.frame-btn { padding:10px 20px; background:transparent; border:none; color:var(--white); font-family:inherit; font-size:16px; font-weight:700; cursor:pointer; border-radius:6px; transition:all 0.3s; display:flex; align-items:center; gap:10px; }
.frame-btn:hover { color:var(--gold); }
.frame-btn.active { background:transparent; color:var(--white); }
.frame-btn .ic { font-size:22px; line-height:1; }

.hamburger-btn {
  width:40px; height:40px;
  background:transparent;
  border:1px solid var(--line);
  border-radius:8px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:5px; cursor:pointer; padding:0;
  transition:all 0.3s;
}
.hamburger-btn:hover { border-color:var(--gold); background:rgba(212,168,67,0.08); }
.hamburger-btn span {
  display:block;
  width:20px; height:2px;
  background:var(--white);
  border-radius:2px;
  transition:all 0.3s;
}
.hamburger-btn:hover span { background:var(--gold); }
.hamburger-btn.active span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger-btn.active span:nth-child(2) { opacity:0; }
.hamburger-btn.active span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ========== MAIN STAGE ========== */
.stage { flex:1; display:flex; align-items:center; justify-content:center; gap:var(--layout-gap); min-height:0; }
.stage-left { display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.stage-right { display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.frame-mode { display:none; }
.frame-mode.active { display:flex; align-items:center; justify-content:center; flex-direction:column; }

/* ========== IPHONE FRAME ========== */
.iphone-frame {
  width:var(--phone-w); height:var(--phone-h);
  background:linear-gradient(135deg, #2a3548 0%, #1a2538 50%, #0f1820 100%);
  border:3px solid #0a0f1a;
  border-radius:calc(var(--phone-w) * 0.13);
  padding:calc(var(--phone-w) * 0.04);
  position:relative;
  box-shadow:
    0 30px 80px rgba(0,0,0,0.7),
    inset 0 0 0 1px rgba(212,168,67,0.18);
}
.iphone-frame::before {
  content:''; position:absolute; left:calc(var(--phone-w) * -0.018);
  top:18%; width:calc(var(--phone-w) * 0.018); height:8%;
  background:linear-gradient(90deg, #3a4a5e 0%, #5a6b80 50%, #2a3548 100%);
  border-radius:2px 0 0 2px;
  box-shadow:0 calc(var(--phone-h) * 0.13) 0 #4a5a6e, 0 calc(var(--phone-h) * 0.25) 0 #4a5a6e;
}
.iphone-frame::after {
  content:''; position:absolute; right:calc(var(--phone-w) * -0.018);
  top:24%; width:calc(var(--phone-w) * 0.018); height:14%;
  background:linear-gradient(270deg, #3a4a5e 0%, #5a6b80 50%, #2a3548 100%);
  border-radius:0 2px 2px 0;
}
.iphone-screen {
  width:100%; height:100%;
  background:#fafaf7;
  border-radius:calc(var(--phone-w) * 0.1);
  overflow:hidden; position:relative;
  display:flex; flex-direction:column;
}
/* 상단 navy 헤더 밴드 (상태바만) */
.iphone-screen::before {
  content:''; position:absolute; top:0; left:0; right:0;
  height:calc(var(--phone-h) * 0.071);
  background:var(--navy);
  z-index:0;
}
.iphone-statusbar {
  position:absolute; top:0; left:0; right:0;
  height:calc(var(--phone-h) * 0.058);
  display:flex; justify-content:space-between; align-items:center;
  padding:0 calc(var(--phone-w) * 0.08);
  font-family:'Roboto Mono'; font-size:calc(var(--phone-w) * 0.05);
  color:#fff; font-weight:700; z-index:1;
}
.iphone-statusbar .right { display:flex; gap:calc(var(--phone-w) * 0.025); align-items:center; }
.iphone-statusbar .battery {
  display:inline-block;
  width:calc(var(--phone-w) * 0.08); height:calc(var(--phone-w) * 0.04);
  border:1px solid #fff; border-radius:2px;
  padding:1px; position:relative;
}
.iphone-statusbar .battery::before {
  content:''; display:block; width:80%; height:100%;
  background:#22c55e; border-radius:1px;
}
.iphone-statusbar .battery::after {
  content:''; position:absolute; right:-3px; top:25%;
  width:2px; height:50%; background:#fff; border-radius:0 1px 1px 0;
}
.iphone-content {
  flex:1;
  padding-top:calc(var(--phone-h) * 0.058);
  display:flex; flex-direction:column;
  min-height:0; overflow:hidden;
  position:relative; z-index:1;
}
.iphone-homebar { display:none; }

/* ── 아이폰 내부 라이트 톤 (cal-modal/time-modal은 형제 요소라 다크 유지) ── */
.iphone-content {
  --form-bg:var(--form-bg-light);
  --form-border:var(--form-border-light);
  --form-border-soft:var(--form-border-light);
  --form-text:var(--form-text-light);
  --form-placeholder:var(--form-placeholder-light);
  --form-label:var(--form-label-light);
  --form-section-divider:transparent;
  background:var(--form-content-bg);
  --btn-cancel-color:#3a4555;
  --btn-cancel-border:#e5e7eb;
}
/* 헤더는 navy 밴드 위 — 텍스트/버튼 화이트 유지 */
.iform-header { --form-text:#fff; }

/* 아이폰 잠금화면 */
.iphone-lock {
  position:absolute; inset:0;
  background:linear-gradient(180deg, var(--navy) 0%, #1a2a4a 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  padding:calc(var(--phone-h) * 0.12) 0 calc(var(--phone-h) * 0.06);
  z-index:5;
  border-radius:calc(var(--phone-w) * 0.1);
  overflow:hidden;
  transform:translateY(0);
  transition:transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.iphone-lock.unlocked { transform:translateY(-100%); }
.iphone-lock::before {
  content:'BZO'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-family:'Playfair Display','Noto Sans KR',serif;
  font-size:calc(var(--phone-w) * 0.55);
  color:var(--gold);
  opacity:0.07; font-weight:900;
  letter-spacing:-4px;
  pointer-events:none;
}
.iphone-lock-time {
  font-family:'Roboto Mono';
  font-size:calc(var(--phone-w) * 0.22);
  font-weight:300; color:#fff;
  line-height:1; letter-spacing:-2px;
  z-index:1;
}
.iphone-lock-date {
  font-size:calc(var(--phone-w) * 0.045);
  color:rgba(255,255,255,0.75);
  letter-spacing:1px; font-weight:500;
  margin-top:calc(var(--phone-h) * 0.01);
  z-index:1;
}
.iphone-lock-swipe {
  display:flex; flex-direction:column; align-items:center;
  gap:calc(var(--phone-h) * 0.012);
  color:rgba(255,255,255,0.5);
  font-size:calc(var(--phone-w) * 0.038);
  letter-spacing:2px;
  z-index:1; cursor:pointer;
  animation:swipeUp 2s ease-in-out infinite;
}
@keyframes swipeUp {
  0%, 100% { transform:translateY(0); opacity:0.5; }
  50% { transform:translateY(-6px); opacity:1; }
}

/* ========== GALAXY TAB FRAME ========== */
.tablet-frame {
  width:var(--tab-w); height:var(--tab-h);
  background:var(--frame-bg);
  border-radius:calc(var(--tab-w) * 0.035);
  padding:calc(var(--tab-w) * 0.028) calc(var(--tab-w) * 0.018);
  position:relative;
  box-shadow:0 0 0 3px #2a2a2c, 0 0 0 8px #1a1a1c, 0 50px 100px rgba(0,0,0,0.7), inset 0 0 40px rgba(0,0,0,0.5);
}
.tablet-frame::before {
  content:''; position:absolute; top:50%; left:calc(var(--tab-w) * 0.012); transform:translateY(-50%);
  width:calc(var(--tab-w) * 0.005); height:calc(var(--tab-h) * 0.12);
  background:linear-gradient(90deg, #1a1a1c, #2a2a2c); border-radius:0 5px 5px 0;
  box-shadow:0 calc(var(--tab-h) * 0.15) 0 calc(var(--tab-h) * -0.012) #2a2a2c, 0 calc(var(--tab-h) * -0.15) 0 calc(var(--tab-h) * -0.012) #2a2a2c;
}
.tablet-frame::after {
  content:''; position:absolute; top:50%; right:calc(var(--tab-w) * 0.012); transform:translateY(-50%);
  width:calc(var(--tab-w) * 0.003); height:calc(var(--tab-h) * 0.1);
  background:#2a2a2c; border-radius:5px 0 0 5px;
}
.tablet-camera {
  position:absolute; top:calc(var(--tab-h) * 0.025); left:50%; transform:translateX(-50%);
  width:calc(var(--tab-w) * 0.008); height:calc(var(--tab-w) * 0.008);
  background:#1a1a1c; border-radius:50%;
  box-shadow:inset 0 0 6px #000, 0 0 0 2px #333;
}
.tablet-camera::after { content:''; position:absolute; top:25%; left:25%; width:50%; height:50%; background:rgba(100,200,255,0.4); border-radius:50%; }
.tablet-screen { width:100%; height:100%; background:#fff; border-radius:calc(var(--tab-w) * 0.013); overflow:hidden; position:relative; }

/* ========== PC MONITOR FRAME ========== */
.monitor-frame {
  --mon-extra:calc(var(--tab-h) * 0.08);
  --mon-h:calc(var(--tab-h) - var(--mon-extra));
  --mon-w:calc(var(--mon-h) * 1.6);
  --max-mon-w:min(var(--mon-w), var(--avail-w));
  width:var(--max-mon-w); display:flex; flex-direction:column; align-items:center;
}
.monitor-bezel {
  width:100%; aspect-ratio:16/10;
  background:#0f0f10;
  border:calc(var(--max-mon-w) * 0.012) solid #1a1a1c;
  border-radius:calc(var(--max-mon-w) * 0.012);
  position:relative;
  box-shadow:0 0 0 2px #2a2a2c, 0 30px 60px rgba(0,0,0,0.6), inset 0 0 30px rgba(0,0,0,0.4);
  overflow:hidden;
}
.monitor-bezel::after {
  content:''; position:absolute;
  bottom:calc(var(--max-mon-w) * -0.011); right:calc(var(--max-mon-w) * 0.02);
  width:calc(var(--max-mon-w) * 0.005); height:calc(var(--max-mon-w) * 0.005);
  background:#22c55e; border-radius:50%; box-shadow:0 0 8px #22c55e;
  animation:ledPulse 2s infinite;
}
@keyframes ledPulse { 50% { opacity:0.4; } }
.monitor-brand {
  position:absolute; bottom:calc(var(--max-mon-w) * -0.024); left:50%; transform:translateX(-50%);
  font-family:'Roboto Mono'; font-size:calc(var(--max-mon-w) * 0.008);
  color:#666; letter-spacing:4px; font-weight:500;
}
.monitor-stand {
  width:calc(var(--max-mon-w) * 0.1); height:calc(var(--mon-extra) * 0.65);
  background:linear-gradient(180deg, #2a2a2c 0%, #1a1a1c 100%);
  margin-top:calc(var(--max-mon-w) * 0.03);
  position:relative;
  clip-path:polygon(40% 0, 60% 0, 90% 100%, 10% 100%);
}
.monitor-base {
  width:calc(var(--max-mon-w) * 0.32); height:calc(var(--mon-extra) * 0.18);
  background:linear-gradient(180deg, #2a2a2c 0%, #0f0f10 100%);
  border-radius:8px; margin-top:-2px;
  box-shadow:0 8px 20px rgba(0,0,0,0.4);
}
.monitor-screen { width:100%; height:100%; background:#fff; position:relative; }

/* ========== SCREEN CONTENT (탭/모니터 공통) ========== */
.screen-content {
  width:100%; height:100%;
  background:linear-gradient(135deg, #f4f7fb 0%, #e8edf5 100%);
  padding:calc(var(--tab-w) * 0.025) calc(var(--tab-w) * 0.035);
  display:flex; flex-direction:column;
  position:relative;
  color:var(--navy);
  font-family:'Noto Sans KR', sans-serif;
  overflow:hidden;
}
.sc-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:calc(var(--tab-h) * 0.025); padding-bottom:calc(var(--tab-h) * 0.018); border-bottom:2px solid var(--navy); flex-shrink:0; }
.sc-title { font-size:calc(var(--tab-w) * 0.032); font-weight:900; letter-spacing:-1px; line-height:1.1; color:var(--navy); }
.sc-title .accent { color:var(--gold); }
.sc-header-right { text-align:right; }
.sc-header-right .date { font-family:'Roboto Mono'; font-size:calc(var(--tab-w) * 0.014); color:var(--navy); font-weight:700; }
.sc-body { flex:1; min-height:0; display:flex; align-items:center; justify-content:center; }

/* ========== 사이드바 ========== */
.sidebar-backdrop {
  position:fixed; inset:0;
  background:rgba(0,0,0,0.5);
  backdrop-filter:blur(4px);
  z-index:998;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.3s;
}
.sidebar-backdrop.active { opacity:1; pointer-events:auto; }
.sidebar {
  position:fixed; top:0; right:0; bottom:0;
  width:340px;
  max-width:85vw;
  background:var(--navy);
  z-index:999;
  transform:translateX(100%);
  transition:transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display:flex; flex-direction:column;
  box-shadow:-10px 0 30px rgba(0,0,0,0.4);
}
.sidebar.active { transform:translateX(0); }
.sidebar-header {
  flex-shrink:0;
  padding:24px 24px 20px;
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
}
.sidebar-close {
  background:transparent;
  color:var(--gray);
  border:1px solid var(--line);
  border-radius:8px;
  width:36px; height:36px;
  cursor:pointer;
  font-size:16px;
  font-family:inherit;
  display:flex; align-items:center; justify-content:center;
  transition:all 0.2s;
  flex-shrink:0;
}
.sidebar-close:hover {
  border-color:var(--gold);
  color:var(--gold);
  background:rgba(212,168,67,0.08);
}
.sidebar-header .title {
  color:var(--gold);
  font-size:20px;
  font-weight:900;
  letter-spacing:1px;
}
.sidebar-header .sub {
  color:var(--gray);
  font-size:11px;
  letter-spacing:2px;
  margin-top:4px;
}
.sidebar-body {
  flex:1;
  overflow-y:auto;
  padding:8px 0;
}
.sidebar-body::-webkit-scrollbar { width:4px; }
.sidebar-body::-webkit-scrollbar-track { background:transparent; }
.sidebar-body::-webkit-scrollbar-thumb { background:rgba(212,168,67,0.3); border-radius:2px; }
.menu-group { border-bottom:1px solid rgba(212,168,67,0.08); }
.menu-group-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 24px;
  color:#fff;
  font-size:16px;
  font-weight:900;
  letter-spacing:3px;
  cursor:pointer;
  user-select:none;
}
.menu-group-head .arrow {
  font-size:12px;
  color:#fff;
  transition:transform 0.3s;
}
.menu-group.open .arrow { transform:rotate(180deg); }
.menu-group-body {
  max-height:0;
  overflow:hidden;
  transition:max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.menu-group.open .menu-group-body { max-height:600px; }
.menu-item {
  display:block;
  padding:14px 24px 14px 36px;
  color:var(--gold);
  font-size:17px;
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
  transition:background 0.2s;
}
.menu-item:hover { background:rgba(212,168,67,0.08); }
.menu-item.active {
  background:rgba(212,168,67,0.12);
  color:var(--gold);
  border-left:3px solid var(--gold);
  padding-left:33px;
}
.menu-single {
  display:block;
  padding:18px 24px;
  color:var(--gold);
  font-size:16px;
  font-weight:900;
  letter-spacing:2px;
  cursor:pointer;
  text-decoration:none;
  transition:background 0.2s;
  border-bottom:1px solid rgba(212,168,67,0.08);
}
.menu-single:hover { background:rgba(212,168,67,0.08); }

/* ========== 토스트 (iOS 스타일) ========== */
.toast-container {
  position:fixed; top:50%; left:50%; transform:translate(-50%, -50%);
  z-index:99999;
  display:flex; flex-direction:column; gap:8px;
  pointer-events:none;
  align-items:center;
}
.toast {
  background:rgba(28,28,30,0.95);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  color:#fff;
  padding:14px 22px;
  border-radius:100px;
  box-shadow:0 8px 24px rgba(0,0,0,0.3);
  font-size:14px;
  font-weight:500;
  display:inline-flex; align-items:center; gap:10px;
  pointer-events:auto;
  animation:toastIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  letter-spacing:-0.2px;
  white-space:nowrap;
}
.toast.hide { animation:toastOut 0.25s cubic-bezier(0.4, 0, 1, 1) forwards; }
.toast-icon {
  font-size:14px;
  width:20px; height:20px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  flex-shrink:0;
  font-weight:700;
}
.toast.success .toast-icon { background:#30d158; color:#fff; }
.toast.warning .toast-icon { background:#ff9f0a; color:#fff; }
.toast.danger .toast-icon { background:#ff453a; color:#fff; }
.toast.info .toast-icon { background:rgba(255,255,255,0.2); color:#fff; }
@keyframes toastIn { from { opacity:0; transform:scale(0.7); } to { opacity:1; transform:scale(1); } }
@keyframes toastOut { from { opacity:1; transform:scale(1); } to { opacity:0; transform:scale(0.7); } }

/* ========== 스피너 ========== */
.spinner-overlay {
  position:fixed; inset:0;
  background:rgba(10,22,40,0.7);
  backdrop-filter:blur(4px);
  z-index:99998;
  display:none; align-items:center; justify-content:center;
  flex-direction:column; gap:18px;
}
.spinner-overlay.active { display:flex; }
.spinner {
  width:56px; height:56px;
  border:4px solid rgba(212,168,67,0.2);
  border-top-color:var(--gold);
  border-radius:50%;
  animation:spin 0.8s linear infinite;
}
.spinner-text { color:#fff; font-size:14px; font-weight:500; letter-spacing:1px; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ========== 작은 화면 보호 ========== */
@media (max-width:600px) {
  body { padding:8px 12px; }
  :root { --top-h:50px; --bottom-h:0px; --gap:10px; }
  .control-bar { padding:0 12px; }
  .control-brand .sub { display:none; }
  .frame-btn { padding:8px 12px; font-size:11px; }
}

/* ═══════════════════════════════════════════════════════════════
   폼 공통 (모든 모듈에서 동일하게 사용)
═══════════════════════════════════════════════════════════════ */

/* 폼 페이지 컨테이너 */
.iform { width:100%; height:100%; position:relative; overflow:hidden; }
.iform-pages {
  position:absolute; inset:0;
  display:flex;
  transition:transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.iform-page {
  flex:0 0 100%;
  width:100%; height:100%;
  display:flex; flex-direction:column;
  padding:calc(var(--phone-w) * 0.05);
  gap:calc(var(--phone-h) * 0.013);
  overflow:hidden;
  min-height:0;
  background:transparent;
  position:relative;
}

/* 헤더 (모듈 타이틀 + 보조 버튼) */
.iform-header {
  display:none;
}
/* 네비게이션 버튼만 있는 헤더 (뒤로/상세입력) */
.iform-header-nav {
  flex-shrink:0;
  display:flex;
  align-items:center;
  padding:calc(var(--phone-h) * 0.008) calc(var(--phone-w) * 0.04);
  background:var(--navy);
  min-height:calc(var(--phone-h) * 0.055);
}
.iform-title {
  color:var(--gold);
  font-size:calc(var(--phone-w) * 0.072);
  font-weight:900;
  letter-spacing:-0.5px;
}
.iform-detail-btn {
  background:transparent;
  color:var(--form-text);
  border:1px solid var(--form-text);
  border-radius:calc(var(--phone-w) * 0.02);
  padding:calc(var(--phone-h) * 0.008) calc(var(--phone-w) * 0.035);
  font-size:calc(var(--phone-w) * 0.038);
  font-weight:700;
  cursor:pointer;
  font-family:inherit;
  transition:all 0.2s;
}
.iform-detail-btn:hover { background:var(--form-text); color:var(--navy); }

/* 섹션 */
.iform-section {
  display:flex; flex-direction:column;
  gap:calc(var(--phone-h) * 0.008);
  flex-shrink:0;
}
.iform-section.flex-grow {
  flex:1;
  min-height:0;
  padding-right:calc(var(--phone-w) * 0.025);
  padding-left:calc(var(--phone-w) * 0.025);
}
.iform-section.flex-grow { scrollbar-width:none; }
.iform-section.flex-grow::-webkit-scrollbar { display:none; }
.iform-section-label {
  color:var(--gold);
  font-size:calc(var(--phone-w) * 0.045);
  letter-spacing:2px;
  font-weight:700;
  display:flex; justify-content:space-between; align-items:center;
  gap:calc(var(--phone-w) * 0.015);
}

/* 추가/삭제 버튼 */
.iform-add {
  background:transparent;
  color:var(--gold);
  border:1px solid var(--gold);
  border-radius:calc(var(--phone-w) * 0.015);
  padding:calc(var(--phone-h) * 0.005) calc(var(--phone-w) * 0.025);
  font-size:calc(var(--phone-w) * 0.032);
  font-weight:700;
  cursor:pointer;
  font-family:inherit;
}
.iform-del { color:var(--red) !important; border-color:var(--red) !important; }

/* 필드 (label + input/select) */
.iform-field { display:flex; flex-direction:column; gap:calc(var(--phone-h) * 0.005); }
.iform-field label {
  color:var(--form-label);
  font-size:calc(var(--phone-w) * 0.038);
  font-weight:700;
  letter-spacing:-0.2px;
}
.iform-field input,
.iform-field select {
  background:var(--form-bg);
  border:1px solid var(--form-border);
  border-radius:calc(var(--phone-w) * 0.032);
  padding:calc(var(--phone-h) * 0.013) calc(var(--phone-w) * 0.04);
  color:var(--form-text);
  font-size:calc(var(--phone-w) * 0.042);
  font-family:inherit;
  outline:none;
  transition:border-color 0.2s, background 0.2s;
}
.iform-field input:focus,
.iform-field select:focus { border-color:var(--gold); }
.iform-field input::placeholder { color:var(--form-placeholder); }
.iform-field input.auto,
.iform-field input[readonly] {
  background:var(--form-bg-auto);
  color:var(--form-placeholder);
  border-color:transparent;
}

/* 파일 업로드 트리거 (서명/사진) */
.iform-file-trigger,
.photo-trigger {
  background:var(--form-bg-light);
  border:1.5px dashed #475569;
  border-radius:calc(var(--phone-w) * 0.032);
  padding:calc(var(--phone-h) * 0.015) calc(var(--phone-w) * 0.04);
  color:var(--form-label-light);
  font-size:calc(var(--phone-w) * 0.045);
  cursor:pointer;
  text-align:center;
  transition:border-color 0.2s;
  font-family:inherit;
}
.iform-file-trigger:hover,
.photo-trigger:hover { border-color:#334155; }
.iform-file-trigger.has-value,
.photo-trigger.has-value {
  color:var(--form-text);
  border-color:#334155;
  border-style:solid;
}

/* 검색 영역 (1번 select → 2번 select) */
.iform-search-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:calc(var(--phone-w) * 0.025);
  flex-shrink:0;
}
.iform-search-select {
  background:var(--form-bg);
  border:1px solid var(--form-border);
  border-radius:calc(var(--phone-w) * 0.018);
  padding:calc(var(--phone-h) * 0.011) calc(var(--phone-w) * 0.06);
  color:var(--form-text);
  font-size:calc(var(--phone-w) * 0.04);
  font-family:inherit;
  outline:none;
  width:100%;
  text-align:center;
  text-align-last:center;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%230a1628' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;
  background-position:right calc(var(--phone-w) * 0.025) center;
}
.iform-search-select:focus { border-color:var(--gold); }
.iform-search-select option { background:#fff; color:var(--form-text); }

/* 디테일 행 (반복 입력) */
.iform-detail {
  display:flex; flex-direction:column;
  gap:calc(var(--phone-h) * 0.006);
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  min-height:0;
  padding-right:calc(var(--phone-w) * 0.012);
}
.iform-detail { scrollbar-width:none; }
.iform-detail::-webkit-scrollbar { display:none; }
.iform-detail-row {
  display:grid;
  grid-template-columns:1fr calc(var(--phone-w) * 0.25);
  gap:calc(var(--phone-w) * 0.02);
  align-items:center;
  min-width:0;
}
.iform-detail-row select,
.iform-detail-row input {
  background:var(--form-bg);
  border:1px solid var(--form-border-soft);
  border-radius:calc(var(--phone-w) * 0.015);
  padding:calc(var(--phone-h) * 0.009) calc(var(--phone-w) * 0.06);
  color:var(--form-text);
  font-size:calc(var(--phone-w) * 0.038);
  font-family:inherit;
  outline:none;
  min-width:0;
  width:100%;
  text-align:center;
}
.iform-detail-row input::placeholder { color:var(--form-placeholder); }
.iform-detail-row select {
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%230a1628' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;
  background-position:right calc(var(--phone-w) * 0.02) center;
  text-align-last:center;
}
.iform-detail-row select:focus,
.iform-detail-row input:focus { border-color:var(--gold); }
.iform-detail-row select option { background:#fff; color:var(--form-text); }
.iform-detail-qty { text-align:center; }

/* 권한 트리거 */
.iform-perm-trigger {
  background:var(--form-bg);
  border:1px solid var(--form-border-soft);
  border-radius:calc(var(--phone-w) * 0.015);
  padding:calc(var(--phone-h) * 0.009) calc(var(--phone-w) * 0.025);
  color:var(--form-placeholder);
  font-size:calc(var(--phone-w) * 0.038);
  cursor:pointer;
  transition:border-color 0.2s;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:center;
}
.iform-perm-trigger:hover { border-color:var(--gold); }
.iform-perm-trigger.has-value { color:var(--form-text); }

/* 일자 트리거 */
.iform-date-trigger {
  background:var(--form-bg);
  border:1px solid var(--form-border);
  border-radius:calc(var(--phone-w) * 0.032);
  padding:calc(var(--phone-h) * 0.013) calc(var(--phone-w) * 0.04);
  color:var(--form-placeholder);
  font-size:calc(var(--phone-w) * 0.042);
  cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:calc(var(--phone-w) * 0.025);
  transition:border-color 0.2s;
}
.iform-date-trigger:hover { border-color:var(--gold); }

/* input[type=time] — 브라우저 기본 UI 제거, iform-date-trigger 스타일 통일 */
.iphone-content input[type="time"] {
  background:var(--form-bg);
  border:1px solid var(--form-border);
  border-radius:calc(var(--phone-w) * 0.018);
  padding:calc(var(--phone-h) * 0.011) calc(var(--phone-w) * 0.03);
  color:var(--form-text);
  font-size:calc(var(--phone-w) * 0.04);
  font-family:inherit;
  width:100%;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
}
.iphone-content input[type="time"]::-webkit-calendar-picker-indicator {
  filter:invert(1) opacity(0.5);
  cursor:pointer;
}
.iphone-content input[type="time"]:focus {
  outline:none;
  border-color:var(--gold);
}

/* 하단 버튼 (취소/저장) */
/* ── 아이폰 푸터 탭바 (bzo-pm-common.css .tab-bar 스타일 기준) ── */
.iform-actions {
  position:absolute;
  bottom:calc(var(--phone-w) * -0.05);
  left:calc(var(--phone-w) * -0.05);
  right:calc(var(--phone-w) * -0.05);
  background:#ffffff;
  border-top:1px solid #d1d6e0;
  border-radius:0 0 calc(var(--phone-w) * 0.1) calc(var(--phone-w) * 0.1);
  display:grid; grid-template-columns:repeat(3,1fr);
  padding:16px calc(var(--phone-w) * 0.05) 28px;
  z-index:5;
}
.iform-btn {
  text-align:center; cursor:pointer; padding:6px 0;
  display:flex; flex-direction:column; align-items:center;
  border:none; background:transparent;
  font-family:inherit; transition:opacity 0.15s;
}
.iform-btn:active { opacity:0.6; }
.iform-btn svg { display:none; }
.iform-btn span {
  font-size:calc(var(--phone-w) * 0.05); color:#334155;
  letter-spacing:-0.3px; font-weight:700;
}
.iform-btn-cancel span { color:#334155; }
.iform-btn-new span { color:#334155; }
.iform-btn-save span { color:#334155; }
.iform-btn-save:hover span { color:#0a1628; }

/* ═══════════════════════════════════════════════════════════════
   모달 공통 (달력/서명/권한 등)
═══════════════════════════════════════════════════════════════ */
.cal-modal {
  position:absolute; inset:0;
  background:var(--modal-overlay);
  backdrop-filter:blur(8px);
  display:none; align-items:center; justify-content:center;
  z-index:10;
  border-radius:calc(var(--phone-w) * 0.1);
  padding:calc(var(--phone-w) * 0.05);
}
.cal-modal.active { display:flex; }
.cal-box {
  width:100%;
  background:linear-gradient(180deg, var(--navy-2) 0%, var(--navy) 100%);
  border:1px solid rgba(212,168,67,0.3);
  border-radius:calc(var(--phone-w) * 0.04);
  padding:calc(var(--phone-w) * 0.05);
  display:flex; flex-direction:column;
  gap:calc(var(--phone-h) * 0.012);
}
.cal-head { display:flex; justify-content:space-between; align-items:center; }
.cal-head .cal-title {
  color:var(--gold);
  font-size:calc(var(--phone-w) * 0.055);
  font-weight:900;
  font-family:'Roboto Mono';
}
.cal-nav {
  background:transparent;
  color:var(--form-text);
  border:1px solid rgba(212,168,67,0.3);
  border-radius:calc(var(--phone-w) * 0.015);
  width:calc(var(--phone-w) * 0.08);
  height:calc(var(--phone-w) * 0.08);
  cursor:pointer;
  font-size:calc(var(--phone-w) * 0.04);
  font-family:inherit;
  display:flex; align-items:center; justify-content:center;
}
.cal-nav:hover { background:rgba(212,168,67,0.1); border-color:var(--gold); }
.cal-week {
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:calc(var(--phone-w) * 0.005);
  text-align:center;
}
.cal-week .wk { color:rgba(255,255,255,0.5); font-size:calc(var(--phone-w) * 0.032); font-weight:700; letter-spacing:1px; padding:calc(var(--phone-h) * 0.005) 0; }
.cal-week .wk.sun { color:var(--red); }
.cal-week .wk.sat { color:#5b9eff; }
.cal-grid { display:grid; grid-template-columns:repeat(7, 1fr); gap:calc(var(--phone-w) * 0.005); }
.cal-day {
  aspect-ratio:1;
  display:flex; align-items:center; justify-content:center;
  color:var(--form-text);
  font-size:calc(var(--phone-w) * 0.04);
  cursor:pointer;
  border-radius:50%;
  transition:all 0.2s;
  font-family:'Roboto Mono';
}
.cal-day:hover:not(.empty) { background:rgba(212,168,67,0.15); }
.cal-day.empty { cursor:default; }
.cal-day.today { border:1px solid var(--gold); }
.cal-day.selected { background:var(--gold); color:var(--navy); font-weight:900; }
.cal-day.sun { color:var(--red); }
.cal-day.sat { color:#5b9eff; }
.cal-day.selected.sun, .cal-day.selected.sat { color:var(--navy); }
.cal-actions { display:grid; grid-template-columns:1fr 1fr; gap:calc(var(--phone-w) * 0.025); margin-top:calc(var(--phone-h) * 0.005); }
.cal-btn {
  padding:calc(var(--phone-h) * 0.012) 0;
  border:none;
  border-radius:calc(var(--phone-w) * 0.025);
  font-size:calc(var(--phone-w) * 0.042);
  font-weight:700;
  cursor:pointer;
  font-family:inherit;
}
.cal-btn-cancel { background:transparent; color:var(--btn-cancel-color); border:1px solid var(--btn-cancel-border); }
.cal-btn-confirm { background:var(--gold); color:var(--navy); }
.cal-btn-confirm:hover { background:var(--gold-bright); }

/* 서명 미리보기 */
.sign-preview {
  background:#fff;
  border-radius:calc(var(--phone-w) * 0.025);
  padding:calc(var(--phone-w) * 0.04);
  min-height:calc(var(--phone-h) * 0.18);
  display:flex; align-items:center; justify-content:center;
}
.sign-preview img { max-width:100%; max-height:calc(var(--phone-h) * 0.25); object-fit:contain; }

/* 권한 리스트 (체크박스 그리드) */
.perm-list {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:calc(var(--phone-w) * 0.015);
  max-height:calc(var(--phone-h) * 0.4);
  overflow-y:auto;
  padding-right:calc(var(--phone-w) * 0.012);
}
.perm-list { scrollbar-width:none; }
.perm-list::-webkit-scrollbar { display:none; }
.perm-item {
  display:flex; align-items:center;
  gap:calc(var(--phone-w) * 0.015);
  background:rgba(255,255,255,0.04);
  border:1px solid var(--form-border-soft);
  border-radius:calc(var(--phone-w) * 0.018);
  padding:calc(var(--phone-h) * 0.01) calc(var(--phone-w) * 0.025);
  cursor:pointer;
  transition:all 0.2s;
  font-size:calc(var(--phone-w) * 0.038);
  color:var(--form-text);
}
.perm-item:hover { border-color:var(--gold); }
.perm-item input[type="checkbox"] {
  width:calc(var(--phone-w) * 0.035);
  height:calc(var(--phone-w) * 0.035);
  accent-color:var(--gold);
  cursor:pointer;
  flex-shrink:0;
}
.perm-item:has(input:checked) { background:rgba(212,168,67,0.15); border-color:var(--gold); }

/* ═══════════════════════════════════════════════════════════════
   시간 선택 모달 (시간 휠 피커 - iOS 스타일)
   사용법: openTimePicker('targetFieldId') — bzo-common.js 참고
═══════════════════════════════════════════════════════════════ */

.time-modal {
  position:absolute; inset:0;
  background:rgba(10,22,40,0.85);
  backdrop-filter:blur(6px);
  display:none;
  align-items:center; justify-content:center;
  z-index:20;
  border-radius:calc(var(--phone-w) * 0.1);
  padding:calc(var(--phone-w) * 0.04);
}
.time-modal.active { display:flex; }

.time-box {
  width:100%;
  background:var(--navy);
  border:1px solid var(--gold);
  border-radius:calc(var(--phone-w) * 0.04);
  padding:calc(var(--phone-h) * 0.018) calc(var(--phone-w) * 0.04);
  display:flex; flex-direction:column;
  gap:calc(var(--phone-h) * 0.012);
  box-shadow:0 10px 40px rgba(0,0,0,0.5);
}

.time-title {
  text-align:center;
  color:var(--gold);
  font-size:calc(var(--phone-w) * 0.05);
  font-weight:700;
  letter-spacing:1px;
  padding-bottom:calc(var(--phone-h) * 0.008);
  border-bottom:1px solid rgba(212,168,67,0.2);
}

/* 휠 영역 (오전/오후 · 시 · 분) */
.time-wheels {
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:calc(var(--phone-w) * 0.02);
  position:relative;
  padding:calc(var(--phone-h) * 0.005) 0;
}

/* 가운데 선택 라인 (골드 하이라이트) */
.time-wheels::before {
  content:'';
  position:absolute;
  left:0; right:0;
  top:50%; transform:translateY(-50%);
  height:calc(var(--phone-h) * 0.045);
  background:rgba(212,168,67,0.15);
  border-top:1px solid var(--gold);
  border-bottom:1px solid var(--gold);
  pointer-events:none;
  z-index:1;
}

.time-wheel {
  height:calc(var(--phone-h) * 0.225);  /* 5칸 노출 */
  overflow-y:scroll;
  scroll-snap-type:y mandatory;
  scrollbar-width:none;
  -ms-overflow-style:none;
  position:relative;
  z-index:2;
  /* 위/아래 페이드 효과 */
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 25%, #000 75%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0%, #000 25%, #000 75%, transparent 100%);
}
.time-wheel::-webkit-scrollbar { display:none; }

.time-wheel-inner {
  display:flex; flex-direction:column;
}
.time-wheel-item {
  scroll-snap-align:center;
  height:calc(var(--phone-h) * 0.045);
  display:flex; align-items:center; justify-content:center;
  font-size:calc(var(--phone-w) * 0.055);
  font-weight:700;
  color:rgba(255,255,255,0.4);
  font-family:'Roboto Mono', monospace;
  transition:all 0.15s;
  cursor:pointer;
  user-select:none;
}
.time-wheel-item.selected {
  color:var(--gold);
  font-size:calc(var(--phone-w) * 0.06);
  font-weight:900;
}

/* 시:분 구분자 */
.time-colon {
  position:absolute;
  top:50%; left:calc(50% + (var(--phone-w) * 0.03));
  transform:translate(-50%, -50%);
  color:var(--gold);
  font-size:calc(var(--phone-w) * 0.06);
  font-weight:900;
  font-family:'Roboto Mono', monospace;
  z-index:3;
  pointer-events:none;
}

/* 라벨 (시 / 분) */
.time-labels {
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:calc(var(--phone-w) * 0.02);
  text-align:center;
  color:rgba(255,255,255,0.4);
  font-size:calc(var(--phone-w) * 0.03);
  font-weight:600;
  letter-spacing:1px;
  margin-top:calc(var(--phone-h) * -0.005);
}

/* 미리보기 박스 */
.time-preview {
  background:rgba(212,168,67,0.08);
  border:1px solid rgba(212,168,67,0.3);
  border-radius:calc(var(--phone-w) * 0.025);
  padding:calc(var(--phone-h) * 0.012) calc(var(--phone-w) * 0.04);
  text-align:center;
}
.time-preview-label {
  color:rgba(255,255,255,0.5);
  font-size:calc(var(--phone-w) * 0.028);
  letter-spacing:1px;
  font-weight:500;
}
.time-preview-value {
  color:var(--gold);
  font-size:calc(var(--phone-w) * 0.055);
  font-weight:700;
  font-family:'Roboto Mono', monospace;
  margin-top:calc(var(--phone-h) * 0.003);
  letter-spacing:1px;
}

/* 액션 버튼 (지금 / 취소 / 확인) */
.time-actions {
  display:grid;
  grid-template-columns:auto 1fr 1fr;
  gap:calc(var(--phone-w) * 0.02);
}
.time-btn {
  padding:calc(var(--phone-h) * 0.013) calc(var(--phone-w) * 0.04);
  border-radius:calc(var(--phone-w) * 0.025);
  font-size:calc(var(--phone-w) * 0.04);
  font-weight:700;
  cursor:pointer;
  font-family:inherit;
  transition:all 0.2s;
  border:1px solid;
  letter-spacing:0.5px;
}
.time-btn-now {
  background:transparent;
  color:var(--gold);
  border-color:var(--gold);
}
.time-btn-now:hover { background:rgba(212,168,67,0.1); }
.time-btn-cancel {
  background:transparent;
  color:var(--btn-cancel-color);
  border-color:var(--btn-cancel-border);
}
.time-btn-confirm {
  background:var(--gold);
  color:var(--navy);
  border-color:var(--gold);
}
.time-btn-confirm:hover { background:var(--gold-bright); }

/* ── 1PC 차단 오버레이 ── */
#bzo-device-block {
  position:fixed; inset:0; z-index:99999;
  background:rgba(10,22,40,0.85);
  display:flex; align-items:center; justify-content:center;
}
.bzo-block-card {
  background:#fff; border-radius:16px;
  padding:2rem 2.5rem; width:300px; text-align:center;
}
.bzo-block-icon {
  width:56px; height:56px; border-radius:50%;
  background:rgba(224,122,95,0.12);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 1.25rem; font-size:26px;
}
.bzo-block-title {
  font-size:17px; font-weight:700;
  color:var(--navy); margin:0 0 0.5rem;
}
.bzo-block-desc {
  font-size:14px; color:#64748b;
  line-height:1.6; margin:0 0 1.25rem;
}
.bzo-block-info {
  background:#f1f5f9; border-radius:8px;
  padding:0.75rem 1rem; text-align:left; margin-bottom:1.25rem;
}
.bzo-block-info-label {
  font-size:12px; color:#94a3b8; margin:0 0 4px;
}
.bzo-block-info-value {
  font-size:13px; color:var(--navy); font-weight:600; margin:0;
}
.bzo-block-contact {
  font-size:13px; color:#64748b;
  border:0.5px solid #cbd5e1; border-radius:8px;
  padding:10px; display:flex; align-items:center; gap:6px;
  justify-content:center;
}