/* ===============================
   RESET
=============================== */

*{
box-sizing:border-box;
}

body{
margin:0;
font-family:'Pretendard',sans-serif;
background:linear-gradient(180deg,#f8fafc,#eef2f7);
color:#111827;
}

/* ===============================
   HEADER
=============================== */

.user-header{
background:#1e3a8a;
color:#fff;
position:sticky;
top:0;
z-index:1000;
}

.header-inner{
max-width:1200px;
margin:0 auto;
padding:12px 16px;
display:flex;
align-items:center;
justify-content:space-between;
}

.logo{
color:#fff;
text-decoration:none;
font-weight:700;
font-size:18px;
}

.nav-menu{
display:flex;
gap:12px;
align-items:center;
}

.nav-menu a{
color:#fff;
text-decoration:none;
padding:8px 12px;
border-radius:6px;
font-size:15px;
transition:.2s;
}

.nav-menu a.active{
background:rgba(255,255,255,0.2);
}

.nav-menu a:hover{
background:rgba(255,255,255,0.15);
}

.logout{
background:#dc2626;
}

.logout:hover{
background:#b91c1c;
}

/* ===============================
   CONTAINER
=============================== */

.container{
max-width:1300px;
margin:30px auto;
padding:28px;
background:#fff;
border-radius:16px;
box-shadow:0 8px 28px rgba(0,0,0,0.08);
}

.page-title{
font-size:26px;
font-weight:700;
margin-bottom:30px;
display:flex;
align-items:center;
gap:8px;
}

.page-title:before{
content:"🎫";
}

/* ===============================
   LAYOUT
=============================== */

.layout{
display:grid;
grid-template-columns:320px 1fr;
gap:40px;
align-items:start;
}

/* ===============================
   SIDE PANEL
=============================== */

.side-panel{
background:#fff;
border:1px solid #e5e7eb;
border-radius:14px;
padding:22px;
box-shadow:0 4px 14px rgba(0,0,0,0.05);
}

.select-row{
margin-bottom:20px;
text-align:center;
}

.select-row select{
width:100%;
padding:10px;
border:1px solid #d1d5db;
border-radius:8px;
font-size:14px;
background:#f9fafb;
}

.info-line{
margin-top:12px;
font-size:14px;
color:#374151;
background:#f9fafb;
padding:12px;
border-radius:8px;
border:1px solid #e5e7eb;
}

/* ===============================
   COUNTDOWN
=============================== */

.countdown-timer{
margin-top:12px;
text-align:center;
font-size:15px;
font-weight:600;
color:#2563eb;
background:#eef2ff;
padding:8px;
border-radius:8px;
border:1px solid #c7d2fe;
}

/* ===============================
   SEAT MAP
=============================== */

.stage-wrap{
position:relative;
width:100%;
max-width:1100px;
margin:auto;
background:#fff;
border:1px solid #e5e7eb;
border-radius:14px;
overflow:hidden;
padding-bottom:60px;
box-shadow:0 6px 18px rgba(0,0,0,0.08);
}

#seatImg{
display:block;
width:100%;
height:auto;
}

#seatDots{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
}

/* ===============================
   SEAT DOT
=============================== */

.seat-dot{
position:absolute;
transform:translate(-50%,-50%);
padding:4px 8px;
font-size:12px;
font-weight:600;
border-radius:12px;
background:linear-gradient(180deg,#7dd3fc,#38bdf8);
border:1px solid #7dd3fc;
color:#fff;
cursor:pointer;
white-space:nowrap;
transition:0.2s;
box-shadow:0 2px 5px rgba(0,0,0,0.15);
}

.seat-dot:hover{
transform:translate(-50%,-50%) scale(1.15);
}

.seat-dot.mine{
background:linear-gradient(180deg,#fbbf24,#f59e0b);
border:2px solid #d97706;
}

.seat-dot.disabled{
background:#9ca3af;
cursor:not-allowed;
}

.seat-dot.locked{
background:#d1d5db;
cursor:not-allowed;
}

/* ===============================
   MY SEAT LABEL
=============================== */

.my-seat-label{
position:absolute;
bottom:15px;
left:50%;
transform:translateX(-50%);
background:#2563eb;
color:#fff;
padding:6px 16px;
border-radius:10px;
font-size:16px;
font-weight:700;
box-shadow:0 4px 10px rgba(0,0,0,0.15);
}

/* ===============================
   LEGEND
=============================== */

.legend{
margin-top:20px;
display:grid;
grid-template-columns:repeat(2,1fr);
gap:8px 14px;
}

.legend-item{
display:flex;
align-items:center;
gap:8px;
font-size:14px;
}

.legend-dot{
width:14px;
height:14px;
border-radius:4px;
}

/* 예약 가능 */
.legend-dot.available{
background:linear-gradient(180deg,#7dd3fc,#38bdf8);
border:1px solid #0ea5e9;
}

/* 내 좌석 */
.legend-dot.mine{
background:linear-gradient(180deg,#fbbf24,#f59e0b);
border:1px solid #d97706;
}

/* 예약 불가 */
.legend-dot.disabled{
background:#9ca3af;
}

/* 예약 전 */
.legend-dot.locked{
background:#d1d5db;
}

/* ===============================
   MODAL
=============================== */

.modal-overlay{
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
display:none;
align-items:center;
justify-content:center;
z-index:2000;
}

.modal-box{
background:#fff;
padding:30px;
border-radius:14px;
width:320px;
text-align:center;
box-shadow:0 10px 40px rgba(0,0,0,0.25);
}

.modal-box button{
margin-top:20px;
padding:10px 18px;
border:none;
border-radius:8px;
background:#2563eb;
color:#fff;
cursor:pointer;
}

/* ===============================
   MOBILE
=============================== */

@media (max-width:900px){

.layout{
display:flex;
flex-direction:column;
gap:20px;
}

.side-panel{
width:100%;
}

.seat-dot{
font-size:8px;
padding:2px 4px;
}

.my-seat-label{
font-size:14px;
}

.container{
margin:0;
border-radius:0;
box-shadow:none;
}

}

@media (max-width:768px){

.container{
padding:16px;
}

.info-line{
font-size:13px;
line-height:1.6;
}

}
@media (max-width:900px){

/* 좌석맵 살짝 확대 */
.stage-wrap{
overflow-x:auto;
}

#seatImg{
width:120%;
max-width:none;
}

/* 좌석 크기 축소 */
.seat-dot{
padding:1px 3px;
font-size:7px;
border-radius:10px;
}

/* hover 제거 (모바일에서는 의미 없음) */
.seat-dot:hover{
transform:translate(-50%,-50%);
}

}

/* ===============================
   GUIDE BOX
=============================== */

.guide-box{
background:#eef2ff;
border:1px solid #c7d2fe;
color:#1e3a8a;
padding:14px 16px;
border-radius:10px;
margin-bottom:20px;
font-size:15px;
box-shadow:0 2px 6px rgba(0,0,0,0.05);
}

/* ===============================
   EMPTY STATE
=============================== */

.empty-box{
background:#f9fafb;
border:1px dashed #d1d5db;
border-radius:12px;
padding:40px;
text-align:center;
font-size:16px;
color:#6b7280;
}

/* ===============================
   RESERVATION LIST
=============================== */

.reservation-list{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
gap:20px;
}

/* ===============================
   RESERVATION CARD
=============================== */

.reservation-card{
background:#ffffff;
border:1px solid #e5e7eb;
border-radius:14px;
padding:20px;
position:relative;
box-shadow:0 6px 16px rgba(0,0,0,0.06);
transition:all .2s;
}

.reservation-card:hover{
transform:translateY(-3px);
box-shadow:0 10px 24px rgba(0,0,0,0.1);
}

/* 예약 상태 강조 */

.reservation-card.reserved{
border-left:6px solid #2563eb;
}

.reservation-card.cancelled{
background:#f9fafb;
opacity:0.7;
border-left:6px solid #9ca3af;
}

/* ===============================
   CARD TOP
=============================== */

.reservation-card .top{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:12px;
}

.reservation-card h3{
font-size:18px;
margin:0;
font-weight:700;
color:#111827;
}

/* 취소된 텍스트 */

.cancel-line{
text-decoration:line-through;
color:#9ca3af;
}

/* ===============================
   INFO
=============================== */

.reservation-card .info p{
margin:4px 0;
font-size:14px;
color:#374151;
}

/* ===============================
   BADGE
=============================== */

.badge{
font-size:12px;
font-weight:700;
padding:4px 10px;
border-radius:20px;

white-space:nowrap;
display:inline-block;
}

.badge.reserved{
background:#dbeafe;
color:#1e40af;
}

.badge.cancelled{
background:#fee2e2;
color:#b91c1c;
}

@media (max-width:768px){

.badge{
white-space:nowrap;
flex-shrink:0;
font-size:11px;
padding:3px 8px;
}

}
/* ===============================
   CANCEL BUTTON
=============================== */

.cancel-btn{
position:absolute;
right:18px;
bottom:18px;
background:#2563eb;
color:#fff;
padding:8px 14px;
border-radius:8px;
font-size:13px;
text-decoration:none;
transition:.2s;

white-space:nowrap;
}

.cancel-btn:hover{
background:#1d4ed8;
}

/* ===============================
   MOBILE
=============================== */

@media (max-width:768px){

.reservation-list{
grid-template-columns:1fr;
}

.reservation-card{
padding:16px;
}

.cancel-btn{
position:static;
display:inline-block;
margin-top:10px;
}

}
/* ===============================
   ACCOUNT ACTIONS
=============================== */

.account-actions{
margin-bottom:20px;
display:flex;
justify-content:flex-end;
}

/* 비밀번호 버튼 */

.password-btn{
background:#111827;
color:#fff;
padding:10px 16px;
border-radius:8px;
font-size:14px;
text-decoration:none;
font-weight:600;
transition:.2s;
}

.password-btn:hover{
background:#374151;
}

/* ===============================
   PASSWORD FORM
=============================== */

.password-form{
max-width:420px;
display:flex;
flex-direction:column;
gap:10px;
}

.password-form input{
padding:10px;
border-radius:8px;
border:1px solid #d1d5db;
}

.password-form button{
margin-top:10px;
background:#2563eb;
color:#fff;
border:none;
padding:12px;
border-radius:8px;
cursor:pointer;
font-weight:600;
}
.seat-guide{

margin-bottom:10px;

background:#fff7ed;

border:1px solid #fed7aa;

border-radius:10px;

padding:10px 12px;

font-size:13px;

line-height:1.5;

color:#92400e;

}


/* 모바일 */

@media (max-width:768px){

.seat-guide{

font-size:12px;

padding:8px 10px;

line-height:1.4;

}

}


/* 작은 모바일 */

@media (max-width:480px){

.seat-guide{

font-size:11px;

padding:7px 9px;

border-radius:8px;

}

}