/* ===== BLACK STAR 2005 — Cyworld miniroom skin system ===== */
*{box-sizing:border-box}
:root{
  --body:Dotum,'Malgun Gothic','Apple SD Gothic Neo','Noto Sans KR','Noto Sans CJK KR',sans-serif;
  --font-t:'Jua','Noto Sans KR',sans-serif;
  --paper:#fff;--paper2:#f3f5f7;--ink:#2b3036;--muted:#8a9199;--line:#d6dbe0;
  --accent:#68747f;--accent-ink:#fff;--hi:#68747f;--head:#eef1f3;--head-ink:#2b3036;
  --skinbg:#e6eaec;--bookbg:#cfd5da;--wpbg:#bcc3c8;--wp:none;--room-bg:#e8ecef;--ring:#9aa3ab;--emblem:none;
  --shadow:0 18px 40px #0003;--r:10px;
}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--wpbg);color:var(--ink);font:12px/1.65 var(--body);min-height:100vh;overflow-x:hidden}
.deco{position:fixed;inset:0;z-index:-1;background:var(--wp);background-color:var(--wpbg)}
button{font:inherit;color:inherit}
a{color:var(--hi);text-decoration:none}a:hover{text-decoration:underline}
img{max-width:100%}
.win{max-width:1060px;margin:18px auto;border-radius:6px;box-shadow:var(--shadow);background:var(--skinbg);overflow:hidden;border:1px solid #0006}
.ie{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(90deg,#0a246a,#3a6ea5 60%,#a6caf0);color:#fff;font:bold 11px/1 Tahoma,sans-serif;padding:5px 6px}
.ie-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ie-b{display:flex;gap:2px}.ie-b i{font-style:normal;width:16px;height:14px;background:#d4d0c8;color:#000;text-align:center;line-height:13px;border:1px solid #fff;border-right-color:#444;border-bottom-color:#444;font-size:10px}
.ie-bar{display:flex;gap:8px;align-items:center;background:#d4d0c8;border-bottom:1px solid #808080;padding:3px 8px;font:11px Tahoma,'Malgun Gothic',sans-serif;color:#000}
.ie-addr{flex:1;background:#fff;border:1px solid #808080;padding:1px 6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ie-go{background:#d4d0c8;border:1px solid #fff;border-right-color:#444;border-bottom-color:#444;padding:0 8px}
.skin{padding:14px 16px 12px;background:var(--skinbg);position:relative}
.skin-head{display:flex;align-items:center;gap:16px;padding:6px 10px 14px;position:relative;min-height:84px}
.cnt{font:10px Tahoma,sans-serif;color:var(--muted);white-space:nowrap;align-self:flex-start;padding-top:4px}.cnt b{color:var(--accent)}.cnt i{font-style:normal;opacity:.5;margin:0 3px}
.ttl{flex:1;min-width:0}
.skin-head h1{margin:0;font:400 30px/1.15 var(--font-t);letter-spacing:-.5px;color:var(--ink);overflow-wrap:anywhere}
.slogan{margin-top:3px;font-size:12px;color:var(--muted)}
.emblem{width:64px;height:64px;background:var(--emblem) center/contain no-repeat;flex:none}
.head-btn{background:var(--accent);color:var(--accent-ink);border:0;border-radius:14px;padding:6px 12px;cursor:pointer;font-size:11px;white-space:nowrap;box-shadow:0 2px 0 #0003}
.head-btn:hover{filter:brightness(1.08)}

/* ---- book ---- */
.book{display:grid;grid-template-columns:232px 28px minmax(0,1fr) 88px;background:var(--bookbg);border-radius:16px;padding:16px 0 16px 16px;position:relative;box-shadow:inset 0 0 0 2px #fff6,0 3px 0 #0002}
.left,.right{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:14px;min-width:0;position:relative;color:var(--ink)}
.left{display:flex;flex-direction:column;gap:11px}
.right{min-height:720px}
.rings{background:radial-gradient(circle at 50% 50%,var(--paper2) 0 3.5px,#0006 4px 5px,transparent 5.5px) 0 0/100% 34px repeat-y;position:relative}
.rings:before{content:'';position:absolute;left:3px;right:3px;top:0;bottom:0;background:linear-gradient(90deg,transparent 0 40%,var(--ring) 40% 60%,transparent 60%);opacity:.0}
.rings:after{content:'';position:absolute;left:0;right:0;top:-2px;bottom:-2px;background:repeating-linear-gradient(180deg,transparent 0 17px,var(--ring) 17px 21px,transparent 21px 34px);mask:linear-gradient(90deg,transparent 2px,#000 2px,#000 calc(100% - 2px),transparent 0);-webkit-mask:linear-gradient(90deg,transparent 2px,#000 2px,#000 calc(100% - 2px),transparent 0);border-radius:3px;opacity:.9}
.photo-frame{position:relative;padding:7px;background:#fff;border:1px solid var(--line);box-shadow:0 3px 8px #0003;transform:rotate(-1.4deg);margin:4px 2px 4px}
.photo-frame img{display:block;width:100%;height:262px;object-fit:cover;object-position:center 22%;background:#ddd}
.tape{position:absolute;top:-9px;left:50%;width:62px;height:17px;margin-left:-31px;background:var(--tape,#fff9);transform:rotate(-3deg);box-shadow:0 1px 3px #0002}
.todayis{border:1px dashed var(--line);padding:6px 9px;border-radius:6px;background:var(--paper2);font-size:11px;color:var(--muted)}.todayis em{font-style:normal;font-family:Tahoma,sans-serif;font-size:10px;letter-spacing:.5px}.todayis b{color:var(--accent);margin-left:4px}
.who strong{font:400 19px/1.2 var(--font-t);display:block}.who small{color:var(--muted)}
.status{position:relative;background:var(--paper2);border:1px solid var(--line);border-radius:10px;padding:8px 10px;line-height:1.55;font-size:12px}
.status:before{content:'';position:absolute;top:-6px;left:22px;width:10px;height:10px;background:inherit;border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg)}
.bio{line-height:1.85;color:var(--muted);font-size:11.5px;white-space:pre-line}
.tagline{text-align:center;font-weight:bold;color:var(--accent);letter-spacing:1px;font-size:11px;padding:5px;border-top:1px dotted var(--line);border-bottom:1px dotted var(--line)}
.acorn-box{font-size:11px;text-align:center;color:#8a6a3a;background:#fbf3e3;border:1px solid #ead9b8;padding:5px;border-radius:6px}.acorn-box b{color:#c0392b}
.wave{margin-top:auto;border-top:1px dotted var(--line);padding-top:10px;display:flex;flex-direction:column;gap:6px}.wave label{font-weight:bold;color:var(--accent);font-size:11px}
select,input,textarea{font:inherit;color:var(--ink);background:var(--paper2);border:1px solid var(--line);border-radius:5px;padding:6px 8px;min-width:0}
select{width:100%}textarea{width:100%;min-height:76px;resize:vertical}
input:focus,textarea:focus,select:focus,button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.wave-btns{display:flex;gap:5px}.wave-btns button,.cf button,.inline-form button,#guestForm button{background:var(--accent);color:var(--accent-ink);border:0;border-radius:5px;padding:7px 10px;cursor:pointer;flex:1;font-weight:bold}

/* ---- tabs ---- */
.tabs{display:flex;flex-direction:column;gap:5px;padding-top:46px}
.tabs button{background:var(--accent);color:var(--accent-ink);border:0;border-radius:0 11px 11px 0;padding:13px 6px 13px 10px;cursor:pointer;font-size:12px;text-align:left;box-shadow:inset 3px 0 0 #fff4,2px 2px 0 #0002;transition:transform .12s}
.tabs button:hover{transform:translateX(3px)}
.tabs button.active{background:var(--paper);color:var(--accent);font-weight:bold;transform:translateX(-4px);padding-right:12px;box-shadow:none;border:1px solid var(--line);border-right:0}

/* ---- panels ---- */
.panel{display:none}.panel.active{display:block}
.sec{margin:0 0 14px;padding:7px 12px;font:400 17px/1.3 var(--font-t);background:var(--head);color:var(--head-ink);border-radius:7px;border-left:6px solid var(--accent)}.sec small{font:11px var(--body);color:var(--muted);margin-left:10px}
h3{font:400 14px var(--font-t);margin:16px 0 8px;color:var(--accent)}h3 small{font:11px var(--body);color:var(--muted);margin-left:8px}
.empty{color:var(--muted);padding:14px;text-align:center}
.news{border:1px solid var(--line);border-radius:8px;padding:8px 12px;background:var(--paper2)}.news h3{margin:0 0 6px;font-size:13px}
.news ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.news li{display:flex;align-items:center;gap:6px;cursor:pointer;padding:5px 7px;border-radius:6px;background:var(--paper);border:1px solid var(--line)}.news li:hover{border-color:var(--accent)}
.nn{background:#e8462f;color:#fff;border-radius:3px;font:bold 9px/1 Tahoma,sans-serif;padding:3px 4px}.news i{margin-left:auto;font-style:normal;color:var(--accent);font-weight:bold}
.room-tabs{display:flex;align-items:flex-end;gap:2px;margin-top:14px;border-bottom:2px solid var(--accent)}
.room-tabs button{background:var(--paper2);border:1px solid var(--line);border-bottom:0;border-radius:8px 8px 0 0;padding:6px 14px;cursor:pointer;color:var(--muted);font-size:11px}
.room-tabs button.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:bold}
.room-tabs span{margin-left:auto;font:11px var(--body);color:var(--muted);padding:0 4px 4px}
.roombox{background:var(--paper2);border:1px solid var(--line);border-top:0;padding:10px;border-radius:0 0 8px 8px}
.mr-wrap{position:relative;background:var(--room-bg);border:2px solid var(--accent);border-radius:8px;display:flex;justify-content:center;line-height:0;overflow:hidden;min-height:140px}
#mrCanvas{image-rendering:pixelated;image-rendering:crisp-edges;display:block;cursor:pointer;touch-action:manipulation}
#mrBub{position:absolute;transform:translate(-50%,-100%);background:#fff;color:#222;border:2px solid #2a2233;border-radius:9px;padding:3px 9px;font:12px/1.5 var(--body);white-space:nowrap;display:none;pointer-events:none;box-shadow:2px 2px 0 #0003;max-width:90%}
#mrBub:after{content:'';position:absolute;left:50%;bottom:-7px;margin-left:-5px;border:5px solid transparent;border-top-color:#2a2233;border-bottom:0}
.mr-bar{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap;align-items:center}
.mr-bar button,#shopList button{background:var(--paper);border:1px solid var(--accent);color:var(--accent);padding:5px 10px;border-radius:14px;cursor:pointer;font-size:11px}
.mr-bar button.on,.mr-bar button:hover,#shopList button:hover{background:var(--accent);color:var(--accent-ink)}
.mr-tip{font-size:10px;color:var(--muted);margin-left:auto}
#shop{display:none;margin-top:8px;padding:9px;border:1px dashed var(--accent);border-radius:8px;background:var(--paper)}#shop.open{display:block}
#shopList{display:flex;gap:6px;flex-wrap:wrap}#shopMsg{font-size:11px;margin-top:7px;color:var(--muted);min-height:15px}
.story{border:1px solid var(--line);border-top:0;padding:16px;background:var(--paper2);border-radius:0 0 8px 8px}.postits{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.postit{position:relative;padding:20px 14px 14px;min-height:96px;font:700 15px/1.5 'Gaegu',var(--body);color:#444;box-shadow:3px 4px 7px #0003;transform:rotate(-1.5deg);white-space:pre-line}.postit.p1{transform:rotate(1.6deg)}.postit.p2{transform:rotate(1deg)}.postit.p3{transform:rotate(-1deg)}
.p0{background:#fff3a6}.p1{background:#ffd0e0}.p2{background:#c9ecff}.p3{background:#d6f5c4}.pin{position:absolute;top:6px;left:50%;width:12px;height:12px;border-radius:50%;background:#e8462f;box-shadow:inset -2px -2px 0 #0003}
.story-note{margin:12px 0 0;color:var(--muted);font-size:11px;text-align:center}
.ic{display:flex;align-items:center;gap:9px;padding:8px 4px;border-bottom:1px dotted var(--line)}
.ic .avw{flex:none;width:40px;text-align:center}.ic-b{flex:1;min-width:0;overflow-wrap:anywhere}.ic b{color:var(--accent);margin-right:4px}.ic small,.cm small{color:var(--muted);font-size:10px;margin-left:4px}
.av{image-rendering:pixelated;width:36px;height:auto;display:inline-block;vertical-align:middle}.av-v{width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-size:10px;display:inline-flex;align-items:center;justify-content:center}
.x{background:none;border:0;color:var(--muted);cursor:pointer;font-size:16px;padding:0 4px}.x:hover{color:#d33}
.inline-form,.cf{display:flex;gap:5px;margin-top:9px}.inline-form input,.cf input{flex:1;min-width:0;padding:6px}.inline-form input:first-child,.cf input:first-child{flex:0 0 84px}
.cbox{margin-top:10px;padding:8px;background:var(--paper2);border:1px solid var(--line);border-radius:6px}.cm{padding:3px 0;font-size:11.5px;border-bottom:1px dotted var(--line)}.cm b{color:var(--accent)}
.diary-entry{border:1px solid var(--line);border-radius:9px;margin-bottom:14px;overflow:hidden;background:var(--paper)}
.diary-meta{display:flex;justify-content:space-between;background:var(--head);color:var(--head-ink);padding:6px 12px;font-size:11px}
.diary-entry h3{margin:12px 14px 6px;color:var(--ink);font-size:16px}.diary-body{padding:0 14px 12px;line-height:1.95}
.diary-foot{display:flex;gap:14px;padding:8px 14px;border-top:1px dotted var(--line);color:var(--muted)}.diary-entry .cbox{margin:0 12px 12px}
.lk{background:none;border:0;padding:0;color:inherit;cursor:pointer}.lk:hover{color:var(--accent);text-decoration:underline}
.album{display:grid;grid-template-columns:148px minmax(0,1fr);gap:14px}
.folders{display:flex;flex-direction:column;gap:5px}.folders button{text-align:left;background:var(--paper2);border:1px solid var(--line);border-radius:6px;padding:8px 9px;cursor:pointer;color:var(--ink)}.folders button.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:bold}.folders i{float:right;font-style:normal;opacity:.7}
.photo-viewer{border:1px solid var(--line);border-radius:9px;padding:12px;background:var(--paper)}.photo-topline{font-size:10px;color:var(--muted);margin-bottom:4px}.photo-viewer h3{margin:4px 0 2px;color:var(--ink);font-size:16px}.photo-date{font-size:10px;color:var(--muted);margin-bottom:9px}
.photo-stage{display:flex;justify-content:center;background:var(--paper2);border-radius:8px;padding:10px}.photo-stage img{max-height:520px;width:auto;cursor:zoom-in;box-shadow:0 3px 10px #0004}
.photo-description{margin:10px 0;line-height:1.8}
.photo-pager{display:flex;align-items:center;justify-content:space-between;gap:8px}.photo-pager button{background:var(--accent);color:var(--accent-ink);border:0;border-radius:5px;padding:6px 12px;cursor:pointer}.photo-pager button:disabled{opacity:.35;cursor:default}.photo-position{color:var(--muted)}
.photo-strip{display:flex;gap:5px;overflow-x:auto;padding:10px 0 4px}.photo-strip button{flex:none;width:54px;height:54px;border:2px solid transparent;padding:0;background:none;cursor:pointer;border-radius:4px;overflow:hidden}.photo-strip button.active{border-color:var(--accent)}.photo-strip img{width:100%;height:100%;object-fit:cover;display:block}
.photo-comment-title{margin-top:12px;font-weight:bold;color:var(--accent)}
.jb-top{background:var(--head);color:var(--head-ink);padding:8px 12px;border-radius:7px;font-weight:bold;margin-bottom:8px}.jb-top small{font-weight:normal;color:var(--muted);margin-left:8px}
.track-row{display:flex;align-items:center;gap:12px;padding:11px 12px;border-bottom:1px dotted var(--line);cursor:pointer;border-radius:6px}.track-row:hover,.track-row.playing{background:var(--paper2)}.track-row.playing .trackname{color:var(--accent);font-weight:bold}.number{color:var(--muted);font-family:Tahoma,sans-serif}.trackname{flex:1}.play-symbol{color:var(--accent)}
#guestForm{display:grid;grid-template-columns:1fr auto;gap:7px;align-items:start;margin-bottom:6px}#guestForm input#guestName{grid-column:1/-1;width:100%}#guestForm textarea{grid-column:1}#guestForm .secret{display:flex;align-items:center;gap:4px;color:var(--muted);font-size:11px;grid-column:1;grid-row:3}#guestForm button{grid-column:2;grid-row:2/4;align-self:stretch;min-width:84px}
.note-warn{font-size:10.5px;color:var(--muted);margin-bottom:12px}
.guest-entry{display:flex;gap:10px;padding:11px 8px;border-bottom:1px dotted var(--line)}.g-av{flex:none;width:44px;text-align:center}.g-b{flex:1;min-width:0}.g-h{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.g-h strong{color:var(--accent)}.g-h small{color:var(--muted);font-size:10px}.lock{font-size:10px;color:var(--muted)}.g-h .x{margin-left:auto}.g-t{margin-top:4px;line-height:1.8;overflow-wrap:anywhere}
.ptable{width:100%;border-collapse:collapse}.ptable th{width:96px;text-align:left;background:var(--head);color:var(--head-ink);padding:10px;border:1px solid var(--line);vertical-align:top}.ptable td{padding:10px;border:1px solid var(--line);line-height:1.8}
.friends-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
.friend-card{position:relative;display:flex;flex-direction:column;gap:3px;background:var(--paper2);border:1px solid var(--line);border-radius:9px;padding:8px;text-align:center;color:var(--ink);text-decoration:none;transition:transform .15s}.friend-card:hover{transform:translateY(-3px);border-color:var(--accent);text-decoration:none}
.friend-card>img:first-child{width:100%;height:150px;object-fit:cover;object-position:center 20%;border-radius:6px}.friend-card b{color:var(--accent)}.friend-card small{color:var(--muted);font-size:10.5px}.friend-card .av{position:absolute;right:10px;top:116px;width:30px;background:#fff9;border-radius:6px;padding:2px}
.bgm{display:flex;align-items:center;gap:8px;margin-top:12px;padding:8px 12px;background:var(--paper);border:1px solid var(--line);border-radius:10px;color:var(--ink)}
.bgm-t{flex:0 1 190px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:bold;color:var(--accent)}.bgm button{background:var(--accent);color:var(--accent-ink);border:0;border-radius:5px;padding:5px 9px;cursor:pointer;min-width:34px}
.bgm input[type=range]{flex:1;min-width:40px;padding:0;accent-color:var(--accent);background:none;border:0}.bgm-time{font:10px Tahoma,sans-serif;color:var(--muted);white-space:nowrap}
.eq{display:inline-flex;align-items:flex-end;gap:2px;height:14px;width:16px}.eq i{width:3px;background:var(--accent);height:3px}.eq.on i{animation:eq .7s infinite ease-in-out}.eq.on i:nth-child(2){animation-delay:.15s}.eq.on i:nth-child(3){animation-delay:.3s}.eq.on i:nth-child(4){animation-delay:.1s}@keyframes eq{50%{height:14px}}
footer{text-align:center;padding:10px;font-size:11px;color:var(--muted);background:var(--skinbg)}
dialog{border:0;border-radius:10px;padding:10px;max-width:94vw;background:var(--paper);color:var(--ink)}dialog::backdrop{background:#000b}dialog img{max-width:88vw;max-height:80vh;display:block;margin:6px auto}#closeDialog{float:right;background:var(--accent);color:var(--accent-ink);border:0;border-radius:5px;padding:5px 10px;cursor:pointer}#zoomCaption{text-align:center;padding-top:6px}

/* =========================================================
   SKINS
   ========================================================= */
/* ---- 이해강 BLACK ★ STAR : black x silver chrome ---- */
body[data-person=haegang]{--font-t:'Black Han Sans','Noto Sans KR',sans-serif;
 --paper:#17171f;--paper2:#21212c;--ink:#e9ebf3;--muted:#9a9fb4;--line:#383848;--accent:#c4c9d8;--accent-ink:#14141c;--hi:#e3e6f0;--head:linear-gradient(180deg,#eceef5,#a6acbd);--head-ink:#15151d;--tape:#ffffff40;
 --skinbg:#0b0b11;--bookbg:linear-gradient(135deg,#5b5f6d,#dfe2ec 18%,#6c7080 40%,#cdd0dc 62%,#4a4d5a 82%,#a9adbb);--wpbg:#07070b;--room-bg:#0d0d14;--ring:#e8eaf2;
 --wp:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cpath d='M22 9l2.6 7.6h8l-6.5 4.7 2.5 7.6-6.6-4.7-6.6 4.7 2.5-7.6-6.5-4.7h8z' fill='%23c8ccd8' fill-opacity='.5'/%3E%3Cpath d='M68 56l1.6 4.8h5l-4 2.9 1.5 4.8-4.1-3-4.1 3 1.5-4.8-4-2.9h5z' fill='%238a90a0' fill-opacity='.55'/%3E%3Ccircle cx='70' cy='18' r='1.3' fill='%23fff' fill-opacity='.7'/%3E%3Ccircle cx='12' cy='66' r='1' fill='%23fff' fill-opacity='.6'/%3E%3C/svg%3E"),radial-gradient(circle at 50% -10%,#2a2a3c,#07070b 60%);
 --emblem:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='.5' stop-color='%23aeb4c4'/%3E%3Cstop offset='1' stop-color='%236b7084'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M32 3l8.6 18.8 20.4 2.3-15.2 14 4.3 20.2L32 47.2 13.9 58.3l4.3-20.2L3 24.1l20.4-2.3z' fill='url(%23g)' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E")}
body[data-person=haegang] .skin-head h1{background:linear-gradient(180deg,#fff 20%,#a4aabb 55%,#fff 80%);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:36px;letter-spacing:2px;filter:drop-shadow(0 0 8px #aab3ff55)}
body[data-person=haegang] .slogan{color:#b8bdd0}body[data-person=haegang] .photo-frame{background:#d9dce6;border-color:#fff}
body[data-person=haegang] .win{border-color:#555}body[data-person=haegang] .rings:after{background:repeating-linear-gradient(180deg,transparent 0 17px,#dfe2ec 17px 21px,transparent 21px 34px)}
body[data-person=haegang] .tabs button:not(.active){background:linear-gradient(180deg,#e8ebf3,#9ea4b6);color:#15151d}
body[data-person=haegang] .acorn-box,body[data-person=yunwoo] .acorn-box,body[data-person=sejin] .acorn-box{background:var(--paper2);border-color:var(--line);color:#e6cf8e}
body[data-person=haegang] .sec{border-left-color:#fff;text-shadow:0 1px 0 #fff8}body[data-person=haegang] #mrBub{background:#f2f4fa}
/* ---- 이기범 : sky blue sticker social ---- */
body[data-person=kibeom]{--font-t:'Jua','Noto Sans KR',sans-serif;
 --paper:#fff;--paper2:#eef6ff;--ink:#223552;--muted:#7a8fab;--line:#cfe2f5;--accent:#2f86e0;--accent-ink:#fff;--hi:#2f86e0;--head:#d9ebff;--head-ink:#1d3a66;--tape:#ffe08aaa;
 --skinbg:#cfe8fb;--bookbg:#7fbdf0;--wpbg:#a6d6f7;--room-bg:#cfe9fb;--ring:#fff;
 --wp:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Ccircle cx='20' cy='20' r='7' fill='%23fff' fill-opacity='.55'/%3E%3Ccircle cx='80' cy='60' r='10' fill='%23fff' fill-opacity='.4'/%3E%3Cpath d='M100 14l2 5h5l-4 3 1.5 5-4.5-3-4.5 3 1.5-5-4-3h5z' fill='%23ffe08a'/%3E%3Cpath d='M36 88c-4-6-12-2-8 4l8 8 8-8c4-6-4-10-8-4z' fill='%23ff9fb5' fill-opacity='.8'/%3E%3C/svg%3E"),linear-gradient(#8ccaf5,#d8efff);
 --emblem:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M8 10h48a4 4 0 014 4v26a4 4 0 01-4 4H30l-12 12V44H8a4 4 0 01-4-4V14a4 4 0 014-4z' fill='%23fff' stroke='%232f86e0' stroke-width='3'/%3E%3Ccircle cx='20' cy='27' r='4' fill='%232f86e0'/%3E%3Ccircle cx='32' cy='27' r='4' fill='%23ff8fb0'/%3E%3Ccircle cx='44' cy='27' r='4' fill='%23ffd34d'/%3E%3C/svg%3E")}
body[data-person=kibeom] .skin-head h1{color:#1d5fb0;text-shadow:2px 2px 0 #fff,3px 3px 0 #9fcdf5}
body[data-person=kibeom] .book{box-shadow:inset 0 0 0 3px #fff,0 4px 0 #0002}body[data-person=kibeom] .left,body[data-person=kibeom] .right{border-width:2px;border-style:dashed;border-color:#9fcdf5}
body[data-person=kibeom] .tabs button{border-radius:0 18px 18px 0}body[data-person=kibeom] .photo-frame{transform:rotate(2deg);border-radius:4px}
/* ---- 강태수 : sports navy x orange ---- */
body[data-person=taesu]{--font-t:'Do Hyeon','Noto Sans KR',sans-serif;
 --paper:#f6f8fd;--paper2:#e7ecf8;--ink:#14204a;--muted:#6a76a0;--line:#c9d2ea;--accent:#ff7a14;--accent-ink:#fff;--hi:#e86a08;--head:#1c2c60;--head-ink:#fff;--tape:#ff8a1f99;
 --skinbg:#101a40;--bookbg:#1c2c60;--wpbg:#0d1738;--room-bg:#18244e;--ring:#ff8a1f;
 --wp:repeating-linear-gradient(135deg,#0d1738 0 22px,#14214d 22px 44px),linear-gradient(#0d1738,#0d1738);
 --emblem:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='3' y='22' width='9' height='20' rx='2' fill='%23ff8a1f'/%3E%3Crect x='12' y='26' width='6' height='12' fill='%23dfe3f0'/%3E%3Crect x='18' y='30' width='28' height='4' fill='%23dfe3f0'/%3E%3Crect x='46' y='26' width='6' height='12' fill='%23dfe3f0'/%3E%3Crect x='52' y='22' width='9' height='20' rx='2' fill='%23ff8a1f'/%3E%3C/svg%3E")}
body[data-person=taesu] .skin-head h1{color:#fff;font-size:34px;font-style:italic;letter-spacing:1px;text-shadow:3px 3px 0 #ff7a14}body[data-person=taesu] .slogan,body[data-person=taesu] .cnt{color:#b9c4ea}
body[data-person=taesu] .skin-head:before{content:'NO.7';position:absolute;right:92px;top:2px;font:400 54px/1 'Do Hyeon',sans-serif;color:#ffffff12}
body[data-person=taesu] .sec{border-left-color:#ff7a14}body[data-person=taesu] .tabs button:not(.active){background:#ff7a14}
body[data-person=taesu] .book{background:repeating-linear-gradient(90deg,#1c2c60 0 14px,#223670 14px 28px)}
/* ---- 정윤우 : black x blood red grunge band ---- */
body[data-person=yunwoo]{--font-t:'East Sea Dokdo','Noto Sans KR',sans-serif;
 --paper:#16161a;--paper2:#202026;--ink:#ececf0;--muted:#9b9ba6;--line:#34343c;--accent:#d62839;--accent-ink:#fff;--hi:#ff5a68;--head:#2a0f14;--head-ink:#fff;--tape:#222c;
 --skinbg:#0b0b0e;--bookbg:#222228;--wpbg:#08080a;--room-bg:#120a0c;--ring:#d62839;
 --wp:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cpath d='M20 30l22 6M10 80l30-4M100 20l-24 8M120 110l-30 6' stroke='%23d62839' stroke-opacity='.35' stroke-width='2'/%3E%3Cpath d='M130 40l10 10m0-10l-10 10' stroke='%23fff' stroke-opacity='.18' stroke-width='3'/%3E%3C/svg%3E"),radial-gradient(circle at 20% 10%,#2a0a10,#08080a 60%);
 --emblem:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M38 2L12 36h16l-6 26 30-38H36z' fill='%23d62839' stroke='%23fff' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E")}
body[data-person=yunwoo] .skin-head h1{color:#fff;font-size:44px;font-weight:400;transform:rotate(-1.5deg);text-shadow:3px 3px 0 #d62839;letter-spacing:1px}body[data-person=yunwoo] .slogan{color:#ff8a94;font-family:'East Sea Dokdo';font-size:19px}
body[data-person=yunwoo] .book{background:#222228;box-shadow:inset 0 0 0 2px #d6283966}body[data-person=yunwoo] .tape{background:#d62839;width:70px}body[data-person=yunwoo] .photo-frame{background:#ddd}
body[data-person=yunwoo] .sec{font-size:24px;border-left:0;border-bottom:3px solid #d62839;border-radius:0}body[data-person=yunwoo] .skin-head:after{content:'';position:absolute;left:0;right:0;bottom:6px;height:6px;background:repeating-linear-gradient(90deg,#d62839 0 12px,transparent 12px 20px);opacity:.7}
/* ---- 문세진 : midnight navy, UK garage, clean grid ---- */
body[data-person=sejin]{--font-t:'Gowun Dodum','Noto Sans KR',sans-serif;
 --paper:#131a36;--paper2:#1a2346;--ink:#e4e9ff;--muted:#8e9bcb;--line:#2b3868;--accent:#9a85ff;--accent-ink:#0e1230;--hi:#b6a8ff;--head:#1f2b5c;--head-ink:#e4e9ff;--tape:#9a85ff55;
 --skinbg:#0a0e24;--bookbg:linear-gradient(145deg,#1c2760,#0d1236);--wpbg:#070a1c;--room-bg:#0b1030;--ring:#9a85ff;
 --wp:linear-gradient(#ffffff0c 1px,transparent 1px) 0 0/28px 28px,linear-gradient(90deg,#ffffff0c 1px,transparent 1px) 0 0/28px 28px,radial-gradient(circle at 80% 0,#2a2160,#070a1c 55%);
 --emblem:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M10 40V32a22 22 0 0144 0v8' fill='none' stroke='%239a85ff' stroke-width='5' stroke-linecap='round'/%3E%3Crect x='6' y='36' width='11' height='20' rx='4' fill='%23e4e9ff'/%3E%3Crect x='47' y='36' width='11' height='20' rx='4' fill='%23e4e9ff'/%3E%3C/svg%3E")}
body[data-person=sejin] .skin-head h1{font-size:30px;color:#e4e9ff;letter-spacing:3px;font-weight:700;text-shadow:0 0 14px #9a85ffaa}body[data-person=sejin] .book{box-shadow:inset 0 0 0 1px #9a85ff88,0 0 28px #9a85ff44}
body[data-person=sejin] .left,body[data-person=sejin] .right{background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:24px 24px}
body[data-person=sejin] .tabs button:not(.active){background:#2b3a80;color:#e4e9ff}body[data-person=sejin] .sec{border-left-color:#9a85ff}
/* ---- 강찬 : xerox zine, kraft, shoegaze haze ---- */
body[data-person=chan]{--font-t:'Nanum Pen Script','Noto Sans KR',sans-serif;
 --paper:#f2efe7;--paper2:#e8e4d9;--ink:#1f1f1f;--muted:#6f6b60;--line:#bdb8a8;--accent:#222;--accent-ink:#f2efe7;--hi:#7a5bb0;--head:#222;--head-ink:#f2efe7;--tape:#e9a3b5aa;
 --skinbg:#b7aec9;--bookbg:#b8ab94;--wpbg:#9d95b5;--room-bg:#2a2638;--ring:#222;
 --wp:radial-gradient(#00000022 1.2px,transparent 1.4px) 0 0/9px 9px,linear-gradient(160deg,#b9aed6,#8f87aa 50%,#d3a7bb);
 --emblem:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='4' y='14' width='56' height='38' rx='4' fill='%23f2efe7' stroke='%23222' stroke-width='3'/%3E%3Crect x='12' y='20' width='40' height='13' fill='%23e9a3b5' stroke='%23222' stroke-width='2'/%3E%3Ccircle cx='22' cy='42' r='5' fill='%23222'/%3E%3Ccircle cx='42' cy='42' r='5' fill='%23222'/%3E%3Cpath d='M22 38h20' stroke='%23222' stroke-width='2'/%3E%3C/svg%3E")}
body[data-person=chan] .skin-head h1{font-size:42px;font-weight:400;color:#1f1f1f;transform:rotate(-1deg);background:#f2efe7;display:inline-block;padding:0 12px;box-shadow:3px 3px 0 #222}body[data-person=chan] .slogan{margin-top:8px;color:#2a2638;font-family:'Nanum Pen Script';font-size:20px}body[data-person=chan] .cnt{color:#2a2638}
body[data-person=chan] .sec{font-size:25px;border-left:0;border-radius:0;transform:rotate(-.4deg)}body[data-person=chan] .photo-frame{background:#f2efe7;filter:grayscale(.2) contrast(1.05)}
body[data-person=chan] .book{box-shadow:inset 0 0 0 2px #00000030}body[data-person=chan] .left,body[data-person=chan] .right{background-image:radial-gradient(#0000000d 1px,transparent 1.2px);background-size:6px 6px;border-color:#222}
body[data-person=chan] .tabs button:not(.active){background:#222}body[data-person=chan] .status{background:#fff9c4;transform:rotate(-.8deg)}
/* ---- 한태이 : picnic gingham, sunny acoustic ---- */
body[data-person=taei]{--font-t:'Gaegu','Noto Sans KR',sans-serif;
 --paper:#fffdf3;--paper2:#fff5d6;--ink:#5a4a2a;--muted:#a3946c;--line:#f0e0ae;--accent:#e49a2c;--accent-ink:#fff;--hi:#c77d12;--head:#ffefb0;--head-ink:#5a4a2a;--tape:#8fb04a99;
 --skinbg:#fff0b8;--bookbg:#f6cf6a;--wpbg:#ffe9a0;--room-bg:#fff1c9;--ring:#fff;
 --wp:repeating-linear-gradient(0deg,#ffffff88 0 28px,transparent 28px 56px),repeating-linear-gradient(90deg,#ffffff88 0 28px,transparent 28px 56px);
 --emblem:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%23ffc928' stroke='%23c77d12' stroke-width='1.5'%3E%3Cellipse cx='32' cy='10' rx='6' ry='9'/%3E%3Cellipse cx='32' cy='54' rx='6' ry='9'/%3E%3Cellipse cx='10' cy='32' rx='9' ry='6'/%3E%3Cellipse cx='54' cy='32' rx='9' ry='6'/%3E%3Cellipse cx='16' cy='16' rx='6' ry='9' transform='rotate(-45 16 16)'/%3E%3Cellipse cx='48' cy='48' rx='6' ry='9' transform='rotate(-45 48 48)'/%3E%3Cellipse cx='48' cy='16' rx='6' ry='9' transform='rotate(45 48 16)'/%3E%3Cellipse cx='16' cy='48' rx='6' ry='9' transform='rotate(45 16 48)'/%3E%3C/g%3E%3Ccircle cx='32' cy='32' r='12' fill='%236b4a1f'/%3E%3C/svg%3E")}
body[data-person=taei] .skin-head h1{font-size:40px;font-weight:700;color:#b8730a;letter-spacing:0}body[data-person=taei] .book{background:repeating-linear-gradient(0deg,#ffffff66 0 18px,transparent 18px 36px),repeating-linear-gradient(90deg,#ffffff66 0 18px,transparent 18px 36px),#f6cf6a}
body[data-person=taei] .left,body[data-person=taei] .right{border-style:dashed;border-width:2px;border-color:#e8c76a}body[data-person=taei] body,body[data-person=taei]{font-size:13px}body[data-person=taei] .sec{font-size:22px;border-radius:14px}body[data-person=taei] .photo-frame{border-radius:6px}
/* ---- 정유나 : pink princess lace, cat ears ---- */
body[data-person=yuna]{--font-t:'Jua','Noto Sans KR',sans-serif;
 --paper:#fffafc;--paper2:#fff0f6;--ink:#7a3358;--muted:#c58aa8;--line:#ffd0e4;--accent:#f0559b;--accent-ink:#fff;--hi:#e0408a;--head:#ffe0ee;--head-ink:#7a3358;--tape:#ff9fc4aa;
 --skinbg:#ffd6e8;--bookbg:#ff9fc9;--wpbg:#ffc2de;--room-bg:#ffd6e8;--ring:#fff;
 --wp:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110'%3E%3Cpath d='M28 36c-6-10-20-4-14 6l14 14 14-14c6-10-8-16-14-6z' fill='%23fff' fill-opacity='.65'/%3E%3Cpath d='M86 80c-4-7-14-3-10 4l10 10 10-10c4-7-6-11-10-4z' fill='%23ff6fa5' fill-opacity='.55'/%3E%3Cpath d='M84 14l2 6h6l-5 4 2 6-5-4-5 4 2-6-5-4h6z' fill='%23fff'/%3E%3C/svg%3E"),linear-gradient(#ffb3d6,#ffdcec);
 --emblem:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M10 6l9 14 7-12 6 12 6-12 7 12 9-14v22H10z' fill='%23ffe08a' stroke='%23e0408a' stroke-width='2.5' stroke-linejoin='round' transform='translate(0 14)'/%3E%3Ccircle cx='32' cy='38' r='4' fill='%23ff4f93'/%3E%3Cpath d='M12 44l-8-14 14 6zM52 44l8-14-14 6z' fill='%23ff9fc4' stroke='%23e0408a' stroke-width='2' stroke-linejoin='round'/%3E%3Crect x='10' y='46' width='44' height='7' rx='3' fill='%23ffe08a' stroke='%23e0408a' stroke-width='2.5'/%3E%3C/svg%3E")}
body[data-person=yuna] .skin-head h1{font-size:34px;color:#e0408a;text-shadow:2px 2px 0 #fff,3px 3px 0 #ffb3d6}body[data-person=yuna] .skin-head{background:radial-gradient(#fff8 1.2px,transparent 1.5px) 0 0/10px 10px,linear-gradient(110deg,#ffe2ee,#fff7fb);border-radius:14px;margin-bottom:8px;border:2px solid #fff}
body[data-person=yuna] .book{box-shadow:inset 0 0 0 4px #fff,0 4px 0 #0002;background:radial-gradient(#fff8 1.5px,transparent 1.8px) 0 0/14px 14px,#ff9fc9}body[data-person=yuna] .left,body[data-person=yuna] .right{border:2px solid #fff;box-shadow:0 0 0 2px #ffb3d6}
body[data-person=yuna] .tabs button{border-radius:0 20px 20px 0}body[data-person=yuna] .sec{border-radius:20px;border-left:0;border:2px dotted #f0559b;background:#fff0f6}body[data-person=yuna] .photo-frame{border-radius:10px;border:2px solid #ffb3d6}
body[data-person=yuna] .status{background:#fff0f6;border-radius:16px}body[data-person=yuna] .win{border-color:#ff9fc9}

/* =========================================================
   RESPONSIVE : tablet / phone
   ========================================================= */
@media (max-width:980px){
 .win{margin:0;border-radius:0;border:0}.ie,.ie-bar{display:none}
 .skin{padding:10px}
 .book{grid-template-columns:200px 22px minmax(0,1fr) 74px;padding:12px 0 12px 12px}
 .tabs button{font-size:11px;padding:12px 4px 12px 8px}
 .news ul{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
 body{font-size:13px}
 .skin{padding:8px 8px 74px}
 .skin-head{padding:4px 6px 10px;gap:10px;min-height:0;flex-wrap:wrap}.cnt{order:3;width:100%}.skin-head h1{font-size:26px!important}body[data-person=yunwoo] .skin-head h1{font-size:34px!important}.emblem{width:46px;height:46px}.head-btn{padding:6px 10px}
 .book{display:flex;flex-direction:column;gap:10px;padding:10px;border-radius:12px}
 .rings{display:none}
 .tabs{order:-1;position:sticky;top:0;z-index:30;flex-direction:row;overflow-x:auto;gap:4px;padding:6px;margin:-4px -4px 0;background:var(--bookbg);border-radius:10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}.tabs::-webkit-scrollbar{display:none}
 .tabs button,.tabs button.active{flex:1 0 auto;min-width:58px;border-radius:9px;text-align:center;padding:10px 8px;transform:none;border:0;box-shadow:inset 0 -2px 0 #0002;font-size:12px}
 .tabs button.active{background:var(--paper);box-shadow:none}
 .left{display:grid;grid-template-columns:118px 1fr;gap:6px 12px;padding:12px}
 .photo-frame{grid-row:1/6;margin:0;align-self:start}.photo-frame img{height:154px}
 .todayis,.who,.status,.bio{grid-column:2}.tagline,.acorn-box,.wave{grid-column:1/-1}.status{font-size:12px}.bio{font-size:11.5px;line-height:1.7}
 .right{padding:12px;min-height:0}
 .mr-tip{display:none}
 .album{grid-template-columns:1fr}.folders{flex-direction:row;overflow-x:auto}.folders button{flex:none}
 .photo-stage img{max-height:380px}
 .postits{grid-template-columns:1fr 1fr;gap:10px}
 .bgm{position:fixed;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));z-index:40;margin:0;box-shadow:0 6px 18px #0006;padding:7px 9px}.bgm-t{flex:0 1 110px}.bgm-time{display:none}
 .guest-entry{gap:8px}#guestForm{grid-template-columns:1fr}#guestForm button{grid-column:1;grid-row:auto}#guestForm .secret{grid-row:auto}
 .friends-grid{grid-template-columns:repeat(2,1fr)}.friend-card>img:first-child{height:130px}.friend-card .av{top:98px}
 .ptable th{width:70px}.inline-form,.cf{flex-wrap:wrap}.inline-form input:first-child,.cf input:first-child{flex:1 1 80px}
}
@media (max-width:380px){.left{grid-template-columns:100px 1fr}.photo-frame img{height:130px}.news ul{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- guestbook (server) ---- */
#guestForm .gb-meta{grid-column:1/-1;grid-row:4;display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted)}
#guestForm #tsBox{grid-column:1/-1;grid-row:5;min-height:0}
#guestForm button:disabled{opacity:.55;cursor:wait}
.gb-msg{font-size:12px;padding:8px 10px;border-radius:6px;margin:4px 0 8px;border:1px solid var(--line);background:rgba(255,255,255,.06)}
.gb-msg[data-kind=err]{border-color:#d45a6a;color:#ff9aa8}.gb-msg[data-kind=ok]{border-color:#5aa87a}.gb-msg[data-kind=warn]{border-color:#c9a64a}
.guest-entry.seed{opacity:.92}
.g-secret{color:var(--muted);font-size:12px}
.lock.held{color:#c9a64a}
.g-h .rp{margin-left:auto;background:none;border:0;color:var(--muted);cursor:pointer;font-size:12px;opacity:.55;padding:0 4px}.g-h .rp:hover{opacity:1}
.g-reply{display:flex;gap:8px;margin-top:8px;padding:8px 10px;border-radius:8px;background:rgba(255,255,255,.07);border-left:3px solid var(--accent);position:relative}
.g-reply>.av{flex:none;width:30px;height:auto;image-rendering:pixelated;align-self:flex-start}
.g-reply .g-rh{display:flex;gap:8px;align-items:center}.g-reply .g-rh strong{color:var(--accent);font-size:12px}.g-reply .g-rh small{color:var(--muted);font-size:10px}
.g-reply .g-t{margin-top:2px;font-size:13px}
.empty.err button,.more{background:var(--accent);color:var(--accent-ink);border:0;border-radius:5px;padding:5px 10px;cursor:pointer;margin-left:6px}
.more{display:block;margin:10px auto}

/* 모바일: 사진첩이 오른쪽으로 삐져나가 폴더(졸업사진 등)가 잘리던 문제 수정 */
@media (max-width:760px){
 .album>*{min-width:0}
 .folders{max-width:100%;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
 .photo-viewer{min-width:0;max-width:100%}
 .photo-stage{max-width:100%;overflow:hidden}
 .photo-stage img{max-width:100%;height:auto;object-fit:contain}
 .photo-strip{max-width:100%}
}