/* 각 프로그램의 내부 레이아웃 */

/* 환영 창 */
.welcome { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.wel-hero { position: relative; flex: none; height: 110px; overflow: hidden; box-shadow: var(--in); }
.wel-hero img { position: absolute; left: 0; top: 50%; width: 100%; min-width: 620px; transform: translateY(-46%); }
.wel-hero-text { position: absolute; left: 12px; bottom: 8px; display: flex; flex-direction: column; color: #fff; text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }
.wel-hero-text b { font-size: 24px; line-height: 1.1; }
.wel-hero-text span { align-self: flex-start; margin-top: 3px; padding: 1px 6px; background: #000; text-shadow: none; }
.wel-main { flex: 1; min-height: 0; display: flex; gap: 10px; }
.wel-cards { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; overflow: auto; }
.wel-card { padding: 7px 10px; background: var(--paper); box-shadow: var(--in); }
.wel-card-body { padding-top: 3px; overflow-wrap: anywhere; }
.wel-card.tip { flex: 1; background: #ffffe1; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.tip-text { flex: 1; }
.wel-buttons { flex: none; width: 118px; display: flex; flex-direction: column; gap: 5px; }
.wel-btn { width: 100%; padding-left: 4px; padding-right: 4px; }
.wel-foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font: 12px/1.3 var(--font-small); }
.wel-visits { display: inline-flex; align-items: center; gap: 4px; }
.chip-dot { display: inline-block; width: 9px; height: 9px; margin-right: 4px; box-shadow: 0 0 0 1px #000; }

/* 일정 분류 색 */
.cat-stream { background: #ef3e4d; color: #fff; }
.cat-special { background: #ffd24a; color: #000; }
.cat-collab { background: #1f8f5a; color: #fff; }
.cat-event { background: #8a3fd1; color: #fff; }
.cat-rest { background: #808080; color: #fff; }

/* 프로필 */
.profile-top { display: flex; gap: 14px; flex-wrap: wrap; }
.profile-left { flex: none; width: 200px; }
.profile-frame { display: block; padding: 2px; border: 0; width: 200px; height: 200px; background: #2a2a2a; box-shadow: var(--in); cursor: var(--cur-hand); }
.profile-photo { width: 196px; height: 196px; }
.profile-left .hint { margin-top: 3px; }
.profile-right { flex: 1; min-width: 220px; }
.profile-name { font-size: 24px; line-height: 1.1; font-family: var(--font-small); font-weight: 700; color: var(--gam); text-shadow: 1px 1px 0 #000; display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; padding-bottom: 6px; }
.profile-name small { font: 12px/1 var(--font-small); color: #000; text-shadow: none; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; margin: 0; }
.kv dt { color: #404040; }
.kv dd { margin: 0; display: flex; align-items: center; gap: 6px; }
.swatch { display: inline-block; width: 14px; height: 14px; box-shadow: 0 0 0 1px #000; }
.swatch.big { width: 30px; height: 30px; }
.palette-row { display: flex; gap: 8px; flex-wrap: wrap; padding: 6px 2px; }
.dday-row { display: flex; gap: 6px; margin-top: 9px; }
.dday { flex: 1; padding: 5px 8px; background: #000; color: #30e060; display: flex; flex-direction: column; }
.dday b { font-size: 12px; line-height: 1.5; }
.dday span { font: 12px/1.3 var(--font-small); color: #c0c0c0; }
.sheet-btn { display: block; width: 100%; padding: 2px; border: 0; cursor: var(--cur-hand); }
.sheet-btn img { width: 100%; height: auto; }
.profile-sheet .hint { margin: 6px 0 10px; }

/* 일정표 */
.cal-layout { flex: 1; min-height: 0; display: flex; gap: 8px; padding: 6px; }
.cal-left { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cal-toolbar { flex: none; display: flex; align-items: center; gap: 4px; }
.cal-toolbar .btn { padding: 2px 9px; }
.cal-month { flex: 1; text-align: center; font: 700 12px/27px var(--font-small); background: #000; color: #ffd24a; letter-spacing: 1px; }
.cal-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); grid-template-rows: 22px; gap: 1px; background: #a0a0a0; padding: 2px; overflow: auto; }
.cal-head { display: grid; place-items: center; background: var(--face); font: 12px/1 var(--font-small); box-shadow: var(--out-thin); }
.cal-head.sun, .cal-cell.sun .cal-day { color: #d0101f; }
.cal-head.sat, .cal-cell.sat .cal-day { color: #0030c0; }
.cal-cell { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 1px; min-height: 52px; min-width: 0; overflow: hidden; padding: 2px 3px; background: #fff; border: 0; text-align: left; cursor: var(--cur-hand); }
.cal-cell.empty { background: #d4d4d4; cursor: inherit; }
.cal-cell:hover:not(.empty) { background: #fff4c8; }
.cal-cell.today .cal-day { background: var(--gam); color: #fff; padding: 0 4px; align-self: flex-start; }
.cal-cell.sel { outline: 2px solid var(--select); outline-offset: -2px; background: #ffe8ea; }
.cal-cell:focus-visible { outline: 1px dotted #000; outline-offset: -3px; }
.cal-day { font: 12px/15px var(--font-small); }
.cal-chips { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
/* 일정 제목은 두 줄까지 보여 준다 */
.chip { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; padding: 0 2px; font: 12px/14px var(--font-small); overflow: hidden; overflow-wrap: anywhere; }
.chip-more { font: 12px/12px var(--font-small); color: #404040; }
.cal-detail { flex: 0 0 240px; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 8px; background: var(--paper); box-shadow: var(--in); overflow: auto; }
.cal-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; padding-bottom: 6px; box-shadow: 0 1px var(--lo), 0 2px var(--hi); }
.cal-detail-head h3 { font: 700 12px/1.5 var(--font-small); display: flex; align-items: center; gap: 6px; }
.today-tag { padding: 0 4px; background: var(--gam); color: #fff; }
.ev-list { display: flex; flex-direction: column; gap: 8px; }
.ev-row { display: flex; gap: 7px; align-items: flex-start; }
.ev-cat { flex: none; padding: 1px 4px; font: 12px/15px var(--font-small); box-shadow: 0 0 0 1px #000; }
.ev-main { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ev-note { color: #404040; font: 12px/1.4 var(--font-small); padding-top: 2px; }
.ev-actions { display: flex; gap: 4px; padding-top: 4px; }
.ev-actions .btn { min-height: 23px; padding: 1px 8px; font: 12px/1 var(--font-small); }
.cal-upcoming { margin-top: auto; padding-top: 8px; box-shadow: 0 -1px var(--lo); }
.up-list { display: flex; flex-direction: column; gap: 3px; padding-top: 4px; }
.up-list .linklike { font: 12px/1.4 var(--font-small); }
.error-line { display: flex; gap: 5px; align-items: center; color: #b00000; font: 12px/1.3 var(--font-small); }

/* 탐색기 / 바로가기 */
.explorer { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.addressbar { flex: none; display: flex; align-items: center; gap: 6px; padding: 2px 4px 4px; }
.address-input { flex: 1; min-width: 0; display: flex; align-items: center; gap: 5px; padding: 3px 6px; white-space: nowrap; overflow: hidden; }
.link-grid { flex: 1; min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 4px; padding: 6px; align-content: start; }
.link-card { display: flex; gap: 10px; padding: 6px; color: inherit; text-decoration: none; min-width: 0; }
a.link-card:hover, a.link-card:focus-visible { background: var(--select); color: var(--select-ink); outline: none; }
a.link-card:hover .link-url, a.link-card:focus-visible .link-url { color: #ffe0e0; }
.link-card.disabled { color: var(--lo); }
.link-card.disabled .link-thumb { filter: grayscale(.8); }
.link-thumb { flex: none; width: 84px; height: 84px; object-fit: cover; box-shadow: 0 0 0 1px #000; }
.link-thumb-logo { display: grid; place-items: center; background: #f0f0f0; }
.link-thumb-logo img { width: 56px; height: 56px; object-fit: contain; }
.link-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.link-title { display: flex; align-items: center; gap: 5px; font: 700 12px/1.4 var(--font-small); }
.link-logo { flex: none; }
.link-desc { line-height: 1.3; }
.link-url { margin-top: auto; font: 12px/1.3 var(--font-small); color: #606060; overflow-wrap: anywhere; }

/* 공지 */
.notice-app { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.notice-split { flex: 1; min-height: 0; display: flex; gap: 2px; padding: 0 2px 2px; }
.notice-list { flex: none; width: 34%; min-width: 150px; overflow: auto; }
.notice-item { display: flex; flex-direction: column; gap: 1px; width: 100%; padding: 4px 6px; background: none; border: 0; text-align: left; overflow-wrap: anywhere; line-height: 1.25; }
.notice-item small { font: 12px/1.2 var(--font-small); color: #606060; }
.notice-item:hover { background: #f0e8e8; }
.notice-item.sel { background: var(--select); color: var(--select-ink); }
.notice-item.sel small { color: #ffe0e0; }
.pin { color: var(--gam); }
.notice-item.sel .pin { color: #ffd24a; }
.notice-pane { flex: 1; min-width: 0; overflow: auto; background: var(--paper); box-shadow: var(--in); display: flex; flex-direction: column; }
.notepad { padding: 10px 12px; user-select: text; -webkit-user-select: text; }
.notepad h3 { font: 700 12px/1.5 var(--font-small); }
.notepad-meta { color: #606060; font: 12px/1.3 var(--font-small); padding-bottom: 8px; margin-bottom: 8px; box-shadow: 0 1px #c0c0c0; }
.notice-form { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 6px; background: var(--face); }
.notepad-edit { flex: 1; min-height: 120px; }
.notice-form-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* 방명록 */
.gb-app { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 4px; padding: 4px; }
.gb-banner { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 4px 8px; background: #000; color: #ffd24a; }
.gb-iam b { color: #fff; }
.gb-badge-wrap { display: inline-flex; align-items: center; gap: 6px; }
.gb-badge { width: 112px; min-height: 25px; padding-top: 1px; padding-bottom: 1px; color: #000; }
.gb-list { flex: 1 1 40%; min-height: 110px; overflow: auto; }
.gb-entry { padding: 6px 8px; box-shadow: 0 1px #d0d0d0; }
.gb-entry-head { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.gb-entry-head small { font: 12px/1 var(--font-small); color: #707070; }
.gb-del { margin-left: auto; }
.gb-entry-emojis { display: flex; flex-wrap: wrap; gap: 2px; padding-top: 3px; }
.gb-more { padding: 8px; text-align: center; }
.gb-composer { flex: none; display: flex; flex-direction: column; gap: 4px; }
.gb-compose-row { display: flex; gap: 4px; align-items: stretch; }
.gb-slots { flex: 1; min-width: 0; display: flex; gap: 1px; flex-wrap: wrap; min-height: 48px; }
.gb-slot { width: 42px; height: 42px; padding: 1px; background: #eee; border: 0; box-shadow: inset 0 0 0 1px #ddd; }
.gb-slot.filled { background: #fff; cursor: var(--cur-hand); }
.gb-slot.filled:hover { background: #ffdede; }
.gb-compose-row .btn { flex: none; width: 82px; padding: 3px 4px; }
.gb-picker { display: flex; flex-wrap: wrap; gap: 1px; max-height: 190px; overflow-y: auto; }
.gb-pick { padding: 1px; background: none; border: 0; cursor: var(--cur-hand); }
.gb-pick:hover { background: var(--select); }
.gb-pick:focus-visible { outline: 1px dotted #000; outline-offset: -1px; }
.gb-pick:active { transform: translate(1px, 1px); }
@media (max-width: 639px) {
  .gb-picker { max-height: 130px; }
  .gb-slot { width: 34px; height: 34px; }
  .gb-slot img { width: 32px; height: 32px; }
  .gb-entry-emojis img { width: 48px; height: 48px; }
}

/* 감군Amp */
.amp { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 5px; padding: 6px; container-type: inline-size; }
.amp-display { flex: none; display: flex; gap: 8px; padding: 6px; background: #000; box-shadow: var(--in); }
.amp-thumb { flex: none; width: 96px; height: 96px; background: #0a160f; box-shadow: 0 0 0 1px #30e060; }
.amp-side { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; }
.amp-time { font-size: 24px; line-height: 1; font-family: var(--font-small); font-weight: 700; color: #30e060; letter-spacing: 1px; }
.amp-vis { width: 100%; height: 39px; flex: none; }
.amp-title { overflow: hidden; color: #30e060; font: 12px/18px var(--font-small); padding: 0 2px; background: #0a160f; overflow-wrap: anywhere; }
.amp-title span { display: inline-block; min-width: 100%; }
.amp-controls { flex: none; display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.amp-btn { min-width: 40px; padding: 2px 6px; }
.amp-controls .btn.small { margin-left: 2px; }
.amp-volume { flex: none; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.amp-list { flex: 1; min-height: 60px; overflow: auto; background: #000; color: #30e060; counter-reset: none; }
.amp-list .empty-note { color: #30e060; }
.amp-list li { display: flex; align-items: center; gap: 4px; }
.amp-track { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 2px 6px; background: none; border: 0; color: #30e060; text-align: left; font: 12px/1.4 var(--font-small); overflow-wrap: anywhere; }
.amp-mini { flex: none; object-fit: cover; }
.amp-track:hover { background: #123; }
.amp-track.on { background: #18401f; color: #fff; }
.amp-admin:empty { display: none; }
.amp-admin { flex: none; }
/* 창을 키우면 썸네일도 함께 커진다 */
@container (min-width: 390px) {
  .amp-thumb { width: 192px; height: 192px; }
  .amp-vis { height: 78px; }
}

/* 룰렛 */
.rl-app { flex: 1; min-height: 0; display: flex; gap: 8px; padding: 8px; }
.rl-stage { flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.rl-wheel { width: 360px; height: 360px; max-width: 100%; }
.rl-result { width: 100%; padding: 4px 8px; background: #000; color: #30e060; text-align: center; font: 700 12px/18px var(--font-small); overflow-wrap: anywhere; }
.rl-result.on { color: #ffd24a; animation: blink 1s steps(2) 3; }
.rl-spin { min-width: 140px; }
.rl-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.rl-form { flex: none; display: flex; align-items: center; gap: 4px; }
.rl-form .field:first-child { flex: 1; min-width: 0; }
.rl-count { flex: none; width: 58px; padding-right: 2px; }
.rl-list { flex: 1; min-height: 80px; overflow: auto; }
.rl-row { display: flex; align-items: center; gap: 5px; padding: 2px 3px; }
.rl-swatch { flex: none; width: 12px; height: 12px; box-shadow: 0 0 0 1px #000; }
.rl-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rl-pct { flex: none; width: 44px; text-align: right; font: 12px/1 var(--font-small); }
.rl-side .row-end { margin-top: 0; }
@media (max-width: 719px) {
  .rl-app { flex-direction: column; overflow: auto; }
  .rl-wheel { width: 270px; height: 270px; }
  .rl-side { flex: none; }
  .rl-list { max-height: 220px; }
}

/* 군밤 줄서기 */
.sn-app { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.sn-hud { width: 100%; max-width: 366px; }
.sn-led { display: flex; align-items: center; gap: 5px; }
.sn-led small { font: 12px/1 var(--font-small); }
.sn-stage { position: relative; padding: 3px; max-width: 100%; touch-action: none; }
.sn-board { display: block; width: 360px; max-width: 100%; height: auto; }
.sn-overlay { position: absolute; inset: 3px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px; border: 0; background: repeating-conic-gradient(rgba(0, 0, 0, .75) 0 25%, rgba(0, 0, 0, .35) 0 50%) 0 0 / 4px 4px; color: #fff; text-shadow: 1px 1px 0 #000; cursor: var(--cur-hand); }
.sn-overlay b { font-size: 16px; color: #ffd24a; }
.sn-pad { display: none; grid-template: repeat(2, 42px) / repeat(3, 56px); gap: 3px; }
.sn-pad-up { grid-area: 1 / 2; }
.sn-pad-left { grid-area: 2 / 1; }
.sn-pad-down { grid-area: 2 / 2; }
.sn-pad-right { grid-area: 2 / 3; }
@media (pointer: coarse), (max-width: 639px) {
  .sn-pad { display: grid; }
}

/* 미디어 플레이어 */
.media { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 3px; padding: 3px; }
.media-stage { flex: 1; min-height: 0; background: #000; box-shadow: var(--in); padding: 2px; }
.media-video { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; display: block; }
.media-controls { flex: none; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.easter-video { image-rendering: auto; }

/* 뱃지 도감 */
.badge-app { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.badge-current { flex: none; display: flex; gap: 12px; align-items: center; }
.badge-big { flex: none; width: 92px; height: 92px; display: grid; place-items: center; background: #008080; }
.badge-none { color: #fff; font-size: 24px; font-family: var(--font-small); font-weight: 700; }
.badge-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.badge-slider { flex: none; display: flex; align-items: center; gap: 8px; }
.badge-slider span { white-space: nowrap; }
.badge-months { min-width: 52px; text-align: right; }
.badge-grid { flex: 1; min-height: 100px; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 2px; align-content: start; background: #fff; }
.badge-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 2px; background: none; border: 0; cursor: var(--cur-hand); }
.badge-cell small { font: 12px/1.2 var(--font-small); }
.badge-cell.locked img { filter: brightness(0); opacity: .35; }
.badge-cell.locked small { color: #909090; }
.badge-cell:hover { background: #ffe8ea; }
.badge-cell.now { background: var(--select); color: var(--select-ink); }

/* 땡고추 찾기 */
.mine-app { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.mine-top { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; }
.mine-hud { width: 100%; max-width: 396px; display: flex; align-items: center; justify-content: space-between; padding: 5px 7px; background: var(--face); }
.mine-face { width: 34px; height: 34px; min-height: 34px; padding: 2px !important; }
.mine-scroll { max-width: 100%; overflow: auto; }
.mine-board { display: grid; width: max-content; padding: 3px; background: var(--face); touch-action: manipulation; }
.mine-cell {
  width: 24px; height: 24px; padding: 0; display: grid; place-items: center; background: var(--face); border: 0; box-shadow: var(--out);
  font: 700 12px/1 var(--font-small);
}
.mine-cell:active:not(.open) { box-shadow: inset 1px 1px var(--lo); }
.mine-cell.open { box-shadow: inset 1px 1px var(--lo); }
.mine-cell.boom { background: #ff3030; }
.n1 { color: #0000ff; } .n2 { color: #007b00; } .n3 { color: #ff0000; } .n4 { color: #00007b; }
.n5 { color: #7b0000; } .n6 { color: #007b7b; } .n7 { color: #000; } .n8 { color: #7b7b7b; }
.mine-best { color: var(--title-a); }

/* 사진첩 */
.gal-app { flex: 1; min-height: 0; display: flex; gap: 2px; padding: 2px; }
.gal-list { flex: none; width: 176px; overflow: auto; }
.gal-item { display: flex; align-items: center; gap: 6px; width: 100%; padding: 3px 5px; background: none; border: 0; text-align: left; font: 12px/1.2 var(--font-small); overflow-wrap: anywhere; }
.gal-item img { flex: none; object-fit: cover; box-shadow: 0 0 0 1px #000; }
.gal-item:hover { background: #f0e8e8; }
.gal-item.sel { background: var(--select); color: var(--select-ink); }
.gal-stage { flex: 1; min-width: 0; overflow: auto; background: #008080; padding: 6px; display: grid; }
.gal-img { max-width: 100%; max-height: 100%; margin: auto; cursor: zoom-in; object-fit: contain; box-shadow: 2px 2px 0 rgba(0, 0, 0, .5); }
.gal-img.full { max-width: none; max-height: none; cursor: zoom-out; }
@media (max-width: 639px) {
  .gal-app, .notice-split { flex-direction: column; }
  .gal-list { width: 100%; height: 106px; flex: none; }
  .notice-list { width: 100%; height: 130px; flex: none; }
  .cal-layout { flex-direction: column; overflow: auto; }
  .cal-left { flex: none; }
  .cal-grid { flex: none; grid-auto-rows: 54px; }
  .cal-detail { flex: none; min-height: 180px; }
  .chip { font-size: 0; height: 5px; line-height: 5px; padding: 0; }
  .chip-more { display: none; }
  .wel-main { flex-direction: column; overflow: auto; }
  .wel-cards { overflow: visible; flex: none; }
  .wel-buttons { width: 100%; flex-direction: row; flex-wrap: wrap; }
  .wel-buttons .btn { flex: 1 1 40%; }
  .wel-buttons .grow { display: none; }
  .wel-hero { height: 86px; }
  .profile-left { width: 100%; display: flex; flex-direction: column; align-items: center; }
  .link-grid { grid-template-columns: 1fr; }
}

/* 규칙 */
.rule-list { list-style: decimal; padding: 6px 0 10px 26px; display: flex; flex-direction: column; gap: 5px; }
.rules-image img { max-width: 100%; height: auto; margin: 0 auto; box-shadow: 0 0 0 1px #000; }
.tabpanel .notepad { background: var(--paper); box-shadow: var(--in); padding: 12px; }

/* 내 컴퓨터 */
.sys-general { display: grid; grid-template-columns: 90px 1fr; gap: 8px 12px; }
.sys-art { padding-top: 6px; display: grid; justify-items: center; align-content: start; }
.sys-text p { line-height: 1.45; }
.sys-text .indent { padding: 0 0 8px 14px; }
.sys-visits { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.led.visits { font-size: 12px; min-width: 76px; }
.device-tree { padding: 8px; overflow: auto; }
.device-tree summary { display: flex; align-items: center; gap: 5px; list-style: none; cursor: var(--cur-hand); font-family: var(--font-small); font-weight: 700; font-size: 12px; }
.device-tree summary::before { content: '+'; width: 11px; height: 11px; display: grid; place-items: center; font: 12px/1 var(--font-small); box-shadow: 0 0 0 1px #808080; }
.device-tree details[open] > summary::before { content: '-'; }
.device-tree summary::-webkit-details-marker { display: none; }
.device-tree details ul { padding: 3px 0 8px 22px; }
.device-leaf { display: flex; gap: 8px; flex-wrap: wrap; }
.device-leaf b { min-width: 60px; font-weight: 400; color: #404040; font-family: var(--font); }

/* 휴지통 */
.trash-app { flex: 1; min-height: 0; overflow: auto; margin: 2px; }
.details { width: 100%; border-collapse: collapse; font: 12px/1.3 var(--font-small); }
.details th { padding: 3px 6px; text-align: left; font-weight: 400; background: var(--face); box-shadow: var(--out-thin); position: sticky; top: 0; }
.details td { padding: 3px 6px; white-space: nowrap; }
.details td img { display: inline-block; vertical-align: -3px; }
.details tbody tr { cursor: var(--cur-hand); }
.details tbody tr:hover, .details tbody tr:focus-visible { background: var(--select); color: var(--select-ink); outline: none; }

/* 설정 */
.settings { display: flex; flex-direction: column; gap: 0; }
.settings .form-grid + .form-grid { margin-top: 8px; }
.settings .check { margin: 8px 0; display: flex; }
.monitor { display: grid; justify-items: center; }
.mon-bezel { width: 190px; height: 132px; padding: 10px; background: var(--face); box-shadow: var(--out); }
.mon-screen { position: relative; width: 100%; height: 100%; background: #008080 center / cover no-repeat; box-shadow: var(--in-thin); image-rendering: pixelated; overflow: hidden; }
.mon-screen[data-wp='hi'] { background-image: url('/assets/img/wallpaper-hi.png'); background-size: 80px 80px; background-position: center 4px; }
.mon-screen[data-wp='sea'] { background-color: #000; background-image: url('/assets/img/banner-px.png'); background-size: contain; }
.mon-screen[data-wp='tile'] { background-image: url('/assets/img/wallpaper-tile.png'); background-size: 24px 24px; background-repeat: repeat; }
.mon-screen[data-wp='fireworks'] { background-color: #000; background-image: url('/assets/video/fireworks-poster.webp'); background-size: contain; }
.mon-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 7px; background: var(--face); box-shadow: inset 0 1px #fff; }
.mon-stand { width: 72px; height: 10px; background: var(--face); box-shadow: var(--out); }