/* Hallmark · shape: app screen · genre: playful · theme: Sticker (user pick, redirected: smaller radii) · sticker: sheet · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: R, the photo grid drops the die-cut on purpose (36k thumbnails stay light) */
@import url("./tokens.css");
@import url("./base.css");

:root { --bar-h: 64px; --dock-h: 72px; }

/* ---------- shell ---------- */
body { min-height: 100vh; word-break: keep-all; } /* 한글은 단어 단위로 줄을 바꾼다 */
h1, h2, h3 { text-transform: none; text-wrap: balance; }
::selection { background: var(--color-accent-2); color: var(--color-ink); }
.bar { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-ink); color: var(--color-paper); }
.bar .container { display: flex; align-items: center; gap: var(--space-lg); min-height: var(--bar-h); }
.mark { font: 400 1.7rem/1 var(--font-display); color: var(--color-accent-2); text-decoration: none; }
.acct { margin-left: auto; }
.page { padding-top: var(--space-xl); padding-bottom: var(--space-3xl); }

/* 사진 / 영상 탭: 큰 화면은 위, 모바일은 아래 고정 */
.tabs { display: flex; gap: var(--space-2xs); margin-inline: auto; padding: var(--space-2xs); border-radius: var(--radius-pill); background: color-mix(in oklab, var(--color-paper) 12%, transparent); }
.tabs button { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 40px; padding: 0 var(--space-lg); border: 0; border-radius: 8px; background: none; color: color-mix(in oklab, var(--color-paper) 78%, transparent); font: 700 var(--text-md)/1 var(--font-body); cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.tabs button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tabs button:hover { color: var(--color-paper); }
.tabs button[aria-selected="true"] { background: var(--color-accent); color: var(--color-accent-ink); }
.bar :focus-visible { outline-color: var(--color-accent-2); }

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 46px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font: 700 var(--text-md)/1 var(--font-body); text-decoration: none; cursor: pointer; box-shadow: 2px 3px 0 var(--color-ink); transition: translate var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-accent-deep); }
.btn:active { translate: 2px 3px; box-shadow: 0 0 0 var(--color-ink); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }
.btn.ghost { background: var(--color-white); color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-line); }
.btn.ghost:hover { background: var(--color-accent-2); }
.btn.ghost:active { translate: 0 1px; box-shadow: inset 0 0 0 1px var(--color-line); }
.btn.sm { min-height: 40px; padding: 0 var(--space-md); font-size: var(--text-sm); box-shadow: 2px 2px 0 var(--color-ink); }
.btn.sm:active { box-shadow: 0 0 0 var(--color-ink); }
.btn.sm.ghost { box-shadow: inset 0 0 0 1px var(--color-line); }
.act { display: inline-flex; align-items: center; min-height: 32px; padding: var(--space-2xs) 0; border: 0; background: none; color: var(--color-ink); font: 700 var(--text-sm)/1.2 var(--font-body); text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.25em; cursor: pointer; }
.act:hover { color: var(--color-accent-deep); }
.act.danger { color: var(--color-error); }
.in { width: 100%; min-width: 0; min-height: 46px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-line); border-radius: var(--radius-card); background: var(--color-white); color: var(--color-ink); font-size: var(--text-md); }
.in::placeholder { color: var(--color-muted); }
.in:focus-visible { outline-offset: 2px; }
.in.sm { min-height: 42px; font-size: var(--text-sm); }
.msg { min-height: 1.4em; margin-top: var(--space-xs); color: var(--color-error); font-size: var(--text-sm); font-weight: 600; }
.msg.ok { color: var(--color-success); }
.muted { color: var(--color-muted); }
.tag { display: inline-block; justify-self: start; padding: 0 var(--space-sm); border-radius: var(--radius-pill); background: var(--color-accent-2); color: var(--color-ink); font: 700 var(--text-sm)/1.6 var(--font-body); }

/* ---------- account ---------- */
.acct { position: relative; }
.acct summary { display: flex; align-items: center; gap: var(--space-xs); min-height: 40px; padding: 0 var(--space-md); border-radius: var(--radius-pill); list-style: none; cursor: pointer; font: 700 var(--text-sm)/1 var(--font-body); color: var(--color-paper); background: color-mix(in oklab, var(--color-paper) 12%, transparent); }
.acct summary:hover { background: color-mix(in oklab, var(--color-paper) 22%, transparent); }
.acct summary::-webkit-details-marker { display: none; }
.acct summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.acct[open] summary::after { transform: translateY(1px) rotate(225deg); }
.menu { position: absolute; right: 0; top: calc(100% + var(--space-xs)); min-width: 14rem; padding: var(--space-xs); border: 4px solid var(--color-white); border-radius: var(--radius-card); background: var(--color-paper); color: var(--color-ink); box-shadow: var(--shadow-card); }
.menu button { display: block; width: 100%; min-height: 44px; padding: 0 var(--space-md); border: 0; border-radius: 6px; background: none; text-align: left; color: var(--color-ink); font: 700 var(--text-sm)/1 var(--font-body); cursor: pointer; }
.menu button:hover { background: var(--color-accent-2); }
.menu hr { margin: var(--space-xs) 0; border: 0; border-top: var(--rule-bar) dashed var(--color-rule); }

/* ---------- 영상 · 사진 공통 머리 ---------- */
.lhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md) var(--space-lg); }
.lhead .ttl { display: flex; align-items: baseline; gap: var(--space-sm); }
.lhead h2 { max-width: none; font-size: min(3rem, 11vw); line-height: 1.05; }
.lhead .count { color: var(--color-muted); font-size: var(--text-sm); font-weight: 700; }
.cats { display: flex; gap: var(--space-xs); margin-top: var(--space-lg); padding: var(--space-2xs) var(--space-2xs) var(--space-xs); overflow-x: auto; scrollbar-width: none; }
.cats::-webkit-scrollbar { display: none; }
.cat { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-md); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-ink-2); font: 700 var(--text-md)/1 var(--font-body); cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.cat:hover { background: var(--color-paper-2); color: var(--color-ink); }
.cat[aria-selected="true"] { background: var(--color-ink); color: var(--color-paper); }
.filters { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-sm); }
.filters .in { width: auto; }
.filters input[type="search"] { flex: 1 1 12rem; }
.more { display: flex; justify-content: center; margin-top: var(--space-xl); }

/* ---------- 영상 카드 ---------- */
.grid { list-style: none; margin: var(--space-xl) 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl) var(--gap-columns); }
.card { display: grid; align-content: start; min-width: 0; border: 5px solid var(--color-white); border-radius: var(--radius-card); background: var(--color-white); box-shadow: var(--shadow-card); overflow: hidden; transition: translate var(--dur-micro) var(--ease-out), rotate var(--dur-micro) var(--ease-out); }
.card:nth-child(odd) { rotate: -0.8deg; } .card:nth-child(even) { rotate: 0.8deg; }
.card:hover { translate: 0 -3px; rotate: 0deg; }
.card .body { display: grid; gap: var(--space-2xs); padding: var(--space-md) var(--space-sm) var(--space-sm); }
.card .acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-md); padding: 0 var(--space-sm) var(--space-sm); }
.job h3, .card h3 { font: 700 var(--text-md)/1.4 var(--font-body); max-width: none; overflow-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vtags { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.vtags .tag { border: 0; cursor: pointer; }
.vtags .tag:hover { background: var(--color-accent); color: var(--color-accent-ink); }
.note { margin-top: var(--space-sm); color: var(--color-muted); font-size: var(--text-sm); }
.note:empty { display: none; }
.facts { display: flex; flex-wrap: wrap; gap: 0 var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }
/* 화면이 넓을수록 열이 늘어난다: 폰 1열, 태블릿 2~3열, PC 4~6열 */
@media (min-width: 36rem) { .grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); } }

.thumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--t2); overflow: hidden; border-radius: 6px; }
.card:nth-child(3n+2) .thumb { background: var(--t1); } .card:nth-child(3n) .thumb { background: var(--t4); }
.thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.thumb img.gone { display: none; }
button.thumb { padding: 0; border: 0; cursor: pointer; }
.play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-accent-2); transform: translate(-50%, -50%); transition: transform var(--dur-short) var(--ease-out), background-color var(--dur-micro) var(--ease-out); }
.play svg { width: 18px; height: 18px; fill: currentColor; margin-left: var(--space-2xs); }
button.thumb:hover .play { background: var(--color-accent); color: var(--color-accent-ink); }
.dur { position: absolute; right: var(--space-sm); bottom: var(--space-sm); padding: 0 var(--space-xs); border-radius: 4px; background: var(--color-ink); color: var(--color-paper); font: 700 var(--text-xs)/1.6 var(--font-body); font-variant-numeric: tabular-nums; }

/* ---------- 사진: 스티커처럼 흰 테두리에 살짝씩 기울여 붙인다. 한 번에 120장만 그려서 가볍다 ---------- */
.pgrid { list-style: none; margin: var(--space-xl) 0 0; padding: var(--space-2xs); display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(8.5rem, 11vw, 12rem), 1fr)); gap: var(--space-md); }
.pcell { display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 4px solid var(--color-white); border-radius: var(--radius-photo); background: var(--t5); box-shadow: var(--shadow-small); overflow: hidden; cursor: pointer; transition: translate var(--dur-micro) var(--ease-out), rotate var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out); }
.pgrid li:nth-child(5n+1) .pcell { rotate: -2deg; } .pgrid li:nth-child(5n+2) .pcell { rotate: 1.5deg; } .pgrid li:nth-child(5n+3) .pcell { rotate: -1deg; }
.pgrid li:nth-child(5n+4) .pcell { rotate: 2deg; } .pgrid li:nth-child(5n) .pcell { rotate: -1.5deg; }
.pcell:hover { translate: 0 -3px; rotate: 0deg; }
.pcell:active { translate: 2px 3px; box-shadow: var(--shadow-press); }
.pcell img { display: block; width: 100%; height: 100%; object-fit: cover; }

.viewer { max-width: none; width: 100%; height: 100%; max-height: none; padding: 0; border: 0; border-radius: 0; background: var(--color-ink); color: var(--color-paper); box-shadow: none; overflow: hidden; }
.viewer::backdrop { background: var(--color-ink); }
.vstage { position: absolute; inset: 0; display: grid; place-items: center; }
/* 사진 두 장을 겹쳐 두고 부드럽게 바꿔 끼운다. 움직임은 opacity 와 transform 만 쓴다 */
.vimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 700ms var(--ease-out); }
.vimg.on { opacity: 1; }
.viewer.fx-none .vimg { transition: none; }
.vimg.kb { animation: kb var(--gap, 5s) linear forwards; }
@keyframes kb { from { transform: scale(1); } to { transform: scale(1.1); } }
.vprog { position: absolute; left: 0; right: 0; top: 0; z-index: 3; height: 4px; background: transparent; pointer-events: none; }
.vprog i { display: block; height: 100%; background: var(--color-accent-2); transform-origin: left; transform: scaleX(0); }
.vprog.run i { animation: prog var(--gap, 5s) linear forwards; }
@keyframes prog { to { transform: scaleX(1); } }
.vinfo { position: absolute; left: var(--space-md); top: var(--space-md); z-index: 2; max-width: calc(100% - 2 * var(--space-md)); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-card); background: color-mix(in oklab, var(--color-ink) 62%, transparent); font-size: var(--text-sm); line-height: 1.4; }
.vinfo b { display: block; font-size: var(--text-md); }
.vset { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); padding: var(--space-md); margin-bottom: var(--space-2xl); background: color-mix(in oklab, var(--color-ink) 92%, transparent); font-size: var(--text-sm); }
.vset label.f { display: inline-flex; align-items: center; gap: var(--space-xs); }
.vset .in { width: auto; min-height: 36px; background: color-mix(in oklab, var(--color-paper) 14%, transparent); color: var(--color-paper); border-color: color-mix(in oklab, var(--color-paper) 30%, transparent); }
.vset .in option { color: var(--color-ink); }
.vnav { position: absolute; top: 50%; z-index: 2; width: 52px; height: 72px; transform: translateY(-50%); border: 0; background: color-mix(in oklab, var(--color-ink) 60%, transparent); color: var(--color-paper); font-size: 2.5rem; line-height: 1; cursor: pointer; transition: opacity var(--dur-short) var(--ease-out), background-color var(--dur-micro) var(--ease-out); }
.vnav { display: grid; place-items: center; }
.vnav svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.vnav.prev { left: 0; border-radius: 0 var(--radius-card) var(--radius-card) 0; } .vnav.next { right: 0; border-radius: var(--radius-card) 0 0 var(--radius-card); }
.vnav:hover { background: var(--color-accent); }
.vbar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm) var(--space-md); padding: var(--space-sm) var(--space-md); background: color-mix(in oklab, var(--color-ink) 82%, transparent); transition: opacity var(--dur-short) var(--ease-out); }
.vcap { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm); }
.vctl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.vctl .in { width: auto; }
.vctl .btn { box-shadow: none; }
.vctl .btn:active { translate: 0 1px; }
.vctl .btn.ghost { background: color-mix(in oklab, var(--color-paper) 16%, transparent); color: var(--color-paper); box-shadow: none; }
.vctl .btn.ghost:hover { background: color-mix(in oklab, var(--color-paper) 28%, transparent); }
.chk { display: inline-flex; align-items: center; gap: var(--space-2xs); font-size: var(--text-sm); }
/* 슬라이드쇼 중에는 조작부를 숨겼다가 마우스·터치가 움직이면 보여 준다 */
.viewer.playing:not(.bar-on) .vbar, .viewer.playing:not(.bar-on) .vnav, .viewer.playing:not(.bar-on) .vset { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .vimg { transition: none; } .vimg.kb { animation: none; } }
.viewer.playing:not(.bar-on) { cursor: none; }

/* ---------- 관리자: 영상 저장 (대화상자) ---------- */
.save { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-sm); margin-top: var(--space-md); }
.qual { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-xs); border: 0; margin: 0; padding: 0; min-width: 0; }
.qual label { position: relative; display: inline-flex; align-items: center; min-height: 42px; padding: 0 var(--space-md); border-radius: var(--radius-pill); background: var(--color-white); color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-line); font: 700 var(--text-sm)/1 var(--font-body); cursor: pointer; }
.qual label:hover { background: var(--color-accent-2); }
.qual input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.qual label:has(input:checked) { background: var(--color-ink); color: var(--color-paper); }
.qual label:has(input:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.qhead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-lg); padding-top: var(--space-md); border-top: var(--rule-bar) dashed var(--color-rule); }
.qhead h4 { margin: 0; font: 700 var(--text-md)/1.2 var(--font-body); }
.list { list-style: none; margin: 0; padding: 0; }
.job { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-xs) var(--space-md); align-items: start; padding: var(--space-md) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.job:last-child { border-bottom: 0; }
.job .thumb { border-radius: 6px; }
.job .dur { right: var(--space-2xs); bottom: var(--space-2xs); }
.facts .err { padding: 0 var(--space-xs); border-radius: 4px; background: var(--color-error-soft); color: var(--color-error); font-weight: 700; }
.job .acts { grid-column: 1 / -1; display: flex; gap: var(--space-md); align-items: center; }
.prog { grid-column: 1 / -1; grid-row: 2; height: 8px; border-radius: 4px; background: var(--color-paper-2); overflow: hidden; }
.prog i { display: block; height: 100%; background: var(--color-accent); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform var(--dur-short) var(--ease-out); }
.job.done .prog i { background: var(--color-success); }
.job .acts { grid-row: 3; }
.job .note { grid-column: 1 / -1; grid-row: 4; padding: var(--space-xs) var(--space-sm); border-radius: 6px; background: var(--color-error-soft); color: var(--color-error); font-size: var(--text-sm); }

/* ---------- states ---------- */
.empty, .failbox { margin-top: var(--space-xl); padding: var(--space-xl) var(--space-md); border: var(--rule-bar) dashed var(--color-rule); border-radius: var(--radius-card); text-align: center; color: var(--color-ink-2); }
.empty p, .failbox p { margin-inline: auto; }
.empty .btn, .failbox .btn { margin-top: var(--space-lg); }
.failbox { color: var(--color-error); font-weight: 700; }
.sk { background: var(--color-paper-2); border-radius: 6px; animation: pulse 1.4s ease-in-out infinite; }
.sk.line { height: 14px; margin-top: var(--space-xs); }
.sk.line.s { width: 55%; }
.skrow { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-md); padding: var(--space-md) 0; }
@keyframes pulse { 50% { opacity: 0.55; } }

/* ---------- dialogs, toast ---------- */
dialog { --dlg-pad: var(--space-lg); width: calc(100% - 2rem); max-width: 26rem; max-height: 90vh; padding: var(--dlg-pad); border: 6px solid var(--color-white); border-radius: var(--radius-card); background: var(--color-paper); color: var(--color-ink); box-shadow: var(--shadow-card); overflow: auto; }
dialog::backdrop { background: color-mix(in oklab, var(--color-ink) 62%, transparent); }
dialog.wide { max-width: min(96vw, 1400px); }
dialog.viewer { border: 0; box-shadow: none; }
dialog h3 { margin-bottom: var(--space-md); font: 400 var(--text-2xl)/1.1 var(--font-display); max-width: none; }
dialog form { display: grid; gap: var(--space-sm); }
.btns { display: flex; justify-content: flex-end; gap: var(--space-md); margin-top: var(--space-xs); }
dialog .row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-md); }
/* 팝업 맨 위 줄(제목 + 닫기)은 안쪽이 스크롤돼도 위에 붙어 있게 한다 */
dialog > .row:first-child { position: sticky; top: calc(var(--dlg-pad) * -1); z-index: 3; margin: calc(var(--dlg-pad) * -1) calc(var(--dlg-pad) * -1) var(--space-md); padding: var(--space-md) var(--dlg-pad); background: var(--color-paper); box-shadow: 0 1px 0 var(--color-line); }
dialog > .btns:last-child { position: sticky; bottom: calc(var(--dlg-pad) * -1); z-index: 3; margin: var(--space-md) calc(var(--dlg-pad) * -1) calc(var(--dlg-pad) * -1); padding: var(--space-sm) var(--dlg-pad); background: var(--color-paper); box-shadow: 0 -1px 0 var(--color-line); }
dialog .row h3 { margin: 0; font: 700 var(--text-lg)/1.3 var(--font-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
dialog video { width: 100%; max-height: 72vh; border-radius: 6px; background: var(--color-ink); display: block; }
#saveDlg { max-width: 36rem; }
#phDlg { max-width: 34rem; }
.urow { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-xs) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.urow .acts { display: flex; gap: var(--space-md); }
#userList { margin-bottom: var(--space-md); }
.browse { margin-top: var(--space-md); padding: var(--space-sm); border-radius: var(--radius-card); background: var(--color-paper-2); }
.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-2xs); font-size: var(--text-sm); }
.dirs { display: grid; gap: var(--space-2xs); max-height: 14rem; margin: var(--space-sm) 0; overflow-y: auto; }
.dir { display: flex; align-items: center; gap: var(--space-sm); min-height: 42px; padding: 0 var(--space-sm); border: 0; border-radius: 6px; background: var(--color-white); color: var(--color-ink); text-align: left; font: 700 var(--text-sm)/1 var(--font-body); cursor: pointer; }
.dir::before { content: ""; flex: none; width: 18px; height: 13px; border-radius: 2px 4px 2px 2px; background: var(--color-accent-2); box-shadow: inset 0 0 0 2px var(--color-ink); }
.dir:hover { background: var(--color-accent-2); }
.addrow { display: flex; gap: var(--space-xs); }
.addrow[hidden] { display: none; }
.toast { position: fixed; inset: auto auto calc(var(--space-lg) + env(safe-area-inset-bottom)) 50%; margin: 0; overflow: visible; z-index: var(--z-toast); max-width: calc(100% - 2rem); padding: var(--space-sm) var(--space-lg); border: 3px solid var(--color-white); border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-paper); box-shadow: var(--shadow-small); font-size: var(--text-sm); font-weight: 700; opacity: 0; transform: translateX(-50%); pointer-events: none; transition: opacity var(--dur-short) var(--ease-out); }
.toast.on { opacity: 1; }

/* ---------- login ---------- */
.login { max-width: 26rem; margin: 14vh auto 0; padding-inline: var(--gutter); text-align: center; }
.login .mark { display: inline-block; margin-bottom: var(--space-xs); padding: 0 var(--space-lg); border-radius: var(--radius-card); background: var(--color-ink); font-size: 3rem; line-height: 1.5; }
.login p { margin: 0 auto var(--space-lg); color: var(--color-muted); }
.login form { display: grid; gap: var(--space-md); text-align: left; }
.login .btn { margin-top: var(--space-xs); }

/* ---------- tablet and phone ---------- */
@media (max-width: 60rem) { .bar .container { gap: var(--space-md); } }
@media (max-width: 40rem) {
  :root { --bar-h: 56px; --gutter: 16px; }
  .page { padding-bottom: calc(var(--dock-h) + var(--space-xl)); }
  .tabs { position: fixed; left: var(--space-md); right: var(--space-md); bottom: calc(var(--space-md) + env(safe-area-inset-bottom)); z-index: var(--z-sticky-nav); margin: 0; padding: var(--space-xs); border-radius: var(--radius-card); background: var(--color-ink); box-shadow: var(--shadow-card); }
  .tabs button { flex: 1; justify-content: center; min-height: 52px; }
  .toast { bottom: calc(var(--dock-h) + var(--space-xl)); }
  .save { grid-template-columns: minmax(0, 1fr); }
  .save .btn { width: 100%; }
  .qual label { flex: 1 1 calc(50% - var(--space-xs)); justify-content: center; }
  .filters .in { flex: 1 1 100%; }
  .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xs); }
  .menu { position: fixed; left: var(--space-md); right: var(--space-md); top: calc(var(--bar-h) + var(--space-xs)); }
  .job, .skrow { grid-template-columns: 80px minmax(0, 1fr); }
  dialog { --dlg-pad: var(--space-md); }
}
@media (prefers-reduced-motion: reduce) {
  .pgrid li .pcell, .card { rotate: 0deg !important; }
}
@media (pointer: coarse) {
  .act, .btn.sm, .qual label { min-height: 44px; }
  .in.sm { min-height: 44px; }
}

/* ---------- AI 사진 분류 (관리자) ---------- */
#aiDlg { max-width: 46rem; }
label.f { display: inline-flex; align-items: center; gap: var(--space-xs); }
.aisum { display: grid; grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr)); gap: var(--space-sm); margin: var(--space-md) 0; }
.aisum div { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-card); background: var(--color-white); box-shadow: inset 0 0 0 1px var(--color-line); }
.aisum b { display: block; font: 400 var(--text-xl)/1.2 var(--font-display); }
.aisum span { font-size: var(--text-sm); color: var(--color-muted); }
.aiuse { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-sm); margin: var(--space-md) 0; }
.urow2 { display: grid; gap: 0.3rem; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-card); background: var(--color-white); box-shadow: inset 0 0 0 1px var(--color-line); }
.urow2 .uh { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm); font-size: var(--text-sm); }
.urow2 .uh span { font-weight: 700; }
.urow2 small { color: var(--color-muted); font-weight: 400; }
.ubar { position: relative; height: 0.6rem; border-radius: 999px; background: var(--color-line); overflow: hidden; }
.ubar i { display: block; height: 100%; border-radius: inherit; background: var(--color-ink-2); transition: width 0.4s; }
.ubar u { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--color-ink); text-decoration: none; }
.urow2.hot .ubar i { background: #d6361f; }
.aih { margin: var(--space-lg) 0 var(--space-xs); font: 700 var(--text-md)/1.2 var(--font-body); }
.airow { display: grid; gap: var(--space-xs); padding: var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.aiact { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.aiact .in { width: 10rem; }
.aiact .in[data-ai="year"] { width: 6rem; }
.aicfg { display: grid; gap: var(--space-sm); justify-items: start; }
.aicfg .in { width: 7rem; }
.aicfg input[name="daily_cap"] { width: 10rem; }
.urow.off { opacity: 0.55; }
#vcapt { font-weight: 700; }

/* ---------- 사진 관리: 폴더 트리 · AI 대기열 · 선택 · 오른쪽 클릭 메뉴 ---------- */
.lact { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.pwrap { display: block; }
.ptree { display: none; }
.pcrumb { margin-top: var(--space-md); }
.pcell { position: relative; }
.pcell.sel { outline: 4px solid var(--color-accent); outline-offset: -4px; }
.pcell.sel::after { content: "선택"; position: absolute; right: var(--space-xs); top: var(--space-xs); padding: 0 var(--space-xs); border-radius: 4px; background: var(--color-accent); color: var(--color-accent-ink); font: 700 var(--text-xs)/1.6 var(--font-body); }
.ab { position: absolute; left: var(--space-xs); top: var(--space-xs); padding: 0 var(--space-xs); border-radius: 4px; font: 700 var(--text-xs)/1.6 var(--font-body); font-style: normal; }
.ab.done { background: var(--color-accent-2); color: var(--color-ink); }
.ab.queued, .ab.wait { background: var(--color-accent); color: var(--color-accent-ink); }
.ab.fail { background: var(--color-ink); color: var(--color-paper); }
.pbulk { position: fixed; left: 50%; bottom: var(--space-lg); z-index: var(--z-toast); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-sm) var(--space-md); max-width: calc(100% - 2rem); padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-card); background: var(--color-ink); color: var(--color-paper); box-shadow: var(--shadow-card); transform: translateX(-50%); }
.pbulk .act { color: var(--color-paper); text-decoration-color: var(--color-accent-2); }
.pbulk .btn.ghost { background: color-mix(in oklab, var(--color-paper) 16%, transparent); color: var(--color-paper); box-shadow: none; }
.ctx { position: fixed; z-index: 450; min-width: 15rem; padding: var(--space-xs); border: 4px solid var(--color-white); border-radius: var(--radius-card); background: var(--color-paper); box-shadow: var(--shadow-card); }
.ctx button { display: block; width: 100%; min-height: 40px; padding: 0 var(--space-md); border: 0; border-radius: 6px; background: none; text-align: left; color: var(--color-ink); font: 700 var(--text-sm)/1 var(--font-body); cursor: pointer; }
.ctx button:hover, .ctx button:focus-visible { background: var(--color-accent-2); }
.ctx button:first-child { background: var(--color-accent); color: var(--color-accent-ink); }
.ctx button:first-child:hover { background: var(--color-accent-deep); }
@media (max-width: 40rem) { .pbulk { bottom: calc(var(--dock-h) + var(--space-xl)); } }
@media (min-width: 64rem) {
  .pwrap { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); gap: var(--space-xl); align-items: start; }
  .ptree { display: block; position: sticky; top: calc(var(--bar-h) + var(--space-md)); max-height: calc(100vh - var(--bar-h) - 2 * var(--space-md)); overflow-y: auto; padding: var(--space-md); border-radius: var(--radius-card); background: var(--color-white); box-shadow: inset 0 0 0 1px var(--color-line); }
  .ptree h3 { margin-bottom: var(--space-sm); font: 400 var(--text-xl)/1.1 var(--font-display); }
  .tn { display: flex; align-items: center; padding-left: calc(var(--d, 0) * var(--space-sm)); border-radius: 6px; }
  .tn.here { background: var(--color-accent-2); }
  .tt { flex: none; width: 24px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
  .tt::before { content: ""; position: absolute; left: 8px; top: 11px; width: 6px; height: 6px; border-right: 2px solid var(--color-ink-2); border-bottom: 2px solid var(--color-ink-2); transform: rotate(-45deg); transition: transform var(--dur-micro) var(--ease-out); }
  .tt.open::before { transform: rotate(45deg); top: 9px; }
  .tt.leaf::before { display: none; }
  .tl { flex: 1; min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-xs); min-height: 32px; padding: 0 var(--space-xs) 0 0; border: 0; background: none; text-align: left; color: var(--color-ink); font: 700 var(--text-sm)/1.2 var(--font-body); cursor: pointer; }
  .tl span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tl small { flex: none; color: var(--color-muted); font-weight: 500; }
  .tn:not(.here):hover { background: var(--color-paper-2); }
  .ta { flex: none; min-height: 24px; margin-right: var(--space-2xs); padding: 0 var(--space-xs); border: 0; border-radius: 4px; background: var(--color-accent); color: var(--color-accent-ink); font: 700 var(--text-xs)/1 var(--font-body); cursor: pointer; opacity: 0; transition: opacity var(--dur-micro) var(--ease-out); }
  .tn:hover .ta, .ta:focus-visible { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .tt::before, .ta { transition: none; } }

/* ---------- 폴더 트리·패널 다듬기: 창 높이만큼 고정, 큰 화면은 너비를 가득 채움 ---------- */
@media (min-width: 40.01rem) { .pgrid { grid-template-columns: repeat(auto-fill, minmax(clamp(8.5rem, 7.5vw, 13rem), 1fr)); } }
@media (min-width: 64rem) {
  .pwrap { grid-template-columns: clamp(14rem, 14vw, 18rem) minmax(0, 1fr); }
  .ptree { height: calc(100dvh - var(--bar-h) - 2 * var(--space-md)); max-height: none; }
  .ph3 { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-sm); }
  .ph3 h3 { margin: 0; }
  .tn { min-height: 36px; padding-left: 0; }
  .tn.top { margin-top: var(--space-2xs); }
  .tn.here { background: var(--color-accent-2); }
  .tn.here .tl { font-weight: 700; }
  .tn.on:not(.here) .tl { color: var(--color-accent-deep); }
  .tk { margin-left: var(--space-md); padding-left: var(--space-2xs); border-left: var(--rule-hair) solid var(--color-rule); }
  .tt { width: 28px; height: 36px; }
  .tt::before { left: 10px; top: 14px; width: 7px; height: 7px; }
  .tt.open::before { top: 12px; }
  .tl { align-items: center; justify-content: flex-start; gap: var(--space-xs); min-height: 36px; }
  .tl small { margin-left: auto; padding: 0 var(--space-xs); border-radius: 10px; background: var(--color-paper-2); }
  .tn.here .tl small { background: var(--color-white); }
  .fi { flex: none; width: 18px; height: 18px; fill: var(--color-white); stroke: var(--color-ink); stroke-width: 1.5; stroke-linejoin: round; }
  .tn.open .fi { fill: var(--color-accent-2); }
  .av { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--color-ink); color: var(--color-accent-2); font: 400 var(--text-sm)/1 var(--font-display); }
  .tn.here .av { background: var(--color-accent); color: var(--color-accent-ink); }
}

/* 패널이 처음 자리(스크롤 전)에서도 고정 위치와 같게: 페이지 위 여백을 패널 여백과 맞춘다 */
@media (min-width: 64rem) {
  .page { padding-top: var(--space-md); padding-bottom: var(--space-md); }
  .ptree { top: calc(var(--bar-h) + var(--space-md)); height: calc(100dvh - var(--bar-h) - 2 * var(--space-md)); }
}

.ab.excl { background: var(--color-line); color: var(--color-ink); }

.hdirs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-md); margin-top: var(--space-md); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-card); background: var(--color-paper-2); }
.hdirs .note { margin: 0; flex: 1 1 100%; }
.hchip { display: inline-flex; align-items: center; gap: var(--space-sm); padding: 0 var(--space-md); min-height: 36px; border-radius: var(--radius-pill); background: var(--color-white); box-shadow: inset 0 0 0 1px var(--color-line); font-size: var(--text-sm); }


/* ---------- 사진 상태 색 구분: 선택=파랑 / 대기=주황 / AI 완료=라임 / 실패=빨강 / 제외=회색 (분홍은 주 버튼 전용) ---------- */
.pcell.sel { outline-color: var(--color-select); box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-select) 35%, transparent); }
.pcell.sel::after { background: var(--color-select); color: var(--color-select-ink); }
.ab.queued, .ab.wait { background: var(--color-wait); color: var(--color-wait-ink); }
.ab.fail { background: var(--color-error); color: var(--color-select-ink); }
.pbulk #pbN { padding: 0 var(--space-sm); border-radius: var(--radius-pill); background: var(--color-select); color: var(--color-select-ink); font-size: var(--text-sm); line-height: 1.8; }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-sm); }
.lg { padding: 0 var(--space-sm); border-radius: 4px; font: 700 var(--text-xs)/1.8 var(--font-body); }
.lg.sel { background: var(--color-select); color: var(--color-select-ink); }
.lg.queued { background: var(--color-wait); color: var(--color-wait-ink); }
.lg.done { background: var(--color-accent-2); color: var(--color-ink); }
.lg.fail { background: var(--color-error); color: var(--color-select-ink); }
.lg.excl { background: var(--color-line); color: var(--color-ink); }

/* ---------- 둘러보기(메인): 오늘의 추억 · 내용별 · 최근 · 연도 · 지역 ---------- */
html { scroll-behavior: smooth; }
.bsec { margin-top: var(--space-xl); }
.bhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs) var(--space-md); margin-bottom: var(--space-md); }
/* 태그 탭: 왼쪽(모바일은 위)에 태그가 늘 떠 있다 */
.tgwrap { display: block; }
.tgside { margin-bottom: var(--space-md); }
.tgside h3 { font: 400 var(--text-xl)/1.1 var(--font-display); }
.tghint { margin: 0 0 var(--space-sm); font-size: var(--text-sm); }
.tgchips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.tchip { display: inline-flex; align-items: center; gap: var(--space-xs); flex: none; min-height: 36px; padding: 0 var(--space-sm); border: 0; border-radius: var(--radius-pill); background: var(--color-white); box-shadow: inset 0 0 0 1px var(--color-line); color: var(--color-ink); font: 700 var(--text-sm)/1 var(--font-body); cursor: pointer; }
.tchip small { font-weight: 400; color: var(--color-ink-2); }
.tchip.who::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .55; }
.tchip:hover { background: var(--color-paper-2); }
.tchip.on { background: var(--color-ink); color: var(--color-paper); box-shadow: none; }
.tchip.on small { color: inherit; opacity: .75; }
.tgtoggle { display: none; }
@media (max-width: 63.99rem) {
  /* 작은 화면: 줄바꿈으로 한눈에 보이게 하고(두 줄), "태그 전체 보기"로 펼친다. 터치하기 쉽게 크게 */
  .tgchips { max-height: 6.4rem; overflow: hidden; gap: var(--space-sm); }
  .tchip { min-height: 44px; padding: 0 var(--space-md); font-size: var(--text-md); }
  .tgside.open .tgchips { max-height: none; }
  .tgtoggle { display: flex; width: 100%; justify-content: center; margin-top: var(--space-sm); }
  .tgtoggle[hidden] { display: none; }
  .tgside .tghint { display: none; }
}
@media (min-width: 64rem) {
  .tgwrap { display: grid; grid-template-columns: clamp(14rem, 16vw, 19rem) minmax(0, 1fr); gap: var(--space-xl); align-items: start; }
  .tgside { position: sticky; top: calc(var(--bar-h) + var(--space-md)); max-height: calc(100dvh - var(--bar-h) - 2 * var(--space-md)); overflow-y: auto; margin: 0; padding: var(--space-md); border-radius: var(--radius-card); background: var(--color-white); box-shadow: inset 0 0 0 1px var(--color-line); }
  .tgchips { flex-direction: column; align-items: stretch; }
  .tchip { justify-content: space-between; border-radius: var(--radius-card); }
}
.bhead h3 { font: 400 var(--text-2xl)/1.1 var(--font-display); }
.bhead .muted { font-size: var(--text-sm); }
.bgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(9.5rem, 12vw, 14rem), 1fr)); grid-auto-flow: dense; gap: var(--space-md); }
.bcard { display: grid; grid-template-rows: 1fr auto; padding: 0; border: 4px solid var(--color-white); border-radius: var(--radius-card); background: var(--color-white); box-shadow: var(--shadow-small); overflow: hidden; text-align: left; color: var(--color-ink); cursor: pointer; transition: translate var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out); }
.bcard:hover { translate: 0 -3px; box-shadow: var(--shadow-card); }
.bcard:active { translate: 2px 2px; box-shadow: var(--shadow-press); }
.bimg { display: block; aspect-ratio: 4 / 3; background: var(--t5); overflow: hidden; }
.bimg img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bcap { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); }
.bcap b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 var(--text-md)/1.3 var(--font-body); }
.bcap small { flex: none; color: var(--color-muted); font-size: var(--text-sm); }
.bcard.big { grid-column: span 2; grid-row: span 2; }
.bcard.big .bimg { aspect-ratio: auto; height: 100%; min-height: 12rem; }
.bcard.big .bcap b { font-size: var(--text-xl); font-family: var(--font-display); font-weight: 400; }
.bhero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); width: 100%; margin-top: var(--space-lg); padding: 0; border: 5px solid var(--color-white); border-radius: var(--radius-card); background: var(--color-ink); color: var(--color-paper); box-shadow: var(--shadow-card); overflow: hidden; text-align: left; cursor: pointer; transition: translate var(--dur-micro) var(--ease-out); }
.bhero:hover { translate: 0 -3px; }
.bhero .bimg { aspect-ratio: auto; height: 100%; min-height: 12rem; }
.btxt { display: grid; align-content: center; gap: var(--space-xs); padding: var(--space-lg); }
.btxt small { color: var(--color-accent-2); font: 700 var(--text-sm)/1.2 var(--font-body); }
.btxt b { font: 400 var(--text-3xl)/1.1 var(--font-display); }
.btxt span { color: color-mix(in oklab, var(--color-paper) 80%, transparent); }
.bstrip { display: flex; gap: var(--space-sm); overflow-x: auto; padding: var(--space-2xs) var(--space-2xs) var(--space-sm); scroll-snap-type: x proximity; scrollbar-width: thin; }
.bstrip button { flex: none; width: clamp(7rem, 10vw, 11rem); aspect-ratio: 1; padding: 0; border: 3px solid var(--color-white); border-radius: var(--radius-photo); background: var(--t5); box-shadow: var(--shadow-small); overflow: hidden; cursor: pointer; scroll-snap-align: start; transition: translate var(--dur-micro) var(--ease-out); }
.bstrip button:hover { translate: 0 -3px; }
.bstrip img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bnote { padding: var(--space-xl) var(--space-md); border: var(--rule-bar) dashed var(--color-rule); border-radius: var(--radius-card); text-align: center; color: var(--color-ink-2); }
.bnote p { margin: 0 auto var(--space-md); }
.sk-card { pointer-events: none; }
.sk-card .bimg { animation: pulse 1.4s ease-in-out infinite; }
.pcell.sk { background: var(--color-paper-2); box-shadow: none; animation: pulse 1.4s ease-in-out infinite; pointer-events: none; }
@media (max-width: 40rem) {
  .bhero { grid-template-columns: 1fr; }
  .bhero .bimg { aspect-ratio: 16 / 9; min-height: 0; }
  .bcard.big { grid-row: auto; }
  .bcard.big .bimg { aspect-ratio: 4 / 3; min-height: 0; }
  .tabs button { padding: 0 var(--space-xs); gap: var(--space-2xs); font-size: var(--text-sm); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .bcard, .bhero, .bstrip button { transition: none; } .sk-card .bimg, .pcell.sk { animation: none; } }

/* 둘러보기 첫 카드는 두 줄이 아니라 가로로 넓게: 옆 카드와 줄 높이가 같아 빈 공간이 생기지 않는다 */
.bcard.big { grid-column: span 2; grid-row: auto; }
.bcard.big .bimg { aspect-ratio: 8 / 3; min-height: 0; height: auto; }
.bgrid { align-items: start; }
@media (max-width: 40rem) { .bcard.big .bimg { aspect-ratio: 4 / 3; } }

/* 모바일: 사진 필터는 두 줄씩 나란히(세로로 길게 쌓이지 않게), 둘러보기 제목 위 여백 */
#vBrowse { padding-top: var(--space-xs); }
@media (max-width: 40rem) {
  .filters .in, .filters .cat { flex: 1 1 calc(50% - var(--space-sm)); min-width: 0; }
  .filters input[type="search"] { flex-basis: 100%; }
  .legend { margin-top: var(--space-xs); }
}


/* ---------- AI 대기열: 폴더 트리 아래 입구 + "이전 목록 | 이번 목록 | 다음 목록" 보기 ---------- */
.aiq-entry { position: sticky; bottom: 0; display: flex; align-items: center; gap: var(--space-sm); width: 100%; margin-top: var(--space-md); padding: var(--space-sm); border: 0; border-radius: 12px; background: color-mix(in oklab, var(--color-wait) 22%, var(--color-white)); box-shadow: inset 0 0 0 2px var(--color-wait); color: var(--color-ink); text-align: left; cursor: pointer; transition: translate var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out); animation: aiqenter .5s var(--ease-out) backwards; }
.aiq-entry[hidden] { display: none; }
.aiq-entry2 { position: static; width: auto; margin: var(--space-sm) 0 0; }
@media (min-width: 64rem) { .aiq-entry2 { display: none; } }
@media (max-width: 63.99rem) { .ptree .aiq-entry { display: none; } }
.aiq-entry:hover { translate: 0 -2px; box-shadow: inset 0 0 0 2px var(--color-wait), var(--shadow-small); }
.aiq-mini { position: relative; flex: none; width: 3.6rem; height: 2.7rem; }
.aiq-mini img { position: absolute; left: calc(var(--i) * .55rem); bottom: calc(var(--i) * .4rem); z-index: calc(5 - var(--i)); width: 2.4rem; height: 1.8rem; border-radius: 4px; object-fit: cover; background: var(--color-line); box-shadow: 0 0 0 1.5px var(--color-ink), 0 2px 5px rgb(0 0 0 / .3); }
.aiq-entry.run .aiq-mini { animation: aiqfloat 3s ease-in-out infinite; }
.aiq-et { min-width: 0; }
.aiq-et b { display: block; font: 700 var(--text-sm)/1.3 var(--font-body); }
.aiq-et b::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--color-wait); animation: aiqdot 1.4s var(--ease-out) infinite; }
.aiq-et small { display: block; color: var(--color-ink-2); font-size: var(--text-xs); }
@keyframes aiqdot { 50% { opacity: .35; } }
@keyframes aiqfloat { 50% { translate: 0 -5px; } }
@keyframes aiqenter { from { opacity: 0; translate: 0 1.2rem; } }

dialog.aiqdlg { max-width: min(96vw, 76rem); }
dialog.aiqdlg[open] { animation: aiqpop .3s var(--ease-out); }
@keyframes aiqpop { from { opacity: 0; scale: .97; } }
.aiqsum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xs); max-width: 36rem; }
.aiqsum > button { padding: var(--space-xs) var(--space-sm); border: 0; border-radius: 10px; background: var(--color-paper-2); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: translate var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out); }
.aiqsum > button:hover { translate: 0 -2px; }
.aiqsum > button:focus-visible { outline: 3px solid var(--color-select); outline-offset: 2px; }
.aiqsum > button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--color-ink); }
.aiqdlg [hidden] { display: none !important; }
.aiq-entry.idle .aiq-et b::before { display: none; }
.aiq-entry.idle .aiq-mini { display: none; }
.aiqsum b { display: block; font: 400 var(--text-xl)/1.1 var(--font-display); }
.aiqsum span { color: var(--color-ink-2); font: 700 var(--text-xs)/1.4 var(--font-body); }
.aiqsum .w { background: color-mix(in oklab, var(--color-wait) 30%, var(--color-white)); }
.aiqsum .d { background: var(--color-accent-2); }
.aiqsum .f { background: color-mix(in oklab, var(--color-error) 16%, var(--color-white)); }
.aiqsum .f b { color: var(--color-error); }
.aiqsum .f.zero { background: var(--color-paper-2); }
.aiqsum .f.zero b { color: var(--color-muted); }
.aiqlist { margin-top: var(--space-lg); }
.aiqchips { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-bottom: var(--space-sm); }
.aiqchips button { min-height: 32px; padding: 0 var(--space-md); border: 0; border-radius: var(--radius-pill); background: var(--color-paper-2); color: var(--color-ink-2); font: 700 var(--text-xs)/1 var(--font-body); cursor: pointer; }
.aiqchips button { min-height: 32px; height: auto; padding-block: 6px; line-height: 1.3; text-align: left; }
.aiqchips i { margin-left: .6em; font-style: normal; font-weight: 400; opacity: .75; }
.aiqlist .aiqtile.bad small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.aiqchips button[aria-pressed="true"] { background: var(--color-ink); color: var(--color-paper); }
.aiqchips button:focus-visible { outline: 3px solid var(--color-select); outline-offset: 2px; }
.aiqlist .btns { margin-top: var(--space-md); }
.aiqdh [data-all] { margin-left: auto; }
.aiqdh span + [data-back] { margin-left: auto; }
.aiqstat { min-height: 1.4em; margin: var(--space-sm) 0; color: var(--color-ink-2); font-size: var(--text-sm); }
.aiqnav { display: flex; justify-content: center; gap: var(--space-2xs); }
.aiqnav button { min-height: 36px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-pill); background: var(--color-paper-2); color: var(--color-ink-2); font: 700 var(--text-sm)/1 var(--font-body); cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.aiqnav button[aria-pressed="true"] { background: var(--color-ink); color: var(--color-paper); }

/* 무대: 가운데가 선택한 목록, 양옆으로 멀어질수록 작고 흐리게. 위치만 바뀌므로 목록이 넘어갈 때 밀리듯 움직인다 */
.aiqstage { --w: 11rem; --wh: 9.6rem; --oxf: 2.2rem; --oyf: 1.7rem; --gap: 17rem; position: relative; height: 22rem; margin-top: var(--space-sm); overflow: hidden; border-radius: var(--radius-card); background: color-mix(in oklab, var(--color-ink) 7%, var(--color-paper)); touch-action: pan-y; user-select: none; }
.aiqstage:focus-visible { outline: 3px solid var(--color-select); outline-offset: -3px; }
.aiqtrack { position: absolute; inset: 0; }
.aiqarr { position: absolute; top: 45%; z-index: 30; width: 44px; height: 44px; margin-top: -22px; border: 0; border-radius: 50%; background: var(--color-ink); color: var(--color-paper); font-size: 1.6rem; line-height: 1; cursor: pointer; transition: opacity var(--dur-micro) var(--ease-out), scale var(--dur-micro) var(--ease-out); }
.aiqarr:hover:not(:disabled) { scale: 1.08; }
.aiqarr:disabled { opacity: .2; cursor: default; }
.aiqarr.l { left: var(--space-sm); }
.aiqarr.r { right: var(--space-sm); }
.pst { --ox: 1.1rem; --oy: .85rem; position: absolute; left: 50%; bottom: 3.6rem; width: calc(var(--w) + (var(--n) - 1) * var(--oxf)); height: calc(var(--wh) + (var(--n) - 1) * var(--oyf)); transform-origin: 50% 100%; transform: translateX(calc(-50% + var(--d) * var(--gap))) scale(calc(1 - min(var(--a), 3) * .15)); opacity: calc(1 - var(--a) * .26); z-index: calc(20 - var(--a)); cursor: pointer; transition: transform .9s var(--ease-out), opacity .6s var(--ease-out); }
.pst.focus { --ox: 2.2rem; --oy: 1.7rem; cursor: default; }
.pst.focus .pw[data-i] { cursor: zoom-in; }
.pst.focus .pw[data-i]:hover { box-shadow: 0 0 0 2px var(--color-select), 0 8px 18px rgb(0 0 0 / .28); }
.pst.far, .pst.gone { opacity: 0; pointer-events: none; }
.pst.new { animation: aiqenter .6s var(--ease-out) backwards; }
.pst:focus-visible { outline: 3px solid var(--color-select); outline-offset: 6px; border-radius: 8px; }
.aiqwins { position: absolute; inset: 0; }
.pst.run .aiqwins { animation: aiqfloat 3.4s ease-in-out infinite; }

/* 사진 한 장 = 창 한 개. 계단식으로 위·오른쪽으로 겹치고, 제목줄에 파일명이 보인다 */
.pw { position: absolute; left: 0; bottom: 0; z-index: calc(10 - var(--i)); display: grid; grid-template-rows: 1.4rem minmax(0, 1fr); width: var(--w); height: var(--wh); border-radius: 8px; overflow: hidden; background: var(--color-ink); box-shadow: 0 0 0 1px rgb(0 0 0 / .55), 0 8px 18px rgb(0 0 0 / .28); transform: translate(calc(var(--i) * var(--ox) + (var(--n) - 1) * (var(--oxf) - var(--ox)) / 2), calc(var(--i) * var(--oy) * -1)); transition: transform .7s var(--ease-out), filter .4s var(--ease-out), opacity .4s var(--ease-out); }
.pwt { display: flex; align-items: center; padding: 0 .55rem; background: color-mix(in oklab, var(--color-ink) 82%, white); color: var(--color-paper); font: 600 .66rem/1 var(--font-body); }
.pwt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw img { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--color-line); }
.pw.bad { filter: grayscale(1); opacity: .5; }
.pw.bad .pwt span::after { content: " · 실패"; }
.pw.ghost { grid-template-rows: 1fr; place-items: center; padding: var(--space-sm); border: 2px dashed var(--color-line); background: transparent; box-shadow: none; color: var(--color-muted); font: 700 var(--text-xs)/1.5 var(--font-body); text-align: center; }
.pst.run .pw:not(.bad)::after { content: ""; position: absolute; inset: 1.4rem 0 0; background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .38) 50%, transparent 65%); transform: translateX(-100%); animation: aiqscan 2.4s ease-in-out infinite; pointer-events: none; }
@keyframes aiqscan { to { transform: translateX(100%); } }
.pcap { position: absolute; left: 50%; top: calc(100% + .8rem); width: max-content; max-width: 14rem; text-align: center; transform: translateX(-50%); }
.pcap b { display: inline-block; padding: 0 var(--space-sm); border-radius: var(--radius-pill); background: var(--color-white); box-shadow: inset 0 0 0 1px var(--color-line); font: 700 var(--text-xs)/1.9 var(--font-body); }
.pst.now .pcap b, .pst.idle .pcap b { background: var(--color-wait); color: var(--color-wait-ink); box-shadow: none; }
.pst.next .pcap b { background: var(--color-accent-2); box-shadow: none; }
.pcap small { display: block; margin-top: 2px; color: var(--color-muted); font-size: var(--text-xs); }

/* 선택한 목록의 사진별 보기: 실패한 사진은 회색 */
.aiqdetail { margin-top: var(--space-lg); }
.aiqdetail.swap { animation: aiqenter .45s var(--ease-out); }
.aiqdh { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2xs) var(--space-md); margin-bottom: var(--space-sm); }
.aiqdh h4 { margin: 0; font: 400 var(--text-xl)/1.1 var(--font-display); }
.aiqdh span { color: var(--color-muted); font-size: var(--text-sm); }
.aiqtiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: var(--space-sm); }
.aiqtile { display: block; width: 100%; padding: 0; border: 0; overflow: hidden; border-radius: 10px; background: var(--color-white); box-shadow: inset 0 0 0 1px var(--color-line); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: translate var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out); }
.aiqtile:hover, .aiqtile:focus-visible { translate: 0 -3px; box-shadow: inset 0 0 0 1px var(--color-line), var(--shadow-small); }
.aiqtile:focus-visible { outline: 3px solid var(--color-select); outline-offset: 2px; }
.aiqtile img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--color-line); }
.aiqtile div { padding: var(--space-xs) var(--space-sm); }
.aiqtile b, .aiqtile small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-xs); }
.aiqtile small { color: var(--color-muted); }
.aiqcell { display: grid; gap: 4px; align-content: start; }
.aiqreq { padding: 6px 8px; border: 0; border-radius: 8px; background: var(--color-ink); color: var(--color-white); font: 700 var(--text-xs)/1.2 var(--font-body); cursor: pointer; }
.aiqreq:disabled { opacity: .5; }
.aiqdh [data-reqall] { margin-left: auto; }
.aiqtile.bad img { filter: grayscale(1); opacity: .4; }
.aiqtile.bad b { color: var(--color-muted); text-decoration: line-through; }
.aiqtile.bad small::before { content: "실패 · "; font-weight: 700; }
@media (max-width: 40rem) {
  .aiqstage { --w: 8.6rem; --wh: 7.6rem; --oxf: 1.6rem; --oyf: 1.3rem; --gap: 9.5rem; height: 18.5rem; }
  .pst { --ox: .8rem; --oy: .65rem; bottom: 3.4rem; }
  .pst.focus { --ox: 1.6rem; --oy: 1.3rem; }
  .aiqarr { width: 38px; height: 38px; }
  .aiqnav button { padding: 0 var(--space-md); white-space: nowrap; }
  .aiqdlg > .btns .btn { padding-inline: var(--space-sm); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .pst, .pw, .aiq-entry, .aiqarr { transition: none; }
  .pst.run .aiqwins, .aiq-entry.run .aiq-mini, .pst.new, .aiqdetail.swap, .aiq-entry, dialog.aiqdlg[open], .aiq-et b::before { animation: none; }
  .pst.run .pw::after { animation: none; display: none; }
}

/* ---- 얼굴·가족 분류 (관리자 팝업) */
.facedlg { max-width: min(96vw, 56rem); }
.fswitch { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); margin: var(--space-sm) 0; }
.fswitch .in { width: 5rem; display: inline-block; }
.fbar { height: 8px; margin: var(--space-xs) 0 var(--space-sm); border-radius: 99px; background: var(--color-white); box-shadow: inset 0 0 0 1px var(--color-line); overflow: hidden; }
.fbar i { display: block; width: 0; height: 100%; background: var(--color-accent); transition: width 0.4s; }
.fpeople { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.fp { display: flex; align-items: center; gap: var(--space-xs); padding: 4px var(--space-md) 4px 4px; border: 0; border-radius: 99px; background: var(--color-white); box-shadow: inset 0 0 0 1px var(--color-line); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.fp:hover { background: var(--color-accent-2); }
.fp[aria-pressed="true"] { background: var(--color-accent-2); box-shadow: inset 0 0 0 2px var(--color-ink); }
.fp img, .fp .fnoimg { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--color-line); }
.fp b { display: block; font-size: var(--text-md); }
.fp small { color: var(--color-muted); }
.fgrp { display: grid; gap: var(--space-sm); margin-bottom: var(--space-sm); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-card); background: var(--color-white); box-shadow: inset 0 0 0 1px var(--color-line); }
.fcrops { display: flex; flex-wrap: wrap; gap: 6px; }
.fcrops img { display: block; width: 64px; height: 64px; border-radius: 8px; object-fit: cover; background: var(--color-line); }
.fgact { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); }
.fgact .in { flex: 1 1 10rem; width: auto; }
.fdetail { display: grid; gap: var(--space-sm); margin-top: var(--space-md); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-card); background: var(--color-white); box-shadow: inset 0 0 0 1px var(--color-line); }
.fdetail .acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-md); }
.facedlg.fwho > :not(.row):not(#faceDetail) { display: none; }   /* 한 사람 보기: 그 사람 얼굴만 보이게 나머지는 숨긴다 */
.fcrops.big { gap: 8px; }
.fcrops.big img { width: 88px; height: 88px; }
.fpage { justify-content: flex-start; align-items: center; flex-wrap: wrap; gap: var(--space-sm); position: sticky; bottom: 0; padding: var(--space-sm) 0; background: var(--color-white); }
.fpage .grow { flex: 1; }
.fc { position: relative; padding: 0; border: 0; border-radius: 8px; background: none; cursor: pointer; }
.fc.auto::after { content: "자동"; position: absolute; left: 3px; bottom: 3px; padding: 0 4px; border-radius: 4px; background: rgba(0, 0, 0, 0.62); color: #fff; font-size: 10px; line-height: 1.5; }
.fc.sel { outline: 3px solid var(--color-error); outline-offset: -3px; }