/* 모니터 안: 테이프 내용, 대화상자, 부팅 화면. 화면색(앰버/그린/레드/아이스)을 따른다. */

:root { --ph: #ffb000; --ph-dim: #b87c08; --ph-faint: rgba(255, 176, 0, .16); --ph-line: rgba(255, 176, 0, .45); --ph-bg: #140c02; --ph-glow: rgba(255, 176, 0, .42); --ph-ink: #140c02; }
:root[data-scheme='green'] { --ph: #4dff88; --ph-dim: #2aa95a; --ph-faint: rgba(77, 255, 136, .14); --ph-line: rgba(77, 255, 136, .42); --ph-bg: #03120a; --ph-glow: rgba(77, 255, 136, .4); --ph-ink: #03120a; }
:root[data-scheme='red'] { --ph: #ff6b6b; --ph-dim: #b84747; --ph-faint: rgba(255, 90, 90, .16); --ph-line: rgba(255, 107, 107, .45); --ph-bg: #160506; --ph-glow: rgba(255, 80, 80, .42); --ph-ink: #160506; }
:root[data-scheme='ice'] { --ph: #bfe6ff; --ph-dim: #7ba4c0; --ph-faint: rgba(170, 220, 255, .14); --ph-line: rgba(191, 230, 255, .42); --ph-bg: #060d15; --ph-glow: rgba(170, 220, 255, .35); --ph-ink: #060d15; }

:root { --tape-veil: 88%; } /* 테이프가 들어 있을 때 대기 화면을 가리는 정도 */
#glass { font: 15px/1.45 'Galmuri14', 'Malgun Gothic', sans-serif; text-shadow: 0 0 5px var(--ph-glow); }
#glass img, #glass canvas, #glass video { text-shadow: none; }
b, strong { font-family: 'Galmuri11', sans-serif; font-weight: 700; }
.pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.grow { flex: 1; }
.center { text-align: center; }
.hint { color: var(--ph-dim); font: 12px/1.4 'Galmuri11', sans-serif; }
.empty-note { padding: 18px 10px; text-align: center; color: var(--ph-dim); }
.section-title { font: 700 12px/1.3 'Galmuri11', sans-serif; color: var(--ph); letter-spacing: .5px; }
#glass a { color: inherit; }
.row-start, .row-end { display: flex; flex-wrap: wrap; gap: 6px; }
.row-end { justify-content: flex-end; margin-top: 10px; }
.linklike { padding: 0; background: none; border: 0; color: inherit; text-decoration: underline; text-align: left; overflow-wrap: anywhere; }
.span-all { grid-column: 1 / -1; }
.form-grid { display: grid; grid-template-columns: max-content 1fr; gap: 8px 10px; align-items: center; }
.form-label { white-space: nowrap; }

/* 스크롤바 */
#glass * { scrollbar-color: var(--ph-dim) transparent; scrollbar-width: thin; }

/* 대기 화면 */
#standby { position: absolute; inset: 0; background: var(--ph-bg) center / contain no-repeat; image-rendering: pixelated; display: grid; place-items: center; align-content: center; gap: 14px; }
#standby[data-wp='teal']::before { content: 'NO TAPE'; font: 700 clamp(18px, 4cqw, 34px)/1 'Michroma', sans-serif; letter-spacing: 4px; color: var(--ph-dim); }
#standby.behind::before, #standby.behind::after { content: none !important; }
#standby.behind { filter: saturate(.85); }
/* 테이프 화면, 로딩 화면, 밀어서 넘기는 사이 모두 이 막 위에 뜨므로 색과 밝기가 같다 */
#veil { position: absolute; inset: 0; display: none; background: var(--ph-bg); background: color-mix(in srgb, var(--ph-bg) var(--tape-veil), transparent); }
#standby.behind + #veil { display: block; }
#standby[data-wp='teal']::after { content: 'PLEASE INSERT TAPE'; font: 700 clamp(9px, 1.5cqw, 13px)/1 'Michroma', sans-serif; letter-spacing: 3px; color: var(--ph-dim); animation: standby-blink 1.6s steps(2) infinite; }
/* 처음 켰을 때는 무엇을 누를지 알려 준다 */
.calling-start #standby[data-wp='teal']::after { content: 'PRESS START'; }
#standby[data-wp='hi'] { background-image: url('/assets/img/wallpaper-hi.png'); background-size: min(62%, 384px); }
#standby[data-wp='sea'] { background-color: #000; background-image: url('/assets/img/banner-px.png'); }
#standby[data-wp='fireworks'] { background-color: #000; background-image: url('/assets/video/fireworks-poster.webp'); }
#standby[data-wp='tile'] { background-image: url('/assets/img/wallpaper-tile.png'); background-size: 96px 96px; background-repeat: repeat; }
.wall-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
@keyframes standby-blink { 50% { opacity: .35; } }

/* 테이프 틀 */
#tape-view { position: absolute; inset: 0; pointer-events: none; }
.tape { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 14px 18px 12px; pointer-events: auto; }
.tape[data-app='media'], .tape[data-app='gallery'], .tape[data-app='easter'] { background: var(--ph-bg); }
.notepad, .profile-right, .ev-main { user-select: text; -webkit-user-select: text; }
/* 세로 스크롤은 그대로 두고 가로로 밀면 다음 프로그램으로 넘어간다 */
:where(.tape, .tape *), #standby { touch-action: pan-y; }
.mine-scroll, .mine-scroll * { touch-action: manipulation; }
.proj-screen:has(.proj-img.full), .proj-img.full { touch-action: auto; }
.tape-head { flex: none; display: flex; align-items: baseline; gap: 10px; padding-bottom: 5px; margin-bottom: 8px; border-bottom: 1px solid var(--ph-line); font: 700 12px/1.3 'Galmuri11', sans-serif; letter-spacing: .5px; }
.tape-head b { padding: 0 5px; background: var(--ph); color: var(--ph-ink); text-shadow: none; }
.tape-title { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tape-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: auto; outline: none; }
.tape-status { flex: none; display: flex; gap: 12px; flex-wrap: wrap; padding-top: 5px; margin-top: 7px; border-top: 1px solid var(--ph-line); font: 12px/1.3 'Galmuri11', sans-serif; color: var(--ph-dim); }
.status-cell { min-width: 0; }
.status-cell:empty { display: none; }

/* 버튼과 입력 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 28px; padding: 3px 12px;
  background: transparent; color: var(--ph); border: 1px solid var(--ph); text-decoration: none; white-space: nowrap; text-shadow: inherit;
}
.btn:hover:not(:disabled), .btn:focus-visible { background: var(--ph); color: var(--ph-ink); text-shadow: none; outline: none; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn.default { background: var(--ph-faint); box-shadow: inset 0 0 0 1px var(--ph); }
.btn.pressed { background: var(--ph); color: var(--ph-ink); text-shadow: none; }
.btn:disabled { color: var(--ph-dim); border-color: var(--ph-dim); opacity: .55; cursor: default; }
.btn.small { min-height: 24px; padding: 1px 8px; font: 12px/1.2 'Galmuri11', sans-serif; }
.field { width: 100%; min-height: 28px; padding: 3px 6px; background: var(--ph-faint); color: var(--ph); border: 1px solid var(--ph-line); caret-color: var(--ph); user-select: text; -webkit-user-select: text; }
.field::placeholder { color: var(--ph-dim); }
.field:focus { outline: none; border-color: var(--ph); }
select.field option { background: var(--ph-bg); color: var(--ph); }
textarea.field { resize: vertical; line-height: 1.5; }
input[type='checkbox'] { appearance: none; -webkit-appearance: none; width: 14px; height: 14px; margin: 0; flex: none; border: 1px solid var(--ph); background: transparent; }
input[type='checkbox']:checked { background: var(--ph); box-shadow: inset 0 0 0 2px var(--ph-bg); }
input[type='checkbox']:focus-visible { outline: 1px dashed var(--ph); outline-offset: 2px; }
.check { display: inline-flex; align-items: center; gap: 6px; }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 18px; margin: 0; background: transparent; }
.range::-webkit-slider-runnable-track { height: 3px; background: var(--ph-line); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 9px; height: 16px; margin-top: -6.5px; background: var(--ph); }
.range::-moz-range-track { height: 3px; background: var(--ph-line); }
.range::-moz-range-thumb { width: 9px; height: 16px; border: 0; border-radius: 0; background: var(--ph); }
.range:disabled { opacity: .55; }
fieldset.group { border: 1px solid var(--ph-line); margin: 10px 0 0; padding: 8px 10px; }
fieldset.group legend { padding: 0 5px; font: 700 12px/1 'Galmuri11', sans-serif; }
.led { min-width: 44px; padding: 2px 5px; background: #000; color: #ff4a2a; font: 700 12px/18px 'Galmuri11', sans-serif; letter-spacing: 2px; text-align: center; text-shadow: 0 0 6px rgba(255, 70, 40, .8); }
.led.small-led { padding: 0 4px; min-width: 0; display: inline-block; }

/* 탭 */
.tabs { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tabstrip { flex: none; display: flex; gap: 4px; margin-bottom: -1px; }
.tab { padding: 3px 12px; background: none; color: var(--ph-dim); border: 1px solid var(--ph-line); }
.tab.on { color: var(--ph-ink); background: var(--ph); border-color: var(--ph); text-shadow: none; }
.tab:focus-visible { outline: 1px dashed var(--ph); outline-offset: 1px; }
.tabpanel { flex: 1; min-height: 0; overflow: auto; padding: 12px; border: 1px solid var(--ph-line); }

/* 대화상자 */
#modals { position: absolute; inset: 0; z-index: 30; pointer-events: none; color: var(--ph); font: 15px/1.45 'Galmuri14', 'Malgun Gothic', sans-serif; text-shadow: 0 0 5px var(--ph-glow); }
.modal-back { position: absolute; inset: 0; display: grid; place-items: center; padding: 12px; pointer-events: auto; background: rgba(0, 0, 0, .62); border-radius: inherit; }
/* 대화상자는 화면에 뜨는 글이라 주사선을 그대로 받는다 */
.crt-on .dialog::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .2) 0 1px, transparent 1px 3px); }
.dialog { position: relative; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; background: var(--ph-bg); border: 2px solid var(--ph); box-shadow: 0 0 22px var(--ph-glow); user-select: text; -webkit-user-select: text; }
.dialog-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 6px 3px 10px; background: var(--ph); color: var(--ph-ink); font: 700 12px/1.3 'Galmuri11', sans-serif; text-shadow: none; }
.dialog-x { padding: 0 6px; background: none; border: 1px solid var(--ph-ink); color: var(--ph-ink); font: 700 12px/1.3 'Galmuri11', sans-serif; }
.dialog-body { padding: 12px; overflow: auto; }
.dialog-buttons { display: flex; justify-content: center; gap: 8px; padding: 2px 8px 12px; }
.dialog-buttons .btn { min-width: 76px; }
.dialog-body .dialog-buttons { padding: 8px 0 0; }
.msgbox { display: flex; gap: 12px; align-items: flex-start; }
.dlg-mark { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border: 2px solid var(--ph); font: 700 16px/1 'Galmuri11', sans-serif; }
.dlg-mark.error { background: var(--ph); color: var(--ph-ink); text-shadow: none; }
.msgbox p { padding-top: 4px; }

/* ---- 부팅 ---- */
#boot { position: absolute; inset: 0; z-index: 45; pointer-events: none; }
#boot > * { pointer-events: auto; }
#boot:empty { display: none; }
.power-prompt, .off-safe { position: absolute; inset: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: #0b0c0b; border: 0; color: #5a5a50; text-shadow: none; font: 14px/1.4 'Galmuri14', sans-serif; text-align: center; padding: 16px; }
.power-prompt b { font: 700 clamp(20px, 5cqw, 40px)/1 'Michroma', sans-serif; letter-spacing: 4px; color: #6a6a5e; }
.power-prompt span { color: var(--orange, #e4572e); animation: standby-blink 1.4s steps(2) infinite; }
.off-safe { color: #ff8c00; font-size: clamp(15px, 3cqw, 24px); }
.off-safe small { color: #666; font: 12px/1 'Galmuri11', sans-serif; }
.bios { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 16px 16px 40px; background: #000; color: #c8c8c8; text-shadow: none; font: 12px/16px 'GalmuriMono11', monospace; }
.bios-lines { flex: 1; min-height: 0; overflow: hidden; white-space: pre; }
.bios p { min-height: 1lh; }
.bios-epa { position: absolute; right: 16px; top: 16px; width: 135px; height: auto; }
.bios-foot { position: absolute; left: 16px; bottom: 14px; }
@container (max-width: 560px) {
  .bios-epa { top: auto; bottom: 34px; }
}
/* 넓은 화면에서는 VGA에 가까운 글자 크기 (도트가 깨지지 않게 정확히 2배) */
@container (min-width: 800px) and (min-height: 480px) {
  .bios { padding: 24px 28px 54px; font-size: 24px; line-height: 32px; }
  .bios-epa { right: 28px; top: 24px; width: 270px; }
  .bios-foot { left: 28px; bottom: 20px; }
}
#saver { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 48; background: #000; }

/* ---- 시작 안내 ---- */
.welcome { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.wel-hero { position: relative; flex: none; height: 120px; overflow: hidden; border: 1px solid var(--ph-line); }
.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; border: 1px solid var(--ph-line); }
.wel-card-body { padding-top: 3px; overflow-wrap: anywhere; }
.wel-card.tip { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.tip-text { flex: 1; }
.wel-buttons { flex: none; width: 124px; 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 'Galmuri11', sans-serif; }
.wel-visits { display: inline-flex; align-items: center; gap: 4px; }
/* 시작 안내에 잠깐 뜨는 넘기기 표시 */
.swipe-hint { position: absolute; z-index: 5; top: 0; bottom: 0; width: 25%; min-width: 110px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding-top: 38cqh; pointer-events: none; animation: hint-fade 6s linear forwards; color: var(--ph); }
[data-layout='stacked'] .swipe-hint { width: 14%; min-width: 0; }
.swipe-hint.left { left: 0; background: linear-gradient(90deg, var(--ph-faint), transparent); }
.swipe-hint.right { right: 0; background: linear-gradient(270deg, var(--ph-faint), transparent); }
.swipe-hint i { width: 0; height: 0; border-top: 14px solid transparent; border-bottom: 14px solid transparent; animation: standby-blink .8s steps(2) infinite; }
.swipe-hint.left i { border-right: 18px solid currentColor; }
.swipe-hint.right i { border-left: 18px solid currentColor; }
.swipe-hint b { font: 700 9px/1 'Michroma', sans-serif; letter-spacing: 1px; }
.swipe-hint u { position: relative; display: block; width: 34px; height: 2px; background: var(--ph-dim); text-decoration: none; }
.swipe-hint u::after { content: ''; position: absolute; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--ph); animation: hint-drag-left 1.2s ease-in-out infinite; }
.swipe-hint.right u::after { animation-name: hint-drag-right; }
@keyframes hint-drag-left { from { left: 24px; } to { left: 0; } }
@keyframes hint-drag-right { from { left: 0; } to { left: 24px; } }
@keyframes hint-fade { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
.chip-dot { display: inline-block; width: 9px; height: 9px; margin-right: 4px; }

/* 일정 분류 색 */
.cat-stream { background: #e0303f; color: #fff; text-shadow: none; }
.cat-special { background: #ffd24a; color: #000; text-shadow: none; }
.cat-collab { background: #1f8f5a; color: #fff; text-shadow: none; }
.cat-event { background: #8a3fd1; color: #fff; text-shadow: none; }
.cat-rest { background: #777; color: #fff; text-shadow: none; }
.cat-holiday { background: rgba(255, 106, 90, .18); color: #ff8a78; text-shadow: none; }
.cat-memorial { background: var(--ph-faint); color: var(--ph-dim); text-shadow: none; }
.cal-cell.holiday .cal-day { color: #ff6a5a; }

/* ---- 프로필 ---- */
.profile-top { display: flex; gap: 14px; flex-wrap: wrap; }
.profile-left { flex: none; width: 200px; }
.profile-frame { display: block; padding: 2px; width: 200px; height: 200px; background: #000; border: 1px solid var(--ph); }
.profile-photo { width: 194px; height: 194px; }
.profile-left .hint { margin-top: 3px; }
.profile-right { flex: 1; min-width: 220px; }
.profile-name { font: 700 24px/1.1 'Galmuri11', sans-serif; display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; padding-bottom: 6px; }
.profile-name small { font: 12px/1 'Galmuri11', sans-serif; color: var(--ph-dim); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; margin: 0; }
.kv dt { color: var(--ph-dim); }
.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 var(--ph-dim); }
.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; border: 1px solid var(--ph-line); display: flex; flex-direction: column; }
.dday b { font-size: 12px; line-height: 1.5; }
.dday span { font: 12px/1.3 'Galmuri11', sans-serif; color: var(--ph-dim); }
.sheet-btn { display: block; width: 100%; padding: 2px; background: none; border: 1px solid var(--ph-line); }
.sheet-btn img { width: 100%; height: auto; }
.profile-sheet .hint { margin: 6px 0 10px; }

/* ---- 일정표: 달력을 넓게 쓰도록 상세는 아래에 둔다 ---- */
.cal-layout { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; container-type: inline-size; }
.cal-left { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 5px; }
.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 13px/28px 'Galmuri11', sans-serif; letter-spacing: 2px; border: 1px solid var(--ph-line); }
.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: 20px; gap: 1px; padding: 1px; overflow: auto; }
.cal-head { display: grid; place-items: center; box-shadow: 0 0 0 1px var(--ph-line); font: 12px/1 'Galmuri11', sans-serif; }
.cal-head.sun, .cal-cell.sun .cal-day { color: #ff6a5a; }
.cal-head.sat, .cal-cell.sat .cal-day { color: #6ab4ff; }
.cal-cell { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 1px; min-height: 46px; min-width: 0; overflow: hidden; padding: 1px 3px; background: none; box-shadow: 0 0 0 1px var(--ph-line); color: var(--ph); border: 0; text-align: left; text-shadow: inherit; }
.cal-cell.empty { background: rgba(0, 0, 0, .3); }
.cal-cell:hover:not(.empty) { background: var(--ph-faint); }
.cal-cell.today .cal-day { background: var(--ph); color: var(--ph-ink); padding: 0 4px; align-self: flex-start; text-shadow: none; }
.cal-cell.sel { outline: 1px solid var(--ph); outline-offset: -1px; box-shadow: 0 0 0 1px var(--ph-line), inset 0 0 0 1px var(--ph); }
.cal-cell:focus-visible { outline: 1px dashed var(--ph); outline-offset: -3px; }
.cal-day { font: 12px/14px 'Galmuri11', sans-serif; }
.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 'Galmuri11', sans-serif; overflow: hidden; overflow-wrap: anywhere; }
.chip-more { font: 12px/12px 'Galmuri11', sans-serif; color: var(--ph-dim); }
.cal-detail { flex: 0 0 150px; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 6px 8px; border: 1px solid var(--ph-line); overflow: auto; }
.cal-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; padding-bottom: 4px; border-bottom: 1px solid var(--ph-line); }
.cal-detail-head h3 { font: 700 12px/1.5 'Galmuri11', sans-serif; display: flex; align-items: center; gap: 6px; }
.today-tag { padding: 0 4px; background: var(--ph); color: var(--ph-ink); text-shadow: none; }
.ev-list { display: flex; flex-direction: column; gap: 6px; }
.ev-row { display: flex; gap: 7px; align-items: flex-start; }
.ev-cat { flex: none; padding: 1px 4px; font: 12px/15px 'Galmuri11', sans-serif; }
.ev-main { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ev-note { color: var(--ph-dim); font: 12px/1.4 'Galmuri11', sans-serif; padding-top: 2px; }
.ev-actions { display: flex; gap: 4px; padding-top: 4px; }
.ev-actions .btn { min-height: 23px; padding: 1px 8px; font: 12px/1 'Galmuri11', sans-serif; }
.cal-upcoming { margin-top: auto; padding-top: 5px; border-top: 1px solid var(--ph-line); }
.up-list { display: flex; flex-direction: column; gap: 3px; padding-top: 3px; }
.up-list .linklike { font: 12px/1.4 'Galmuri11', sans-serif; }
.error-line { display: flex; gap: 5px; align-items: center; color: #ff6a5a; font: 12px/1.3 'Galmuri11', sans-serif; }
/* 큰 모니터에서는 달력 옆에 상세를 둔다 */
@container (min-width: 1040px) {
  .cal-layout { flex-direction: row; }
  .cal-left { flex-basis: 0; }
  .cal-detail { flex: 0 0 260px; }
}

/* ---- 공지 ---- */
.notice-app { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 5px; }
.menubar { flex: none; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.menubar:empty { display: none; }
.notice-split { flex: 1; min-height: 0; display: flex; gap: 6px; }
.notice-list { flex: none; width: 34%; min-width: 150px; overflow: auto; border: 1px solid var(--ph-line); }
.notice-item { display: flex; flex-direction: column; gap: 1px; width: 100%; padding: 4px 6px; background: none; border: 0; color: inherit; text-align: left; overflow-wrap: anywhere; line-height: 1.25; text-shadow: inherit; }
.notice-item small { font: 12px/1.2 'Galmuri11', sans-serif; color: var(--ph-dim); }
.notice-item:hover { background: var(--ph-faint); }
.notice-item.sel { background: var(--ph); color: var(--ph-ink); text-shadow: none; }
.notice-item.sel small { color: var(--ph-ink); }
.pin { color: #ff6a5a; }
.notice-item.sel .pin { color: var(--ph-ink); }
.notice-pane { flex: 1; min-width: 0; overflow: auto; border: 1px solid var(--ph-line); display: flex; flex-direction: column; }
.notepad { padding: 10px 12px; }
.notepad h3 { font: 700 13px/1.5 'Galmuri11', sans-serif; }
.notepad-meta { color: var(--ph-dim); font: 12px/1.3 'Galmuri11', sans-serif; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--ph-line); }
.notice-form { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 6px; }
.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: 5px; }
.gb-banner { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 3px 8px; border: 1px solid var(--ph-line); }
.gb-badge-wrap { display: inline-flex; align-items: center; gap: 6px; }
.gb-badge { width: 112px; min-height: 25px; padding-top: 1px; padding-bottom: 1px; }
.gb-list { flex: 1 1 40%; min-height: 90px; overflow: auto; border: 1px solid var(--ph-line); }
.gb-entry { padding: 5px 8px; border-bottom: 1px solid var(--ph-faint); }
.gb-entry-head { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.gb-entry-head small { font: 12px/1 'Galmuri11', sans-serif; color: var(--ph-dim); }
.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: 46px; padding: 1px; border: 1px solid var(--ph-line); }
.gb-slot { width: 42px; height: 42px; padding: 1px; background: var(--ph-faint); border: 0; }
.gb-slot.filled { background: none; }
.gb-slot.filled:hover { background: var(--ph-line); }
.gb-compose-row .btn { flex: none; width: 82px; padding: 3px 4px; }
.gb-picker { display: flex; flex-wrap: wrap; gap: 1px; max-height: 134px; overflow-y: auto; padding: 1px; border: 1px solid var(--ph-line); }
.gb-pick { padding: 1px; background: none; border: 0; }
.gb-pick:hover { background: var(--ph-line); }
.gb-pick:focus-visible { outline: 1px dashed var(--ph); outline-offset: -1px; }
.gb-pick:active { transform: translate(1px, 1px); }
.gb-pick img { width: 42px; height: 42px; }

/* ---- BGM 목록 ---- */
.amp { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.amp-display { flex: none; display: flex; gap: 10px; padding: 6px; border: 1px solid var(--ph-line); }
.amp-thumb { flex: none; width: 192px; height: 192px; background: #000; filter: saturate(.7); }
.amp-side { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; }
.amp-time { font: 700 34px/1 'DSEG7', monospace; }
.amp-vis { width: 100%; height: 108px; flex: none; }
.amp-title { font: 12px/18px 'Galmuri11', sans-serif; overflow-wrap: anywhere; }
.amp-list { flex: 1; min-height: 60px; overflow: auto; border: 1px solid var(--ph-line); }
.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: inherit; text-align: left; font: 12px/1.4 'Galmuri11', sans-serif; overflow-wrap: anywhere; text-shadow: inherit; }
.amp-mini { flex: none; object-fit: cover; filter: saturate(.7); }
.amp-track:hover { background: var(--ph-faint); }
.amp-track.on { background: var(--ph); color: var(--ph-ink); text-shadow: none; }
.amp-admin:empty { display: none; }
.amp-admin { flex: none; }

/* ---- 군밤 줄서기 ---- */
.sn-app { display: flex; flex-direction: column; align-items: center; gap: 5px; margin: auto; }
.sn-hud { width: 100%; max-width: none; }
.sn-led { display: flex; align-items: center; gap: 5px; }
.sn-led small { font: 12px/1 'Galmuri11', sans-serif; }
.sn-stage { position: relative; padding: 2px; max-width: 100%; touch-action: none; border: 1px solid var(--ph); }
.sn-board { display: block; width: min(100cqw - 60px, (100cqh - 190px) * 1.285, 720px); max-width: 100%; height: auto; }
.sn-overlay { position: absolute; inset: 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px; border: 0; background: rgba(0, 0, 0, .72); color: var(--ph); }
.sn-overlay b { font-size: 16px; }
/* ---- 영상 ---- */
.media { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 4px; }
.media-stage { flex: 1; min-height: 0; background: #000; }
.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; }
.amp-btn { min-width: 40px; padding: 2px 6px; }
.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; border: 1px solid var(--ph-line); }
.badge-none { font: 700 24px/1 'Galmuri11', sans-serif; }
.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; border: 1px solid var(--ph-line); }
.badge-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 2px; background: none; border: 0; color: inherit; text-shadow: inherit; }
.badge-cell small { font: 12px/1.2 'Galmuri11', sans-serif; }
.badge-cell.locked img { filter: brightness(.25); }
.badge-cell.locked small { color: var(--ph-dim); }
.badge-cell:hover { background: var(--ph-faint); }
.badge-cell.now { background: var(--ph); color: var(--ph-ink); text-shadow: none; }

/* ---- 땡고추 찾기 ---- */
.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: 4px 7px; border: 1px solid var(--ph-line); }
.mine-face { width: 34px; height: 34px; min-height: 34px; padding: 2px; }
.mine-scroll { max-width: 100%; overflow: auto; }
.mine-board { display: grid; grid-template-columns: repeat(var(--cols), 24px); width: max-content; padding: 2px; gap: 1px; background: var(--ph-line); touch-action: manipulation; }
.mine-cell { width: 24px; height: 24px; padding: 0; display: grid; place-items: center; background: var(--ph-faint); border: 0; box-shadow: inset 1px 1px 0 var(--ph-line); font: 700 12px/1 'Galmuri11', sans-serif; text-shadow: none; color: var(--ph); }
.mine-cell:hover:not(.open) { background: var(--ph-line); }
.mine-cell.open { background: var(--ph-bg); box-shadow: none; }
.mine-cell.boom { background: #ff3030; }
.n1 { color: #6ab4ff; } .n2 { color: #4dff88; } .n3 { color: #ff6a5a; } .n4 { color: #c090ff; }
.n5 { color: #ffb000; } .n6 { color: #50e0e0; } .n7 { color: #fff; } .n8 { color: #aaa; }
.mine-best { color: var(--ph); }
@container (min-width: 640px) {
  .mine-cell { width: 29px; height: 29px; }
}

/* ---- 모바일 배치: 게임과 도감을 화면 안에 ---- */
[data-layout='stacked'] .sn-board { width: min(100cqw - 44px, (100cqh - 136px) * .875, 720px); }
[data-layout='stacked'] .sn-hud .mine-face { width: 48px; height: 48px; min-height: 48px; padding: 3px; }
[data-layout='stacked'] .sn-hud .mine-face img { width: 40px; height: 40px; }
/* 칸 크기를 판 폭에 맞춰 스크롤 없이 들어오게 한다 */
[data-layout='stacked'] .mine-scroll { width: 100%; overflow: visible; }
[data-layout='stacked'] .mine-board { width: 100%; max-width: calc(24px * var(--cols) + var(--cols) * 1px + 3px); margin: 0 auto; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
[data-layout='stacked'] .mine-cell { width: 100%; height: auto; aspect-ratio: 1; }
[data-layout='stacked'] .badge-app { --cell: 58px; gap: 5px; }
[data-layout='stacked'] .badge-current { gap: 8px; }
[data-layout='stacked'] .badge-big { width: 60px; height: 60px; }
[data-layout='stacked'] .badge-big img { width: 52px; height: 52px; }
[data-layout='stacked'] .badge-info { gap: 2px; font-size: 13px; line-height: 1.25; }
[data-layout='stacked'] .badge-info .btn { min-height: 24px; padding-top: 1px; padding-bottom: 1px; font-size: 12px; }
[data-layout='stacked'] .badge-slider { gap: 5px; font-size: 12px; }
[data-layout='stacked'] .badge-slider .range { flex: 1; width: auto; min-width: 0; }
[data-layout='stacked'] .badge-months { flex: none; min-width: 0; white-space: nowrap; }
[data-layout='stacked'] .badge-grid { flex: 1 1 auto; min-height: calc(var(--cell) * 2 + 4px); max-height: calc(var(--cell) * 3 + 6px); grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: var(--cell); }
[data-layout='stacked'] .badge-cell { padding: 3px 1px; }
[data-layout='stacked'] .badge-cell img { width: 36px; height: 36px; }
[data-layout='stacked'] .badge-cell small { font-size: 11px; }

/* ---- 터미널 확인 ---- */
.term-prompt { position: absolute; inset: 0; z-index: 45; padding: 18px 24px; background: var(--ph-bg); color: var(--ph); font: 24px/30px 'GalmuriMono11', monospace; text-shadow: 0 0 5px var(--ph-glow); white-space: pre-wrap; }
.term-key { padding: 0 .3em; border: 0; background: none; color: inherit; font: inherit; text-shadow: inherit; text-decoration: underline; cursor: pointer; }
.term-key:hover, .term-key:focus-visible { background: var(--ph); color: var(--ph-bg); text-shadow: none; outline: none; }
.term-cursor { display: inline-block; width: .6em; height: 1em; vertical-align: text-bottom; background: var(--ph); animation: term-blink 1s steps(2) infinite; }
@keyframes term-blink { 50% { opacity: 0; } }
@container (max-width: 700px) {
  .term-prompt { padding: 12px 14px; font-size: 14px; line-height: 20px; }
  .term-key { padding: 4px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .term-cursor { animation: none; }
}

/* ---- 사진첩: 슬라이드 영사기 ---- */
.proj { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.proj-screen { position: relative; flex: 1; min-height: 0; overflow: auto; display: grid; background: radial-gradient(ellipse at center, #1c1a15 0, #050504 78%); }
.proj-img { max-width: 94%; max-height: 94%; margin: auto; object-fit: contain; cursor: zoom-in; box-shadow: 0 0 0 5px #d9d4c7, 0 0 40px rgba(255, 244, 214, .22); }
.proj-img.full { max-width: none; max-height: none; cursor: zoom-out; }
/* 슬라이드가 옆으로 빠지고 잠깐 어두워졌다가 다음 장이 탁 들어온다 */
.proj-screen.leaving .proj-img { transition: transform .22s cubic-bezier(.6, 0, .9, .4), filter .22s; filter: brightness(.25); }
.proj-screen.leaving[data-dir='next'] .proj-img { transform: translateX(-112%); }
.proj-screen.leaving[data-dir='prev'] .proj-img { transform: translateX(112%); }
.proj-screen.arriving .proj-img { animation: proj-in .17s steps(5); }
.proj-screen[data-dir='prev'].arriving .proj-img { animation-name: proj-in-prev; }
@keyframes proj-in { from { transform: translateX(46%); filter: brightness(2); } 70% { transform: translateX(-1%); } }
@keyframes proj-in-prev { from { transform: translateX(-46%); filter: brightness(2); } 70% { transform: translateX(1%); } }
.proj-bar { flex: none; display: flex; align-items: center; gap: 10px; }
.proj-count { font: 700 16px/1 'DSEG7', monospace; }
.proj-caption { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@media (prefers-reduced-motion: reduce) {
  .proj-screen.arriving .proj-img { animation: none; }
  .proj-screen.leaving .proj-img { transition: none; }
}

/* ---- 휴지통 ---- */
.trash-app { flex: 1; min-height: 0; overflow: auto; }
.details { width: 100%; border-collapse: collapse; font: 12px/1.3 'Galmuri11', sans-serif; }
.details th { padding: 3px 6px; text-align: left; font-weight: 400; color: var(--ph-dim); border-bottom: 1px solid var(--ph-line); position: sticky; top: 0; background: var(--ph-bg); }
.details td { padding: 3px 6px; white-space: nowrap; }
.details tbody tr { cursor: pointer; }
.details tbody tr:hover, .details tbody tr:focus-visible { background: var(--ph); color: var(--ph-ink); text-shadow: none; outline: none; }

/* ---- 작은 화면 ---- */
@container (max-width: 560px) {
  .tape { padding: 8px 9px; }
  .wel-main, .notice-split { 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; }
  .notice-list { width: 100%; height: 130px; flex: none; }
  .notice-pane { flex: 1 0 200px; }
  .profile-left { width: 100%; display: flex; flex-direction: column; align-items: center; }
  .amp-thumb { width: 96px; height: 96px; }
  .amp-vis { height: 39px; }
  .amp-time { font-size: 22px; }
  .gb-slot { width: 34px; height: 34px; }
  .gb-slot img { width: 32px; height: 32px; }
  .gb-entry-emojis img { width: 44px; height: 44px; }
  .gb-picker { max-height: 96px; }
  .cal-detail { flex-basis: 130px; }
  .chip { font-size: 0; height: 5px; line-height: 5px; padding: 0; -webkit-line-clamp: none; display: block; }
  .chip-more { display: none; }
  .cal-cell { min-height: 38px; }
  .cal-layout, .cal-left { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  #standby[data-wp='teal']::after, .power-prompt span, .swipe-hint i, .swipe-hint u::after { animation: none; }
}