*{margin:0;padding:0;box-sizing:border-box}

:root{
--bg-primary:#fff;
--bg-secondary:#f8fafc;
--text-primary:#000;
--text-secondary:#64748b;
--border-color:#e2e8f0;
--shadow:0 1px 3px rgba(0,0,0,.1);
--hover-bg:#f1f5f9;
--header-gradient:linear-gradient(135deg,#888,#555);
--saturday-color:#93c5fd;
--sunday-color:#fecaca;
}

[data-theme="dark"]{
--bg-primary:#0f172a;
--bg-secondary:#000;
--text-primary:#f1f5f9;
--text-secondary:#94a3b8;
--border-color:#334155;
--shadow:0 1px 3px rgba(0,0,0,.3);
--hover-bg:#334155;
--header-gradient:linear-gradient(135deg,#334155,#475569);
--saturday-color:#3b82f6;
--sunday-color:#ef4444;
}

body{
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
background:var(--bg-primary);
color:var(--text-primary);
min-height:100vh;
}

.container{
max-width:1200px;
margin:0 auto;
padding:0px;
}

.header{
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:15px;
}

.title{
font-size:1rem;
font-weight:700;
background:linear-gradient(135deg,#ff6b9d,#c44569);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
}

[data-theme="dark"] .title{
background:linear-gradient(135deg,#fbbf24,#f59e0b);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
}

.title a{
background:linear-gradient(135deg,#11335f,#fff);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
text-decoration:none;
}

[data-theme="dark"] .title a{
background:linear-gradient(135deg,#11335f,#fff);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
text-decoration:none;
}

.controls{
display:flex;
gap:10px;
align-items:center;
flex-wrap:wrap;
}

.atrp-btn{
padding:0px 15px;
border:none;
border-radius:8px;
background:var(--bg-secondary);
color:var(--text-primary);
cursor:pointer;
font-size:14px;
border:1px solid var(--border-color);
}

.atrp-btn:hover{
background:var(--hover-bg);
color:var(--text-primary);
}

[data-theme="dark"] .atrp-btn:hover{
background:#475569;
color:#f1f5f9;
}

[data-theme="dark"] .atrp-btn{
background:var(--bg-secondary);
color:#f1f5f9;
border:1px solid var(--border-color);
}

.theme-toggle{
width:50px;
height:26px;
background:var(--border-color);
border-radius:13px;
position:relative;
cursor:pointer;
}

.theme-toggle::after{
content:'';
position:absolute;
width:20px;
height:20px;
background:#fff;
border-radius:50%;
top:3px;
left:3px;
box-shadow:0 2px 4px rgba(0,0,0,.2);
transition:transform 0.2s;
}

[data-theme="dark"] .theme-toggle{
background:#11335f;
}

[data-theme="dark"] .theme-toggle::after{
transform:translateX(24px);
}

.calendar-nav{
display:flex;
justify-content:center;
align-items:center;
margin-bottom:10px;
background:var(--bg-secondary);
padding:15px 20px;
border-radius:12px;
box-shadow:var(--shadow);
}

.current-month{
font-size:2.0rem;
font-weight:600;
margin:0 30px;
}

.nav-btns{
display:flex;
gap:10px;
}

.calendar{
background:var(--bg-secondary);
border-radius:12px;
box-shadow:var(--shadow);
overflow:hidden;
}

.calendar-header{
display:grid;
grid-template-columns:repeat(7,1fr);
background:var(--header-gradient);
}

.calendar-header div{
padding:5px 5px;
text-align:center;
font-weight:600;
color:#fff;
font-size:1.5rem;
}

.calendar-header div:first-child{color:var(--sunday-color);}
.calendar-header div:last-child{color:var(--saturday-color);}

[data-theme="dark"] .calendar-header div:first-child{color:#fecaca;}
[data-theme="dark"] .calendar-header div:last-child{color:#93c5fd;}

.calendar-body{
display:grid;
grid-template-columns:repeat(7,1fr);
}

.calendar-day{
min-height:150px;
padding:5px;
border:1px solid var(--border-color);
background:var(--bg-primary);
position:relative;
overflow-y:auto;
}

.calendar-day.today .day-number{
background:#000 !important;
color:#fff !important;
border-radius:50%;
width:20px;
height:20px;
display:flex;
align-items:center;
justify-content:center;
font-weight:bold;
position:relative;
}

[data-theme="dark"] .calendar-day.today .day-number{
background:#fff !important;
color:#000 !important;
}

.calendar-day.other-month{opacity:.3;}

.day-number{
font-weight:600;
margin-bottom:5px;
}

.event{
font-size:1.2rem;
padding:2px 6px;
border-radius:4px;
margin-bottom:2px;
line-height:1.9;
cursor:pointer;
display:block;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
max-width:100%;
}

/* RELEASE (color-type01) - 노란색 계열 */
.event-release{
background:#FFF3B0;
color:#7a6000;
}
[data-theme="dark"] .event-release{
background:#b8860b;
color:#fff8dc;
}

/* PERFORM (color-type02) - 초록색 계열 */
.event-perform{
background:#D4F0CB;
color:#000;
}
[data-theme="dark"] .event-perform{
background:#c2410c;
color:#fdba74;
}

/* FAN EVENT (color-type03) - 계열 */
.event-fan-event{
background:#B2EAFF;
color:#333;
}
[data-theme="dark"] .event-fan-event{
background:#93c5fd;
color:#1e3a5f;
}

/* ETC (color-type04) - 보라색 계열 */
.event-etc{
background:#DBDDFF;
color:#000;
}
[data-theme="dark"] .event-etc{
background:#4D54FF;
color:#fff;
}

/* BROADCAST (color-type05) - 빨간색 계열 */
.event-broadcast{
background:#FFE0DF;
color:#000;
}
[data-theme="dark"] .event-broadcast{
background:#ffe0df;
color:#000;
}

/* ALBUM - 분홍색 계열 */
.event-album{
background:#FFD6F6;
color:#8e24aa;
}
[data-theme="dark"] .event-album{
background:#6a1b9a;
color:#f8bbd9;
}

.modal{
display:none;
position:fixed;
top:0;left:0;
width:100%;height:100%;
background:rgba(0,0,0,.5);
z-index:1000;
backdrop-filter:blur(5px);
overflow:auto;
}

.modal-content{
position:fixed;
top:50%;left:50%;
transform:translate(-50%,-50%);
background:var(--bg-primary);
border-radius:12px;
box-shadow:0 20px 40px rgba(0,0,0,.15);
max-width:600px;
width:90%;
max-height:80vh;
overflow:hidden;
z-index:1001;
}

.modal-header{
display:flex;
justify-content:space-between;
align-items:center;
padding:10px 24px;
border-bottom:1px solid var(--border-color);
background:var(--bg-secondary);
}

.modal-title{
font-size:1.2rem;
font-weight:600;
color:var(--text-primary);
}

.close-btn{
background:none;
border:none;
font-size:1.5rem;
cursor:pointer;
color:var(--text-secondary);
padding:5px;
border-radius:50%;
}

.modal-body{
padding:0;
overflow-y:auto;
max-height:60vh;
}

.event-details{
padding:24px;
background:var(--bg-primary);
}

.event-details-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:12px;
gap:16px;
}

.event-title{
font-size:1.9rem;
font-weight:700;
color:var(--text-primary);
line-height:1.4;
flex:1;
}

.event-type-badge{
padding:6px 12px;
border-radius:20px;
font-size:0.8rem;
font-weight:600;
text-transform:uppercase;
letter-spacing:0.5px;
white-space:nowrap;
color:#fff;
}

.event-type-badge.RELEASE{background:#d4a017;color:#fff;}
.event-type-badge.PERFORM{background:#ff7043;color:#fff;}
.event-type-badge.FAN-EVENT{background:#42a5f5;color:#fff;}
.event-type-badge.ETC{background:#4D54FF;color:#fff;}
.event-type-badge.BROADCAST{background:#FF635D;color:#fff;}
.event-type-badge.ALBUM{background:#f8bbd9;color:#8e24aa;}

.event-description{
color:var(--text-primary);
line-height:1.6;
font-size:1.6rem;
margin-top:20px;
}

.event-description p{margin-bottom:12px;}
.event-description p:last-child{margin-bottom:0;}

.event-link{
color:#4285f4;
text-decoration:none;
word-break:break-all;
display:inline-block;
margin-top:16px;
}

.event-link:hover{
color:#1a73e8;
text-decoration:underline;
}

.event-date-info{
background:var(--bg-secondary);
padding:12px;
border-radius:8px;
margin-bottom:16px;
border-left:4px solid #667eea;
}

.event-date-info .date-value{
font-size:1.5rem;
font-weight:600;
color:var(--text-primary);
}

.loading{
text-align:center;
padding:40px 20px;
color:var(--text-secondary);
font-size:1.2rem;
}

.loading::after{
content:'';
display:inline-block;
width:20px;height:20px;
border:2px solid var(--border-color);
border-radius:50%;
border-top-color:#667eea;
animation:spin 1s ease-in-out infinite;
margin-left:10px;
}

@keyframes spin{to{transform:rotate(360deg)}}

.nav-title-bar{
display:flex;
justify-content:space-between;
align-items:center;
font-family:'맑은 고딕',sans-serif;
font-size:15px;
color:var(--text-primary);
}

.nav-title{
font-weight:bold;
border-bottom:2px solid var(--text-primary);
padding-bottom:3px;
color:var(--text-primary);
}

.nav-path{font-size:13px;color:var(--text-secondary);}
.nav-path a{color:var(--text-secondary) !important;text-decoration:none;}
.nav-path a:hover{color:var(--text-primary) !important;}

.nav-underline{
margin-top:-2px;
border:none;
border-bottom:1px solid var(--border-color);
height:1px;
background-color:var(--border-color);
margin:0;
}

@media (max-width:768px){
.container{padding:10px;}
.title{font-size:1.5rem;}

.calendar-day{
min-height:100px;
padding:5px;
overflow-y:auto;
max-height:100px;
}

.calendar-header div{
padding:10px 3px;
font-size:.8rem;
}

.event{
font-size:.7rem;
padding:1px 4px;
margin-bottom:1px;
white-space:normal;
height:auto;
line-height:1.1;
}

.day-number{font-size:.9rem;}

.modal-content{
position:fixed;
top:50%;left:50%;
transform:translate(-50%,-50%);
margin:0;width:95%;
max-width:95%;
max-height:85vh;
}

.event-details{padding:20px;}

.event-details-header{
flex-direction:row;
align-items:flex-start;
justify-content:space-between;
gap:12px;
}

.event-title{font-size:1.6rem;}

.calendar-day::-webkit-scrollbar{width:2px;}
.calendar-day::-webkit-scrollbar-track{background:transparent;}
.calendar-day::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:1px;}

.calendar-day.today .day-number{
width:18px !important;
height:18px !important;
}
}

@media (max-width:480px){
.calendar-day{
min-height:80px;
padding:3px;
overflow-y:auto;
max-height:80px;
}

.event{
font-size:.65rem;
padding:1px 3px;
margin-bottom:1px;
white-space:normal;
height:auto;
line-height:1.0;
}

.day-number{font-size:.8rem;}

.modal-content{
position:fixed;
top:50%;left:50%;
transform:translate(-50%,-50%);
margin:0;width:98%;
max-width:98%;
max-height:90vh;
}

.event-details{padding:16px;}
}

.day-number{
color:var(--text-primary);
}

.current-month{
color:var(--text-primary);
}

[data-theme="dark"] .modal-content{
background:var(--bg-primary);
}

[data-theme="dark"] .modal-header{
background:var(--bg-secondary);
border-bottom-color:var(--border-color);
}

[data-theme="dark"] .modal-title{
color:var(--text-primary);
}

[data-theme="dark"] .event-details{
background:var(--bg-primary);
}

[data-theme="dark"] .event-title{
color:var(--text-primary);
}

[data-theme="dark"] .event-date-info{
background:var(--bg-secondary);
}

[data-theme="dark"] .event-date-info .date-value{
color:var(--text-primary);
}

[data-theme="dark"] .event-description{
color:var(--text-primary);
}

[data-theme="dark"] .close-btn{
color:var(--text-secondary);
}