:root{
--bg:#08080a;
--surface:#101014;
--surface-2:#16161b;
--surface-3:#1d1d23;
--fill:#1c1c22;
--fill-hover:#26262e;
--line:#26262d;
--line-strong:#383842;
--ink:#f4f4f6;
--ink-dim:#9c9ca6;
--ink-mute:#6c6c76;
--on-invert:#08080a;
--ok:#4ade80;
--ok-line:#2f6b45;
--ok-soft:#12261a;
--warn:#fbbf24;
--warn-line:#6b5220;
--info:#60a5fa;
--danger:#f87171;
--danger-line:#7f3535;
--glass-1:#ff375f;
--glass-2:#ff9f0a;
--glass-3:#ffd60a;
--glass-4:#32d74b;
--glass-5:#0ac8e8;
--glass-6:#0a84ff;
--glass-7:#bf5af2;
--paper:#08080a;
--card:#101014;
--muted:#9c9ca6;
--wine:#f4f4f6;
--sage:#9c9ca6;
--soft:#16161b}
.account{position:relative}.header-tool{position:relative;height:42px;border:1px solid var(--line-strong);background:var(--surface);display:flex;align-items:center;justify-content:center;padding:9px}.header-tool svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.notification-button{width:42px}.friend-button,.install-app-button{gap:7px;padding:9px 11px;font-weight:800}.friend-button span,.install-app-button span{white-space:nowrap}.install-app-button{background:var(--fill);color:var(--ink)}.install-app-button svg{stroke:var(--ink)}.notification-badge{position:absolute;right:-6px;top:-7px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--fill);color:var(--ink);border:2px solid var(--line-strong);font-size:10px;display:grid;place-items:center}.actionbar{position:fixed;left:24px;top:50%;transform:translateY(-50%);z-index:40}.action:disabled{color:var(--ink-mute);background:var(--surface-2)!important;cursor:not-allowed}.action-icon{width:30px;height:30px;display:grid;place-items:center;flex:0 0 30px}.action-icon svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.action-icon.save-icon svg{fill:currentColor;stroke:none}.selection-summary{margin:-22px 0 26px;padding:9px 12px;border:1px solid var(--line);background:var(--surface);font-size:12px;color:var(--muted)}.item-card:before{display:none!important}.item-selector{position:absolute;z-index:4;top:10px;left:10px;width:22px;height:22px;border:3px solid var(--line-strong);border-radius:50%;background:var(--surface);padding:0}.item-selector[aria-pressed="true"]{background:var(--fill);box-shadow:inset 0 0 0 4px var(--line-strong)}.item-card.selected{outline:4px solid var(--line-strong);outline-offset:-4px;background:var(--surface-2)}.dialog-selection-summary{border:1px solid var(--line-strong);background:var(--surface);padding:12px;font-size:13px;line-height:1.6}.notification-dialog,.friend-dialog{width:min(650px,calc(100% - 30px))}.dialog-help{margin:0;color:var(--muted);font-size:13px;line-height:1.6}.notification-section{border-top:1px solid var(--line);padding-top:16px}.notification-section h3{margin:0 0 10px;font:700 18px Georgia,serif}.notification-list{display:grid;gap:8px}.notification-item{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid var(--line);padding:12px;background:var(--surface)}.notification-item p{margin:3px 0;color:var(--muted);font-size:12px}.notification-actions{display:flex;gap:6px;flex-shrink:0}.notification-actions button{border:1px solid var(--line-strong);background:var(--surface);padding:7px 9px}.empty-notification{padding:10px;border:1px dashed var(--line);color:var(--muted);font-size:12px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:760px){.notification-item{align-items:flex-start;flex-direction:column}.topbar .account{flex-wrap:wrap;justify-content:flex-end}.account #accountName{width:100%;text-align:right}.friend-button span,.install-app-button span{display:none}.friend-button,.install-app-button{width:42px;padding:9px}}
.signup-address-map{border:1px solid var(--line);padding:10px;background:var(--surface)}.signup-address-map p{margin:0 0 8px;font-size:12px;color:var(--muted)}#signupAddressMap{height:220px;border:1px solid var(--line-strong);background:var(--surface-2)}
.face-consent-box{display:grid;gap:9px;border:1px solid var(--line-strong);background:var(--surface);padding:13px}.face-consent-box>strong{font:700 16px Georgia,serif}.face-consent-box p,.face-settings-form p{margin:0;font-size:11px;line-height:1.6;color:var(--muted)}.face-settings-form{display:grid;gap:10px}.face-settings-form .primary{justify-self:start}
.item-cover{width:100%;height:150px;object-fit:cover;border-bottom:3px solid var(--line-strong);margin:-18px -18px 12px;width:calc(100% + 36px)}.album-card .item-cover{height:190px;margin:-20px -20px 12px;width:calc(100% + 40px)}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Pretendard",Inter,sans-serif}.shell{max-width:1100px;margin:auto;padding:34px 24px 90px}.hidden{display:none!important}.eyebrow{margin:0 0 8px;font-size:11px;letter-spacing:.18em;color:var(--ink);font-weight:800}.auth-view{min-height:calc(100vh - 68px);display:grid;grid-template-columns:1.05fr .95fr;gap:0;border:1px solid var(--line);background:var(--card);box-shadow:0 18px 60px #00000012}.brand-panel{padding:72px;background:var(--fill);color:var(--ink);display:flex;flex-direction:column;justify-content:center}.brand-panel .eyebrow{color:var(--ink)}.brand-panel h1{font-family:Georgia,serif;font-size:52px;line-height:1.1;margin:0 0 24px}.brand-panel>p:last-child{color:var(--ink-dim);max-width:430px}.auth-card{padding:54px;align-self:center}.auth-tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line);margin-bottom:28px}.auth-tab{border:0;background:none;padding:13px;color:var(--muted);font-weight:700}.auth-tab.active{color:var(--ink);border-bottom:2px solid var(--line-strong)}.auth-form{display:grid;gap:14px}.auth-form label,.dialog-form label{display:grid;gap:6px;font-size:13px;font-weight:700}.auth-form input,.dialog-form input,.dialog-form select{width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:0;background:var(--surface);font:inherit}.inline{display:grid;grid-template-columns:1fr auto;gap:8px}.inline button,.ghost,.dialog-actions button{border:1px solid var(--line-strong);border-radius:0;background:var(--surface);padding:10px 13px;font-weight:700}.primary{border:1px solid var(--line-strong)!important;border-radius:0;background:var(--fill)!important;color:var(--ink);padding:13px 16px;font-weight:800}.message{min-height:24px;margin-top:12px;color:var(--ink);font-size:13px}.test-code{padding:10px 12px;border:1px dashed var(--line-strong);background:var(--surface);color:var(--ink);font-size:13px}.test-note,.field-status{font-size:12px;color:var(--muted)}.topbar{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:24px}.topbar h1{font:700 36px Georgia,serif;margin:0}.account{display:flex;align-items:center;gap:12px}.actionbar{display:flex;flex-direction:column;width:196px;border:1px solid var(--line-strong);background:var(--surface);margin-bottom:34px;max-height:calc(100vh - 48px);overflow-y:auto;box-shadow:0 12px 30px #00000066}.action{min-height:58px;border:0;border-bottom:1px solid var(--line-strong);background:var(--surface);padding:0 16px;display:flex;justify-content:space-between;align-items:center;font-weight:800}.action:last-child{border-bottom:0}.action b{font-size:28px;font-weight:400}.library-section{margin-top:30px}.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:13px}.section-head h2{font:700 24px Georgia,serif;margin:0}.section-head>span{font-size:12px;color:var(--muted)}.album-grid{display:grid;grid-template-columns:repeat(2,1fr);border:6px double var(--line-strong);background:var(--surface);padding:5px;gap:5px}.album-card{min-height:180px;border:3px solid var(--line-strong);padding:20px;display:flex;flex-direction:column;justify-content:space-between;background:var(--surface)}.file-grid{display:grid;grid-template-columns:repeat(3,1fr);border:6px double var(--line-strong);background:var(--surface);padding:5px;gap:5px}.file-card{min-height:160px;border:3px solid var(--line-strong);padding:18px;background:var(--surface)}.item-card{cursor:pointer;position:relative}.item-card:hover{background:var(--surface-2)}.item-card:before{content:"";position:absolute;width:14px;height:14px;border:3px solid var(--line-strong);border-radius:50%;top:10px;left:10px;background:var(--surface)}.item-card h3{font:700 24px Georgia,serif;margin:24px 0 8px}.item-card p{font-size:12px;color:var(--muted)}.badge{display:inline-flex;background:var(--soft);border-radius:0;padding:3px 8px;font-size:11px}.empty-card{min-height:140px;border:2px dashed var(--line);display:grid;place-items:center;color:var(--muted)}dialog{border:1px solid var(--line-strong);border-radius:0;padding:0;box-shadow:0 20px 80px #0003;width:min(480px,calc(100% - 30px))}dialog::backdrop{background:#000b}.dialog-form{padding:24px;display:grid;gap:14px}.dialog-head,.dialog-actions{display:flex;justify-content:space-between;align-items:center}.dialog-head{justify-content:flex-start;gap:8px}.dialog-head h2{margin:0}.dialog-head button[aria-label="닫기"],.dialog-head button[value=cancel]{order:-1}.dialog-head button{border:0;background:none;font-size:24px}.dialog-actions{justify-content:flex-end;gap:8px}.check{display:flex!important;align-items:center;grid-template-columns:auto 1fr!important}.check input{width:auto}.item-actions{display:flex;gap:7px;margin-top:12px}.item-actions button{border:1px solid var(--line-strong);background:var(--surface);border-radius:0;padding:6px 9px;font-size:11px}@media(max-width:760px){.auth-view{grid-template-columns:1fr}.brand-panel{padding:36px}.brand-panel h1{font-size:38px}.auth-card{padding:32px}.actionbar{position:static;left:auto;top:auto;transform:none;width:auto;max-height:none;overflow:visible;box-shadow:none}.action{border-bottom:1px solid var(--line)}.album-grid,.file-grid{grid-template-columns:1fr}.topbar{align-items:flex-start;gap:20px}}
#dashboardView{padding-left:0}@media(min-width:761px){#dashboardView{padding-left:230px}}
.section-tools{display:flex;align-items:center;gap:10px}.section-tools>span{font-size:12px;color:var(--muted)}.sort-menu{position:relative}.sort-menu summary{list-style:none;width:38px;height:38px;border:1px solid var(--line-strong);background:var(--surface);display:grid;place-items:center;cursor:pointer}.sort-menu summary::-webkit-details-marker{display:none}.sort-menu summary svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linejoin:round}.sort-menu[open] summary{background:var(--fill)}.sort-menu[open] summary svg{stroke:var(--ink)}.sort-options{position:absolute;z-index:20;right:0;top:43px;width:148px;border:1px solid var(--line-strong);background:var(--surface);padding:4px;box-shadow:0 10px 28px #0002}.sort-options button{display:block;width:100%;border:0;background:var(--surface);color:var(--ink);text-align:left;padding:10px 11px;font-size:12px;font-weight:700}.sort-options button:hover,.sort-options button.active{background:var(--fill);color:var(--ink)}.sort-options button.active:before{content:"✓ ";font-weight:900}
.section-create-button{height:38px;border:1px solid var(--line-strong);background:var(--fill);color:var(--ink);display:flex;align-items:center;gap:7px;padding:0 11px;font-weight:800}.section-create-button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.section-create-button:disabled{background:var(--surface-2);color:var(--ink-mute);border-color:var(--line)}.section-create-button:not(:disabled):hover{background:var(--surface);color:var(--ink)}.file-tools-group{display:flex}.file-tools-group .section-create-button:not(:last-child){border-right:0;box-shadow:inset -1px 0 0 var(--line-strong)}.file-tools-group .section-create-button:disabled:not(:last-child){box-shadow:inset -1px 0 0 var(--line)}@media(max-width:760px){.section-head{align-items:flex-start}.section-tools{flex-wrap:wrap;justify-content:flex-end}.section-create-button span{display:none}.section-create-button{width:38px;padding:0;justify-content:center}}

/* 추억 카드를 실제 폴라로이드 인화지처럼 보이게 구성한다. */
.album-grid,.file-grid{border:0;background:transparent;padding:4px 6px 12px;gap:24px;align-items:start}
.item-card,.album-card,.file-card{min-height:0;border:1px solid var(--line-strong);background:var(--surface-2);padding:12px 12px 20px;display:block;box-shadow:0 12px 30px #00000066;transition:transform .15s ease,box-shadow .15s ease}
.item-card:hover{background:var(--surface-2);transform:translateY(-3px);box-shadow:0 12px 30px #00000066}
.item-card.selected{outline:4px solid var(--line-strong);outline-offset:4px;background:var(--surface-2)}
.item-cover,.album-card .item-cover{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;margin:0 0 18px;border:1px solid var(--line-strong);background:var(--fill)}
.item-selector{top:20px;left:20px;width:24px;height:24px;background:var(--surface);border-width:2px}
.polaroid-caption{min-height:86px;padding:0 8px}
.item-card h3{font-size:24px;margin:12px 0 8px}
.item-card>div:last-child{padding:0 8px}
.memory-tags{display:flex;flex-wrap:wrap;gap:6px;min-height:24px;align-items:flex-start}
.memory-tag{display:inline-flex;align-items:center;min-height:23px;padding:3px 8px;border:1px solid var(--line-strong);background:var(--surface);font-size:11px;font-weight:800;line-height:1.25}
.memory-tag.location{background:var(--fill);color:var(--ink)}
.memory-tag.occasion{border-style:double;border-width:3px;padding:1px 7px}
.memory-tag.friend{background:var(--surface-2)}
.item-actions button{background:var(--surface-2)}
@media(max-width:760px){.album-grid,.file-grid{gap:22px;padding-left:2px;padding-right:8px}.item-card,.album-card,.file-card{padding:10px 10px 18px}.item-selector{top:18px;left:18px}}

.bundle-card{border:3px double var(--line-strong);background:var(--surface-2)}.bundle-card:hover{background:var(--surface-2)}.bundle-card.selected{background:var(--surface-2)}.bundle-card .item-cover{border-color:var(--line-strong)}.bundle-card .polaroid-caption:before{content:"통합 분류";display:inline-block;margin:10px 8px 0;padding:4px 8px;border:1px solid var(--line-strong);background:var(--fill);color:var(--ink);font-size:10px;font-weight:800;letter-spacing:.08em}.bundle-detail{font-size:11px!important;color:var(--ink)!important;font-weight:700}.session-split-fieldset{border:1px solid var(--line-strong);margin:0;padding:12px}.session-split-fieldset legend{padding:0 6px;font-weight:800}.session-split-list{display:grid;gap:7px;max-height:290px;overflow:auto}.session-split-option{display:grid!important;grid-template-columns:auto 1fr!important;align-items:center;gap:10px!important;border:1px solid var(--line);padding:10px;background:var(--surface);font-weight:600!important}.session-split-option input{width:auto!important}.session-split-option span{display:grid;gap:3px}.session-split-option small{color:var(--muted);font-weight:400}.section-tools .section-create-button{white-space:nowrap}@media(max-width:760px){.session-split-list{max-height:230px}}

.merge-progress{display:grid;gap:8px;border:1px solid var(--line-strong);background:var(--surface);padding:12px}.merge-progress-head,.merge-progress-meta{display:flex;align-items:center;justify-content:space-between;gap:12px}.merge-progress-head{font-size:13px}.merge-progress-head span{font:800 13px Georgia,serif}.merge-progress progress{display:block;width:100%;height:14px;border:1px solid var(--line-strong);border-radius:0;background:var(--surface)}.merge-progress progress::-webkit-progress-bar{background:var(--surface)}.merge-progress progress::-webkit-progress-value{background:var(--fill);transition:width .25s ease}.merge-progress progress::-moz-progress-bar{background:var(--fill)}.merge-progress-meta{color:var(--muted);font-size:11px}.merge-progress.error{border-color:var(--line-strong);background:var(--surface)}.merge-progress.error progress::-webkit-progress-value{background:var(--ink-mute)}.merge-progress.complete progress::-webkit-progress-value{background:var(--fill)}@media(max-width:520px){.merge-progress-meta{align-items:flex-start;flex-direction:column;gap:3px}}

.my-page-button{height:auto;min-height:42px;display:grid;gap:2px;padding:7px 12px;text-align:left}.my-page-button span{font-weight:800;white-space:nowrap}.my-page-button small{font-size:10px;color:var(--muted)}.my-page-view{max-width:1040px;margin:auto}.my-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:24px;padding-bottom:18px;border-bottom:3px double var(--line-strong)}.my-page-head h1{margin:0;font:700 38px Georgia,serif}.my-page-head>div>p:last-child{margin:8px 0 0;color:var(--muted)}.my-page-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:18px}.my-page-panel{border:1px solid var(--line-strong);background:var(--surface);padding:24px}.my-page-form{display:grid;gap:14px}.my-page-form label{display:grid;gap:6px;font-size:13px;font-weight:700}.my-page-form input{width:100%;padding:12px 13px;border:1px solid var(--line);background:var(--surface);font:inherit}.my-page-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}.my-page-section-head{display:flex;align-items:end;justify-content:space-between;gap:15px;padding-bottom:12px;border-bottom:1px solid var(--line)}.my-page-section-head h2{margin:0;font:700 24px Georgia,serif}.my-page-section-head span{font-size:12px;color:var(--muted)}.password-change-box{display:grid;grid-template-columns:1fr 1fr;gap:12px;border:1px solid var(--line);padding:14px}.password-change-box legend{padding:0 7px;font-weight:800}.password-change-box label:first-of-type{grid-column:1/-1}.profile-photo-manager{align-self:start;display:grid;gap:14px}.profile-photo-upload{display:grid;place-items:center;min-height:52px;border:1px solid var(--line-strong);background:var(--fill);color:var(--ink);font-weight:800;cursor:pointer}.profile-photo-upload input{position:absolute;width:1px;height:1px;opacity:0}.profile-photo-upload:has(input:disabled){background:var(--surface-2);color:var(--ink-dim);cursor:not-allowed}.profile-photo-list{display:grid;gap:8px;max-height:590px;overflow:auto}.profile-photo-card{display:grid;grid-template-columns:70px minmax(0,1fr) auto;align-items:center;gap:10px;border:1px solid var(--line);padding:8px}.profile-photo-card img{width:70px;height:70px;object-fit:cover;background:var(--fill)}.profile-photo-card div{min-width:0;display:grid;gap:4px}.profile-photo-card strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.profile-photo-card small{color:var(--muted)}.profile-photo-card button{border:1px solid var(--line-strong);background:var(--surface);padding:7px 9px}.profile-analysis-status{display:inline-flex;width:max-content;max-width:100%;align-items:center;padding:3px 6px;border:1px solid var(--line);background:var(--surface);color:var(--ink-dim);font-size:10px;font-weight:800;line-height:1.35}.profile-analysis-status.ready{border-color:var(--ok-line);background:var(--ok-soft);color:var(--ok)}.profile-analysis-status.working{border-color:var(--line);background:var(--fill);color:var(--ink)}.profile-analysis-status.warning{border-color:var(--warn-line);background:var(--surface-2);color:var(--warn)}.profile-photo-actions{display:flex!important;align-items:center;gap:5px!important}.profile-photo-actions button{white-space:nowrap}@media(max-width:800px){.my-page-layout{grid-template-columns:1fr}.my-page-fields,.password-change-box{grid-template-columns:1fr}.password-change-box label:first-of-type{grid-column:auto}.my-page-head{align-items:flex-start;flex-direction:column}.topbar .account{gap:7px}.my-page-button small{display:none}}

/* 상단 계정 기능을 하나의 일관된 내비게이션으로 묶는다. */
.topbar .account-nav{gap:0;min-height:50px;border:1px solid var(--line-strong);background:var(--fill);color:var(--ink);box-shadow:0 12px 30px #00000066}
.topbar .account-nav .header-tool{height:48px;min-height:48px;border:0;border-left:1px solid var(--line);background:transparent;color:var(--ink);padding:0 14px;gap:8px;font:700 12px Inter,"Noto Sans KR",sans-serif;transition:background-color .16s ease,color .16s ease}
.topbar .account-nav .header-tool:first-child{border-left:0}
.topbar .account-nav .header-tool:hover,.topbar .account-nav .header-tool:focus-visible{background:var(--fill-hover);color:var(--ink);outline:none}
.topbar .account-nav .header-tool:focus-visible{box-shadow:inset 0 -3px 0 var(--line-strong)}
.topbar .account-nav .header-tool svg{width:18px;height:18px;stroke:var(--ink);flex:0 0 auto}
.topbar .account-nav .my-page-button{display:flex;align-items:center;min-width:158px;text-align:left}
.topbar .account-nav .account-copy{display:grid;gap:2px;line-height:1.05}
.topbar .account-nav .account-copy>span{color:var(--ink);font-size:12px}
.topbar .account-nav .account-copy small{color:var(--ink-dim);font-size:9px;font-weight:600}
.topbar .account-nav .notification-button{width:auto;min-width:76px}
.topbar .account-nav .header-tool-label{white-space:nowrap}
.topbar .account-nav .friend-button,.topbar .account-nav .logout-button{white-space:nowrap}
.topbar .account-nav .notification-badge{right:5px;top:4px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink)}
.topbar .account-nav .install-app-button{background:var(--surface);color:var(--ink)}
.topbar .account-nav .install-app-button svg{stroke:var(--ink)}
@media(max-width:900px){.topbar{align-items:flex-start;gap:18px;flex-direction:column}.topbar .account-nav{align-self:stretch}.topbar .account-nav .header-tool{flex:1}.topbar .account-nav .my-page-button{min-width:0;flex:1.5}}
@media(max-width:560px){.topbar .account-nav .header-tool{padding:0 10px}.topbar .account-nav .header-tool-label,.topbar .account-nav .friend-button span,.topbar .account-nav .logout-button span{display:none}.topbar .account-nav .notification-button,.topbar .account-nav .friend-button,.topbar .account-nav .logout-button{min-width:46px;width:46px;flex:0 0 46px}.topbar .account-nav .my-page-button{min-width:0}.topbar .account-nav .account-copy>span{max-width:140px;overflow:hidden;text-overflow:ellipsis}.topbar .account-nav .notification-badge{right:2px}}

/* 앱 아이콘, 라이브러리 이름, 계정 메뉴가 한 프레임에 이어지는 헤더. */
.topbar.library-topbar{display:flex;align-items:stretch;gap:0;min-height:70px;margin-bottom:24px;border:5px solid var(--line-strong);background:var(--surface);box-shadow:none}
.library-brand{display:flex;align-items:stretch;min-width:0;flex:1;color:var(--ink)}
.library-brand-icon{width:68px;flex:0 0 68px;display:grid;place-items:center;border-right:5px solid var(--line-strong);background:var(--surface-2)}
.library-brand-icon img{display:block;width:44px;height:44px}
.library-brand-name{display:flex;align-items:center;min-width:230px;padding:0 28px;font:italic 700 24px Georgia,"Times New Roman",serif;letter-spacing:.035em;white-space:nowrap}
.topbar.library-topbar .account-nav{align-self:stretch;min-height:60px;border:0;border-left:5px solid var(--line-strong);box-shadow:none;flex:0 0 auto}
.topbar.library-topbar .account-nav .header-tool{height:60px;min-height:60px}
@media(max-width:1050px){.library-brand-name{min-width:180px;padding:0 18px;font-size:21px}.topbar.library-topbar .account-nav .header-tool{padding-left:11px;padding-right:11px}.topbar.library-topbar .account-nav .my-page-button{min-width:145px}}
@media(max-width:900px){.topbar.library-topbar{display:flex;flex-direction:row;align-items:stretch;gap:0}.topbar.library-topbar .account-nav{align-self:stretch}.topbar.library-topbar .account-nav .header-tool{flex:0 1 auto}.library-brand-name{min-width:0;font-size:19px}}
@media(max-width:760px){.topbar.library-topbar{flex-wrap:nowrap}.library-brand-icon{width:58px;flex-basis:58px}.library-brand-icon img{width:38px;height:38px}.library-brand-name{padding:0 14px;font-size:18px}.topbar.library-topbar .account-nav{flex-wrap:nowrap}.topbar.library-topbar .account-nav .header-tool{padding-left:9px;padding-right:9px}.topbar.library-topbar .account-nav .my-page-button{min-width:132px}}
@media(max-width:620px){.topbar.library-topbar{flex-wrap:wrap}.library-brand{flex-basis:100%;height:58px;border-bottom:5px solid var(--line-strong)}.topbar.library-topbar .account-nav{width:100%;border-left:0}.topbar.library-topbar .account-nav .header-tool{flex:1}.topbar.library-topbar .account-nav .my-page-button{flex:2}}
@media(max-width:560px){.library-brand-name{padding:0 14px;font-size:18px}.topbar.library-topbar{border-width:4px}.library-brand,.library-brand-icon{border-width:4px}}

/* 파일 목록 옆에 붙는 아이콘 전용 세로 리모컨. */
.actionbar{left:calc(max(0px,(100vw - 1100px)/2) + 138px);top:50%;width:58px;max-height:none;margin:0;overflow:hidden;border:2px solid var(--line-strong);border-radius:30px;background:var(--surface);box-shadow:0 12px 30px #00000066;transform:translateY(-50%)}
.actionbar .action{width:54px;min-height:58px;padding:0;justify-content:center;border-bottom:1px solid var(--line);background:var(--surface)}
.actionbar .action:last-child{border-bottom:0}
.actionbar .action>span:first-child{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.actionbar .action-icon{width:26px;height:26px;flex-basis:26px}
.actionbar .action-icon svg{width:26px;height:26px;stroke-width:2}
.actionbar .action:hover:not(:disabled),.actionbar .action:focus-visible{background:var(--fill);color:var(--ink);outline:none}
.actionbar .action:focus-visible{box-shadow:inset 0 0 0 3px var(--line-strong)}
.actionbar .action:disabled{background:var(--surface-2)!important;color:var(--ink-mute)}
@media(max-width:760px){#dashboardView{padding-left:56px}.actionbar{position:fixed;left:10px;top:50%;width:50px;max-height:none;transform:translateY(-50%);border-radius:26px}.actionbar .action{width:46px;min-height:52px}.actionbar .action-icon,.actionbar .action-icon svg{width:23px;height:23px}}

/* 앨범과 분류 파일을 상단 헤더와 같은 굵은 프레임 체계로 묶는다. */
#dashboardMessage:empty{display:none}
.library-section{margin-top:30px;border:4px solid var(--line-strong);background:var(--surface);box-shadow:0 12px 30px #00000066}
.library-section .section-head{min-height:78px;margin:0;padding:14px 16px;border-bottom:4px solid var(--line-strong);background:var(--surface);align-items:center}
.library-section .section-head h2{font-size:26px}
.library-section .section-head .eyebrow{margin-bottom:7px}
.library-section .album-grid,.library-section .file-grid{min-height:176px;padding:18px;background:var(--surface-2);gap:24px}
.library-section .empty-card{background:var(--surface)}
.library-section .section-tools{align-self:stretch}
.library-section .sort-menu summary,.library-section .section-create-button{height:42px}
@media(max-width:760px){.library-section{border-width:3px;box-shadow:0 12px 30px #00000066}.library-section .section-head{min-height:70px;padding:12px;border-bottom-width:3px}.library-section .album-grid,.library-section .file-grid{padding:12px;gap:20px}}

/* 분류 파일 관리 기능을 계정 메뉴와 같은 분할형 검정 내비게이션으로 표시한다. */
.library-section .classification-nav{align-self:center;gap:0;min-height:50px;border:1px solid var(--line-strong);background:var(--fill);color:var(--ink)}
.classification-nav .file-tools-group{height:48px}
.classification-nav .section-create-button{height:48px;min-height:48px;border:0;border-left:1px solid var(--line);background:transparent;color:var(--ink);box-shadow:none!important;padding:0 14px;gap:8px;font:700 12px Inter,"Noto Sans KR",sans-serif;transition:background-color .16s ease,color .16s ease}.classification-nav .file-tools-group>.section-create-button:first-child{border-left:0}
.classification-nav .section-create-button svg{width:18px;height:18px;flex:0 0 auto}
.classification-nav .section-create-button:disabled{border-color:var(--line);background:transparent!important;color:var(--ink-dim)}
.classification-nav .section-create-button:not(:disabled):hover{background:var(--fill-hover);color:var(--ink)}.classification-nav .section-create-button:not(:disabled):focus-visible{background:var(--fill-hover);color:var(--ink);outline:none;box-shadow:inset 0 -3px 0 var(--line-strong)!important}
.classification-nav>span{display:flex;align-items:center;height:48px;padding:0 14px;border-left:1px solid var(--line);color:var(--ink-dim);font-size:11px;white-space:nowrap}
.classification-nav .sort-menu{height:48px;border-left:1px solid var(--line)}
.classification-nav .sort-menu summary{width:48px;height:48px;border:0;background:transparent}
.classification-nav .sort-menu summary svg{stroke:var(--ink)}
.classification-nav .sort-menu[open] summary,.classification-nav .sort-menu summary:hover{background:var(--fill-hover)}
.classification-nav .sort-options{top:52px}
@media(max-width:760px){.library-section .classification-nav{height:42px}.classification-nav .file-tools-group,.classification-nav .section-create-button,.classification-nav>span,.classification-nav .sort-menu,.classification-nav .sort-menu summary{height:36px}.classification-nav .section-create-button{width:36px;padding:0}.classification-nav .section-create-button>span[aria-hidden="true"]{display:inline!important}.classification-nav .sort-menu summary{width:36px}.classification-nav>span{padding:0 7px}.classification-nav .sort-options{top:40px}}

/* 분류 파일 헤더의 검정 메뉴를 프레임 끝까지 채운다. */
.classification-section .section-head{padding:0;align-items:stretch}
.classification-section .section-head>div:first-child{display:flex;flex:1;flex-direction:column;justify-content:center;min-width:180px;padding:14px 16px}
.classification-section .classification-nav{align-self:stretch;height:auto;margin:0;border:0;border-left:4px solid var(--line-strong)}
.classification-section .classification-nav .file-tools-group,.classification-section .classification-nav .section-create-button,.classification-section .classification-nav>span,.classification-section .classification-nav .sort-menu,.classification-section .classification-nav .sort-menu summary{height:100%;min-height:74px}
.classification-section .classification-nav .section-create-button{padding-top:0;padding-bottom:0}
.classification-section .classification-nav .sort-options{top:100%}
@media(max-width:760px){.classification-section .section-head>div:first-child{min-width:145px;padding:11px 12px}.classification-section .classification-nav .file-tools-group,.classification-section .classification-nav .section-create-button,.classification-section .classification-nav>span,.classification-section .classification-nav .sort-menu,.classification-section .classification-nav .sort-menu summary{min-height:64px}}
@media(max-width:480px){.classification-section .section-head{flex-direction:column}.classification-section .section-head>div:first-child{width:100%;min-height:64px}.classification-section .classification-nav{width:100%;min-height:44px;border-left:0;border-top:3px solid var(--line-strong)}.classification-section .classification-nav .file-tools-group{flex:1}.classification-section .classification-nav .section-create-button{flex:1}.classification-section .classification-nav .file-tools-group,.classification-section .classification-nav .section-create-button,.classification-section .classification-nav>span,.classification-section .classification-nav .sort-menu,.classification-section .classification-nav .sort-menu summary{min-height:40px}}

/* 통합 파일과 일반 분류 파일을 같은 카드 규격으로 정렬한다. */
.library-section .file-grid{align-items:stretch;grid-auto-rows:1fr}
.library-section .file-grid .file-card{height:100%;display:flex;flex-direction:column}
.library-section .file-grid .file-card>div:last-child{margin-top:auto}
.library-section .file-grid .bundle-card .item-actions{display:flex;gap:7px}

/* 분류 파일 카드는 콘텐츠에 필요한 만큼만 높이를 사용한다. */
.library-section .file-grid{align-items:start;grid-auto-rows:auto}
.library-section .file-grid .file-card{height:auto;min-height:0;display:block}
.library-section .file-grid .file-card>div:last-child{margin-top:0}
.library-section .file-grid .file-card h3{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.library-section .file-grid .bundle-detail{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.library-section .file-grid .bundle-card .polaroid-caption:before{display:none}
.library-section .file-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.library-section .file-grid .file-card{min-width:0;width:100%}
.library-section .file-grid .bundle-card{border:1px solid var(--line-strong)}
.library-section .file-grid .bundle-detail{font-size:12px!important}
.library-section .file-card .memory-tags{height:52px;min-height:52px;overflow:hidden;align-content:flex-start}
.library-section .file-card .memory-tag{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:760px){.library-section .file-grid{grid-template-columns:minmax(0,1fr)}}

/* 앨범 카드는 태그를 노출하지 않고 날짜 분류 파일과 같은 규격을 사용한다. */
.library-section .album-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;grid-auto-rows:auto}
.library-section .album-grid .album-card{min-width:0;width:100%;height:auto;min-height:0;display:block}
.library-section .album-grid .album-card .item-cover-empty{background:var(--surface-2)}
.library-section .album-grid .album-card .polaroid-caption,
.library-section .file-grid .file-card .polaroid-caption{height:104px;min-height:104px;overflow:hidden}
.library-section .album-grid .album-card .album-caption{display:flex;align-items:flex-end}
.library-section .album-grid .album-card h3,
.library-section .file-grid .file-card h3{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:760px){.library-section .album-grid{grid-template-columns:minmax(0,1fr)}}

/* 2026-09: 넓은 화면을 활용하는 모던 라이브러리 홈. */
body{background:var(--bg)}
body.dashboard-active .shell{max-width:1390px;padding:28px 28px 90px}
#dashboardView{position:relative;padding-left:86px}

.topbar.library-topbar{min-height:72px;margin-bottom:18px;border-width:3px;box-shadow:0 12px 30px #00000066}
.library-brand-icon{width:70px;flex-basis:70px;border-right-width:3px;background:var(--surface-2)}
.library-brand-name{padding-left:26px;font-size:25px}
.topbar.library-topbar .account-nav{border-left-width:3px}

.library-overview{display:grid;grid-template-columns:1fr;align-items:stretch;min-height:132px;border:1px solid var(--line-strong);background:var(--surface-2);box-shadow:0 12px 30px #00000066}
.library-overview-top{display:grid;grid-template-columns:minmax(360px,1fr) auto;align-items:stretch;border-bottom:1px solid var(--line-strong)}
.library-overview-copy{display:flex;flex-direction:column;justify-content:center;padding:24px 28px}
.library-overview-copy .eyebrow{margin-bottom:6px;color:var(--ink-dim)}
.library-overview-copy h1{margin:0;font:700 31px Georgia,"Noto Serif KR",serif;letter-spacing:-.035em}
.library-overview-copy>p:last-child{max-width:590px;margin:9px 0 0;color:var(--ink-dim);font-size:13px;line-height:1.65}
.library-overview-stats{display:grid;grid-template-columns:repeat(3,minmax(118px,1fr));min-width:405px;margin:0;border-left:1px solid var(--line-strong);background:var(--fill);color:var(--ink)}
.library-overview-stats>div{display:flex;flex-direction:column;justify-content:space-between;padding:21px 20px;border-left:1px solid var(--line)}
.library-overview-stats>div:first-child{border-left:0}
.library-overview-stats dt{color:var(--ink-dim);font-size:10px;font-weight:800;letter-spacing:.08em}
.library-overview-stats dd{display:flex;align-items:baseline;gap:5px;margin:0;font:700 32px Georgia,serif}
.library-overview-stats small{color:var(--ink-dim);font:700 11px Inter,"Noto Sans KR",sans-serif}

.actionbar{left:max(16px,calc((100vw - 1390px)/2 + 28px));top:52%;width:58px;border:1px solid var(--line-strong);border-radius:6px;background:var(--surface-2);box-shadow:0 12px 30px #00000066}
.actionbar:before{content:"INDEX";display:grid;place-items:center;height:36px;border-bottom:1px solid var(--line-strong);color:var(--ink-dim);font:800 8px Inter,sans-serif;letter-spacing:.16em}
.actionbar .action{background:var(--surface-2)}

.library-section{margin-top:24px;border:1px solid var(--line-strong);background:var(--surface);box-shadow:0 12px 30px #00000066}
.library-section .section-head{min-height:78px;padding:15px 18px;border-bottom:3px solid var(--line-strong)}
.library-section .section-head h2{font-size:27px}
.library-section .section-head .eyebrow{color:var(--ink-dim)}
.library-section .album-grid,.library-section .file-grid{padding:20px;gap:20px;background:var(--surface-2)}
.library-section .album-grid,.library-section .file-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.library-section .album-grid.is-empty,.library-section .file-grid.is-empty{display:block;min-height:0;padding:14px}
.library-section .empty-card.library-empty-state{display:grid;grid-template-columns:54px minmax(0,1fr) auto;align-items:center;gap:18px;min-height:88px;padding:16px 18px;border:1px dashed var(--line);background:var(--surface);text-align:left}
.library-empty-index{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line-strong);background:var(--fill);color:var(--ink);font:700 16px Georgia,serif}
.library-empty-state strong{display:block;font:700 17px Georgia,"Noto Serif KR",serif}
.library-empty-state p{margin:5px 0 0;color:var(--ink-dim);font-size:12px;line-height:1.5}
.library-empty-state button{height:40px;border:1px solid var(--line-strong);background:var(--surface-2);padding:0 14px;font-weight:800;white-space:nowrap}
.library-empty-state button:hover,.library-empty-state button:focus-visible{background:var(--fill);color:var(--ink);outline:none}

.item-card,.album-card,.file-card{padding:10px 10px 18px;background:var(--surface);box-shadow:0 12px 30px #00000066}
.item-card:hover{background:var(--surface);box-shadow:0 12px 30px #00000066}
.new-file-badge{position:absolute;z-index:5;top:10px;right:10px;display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:26px;padding:0 11px;border:1px solid var(--ok-line);border-radius:var(--ui-radius-pill,999px);background:var(--ok-soft);color:var(--ok);box-shadow:0 4px 14px #00000070;font-size:11px;font-weight:900;letter-spacing:.05em}
.library-section .album-grid .album-card .polaroid-caption,.library-section .file-grid .file-card .polaroid-caption{height:96px;min-height:96px}
.item-card h3{font-size:21px}
.classification-section .section-head{background:var(--surface)}
.classification-section .classification-nav{border-left-width:3px}

@media(max-width:1180px){
  body.dashboard-active .shell{padding:22px 18px 80px}
  #dashboardView{padding-left:72px}
  .actionbar{left:18px}
  .library-section .album-grid,.library-section .file-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .library-overview-top{grid-template-columns:minmax(300px,1fr) auto}
  .library-overview-stats{min-width:360px}
  .library-overview-stats>div{padding:18px 15px}
}
@media(max-width:900px){
  .library-overview-top{grid-template-columns:1fr}
  .library-overview-stats{min-width:0;border-top:1px solid var(--line-strong);border-left:0}
  .library-overview-stats>div{min-height:92px}
  .library-section .album-grid,.library-section .file-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  body.dashboard-active .shell{padding:14px 12px 70px}
  #dashboardView{padding-left:56px}
  .topbar.library-topbar{margin-bottom:14px}
  .library-overview-copy{padding:20px 18px}
  .library-overview-copy h1{font-size:25px}
  .library-overview-stats{grid-template-columns:repeat(3,1fr)}
  .library-overview-stats>div{min-height:82px;padding:14px 10px}
  .library-overview-stats dd{font-size:25px}
  .actionbar{left:8px;border-radius:5px}
  .actionbar:before{height:28px;font-size:7px}
  .library-section{margin-top:18px}
  .library-section .album-grid,.library-section .file-grid{grid-template-columns:minmax(0,1fr);padding:12px}
  .library-section .empty-card.library-empty-state{grid-template-columns:42px minmax(0,1fr);gap:12px;padding:14px}
  .library-empty-index{width:38px;height:38px}
  .library-empty-state button{grid-column:1/-1;width:100%}
}
@media(max-width:560px){
  .library-overview-stats dt{font-size:9px}
  .library-overview-stats dd{font-size:22px}
}

/* 2026-09: 앱 전체를 부드러운 라운드 사각형 디자인 언어로 통일한다. */
:root{--ui-radius-sm:8px;--ui-radius-md:14px;--ui-radius-lg:18px;--ui-radius-pill:999px}
button,input,select,textarea,summary{border-radius:var(--ui-radius-sm)!important}
.auth-view,.topbar.library-topbar,.library-overview,.library-section,.my-page-panel,dialog{border-radius:var(--ui-radius-lg)!important}
.auth-view,.topbar.library-topbar,.library-overview,.library-section,dialog{overflow:hidden}
.topbar .account-nav,.classification-nav,.sort-options,.dialog-form,.dialog-selection-summary,.notification-item,.empty-notification,.signup-address-map,#signupAddressMap,.face-consent-box,.password-change-box,.profile-photo-card,.session-split-fieldset,.session-split-option,.merge-progress,.selection-summary,.test-code{border-radius:var(--ui-radius-md)!important}
.item-card,.album-card,.file-card,.empty-card,.library-empty-state{border-radius:var(--ui-radius-md)!important;overflow:hidden}
.item-cover,.album-card .item-cover,.profile-photo-card img{border-radius:10px!important}
/* 편집한 앨범 커버는 3:4 표지 그대로 보여 준다(정사각형으로 자르면 제목 글자가 잘린다). */
.album-card .item-cover.item-cover-designed{aspect-ratio:3/4;object-fit:cover}
.memory-tag,.badge,.profile-analysis-status,.bundle-card .polaroid-caption:before{border-radius:var(--ui-radius-pill)!important}
.actionbar{border-radius:var(--ui-radius-pill)!important}
.actionbar .action{border-radius:0!important}
.actionbar .action:first-of-type{border-radius:var(--ui-radius-pill) var(--ui-radius-pill) 0 0!important}
.actionbar .action:last-child{border-radius:0 0 var(--ui-radius-pill) var(--ui-radius-pill)!important}
.topbar.library-topbar .account-nav .header-tool,.classification-nav .section-create-button,.classification-nav .sort-menu summary{border-radius:0!important}
.library-section .section-head{border-radius:var(--ui-radius-lg) var(--ui-radius-lg) 0 0}
.library-empty-index{border-radius:12px}
.sort-options button{border-radius:6px!important}
.item-selector,.notification-badge{border-radius:50%!important}
progress{border-radius:var(--ui-radius-pill)!important;overflow:hidden}

/* 보관함 카드 동작 단추(열람·앨범·편집): 글자 대신 아이콘(app.js ACTION_ICON_SPRITE).
   평소 선 아이콘 → 올리거나 키보드로 고르면 채운 아이콘 → 누르는 중·잠김(사본 만드는 중)은 회색 채운 아이콘.
   날짜 파일 유리 카드(bookshelf.css)의 흰 단추 바탕보다 이겨야 해서 테두리·바탕에 !important 를 쓴다. */
.item-actions:has(.item-action){gap:2px;margin-left:-6px}
.item-actions .item-action{width:36px;height:36px;display:inline-grid;place-items:center;border:0!important;background:transparent!important;color:var(--ink);padding:0!important;box-shadow:none;cursor:pointer}
.item-action svg{grid-area:1/1;width:24px;height:24px;pointer-events:none}
.item-action .item-action-solid{display:none}
.item-action:is(:hover,:focus-visible,:active,:disabled) .item-action-line{display:none}
.item-action:is(:hover,:focus-visible,:active,:disabled) .item-action-solid{display:block}
.item-actions .item-action:is(:active,:disabled){color:var(--ink-mute)!important}
.item-actions .item-action:disabled{cursor:progress}
.item-actions .item-action:focus-visible{outline:2px solid var(--info);outline-offset:0}

/* 2026-09-16: 보관함 카드 황금비 B안. 34×21 황금 사각형을 세로로 세워(21:34) 칸을 나눈다.
   ┌──────── 21 ────────┐  21: 사진(둘레 0.9칸 여백)
   │       사진         │
   ├──── 13 ────┬─ 5… ─┤  5·3·2·1·1(8×5): 남긴 장수
   │ 태그·제목  ├── 8 ──┤  8: 열람·앨범·편집
   │ 날짜       │ 단추  │  13: 태그·제목·날짜
   └────────────┴───────┘
   글자·아이콘 크기는 카드 폭(cqw)을 따른다. 1칸 = 100cqw/21 ≈ 4.76cqw.
   예전 카드 규칙(캡션 높이 96~104px, 표지 여백, 태그 두 줄 등)이 여러 층 쌓여 있어 이 묶음이 이기도록 !important 를 쓴다. */
.library-section .golden-card{container-type:inline-size;aspect-ratio:21/34;height:auto!important;min-height:0!important;padding:0!important;display:grid!important;grid-template-columns:13fr 8fr;grid-template-rows:21fr 5fr 8fr}
.library-section .golden-card .golden-photo{grid-column:1/-1;grid-row:1;min-width:0;min-height:0;padding:4.3cqw}
.library-section .golden-card .golden-photo .item-cover{display:block;width:100%!important;height:100%!important;margin:0!important;aspect-ratio:auto!important;object-fit:cover}
.library-section .golden-card .golden-photo .item-cover.item-cover-designed{object-fit:contain;background:var(--fill)}
.library-section .golden-card .item-selector{top:calc(4.3cqw + 8px);left:calc(4.3cqw + 8px)}
.library-section .golden-card .new-file-badge{top:calc(4.3cqw + 8px);right:calc(4.3cqw + 8px)}
/* 13 칸은 세 줄로 나눈다: 태그(위) · 제목(가운데) · 날짜(아래). 태그가 없는 앨범도 제목이 같은 높이(가운데)에 온다. */
.library-section .golden-card .golden-info{grid-column:1;grid-row:2/4;min-width:0;min-height:0;height:auto!important;display:grid!important;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;align-items:center!important;overflow:hidden;padding:2.4cqw 2cqw 4.8cqw 5.2cqw!important}
.library-section .golden-card .golden-info .memory-tags{grid-row:1;height:auto!important;min-height:0!important;flex-wrap:nowrap;overflow:hidden;align-self:start}
.library-section .golden-card .golden-info h3{grid-row:2}
.library-section .golden-card .golden-info p{grid-row:3}
.library-section .golden-card .golden-info .memory-tag{min-width:0;flex:0 1 auto;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.library-section .golden-card .golden-info h3{margin:0!important;font-size:clamp(15px,8.4cqw,22px)!important;line-height:1.15;white-space:normal!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.library-section .golden-card .golden-info p{margin:0;font-size:clamp(11px,4.6cqw,12.5px)!important;color:var(--muted)!important;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.library-section .golden-card .golden-count{grid-column:2;grid-row:2;min-width:0;display:flex;flex-wrap:wrap;align-content:center;align-items:baseline;justify-content:center;gap:.8cqw;padding:0 2cqw;color:var(--ink);white-space:nowrap;overflow:hidden}
.library-section .golden-card .golden-count strong{font:700 clamp(16px,8.6cqw,26px)/1 Georgia,"Pretendard",serif}
.library-section .golden-card .golden-count span{font-size:clamp(11px,4.4cqw,13px);color:var(--muted)}
.library-section .golden-card .golden-actions{grid-column:2;grid-row:3;min-width:0;margin:0!important;padding:0 2.4cqw 1.5cqw 0!important;display:grid!important;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);place-items:center;align-content:center;gap:0!important}
.library-section .golden-card .golden-actions .item-action{width:min(36px,100%);height:min(36px,13cqw)}
.library-section .golden-card .golden-actions .item-action svg{width:clamp(17px,8.2cqw,24px);height:clamp(17px,8.2cqw,24px)}
/* 앨범 카드: 크기는 같게(21:34), 커버는 3:4 그대로 최대. 카드 높이 161.9(폭 100 기준) 중
   커버 칸 = 위 여백 4.3 + (100 − 여백 8.6) × 4/3 ≈ 126.2, 남는 아래 줄 ≈ 35.7 에 날짜(왼쪽)·동작 단추(오른쪽).
   카드 자신에게는 cqw 를 쓸 수 없어(자기 크기가 아니라 바깥 기준으로 풀린다) fr 비율로 나눈다.
   제목은 커버가 대신하므로 화면에서 숨기고(낭독·이름 변경 검사용으로 남김) 장수는 없다. */
.library-section .golden-card.album-card{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(0,126.2fr) minmax(0,35.7fr)}
.library-section .golden-card.album-card .golden-photo{grid-column:1/-1;grid-row:1;padding:4.3cqw 4.3cqw 0}
.library-section .golden-card.album-card .golden-photo .item-cover.item-cover-designed{object-fit:cover;background:transparent}
.library-section .golden-card.album-card .golden-info{grid-column:1;grid-row:2;display:flex!important;align-items:center!important;padding:0 2cqw 0 5.2cqw!important}
.library-section .golden-card.album-card .golden-info h3{position:absolute!important;width:1px;height:1px;margin:-1px!important;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap!important;border:0}
.library-section .golden-card.album-card .golden-actions{grid-column:2;grid-row:2;grid-auto-columns:auto;gap:2px!important;padding:0 3.6cqw 0 0!important}
.library-section .golden-card.album-card .golden-actions .item-action{width:36px;height:36px}

/* ===== 검정 기조 재질 레이어 시작 ===== */

/* ── INDEX 레일: 납선으로 구획한 스테인드글라스 ───────────────── */
.actionbar{
  background:var(--bg);
  border:1px solid var(--line-strong);
  box-shadow:0 22px 48px #000000b8,inset 0 1px 0 #ffffff1a;
}
.actionbar:before{
  color:var(--ink-mute);
  background:linear-gradient(180deg,#ffffff12,#ffffff03);
  border-bottom:1px solid #000000a6;
}

/* 각 도구 칸이 색유리 한 장. 유리 위에 스테인리스 도구면을 겹친다. */
.actionbar .action{
  color:var(--ink);
  border-bottom:1px solid #000000a6;
  background:var(--metal-sheen,linear-gradient(148deg,#ffffff2b 0%,#ffffff0a 24%,#00000038 52%,#ffffff17 72%,#00000045 100%)),var(--metal-grain,repeating-linear-gradient(91deg,#ffffff0d 0 1px,#00000000 1px 3px)),linear-gradient(180deg,var(--pane),var(--pane-deep));
  transition:background .18s ease,box-shadow .18s ease;
}
.actionbar .action:last-child{border-bottom:0}
.actionbar .action:nth-child(1){--pane:#0ac8e84d;--pane-deep:#0ac8e81a;--pane-lit:#0ac8e885}
.actionbar .action:nth-child(2){--pane:#ffd60a4d;--pane-deep:#ffd60a1a;--pane-lit:#ffd60a85}
.actionbar .action:nth-child(3){--pane:#ff375f4d;--pane-deep:#ff375f1a;--pane-lit:#ff375f85}
.actionbar .action:nth-child(4){--pane:#32d74b4d;--pane-deep:#32d74b1a;--pane-lit:#32d74b85}
.actionbar .action:nth-child(5){--pane:#bf5af24d;--pane-deep:#bf5af21a;--pane-lit:#bf5af285}

/* 손이 닿으면 유리 뒤에서 빛이 들어온다 */
.actionbar .action:hover:not(:disabled),
.actionbar .action:focus-visible{
  color:var(--ink);
  background:var(--metal-sheen,linear-gradient(148deg,#ffffff2b 0%,#ffffff0a 24%,#00000038 52%,#ffffff17 72%,#00000045 100%)),var(--metal-grain,repeating-linear-gradient(91deg,#ffffff0d 0 1px,#00000000 1px 3px)),linear-gradient(180deg,var(--pane-lit),var(--pane));
  box-shadow:inset 0 0 22px var(--pane-lit),inset 0 1px 0 #ffffff2e;
  outline:none;
}
.actionbar .action:focus-visible{box-shadow:inset 0 0 0 2px var(--ink)}
.actionbar .action:active:not(:disabled){
  box-shadow:inset 0 3px 8px #00000080;
}
.actionbar .action:disabled{
  background:linear-gradient(180deg,#ffffff0a,#00000026)!important;
  color:var(--ink-mute);
  filter:grayscale(1);
}

/* 도구 자체는 깎아 만든 스테인리스처럼 */
.actionbar .action-icon svg{
  stroke:var(--ink);
  filter:drop-shadow(0 1px 0 #000000a6);
}
.actionbar .action:disabled .action-icon svg{stroke:var(--ink-mute);filter:none}
.actionbar .action-icon.save-icon svg{fill:var(--ink);stroke:none}

/* ── 편집 도구 묶음: 스테인리스 판 ───────────────────────────── */
.classification-nav,.topbar .account-nav{
  background:var(--metal-sheen,linear-gradient(148deg,#ffffff2b 0%,#ffffff0a 24%,#00000038 52%,#ffffff17 72%,#00000045 100%)),var(--metal-grain,repeating-linear-gradient(91deg,#ffffff0d 0 1px,#00000000 1px 3px)),linear-gradient(180deg,var(--fill),var(--fill));
  border-color:var(--line-strong);
  box-shadow:inset 0 1px 0 #ffffff1f,0 10px 26px #00000073;
}
.file-tools-group .section-create-button,
.classification-nav .section-create-button,
.topbar .account-nav .header-tool{background:transparent}
.file-tools-group .section-create-button:hover:not(:disabled),
.classification-nav .section-create-button:hover:not(:disabled),
.topbar .account-nav .header-tool:hover{
  background:var(--fill-hover);color:var(--ink);
}

/* ── 딱딱한 오프셋 그림자를 부드러운 그림자로 ─────────────────── */
.library-section,.library-overview,.auth-card,.item-card,
.notification-dialog,.friend-dialog,.my-page-panel{
  box-shadow:0 14px 34px #00000059;
}

/* ── 주 동작 하나만 밝게 (검정 화면에서 시선이 가야 할 곳) ─────── */
.primary{
  background:var(--ink)!important;
  color:var(--on-invert)!important;
  border-color:var(--ink)!important;
}
.primary:hover:not(:disabled){background:var(--surface)!important}

/* ===== 검정 기조 재질 레이어 끝 ===== */

/* ===== 폼 컨트롤 색 보정 시작 ===== */
/* 색을 지정하지 않은 컨트롤이 운영체제 기본 검정을 쓰지 않도록 한다 */
button,input,select,textarea{color:inherit}
select,option{background:var(--surface-2);color:var(--ink)}
input,textarea{background:var(--surface-2)}
input::placeholder,textarea::placeholder{color:var(--ink-mute)}
input[type=checkbox],input[type=radio]{accent-color:var(--ink)}
::selection{background:var(--ink);color:var(--on-invert)}
/* ===== 폼 컨트롤 색 보정 끝 ===== */

/* ===== 로그인 화면: 아이콘 하나 + 로그인 창 =====
   소개 글과 그림 판을 빼고, 가운데 로그인 창 위에 앱 아이콘만 띄운다.
   아이콘은 테마마다 갈아 끼운다(theme.css 의 .theme-icon-dark / .theme-icon-light).
   바깥 틀(.auth-view)은 투명하게 두고 창(.auth-card)만 면을 가진다.
   display 는 :not(.hidden) 에만 준다. 아니면 로그인 뒤에도 .hidden 을 이겨 창이 남는다. */
.auth-view:not(.hidden) {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.auth-icon {
  width: 112px;
  height: 112px;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 14px 34px #00000059;
}
.auth-icon img { display: block; width: 100%; height: 100%; }
:root[data-theme="light"] .auth-icon { box-shadow: 0 12px 30px #1a1f2e24; }
.auth-view .auth-card {
  width: min(420px, 100%);
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: var(--ui-radius-lg);
  background: var(--surface);
  align-self: center;
}

/* 탭·입력칸·단추도 글자 없이 아이콘으로 */
.auth-view svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}
.auth-view .auth-tab { display: grid; place-items: center; }
.auth-field { position: relative; }
.auth-field > svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--ink-mute);
  pointer-events: none;
}
.auth-field:focus-within > svg { color: var(--ink); }
.auth-form .auth-field input { padding-left: 44px; }
.auth-submit { display: grid; place-items: center; }

/* 회원가입(2026-10-05 사용자): 초대 코드가 틀리면 이름 옆에 붉은 느낌표와 붉은 테두리, 인증코드를 보내면 단추가 "발송 완료".
   생년월일(date) 칸은 iOS 가 글자 길이만큼만 그려 다른 칸보다 좁았다 — 다른 칸과 같은 너비·높이로 편다. */
.auth-form .field-title { display: inline-flex; align-items: center; gap: 6px; }
.auth-form .field-bad {
  display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%;
  background: var(--danger, #e5484d); color: #fff; font-size: 12px; font-weight: 900; line-height: 1;
}
.auth-form .field-bad[hidden] { display: none; }
.auth-form input.is-bad { border-color: var(--danger, #e5484d); }
#sendCodeBtn.is-sent { color: var(--muted); }
/* 생년월일(가입·마이페이지): iOS 날짜 칸은 기본으로 더 넓고 높으며 가운데 정렬이라 다른 칸과 폭·높이·왼쪽 정렬을 맞춘다.
   높이는 글 칸과 같게(줄 높이 normal ≈ 1.25em + 위아래 여백 24px + 테두리 2px) — 시뮬레이터에서 46px 로 같음을 확인. */
.auth-form input[type="date"], .my-page-form input[type="date"] {
  display: block; width: 100%; min-width: 0; max-width: 100%;
  -webkit-appearance: none; appearance: none; text-align: left;
  line-height: normal; height: calc(1.25em + 26px);
}
.auth-form input[type="date"]::-webkit-date-and-time-value,
.my-page-form input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; min-height: 0; }

@media (max-width: 760px) {
  .auth-view { gap: 22px; }
  .auth-icon { width: 88px; height: 88px; border-radius: 21px; }
  .auth-view .auth-card { padding: 26px 22px; }
}

/* ===== 브랜드 글자(워드마크) =====
   보내 주신 디자인은 굵은 기하학 산세리프의 소문자 "isle" 이다. 그림 파일로 넣지
   않고 글자로 짠다. 화면마다 크기가 다르고(상단 막대 22px, 로그인 30px), 테마에
   따라 색이 뒤집히기 때문이다. 그림이면 크기마다 흐려지고 흰색 판을 따로 만들어야
   한다. 글자로 두면 어느 크기에서도 또렷하고 색은 currentColor 를 따라간다.

   Pretendard ExtraBold(800) 는 이미 앱에 실려 있고 뼈대가 보내 주신 것과 거의 같다.
   자간을 조금 좁혀(-.03em) 원본의 빽빽한 느낌을 맞췄다.
   다만 원본은 i 의 점이 네모다. Pretendard 는 둥글다 — 이 한 곳만 다르다. */
.wordmark {
  margin: 0;
  font-family: "Pretendard", Inter, sans-serif;
  font-weight: 800;
  font-style: normal;
  letter-spacing: -.03em;
  text-transform: lowercase;
  line-height: 1;
}

/* 보관함 상단 막대 */
.library-brand-name { gap: 9px; font: inherit; letter-spacing: normal }
.library-brand-name .wordmark { font-size: 23px; }
.library-brand-name > span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

@media (max-width: 760px) {
  .library-brand-name > span { display: none; }
}
/* 관리자 페이지 단추(app.js syncAdminButton). 친구 추가 단추와 같은 모양, 링크라 색을 물려받는다. */
.admin-page-button{gap:7px;padding:9px 11px;font-weight:800;color:var(--ink);text-decoration:none}.admin-page-button span{white-space:nowrap}@media(max-width:760px){.admin-page-button span{display:none}.admin-page-button{width:42px;padding:9px}}

/* 공유 창: 보내는 방식(원본 보내기·보관함 함께 보기)에 따라 숨긴 줄, 받은·보낸 사진(photo-relay.js) */
.dialog-form [hidden]{display:none!important}.share-mode{display:grid;gap:6px}.share-mode .dialog-help{margin:0 0 4px 26px}.share-mode input[type=radio]:disabled+*,.share-mode label:has(input:disabled){color:var(--ink-mute)}.relay-files{display:grid;gap:4px;margin-top:6px;font-size:12px}.relay-files a{color:var(--ink)}