/**
 * 사운드 편집기 - 화면 스타일
 *
 * 예전 오디오 기기의 앞판을 본떴다. 파형은 안쪽으로 파인 화면에 들어가 있고
 * 손잡이와 버튼은 그 둘레에 놓인다. 다만 색은 눈이 편한 파스텔로 낮춰 잡았다.
 *
 * 파형 캔버스가 쓰는 색은 :root 변수로 둔다. waveform.js가 이 값을 읽어 그린다.
 */

:root {
    /* 기기 앞판 */
    --chassis: #dfe2f0;
    --chassis-hi: #f3f4fb;
    --chassis-lo: #c4c9e0;
    --chassis-edge: #b3b9d4;
    --engrave: #5f6685;
    --sound-ink: #3f4560;

    /* 파형 화면 (waveform.js에서 읽는다) */
    --screen: #2f3552;
    --screen-deep: #262b45;
    --grid: #434b70;
    --trace: #a8e6cf;
    --trace-dim: #6f9d8b;
    --sel: #ffd6a5;
    --sel-fill: rgba(255, 214, 165, 0.18);
    --hot: #f0a68c;
    --cursor: rgba(168, 230, 207, 0.75);
    --ov-mask: rgba(38, 43, 69, 0.62);
    /* 지금 손대지 않는 채널을 덮는 색. 어느 채널에 작업이 미치는지 한눈에 갈리도록 짙게 잡았다. */
    --lane-mute: rgba(22, 26, 42, 0.88);

    /* 표시창 */
    --lcd: #dff0e4;
    --lcd-hi: #c9e5d3;
    --lcd-ink: #43604f;
    --lcd-edge: #9dbfa9;

    --sound-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    /* 레벨 미터 맨 위의 깨짐 표시등 높이와 아래 칸들과의 사이 (눈금 자리를 맞추는 데도 쓴다) */
    --clip-lamp: 7px;
    --clip-gap: 3px;

    /* 레벨 미터 불빛 — 실제 음향 믹서와 같은 연두·주황·빨강 차례.
       파형 색과 따로 두어야 파형을 바꿔도 미터가 함께 흔들리지 않는다. */
    --meter-on: #7ed957;
    --meter-warm: #f5a623;
    --meter-hot: #e05a3f;
    --meter-hold: #ffffff;
}

/* hidden 속성으로 숨기는 요소들이 있다. 아래에서 .control 같은 클래스가 display를 지정하는데,
   작성자 스타일은 브라우저 기본 [hidden] 규칙보다 우선하므로 여기서 다시 못 박아 둔다. */
[hidden] {
    display: none !important;
}

/* 지원하지 않는 브라우저 안내 */
.unsupported-notice {
    background: #ffe0e0;
    border: 1px solid #f5b5b5;
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 20px;
    color: #8d3f3f;
    font-size: 0.92rem;
    text-align: center;
}

.unsupported-notice strong {
    display: block;
    margin-bottom: 4px;
}

/* ------------------------------------------------------------------ 본체 */

.chassis {
    background: linear-gradient(180deg, var(--chassis-hi), var(--chassis) 18%, var(--chassis) 82%, var(--chassis-lo));
    border: 1px solid var(--chassis-edge);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 0 #fff inset, 0 -2px 0 rgba(0, 0, 0, 0.06) inset, 0 10px 40px rgba(63, 69, 96, 0.2);
}

/* 상단 조작줄 */
.plate {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 14px 18px;
    border-bottom: 1px solid var(--chassis-edge);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(0, 0, 0, 0.03));
}

.plate-spacer {
    flex: 1;
}

/* 파일 입력은 common.css의 .file-upload가 숨긴다 */

/* ------------------------------------------------------------------ 버튼 */

.btn-deck {
    font-family: inherit;
    color: var(--engrave);
    cursor: pointer;
    border: 1px solid var(--chassis-edge);
    border-radius: 8px;
    background: linear-gradient(180deg, #fbfbff, #d7dbee);
    padding: 9px 15px;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    font-weight: 700;
    box-shadow: 0 1px 0 #fff inset, 0 2px 4px rgba(63, 69, 96, 0.14);
    transition: all 0.15s ease;
}

.btn-deck:hover:not(:disabled) {
    background: linear-gradient(180deg, #ffffff, #e2e5f4);
    transform: translateY(-1px);
}

.btn-deck:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow: 0 2px 5px rgba(63, 69, 96, 0.25) inset;
}

.btn-deck:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}

.btn-deck-hot {
    color: #7a4030;
    border-color: #e9b7a5;
    background: linear-gradient(180deg, #ffd8c8, #f0a68c);
}

.btn-deck-hot:hover:not(:disabled) {
    background: linear-gradient(180deg, #ffe3d6, #f4b39c);
}

.btn-chip {
    font-family: inherit;
    color: var(--engrave);
    cursor: pointer;
    border: 1px solid var(--chassis-edge);
    border-radius: 6px;
    background: linear-gradient(180deg, #fafbff, #dcdfef);
    padding: 6px 11px;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    font-weight: 600;
    box-shadow: 0 1px 0 #fff inset, 0 1px 2px rgba(63, 69, 96, 0.12);
    transition: all 0.15s ease;
    white-space: nowrap;
}

.btn-chip:hover:not(:disabled) {
    background: linear-gradient(180deg, #ffffff, #e6e9f6);
}

.btn-chip:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow: 0 2px 4px rgba(63, 69, 96, 0.22) inset;
}

.btn-chip:disabled {
    opacity: 0.42;
    cursor: not-allowed;
    box-shadow: none;
}

.btn-block {
    width: 100%;
    margin-top: 4px;
}

.chip-count {
    opacity: 0.6;
    font-family: var(--sound-mono);
    font-size: 0.68rem;
}

.chip-count:not(:empty) {
    margin-left: 4px;
}

/* ------------------------------------------------------------------ 배치 */

/* 편집기는 파형의 가로 길이가 생명이다. 공통 스타일의 폭 제한을 풀어 창을 다 쓴다.
   (제목 아래에서 시작하므로 왼쪽 위 홈 단추·오른쪽 위 언어 단추와는 겹치지 않는다) */
.container {
    max-width: none;
}

.deck-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 288px;
}

/* 옆 패널을 접으면 파형이 가로를 다 가져간다 */
.deck-body.no-rack {
    grid-template-columns: minmax(0, 1fr);
}

.deck-body.no-rack .rack {
    display: none;
}

@media (max-width: 980px) {
    .deck-body {
        grid-template-columns: minmax(0, 1fr);
    }
}

.deck {
    padding: 16px 14px 18px;
    min-width: 0;
}

/* ------------------------------------------------------------------ 원본 정보 뱃지 */

/* 불러온 파일의 정보. 이름표 없이 값만 늘어놓는다 (무엇인지는 각 뱃지의 title에 있다) */
.badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin-bottom: 10px;
}

/* 파일 이름과 용량은 뱃지로 두르지 않고 그냥 적는다 */
.file-text {
    font-size: 0.72rem;
    color: var(--engrave);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-name {
    font-weight: 700;
    max-width: 52ch;
    margin-right: 3px;
}

.badge {
    font-family: var(--sound-mono);
    font-size: 0.68rem;
    line-height: 1;
    padding: 5px 9px;
    border-radius: 999px;
    color: var(--lcd-ink);
    background: linear-gradient(180deg, var(--lcd-hi), var(--lcd));
    border: 1px solid var(--lcd-edge);
    box-shadow: 0 1px 0 #fff inset;
    max-width: 30ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 원본에 없거나 알 수 없는 값 */
.badge-dim {
    color: #7b81a0;
    background: linear-gradient(180deg, #f2f3fa, #e4e7f3);
    border-color: var(--chassis-edge);
}

/* ------------------------------------------------------------------ 파형 화면 */

/* 채널 이름표 자리 + 화면. 이름표를 바깥에 두어야 파형에 가리지 않는다. */
.stage {
    display: flex;
    align-items: stretch;
    gap: 5px;
}

.stage .bezel {
    flex: 1;
    min-width: 0;
}

/* 이름표 칸은 눈금자 높이만큼 비우고, 그 아래를 채널 수만큼 나눠 쓴다.
   (칸 나누기는 script.js가 채널 수에 맞춰 정한다) */
.lane-labels {
    flex: none;
    width: 78px;
    display: grid;
    padding: 9px 0;
    gap: 0;
}

.lane-labels-thin {
    padding: 0;
}

/* 채널 한 줄: 왼쪽에 불빛 기둥, 오른쪽에 이름표와 숫자 */
.lane {
    display: flex;
    align-items: stretch;
    gap: 4px;
    padding: 1px 0;
    min-height: 0;
}

.lane-side {
    flex: 1;
    min-width: 0;
    /* 단추를 채널 줄 한가운데에 두려면 위쪽 값과 자리를 나눠 쓰면 안 된다.
       값은 띄워 얹고, 단추는 줄 전체를 기준으로 가운데 맞춘다. */
    position: relative;
}

/* 위쪽: 지금까지 가장 컸던 값 */
.lane-max {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
}

/* 채널 고르는 단추 — 줄의 세로 한가운데 */
.lane-pick {
    height: 100%;
    display: flex;
    align-items: center;
}

/* 값 위에 붙이는 작은 이름 */
.lane-cap {
    font-size: 0.5rem;
    letter-spacing: 0.06em;
    text-align: center;
    color: #8b90ab;
}

/* 지금까지 가장 컸던 값 */
.lane-db {
    font-family: var(--sound-mono);
    font-size: 0.6rem;
    text-align: center;
    color: #6f7593;
}

/* 더 담을 데가 없는 자리까지 올라갔다 */
.lane-db.over {
    color: #c2452f;
    font-weight: 700;
}

/* ------------------------------------------------------------------ 레벨 미터 */

/* 기둥 옆에 세우는 dB 눈금. 숫자는 그 크기에 해당하는 높이에 붙인다. */
.lane-scale {
    flex: none;
    width: 21px;
    position: relative;
    /* 0 dB 눈금이 기둥의 0 dB 칸과 같은 높이에 오도록, 위쪽 표시등만큼 비워 둔다 */
    padding: calc(2px + var(--clip-lamp) + var(--clip-gap)) 0 2px;
}

.lane-scale i {
    position: absolute;
    right: 0;
    transform: translateY(-50%);
    font-style: normal;
    font-family: var(--sound-mono);
    font-size: 0.58rem;
    color: #8b90ab;
    white-space: nowrap;
}

/* 맨 위 눈금은 반쯤 위로 올리면 채널 줄 밖으로 나간다 */
.lane-scale i:first-child {
    transform: none;
}

/* 믹서의 불빛 기둥. 아래에서 위로 차오른다. */
.lane-meter {
    flex: none;
    width: 19px;
    display: flex;
    flex-direction: column-reverse;
    gap: 1px;
    padding: 2px;
    border-radius: 4px;
    background: linear-gradient(180deg, var(--screen-deep), var(--screen));
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45) inset, 0 1px 0 rgba(255, 255, 255, 0.5);
}

.seg {
    flex: 1;
    min-height: 2px;
    border-radius: 1px;
    /* 꺼진 불 — 자리는 보이되 눈에 띄지 않게 */
    background: rgba(255, 255, 255, 0.07);
    /* 켜지고 꺼지는 자리를 살짝 뭉개 눈이 덜 피로하게 한다 */
    transition: background 0.09s linear, box-shadow 0.09s linear;
}

.seg.on {
    background: var(--meter-on);
    box-shadow: 0 0 4px rgba(126, 217, 87, 0.8);
}

.seg.warm.on {
    background: var(--meter-warm);
    box-shadow: 0 0 4px rgba(245, 166, 35, 0.8);
}

.seg.hot.on {
    background: var(--meter-hot);
    box-shadow: 0 0 5px rgba(224, 90, 63, 0.9);
}

/* 맨 위 깨짐 표시등 — 0 dB를 넘어 소리가 깨진 자리가 있었다는 뜻이다.
   믹서의 CLIP 램프와 같아서, 한 번 켜지면 다시 잴 때까지 그대로 켜져 있다. */
.seg.clip {
    flex: 0 0 var(--clip-lamp);
    margin-bottom: var(--clip-gap);
    background: rgba(255, 255, 255, 0.1);
}

.seg.clip.on {
    background: var(--meter-hot);
    box-shadow: 0 0 7px rgba(224, 90, 63, 0.95);
}

/* 지금까지 가장 높이 올라갔던 자리.
   칸을 통째로 칠하면 램프가 하나 더 켜진 것처럼 보여, 그 높이에 선만 하나 긋는다. */
.seg.hold {
    box-shadow: 0 -2px 0 var(--meter-hold) inset, 0 0 5px rgba(255, 255, 255, 0.45);
}

.lane-label {
    /* 누르기 좋도록 길게 세운다. 칸이 짧으면 위쪽 값과 겹치지 않는 만큼만 줄어든다. */
    width: 100%;
    height: 76px;
    max-height: calc(100% - 34px);
    font-family: var(--sound-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--engrave);
    background: linear-gradient(180deg, #fafbff, #dcdfef);
    border: 1px solid var(--chassis-edge);
    border-radius: 5px;
    flex: none;
    padding: 0;
    display: grid;
    place-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.lane-label:hover:not(:disabled) {
    background: linear-gradient(180deg, #ffffff, #e6e9f6);
}

/* 지금 편집이 미치지 않는 채널 */
.lane-label:not(.active):not(:disabled) {
    color: #969bb6;
}

/* 지금 편집이 미치는 채널.
   :hover 규칙과 우선순위가 같으면 눌러도 마우스가 얹혀 있는 동안 색이 바뀌지 않는다.
   그래서 얹힌 상태까지 따로 못 박아 둔다. */
.lane-label.active,
.lane-label.active:hover:not(:disabled) {
    background: linear-gradient(180deg, #c8ecd8, #a3d8bd);
    border-color: #86bfa2;
    color: #2f5c46;
}

.lane-label:disabled {
    cursor: default;
    opacity: 0.5;
}

.bezel {
    background: linear-gradient(180deg, #a7adc8, #c0c5da);
    padding: 9px;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(63, 69, 96, 0.3) inset, 0 1px 0 rgba(255, 255, 255, 0.6);
}

.bezel-thin {
    padding: 5px;
    margin-top: 9px;
    border-radius: 7px;
}

.screen {
    position: relative;
    background: var(--screen);
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 0 0 1px var(--screen-deep), 0 0 28px rgba(38, 43, 69, 0.55) inset;
}

#waveCanvas {
    display: block;
    width: 100%;
    height: 320px;
    touch-action: none;
    cursor: text;
}

@media (max-width: 980px) {
    #waveCanvas {
        height: 240px;
    }
}

#overviewCanvas {
    display: block;
    width: 100%;
    height: 44px;
    touch-action: none;
    cursor: grab;
}

#overviewCanvas:active {
    cursor: grabbing;
}

/* 가로줄 무늬 — 옛 화면 느낌만 아주 옅게 남긴다 */
.scanline {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 3px);
    mix-blend-mode: screen;
}

.drop-hint {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    gap: 8px;
    text-align: center;
    color: var(--trace-dim);
    letter-spacing: 0.12em;
    font-size: 0.78rem;
    pointer-events: none;
}

.drop-hint b {
    display: block;
    font-size: 0.9rem;
    letter-spacing: 0.16em;
    color: var(--trace);
    margin-bottom: 2px;
}

.screen.dragover {
    outline: 2px dashed var(--trace);
    outline-offset: -6px;
}

/* ------------------------------------------------------------------ 줄 배치 */

.nav-row,
.transport-row,
.edit-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.nav-row {
    margin-top: 9px;
}

.transport-row {
    margin-top: 13px;
    gap: 10px;
}

.edit-row {
    margin-top: 11px;
}

.row-tag {
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    color: #7b81a0;
    margin-right: 2px;
}

.row-gap {
    width: 10px;
}

/* ------------------------------------------------------------------ 재생 */

.transport {
    display: flex;
    gap: 6px;
}

.btn-transport {
    width: 46px;
    height: 36px;
    border-radius: 7px;
    border: 1px solid var(--chassis-edge);
    background: linear-gradient(180deg, #fafbff, #dcdfef);
    box-shadow: 0 1px 0 #fff inset, 0 2px 4px rgba(63, 69, 96, 0.14);
    display: grid;
    place-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-transport:active:not(:disabled) {
    transform: translateY(1px);
}

.btn-transport:disabled {
    opacity: 0.42;
    cursor: not-allowed;
    box-shadow: none;
}

.btn-transport svg {
    width: 16px;
    height: 16px;
    fill: var(--engrave);
}

.btn-transport.active {
    background: linear-gradient(180deg, #c8ecd8, #a3d8bd);
    border-color: #86bfa2;
}

/* 재생 중에는 정지 아이콘을 보여 준다 */
.btn-transport .icon-pause {
    display: none;
}

.btn-transport.playing .icon-play {
    display: none;
}

.btn-transport.playing .icon-pause {
    display: block;
    fill: #c9694a;
}

/* ------------------------------------------------------------------ 표시창 */

.lcd {
    background: linear-gradient(180deg, var(--lcd-hi), var(--lcd));
    color: var(--lcd-ink);
    font-family: var(--sound-mono);
    font-size: 0.74rem;
    line-height: 1.6;
    border: 1px solid var(--lcd-edge);
    border-radius: 6px;
    padding: 8px 12px;
    box-shadow: 0 1px 3px rgba(63, 69, 96, 0.25) inset;
}

.lcd-wide {
    flex: 1;
    min-width: 240px;
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.lcd-key {
    opacity: 0.6;
    letter-spacing: 0.04em;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.lcd b {
    font-weight: 600;
}

/* ------------------------------------------------------------------ 음량 */

.volume {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: var(--engrave);
}

.volume input[type="range"] {
    width: 108px;
}

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 20px;
    background: transparent;
    cursor: pointer;
    width: 100%;
}

input[type="range"]::-webkit-slider-runnable-track {
    height: 5px;
    border-radius: 3px;
    background: linear-gradient(180deg, #aeb4cf, #ccd0e2);
    box-shadow: 0 1px 2px rgba(63, 69, 96, 0.3) inset;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 20px;
    margin-top: -7px;
    border-radius: 4px;
    background: linear-gradient(180deg, #ffffff, #ccd1e5);
    border: 1px solid #9ba1bf;
    box-shadow: 0 1px 2px rgba(63, 69, 96, 0.28);
}

input[type="range"]::-moz-range-track {
    height: 5px;
    border-radius: 3px;
    background: #bcc1d8;
}

input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 20px;
    border-radius: 4px;
    background: #f2f4fb;
    border: 1px solid #9ba1bf;
}

input[type="range"]:focus-visible {
    outline: 2px solid var(--hot);
    outline-offset: 3px;
}

/* ------------------------------------------------------------------ 오른쪽 랙 */

.rack {
    border-left: 1px solid var(--chassis-edge);
    padding: 16px 16px 20px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.03), rgba(255, 255, 255, 0.3));
    min-width: 0;
}

@media (max-width: 980px) {
    .rack {
        border-left: none;
        border-top: 1px solid var(--chassis-edge);
    }
}

.rack-title {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 0 0 10px;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #7b81a0;
    font-weight: 700;
}

.rack-title:not(:first-child) {
    margin-top: 18px;
}

.rack-pair {
    display: flex;
    gap: 5px;
    margin: 9px 0;
}

.rack-pair .btn-chip {
    flex: 1;
    text-align: center;
}

/* 효과 묶음 */
.module {
    border: 1px solid var(--chassis-edge);
    border-radius: 8px;
    margin-bottom: 9px;
    overflow: hidden;
    background: linear-gradient(180deg, #eef0f8, #dbdfef);
    box-shadow: 0 1px 0 #fff inset, 0 1px 2px rgba(63, 69, 96, 0.1);
}

.module > summary {
    list-style: none;
    cursor: pointer;
    padding: 9px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.74rem;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--engrave);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), transparent);
}

.module > summary::-webkit-details-marker {
    display: none;
}

.led {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #a6acc6;
    box-shadow: 0 0 0 1px rgba(63, 69, 96, 0.2) inset;
    flex: none;
}

/* 불은 펼쳤을 때가 아니라 그 효과를 이 음원에 건 적이 있을 때 켜진다 */
.module.applied .led {
    background: var(--hot);
    box-shadow: 0 0 7px rgba(240, 166, 140, 0.9);
}

.module-body {
    padding: 4px 12px 13px;
    border-top: 1px solid rgba(63, 69, 96, 0.1);
}

.module-note {
    margin: 8px 0 0;
    font-size: 0.66rem;
    line-height: 1.65;
    color: #7b81a0;
}

.control {
    display: block;
    margin: 10px 0;
}

.control-cap {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    color: var(--engrave);
    margin-bottom: 2px;
}

.control-cap output {
    font-family: var(--sound-mono);
    font-size: 0.7rem;
    letter-spacing: 0;
    color: #4c5372;
}

.control select {
    width: 100%;
    font-family: inherit;
    font-size: 0.74rem;
    padding: 6px 8px;
    color: var(--engrave);
    border: 1px solid var(--chassis-edge);
    border-radius: 6px;
    background: linear-gradient(180deg, #fafbff, #dfe2f0);
    cursor: pointer;
}

/* 고를 수 없는 항목(원본보다 높은 비트 심도 등)은 흐리게 보여 준다 */
.control select option:disabled {
    color: #a6acc6;
    background: #eceef7;
}

/* 그런 항목이 골라져 있을 수는 없지만, 목록을 열지 않고도 알아채도록
   막힌 값이 있는 선택 상자에는 표시를 남긴다 */
.control select.has-limit {
    border-color: #d8b8a8;
}

/* ------------------------------------------------------------------ 저장 모달 */

.modal {
    /* 공통 스타일의 리셋이 모든 요소에 margin:0을 걸어 두어, 브라우저가 창을
       가운데로 보내려고 쓰는 margin:auto가 지워진다. 그래서 여기서 다시 세운다. */
    position: fixed;
    inset: 0;
    margin: auto;
    max-height: calc(100vh - 40px);
    border: 1px solid var(--chassis-edge);
    border-radius: 14px;
    padding: 0;
    width: min(360px, calc(100vw - 32px));
    color: var(--sound-ink);
    background: linear-gradient(180deg, var(--chassis-hi), var(--chassis));
    box-shadow: 0 18px 50px rgba(63, 69, 96, 0.35);
}

.modal::backdrop {
    background: rgba(47, 53, 82, 0.45);
}

.modal-title {
    margin: 0;
    padding: 14px 18px 10px;
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #7b81a0;
    font-weight: 700;
}

.modal-body {
    padding: 0 18px 4px;
    max-height: min(60vh, 460px);
    overflow: auto;
}

.modal-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px 16px;
    border-top: 1px solid var(--chassis-edge);
    margin-top: 12px;
}

/* ------------------------------------------------------------------ 처리 중 막 */

/* 저장이나 효과 처리가 도는 동안 화면을 덮는다.
   무슨 일이 벌어지는지 보여 주는 동시에, 그동안의 클릭도 함께 막는다. */
.working {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-content: center;
    background: rgba(47, 53, 82, 0.45);
    backdrop-filter: blur(2px);
}

.working-box {
    width: min(320px, calc(100vw - 40px));
    padding: 22px 24px 20px;
    border-radius: 14px;
    text-align: center;
    color: var(--sound-ink);
    background: linear-gradient(180deg, var(--chassis-hi), var(--chassis));
    border: 1px solid var(--chassis-edge);
    box-shadow: 0 18px 50px rgba(63, 69, 96, 0.4);
}

/* 도는 고리 — 아직 얼마나 남았는지 모를 때도 뭔가 돌고 있음을 알린다 */
.working-spin {
    width: 34px;
    height: 34px;
    margin: 0 auto 14px;
    border-radius: 50%;
    border: 3px solid var(--chassis-lo);
    border-top-color: var(--hot);
    animation: working-turn 0.9s linear infinite;
}

@keyframes working-turn {
    to { transform: rotate(360deg); }
}

.working-text {
    margin: 0 0 12px;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--engrave);
}

.working-bar {
    height: 7px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--chassis-lo);
    box-shadow: 0 1px 2px rgba(63, 69, 96, 0.3) inset;
}

.working-bar i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 4px;
    background: linear-gradient(90deg, #f6c3ad, var(--hot));
    transition: width 0.15s linear;
}

/* 진행률을 알 수 없는 동안에는 짧은 토막이 좌우로 오간다 */
.working.waiting .working-bar i {
    width: 34%;
    animation: working-slide 1.2s ease-in-out infinite alternate;
}

@keyframes working-slide {
    from { transform: translateX(-16%); }
    to { transform: translateX(210%); }
}

/* ------------------------------------------------------------------ 상태줄 */

.status {
    border-top: 1px solid var(--chassis-edge);
    padding: 9px 18px;
    display: flex;
    gap: 10px;
    align-items: center;
    font-family: var(--sound-mono);
    font-size: 0.72rem;
    color: #5c6280;
    background: rgba(255, 255, 255, 0.35);
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #a6acc6;
    flex: none;
}

/* 무거운 처리가 도는 동안 */
.status.busy .status-dot {
    background: var(--sel);
    box-shadow: 0 0 8px var(--sel);
}

.status-msg {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shortcut-hint {
    font-size: 0.68rem;
    color: #7b81a0;
    padding: 0 18px 14px;
    line-height: 1.9;
}

kbd {
    font-family: var(--sound-mono);
    font-size: 0.66rem;
    background: #eef0f8;
    border: 1px solid #b3b9d4;
    border-bottom-width: 2px;
    border-radius: 4px;
    padding: 1px 5px;
    color: var(--engrave);
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}