:root {
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  color: #293c36; background: #f4f5f0; line-height: 1.65; font-synthesis: none;
  --green: #32634e; --green-dark: #244c3b; --muted: #6c786f; --line: #e2e7dd;
  --tint: #f1f5ec; --soft: #f9faf6; --shadow: 0 5px 20px #31432c04;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .43; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #93ad71; outline-offset: 3px; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
h2 { font-size: 21px; font-weight: 730; letter-spacing: -.6px; line-height: 1.4; }
h3 { font-size: 16px; font-weight: 650; line-height: 1.5; }
button, input, select, textarea { min-width: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.site-header { max-width: 1352px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 23px 40px; border-bottom: 1px solid var(--line); }
.brand { display: flex; gap: 12px; align-items: center; font-weight: 750; font-size: 21px; letter-spacing: -.6px; flex-shrink: 0; }
.brand small { display: block; font-size: 11px; color: var(--muted); font-weight: 500; letter-spacing: .6px; }
.brand-mark { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 15px; background: #e0e8c6; color: #526c43; font-size: 27px; transform: rotate(-7deg); }
.header-nav { display: flex; gap: 26px; font-size: 13px; color: #64725f; }
.header-nav a:hover { color: var(--green); text-decoration: underline; text-underline-offset: 5px; }
.local-badge { font-size: 11px; display: flex; align-items: center; gap: 7px; color: #71806a; white-space: nowrap; }
.status-dot { width: 6px; height: 6px; background: #7a9662; border-radius: 50%; }
main { max-width: 1352px; margin: auto; padding: 0 40px; }
.intro { padding: 39px 0 32px; display: flex; align-items: center; justify-content: space-between; }
.eyebrow { color: #6e8157; font-size: 11px; font-weight: 700; letter-spacing: .8px; margin: 0 0 8px; }
h1 { font-size: 38px; letter-spacing: -1.7px; line-height: 1.34; font-weight: 730; }
.intro-copy { font-size: 14px; color: #73806c; margin-top: 14px; }
.intro-note { display: flex; align-items: center; gap: 24px; padding-right: 38px; color: #8b9e70; }
.intro-note > span:first-child { display: grid; place-items: center; width: 105px; height: 110px; border-radius: 33px; background: #e6eddb; font-size: 64px; transform: rotate(9deg); }
.intro-note > span:last-child { font-size: 13px; letter-spacing: .4px; line-height: 1.9; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 28px; min-width: 0; box-shadow: var(--shadow); }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.section-heading .eyebrow { margin-bottom: 4px; }
.connection-card { margin-bottom: 24px; padding: 25px 28px; }
.connection-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 21px; }
.connection-header h2 { font-size: 19px; }
.selection-summary { font-size: 12px; padding: 7px 12px; border-radius: 8px; background: #f0f4e9; color: #5a7445; overflow-wrap: anywhere; }
.connection-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 38px; }
.account-section { border-right: 1px solid var(--line); padding-right: 35px; }
.account-section .section-heading { justify-content: flex-start; margin-bottom: 6px; }
.account-actions { display: flex; align-items: center; gap: 16px; margin: 13px 0 10px; }
.account-actions .button { min-width: 185px; }
.connection-target { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px; align-content: start; }
.connection-target label { margin-top: 0; }
.connection-target label[for=house-select] { grid-column: 1; grid-row: 1; }
#house-select { grid-column: 1; grid-row: 2; }
#house-detail { grid-column: 1; grid-row: 3; }
.connection-target label[for=arti-select] { grid-column: 2; grid-row: 1; }
#arti-select { grid-column: 2; grid-row: 2; }
#arti-detail { grid-column: 2; grid-row: 3; }
.connection-target .fine-print { margin-top: 6px; }
.check-label { display: flex; gap: 8px; align-items: center; font-size: 12px; font-weight: 500; margin: 12px 0 5px; cursor: pointer; }
.check-label input { width: 15px; height: 15px; margin: 0; accent-color: var(--green); }
#forget-login { padding-left: 0; margin-top: 3px; }
.workspace { display: grid; grid-template-columns: minmax(0,1.75fr) minmax(310px,1fr); gap: 24px; align-items: start; }
.catalog-card { grid-column: 1; grid-row: 1; }
.library-card { grid-column: 1; grid-row: 2; }
.side-column { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 20px; min-width: 0; }
.compose-card { background: #fbfcf8; border-color: #dbe4d1; }
.compose-target { font-size: 13px; line-height: 1.7; padding: 12px 14px; background: #edf3e5; border-radius: 10px; color: #5b7547; overflow-wrap: anywhere; }
.devices-card { grid-column: 1 / -1; }
.operations-card { grid-column: 1 / -1; padding-top: 21px; padding-bottom: 21px; }
.section-icon { font-size: 31px; color: #a6b48a; line-height: 1; }
.subtle { font-size: 13px; color: var(--muted); }
.fine-print { font-size: 12px; color: #798471; line-height: 1.75; overflow-wrap: anywhere; }
.count { display: inline-block; font-size: 12px; color: #687e4f; font-weight: 650; padding: 3px 9px; border-radius: 7px; background: #edf3e5; white-space: nowrap; vertical-align: middle; }
.button { border: 1px solid transparent; border-radius: 9px; padding: 11px 16px; font-size: 13px; font-weight: 650; line-height: 1.5; transition: background .15s, border-color .15s; }
.button.secondary { background: #fff; border-color: #dce3d4; color: #4c6540; }
.button.secondary:hover:not(:disabled) { background: #f3f6ed; border-color: #bcccad; }
.button.primary { background: var(--green); color: white; }
.button.primary:hover:not(:disabled) { background: var(--green-dark); }
.button.kakao { background: #fee582; color: #473e23; }
.button.kakao:hover:not(:disabled) { background: #f9dc67; }
.wide { width: 100%; margin-top: 18px; }
.text-button { background: none; border: 0; padding: 7px 5px; font-size: 12px; color: #5b7547; line-height: 1.65; text-align: left; }
.text-button:hover:not(:disabled) { text-decoration: underline; text-underline-offset: 3px; }
label { display: block; font-size: 12px; font-weight: 650; margin: 19px 0 7px; }
input[type=text], select, textarea { width: 100%; border: 1px solid #dce3d4; background: #fafcf7; border-radius: 9px; padding: 11px 12px; color: #3c5137; min-height: 44px; font-size: 13px; }
input::placeholder, textarea::placeholder { color: #99a28f; }
select { padding-right: 26px; }
textarea { resize: vertical; }
.search-form { display: flex; gap: 9px; margin-top: 20px; }
.search-form input { flex: 1; font-size: 14px; background: #f6f8f2; padding: 13px 14px; }
.search-form .button { min-width: 77px; }
.search-options { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; }
.search-options .check-label { margin-top: 11px; }
.owned-section { font-size: 12px; margin-top: 14px; }
#catalog-owned { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 7px; }
.search-summary { font-size: 12px; color: #7b8870; padding: 17px 0 10px; line-height: 1.8; }
.search-summary.error { color: #9c623c; }
.catalog-results { list-style: none; padding: 0; margin: 0; max-height: 600px; overflow-y: auto; scrollbar-gutter: stable; }
.catalog-product { display: flex; gap: 13px; padding: 18px 0; border-top: 1px solid #edf0e7; }
.product-number { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 39px; background: #f1f5e9; color: #94a67c; border-radius: 9px; font-size: 12px; font-weight: 600; }
.product-body { flex: 1; min-width: 0; }
.product-title { font-size: 14px; font-weight: 650; color: #405437; overflow-wrap: anywhere; }
.product-match { font-size: 11px; font-weight: 500; color: #8d9d7b; margin-top: 3px; }
.product-playlists { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.product-playlists .button { padding: 7px 10px; font-size: 12px; }
.catalog-detail { background: #f6f9f0; border: 1px solid #e0e9d2; border-radius: 13px; padding: 20px; margin-top: 22px; }
.catalog-detail .section-heading { align-items: flex-start; }
.catalog-detail h3 { color: #425d34; overflow-wrap: anywhere; }
.song-list { padding-left: 25px; margin: 12px 0 20px; max-height: 305px; overflow-y: auto; color: #52644b; font-size: 13px; }
.song-list li { padding: 7px 0 7px 3px; border-bottom: 1px solid #e6ebdf; overflow-wrap: anywhere; }
.song-list li::marker { color: #8b9b77; font-size: 11px; }
.catalog-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 12px; }
.empty-state { text-align: center; padding: 45px 10px 35px; color: #6e7e62; }
.empty-state > span { width: 52px; height: 52px; background: #f1f5e7; border-radius: 18px; display: grid; place-items: center; font-size: 28px; margin: 0 auto 15px; }
.empty-state strong { font-weight: 600; font-size: 14px; }
.empty-state p, .empty-copy { font-size: 13px; color: #8a9480; margin-top: 8px; }
.empty-copy { padding: 19px 0; }
.track-list, .selection-list, .operations-list { list-style: none; padding: 0; margin: 20px 0 0; }
.track-list { max-height: 540px; overflow-y: auto; scrollbar-gutter: stable; }
.track { display: flex; align-items: center; gap: 12px; border-top: 1px solid #edf0e7; padding: 15px 0; }
.track-checkbox { width: 17px; height: 17px; accent-color: var(--green); margin: 0; flex-shrink: 0; }
.track-info { flex: 1; min-width: 0; }
.track-name { display: block; font-size: 13px; font-weight: 550; overflow-wrap: anywhere; }
.track-meta { font-size: 11px; color: #87947b; margin-top: 4px; }
.preview-button { border: 1px solid #dde5d2; background: #fafcf6; color: #6f835a; padding: 8px 9px; border-radius: 8px; font-size: 11px; white-space: nowrap; }
.preview-panel { background: #f0f5e7; padding: 15px; border-radius: 11px; margin-top: 18px; }
.preview-panel strong { font-size: 12px; overflow-wrap: anywhere; }
.preview-panel audio { width: 100%; height: 40px; }
.preview-panel .section-heading { margin-bottom: 8px; }
.favorite-button { border:1px solid #ddd5d0; border-radius:7px; padding:6px 10px; background:#fff; color:#866c65; font-size:12px; white-space:nowrap; }
.favorite-button.is-liked { color:#a13e56; background:#fff0f3; border-color:#e8bbc5; }
.favorites-group { border-color:#e8ccd2; background:#fffafb; }
.favorites-group > summary .playlist-summary-copy > strong { color:#963f53; }
.selection-list { margin-top: 15px; max-height: 390px; overflow-y: auto; scrollbar-gutter: stable; }
.selected-track { display: flex; align-items: center; gap: 9px; padding: 13px 0; border-bottom: 1px solid #e8eddf; }
.selected-number { color: #8e9c80; font-size: 11px; width: 18px; flex-shrink: 0; }
.selected-name { font-size: 12px; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.order-controls { display: flex; gap: 4px; }
.icon-button { border: 1px solid #dce5d1; background: #fff; border-radius: 6px; width: 29px; height: 29px; padding: 0; color: #698353; }
#publish-button { padding: 14px 18px; }
#publish-hint { margin-top: 11px; }
.pill { font-size: 11px; font-weight: 650; border-radius: 20px; background: #f0f3e9; color: #7b886e; padding: 4px 10px; white-space: nowrap; }
.pill.active { background: #e6efdc; color: #58743b; }
details { margin-top: 14px; }
summary { font-size: 12px; color: #6c7d5b; cursor: pointer; }
.advanced { border-top: 1px solid #e0e7d6; padding-top: 12px; margin-top: 17px; }
.advanced > .fine-print { margin: 12px 0; }
.advanced .button { margin-top: 10px; }
code { font-size: 11px; overflow-wrap: anywhere; }
.devices-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.device { border: 1px solid #e1e8d8; border-radius: 12px; padding: 18px; background: #fcfdf9; margin-bottom: 14px; }
.device-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.device-name { font-size: 15px; font-weight: 650; }
.device-state { font-size: 11px; color: #7c8e6c; }
.device-facts { margin: 12px 0; font-size: 12px; color: #7a896d; display: grid; gap: 4px; overflow-wrap: anywhere; }
.device-controls { display: flex; gap: 7px; flex-wrap: wrap; }
.device-controls .button { padding: 8px 11px; font-size: 12px; }
.device:only-child { grid-column:1 / -1; }
.device-playback { margin:16px 0; }
.device-playlist-title { display:block; margin-bottom:12px; overflow-wrap:anywhere; }
.device-playing-pair { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:12px; }
.device-now,.device-next { display:flex; flex-direction:column; gap:7px; padding:15px; border-radius:12px; background:#f0f4e9; overflow-wrap:anywhere; }
.device-next { background:#f5f5ef; }
.device-playing-pair .eyebrow { margin:0; }
.device-song-picker { margin-top:14px; }
.device-song-picker > summary { cursor:pointer; padding:12px 0; font-weight:650; }
.device-song-list { list-style:none; padding:0; margin:0 0 18px; }
.device-song { display:flex; gap:14px; align-items:center; justify-content:space-between; padding:12px; border-bottom:1px solid #e1e8d8; border-radius:8px; }
.device-song-copy { display:flex; flex-direction:column; gap:5px; min-width:0; overflow-wrap:anywhere; }
.device-song .button { flex-shrink:0; }
.device-song.is-current { background:#e7f0dc; box-shadow:inset 3px 0 #6e874f; }
.device-song.is-next:not(.is-current) { background:#f5f2e5; }
.device-command-status { padding:12px; background:#f0f4e9; border-radius:8px; }
.error-copy { color:#9a5637; }
.volume-row { display: flex; flex-wrap:wrap; align-items: center; gap: 8px 12px; margin-top: 17px; }
.volume-row meter { min-width:60px; flex:1; accent-color:var(--green); }
.volume-note { flex-basis:100%; }
.volume-row output { font-size: 12px; min-width: 36px; color: #73875f; }
.history-details { margin: 0; }
.history-details > summary { font-size: 15px; font-weight: 650; color: #536c43; }
.history-details > summary .subtle { float: right; font-size: 11px; font-weight: 400; padding-top: 3px; }
.operation { border-top: 1px solid var(--line); padding: 17px 0; }
.operation:last-child { padding-bottom: 0; }
.operation-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.operation-message { font-size: 13px; color: #657859; margin: 8px 0; overflow-wrap: anywhere; }
.operation-detail { font-size: 11px; color: #8c9b7d; overflow-wrap: anywhere; }
.notice { padding: 14px 18px; border: 1px solid #d4e2c3; background: #eaf2df; border-radius: 12px; color: #506e38; font-size: 13px; margin-bottom: 20px; overflow-wrap: anywhere; }
.notice.error { border-color: #ebd6c4; background: #fff1e6; color: #99623b; }
.inline-status { background: #f0f5e6; border-radius: 8px; padding: 10px 12px; font-size: 12px; color: #6c8256; margin-top: 14px; }
.source-result { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 17px; overflow-wrap: anywhere; }
.source-result h3 { font-size: 14px; margin-bottom: 6px; }
.source-result p { font-size: 12px; }
.source-result li { font-size: 12px; margin-bottom: 13px; }
.source-result textarea { width: 100%; min-height: 68px; font-size: 11px; overflow-wrap: anywhere; }
.source-result .button { margin: 12px 8px 0 0; font-size: 12px; padding: 9px 12px; }
.saved-playlists .source-result { background: #f8faf4; border: 1px solid #e4ebd9; padding: 17px; border-radius: 12px; }
.saved-playlists .source-result .advanced { margin-top: 13px; }
footer { font-size: 11px; color: #8d9c7e; padding: 28px 0 34px; display: flex; justify-content: space-between; gap: 15px; }
.library-toolbar { margin-top: 20px; }
.library-toolbar input { font-size: 13px; }
.library-fold-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 3px; }
.library-fold-actions .text-button { font-size: 11px; }
.playlist-group { background: #fbfcf8; border: 1px solid #e1e8d7; border-radius: 12px; overflow: hidden; margin: 13px 0 0; }
.playlist-group > summary { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 9px 13px; list-style: none; position: relative; padding: 17px 37px 17px 17px; align-items: center; }
.playlist-group > summary::-webkit-details-marker { display: none; }
.playlist-group > summary::after { content: '⌄'; position: absolute; right: 15px; top: 20px; font-size: 16px; color: #839774; }
.playlist-group[open] > summary::after { content: '⌃'; }
.playlist-group[open] > summary { border-bottom: 1px solid #e5ebde; }
.playlist-summary-copy { display: grid; gap: 5px; min-width: 0; }
.playlist-summary-copy strong { font-size: 13px; color: #4e6740; overflow-wrap: anywhere; }
.playlist-summary-copy .fine-print { font-size: 11px; }
.playlist-group .pill { font-size: 10px; padding: 4px 8px; }
.playlist-download-status { grid-column: 1 / -1; font-size: 11px; color: #829170; line-height: 1.65; overflow-wrap: anywhere; }
.playlist-group-body { padding: 0 17px 17px; }
.playlist-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 15px; }
.playlist-actions .button { font-size: 11px; padding: 8px 10px; }
.playlist-group .track-list { margin-top: 14px; max-height: 410px; }
.playlist-group .pending-track { font-size: 12px; color: #89967d; }
.playlist-group .pending-track > .fine-print { font-size: 10px; white-space: nowrap; }
.playlist-group .advanced { margin-top: 8px; }
@media (max-width: 1100px) {
  .site-header, main { padding-left: 26px; padding-right: 26px; }
  .connection-grid { grid-template-columns: 1fr 1fr; gap: 25px; }
  .account-section { padding-right: 25px; }
  .connection-target { grid-template-columns: 1fr; gap: 3px; }
  .connection-target label[for=house-select], #house-select, #house-detail, .connection-target label[for=arti-select], #arti-select, #arti-detail { grid-column: auto; grid-row: auto; }
  .connection-target label[for=arti-select] { margin-top: 12px; }
  .workspace { grid-template-columns: minmax(0,1.6fr) minmax(290px,1fr); gap: 20px; }
  .card { padding: 23px; }
  .intro-note { padding-right: 15px; }
  .intro-note > span:last-child { display: none; }
}
@media (max-width: 800px) {
  .header-nav { display: none; }
  .intro { padding: 30px 0 25px; }
  h1 { font-size: 33px; }
  .intro-note { display: none; }
  .workspace { grid-template-columns: minmax(0,1fr); gap: 18px; }
  .catalog-card, .library-card, .side-column, .devices-card, .operations-card { grid-column: 1; grid-row: auto; }
  .side-column { position: static; }
  .connection-card { margin-bottom: 18px; }
  .connection-header { align-items: flex-start; }
  .selection-summary { max-width: 48%; font-size: 11px; }
  .devices-list { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .site-header { padding: 19px 18px; gap: 10px; }
  main { padding: 0 15px; }
  .brand { font-size: 19px; gap: 10px; }
  .brand small { font-size: 10px; }
  .brand-mark { width: 37px; height: 39px; }
  .local-badge { font-size: 10px; }
  h1 { font-size: 31px; }
  h2 { font-size: 19px; }
  .intro-copy { font-size: 13px; }
  .card { padding: 20px; border-radius: 16px; }
  .connection-grid { grid-template-columns: 1fr; gap: 19px; }
  .account-section { border-right: 0; border-bottom: 1px solid var(--line); padding-right: 0; padding-bottom: 19px; }
  .connection-target { grid-template-columns: 1fr 1fr; gap: 4px 12px; }
  .connection-target label[for=house-select] { grid-column: 1; grid-row: 1; }
  #house-select { grid-column: 1; grid-row: 2; }
  #house-detail { grid-column: 1; grid-row: 3; }
  .connection-target label[for=arti-select] { grid-column: 2; grid-row: 1; margin-top: 0; }
  #arti-select { grid-column: 2; grid-row: 2; }
  #arti-detail { grid-column: 2; grid-row: 3; }
  .connection-header { display: block; }
  .selection-summary { display: inline-block; max-width: 100%; margin-top: 12px; }
  .connection-target .fine-print { font-size: 11px; }
  .button { padding: 10px 12px; }
  .section-heading { gap: 10px; }
  .library-card .section-heading .button { padding: 9px; font-size: 11px; }
  .catalog-detail { padding: 16px; }
  .catalog-actions { display: grid; grid-template-columns: 1fr; }
  .catalog-results { max-height: 530px; }
  .product-number { width: 30px; height: 34px; }
  .product-title { font-size: 13px; }
  .track { gap: 9px; }
  .track-name { font-size: 12px; }
  .history-details > summary .subtle { display: none; }
  footer { display: block; }
  footer span { display: block; margin-top: 5px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

.track-actions { display:flex; flex-direction:column; align-items:stretch; gap:5px; flex-shrink:0; }
.danger-button { color:#a04a3c; font-size:12px; }
.danger-button:hover { background:#fff0ed; }
/* Actions that replace an arti's current playlist look different from ordinary secondary buttons. */
.button.danger-outline { background:#fffaf8; border-color:#d9b7a9; color:#8f4a37; }
.button.danger-outline:hover:not(:disabled) { background:#fff0ea; border-color:#c99a88; }
.text-button.danger-text { color:#8f4a37; }
.text-button.danger-text::before { content:'↺ '; }
.trash-row { display:flex; align-items:center; gap:12px; padding:14px 0; border-top:1px solid #edf0e7; }
.trash-row .fine-print { display:block; margin-top:5px; }
.selection-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:8px 0 14px; }

.catalog-tabs { display:flex; gap:5px; padding:5px; margin:18px 0; background:#edf1e6; border-radius:12px; }
.catalog-tabs button { flex:1; border:0; background:transparent; color:#657457; padding:11px 7px; border-radius:9px; font:inherit; font-size:13px; font-weight:600; }
.catalog-tabs button[aria-selected=true] { background:white; color:#344b24; box-shadow:0 2px 7px #30421b12; }
.popular-toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.popular-toolbar select { flex:1; min-width:160px; margin:0; }
.popular-toolbar button { flex-shrink:0; font-size:12px; }

.current-card { margin-bottom: 24px; }
.current-actions,.shuffle-controls { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.current-actions { margin:18px 0 12px; }
.current-stories { max-height:360px; overflow:auto; margin-top:12px; }
.current-song { display:flex; justify-content:space-between; gap:16px; padding:10px 8px; border-bottom:1px solid var(--line); }
.current-song.playing { background:#e7efe6; border-radius:8px; }
.current-song .fine-print { flex-shrink:0; }
.shuffle-controls { margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.shuffle-controls strong,.shuffle-controls p { width:100%; }
.shuffle-controls [aria-pressed="true"] { background:#e7efe6; opacity:1; }
#draft-warning { margin:12px 0; }
@media(max-width:600px){ .current-card .section-heading { align-items:flex-start; flex-direction:column; gap:12px; } .current-song { flex-direction:column; gap:4px; } .current-actions .button { width:100%; } }

.order-editor-heading,.order-pick-summary,.order-dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.order-editor-heading { margin-top:22px; }
.order-editor-heading strong { font-size:13px; }
.order-help { margin:9px 0 14px; line-height:1.7; }
.order-toolbar { padding:13px; border:1px solid #dfe7d8; border-radius:12px; background:#f5f8ef; }
.order-pick-summary strong { font-size:12px; }
.order-shortcuts { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0; }
.order-shortcuts .button,.order-position .button { padding:9px 12px; font-size:12px; }
.order-shortcuts .text-button { margin-left:auto; }
.order-position { display:flex; gap:7px; align-items:center; flex-wrap:wrap; font-size:12px; }
.order-position label { margin:0; font-size:12px; }
.order-position input { width:70px; padding:8px; margin:0; }
#order-position-hint { margin:9px 0 0; }
.order-feedback { min-height:18px; font-size:12px; color:var(--green); margin:10px 0 0; }
.selection-list { margin-top:6px; overscroll-behavior:contain; }
.selected-track { gap:7px; padding:10px 6px; border-radius:7px; position:relative; }
.selected-track.order-picked { background:#eaf2e2; }
.selected-track .selected-name { text-align:left; color:var(--ink); background:none; border:0; padding:6px 0; line-height:1.55; }
.selected-number { width:22px; text-align:center; font-variant-numeric:tabular-nums; }
.order-pick { width:17px; height:17px; accent-color:var(--green); margin:0; flex-shrink:0; }
.order-drag-handle { cursor:grab; color:#7c8d72; background:transparent; border:0; padding:4px 1px; font-size:20px; line-height:1; flex-shrink:0; touch-action:pan-y; }
.order-drag-handle:active { cursor:grabbing; }
.order-dragging .order-picked { opacity:.6; }
.selected-track.drop-before { box-shadow:inset 0 3px 0 #47683a; }
.selected-track.drop-after { box-shadow:inset 0 -3px 0 #47683a; }
#order-dialog { width:min(900px,calc(100vw - 32px)); max-width:none; max-height:calc(100dvh - 40px); box-sizing:border-box; border:1px solid #dfe6d8; border-radius:20px; padding:26px; color:var(--ink); background:#fff; }
#order-dialog::backdrop { background:rgb(28 42 24 / 45%); }
.order-dialog-heading h2 { margin:0; }
#order-dialog .order-editor-heading { display:none; }
#order-dialog .selection-list { max-height:calc(100dvh - 380px); min-height:140px; }
#order-dialog .selected-name { font-size:15px; }
#order-dialog .selected-track { padding:10px; }
#order-dialog .order-toolbar { position:sticky; top:0; z-index:2; }
#order-dialog .order-shortcuts .text-button { margin-left:0; }
@media(max-width:600px){
  #order-dialog { width:calc(100vw - 16px); padding:16px; border-radius:14px; max-height:calc(100dvh - 16px); }
  .order-dialog-heading { align-items:flex-start; }
  .order-dialog-heading h2 { font-size:20px; }
  .order-dialog-heading .button { white-space:nowrap; padding:10px; }
  #order-dialog .selection-list { max-height:calc(100dvh - 370px); }
  .order-shortcuts .text-button { margin-left:0; }
}
/* Only the song list scrolls in the expanded editor; controls stay visible. */
#order-dialog[open] { display:flex; flex-direction:column; height:min(900px,calc(100dvh - 40px)); overflow:hidden; }
#order-dialog > .order-dialog-heading, #order-dialog > .fine-print { flex-shrink:0; }
#order-dialog-body, #order-dialog #order-editor { display:flex; flex-direction:column; flex:1; min-height:0; }
#order-dialog .order-help, #order-dialog .order-toolbar, #order-dialog .order-feedback { flex-shrink:0; }
#order-dialog .selection-list { flex:1; min-height:0; max-height:none; }
@media(max-width:600px) { #order-dialog[open] { height:calc(100dvh - 16px); } }
@media(max-height:600px) {
  #order-dialog .order-help, #order-dialog > .fine-print, #order-dialog .eyebrow { display:none; }
  #order-dialog .order-toolbar { padding:8px; }
  #order-dialog #order-position-hint { margin:4px 0 0; }
}
.selected-info { flex:1; min-width:0; }
.selected-info .selected-name { display:block; width:100%; }
.selected-track:focus-within { outline:2px solid #869b73; outline-offset:-2px; }
.duplicate-badge { display:block; text-align:left; max-width:100%; border:0; border-radius:5px; padding:3px 6px; margin:3px 0; background:#fff1db; color:#80561d; font:inherit; font-size:11px; overflow-wrap:anywhere; }
.duplicate-badge.source { background:#f9e4dc; color:#964b33; }
.selection-duplicates { margin:9px 0; border:1px solid #e7dac0; background:#fffcf5; border-radius:9px; font-size:12px; }
.selection-duplicates > summary { cursor:pointer; padding:10px; line-height:1.6; color:#765728; }
.duplicates-body { padding:0 10px 10px; max-height:190px; overflow:auto; overscroll-behavior:contain; }
.duplicates-body .fine-print { margin:0 0 8px; }
#duplicate-groups { list-style:none; padding:0; margin:0; }
.duplicate-group { padding:8px 0; border-top:1px solid #eee3d1; }
.duplicate-locations { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
.duplicate-location { border:1px solid #e3d9c8; border-radius:6px; padding:5px 7px; background:white; color:#624d30; font:inherit; text-align:left; overflow-wrap:anywhere; max-width:100%; }
#order-dialog .selection-duplicates { flex-shrink:0; }
#order-dialog .duplicates-body { max-height:min(190px,22dvh); }
@media(min-width:601px) {
  #order-dialog .order-toolbar { display:grid; grid-template-columns:1fr auto; gap:8px 16px; }
  #order-dialog .order-pick-summary, #order-dialog #order-position-hint { grid-column:1 / -1; }
  #order-dialog .order-shortcuts, #order-dialog #order-position-hint { margin:0; }
}

/* Section navigation stays available; full-height cards scroll with the page. */
html { scroll-padding-top:104px; scrollbar-gutter:stable; }
.site-header { position:sticky; top:0; z-index:10; background:rgba(244,245,240,.97); padding-top:12px; padding-bottom:12px; }
.header-nav { flex-wrap:wrap; gap:10px 20px; }
.header-nav a { padding:6px 0; white-space:nowrap; }
.side-column { position:static; }
.library-card .track-list { max-height:none; overflow:visible; scrollbar-gutter:auto; }
.list-pagination { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; margin:16px 0 4px; padding-top:12px; border-top:1px solid var(--line); }
.list-pagination .button { padding:7px 12px; font-size:12px; }
.library-sort-note { margin:8px 0 12px; }
#save-library-status { margin-top:8px; }
#order-editor-home .selection-list { overscroll-behavior-y:auto; }
body:has(#order-dialog[open]) { overflow:hidden; }
#order-dialog .selection-list { overscroll-behavior-y:contain; }
.playlist-group:focus { outline:none; }
@media(max-width:800px) {
  .site-header { flex-wrap:wrap; gap:6px 12px; }
  .header-nav { display:flex; order:3; width:100%; justify-content:space-between; gap:4px 10px; font-size:12px; }
  .brand small { display:none; }
.brand-heart { color:var(--clay); margin-left:5px; font-size:17px; vertical-align:-1px; animation:beat 2.4s ease-in-out infinite; display:inline-block; }
@keyframes beat { 0%,100% { transform:scale(1); } 14% { transform:scale(1.18); } 28% { transform:scale(1); } 42% { transform:scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .brand-heart { animation:none; } }
  .brand-mark { width:32px; height:32px; font-size:23px; }
  html { scroll-padding-top:126px; }
}

/* Song rows stay horizontal with separate, comfortably sized actions. */
.intro { padding:20px 0; }
.intro h1 { font-size:25px; letter-spacing:-.8px; line-height:1.4; }
.intro-copy { margin-top:5px; font-size:13px; }
.library-card .track { display:flex; flex-wrap:nowrap; align-items:center; gap:8px; padding:1px 0; min-height:48px; }
.library-card .track-info { min-width:0; flex:1; }
.library-card .track-name { font-size:13px; line-height:1.5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.library-card .track-meta { margin-top:2px; line-height:1.4; }
.library-card .track-actions { display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:flex-end; gap:5px; grid-column:auto; width:auto; flex:0 0 auto; }
.track-actions .preview-button,.track-actions .favorite-button,.track-actions .song-delete,.pending-track > .favorite-button { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; min-width:44px; padding:10px; border:1px solid var(--line); border-radius:8px; background:#fff; }
.track-actions svg,.pending-track > .favorite-button svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.track-actions .preview-button svg { fill:currentColor; stroke:none; width:18px; }
.track-actions .favorite-button.is-liked { color:#a13e56; background:#fff0f3; border-color:#e8bbc5; }
.favorite-button.is-liked svg { fill:currentColor; }
.track-actions .song-delete { margin-left:5px; color:#997165; }
.track-actions .song-delete:hover:not(:disabled) { background:#fff3ef; border-color:#d9b7a9; }
.replace-file-button { min-height:44px; max-width:78px; padding:4px 7px; border:1px solid #dfccac; border-radius:8px; color:#805a2e; background:#fffaf0; font-size:11px; line-height:1.4; }
.selected-track .icon-button { min-width:44px; min-height:44px; }
.recovery-banner,.operation-recovery-item { border:1px solid #ddc695; background:#fffaf0; border-radius:12px; padding:15px; margin:12px 0; font-size:13px; }
.recovery-banner > p,.operation-recovery-item > p { margin-top:7px; }
.recovery-banner strong,.operation-recovery-item strong { color:#755222; }
.recovery-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:12px; }
.recovery-actions .button { min-height:44px; }
.operation-recovery { margin-top:16px; }
.operation-recovery-item .button { font-size:12px; }
.recovery-banner code { user-select:all; }
.device-song .device-song-play { display:flex; align-items:center; justify-content:center; width:44px; height:44px; min-width:44px; padding:10px; }
.device-song-play svg { width:18px; height:18px; fill:currentColor; }
@media(max-width:540px) {
  .intro { padding:17px 0; }
  .intro h1 { font-size:21px; }
  .library-card .playlist-group-body { padding:0 9px 12px; }
  .library-card .track { gap:6px; }
  .library-card .track-actions { gap:3px; }
  .track-actions .song-delete { margin-left:3px; }
  .library-card .track-meta { font-size:10px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   2026-09-21 화면 재설계 — "그림책 작업대"
   지금 재생 스트립(헤더 아래 고정) · 아띠 레일 | 작업대 탭 | 담기 패널 3열 · 단계 표시 · 작업 기록 타임라인
   아래 규칙은 위 기본 규칙을 덮어씁니다. 되돌리려면 이 블록만 지우면 됩니다.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --paper:#f4eee2; --paper-deep:#eae1cd; --card:#fffdf8; --ink:#25332a; --ink-soft:#5b665c;
  --forest:#1e4b39; --forest-deep:#153629; --moss:#6b8a55; --moss-soft:#e4ecd7;
  --clay:#c4623f; --clay-soft:#fbe9e0; --sun:#f1c65b; --sun-soft:#fff3cf; --sun-ink:#7a5a12;
  --line:#e3d9c5; --line-strong:#cfc2a8; --shadow:0 10px 30px rgba(60,45,20,.08);
  --green:var(--forest); --green-dark:var(--forest-deep); --muted:var(--ink-soft); --tint:var(--moss-soft); --soft:var(--paper);
  --font-display:"Gowun Batang","AppleMyungjo","Apple SD Gothic Neo",serif;
  --font-body:"Gowun Dodum","Apple SD Gothic Neo","Noto Sans KR",-apple-system,sans-serif;
  font-family:var(--font-body); color:var(--ink); background:var(--paper); line-height:1.6;
  background-image:radial-gradient(1200px 500px at 8% -10%, rgba(241,198,91,.16), transparent 60%), radial-gradient(900px 500px at 100% 0%, rgba(107,138,85,.14), transparent 60%);
  background-attachment:fixed;
}
body::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.35; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.3 0 0 0 0 0.2 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
main { position:relative; z-index:1; }
.site-header { position:sticky; top:0; z-index:20; }
h1, h2, h3, .brand, .device-name, #order-dialog-title { font-family:var(--font-display); letter-spacing:-.02em; }
h2 { font-size:20px; font-weight:700; }
h3 { font-size:14px; font-weight:700; }
.eyebrow { color:var(--moss); font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
.card { background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); padding:18px; }
.section-heading { margin-bottom:12px; }
.fine-print { color:var(--ink-soft); font-size:12px; }
.subtle { color:var(--ink-soft); }
.count { background:var(--moss-soft); color:var(--forest); }
.pill { background:var(--paper-deep); color:var(--ink-soft); }
.pill.active { background:var(--moss-soft); color:var(--forest); }
.button { border-radius:10px; }
.button.primary { background:var(--forest); box-shadow:0 6px 16px rgba(30,75,57,.18); }
.button.primary:hover:not(:disabled) { background:var(--forest-deep); }
.button.secondary { background:var(--card); border-color:var(--line); color:var(--forest); }
.button.secondary:hover:not(:disabled) { background:var(--paper); border-color:var(--line-strong); }
.text-button { color:var(--forest); }
input[type=text], input[type=number], select, textarea { background:var(--paper); border-color:var(--line); color:var(--ink); border-radius:10px; }
.notice { background:var(--moss-soft); border-color:#cfdcb9; color:var(--forest); }
.notice.error { background:var(--clay-soft); border-color:#e8c4b3; color:#8f4a37; }
.inline-status { background:var(--sun-soft); color:var(--sun-ink); }
.empty-copy, .empty-state p { color:var(--ink-soft); }

/* ── 헤더 ─────────────────────────────────── */
.site-header { max-width:none; margin:0; padding:0 24px; height:60px; gap:26px; background:rgba(244,238,226,.93); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.brand { font-size:19px; font-weight:800; }
.brand small { display:none; }
.brand-heart { color:var(--clay); margin-left:5px; font-size:17px; vertical-align:-1px; animation:beat 2.4s ease-in-out infinite; display:inline-block; }
@keyframes beat { 0%,100% { transform:scale(1); } 14% { transform:scale(1.18); } 28% { transform:scale(1); } 42% { transform:scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .brand-heart { animation:none; } }
.brand-mark { width:34px; height:34px; border-radius:10px; background:var(--forest); color:var(--sun); font-size:19px; transform:rotate(-6deg); }
.header-nav { gap:22px; font-size:13px; color:var(--ink-soft); }
.header-nav a { padding:6px 0; border-bottom:2px solid transparent; }
.header-nav a:hover { color:var(--forest); text-decoration:none; border-color:var(--forest); }
.header-account { margin-left:auto; display:flex; align-items:center; gap:10px; position:relative; }
.account-menu { margin:0; }
.account-menu > summary { list-style:none; font-size:12px; color:var(--ink-soft); padding:6px 10px; border:1px solid var(--line); border-radius:999px; cursor:pointer; background:var(--card); }
.account-menu > summary::-webkit-details-marker { display:none; }
.account-menu > summary::after { content:' ▾'; }
.account-menu[open] > summary { color:var(--forest); border-color:var(--forest); }
.account-menu .account-section { position:absolute; right:0; top:44px; width:min(420px, calc(100vw - 32px)); background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:0 18px 40px rgba(40,30,10,.18); padding:18px; z-index:30; }
.account-section .section-heading { margin-bottom:10px; }
.account-section .local-badge { font-size:11px; }
.account-actions { margin:12px 0 8px; }
.account-actions .button { min-width:0; }

/* ── 지금 재생 스트립 ─────────────────────────── */
.now-strip { position:sticky; top:60px; z-index:19; background:var(--forest); color:#f3f0e6; box-shadow:0 10px 30px rgba(21,54,41,.25); }
.now-strip-inner { max-width:1400px; margin:0 auto; padding:8px 24px 10px; }
.strip-meta { display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap; font-size:11px; color:rgba(243,240,230,.75); }
.strip-meta h2 { font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--sun); font-weight:800; }
.strip-meta .fine-print { color:rgba(243,240,230,.7); }
.strip-meta .text-button { color:var(--sun); padding:2px 4px; font-size:11px; }
.strip-meta .error-copy { color:#ffb59a; }
.now-strip .empty-copy { color:rgba(243,240,230,.8); padding:8px 0 4px; font-size:13px; }
.now-strip .devices-list { display:block; }
.now-strip .device { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; grid-template-areas:"head title ctl mode" "facts play ctl vol" "reason reason reason reason" "status status status status" "queue queue queue queue" "diag diag diag diag"; column-gap:22px; row-gap:4px; align-items:center; background:transparent; border:0; border-radius:0; padding:4px 0 2px; margin:0; }
.now-strip .device-header { grid-area:head; display:flex; align-items:center; gap:12px; }
.now-strip .device-name { color:#f3f0e6; font-size:15px; font-weight:800; white-space:nowrap; }
.now-strip .device-state { color:var(--sun); font-size:11px; }
.now-strip .device-facts { grid-area:facts; display:flex; gap:10px; margin:0; font-size:11px; color:rgba(243,240,230,.72); }
.now-strip .device-playback { display:contents; }
.now-strip .device-playlist-title { grid-area:title; margin:0; font-size:12px; color:rgba(243,240,230,.8); font-weight:600; }
.now-strip .device-playing-pair { grid-area:play; display:flex; flex-wrap:wrap; gap:6px 22px; align-items:baseline; }
.now-strip .device-now, .now-strip .device-next { flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:6px 8px; padding:0; background:transparent; }
.now-strip .device-now strong { font-family:var(--font-display); font-size:17px; font-weight:800; color:#fff; }
.now-strip .device-next strong { font-size:13px; font-weight:600; color:rgba(243,240,230,.9); }
.now-strip .device-playing-pair .eyebrow { color:var(--sun); font-size:10px; letter-spacing:.1em; }
.now-strip .device-next .fine-print { color:rgba(243,240,230,.6); font-size:11px; }
.now-strip .device-playback > .fine-print { grid-area:reason; color:rgba(243,240,230,.7); margin:2px 0 0; }
.now-strip .device-command-status { grid-area:status; background:rgba(255,255,255,.08); color:#f3f0e6; padding:8px 12px; border-radius:8px; margin:4px 0 0; }
.now-strip .device-command-status.error-copy { color:#ffc7b3; }
.now-strip .device-song-picker { grid-area:queue; margin:6px 0 0; border-top:1px solid rgba(255,255,255,.12); }
.now-strip .device-song-picker > summary { color:var(--sun); font-size:12px; padding:8px 0; }
.now-strip .device-song-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:2px 18px; max-height:280px; overflow:auto; margin:0 0 10px; }
.now-strip .device-song { border:0; padding:4px 6px; gap:10px; color:#f3f0e6; }
.now-strip .device-song strong { font-size:13px; font-weight:600; }
.now-strip .device-song .fine-print { color:rgba(243,240,230,.6); }
.now-strip .device-song.is-current { background:rgba(241,198,91,.18); box-shadow:inset 3px 0 var(--sun); }
.now-strip .device-song.is-next:not(.is-current) { background:rgba(255,255,255,.06); }
.now-strip .device-song .button { background:transparent; border-color:rgba(255,255,255,.3); color:#f3f0e6; width:36px; height:36px; min-width:36px; }
.now-strip .device-controls { grid-area:ctl; align-self:center; gap:6px; flex-wrap:nowrap; }
.now-strip .device-controls .button { width:40px; height:40px; padding:0; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.06); color:#f3f0e6; font-size:0; position:relative; }
.now-strip .device-controls .button::before { font-size:13px; line-height:40px; }
.now-strip .device-controls .button[aria-label$=" 이전"]::before { content:'⏮'; }
.now-strip .device-controls .button[aria-label$=" 재생"]::before { content:'▶'; }
.now-strip .device-controls .button[aria-label$=" 일시정지"]::before { content:'⏸'; }
.now-strip .device-controls .button[aria-label$=" 정지"]::before { content:'■'; }
.now-strip .device-controls .button[aria-label$=" 다음"]::before { content:'⏭'; }
.now-strip .device-controls .button[aria-label$=" 재생"] { background:var(--sun); color:var(--forest-deep); border-color:transparent; width:46px; height:46px; }
.now-strip .device-controls .button[aria-label$=" 재생"]::before { line-height:46px; font-size:15px; }
.now-strip .device-controls .button:hover:not(:disabled) { background:rgba(255,255,255,.16); }
.now-strip .device-controls .button[aria-label$=" 재생"]:hover:not(:disabled) { background:#f6d27a; }
.now-strip .shuffle-controls { grid-area:mode; margin:0; border:0; gap:2px; display:inline-flex; flex-wrap:nowrap; justify-self:start; background:rgba(255,255,255,.1); border-radius:999px; padding:3px; }
.now-strip .shuffle-controls strong, .now-strip .shuffle-controls p { display:none; }
.now-strip .shuffle-controls .button { border:0; background:transparent; color:#f3f0e6; padding:6px 12px; border-radius:999px; font-size:12px; opacity:1; white-space:nowrap; }
.now-strip .shuffle-controls .button[aria-pressed="true"] { background:#f3f0e6; color:var(--forest-deep); }
.now-strip .shuffle-controls .button:disabled { opacity:.55; }
.now-strip .volume-row { grid-area:vol; margin:0; gap:8px; font-size:11px; color:rgba(243,240,230,.8); flex-wrap:nowrap; }
.now-strip .volume-row .subtle { color:rgba(243,240,230,.7); font-size:11px; white-space:nowrap; }
.now-strip .volume-row meter { width:70px; min-width:70px; flex:none; height:8px; accent-color:var(--sun); }
.now-strip .volume-row output { color:#f3f0e6; }
.now-strip .volume-note { display:none; }
.now-strip .device.volume-zero .volume-row output::before { content:'⚠ '; color:var(--sun); }
.now-strip .advanced { grid-area:diag; border-top:0; margin:0; padding:0; }
.now-strip .advanced > summary { color:rgba(243,240,230,.55); font-size:11px; }
.now-strip .advanced > .fine-print { color:rgba(243,240,230,.65); margin:6px 0 4px; }

/* ── 3열 작업대 ─────────────────────────────── */
main { max-width:1400px; padding:0 24px; }
.intro { display:none; }
.bench { display:grid; grid-template-columns:270px minmax(0,1fr) 350px; gap:20px; align-items:start; padding:22px 0 20px; }
.rail { position:sticky; top:150px; }
.side-column { position:sticky; top:150px; grid-column:auto; grid-row:auto; }
.work-card { min-width:0; }
.operations-card { grid-column:1 / -1; }
.recovery-banner:not([hidden]) + #notice, #session-recovery, #notice { margin-top:18px; }
#notice { margin-bottom:0; }

/* 아띠 레일 */
.rail-card { padding:16px 12px 14px; }
.rail-card .section-heading { padding:0 6px; margin-bottom:8px; }
.rail-card .selection-summary { display:none; }
.arti-rail { list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.arti-button { display:grid; grid-template-columns:34px 1fr auto; gap:9px; align-items:center; width:100%; text-align:left; padding:8px; border:1px solid transparent; border-radius:10px; background:transparent; }
.arti-button:hover:not(:disabled) { background:var(--paper); }
.arti-item.on .arti-button { background:var(--moss-soft); border-color:var(--line-strong); }
.arti-button:disabled { opacity:.6; }
.arti-face { width:34px; height:34px; border-radius:11px; background:var(--paper-deep); color:var(--forest); display:grid; place-items:center; font-family:var(--font-display); font-weight:800; font-size:14px; }
.arti-item.on .arti-face { background:var(--sun); color:var(--forest-deep); }
.arti-copy { display:grid; gap:1px; min-width:0; }
.arti-name { font-weight:700; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.arti-info { font-size:11px; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.arti-badge { font-size:10px; padding:3px 7px; border-radius:999px; background:var(--paper-deep); color:var(--ink-soft); white-space:nowrap; }
.arti-badge.rand { background:var(--sun-soft); color:var(--sun-ink); }
.arti-badge.house { background:var(--moss-soft); color:var(--forest); }
.rail .connection-target { display:grid; grid-template-columns:1fr; gap:2px; margin:12px 6px 0; padding-top:12px; border-top:1px solid var(--line); }
.rail .connection-target > *, .rail .connection-target label[for=house-select], .rail .connection-target label[for=arti-select], .rail #house-select, .rail #house-detail, .rail #arti-select, .rail #arti-detail { grid-column:auto; grid-row:auto; }
.rail .connection-target label { margin:8px 0 5px; font-size:11px; color:var(--ink-soft); }
.rail .connection-target select { min-height:38px; padding:7px 10px; font-size:12px; }
.rail .connection-target .fine-print { margin:4px 0 0; font-size:11px; }
.rail-pref { margin:14px 6px 0; padding:12px; border-radius:12px; border:1px solid var(--line); background:var(--paper); }
.rail-pref b { display:block; font-size:12px; margin-bottom:8px; }
.rail-pref .tag { display:inline-block; font-size:10px; padding:1px 6px; border-radius:6px; background:var(--sun-soft); color:var(--sun-ink); margin-left:4px; vertical-align:middle; font-weight:600; }
.rail-pref .seg2 { display:flex; background:var(--paper-deep); border-radius:999px; padding:3px; }
.rail-pref .seg2 label { flex:1; margin:0; text-align:center; font-size:12px; font-weight:600; color:var(--ink-soft); padding:7px 4px; border-radius:999px; cursor:pointer; }
.rail-pref .seg2 label:has(input:checked) { background:var(--card); color:var(--forest); box-shadow:0 1px 4px rgba(0,0,0,.08); }
.rail-pref .seg2 input { position:absolute; opacity:0; width:1px; height:1px; }
.rail-pref .seg2 label:has(input:focus-visible) { outline:3px solid #93ad71; }
.rail-pref small { display:block; margin-top:8px; font-size:11px; color:var(--ink-soft); line-height:1.5; }

/* 작업대 탭 */
.work-tabs { display:flex; gap:4px; padding:4px; margin:0 0 14px; background:var(--paper-deep); border-radius:12px; }
.work-tabs button { flex:1; border:0; background:transparent; padding:10px; border-radius:9px; font:inherit; font-size:13px; color:var(--ink-soft); }
.work-tabs button[aria-selected="true"] { background:var(--card); color:var(--forest); font-weight:700; box-shadow:0 2px 6px rgba(0,0,0,.06); }
.work-panel > .section-heading h2 { font-size:18px; }
.work-card .catalog-tabs { display:none; } /* 상단 작업대 탭이 검색/인기 전환을 대신한다 */
.library-toolbar { margin-top:12px; }
.playlist-group { background:var(--card); border-color:var(--line); border-radius:14px; }
.playlist-group > summary { padding:12px 34px 12px 14px; }
.playlist-group[open] > summary { background:linear-gradient(to bottom, transparent, rgba(0,0,0,.02)); border-color:var(--line); }
.playlist-summary-copy strong { color:var(--ink); font-size:14px; }
.playlist-actions .button { border-radius:8px; }
.trash-group > summary .playlist-summary-copy strong { color:var(--ink-soft); }
.library-card .track, .work-panel .track { min-height:44px; }
.track:hover { background:var(--paper); border-radius:8px; }
.track-actions .preview-button, .track-actions .favorite-button, .track-actions .song-delete, .pending-track > .favorite-button { width:38px; height:38px; min-width:38px; padding:8px; border-color:transparent; background:transparent; color:var(--ink-soft); opacity:.6; transition:opacity .15s, background .15s, border-color .15s; }
.track:hover .track-actions button, .track:focus-within .track-actions button, .track-actions button:focus-visible { opacity:1; }
.track-actions button:hover:not(:disabled) { border-color:var(--line); background:var(--card); color:var(--forest); }
.track-actions .favorite-button.is-liked { opacity:1; color:var(--clay); background:transparent; border-color:transparent; }
.track-actions .song-delete:hover:not(:disabled) { color:var(--clay); background:var(--clay-soft); border-color:transparent; }
.catalog-detail { background:var(--paper); border-color:var(--line); }
.button.danger-outline { background:var(--clay-soft); }

/* 담기 패널 */
.compose-card { background:var(--card); border-color:var(--line); padding:18px; }
.compose-steps { list-style:none; margin:0 0 12px; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:4px; }
.compose-steps li { text-align:center; font-size:11px; color:var(--ink-soft); padding:9px 2px 5px; border-top:3px solid var(--line); transition:border-color .2s; }
.compose-steps li.done { border-color:var(--moss); color:var(--forest); }
.compose-steps li.cur { border-color:var(--sun); color:var(--ink); font-weight:700; }
.target-block { padding:12px; border-radius:12px; background:var(--moss-soft); border:1px solid #d5e0c4; }
.target-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.target-head h3 { font-size:12px; color:var(--forest); }
.target-head .text-button { padding:2px 4px; font-size:11px; }
.target-block .compose-target { padding:0; background:transparent; margin-top:6px; font-size:13px; font-weight:700; color:var(--forest); }
.target-block .subtle { font-size:12px; margin-top:4px; }
.target-block details { margin-top:8px; }
.target-block .song-list { max-height:220px; background:var(--card); border-radius:8px; padding:6px 6px 6px 26px; margin:8px 0 0; }
.target-block .current-song { padding:6px 4px; }
.mode-seg { display:inline-flex; margin:10px 0 0; background:var(--card); border:1px solid var(--line); border-radius:999px; padding:2px; gap:0; }
.mode-seg .button { border:0; border-radius:999px; padding:6px 12px; font-size:12px; background:transparent; }
.mode-seg .button:hover:not(:disabled) { background:var(--paper); }
.target-block #draft-mode { margin-top:10px; }
.target-block #draft-mode:empty { display:none; }
.target-block > .fine-print:last-child { margin-top:8px; font-size:11px; }
.selection-toolbar { margin:10px 0 6px; }
.compose-card label[for=playlist-name] { margin-top:16px; }
.compose-limits { display:flex; justify-content:space-between; font-size:12px; color:var(--ink-soft); margin:8px 0 12px; min-height:18px; }
.compose-limits.over { color:#8f4a37; font-weight:700; }
#publish-button { margin-top:0; padding:14px; font-size:15px; font-weight:800; border-radius:12px; }
#save-library-button { margin-top:8px; }
.order-toolbar { background:var(--paper); border-color:var(--line); }
.selected-track.order-picked { background:var(--moss-soft); }

/* 작업 기록 타임라인 */
.operations-card { padding:18px 22px; margin:0 0 60px; position:relative; z-index:2; }
.history-details > summary { display:flex; justify-content:space-between; align-items:center; color:var(--ink); font-size:16px; }
.history-details > summary .subtle { float:none; font-size:11px; }
.operations-list { margin-top:8px; }
.operation { display:grid; grid-template-columns:18px 1fr; column-gap:12px; padding:12px 0; border-color:var(--line); }
.operation::before { content:""; width:10px; height:10px; border-radius:50%; background:var(--moss); margin-top:6px; grid-row:1 / span 4; }
.operation.op-running::before { background:var(--sun); animation:blink 1.2s infinite; }
.operation.op-needs-check::before { background:var(--sun); }
.operation.op-failed::before { background:var(--clay); }
.operation.op-resolved::before { background:var(--line-strong); }
@keyframes blink { 50% { opacity:.35; } }
.operation-top { grid-column:2; }
.operation-message { grid-column:2; margin:4px 0; color:var(--ink); }
.operation > .fine-print, .operation > .text-button { grid-column:2; }
.operation-detail { grid-column:2; font-size:11px; color:var(--ink-soft); margin:2px 0 0; }
.operation-detail > summary { font-size:11px; color:var(--ink-soft); }
.operation .text-button.danger-text { padding-left:0; margin-top:4px; }

footer { max-width:1400px; margin:0 auto; color:var(--ink-soft); }

/* 반응형 */
@media (max-width:1180px) {
  .bench { grid-template-columns:240px minmax(0,1fr); }
  .side-column { grid-column:1 / -1; position:static; }
  .rail { position:static; }
  .now-strip .device { grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"head title ctl" "facts play ctl" "mode mode vol" "reason reason reason" "status status status" "queue queue queue" "diag diag diag"; }
  .now-strip .shuffle-controls { justify-self:start; }
}
@media (max-width:800px) {
  .site-header { height:auto; padding:10px 16px; flex-wrap:wrap; }
  .site-header .header-nav { order:3; width:100%; justify-content:space-between; }
  .brand small { display:none; }
.brand-heart { color:var(--clay); margin-left:5px; font-size:17px; vertical-align:-1px; animation:beat 2.4s ease-in-out infinite; display:inline-block; }
@keyframes beat { 0%,100% { transform:scale(1); } 14% { transform:scale(1.18); } 28% { transform:scale(1); } 42% { transform:scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .brand-heart { animation:none; } }
  .now-strip { top:0; position:static; }
  .now-strip-inner { padding:8px 16px 10px; }
  .now-strip .device { grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"head ctl" "title ctl" "play play" "facts facts" "mode vol" "reason reason" "status status" "queue queue" "diag diag"; }
  .now-strip .device-controls .button { width:36px; height:36px; }
  .now-strip .device-controls .button::before { line-height:36px; }
  main { padding:0 16px; }
  .bench { grid-template-columns:1fr; gap:16px; padding-top:16px; }
  .rail-card { padding:14px 10px; }
  .account-menu .account-section { right:-8px; }
  html { scroll-padding-top:70px; }
}

.firmware-box { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:8px; }
.firmware-box .fine-print { flex-basis:100%; }
.now-strip .firmware-box .button.secondary { background:transparent; border-color:rgba(255,255,255,.3); color:#f3f0e6; font-size:12px; padding:7px 10px; }
.now-strip .firmware-box .button.danger-outline { font-size:12px; padding:7px 10px; }

/* Current work-panel DOM and iPhone viewport support. */
html { scroll-padding-top:var(--anchor-offset,76px); }
.now-strip { top:var(--header-height,60px); max-height:min(340px,40svh); overflow-y:auto; overscroll-behavior:contain; }
.rail, .side-column { position:static; }
.order-check { display:flex; align-items:center; justify-content:center; flex:0 0 44px; min-height:44px; margin:0; cursor:pointer; }
.track-selection { display:flex; align-items:center; justify-content:center; flex:0 0 44px; width:44px; min-height:44px; margin:0; cursor:pointer; }
.work-panel .track-actions { flex-direction:row; align-items:center; gap:4px; }
.work-panel .track-actions .preview-button,
.work-panel .track-actions .favorite-button,
.work-panel .track-actions .song-delete,
.work-panel .pending-track > .favorite-button { width:44px; height:44px; min-width:44px; opacity:1; }
.work-panel .track-list { max-height:none; overflow:visible; scrollbar-gutter:auto; }
.site-header, .now-strip-inner, main, footer { padding-left:max(24px,env(safe-area-inset-left)); padding-right:max(24px,env(safe-area-inset-right)); }
.site-header { padding-top:max(10px,env(safe-area-inset-top)); height:auto; min-height:60px; }
footer { padding-bottom:max(24px,env(safe-area-inset-bottom)); }
.account-menu .account-section { max-height:calc(var(--visual-height,100dvh) - var(--header-height,60px) - 16px); overflow:auto; }

/* Keep the close button visible while the whole editor body can scroll. */
#order-dialog[open] { position:fixed; top:calc(var(--visual-top,0px) + max(8px,env(safe-area-inset-top))); margin:0 auto; height:min(900px,calc(var(--visual-height,100dvh) - max(8px,env(safe-area-inset-top)) - 8px)); max-height:calc(var(--visual-height,100dvh) - max(8px,env(safe-area-inset-top)) - 8px); }
#order-dialog-body { overflow:auto; overscroll-behavior:contain; }
#order-dialog #order-editor { flex:none; min-height:min-content; }
#order-dialog .order-toolbar { position:static; }
#order-dialog .selection-list { flex:none; overflow:visible; max-height:none; }
#order-dialog .duplicates-body { max-height:190px; }

@media (max-width:800px), (max-width:1000px) and (max-height:500px) {
  :root { -webkit-text-size-adjust:100%; text-size-adjust:100%; background-attachment:scroll; }
  html { scrollbar-gutter:auto; }
  .site-header, .now-strip-inner, main, footer { padding-left:max(16px,env(safe-area-inset-left)); padding-right:max(16px,env(safe-area-inset-right)); }
  .site-header { gap:4px 12px; flex-wrap:wrap; }
  .header-nav { display:flex; order:3; width:100%; justify-content:space-between; gap:4px; }
  .header-nav a { display:flex; align-items:center; min-height:44px; padding:6px; }
  .account-menu > summary { min-height:44px; display:flex; align-items:center; }
  .account-menu .account-section { right:0; }
  .account-section .section-heading, .account-actions { flex-wrap:wrap; }
  html[data-keyboard-open] .site-header { position:static; }
  .bench { grid-template-columns:minmax(0,1fr); gap:16px; }
  .rail, .side-column { position:static; grid-column:auto; grid-row:auto; }
  .now-strip { position:static; max-height:none; overflow:visible; }
  .arti-rail { display:flex; overflow-x:auto; gap:8px; padding-bottom:6px; scroll-snap-type:x proximity; }
  .arti-item { flex:0 0 172px; min-width:0; scroll-snap-align:start; }
  .arti-button { grid-template-columns:34px minmax(0,1fr); }
  .arti-badge { grid-column:2; justify-self:start; }
  .rail .connection-target { grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 12px; }
  .rail .connection-target label[for=house-select] { grid-column:1; grid-row:1; }
  .rail #house-select { grid-column:1; grid-row:2; }
  .rail #house-detail { grid-column:1; grid-row:3; }
  .rail .connection-target label[for=arti-select] { grid-column:2; grid-row:1; }
  .rail #arti-select { grid-column:2; grid-row:2; }
  .rail #arti-detail { grid-column:2; grid-row:3; }
  .check-label, .rail-pref .seg2 label { min-height:44px; }
  input[type=text], input[type=number], select, textarea,
  .search-form input, #library-query, .rail .connection-target select, .source-result textarea { font-size:16px; min-height:44px; }
  select { appearance:none; -webkit-appearance:none; overflow:hidden; text-overflow:ellipsis; padding-right:32px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%235b665c' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:12px 8px; }
  .rail .connection-target select { padding-right:32px; }
  button, .text-button, summary { min-height:44px; }
  .button { font-size:14px; }
  .work-tabs button { font-size:14px; padding:8px 4px; }
  .section-heading { flex-wrap:wrap; gap:8px; }
  .section-heading > *, .target-head > *, .history-details > summary > *, .operation-top > * { min-width:0; }
  .history-details > summary, .operation-top { flex-wrap:wrap; }
  .work-panel .section-heading h2 { font-size:20px; }
  .now-strip .device { grid-template-columns:minmax(0,1fr); grid-template-areas:"head" "title" "play" "facts" "ctl" "mode" "vol" "reason" "status" "queue" "diag"; row-gap:8px; }
  .now-strip .device-header, .now-strip .device-facts { flex-wrap:wrap; }
  .now-strip .device-name { white-space:normal; overflow-wrap:anywhere; }
  .now-strip .device-controls { flex-wrap:wrap; gap:8px; }
  .now-strip .device-controls .button { width:44px; height:44px; min-width:44px; }
  .now-strip .device-controls .button::before { line-height:44px; }
  .now-strip .device-controls .button[aria-label$=" 재생"] { width:46px; height:46px; }
  .now-strip .shuffle-controls .button { min-height:44px; }
  .now-strip .volume-row { flex-wrap:wrap; }
  .now-strip .device-song-list { grid-template-columns:minmax(0,1fr); }
  .now-strip .device-song .button { width:44px; height:44px; min-width:44px; }
  .work-panel .track { display:grid; grid-template-columns:44px minmax(0,1fr); gap:4px 8px; padding:10px 0; }
  .work-panel .track-info { grid-column:2; }
  .work-panel .track-name { white-space:normal; overflow-wrap:anywhere; font-size:14px; }
  .work-panel .track-meta { font-size:12px; }
  .work-panel .track-actions { grid-column:2; flex-wrap:wrap; }
  .work-panel .playlist-group-body { padding:0 10px 12px; }
  .work-panel .pending-track > .favorite-button { grid-column:2; }
  .work-panel .pending-track > .fine-print { grid-column:2; white-space:normal; }
  .playlist-actions .button, .list-pagination .button { font-size:13px; }
  .order-pick-summary { flex-wrap:wrap; gap:4px; }
  .order-position input { font-size:16px; min-height:44px; }
  .order-position label { font-size:13px; }
  .order-drag-handle { display:none; }
  .selected-track .order-pick { width:24px; height:24px; }
  .selected-track .selected-name { min-height:44px; font-size:14px; }
  #order-dialog { width:calc(100% - max(8px,env(safe-area-inset-left)) - max(8px,env(safe-area-inset-right))); padding:12px; padding-bottom:max(12px,env(safe-area-inset-bottom)); border-radius:14px; }
  #order-dialog .selected-track { padding:8px 0; }
  #order-dialog .selected-name { font-size:14px; }
  .order-dialog-heading h2 { font-size:18px; }
  .order-dialog-heading .button { font-size:13px; }
  .popular-toolbar select { min-width:0; flex-basis:100%; }
}