@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;700;800&family=Pretendard:wght@300;400;500;600;700&display=swap');

*{
margin:0;
padding:0;
box-sizing:border-box;
}

:root{
--theme:#7da2ff;
--bg:#eef2f8;
--text:#0f172a;
--subtext:#64748b;
--line:#dbe4f2;
--selection:#7da2ff;
--selectionText:#ffffff;
--label:#94a3b8;
--accent:#94a3b8;  
--borderColor:#dbe4f2;
  --borderRadius:16px;
  --borderWidth:1px;
}

html,
body{
width:100%;
height:100%;
overflow:hidden;
background:var(--bg);
font-family:"Pretendard",sans-serif;
color:var(--text);
}

/* CURSOR */

.cursor-glow{
position:fixed;
width:320px;
height:320px;
border-radius:50%;

background:
radial-gradient(
circle,
var(--theme),
transparent 70%
);

opacity:.18;

filter:blur(40px);

pointer-events:none;
z-index:99999;
}

/* LOGIN */

.auth-btn{
  position: absolute;
  right: 0;
  width: 38px;
  height: 38px;
  border: 1px solid var(--borderColor);
  border-radius: 50%;
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(12px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--subtext);
  transition: .25s;
}

.auth-btn:hover{
  border-color: var(--theme);
  color: var(--theme);
  transform: scale(1.08);
}

.auth-btn--on{
  border-color: var(--theme);
  color: var(--theme);
  background: color-mix(in srgb, var(--theme) 12%, white);
}

/* SITE */

.site{
width:100%;
height:100vh;
padding:42px 60px;
position:relative;
overflow:hidden;
}

/* TOPBAR */

.topbar{
width:100%;
height:72px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
z-index:100;
}

.logo-wrap{
position:absolute;
left:0;
display:flex;
align-items:center;
gap:18px;
}

/**.logo-circle{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: linear-gradient(135deg, var(--theme), transparent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}**/

.logo-wrap h1{
font-size:30px;
font-family:"Playfair Display",sans-serif;
font-style: italic;
    font-weight: 500;
    letter-spacing: -1px;
    margin-top: -4px;
}

.topbar nav{
display:flex;
gap:62px;
}

.topbar nav a{
text-decoration:none;
color:var(--subtext);
font-size:14px;
font-weight:500;
position:relative;
font-family: "Playfair Display", sans-serif;
}

.topbar nav a.active{
color:var(--theme);
}

.topbar nav a.active::after{
content:"";
position:absolute;
left:0;
bottom:-12px;
width:100%;
height:2px;
background:var(--theme);
}

.menu-dot{
position:absolute;
right:0;
font-size:34px;
}

/* HOME */

.main-grid{
width:100%;
height:calc(100vh - 110px);
display:grid;
grid-template-columns:
32%
28%
40%;
}

/* LEFT */

.left-area{
padding-top:90px;
position:relative;
z-index:10;
}

.left-line{
position:absolute;
left: 1800px;;
top:80px;
width:2px;
height:340px;
background:
linear-gradient(
to bottom,
transparent,
var(--theme),
transparent
);
}

.archive-label{
font-size:12px;
letter-spacing:5px;
color:var(--subtext);
margin-bottom:43px;
}

#mainTitle{
font-size:96px;
line-height:.9;
letter-spacing:-2px;
font-family:"Playfair Display",sans-serif;
}

#subTitle{
    font-size: 57px;
    margin-top: -6px;
    color: var(--theme);
    font-weight: 500;
}

.description{
margin-top:42px;
  width:360%;
font-size:22px;
line-height:1.8;
}

.sub-desc{
margin-top:18px;
font-size:13px;
letter-spacing:3px;
color:var(--accent);
}

#editArchiveButton{
margin-top:42px;
width:250px;
height:58px;
border:1px solid var(--subtext);
background:
rgba(255,255,255,.72);
border-radius:18px;
cursor:pointer;
font-weight:700;
transition:.3s;
}

#editArchiveButton:hover{
transform:translateY(-4px);
}

/* CENTER */

.center-area{
display:flex;
flex-direction:column;
justify-content:center;
gap:28px;
padding-left:20px;
}

.news-panel{
width:430px;
min-height:230px;
padding:28px;
background:
rgba(255,255,255,.58);
backdrop-filter:blur(18px);
border:
1px solid rgba(255,255,255,.8);
border-radius:28px;
}

.panel-top{
display:flex;
justify-content:space-between;
margin-bottom:24px;
}

.panel-top h4{
font-size:16px;
font-weight:700;
}

.panel-top span{
font-size:12px;
font-weight:700;
color:var(--accent);
}

.news-content{
font-size:15px;
line-height:1.9;
color:var(--accent);
}

.profile-card{
width:430px;
height:250px;
padding:24px;
display:flex;
align-items:center;
gap:26px;
background:
rgba(255,255,255,.58);
backdrop-filter:blur(18px);
border:
1px solid rgba(255,255,255,.8);
border-radius:28px;
}

.profile-card img{
width:160px;
height:160px;
object-fit:cover;
border-radius:24px;
background:#edf2f7;
}

.profile-info{
display:flex;
flex-direction:column;
gap:4px;
margin-top: 10px;
}

.profile-info span{
font-size:11px;
letter-spacing:3px;
color:var(--accent);
font-weight:700;
}

.profile-info h4{
font-size:18px;
margin-bottom: 12px;
}

/* RIGHT */

.right-area{
position:relative;
}

.project-info{
position:absolute;
top:90px;
right:80px;
text-align:right;
z-index:10;
}

.project-info span{
display:block;
font-size:12px;
letter-spacing:5px;
color:var(--accent);
margin-bottom:8px;
}

.project-info h2{
font-size:110px;
line-height:.9;
letter-spacing:-2px;
font-family:"Playfair Display",sans-serif;
}

.project-info p{
font-size:12px;
letter-spacing:4px;
color:var(--accent);
}

#characterImage{
position:absolute;
right:-80px;
bottom:-120px;
width:135%;
object-fit:contain;
}

/* CHARACTER */

.character-page{
position:absolute;
inset:0;
display:none;
padding:120px 42px 42px;
background:var(--bg);
z-index:10;
}

.character-layout{
width:100%;
height:100%;
display:grid;
grid-template-columns:
180px
1fr;
gap:34px;
}

.character-sidebar{
padding-top:22px;
border-right:
1px solid color-mix(
in srgb,
var(--theme) 14%,
transparent
)
}

.character-sidebar span{
display:block;
font-size:11px;
letter-spacing:4px;
color:var(--accent);
margin-bottom:28px;
}

.character-sidebar h2{
font-size:54px;
color:var(--theme);
font-family:"Playfair Display",sans-serif;
margin-bottom:40px;
}

.character-sidebar ul{
list-style:none;
display:flex;
flex-direction:column;
gap:18px;
}

.character-sidebar li{
font-size:13px;
font-weight:600;
color:var(--text);
cursor:pointer;
transition:.25s;
}

.character-sidebar li:hover{
transform:translateX(6px);
color:var(--theme);
}

/* CENTER */

.character-center{
height:100%;
overflow-y:auto;
padding-right:10px;
padding-bottom:120px;
}

.character-header{
display:flex;
justify-content:space-between;
align-items:flex-start;
margin-bottom:34px;
}

.character-header h1{
font-size:58px;
line-height:.9;
font-family:"Playfair Display",sans-serif;
}

.character-header p{
margin-top:10px;
color:var(--accent);
}

.character-actions{
display:flex;
gap:14px;
}

.character-actions button{
height:54px;
min-width:120px;
padding:0 22px;
border:none;
border-radius:18px;
background:
rgba(255,255,255,.82);
backdrop-filter:blur(14px);
cursor:pointer;
font-weight:700;
transition:.25s;
}

.character-actions button:hover{
background:var(--theme);
color:white;
transform:translateY(-4px);
}

/* GRID */

.character-grid{
display:grid;
grid-template-columns:
repeat(auto-fill,minmax(220px,1fr));
gap:24px;
padding-bottom:120px;
}

.character-card{
position:relative;
background:
rgba(255,255,255,.78);
backdrop-filter:blur(18px);
border:
1px solid color-mix(
in srgb,
var(--theme) 14%,
transparent
);
overflow:hidden;
cursor:pointer;
transition:.35s;
}

.character-card:hover{
transform:translateY(-10px);
box-shadow:
0 20px 40px color-mix(
in srgb,
var(--theme) 14%,
transparent
);
}

.character-card img{
width:100%;
height:290px;
object-fit:cover;
background:#ffffff;
}

.character-card-content{
padding:18px;
}

.character-id{
display:block;
margin-bottom:12px;
font-size:13px;
font-weight:700;
color:var(--theme);
}

.character-card h3{
font-size:24px;
margin-bottom:10px;
}

.character-card p{
font-size:13px;
line-height:1.7;
color:var(--subtext);
}

.delete-character{
position:absolute;
top:12px;
right:12px;
width:34px;
height:34px;
border:none;
border-radius:50%;
background:#0f172a;
color:white;
cursor:pointer;
opacity:0;
transition:.25s;
}

.character-card:hover
.delete-character{
opacity:1;
}

/* EDITOR */

.editor-modal{
position:fixed;
top:50%;
left:50%;
transform:
translate(-50%,-50%)
scale(.95);
width:760px;
max-height:90vh;
overflow-y:auto;
padding:34px;
background:
color-mix(
in srgb,
var(--bg) 92%,
white
);
border-radius:28px;
box-shadow:
0 30px 80px rgba(0,0,0,.12);
opacity:0;
visibility:hidden;
transition:.35s;
z-index:999999;
}

.editor-modal.active{
opacity:1;
visibility:visible;
transform:
translate(-50%,-50%)
scale(1);
}

.editor-modal h2{
margin-bottom:28px;
font-size:32px;
font-family:"Playfair Display",sans-serif;
}

.editor-grid{
display:grid;
grid-template-columns:
1fr
1fr;
gap:28px;
}

.editor-column{
display:flex;
flex-direction:column;
}

.editor-modal label{
display:block;
margin-top:10px;
font-size:11px;
letter-spacing:2px;
color:var(--accent);
font-weight:700;
}

.editor-modal input:not([type="color"]),
.editor-modal textarea,
.editor-modal select{
width:100%;
padding:16px 18px;
margin-bottom:22px;
border:1px solid var(--subtext);
border-radius:16px;
outline:none;
background:
color-mix(
in srgb,
var(--bg) 40%,
white
);
}

.editor-modal textarea{
height:140px;
resize:none;
}

#projectWorldDescInput{
  height: 500px;
}

#projectDescInput{
  height: 200px;
}

.editor-buttons{
display:flex;
gap:14px;
margin-top:20px;
}

.editor-buttons button{
flex:1;
height:56px;
border:none;
border-radius:18px;
cursor:pointer;
font-weight:700;
}

.editor-buttons button:first-child{
background:#0f172a;
color:white;
}

.editor-buttons button:last-child{
background:#edf2f7;
}
/* BGM */

.bgm-player{
position:fixed;
left:50%;
bottom:18px;
transform:translateX(-50%);
display:flex;
align-items:center;
gap:24px;
padding:
10px
22px;
background:
rgba(255,255,255,.38);
backdrop-filter:
blur(18px);
border:1px solid color-mix(
in srgb,
var(--theme) 12%,
transparent
);
border-radius:999px;
z-index:99999;
min-width:520px;
height:62px;
}

.bgm-left{
display:flex;
align-items:center;
gap:14px;
min-width:150px;
}

#bgmToggle{
width:34px;
height:34px;
border:none;
border-radius:50%;
background:
color-mix(
in srgb,
var(--theme) 12%,
transparent
);
color:var(--theme);
cursor:pointer;
font-size:12px;
font-weight:700;
transition:.25s;
}

#bgmToggle:hover{
background:var(--theme);
color:white;
}

.bgm-text{
display:flex;
flex-direction:column;
gap:2px;
}

.bgm-text span{
font-size:10px;
letter-spacing:4px;
color:var(--accent);
}

.bgm-text p{
font-size:12px;
font-weight:700;
color:#0f172a;
}

.bgm-wave{
flex:1;
height:32px;
display:flex;
align-items:center;
gap:3px;
opacity:.7;
}

.bgm-wave div{
width:3px;
background:var(--theme);
border-radius:999px;
animation:
wave 1s ease-in-out infinite;
}

.bgm-wave div:nth-child(1){
height:8px;
animation-delay:.1s;
}

.bgm-wave div:nth-child(2){
height:18px;
animation-delay:.2s;
}

.bgm-wave div:nth-child(3){
height:10px;
animation-delay:.3s;
}

.bgm-wave div:nth-child(4){
height:24px;
animation-delay:.4s;
}

.bgm-wave div:nth-child(5){
height:12px;
animation-delay:.5s;
}

.bgm-wave div:nth-child(6){
height:20px;
animation-delay:.6s;
}

.bgm-wave div:nth-child(7){
height:8px;
animation-delay:.7s;
}

@keyframes wave{

0%{
transform:scaleY(.6);
opacity:.4;
}

50%{
transform:scaleY(1.2);
opacity:1;
}

100%{
transform:scaleY(.6);
opacity:.4;
}
}

#bgmVolume{
appearance:none;
width:80px;
height:2px;
background:
color-mix(
in srgb,
var(--theme) 3%,
transparent
);
border-radius:999px;
outline:none;
}

#bgmVolume::-webkit-slider-thumb{
appearance:none;
width:10px;
height:10px;
border-radius:50%;
background:var(--theme);
cursor:pointer;
}

#bgmUpload{

display:block;

width:180px;
height:32px;

padding:0 10px;

border:1px solid #ccc;
border-radius:999px;

background:#fff;

font-size:11px;

}

.bgm-upload-label{
font-size:10px;
letter-spacing:3px;
color:var(--accent);
cursor:pointer;
transition:.25s;
}

.bgm-upload-label:hover{
color:var(--theme);
}

.character-sidebar li.active-filter{
color:var(--theme);
transform:translateX(8px);
}
/* PROFILE DETAIL */

.character-profile{
position:fixed;
inset:0;
background:var(--bg);
backdrop-filter:blur(14px);
z-index:999999;
display:none;
padding:24px;
overflow:hidden;
}

.character-profile.active{
display:block;
}

.profile-shell{
width:100%;
height:100%;
background:
color-mix(
in srgb,
var(--bg) 40%,
white
);
border:
1px solid color-mix(
in srgb,
var(--theme) 14%,
transparent
);
display:flex;
flex-direction:column;
overflow:hidden;
}

/* TOP */

.profile-top{
height:72px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 34px;
border-bottom:
1px solid color-mix(
in srgb,
var(--theme) 12%,
transparent
);
}

.profile-top-left{
display:flex;
align-items:center;
gap:18px;
}

.profile-top-left span{
font-size:42px;
font-family:"Playfair Display",sans-serif;
color:var(--theme);
}

.profile-top-left h2{
font-size:42px;
font-weight:700;
}

.profile-top-right{
display:flex;
align-items:center;
gap:26px;
}

.profile-top-right p{
font-size:12px;
letter-spacing:2px;
color:var(--accent);
}

.close-profile{
width:48px;
height:48px;
border:none;
background:none;
font-size:34px;
cursor:pointer;
color:var(--text);
}

/* BODY */

.profile-body{
flex:1;
display:grid;
grid-template-columns:
38%
62%;
overflow:hidden;
}

/* LEFT */

.profile-left-panel{
padding:34px;
border-right:
1px solid color-mix(
in srgb,
var(--theme) 12%,
transparent
);
}

.profile-left-panel h3{
margin-bottom:28px;
font-size:18px;
font-family:"Playfair Display",sans-serif;
color:var(--text);
}
.relationship-header{

display:flex;
justify-content:space-between;
align-items:center;

margin-bottom:28px;

}

.relationship-circle{
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
position:relative;
margin-top:-60px;
pointer-events:none;
}

.relationship-circle::before{
content:"";
position:absolute;
width:480px;
height:480px;
border-radius:50%;

border:2px solid var(--theme);

opacity:.15;
}

.relationship-center{
position:relative;
z-index:10;
width:180px;
padding:14px;
background:color-mix(
in srgb,
var(--bg) 75%,
transparent
);
border:1px solid color-mix(
in srgb,
var(--theme) 14%,
transparent
);
border-radius:24px;
overflow:hidden;

box-shadow:
0 10px 30px rgba(0,0,0,.05);
}
.relationship-center img{
width:100%;
height:220px;
object-fit:cover;
background:#ffffff;
border-radius:18px;
}
.relationship-item{
background:
color-mix(
in srgb,
var(--bg) 80%,
white
);
padding:10px;
border-radius:16px;
pointer-events:auto;

border:1px solid color-mix(
in srgb,
var(--theme) 12%,
transparent
);

backdrop-filter:blur(12px);

transition:.25s;
}

.relationship-item:hover{
transform:translateY(-3px);
box-shadow:0 8px 20px color-mix(
in srgb,
var(--theme) 12%,
transparent
);
}

.relationship-center h4{
margin-top:14px;
font-size:24px;

color:var(--text);
}

.relationship-center p{
margin-top:6px;
font-size:12px;
color:var(--accent);
}
/* RIGHT */

.profile-right-panel{
padding:34px;
overflow:hidden;
display:flex;
flex-direction:column;
}

.profile-tabs{
display:flex;
gap:14px;
margin-bottom:28px;
}

.profile-tab{
height:48px;
padding:0 24px;
border:none;
background:none;
border-bottom:
2px solid transparent;
font-weight:700;
cursor:pointer;
}

.profile-tab{
color:var(--text);
}

.profile-tab.active{
border-color:var(--theme);
color:var(--theme);
}

/* CONTENT */

.profile-content{
display:none;
flex:1;
overflow-y:auto;
}

.profile-content.active{
display:block;
}

/* STATUS */

.status-layout{
display:grid;
grid-template-columns:
320px
1fr;
gap:24px;
}

.status-info{

padding:24px;

border:1px solid var(--text);

height:auto;

min-height:620px;

}

.status-image img{
width:100%;
height:260px;
object-fit:cover;
background:#ffffff;
}

.status-list{
margin-top:24px;
display:flex;
flex-direction:column;
gap:18px;
}

.status-list span{
font-size:11px;
letter-spacing:2px;
color:var(--text);
}

.status-list p{
margin-top:6px;
font-size:18px;
font-weight:600;

color:var(--text);
}

.status-stat{
padding:24px;
border:1px solid var(--text);
}

.status-stat h3{
margin-bottom:24px;
font-family:"Playfair Display",sans-serif;

color:var(--text);
}

/* RADAR */

.fake-radar{
position:relative;
width:320px;
height:320px;
margin:auto;
display:flex;
align-items:center;
justify-content:center;
}

.radar-circle{
position:absolute;
border-radius:50%;
border:1px solid var(--theme);
opacity:.2;
}

.radar-circle:nth-child(1){
width:280px;
height:280px;
}

.radar-circle:nth-child(2){
width:200px;
height:200px;
}

.radar-circle:nth-child(3){
width:120px;
height:120px;
}

.radar-shape{
width:180px;
height:180px;

background:var(--theme);

opacity:.20;

clip-path:polygon(
50% 0%,
90% 30%,
80% 80%,
50% 100%,
20% 80%,
10% 30%
);
}

/* STORY */

.story-timeline{
padding-right:20px;
}

.timeline-item{
display:flex;
gap:34px;
padding:24px 0;
border-bottom:1px solid color-mix(
in srgb,
var(--theme) 12%,
transparent
);
}

.timeline-item span{
font-size:12px;
letter-spacing:2px;
color:var(--theme);
min-width:120px;
}

.timeline-item h4{
margin-bottom:10px;
font-size:22px;
}

.timeline-item p{
line-height:1.8;
color:var(--accent);
}

/* MEMO */

.memo-panel textarea{
width:100%;
height:620px;
border:none;
outline:none;
resize:none;
background:none;
font-size:15px;
line-height:2;
}

/* EDIT */

.profile-edit-grid{

display:grid;

grid-template-columns:
1fr 1fr;

gap:34px;

padding:20px;

background:
rgba(255,255,255,.5);

backdrop-filter:blur(20px);

border-radius:24px;

border:
1px solid color-mix(
in srgb,
var(--theme) 12%,
transparent
);

}
.profile-edit-grid label{
display:block;
margin-bottom:10px;
font-size:11px;
letter-spacing:2px;
color:var(--accent);
font-weight:700;
}

.profile-edit-grid input,
.profile-edit-grid textarea,
.profile-edit-grid select{
width:100%;
padding:16px;
margin-bottom:22px;
border:1px solid var(--theme);
background:
color-mix(
in srgb,
var(--bg) 40%,
white
);
outline:none;
}

.profile-edit-grid textarea{
height:220px;
resize:none;
}

#saveDetailButton{
width:100%;
height:58px;
border:none;
background:#0f172a;
color:white;
cursor:pointer;
font-weight:700;
}
/* RELATION */

.relationship-layout{
position:absolute;
inset:0;
}

.relation-slot{
position:absolute;
width:120px;
text-align:center;
}

/* POSITION */

.relation-slot.top{
top:20px;
left:50%;
transform:translateX(-50%);
}

.relation-slot.left-top{
left:20px;
top:32%;
}

.relation-slot.right-top{
right:20px;
top:32%;
}

.relation-slot.left-bottom{.relationship-item img
left:20px;
bottom:20%;
}

.relation-slot.right-bottom{
right:20px;
bottom:20%;
}

.relation-slot.bottom{
bottom:20px;
left:50%;
transform:translateX(-50%);
}

/* CARD */

.relationship-item img{
width:58px;
height:58px;
border-radius:12px;
object-fit:cover;
background:#ffffff;
border:1px solid color-mix(
in srgb,
var(--theme) 12%,
transparent
);
}

.relationship-item h5{
margin-top:12px;
font-size:15px;
}

.relationship-item p{
margin-top:4px;
font-size:11px;
line-height:1.5;
color:var(--accent);
}

.relationship-item span{
display:block;
margin-top:6px;
font-size:12px;
color:var(--theme);
}

/* BUTTON */

.relation-buttons{
position:absolute;
left:50%;
bottom:24px;
transform:translateX(-50%);

display:flex;
justify-content:center;

z-index:50;
}

.add-relationship{

width:42px;
height:42px;

border:none;
border-radius:12px;

background:
rgba(255,255,255,.8);

font-size:28px;
font-weight:300;

cursor:pointer;

display:flex;
align-items:center;
justify-content:center;

box-shadow:
0 4px 12px rgba(0,0,0,.08);

}
/* RELATION EDITOR */

.relation-editor{
position:fixed;
inset:0;
background:
rgba(15,23,42,.35);
backdrop-filter:blur(12px);
z-index:99999999;
display:none;
align-items:center;
justify-content:center;
}

.relation-editor.active{
display:flex;
}

.relation-editor-box{
width:420px;
padding:34px;
background:
rgba(255,255,255,.88);
border:1px solid color-mix(
in srgb,
var(--theme) 12%,
transparent
);
backdrop-filter:blur(20px);
}

.relation-editor-box h3{
margin-bottom:28px;
font-size:28px;
font-family:"Playfair Display",sans-serif;
}

.relation-editor-box label{
display:block;
margin-bottom:10px;
font-size:11px;
letter-spacing:2px;
color:var(--accent);
font-weight:700;
}

.relation-editor-box input,
.relation-editor-box select{
width:100%;
height:52px;
padding:0 16px;
margin-bottom:22px;
border:1px solid color-mix(
in srgb,
var(--theme) 12%,
transparent
);
background:
color-mix(
in srgb,
var(--bg) 40%,
white
);
outline:none;
}

.relation-editor-buttons{
display:flex;
gap:12px;
margin-top:10px;
}

.relation-editor-buttons button{
flex:1;
height:52px;
border:none;
cursor:pointer;
font-weight:700;
}

#saveRelationButton{
background:var(--theme);
color:white;
}

#closeRelationButton{
background:#e2e8f0;
}


#deleteRelationButton{
background:#ef4444;
color:white;
}
.edit-status-button{

width:100%;
height:48px;

margin-bottom:20px;

border:none;
border-radius:16px;

background:var(--theme);
color:white;

font-weight:700;
cursor:pointer;

}
#statusFab{

position:absolute;

right:16px;
bottom:16px;

width:40px;
height:40px;

border:none;
border-radius:50%;

background: var(--theme);

color:#fff;

cursor:pointer;

display:flex;
align-items:center;
justify-content:center;

box-shadow:
0 4px 12px rgba(0,0,0,.15);

transition:.2s;

z-index:10;

}

#statusFab:hover{

transform:translateY(-2px);

box-shadow:
0 8px 20px rgba(91,125,255,.25);

}

.status-info{
position:relative;
}
.inline-status-editor{

display:none;

position:relative;

margin-top:20px;

padding:20px;

border-top:
1px solid rgba(0,0,0,.1);

background:
rgba(255,255,255,.4);

border-radius:16px;

overflow:hidden;

}

.inline-status-editor.active{
display:block;
}
.status-edit-grid{

display:grid;
grid-template-columns:
1fr
1fr;

gap:10px;

margin-top:15px;

}

.status-edit-grid input{
width:100%;

min-width:0;

box-sizing:border-box;
height:42px;

padding:0 14px;

border:none;

border-radius:12px;

background:
rgba(255,255,255,.85);

backdrop-filter:blur(12px);

font-size:13px;

outline:none;

}

.status-edit-grid input:focus{

box-shadow:
0 0 0 2px var(--theme);

}

#saveStatusButton{

grid-column:1/3;

height:46px;

border:none;

border-radius:14px;

background:#222;

color:white;

font-weight:700;

cursor:pointer;

transition:.25s;

}

#saveStatusButton:hover{

transform:translateY(-2px);

}
.radar-wrapper{

display:flex;
justify-content:center;
align-items:center;

height:500px;

}

#statRadar{

overflow:visible;

}
#radarBackground{

fill:none;

stroke:var(--theme);

stroke-opacity:.35;

stroke-width:1;

}

#radarPolygon{

fill:color-mix(
in srgb,
var(--theme) 30%,
transparent
);

stroke:var(--theme);
stroke-width:3;

transition:.3s;

}
#statEditor .relation-editor-box{

width:520px;
max-height:80vh;

overflow-y:auto;

border-radius:24px;

}
#statEditor .relation-editor-box{

display:grid;
gap:10px;

}

#statEditor input{

margin-bottom:0;
}

#statEditor .stat-row{

display:grid;
grid-template-columns:
1fr 100px;

gap:10px;

}
.stat-header{

display:flex;
justify-content:space-between;
align-items:center;

margin-bottom:20px;

}

#statFab{

width:36px;
height:36px;

border:none;
border-radius:50%;

background:var(--theme);
color:white;

cursor:pointer;

}
.radar-label{

font-size:12px;
font-weight:700;

fill:var(--text);

white-space:pre;

pointer-events:none;

}
.radar-label{

font-size:12px;
font-weight:700;

fill:var(--text);

pointer-events:none;

}

.radar-value{

font-size:11px;

fill:var(--subtext);

font-weight:500;

}
.story-header{

display:flex;
justify-content:flex-end;

margin-bottom:20px;

}

#addStoryButton{

height:44px;

padding:0 24px;

border:none;

border-radius:999px;

background:var(--theme);

color:white;

font-weight:600;

cursor:pointer;

transition:.25s;

}

#addStoryButton:hover{

transform:translateY(-2px);

box-shadow:
0 6px 16px
color-mix(
in srgb,
var(--theme) 35%,
transparent
);

}

.story-timeline{

position:relative;

padding-left:40px;

}

.story-timeline::before{

content:"";

position:absolute;

left:12px;
top:0;
bottom:0;

width:2px;

background:
color-mix(
in srgb,
var(--theme) 40%,
transparent
);

}

.timeline-item{

position:relative;

margin-bottom:40px;

}

.timeline-dot{

position:absolute;

left:-34px;
top:8px;

width:14px;
height:14px;

border-radius:50%;

background:var(--theme);

}

.timeline-card{

padding:0 0 24px 24px;

background:none;

border:none;

backdrop-filter:none;

}
#storyEditor label{

display:block;

margin-bottom:8px;
margin-top:16px;

font-size:11px;
letter-spacing:2px;

opacity:.6;

}
.story-delete{

position:absolute;

right:0;
top:0;

background:none;

border:none;

font-size:20px;

cursor:pointer;

color:var(--subtext);

}

.story-delete:hover{

color:var(--theme);

}
.timeline-card{

width:100%;

max-width:none;

}
.story-modal{

position:fixed;
inset:0;

display:none;
align-items:center;
justify-content:center;

background:
rgba(15,23,42,.35);

backdrop-filter:blur(12px);

z-index:99999999;

}

.story-modal.active{

display:flex;

}

.story-modal-box{

width:1200px;
max-width:90vw;

height:80vh;

background:
color-mix(
in srgb,
var(--bg) 40%,
white
);

padding:40px;

border-radius:24px;

display:flex;
flex-direction:column;

}

.story-modal-top{

display:flex;
justify-content:space-between;
align-items:center;

margin-bottom:10px;

}

.story-modal-top h2{

font-size:52px;

font-family:"Playfair Display";

}

.story-subtitle{

margin-bottom:40px;

color:var(--theme);

}

.story-toolbar{

display:flex;

gap:10px;

margin:16px 0;

}

.story-toolbar button{

width:42px;
height:42px;

border:none;

background:none;

cursor:pointer;

font-size:18px;

}

#storyContentInput{

flex:1;

width:100%;

padding:20px;

resize:none;

border:
1px solid var(--line);

}

.story-footer{

display:flex;

justify-content:space-between;

margin-top:20px;

}

.story-footer button{

height:52px;

padding:0 24px;

border:none;

cursor:pointer;

}
/* STORY MODAL */

.story-modal{

position:fixed;
inset:0;

display:none;
align-items:center;
justify-content:center;

background:
rgba(15,23,42,.35);

backdrop-filter:blur(20px);

z-index:99999999;

}

.story-modal.active{

display:flex;

}

.story-modal-box{

width:1200px;
height:820px;

max-width:92vw;
max-height:88vh;

background:
color-mix(
in srgb,
var(--bg) 40%,
white
);

border-radius:32px;

padding:42px 48px;

box-shadow:
0 40px 100px rgba(0,0,0,.15);

display:flex;
flex-direction:column;

}

.story-modal-top{

display:flex;
justify-content:space-between;
align-items:flex-start;

}

.story-modal-top h2{

font-size:72px;
font-family:"Playfair Display";
line-height:1;

}

#closeStoryButton{

border:none;
background:none;

font-size:52px;

cursor:pointer;

color:var(--subtext);

width:auto;
height:auto;

}

.story-subtitle{

margin-top:10px;
margin-bottom:40px;

color:var(--theme);

font-size:20px;

}

.story-modal label{

display:block;

font-size:13px;
font-weight:700;
letter-spacing:3px;

margin-bottom:10px;

color:var(--theme);

}

#storyDateInput,
#storyTitleInput{

height:42px;

padding:0 14px;

border:1px solid var(--subtext);

border-radius:12px;

background:
color-mix(
in srgb,
var(--bg) 40%,
white
);

margin-bottom:20px;

font-size:14px;

}

#storyDateInput{

width:180px;
height:42px;

padding:0 14px;

font-size:14px;

}

.story-toolbar{

display:flex;

gap:14px;

margin-bottom:12px;

}

.story-toolbar button{

width:42px;
height:42px;

border:none;
background:none;

font-size:20px;

cursor:pointer;

}

#storyContentInput{

width:100%;

height:420px;

padding:24px;

border:1px solid var(--subtext);

border-radius:18px;

resize:none;

line-height:1.9;

}

.story-footer{

display:flex;
justify-content:space-between;
align-items:center;

margin-top:24px;

}

.story-footer > div{

display:flex;
gap:14px;

}

#deleteStoryButton{

width:160px;
height:56px;

border:none;

border-radius:14px;

background:#fee2e2;

color:#dc2626;

cursor:pointer;

}

#cancelStoryButton{

width:160px;
height:56px;

border:none;

border-radius:14px;

background:#e2e8f0;

cursor:pointer;

}

#saveStoryButton{

width:220px;
height:56px;

border:none;

border-radius:14px;

background:var(--theme);

color:white;

font-weight:700;

cursor:pointer;

}
.story-content{

line-height:1.9;

word-break:break-word;

}

.story-content b{

font-weight:700;

}

.story-content i{

font-style:italic;

}

.story-content u{

text-decoration:underline;

}

.story-content blockquote{

margin:14px 0;

padding-left:16px;

border-left:
3px solid var(--theme);

font-style:italic;

color:var(--subtext);

}
#colorBtn{

width:42px;
height:42px;

border:none;

background:none;

cursor:pointer;

font-size:20px;

display:flex;
align-items:center;
justify-content:center;

padding:0;

}

#colorBtn:hover{

transform:scale(1.08);

}
.memo-header{

display:flex;
align-items:center;
gap:12px;

margin-bottom:24px;

}

#memoSearch{

flex:1;

height:44px;

padding:0 16px;

border:1px solid var(--subtext);

border-radius:12px;
background:
color-mix(
in srgb,
var(--bg) 40%,
white
);background:white;

}

#addMemoButton{

height:44px;

padding:0 18px;

border:none;

border-radius:12px;

background:var(--theme);

color:white;

font-weight:600;

cursor:pointer;

}

#memoList{

display:flex;
flex-direction:column;

gap:16px;

}

.memo-card{

position:relative;

padding:22px;

border:1px solid var(--subtext);

border-radius:18px;

background:
color-mix(
in srgb,
var(--bg) 40%,
white
);

}

.memo-title{

font-size:18px;
font-weight:700;

margin-bottom:10px;

}

.memo-content{

line-height:1.8;

color:var(--subtext);

}


.memo-content img{
width: 100%
}

/* MEMO MODAL */

#memoEditor .story-modal-box{

width:min(900px,90vw);

padding:48px;

border-radius:28px;

background:var(--bg);

box-shadow:
0 20px 60px rgba(0,0,0,.15);

}

#memoEditor .story-modal-top h2 {

font-size:72px;

font-family:'Playfair Display',sans-serif;

margin-bottom:12px;

}

#memoEditor label{

display:block;

margin-top:20px;
margin-bottom:8px;

font-size:12px;
font-weight:700;
letter-spacing:2px;

opacity:.6;

}

#memoEditor textarea{

width:100%;

border:1px solid var(--subtext);

border-radius:16px;

background:rgba(255,255,255,.5);

min-height:420px;

padding:14px 18px;

font-size:14px;

color:var(--text);

}

#memoEditor input{

width:100%;

height:48px;

padding:0 18px;

border:1px solid var(--subtext);

border-radius:16px;

background:rgba(255,255,255,.5);

font-size:14px;

color:var(--text);

}

#memoEditor textarea{

width:100%;

height:420px;

border:1px solid var(--subtext);

border-radius:16px;

background:rgba(255,255,255,.5);

padding:14px 18px;

font-size:14px;

color:var(--text);

resize:none;

}

#memoEditor .story-footer{

margin-top:28px;

display:flex;

justify-content:space-between;

align-items:center;

}

#memoEditor .story-footer button{

height:48px;

padding:0 24px;

border:none;

border-radius:14px;

cursor:pointer;

}

#saveMemoButton{

background:var(--theme);

color:white;

font-weight:700;

}

#cancelMemoButton{

background:rgba(0,0,0,.05);

}
#closeMemoButton{

width:42px;
height:42px;

border:none;

border-radius:50%;

background:transparent;

font-size:24px;

cursor:pointer;

transition:.2s;

}

#closeMemoButton:hover{

background:
rgba(0,0,0,.08);

transform:rotate(90deg);

}
.memo-delete{

position:static;

width:28px;
height:28px;

border:none;
background:none;

cursor:pointer;

}

.memo-delete:hover{

background:
rgba(0,0,0,.06);

color:#ef4444;

}
#sortSelect{

height:54px;

min-width:140px;

padding:0 40px 0 18px;

border:none;

border-radius:18px;

background:
rgba(255,255,255,.82);

backdrop-filter:blur(14px);

font-weight:700;

cursor:pointer;

color:var(--text);

appearance:none;
-webkit-appearance:none;
-moz-appearance:none;

background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%23333' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");

background-repeat:no-repeat;

background-position:right 16px center;

}
::selection{

background:
var(--selection);

color:
var(--selectionText);

}

::-moz-selection{

background:
var(--selection);

color:
var(--selectionText);

}
img{

-webkit-user-drag:none;
user-select:none;

}

.character-card{

user-select:none;

}
.memo-edit{

position:static;

width:28px;
height:28px;

border:none;
background:none;

cursor:pointer;

color:var(--subtext);

}

.memo-edit:hover{

background:rgba(0,0,0,.06);

color:var(--theme);

}
.memo-top{

display:flex;
justify-content:flex-end;
align-items:center;
gap:4px;

}

.memo-actions{

display:flex;
align-items:center;
gap:6px;

}

.memo-edit,
.memo-delete{

width:28px;
height:28px;

border:none;
background:none;

cursor:pointer;

font-size:14px;
font-weight:700;

color:var(--accent);

transition:.2s;

}

.memo-edit:hover,
.memo-delete:hover{

color:var(--theme);

transform:scale(1.1);

}

.memo-date{

font-size:12px;

color:var(--accent);

margin-right:0;

}
/* =========================
   WORLD
========================= */

.world-page{

  position:absolute;

  top:72px;
  left:0;
  right:0;
  bottom:0;
 padding: 40px 60px;

  display:flex;
  flex-direction:column;

  gap:24px;

  overflow-y:auto;

  background:var(--bg);

}

.world-hero{

  height:320px;
  width:100%;

  display:grid;

  grid-template-columns:
  500px 1fr;

  align-items:start;

}
.world-hero-content{

  display:flex;

  flex-direction:column;

  justify-content:flex-start;

  gap:16px;

}

.world-hero-label{

  font-size:12px;

  letter-spacing:3px;

  text-transform:uppercase;

  color:var(--subtext);

}

.world-hero-title{
font-size:64px;

  font-weight:900;

  line-height:1;

  margin:10px 0;

  color:var(--text);

}

.world-hero-subtitle{

  font-size:14px;

  margin-bottom:24px;

  color:var(--theme);

}

.world-hero-quote{

  font-size:26px;

  line-height:1.5;

  margin-bottom:24px;

}

.world-hero-desc{

  line-height:1.8;

  max-width:800px;

  color:var(--subtext);

}

/* =========================
   INFO AREA
========================= */

.world-grid{

  display:grid;

  grid-template-columns:
  1fr 1fr;


  margin-top:0px;

}

.world-card,
.world-setting{

height:88px;

display:grid;

grid-template-columns:
180px
80px
1fr
140px;

align-items:center;

padding:0 28px;

border:1px solid var(--borderColor);

background:transparent;

transition:.25s;

cursor:pointer;

position:relative;
}

/* =========================
   SETTING
========================= */

.world-setting{

padding:24px;

  border:1px solid
  var(--borderColor);

}

.world-setting-title{

  font-size:32px;

  font-weight:700;

  margin-bottom:24px;

}

.world-setting-text{

  line-height:2;

  color:var(--subtext);

}
.world-hero-image{

  position:relative;

  width:360%;

  height:360px;

  overflow:hidden;

  border-radius:24px;

}
.world-hero-image img{

  width:100%;

  height:100%;

  object-fit:cover;

}
.world-card:last-child{

  border-right:none;

}
.world-hero-overlay{

  position:absolute;

  left:40px;

  top:30px;

  max-width:1200px;
}
.world-enter{

  position:absolute;

  right:40px;

  bottom:40px;

  width:80px;

  height:80px;

  border-radius:50%;

  border:2px solid white;

  display:flex;

  align-items:center;

  justify-content:center;

  text-decoration:none;

  font-size:42px;

  color:white;

  backdrop-filter:blur(8px);

  z-index:20;

  transition:.2s;

}

.world-enter:hover{

  transform:scale(1.08);

}
.world-grid{

display:flex;
flex-direction:column;

gap:18px;

margin-top:30px;
}
.world-setting-btn{

  position:absolute;

  top:20px;
  right:20px;

  width:48px;
  height:48px;

  border:none;

  background:transparent;

  color:var(--text);

  cursor:pointer;

  z-index:999;

  font-size:24px;

}

.world-setting-btn:hover{

  transform:rotate(45deg);

  background:transparent;

  color:var(--theme);

}
.world-hero-quote{

  position:relative;

  font-size:20px;

  line-height:1.8;

}

.world-card-number,
.world-setting-title{

font-size:14px;

font-family:"Playfair Display";

letter-spacing:2px;

font-weight:700;

margin:0;
}

.world-card-title{
display:none;
}

.world-card-text,
.world-setting-text{

font-size:18px;

font-weight:600;

color:var(--text);

margin:0;
}

.world-card-icon{

display:flex;

justify-content:center;

font-size:22px;

color:var(--theme);
}

.world-enter-text{

text-align:right;

font-size:12px;

letter-spacing:3px;

color:var(--subtext);
}
.world-card:hover,
.world-setting:hover{

padding-left:40px;

border-color:var(--theme);
}

.world-card:hover .world-enter-text,
.world-setting:hover .world-enter-text{

color:var(--theme);

transform:translateX(6px);
}
.world-card::before,
.world-setting::before{

content:"";

position:absolute;

left:-1px;
top:-1px;

width:18px;
height:18px;

border-left:3px solid var(--theme);
border-top:3px solid var(--theme);
}
.world-detail-page{

display:none;

position:absolute;
inset:0;

padding:120px 80px;

background:var(--bg);

overflow-y:auto;

z-index:100;
}

.world-detail-back{

cursor:pointer;

margin-bottom:50px;

font-size:12px;

letter-spacing:3px;

color:var(--theme);
}

.world-detail-number{

font-size:60px;

font-family:"Playfair Display";

color:var(--theme);
}

.world-detail-header h1{

font-size:72px;

margin-top:10px;
}

.world-detail-header h2{

margin-top:10px;

font-size:32px;
}

.world-detail-header p{

margin-top:10px;

letter-spacing:4px;

color:var(--accent);
}

.world-detail-content{

margin-top:60px;

max-width:900px;

line-height:2;

font-size:16px;
}

.settings-list{

margin-top:50px;

display:flex;

flex-direction:column;

gap:12px;
}

.settings-item{

margin-bottom: 20px;
    
height:60px;

display:flex;

align-items:center;

justify-content:space-between;

padding:0 30px;

border:1px solid var(--borderColor);

cursor:pointer;

transition:.25s;
}

.settings-item:hover{

padding-left:40px;

border-color:var(--theme);
}
.world-detail-subtitle{

margin-top:40px;

font-size:28px;

font-weight:600;

line-height:1.6;

color:var(--theme);

max-width:800px;

}

.world-detail-divider{

width:120px;

height:2px;

background:var(--theme);

margin:30px 0 50px;

opacity:.5;

}

.world-detail-content{

max-width:900px;

font-size:16px;

line-height:2.2;

white-space:pre-wrap;
}
.world-detail-header{

position:relative;

}

.world-edit-btn{

position:absolute;

top:10px;
right:0;

height:42px;

padding:0 18px;

border:1px solid var(--borderColor);

background:transparent;

color:var(--text);

font-size:12px;

letter-spacing:2px;

cursor:pointer;

transition:.25s;

}

.world-edit-btn:hover{

border-color:var(--theme);

color:var(--theme);

}
.settings-item{

display:flex;
justify-content:space-between;
align-items:center;

}

.delete-category{

background:none;
border:none;

font-size:20px;
cursor:pointer;

opacity:.5;
transition:.2s;

}

.delete-category:hover{

opacity:1;

}
.settings-add-btn{

background:none;
border:none;

width:100%;

padding:28px 0;

font-size:12px;
letter-spacing:.35em;

text-transform:uppercase;

opacity:.35;

transition:.25s;

border-top:1px solid var(--line);

}

.settings-add-btn:hover{

opacity:1;

padding-left:16px;

}
.setting-page{

display:flex;
align-items:center;
justify-content:space-between;

padding:16px 18px;

cursor:pointer;

border:1px solid var(--borderColor);

margin-bottom:10px;

}

.setting-page-title{

flex:1;

}

.setting-page-edit{

width:36px;
height:36px;

border:none;

background:none;

cursor:pointer;

font-size:16px;

color:var(--accent);

}

.setting-page-edit:hover{

color:var(--theme);

}
.edit-category,
.delete-category{

width:24px;
height:24px;

display:flex;
align-items:center;
justify-content:center;

border:none;
background:transparent;

cursor:pointer;

font-size:14px;

}
#contentPageBody{

padding:30px;

line-height:1.8;

white-space:pre-wrap;

}

#contentEditor textarea{

width:100%;

height:500px;

resize:none;

}
#contentPageSubtitle{

color:var(--theme) !important;

font-size:16px !important;

font-weight:500 !important;

margin-top:8px !important;

margin-bottom:20px !important;

opacity:.9;

}

.list-page{

height:100%;

overflow-y:auto;

scrollbar-width:thin;
    
padding-bottom: 150px;

}

.list-page::-webkit-scrollbar{

width:6px;

}

.list-page::-webkit-scrollbar-thumb{

background:var(--borderColor);

border-radius:999px;

}

.project-grid{
display:grid;
grid-template-columns:
repeat(4,1fr);
gap:24px;
}

.project-card{
background:var(--bg);
border:1px solid var(--borderColor);
border-radius:20px;
overflow:hidden;
cursor:pointer;
}

.project-thumb{
height:260px;
overflow:hidden;
}

.project-thumb img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

.project-content{
padding:20px;
}

.project-content h3{
margin-bottom:10px;
}

.project-content p{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.project-content p span{
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--theme) 12%, transparent);
  color: var(--theme);
  font-size: 11px;
  font-weight: 600;
}

.project-content span{
    font-size: 12px;
display:-webkit-box;

-webkit-line-clamp:3;

-webkit-box-orient:vertical;

overflow:hidden;

text-overflow:ellipsis;

word-break:break-word;

}
#addProjectButton{

height:42px;
padding:0 18px;

border:none;
border-radius:12px;

background:var(--theme);
color:#fff;

font-size:13px;
font-weight:600;

cursor:pointer;

margin-top:-8px;
}

.list-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:40px;
}

.list-header-h1{
    margin-top: 4px;
    margin-bottom: 14px;
    font-size: 20px;
    font-weight: 600;
    color: var(--theme);
    border-bottom: 1px solid var(--theme);
    padding-bottom: 4px;
    letter-spacing: 9px;
}

.project-actions{

position:absolute;

top:12px;
right:12px;

display:flex;
gap:8px;

z-index:5;

}

.project-card{
  background: rgba(255,255,255,.58);
  backdrop-filter: blur(18px);
  border: 1px solid var(--borderColor);
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
}

.project-thumb{
position:relative;
z-index:1;
}

.project-actions{

position:absolute;
pointer-events:auto;
top:10px;
right:10px;

display:flex;

gap:4px;

z-index:9999;

}

.project-edit,
.project-delete{
pointer-events:auto;
width:28px;
height:28px;

display:flex;
align-items:center;
justify-content:center;

border:none;
border-radius:8px;

background:
rgba(15,23,42,.85);

backdrop-filter:blur(10px);

color:#fff;

font-size:12px;

cursor:pointer;

transition:.2s;

opacity:.85;
}

.project-edit:hover,
.project-delete:hover{

opacity:1;

transform:translateY(-2px);

background:var(--theme);

}
.detail-image{
width:100%;
max-width:200px;
overflow:hidden;
border-radius:20px;
}

.detail-image img{
width:100%;
display:block;
object-fit:cover;
}
.project-character-select{

display:grid;

grid-template-columns:
repeat(auto-fill,minmax(160px,1fr));

gap:10px;

margin-bottom:20px;

}

.project-character-item{

display:flex;

align-items:center;

gap:8px;

padding:12px;

border:1px solid var(--borderColor);

border-radius:12px;

cursor:pointer;

}

.project-character-item img{

width:36px;
height:36px;

border-radius:50%;

object-fit:cover;

}

.project-character-item input{

margin:0;

}

.archive-detail-layout{
  display: grid;
  grid-template-columns: 1fr 33%;
  gap: 40px;
  align-items: start;
}

.archive-detail-main{
  display: grid;
  grid-template-columns: 500px 1fr;
  grid-template-areas:
    "image info"
    "character character"
    "records records";
  gap: 30px 40px;
  align-content: start;
}

.archive-detail-image,
.archive-detail-info,
.archive-detail-character,
.archive-detail-records,
.archive-detail-world{
  min-width: 0;
  min-height: 0;
}

.archive-detail-image{
  grid-area: image;
  height: 420px;
  overflow: hidden;
  border-radius: 20px;
  position: relative;
}

.archive-detail-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.archive-detail-image::before{

content:"";

position:absolute;

top:16px;
left:16px;

width:18px;
height:18px;

border-top:2px solid var(--theme);
border-left:2px solid var(--theme);

z-index:5;

}

.archive-detail-image::after{

content:"";

position:absolute;

bottom:16px;
right:16px;

width:18px;
height:18px;

border-bottom:2px solid var(--theme);
border-right:2px solid var(--theme);

z-index:5;

}

.archive-detail-info{
  grid-area: info;
}

.archive-detail-info p{
  line-height: 1.6;
}

.archive-detail-info::after{

/*content:"";*/

position:absolute;

right:0;
bottom:0;

width:18px;
height:18px;

border-right:3px solid var(--theme);

border-bottom:3px solid var(--theme);

opacity:.9;

}

.archive-detail-world{
  height: auto;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-left: 24px;
  border-left: 1px solid var(--borderColor);
}

.world-sub-title{
    line-height: 3.5;
  font-size: 17px;
  font-weight: 700;
  color: var(--theme);
  background: color-mix(in srgb, var(--theme) 10%, transparent);
  padding: 4px 10px;
  border-left: 3px solid var(--theme);
}

.archive-detail-world p{
  line-height: 1.6;
}

.archive-detail-world::-webkit-scrollbar{

width:4px;

}

.archive-detail-world::-webkit-scrollbar-thumb{

background:var(--theme);

border-radius:999px;

}

.archive-detail-world::-webkit-scrollbar-track{

background:transparent;

}

.archive-detail-character{
  grid-area: character;
  padding-top: 24px;
  border-top: 1px solid var(--borderColor);
}

.archive-character-grid{

display:flex;

align-items:flex-start;

gap:60px;

margin-top:10px;

}

.archive-character-card{

display:flex;

gap:14px;

align-items:flex-start;

padding:0;

background:none;

border:none;

}

.archive-character-card img{

width:56px;
height:56px;

border-radius:50%;

object-fit:cover;

}

.archive-detail-tags{

 display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 25px 0;

}

.archive-detail-tags span{

  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--theme) 12%, transparent);
  color: var(--theme);
  font-size: 12px;
  font-weight: 600;

}
#backToList{

background:none;
border:none;

padding:0;

font-size:13px;
font-weight:600;

color:var(--subtext);

cursor:pointer;

margin-bottom:28px;

transition:.25s;

}

#backToList:hover{

color:var(--theme);

transform:translateX(-4px);

}
.archive-detail-character h3{

display:flex;

align-items:center;

gap:10px;

margin-bottom:24px;

}
.archive-detail-character h3::before{

content:"";

width:8px;
height:8px;

background:var(--theme);

display:block;

}
.archive-character-content h4{

margin-bottom:6px;

}
.archive-character-content p{

font-size:13px;

opacity:.75;

line-height:1.5;

}
.archive-character-more{

width:56px;
height:56px;

display:flex;
align-items:center;
justify-content:center;

font-size:24px;
font-weight:700;

border:1px dashed
var(--borderColor);

border-radius:12px;

opacity:.45;

cursor:pointer;

transition:.25s;

}
.archive-character-more:hover{

opacity:1;

transform:scale(1.1);

}
.archive-character-hidden{

display:none;

margin-top:24px;

padding-top:24px;

border-top:1px solid
var(--borderColor);

}

.archive-character-hidden.active{

display:flex;

gap:60px;

flex-wrap:wrap;

}
.character-list-modal{

position:fixed;

inset:0;

background:
rgba(0,0,0,.35);

display:none;

align-items:center;

justify-content:center;

z-index:99999;

}

.character-list-modal.active{

display:flex;

}

.character-list-box{

width:560px;

max-height:70vh;

overflow-y:auto;

background:#fff;

border-radius:24px;

padding:24px;

border:1px solid var(--borderColor);

}

.character-list-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:20px;

font-size:18px;

font-weight:700;

}

.character-list-header button{

border:none;

background:none;

font-size:24px;

cursor:pointer;

}

.character-list-content{

display:flex;

flex-direction:column;

gap:16px;

}

.character-list-item{

display:flex;

gap:14px;

align-items:center;

padding-bottom:14px;

border-bottom:
1px solid var(--borderColor);

}

.character-list-item img{

width:56px;
height:56px;

border-radius:50%;

object-fit:cover;

}
.archive-detail-info h2{

font-size:52px;

font-weight:800;

letter-spacing:-.05em;

}

.archive-detail-info h2::after{

content:"";
display:block;
width:100px;
height:3px;
background:var(--theme);
margin-top:18px;
margin-left: 2px;
}
.archive-detail-world h3{

display:flex;

align-items:center;

gap:12px;

margin-bottom:24px;

}

.archive-detail-world h3::before{

content:"";

width:8px;
height:24px;

background:var(--theme);

display:block;

}
.about-layout{

display:grid;

grid-template-columns:
1.4fr 420px;

gap:80px;

align-items:start;

margin-top:60px;

}
.about-title-area{

margin-bottom:50px;
position:relative;

padding-bottom:5px;


}

#aboutPageTitle{
font-family: "Playfair Display", sans-serif;
font-style: italic;
    
font-size:92px;

font-weight:500;

letter-spacing:-3px;

margin-bottom:12px;

}

#aboutPageDesc{

font-size:14px;

letter-spacing:.2em;

opacity:.7;

text-transform:uppercase;

}
.about-links{

display:flex;

flex-direction:column;

gap:22px;

}
.about-link-card{

display:grid;

grid-template-columns:
90px 80px 1fr;

align-items:center;

min-height:110px;

padding:0 30px;

border:1px solid var(--borderColor);

position:relative;

transition:.25s;

}
.about-link-card:hover{

transform:translateX(8px);

border-color:
var(--theme);

}
.about-link-number{

font-size:48px;

font-weight:700;

opacity:.9;

}
.about-link-icon{

font-size:30px;

display:flex;

align-items:center;

justify-content:center;

}
.about-link-content h3{
font-family: "Playfair Display", sans-serif;
font-style: italic;
font-size:28px;


margin-bottom:6px;

}
.about-link-content p{

opacity:.7;

font-size:15px;

}
.about-right{

display:flex;

justify-content:center;

}
.polaroid{

width:360px;

background:white;

padding:12px 12px 70px;

box-shadow:
0 20px 60px rgba(0,0,0,.08);

transform:rotate(-4deg);

position:relative;

}
.polaroid img{

width:100%;

height:420px;

object-fit:cover;

display:block;

}
.about-edit-btn{

position:absolute;

right:0;
bottom:0;

background:none;

border:none;

padding:0;

font-size:11px;

letter-spacing:.35em;

text-transform:uppercase;

color:var(--subText);

cursor:pointer;

opacity:.5;

transition:.25s;

}
.about-edit-btn::after{

content:"";

display:block;

width:100%;

height:1px;

background:var(--borderColor);

margin-top:6px;

}
.about-edit-btn:hover{

opacity:1;

color:var(--theme);

letter-spacing:.45em;

}
.about-edit-btn:hover::after{

background:var(--theme);

}
.about-link-url{

color:var(--subText);

text-decoration:none;

font-size:14px;

opacity:.7;

transition:.2s;

}

.about-link-url:hover{

opacity:1;

color:var(--theme);

}
.about-page{

position:relative;

}
.about-page::before{

content:"";

position:absolute;

right:40px;
bottom:40px;

width:32px;
height:32px;

border-right:2px solid var(--text);
border-bottom:2px solid var(--text);

opacity:.25;

pointer-events:none;

}

/* =========================
   RECORDS
========================= */


.archive-detail-records{
  grid-area: records;
  padding-top: 24px;
  border-top: 1px solid var(--borderColor);
}

.archive-detail-records h3{
  display: flex;
  align-items: center;
  gap: 10px;
}

.archive-detail-records h3::before{

content:"";

width:8px;
height:8px;

background:var(--theme);

display:block;

}

.records-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.records-preview{

  display: flex;
  flex-wrap: wrap;  
  gap: 10px;
}

.record-row-mini{
  cursor: pointer !important;
  max-width: 320px;
  padding: 10px 25px;
  border: 1px solid var(--borderColor);
  border-radius: 999px; 
  background: color-mix(in srgb, var(--theme) 6%, transparent);
  cursor: default;
  transition: .2s;

}

.record-row-mini:hover{
  border-color: var(--theme);
}

.record-row-mini p{
  font-size: 15px;
 font-weight: 600;
  color: var(--subtext);
  /* 길면 ... 처리 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.record-row-mini span{

min-width:80px;

font-size:11px;
letter-spacing:1px;

color:var(--theme);

}

.record-empty{

font-size:13px;

color:var(--accent);

}

#openMemoBoardButton{

margin-top:16px;

height:38px;
padding:0 18px;

border:1px solid var(--borderColor);
background:none;

font-size:11px;
letter-spacing:2px;

color:var(--text);

cursor:pointer;

transition:.25s;

}

#openMemoBoardButton:hover{

border-color:var(--theme);
color:var(--theme);

}

/* 게시판 페이지 */

.memo-board-header{

margin-top:40px;

display:flex;
max-width:100%;

}

#addProjectMemoButton {
    height: 30px;
    padding: 0 30px;
    margin-bottom: 13px;
    border: 1px solid var(--theme);
    background: rgba(255, 255, 255, .5);
    color: var(--theme);
    font-weight: 600;
    cursor: pointer;
    transition: .25s;
}

#addProjectMemoButton:hover{

transform:translateY(-2px);

}

.memo-board{
max-width:820px;
margin-right:auto;
margin-top:24px;

display:flex;
flex-direction:column;

gap:14px;

padding-bottom:120px;

}

/* 게시판 행 */

.record-row{

border:1px solid var(--borderColor);

transition:.25s;

}

.record-row:hover{

border-color:var(--theme);

}

.record-row-head{

display:flex;
align-items:center;

gap:20px;

height:64px;
padding:0 24px;

cursor:pointer;

}

.record-date{

min-width:90px;

font-size:11px;
letter-spacing:2px;

color:var(--theme);

}

.record-title{

flex:1;

font-size:16px;
font-weight:600;

}

.record-actions{

display:flex;
gap:6px;

}

.record-actions button{

width:28px;
height:28px;

border:none;
background:none;

cursor:pointer;

font-size:14px;

color:var(--accent);

transition:.2s;

}

.record-actions button:hover{

color:var(--theme);

}

/* 본문: 평소엔 숨김, open 클래스가 붙으면 표시 */

.record-body{

display:none;

padding:20px 24px 28px;

border-top:1px solid var(--borderColor);

line-height:1.9;

color: var(--text);

word-break:break-word;

}

.record-row.open .record-body{

display:block;

}

/* 작성/수정 모달 (기존 memoEditor 스타일 복제) */

#projectMemoEditor .story-modal-box{

  width: min(900px, 90vw);
  height: auto;
  max-height: 88vh;
  overflow-y: auto;
  padding: 48px;
  border-radius: 28px 0 0 28px;
  background: var(--bg);
  box-shadow: 0 20px 60px rgba(0,0,0,.15);
  display: flex;
  flex-direction: column;
}

#projectMemoEditor .story-modal-top h2{
    font-size: 44px;
    font-family: 'Playfair Display', sans-serif;
    margin-bottom: 12px;
    font-style: italic;
    font-weight: 300;
}

#projectMemoEditor label{

display: block;
    margin-top: 14px;
    margin-bottom: 8px;
    margin-left: 17px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    opacity: .6;

}

#projectMemoEditor input{
  width: 100%;
  padding: 6px 18px;
  border: 1px solid var(--bordercolor);
  border-radius: 16px;
  background: rgba(255,255,255,.5);
  font-size: 14px;
  color: var(--text);
  margin-bottom: 16px;
}


#projectMemoEditor textarea{

width:100%;

height:420px;

padding:14px 18px;

border:1px solid var(--subtext);
border-radius:16px;

background:rgba(255,255,255,.5);

font-size:14px;

color:var(--text);

resize:none;

}

#projectMemoEditor .story-footer{

margin-top:28px;

display:flex;
justify-content:space-between;
align-items:center;

}

#projectMemoEditor .story-footer button{

height:48px;

padding:0 24px;

border:none;
border-radius:14px;

cursor:pointer;

}

#saveProjectMemoButton{

background:var(--theme);
color:white;

font-weight:700;

}

#cancelProjectMemoButton{

background:rgba(0,0,0,.05);

}

#closeProjectMemoButton{

width:42px;
height:42px;

border:none;
border-radius:50%;

background:transparent;

font-size:24px;

cursor:pointer;

transition:.2s;

}

#closeProjectMemoButton:hover{

background:rgba(0,0,0,.08);

transform:rotate(90deg);

}


.viewer-mode #addProjectMemoButton,
.viewer-mode .record-actions{

display:none !important;

}

.project-detail-page{
  padding: 40px 60px 130px;
  height: calc(100vh - 110px);
  overflow-y: auto;
  overflow-x: hidden;
}
.archive-detail-world{
  height: auto;
  max-height: none;
  overflow: visible;
}


.viewer-mode #editArchiveButton,
.viewer-mode #aboutEditButton,
.viewer-mode #addCharacterButton,
.viewer-mode #addProjectButton,
.viewer-mode #addRelationshipButton,
.viewer-mode #statusFab,
.viewer-mode #statFab,
.viewer-mode .delete-character,
.viewer-mode .project-actions,
.viewer-mode .world-edit-btn,
.viewer-mode .settings-add-btn{

display:none !important;

}
.viewer-mode .character-tab[data-tab="edit"]{
display:none !important;
}
.viewer-mode #addStoryButton,
.viewer-mode #addMemoButton,
.viewer-mode #addRelationshipButton,
.viewer-mode .story-delete,
.viewer-mode .memo-edit,
.viewer-mode .memo-delete,
.viewer-mode .project-edit,
.viewer-mode .project-delete{

pointer-events:none !important;
opacity:.4;

}
.viewer-mode #saveDetailButton{
display:none !important;
}
.viewer-mode [data-tab="edit"]{
display:none !important;
}
.viewer-mode .edit-category,
.viewer-mode .delete-category,
.viewer-mode .setting-page-edit,
.viewer-mode .setting-page-delete{
display:none !important;
}

/* QUILL EDITOR */

#projectMemoQuill{
  border-radius: 0 0 16px 16px;
}

#projectMemoQuill .ql-editor{

  min-height: 280px;
  max-height: 380px;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.9;
  font-family: "Pretendard", sans-serif;
  color: var(--text);
  white-space: normal;
}

.ql-toolbar.ql-snow{
  border: 4px solid rgba(255,255,255,.7); !important;
  border-radius: 16px 16px 0 0;
background: color-mix(in srgb, var(--theme) 10%, transparent);
  flex-wrap: wrap;
}

.ql-container.ql-snow{
  border: 1px solid var(--bordercolor)!important;
  border-top: none;
  border-radius: 0 0 16px 16px;
  background: rgba(255,255,255,.5);
}

/* 에디터 내부 + 출력 본문 공통 스타일 */

.ql-snow .ql-editor h1,
.record-body h1{
  font-size: 29px;
  font-weight: 800;
  color: var(--theme);
  margin: 14px 0 6px;
  line-height: 1.4;
  font-family: "Pretendard", sans-serif;
}

.ql-snow .ql-editor h2,
.record-body h2{
  font-size: 24px;
  font-weight: 700;
  color: var(--theme);
  margin: 12px 0 5px;
  line-height: 1.5;
  font-family: "Pretendard", sans-serif;
}

.ql-snow .ql-editor h3,
.record-body h3{
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  color: var(--theme);
  background: color-mix(in srgb, var(--theme) 10%, transparent);
  padding: 3px 10px;
  border-left: 3px solid var(--theme);
  margin: 10px 0 5px;
  line-height: 2.2;
  font-family: "Pretendard", sans-serif;
}

.ql-snow .ql-editor p,
.record-body p{
  font-size: 14px;
  line-height: 2;
  margin: 2px 0;
  color: var(--text);
}

.ql-snow .ql-editor ol,
.record-body ol{
  padding-left: 20px;
  line-height: 2;
  color: var(--text);
}

.ql-snow .ql-editor ul,
.record-body ul{
  padding-left: 20px;
  line-height: 2;
  color: var(--text);
}

.ql-snow .ql-editor strong,
.record-body strong{
  font-weight: 700;
}

.ql-snow .ql-editor em,
.record-body em{
  font-style: italic;
}

/* QUILL EDITOR END */

/* login-notice */

.login-notice{
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: rgba(15,23,42,.88);
  color: white;
  padding: 12px 28px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  z-index: 9999999;
  opacity: 0;
  animation: noticeAnim 2s ease forwards;
  pointer-events: none;
}

@keyframes noticeAnim{
  0%  { opacity:0; transform:translateX(-50%) translateY(10px); }
  20% { opacity:1; transform:translateX(-50%) translateY(0); }
  80% { opacity:1; }
  100%{ opacity:0; transform:translateX(-50%) translateY(-4px); }
}

/* login-notice end */

/* 점 세 개 구분선 (theme 색, 중앙 정렬) */
.ql-snow.ql-toolbar button.ql-dots::after,
.ql-snow .ql-toolbar button.ql-dots::after{
  content: "⋯";
  font-size: 16px;
}

.ql-editor .ql-dots-divider,
.record-body .ql-dots-divider{
  margin: 22px 0;
  text-align: center;
  line-height: 1;
  color: var(--theme);
}

.ql-editor .ql-dots-divider::before,
.record-body .ql-dots-divider::before{
  content: "• • •";
  font-size: 14px;
  letter-spacing: 4px;
}

/* 리스트: 들여쓰기 축소 + 마커 통일 (작성·출력 공통) */
.ql-snow .ql-editor ol,
.ql-snow .ql-editor ul{
  padding-left: 0.8em;
font-size: 14px;
}

.ql-snow .ql-editor li:not(.ql-direction-rtl){
  padding-left: 0.9em;
}

.ql-snow .ql-editor li:not(.ql-direction-rtl)::before{
  width: 0.9em;
  margin-left: -0.9em;
  margin-right: 0.4em;
  text-align: left;
}

.ql-snow .ql-editor ul > li::before,
.ql-snow .ql-editor li[data-list="bullet"]::before{
  content: "✦";
  color: var(--theme);
}

/* divider 버튼 아이콘 */
.ql-snow.ql-toolbar button.ql-divider::after,
.ql-snow .ql-toolbar button.ql-divider::after{
  content: "―";
  font-size: 15px;
}

/* hr / 이미지 출력 스타일 (작성·출력 공통) */
.ql-editor hr,
.record-body hr{
  border: none;
  border-top: 1px solid var(--theme);
  margin: 22px 0;
}

.ql-editor img,
.record-body img{
  max-width: 100%;
  height: auto;
}

/* 출력 영역을 ql-editor로 감쌌으므로 중복 패딩 제거 */
.record-body .ql-editor{
  padding: 0;
}

/* =========================
   MOBILE  (max-width: 768px)
   ※ style.css 맨 끝에 그대로 추가
========================= */

@media (max-width: 768px){

  /* 0. 세로 스크롤 허용 (기존 overflow:hidden 해제) */
  html, body{
    overflow-y: auto;
    overflow-x: hidden;
    height: auto;
    min-height: 100%;
  }

  .site{
    height: auto;
    min-height: 100vh;
    padding: 24px 18px 50px;   /* 하단 여백 축소 */
    overflow: visible;
  }

  /* 커서 글로우는 모바일에서 불필요 */
  .cursor-glow{ display: none; }

  /* 1. 상단바: 로고/메뉴 세로 정렬
     HOME 제거 → 로고 클릭으로 대체. 네비를 아래로 내려 BGM 버튼과 겹침 방지 */
  .topbar{
    flex-direction: column;
    height: auto;
    gap: 18px;
    align-items: flex-start;
    padding-top: 8px;
  }
  .logo-wrap{
    position: static;
  }
  .logo-wrap h1{ font-size: 22px; }
  #homeNav{ display: none; }
  .topbar nav{
    width: 100%;
    gap: 17px;
    margin: 10px 0 20px 0;
    overflow-x: visible;
    padding-bottom: 6px;
  }
  .topbar nav a{ white-space: nowrap; }
  .topbar nav a.active::after{ bottom: -6px; }

  /* 로그인/공개 버튼은 우상단 고정 + 어느 페이지에서도 위로 */
  .auth-btn{
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 100000;          /* 4번: 상세페이지(z-index:100)보다 위 */
  }
  #publicToggleButton{ right: 60px !important; }

  /* 2. 홈: 3단 → 세로 1단 */
  .main-grid:not([style*="none"]){
    display: flex !important;
    flex-direction: column;
    height: auto;
    gap: 40px;
  }
  .left-area{ padding-top: 0px; }
  .left-line{ display: none; }

  #mainTitle{
    font-size: 56px;
    width: auto !important;
    max-width: 100%;
  }
  #subTitle{ font-size: 34px; }
  .description{
    width: 100% !important;
    font-size: 18px;
    margin-top: 28px;
  }
  #editArchiveButton{ width: 100%; max-width: 280px; }

  .center-area{ padding-left: 0; }
  .news-panel,
  .profile-card{
    width: 100%;
    min-height: auto;
  }
  .profile-card{
    height: auto;
    gap: 13px;
  }

  /* 라이트: STANDING IMAGE를 최상단으로 */
  .right-area{
    min-height: auto;
    display: flex;
    flex-direction: column;
  }
  .main-grid{ position: relative; }
  .right-area{ order: -1; }
  .project-info{ display: none; }
  .archive-label{ display: none; }
  .project-info h2{ font-size: 64px; }
  #characterImage{
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    max-width: 360px;
    display: block;
    margin: 30px auto 0px;
    order: 1;
  }
  .profile-card img{ width: 130px; }

  /* 3. 캐릭터 페이지 */
  .character-sidebar span{ display: none; }
  .character-sidebar li{ font-size: 12px; }
  .character-page{
    position: static;
    inset: auto;
    padding: 10px 0px 40px;
  }
  .character-layout{
    display: flex !important;
    flex-direction: column;
    gap: 18px;
    height: auto;
  }
  .character-center{
    height: auto;
    overflow: visible;
    padding-right: 0;
    padding-bottom: 20px;   /* 여백 축소 */
  }
  .character-sidebar{
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding-top: 0;
    padding-bottom: 16px;
  }
  .character-sidebar h2{ font-size: 38px; margin-bottom: 18px; }
  .character-sidebar ul{
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px 10px;
  }
  .character-header{ margin: 30px 0px 22px; }
  .character-header h1{ font-size: 40px; }
  /* 1번: 제목과 버튼을 세로로 쌓아 버튼을 아래 줄로 */
  .character-header{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .character-actions{
    width: 100%;
    gap: 10px;
  }
  .character-actions button{
    min-width: 0;
    padding: 0 16px;
    white-space: nowrap;     /* +ADD 글자 두 줄 방지 */
  }
  .character-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
    padding-bottom: 20px;   /* 여백 축소 */
  }
  #sortSelect{ min-width: 100px; }
  .character-card{ margin-bottom: 15px; }
  .character-card-content{ padding: 16px 12px; }
  .character-card img{ height: 200px; }
  .character-card h3{ font-size: 20px; }
  .character-card p{ font-size: 11px; line-height: 1.6; }

  /* 4. 프로필 상세: 좌우 2단 → 세로 1단
     fixed 모달 유지. 스크롤은 안쪽 .profile-shell이 담당(버튼 고정 위함) */
  .character-profile{
    position: fixed;
    inset: 0;
    height: 100%;
    overflow: hidden;
    padding: 12px;
  }
  .profile-shell{
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 90px;   /* BACK 버튼 공간 */
  }
  .profile-top{
    height: auto;
    padding: 14px 18px;
    flex-wrap: wrap;
    gap: 10px;
  }
  .profile-top-left span,
  .profile-top-left h2{ font-size: 30px; }
  .profile-body{
    display: flex !important;
    flex-direction: column;
    overflow: visible;
  }
  .profile-left-panel{
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 24px 18px;
  }
  .profile-right-panel{
    padding: 24px 18px;
    overflow: visible;
  }
  .profile-tabs{ overflow-x: auto; }
  .profile-tab{ padding: 0 10px; }
  .profile-content{ overflow: visible; }
  #addMemoButton{ font-size: 12px; }

  /* 관계도 원형 → 세로 구조로 정렬 */
  .relationship-circle{
    margin-top: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
    pointer-events: auto;
  }
  .relationship-circle::before{ display: none; }
  .relationship-center{
    order: -1;
    width: 100%;
    max-width: 240px;
    margin: 0 auto 8px;
  }
  .relationship-center img{ height: 200px; }
  .relationship-layout{
    position: static;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .relation-slot{
    position: static !important;
    transform: none !important;
    width: 100%;
    text-align: left;
  }
  .relationship-item{
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
  }
  .relationship-item img{ flex-shrink: 0; }
  .relationship-item h5,
  .relationship-item p,
  .relationship-item span{ margin-top: 0; }

  /* STATUS: 2단 → 1단 */
  .status-layout{
    display: flex !important;
    flex-direction: column;
    gap: 18px;
  }
  .status-info{ min-height: auto; }
  .radar-wrapper{ height: auto; }
  #statRadar{ width: 100%; height: auto; }
  .radar-label, .radar-value{ font-size: 19px; }
  .timeline-card{ padding: 0; }
  .timeline-item h4{
    font-size: 18px;
    line-height: 1.3;
    margin: 5px 0;
  }
  .story-content{
    font-size: 15px;
    line-height: 1.5;
  }
  .profile-edit-grid{
    display: flex !important;
    flex-direction: column;
    gap: 14px;
  }

  /* 5. 모달 전반: 고정폭 → 화면 맞춤 */
  .editor-modal{
    width: 92vw;
    max-height: 86vh;
    padding: 24px;
  }
  .editor-grid{
    display: flex !important;
    flex-direction: column;
    gap: 0;
  }
  .editor-modal h2{ font-size: 24px; }

  /* 편집 모달 하단 버튼(SAVE/EXPORT/IMPORT/CLOSE 등): 2열 줄바꿈 */
  .editor-buttons{
    flex-wrap: wrap;
    gap: 10px;
  }
  .editor-buttons button{
    flex: 1 1 calc(50% - 5px);
    min-width: 0;
    height: 50px;
    font-size: 13px;
    white-space: nowrap;
  }
  /* 관계/스탯 편집 모달 버튼 */
  .relation-editor-buttons{
    flex-wrap: wrap;
    gap: 10px;
  }
  .relation-editor-buttons button{
    flex: 1 1 calc(50% - 5px);
    min-width: 0;
    white-space: nowrap;
  }
  /* 캐릭터 헤더 정렬/추가 버튼 */
  .character-actions{ gap: 8px; }
  .character-actions button{ min-width: 0; padding: 0 14px; }

  .story-modal-box{
    width: 94vw !important;
    height: auto !important;
    max-height: 88vh;
    overflow-y: auto;            /* 3번: 모달 안에서 스크롤하며 입력 */
    -webkit-overflow-scrolling: touch;
    padding: 24px !important;
    border-radius: 20px !important;
  }
  .story-modal-top h2{ font-size: 36px !important; }
  /* 입력칸이 납작해지지 않게 최소 높이 확보(눌리지 않음) */
  #storyContentInput{
    height: auto;
    min-height: 240px;
    flex: none;
  }
  #memoEditor textarea,
  #memoEditor input{ flex: none; }
  #memoEditor textarea{ min-height: 240px; height: auto; }

  /* STORY/MEMO 등 모달 푸터 버튼: 고정폭 해제 → 글자 안 쪼개지게 */
  .story-footer{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
  }
  .story-footer > div{
    display: flex;
    gap: 10px;
    flex: 1;
  }
  .story-footer button{
    flex: 1;
    min-width: 0;
    width: auto !important;
    height: 48px !important;
    padding: 0 12px !important;
    white-space: nowrap;
    font-size: 14px;
  }
  #deleteStoryButton{
    flex: 0 0 auto;
    width: auto !important;
    padding: 0 16px !important;
  }

  #projectMemoEditor .story-modal-box{
    width: 94vw !important;
    border-radius: 20px !important;
  }
  #projectMemoQuill .ql-editor{ max-height: 300px; }

  .relation-editor-box{
    width: 92vw;
    padding: 24px;
  }

  .character-list-box{ width: 92vw; }

  /* 6. AU 리스트 & 상세: 상세페이지 스크롤 중첩 해제 */
  .project-grid{ grid-template-columns: 1fr; gap: 16px; }
  .project-thumb{ height: 280px; }

  .project-detail-page{
    padding: 24px 0px 90px;
    height: auto;
    overflow: visible;
  }
  .list-header-h1{ margin-top: 30px; margin-bottom: 0px; }
  .list-page{ padding-bottom: 40px; }   /* 여백 축소 */
  /* 2번: AU LIST 제목 + ADD PROJECT를 한 줄에(버튼 기준 우선) */
  .list-header{
    flex-wrap: nowrap;
    gap: 12px;
    align-items: center;
  }
  .list-header .list-header-h1{
    flex: 1 1 auto;
    min-width: 0;
    font-size: 16px;
    letter-spacing: 5px;     /* 9px → 5px, 좁은 폭에서 줄바꿈 방지 */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  #addProjectButton{
    flex: 0 0 auto;          /* 버튼은 줄어들지 않음(기준) */
    white-space: nowrap;
    margin-top: 26px;        /* 제목 라인과 맞춤 */
  }

  .archive-detail-layout{
    display: flex !important;
    flex-direction: column;
    gap: 30px;
  }
  .archive-detail-main{
    display: flex !important;
    flex-direction: column;
    gap: 24px;
  }
  .archive-detail-image{ height: 280px; }
  .archive-detail-info h2{ font-size: 36px; }
  .archive-character-grid{
    flex-direction: column;
    gap: 18px;
  }
  .archive-detail-world{
    max-height: none;
    overflow: visible;
    padding-left: 0;
    border-left: none;
    border-top: 1px solid var(--borderColor);
    padding-top: 24px;
  }
  .records-preview .record-row-mini{ max-width: 100%; }
  .memo-board{ max-width: 100%; padding-bottom: 40px; }   /* 여백 축소 */

  /* RECORDS 게시판 행: 가로 그리드 → 세로 정렬 */
  .record-row-head{
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "date    actions"
      "title   title";
    align-items: center;
    gap: 6px 10px;
    height: auto;
    padding: 16px 18px;
  }
  .record-date{
    grid-area: date;
    min-width: 0;
  }
  .record-title{
    grid-area: title;
    font-size: 17px;
    line-height: 1.4;
    word-break: break-word;
  }
  .record-actions{
    grid-area: actions;
    justify-self: end;
  }

  /* 7. WORLD */
  .world-page{
    position: static;
    inset: auto;
    padding: 24px 0px 90px;
    height: auto;
  }
  .world-hero{
    display: block !important;
    height: auto;
  }
  .world-hero-image{
    width: 100% !important;
    max-width: 100%;
    height: auto;
    overflow: visible;
    border-radius: 0;
  }
  #worldHeroImage{ display: none !important; }
  .world-hero-overlay{
    position: static;
    left: auto;
    top: auto;
    max-width: 100%;
    padding: 40px 22px;
    border: 1px solid var(--borderColor);
    border-radius: 18px;
    background: color-mix(in srgb, var(--theme) 6%, white);
  }
  .world-hero-label{
    color: var(--subtext);
    font-size: 12px;
    letter-spacing: 3px;
  }
  .world-hero-title{
    font-size: 38px;
    color: var(--text);
    margin: 12px 0;
  }
  .world-hero-subtitle{ color: var(--theme); margin-bottom: 18px; }
  .world-hero-quote{
    font-size: 18px;
    line-height: 1.7;
    margin-bottom: 18px;
    color: var(--text);
    font-weight: 600;
  }
  .world-hero-desc{
    color: var(--subtext);
    max-width: 100%;
    line-height: 1.8;
    font-size: 14px;
  }
  .world-enter{
    position: static;
    width: 100%;
    height: 52px;
    border-radius: 12px;
    border: 1px solid var(--theme);
    color: var(--theme);
    font-size: 24px;
    margin-top: 20px;
    backdrop-filter: none;
  }
  .world-setting-btn{
    top: 14px;
    right: 14px;
    color: var(--theme);
  }
  .world-grid{ gap: 12px; margin-top: 40px; }
  .world-card,
  .world-setting{
    display: flex !important;
    flex-direction: column;
    height: auto;
    padding: 22px 0px;
    gap: 8px;
    border: 3px solid var(--borderColor);
  }
  .world-card-enter{
    font-size: 12px;
    border: 1px solid var(--subtext);
    padding: 3px 13px;
  }
  .world-card:hover,
  .world-setting:hover{ padding-left: 18px; }
  .world-card-icon{ justify-content: flex-start; color: var(--borderColor); font-size: 14px; }
  .world-card::before,
  .world-setting::before{ display: none; }
  .world-detail-page{ padding: 80px 20px 90px; }
  .world-detail-header h1{ font-size: 44px; }
  .world-detail-number{ font-size: 44px; }
  .world-detail-subtitle{ font-size: 20px; }
  .world-edit-btn{ position: static; margin-top: 14px; }

  /* 8. ABOUT */
  .about-layout{
    display: flex !important;
    flex-direction: column;
    gap: 40px;
    margin-top: 30px;
  }
  .about-right{
    order: -1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  #aboutPageTitle{ font-size: 56px; }
  .about-link-card{
    grid-template-columns: 60px 50px 1fr;
    padding: 0 18px;
    min-height: 90px;
  }
  .about-link-number{ font-size: 32px; }
  .about-link-content{ min-width: 0; }
  .about-link-content h3{ font-size: 22px; }
  .about-link-url{
    display: block;
    font-size: 13px;
    word-break: break-all;
    overflow-wrap: anywhere;
  }
  .polaroid{
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    transform: rotate(-2deg);
  }
  .polaroid img{ height: 340px; }
  .about-page::before{ display: none !important; }

  /* 9. BGM: 재생/정지 버튼만 우상단 로그인 아래로 */
  .bgm-player{
    all: unset;
    position: fixed;
    top: 62px;
    right: 14px;
    z-index: 100000;          /* 상세페이지보다 위로 */
    display: block;
  }
  .bgm-left .bgm-text,
  .bgm-wave,
  #bgmVolume,
  .bgm-upload-label,
  #bgmUpload{
    display: none !important;
  }
  .bgm-left{
    all: unset;
    display: block;
  }
  #bgmToggle{
    width: 38px;
    height: 38px;
    border: 1px solid var(--borderColor);
    border-radius: 50%;
    background: rgba(255,255,255,.7);
    backdrop-filter: blur(12px);
    color: var(--theme);
    font-size: 12px;
  }
  #bgmToggle:hover{
    background: color-mix(in srgb, var(--theme) 12%, white);
  }

  /* 10. 최종 상세페이지: 우측 하단 원형 BACK 버튼
     반투명 글래스 + theme 화살표, 크기 61px */
  .world-detail-back,
  #backToList,
  #closeProfileButton{
    position: fixed;
    right: 16px;
    bottom: 20px;
    left: auto;
    top: auto;
    transform: none;
    margin: 0;
    width: 61px;
    height: 61px;
    padding: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.38);
    backdrop-filter: blur(18px);
    border: 1px solid color-mix(in srgb, var(--theme) 12%, transparent);
    box-shadow: 0 6px 20px rgba(0,0,0,.12);
    z-index: 9998;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    letter-spacing: 0 !important;
    text-indent: -9999px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .world-detail-back::before,
  #backToList::before,
  #closeProfileButton::before{
    content: "←";
    color: var(--theme);
    font-size: 26px;
    line-height: 1;
    text-indent: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

}

/* =========================
   MOBILE END
========================= */