*{box-sizing:border-box}
:root{--blue:#2f86e9;--blue2:#8ec9ff;--blue3:#dceeff;--navy:#1d3557;--ink:#33383f;--paper:#fbfbf5;--yellow:#F9ECA7;--line:#cdd6df;--shadow:rgba(30,55,88,.22);--green:#2fb66d;--red:#ef5b5b}
html,body{margin:0;min-height:100%;background:#dce7ef;color:var(--ink);font-family:"Nunito","Pretendard",sans-serif}
body{background:linear-gradient(rgba(255,255,255,.34),rgba(255,255,255,.34)),repeating-linear-gradient(0deg,transparent 0 31px,rgba(67,103,138,.10) 31px 32px),repeating-linear-gradient(90deg,transparent 0 31px,rgba(67,103,138,.10) 31px 32px),#d8e2ea;overflow-x:hidden;cursor:url("./assets/cursor.svg") 5 5,auto}
button,a{cursor:url("./assets/cursor-pointer.svg") 6 2,pointer}
.noise{position:fixed;inset:0;pointer-events:none;opacity:.08;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E")}
.topbar{width:min(1180px,calc(100% - 28px));margin:18px auto 0;display:flex;justify-content:space-between;align-items:center;gap:12px}
.brand-chip{font-weight:900;letter-spacing:.12em;font-size:13px;background:#1e2024;color:#fff;padding:10px 16px;border-radius:4px;box-shadow:4px 4px 0 var(--blue)}
.top-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.mini-btn,.live-pill{border:2px solid #30343a;background:#fff;color:#2e3338;padding:8px 11px;font:800 12px "Nunito";box-shadow:3px 3px 0 #30343a;border-radius:3px;text-decoration:none}
.live-pill{display:inline-flex;gap:6px;align-items:center}
.live-pill i{width:8px;height:8px;border-radius:50%;background:#aaa}
.live-pill.is-live{background:var(--yellow)}
.live-pill.is-live i{background:#ff4343;box-shadow:0 0 0 0 rgba(255,67,67,.6);animation:pulse 1.5s infinite}
.live-pill:not(.is-live){opacity:.72}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(255,67,67,0)}100%{box-shadow:0 0 0 0 rgba(255,67,67,0)}}
.desk{padding:18px 14px 42px}
.notebook{position:relative;width:min(1180px,100%);margin:auto;display:grid;grid-template-columns:36% 64%;background:var(--paper);border:1px solid #c8c8c1;box-shadow:0 25px 65px var(--shadow),0 3px 0 #fff inset;border-radius:9px 4px 4px 9px;overflow:visible;align-items:stretch}
.notebook:before{content:"";position:absolute;left:36%;top:0;bottom:0;width:1px;background:#c9c4b8;box-shadow:-7px 0 18px rgba(0,0,0,.09),7px 0 18px rgba(0,0,0,.08);z-index:4}
.left-page,.right-page{position:relative;min-width:0}
.left-page{padding:62px 42px 35px 55px;background:linear-gradient(90deg,transparent 45px,rgba(234,102,102,.24) 46px,rgba(234,102,102,.24) 47px,transparent 48px),repeating-linear-gradient(0deg,transparent 0 27px,rgba(95,152,206,.10) 27px 28px),var(--paper);overflow:hidden}
.right-page{padding:42px 128px 38px 52px;background:radial-gradient(circle at 1px 1px,rgba(73,83,94,.15) 1px,transparent 1.2px) 0 0/18px 18px,linear-gradient(rgba(255,255,255,.72),rgba(255,255,255,.72)),var(--paper)}
.spiral{position:absolute;z-index:8;left:calc(36% - 13px);top:38px;bottom:38px;width:26px;display:flex;flex-direction:column;justify-content:space-around;pointer-events:none}
.spiral span{width:28px;height:10px;border-radius:10px;border:3px solid #333;background:#d2d7db;transform:rotate(-2deg);box-shadow:0 2px 1px rgba(0,0,0,.2)}
.tape{position:absolute;width:108px;height:31px;background:rgba(255,227,79,.78);transform:rotate(-8deg);top:45px;left:96px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
.polaroid{background:#fff;padding:12px 12px 20px;box-shadow:0 6px 14px rgba(0,0,0,.15);transform:rotate(-2deg);border:1px solid #ddd}
.profile-image{aspect-ratio:1/.82;background:linear-gradient(135deg,rgba(255,255,255,.1),rgba(255,255,255,.35)),linear-gradient(135deg,var(--blue),#a8d8ff 60%,#fff);position:relative;display:grid;place-items:center;overflow:hidden;background-size:cover;background-position:center}
.profile-image.has-image .sun-doodle,.profile-image.has-image .placeholder-text{display:none}
.profile-image:before,.profile-image:after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.65);filter:blur(.2px);pointer-events:none}
.profile-image.has-image:before,.profile-image.has-image:after{display:none}
.profile-image:before{width:160px;height:160px;right:-55px;top:-70px}.profile-image:after{width:100px;height:100px;left:-30px;bottom:-40px}
.sun-doodle{font-size:82px;filter:grayscale(1);opacity:.22}.placeholder-text{position:absolute;font:900 13px "Nunito";letter-spacing:.35em;color:#25547b}
.profile-caption{padding-top:11px;text-align:center;font:700 22px "Nanum Pen Script";color:#2a628f}
.sticker.hello{display:inline-block;background:var(--yellow);padding:7px 12px;font-weight:900;transform:rotate(3deg);margin:21px 0 8px;box-shadow:3px 3px 0 #30343a}
.memo{border:2px dashed #5f9ed3;background:#eaf5ff;padding:14px 16px;margin:4px 0 16px;transform:rotate(.5deg)}
.memo strong{font:700 20px "Gaegu";text-transform:uppercase}.memo p{font:400 20px "Gaegu";margin:6px 0 0;white-space:pre-wrap}
.tiny-stats{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.tiny-stats span{border:1px solid #3d4348;background:#fff;padding:7px 9px;font-size:11px}.tiny-stats b{color:var(--blue);font-size:15px}
.broadcast-card{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;text-decoration:none;color:#fff;background:#292d31;border:2px solid #1d2023;padding:11px 13px;box-shadow:5px 5px 0 var(--blue)}
.broadcast-icon{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--blue)}.broadcast-card small{display:block;font-size:9px;opacity:.7;margin-top:2px}.doodle-line{font:700 22px "Gaegu";color:var(--blue);letter-spacing:.25em;margin-top:25px}
.paper-header{display:flex;justify-content:space-between;align-items:end;border-bottom:4px solid #2f3235;padding:0 0 10px;margin-bottom:22px}
.eyebrow{font-size:11px;font-weight:900;letter-spacing:.2em;color:var(--blue)}.paper-header h1{font:900 clamp(32px,5vw,56px)/.9 "Nunito";letter-spacing:-.06em;margin:5px 0 0;color:#2a2e32}.date-stamp{font:700 18px "Gaegu";border:2px solid var(--blue);color:var(--blue);padding:4px 7px;transform:rotate(-3deg)}
.page-content{position:relative;animation:pageIn .28s ease}.page-content>*:last-child{margin-bottom:0}
@keyframes pageIn{from{opacity:.15;transform:translateX(12px) rotateY(-2deg)}to{opacity:1;transform:none}}
.index-tabs{position:absolute;right:-16px;top:88px;display:flex;flex-direction:column;gap:7px;z-index:10;overflow:visible}
.tab{position:relative;width:128px;border:1px solid #b9a900;border-right:none;border-radius:7px 0 0 7px;background:var(--yellow);padding:9px 24px 9px 11px;text-align:left;font:800 11px "Nunito";box-shadow:-4px 0 5px rgba(0,0,0,.12);transition:box-shadow .18s ease;overflow:visible}.tab:nth-child(even){background:#a9d7ff;border-color:#6ca9d8}.tab b{display:inline-grid;place-items:center;width:22px;height:22px;background:#fff;border:1px solid #333;margin-right:5px;font-size:9px}
.home-collage{min-height:520px;position:relative}
.hero-note{position:absolute;left:0;top:3px;width:52%;background:#fff;border:2px solid #35393e;padding:20px 22px;box-shadow:7px 7px 0 #b9dbf7;transform:rotate(-1deg)}
.yellow-label{background:var(--yellow);font:900 11px "Nunito";padding:5px 8px;display:inline-block}.hero-note h2{margin:10px 0 7px;font:900 clamp(32px,4vw,49px)/.9 "Nunito";letter-spacing:-.07em}.hero-note h2 em{color:var(--blue);font-style:normal}.hero-note p{font:400 20px "Gaegu";margin:12px 0;white-space:pre-wrap}.scribble{font:700 19px "Nanum Pen Script";color:#397bb1;border-top:1px dashed #91a7b8;padding-top:7px}
.track-card{position:absolute;right:0;top:16px;width:42%;background:#fefefe;border:2px solid var(--blue);box-shadow:6px 6px 0 #333;padding:13px;transform:rotate(1deg)}.track-title{background:var(--blue);color:#fff;font-size:23px;font-weight:900;padding:8px 10px;margin-bottom:8px}.track-row{display:grid;grid-template-columns:1fr 1.25fr;border-top:1px solid #91b7da;font-size:11px;padding:8px 3px}.track-row span{font-weight:900;color:var(--blue)}
.notice-note{position:absolute;left:8%;top:190px;width:42%;background:#F9ECA7;border:1px solid #c9b840;padding:18px 18px 14px;transform:rotate(2deg);box-shadow:4px 6px 10px rgba(0,0,0,.13);font:400 20px "Gaegu"}.notice-note .pin{position:absolute;top:-10px;left:50%;color:#333}.notice-note p{margin:7px 0 0;white-space:pre-wrap}
.photo-strip{position:absolute;right:1%;bottom:9px;width:46%;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;background:#292c30;padding:8px;transform:rotate(-1.2deg)}.photo-strip div{aspect-ratio:.78;background:linear-gradient(145deg,#c8e8ff,#6eb4ee);position:relative;display:grid;place-items:center;color:#fff;background-size:cover;background-position:center}.photo-strip span{position:absolute;top:4px;left:5px;font-size:9px;font-weight:900}.photo-strip i{font-style:normal;font-size:9px;letter-spacing:.15em}
.sticker-star{position:absolute;right:28%;top:185px;width:74px;height:74px;display:grid;place-items:center;background:var(--blue);color:var(--yellow);font-size:38px;clip-path:polygon(50% 0,61% 35%,98% 36%,68% 57%,79% 94%,50% 72%,21% 94%,32% 57%,2% 36%,39% 35%)}.sticker-smile{position:absolute;right:4%;top:198px;background:#2c3035;color:#fff;border-radius:50%;width:68px;height:68px;display:grid;place-items:center;font:700 24px "Gaegu";border:7px solid #79bdff;transform:rotate(9deg)}.blue-wave{position:absolute;left:-24px;bottom:-19px;width:47%;height:74px;background:var(--blue);border-radius:50% 60% 5px 10px;transform:rotate(5deg);opacity:.85}
.sheet{background:rgba(255,255,255,.84);border:1px solid #b8c7d3;padding:20px;box-shadow:5px 5px 0 rgba(47,134,233,.16)}.sheet h2{margin:0 0 15px;font:900 26px "Nunito"}.sheet h3{font:700 22px "Gaegu";color:#2c75b2;margin:17px 0 8px}.sheet p{white-space:pre-wrap}.profile-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:15px}.info-list{display:grid;gap:8px}.info-row{display:grid;grid-template-columns:100px 1fr;border-bottom:1px dashed #91a8bc;padding:7px 3px}.info-row b{color:var(--blue)}.badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}.badge{background:#e9f4ff;border:1px solid #5a9bd1;padding:6px 9px;font-size:12px}.badge:nth-child(3n){background:var(--yellow);border-color:#c2aa1a}
.karma-list,.guest-list,.song-list,.playlist-list{display:grid;gap:10px}.item-card{background:#fff;border:1px solid #9eb2c3;border-left:7px solid var(--blue);padding:12px 14px;box-shadow:2px 2px 0 #d9e7f2}.item-card small{color:#7e8c96}.item-card b{display:block;margin-bottom:4px}.karma-card{position:relative;border-left-width:10px;padding-right:92px}.karma-card.in_progress{border-left-color:#2f86e9;background:linear-gradient(90deg,#eaf5ff 0,#fff 34%)}.karma-card.done{border-left-color:#38ad6a;background:linear-gradient(90deg,#e8f8ef 0,#fff 34%);opacity:.9}.karma-status{position:absolute;right:12px;top:12px;border:2px solid;padding:6px 10px;font-size:11px;font-weight:900;border-radius:999px}.karma-card.in_progress .karma-status{color:#1769af;background:#dcedff;border-color:#2f86e9}.karma-card.done .karma-status{color:#187342;background:#dff6e8;border-color:#38ad6a}.karma-card.done .karma-title{text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:#77b990}
.calendar{display:grid;grid-template-columns:repeat(7,1fr);border:2px solid #2d343a;background:#fff}.calendar>div{min-height:64px;border:1px solid #d2d9df;padding:6px;font-size:11px;position:relative}.calendar .dow{min-height:auto;background:#2f86e9;color:#fff;text-align:center;font-weight:900}.calendar .event span{display:block;background:#F9ECA7;padding:3px;margin-top:7px;font:700 12px "Gaegu";transform:rotate(-1deg)}
.form-row{display:flex;gap:7px;margin:9px 0}.form-row input,.form-row textarea,.form-row select{width:100%;border:2px solid #9aaebb;background:#fff;padding:9px;font-family:inherit}.form-row textarea{min-height:80px;resize:vertical}.action{border:2px solid #30343a;background:var(--yellow);font-weight:900;padding:9px 14px;box-shadow:3px 3px 0 #30343a}
.closet-filter{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:15px}.closet-filter button{border:1px solid #4a6376;background:#fff;padding:7px 10px;font-weight:800}.closet-filter button.active{background:var(--yellow)}.closet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.outfit{background:#fff;border:1px solid #aac0d2;padding:8px}.outfit .thumb{aspect-ratio:1;background:linear-gradient(135deg,#d9edff,#80bff4);display:grid;place-items:center;font-weight:900;color:#fff;letter-spacing:.1em;background-size:cover;background-position:center}.outfit p{margin:7px 2px 2px;font-size:12px}
.song-toolbar{display:flex;gap:8px;margin-bottom:12px}.song-toolbar input{flex:1;border:2px solid #9aaebb;padding:9px}.song-title{display:flex;justify-content:space-between;gap:12px}.song-title em{font-style:normal;color:#2f86e9;font-size:11px}
.empty-note{border:2px dashed #9db4c6;background:#f8fcff;padding:28px;text-align:center;font:700 20px "Gaegu";color:#70889b}
.particles-star{position:fixed;z-index:30;pointer-events:none;font-size:18px;animation:particle .9s ease-out forwards;transform:translate(-50%,-50%)}@keyframes particle{0%{opacity:1;transform:translate(-50%,-50%) scale(.8) rotate(0)}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.4) rotate(160deg)}}

/* v2.7: 오른쪽 인덱스 메뉴 실제 좌우 움직임 */
@keyframes sideIndexFloat{
  0%,100%{transform:translateX(0)}
  45%{transform:translateX(-10px)}
  60%{transform:translateX(-10px)}
}
.index-tabs .tab{
  animation:sideIndexFloat 2.15s ease-in-out infinite !important;
  will-change:transform;
}
.index-tabs .tab:nth-child(2){animation-delay:.16s !important}
.index-tabs .tab:nth-child(3){animation-delay:.32s !important}
.index-tabs .tab:nth-child(4){animation-delay:.48s !important}
.index-tabs .tab:nth-child(5){animation-delay:.64s !important}
.index-tabs .tab:nth-child(6){animation-delay:.80s !important}
.index-tabs .tab:nth-child(7){animation-delay:.96s !important}
.index-tabs .tab:nth-child(8){animation-delay:1.12s !important}

/* 선택/호버 시 조금 더 앞으로. 그림자는 아래가 아니라 왼쪽 옆에만 */
.index-tabs .tab:hover,
.index-tabs .tab.active{
  animation-name:sideIndexFloatActive !important;
  box-shadow:-7px 0 0 #2e3236,-9px 0 10px rgba(0,0,0,.10) !important;
}
@keyframes sideIndexFloatActive{
  0%,100%{transform:translateX(-4px)}
  45%{transform:translateX(-14px)}
  60%{transform:translateX(-14px)}
}

/* 탭 자체를 오른쪽으로 16px 더 길게 숨겨두어 움직여도 흰 빈 공간이 생기지 않음 */

@media(max-width:900px){.notebook{display:block;border-radius:8px;overflow:hidden}.notebook:before,.spiral{display:none}.left-page{padding:40px 28px 24px}.right-page{padding:34px 18px 110px}.index-tabs{position:fixed;left:8px;right:8px;bottom:8px;top:auto;display:flex;flex-direction:row;overflow-x:auto;gap:5px;background:rgba(255,255,255,.93);padding:7px;border:1px solid #b9c4cd;border-radius:10px;backdrop-filter:blur(10px);z-index:90}.tab{min-width:88px;width:auto;border:1px solid #b9a900;border-radius:7px;padding:7px 8px}.tab:hover{transform:translateY(-2px)}.tab.active{transform:none;box-shadow:inset 0 -4px 0 #30343a}.tab b{display:none}.profile-card{max-width:390px;margin:auto}.home-collage{min-height:0;height:auto;display:grid;gap:14px}.hero-note,.track-card,.notice-note,.photo-strip,.sticker-star,.sticker-smile,.blue-wave{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:auto;transform:none}.sticker-star,.sticker-smile{position:absolute;right:12px;top:155px;width:52px;height:52px}.sticker-star{right:72px}.photo-strip{grid-column:1/-1}.profile-grid{grid-template-columns:1fr}.closet-grid{grid-template-columns:repeat(2,1fr)}.topbar{align-items:flex-start}.brand-chip{font-size:10px}.mini-btn,.live-pill{font-size:10px;padding:7px}}
@media(max-width:520px){.desk{padding:10px 7px 85px}.topbar{width:calc(100% - 14px);margin-top:8px}.left-page{padding:31px 18px 22px}.right-page{padding:28px 13px 105px}.paper-header h1{font-size:37px}.paper-header{align-items:center}.date-stamp{font-size:14px}.closet-grid{grid-template-columns:1fr 1fr}.calendar>div{min-height:52px;padding:3px;font-size:9px}.calendar .event span{font-size:10px}.admin-link{display:none}}
/* v2.2: HOME collage overlap fix */
@media (min-width:901px){
  .home-collage{min-height:590px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.9fr);grid-template-areas:'hero track' 'notice photos';gap:28px 30px;align-items:start;padding-bottom:8px}
  .home-collage .hero-note{grid-area:hero;position:relative;left:auto;right:auto;top:auto;bottom:auto;width:auto;transform:rotate(-1deg);z-index:2}
  .home-collage .track-card{grid-area:track;position:relative;left:auto;right:auto;top:auto;bottom:auto;width:auto;transform:rotate(1deg);z-index:2}
  .home-collage .notice-note{grid-area:notice;position:relative;left:auto;right:auto;top:auto;bottom:auto;width:88%;margin:4px 0 0 22px;transform:rotate(2deg);z-index:3}
  .home-collage .photo-strip{grid-area:photos;position:relative;left:auto;right:auto;top:auto;bottom:auto;width:auto;margin-top:12px;transform:rotate(-1.2deg);z-index:2}
  .home-collage .sticker-star{right:38%;top:230px;z-index:4}
  .home-collage .sticker-smile{right:2%;top:230px;z-index:4}
  .home-collage .blue-wave{left:-24px;bottom:-8px;z-index:0}
}
/* v2.3: NOTICE position + index gap fix */
@media (min-width:901px){
  .home-collage{row-gap:12px}
  .home-collage .notice-note{margin:-6px 0 0 22px}
  .home-collage .photo-strip{margin-top:2px}
  .index-tabs{right:-1px}
  .tab,.tab:hover,.tab:focus,.tab:focus-visible,.tab.active{
    width:114px;
    transform:none !important;
    outline:none;
  }
  .tab.active{box-shadow:inset 4px 0 0 #30343a,-3px 3px 5px rgba(0,0,0,.08)}
}
@media(max-width:900px){
  .tab,.tab:hover,.tab:focus,.tab:focus-visible,.tab.active{transform:none !important;outline:none}
}




\n/* v2.5: index motion + no-gap hard override */\n@media (min-width:901px){\n  .right-page{overflow:visible!important;}\n  .index-tabs{right:-1px!important;overflow:visible!important;}\n  .index-tabs .tab{\n    transform:translateX(0)!important;\n    transition:transform .20s cubic-bezier(.2,.8,.2,1),box-shadow .20s ease!important;\n    will-change:transform;\n  }\n  .index-tabs .tab:hover{transform:translateX(-9px)!important;}\n  .index-tabs .tab.active{transform:translateX(-12px)!important;box-shadow:-7px 5px 0 #2e3236!important;}\n  .index-tabs \n}\n


@media(max-width:900px){
  .index-tabs .tab,
  .index-tabs .tab:hover,
  .index-tabs .tab.active{
    animation:none !important;
  }
}