:root{
--black:#111;
--gray:#666;
--line:#cfcfcf;
--light:#f7f7f5;
--white:#fff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;background:var(--white);color:var(--black);
font-family:Arial,"Noto Sans KR",sans-serif;
font-weight:400;letter-spacing:.01em;
}
a{color:inherit;text-decoration:none}
button{font:inherit}
.wrap{max-width:1440px;margin:auto;padding:0 28px}
header{
position:sticky;top:14px;z-index:10;margin:14px auto 0;
max-width:1384px;height:58px;border:1px solid var(--line);
background:rgba(255,255,255,.94);backdrop-filter:blur(8px);
display:flex;align-items:center;padding:0 22px;
}
.brand{font-family:Georgia,serif;font-size:14px;letter-spacing:.08em}
.star{font-size:22px;margin-left:80px}
nav{margin-left:auto;display:flex;gap:30px;font-size:11px;letter-spacing:.05em}
.menu{display:none;margin-left:auto}
section{padding:100px 0;border-bottom:1px solid var(--line)}
.section-head{display:flex;justify-content:space-between;align-items:end;border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:44px}
.section-head h2{font-family:Georgia,serif;font-size:30px;font-weight:400;margin:0}
.count{font-size:11px;color:var(--gray)}
.work .image{
aspect-ratio:1/1;background:#e7e7e5;position:relative;overflow:hidden;
}
.work .image:before{
content:"";position:absolute;inset:12%;
border:1px solid #b7b7b7;transform:rotate(-5deg);
}
.work:nth-child(2) .image:before{border-radius:50%;transform:scale(.8)}
.work:nth-child(3) .image:before{transform:rotate(35deg);border-radius:45%}
.work:nth-child(4) .image:before{inset:20% 10%;transform:none;border-top:3px double #aaa;border-bottom:3px double #aaa}
.work:nth-child(5) .image:before{border-radius:50% 50% 0 0;transform:rotate(0)}
.work:nth-child(6) .image:before{inset:15%;transform:rotate(45deg)}
.meta{padding-top:12px;font-size:10px;line-height:1.8;color:#555}
.meta strong{display:block;color:#111;font-family:Georgia,serif;font-size:14px;font-weight:400}
.entry{
display:grid;grid-template-columns:100px 1fr 70px;gap:28px;
padding:24px 0;border-bottom:1px solid var(--line);align-items:center;
}
.date{font:11px monospace;color:#666}
.entry h3{font-family:Georgia,serif;font-size:16px;font-weight:400;margin:0 0 7px}
.entry p{margin:0;font-size:11px;color:#666}
.read{text-align:right;font-size:10px}
footer{padding:70px 0 100px}
footer h3{font-family:Georgia,serif;font-weight:400;margin:0 0 14px}
footer p, footer li{font-size:10px;color:#666;line-height:2}
footer ul{list-style:none;padding:0;margin:0}
@media (max-width:800px){
header{top:8px;margin-top:8px}
nav{display:none}.menu{display:block;font-size:18px}
.star{margin-left:24px}
.entry{grid-template-columns:65px 1fr 38px;gap:12px}
.entry p{font-size:10px}
}
/* aeonear merged direction */
body{background:#fff}
.after-cover-bar{
position:sticky;
top:12px;
z-index:20;
margin:14px auto 0;
max-width:1384px;
height:58px;
border:1px solid var(--line);
background:rgba(255,255,255,.94);
backdrop-filter:blur(8px);
display:flex;
align-items:center;
padding:0 22px;
}
.after-brand{
font-family:Georgia,serif;
font-size:14px;
letter-spacing:.08em;
}
.after-star{
font-size:22px;
margin-left:80px;
}
.after-nav{
margin-left:auto;
display:flex;
gap:30px;
font-size:11px;
letter-spacing:.05em;
}
.after-menu{display:none;margin-left:auto}
@media (max-width:800px){
.after-cover-bar{top:8px;margin-top:8px}
.after-nav{display:none}
.after-menu{display:block;font-size:18px}
}
.about-grid{display:grid;grid-template-columns:.9fr 1.3fr;gap:70px}.about-card{border:1px solid var(--line);padding:42px;min-height:270px}.about-label{font-size:9px;letter-spacing:.16em;color:#777}.about-card h3{font-family:Georgia,serif;font-size:34px;font-weight:400;margin:25px 0 22px}.about-card p{font-size:12px;line-height:2;color:#666}.about-info dl{margin:0;border-top:1px solid var(--line)}.about-info dl div{display:grid;grid-template-columns:130px 1fr;padding:19px 0;border-bottom:1px solid var(--line)}.about-info dt{font-size:9px;letter-spacing:.12em;color:#777}.about-info dd{margin:0;font-size:12px}
.guest-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}input, textarea, button{font:inherit}.guest-form input, .guest-form textarea{width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;padding:12px 4px;outline:none;font-size:11px}textarea{resize:vertical}.guest-form button{background:#111;color:#fff;border:1px solid #111;padding:10px 16px;cursor:pointer;font-size:9px;letter-spacing:.12em}
.aeon-intro{font-size:11px;color:#666;margin:-18px 0 30px;max-width:600px}.aeon-tabs{display:flex;gap:10px;border-bottom:1px solid var(--line);margin-bottom:36px}.aeon-tab{border:0;background:transparent;padding:0 18px 12px 0;margin-right:15px;font-size:9px;letter-spacing:.12em;cursor:pointer;color:#777}.aeon-tab.active{color:#111;border-bottom:1px solid #111}.aeon-panel{display:none}.aeon-panel.active{display:block}.collection-head{display:grid;grid-template-columns:70px 1fr;gap:20px;margin-bottom:30px}.collection-head>span{font:11px monospace;color:#777}.collection-head h3{font-family:Georgia,serif;font-size:27px;font-weight:400;margin:0 0 7px}.collection-head p{font-size:10px;color:#666;margin:0}.collection-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.collection-grid article{border-top:1px solid var(--line);padding-top:13px}.collection-image{height:220px;border:1px solid var(--line);margin-bottom:13px;background:#ddd;display:grid;place-items:center}.sea-card{background:linear-gradient(#eee 0 48%,#acb1af 49%,#d8d9d5 55%,#767d7b 56%,#d2d4d0)}.art-card{background:linear-gradient(135deg,#eee,#ccc)}.art-card:before{content:"";width:90px;height:130px;border:1px solid #777;border-radius:50%;transform:rotate(8deg)}.line-card{background:repeating-radial-gradient(ellipse at 50% 90%,transparent 0 18px,#aaa 19px 20px,transparent 21px 34px),#eee}.text-card{font:12px/2 Georgia,serif;text-align:center;color:#666;background:#eee}.collection-grid h4{font:400 14px Georgia,serif;margin:0 0 6px}.collection-grid p{font-size:9px;color:#666;margin:0}
.guest-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px}.guest-form{border:1px solid var(--line);padding:26px;height:max-content}.guest-form label{display:block;font-size:8px;letter-spacing:.12em;color:#666;margin-bottom:18px}.guest-form label input, .guest-form label textarea{display:block;color:#111;letter-spacing:normal;margin-top:7px}.guest-list{border-top:1px solid var(--line)}.guest-item{padding:19px 0;border-bottom:1px solid var(--line)}.guest-meta{display:flex;justify-content:space-between;gap:20px;margin-bottom:9px}.guest-name{font-family:Georgia,serif;font-size:14px}.guest-time{font:8px monospace;color:#888}.guest-message{font-size:10px;line-height:1.8;color:#555;white-space:pre-wrap}.guest-delete{border:0;background:transparent;font-size:8px;color:#888;cursor:pointer;padding:0;margin-top:10px;text-decoration:underline}.empty-guest{padding:25px 0;font-size:10px;color:#888}
@media (max-width:800px){.about-grid, .guest-layout{grid-template-columns:1fr}.guest-row{grid-template-columns:1fr}.collection-grid{grid-template-columns:1fr}.collection-image{height:250px}}
/* ABOUT photo + banners */
.about-profile{display:grid;grid-template-columns:180px 1fr;gap:26px;align-items:start}
.profile-photo{
width:180px;aspect-ratio:1/1;border:1px solid var(--line);
background:
linear-gradient(135deg,#efefec,#d4d4d0);
display:grid;place-items:center;overflow:hidden
}
.profile-photo span{font:9px/1.7 monospace;letter-spacing:.12em;color:#888;text-align:center}
.banner-section{margin-top:52px;padding-top:30px;border-top:1px solid var(--line)}
.mini-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:18px}
.mini-head p{margin:7px 0 0;font-size:9px;color:#777}
.my-banner{
width:200px;height:40px;border:1px solid #111;background:#f7f7f4;
display:flex;align-items:center;justify-content:center;gap:9px;
cursor:pointer;font-family:Georgia,serif
}
.my-banner strong{font-size:15px;font-weight:400}.my-banner small{font-size:7px;color:#777}
.copy-status{display:inline-block;margin-left:12px;font-size:8px;color:#777}
.neighbor-sites{margin-top:42px}
.neighbor-banner-grid{display:grid;grid-template-columns:repeat(4,200px);gap:12px;overflow-x:auto;padding-bottom:6px}
.neighbor-banner{
height:40px;border:1px solid var(--line);background:#e9e9e5;
display:grid;place-items:center;font:9px monospace;color:#777
}
/* Diary: read/write split */
.diary-toolbar{display:flex;justify-content:space-between;align-items:center;margin:-18px 0 34px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.diary-toolbar p{margin:0;font-size:9px;color:#777}
.diary-toolbar button{
border:0;background:transparent;border-bottom:1px solid #111;
padding:0 0 7px;font-size:9px;letter-spacing:.11em;cursor:pointer
}
/* BGM widget in menu */
.bgm-toggle{
border:1px solid var(--line);background:#fff;padding:6px 9px;
font-size:8px;letter-spacing:.11em;cursor:pointer
}
.bgm-toggle.is-on{background:#111;color:#fff;border-color:#111}
/* hidden audio container */
#bgmAudio{display:none}
@media (max-width:800px){
.about-profile{grid-template-columns:120px 1fr;gap:15px}
.profile-photo{width:120px}
.after-nav .bgm-toggle{display:inline-block}
}
/* ABOUT ME photo moved inside nickname box */
.about-profile{display:block}
.about-card{
min-height:270px;
display:flex;
flex-direction:column;
justify-content:center;
}
.about-card-top{
display:grid;
grid-template-columns:150px 1fr;
gap:28px;
align-items:center;
width:100%;
margin-bottom:0;
}
.about-card-top .profile-photo{
width:150px;
aspect-ratio:1/1
}
.about-name h3{margin:10px 0 0}
.about-card>p{margin:0}
@media (max-width:800px){
}
/* ABOUT ME: remove duplicate nickname and place introduction in info list */
/* ABOUT ME: large profile text is now the self-introduction */
.about-name .profile-intro{
margin:10px 0 0;
font-family:Georgia,"Noto Serif KR",serif;
font-size:18px;
line-height:1.65;
font-weight:400;
letter-spacing:0;
}
@media (max-width:800px){
}
/* ABOUT ME: nickname + self introduction together */
.about-name .profile-nickname{
margin:9px 0 10px;
font-family:Georgia,"Noto Serif KR",serif;
font-size:28px;
line-height:1.2;
font-weight:400;
letter-spacing:-.02em;
}
.about-name .profile-intro{
margin:0;
max-width:430px;
font-family:Arial,"Noto Sans KR",sans-serif;
font-size:11px;
line-height:1.9;
color:#666;
letter-spacing:0;
}
@media (max-width:800px){
}
/* production additions */
.profile-photo img{width:100%;height:100%;object-fit:cover;display:block}
.my-banner{padding:0;overflow:hidden}
.my-banner img{width:100%;height:100%;object-fit:cover;display:block}
.neighbor-banner{overflow:hidden}
.neighbor-banner img{width:100%;height:100%;object-fit:cover;display:block}
.diary-toolbar a, .admin-link{border:0;background:transparent;border-bottom:1px solid #111;padding:0 0 7px;font-size:9px;letter-spacing:.11em;cursor:pointer}
.empty-state{padding:38px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:10px;color:#888}
.form-message{margin-top:12px;font-size:9px;color:#666;min-height:1.4em}
.after-menu{border:0;background:transparent;cursor:pointer;color:#111}
.guest-delete{font:inherit}
.footer-admin{font-size:9px;color:#999;text-decoration:underline}
.admin-body{background:#f7f7f5}
.admin-shell{width:min(1040px,calc(100% - 32px));margin:50px auto 100px}
.admin-top{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:38px}
.admin-top h1{font:400 28px Georgia,serif;margin:0}
.admin-actions{display:flex;gap:18px;align-items:center}
.admin-panel{background:#fff;border:1px solid var(--line);padding:28px;margin-bottom:26px}
.admin-panel h2{font:400 24px Georgia,serif;margin:0 0 22px}
.admin-panel h3{font:400 17px Georgia,serif;margin:26px 0 12px}
.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 22px}
.admin-field{display:block;font-size:9px;letter-spacing:.1em;color:#666}
.admin-field.full{grid-column:1/-1}
.admin-field input, .admin-field textarea{display:block;width:100%;margin-top:7px;border:0;border-bottom:1px solid var(--line);padding:11px 4px;background:transparent;outline:none;color:#111;letter-spacing:0;font-size:11px}
.admin-field textarea{border:1px solid var(--line);padding:12px;min-height:120px}
.admin-submit, .admin-button{border:1px solid #111;background:#111;color:#fff;padding:10px 16px;font-size:9px;letter-spacing:.12em;cursor:pointer}
.admin-button.ghost{background:#fff;color:#111}
.admin-diary-list{border-top:1px solid var(--line);margin-top:20px}
.admin-diary-row{display:grid;grid-template-columns:110px 1fr auto;gap:20px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line);font-size:10px}
.admin-diary-row strong{font:400 14px Georgia,serif}
.neighbor-editor{display:grid;grid-template-columns:110px 1fr 1fr;gap:8px 12px;align-items:center;margin:8px 0}
.neighbor-editor span{font-size:9px;color:#777}
.setup-wrap{width:min(720px,calc(100% - 30px));margin:60px auto}.setup-card{border:1px solid var(--line);padding:34px;background:#fff}.setup-card h1{font:400 36px Georgia,serif;margin:0 0 8px}.setup-card p{font-size:11px;line-height:1.8;color:#666}.setup-card label{display:block;font-size:9px;letter-spacing:.1em;color:#666;margin:18px 0}.setup-card input{display:block;width:100%;border:0;border-bottom:1px solid var(--line);padding:10px 3px;margin-top:6px;outline:none}.setup-note{background:#f2f2ef;padding:14px;font-size:10px;line-height:1.7;margin:18px 0}.error{color:#8a2020}.success{color:#245f3a}
@media (max-width:800px){
.after-cover-bar{left:8px;right:8px;max-width:none}
.after-nav.is-open{display:flex;position:absolute;top:57px;left:0;right:0;background:#fff;border:1px solid var(--line);padding:18px;flex-direction:column;gap:16px;align-items:flex-start}
.after-nav.is-open .bgm-toggle{display:block}
.admin-grid{grid-template-columns:1fr}.admin-field.full{grid-column:auto}.neighbor-editor{grid-template-columns:1fr}.admin-diary-row button{grid-column:2}
}
/* page-by-page navigation v2 */
body.is-entrance{
height:100vh;
overflow:hidden;
}
body.is-entrance .after-cover-bar, body.is-entrance main > .wrap, body.is-entrance + footer, body.is-entrance footer{
display:none !important;
}
body.is-entered{
min-height:100vh;
overflow-x:hidden;
overflow-y:auto;
}
.site-page{
display:none;
min-height:calc(100vh - 88px);
}
.site-page.is-active{
display:block;
}
.after-nav a.is-active{
opacity:1;
border-bottom:1px solid #111;
padding-bottom:5px;
}
.after-brand{cursor:pointer}
@media (max-width:800px){
.site-page{min-height:calc(100vh - 72px)}
}
/* =========================================================
SCREEN TRANSITIONS v3
- cover ENTER / return to cover
- menu page switching
========================================================= */
body.is-transitioning{
pointer-events:none;
}
.site-page.page-enter{
animation:aeonearPageEnter .46s cubic-bezier(.2,.7,.2,1) both;
}
.site-page.page-leave{
display:block !important;
animation:aeonearPageLeave .27s cubic-bezier(.55,.02,.4,1) both;
}
.after-cover-bar.nav-enter{
animation:aeonearNavEnter .42s cubic-bezier(.2,.7,.2,1) both;
}
.after-cover-bar.nav-leave{
animation:aeonearNavLeave .22s ease both;
}
/* AEON 내부 탭도 아주 작게 이어지도록 */
.aeon-panel.active{
animation:aeonearMicroEnter .32s ease both;
}
@keyframes aeonearPageEnter{
0%{opacity:0;transform:translateY(14px)}
100%{opacity:1;transform:translateY(0)}
}
@keyframes aeonearPageLeave{
0%{opacity:1;transform:translateY(0)}
100%{opacity:0;transform:translateY(-9px)}
}
@keyframes aeonearMicroEnter{
0%{opacity:0;transform:translateY(5px)}
100%{opacity:1;transform:translateY(0)}
}
@media (prefers-reduced-motion: reduce){
.site-page.page-enter, .site-page.page-leave, .after-cover-bar.nav-enter, .after-cover-bar.nav-leave, .aeon-panel.active{
animation:none !important;
}
}
/* =========================================================
DARK MODE
- stored in localStorage
- starts from system preference if no saved choice
========================================================= */
.theme-toggle{
border:1px solid var(--line);
background:rgba(255,255,255,.88);
color:#111;
height:40px;
min-width:110px;
padding:0 14px;
cursor:pointer;
font-size:9px;
letter-spacing:.14em;
backdrop-filter:blur(8px);
}
.theme-toggle .theme-toggle-label{
display:inline-block;
}
body.theme-dark{
--black:#ece9e3;
--gray:#b7b3ac;
--line:#4a4a45;
--light:#161819;
--white:#0d0f10;
background:#0d0f10;
color:#ece9e3;
}
body.theme-dark a{
color:inherit;
}
body.theme-dark .theme-toggle{
background:rgba(17,19,20,.84);
color:#ece9e3;
border-color:#4a4a45;
}
body.theme-dark .after-cover-bar{
background:rgba(17,19,20,.90);
}
body.theme-dark .after-nav.is-open{
background:#17191a;
}
body.theme-dark .bgm-toggle, body.theme-dark .after-menu{
color:#ece9e3;
border-color:#4a4a45;
}
body.theme-dark .profile-photo{
background:linear-gradient(135deg,#17191a,#262a2c);
}
body.theme-dark .my-banner{
background:#17191a;
border-color:#4a4a45;
}
body.theme-dark .neighbor-banner{
background:#17191a;
}
body.theme-dark .collection-image, body.theme-dark .art-card, body.theme-dark .line-card, body.theme-dark .text-card{
border-color:#4a4a45;
}
body.theme-dark .sea-card{
background:linear-gradient(#1d2123 0 48%,#344044 49%,#242a2d 55%,#121618 56%,#2e383b);
}
body.theme-dark .art-card{
background:linear-gradient(135deg,#202426,#34383a);
}
body.theme-dark .line-card{
background:
repeating-radial-gradient(ellipse at 50% 90%,transparent 0 18px,rgba(255,255,255,.20) 19px 20px,transparent 21px 34px),
#1b1d1f;
}
body.theme-dark .text-card{
background:#1a1c1d;
color:#b7b3ac;
}
body.theme-dark .guest-delete, body.theme-dark .footer-admin{
color:#b7b3ac;
}
body.theme-dark footer{
background:#090a0b;
}
body.theme-dark .diary-toolbar a, body.theme-dark .diary-toolbar button{
border-bottom-color:#ece9e3;
}
body.theme-dark input, body.theme-dark textarea, body.theme-dark button, body.theme-dark .admin-field input, body.theme-dark .admin-field textarea{
color:#ece9e3;
}
body.theme-dark .about-info dd a, body.theme-dark .about-info dd, body.theme-dark .meta strong, body.theme-dark .section-head h2, body.theme-dark .entry h3, body.theme-dark .collection-head h3, body.theme-dark .collection-grid h4, body.theme-dark .guest-name{
color:#ece9e3;
}
body.theme-dark .meta, body.theme-dark .entry p, body.theme-dark .collection-grid p, body.theme-dark .count, body.theme-dark .date, body.theme-dark .guest-time, body.theme-dark .form-message, body.theme-dark footer p, body.theme-dark footer li, body.theme-dark .mini-head p, body.theme-dark .about-label, body.theme-dark .copy-status{
color:#b7b3ac;
}
body.theme-dark .after-nav a.is-active{
border-bottom-color:#ece9e3;
}
body.theme-dark .guest-form input, body.theme-dark .guest-form textarea{
border-bottom-color:#4a4a45;
}
body.theme-dark .guest-form button, body.theme-dark .admin-submit, body.theme-dark .admin-button{
background:#ece9e3;
color:#111;
border-color:#ece9e3;
}
/* =========================================================
HERO REFINEMENT
- default theme starts from LIGHT
- cover lines changed from pond-like ripples to crossing wave lines
- accent color close to #00305F
========================================================= */
/* =========================================================
COVER IMAGE MODE
The generated line-wave decoration is disabled.
Upload a cover image from admin.php instead.
========================================================= */
/* Light mode: title icon + ENTER stay black */
/* Dark mode keeps the same uploaded image, with readable white controls */
/* Admin cover preview */
.admin-help{
display:block;
margin-top:7px;
color:#888;
font-size:9px;
line-height:1.7;
letter-spacing:0;
}
.cover-current{
border:1px solid var(--line);
padding:14px;
}
.cover-current > span{
display:block;
margin-bottom:10px;
font-size:9px;
letter-spacing:.12em;
color:#777;
}
.cover-current img{
display:block;
width:100%;
max-height:260px;
object-fit:cover;
border:1px solid var(--line);
}
.cover-remove{
display:flex !important;
align-items:center;
gap:8px;
margin-top:10px !important;
font-size:9px !important;
letter-spacing:0 !important;
}
.cover-remove input{
width:auto !important;
margin:0 !important;
}
/* =========================================================
COVER IMAGE DISPLAY FIX
Shared-hosting-safe version: use a real ![]()
behind the cover text.
========================================================= */
/* =========================================================
COVER IMAGE PARTIAL REVEAL
- show only about the lower third of the uploaded image
- the rest blends into the cover theme with a soft boundary
========================================================= */
/* soft fade over the image so it dissolves into the cover */
/* Dark mode version */
/* Mobile */
/* =========================================================
COVER IMAGE EDGE FADE FIX
실제 이미지 자체의 윗부분을 투명하게 마스킹해서
하얀 대문 배경과 경계선 없이 녹아들게 합니다.
========================================================= */
/* 이미지 자체는 조금 더 위까지 뻗게 두고,
위쪽 약 1/3을 서서히 투명하게 만들어 경계를 없앰 */
/* 이전 버전의 흰색 덮개는 제거.
이제 이미지 자체가 투명해지므로 직선 경계가 생기지 않음 */
/* 다크모드에서도 같은 방식으로 자연스럽게 녹아듦 */
/* =========================================================
THEME TOGGLE : simple sun / moon icon button
========================================================= */
.theme-toggle{
width:42px !important;
min-width:42px !important;
height:42px !important;
padding:0 !important;
border-radius:999px;
display:grid;
place-items:center;
background:rgba(255,255,255,.88);
border:1px solid rgba(17,17,17,.14);
box-shadow:0 4px 14px rgba(0,0,0,.05);
transition:transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.theme-toggle:hover{
transform:translateY(-1px);
box-shadow:0 7px 18px rgba(0,0,0,.08);
}
.theme-toggle:active{
transform:translateY(0);
}
.theme-toggle::before{
content:"☀";
font-size:16px;
line-height:1;
color:#111;
}
.theme-toggle .theme-toggle-label{
position:absolute !important;
width:1px !important;
height:1px !important;
padding:0 !important;
margin:-1px !important;
overflow:hidden !important;
clip:rect(0, 0, 0, 0) !important;
white-space:nowrap !important;
border:0 !important;
}
/* dark mode icon/state */
body.theme-dark .theme-toggle{
background:rgba(17,19,20,.88);
border-color:rgba(255,255,255,.12);
box-shadow:0 4px 16px rgba(0,0,0,.26);
}
body.theme-dark .theme-toggle::before{
content:"☾";
color:#ece9e3;
}
/* keep it nicely tucked in the corner */
@media (max-width:800px){
.theme-toggle{
width:38px !important;
min-width:38px !important;
height:38px !important;
}
.theme-toggle::before{
font-size:15px;
}
}
/* =========================================================
SOFT THEME TRANSITION
눈부신 '깜빡임' 대신 천천히 톤이 넘어가도록 처리
========================================================= */
/* Only animate while the user is actively switching themes.
This avoids an unwanted fade on the initial page load. */
body.theme-switching, body.theme-switching *{
transition:
background-color .42s ease,
color .42s ease,
border-color .42s ease,
box-shadow .42s ease,
opacity .34s ease,
filter .42s ease !important;
}
/* Cover image also eases between normal / dark brightness. */
/* A very light veil bridges the brightest instant of the switch.
It stays subtle so the screen never flashes pure white/black. */
body::after{
content:"";
position:fixed;
inset:0;
z-index:9998;
pointer-events:none;
opacity:0;
background:rgba(18,21,24,.08);
}
body.theme-switching::after{
transition:opacity .20s ease !important;
}
body.theme-switch-mask::after{
opacity:1;
}
body.theme-dark.theme-switch-mask::after{
background:rgba(236,233,227,.05);
}
/* Icon gently rotates/fades instead of instantly swapping. */
.theme-toggle::before{
transition:transform .38s cubic-bezier(.2,.7,.2,1), opacity .20s ease !important;
}
body.theme-switching .theme-toggle::before{
transform:rotate(180deg) scale(.86);
}
/* Keep animation accessible for visitors who request less motion. */
@media (prefers-reduced-motion: reduce){
body.theme-switching, body.theme-switching *, body.theme-switching::after, .theme-toggle::before{
transition:none !important;
}
body.theme-switch-mask::after{
opacity:0 !important;
}
}
/* =========================================================
AEON CONTENT MANAGEMENT + DARK MODE TAB VISIBILITY
========================================================= */
.collection-photo-wrap{overflow:hidden;background:#ececea}
.collection-photo{width:100%;height:100%;display:block;object-fit:cover}
.aeon-empty{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:34px 0;font-size:10px;color:var(--gray)}
body.theme-dark .aeon-tab{color:#8f9293 !important}
body.theme-dark .aeon-tab.active{color:#f1eee8 !important;border-bottom-color:#f1eee8 !important}
body.theme-dark .aeon-tabs{border-bottom-color:var(--line)}
.admin-section-note{max-width:760px;margin:-10px 0 26px;font-size:10px;line-height:1.9;color:#777}
.aeon-admin-collection-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.aeon-admin-box{border:1px solid var(--line);padding:20px}
.admin-mini-label{display:block;margin-bottom:15px;font-size:8px;letter-spacing:.14em;color:#777}
.admin-form-footer{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:18px}
.admin-field select{display:block;width:100%;margin-top:7px;border:0;border-bottom:1px solid var(--line);background:#fff;color:#111;padding:11px 4px;outline:none;font-size:11px}
.admin-aeon-list{border-top:1px solid var(--line)}
.admin-aeon-item{border-bottom:1px solid var(--line)}
.admin-aeon-item>summary{list-style:none;display:grid;grid-template-columns:78px 1fr auto;gap:16px;align-items:center;padding:14px 0;cursor:pointer}
.admin-aeon-item>summary::-webkit-details-marker{display:none}
.admin-aeon-preview{width:78px;height:58px;border:1px solid var(--line);overflow:hidden;background:#e5e5e2}
.admin-aeon-preview img{width:100%;height:100%;object-fit:cover;display:block}
.admin-aeon-preview.sea-card{background:linear-gradient(#eee 0 48%,#acb1af 49%,#d8d9d5 55%,#767d7b 56%,#d2d4d0)}
.admin-aeon-preview.art-card{background:linear-gradient(135deg,#eee,#ccc)}
.admin-aeon-preview.line-card{background:repeating-radial-gradient(ellipse at 50% 90%,transparent 0 10px,#aaa 11px 12px,transparent 13px 20px),#eee}
.admin-aeon-preview.text-card{background:#eee}
.admin-aeon-summary-copy{min-width:0}
.admin-aeon-summary-copy small{display:block;margin-bottom:5px;font-size:8px;letter-spacing:.1em;color:#888}
.admin-aeon-summary-copy strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:400 15px Georgia,serif}
.admin-aeon-open{font-size:8px;letter-spacing:.12em;color:#777}
.admin-aeon-item[open] .admin-aeon-open::after{content:" / OPEN"}
.aeon-item-edit-form{padding:0 0 22px 94px}
.admin-inline-note{margin:12px 0 0;font-size:9px;line-height:1.7;color:#888}
@media (max-width:800px){
.aeon-admin-collection-grid{grid-template-columns:1fr}
.admin-aeon-item>summary{grid-template-columns:58px 1fr auto;gap:10px}
.aeon-item-edit-form{padding-left:0}
}
/* =========================================================
DIARY — compact list + large reading view
========================================================= */
.diary-index-list{
border-top:1px solid var(--line);
}
.diary-list-row{
width:100%;
min-height:82px;
display:grid;
grid-template-columns:115px minmax(0,1fr) 70px 72px;
gap:24px;
align-items:center;
padding:18px 0;
border:0;
border-bottom:1px solid var(--line);
background:transparent;
color:var(--black);
text-align:left;
cursor:pointer;
}
.diary-list-row:hover .diary-list-main strong, .diary-list-row:focus-visible .diary-list-main strong{
text-decoration:underline;
text-underline-offset:5px;
}
.diary-list-row:focus-visible{
outline:1px solid var(--black);
outline-offset:4px;
}
.diary-list-date{
font:10px monospace;
color:var(--gray);
}
.diary-list-main{
min-width:0;
display:block;
}
.diary-list-main strong{
display:block;
margin-bottom:7px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font:400 16px Georgia,"Noto Serif KR",serif;
}
.diary-list-excerpt{
display:block;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font-size:10px;
color:var(--gray);
}
.diary-list-type{
font-size:8px;
letter-spacing:.12em;
color:var(--gray);
}
.diary-list-open{
justify-self:end;
font-size:8px;
letter-spacing:.08em;
white-space:nowrap;
}
/* reading view */
.diary-detail-view{
width:100%;
}
.diary-detail{
width:min(920px,100%);
margin:0 auto;
padding:2px 0 70px;
}
.diary-back{
margin:0 0 50px;
padding:0 0 7px;
border:0;
border-bottom:1px solid var(--black);
background:transparent;
color:var(--black);
font-size:9px;
letter-spacing:.11em;
cursor:pointer;
}
.diary-detail-head{
padding-bottom:28px;
margin-bottom:38px;
border-bottom:1px solid var(--line);
}
.diary-detail-date{
margin-bottom:12px;
font:10px monospace;
color:var(--gray);
}
.diary-detail-head h3{
margin:0;
font:400 clamp(30px,4vw,48px)/1.25 Georgia,"Noto Serif KR",serif;
letter-spacing:-.025em;
}
.diary-detail-photo-wrap{
width:100%;
margin:0 0 42px;
}
.diary-detail-photo{
display:block;
width:100%;
max-height:72vh;
object-fit:contain;
object-position:center;
}
.diary-detail-body{
max-width:760px;
font-size:13px;
line-height:2.15;
color:#4f4f4f;
word-break:keep-all;
overflow-wrap:anywhere;
}
/* small internal transition */
.diary-detail-enter{
animation:diaryDetailIn .34s cubic-bezier(.2,.7,.2,1) both;
}
.diary-index-enter{
animation:diaryIndexIn .30s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes diaryDetailIn{
from{opacity:0;transform:translateY(10px)}
to{opacity:1;transform:translateY(0)}
}
@keyframes diaryIndexIn{
from{opacity:0;transform:translateY(6px)}
to{opacity:1;transform:translateY(0)}
}
/* dark mode */
body.theme-dark .diary-list-row{
color:var(--black);
}
body.theme-dark .diary-list-row:focus-visible{
outline-color:#ece9e3;
}
body.theme-dark .diary-back{
color:#ece9e3;
border-bottom-color:#ece9e3;
}
body.theme-dark .diary-detail-body{
color:#c4c0b8;
}
/* mobile */
@media (max-width:800px){
.diary-list-row{
min-height:76px;
grid-template-columns:72px minmax(0,1fr) 42px;
gap:12px;
padding:16px 0;
}
.diary-list-type{display:none}
.diary-list-open{
font-size:9px;
}
.diary-detail{
padding-bottom:45px;
}
.diary-back{
margin-bottom:36px;
}
.diary-detail-head{
margin-bottom:28px;
padding-bottom:22px;
}
.diary-detail-head h3{
font-size:30px;
}
.diary-detail-photo-wrap{
margin-bottom:30px;
}
.diary-detail-photo{
max-height:68vh;
}
.diary-detail-body{
font-size:12px;
line-height:2;
}
}
@media (prefers-reduced-motion:reduce){
.diary-detail-enter, .diary-index-enter{
animation:none !important;
}
}
/* =========================================================
REFINEMENTS — ABOUT / FOOTER / AEON DETAIL / HERO TAGLINE
========================================================= */
/* 1. Banner area now sits directly below the right-side profile info. */
.about-info .banner-section{
margin-top:34px;
padding-top:28px;
border-top:1px solid var(--line);
}
.about-info .neighbor-sites{
margin-top:34px;
}
.about-info .neighbor-banner-grid{
grid-template-columns:repeat(4,200px);
}
/* 2. Hero phrase */
/* 3. Simple footer */
.footer-simple{
display:flex;
align-items:center;
justify-content:space-between;
gap:30px;
}
.footer-signature{
display:flex;
align-items:baseline;
gap:14px;
}
.footer-signature strong{
font:400 18px Georgia,serif;
}
.footer-signature span{
font-size:9px;
color:var(--gray);
}
.footer-simple .footer-admin{
font-size:9px;
letter-spacing:.10em;
color:var(--gray);
text-decoration:underline;
text-underline-offset:4px;
}
/* 4. AEON cards are clickable */
.collection-card-button{
width:100%;
padding:0;
border:0;
background:transparent;
color:inherit;
text-align:left;
cursor:pointer;
}
.collection-card-button:focus-visible{
outline:1px solid var(--black);
outline-offset:5px;
}
.collection-card-button .collection-image{
transition:opacity .20s ease, transform .26s cubic-bezier(.2,.7,.2,1);
}
.collection-card-button:hover .collection-image{
transform:translateY(-3px);
opacity:.92;
}
.collection-read{
display:inline-block;
margin-top:10px;
padding-bottom:4px;
border-bottom:1px solid currentColor;
font-size:8px;
letter-spacing:.09em;
color:var(--gray);
}
/* AEON large detail */
.aeon-detail{
width:min(980px,100%);
margin:0 auto;
padding:2px 0 70px;
}
.aeon-back{
margin:0 0 48px;
padding:0 0 7px;
border:0;
border-bottom:1px solid var(--black);
background:transparent;
color:var(--black);
font-size:9px;
letter-spacing:.11em;
cursor:pointer;
}
.aeon-detail-head{
margin-bottom:34px;
padding-bottom:26px;
border-bottom:1px solid var(--line);
}
.aeon-detail-label{
display:block;
margin-bottom:12px;
font-size:8px;
letter-spacing:.14em;
color:var(--gray);
}
.aeon-detail-head h3{
margin:0;
font:400 clamp(31px,4vw,50px)/1.2 Georgia,"Noto Serif KR",serif;
letter-spacing:-.025em;
}
.aeon-detail-media{
width:100%;
min-height:430px;
margin:0 0 38px;
border:1px solid var(--line);
}
.aeon-detail-photo-wrap{
display:grid;
place-items:center;
background:var(--light);
}
.aeon-detail-photo{
display:block;
width:100%;
max-height:72vh;
object-fit:contain;
}
.aeon-detail-art{
height:min(58vw,600px);
min-height:430px;
display:grid;
place-items:center;
}
.aeon-detail-art.art-card:before{
width:180px;
height:270px;
}
.aeon-detail-text{
max-width:760px;
font-size:13px;
line-height:2.1;
color:#4f4f4f;
word-break:keep-all;
overflow-wrap:anywhere;
}
.aeon-detail-enter{
animation:aeonDetailIn .34s cubic-bezier(.2,.7,.2,1) both;
}
.aeon-index-enter{
animation:aeonIndexIn .30s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes aeonDetailIn{
from{opacity:0;transform:translateY(10px)}
to{opacity:1;transform:translateY(0)}
}
@keyframes aeonIndexIn{
from{opacity:0;transform:translateY(6px)}
to{opacity:1;transform:translateY(0)}
}
body.theme-dark .collection-card-button{
color:var(--black);
}
body.theme-dark .collection-card-button:focus-visible{
outline-color:#ece9e3;
}
body.theme-dark .aeon-back{
color:#ece9e3;
border-bottom-color:#ece9e3;
}
body.theme-dark .aeon-detail-text{
color:#c4c0b8;
}
@media (max-width:800px){
.about-info .banner-section{
margin-top:28px;
}
.footer-simple, .footer-signature{
align-items:flex-start;
}
.footer-signature{
flex-direction:column;
gap:7px;
}
.aeon-detail{
padding-bottom:45px;
}
.aeon-back{
margin-bottom:34px;
}
.aeon-detail-media, .aeon-detail-art{
min-height:280px;
}
.aeon-detail-art{
height:72vw;
}
.aeon-detail-text{
font-size:12px;
line-height:2;
}
}
@media (prefers-reduced-motion:reduce){
.aeon-detail-enter, .aeon-index-enter, .collection-card-button .collection-image{
animation:none !important;
transition:none !important;
}
}
/* =========================================================
SOFT LIGHT MODE
pure white 대신 눈이 덜 부신 warm off-white 계열
public site only
========================================================= */
/* cover */
/* sticky navigation */
/* mobile dropdown */
/* cards / light surfaces */
/* image placeholders / default artwork */
/* footer */
body.is-entered:not(.theme-dark) + footer, body.is-entered:not(.theme-dark) ~ footer{
background:#f5f4ef !important;
}
/* theme button */
/* keep form controls visually integrated */
body.is-entered:not(.theme-dark) input, body.is-entered:not(.theme-dark) textarea, body.is-entered:not(.theme-dark) select, body.is-entered:not(.theme-dark) button{
accent-color:#111;
}
/* =========================================================
COOL GRAY LIGHT MODE OVERRIDE
warm ivory -> soft cool gray-white
========================================================= */
body.is-entrance:not(.theme-dark), body.is-entered:not(.theme-dark){
--white:#f2f3f3;
--light:#eceeef;
--line:#cfd2d3;
--gray:#686d70;
background:#f2f3f3 !important;
color:#111;
}
/* cover */
/* sticky navigation */
body.is-entered:not(.theme-dark) .after-cover-bar{
background:rgba(246,247,247,.94) !important;
border-color:#cfd2d3 !important;
}
/* mobile dropdown */
body.is-entered:not(.theme-dark) .after-nav.is-open{
background:#f6f7f7 !important;
border-color:#cfd2d3 !important;
}
/* cards / light surfaces */
body.is-entered:not(.theme-dark) .about-card, body.is-entered:not(.theme-dark) .guest-form{
background:#f6f7f7 !important;
}
/* placeholders / default artwork */
body.is-entered:not(.theme-dark) .profile-photo{
background:linear-gradient(135deg,#eceeef,#dfe2e3) !important;
}
body.is-entered:not(.theme-dark) .my-banner{
background:#f6f7f7 !important;
}
body.is-entered:not(.theme-dark) .neighbor-banner{
background:#e7e9ea !important;
}
body.is-entered:not(.theme-dark) .text-card{
background:#eceeef !important;
}
body.is-entered:not(.theme-dark) .line-card{
background:
repeating-radial-gradient(
ellipse at 50% 90%,
transparent 0 18px,
#9fa4a6 19px 20px,
transparent 21px 34px
),
#eceeef !important;
}
body.is-entered:not(.theme-dark) .art-card{
background:linear-gradient(135deg,#eceeef,#d7dadd) !important;
}
body.is-entered:not(.theme-dark) .collection-photo-wrap, body.is-entered:not(.theme-dark) .aeon-detail-photo-wrap{
background:#eceeef !important;
}
/* footer */
body.is-entered:not(.theme-dark) ~ footer{
background:#f2f3f3 !important;
}
/* theme button */
body:not(.theme-dark) .theme-toggle{
background:rgba(246,247,247,.92) !important;
border-color:#cfd2d3 !important;
}
/* =========================================================
GUEST BOOK — compact actions + admin replies
========================================================= */
/* Existing generic button styles used to make DELETE visually too large. */
.guest-actions{
display:flex;
align-items:center;
gap:12px;
flex-wrap:wrap;
margin-top:12px;
}
.guest-delete, .guest-reply-toggle, .guest-reply-remove{
width:auto !important;
min-width:0 !important;
height:auto !important;
margin:0 !important;
padding:2px 0 3px !important;
border:0 !important;
border-bottom:1px solid currentColor !important;
background:transparent !important;
color:#777 !important;
font-family:Arial,"Noto Sans KR",sans-serif !important;
font-size:8px !important;
font-weight:400 !important;
line-height:1.2 !important;
letter-spacing:.08em !important;
text-decoration:none !important;
cursor:pointer;
}
.guest-delete:hover, .guest-reply-toggle:hover, .guest-reply-remove:hover{
color:#111 !important;
}
.guest-reply-remove{
opacity:.72;
}
/* Owner reply shown to everyone */
.guest-reply{
margin-top:18px;
padding:15px 17px;
border-left:1px solid var(--line);
background:rgba(0,0,0,.018);
}
.guest-reply-meta{
display:flex;
justify-content:space-between;
align-items:center;
gap:18px;
margin-bottom:9px;
}
.guest-reply-label{
font-size:8px;
letter-spacing:.14em;
color:#666;
}
.guest-reply-time{
font:8px monospace;
color:#999;
}
.guest-reply-message{
font-size:10px;
line-height:1.9;
color:#555;
white-space:pre-wrap;
}
/* Admin inline reply editor */
.guest-reply-form{
margin-top:16px;
padding:16px;
border:1px solid var(--line);
background:rgba(255,255,255,.22);
}
.guest-reply-form textarea{
display:block;
width:100%;
min-height:92px;
padding:10px 3px;
border:0;
border-bottom:1px solid var(--line);
background:transparent;
color:inherit;
outline:none;
resize:vertical;
font-size:10px;
line-height:1.8;
}
.guest-reply-form-actions{
display:flex;
align-items:center;
gap:12px;
margin-top:12px;
}
.guest-reply-save, .guest-reply-cancel{
width:auto !important;
min-width:0 !important;
padding:6px 9px !important;
font-size:8px !important;
letter-spacing:.09em !important;
cursor:pointer;
}
.guest-reply-save{
border:1px solid #111 !important;
background:#111 !important;
color:#fff !important;
}
.guest-reply-cancel{
border:1px solid var(--line) !important;
background:transparent !important;
color:#666 !important;
}
/* Dark mode */
body.theme-dark .guest-delete, body.theme-dark .guest-reply-toggle, body.theme-dark .guest-reply-remove{
color:#aaa6a0 !important;
}
body.theme-dark .guest-delete:hover, body.theme-dark .guest-reply-toggle:hover, body.theme-dark .guest-reply-remove:hover{
color:#ece9e3 !important;
}
body.theme-dark .guest-reply{
background:rgba(255,255,255,.025);
}
body.theme-dark .guest-reply-label, body.theme-dark .guest-reply-message{
color:#c4c0b8;
}
body.theme-dark .guest-reply-form{
background:rgba(255,255,255,.018);
}
body.theme-dark .guest-reply-save{
border-color:#ece9e3 !important;
background:#ece9e3 !important;
color:#111 !important;
}
body.theme-dark .guest-reply-cancel{
color:#aaa6a0 !important;
}
/* cool-gray light mode */
body.is-entered:not(.theme-dark) .guest-reply{
background:#eceeef;
}
body.is-entered:not(.theme-dark) .guest-reply-form{
background:#f6f7f7;
}
@media (max-width:800px){
.guest-reply{
padding:13px 14px;
}
}
/* =========================================================
SMALL TYPOGRAPHY BUMP
전체 분위기는 유지하면서 작은 글자만 약 1px씩 키움
========================================================= */
/* top navigation */
.after-nav{font-size:12px}
.bgm-toggle{font-size:9px}
/* section labels / common metadata */
.count{font-size:12px}
.about-label{font-size:10px}
.mini-head p{font-size:10px}
.copy-status{font-size:9px}
/* ABOUT */
.about-card p{font-size:13px}
.about-name .profile-intro{font-size:12px}
.about-info dt{font-size:10px}
.about-info dd{font-size:13px}
/* DIARY */
.diary-toolbar p{font-size:10px}
.diary-toolbar a{font-size:10px}
.diary-list-date{font-size:11px}
.diary-list-main strong{font-size:17px}
.diary-list-excerpt{font-size:11px}
.diary-list-type, .diary-list-open{font-size:9px}
.diary-detail-date{font-size:11px}
.diary-detail-body{font-size:14px}
.diary-back{font-size:10px}
/* AEON */
.aeon-intro{font-size:12px}
.aeon-tab{font-size:10px}
.collection-head>span{font-size:12px}
.collection-head p{font-size:11px}
.collection-grid h4{font-size:15px}
.collection-grid p{font-size:10px}
.collection-read{font-size:9px}
.aeon-detail-label{font-size:9px}
.aeon-detail-text{font-size:14px}
.aeon-back{font-size:10px}
/* GUEST BOOK */
.guest-form label{font-size:9px}
.guest-form input, .guest-form textarea{font-size:12px}
.guest-name{font-size:15px}
.guest-time{font-size:9px}
.guest-message{font-size:11px}
.guest-delete, .guest-reply-toggle, .guest-reply-remove{font-size:9px !important}
.guest-reply-label, .guest-reply-time{font-size:9px}
.guest-reply-message{font-size:11px}
/* Footer */
.footer-signature span{font-size:10px}
.footer-simple .footer-admin{font-size:10px}
/* Mobile: keep it only slightly larger */
@media (max-width:800px){
.after-nav{font-size:11px}
.diary-list-main strong{font-size:16px}
.diary-detail-body, .aeon-detail-text{font-size:13px}
}
/* =========================================================
WEB FONTS
- Korean body/UI: Noto Sans KR
- Korean serif headings: Nanum Myeongjo
- aeonear logo / selected English display text keeps Georgia
========================================================= */
/* Body / navigation / UI copy */
/* Serif headings and display copy */
/* Keep the aeonear identity in Georgia first */
/* Monospace metadata remains monospace */
.diary-list-date, .diary-detail-date, .guest-time, .guest-reply-time, .date{
font-family:monospace;
}
/* =========================================================
SERIF REVERT
Nanum Myeongjo only reverted to the previous serif feel.
Noto Sans KR remains for body/UI consistency.
========================================================= */
.section-head h2, .about-card h3, .about-name .profile-nickname, .diary-list-main strong, .diary-detail-head h3, .collection-head h3, .collection-grid h4, .aeon-detail-head h3, .guest-name, .admin-top h1, .admin-panel h2, .admin-panel h3, .admin-aeon-summary-copy strong{
font-family:Georgia,"Noto Serif KR",serif;
}
/* aeonear identity stays unchanged */
.after-brand, .footer-signature strong{
font-family:Georgia,"Noto Serif KR",serif;
}
/* =========================================================
ADMIN DIARY EDITOR
========================================================= */
.admin-diary-item{
border-bottom:1px solid var(--line);
}
.admin-diary-item .admin-diary-row{
border-bottom:0;
margin:0;
cursor:pointer;
list-style:none;
}
.admin-diary-item .admin-diary-row::-webkit-details-marker{
display:none;
}
.admin-diary-edit-label{
justify-self:end;
font-size:9px;
letter-spacing:.12em;
color:#777;
border-bottom:1px solid currentColor;
padding-bottom:3px;
}
.admin-diary-item[open] .admin-diary-edit-label{
color:#111;
}
.diary-edit-form{
padding:8px 0 24px;
}
body.theme-dark .admin-diary-edit-label{
color:#aaa6a0;
}
body.theme-dark .admin-diary-item[open] .admin-diary-edit-label{
color:#ece9e3;
}
@media (max-width:800px){
.admin-diary-item .admin-diary-row{
grid-template-columns:75px 1fr auto;
}
.admin-diary-edit-label{
grid-column:auto;
}
}
/* =========================================================
BGM VOLUME CONTROL
========================================================= */
.bgm-control{
display:flex;
align-items:center;
gap:8px;
flex:0 0 auto;
}
.bgm-control .bgm-toggle{
flex:0 0 auto;
}
.bgm-volume{
display:flex;
align-items:center;
gap:6px;
min-width:118px;
margin:0;
color:#777;
cursor:pointer;
user-select:none;
}
.bgm-volume-label, .bgm-volume-value{
font-size:8px;
line-height:1;
letter-spacing:.08em;
}
.bgm-volume-value{
width:18px;
text-align:right;
font-family:monospace;
letter-spacing:0;
}
#bgmVolume{
width:68px;
height:14px;
margin:0;
padding:0;
border:0;
background:transparent;
appearance:none;
-webkit-appearance:none;
cursor:pointer;
}
/* WebKit */
#bgmVolume::-webkit-slider-runnable-track{
height:1px;
background:#aaa;
}
#bgmVolume::-webkit-slider-thumb{
width:8px;
height:8px;
margin-top:-3.5px;
border:1px solid #777;
border-radius:50%;
background:var(--white);
appearance:none;
-webkit-appearance:none;
}
/* Firefox */
#bgmVolume::-moz-range-track{
height:1px;
border:0;
background:#aaa;
}
#bgmVolume::-moz-range-thumb{
width:8px;
height:8px;
border:1px solid #777;
border-radius:50%;
background:var(--white);
}
#bgmVolume:focus-visible{
outline:1px solid #777;
outline-offset:4px;
}
/* dark mode */
body.theme-dark .bgm-volume{
color:#aaa6a0;
}
body.theme-dark #bgmVolume::-webkit-slider-runnable-track{
background:#67645f;
}
body.theme-dark #bgmVolume::-webkit-slider-thumb{
border-color:#c7c2ba;
background:#1c1c1b;
}
body.theme-dark #bgmVolume::-moz-range-track{
background:#67645f;
}
body.theme-dark #bgmVolume::-moz-range-thumb{
border-color:#c7c2ba;
background:#1c1c1b;
}
/* mobile menu */
@media (max-width:800px){
.after-nav .bgm-control{
display:flex;
align-items:center;
gap:10px;
}
.after-nav .bgm-control .bgm-toggle{
display:inline-block;
}
.bgm-volume{
min-width:112px;
}
#bgmVolume{
width:64px;
}
}
/* =========================================================
MENU BRAND TAGLINE
========================================================= */
.after-brand-wrap{
display:flex;
align-items:baseline;
gap:10px;
flex:0 0 auto;
}
.after-brand-wrap .after-brand{
flex:0 0 auto;
}
.after-brand-tagline{
font:italic 9px/1.2 Georgia,"Times New Roman",serif;
letter-spacing:.06em;
color:#7a7d7f;
white-space:nowrap;
}
body.theme-dark .after-brand-tagline{
color:#9f9b94;
}
@media (max-width:800px){
}
/* =========================================================
MOBILE POLISH + FONT TUNE
- body/UI font switched back to a lighter system sans feel
- mobile overflow / horizontal scroll fixes
========================================================= */
/* body / UI font: cleaner and more native on mobile */
body, button, input, textarea, select{
font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Segoe UI",Arial,sans-serif;
}
/* serif headings remain */
.section-head h2, .about-name .profile-nickname, .diary-list-main strong, .diary-detail-head h3, .collection-head h3, .collection-grid h4, .aeon-detail-head h3, .guest-name, .footer-signature strong, .after-brand{
font-family:Georgia,"Noto Serif KR",serif;
}
/* stronger overflow safety */
body.is-entered, .site-page, .wrap, .section-head, .about-grid, .about-card, .about-card-top, .about-name, .about-info, .about-info dl div, .about-info dd{
min-width:0;
}
.about-info dd, .about-info dd a{
overflow-wrap:anywhere;
word-break:break-word;
}
/* mobile refinement */
@media (max-width:800px){
html, body{
overflow-x:hidden;
}
.wrap{
padding:0 14px;
}
section{
padding:72px 0;
}
.section-head{
margin-bottom:28px;
padding-bottom:14px;
gap:14px;
}
.section-head h2{
font-size:clamp(26px,8.6vw,40px);
line-height:1.05;
letter-spacing:-.02em;
}
.count{
font-size:11px;
text-align:right;
line-height:1.3;
}
/* top bar */
.after-cover-bar{
padding:0 14px;
}
.after-brand-wrap{
min-width:0;
max-width:calc(100% - 112px);
gap:6px;
}
.after-brand{
font-size:11px;
letter-spacing:.05em;
}
.after-brand-tagline{
max-width:92px;
overflow:hidden;
text-overflow:ellipsis;
font-size:7px;
}
/* about */
.about-card{
min-height:auto;
padding:20px 16px;
}
.about-card-top{
grid-template-columns:96px minmax(0,1fr);
gap:14px;
align-items:start;
margin-bottom:18px;
}
.about-card-top .profile-photo{
width:96px;
}
.about-name .profile-nickname{
margin:6px 0 8px;
font-size:18px;
line-height:1.18;
}
.about-name .profile-intro{
max-width:none;
font-size:11px;
line-height:1.75;
}
.about-info dl div{
grid-template-columns:72px minmax(0,1fr);
gap:10px;
padding:16px 0;
}
.about-info dt{
font-size:9px;
}
.about-info dd, .about-info dd a{
font-size:11px;
line-height:1.7;
}
.banner-section{
margin-top:32px;
padding-top:24px;
}
.my-banner{
width:170px;
height:34px;
}
.neighbor-banner-grid{
grid-template-columns:repeat(4,150px);
gap:10px;
}
.neighbor-banner{
height:34px;
}
/* page-specific text */
.diary-toolbar{
flex-direction:column;
align-items:flex-start;
gap:12px;
}
.diary-toolbar p, .diary-toolbar a, .diary-toolbar button{
font-size:10px;
}
.aeon-tabs{
overflow-x:auto;
white-space:nowrap;
padding-bottom:2px;
}
.aeon-tab{
flex:0 0 auto;
}
.guest-meta{
flex-direction:column;
align-items:flex-start;
gap:4px;
}
.footer-simple{
flex-direction:column;
align-items:flex-start;
gap:14px;
}
.footer-signature{
gap:6px;
}
}
/* =========================================================
UI FIXES
========================================================= */
/* Hide the visible horizontal scrollbar but keep swipe/scroll */
.neighbor-banner-grid{
scrollbar-width:none;
-ms-overflow-style:none;
}
.neighbor-banner-grid::-webkit-scrollbar{
width:0;
height:0;
display:none;
}
/* Menu bar alignment */
.after-nav{
align-items:center;
}
.after-cover-bar{
gap:12px;
}
/* Theme toggle moved into the top bar */
.nav-theme-toggle{
position:static !important;
inset:auto !important;
flex:0 0 auto;
margin-left:10px;
width:34px !important;
min-width:34px !important;
height:34px !important;
box-shadow:none;
background:transparent;
border:1px solid var(--line);
}
.nav-theme-toggle::before{
font-size:14px;
}
.nav-theme-toggle:hover{
transform:none;
box-shadow:none;
background:rgba(255,255,255,.45);
}
body.theme-dark .nav-theme-toggle{
background:transparent;
border-color:var(--line);
box-shadow:none;
}
body.theme-dark .nav-theme-toggle:hover{
background:rgba(255,255,255,.03);
}
.bgm-control{
align-items:center;
}
@media (max-width:800px){
.after-cover-bar{
gap:8px;
}
.after-star{
margin-left:8px;
font-size:17px;
}
.after-menu{
font-size:17px;
}
.nav-theme-toggle{
margin-left:8px;
width:32px !important;
min-width:32px !important;
height:32px !important;
}
.nav-theme-toggle::before{
font-size:13px;
}
}
/* =========================================================
CUSTOM CURSOR — LINE STAR v2
bigger default + clearer hover + full UI coverage
========================================================= */
/* default */
html, body, main, section, div, span, p, dl, dt, dd, article, figure, form{
cursor:url("../cursor/cursor-default.png") 14 14, auto !important;
}
/* clickable / interactive */
a, button, summary, label, [role="button"], #bgmToggle, .bgm-toggle, .bgm-control, .bgm-volume, #bgmVolume, input[type="range"], input[type="submit"], input[type="button"], .theme-toggle, .nav-theme-toggle, .after-menu, .aeon-tab, .my-banner, .neighbor-banner, .guest-delete, .guest-reply-toggle, .guest-reply-remove, .guest-reply-save, .guest-reply-cancel, .diary-list-row, .collection-card-button, .diary-back, .aeon-back, .guest-form button, #guestForm button{
cursor:url("../cursor/cursor-pointer.png") 14 14, pointer !important;
}
/* form-writing areas also keep the custom cursor instead of the I-beam */
input[type="text"], input[type="email"], input[type="password"], input[type="date"], input:not([type]), textarea, .guest-form input, .guest-form textarea, #guestForm input, #guestForm textarea{
cursor:url("../cursor/cursor-default.png") 14 14, text !important;
}
/* range track / thumb: some browsers need this explicitly */
#bgmVolume::-webkit-slider-runnable-track, #bgmVolume::-webkit-slider-thumb{
cursor:url("../cursor/cursor-pointer.png") 14 14, pointer !important;
}
#bgmVolume::-moz-range-track, #bgmVolume::-moz-range-thumb{
cursor:url("../cursor/cursor-pointer.png") 14 14, pointer !important;
}
/* =========================================================
SIDE PANEL LAYOUT
Cover removed: the uploaded cover image now lives in a fixed
left brand panel. Existing page content/functionality is preserved.
========================================================= */
:root{
--side-panel-w:clamp(310px,31vw,470px);
}
html, body{
min-height:100%;
}
body.sidepanel-layout{
min-height:100vh !important;
overflow-x:hidden !important;
overflow-y:auto !important;
}
/* old entrance/cover is no longer used */
.side-brand-panel{
position:fixed;
inset:0 auto 0 0;
z-index:2;
width:var(--side-panel-w);
min-height:100vh;
overflow:hidden;
border-right:1px solid var(--line);
background:
linear-gradient(180deg,#eef0f1 0%,#d9dddf 44%,#a4adb1 58%,#68747a 100%);
}
.side-brand-image{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
object-position:center;
display:block;
filter:grayscale(100%) contrast(.93) brightness(.92);
}
.side-brand-overlay{
position:absolute;
inset:0;
background:
linear-gradient(to bottom,rgba(243,244,244,.72) 0%,rgba(243,244,244,.38) 28%,rgba(243,244,244,.08) 56%,rgba(18,22,24,.12) 100%),
linear-gradient(to right,rgba(255,255,255,.05),rgba(255,255,255,0));
pointer-events:none;
}
.side-brand-home{
position:absolute;
inset:0;
z-index:2;
width:100%;
height:100%;
border:0;
background:transparent;
color:#111;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:42px;
text-align:center;
cursor:url("../cursor/cursor-pointer.png") 14 14,pointer !important;
}
.side-brand-mark{
margin-bottom:34px;
font:28px/1 Georgia,serif;
}
.side-brand-title{
font:400 clamp(38px,4vw,58px)/1 Georgia,serif;
letter-spacing:.09em;
}
.side-brand-tagline{
margin-top:15px;
font:italic 13px/1.4 Georgia,"Times New Roman",serif;
letter-spacing:.08em;
color:#5d6467;
}
.side-brand-meta{
position:absolute;
z-index:2;
left:24px;
right:24px;
bottom:22px;
display:flex;
justify-content:space-between;
gap:16px;
font:9px/1.4 monospace;
color:rgba(255,255,255,.76);
text-shadow:0 1px 8px rgba(0,0,0,.25);
pointer-events:none;
}
.side-content{
min-height:100vh;
margin-left:var(--side-panel-w);
}
/* top navigation now belongs to the right content column */
body.sidepanel-layout .after-cover-bar{
position:sticky !important;
top:0 !important;
left:auto !important;
right:auto !important;
z-index:30;
width:100%;
max-width:none !important;
height:66px;
margin:0 !important;
padding:0 32px !important;
border:0 !important;
border-bottom:1px solid var(--line) !important;
background:rgba(242,243,243,.92) !important;
backdrop-filter:blur(12px);
}
body.sidepanel-layout .after-brand-wrap{
display:none;
}
body.sidepanel-layout .after-star{
margin-left:0 !important;
font-size:18px;
}
body.sidepanel-layout .after-nav{
margin-left:auto;
gap:25px;
}
body.sidepanel-layout .nav-theme-toggle{
margin-left:10px;
}
body.sidepanel-layout > main > .side-content > .wrap{
max-width:1320px;
padding:0 42px;
}
body.sidepanel-layout .site-page{
min-height:calc(100vh - 66px);
padding-top:72px;
padding-bottom:90px;
}
body.sidepanel-layout .section-head{
margin-bottom:42px;
}
/* footer follows the right content column naturally */
/* light mode */
body.sidepanel-layout:not(.theme-dark), body.sidepanel-layout:not(.theme-dark) .side-content{
background:#f2f3f3 !important;
}
/* dark mode */
body.sidepanel-layout.theme-dark .side-brand-panel{
border-right-color:#373a3c;
background:linear-gradient(180deg,#24282a 0%,#1e2224 46%,#171b1d 100%);
}
body.sidepanel-layout.theme-dark .side-brand-overlay{
background:
linear-gradient(to bottom,rgba(17,19,20,.28) 0%,rgba(17,19,20,.18) 42%,rgba(17,19,20,.46) 100%);
}
body.sidepanel-layout.theme-dark .side-brand-home{
color:#ece9e3;
}
body.sidepanel-layout.theme-dark .side-brand-tagline{
color:#bbb7af;
}
body.sidepanel-layout.theme-dark .after-cover-bar{
background:rgba(23,24,25,.93) !important;
}
/* mobile/tablet: panel becomes a shallow visual banner above the site */
@media (max-width:900px){
:root{
--side-panel-w:100%;
}
body.sidepanel-layout{
overflow-x:hidden !important;
}
.side-brand-panel{
position:relative;
inset:auto;
width:100%;
height:210px;
min-height:210px;
border-right:0;
border-bottom:1px solid var(--line);
}
.side-brand-image{
object-position:center 55%;
}
.side-brand-home{
padding:24px;
}
.side-brand-mark{
margin-bottom:15px;
font-size:18px;
}
.side-brand-title{
font-size:34px;
}
.side-brand-tagline{
margin-top:10px;
font-size:11px;
}
.side-brand-meta{
display:none;
}
.side-content{
margin-left:0;
}
body.sidepanel-layout .after-cover-bar{
min-height:58px;
height:58px;
padding:0 14px !important;
}
body.sidepanel-layout .after-brand-wrap{
display:flex;
max-width:calc(100% - 112px);
}
body.sidepanel-layout .after-brand{
font-size:11px;
}
body.sidepanel-layout .after-brand-tagline{
max-width:88px;
font-size:7px;
}
body.sidepanel-layout .after-star{
margin-left:8px !important;
font-size:16px;
}
body.sidepanel-layout > main > .side-content > .wrap, body.sidepanel-layout footer .wrap{
padding-left:14px;
padding-right:14px;
}
body.sidepanel-layout .site-page{
min-height:auto;
padding-top:58px;
padding-bottom:74px;
}
body.sidepanel-layout .section-head{
margin-bottom:28px;
}
}
@media (max-width:520px){
.side-brand-panel{
height:184px;
min-height:184px;
}
.side-brand-title{
font-size:30px;
}
.side-brand-home{
justify-content:center;
}
body.sidepanel-layout .site-page{
padding-top:50px;
}
}
/* =========================================================
SIDE PANEL CLEANUP
- no default gradient
- uploaded image uses only the bottom 1/4 of the panel
- remaining 3/4 follows the current theme color
- footer aligned to the right content column
========================================================= */
/* Solid panel background only */
body.sidepanel-layout .side-brand-panel{
background:#f2f3f3 !important;
}
/* Remove the old overlay/gradient completely */
body.sidepanel-layout .side-brand-overlay{
display:none !important;
}
/* Uploaded image occupies only the bottom quarter.
object-fit handles any source image size automatically. */
body.sidepanel-layout .side-brand-image{
top:auto !important;
bottom:0 !important;
left:0 !important;
right:0 !important;
width:100% !important;
height:25% !important;
object-fit:cover !important;
object-position:center center !important;
filter:grayscale(100%) contrast(.96) brightness(.96) !important;
}
/* Keep logo readable on the theme-colored area */
body.sidepanel-layout .side-brand-home{
justify-content:center;
}
/* Meta remains on top of image, but with slightly stronger readability */
body.sidepanel-layout .side-brand-meta{
color:rgba(255,255,255,.88) !important;
text-shadow:0 1px 8px rgba(0,0,0,.38);
}
/* Dark mode: solid dark theme color + darker image treatment */
body.sidepanel-layout.theme-dark .side-brand-panel{
background:#171819 !important;
}
body.sidepanel-layout.theme-dark .side-brand-image{
filter:grayscale(100%) contrast(.96) brightness(.58) !important;
}
/* Footer was previously starting underneath the fixed left panel.
Align it with the right content column instead. */
body.sidepanel-layout footer{
margin-left:var(--side-panel-w) !important;
width:calc(100% - var(--side-panel-w));
}
body.sidepanel-layout footer .wrap{
max-width:1320px;
margin-left:auto;
margin-right:auto;
padding-left:42px;
padding-right:42px;
}
@media (max-width:900px){
/* On mobile the brand panel becomes a short top banner.
Keep the image as its bottom quarter there as well. */
body.sidepanel-layout .side-brand-panel{
background:#f2f3f3 !important;
}
body.sidepanel-layout.theme-dark .side-brand-panel{
background:#171819 !important;
}
body.sidepanel-layout .side-brand-image{
height:25% !important;
object-position:center center !important;
}
body.sidepanel-layout footer{
margin-left:0 !important;
width:100%;
}
body.sidepanel-layout footer .wrap{
padding-left:14px;
padding-right:14px;
}
}
/* =========================================================
SIDE PANEL IMAGE SOFT FADE
- bottom 1/4 image remains
- hard top edge fades smoothly into the theme background
========================================================= */
body.sidepanel-layout .side-brand-image{
-webkit-mask-image:linear-gradient(
to bottom,
transparent 0%,
rgba(0,0,0,.08) 10%,
rgba(0,0,0,.28) 24%,
rgba(0,0,0,.62) 44%,
#000 68%,
#000 100%
) !important;
mask-image:linear-gradient(
to bottom,
transparent 0%,
rgba(0,0,0,.08) 10%,
rgba(0,0,0,.28) 24%,
rgba(0,0,0,.62) 44%,
#000 68%,
#000 100%
) !important;
-webkit-mask-repeat:no-repeat;
mask-repeat:no-repeat;
-webkit-mask-size:100% 100%;
mask-size:100% 100%;
}
/* =========================================================
FIRST LOAD ANIMATION + COLLAPSIBLE SIDE PANEL
========================================================= */
:root{
--side-panel-collapsed-w:64px;
}
/* ---------- Initial entrance ---------- */
body.site-intro-pending .side-brand-panel{
opacity:0;
transform:translateX(-18px);
}
body.site-intro-pending .side-brand-home{
opacity:0;
transform:translateY(10px);
}
body.site-intro-pending .after-cover-bar{
opacity:0;
transform:translateY(-8px);
}
body.site-intro-pending .site-page.is-active, body.site-intro-pending footer{
opacity:0;
transform:translateY(10px);
}
body.site-intro-run .side-brand-panel{
animation:aeSidePanelIntro .62s cubic-bezier(.2,.7,.2,1) both;
}
body.site-intro-run .side-brand-home{
animation:aeSideIdentityIntro .62s .18s cubic-bezier(.2,.7,.2,1) both;
}
body.site-intro-run .after-cover-bar{
animation:aeTopbarIntro .48s .26s cubic-bezier(.2,.7,.2,1) both;
}
body.site-intro-run .site-page.is-active{
animation:aeContentIntro .58s .38s cubic-bezier(.2,.7,.2,1) both;
}
body.site-intro-run footer{
animation:aeContentIntro .58s .46s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes aeSidePanelIntro{
from{opacity:0;transform:translateX(-18px)}
to{opacity:1;transform:translateX(0)}
}
@keyframes aeSideIdentityIntro{
from{opacity:0;transform:translateY(10px)}
to{opacity:1;transform:translateY(0)}
}
@keyframes aeTopbarIntro{
from{opacity:0;transform:translateY(-8px)}
to{opacity:1;transform:translateY(0)}
}
@keyframes aeContentIntro{
from{opacity:0;transform:translateY(10px)}
to{opacity:1;transform:translateY(0)}
}
/* ---------- Collapse button ---------- */
.side-panel-toggle{
position:fixed;
z-index:45;
top:50%;
left:calc(var(--side-panel-w) - 15px);
width:30px;
height:30px;
margin-top:-15px;
padding:0;
display:grid;
place-items:center;
border:1px solid var(--line);
border-radius:999px;
background:rgba(242,243,243,.94);
color:#555;
box-shadow:0 3px 12px rgba(0,0,0,.045);
cursor:url("../cursor/cursor-pointer.png") 14 14,pointer !important;
transition:
left .52s cubic-bezier(.2,.7,.2,1),
background .25s ease,
border-color .25s ease,
color .25s ease,
transform .2s ease;
}
.side-panel-toggle span{
display:block;
font:20px/1 Georgia,serif;
transform:translateY(-1px);
}
body.theme-dark .side-panel-toggle{
background:rgba(23,24,25,.94);
color:#aaa6a0;
border-color:#45484a;
}
/* ---------- Desktop collapsed state ---------- */
@media (min-width:901px){
body.sidepanel-layout .side-brand-panel, body.sidepanel-layout .side-content, body.sidepanel-layout footer{
transition:
width .52s cubic-bezier(.2,.7,.2,1),
margin-left .52s cubic-bezier(.2,.7,.2,1);
}
body.side-panel-collapsed .side-brand-panel{
width:var(--side-panel-collapsed-w) !important;
}
body.side-panel-collapsed .side-content{
margin-left:var(--side-panel-collapsed-w) !important;
}
body.side-panel-collapsed footer{
margin-left:var(--side-panel-collapsed-w) !important;
width:calc(100% - var(--side-panel-collapsed-w)) !important;
}
/* Keep only a quiet little identity rail when collapsed */
body.side-panel-collapsed .side-brand-image, body.side-panel-collapsed .side-brand-meta, body.side-panel-collapsed .side-brand-tagline, body.side-panel-collapsed .side-brand-mark{
opacity:0;
pointer-events:none;
}
body.side-panel-collapsed .side-brand-title{
writing-mode:vertical-rl;
transform:rotate(180deg);
font-size:15px;
letter-spacing:.15em;
transition:font-size .3s ease;
}
body.side-brand-panel .side-brand-image, body.side-brand-panel .side-brand-meta, body.side-brand-panel .side-brand-tagline, body.side-brand-panel .side-brand-mark{
transition:opacity .24s ease;
}
}
/* ---------- Mobile/tablet collapsed state ---------- */
@media (max-width:900px){
.side-panel-toggle{
top:195px;
left:50%;
margin-top:0;
margin-left:-15px;
transform:rotate(90deg);
transition:
top .48s cubic-bezier(.2,.7,.2,1),
background .25s ease,
border-color .25s ease,
color .25s ease;
}
body.sidepanel-layout .side-brand-panel{
transition:
height .48s cubic-bezier(.2,.7,.2,1),
min-height .48s cubic-bezier(.2,.7,.2,1),
opacity .35s ease;
}
}
@media (max-width:520px){
.side-panel-toggle{
top:169px;
}
body.side-panel-collapsed .side-panel-toggle{
top:6px;
}
}
/* Reduced motion */
@media (prefers-reduced-motion:reduce){
body.site-intro-pending .side-brand-panel, body.site-intro-pending .side-brand-home, body.site-intro-pending .after-cover-bar, body.site-intro-pending .site-page.is-active, body.site-intro-pending footer{
opacity:1 !important;
transform:none !important;
}
body.site-intro-run .side-brand-panel, body.site-intro-run .side-brand-home, body.site-intro-run .after-cover-bar, body.site-intro-run .site-page.is-active, body.site-intro-run footer{
animation:none !important;
}
.side-panel-toggle, .side-brand-panel, .side-content, footer{
transition:none !important;
}
}
/* =========================================================
SIDE PANEL TOGGLE — INSIDE PANEL / BORDERLESS
========================================================= */
.side-panel-toggle{
position:absolute !important;
z-index:6;
top:20px !important;
right:18px !important;
left:auto !important;
width:auto !important;
min-width:0 !important;
height:auto !important;
margin:0 !important;
padding:4px 6px !important;
border:0 !important;
border-radius:0 !important;
background:transparent !important;
box-shadow:none !important;
color:#4f5558 !important;
transform:none !important;
transition:opacity .18s ease,color .18s ease,transform .18s ease !important;
}
.side-panel-toggle:hover{
color:#111 !important;
transform:translateX(-1px) !important;
}
.side-panel-toggle span{
font:22px/1 Georgia,serif !important;
transform:none !important;
}
body.theme-dark .side-panel-toggle{
color:#aaa6a0 !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
}
body.theme-dark .side-panel-toggle:hover{
color:#ece9e3 !important;
}
/* collapsed desktop rail: keep toggle inside the rail */
@media (min-width:901px){
}
/* mobile/top-banner mode */
@media (max-width:900px){
}
/* =========================================================
PANEL TOGGLE POSITION FIX
- desktop: right edge center
- mobile: bottom edge center
- mobile collapsed: keep a tiny rail so toggle remains reachable
========================================================= */
/* DESKTOP — center of the panel's right edge */
@media (min-width:901px){
.side-panel-toggle{
position:absolute !important;
top:50% !important;
right:8px !important;
left:auto !important;
bottom:auto !important;
margin:0 !important;
transform:translateY(-50%) !important;
padding:5px 7px !important;
border:0 !important;
background:transparent !important;
box-shadow:none !important;
}
.side-panel-toggle:hover{
transform:translateY(-50%) translateX(-1px) !important;
}
body.side-panel-collapsed .side-panel-toggle{
top:50% !important;
right:50% !important;
left:auto !important;
transform:translate(50%,-50%) !important;
}
body.side-panel-collapsed .side-panel-toggle:hover{
transform:translate(50%,-50%) translateX(1px) !important;
}
}
/* MOBILE / TABLET — center of the panel's bottom edge */
@media (max-width:900px){
.side-panel-toggle{
position:absolute !important;
top:auto !important;
right:auto !important;
bottom:7px !important;
left:50% !important;
margin:0 !important;
transform:translateX(-50%) rotate(90deg) !important;
padding:4px 8px !important;
border:0 !important;
background:transparent !important;
box-shadow:none !important;
z-index:8 !important;
}
.side-panel-toggle:hover{
transform:translateX(-50%) rotate(90deg) scale(1.06) !important;
}
/* Don't collapse to 0px: leave a quiet 34px rail so the toggle is always visible. */
body.side-panel-collapsed .side-brand-panel{
height:34px !important;
min-height:34px !important;
opacity:1 !important;
border-bottom:1px solid var(--line) !important;
overflow:visible !important;
}
body.side-panel-collapsed .side-brand-home, body.side-panel-collapsed .side-brand-image, body.side-panel-collapsed .side-brand-overlay, body.side-panel-collapsed .side-brand-meta{
opacity:0 !important;
visibility:hidden !important;
pointer-events:none !important;
}
body.side-panel-collapsed .side-panel-toggle{
position:absolute !important;
top:auto !important;
right:auto !important;
bottom:4px !important;
left:50% !important;
transform:translateX(-50%) rotate(90deg) !important;
opacity:1 !important;
visibility:visible !important;
pointer-events:auto !important;
}
body.side-panel-collapsed .side-panel-toggle:hover{
transform:translateX(-50%) rotate(90deg) scale(1.06) !important;
}
}
@media (max-width:520px){
body.side-panel-collapsed .side-brand-panel{
height:32px !important;
min-height:32px !important;
}
body.side-panel-collapsed .side-panel-toggle{
bottom:3px !important;
}
}
/* =========================================================
DESKTOP COLLAPSED RAIL — TITLE / TOGGLE SEPARATION
Keep the toggle at the edge center, move the vertical title lower.
========================================================= */
@media (min-width:901px){
body.side-panel-collapsed .side-brand-home{
justify-content:flex-end !important;
padding:0 0 72px !important;
}
}
/* =========================================================
DIARY SECRET ENTRIES
========================================================= */
.diary-list-row.is-secret .diary-list-main strong::before{
content:"";
}
.diary-list-row.is-secret .diary-list-type{
letter-spacing:.12em;
}
.diary-secret-form{
max-width:520px;
margin:56px auto 80px;
padding:34px;
border:1px solid var(--line);
background:rgba(255,255,255,.14);
}
.diary-secret-kicker{
margin-bottom:12px;
font-size:9px;
letter-spacing:.16em;
color:var(--gray);
}
.diary-secret-copy{
margin:0 0 22px;
font-size:12px;
line-height:1.8;
color:#666;
}
.diary-secret-input-row{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:10px;
}
.diary-secret-input-row input{
min-width:0;
border:0;
border-bottom:1px solid var(--line);
background:transparent;
padding:10px 4px;
outline:none;
font-size:12px;
color:inherit;
}
.diary-secret-input-row button{
border:1px solid #111;
background:#111;
color:#fff;
padding:9px 14px;
font-size:9px;
letter-spacing:.12em;
}
.diary-secret-content[hidden]{
display:none !important;
}
.diary-admin-secret-note{
display:inline-block;
margin:0 0 22px;
padding-bottom:4px;
border-bottom:1px solid currentColor;
font-size:9px;
letter-spacing:.12em;
color:#777;
}
.diary-secret-admin{
margin-top:4px;
padding:14px 16px;
border:1px solid var(--line);
}
.diary-secret-check{
display:flex !important;
align-items:center;
gap:8px;
margin:0 !important;
font-size:10px !important;
color:#555;
}
.diary-secret-check input{
width:auto !important;
margin:0 !important;
}
.diary-secret-password{
display:block;
margin-top:14px !important;
}
body.theme-dark .diary-secret-form{
background:rgba(255,255,255,.02);
}
body.theme-dark .diary-secret-copy{
color:#beb9b2;
}
body.theme-dark .diary-secret-input-row button{
border-color:#ece9e3;
background:#ece9e3;
color:#111;
}
body.theme-dark .diary-secret-check{
color:#c7c2ba;
}
@media (max-width:800px){
.diary-secret-form{
margin:38px 0 60px;
padding:22px 18px;
}
.diary-secret-input-row{
grid-template-columns:1fr;
}
.diary-secret-input-row button{
width:max-content;
}
}
/* =========================================================
FINAL POLISH — PRIVATE DIARY / LIGHTBOX / BACKUP / MOBILE
========================================================= */
/* Secret entries: quieter, less "system UI" feeling */
.diary-list-row.is-secret .diary-list-open{
opacity:.72;
}
/* Photos become inspectable */
.diary-detail-photo, .collection-photo, .aeon-detail-photo{
cursor:url("../cursor/cursor-pointer.png") 14 14,zoom-in !important;
}
/* Lightbox */
.ae-lightbox[hidden]{display:none!important}
.ae-lightbox{
position:fixed;
inset:0;
z-index:9999;
display:grid;
place-items:center;
padding:42px;
background:rgba(242,243,243,.92);
backdrop-filter:blur(10px);
animation:aeLightboxIn .22s ease both;
cursor:url("../cursor/cursor-pointer.png") 14 14,zoom-out !important;
}
.ae-lightbox-image{
display:block;
max-width:min(92vw,1400px);
max-height:88vh;
object-fit:contain;
box-shadow:0 18px 60px rgba(0,0,0,.12);
cursor:url("../cursor/cursor-default.png") 14 14,default !important;
}
.ae-lightbox-close{
position:fixed;
top:20px;
right:24px;
z-index:2;
border:0;
background:transparent;
color:#555;
font:300 28px/1 Georgia,serif;
padding:5px;
}
body.lightbox-open{
overflow:hidden!important;
}
body.theme-dark .ae-lightbox{
background:rgba(23,24,25,.92);
}
body.theme-dark .ae-lightbox-close{
color:#d5d0c8;
}
@keyframes aeLightboxIn{
from{opacity:0}
to{opacity:1}
}
/* Backup admin note */
.admin-backup-copy{
max-width:760px;
margin:0;
font-size:10px;
line-height:1.9;
color:#666;
}
/* Final mobile pass */
@media (max-width:800px){
.ae-lightbox{
padding:22px 14px;
}
.ae-lightbox-image{
max-width:96vw;
max-height:84vh;
}
.ae-lightbox-close{
top:10px;
right:12px;
}
.after-nav.is-open{
max-height:calc(100vh - 64px);
overflow-y:auto;
overscroll-behavior:contain;
}
.after-nav.is-open .bgm-control{
width:100%;
flex-wrap:wrap;
}
.after-nav.is-open .bgm-volume{
max-width:100%;
}
.guest-form, .diary-secret-form, .about-card{
width:100%;
max-width:100%;
}
}
@media (prefers-reduced-motion:reduce){
.ae-lightbox{
animation:none!important;
}
}
/* =========================================================
PRIVATE LABEL TYPOGRAPHY FIX
Keep the diary title normal; fade only the "private" label.
========================================================= */
/* the private suffix is plain text inside , so soften it
by reducing the whole strong color only where the suffix is appended,
then restore the title color via text-shadow-free inherit handling */
/* use the existing meta/type label as the subtle private indicator */
.diary-list-row.is-secret .diary-list-type{
opacity:.48 !important;
color:var(--gray) !important;
font-style:normal !important;
text-transform:lowercase;
}
/* =========================================================
PRIVATE LABEL — precise fade
========================================================= */
.diary-list-row.is-secret .diary-list-main strong{
font-style:normal !important;
color:inherit !important;
}
.diary-private-label{
color:var(--gray) !important;
opacity:.42 !important;
font-style:normal !important;
font-weight:400 !important;
font-family:inherit !important;
}
body.theme-dark .diary-private-label{
color:#aaa6a0 !important;
opacity:.48 !important;
}
/* =========================================================
MULTI IMAGE — DIARY + AEON
========================================================= */
.diary-detail-gallery, .aeon-detail-gallery{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;
margin:0 0 38px;
}
.diary-detail-gallery .diary-detail-photo-wrap, .aeon-detail-gallery .aeon-detail-photo-wrap{
width:100%;
height:100%;
margin:0;
min-height:0;
background:var(--light);
border:1px solid var(--line);
overflow:hidden;
display:grid;
place-items:center;
}
.diary-detail-gallery .diary-detail-photo, .aeon-detail-gallery .aeon-detail-photo{
display:block;
width:100%;
height:100%;
min-height:260px;
max-height:640px;
object-fit:cover;
}
.diary-detail-gallery.image-count-1 .diary-detail-photo, .aeon-detail-gallery.image-count-1 .aeon-detail-photo{
height:auto;
max-height:78vh;
object-fit:contain;
}
.collection-photo-wrap{
position:relative;
}
.collection-photo-count{
position:absolute;
right:8px;
bottom:8px;
padding:3px 6px;
background:rgba(242,243,243,.88);
border:1px solid rgba(17,17,17,.12);
font:9px/1 monospace;
color:#555;
}
body.theme-dark .collection-photo-count{
background:rgba(23,24,25,.86);
border-color:rgba(255,255,255,.12);
color:#ccc8c1;
}
/* Admin image management */
.admin-image-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
gap:10px;
margin-top:10px;
}
.admin-image-item{
display:block !important;
margin:0 !important;
padding:8px;
border:1px solid var(--line);
background:rgba(255,255,255,.16);
}
.admin-image-item img{
display:block;
width:100%;
aspect-ratio:1/1;
object-fit:cover;
margin-bottom:8px;
}
.admin-image-item span{
display:flex;
align-items:center;
gap:6px;
font-size:9px;
color:#777;
}
.admin-image-item input{
width:auto !important;
margin:0 !important;
}
.admin-aeon-preview{
position:relative;
}
.admin-aeon-preview em{
position:absolute;
right:3px;
bottom:3px;
padding:2px 4px;
background:rgba(255,255,255,.9);
font:8px/1 monospace;
font-style:normal;
}
@media (max-width:800px){
.diary-detail-gallery, .aeon-detail-gallery{
grid-template-columns:1fr;
gap:10px;
}
.diary-detail-gallery .diary-detail-photo, .aeon-detail-gallery .aeon-detail-photo{
min-height:0;
height:auto;
max-height:none;
object-fit:contain;
}
.admin-image-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
/* =========================================================
SEPARATE SLIDER BLOCK — independent from gallery images
========================================================= */
.ae-image-slider{
position:relative;
width:100%;
margin:32px 0 38px;
user-select:none;
}
.ae-slider-viewport{
width:100%;
overflow:hidden;
border:1px solid var(--line);
background:var(--light);
}
.ae-slider-track{
display:flex;
width:100%;
transform:translate3d(0,0,0);
transition:transform .48s cubic-bezier(.2,.7,.2,1);
will-change:transform;
}
.ae-slider-slide{
flex:0 0 100%;
width:100%;
margin:0 !important;
border:0 !important;
display:grid !important;
place-items:center;
background:var(--light);
}
.ae-slider-slide .diary-detail-photo, .ae-slider-slide .aeon-detail-photo{
display:block;
width:100%;
height:min(68vh,720px);
min-height:360px;
object-fit:contain;
background:var(--light);
}
.ae-slider-arrow{
position:absolute;
z-index:4;
top:calc(50% - 22px);
width:34px;
height:44px;
padding:0;
border:0;
background:rgba(242,243,243,.72);
color:#555;
font:28px/1 Georgia,serif;
display:grid;
place-items:center;
backdrop-filter:blur(6px);
opacity:.72;
}
.ae-slider-prev{left:10px}
.ae-slider-next{right:10px}
.ae-slider-footer{
min-height:34px;
display:flex;
align-items:center;
justify-content:center;
gap:14px;
padding-top:10px;
}
.ae-slider-dots{
display:flex;
align-items:center;
justify-content:center;
gap:7px;
}
.ae-slider-dot{
width:5px;
min-width:5px;
height:5px;
padding:0;
border:0;
border-radius:50%;
background:#b7b9ba;
opacity:.55;
}
.ae-slider-dot.active{
background:#333;
opacity:1;
transform:scale(1.35);
}
.ae-slider-count{
min-width:34px;
font:9px/1 monospace;
color:#888;
}
body.theme-dark .ae-slider-arrow{
background:rgba(23,24,25,.66);
color:#aaa6a0;
}
body.theme-dark .ae-slider-dot.active{
background:#ece9e3;
}
@media (max-width:800px){
.ae-slider-slide .diary-detail-photo, .ae-slider-slide .aeon-detail-photo{
height:auto;
min-height:0;
max-height:72vh;
}
}
/* Separate image groups clearly in admin */
.admin-field.full > span:first-child{
letter-spacing:.08em;
}
/* =========================================================
TODAY'S WAVE
The footer wave gets a new deterministic shape each day.
========================================================= */
.today-wave{
position:relative;
height:92px;
margin-top:42px;
overflow:hidden;
}
.today-wave-svg{
display:block;
width:100%;
height:82px;
overflow:visible;
}
.today-wave-path{
fill:none;
stroke:#8e9294;
stroke-width:1;
vector-effect:non-scaling-stroke;
opacity:.78;
transform-origin:center;
}
.today-wave-label{
position:absolute;
right:0;
bottom:0;
font:8px/1 monospace;
letter-spacing:.12em;
color:#a0a3a4;
opacity:.58;
}
body.theme-dark .today-wave-label{
color:#77736d;
}
@keyframes todayWaveDriftA{
from{transform:translate3d(-3px,0,0)}
to{transform:translate3d(3px,-2px,0)}
}
@keyframes todayWaveDriftB{
from{transform:translate3d(2px,1px,0)}
to{transform:translate3d(-4px,-1px,0)}
}
/* =========================================================
ADMIN FIRST-ENTRY ANIMATION
========================================================= */
.admin-body.admin-intro .admin-top, .admin-body.admin-intro .admin-panel{
opacity:0;
transform:translateY(10px);
}
.admin-body.admin-intro .admin-top{
animation:adminIntroTop .52s .05s cubic-bezier(.2,.7,.2,1) forwards;
}
.admin-body.admin-intro .admin-panel{
animation:adminIntroPanel .58s cubic-bezier(.2,.7,.2,1) forwards;
}
.admin-body.admin-intro .admin-panel:nth-of-type(1){animation-delay:.15s}
.admin-body.admin-intro .admin-panel:nth-of-type(2){animation-delay:.21s}
.admin-body.admin-intro .admin-panel:nth-of-type(3){animation-delay:.27s}
.admin-body.admin-intro .admin-panel:nth-of-type(4){animation-delay:.33s}
.admin-body.admin-intro .admin-panel:nth-of-type(n/**/+5){animation-delay:.39s}
@keyframes adminIntroTop{
from{opacity:0;transform:translateY(-8px)}
to{opacity:1;transform:translateY(0)}
}
@keyframes adminIntroPanel{
from{opacity:0;transform:translateY(10px)}
to{opacity:1;transform:translateY(0)}
}
@media (max-width:800px){
.today-wave-label{
font-size:8px;
}
}
@media (prefers-reduced-motion:reduce){
.admin-body.admin-intro .admin-top, .admin-body.admin-intro .admin-panel{
opacity:1!important;
transform:none!important;
animation:none!important;
}
}
/* =========================================================
TODAY'S WAVE — MOTION BOOST
More visible, still calm.
========================================================= */
.today-wave-path-a{
stroke-dasharray:18 8;
animation:
todayWaveDriftAVisible 6.8s ease-in-out infinite alternate,
todayWaveDash 18s linear infinite;
}
.today-wave-path-b{
stroke-dasharray:10 10;
animation:
todayWaveDriftBVisible 8.2s ease-in-out infinite alternate,
todayWaveDashReverse 22s linear infinite;
}
@keyframes todayWaveDriftAVisible{
0%{
transform:translate3d(-8px,3px,0) scaleY(.92);
}
50%{
transform:translate3d(3px,-5px,0) scaleY(1.08);
}
100%{
transform:translate3d(10px,2px,0) scaleY(.98);
}
}
@keyframes todayWaveDriftBVisible{
0%{
transform:translate3d(7px,-2px,0) scaleY(1.04);
}
50%{
transform:translate3d(-4px,5px,0) scaleY(.9);
}
100%{
transform:translate3d(-10px,-3px,0) scaleY(1.07);
}
}
@keyframes todayWaveDash{
from{stroke-dashoffset:0}
to{stroke-dashoffset:-104}
}
@keyframes todayWaveDashReverse{
from{stroke-dashoffset:0}
to{stroke-dashoffset:96}
}
@media (max-width:800px){
.today-wave-path-a{
animation-duration:6s,16s;
}
.today-wave-path-b{
animation-duration:7.2s,20s;
}
}
@media (prefers-reduced-motion:reduce){
.today-wave-path-a, .today-wave-path-b{
animation:none!important;
}
}
/* =========================================================
TODAY'S WAVE — REAL WAVE MOTION FIX
Solid lines + the path itself changes shape over time.
========================================================= */
.today-wave{
height:100px;
margin-top:40px;
}
.today-wave-svg{
width:100%;
height:90px;
overflow:visible;
}
.today-wave-path{
fill:none !important;
stroke:#8f9395;
stroke-width:1 !important;
stroke-linecap:round;
stroke-linejoin:round;
stroke-dasharray:none !important;
stroke-dashoffset:0 !important;
vector-effect:non-scaling-stroke;
transform:none !important;
animation:none !important;
}
.today-wave-path-a{
opacity:.82;
}
.today-wave-path-b{
opacity:.43;
}
body.theme-dark .today-wave-path{
stroke:#77746f;
}
@media (max-width:800px){
.today-wave{
height:78px;
margin-top:32px;
}
.today-wave-svg{
height:68px;
}
}
/* =========================================================
DIARY / AEON BODY HYPERLINKS
========================================================= */
.diary-detail-body .body-hyperlink, .aeon-detail-text .body-hyperlink{
color:inherit;
text-decoration-line:underline;
text-decoration-thickness:1px;
text-underline-offset:3px;
text-decoration-color:#9ea1a2;
transition:opacity .18s ease, text-decoration-color .18s ease;
}
.diary-detail-body .body-hyperlink:hover, .aeon-detail-text .body-hyperlink:hover{
opacity:.58;
text-decoration-color:currentColor;
}
/* BODY MEDIA POSITION — [photo:N], [gallery], [slider] */
.diary-detail-body.has-inline-media, .aeon-detail-text.has-inline-media{
white-space:normal;
}
.diary-detail-body.has-inline-media .body-media-photo, .aeon-detail-text.has-inline-media .body-media-photo{
display:block;
margin:28px 0;
}
.diary-detail-body.has-inline-media .body-media-gallery, .aeon-detail-text.has-inline-media .body-media-gallery{
margin:30px 0;
}
.diary-detail-body.has-inline-media .body-media-slider, .aeon-detail-text.has-inline-media .body-media-slider{
margin:34px 0;
}
/* =========================================================
ADAPTIVE DIARY / AEON GALLERY
Different aspect ratios are normalized into a clean grid.
The original full image is still available in lightbox.
========================================================= */
.diary-detail-gallery, .aeon-detail-gallery{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;
align-items:stretch;
}
.diary-detail-gallery .diary-detail-photo-wrap, .aeon-detail-gallery .aeon-detail-photo-wrap{
width:100%;
margin:0;
overflow:hidden;
aspect-ratio:1 / 1;
}
.diary-detail-gallery .diary-detail-photo, .aeon-detail-gallery .aeon-detail-photo{
display:block;
width:100%;
height:100%;
object-fit:cover;
}
/* One photo: preserve its original ratio instead of forcing a crop. */
.diary-detail-gallery.image-count-1, .aeon-detail-gallery.image-count-1{
grid-template-columns:1fr;
}
.diary-detail-gallery.image-count-1 .diary-detail-photo-wrap, .aeon-detail-gallery.image-count-1 .aeon-detail-photo-wrap{
aspect-ratio:auto;
}
/* Odd-numbered galleries: make the final image full width.
This avoids the awkward half-empty last row. */
.diary-detail-gallery.image-count-3 > :last-child, .diary-detail-gallery.image-count-5 > :last-child, .diary-detail-gallery.image-count-7 > :last-child, .diary-detail-gallery.image-count-9 > :last-child, .diary-detail-gallery.image-count-11 > :last-child, .aeon-detail-gallery.image-count-3 > :last-child, .aeon-detail-gallery.image-count-5 > :last-child, .aeon-detail-gallery.image-count-7 > :last-child, .aeon-detail-gallery.image-count-9 > :last-child, .aeon-detail-gallery.image-count-11 > :last-child{
grid-column:1 / -1;
aspect-ratio:2 / 1;
}
/* Inline single-photo markers such as [photo:1] keep their own ratio. */
.diary-detail-body.has-inline-media > .body-media-photo, .aeon-detail-text.has-inline-media > .body-media-photo{
aspect-ratio:auto;
}
.diary-detail-body.has-inline-media > .body-media-photo .diary-detail-photo, .aeon-detail-text.has-inline-media > .body-media-photo .aeon-detail-photo{
height:auto;
object-fit:contain;
}
@media (max-width:700px){
.diary-detail-gallery, .aeon-detail-gallery{
gap:8px;
}
.diary-detail-gallery.image-count-3 > :last-child, .diary-detail-gallery.image-count-5 > :last-child, .diary-detail-gallery.image-count-7 > :last-child, .diary-detail-gallery.image-count-9 > :last-child, .diary-detail-gallery.image-count-11 > :last-child, .aeon-detail-gallery.image-count-3 > :last-child, .aeon-detail-gallery.image-count-5 > :last-child, .aeon-detail-gallery.image-count-7 > :last-child, .aeon-detail-gallery.image-count-9 > :last-child, .aeon-detail-gallery.image-count-11 > :last-child{
aspect-ratio:1.55 / 1;
}
}
/* =========================================================
IMAGE SAVE / DRAG GUARD
========================================================= */
img{
-webkit-user-drag:none;
user-drag:none;
-webkit-touch-callout:none;
user-select:none;
}
/* DIARY PINNED */
/* DIARY PIN SYMBOL — quiet title-side mark */
.diary-pin-symbol{
display:inline-block;
margin-left:4px;
font-size:9px;
line-height:1;
vertical-align:.08em;
color:#8f9294;
opacity:.72;
font-style:normal;
}
body.theme-dark .diary-pin-symbol{
color:#85817b;
opacity:.78;
}
/* Old textual pin labels are no longer shown on the public DIARY. */
/* =========================================================
TODAY'S WAVE — TOUCH + WASHED-UP FRAGMENTS
========================================================= */
.today-wave{
touch-action:pan-y;
}
.today-wave-fragment{
--frag-x:34px;
--frag-y:0px;
--frag-rot:0deg;
--frag-duration:6s;
position:absolute;
z-index:2;
pointer-events:none;
user-select:none;
color:#898d8f;
font:10px/1 Georgia,serif;
opacity:0;
transform:translate3d(0,0,0) rotate(0deg);
animation:todayWaveFragment var(--frag-duration) cubic-bezier(.2,.62,.26,1) forwards;
}
body.theme-dark .today-wave-fragment{
color:#77736d;
}
@keyframes todayWaveFragment{
0%{
opacity:0;
transform:translate3d(0,5px,0) rotate(0deg);
}
12%{opacity:.58}
68%{opacity:.48}
100%{
opacity:0;
transform:translate3d(var(--frag-x),var(--frag-y),0) rotate(var(--frag-rot));
}
}
@media (max-width:800px){
.today-wave-fragment{font-size:9px}
}
@media (prefers-reduced-motion:reduce){
.today-wave-fragment{display:none!important}
}
/* =========================================================
ADMIN PHOTO CAPTION INPUTS
========================================================= */
.new-photo-caption-list{
display:grid;
gap:8px;
margin-top:10px;
}
.new-photo-caption-row{
display:grid;
gap:5px;
}
.new-photo-caption-row > span{
font-size:9px;
color:#888;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.new-photo-caption-row textarea, .admin-photo-caption-input{
width:100%;
min-height:58px;
resize:vertical;
box-sizing:border-box;
font:11px/1.55 inherit;
}
.admin-image-item .admin-photo-caption-input{
margin-top:7px;
}
/* =========================================================
PHOTO CAPTIONS — PLAIN TEXT BELOW IMAGE
========================================================= */
.photo-caption{
position:static;
display:block;
width:100%;
max-width:none;
box-sizing:border-box;
margin:7px 0 0;
padding:0;
color:#777b7d;
background:none;
border:0;
border-radius:0;
box-shadow:none;
text-shadow:none;
font-size:10px;
line-height:1.55;
letter-spacing:.01em;
text-align:center;
pointer-events:none;
word-break:keep-all;
overflow-wrap:anywhere;
}
body.theme-dark .photo-caption{
color:#8a8782;
}
.ae-lightbox-figure{
display:flex;
flex-direction:column;
align-items:center;
}
.ae-lightbox-caption{
position:static;
display:block;
width:100%;
max-width:none;
box-sizing:border-box;
margin:8px 0 0;
padding:0;
color:#111;
background:none;
border:0;
border-radius:0;
box-shadow:none;
text-shadow:none;
font-size:10px;
line-height:1.55;
text-align:center;
pointer-events:none;
}
@media (max-width:800px){
.photo-caption{
margin-top:6px;
font-size:9px;
}
.ae-lightbox-caption{
margin-top:7px;
font-size:9px;
}
}
/* =========================================================
GALLERY CAPTION HEIGHT FIX
Keep the crop on the image itself, not on figure+caption.
========================================================= */
.diary-detail-gallery, .aeon-detail-gallery{
align-items:start !important;
}
.diary-detail-gallery .diary-detail-photo-wrap, .aeon-detail-gallery .aeon-detail-photo-wrap{
aspect-ratio:auto !important;
height:auto !important;
overflow:visible !important;
display:flex;
flex-direction:column;
}
.diary-detail-gallery .diary-detail-photo, .aeon-detail-gallery .aeon-detail-photo{
width:100% !important;
height:auto !important;
aspect-ratio:1 / 1;
object-fit:cover !important;
flex:none;
}
/* Odd final tile keeps the wide crop, but only the IMAGE gets that ratio. */
.diary-detail-gallery.image-count-3 > :last-child .diary-detail-photo, .diary-detail-gallery.image-count-5 > :last-child .diary-detail-photo, .diary-detail-gallery.image-count-7 > :last-child .diary-detail-photo, .diary-detail-gallery.image-count-9 > :last-child .diary-detail-photo, .diary-detail-gallery.image-count-11 > :last-child .diary-detail-photo, .aeon-detail-gallery.image-count-3 > :last-child .aeon-detail-photo, .aeon-detail-gallery.image-count-5 > :last-child .aeon-detail-photo, .aeon-detail-gallery.image-count-7 > :last-child .aeon-detail-photo, .aeon-detail-gallery.image-count-9 > :last-child .aeon-detail-photo, .aeon-detail-gallery.image-count-11 > :last-child .aeon-detail-photo{
aspect-ratio:2 / 1;
}
/* One image stays natural, exactly like before. */
.diary-detail-gallery.image-count-1 .diary-detail-photo, .aeon-detail-gallery.image-count-1 .aeon-detail-photo{
aspect-ratio:auto !important;
height:auto !important;
object-fit:contain !important;
}
/* Caption only occupies its actual text height. */
.diary-detail-gallery .photo-caption, .aeon-detail-gallery .photo-caption{
flex:none;
min-height:0 !important;
height:auto !important;
}
@media (max-width:700px){
.diary-detail-gallery.image-count-3 > :last-child .diary-detail-photo, .diary-detail-gallery.image-count-5 > :last-child .diary-detail-photo, .diary-detail-gallery.image-count-7 > :last-child .diary-detail-photo, .diary-detail-gallery.image-count-9 > :last-child .diary-detail-photo, .diary-detail-gallery.image-count-11 > :last-child .diary-detail-photo, .aeon-detail-gallery.image-count-3 > :last-child .aeon-detail-photo, .aeon-detail-gallery.image-count-5 > :last-child .aeon-detail-photo, .aeon-detail-gallery.image-count-7 > :last-child .aeon-detail-photo, .aeon-detail-gallery.image-count-9 > :last-child .aeon-detail-photo, .aeon-detail-gallery.image-count-11 > :last-child .aeon-detail-photo{
aspect-ratio:1.55 / 1;
}
}
/* =========================================================
SIDE PANEL — LOCAL TIME MESSAGE
========================================================= */
.side-time-message{
margin-top:25px;
min-height:1em;
font:9px/1.4 monospace;
letter-spacing:.12em;
text-transform:lowercase;
color:#777d80;
opacity:.72;
pointer-events:none;
transition:opacity .25s ease;
}
body.theme-dark .side-time-message{
color:#88847e;
}
@media (max-width:800px){
.side-time-message{
margin-top:12px;
font-size:7px;
}
}
/* =========================================================
ADMIN — KEEP ME LOGGED IN
========================================================= */
.admin-remember{
display:inline-flex;
align-items:center;
gap:7px;
margin-top:13px;
font-size:9px;
line-height:1;
letter-spacing:.08em;
color:#777;
cursor:pointer;
user-select:none;
}
.admin-remember input{
width:12px;
height:12px;
margin:0;
accent-color:#111;
}
body.theme-dark .admin-remember{
color:#99958f;
}
/* AEON thumbnail focus */
.admin-field select[name="thumb_position"] + .admin-inline-note{
display:block;
margin-top:6px;
}
/* =========================================================
AEON THUMBNAIL FOCUS — ANCHORED CROP ENGINE
Replaces the previous object-position experiments.
========================================================= */
/* Public card and admin preview are both crop windows. */
.collection-photo-wrap, .admin-aeon-preview{
position:relative !important;
overflow:hidden !important;
}
/* Restore the original admin preview size/layout. */
.admin-aeon-preview{
width:78px !important;
height:58px !important;
flex:0 0 78px !important;
}
@media (max-width:800px){
.admin-aeon-preview{
width:58px !important;
height:46px !important;
flex-basis:58px !important;
}
}
/* Give the image real crop room, then move the layer itself. */
.collection-photo-wrap > .ae-thumb-image, .admin-aeon-preview > .ae-thumb-image{
position:absolute !important;
width:130% !important;
height:130% !important;
max-width:none !important;
max-height:none !important;
object-fit:cover !important;
margin:0 !important;
transform:none !important;
}
/* TOP LEFT */
.ae-thumb-image[data-thumb-position="left top"]{
left:0 !important;
top:0 !important;
right:auto !important;
bottom:auto !important;
}
/* TOP */
.ae-thumb-image[data-thumb-position="center top"]{
left:50% !important;
top:0 !important;
right:auto !important;
bottom:auto !important;
transform:translateX(-50%) !important;
}
/* TOP RIGHT */
.ae-thumb-image[data-thumb-position="right top"]{
left:auto !important;
top:0 !important;
right:0 !important;
bottom:auto !important;
}
/* LEFT */
.ae-thumb-image[data-thumb-position="left center"]{
left:0 !important;
top:50% !important;
right:auto !important;
bottom:auto !important;
transform:translateY(-50%) !important;
}
/* CENTER */
.ae-thumb-image[data-thumb-position="center center"]{
left:50% !important;
top:50% !important;
right:auto !important;
bottom:auto !important;
transform:translate(-50%,-50%) !important;
}
/* RIGHT */
.ae-thumb-image[data-thumb-position="right center"]{
left:auto !important;
top:50% !important;
right:0 !important;
bottom:auto !important;
transform:translateY(-50%) !important;
}
/* BOTTOM LEFT */
.ae-thumb-image[data-thumb-position="left bottom"]{
left:0 !important;
top:auto !important;
right:auto !important;
bottom:0 !important;
}
/* BOTTOM */
.ae-thumb-image[data-thumb-position="center bottom"]{
left:50% !important;
top:auto !important;
right:auto !important;
bottom:0 !important;
transform:translateX(-50%) !important;
}
/* BOTTOM RIGHT */
.ae-thumb-image[data-thumb-position="right bottom"]{
left:auto !important;
top:auto !important;
right:0 !important;
bottom:0 !important;
}
/* Keep the image counter above the cropped image. */
.collection-photo-count, .admin-aeon-preview em{
z-index:2 !important;
}
/* =========================================================
FLOATING ARCHIVE CALENDAR
========================================================= */
.archive-calendar-widget{
position:fixed;
right:18px;
bottom:18px;
z-index:35;
width:252px;
pointer-events:none;
}
.archive-calendar-panel{
pointer-events:auto;
border:1px solid var(--line);
background:rgba(246,247,247,.94);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
padding:15px 15px 13px;
box-shadow:0 10px 30px rgba(0,0,0,.035);
}
body.theme-dark .archive-calendar-panel{background:rgba(20,22,23,.94);}
.archive-calendar-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:13px;}
.archive-calendar-kicker{display:block;margin-bottom:5px;font:7px/1 monospace;letter-spacing:.16em;color:var(--gray);}
.archive-calendar-head strong{display:block;font:400 13px/1.1 Georgia,serif;letter-spacing:.02em;}
.archive-calendar-nav{display:flex;gap:4px;}
.archive-calendar-nav button{
width:22px;height:22px;padding:0;border:1px solid var(--line);background:transparent;color:inherit;cursor:pointer;font:13px/1 Georgia,serif;
}
.archive-calendar-weekdays, .archive-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);}
.archive-calendar-weekdays{margin-bottom:4px;}
.archive-calendar-weekdays span{text-align:center;font:6px/1 monospace;letter-spacing:.05em;color:#929292;}
.archive-calendar-day{
position:relative;aspect-ratio:1/1;border:0;background:transparent;color:inherit;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;font:8px/1 monospace;
}
.archive-calendar-day.is-empty{pointer-events:none;}
.archive-calendar-day.is-today{
background:rgba(117,122,126,.10);
border-radius:2px;
}
body.theme-dark .archive-calendar-day.is-today{
background:rgba(255,255,255,.075);
}
.archive-calendar-day.is-selected::before{
content:"";
position:absolute;
inset:4px;
border:1px solid currentColor;
border-radius:50%;
opacity:.54;
pointer-events:none;
}
.archive-calendar-marks{
position:absolute;left:50%;bottom:1px;transform:translateX(-50%);height:6px;display:flex;align-items:center;gap:2px;font-style:normal;
}
.archive-calendar-marks .diary-mark{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.62;}
.archive-calendar-marks .aeon-mark{font:6px/1 Georgia,serif;opacity:.72;}
.archive-calendar-legend{
display:flex;gap:12px;align-items:center;margin-top:8px;padding-top:8px;border-top:1px solid var(--line);color:var(--gray);font:6px/1 monospace;letter-spacing:.08em;
}
.archive-calendar-legend span{display:flex;align-items:center;gap:4px;}
.archive-calendar-legend .diary-dot{width:3px;height:3px;border-radius:50%;background:currentColor;}
.archive-calendar-legend .aeon-dot{font:6px/1 Georgia,serif;font-style:normal;}
.archive-calendar-events-toggle{
margin-left:auto;
width:18px;
height:18px;
padding:0;
border:0;
background:transparent;
color:inherit;
font:10px/1 monospace;
cursor:pointer;
opacity:.72;
}
.archive-calendar-events-toggle:hover{opacity:1;}
.archive-calendar-events-toggle[hidden]{display:none;}
.archive-calendar-events{margin-top:10px;padding-top:9px;border-top:1px solid var(--line);}
.archive-calendar-event-date{margin-bottom:6px;color:var(--gray);font:6px/1 monospace;letter-spacing:.1em;}
.archive-calendar-event{
width:100%;display:grid;grid-template-columns:10px 1fr auto;gap:5px;align-items:center;padding:5px 0;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer;
}
.archive-calendar-event span{font:7px/1 Georgia,serif;}
.archive-calendar-event strong{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:400 8px/1.3 sans-serif;}
.archive-calendar-event em{color:var(--gray);font:6px/1 monospace;letter-spacing:.06em;font-style:normal;}
.archive-calendar-mobile-toggle{display:none;}
@media (max-width:800px){
.archive-calendar-widget{right:12px;bottom:12px;width:min(244px,calc(100vw - 24px));}
.archive-calendar-panel{display:none;}
.archive-calendar-widget.is-open .archive-calendar-panel{display:block;}
.archive-calendar-mobile-toggle{
pointer-events:auto;display:block;margin-left:auto;width:38px;height:38px;border:1px solid var(--line);
background:rgba(246,247,247,.95);color:inherit;font:7px/1 monospace;letter-spacing:.08em;cursor:pointer;
}
body.theme-dark .archive-calendar-mobile-toggle{background:rgba(20,22,23,.95);}
.archive-calendar-widget.is-open .archive-calendar-mobile-toggle{margin-bottom:5px;}
}
/* =========================================================
ARCHIVE CALENDAR — DESKTOP SIZE + FIRST LOAD ENTRANCE
========================================================= */
/* Slightly larger on desktop */
@media (min-width:801px){
.archive-calendar-widget{
width:286px !important;
right:22px !important;
bottom:22px !important;
}
.archive-calendar-panel{
padding:18px 18px 15px !important;
}
.archive-calendar-kicker{
font-size:8px !important;
}
.archive-calendar-head strong{
font-size:15px !important;
}
.archive-calendar-nav button{
width:24px !important;
height:24px !important;
font-size:14px !important;
}
.archive-calendar-event strong{
font-size:9px !important;
}
}
/* Make the floating widget participate in the site's first-load animation. */
body.site-intro-pending .archive-calendar-widget{
opacity:0;
transform:translateY(12px);
}
body.site-intro-run .archive-calendar-widget{
animation:aeCalendarIntro .58s .56s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes aeCalendarIntro{
from{
opacity:0;
transform:translateY(12px);
}
to{
opacity:1;
transform:translateY(0);
}
}
@media (prefers-reduced-motion:reduce){
body.site-intro-pending .archive-calendar-widget{
opacity:1 !important;
transform:none !important;
}
body.site-intro-run .archive-calendar-widget{
animation:none !important;
}
}
/* =========================================================
ARCHIVE CALENDAR — FIXED + COLLAPSIBLE + FOOTER AVOIDANCE
========================================================= */
.archive-calendar-widget{
--calendar-footer-lift:0px;
}
@media (min-width:801px){
.archive-calendar-widget{
right:22px !important;
bottom:calc(22px + var(--calendar-footer-lift)) !important;
left:auto !important;
top:auto !important;
transform:none !important;
transition:bottom .28s cubic-bezier(.2,.7,.2,1), width .24s ease !important;
}
.archive-calendar-desktop-tab{
display:none;
}
.archive-calendar-collapse{
font-size:13px !important;
}
/* Collapsed state: only a small vertical tab remains. */
.archive-calendar-widget.is-collapsed{
width:auto !important;
}
.archive-calendar-widget.is-collapsed .archive-calendar-panel{
display:none !important;
}
.archive-calendar-widget.is-collapsed .archive-calendar-desktop-tab{
pointer-events:auto;
display:block;
width:34px;
height:88px;
padding:0;
border:1px solid var(--line);
background:rgba(246,247,247,.95);
color:inherit;
font:7px/1 monospace;
letter-spacing:.10em;
writing-mode:vertical-rl;
text-orientation:mixed;
cursor:pointer;
}
body.theme-dark .archive-calendar-widget.is-collapsed .archive-calendar-desktop-tab{
background:rgba(20,22,23,.95);
}
body.site-intro-pending .archive-calendar-widget{
opacity:0;
transform:translateY(12px) !important;
}
body.site-intro-run .archive-calendar-widget{
animation:aeCalendarIntro .58s .56s cubic-bezier(.2,.7,.2,1) both;
}
}
@media (max-width:800px){
.archive-calendar-desktop-tab, .archive-calendar-collapse{
display:none !important;
}
}
/* =========================================================
ARCHIVE CALENDAR — READABILITY TUNE
========================================================= */
@media (min-width:801px){
.archive-calendar-weekdays span{
font-size:8px !important;
}
.archive-calendar-day{
font-size:11px !important;
}
.archive-calendar-marks{
bottom:0 !important;
height:8px !important;
gap:3px !important;
}
.archive-calendar-marks .diary-mark{
width:4px !important;
height:4px !important;
}
.archive-calendar-marks .aeon-mark{
font-size:8px !important;
}
.archive-calendar-legend{
font-size:8px !important;
}
.archive-calendar-legend .diary-dot{
width:4px !important;
height:4px !important;
}
.archive-calendar-legend .aeon-dot{
font-size:8px !important;
}
}
@media (max-width:800px){
.archive-calendar-day{
font-size:9px !important;
}
.archive-calendar-marks .diary-mark{
width:4px !important;
height:4px !important;
}
.archive-calendar-marks .aeon-mark{
font-size:7px !important;
}
}
/* =========================================================
DIARY SEARCH — BOXED
========================================================= */
.diary-list-row.is-search-hidden{
display:none;
}
.diary-search{
display:flex;
align-items:center;
gap:10px;
margin:0 0 24px;
padding:0;
border:0;
}
.diary-search-field{
flex:1 1 auto;
min-width:0;
height:38px;
display:flex;
align-items:center;
gap:12px;
padding:0 13px;
border:1px solid var(--line);
background:rgba(255,255,255,.22);
}
body.theme-dark .diary-search-field{
background:rgba(255,255,255,.025);
}
.diary-search-field > span{
flex:0 0 auto;
font:7px/1 monospace;
letter-spacing:.14em;
color:var(--gray);
}
.diary-search-field input{
flex:1 1 auto;
width:auto;
min-width:0;
height:100%;
padding:0;
border:0;
outline:0;
background:transparent;
color:inherit;
font-size:10px;
}
.diary-search-field input:focus{
border:0;
}
.diary-search-clear{
height:38px;
padding:0 12px;
border:1px solid var(--line);
background:transparent;
color:var(--gray);
}
.diary-search-status{
flex:0 0 auto;
min-width:58px;
padding:0;
text-align:right;
}
.diary-search-empty{
padding:28px 0;
border-bottom:1px solid var(--line);
color:var(--gray);
text-align:center;
font:8px/1.4 monospace;
letter-spacing:.10em;
}
@media (max-width:800px){
.diary-search{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
}
.diary-search-status{
grid-column:1 / -1;
min-width:0;
text-align:left;
}
.diary-search-field{
height:40px;
}
}
/* =========================================================
ADMIN — BATCH SAVE / UNSAVED STATE
========================================================= */
.admin-batch-save-bar{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:8px 14px;
align-items:center;
margin:24px 0 14px;
padding:12px 14px;
border:1px solid var(--line);
background:rgba(255,255,255,.12);
}
.admin-batch-save-bar-aeon{
margin-top:34px;
}
.admin-batch-save-bar > div{
min-width:0;
}
.admin-batch-save-bar strong{
display:block;
margin-bottom:5px;
font:400 10px/1 Georgia,serif;
letter-spacing:.04em;
}
.admin-batch-save-bar div > span{
display:block;
color:var(--gray);
font:7px/1 monospace;
letter-spacing:.09em;
}
.admin-batch-save-bar > .form-message{
grid-column:1 / -1;
min-height:0;
margin:0;
}
.admin-save-all{
white-space:nowrap;
}
.admin-save-all:disabled{
opacity:.34;
cursor:default;
}
.admin-diary-item.has-unsaved-changes > summary, .admin-aeon-item.has-unsaved-changes > summary{
position:relative;
}
.admin-diary-item.has-unsaved-changes > summary::before, .admin-aeon-item.has-unsaved-changes > summary::before{
content:"•";
position:absolute;
left:-12px;
top:50%;
transform:translateY(-50%);
color:currentColor;
font-size:9px;
opacity:.65;
}
@media (max-width:700px){
.admin-batch-save-bar{
grid-template-columns:1fr;
}
.admin-save-all{
width:100%;
}
}
/* =========================================================
ADMIN — AEON MANUAL ORDER
========================================================= */
.aeon-order-note{
margin-top:-4px;
margin-bottom:14px;
}
.admin-aeon-item > summary{
grid-template-columns:auto minmax(0,1fr) auto auto !important;
}
.admin-aeon-order-controls{
display:flex;
align-items:center;
gap:4px;
margin-right:8px;
}
.admin-aeon-order-controls button, .aeon-drag-handle{
min-width:25px;
height:25px;
padding:0 6px;
display:inline-flex;
align-items:center;
justify-content:center;
border:1px solid var(--line);
background:transparent;
color:var(--gray);
font:7px/1 monospace;
letter-spacing:.06em;
cursor:pointer;
user-select:none;
}
.aeon-drag-handle{
min-width:52px;
cursor:grab;
}
.aeon-drag-handle:active{
cursor:grabbing;
}
.admin-aeon-order-controls button:hover, .aeon-drag-handle:hover{
color:var(--black);
border-color:var(--gray);
}
.admin-aeon-item.is-order-dragging{
opacity:.42;
}
.admin-aeon-item.is-order-drag-over{
border-top-color:var(--black) !important;
}
.admin-aeon-list.is-saving-order{
cursor:progress;
}
.admin-aeon-item.order-saved-flash > summary{
animation:aeOrderSavedFlash .42s ease;
}
@keyframes aeOrderSavedFlash{
0%,100%{background:transparent}
50%{background:rgba(120,120,120,.08)}
}
@media (max-width:760px){
.admin-aeon-item > summary{
grid-template-columns:auto minmax(0,1fr) auto !important;
}
.admin-aeon-order-controls{
grid-column:2 / -1;
justify-content:flex-end;
margin:6px 0 0;
}
.admin-aeon-open{
grid-row:1;
grid-column:3;
}
.aeon-drag-handle{
display:none;
}
}
/* =========================================================
ADMIN — PHOTO CROP
========================================================= */
body.photo-crop-open{overflow:hidden}
.new-photo-caption-row.crop-enabled{
display:grid;
grid-template-columns:58px minmax(0,1fr) auto;
gap:10px;
align-items:start;
}
.new-photo-crop-preview{
width:58px;
aspect-ratio:1/1;
overflow:hidden;
border:1px solid var(--line);
background:rgba(127,127,127,.05);
}
.new-photo-crop-preview img{
width:100%;
height:100%;
display:block;
object-fit:cover;
}
.new-photo-caption-copy{min-width:0}
.new-photo-caption-copy>span{
display:block;
overflow:hidden;
margin-bottom:5px;
text-overflow:ellipsis;
white-space:nowrap;
}
.new-photo-caption-copy textarea{width:100%}
.photo-crop-open-btn{
height:28px;
padding:0 9px;
border:1px solid var(--line);
background:transparent;
color:inherit;
font:7px/1 monospace;
letter-spacing:.10em;
cursor:pointer;
}
.photo-crop-open-btn:hover{border-color:currentColor}
.photo-crop-modal[hidden]{display:none!important}
.photo-crop-modal{
position:fixed;
inset:0;
z-index:10000;
display:grid;
place-items:center;
padding:20px;
}
.photo-crop-backdrop{
position:absolute;
inset:0;
background:rgba(0,0,0,.58);
backdrop-filter:blur(3px);
}
.photo-crop-dialog{
position:relative;
z-index:1;
width:min(620px,calc(100vw - 40px));
max-height:calc(100vh - 40px);
overflow:auto;
padding:18px;
border:1px solid var(--line);
background:#f3f3f1;
color:#111;
box-shadow:0 18px 60px rgba(0,0,0,.2);
}
body.theme-dark .photo-crop-dialog, html[data-theme="dark"] .photo-crop-dialog{
background:#171717;
color:#eee;
}
.photo-crop-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:20px;
margin-bottom:14px;
}
.photo-crop-kicker{
display:block;
margin-bottom:4px;
color:var(--gray);
font:7px/1 monospace;
letter-spacing:.14em;
}
.photo-crop-head h3{
margin:0;
font:400 16px/1.1 Georgia,serif;
}
.photo-crop-x{
width:28px;
height:28px;
border:0;
background:transparent;
color:inherit;
font-size:20px;
line-height:1;
cursor:pointer;
}
.photo-crop-stage-wrap{
display:flex;
justify-content:center;
align-items:center;
min-height:280px;
padding:16px;
overflow:hidden;
background:#111;
}
.photo-crop-stage{
position:relative;
width:min(100%,520px);
max-height:56vh;
aspect-ratio:1/1;
overflow:hidden;
touch-action:none;
cursor:grab;
background:#0d0d0d;
}
.photo-crop-stage.is-dragging{cursor:grabbing}
.photo-crop-stage>img{
position:absolute;
left:50%;
top:50%;
width:100%;
height:100%;
object-fit:cover;
max-width:none;
user-select:none;
pointer-events:none;
transform-origin:center center;
will-change:transform;
}
.photo-crop-grid{
position:absolute;
z-index:2;
pointer-events:none;
background:rgba(255,255,255,.28);
}
.crop-grid-v1, .crop-grid-v2{top:0;bottom:0;width:1px}
.crop-grid-v1{left:33.333%}
.crop-grid-v2{left:66.666%}
.crop-grid-h1, .crop-grid-h2{left:0;right:0;height:1px}
.crop-grid-h1{top:33.333%}
.crop-grid-h2{top:66.666%}
.photo-crop-ratios{
display:flex;
flex-wrap:wrap;
gap:6px;
margin-top:12px;
}
.photo-crop-ratios button{
min-height:29px;
padding:0 9px;
border:1px solid var(--line);
background:transparent;
color:inherit;
font:7px/1 monospace;
letter-spacing:.08em;
cursor:pointer;
}
.photo-crop-ratios button.is-active{
border-color:currentColor;
background:rgba(127,127,127,.10);
}
.photo-crop-zoom{
display:grid;
grid-template-columns:auto 1fr;
gap:12px;
align-items:center;
margin-top:13px;
color:var(--gray);
font:7px/1 monospace;
letter-spacing:.12em;
}
.photo-crop-zoom input{width:100%}
.photo-crop-help{
margin:10px 0 0;
color:var(--gray);
font-size:9px;
line-height:1.5;
}
.photo-crop-actions{
display:flex;
justify-content:flex-end;
gap:7px;
margin-top:16px;
padding-top:14px;
border-top:1px solid var(--line);
}
@media (max-width:700px){
.new-photo-caption-row.crop-enabled{
grid-template-columns:48px minmax(0,1fr) auto;
}
.new-photo-crop-preview{width:48px}
.photo-crop-modal{padding:10px}
.photo-crop-dialog{
width:calc(100vw - 20px);
max-height:calc(100vh - 20px);
padding:14px;
}
.photo-crop-stage-wrap{
min-height:220px;
padding:10px;
}
.photo-crop-actions{
display:grid;
grid-template-columns:1fr 1fr;
}
.photo-crop-actions [data-crop-apply]{grid-column:1/-1}
}
/* Existing uploaded photo crop */
.existing-photo-crop-btn{
min-height:28px;
padding:0 9px;
border:1px solid var(--line);
background:transparent;
color:inherit;
font:7px/1 monospace;
letter-spacing:.10em;
cursor:pointer;
}
.existing-photo-crop-btn:hover{
border-color:currentColor;
}
.existing-photo-crop-btn.has-crop-pending{
border-color:currentColor;
}
/* ARCHIVE CALENDAR — selected date / today */
@media(max-width:800px){
.archive-calendar-day.is-selected::before{
inset:3px;
}
}
/* =========================================================
DESKTOP COLLAPSED RAIL — FINAL LOWER IDENTITY
near eternity · aeonear / local time at bottom
========================================================= */
@media (min-width:901px){
body.side-panel-collapsed .side-brand-home{
display:block !important;
opacity:1 !important;
visibility:visible !important;
pointer-events:auto !important;
padding:0 !important;
}
/* lower identity group: near eternity · aeonear */
body.side-panel-collapsed .side-brand-tagline{
position:absolute;
left:50%;
bottom:202px;
display:block;
margin:0;
writing-mode:vertical-rl;
transform:translateX(-50%) rotate(180deg);
opacity:.58;
visibility:visible;
pointer-events:none;
white-space:nowrap;
font-size:8px;
line-height:1;
letter-spacing:.08em;
}
body.side-panel-collapsed .side-brand-home::after{
content:"·";
position:absolute;
left:50%;
bottom:180px;
transform:translateX(-50%);
color:#8b8e90;
font:8px/1 Georgia,serif;
opacity:.52;
pointer-events:none;
}
body.side-panel-collapsed .side-brand-title{
position:absolute;
left:50%;
bottom:100px;
margin:0;
writing-mode:vertical-rl;
transform:translateX(-50%) rotate(180deg);
font-size:15px;
line-height:1;
letter-spacing:.15em;
white-space:nowrap;
}
/* local-time greeting: horizontal and anchored at the very bottom */
body.side-panel-collapsed .side-time-message{
position:absolute;
left:50%;
right:auto;
top:auto;
bottom:10px;
display:block;
width:44px;
max-width:44px;
margin:0;
padding:0 2px;
box-sizing:border-box;
min-height:0;
writing-mode:horizontal-tb;
transform:translateX(-50%);
opacity:.58;
visibility:visible;
pointer-events:none;
white-space:normal;
overflow:visible;
text-align:center;
font:9px/1.3 monospace;
letter-spacing:.01em;
text-transform:lowercase;
overflow-wrap:anywhere;
word-break:normal;
}
body.side-panel-collapsed .side-brand-mark{
opacity:0;
visibility:hidden;
pointer-events:none;
}
body.theme-dark.side-panel-collapsed .side-brand-tagline{
color:#aaa69f;
}
body.theme-dark.side-panel-collapsed .side-time-message,
body.theme-dark.side-panel-collapsed .side-brand-home::after{
color:#8f8b84;
}
}
/* =========================================================
MOBILE/TABLET SIDE PANEL — EXPAND RESTORE
========================================================= */
@media (max-width:900px){
body:not(.side-panel-collapsed) .side-brand-home{
opacity:1 !important;
visibility:visible !important;
pointer-events:auto !important;
}
body:not(.side-panel-collapsed) .side-time-message{
display:block !important;
opacity:.72 !important;
visibility:visible !important;
}
}
/* =========================================================
DIARY PAGINATION — 7 ENTRIES PER PAGE
========================================================= */
.diary-list-row.is-page-hidden{
display:none;
}
.diary-pagination{
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:center;
gap:18px;
margin-top:0;
padding:18px 0 0;
border-top:1px solid var(--line);
}
.diary-pagination[hidden]{
display:none;
}
.diary-page-button{
width:max-content;
padding:0 0 5px;
border:0;
border-bottom:1px solid transparent;
background:transparent;
color:inherit;
font:9px/1.2 monospace;
letter-spacing:.08em;
cursor:pointer;
}
.diary-page-prev{
justify-self:start;
}
.diary-page-next{
justify-self:end;
}
.diary-page-button:hover:not(:disabled){
border-bottom-color:currentColor;
}
.diary-page-button:disabled{
color:var(--gray);
opacity:.34;
cursor:default;
}
.diary-page-status{
color:var(--gray);
font:7px/1 monospace;
letter-spacing:.12em;
}
@media(max-width:800px){
.diary-pagination{
padding-top:15px;
}
.diary-page-button{
font-size:8px;
}
}
/* =========================================================
ADMIN — SELECTED ITEMS / BULK DELETE
========================================================= */
.admin-bulk-delete-bar{
display:flex;
align-items:center;
gap:12px;
margin:10px 0 20px;
padding:11px 0;
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
}
.admin-bulk-select-all,
.admin-item-select{
display:inline-flex;
align-items:center;
gap:7px;
color:var(--gray);
font:7px/1 monospace;
letter-spacing:.10em;
cursor:pointer;
user-select:none;
}
.admin-bulk-select-all input,
.admin-item-select input{
width:13px;
height:13px;
margin:0;
accent-color:#111;
}
body.theme-dark .admin-bulk-select-all input,
body.theme-dark .admin-item-select input{
accent-color:#eeeae3;
}
.admin-bulk-delete-count{
color:var(--gray);
font:7px/1 monospace;
letter-spacing:.10em;
}
.admin-delete-selected{
margin-left:auto;
}
.admin-delete-selected:not(:disabled){
border-color:#8d3e3e;
}
.admin-item-select{
position:relative;
z-index:3;
flex:0 0 auto;
}
.admin-diary-row{
grid-template-columns:20px 96px minmax(0,1fr) auto;
}
.admin-aeon-item > summary{
gap:10px;
}
@media(max-width:800px){
.admin-bulk-delete-bar{
display:grid;
grid-template-columns:auto 1fr;
gap:10px 12px;
}
.admin-delete-selected{
grid-column:1 / -1;
width:100%;
margin-left:0;
}
.admin-bulk-delete-bar .form-message{
grid-column:1 / -1;
}
.admin-diary-row{
grid-template-columns:18px 70px minmax(0,1fr) auto;
}
}
/* =========================================================
PHOTO CROP — DRAG PERFORMANCE
========================================================= */
.photo-crop-stage{
touch-action:none;
contain:layout paint;
}
#photoCropImage{
will-change:transform;
transform-origin:center center;
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
}
.photo-crop-stage.is-dragging #photoCropImage{
pointer-events:none;
}
/* =========================================================
ADMIN — PROFILE / BANNER CURRENT IMAGE PREVIEWS
========================================================= */
.admin-setting-image-field{
align-self:start;
}
.admin-setting-image-preview{
margin-top:10px;
}
.admin-setting-image-frame{
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
border:1px solid var(--line);
background:var(--light);
}
.admin-profile-image-frame{
width:112px;
aspect-ratio:1 / 1;
}
.admin-banner-image-frame{
width:min(100%,240px);
aspect-ratio:5 / 1;
}
.admin-setting-image-frame img{
display:block;
width:100%;
height:100%;
object-fit:cover;
}
.admin-banner-image-frame img{
object-fit:contain;
}
.admin-setting-image-empty{
padding:10px;
color:var(--gray);
font:7px/1.3 monospace;
letter-spacing:.08em;
text-align:center;
}
.admin-setting-image-meta{
display:flex;
align-items:center;
gap:10px;
margin-top:8px;
color:var(--gray);
font:7px/1 monospace;
letter-spacing:.08em;
}
.admin-profile-crop-btn{
margin-left:auto;
min-width:58px;
}
body.theme-dark .admin-setting-image-frame{
background:#191919;
}
@media(max-width:800px){
.admin-profile-image-frame{
width:96px;
}
.admin-banner-image-frame{
width:100%;
max-width:240px;
}
}
/* =========================================================
ADMIN — BACKUP / RESTORE
========================================================= */
.admin-backup-block + .admin-backup-block{
margin-top:28px;
padding-top:28px;
border-top:1px solid var(--line);
}
.admin-backup-warning{
max-width:760px;
margin:12px 0 0;
padding:11px 13px;
border:1px solid var(--line);
font-size:9px;
line-height:1.8;
color:#777;
}
.admin-backup-warning code{
font:inherit;
color:inherit;
}
.admin-backup-file{
display:block;
max-width:760px;
margin-top:18px;
font-size:8px;
letter-spacing:.12em;
color:#777;
}
.admin-backup-file input{
display:block;
width:100%;
margin-top:8px;
padding:10px 0;
border:0;
border-bottom:1px solid var(--line);
background:transparent;
color:inherit;
font-size:10px;
letter-spacing:0;
}
.admin-backup-preview{
max-width:760px;
margin-top:16px;
padding:14px 15px;
border:1px solid var(--line);
}
.admin-backup-preview-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
font-size:8px;
letter-spacing:.1em;
}
.admin-backup-preview-head strong{
font-weight:500;
}
.admin-backup-preview-head span{
color:#888;
font:8px/1.4 monospace;
letter-spacing:0;
text-align:right;
}
.admin-backup-counts{
display:flex;
flex-wrap:wrap;
gap:10px 18px;
margin-top:13px;
}
.admin-backup-counts span{
display:flex;
align-items:baseline;
gap:7px;
font:10px/1.4 monospace;
}
.admin-backup-counts b{
color:#888;
font-size:7px;
font-weight:400;
letter-spacing:.09em;
}
.backup-restore-button:disabled,
.admin-submit:disabled,
.admin-button:disabled{
opacity:.36;
cursor:not-allowed;
}
body.theme-dark .admin-backup-warning,
body.theme-dark .admin-backup-preview{
border-color:var(--line);
}
@media(max-width:800px){
.admin-backup-preview-head{
align-items:flex-start;
flex-direction:column;
gap:6px;
}
.admin-backup-preview-head span{
text-align:left;
}
}