*{box-sizing:border-box}body{margin:0;background:#f4f5f7;color:#233243;font-family:system-ui,'Malgun Gothic',sans-serif}a{text-decoration:none;color:inherit}button,input,textarea,select{font:inherit}button{cursor:pointer;border:1px solid #ccd4dc;border-radius:4px;background:#fff;padding:10px 15px}input,textarea,select{width:100%;padding:11px;border:1px solid #d5dce3;border-radius:4px;background:#fff}h1,h2,h3,p{margin-top:0}.top{background:#162636;color:#c2ced9;padding:9px max(18px,calc((100% - 1160px)/2));font-size:12px;display:flex;justify-content:space-between}.head{max-width:1160px;margin:auto;padding:27px 16px;display:flex;justify-content:space-between;align-items:center}header{background:white}.brand{font-size:30px;font-weight:900;letter-spacing:-1.3px}.brand em{font-style:normal;color:#d46c49}.brand small{display:block;font-size:10px;font-weight:500;letter-spacing:3px;color:#7f8c98}.head-actions,.inline{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.head-actions a{font-size:13px;font-weight:700}.head-actions form{margin:0}nav{background:#243c52;color:white}.nav{max-width:1160px;margin:auto;display:flex;flex-wrap:wrap}.nav a{padding:17px 21px;font-size:14px;font-weight:700}.nav a:hover,.nav a.active{background:#d46c49}main{max-width:1160px;margin:28px auto;padding:0 16px}.hero{background:linear-gradient(120deg,#142739 5%,#385a70 60%,#ba7959);height:275px;color:white;display:flex;align-items:center;padding:40px 55px}.hero span,.eyebrow{font-size:11px;letter-spacing:2.5px;font-weight:700}.hero h1{font-size:38px;line-height:1.28;margin:13px 0}.hero p{color:#d9e4ec}.layout{display:grid;grid-template-columns:minmax(0,1fr) 265px;gap:25px;margin-top:35px}.section-heading{border-bottom:2px solid #243c52;display:flex;justify-content:space-between;align-items:end;padding-bottom:14px;margin-bottom:20px;gap:12px}.section-heading h2{font-size:23px;margin:5px 0 0}.eyebrow{color:#d46c49}.search{display:flex;gap:6px}.search input{max-width:175px}.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.photo{background:#fff;border:1px solid #e1e5e9;min-width:0;transition:transform .15s}.photo:hover{transform:translateY(-3px)}.photo-image{aspect-ratio:4/3;background:#d8e0e6;overflow:hidden}.photo img{width:100%;height:100%;object-fit:cover}.photo-info{padding:14px}.tag{font-size:11px;color:#bd654a;font-weight:700}.photo h3{font-size:15px;margin:7px 0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.photo p,.stats,.muted{font-size:12px;color:#81909d}.stats{margin-top:10px}.panel{background:white;border:1px solid #e0e5e9;padding:20px;margin-bottom:18px}.panel h3{font-size:17px;border-bottom:1px solid #e6e9ec;padding-bottom:13px}.panel p{color:#6d7b88;font-size:13px;line-height:1.8}.stack{display:grid;gap:11px}.stack label{font-size:12px;font-weight:700;display:grid;gap:6px}.accent{background:#d46c49;color:#fff;border:0;font-weight:700}.danger{color:#b83d3d}details{margin-top:18px}summary{cursor:pointer;font-weight:700;margin-bottom:12px}.empty{background:white;padding:35px;color:#788693;text-align:center}.error{background:#fff0ee;color:#a92e2e;padding:14px}.modal-backdrop{position:fixed;inset:0;background:#000b;z-index:5;overflow-y:auto;padding:25px 12px}.modal{position:relative;max-width:900px;margin:auto;background:white;border-radius:5px;overflow:hidden}.close{display:block;text-align:right;padding:15px}.detail-image{display:block;max-width:100%;max-height:65vh;margin:auto;object-fit:contain}.modal-content{padding:25px}.description{white-space:normal;line-height:1.8}.comment{padding:12px 0;border-top:1px solid #eee}.comment small{color:#889}.comment p{margin:8px 0}footer{background:#17293b;color:#b9c5ce;text-align:center;padding:35px;font-size:12px;margin-top:65px}@media(max-width:800px){.layout{grid-template-columns:1fr}.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.hero{padding:25px;height:230px}.hero h1{font-size:30px}}@media(max-width:450px){.gallery{gap:9px}.photo-info{padding:9px}.head{padding:20px 16px}.brand{font-size:25px}.nav a{padding:12px;font-size:12px}.section-heading{align-items:start;flex-direction:column}.hero h1{font-size:25px}}

.exif-panel{background:#f3f6f9;border:1px solid #e1e7ed;border-radius:8px;margin:14px 20px;padding:16px 18px;color:#293746}.exif-panel h3{font-size:15px;margin:0 0 12px}.exif-panel dl{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:12px 18px}.exif-panel dt{font-size:12px;color:#697b8c;margin-bottom:4px}.exif-panel dd{margin:0;font-size:14px;font-weight:600;overflow-wrap:anywhere}

/* Small centered EXIF caption immediately beneath the full photograph. */
.exif-caption{padding:9px 16px 15px;text-align:center;background:#fff;color:#6c747c;font-size:11px;line-height:1.6;overflow-wrap:anywhere}
.exif-camera{font-size:12px;color:#29343e;font-weight:600}
.exif-lens{font-size:11px;color:#717a83}
.exif-specs{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0 7px;font-size:10.5px;color:#79818a}
.exif-separator{color:#afb5ba}
@media(max-width:450px){.exif-caption{padding:8px 10px 12px}.exif-specs{gap:0 5px;font-size:10px}}

/* EXIF reference layout: a centered three-line caption on a white strip under the photo. */
.modal .exif-caption {display:block!important;box-sizing:border-box!important;width:100%!important;max-width:100%!important;margin:0!important;padding:9px 16px 14px!important;background:#fff!important;border:0!important;text-align:center!important;line-height:1.45!important;color:#929292!important;}
.modal .exif-caption .exif-camera {display:block!important;text-align:center!important;font-size:13px!important;font-weight:650!important;line-height:1.5!important;color:#222!important;margin:0!important;}
.modal .exif-caption .exif-lens {display:block!important;text-align:center!important;font-size:12px!important;font-weight:400!important;line-height:1.5!important;color:#858585!important;margin:0!important;}
.modal .exif-caption .exif-specs {display:flex!important;flex-wrap:wrap!important;justify-content:center!important;align-items:center!important;gap:0 7px!important;width:100%!important;margin:3px 0 0!important;padding:0!important;text-align:center!important;font-size:11px!important;font-weight:400!important;line-height:1.6!important;color:#939393!important;}
.modal .exif-caption .exif-separator {display:inline!important;color:#b8b8b8!important;}
.modal .detail-image {display:block;max-width:100%;height:auto;margin-left:auto;margin-right:auto;}
@media(max-width:550px){.modal .exif-caption{padding:8px 8px 12px!important}.modal .exif-caption .exif-specs{gap:0 5px!important;font-size:10px!important}}

/* PHOTOJOY header and modal actions */
.head-actions{display:flex;align-items:center;gap:10px}.head-actions button,.head-actions .auth-trigger,.upload-trigger{border:1px solid #8997a5;background:#fff;color:#233648;padding:9px 14px;border-radius:4px;cursor:pointer;font:inherit;font-size:13px;font-weight:600;white-space:nowrap}.head-actions button:hover,.upload-trigger:hover{background:#f1f5f8}.section-heading{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.section-heading .search{margin-left:auto}.upload-trigger{margin-left:0}.pj-dialog{border:1px solid #d8e0e7;border-radius:9px;padding:0;width:min(94vw,480px);max-height:90vh;box-shadow:0 15px 55px #0004}.pj-dialog::backdrop{background:rgba(9,24,39,.65)}.dialog-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #e2e7eb}.dialog-head h2{font-size:19px;margin:0}.dialog-head button{border:0;background:transparent;font-size:18px;cursor:pointer}.dialog-body{padding:20px}.dialog-body h3{margin:0 0 14px}.dialog-body .stack input,.dialog-body .stack textarea,.dialog-body .stack select{max-width:100%;box-sizing:border-box}.dialog-body .stack button{cursor:pointer}.password-hint,.file-count{font-size:12px;color:#778591;margin:0 0 6px}.brand{white-space:nowrap}
@media(max-width:700px){.section-heading .search{margin-left:0}.upload-trigger{order:3}.head-actions{gap:6px}.head-actions button{padding:7px 9px}}

/* Five independent photo selection fields */
.photo-upload-slots{display:flex;flex-direction:column;gap:10px}
.photo-slots-title{font-size:14px;font-weight:700;color:#182533}
.photo-slot{display:flex!important;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px!important;font-weight:600!important;color:#344454}
.photo-slot input[type=file]{flex:1;min-width:190px;max-width:100%;font-size:13px!important;padding:10px!important;border:1px solid #d5dee7!important;border-radius:6px!important;background:#fff}
.photo-upload-slots .file-count{margin:0;color:#718295;font-size:12px}

.detail-photo-block{margin:0 auto 24px;max-width:100%;text-align:center}.detail-photo-block .detail-image{display:block;margin:0 auto;width:auto;max-width:100%;height:auto;max-height:80vh;object-fit:contain}.detail-photo-block .exif-center{font-family:inherit;line-height:1.6}

.modal .detail-photo-block{display:block!important;min-height:0!important;padding:8px 16px 14px!important;text-align:center!important}.modal .detail-photo-block img.detail-image{display:block!important;width:auto!important;max-width:100%!important;max-height:75vh!important;height:auto!important;object-fit:contain!important;margin:0 auto!important}.modal .photo-load-error{color:#a43d31;background:#fff3ee;padding:16px;font-size:13px}.modal .photo-load-error[hidden]{display:none!important}
\n.photo-gallery-count{text-align:center;font-size:15px;font-weight:600;margin:22px auto 12px}.detail-photo-block{margin-bottom:30px}\n
.modal{position:relative!important;padding-top:76px!important}.modal .photo-close-button{position:absolute!important;top:18px!important;right:20px!important;left:auto!important;display:inline-flex!important;align-items:center;justify-content:center;padding:9px 17px!important;border:1px solid #c9d5e5!important;border-radius:7px!important;background:#fff!important;color:#203247!important;text-decoration:none!important;box-shadow:0 0 0 2px #edf4fc;font-size:16px!important;z-index:5}.modal .photo-close-button:hover{background:#f1f6fb!important}

/* Sticky right-aligned rectangular close button within the photo viewer. */
.modal{padding-top:0!important;overflow:visible!important}
.modal .photo-modal-toolbar{position:sticky;top:0;z-index:30;display:flex;justify-content:flex-end;align-items:center;background:#fff;padding:12px 18px;min-height:64px;border-radius:5px 5px 0 0}
.modal .photo-modal-toolbar .photo-close-button{position:static!important;display:inline-flex!important;align-items:center;justify-content:center;min-height:40px;padding:9px 16px!important;border:1px solid #ccd4dc!important;border-radius:4px!important;background:#fff!important;color:#233243!important;font-size:14px!important;font-weight:600;text-decoration:none!important;box-shadow:none!important}
.modal .photo-modal-toolbar .photo-close-button:hover{background:#f4f6f8!important}

/* PHOTOJOY: close control fixed to the lower right of the photo viewer */
.modal{padding-bottom:76px!important;position:relative!important}
.modal .photo-modal-bottom{position:sticky!important;bottom:0!important;z-index:40!important;display:flex!important;justify-content:flex-end!important;align-items:center!important;padding:12px 20px!important;background:#fff!important;border-top:1px solid #e8edf2!important}
.modal .photo-modal-bottom .photo-close-button{position:static!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;border:1px solid #ccd4dc!important;border-radius:4px!important;background:#fff!important;color:#233243!important;padding:9px 16px!important;text-decoration:none!important;box-shadow:none!important;font-size:14px!important;font-weight:600!important}
.modal .photo-modal-bottom .photo-close-button:hover{background:#f4f6f8!important}

/* Fix: the bottom bar is a sibling of .modal, not its descendant. */
.modal-backdrop>.photo-modal-bottom{position:fixed!important;right:clamp(16px,3vw,48px)!important;bottom:clamp(14px,3vh,32px)!important;left:auto!important;top:auto!important;z-index:9999!important;display:flex!important;justify-content:flex-end!important;align-items:center!important;width:auto!important;height:auto!important;padding:0!important;background:transparent!important;border:0!important;pointer-events:none!important}
.modal-backdrop>.photo-modal-bottom>.photo-close-button{position:static!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:94px!important;min-height:42px!important;padding:10px 18px!important;border:1px solid #bfcbd8!important;border-radius:5px!important;background:#fff!important;color:#21354a!important;font-size:15px!important;font-weight:600!important;text-decoration:none!important;box-shadow:0 2px 10px #0002!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important}
.modal-backdrop>.photo-modal-bottom>.photo-close-button:hover{background:#f2f6fa!important}

/* Close link outside login condition and outside scrolling overlay. */
body:has(.modal-backdrop){overflow:hidden!important}
a.photo-close-always{position:fixed!important;right:24px!important;bottom:24px!important;z-index:2147483647!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:12px 20px!important;min-width:100px!important;background:white!important;color:#233243!important;border:1px solid #bdc9d6!important;border-radius:5px!important;box-shadow:0 3px 14px #0004!important;text-decoration:none!important;font-weight:700!important;visibility:visible!important;opacity:1!important}

/* Close control belongs to the modal backdrop (above its stacking context). */
.modal-backdrop>a.pj-visible-close{position:fixed!important;right:24px!important;bottom:24px!important;top:auto!important;left:auto!important;z-index:999999!important;display:inline-flex!important;visibility:visible!important;opacity:1!important;align-items:center!important;justify-content:center!important;min-width:112px!important;min-height:48px!important;padding:10px 20px!important;border:1px solid #bdc9d6!important;border-radius:5px!important;background:#fff!important;color:#233243!important;font-weight:700!important;font-size:16px!important;text-decoration:none!important;box-shadow:0 3px 15px #0005!important;pointer-events:auto!important}

.modal-content .photo-close-row{display:flex!important;justify-content:flex-end!important;clear:both!important}

.edit-photo-trigger{border:1px solid #cbd5df;border-radius:5px;background:white;color:#243448;padding:10px 20px;cursor:pointer}

.modal-content .photo-actions-guest{display:flex!important;width:100%!important;align-items:center!important}.modal-content .photo-actions-guest .photo-close-inline{margin-left:auto!important;flex-shrink:0!important}

/* PHOTOJOY responsive action layout, 2026-10-20 */
.section-heading{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;column-gap:14px!important;row-gap:14px!important}
.section-heading>.section-title{grid-column:1/-1!important}
.section-heading>.search{grid-column:1!important;grid-row:2!important;margin:0!important;justify-self:start!important;display:flex!important;max-width:100%!important}
.section-heading>.search input{width:min(42vw,240px)!important;max-width:240px!important;min-width:0!important}
.section-heading>.upload-trigger{grid-column:2!important;grid-row:2!important;margin:0!important;justify-self:end!important;order:initial!important}
.modal-content .photo-actions{display:flex!important;align-items:center!important;gap:12px!important;width:100%!important;flex-wrap:wrap!important}
.modal-content .photo-actions form{margin:0!important}
.modal-content .photo-actions .photo-close-inline{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:44px!important;padding:10px 20px!important;border:1px solid #c4cdd8!important;border-radius:5px!important;background:#fff!important;color:#223346!important;text-decoration:none!important;font-size:16px!important;font-weight:600!important;visibility:visible!important;opacity:1!important;flex-shrink:0!important}
.modal-content .photo-actions-guest .photo-close-inline{margin-left:auto!important}
.modal-content .photo-actions-member .photo-close-inline{margin-left:0!important}
@media(max-width:450px){.section-heading{column-gap:8px!important}.section-heading>.search{min-width:0!important}.section-heading>.search input{width:min(43vw,190px)!important}.section-heading>.upload-trigger{padding:9px 10px!important}.modal-content .photo-actions{gap:8px!important}.modal-content .photo-actions .photo-close-inline{padding:9px 13px!important;font-size:14px!important}}

/* Admin menu: always legible in desktop and mobile navigation. */
.head-actions .pj-admin-menu{display:inline-flex;align-items:center;justify-content:center;background:#243c52;color:#fff;border:1px solid #243c52;border-radius:5px;padding:10px 15px;font-size:14px;font-weight:700;white-space:nowrap;margin:0}
.head-actions .pj-admin-menu:hover{background:#345a78;color:#fff}
.nav .pj-admin-nav{margin-left:auto;background:#d46c49;color:#fff;white-space:nowrap}
.nav .pj-admin-nav:hover{background:#b75637}
@media(max-width:500px){.head{gap:10px}.head-actions .pj-admin-menu{padding:8px 10px;font-size:12px}.nav .pj-admin-nav{margin-left:0}}

/* Only administrators see the single member-management link beside logout. */
.head-actions .pj-admin-menu{display:inline-flex;align-items:center;justify-content:center;background:#243c52;color:white;border:1px solid #243c52;border-radius:5px;padding:10px 14px;font-size:13px;font-weight:700;white-space:nowrap}
@media(max-width:500px){.head-actions .pj-admin-menu{padding:8px 9px;font-size:12px}.head-actions{flex-wrap:nowrap}}


/* PHOTOJOY 2026 visibility and responsive refresh. */
:root{color-scheme:light;--pj-ink:#172c41;--pj-muted:#51657a;--pj-primary:#1d547a;--pj-accent:#b94f2e;--pj-border:#cbd7e3;--pj-surface:#fff}
html{font-size:16px;scroll-behavior:smooth}body{background:#eef3f8;color:var(--pj-ink);line-height:1.65;-webkit-font-smoothing:antialiased}
a,button,input,select,textarea{transition:background-color .15s,border-color .15s,box-shadow .15s}
:focus-visible{outline:3px solid #e28b3e!important;outline-offset:3px}
button,input,select,textarea{font-size:16px}button{min-height:44px;border-radius:9px;font-weight:700;border-color:#bac9d8;color:#1c354d}button:hover{background:#eaf1f7}
input,select,textarea{min-height:46px;border:1.5px solid #aebfd0;border-radius:9px;color:#172c41;background:white}input::placeholder,textarea::placeholder{color:#697c8e;opacity:1}input:focus,textarea:focus,select:focus{border-color:#1b669a;box-shadow:0 0 0 3px #1b669a24;outline:none}
.top{font-size:13px;background:#142b40;color:#f0f5f9}.head{gap:18px;min-height:102px}.brand{color:#172c41}.brand small{color:#5c7184;font-size:11px}.head-actions{gap:9px}.head-actions a,.head-actions button{font-size:14px}.head-actions .pj-admin-menu{background:#174e77!important;border-color:#174e77!important;color:white!important}
nav{background:#203f58}.nav a{font-size:15px;padding:14px 20px}.nav a:hover,.nav a.active{background:#ad4c30}
main{margin-top:25px}.hero{border-radius:16px;box-shadow:0 8px 30px #10293c1c;min-height:250px;height:auto}.hero h1{font-size:clamp(26px,4vw,43px);letter-spacing:-.04em}.hero p{font-size:15px;color:#f2f6fa}
.layout{gap:22px}.section-heading{border-bottom:2px solid #315875;padding-bottom:16px}.section-heading h2{font-size:clamp(21px,3vw,26px);color:#172c41}.eyebrow{color:#a8462a}
.search input{max-width:none!important;min-height:45px}.search button{background:#245878;color:white;border-color:#245878}.search button:hover{background:#174363}.upload-trigger,.accent{background:#b95132!important;color:#fff!important;border-color:#b95132!important;font-weight:800!important}.upload-trigger:hover,.accent:hover{background:#983b21!important}
.gallery{gap:17px}.photo,.panel,.empty{border:1px solid #d4dfe8;border-radius:12px;overflow:hidden;box-shadow:0 3px 13px #102d4510}.photo-info{padding:15px}.photo h3{font-size:17px;line-height:1.45}.photo p,.stats,.muted{font-size:13px;color:#526779}.tag{font-size:12px;color:#a84227}.panel{padding:22px}.panel h3{font-size:18px;color:#213b50}.panel p{font-size:14px;color:#4b6073}
.pj-dialog{width:min(94vw,490px);border:1px solid #d7e2eb;border-radius:18px;box-shadow:0 24px 85px #081e3590;max-height:min(92dvh,820px);overflow:auto}.pj-dialog::backdrop{background:rgba(11,30,48,.72)}.dialog-head{padding:20px 24px;background:#183a55;color:#fff;border:0}.dialog-head h2{font-size:23px;letter-spacing:-.03em}.dialog-head button{background:#ffffff20;color:#fff;border:1px solid #ffffff55;border-radius:9px;min-width:42px;padding:6px}.dialog-body{padding:26px 26px 28px}.dialog-body h3{font-size:20px;margin-bottom:14px;color:#1b344a}.dialog-body .auth-intro{font-size:15px;line-height:1.75;color:#35546d;background:#edf5fb;border-left:4px solid #2d759e;padding:14px 16px;border-radius:9px;margin-bottom:20px}.dialog-body .stack{gap:14px}.dialog-body .stack label{font-size:15px;color:#233c52;gap:7px}.dialog-body .stack input{padding:12px 14px}.dialog-body .stack button{min-height:48px;font-size:16px}.dialog-body>button{width:100%;margin-top:13px;background:#edf3f8;border:1px solid #bdcedc;font-size:15px}
.modal{border-radius:13px}.modal-content{padding:clamp(16px,3vw,30px)}.modal-content h2{font-size:clamp(21px,3vw,27px)}.description{font-size:15px;color:#2b4257}.comment{font-size:15px}.photo-actions button,.photo-actions a{min-height:44px}
footer{color:#e1eaf1}
@media(max-width:800px){.layout{grid-template-columns:1fr}.hero{padding:28px;min-height:215px}.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.head{min-height:85px}}
@media(max-width:550px){.top{padding:8px 12px;font-size:11px}.head{padding:15px 12px;flex-wrap:wrap;gap:10px;min-height:0}.brand{font-size:26px}.head-actions{gap:7px;margin-left:auto}.head-actions a,.head-actions button{font-size:12px!important;padding:9px!important;min-height:40px}.nav a{font-size:13px;padding:12px 14px}main{padding:0 11px;margin-top:14px}.hero{padding:24px 20px;min-height:190px;border-radius:12px}.hero h1{font-size:26px}.hero p{font-size:13px}.layout{margin-top:24px}.gallery{gap:10px}.photo-info{padding:11px}.photo h3{font-size:15px}.section-heading{gap:9px}.section-heading>.search input{width:min(42vw,190px)!important}.section-heading>.upload-trigger{font-size:13px;padding:9px 10px!important}.panel{padding:17px}.dialog-head{padding:16px 18px}.dialog-head h2{font-size:21px}.dialog-body{padding:19px 18px 23px}.pj-dialog{width:calc(100vw - 22px)}.modal-backdrop{padding:10px 5px}.modal-content{padding:16px}.photo-actions{gap:8px!important}}
@media(max-width:360px){.head-actions{width:100%;justify-content:flex-end}.gallery{grid-template-columns:1fr}.section-heading>.search input{width:38vw!important}}