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

body{
background:#000;
color:#fff;
font-family:monospace;
height:100vh;
display:flex;
flex-direction:column;
overflow:hidden;
}


/* 터미널 영역 */

#terminal-container{
flex:1;
overflow-y:auto;
padding:10px;
}

#terminal{
white-space:pre-wrap;
word-break:break-word;
font-size:14px;
line-height:1.1;
}


/* command 입력 */

#command-bar{
height:42px;
border-top:1px solid #333;
background:#000;
}

#command{
width:100%;
height:100%;
border:none;
outline:none;
background:#000;
color:#fff;
font-size:16px;
padding-left:10px;
}


/* UI 토글 */

#ui-toggle{
position:fixed;
top:10px;
right:10px;
z-index:50;
}

#ui-toggle button{
margin-left:5px;
background:#222;
color:#fff;
border:1px solid #555;
padding:5px 8px;
cursor:pointer;
}


/* DPAD */

#dpad{
position:fixed;
right:10px;
bottom:75px;
background:rgba(0,0,0,0.35);
padding:6px;
border-radius:6px;
z-index:40;
}

.dpad-row{
display:flex;
}

#dpad button{

width:42px;
height:42px;

margin:2px;

background:rgba(30,30,30,0.5);
color:rgba(255,255,255,0.7);

border:1px solid rgba(100,100,100,0.4);

font-size:18px;
cursor:pointer;

}

#dpad button:active{
background:rgba(80,80,80,0.6);
color:#fff;
}


/* 매크로 패널 */

#macro-panel{

position:fixed;

right:10px;
top:50px;

width:220px;
height:240px;

background:rgba(0,0,0,0.85);

border:1px solid #333;

display:flex;
flex-direction:column;

z-index:45;

}


/* 매크로 버튼 리스트 */

#macro-list{

flex:1;

display:grid;

grid-template-columns:repeat(3,1fr);
gap:4px;

padding:6px;

overflow:hidden;

}

.macro-btn{

background:#222;
color:#fff;

border:1px solid #444;

font-size:12px;

padding:6px;

cursor:pointer;

}

.macro-btn:active{
background:#555;
}


/* 매크로 스크롤 */

.macro-nav{
width:30px;
height:30px;
background:#222;
color:#fff;
border:1px solid #444;
cursor:pointer;
}

#macro-nav button{

width:40px;
height:28px;

background:#111;
color:#fff;

border:1px solid #444;

cursor:pointer;

}


#macro-bar{
display:flex;
align-items:center;
height:40px;
background:#111;
border-top:1px solid #333;
border-bottom:1px solid #333;
padding:0 4px;
}

#macro-list{
flex:1;
display:flex;
overflow:hidden;
}

.macro-btn{
flex:0 0 auto;
margin:2px;
padding:5px 10px;
background:#222;
color:#fff;
border:1px solid #444;
font-size:12px;
cursor:pointer;
}

.macro-btn:active{
background:#555;
}

/* 트리거 패널 */

#trigger-panel{
position:fixed;
left:10px;
top:50px;
width:300px;
background:rgba(0,0,0,0.92);
border:1px solid #444;
border-radius:4px;
display:flex;
flex-direction:column;
z-index:45;
}

#trigger-header{
display:flex;
justify-content:space-between;
align-items:center;
padding:6px 10px;
border-bottom:1px solid #333;
font-size:13px;
color:#aaa;
}

#trigger-header > div{
display:flex;
align-items:center;
gap:4px;
}

#trigger-page-info{
font-size:11px;
color:#666;
margin-right:4px;
}

.trigger-nav-btn{
background:#333;
color:#fff;
border:1px solid #555;
width:26px;
height:26px;
font-size:14px;
cursor:pointer;
}

#trigger-add{
color:#0f0;
}

#trigger-list{
padding:4px;
}

.trigger-row{
display:flex;
align-items:center;
gap:3px;
padding:3px 4px;
border-bottom:1px solid #222;
}

.trigger-toggle{
width:32px;
height:22px;
font-size:10px;
border:1px solid #555;
background:#333;
color:#888;
cursor:pointer;
flex-shrink:0;
}

.trigger-toggle.on{
background:#141;
color:#0f0;
border-color:#0a0;
}

.trigger-pattern{
flex:1;
font-size:12px;
color:#ff0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
min-width:0;
}

.trigger-cmd{
flex:1;
font-size:12px;
color:#0ff;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
min-width:0;
}

.trigger-btn{
width:22px;
height:22px;
font-size:11px;
border:1px solid #555;
background:#222;
color:#aaa;
cursor:pointer;
flex-shrink:0;
padding:0;
}

.trigger-btn.del{
color:#f66;
}

.trigger-btn:disabled{
opacity:0.3;
cursor:default;
}


/* 타이머 패널 */

#timer-panel{
position:fixed;
left:10px;
top:50px;
width:300px;
background:rgba(0,0,0,0.92);
border:1px solid #444;
border-radius:4px;
display:flex;
flex-direction:column;
z-index:45;
}

#timer-header{
display:flex;
justify-content:space-between;
align-items:center;
padding:6px 10px;
border-bottom:1px solid #333;
font-size:13px;
color:#aaa;
}

#timer-list{
padding:4px;
}

.timer-row{
display:flex;
align-items:center;
gap:4px;
padding:4px;
border-bottom:1px solid #222;
}

.timer-toggle{
width:36px;
height:24px;
font-size:10px;
border:1px solid #555;
background:#333;
color:#888;
cursor:pointer;
flex-shrink:0;
}

.timer-toggle.on{
background:#141;
color:#0f0;
border-color:#0a0;
}

.timer-interval{
width:40px;
font-size:12px;
color:#f90;
text-align:center;
flex-shrink:0;
}

.timer-cmd{
flex:1;
font-size:12px;
color:#0ff;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
min-width:0;
}

.timer-countdown{
width:32px;
font-size:11px;
color:#666;
text-align:right;
flex-shrink:0;
}


/* 공용 편집 모달 */

#edit-overlay{
position:fixed;
top:0;left:0;right:0;bottom:0;
background:rgba(0,0,0,0.7);
z-index:100;
display:flex;
align-items:center;
justify-content:center;
}

#edit-modal{
background:#1a1a1a;
border:1px solid #555;
border-radius:6px;
width:320px;
max-width:90vw;
}

#edit-modal-title{
padding:10px 14px;
font-size:14px;
color:#fff;
border-bottom:1px solid #333;
}

#edit-modal-body{
padding:12px 14px;
display:flex;
flex-direction:column;
gap:10px;
}

#edit-modal-body label{
font-size:12px;
color:#aaa;
}

#edit-modal-body input{
width:100%;
padding:8px;
background:#000;
color:#fff;
border:1px solid #444;
font-size:14px;
font-family:monospace;
outline:none;
}

#edit-modal-body input:focus{
border-color:#0af;
}

#edit-modal-footer{
display:flex;
justify-content:flex-end;
gap:8px;
padding:10px 14px;
border-top:1px solid #333;
}

#edit-modal-footer button{
padding:6px 16px;
border:1px solid #555;
background:#333;
color:#fff;
cursor:pointer;
font-size:13px;
}

#edit-modal-ok{
background:#264;
border-color:#0a0;
}

#edit-modal-ok:hover{
background:#386;
}


/* 모바일 대응 */

@media (max-width:700px){

/* 85컬럼 보장: (100vw - 패딩20px) / (85 * 0.6 글자폭) */
#terminal{
font-size:clamp(10px, calc((100vw - 20px) / 51), 14px);
}

/* 커맨드 입력 - 모바일에서 더 크게 */
#command-bar{
height:48px;
}

#command{
font-size:18px;
}

/* 매크로 바 - 모바일에서 더 크게 */
#macro-bar{
height:46px;
}

.macro-btn{
padding:8px 12px;
font-size:13px;
}

.macro-nav{
width:34px;
height:34px;
}

/* 매크로 패널 */
#macro-panel{
width:160px;
height:200px;
}

/* DPAD - 모바일에서 터치하기 좋은 크기 유지 */
#dpad{
bottom:100px;
padding:8px;
}

#dpad button{
width:48px;
height:48px;
font-size:20px;
margin:3px;
}

}


/* 모바일 가로모드 */

@media (orientation:landscape) and (max-width:900px){

#macro-panel{
right:10px;
top:10px;
height:160px;
}

#dpad{
bottom:50px;
}

}