/* ============ API Test Mobile UI ============ */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Apple SD Gothic Neo','Noto Sans KR',sans-serif; background:#f5f5f5; color:#222; font-size:14px; }
a { text-decoration:none; color:inherit; }

/* ---- Shell ---- */
.app-shell { max-width:400px; margin:0 auto; min-height:100vh; background:#fff; position:relative; overflow-x:hidden; }

/* ---- Header ---- */
.app-header { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background:#fff; border-bottom:1px solid #eee; position:sticky; top:0; z-index:100; }
.app-header .hamburger { width:28px; height:28px; cursor:pointer; display:flex; flex-direction:column; justify-content:center; gap:4px; }
.app-header .hamburger span { display:block; width:20px; height:2px; background:#333; }
.app-header .title { font-size:16px; font-weight:700; }
.app-header .noti-btn { width:28px; height:28px; position:relative; cursor:pointer; }
.app-header .noti-btn svg { width:24px; height:24px; }
.app-header .noti-badge { position:absolute; top:-2px; right:-2px; background:#ff4444; color:#fff; font-size:10px; width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; }

/* ---- Side Menu ---- */
.side-overlay { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.4); z-index:200; }
.side-menu { position:fixed; top:0; left:-280px; width:280px; height:100%; background:#fff; z-index:201; transition:left .25s; padding:20px 0; }
.side-menu.open { left:0; }
.side-menu .menu-header { padding:16px 20px; border-bottom:1px solid #eee; font-size:18px; font-weight:700; }
.side-menu .menu-item { display:block; padding:14px 20px; font-size:15px; cursor:pointer; }
.side-menu .menu-item:hover { background:#f5f5f5; }

/* ---- Content ---- */
.app-content { padding:16px; }

/* ---- Banner Slot ---- */
.banner-slot { border-radius:12px; overflow:hidden; margin-bottom:16px; background:#e8e8e8; position:relative; cursor:pointer; }
.banner-slot img { width:100%; display:block; }
.banner-slot .banner-placeholder { height:150px; display:flex; align-items:center; justify-content:center; color:#999; font-size:13px; }
.banner-slot .banner-info { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(transparent, rgba(0,0,0,.6)); color:#fff; padding:12px; }
.banner-slot .banner-info .b-title { font-size:14px; font-weight:600; }
.banner-slot .banner-info .b-sub { font-size:11px; opacity:.8; margin-top:2px; }

/* Popup Banner */
.popup-overlay { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.5); z-index:300; align-items:center; justify-content:center; }
.popup-overlay.show { display:flex; }
.popup-banner { background:transparent; border-radius:16px; overflow:visible; width:auto; max-width:90vw; max-height:90vh; position:relative; }
.popup-banner .popup-close { position:absolute; top:-8px; right:-8px; width:32px; height:32px; background:rgba(0,0,0,.6); color:#fff; border:none; border-radius:50%; font-size:18px; cursor:pointer; z-index:1; }
.popup-banner .popup-body { padding:0; text-align:center; }
.popup-banner .popup-body img { max-width:90vw; max-height:85vh; border-radius:12px; display:block; }

/* ---- Batch Control ---- */
.batch-control { background:#fff; border:1px solid #ddd; border-radius:12px; padding:16px; margin-bottom:16px; }
.batch-control .bc-title { font-size:13px; color:#666; margin-bottom:8px; }
.batch-control .bc-date { font-size:20px; font-weight:700; text-align:center; margin:8px 0; }
.batch-control .bc-btns { display:flex; gap:8px; flex-wrap:wrap; }
.batch-control .bc-btns button { flex:1; min-width:100px; padding:8px 4px; border:1px solid #ddd; border-radius:8px; background:#fff; font-size:12px; cursor:pointer; }
.batch-control .bc-btns button:hover { background:#f0f0f0; }
.batch-control .bc-btns button.primary { background:#4a6cf7; color:#fff; border-color:#4a6cf7; }
.batch-control .bc-log { margin-top:8px; font-size:11px; color:#888; max-height:80px; overflow-y:auto; }

/* ---- Coupon List ---- */
.coupon-card { background:#fff; border:1px solid #eee; border-radius:12px; padding:16px; margin-bottom:12px; display:flex; gap:12px; align-items:center; }
.coupon-card .cpn-icon { width:48px; height:48px; border-radius:8px; background:#f0e6ff; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.coupon-card .cpn-info { flex:1; }
.coupon-card .cpn-info .cpn-name { font-size:14px; font-weight:600; }
.coupon-card .cpn-info .cpn-desc { font-size:12px; color:#888; margin-top:2px; }
.coupon-card .cpn-info .cpn-discount { font-size:16px; font-weight:700; color:#4a6cf7; margin-top:4px; }
.coupon-card .cpn-btn { flex-shrink:0; }
.coupon-card .cpn-btn button { padding:8px 14px; border:none; border-radius:8px; background:#4a6cf7; color:#fff; font-size:12px; cursor:pointer; }
.coupon-card .cpn-btn button:disabled { background:#ccc; }

/* ---- Coupon Box ---- */
.box-card { background:#fff; border:1px solid #eee; border-radius:12px; padding:16px; margin-bottom:12px; cursor:pointer; }
.box-card .box-top { display:flex; justify-content:space-between; align-items:center; }
.box-card .box-name { font-size:14px; font-weight:600; }
.box-status { font-size:11px; padding:3px 8px; border-radius:4px; }
.box-status.unused { background:#e6f7e6; color:#27ae60; }
.box-status.used { background:#eee; color:#999; }
.box-card .box-detail { font-size:12px; color:#888; margin-top:6px; }
.box-card .box-expire { font-size:11px; color:#ccc; margin-top:4px; }

/* ---- Offline Code Modal ---- */
.code-modal-overlay { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.5); z-index:400; align-items:center; justify-content:center; }
.code-modal-overlay.show { display:flex; }
.code-modal { background:#fff; border-radius:16px; padding:24px; width:300px; text-align:center; }
.code-modal h3 { font-size:16px; margin-bottom:16px; }
.code-modal .code-inputs { display:flex; gap:8px; justify-content:center; margin-bottom:16px; }
.code-modal .code-inputs input { width:48px; height:56px; text-align:center; font-size:24px; font-weight:700; border:2px solid #ddd; border-radius:12px; outline:none; }
.code-modal .code-inputs input:focus { border-color:#4a6cf7; }
.code-modal .code-error { color:#ff4444; font-size:12px; margin-bottom:8px; display:none; }
.code-modal .code-btns { display:flex; gap:8px; }
.code-modal .code-btns button { flex:1; padding:12px; border:none; border-radius:10px; font-size:14px; font-weight:600; cursor:pointer; }
.code-modal .code-btns .cancel { background:#eee; color:#666; }
.code-modal .code-btns .confirm { background:#4a6cf7; color:#fff; }

/* ---- Noti Panel ---- */
.noti-panel { display:none; position:absolute; top:52px; right:8px; width:340px; max-height:420px; background:#fff; border:1px solid #eee; border-radius:12px; box-shadow:0 4px 16px rgba(0,0,0,.12); z-index:150; overflow-y:auto; }
.noti-panel.show { display:block; }
.noti-panel .noti-header { padding:14px 16px; font-size:15px; font-weight:700; border-bottom:1px solid #eee; }
.noti-item { padding:12px 16px 12px 68px; border-bottom:1px solid #f5f5f5; background:url(/assets/images/icon/ic_alarm.png) no-repeat left 16px center; background-size:36px 36px; min-height:60px; position:relative; }
.noti-item .ni-title { font-size:14px; font-weight:600; line-height:1.3; }
.noti-item .ni-body { font-size:12px; color:#667085; margin-top:3px; line-height:1.5; }
.noti-item .ni-time { font-size:10px; color:#bbb; margin-top:4px; }
.noti-empty { padding:40px; text-align:center; color:#ccc; font-size:13px; }
.noti-badge-dot { display:none; position:absolute; top:2px; right:2px; width:8px; height:8px; border-radius:50%; background:#ff4444; }
.noti-badge-dot.show { display:block; }

/* ---- Common ---- */
.empty-state { text-align:center; padding:40px 0; color:#ccc; }
.section-title { font-size:13px; color:#888; margin-bottom:8px; font-weight:600; }
.toast { position:fixed; bottom:80px; left:50%; transform:translateX(-50%); background:#333; color:#fff; padding:10px 20px; border-radius:20px; font-size:13px; z-index:999; display:none; }
.toast.show { display:block; animation:fadeInOut 2s; }
@keyframes fadeInOut { 0%{opacity:0} 10%{opacity:1} 80%{opacity:1} 100%{opacity:0} }