:root {
    --bg-color: #F0EEE9; 
    --panel-bg: #FFFFFF;
    --accent: #4A5D6B; 
    --accent-hover: #36454F;
    --text-main: #2C363F;
    --text-muted: #6B7280;
    --border: #D1D5DB;
    --antecedent-color: #F9FAFB;
    --consequent-color: #F3F4F6;
    --active-shadow: rgba(74, 93, 107, 0.3);
}

body { 
    font-family: 'Noto Sans KR', sans-serif; 
    padding: 30px; 
    background-color: var(--bg-color); 
    color: var(--text-main); 
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

.container { 
    background: var(--panel-bg); 
    padding: 35px; 
    border-radius: 12px; 
    max-width: 1100px; 
    margin: 0 auto;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05); 
}

.header { 
    margin-bottom: 30px; 
    border-bottom: 2px solid var(--border); 
    padding-bottom: 20px; 
}

.header h2 { 
    margin: 0 0 10px 0; 
    font-weight: 700; 
    font-size: 24px;
    letter-spacing: -0.5px;
}

.header p {
    color: var(--text-muted); 
    font-size: 14px; 
    margin: 0;
    font-weight: 300;
}

.piano-wrapper {
    margin-bottom: 30px;
    background: #F8F9FA;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.piano-header {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
}

.piano-header span {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 400;
}

/* 드래그 스크롤 뷰포트 */
.piano-viewport {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    cursor: grab;
    border-radius: 4px;
    border: 1px solid #999;
    /* 커스텀 스크롤바 */
    scrollbar-width: thin;
    scrollbar-color: var(--accent) var(--border);
}

.piano-viewport::-webkit-scrollbar {
    height: 8px;
}
.piano-viewport::-webkit-scrollbar-track {
    background: #e1e1e1; 
}
.piano-viewport::-webkit-scrollbar-thumb {
    background: var(--accent); 
    border-radius: 4px;
}

.piano-viewport.dragging {
    cursor: grabbing;
}

.piano {
    position: relative;
    display: flex;
    height: 120px;
    background: #111;
    box-sizing: border-box;
    user-select: none;
    /* Javascript로 min-width가 동적 계산됨 */
}

.white-key {
    flex: 1;
    background: #fff;
    border-right: 1px solid #ccc;
    box-shadow: inset 0 -4px 5px rgba(0,0,0,0.1);
    cursor: pointer;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 8px;
    font-size: 10px;
    color: #777;
    font-weight: 500;
    transition: background 0.05s;
    box-sizing: border-box;
    font-family: 'Consolas', monospace;
}

.white-key:last-child { border-right: none; }
.white-key:active, .white-key.active-click { background: #e8e8e8; box-shadow: inset 0 -1px 2px rgba(0,0,0,0.1); }
.white-key.active-play { background: #D1E8FF; color: #005CC5; }

.black-key {
    position: absolute;
    height: 60%;
    background: linear-gradient(to bottom, #333, #000);
    z-index: 2;
    border-radius: 0 0 3px 3px;
    cursor: pointer;
    box-shadow: 0 3px 5px rgba(0,0,0,0.4), inset 0 -2px 3px rgba(255,255,255,0.2);
    transition: height 0.05s, box-shadow 0.05s, background 0.05s;
    box-sizing: border-box;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 6px;
    font-size: 9px;
    color: #aaa;
    font-family: 'Consolas', monospace;
}

.black-key:active, .black-key.active-click {
    height: 59%;
    box-shadow: 0 1px 2px rgba(0,0,0,0.5), inset 0 -1px 1px rgba(255,255,255,0.1);
}
.black-key.active-play { background: linear-gradient(to bottom, #4A5D6B, #2C363F); }

.global-controls { 
    display: flex; 
    align-items: center; 
    gap: 20px; 
    margin-bottom: 30px; 
    background: #F8F9FA;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--border);
    flex-wrap: wrap;
}

.control-group { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    font-size: 14px;
    font-weight: 500;
}

input[type="number"], select { 
    background: #FFFFFF; 
    color: var(--text-main); 
    border: 1px solid var(--border); 
    padding: 8px 12px; 
    border-radius: 6px; 
    font-family: inherit;
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
}

input[type="number"]:focus, select:focus {
    border-color: var(--accent);
}

.btn { 
    padding: 10px 24px; 
    color: white; 
    border: none; 
    border-radius: 6px; 
    cursor: pointer; 
    font-weight: 500; 
    font-family: inherit;
    transition: all 0.2s;
    font-size: 14px;
}

.btn-primary { background: var(--accent); }
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); }
.btn-danger { background: #E05252; }
.btn-danger:hover { background: #C53030; }
.btn-preset { background: #E5E7EB; color: var(--text-main); border: 1px solid var(--border); }
.btn-preset:hover { background: #D1D5DB; }

.presets-wrapper {
    display: flex;
    gap: 10px;
    margin-left: auto;
    border-left: 1px solid var(--border);
    padding-left: 20px;
}

.phrase-section {
    margin-bottom: 25px;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.phrase-section.antecedent { background: var(--antecedent-color); }
.phrase-section.consequent { background: var(--consequent-color); }

.phrase-header {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: 0.5px;
}

.steps-grid { 
    display: grid; 
    grid-template-columns: repeat(8, 1fr); 
    gap: 12px; 
}

.step { 
    background: #FFFFFF; 
    padding: 15px 12px; 
    border-radius: 8px; 
    display: flex; 
    flex-direction: column; 
    gap: 10px;
    border: 1px solid var(--border);
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

.step.active {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--active-shadow);
    transform: translateY(-3px);
}

.step-label { 
    font-size: 12px; 
    color: var(--text-muted); 
    text-align: center;
    font-weight: 500; 
}

.step select { width: 100%; font-size: 12px; padding: 6px; }

.data-io-container {
    margin-top: 35px; 
    padding: 20px; 
    background: #F8F9FA; 
    border: 1px solid var(--border); 
    border-radius: 8px; 
}

.data-io-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.data-io-header h3 { margin: 0; font-size: 15px; color: var(--text-main); }

textarea#json-input {
    width: 100%;
    height: 250px;
    background: #FFFFFF;
    color: #333;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 15px;
    font-family: 'Consolas', monospace;
    font-size: 13px;
    resize: vertical;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s;
}

textarea#json-input:focus { border-color: var(--accent); }