/* ═══════════════════════════════════════════════
TWO SEATS, ONE SKY — 2017 ⇄ 2026 티스토리 스킨
폰 프레임 × 비행 컨셉 · 밝은 듀얼 팔레트
═══════════════════════════════════════════════ */
:root{
/* 2026 — 크루 앱 */
--s-sky:#5aa9e6; --s-deep:#31699a; --s-ink:#2b3f52; --s-sub:#8aa3b8;
--s-card:#ffffff; --s-line:#dbe9f4; --s-bg:#f2f8fd; --s-dock:rgba(255,255,255,.85);
/* 2017 — 핑크 폰 */
--p-hot:#e87ba8; --p-soft:#ffc0d8; --p-ink:#7c4560; --p-sub:#c297ab;
--p-card:#fffafc; --p-line:#f9d3e3; --p-bg:#fdeaf3; --p-dock:rgba(255,250,252,.88);
--mono:'IBM Plex Mono','IBM Plex Sans KR','Apple SD Gothic Neo','Pretendard Variable',Pretendard,monospace;
--round:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Pretendard Variable',Pretendard,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
font-family:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Pretendard Variable',Pretendard,sans-serif;
min-height:100vh; display:flex; flex-direction:column;
align-items:center; justify-content:center;
padding:24px 16px; overflow-x:hidden;
background:linear-gradient(180deg,#d6ebfa 0%, #eef7fd 55%, #fbfdff 100%);
transition:background 1s ease;
-webkit-font-smoothing:antialiased;
}
body.era-2017{
background:linear-gradient(180deg,#fbd9e9 0%, #fdeaf3 55%, #fffbfd 100%);
}
a{color:inherit; text-decoration:none}
img{max-width:100%}
/* ── 스크롤바: 스크롤 중일 때만 표시 (JS가 html에 .scrolling 부여) ── */
*{scrollbar-width:thin; scrollbar-color:transparent transparent}
html.scrolling *{scrollbar-color:rgba(140,175,205,.38) transparent}
html.scrolling body.era-2017 *{scrollbar-color:rgba(235,150,185,.38) transparent}
::-webkit-scrollbar{width:5px; height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:transparent; border-radius:20px; transition:background .3s}
html.scrolling ::-webkit-scrollbar-thumb{background:rgba(140,175,205,.38)}
html.scrolling body.era-2017 ::-webkit-scrollbar-thumb, html.scrolling.era17 ::-webkit-scrollbar-thumb{background:rgba(235,150,185,.38)}
/* ── 배경 구름 (여러 겹, 뭉게뭉게) ── */
.bgcloud{
position:fixed; pointer-events:none; z-index:0;
animation:drift linear infinite;
filter:blur(.3px);
--cl:#ffffff;
}
/* 본체 + 여러 개의 뭉치(::before/::after + box-shadow로 봉우리 다수) */
.bgcloud .puff{
position:absolute; border-radius:50%; background:var(--cl);
}
.bgcloud{
width:150px; height:44px; border-radius:44px; background:var(--cl);
box-shadow:
34px -2px 0 -4px var(--cl),
-30px 2px 0 -6px var(--cl);
}
.bgcloud::before,.bgcloud::after{
content:""; position:absolute; background:var(--cl); border-radius:50%;
}
/* 위로 솟은 두 봉우리 */
.bgcloud::before{width:62px; height:62px; top:-30px; left:26px}
.bgcloud::after{width:46px; height:46px; top:-22px; left:74px}
/* 개별 구름들: 크기·높이·속도·투명도 다양하게 */
.bgcloud.b1{top:8%; transform:scale(1.05); opacity:.85; animation-duration:78s; animation-delay:-4s}
.bgcloud.b2{top:20%; transform:scale(.62); opacity:.55; animation-duration:104s; animation-delay:-38s}
.bgcloud.b3{top:34%; transform:scale(.85); opacity:.7; animation-duration:120s; animation-delay:-70s}
.bgcloud.b4{top:52%; transform:scale(1.25); opacity:.5; animation-duration:150s; animation-delay:-20s}
.bgcloud.b5{top:66%; transform:scale(.5); opacity:.6; animation-duration:92s; animation-delay:-55s}
.bgcloud.b6{top:78%; transform:scale(.95); opacity:.42; animation-duration:134s; animation-delay:-95s}
.bgcloud.b7{top:44%; transform:scale(.7); opacity:.5; animation-duration:112s; animation-delay:-130s}
@keyframes drift{from{left:-220px}to{left:112%}}
@media (prefers-reduced-motion:reduce){ .bgcloud{animation:none} }
/* ══ 폰 프레임 (통통한 비율, 화면 정중앙 고정) ══ */
.phone{
position:relative; z-index:1;
/* 세로 기준: 화면 높이에 맞추되 상한 780px. 너비 = 높이 × 0.5 */
height:min(780px, calc(100vh - 40px));
width:calc(min(780px, calc(100vh - 40px)) * 0.5);
max-width:calc(100vw - 32px);
border-radius:46px;
background:#fcfdff; padding:10px;
box-shadow:0 30px 70px rgba(90,150,200,.30), inset 0 0 0 1.5px #d3e4f1;
transition:transform .4s cubic-bezier(.3,.8,.35,1), background .9s ease, box-shadow .9s ease;
display:flex; flex-direction:column;
}
body.era-2017 .phone{
background:#fff3f8;
box-shadow:0 28px 64px rgba(228,120,168,.28), inset 0 0 0 1.5px #f6cbdd;
border-radius:34px; /* 아이폰7 바디 모서리 (덜 둥글게) */
padding:52px 10px 60px; /* 위=카메라/이어피스 자리, 아래=홈버튼 자리 */
}
.screen{
/* 바깥 라운드 46 − 베젤 10 = 36, 사방 균일 */
border-radius:36px; overflow:hidden; position:relative;
background:var(--s-bg); color:var(--s-ink);
display:flex; flex-direction:column;
flex:1; min-height:0;
transition:background .9s, color .9s, border-radius .9s;
}
body.era-2017 .screen{
border-radius:3px; /* iOS 10 화면 = 직각(살짝만 둥글게) */
background:var(--p-bg); color:var(--p-ink);
}
/* 2017 상단 chin: 이어피스(가로 바) + 전면 카메라(점) */
body.era-2017 .phone::before{
content:''; position:absolute; top:24px; left:50%; transform:translateX(-50%);
width:46px; height:6px; border-radius:4px; background:#f0c4d8; z-index:6;
}
body.era-2017 .phone::after{
content:''; position:absolute; top:23px; left:calc(50% - 42px); transform:translateX(-50%);
width:8px; height:8px; border-radius:50%;
background:#e79bbb; box-shadow:inset 0 0 0 1.5px #fce0ec; z-index:6;
}
/* ══════════════════════════════════════════════
글 팝업: 폰(왼쪽) + 글 iframe 팝업(오른쪽) · 한 화면
══════════════════════════════════════════════ */
/* 오른쪽 글 팝업 패널 — 폰과 나란히 화면 중앙 배치
전체폭 = 폰(약 390) + 간격(28) + 글(660) → 폰은 왼쪽으로, 글은 중앙 기준 오른쪽으로 */
.artpop{
position:fixed; top:50%; left:50%;
--gw:min(660px, 52vw); /* 글 패널 폭 */
--pw:calc(min(780px, 100vh - 40px) * 0.5); /* 폰 폭(=폰 CSS와 동일식) */
--gap:28px;
width:var(--gw); height:min(92vh, 860px); z-index:60;
background:rgba(242,248,253,.72); border-radius:28px; overflow:hidden;
backdrop-filter:blur(18px) saturate(1.15); -webkit-backdrop-filter:blur(18px) saturate(1.15);
box-shadow:0 30px 90px rgba(30,60,100,.32), inset 0 1px 0 rgba(255,255,255,.5);
/* 중앙 기준: 전체묶음 중앙정렬 시 글 패널의 좌측 위치 = -전체/2 + 폰폭 + 간격 */
transform:translate(calc(-1 * (var(--pw) + var(--gap) + var(--gw)) / 2 + var(--pw) + var(--gap) + 100vw), -50%);
opacity:0;
transition:transform .45s cubic-bezier(.25,.85,.3,1), opacity .3s ease;
pointer-events:none;
}
body.era-2017 .artpop{
background:rgba(253,234,243,.72);
box-shadow:0 30px 90px rgba(228,120,168,.3), inset 0 1px 0 rgba(255,255,255,.6);
}
/* 열림: 글 패널 슬라이드 인 (중앙 묶음의 오른쪽 자리로) + 폰은 왼쪽 자리로 */
body.pop-open .artpop{
transform:translate(calc(-1 * (var(--pw) + var(--gap) + var(--gw)) / 2 + var(--pw) + var(--gap)), -50%);
opacity:1; pointer-events:auto;
}
body.pop-open .phone{
transform:translateX(calc(-1 * (min(660px, 52vw) + 28px) / 2)) !important;
}
/* 팝업 내부: 스크롤 영역 + 글 본문 (iframe 아님) + X버튼 + 스크롤 네비 */
.artpop-scroll{
position:absolute; inset:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
background:transparent; scrollbar-width:none;
}
.artpop-scroll::-webkit-scrollbar{width:0; display:none}
body.era-2017 .artpop-scroll{background:transparent}
.artpop-body{ padding:0; }
.artpop-body .article{ padding:34px 30px 60px; max-width:none; }
.artpop-loading{ padding:80px 30px; text-align:center; color:var(--s-sub); font-size:13.5px; line-height:1.9; }
.artpop-x{
position:absolute; top:14px; right:14px; z-index:5;
width:34px; height:34px; border-radius:50%; cursor:pointer;
border:none; background:var(--s-card); color:var(--s-deep);
font-size:15px; font-weight:700; display:grid; place-items:center;
box-shadow:0 3px 12px rgba(30,60,100,.22); transition:background .15s;
}
.artpop-x:hover{background:var(--s-line)}
body.era-2017 .artpop-x{background:var(--p-card); color:var(--p-hot)}
.artpop-nav{
position:absolute; right:-46px; top:50%; transform:translateY(-50%); z-index:5;
display:flex; flex-direction:column; gap:10px;
}
.artpop-nav button{
width:34px; height:34px; border-radius:50%; cursor:pointer;
border:none; background:var(--s-card); color:var(--s-deep);
font-size:14px; font-weight:700; display:grid; place-items:center;
box-shadow:0 3px 12px rgba(30,60,100,.2); transition:background .15s, opacity .2s;
opacity:.75;
}
.artpop-nav button:hover{opacity:1; background:var(--s-line)}
body.era-2017 .artpop-nav button{background:var(--p-card); color:var(--p-hot)}
/* 팝업 iframe 안에서 열린 글 → 폰 껍데기 벗고 본문만 */
body.in-frame{background:var(--s-bg) !important; padding:0 !important}
body.in-frame.era-2017{background:var(--p-bg) !important}
body.in-frame .bgcloud, body.in-frame .island, body.in-frame .statusbar,
body.in-frame .cover, body.in-frame .memory, body.in-frame .cats,
body.in-frame .covers, body.in-frame .dock{display:none !important}
body.in-frame .phone{
position:static !important; width:100% !important; height:auto !important;
min-height:100vh; max-width:none !important; border-radius:0 !important;
padding:0 !important; margin:0 !important; box-shadow:none !important;
background:transparent !important; transform:none !important; display:block !important;
}
body.in-frame .screen{border-radius:0 !important; background:transparent !important; min-height:100vh; display:block !important}
body.in-frame .scroll{display:block !important; overflow:visible !important}
body.in-frame .article{max-width:640px; margin:0 auto; padding:34px 26px 60px}
body.in-frame .a-title{font-size:22px}
body.in-frame .a-body{font-family:'Pretendard Variable',Pretendard,sans-serif; font-size:13.5px; line-height:1.85; padding:22px 0}
/* 글 주소로 직접 진입 → 본체 폰은 비우고(안보이게) 팝업만 */
body.standalone-article .phone{visibility:hidden}
body.standalone-article .artpop{
top:50%; left:50%;
width:min(720px, calc(100vw - 48px)); height:min(92vh, 900px);
transform:translate(-50%,-50%);
}
body.standalone-article.pop-open .artpop{transform:translate(-50%,-50%)}
/* 좁은 화면: 팝업이 거의 전체, 폰은 뒤로 */
@media (max-width:900px){
.artpop{
width:calc(100vw - 24px) !important; height:calc(100vh - 24px);
top:50%; left:50%; border-radius:20px;
}
body.pop-open .artpop{transform:translate(-50%,-50%) !important}
.artpop{transform:translate(calc(-50% + 100vw),-50%)}
body.pop-open .phone{transform:translateX(-100vw) !important}
body.standalone-article .artpop{width:calc(100vw - 24px) !important}
}
/* 2017 옛날폰 홈버튼: 기본 숨김, era-2017에서만 표시 */
.home-btn{display:none}
body.era-2017 .home-btn{
display:block; position:absolute; left:50%; bottom:12px; transform:translateX(-50%);
width:42px; height:42px; border-radius:50%;
background:#fdeef4;
border:1px solid #f0c4d8;
z-index:7; cursor:pointer; transition:background .12s;
}
body.era-2017 .home-btn:active{ background:#f9dde9; }
.island{
position:absolute; top:20px; left:50%; transform:translateX(-50%);
width:104px; height:26px; border-radius:16px; background:#22384b;
z-index:6; transition:all .55s;
}
body.era-2017 .island{width:0;height:0;opacity:0}
/* ── 상태바 ── */
.statusbar{
display:flex; justify-content:space-between; align-items:center; flex-shrink:0;
padding:16px 24px 6px; font-size:10.5px; font-weight:600; min-height:40px;
font-variant-numeric:tabular-nums; transition:padding .9s, color .6s;
color:var(--s-ink);
}
/* 2017 iOS10: 상단바 배경 (톤다운 핑크) + 글씨 흰색 · 세로 중앙 */
body.era-2017 .statusbar{
padding:9px 24px; min-height:0; align-items:center;
background:var(--p-hot); color:#fff; font-weight:700;
}
.statusbar > span:first-child{display:flex; align-items:center; gap:4px; line-height:1}
.statusbar .r{display:flex; gap:5px; align-items:center; font-size:9.5px; line-height:1}
.statusbar .net::before{content:"5G"}
body.era-2017 .statusbar .net::before{content:"LTE"}
.statusbar .carrier::before{content:""}
body.era-2017 .statusbar .carrier::before{content:"SKT "}
/* ── 콘텐츠 (내부 스크롤) ── */
.scroll{
flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
scrollbar-width:none; position:relative;
}
.scroll::-webkit-scrollbar{width:0; display:none}
/* ── 헤더 ── */
.cover{padding:18px 22px 6px}
.cover .label{
font-family:var(--round); font-size:8.5px; letter-spacing:.18em; font-weight:700;
color:var(--s-sub); transition:color 1s;
}
body.era-2017 .cover .label{color:var(--p-sub)}
.cover .year{
display:inline-block; font-size:26px; font-weight:300; letter-spacing:.02em; margin-top:2px;
color:var(--s-deep); font-variant-numeric:tabular-nums; transition:color 1s;
}
body.era-2017 .cover .year{color:var(--p-hot)}
.cover .blogname{
font-family:var(--round); font-size:12px; font-weight:400; letter-spacing:.01em; margin-top:2px;
color:var(--s-ink);
}
body.era-2017 .cover .blogname{color:var(--p-ink)}
.cover .route{
display:flex; align-items:center; gap:8px; margin-top:10px;
font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.1em;
color:var(--s-sub); transition:color 1s;
}
body.era-2017 .cover .route{color:var(--p-sub)}
.cover .route .ln{
flex:1; height:1px;
background:repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 9px);
opacity:.55;
}
.cover .route .fl{font-size:11px}
/* ── 시대 전환 알림 ── */
.memory{
margin:12px 16px 4px; border-radius:15px; padding:10px 12px;
display:flex; gap:10px; align-items:center; cursor:pointer; user-select:none;
background:var(--s-card); border:1px solid var(--s-line);
box-shadow:0 5px 16px rgba(90,150,200,.13);
animation:drop .6s cubic-bezier(.2,.9,.3,1.15);
transition:all .9s, transform .13s;
}
.memory:active{transform:scale(.975)}
@keyframes drop{from{transform:translateY(-56px);opacity:0}to{transform:translateY(0);opacity:1}}
body.era-2017 .memory{
background:var(--p-card); border-color:var(--p-line);
box-shadow:0 5px 16px rgba(228,120,168,.15);
}
.memory .m-icon{
width:32px; height:32px; border-radius:9px; flex-shrink:0;
display:grid; place-items:center; font-size:15px;
background:#e7f2fb; transition:background .9s;
}
body.era-2017 .memory .m-icon{background:#fbdeeb}
.memory .m-body{flex:1; min-width:0}
.memory .m-app{
font-family:var(--mono); font-size:7.5px; letter-spacing:.2em; font-weight:600;
color:var(--s-sub); transition:color .9s; text-transform:uppercase;
}
body.era-2017 .memory .m-app{color:var(--p-sub)}
.memory .m-title{
font-size:12px; font-weight:700; margin-top:1px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.memory .m-go{
font-size:10px; font-weight:700; color:#fff; border-radius:14px; padding:5px 11px;
background:var(--s-sky); transition:background .9s; white-space:nowrap; flex-shrink:0;
}
body.era-2017 .memory .m-go{background:var(--p-hot)}
/* ── 카테고리 칩 ── */
.cats{
display:flex; gap:7px; padding:12px 16px 4px; overflow-x:auto; scrollbar-width:none;
}
.cats::-webkit-scrollbar{display:none}
.cat{
display:flex; align-items:center; gap:5px; flex-shrink:0; cursor:pointer;
font-size:11px; font-weight:600; padding:6px 12px; border-radius:16px;
background:var(--s-card); border:1px solid var(--s-line); color:var(--s-ink);
transition:all .9s;
}
.cat.on{background:var(--s-deep); border-color:var(--s-deep); color:#fff}
body.era-2017 .cat{background:var(--p-card); border-color:var(--p-line); color:var(--p-ink)}
body.era-2017 .cat.on{background:var(--p-hot); border-color:var(--p-hot); color:#fff}
.cat .g{font-family:var(--mono); font-size:7.5px; font-weight:600; letter-spacing:.06em; opacity:.65}
/* ── 앱 아이콘 그리드 커버 (이미지+제목+링크, 가로 4개) ── */
/* 앱 아이콘 커버: 흰 배경·테두리 없이 아이콘만 (홈 화면 느낌) */
.cover-card.cover-appgrid{
background:transparent !important; border:none !important; box-shadow:none !important;
border-radius:0 !important;
}
.cover-appgrid{padding:6px 8px 4px}
.cvg-head{margin:0 4px 14px}
.cvg-title{
font-family:var(--round); font-size:10.5px; font-weight:700; letter-spacing:.04em;
color:var(--s-deep);
}
body.era-2017 .cvg-title{color:var(--p-hot)}
.cvg-items{
display:grid; grid-template-columns:repeat(4,1fr); gap:16px 8px;
}
.cvg-item{
display:flex; flex-direction:column; align-items:center; gap:7px;
text-decoration:none; color:var(--s-sub); font-family:var(--round);
font-size:9.5px; font-weight:600; text-align:center;
}
body.era-2017 .cvg-item{color:var(--p-sub)}
.cvg-img{
width:56px; height:56px;
background:#e4eef7 center/cover no-repeat;
transition:transform .18s ease, box-shadow .2s, filter .2s;
position:relative;
}
/* ── 2026: 요즘 iOS 앱 아이콘 (부드러운 라운드 스퀘어 + 그림자) ── */
.cvg-img{
border-radius:26%; /* iOS 요즘 superellipse 느낌 */
box-shadow:0 6px 16px rgba(90,150,200,.28);
}
/* ── 2017: iOS 10 앱 아이콘 (덜 둥근 모서리 + 상단 광택 + 미세 베벨) ── */
body.era-2017 .cvg-img{
border-radius:22%;
background-color:#fbe0ec;
box-shadow:0 4px 10px rgba(228,120,168,.3), inset 0 1px 0 rgba(255,255,255,.6);
}
body.era-2017 .cvg-img::after{
content:''; position:absolute; inset:0; border-radius:inherit;
background:linear-gradient(180deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,.12) 42%, rgba(255,255,255,0) 55%);
pointer-events:none;
}
.cvg-item:hover .cvg-img{transform:translateY(-3px) scale(1.05); box-shadow:0 9px 22px rgba(90,150,200,.38)}
body.era-2017 .cvg-item:hover .cvg-img{box-shadow:0 8px 18px rgba(228,120,168,.4), inset 0 1px 0 rgba(255,255,255,.6)}
.cvg-item:active .cvg-img{transform:translateY(0) scale(.94)}
.cvg-item:hover{color:var(--s-deep)}
body.era-2017 .cvg-item:hover{color:var(--p-hot)}
.cvg-name{max-width:64px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.3}
.cvg-more{
display:inline-block; margin:12px 4px 0; font-family:var(--mono);
font-size:9px; font-weight:600; letter-spacing:.08em; color:var(--s-sub); text-decoration:none;
}
body.era-2017 .cvg-more{color:var(--p-sub)}
/* ── 홈 커버 ── */
.covers{padding:12px 16px 0; display:flex; flex-direction:column; gap:12px}
.cover-card{
border-radius:16px; overflow:hidden;
background:var(--s-card); border:1px solid var(--s-line);
box-shadow:0 5px 16px rgba(90,150,200,.12); transition:all .9s;
}
.cover-card.cover-era-hidden{display:none !important}
/* ── 폰 배경화면(벽지): 이미지 레이어(::before, 블러 대상) + 밝기막(::after) ── */
.screen.has-wall::before{
content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
background-image:var(--wall-url); background-size:cover; background-position:center; background-repeat:no-repeat;
transition:filter .3s;
}
.screen.has-wall::after{
content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
/* 기본: 아주 살짝 밝게 (가독성) */
background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06) 30%, rgba(255,255,255,.2));
transition:background .3s;
}
/* 배경 레이어(::before/::after)는 z-index:0, 콘텐츠는 z-index:1로 위에 */
.screen.has-wall > .statusbar,
.screen.has-wall > .scroll,
.screen.has-wall > .dock{position:relative; z-index:1}
/* wipe는 absolute 유지(화면 전체 덮개) — z-index만 올림 */
.screen.has-wall > .wipe{z-index:20}
/* 밝기 조절 (::after 막 색) */
.screen.wall-bright::after, .screen.wall-dim-bright::after{ background:rgba(255,255,255,.35) }
.screen.wall-dim-bright2::after{ background:rgba(255,255,255,.55) }
.screen.wall-dim-dim::after{ background:rgba(20,40,70,.28) }
.screen.wall-dim-dim2::after{ background:rgba(15,30,55,.5) }
/* 흐림(블러) — 이미지 레이어에만 */
.screen.wall-blur-s::before{ filter:blur(3px); inset:-8px }
.screen.wall-blur-m::before{ filter:blur(7px); inset:-16px }
.screen.wall-blur-l::before{ filter:blur(14px); inset:-30px }
body.era-2017 .cover-card{
background:var(--p-card); border-color:var(--p-line);
box-shadow:0 5px 16px rgba(228,120,168,.14);
}
/* 배너형 (슬라이드) */
.cover-banner{position:relative}
.cover-banner .cvb-link{
display:block; position:relative; aspect-ratio:16/9; min-height:150px;
}
/* 슬라이드 모드: 높이는 JS가 폭 기준 16:9로 설정, 슬라이드는 컨테이너를 꽉 채움 */
.cover-banner.is-slider{position:relative; min-height:150px; overflow:hidden; display:block; aspect-ratio:auto}
.cover-banner.is-slider .cvb-link{
position:absolute !important; inset:0 !important; top:0; left:0; width:100%; height:100%;
aspect-ratio:auto !important; min-height:0 !important;
opacity:0; transition:opacity .8s ease; pointer-events:none;
}
.cover-banner.is-slider .cvb-link.on{opacity:1; pointer-events:auto}
.cover-banner.is-slider .cvb-img{position:absolute; inset:0; width:100%; height:100%}
.cvb-dots{
position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
display:flex; gap:6px; z-index:3;
}
.cvb-dot{
width:7px; height:7px; border-radius:50%; cursor:pointer;
background:rgba(255,255,255,.5); border:none; padding:0; transition:background .2s, width .2s;
}
.cvb-dot.on{background:#fff; width:18px; border-radius:4px}
.cvb-img{
position:absolute; inset:0; background-size:cover; background-position:center;
background-color:#dcecfa; transition:background-color .9s;
}
body.era-2017 .cvb-img{background-color:#fbdcea}
.cvb-shade{
position:absolute; inset:0;
background:linear-gradient(180deg, rgba(20,50,80,0) 30%, rgba(20,50,80,.62) 100%);
transition:background .9s;
}
body.era-2017 .cvb-shade{background:linear-gradient(180deg, rgba(120,40,80,0) 30%, rgba(120,40,80,.55) 100%)}
.cvb-txt{position:absolute; left:16px; right:16px; bottom:14px; color:#fff}
.cvb-badge{
display:inline-block; font-family:var(--mono); font-size:8px; font-weight:600;
letter-spacing:.18em; padding:3px 8px; border-radius:20px; margin-bottom:6px;
background:var(--s-sky); font-style:normal; transition:background .9s;
}
body.era-2017 .cvb-badge{background:var(--p-hot)}
.cvb-title{display:block; font-size:16px; font-weight:700; line-height:1.4; text-shadow:0 1px 6px rgba(0,0,0,.4)}
.cvb-sum{
display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
font-size:11.5px; margin-top:3px; opacity:.92; text-shadow:0 1px 4px rgba(0,0,0,.4)
}
.cvb-stub{position:absolute; top:12px; right:12px}
.cvb-go{
font-size:10px; font-weight:700; color:#fff; background:rgba(0,0,0,.32);
border:1px solid rgba(255,255,255,.5); border-radius:20px; padding:5px 11px;
backdrop-filter:blur(4px);
}
/* 목록형 */
.cover-list{padding:14px 16px}
.cvl-head{margin-bottom:10px}
.cvl-title{
font-family:var(--mono); font-size:10px; letter-spacing:.2em; font-weight:600;
color:var(--s-sub); text-transform:uppercase; transition:color .9s;
}
body.era-2017 .cvl-title{color:var(--p-sub)}
.cvl-items{display:flex; flex-direction:column; gap:9px}
.cvl-item{display:flex; gap:11px; align-items:center}
.cvl-thumb{
width:52px; height:52px; flex-shrink:0; border-radius:11px;
background-size:cover; background-position:center; background-color:#e7f1fb;
transition:background-color .9s;
}
body.era-2017 .cvl-thumb{background-color:#fbe2ee}
.cvl-body{flex:1; min-width:0}
.cvl-t{display:block; font-size:13px; font-weight:700; line-height:1.4;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cvl-s{
display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
font-size:11px; color:var(--s-sub); margin-top:2px; transition:color .9s;
}
body.era-2017 .cvl-s{color:var(--p-sub)}
.cvl-meta{
display:flex; gap:7px; margin-top:4px; font-family:var(--round);
font-size:9px; color:var(--s-sub); transition:color .9s;
}
.cvl-meta i{font-style:normal; font-family:var(--mono); opacity:.8}
body.era-2017 .cvl-meta{color:var(--p-sub)}
.cvl-meta em{font-style:normal; font-weight:600}
.cvl-more{
display:inline-block; margin-top:11px; font-size:11px; font-weight:600;
color:var(--s-deep); transition:color .9s;
}
body.era-2017 .cvl-more{color:var(--p-hot)}
/* 커버 끔 */
body.cover-off .covers{display:none}
/* ── 피드 라벨 ── */
.feed{padding:10px 16px 14px; display:flex; flex-direction:column}
.feed-label{
display:flex; justify-content:space-between; align-items:center;
font-family:var(--mono); font-size:8.5px; letter-spacing:.22em; font-weight:600;
padding:2px 4px 6px; color:var(--s-sub); transition:color .9s; text-transform:uppercase;
}
body.era-2017 .feed-label{color:var(--p-sub)}
.post-wrap{display:flex; flex-direction:column; gap:9px}
.empty{
text-align:center; font-size:12px; padding:34px 0; color:var(--s-sub);
}
body.era-2017 .empty{color:var(--p-sub)}
/* ── 글 카드 ── */
.post{
display:block; border-radius:14px; padding:12px 14px; position:relative;
background:var(--s-card); border:1px solid var(--s-line);
box-shadow:0 3px 10px rgba(90,150,200,.08);
transition:all .9s, transform .13s;
}
.post:hover{transform:translateY(-2px)}
body.era-2017 .post{
border-radius:6px 14px 14px 14px;
background:var(--p-card); border-color:var(--p-line);
box-shadow:0 3px 10px rgba(228,120,168,.10);
}
.post.era-hidden{display:none}
.post .p-top{display:flex; align-items:center; gap:7px; margin-bottom:6px}
.badge{
font-family:var(--mono); font-size:8px; font-weight:600; letter-spacing:.08em;
padding:2px 7px; border-radius:5px; color:#fff; background:var(--s-sky);
transition:all .9s;
}
body.era-2017 .badge{background:var(--p-hot); border-radius:10px}
.badge.b2017{background:var(--p-hot); border-radius:10px}
.badge.b2026{background:var(--s-sky); border-radius:5px}
.post .p-cat{font-size:10px; font-weight:600; color:var(--s-sub); transition:color .9s}
body.era-2017 .post .p-cat{color:var(--p-sub)}
.post .p-seat{
margin-left:auto; font-family:var(--mono); font-size:9px; font-weight:600;
letter-spacing:.06em; color:var(--s-sub); transition:color .9s;
display:flex; align-items:center; gap:4px;
}
body.era-2017 .post .p-seat{color:var(--p-sub)}
.post .p-seat b{color:var(--s-deep); font-weight:600; transition:color .9s}
body.era-2017 .post .p-seat b{color:var(--p-hot)}
.post .p-title{font-size:12.5px; font-weight:700; line-height:1.45; letter-spacing:-.01em}
.post .p-sum{
font-size:10.5px; font-weight:400; line-height:1.6; margin-top:4px;
color:var(--s-sub); transition:color .9s;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
body.era-2017 .post .p-sum{color:var(--p-sub)}
.post .p-foot{
display:flex; align-items:center; gap:10px; margin-top:8px; padding-top:8px;
border-top:1px dashed var(--s-line); transition:border-color .9s;
font-family:var(--mono); font-size:8.5px; font-weight:500; letter-spacing:.05em;
color:var(--s-sub);
}
body.era-2017 .post .p-foot{border-color:var(--p-line); color:var(--p-sub)}
.post .p-foot .bc{
margin-left:auto; width:52px; height:11px; opacity:.5;
background:repeating-linear-gradient(90deg, currentColor 0 1.5px, transparent 1.5px 4px, currentColor 4px 5px, transparent 5px 7.5px);
transition:opacity .9s;
}
body.era-2017 .post .p-foot .bc{background:none; width:auto; height:auto; opacity:.8}
body.era-2017 .post .p-foot .bc::before{content:"♡ ♡ ♡"; font-size:8.5px; letter-spacing:.3em}
/* ── 글 상세 ── */
.article{padding:12px 16px 18px}
.a-head{
border-radius:14px; padding:14px 16px; margin-bottom:12px;
background:var(--s-card); border:1px solid var(--s-line);
box-shadow:0 3px 10px rgba(90,150,200,.08); transition:all .9s;
}
body.era-2017 .a-head{
border-radius:6px 14px 14px 14px; background:var(--p-card);
border-color:var(--p-line); box-shadow:0 3px 10px rgba(228,120,168,.10);
}
.a-meta{display:flex; align-items:center; gap:8px; margin-bottom:7px}
.a-cat{font-size:10px; font-weight:600; color:var(--s-sub)}
body.era-2017 .a-cat{color:var(--p-sub)}
.a-date{
margin-left:auto; font-family:var(--mono); font-size:8.5px; font-weight:500;
color:var(--s-sub);
}
body.era-2017 .a-date{color:var(--p-sub)}
.a-title{font-size:17px; font-weight:700; line-height:1.45; letter-spacing:-.01em}
.a-strip{
display:flex; align-items:center; gap:10px; margin-top:10px; padding-top:9px;
border-top:1px dashed var(--s-line); transition:border-color .9s;
font-family:var(--mono); font-size:9px; font-weight:600; color:var(--s-sub);
}
body.era-2017 .a-strip{border-color:var(--p-line); color:var(--p-sub)}
.a-strip b{color:var(--s-deep)}
body.era-2017 .a-strip b{color:var(--p-hot)}
.a-strip .bc{
margin-left:auto; width:60px; height:12px; opacity:.5;
background:repeating-linear-gradient(90deg, currentColor 0 1.5px, transparent 1.5px 4px, currentColor 4px 5px, transparent 5px 7.5px);
}
body.era-2017 .a-strip .bc{background:none; width:auto; height:auto; opacity:.8}
body.era-2017 .a-strip .bc::before{content:"♡ ♡ ♡"; letter-spacing:.3em}
.a-body{
font-family:'Pretendard Variable',Pretendard,-apple-system,sans-serif; /* 본문은 프리텐다드 */
font-size:12.5px; line-height:1.8; letter-spacing:-.01em;
border-radius:14px; padding:16px; word-break:break-word;
background:var(--s-card); border:1px solid var(--s-line); transition:all .9s;
}
body.era-2017 .a-body{background:var(--p-card); border-color:var(--p-line)}
.a-body p{margin:0 0 1em}
.a-body h1,.a-body h2,.a-body h3{margin:1.4em 0 .6em; line-height:1.4}
.a-body h2{font-size:15px}
.a-body h3{font-size:13.5px}
.a-body img{border-radius:10px; margin:8px 0}
.a-body blockquote{
margin:1em 0; padding:10px 14px; border-left:3px solid var(--s-sky);
background:var(--s-bg); border-radius:0 10px 10px 0; color:var(--s-sub);
transition:all .9s;
}
body.era-2017 .a-body blockquote{border-color:var(--p-hot); background:var(--p-bg); color:var(--p-sub)}
.a-body a{text-decoration:underline; text-underline-offset:3px; color:var(--s-deep)}
body.era-2017 .a-body a{color:var(--p-hot)}
.a-body pre{
background:#f3f6f9; border-radius:10px; padding:12px; overflow-x:auto;
font-family:var(--mono); font-size:11.5px; line-height:1.7; margin:1em 0;
}
.a-body code{font-family:var(--mono); font-size:.92em}
.a-body ul,.a-body ol{padding-left:1.3em; margin:0 0 1em}
.a-body hr{border:none; border-top:1px dashed var(--s-line); margin:1.5em 0}
body.era-2017 .a-body hr{border-color:var(--p-line)}
.a-body table{border-collapse:collapse; width:100%; margin:1em 0; font-size:12px}
.a-body th,.a-body td{border:1px solid var(--s-line); padding:6px 9px}
body.era-2017 .a-body th,body.era-2017 .a-body td{border-color:var(--p-line)}
/* 본문 안 유튜브·영상 임베드: 티스토리 기본 테두리/배경 제거, 둥근 모서리 */
.a-body iframe,
.a-body .tistory_iframe,
.a-body figure iframe,
.a-body .video_player,
.a-body .txc-video,
.a-body [data-ke-type="video"] iframe,
.a-body [data-ke-type="opengraph"]{
border:none !important; outline:none !important; box-shadow:none !important;
background:transparent !important; border-radius:12px; max-width:100%;
}
/* 영상 감싸는 figure/블록의 여백·선 제거 */
.a-body figure.imageblock,
.a-body figure[data-ke-type="video"],
.a-body .txc-video,
.a-body .video_wrap{
margin:14px 0; padding:0; border:none !important; background:none !important;
}
.a-body figure figcaption{font-size:11px; opacity:.6; text-align:center; margin-top:6px}
/* 오픈그래프(링크 카드) 기본 테두리도 부드럽게 */
.a-body .og-wrap, .a-body [data-ke-type="opengraph"]{
border:1px solid var(--s-line) !important; border-radius:12px; overflow:hidden;
}
body.era-2017 .a-body .og-wrap, body.era-2017 .a-body [data-ke-type="opengraph"]{border-color:var(--p-line) !important}
.a-tags{margin-top:12px; font-size:10.5px; line-height:2; color:var(--s-sub)}
.a-tags a{
display:inline-block; margin-right:6px; padding:3px 10px; border-radius:14px;
background:var(--s-card); border:1px solid var(--s-line); transition:all .9s;
}
body.era-2017 .a-tags{color:var(--p-sub)}
body.era-2017 .a-tags a{background:var(--p-card); border-color:var(--p-line)}
/* ── 댓글 · 방명록 ── */
.cmt{margin-top:18px}
.guest{padding:12px 16px 18px}
.cmt-label{
font-family:var(--mono); font-size:8.5px; letter-spacing:.22em; font-weight:600;
padding:2px 4px 8px; color:var(--s-sub); text-transform:uppercase; transition:color .9s;
}
body.era-2017 .cmt-label{color:var(--p-sub)}
.cmt-list{display:flex; flex-direction:column; gap:8px}
.cmt-item{
border-radius:12px; padding:11px 13px;
background:var(--s-card); border:1px solid var(--s-line); transition:all .9s;
}
body.era-2017 .cmt-item{
border-radius:5px 12px 12px 12px; background:var(--p-card); border-color:var(--p-line);
}
.cmt-top{display:flex; align-items:baseline; gap:8px}
.cmt-name{font-size:11.5px; font-weight:700}
.cmt-date{font-family:var(--mono); font-size:8px; color:var(--s-sub)}
body.era-2017 .cmt-date{color:var(--p-sub)}
.cmt-reply{
margin-left:auto; font-size:9.5px; font-weight:600; color:var(--s-deep);
}
body.era-2017 .cmt-reply{color:var(--p-hot)}
.cmt-desc{font-size:12px; line-height:1.7; margin-top:4px; color:var(--s-ink)}
body.era-2017 .cmt-desc{color:var(--p-ink)}
/* 대댓글 들여쓰기 */
.cmt-item .cmt-item, .cmt-list .cmt-list{margin-left:16px; margin-top:8px}
.cmt-form{
margin-top:10px; border-radius:14px; padding:12px;
background:var(--s-card); border:1px solid var(--s-line); transition:all .9s;
}
body.era-2017 .cmt-form{background:var(--p-card); border-color:var(--p-line)}
.cmt-row{display:flex; gap:7px; margin-bottom:7px; align-items:center; flex-wrap:wrap}
.cmt-form input[type=text], .cmt-form input[type=password]{
flex:1; min-width:90px; font:inherit; font-size:11.5px; padding:7px 10px;
border-radius:9px; border:1px solid var(--s-line); background:var(--s-bg);
color:inherit; outline:none; transition:all .9s;
}
body.era-2017 .cmt-form input[type=text], body.era-2017 .cmt-form input[type=password]{
border-color:var(--p-line); background:var(--p-bg);
}
.cmt-secret{font-size:10px; display:flex; gap:4px; align-items:center; color:var(--s-sub)}
body.era-2017 .cmt-secret{color:var(--p-sub)}
.cmt-form textarea{
width:100%; min-height:64px; resize:vertical; font:inherit; font-size:12px;
line-height:1.7; padding:9px 11px; border-radius:10px;
border:1px solid var(--s-line); background:var(--s-bg); color:inherit;
outline:none; transition:all .9s;
}
body.era-2017 .cmt-form textarea{border-color:var(--p-line); background:var(--p-bg)}
.cmt-submit{
margin-top:8px; font:inherit; font-size:11px; font-weight:700; cursor:pointer;
color:#fff; background:var(--s-sky); border:none; border-radius:14px; padding:7px 16px;
transition:background .9s;
}
body.era-2017 .cmt-submit{background:var(--p-hot)}
/* ── 태그 페이지 ── */
.tags-page{padding:12px 16px 18px}
.tag-cloud{display:flex; flex-wrap:wrap; gap:7px}
.tagchip{
font-size:11px; font-weight:600; padding:6px 12px; border-radius:16px;
background:var(--s-card); border:1px solid var(--s-line); transition:all .9s;
}
body.era-2017 .tagchip{background:var(--p-card); border-color:var(--p-line)}
/* ── 페이징 ── */
.paging{
display:flex; justify-content:center; align-items:center; gap:4px;
padding:4px 16px 16px; font-family:var(--mono); font-size:10px; font-weight:600;
}
.paging a{
min-width:26px; height:26px; display:grid; place-items:center; border-radius:9px;
background:var(--s-card); border:1px solid var(--s-line); color:var(--s-sub);
transition:all .9s;
}
.paging a.selected, .paging a:hover{color:#fff; background:var(--s-deep); border-color:var(--s-deep)}
body.era-2017 .paging a{background:var(--p-card); border-color:var(--p-line); color:var(--p-sub)}
body.era-2017 .paging a.selected, body.era-2017 .paging a:hover{
color:#fff; background:var(--p-hot); border-color:var(--p-hot);
}
/* ── 하단 독 (탭바 + 인디케이터 배경 통일) ── */
.dock{
flex-shrink:0; border-top:1px solid var(--s-line);
background:var(--s-dock); backdrop-filter:blur(10px);
transition:all .9s;
}
body.era-2017 .dock{
border-color:var(--p-line); background:var(--p-dock);
border-radius:0;
}
.tabbar{
display:flex; justify-content:space-around; align-items:center;
padding:9px 10px 4px;
}
.tab{
display:flex; flex-direction:column; align-items:center; gap:3px; cursor:pointer;
font-size:8.5px; font-weight:400; letter-spacing:.04em; font-family:var(--round);
color:var(--s-sub); transition:color .25s, transform .18s; padding:3px 10px 2px;
position:relative;
}
body.era-2017 .tab{color:var(--p-sub)}
/* SVG 아이콘 (mask로 색상 상속 → hover/active 색·크기 반응) */
.tab .ti{
width:21px; height:21px; display:block;
background:currentColor;
-webkit-mask:var(--ic) center/contain no-repeat; mask:var(--ic) center/contain no-repeat;
transition:transform .18s ease, background .25s;
}
/* 2026 라인 아이콘 */
.tab-home{--ic:url("data:image/svg+xml;utf8,")}
.tab-profile{--ic:url("data:image/svg+xml;utf8,")}
.tab-guest{--ic:url("data:image/svg+xml;utf8,")}
.tab-tag{--ic:url("data:image/svg+xml;utf8,")}
/* 2017 손그림 하트 아이콘 */
body.era-2017 .tab-home{--ic:url("data:image/svg+xml;utf8,")}
body.era-2017 .tab-profile{--ic:url("data:image/svg+xml;utf8,")}
body.era-2017 .tab-guest{--ic:url("data:image/svg+xml;utf8,")}
body.era-2017 .tab-tag{--ic:url("data:image/svg+xml;utf8,")}
/* 2017 선택(채워진) 아이콘 — iOS 10식 라인→fill */
body.era-2017 .tab-home{--ic-on:url("data:image/svg+xml;utf8,")}
body.era-2017 .tab-profile{--ic-on:url("data:image/svg+xml;utf8,")}
body.era-2017 .tab-guest{--ic-on:url("data:image/svg+xml;utf8,")}
body.era-2017 .tab-tag{--ic-on:url("data:image/svg+xml;utf8,")}
/* ═══ 2026 (요즘) — 미니멀: 살짝 뜨고 은은하게 ═══ */
.tab:hover{color:var(--s-deep)}
.tab:hover .ti{transform:translateY(-2px) scale(1.08)}
.tab:active .ti{transform:translateY(0) scale(.92)}
.tab.on{color:var(--s-deep); font-weight:700}
.tab.on .ti{transform:translateY(-1px)}
/* ═══ 2017 (iOS 10) — 선택 시 아이콘이 라인→꽉찬 버전으로 ═══ */
body.era-2017 .tab{ padding-top:5px; }
body.era-2017 .tab:hover{color:var(--p-hot)}
body.era-2017 .tab:hover .ti{ transform:scale(1.05); }
body.era-2017 .tab:active .ti{ transform:scale(.92); }
/* 현재 페이지: 색 진하게 + 아이콘 채워짐(--ic-on) + 글씨 진하게 */
body.era-2017 .tab.on{color:var(--p-hot); font-weight:700}
body.era-2017 .tab.on .ti{ -webkit-mask-image:var(--ic-on, var(--ic)); mask-image:var(--ic-on, var(--ic)); transform:none; }
.indicator{
width:110px; height:4px; border-radius:3px;
background:rgba(60,110,150,.28); margin:4px auto 9px;
}
body.era-2017 .indicator{display:none}
body.era-2017 .tabbar{padding-bottom:12px}
/* ── 구름 와이프 전환 ── */
.wipe{position:absolute; inset:0; z-index:20; pointer-events:none; display:flex; align-items:center; justify-content:center; overflow:hidden}
.wipe .puffs{
position:absolute; inset:-30%;
background:
radial-gradient(120px 96px at 12% 30%, #fff 60%, rgba(255,255,255,0) 72%),
radial-gradient(150px 120px at 26% 52%, #fff 60%, rgba(255,255,255,0) 72%),
radial-gradient(130px 104px at 40% 28%, #fff 60%, rgba(255,255,255,0) 72%),
radial-gradient(170px 130px at 52% 60%, #fff 60%, rgba(255,255,255,0) 72%),
radial-gradient(140px 110px at 66% 34%, #fff 60%, rgba(255,255,255,0) 72%),
radial-gradient(160px 128px at 78% 62%, #fff 60%, rgba(255,255,255,0) 72%),
radial-gradient(130px 104px at 90% 40%, #fff 60%, rgba(255,255,255,0) 72%),
radial-gradient(150px 120px at 34% 86%, #fff 60%, rgba(255,255,255,0) 72%),
radial-gradient(160px 126px at 62% 84%, #fff 60%, rgba(255,255,255,0) 72%);
filter:blur(2px);
transform:translateX(-118%); opacity:0;
}
.wipe.go .puffs{animation:sweep 1.2s ease-in-out forwards}
@keyframes sweep{
0%{transform:translateX(-118%); opacity:1}
45%,55%{transform:translateX(0); opacity:1}
100%{transform:translateX(118%); opacity:1}
}
.wipe .msg{
position:relative; opacity:0; font-family:var(--mono);
font-size:10px; letter-spacing:.28em; font-weight:700; color:#fff;
background:rgba(34,56,75,.9);
padding:9px 18px; border-radius:22px;
box-shadow:0 8px 24px rgba(20,45,75,.35), inset 0 1px 0 rgba(255,255,255,.15);
backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
white-space:nowrap;
}
body.era-2017 .wipe .msg{
background:rgba(200,65,126,.92);
box-shadow:0 8px 24px rgba(200,65,126,.35), inset 0 1px 0 rgba(255,255,255,.2);
}
.wipe.go .msg{animation:msg 1.2s ease forwards}
@keyframes msg{0%,32%{opacity:0; transform:translateY(6px) scale(.96)}48%,62%{opacity:1; transform:translateY(0) scale(1)}80%,100%{opacity:0; transform:translateY(-4px) scale(.98)}}
/* ── 접근성 · 반응형 ── */
:focus-visible{outline:2px solid var(--s-sky); outline-offset:2px; border-radius:6px}
body.era-2017 :focus-visible{outline-color:var(--p-hot)}
@media (prefers-reduced-motion:reduce){
.bgcloud{animation:none}
.memory{animation:none}
.wipe.go .puffs,.wipe.go .msg{animation-duration:.45s}
}
@media (max-width:460px){
body{padding:0; justify-content:flex-start}
.phone{
width:100% !important; height:100vh !important; max-width:none;
border-radius:0; padding:0; box-shadow:none; background:transparent;
}
body.era-2017 .phone{border-radius:0; padding:0}
.screen{border-radius:0 !important}
.island{display:none}
}
/* ═══════════════════════════════════════════════
본문 파서 스타일 (케이브덕 · 페어 · 프로필 · 플레이리스트)
═══════════════════════════════════════════════ */
.a-body.is-parsed, body.is-parsed .a-body{
padding:0; background:none !important; border:none !important;
border-radius:0 !important;
}
/* ── 케이브덕 로그 ── */
.cvd-render{
--ca:var(--s-deep); --cb:var(--s-sky);
display:flex; flex-direction:column; gap:14px; padding:6px 0 20px;
}
body.era-2017 .cvd-render{--ca:var(--p-hot); --cb:var(--p-sub)}
.cvd-prose{
background:var(--s-card); border:1px solid var(--s-line);
border-radius:16px; padding:16px 18px; line-height:1.95; font-size:14.5px;
}
body.era-2017 .cvd-prose{background:var(--p-card); border-color:var(--p-line)}
.cvd-prose p{margin:0 0 10px}
.cvd-prose p:last-child{margin-bottom:0}
.cvd-prose p.msg-tight{margin-bottom:3px}
.cvd-prose .nr{color:inherit; opacity:.82}
.cvd-prose .dlg{color:var(--ca); font-weight:600}
.cvd-prose .dlg::before{content:"» "; opacity:.5; font-weight:400}
.cvd-user{
align-self:flex-end; max-width:86%;
background:linear-gradient(135deg, rgba(120,180,240,.14), rgba(120,180,240,.05));
border:1.5px solid var(--cb); border-radius:18px 18px 4px 18px;
padding:13px 16px; line-height:1.9; font-size:14.5px; position:relative;
}
.cvd-user::before{
content:"YOU"; position:absolute; top:-9px; right:14px;
font-family:var(--mono); font-size:9px; letter-spacing:.18em; font-weight:700;
background:var(--cb); color:#fff; border-radius:8px; padding:2px 8px;
}
.cvd-user p{margin:0 0 8px}
.cvd-user p:last-child{margin-bottom:0}
.cvd-user .nr{opacity:.82}
.cvd-user .dlg{font-weight:600}
.cvd-html{margin:4px 0; border-radius:14px; overflow:hidden}
/* 상태창 */
.cvd-status{
border:1px solid var(--s-line); border-radius:14px; overflow:hidden;
background:var(--s-card); font-size:13px;
}
body.era-2017 .cvd-status{border-color:var(--p-line); background:var(--p-card)}
.cvd-status .stat-title{
list-style:none; cursor:pointer; user-select:none;
display:flex; align-items:center; gap:8px;
padding:11px 15px; font-family:var(--mono); font-size:10.5px;
letter-spacing:.16em; font-weight:700; color:var(--ca);
}
.cvd-status .stat-title::-webkit-details-marker{display:none}
.cvd-status .stat-deco{font-style:normal; transition:transform .2s}
.cvd-status[open] .stat-deco{transform:rotate(90deg)}
.cvd-status .stat-caret{margin-left:auto; opacity:.4; transition:transform .2s}
.cvd-status[open] .stat-caret{transform:rotate(180deg)}
.cvd-status .stat-body{padding:4px 15px 13px; display:flex; flex-direction:column; gap:6px}
.stat-section{
font-weight:700; font-size:12.5px; color:var(--ca);
padding-top:10px; margin-top:4px; border-top:1px dashed var(--s-line);
}
.stat-section.first{border-top:none; padding-top:2px; margin-top:0}
.stat-line{display:flex; gap:10px; align-items:baseline}
.stat-key{flex-shrink:0; min-width:72px; font-weight:600; opacity:.6; font-size:12px}
.stat-val{flex:1}
.stat-list{margin:2px 0; padding-left:18px}
.stat-list li{margin:2px 0}
.stat-raw{opacity:.85}
/* ═══ 커플 프로필 [페어-19]/[페어-28] ═══ */
.couple{
--pa:#5b9bd5; --pb:#8ec5e8;
position:relative;
border:1px solid var(--s-line); border-radius:22px; overflow:hidden;
background:var(--s-card); margin:4px 0 18px; padding:0;
box-shadow:0 10px 30px rgba(60,110,160,.12);
}
.couple.pair-e17{--pa:#e478a8; --pb:#f5a9c8; box-shadow:0 10px 30px rgba(228,120,168,.14)}
/* 카드 전체에 은은한 컨셉 텍스처 (2026=구름/점, 2017=모눈종이) */
.couple::before{
content:''; position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.5;
background:
radial-gradient(circle at 12% 8%, rgba(255,255,255,.6), transparent 8%),
radial-gradient(circle at 88% 14%, rgba(255,255,255,.5), transparent 7%),
radial-gradient(140% 60% at 50% -10%, rgba(120,170,220,.12), transparent 55%);
}
.couple.pair-e17::before{
opacity:.55;
background:
linear-gradient(rgba(235,150,185,.06) 1px, transparent 1px) 0 0/100% 20px,
linear-gradient(90deg, rgba(235,150,185,.06) 1px, transparent 1px) 0 0/20px 100%,
radial-gradient(140% 60% at 50% -10%, rgba(235,150,185,.14), transparent 55%);
}
.couple > *{ position:relative; z-index:1; }
/* ── 헤더 ── */
.cp-head{
text-align:center; position:relative;
border-bottom:1px dashed var(--s-line);
}
.cp-head-in{
padding:18px 18px 16px; position:relative;
background:
radial-gradient(120% 80% at 50% -20%, rgba(120,170,220,.14), transparent 60%),
linear-gradient(180deg, rgba(120,170,220,.05), transparent);
}
.pair-e17 .cp-head-in{
background:
radial-gradient(120% 80% at 50% -20%, rgba(235,150,185,.16), transparent 60%),
linear-gradient(180deg, rgba(235,150,185,.06), transparent);
}
/* 커버 이미지 밴드 */
.cp-cover{
height:130px; background-size:cover; background-position:center; position:relative;
}
.cp-cover-veil{
position:absolute; inset:0;
background:linear-gradient(180deg, rgba(255,255,255,0) 30%, var(--s-card) 98%);
}
.pair-e17 .cp-cover-veil{
background:linear-gradient(180deg, rgba(255,255,255,0) 30%, var(--p-card) 98%);
}
/* 커버 있을 땐 태그를 커버 위로 살짝 겹치게 */
.has-cover .cp-head-in{ margin-top:-30px; background:transparent; }
/* ── 나이·연도 태그 ── */
.cp-tag{
display:inline-flex; margin:0 auto 14px; font-family:var(--mono); position:relative;
}
/* ═══ 28세: 보딩패스(항공권) ═══ */
.cp-tag-boarding{
align-items:stretch; border-radius:10px; overflow:visible;
box-shadow:0 6px 20px rgba(60,110,160,.25); text-align:left;
}
.cp-bp-main{
display:flex; flex-direction:column; gap:5px; justify-content:center;
background:linear-gradient(135deg, var(--pa), var(--pb));
color:#fff; padding:9px 14px 9px 15px;
border-radius:10px 0 0 10px;
}
.cp-bp-air{ font-size:8.5px; font-weight:700; letter-spacing:.16em; opacity:.95; }
.cp-bp-route{ display:flex; align-items:center; gap:5px; font-size:13px; font-weight:700; letter-spacing:.05em; }
.cp-bp-route b{ font-size:15px; }
.cp-bp-route i{ font-style:normal; font-size:8px; letter-spacing:-1px; opacity:.85; }
/* 절취선: 스텁 왼쪽 경계에 딱 맞춤 (메인과 스텁 사이) */
.cp-bp-main{ position:relative; }
.cp-bp-main::after{
content:''; position:absolute; top:5px; bottom:5px; right:-1px; width:0;
border-left:2px dotted rgba(255,255,255,.9);
z-index:2;
}
/* 오른쪽 반쪽(스텁): 나이 */
.cp-bp-stub{
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0;
background:#fff; color:var(--s-deep);
padding:6px 13px; min-width:56px; flex-shrink:0;
border-radius:0 10px 10px 0; border:1.5px solid rgba(120,170,220,.35); border-left:none;
}
.cp-bp-k{ font-size:7px; font-weight:700; letter-spacing:.18em; opacity:.55; }
.cp-bp-age{ font-size:22px; font-weight:700; line-height:1; color:var(--pa); }
.cp-bp-age::after{ content:'세'; font-size:9px; opacity:.7; margin-left:1px; }
.cp-bp-yr{ font-size:8px; font-weight:700; letter-spacing:.1em; opacity:.55; margin-top:2px; }
/* ═══ 19세: 학생증 + 폴라로이드 ═══ */
.cp-tag-id{
flex-direction:column; align-items:center; gap:4px;
background:#fff; border:1.5px solid var(--p-line); border-radius:7px;
padding:9px 18px 8px; transform:rotate(-2.5deg);
box-shadow:0 6px 18px rgba(228,120,168,.22);
}
.cp-tag-id::before{ /* 위쪽 테이프 */
content:''; position:absolute; top:-9px; left:50%; transform:translateX(-50%) rotate(4deg);
width:46px; height:16px; background:rgba(245,169,200,.5);
border:1px dashed rgba(228,120,168,.55); border-radius:1px;
}
.cp-tag-idlabel{ font-size:8px; font-weight:700; letter-spacing:.18em; color:var(--p-hot); opacity:.75; }
.cp-tag-idrow{ display:inline-flex; align-items:flex-end; gap:8px; }
.cp-tag-id .cp-tag-age{ display:inline-flex; align-items:flex-end; gap:1px; color:var(--p-hot); font-size:23px; font-weight:700; line-height:.9; }
.cp-tag-id .cp-tag-age i{ font-style:normal; font-size:11px; font-weight:700; opacity:.75; margin-bottom:2px; }
.cp-tag-id .cp-tag-yr{ font-size:9px; font-weight:700; letter-spacing:.08em; color:var(--p-sub); margin-bottom:3px; }
/* ── 페어명 (확 크게) ── */
.a-body .cp-title, h3.cp-title{
margin:2px 0 6px; font-size:31px; line-height:1.28; letter-spacing:-.01em;
/* 2026(기본): 고딕+살짝 세리프 (Hahmlet) */
font-family:'Hahmlet','Apple SD Gothic Neo',serif; font-weight:800;
background:linear-gradient(108deg, var(--pa) 0%, var(--pb) 60%, var(--pa) 100%);
-webkit-background-clip:text; background-clip:text; color:transparent;
/* 효과: 아래로 부드러운 그림자 + 은은한 위 하이라이트 */
filter:drop-shadow(0 2px 5px rgba(91,155,213,.4));
}
/* 2017(19세): 귀여운 폰트 + 통통한 효과 */
body.era-2017 .a-body .cp-title, body.era-2017 h3.cp-title{
font-family:'Jua','Apple SD Gothic Neo',sans-serif; font-weight:400;
letter-spacing:0;
background:linear-gradient(105deg, #ff9ec7 0%, #ffb8d6 50%, #f57cae 100%);
-webkit-background-clip:text; background-clip:text; color:transparent;
/* 효과: 통통 그림자 + 흰 테두리로 스티커 느낌 */
filter:drop-shadow(0 3px 0 rgba(255,255,255,.9)) drop-shadow(0 5px 8px rgba(228,120,168,.4));
-webkit-text-stroke:.6px rgba(255,255,255,.35);
}
/* 캐치프레이즈: 양옆 짧은 선 장식 */
.cp-catch{
display:flex; align-items:center; justify-content:center; gap:9px;
margin:9px 0 0; font-size:12px; font-weight:600; letter-spacing:.04em;
color:var(--s-sub);
}
body.era-2017 .cp-catch{color:var(--p-sub)}
.cp-catch::before, .cp-catch::after{
content:''; height:1px; width:22px;
background:linear-gradient(90deg, transparent, var(--pa)); opacity:.6;
}
.cp-catch::after{background:linear-gradient(90deg, var(--pa), transparent)}
.cp-catch span{white-space:normal}
/* 소개: 노트/메모지 느낌 */
.cp-summary{
position:relative; margin:12px 8px 0; padding:11px 14px 11px 16px;
font-size:12px; line-height:1.75; text-align:left; color:var(--s-ink); opacity:.9;
background:
linear-gradient(var(--s-card), var(--s-card)) padding-box,
repeating-linear-gradient(transparent, transparent 21px, rgba(120,170,220,.18) 21px, rgba(120,170,220,.18) 22px);
background-color:var(--s-card);
border:1px solid var(--s-line); border-radius:8px;
box-shadow:0 3px 10px rgba(60,110,160,.08);
}
.cp-summary::before{
content:''; position:absolute; left:7px; top:8px; bottom:8px; width:2px;
background:var(--pa); opacity:.5; border-radius:2px;
}
body.era-2017 .cp-summary{
background:
linear-gradient(var(--p-card), var(--p-card)) padding-box,
repeating-linear-gradient(transparent, transparent 21px, rgba(235,150,185,.2) 21px, rgba(235,150,185,.2) 22px);
background-color:var(--p-card);
border-color:var(--p-line); box-shadow:0 3px 10px rgba(228,120,168,.1);
}
/* 두 사람 나란히 (폰 폭 ~370px 기준) */
.cp-duo{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:8px; align-items:start; padding:18px 12px 16px}
.cp-side{min-width:0; display:flex; flex-direction:column; align-items:center; text-align:center; gap:5px; --cp:var(--pa)}
.cp-side .cp-name, .cp-side .cp-sub, .cp-side .cp-quote{max-width:100%; overflow-wrap:break-word; word-break:break-word}
/* 초상: 증명사진 (세로 3:4 · 흰 액자 · 살짝 비스듬) */
.cp-img{
position:relative; width:90px; aspect-ratio:3/4; border-radius:8px;
background:#fff; padding:5px 5px 16px; /* 폴라로이드식 흰 여백 (아래 넓게) */
border:1px solid var(--s-line);
box-shadow:0 6px 18px rgba(60,110,160,.22);
display:block; overflow:hidden;
}
.cp-a .cp-img{ transform:rotate(-3deg); }
.cp-b .cp-img{ transform:rotate(3deg); }
.pair-e17 .cp-img{ box-shadow:0 6px 18px rgba(228,120,168,.24); }
/* 실제 사진 (액자 안을 꽉 채움) */
.cp-img-i{
display:block; width:100%; height:100%; object-fit:cover;
border-radius:3px; background:#e4edf5;
}
/* 사진 없을 때 자리표시 */
.cp-img-ph{ display:block; width:100%; height:100%; border-radius:3px; background:#e4edf5; }
/* 증명사진 하단 라벨 (ID 느낌) */
.cp-img::after{
content:'ID PHOTO'; position:absolute; left:0; right:0; bottom:3px;
font-family:var(--mono); font-size:6px; font-weight:700; letter-spacing:.1em;
text-align:center; color:var(--cp); opacity:.55;
}
.pair-e17 .cp-img::after{ content:'★ PHOTO ★'; }
/* 초상 위 컬러 클립(집게) 장식 — 사진 오른쪽 위 모서리 */
.cp-img{ overflow:visible; } /* 클립이 밖으로 나올 수 있게 */
.cp-img > .cp-img-i, .cp-img > .cp-img-ph{ border-radius:3px; }
.cp-img::before{
content:''; position:absolute; top:-7px; right:8px;
width:16px; height:26px; border-radius:3px; z-index:3;
background:linear-gradient(180deg, var(--cp), color-mix(in srgb, var(--cp) 55%, #fff));
box-shadow:0 3px 8px rgba(60,110,160,.28);
transform:rotate(6deg);
}
.pair-e17 .cp-img::before{ box-shadow:0 3px 8px rgba(228,120,168,.3); }
/* 한마디 (증명사진 위 · 아래로 살짝 꼬리) */
.cp-quote{
position:relative; margin:0 0 8px; font-size:10.5px; font-style:italic; opacity:.92; line-height:1.45;
padding:6px 11px; border-radius:13px;
background:rgba(120,170,220,.14);
background:color-mix(in srgb, var(--cp) 14%, transparent);
color:var(--cp); font-weight:600;
}
.pair-e17 .cp-quote{ background:rgba(235,150,185,.15); background:color-mix(in srgb, var(--cp) 15%, transparent); }
/* 아래쪽 중앙 작은 꼬리 (사진을 가리킴) */
.cp-quote::after{
content:''; position:absolute; left:50%; bottom:-4px; transform:translateX(-50%);
width:0; height:0; border:5px solid transparent; border-bottom:0;
border-top-color:rgba(120,170,220,.14);
border-top-color:color-mix(in srgb, var(--cp) 14%, transparent);
}
.pair-e17 .cp-quote::after{ border-top-color:rgba(235,150,185,.15); border-top-color:color-mix(in srgb, var(--cp) 15%, transparent); }
/* 이름 (양옆 장식 + 그라데이션 밑줄 칩) */
.cp-name{
position:relative; margin:9px 0 0; font-size:16px; font-weight:700; color:var(--cp); line-height:1.2;
letter-spacing:-.01em; display:flex; align-items:center; justify-content:center; gap:7px;
}
.cp-name::before, .cp-name::after{
content:''; width:10px; height:1.5px; border-radius:2px;
background:var(--cp); opacity:.5;
}
.cp-name-t{
position:relative; padding:0;
}
/* 이름 링크 밑줄 제거 */
.cp-name a, .cp-name .cp-link{ text-decoration:none !important; }
.cp-sub{
margin:2px 0 0; font-size:10px; font-weight:700; opacity:.7; letter-spacing:.03em; line-height:1.4;
font-family:var(--round);
}
/* 가운데 하트 (SVG) — 증명사진 높이 중앙쯤 */
.cp-amp{
align-self:start; padding-top:180px; display:flex; align-items:center; justify-content:center;
}
.cp-heart-svg{
width:26px; height:24px; display:block;
fill:var(--pa);
filter:drop-shadow(0 3px 6px rgba(60,110,160,.3));
animation:cp-heart 1.6s ease-in-out infinite;
}
.pair-e17 .cp-heart-svg{ filter:drop-shadow(0 3px 6px rgba(228,120,168,.35)); }
@keyframes cp-heart{ 0%,100%{ transform:scale(1); } 15%{ transform:scale(1.25); } 30%{ transform:scale(1); } 45%{ transform:scale(1.18); } }
/* 클릭 가능한 하트 */
.cp-amp-link{ cursor:pointer; text-decoration:none; }
.cp-amp-link:hover .cp-heart-svg{ animation-play-state:paused; transform:scale(1.3); }
.cp-amp-link:active .cp-heart-svg{ transform:scale(.9); }
.pf-grid.cp-grid, .cp-grid{grid-template-columns:1fr 1fr !important; width:100%; margin:9px 0 0; gap:4px}
.cp-grid .pf-cell{padding:5px 7px}
.cp-grid .pf-k{font-size:7.5px; letter-spacing:.08em}
.cp-grid .pf-v{font-size:11px}
/* 커플 안 관계·서사 섹션도 좌우 패딩 */
.couple .pf-sec, .couple .pf-gallery{padding:0 14px}
.couple .pf-sec:last-child{padding-bottom:16px}
/* ── 프로필 공통 (폰 폭 기준) ── */
.pf-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:7px; margin:12px 0}
.pf-cell{
background:var(--s-card); border:1px solid var(--s-line); border-radius:11px;
padding:8px 10px; display:flex; flex-direction:column; gap:2px; min-width:0;
}
.pf-cell .pf-k, .pf-cell .pf-v{overflow-wrap:break-word; word-break:break-word; min-width:0}
body.era-2017 .pf-cell{background:var(--p-card); border-color:var(--p-line)}
.pf-k{font-family:var(--round); font-size:8.5px; letter-spacing:.06em; font-weight:700; opacity:.5}
.pf-v{font-size:12.5px; font-weight:600}
.pf-sec{margin:16px 0}
.pf-sec-t{
font-family:var(--round); font-size:11px; letter-spacing:.02em; font-weight:700;
color:var(--pt, var(--pa, var(--s-deep))); margin-bottom:9px;
display:flex; align-items:center; gap:8px;
}
.couple .pf-sec-t{color:var(--pa)}
.pf-sec-t::before{
content:''; width:6px; height:6px; border-radius:2px; transform:rotate(45deg);
background:var(--pa, var(--s-deep)); flex-shrink:0;
}
.pf-sec-t::after{content:""; flex:1; height:1px; background:linear-gradient(90deg, var(--s-line), transparent)}
body.era-2017 .pf-sec-t{color:var(--pt, var(--p-hot))}
.pf-line{margin:0 0 7px; font-size:12.5px; line-height:1.8}
.pf-pt{color:var(--pt, var(--s-deep)); font-weight:700}
body.era-2017 .pf-pt{color:var(--pt, var(--p-hot))}
.pf-hr{border:none; border-top:1px dashed var(--s-line); margin:14px 0}
.pf-sp{height:6px}
.pf-gallery{margin:16px 0}
.pf-gal-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px}
.pf-gal-item{
aspect-ratio:1; border-radius:12px; background:#dde8f2 center/cover no-repeat;
border:1px solid var(--s-line); transition:transform .18s;
}
.pf-gal-item:hover{transform:scale(1.04)}
/* ── 일반 프로필 (CREW ID) ── */
.chr-card{--pt:var(--s-deep); padding:4px 0 16px}
body.era-2017 .chr-card{--pt:var(--p-hot)}
.chr-top{display:flex; gap:18px; align-items:flex-start; margin-bottom:8px}
.chr-portrait{
flex-shrink:0; width:128px; height:128px; border-radius:22px;
background:#dde8f2 center/cover no-repeat; border:3px solid var(--pt);
box-shadow:0 8px 24px rgba(60,110,160,.18);
}
.chr-id{flex:1; min-width:0; padding-top:4px}
.chr-badge{
font-family:var(--mono); font-size:8.5px; letter-spacing:.2em; font-weight:700;
background:var(--pt); color:#fff; border-radius:8px; padding:3px 8px;
}
.chr-en{
display:inline-block; margin-left:8px; font-family:var(--mono);
font-size:9.5px; letter-spacing:.16em; opacity:.5; font-weight:600;
}
.chr-name{margin:8px 0 2px; font-size:24px; font-weight:700; color:var(--pt)}
.chr-sub{margin:0 0 8px; font-size:13px; opacity:.7}
.chr-sum{margin:0; font-size:13.5px; line-height:1.8; opacity:.9}
@media (max-width:520px){ .chr-top{flex-direction:column; align-items:center; text-align:center} }
/* ── 플레이리스트 (IN-FLIGHT MUSIC) ── */
.ife{
border:1px solid var(--s-line); border-radius:20px; overflow:hidden;
background:var(--s-card); margin:6px 0 20px;
}
body.era-2017 .ife{border-color:var(--p-line); background:var(--p-card)}
.ife-head{
display:flex; align-items:center; gap:10px;
padding:13px 18px; border-bottom:1px dashed var(--s-line);
font-family:var(--round); font-size:11px; letter-spacing:.06em; font-weight:700;
}
.ife-deco{color:var(--s-deep)}
body.era-2017 .ife-deco{color:var(--p-hot)}
.ife-cnt{margin-left:auto; font-size:9.5px; opacity:.55; font-family:var(--mono); letter-spacing:.06em}
.ife-screen{position:relative; aspect-ratio:16/9; background:#0a1420; border:0; margin:0; line-height:0}
.ife-frame{position:absolute; inset:0; width:100%; height:100%; border:0; display:block}
.ife-list{list-style:none; margin:0; padding:8px}
.ife-item{
display:flex; align-items:center; gap:12px;
padding:8px 10px; border-radius:12px; cursor:pointer;
transition:background .15s;
}
.ife-item:hover{background:rgba(120,170,220,.1)}
.ife-item.on{background:rgba(120,170,220,.16)}
body.era-2017 .ife-item:hover{background:rgba(235,150,185,.12)}
body.era-2017 .ife-item.on{background:rgba(235,150,185,.18)}
.ife-no{font-family:var(--mono); font-size:10px; font-weight:700; opacity:.45; width:20px}
.ife-thumb{
flex-shrink:0; width:58px; height:34px; border-radius:7px;
background:#dde8f2 center/cover no-repeat;
}
.ife-t{flex:1; font-size:12px; font-weight:600; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:var(--s-sub)}
body.era-2017 .ife-t{color:var(--p-sub)}
/* 현재 재생 중인 곡은 강조색 */
.ife-item.on .ife-t{color:var(--s-deep); font-weight:700}
body.era-2017 .ife-item.on .ife-t{color:var(--p-hot)}
.ife-play{opacity:0; font-size:11px; color:var(--s-deep); transition:opacity .15s}
body.era-2017 .ife-play{color:var(--p-hot)}
.ife-item:hover .ife-play, .ife-item.on .ife-play{opacity:.8}
/* 파서 배경 이미지 (프로필/페어오프 3번째 이미지) */
body.has-bgimg{background-size:cover !important; background-position:center !important; background-attachment:fixed}
body.has-bgimg .article{
background:rgba(255,255,255,.88); backdrop-filter:blur(10px);
border-radius:20px; padding:26px !important; margin-top:16px !important;
}
/* ═══════════════════════════════════════════════
플로팅 미니 플레이어 (음악 지속 재생) — 시대별 UI
═══════════════════════════════════════════════ */
.tsos-float{
position:fixed; right:20px; bottom:20px; z-index:2147482000;
width:240px; border-radius:20px; overflow:hidden;
display:none; opacity:0; transform:translateY(16px) scale(.98);
transition:opacity .3s, transform .3s;
font-family:inherit;
}
.tsos-float.open{display:block; opacity:1; transform:none}
/* ── 2026: 미래적 · 얇은 글래스 · 각진 미니멀 ── */
.tsos-float.e26{
background:linear-gradient(160deg, rgba(233,244,253,.92), rgba(206,230,248,.88));
backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
border:1px solid rgba(126,168,214,.4);
border-radius:16px;
box-shadow:0 24px 60px rgba(30,80,130,.32), inset 0 1px 0 rgba(255,255,255,.65);
}
/* ── 2017: 레트로 · 통통한 카세트/MP3 플레이어 느낌 (도톰한 베젤+둥근모서리) ── */
.tsos-float.e17{
background:
linear-gradient(160deg, #fff4f9, #ffe2ef);
border:2.5px solid #f3a9cc;
border-radius:26px;
box-shadow:
0 22px 54px rgba(228,120,168,.4),
inset 0 2px 0 rgba(255,255,255,.9),
inset 0 -3px 8px rgba(228,120,168,.18);
}
/* 2017 상단 "기기" 느낌 — 작은 스피커 구멍 줄무늬 */
.tsos-float.e17::before{
content:''; position:absolute; top:8px; left:50%; transform:translateX(-50%);
width:34px; height:4px; border-radius:3px;
background:repeating-linear-gradient(90deg,#f3a9cc 0 2px, transparent 2px 4px);
opacity:.6; z-index:2;
}
.tsos-float.e17 .tf-top{padding-top:16px}
.tf-top{display:flex; align-items:center; gap:10px; padding:11px 12px 8px; position:relative}
.tf-art{
position:relative; width:46px; height:46px; border-radius:12px; flex-shrink:0;
overflow:hidden; cursor:pointer;
}
.tf-cover{position:absolute; inset:0; background:#c9dcec center/cover no-repeat}
/* 2017: 앨범아트 = 도넛형 레코드판 (가운데 구멍) */
.e17 .tf-art{border-radius:50%; box-shadow:0 0 0 3px #fff, 0 0 0 5.5px #ec8bb5, 0 3px 8px rgba(228,120,168,.4)}
.e17 .tf-cover{border-radius:50%}
.e17 .tf-art::after{
content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
width:12px; height:12px; border-radius:50%;
background:#fff; box-shadow:0 0 0 2px #ec8bb5; z-index:2;
}
.e17.playing .tf-cover{animation:tfspin 4s linear infinite}
@keyframes tfspin{to{transform:rotate(360deg)}}
/* 2026: 앨범아트 = 각진 사각 (모던) */
.e26 .tf-art{border-radius:12px; box-shadow:0 4px 14px rgba(30,80,130,.3)}
/* 이퀄라이저 웨이브 (재생 중, 앨범아트 하단 구석 뱃지) */
.tf-wave{
position:absolute; left:0; right:0; bottom:0; height:20px;
display:flex; align-items:flex-end; justify-content:center;
gap:2.5px; padding:4px 0; background:linear-gradient(transparent, rgba(20,40,60,.55));
opacity:0; transition:opacity .3s;
}
.tsos-float.playing .tf-wave{opacity:1}
.tf-wave i{width:3px; background:#fff; border-radius:2px; height:4px}
/* 막대마다 다른 keyframe·속도로 불규칙하게 */
.tsos-float.playing .tf-wave i:nth-child(1){animation:tfw1 .68s ease-in-out infinite}
.tsos-float.playing .tf-wave i:nth-child(2){animation:tfw2 .53s ease-in-out infinite}
.tsos-float.playing .tf-wave i:nth-child(3){animation:tfw3 .8s ease-in-out infinite}
.tsos-float.playing .tf-wave i:nth-child(4){animation:tfw4 .47s ease-in-out infinite}
.tsos-float.playing .tf-wave i:nth-child(5){animation:tfw5 .62s ease-in-out infinite}
@keyframes tfw1{0%,100%{height:5px}40%{height:15px}70%{height:8px}}
@keyframes tfw2{0%,100%{height:12px}30%{height:4px}60%{height:16px}}
@keyframes tfw3{0%,100%{height:7px}50%{height:17px}80%{height:6px}}
@keyframes tfw4{0%,100%{height:15px}35%{height:6px}65%{height:13px}}
@keyframes tfw5{0%,100%{height:6px}45%{height:14px}75%{height:9px}}
.e17 .tf-wave i{background:#fff}
.e17 .tf-wave{background:linear-gradient(transparent, rgba(200,80,130,.5))}
.tf-meta{flex:1; min-width:0}
.tf-title{font-size:12.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#22384b; font-family:var(--round)}
.e17 .tf-title{color:#c0417e; font-family:'Jua',var(--round)}
.tf-sub{font-size:9.5px; opacity:.6; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:var(--round)}
.e26 .tf-sub{letter-spacing:.02em; color:#4a6a86}
.e17 .tf-sub{color:#b06a8c}
.tf-close{
position:absolute; top:10px; right:10px;
width:22px; height:22px; border-radius:50%; cursor:pointer; border:none;
background:rgba(255,255,255,.7); font-size:11px; font-weight:700;
display:grid; place-items:center; color:#556;
}
.e17 .tf-close{background:#fff; color:#c0417e}
/* 접기(최소화) 버튼 — 닫기 왼쪽 */
.tf-min{
position:absolute; top:10px; right:37px;
width:22px; height:22px; border-radius:50%; cursor:pointer; border:none;
background:rgba(255,255,255,.7); font-size:15px; font-weight:700; line-height:1;
display:grid; place-items:center; color:#556; padding:0;
}
.e17 .tf-min{background:#fff; color:#c0417e}
.tf-min:hover, .tf-close:hover{background:#fff}
/* ── 최소화(접힘) 상태: 앨범아트+제목만 작은 알약으로 ── */
.tsos-float.mini{
width:auto; cursor:pointer;
}
.tsos-float.mini .tf-seek,
.tsos-float.mini .tf-ctrl,
.tsos-float.mini .tf-tracks,
.tsos-float.mini .tf-min,
.tsos-float.mini .tf-close{ display:none; }
.tsos-float.mini .tf-top{ padding:8px 14px 8px 8px; gap:9px; }
.tsos-float.mini .tf-meta{ max-width:120px; }
.tsos-float.mini .tf-art{ width:38px; height:38px; }
/* 접힌 상태 힌트: 펼치기 아이콘 */
.tsos-float.mini .tf-top::after{
content:'▸'; font-size:11px; opacity:.5; margin-left:2px; align-self:center;
}
/* 재생바 */
.tf-seek{display:flex; align-items:center; gap:7px; padding:2px 14px 6px}
.tf-cur, .tf-dur{font-family:var(--mono); font-size:8px; opacity:.55; flex-shrink:0; min-width:22px}
.tf-dur{text-align:right}
.tf-bar{
flex:1; height:4px; border-radius:5px; position:relative; cursor:pointer;
background:rgba(120,160,200,.25);
}
.e17 .tf-bar{background:rgba(230,150,185,.3)}
.tf-fill{position:absolute; left:0; top:0; bottom:0; width:0; border-radius:5px; background:var(--s-deep)}
.e17 .tf-fill{background:#e478a8}
.tf-knob{
position:absolute; top:50%; left:0; width:10px; height:10px; border-radius:50%;
background:#fff; border:2px solid var(--s-deep); transform:translate(-50%,-50%);
box-shadow:0 2px 5px rgba(0,0,0,.2);
}
.e17 .tf-knob{border-color:#e478a8}
.tf-ctrl{display:flex; align-items:center; justify-content:center; gap:5px; padding:2px 12px 11px}
.tf-ctrl button{
border:none; background:none; cursor:pointer; font-size:13px;
width:30px; height:30px; border-radius:50%; color:#33586f;
display:grid; place-items:center; transition:background .15s, transform .1s;
}
.e17 .tf-ctrl button{color:#c0417e}
.tf-ctrl button:active{transform:scale(.9)}
.tf-ctrl button:hover{background:rgba(120,170,220,.16)}
.e17 .tf-ctrl button:hover{background:rgba(235,150,185,.2)}
.tf-play{
width:38px !important; height:38px !important; font-size:15px !important; color:#fff !important;
background:linear-gradient(135deg, var(--s-sky), var(--s-deep)) !important;
box-shadow:0 5px 14px rgba(30,90,150,.4);
}
/* 2026: 각진 사각 재생버튼 (모던) */
.e26 .tf-play{ border-radius:12px !important; }
/* 2017: 통통 원형 + 입체 테두리 (레트로 기기 버튼) */
.e17 .tf-play{
border-radius:50% !important;
background:linear-gradient(160deg,#ffb0d3,#e87ba8) !important;
box-shadow:0 4px 0 #d15e8f, 0 6px 12px rgba(228,120,168,.4) !important;
}
.e17 .tf-play:active{ transform:translateY(3px) scale(.95); box-shadow:0 1px 0 #d15e8f, 0 2px 6px rgba(228,120,168,.4) !important; }
.e17 .tf-ctrl button{ font-size:14px; }
.tf-list{margin-left:5px; font-size:12px !important}
.tf-tracks{max-height:0; overflow-y:auto; transition:max-height .3s}
.tsos-float.show-list .tf-tracks{max-height:150px; border-top:1px solid rgba(120,160,200,.2)}
.e17 .tsos-float.show-list .tf-tracks, .tsos-float.e17.show-list .tf-tracks{border-top-color:rgba(230,150,185,.3)}
.tf-track{
display:flex; align-items:center; gap:8px; width:100%;
padding:8px 14px; border:none; background:none; cursor:pointer;
font:inherit; font-size:11px; text-align:left; color:inherit;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tf-track:hover{background:rgba(120,170,220,.1)}
.e17 .tf-track:hover{background:rgba(235,150,185,.12)}
.tf-track.on{font-weight:700; color:var(--s-deep)}
.e17 .tf-track.on{color:#c0417e}
.tf-tn{font-family:var(--mono); font-size:9px; opacity:.45; flex-shrink:0}
.tf-yt{position:absolute; width:1px; height:1px; left:-9999px; top:-9999px; pointer-events:none}
@media (max-width:560px){ .tsos-float{right:12px; bottom:12px; width:calc(100vw - 24px); max-width:320px} }
/* 플레이리스트 전체재생·핀 버튼 */
.ife-playall{
margin-left:10px;
border:1px solid var(--s-deep); background:none; color:var(--s-deep);
font-family:var(--round); font-size:10.5px; font-weight:700; cursor:pointer;
border-radius:20px; padding:4px 12px; transition:all .15s; flex-shrink:0;
}
.ife-playall:hover{background:var(--s-deep); color:#fff}
body.era-2017 .ife-playall{border-color:var(--p-hot); color:var(--p-hot)}
body.era-2017 .ife-playall:hover{background:var(--p-hot); color:#fff}
.ife-pin{
border:none; background:none; cursor:pointer; font-size:13px;
opacity:.35; transition:opacity .15s, transform .15s; padding:2px 4px;
}
.ife-item:hover .ife-pin{opacity:.7}
.ife-pin:hover{opacity:1; transform:scale(1.15)}
/* ═══════════════════════════════════════════════
티스토리 기본 요소 숨김 + 관리자 전용 수정/삭제
═══════════════════════════════════════════════ */
/* 공감·공유·통계·게시글관리 버튼 그룹 통째 숨김 */
.container_postbtn,
.container_postbtn *,
.post_btn, .postbtn_like, .btn_post,
[data-tistory-react-app="Reaction"],
[data-tistory-react-app="SupportButton"],
.wrap_btn, .wrap_btn_share, .wrap_btn_etc, .layer_post,
.ico_postbtn, .ico_share, .ico_statistics, .ico_etc, .ico_like,
.btn_share, .btn_etc1, .sns_btn,
/* 게시글 하단 관리 툴바 (공유하기/통계/게시글 관리) */
.article_toolbar, .post_toolbar, .tool_post, .box_tool, .area_tool,
.wrap_tool, .list_tool, .post-tools, .post_tools, .btns_post,
.another_post, .post-control, .post_control, .control_post,
.btn_management, .btn_statistics, .btn_share_post, .link_share, .link_management,
a[href*="/manage/post"], a[href*="/manage/statistics"],
.revenue_container, #revenue_list_upper_ad, .revenue_unit_wrap,
/* 네임카드 통째 숨김 */
[data-tistory-react-app="Namecard"],
.tt_box_namecard,
/* 구독 버튼 등 */
.tt_subscription, .box_tistory_subscription, .btn_subscription{
display:none !important;
}
/* 프로필/일반 페이지에서 본문 뒤에 티스토리가 자동 주입하는 관리 영역 차단 */
body.inline-page #another_category,
body.inline-page .another_category,
body.profile-page #another_category,
body.profile-page .another_category{ display:none !important; }
/* 티스토리 기본 관리 툴바 (.ct-text = 공유하기/통계/게시글 관리) — 우리 타임라인은 ctl- 라 안전 */
.ct-text, .ct-box, .ct-util, .container_tool, .tt_control_tool,
.wrap_tool_post, .tool_area, .area_control{ display:none !important; }
/* 관리자 전용 수정/삭제 (작게, 글 우측 하단) */
.a-admin{
display:flex; justify-content:flex-end; gap:8px;
margin:18px 0 4px; padding-top:14px;
border-top:1px dashed var(--s-line);
}
body.era-2017 .a-admin{border-top-color:var(--p-line)}
.a-adm-btn{
font-family:var(--round); font-size:10.5px; letter-spacing:.04em; font-weight:700;
text-decoration:none; padding:5px 12px; border-radius:20px;
border:1px solid var(--s-line); color:var(--s-deep);
opacity:.6; transition:opacity .15s, background .15s, color .15s;
}
.a-adm-btn:hover{opacity:1}
.a-adm-edit:hover{background:var(--s-deep); color:#fff; border-color:var(--s-deep)}
.a-adm-del:hover{background:#e05a6e; color:#fff; border-color:#e05a6e}
body.era-2017 .a-adm-btn{border-color:var(--p-line); color:var(--p-hot)}
body.era-2017 .a-adm-edit:hover{background:var(--p-hot); color:#fff; border-color:var(--p-hot)}
/* ═══════════════════════════════════════════════
폰 안 프로필 페이지 (하단 프로필 탭 → 폰 화면 안에서 열림)
═══════════════════════════════════════════════ */
.phone-page{
position:absolute; inset:0; z-index:60;
background:var(--s-bg); display:flex; flex-direction:column;
transform:translateY(100%); transition:transform .35s cubic-bezier(.4,0,.2,1);
border-radius:inherit; overflow:hidden;
}
body.era-2017 .phone-page{background:var(--p-bg)}
.phone-page.open{transform:none}
.pfp-bar{
flex-shrink:0; display:flex; align-items:center; gap:8px;
padding:14px 16px; border-bottom:1px solid var(--s-line);
background:var(--s-card);
}
body.era-2017 .pfp-bar{background:var(--p-card); border-color:var(--p-line)}
.pfp-back{
border:none; background:none; cursor:pointer; font-size:22px; line-height:1;
color:var(--s-deep); padding:0 4px; margin-top:-2px;
}
body.era-2017 .pfp-back{color:var(--p-hot)}
.pfp-ttl{font-size:14px; font-weight:700; letter-spacing:.02em}
.pfp-body{flex:1; overflow:hidden; position:relative}
.pfp-frame{position:absolute; inset:0; width:100%; height:100%; border:0; background:transparent}
.pfp-empty{
padding:60px 30px; text-align:center; font-size:13.5px; line-height:1.9;
color:var(--s-sub);
}
.pfp-empty small{opacity:.7; font-size:11.5px}
/* ═══ 파서 카드 공통 테두리·패딩 (프로필/케이브덕 등) ═══ */
.chr-card{
border:1px solid var(--s-line); border-radius:20px;
background:var(--s-card); padding:22px 20px 18px; margin:6px 0 20px;
}
body.era-2017 .chr-card{border-color:var(--p-line); background:var(--p-card)}
.cvd-render{padding:18px; border:1px solid var(--s-line); border-radius:20px; background:var(--s-card); margin:6px 0 20px}
body.era-2017 .cvd-render{border-color:var(--p-line); background:var(--p-card)}
/* 케이브덕 안 요소는 내부 배경 없이 (이중 방지) */
.cvd-render .cvd-prose{background:rgba(255,255,255,.4)}
body.era-2017 .cvd-render .cvd-prose{background:rgba(255,255,255,.35)}
/* 커플 카드 추가 요소 (링크) */
.cp-link{ text-decoration:none; color:inherit; display:inline-block; }
.cp-link .cp-img, .cp-side .cp-link .cp-img{ transition:transform .2s, box-shadow .2s; }
.cp-link:hover .cp-img{ transform:translateY(-3px); box-shadow:0 12px 28px rgba(60,110,160,.3); }
.cp-name .cp-link:hover, a.cp-link:hover .cp-name{ text-decoration:underline; text-underline-offset:3px; }
/* ═══════════════════════════════════════════════
프로필/페어 페이지: 글 제목·날짜·카테고리·태그·댓글 숨김
(프로필 카드만 깔끔하게 보이도록)
═══════════════════════════════════════════════ */
body.profile-page .a-head,
body.profile-page .a-cat,
body.profile-page .a-date,
body.profile-page .a-title,
body.profile-page .a-tags,
body.profile-page .cmt,
body.profile-page .container_postbtn,
body.profile-page [data-tistory-react-app="Reaction"],
body.profile-page [data-tistory-react-app="SupportButton"],
body.profile-page [data-tistory-react-app="Namecard"]{
display:none !important;
}
/* 관리자 수정/삭제 버튼(.a-admin)은 프로필 페이지에서도 유지 */
/* 본문 위 여백도 정리 */
body.profile-page .a-body{ padding-top:0; margin-top:0; }
body.profile-page .article{ padding-top:8px; }
/* ═══ 커플 [대화] 메신저 말풍선 ═══ */
.cc-sec{padding:0 18px}
.cc-chat{
background:linear-gradient(180deg, rgba(120,170,220,.06), rgba(120,170,220,.02));
border:1px solid var(--s-line); border-radius:18px; padding:0 0 14px; overflow:hidden;
}
body.era-2017 .cc-chat{border-color:var(--p-line); background:linear-gradient(180deg, rgba(235,150,185,.07), rgba(235,150,185,.02))}
.cc-status{
display:flex; align-items:center; gap:8px; padding:9px 14px;
background:rgba(120,170,220,.12); font-family:var(--mono); font-size:10px; letter-spacing:.05em;
}
body.era-2017 .cc-status{background:rgba(235,150,185,.14)}
.cc-time{font-weight:700}
.cc-ttl{margin:0 auto; opacity:.7; font-weight:700}
.cc-sig{width:14px; height:9px; background:currentColor; opacity:.3; clip-path:polygon(0 100%,20% 100%,20% 60%,45% 60%,45% 30%,70% 30%,70% 0,100% 0,100% 100%)}
.cc-row{display:flex; align-items:flex-end; gap:8px; padding:2px 14px; margin-top:2px}
.cc-row.first{margin-top:10px}
.cc-row.b{flex-direction:row-reverse}
.cc-ava{width:30px; height:30px; border-radius:50%; background:#dbe6f1 center/cover no-repeat; flex-shrink:0; box-shadow:0 2px 6px rgba(60,110,160,.2)}
.cc-ava.ghost{visibility:hidden}
.cc-col{display:flex; flex-direction:column; max-width:75%}
.cc-row.b .cc-col{align-items:flex-end}
.cc-name{font-size:10.5px; font-weight:700; opacity:.6; margin:0 6px 3px}
.cc-bubble{
font-size:13px; line-height:1.6; padding:9px 13px; border-radius:16px;
background:#fff; border:1px solid var(--s-line); word-break:break-word;
}
.cc-row.a .cc-bubble{border-bottom-left-radius:5px; background:#fff}
.cc-row.b .cc-bubble{
border-bottom-right-radius:5px; color:#fff;
background:linear-gradient(135deg, var(--pb), var(--pa)); border-color:transparent;
}
.cc-divider{height:1px; background:var(--s-line); margin:12px 20px; opacity:.6}
/* ═══ 커플 [타임라인] 좌우 번갈아 연표 ═══ */
.ctl-sec{padding:0 18px}
.ctl-line{position:relative; padding:6px 0}
.ctl-line::before{
content:''; position:absolute; left:50%; top:0; bottom:0; width:2px; transform:translateX(-50%);
background:linear-gradient(180deg, var(--pa), var(--pb)); border-radius:2px;
}
.ctl-item{position:relative; width:50%; padding:8px 20px 8px 0; box-sizing:border-box}
.ctl-item.a{left:0; text-align:right}
.ctl-item.b{left:50%; padding:8px 0 8px 20px; text-align:left}
.ctl-dot{
position:absolute; top:14px; width:11px; height:11px; border-radius:50%;
background:var(--pa); border:2px solid #fff; box-shadow:0 0 0 1px var(--s-line);
}
.ctl-item.a .ctl-dot{right:-6px}
.ctl-item.b .ctl-dot{left:-6px; background:var(--pb)}
.ctl-cell{display:inline-block; max-width:100%}
.ctl-date{
display:block; font-family:var(--mono); font-size:10px; font-weight:700; margin-bottom:3px;
color:var(--pa);
}
.ctl-item.b .ctl-date{color:var(--pb)}
.ctl-text{font-size:12.5px; line-height:1.6}
@media (max-width:520px){
.ctl-line::before{left:7px}
.ctl-item, .ctl-item.b{width:100%; left:0; text-align:left; padding:8px 0 8px 24px}
.ctl-item.a{text-align:left}
.ctl-item.a .ctl-dot, .ctl-item.b .ctl-dot{left:2px; right:auto}
}
/* ═══════════════════════════════════════════════
프로필/페어 페이지 = 폰 화면 안에서 자연스럽게 (팝업 아님)
폰의 상단 헤더·알림·카테고리는 그대로 두고 본문만 프로필로.
═══════════════════════════════════════════════ */
/* 뒤로가기 바: 기본 숨김, inline-page에서만 표시 */
.a-backbar{display:none}
body.inline-page .a-backbar{
display:flex; align-items:center; gap:10px;
padding:12px 16px 4px;
}
/* 프로필 페이지에선 '‹ 홈' 백바 숨김 */
body.profile-page .a-backbar{ display:none !important; }
.a-back{
font-size:13px; font-weight:700; text-decoration:none; color:var(--s-deep);
}
body.era-2017 .a-back{color:var(--p-hot)}
.a-back-ttl{font-size:12px; opacity:.55; font-weight:700}
/* 프로필 페이지: 홈 목록(피드)만 숨김 (헤더·알림·카테고리는 유지) */
body.inline-page .feed{ display:none !important; }
body.inline-page .phone{visibility:visible}
body.inline-page .article{padding:4px 16px 30px}
/* 팝업은 확실히 안 뜨게 */
body.inline-page .artpop{display:none !important}
/* ═══════════════════════════════════════════════
스티커 시스템
═══════════════════════════════════════════════ */
/* 스티커 레이어 — 앞뒤는 폰(.phone z-index:1) 기준
앞(Front): 폰보다 위(z>1) · 뒤(Back): 폰보다 아래(z<1, 폰에 가려짐) */
.stk-layer{ position:absolute; left:0; top:0; width:100%; height:0; pointer-events:none; }
/* in: 스크롤 안 — 콘텐츠 따라감. 폰 콘텐츠 기준 앞뒤 */
.stk-layer.stk-in{ position:absolute; }
#stkInBack{ z-index:0; } /* 콘텐츠 뒤에 깔림 */
#stkInFront{ z-index:5; } /* 콘텐츠 위에 겹침 */
/* side: 폰 옆 — 폰 안에 있어 폰과 함께 이동(transform 상속). 폰 중앙 기준 */
.stk-layer.stk-side{ position:absolute; left:50%; top:0; width:0; height:0; }
#stkSideBack{ z-index:0; } /* 폰 뒤 (폰에 가려짐) */
#stkSideFront{ z-index:9; } /* 폰 앞 */
/* bg: 배경 중앙 — 화면 고정. 폰 기준 앞뒤 */
.stk-layer.stk-bg{ position:fixed; left:0; top:0; width:100%; height:0; }
#stkBgBack{ z-index:0; } /* 폰 뒤 (배경처럼) */
#stkBgFront{ z-index:9; } /* 폰 앞 */
.stk-item{
position:absolute; max-width:none; height:auto; display:block;
user-select:none; -webkit-user-drag:none; pointer-events:none;
}
.stk-item .stk-img{ display:block; width:100%; }
.stk-item.stk-ph{
display:flex; align-items:center; justify-content:center; aspect-ratio:1/1;
border:2px dashed var(--s-sky); color:var(--s-sky); background:rgba(255,255,255,.6);
font-size:16px; font-weight:700; border-radius:8px;
}
/* 테두리·그림자 */
.stk-item.stk-bd-w .stk-img{ filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff); }
.stk-item.stk-bd-b .stk-img{ filter:drop-shadow(2px 0 0 #1c2530) drop-shadow(-2px 0 0 #1c2530) drop-shadow(0 2px 0 #1c2530) drop-shadow(0 -2px 0 #1c2530); }
.stk-item.stk-sh .stk-img{ filter:drop-shadow(4px 6px 6px rgba(40,80,120,.35)); }
.stk-item.stk-bd-w.stk-sh .stk-img{ filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(4px 6px 6px rgba(40,80,120,.35)); }
.stk-item.stk-bd-b.stk-sh .stk-img{ filter:drop-shadow(2px 0 0 #1c2530) drop-shadow(-2px 0 0 #1c2530) drop-shadow(0 2px 0 #1c2530) drop-shadow(0 -2px 0 #1c2530) drop-shadow(4px 6px 6px rgba(40,80,120,.35)); }
/* 애니메이션 */
.stk-anim-float .stk-img{ animation:stk-float 3.2s ease-in-out infinite; }
@keyframes stk-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
.stk-anim-sway .stk-img{ animation:stk-sway 2.8s ease-in-out infinite; transform-origin:50% 90%; }
@keyframes stk-sway{ 0%,100%{ transform:rotate(-4deg); } 50%{ transform:rotate(4deg); } }
.stk-anim-pulse .stk-img{ animation:stk-pulse 1.8s ease-in-out infinite; }
@keyframes stk-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }
.stk-anim-bounce .stk-img{ animation:stk-bounce 1.1s ease-in-out infinite; transform-origin:50% 100%; }
@keyframes stk-bounce{ 0%,100%{ transform:translateY(0); } 30%{ transform:translateY(-10px); } 55%{ transform:translateY(0); } }
.stk-anim-hang .stk-img{ animation:stk-hang 2.7s ease-in-out infinite; transform-origin:50% 0; }
@keyframes stk-hang{ 0%,100%{ transform:rotate(-6deg); } 50%{ transform:rotate(6deg); } }
/* ── 편집 모드 ── */
body.stk-edit-mode .stk-item{ pointer-events:auto; }
.stk-editing{ outline:2px dashed var(--s-sky); outline-offset:2px; cursor:move; }
.stk-rot, .stk-rsz{
position:absolute; width:22px; height:22px; line-height:20px; text-align:center;
transform:translate(-50%,-50%); background:#fff; border:2px solid var(--s-sky); color:var(--s-sky);
cursor:grab; font-size:12px; font-style:normal; pointer-events:auto; z-index:10; border-radius:50%;
}
.stk-rsz{ cursor:nwse-resize; border-radius:4px; }
/* 편집 패널 */
#stkPanel{
position:fixed; top:60px; right:14px; z-index:2000; width:300px; max-height:calc(100vh - 90px);
display:flex; flex-direction:column; background:#fff; border:1px solid var(--s-line);
border-radius:14px; box-shadow:0 10px 40px rgba(40,80,120,.25); font-size:12px; overflow:hidden;
}
.stk-pnl-bar{
display:flex; align-items:center; justify-content:space-between; gap:8px;
padding:11px 14px; background:var(--s-sky); color:#fff; font-weight:700; font-size:12px; cursor:move;
font-family:var(--mono); letter-spacing:.05em;
}
.stk-pnl-bar i{ cursor:pointer; font-style:normal; width:20px; text-align:center; }
.stk-pnl-body{ overflow-y:auto; padding:12px; }
.stk-help{ color:var(--s-sub); font-size:10.5px; line-height:1.7; margin:0 0 12px; }
#stkPanel.folded .stk-pnl-body{ display:none; }
.stk-row{ border:1px solid var(--s-line); border-radius:10px; padding:8px; margin-bottom:8px; }
.stk-row-head{ display:flex; gap:6px; align-items:center; }
.stk-row-head b{ width:16px; text-align:center; color:var(--s-sky); }
.stk-url{ flex:1; min-width:0; padding:5px 7px; border:1px solid var(--s-line); border-radius:6px; font-size:11px; outline:none; }
.stk-row-ctl{ display:flex; flex-wrap:wrap; gap:5px; align-items:center; margin-top:8px; }
.stk-row button{ padding:5px 9px; border:1px solid var(--s-line); border-radius:7px; background:#f5f9fd; font-size:11px; white-space:nowrap; cursor:pointer; }
.stk-row button:hover{ border-color:var(--s-sky); color:var(--s-sky); }
.stk-row-ctl code{ flex:1; min-width:60px; padding:4px 7px; background:#f0f6fc; border-radius:5px; font-size:9.5px; color:var(--s-sub); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stk-copy{ background:var(--s-sky) !important; color:#fff !important; border-color:var(--s-sky) !important; }