/* =========================================================
   애매해 스킨 7벌 (2026-09-28) — site.css 뒤에 싣는다
   · 스킨 = html[data-skin="a"~"g"]. 아무것도 없으면 기본(SITE.defaultSkin 과 같은 값이 head 에서 먼저 입혀진다)
   · 색·글꼴·모서리·테두리·그림자는 전부 변수 → 대문·갈래·글·문서·서랍·창이 다 따라온다
   · 스킨마다 다른 장식(테이프·스티커·별·밑그림 선·수채 얼룩)은 마크업을 늘 두고 CSS 로만 보이고 숨긴다
   · 카톡 웹뷰 금지 문법 미사용(:has · backdrop-filter · color-mix · vh/dvh)
   ========================================================= */

/* ---------- 공통 변수(스킨이 덮어쓴다) ---------- */
:root {
    --display: "Black Han Sans", "Noto Sans KR", sans-serif;
    --body: "Pretendard Variable", Pretendard, "Noto Sans KR", system-ui, sans-serif;
    --r: 22px; --r-sm: 14px;
    --bw: 0px; --bc: transparent;
    --card-sh: 0 1px 0 rgba(0,0,0,.04), 0 10px 24px -14px rgba(0,0,0,.25);
    --pop: var(--accent);
    --c1: #FFE1D3; --c2: #FFEFC2; --c3: #DCEAF7; --c4: #FFDCE3; --c5: #E9E0F7; --c6: #F7DFC6; --c7: #FFD9CF;
    --c-ink: var(--text);
    --btn: var(--accent); --btn-ink: #fff;
}
body { font-family: var(--body); letter-spacing: -.015em; overflow-x: hidden; }
.dsp { font-family: var(--display); font-weight: 400; letter-spacing: -.02em; }
.pen { font-family: "Nanum Pen Script", cursive; letter-spacing: 0; }

/* ================= A 크림 페이퍼 ================= */
:root, [data-skin="a"] {
    --bg: #FBF6EE; --surface: #F4ECDF; --card: #fff; --text: #1C1A17; --text-sub: #8A8074; --border: #E7DDCD;
    --accent: #FF6B5A; --accent-ink: #D2402C; --accent-soft: #FFE8E2; --on-accent: #fff; --overlay: rgba(28,26,23,.45);
    --pop: #FF6B5A; --btn: #1C1A17; --btn-ink: #fff;
    --c1: #FFE1D3; --c2: #FFEFC2; --c3: #DCEAF7; --c4: #FFDCE3; --c5: #E9E0F7; --c6: #F7DFC6; --c7: #FFD9CF;
    color-scheme: light;
}
/* ================= B 캔디 플래시 ================= */
[data-skin="b"] {
    --bg: #FFD84D; --surface: #FFF1B8; --card: #fff; --text: #141414; --text-sub: #4A4230; --border: #141414;
    --accent: #FF3D7F; --accent-ink: #C8134F; --accent-soft: #FFE0EB; --on-accent: #fff; --overlay: rgba(20,20,20,.5);
    --pop: #FF3D7F; --btn: #FF3D7F; --btn-ink: #fff;
    --r: 24px; --r-sm: 16px; --bw: 3px; --bc: #141414; --card-sh: 5px 5px 0 #141414;
    --c1: #FF3D7F; --c2: #4FC3FF; --c3: #B6F03C; --c4: #B69CFF; --c5: #FF7A1A; --c6: #141414; --c7: #fff;
    color-scheme: light;
}
/* ================= C 잡지 콜라주 ================= */
[data-skin="c"] {
    --bg: #F2EEE3; --surface: #E8E2D2; --card: #fff; --text: #111; --text-sub: #55504A; --border: #111;
    --accent: #E8342A; --accent-ink: #C0241B; --accent-soft: #FFE01B; --on-accent: #fff; --overlay: rgba(0,0,0,.5);
    --pop: #E8342A; --btn: #E8342A; --btn-ink: #fff;
    --r: 0px; --r-sm: 0px; --bw: 2.5px; --bc: #111; --card-sh: 0 10px 18px -10px rgba(0,0,0,.55);
    --c1: #FFE01B; --c2: #1D4ED8; --c3: #FF8DC7; --c4: #fff; --c5: #18A058; --c6: #111; --c7: #E8342A;
    color-scheme: light;
}
/* ================= D 블랙라이트 네온 ================= */
[data-skin="d"] {
    --bg: #0B1030; --surface: #141A45; --card: #141A45; --text: #EEF1FF; --text-sub: #9AA3D6; --border: #2A3270;
    --accent: #FF6A00; --accent-ink: #FF9A4D; --accent-soft: #2A1A30; --on-accent: #160800; --overlay: rgba(3,5,20,.7);
    --pop: #FF6A00; --btn: #FF6A00; --btn-ink: #160800;
    --r: 22px; --r-sm: 14px; --bw: 1.5px; --bc: rgba(255,255,255,.14); --card-sh: 0 0 26px -12px var(--glow, #FF6A00);
    --c1: #FF6A00; --c2: #38E8FF; --c3: #C6FF3D; --c4: #FF3DDB; --c5: #B28BFF; --c6: #FFB23F; --c7: #FF4D6D;
    color-scheme: dark;
}
/* ================= E 글로시 토이 ================= */
[data-skin="e"] {
    --bg: #FFF4F7; --surface: #FDE6EE; --card: #fff; --text: #1A1320; --text-sub: #8B7C8F; --border: #F3D9E2;
    --accent: #FF5C9A; --accent-ink: #D81F6B; --accent-soft: #FFE3EC; --on-accent: #fff; --overlay: rgba(26,19,32,.4);
    --pop: #FF5C9A; --btn: #1A1320; --btn-ink: #fff;
    --r: 30px; --r-sm: 20px; --card-sh: inset 0 -6px 0 rgba(0,0,0,.06), 0 18px 30px -20px rgba(216,31,107,.55);
    --c1: #FF8DB9; --c2: #C2AFFF; --c3: #9EF0D6; --c4: #FFB9CF; --c5: #FFDE85; --c6: #1A1320; --c7: #A6DBFF;
    color-scheme: light;
}
/* ================= F 캐리커처 스케치 ================= */
[data-skin="f"] {
    --bg: #F7F5F0; --surface: #EEEAE2; --card: #fff; --text: #1E1B18; --text-sub: #7D766C; --border: #1E1B18;
    --accent: #FF2E88; --accent-ink: #D1146A; --accent-soft: #FFE3EF; --on-accent: #fff; --overlay: rgba(30,27,24,.45);
    --pop: #FF2E88; --btn: #FF2E88; --btn-ink: #fff;
    --r: 18px 24px 16px 26px; --r-sm: 12px 16px 10px 14px; --bw: 2px; --bc: #1E1B18; --card-sh: none;
    --c1: #FFC2DD; --c2: #C9DAFF; --c3: #FFD3A8; --c4: #FFC9C7; --c5: #FFE08A; --c6: #E4D5FF; --c7: #FFD3A8;
    color-scheme: light;
}
/* ================= G 잉크 수채 ================= */
[data-skin="g"] {
    --display: "Gowun Batang", serif;
    --bg: #FFFDF8; --surface: #F6F1E7; --card: #FFFDF8; --text: #23201C; --text-sub: #8C857A; --border: #23201C;
    --accent: #E9825E; --accent-ink: #B5552F; --accent-soft: #FBEBE2; --on-accent: #fff; --overlay: rgba(35,32,28,.4);
    --pop: #E9825E; --btn: #23201C; --btn-ink: #FFFDF8;
    --r: 3px 8px 4px 10px; --r-sm: 4px 8px 5px 9px; --bw: 1.2px; --bc: #23201C; --card-sh: none;
    --c1: #F6B99A; --c2: #9CBCD8; --c3: #A9C3A0; --c4: #E7A3B0; --c5: #F5D98B; --c6: #C7B6E0; --c7: #F6B99A;
    color-scheme: light;
}

/* ---------- 머리글·서랍·창 공통 결 ---------- */
.site-header { background: var(--bg); border-bottom-color: transparent; transition: border-color .2s; }
.site-header.scrolled { border-bottom-color: var(--border); }
.logo { font-family: var(--display); font-weight: 400; font-size: 1.45rem; }
[data-skin="d"] .logo { color: #FF6A00; text-shadow: 0 0 6px rgba(255,106,0,.9), 0 0 18px rgba(255,106,0,.6); }
[data-skin="d"] .logo-dot { display: none; }
[data-skin="b"] .logo-dot { border: 2px solid #141414; background: #FF3D7F; }
[data-skin="c"] .logo-dot { border-radius: 0; background: #E8342A; }
[data-skin="e"] .logo-dot { border-radius: 0; background: #1A1320; clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); width: 14px; height: 14px; }
.icon-btn { border-radius: 50%; }
.skin-panel, .side { background: var(--card); color: var(--text); }
.side a, .side button { color: var(--text); }

/* ---------- 섹션 제목 ---------- */
.section-title { font-family: var(--display); font-weight: 400; font-size: 1.45rem; letter-spacing: -.02em; }
.sh { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 14px; }
.sh .section-title { margin: 0; position: relative; }
.sh a { color: var(--text-sub); font-weight: 700; font-size: .86rem; min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; }
.section-title .uline { position: absolute; left: 0; bottom: -7px; width: 100%; height: 10px; overflow: visible; }
.section-title .uline path { fill: none; stroke: var(--pop); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 160; stroke-dashoffset: 160; transition: stroke-dashoffset 1s cubic-bezier(.6,0,.3,1) .15s; }
.in .uline path, .uline.in path { stroke-dashoffset: 0; }
[data-skin="b"] .section-title .uline, [data-skin="c"] .section-title .uline, [data-skin="d"] .section-title .uline, [data-skin="g"] .section-title .uline { display: none; }
[data-skin="c"] .sh { border-top: 3px solid #111; padding-top: 8px; }
[data-skin="g"] .sh { border-bottom: 1px solid #E6DFD2; padding-bottom: 6px; }
[data-skin="d"] .section-title { text-shadow: 0 0 12px rgba(56,232,255,.35); }

/* ================= 대문 첫 화면 (hx) ================= */
.hx { position: relative; padding: 10px 0 6px; }
.hx-pic { position: relative; }
.hx-frame { position: relative; overflow: hidden; aspect-ratio: 3/4; max-height: 560px; border-radius: 28px; background: var(--surface); }
.hx-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; }
.hx-grad, .hx-flash, .hx-scan, .hx-sk, .hx-note, .hx-stk, .hx-tape, .hx-star, .hx-pearls, #jelly, #wash, .hx-mast, .hx-marq, .hx-live, .hx-rain, .hx-wc, .hx-chips { display: none; }
.hx-h1 { margin: 16px 0 0; font-family: var(--display); font-weight: 400; font-size: clamp(2.8rem, 14vw, 4.3rem); line-height: .98; letter-spacing: -.03em; }
.hx-h1 .q { color: var(--pop); }
.hx-h1 .l2 { display: block; font-size: .62em; margin-top: 6px; }
.hx-sub { margin: 12px 0 0; color: var(--text-sub); font-size: 1rem; line-height: 1.55; }
.srch { position: relative; margin-top: 18px; display: flex; align-items: center; gap: 8px; height: 58px; padding: 0 7px 0 16px; background: var(--card); border: var(--bw) solid var(--bc); border-radius: 999px; box-shadow: var(--card-sh); }
.srch svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--text-sub); }
.srch input { flex: 1; min-width: 0; height: 44px; border: 0; outline: 0; font: inherit; font-weight: 600; font-size: 1rem; background: transparent; color: var(--text); padding: 0; }
.srch input::placeholder { color: var(--text-sub); }
.srch button { height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--btn); color: var(--btn-ink); font: inherit; font-weight: 900; font-size: .95rem; flex: 0 0 auto; }
.search-results { margin-top: 10px; }

/* 제목 글자 떨어뜨리기 */
.drop .ch { display: inline-block; opacity: 0; transform: translateY(-38px) rotate(-8deg) scale(.6); animation: drop .7s cubic-bezier(.34,1.56,.64,1) forwards; }
@keyframes drop { to { opacity: 1; transform: none; } }
@keyframes wob { 0%,100% { transform: rotate(0); } 20% { transform: rotate(14deg) scale(1.08); } 40% { transform: rotate(-10deg); } 60% { transform: rotate(6deg); } 80% { transform: rotate(-2deg); } }

/* --- A: 사진 없이 물감 번짐 --- */
:root:not([data-skin]) .hx-frame, [data-skin="a"] .hx-frame { display: none; }
:root:not([data-skin]) .hx, [data-skin="a"] .hx { padding: 30px 18px 24px; margin: 8px -16px 0; overflow: hidden; border-radius: 0 0 28px 28px; background: linear-gradient(160deg, #FFE4D6, #FBF6EE 60%, #FFF1C9); }
:root:not([data-skin]) #wash, [data-skin="a"] #wash { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }
:root:not([data-skin]) .hx > *:not(#wash), [data-skin="a"] .hx > *:not(#wash) { position: relative; z-index: 1; }
:root:not([data-skin]) .hx-h1, [data-skin="a"] .hx-h1 { margin-top: 12px; }
:root:not([data-skin]) .hx-h1 .l2, [data-skin="a"] .hx-h1 .l2 { font-size: 1em; margin-top: 0; }
:root:not([data-skin]) .hx-chips, [data-skin="a"] .hx-chips { display: flex; gap: 8px; overflow-x: auto; margin: 14px -18px 0; padding: 0 18px 2px; scrollbar-width: none; }
.hx-chips::-webkit-scrollbar { display: none; }
.hx-chips a { flex: 0 0 auto; height: 44px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; background: rgba(255,255,255,.8); color: var(--text); font-weight: 700; font-size: .88rem; text-decoration: none; }
:root:not([data-skin]) .srch, [data-skin="a"] .srch { border-radius: 18px; }

/* --- B: 사진 위 흰 제목 · 스티커 · 흐르는 띠 --- */
[data-skin="b"] .hx-frame { border: 3px solid #141414; box-shadow: 6px 6px 0 #141414; }
[data-skin="b"] .hx-grad, [data-skin="d"] .hx-grad { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 58%; background: linear-gradient(to top, rgba(20,20,20,.75), rgba(20,20,20,0)); }
[data-skin="b"] .hx-flash { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #fff; opacity: 0; pointer-events: none; animation: hxflash .5s ease-out .15s; }
@keyframes hxflash { 0% { opacity: .95; } 100% { opacity: 0; } }
[data-skin="b"] .hx-h1, [data-skin="d"] .hx-h1 { position: absolute; left: 18px; right: 18px; bottom: 20px; margin: 0; color: #fff; }
[data-skin="b"] .hx-h1 .q { color: #FFD84D; }
[data-skin="b"] .hx-stk { display: flex; position: absolute; align-items: center; justify-content: center; text-align: center; border-radius: 50%; border: 3px solid #141414; font-weight: 900; line-height: 1.1; box-shadow: 3px 3px 0 #141414; }
[data-skin="b"] .hx-stk.s1 { top: -6px; right: 18px; width: 92px; height: 92px; background: #FF3D7F; color: #fff; font-size: .82rem; animation: rock 3.2s ease-in-out infinite; }
[data-skin="b"] .hx-stk.s1 b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.15rem; }
[data-skin="b"] .hx-stk.s2 { top: 34%; left: 12px; width: 70px; height: 70px; background: #4FC3FF; font-size: 1.9rem; animation: bob 3s ease-in-out infinite; }
@keyframes rock { 0%,100% { transform: rotate(12deg); } 50% { transform: rotate(-6deg) scale(1.06); } }
@keyframes bob { 50% { transform: translateY(-8px) rotate(-8deg); } }
[data-skin="b"] .hx-marq { display: block; overflow: hidden; margin: 14px -16px 0; padding: 10px 0; }
.hx-marq div { margin: 0 -10px; background: #141414; color: #FFD84D; white-space: nowrap; overflow: hidden; transform: rotate(-2deg); }
.hx-marq span { display: inline-block; padding: 11px 0; font-family: var(--display); font-size: 1.05rem; animation: mq 18s linear infinite; }
.hx-marq i { font-style: normal; color: #FF3D7F; margin: 0 10px; }
@keyframes mq { to { transform: translateX(-50%); } }
[data-skin="b"] .srch { box-shadow: 4px 4px 0 #141414; }

/* --- C: 찢은 종이 액자 · 오린 글자 --- */
[data-skin="c"] .hx-mast { display: flex; justify-content: space-between; font-weight: 900; font-size: .74rem; border-bottom: 3px solid #111; padding: 4px 0 6px; margin-bottom: 14px; }
[data-skin="c"] .hx-pic { margin: 0 6px; transform: rotate(-1.5deg); }
[data-skin="c"] .hx-frame { border-radius: 0; background: #fff; border: 8px solid #fff; border-bottom-width: 34px; box-shadow: 0 10px 24px -10px rgba(0,0,0,.45);
    clip-path: polygon(0 1%,4% 0,9% 1.5%,15% .3%,22% 1.2%,30% 0,38% 1%,46% .2%,55% 1.4%,63% 0,72% 1%,80% .2%,88% 1.3%,95% 0,100% 1%,99.4% 20%,100% 45%,99.2% 70%,100% 99%,94% 100%,86% 98.8%,77% 100%,68% 99%,58% 100%,49% 98.7%,40% 100%,31% 99%,22% 100%,13% 98.8%,5% 100%,0 99%,.7% 75%,0 50%,.8% 25%); }
[data-skin="c"] .hx-tape { display: block; position: absolute; width: 96px; height: 28px; background: rgba(255,224,27,.8); z-index: 2; }
[data-skin="c"] .hx-tape.t1 { top: -12px; left: 18px; transform: rotate(-8deg); }
[data-skin="c"] .hx-tape.t2 { top: -10px; right: 14px; transform: rotate(7deg); background: rgba(255,141,199,.8); }
[data-skin="c"] .hx-h1 { position: relative; z-index: 2; margin: -58px 0 0; line-height: 1.02; font-size: clamp(2.3rem, 11.5vw, 3.6rem); }
[data-skin="c"] .hx-h1 .l2 { font-size: 1em; margin-top: 0; }
[data-skin="c"] .hx-h1 .ch { padding: .02em .12em .06em; margin: 0 2px 5px 0; box-shadow: 2px 3px 0 rgba(0,0,0,.3); }
[data-skin="c"] .hx-h1 .ch:nth-child(5n+1) { background: #FFE01B; }
[data-skin="c"] .hx-h1 .ch:nth-child(5n+2) { background: #111; color: #fff; font-family: "Nanum Myeongjo", serif; font-weight: 800; }
[data-skin="c"] .hx-h1 .ch:nth-child(5n+3) { background: #E8342A; color: #fff; }
[data-skin="c"] .hx-h1 .ch:nth-child(5n+4) { background: #fff; font-family: "Gugi", sans-serif; }
[data-skin="c"] .hx-h1 .ch:nth-child(5n) { background: #1D4ED8; color: #fff; }
[data-skin="c"] .hx-h1 .q { background: #FF8DC7 !important; color: #111 !important; }
[data-skin="c"] .hx-rain { display: block; height: 14px; margin: 20px -16px 0; background: linear-gradient(to bottom, #E8342A 0 20%, #FF8A00 20% 40%, #FFE01B 40% 60%, #18A058 60% 80%, #1D4ED8 80%); }
[data-skin="c"] .hx-sub { font-family: "Nanum Myeongjo", serif; font-weight: 800; color: #111; font-size: 1.06rem; }
[data-skin="c"] .srch { border-radius: 0; box-shadow: none; }
[data-skin="c"] .srch button { border-radius: 0; }
[data-skin="c"] body:before { content: ""; position: fixed; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; z-index: 0; opacity: .16; background-image: radial-gradient(#111 .8px, transparent 1px); background-size: 7px 7px; }

/* --- D: 네온 --- */
[data-skin="d"] .hx-frame { box-shadow: 0 0 0 1.5px rgba(255,106,0,.6), 0 0 30px -4px rgba(255,106,0,.55); }
[data-skin="d"] .hx-grad { background: linear-gradient(to top, rgba(11,16,48,.95) 8%, rgba(11,16,48,.1) 55%, rgba(11,16,48,0)); height: 100%; }
[data-skin="d"] .hx-scan { display: block; position: absolute; left: 0; right: 0; height: 120px; top: -120px; background: linear-gradient(to bottom, rgba(56,232,255,0), rgba(56,232,255,.18), rgba(56,232,255,0)); animation: scan 4.5s linear infinite; }
@keyframes scan { to { top: 110%; } }
[data-skin="d"] .hx-h1 { color: #FF6A00; text-shadow: 0 0 6px rgba(255,106,0,.9), 0 0 18px rgba(255,106,0,.7), 0 0 40px rgba(255,80,0,.45); }
[data-skin="d"] .hx-h1 .l2 { color: #fff; text-shadow: 0 0 12px rgba(56,232,255,.8); }
[data-skin="d"] .hx-h1 .q { color: #C6FF3D; text-shadow: 0 0 10px rgba(198,255,61,.9); }
[data-skin="d"] .hx-star { display: block; position: absolute; top: 22px; right: 20px; width: 44px; height: 44px; background: #FF6A00; clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); animation: tw 2.6s ease-in-out infinite; }
[data-skin="d"] .hx-star.sm { top: 96px; right: 64px; width: 26px; height: 26px; animation-delay: -1s; }
@keyframes tw { 50% { transform: scale(.7) rotate(20deg); opacity: .6; } }
[data-skin="d"] .hx-live { display: inline-flex; align-items: center; gap: 8px; height: 36px; margin-top: 18px; padding: 0 14px; border-radius: 999px; border: 1.5px solid #C6FF3D; color: #C6FF3D; font-weight: 800; font-size: .84rem; box-shadow: 0 0 14px -2px rgba(198,255,61,.5); }
.hx-live b { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: blink 1.4s infinite; }
@keyframes blink { 50% { opacity: .2; } }
[data-skin="d"] .srch { border-radius: 18px; border-color: rgba(56,232,255,.45); box-shadow: 0 0 22px -8px rgba(56,232,255,.6); background: #141A45; }
[data-skin="d"] .srch button { border-radius: 13px; box-shadow: 0 0 18px rgba(255,106,0,.6); }
#dust { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; display: none; }
[data-skin="d"] #dust { display: block; }
[data-skin="d"] .page { position: relative; z-index: 1; }

/* --- E: 아치 액자 + 3D 젤리 --- */
[data-skin="e"] .hx-frame { overflow: visible; border-radius: 200px 200px 32px 32px; box-shadow: 0 30px 60px -30px rgba(255,92,154,.55), inset 0 0 0 6px #fff; }
[data-skin="e"] .hx-img { border-radius: inherit; }
[data-skin="e"] .hx-frame:after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: inherit; box-shadow: inset 0 0 0 6px #fff, inset 0 0 0 8px rgba(255,92,154,.25); }
[data-skin="e"] #jelly { display: block; position: absolute; top: 0; left: -16px; width: calc(100% + 32px); height: 100%; z-index: 3; touch-action: pan-y; }
[data-skin="e"] .hx-pearls { display: flex; position: absolute; left: 50%; top: 14px; transform: translateX(-50%); gap: 6px; z-index: 4; }
.hx-pearls i { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #EDE3D6 55%, #C9BBA8); box-shadow: 0 2px 3px rgba(0,0,0,.15); }
[data-skin="e"] .hx-h1 { text-align: center; margin-top: 16px; color: #FF3D86; filter: drop-shadow(0 3px 0 #fff) drop-shadow(0 10px 18px rgba(216,31,107,.35)); }
/* 그라데이션 글자는 글자 조각(.ch)마다 직접 — 부모에서 물려받으면 투명 글자만 남는다(2026-09-28 실측) */
[data-skin="e"] .hx-h1 .ch, [data-skin="e"] .hx-h1 .w1, [data-skin="e"] .hx-h1 .l2 { background: linear-gradient(180deg, #FF8DB9 0%, #FF3D86 55%, #D81F6B 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
[data-skin="e"] .hx-h1 .w1 .ch, [data-skin="e"] .hx-h1 .l2 .ch { background-size: 100% 100%; }
[data-skin="e"] .hx-h1 .q { background: none; -webkit-text-fill-color: #1A1320; color: #1A1320; }
[data-skin="e"] .hx-sub { text-align: center; }
[data-skin="e"] .srch { border: 0; box-shadow: 0 10px 28px -14px rgba(26,19,32,.35), inset 0 -3px 0 #FBE3EC; }
[data-skin="e"] .srch button { background: linear-gradient(180deg, #FF8DB9, #FF3D86); color: #fff; box-shadow: inset 0 2px 0 rgba(255,255,255,.6), 0 6px 14px -6px rgba(255,61,134,.8); }

/* --- F: 밑그림 선 · 손글씨 메모 --- */
[data-skin="f"] .hx-frame { border-radius: 6px; overflow: visible; background: transparent; }
[data-skin="f"] .hx-img { border-radius: 6px; }
[data-skin="f"] .hx-sk { display: block; position: absolute; top: -12px; left: -6px; width: calc(100% + 12px); height: calc(100% + 24px); pointer-events: none; overflow: visible; }
.hx-sk path { fill: none; stroke-linecap: round; stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: skdraw 1.6s cubic-bezier(.6,0,.3,1) forwards; }
.hx-sk .r { stroke: #E53935; stroke-width: 1.6; opacity: .75; } .hx-sk .b { stroke: #2F6BFF; stroke-width: 1.3; opacity: .6; }
@keyframes skdraw { to { stroke-dashoffset: 0; } }
[data-skin="f"] .hx-note { display: block; position: absolute; font-family: "Nanum Pen Script", cursive; font-size: 1.6rem; line-height: 1; padding: 2px 8px; border-radius: 4px; background: rgba(247,245,240,.9); }
[data-skin="f"] .hx-note.n1 { top: 18px; left: 14px; color: #E53935; transform: rotate(-6deg); }
[data-skin="f"] .hx-note.n2 { right: 12px; top: 42%; color: #2F6BFF; transform: rotate(5deg); }
[data-skin="f"] .hx-h1 .w1 { position: relative; display: inline-block; }
[data-skin="f"] .hx-h1 .w1:before { content: ""; position: absolute; left: -4px; right: -4px; bottom: .08em; height: .36em; background: #FFC21A; z-index: -1; transform: rotate(-1.5deg); border-radius: 4px; }
[data-skin="f"] .hx-h1 .l2 { font-size: 1em; margin-top: 0; }
[data-skin="f"] .hx-sub { font-family: "Nanum Pen Script", cursive; font-size: 1.5rem; }
[data-skin="f"] .srch { border-radius: 16px 20px 14px 22px; box-shadow: 5px 5px 0 -1px var(--bg), 5px 5px 0 0.5px #2F6BFF; }
[data-skin="f"] .srch button { border-radius: 12px; }

/* --- G: 수채 --- */
[data-skin="g"] .hx-frame { background: transparent; border-radius: 0; margin: 0 6px; }
[data-skin="g"] .hx-img { -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 48%, #000 60%, transparent 100%); mask-image: radial-gradient(ellipse 72% 70% at 50% 48%, #000 60%, transparent 100%); }
[data-skin="g"] .hx-wc { display: block; }
.wash { position: absolute; border-radius: 50%; filter: url(#wc); opacity: .55; pointer-events: none; z-index: 0; animation: breathe 7s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.06) rotate(4deg); } }
[data-skin="g"] .hx { overflow: hidden; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
[data-skin="g"] .hx-h1 { position: relative; margin-top: -30px; font-weight: 700; font-size: clamp(2.5rem, 12.5vw, 3.8rem); line-height: 1.1; }
[data-skin="g"] .hx-h1 .l2 { font-size: 1em; margin-top: 0; }
[data-skin="g"] .srch { border-radius: 4px 10px 6px 12px; box-shadow: none; }
[data-skin="g"] .srch button { border-radius: 6px; }

/* ================= 오늘의 애매함 투표 (vt) ================= */
.vt { position: relative; background: var(--card); border: var(--bw) solid var(--bc); border-radius: var(--r); padding: 20px 16px 16px; box-shadow: var(--card-sh); overflow: hidden; }
.vt .k { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: .8rem; color: var(--accent-ink); }
.vt .q { margin: 10px 0 16px; font-family: var(--display); font-weight: 400; font-size: clamp(1.3rem, 5.8vw, 1.6rem); line-height: 1.3; }
.vote { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vote button { position: relative; overflow: hidden; height: 62px; border: var(--bw) solid var(--bc); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font: inherit; font-weight: 900; font-size: 1.05rem; cursor: pointer; }
.vote button i { position: absolute; top: 0; left: 0; bottom: 0; width: 0; background: var(--c2); }
.vote button:nth-child(2) i { background: var(--c1); }
.vote button span { position: relative; }
.vote button.mine { box-shadow: 0 0 0 3px var(--text) inset; }
.vote button[disabled] { cursor: default; }
.vt .foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
.vt .n { font-size: .82rem; color: var(--text-sub); font-weight: 700; }
.vt .go { display: inline-flex; align-items: center; min-height: 44px; font-weight: 800; font-size: .9rem; color: var(--accent-ink); text-decoration: none; }
:root:not([data-skin]) .vt, [data-skin="a"] .vt { background: #1C1A17; color: #fff; }
:root:not([data-skin]) .vt .vote button, [data-skin="a"] .vt .vote button { background: rgba(255,255,255,.1); color: #fff; }
:root:not([data-skin]) .vt .go, [data-skin="a"] .vt .go { color: #FFD2CB; }
:root:not([data-skin]) .vt .k, [data-skin="a"] .vt .k { color: #FF9A8C; }
:root:not([data-skin]) .vt .n, [data-skin="a"] .vt .n { color: #B9AFA3; }
:root:not([data-skin]) .vote button.mine, [data-skin="a"] .vote button.mine { box-shadow: 0 0 0 2px #fff inset; }
[data-skin="c"] .vt { background: #111; color: #fff; transform: rotate(.6deg); overflow: visible; }
[data-skin="c"] .vt:after { content: ""; position: absolute; top: -11px; left: 40%; width: 86px; height: 24px; background: rgba(255,224,27,.8); transform: rotate(-3deg); }
[data-skin="c"] .vt .vote button { background: transparent; color: #fff; border-color: #fff; }
[data-skin="c"] .vt .q { font-family: "Nanum Myeongjo", serif; font-weight: 800; }
[data-skin="c"] .vt .k, [data-skin="c"] .vt .go { color: #FFE01B; } [data-skin="c"] .vt .n { color: #bbb; }
[data-skin="c"] .vote button i { background: #E8342A; } [data-skin="c"] .vote button:nth-child(2) i { background: #1D4ED8; }
[data-skin="c"] .vote button.mine { box-shadow: 0 0 0 3px #FFE01B inset; }
[data-skin="d"] .vt { border-color: rgba(255,61,219,.5); box-shadow: 0 0 30px -10px rgba(255,61,219,.7); }
[data-skin="d"] .vt .k { color: #FF3DDB; }
[data-skin="d"] .vote button { background: #0E1440; border-color: rgba(255,255,255,.25); }
[data-skin="d"] .vote button i { background: linear-gradient(90deg, rgba(56,232,255,.25), rgba(56,232,255,.75)); }
[data-skin="d"] .vote button:nth-child(2) i { background: linear-gradient(90deg, rgba(255,106,0,.25), rgba(255,106,0,.85)); }
[data-skin="d"] .vote button.mine { box-shadow: 0 0 0 2px #C6FF3D inset, 0 0 16px rgba(198,255,61,.6); }
[data-skin="b"] .vote button { background: #FFF7DA; }
[data-skin="b"] .vote button i { background: #4FC3FF; } [data-skin="b"] .vote button:nth-child(2) i { background: #FF3D7F; }
[data-skin="e"] .vote button { border: 0; background: #F6F1EA; box-shadow: inset 0 -4px 0 rgba(0,0,0,.06); }
[data-skin="e"] .vote button i { background: linear-gradient(180deg, #D4C6FF, #A58BFF); } [data-skin="e"] .vote button:nth-child(2) i { background: linear-gradient(180deg, #FF9FC4, #FF4D90); }
[data-skin="f"] .vt { box-shadow: 6px 6px 0 -1px var(--bg), 6px 6px 0 .5px #E53935; }
[data-skin="f"] .vote button { background: #fff; }
[data-skin="f"] .vote button i { background: repeating-linear-gradient(-45deg, #FF8A1F 0 6px, #FFB266 6px 12px); }
[data-skin="f"] .vote button:nth-child(2) i { background: repeating-linear-gradient(-45deg, #FF2E88 0 6px, #FF7AB5 6px 12px); }
[data-skin="f"] .vote button span { background: #fff; padding: 0 6px; border-radius: 6px; }
[data-skin="f"] .vt .k { font-family: "Nanum Pen Script", cursive; font-size: 1.35rem; font-weight: 400; color: #E53935; }
[data-skin="g"] .vt { background: transparent; }
[data-skin="g"] .vote button { background: rgba(255,255,255,.7); }
[data-skin="g"] .vote button i { background: #9CBCD8; opacity: .75; } [data-skin="g"] .vote button:nth-child(2) i { background: #F6B99A; }
[data-skin="g"] .vt .k { font-family: "Nanum Pen Script", cursive; font-size: 1.35rem; font-weight: 400; color: #E9825E; }

/* ================= 그림 카드 공통 (갈래·도구) ================= */
.art { position: relative; display: flex; align-items: center; justify-content: center; background-color: var(--surface); background-size: cover; background-position: center; overflow: hidden; }
.art .emo { font-size: 3rem; line-height: 1; }
.cx { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cx-tile { position: relative; display: flex; flex-direction: column; min-height: 100%; border-radius: var(--r); border: var(--bw) solid var(--bc); background: var(--card); box-shadow: var(--card-sh); overflow: hidden; color: var(--text); text-decoration: none; }
.cx-tile.wide { grid-column: 1 / -1; flex-direction: row; }
.cx-tile .art { aspect-ratio: 4/3; }
.cx-tile.wide .art { flex: 0 0 46%; aspect-ratio: auto; min-height: 148px; }
.cx-tile .tx { display: flex; flex-direction: column; padding: 12px 14px 14px; flex: 1 1 auto; min-width: 0; }
.cx-tile.wide .tx { justify-content: center; }
.cx-tile .n { font-family: var(--display); font-weight: 400; font-size: 1.3rem; line-height: 1.2; }
.cx-tile .d { margin-top: 5px; font-size: .84rem; font-weight: 600; line-height: 1.4; color: var(--text-sub); }
.cx-tile .tag { align-self: flex-start; margin-top: 10px; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; font-size: .72rem; font-weight: 900; background: var(--accent-soft); color: var(--accent-ink); }
.cx-tile .tag.live { background: var(--btn); color: var(--btn-ink); }
/* 갈래 색 — 타일마다 --tc */
.cx-tile { --tc: var(--c1); }
.cx-tile[data-i="2"] { --tc: var(--c2); } .cx-tile[data-i="3"] { --tc: var(--c3); } .cx-tile[data-i="4"] { --tc: var(--c4); }
.cx-tile[data-i="5"] { --tc: var(--c5); } .cx-tile[data-i="6"] { --tc: var(--c6); } .cx-tile[data-i="7"] { --tc: var(--c7); }
.cx-tile .art { background-color: var(--tc); }
/* A: 그림을 갈래 색에 녹인다 */
:root:not([data-skin]) .cx-tile, [data-skin="a"] .cx-tile { background: var(--tc); }
:root:not([data-skin]) .cx-tile .art, [data-skin="a"] .cx-tile .art { background-blend-mode: multiply; }
/* B: 원색 덩어리 — 글자판도 갈래 색 */
[data-skin="b"] .cx-tile { background: var(--tc); }
[data-skin="b"] .cx-tile .art { border-bottom: 3px solid #141414; }
[data-skin="b"] .cx-tile.wide .art { border-bottom: 0; border-right: 3px solid #141414; }
[data-skin="b"] .cx-tile .d { color: inherit; opacity: .85; }
[data-skin="b"] .cx-tile[data-i="1"], [data-skin="b"] .cx-tile[data-i="6"] { color: #fff; }
[data-skin="b"] .cx-tile[data-i="6"] .n { color: #FFD84D; }
[data-skin="b"] .cx-tile .tag { background: #141414; color: #fff; }
[data-skin="b"] .cx-tile[data-i="6"] .tag { background: #FFD84D; color: #141414; }
/* C: 오려 붙인 기울기 */
[data-skin="c"] .cx-tile { background: var(--tc); border: 0; }
[data-skin="c"] .cx-tile:nth-child(odd) { transform: rotate(-1.2deg); } [data-skin="c"] .cx-tile:nth-child(even) { transform: rotate(1.4deg); }
[data-skin="c"] .cx-tile[data-i="2"], [data-skin="c"] .cx-tile[data-i="5"], [data-skin="c"] .cx-tile[data-i="6"], [data-skin="c"] .cx-tile[data-i="7"] { color: #fff; }
[data-skin="c"] .cx-tile .d { color: inherit; opacity: .85; }
[data-skin="c"] .cx-tile .art { margin: 8px 8px 0; border: 1.5px solid rgba(0,0,0,.2); }
[data-skin="c"] .cx-tile.wide .art { margin: 8px 0 8px 8px; }
[data-skin="c"] .cx-tile .tag { background: #fff; color: #111; border-radius: 0; transform: rotate(-4deg); }
/* D: 네온 테두리 */
[data-skin="d"] .cx-tile { --glow: var(--tc); border-color: var(--tc); box-shadow: 0 0 24px -10px var(--tc), inset 0 0 30px -18px var(--tc); }
[data-skin="d"] .cx-tile .n { color: var(--tc); text-shadow: 0 0 10px var(--tc); }
[data-skin="d"] .cx-tile .art { background-color: #0E1440; }
[data-skin="d"] .cx-tile .tag { background: var(--tc); color: #0B1030; }
/* E: 젤리 그라데이션 */
[data-skin="e"] .cx-tile { background: linear-gradient(180deg, #fff, var(--tc)); }
[data-skin="e"] .cx-tile[data-i="6"] { color: #fff; } [data-skin="e"] .cx-tile[data-i="6"] .d { color: #E9DDF0; }
[data-skin="e"] .cx-tile .art { border-radius: calc(var(--r) - 8px); margin: 8px 8px 0; }
[data-skin="e"] .cx-tile.wide .art { margin: 8px 0 8px 8px; }
/* F: 두 겹 손그림 테두리 */
[data-skin="f"] .cx-tile, [data-skin="f"] .tt { box-shadow: 5px 5px 0 -1px var(--bg), 5px 5px 0 .5px var(--tc2, #2F6BFF); }
[data-skin="f"] .cx-tile .n { background: linear-gradient(transparent 60%, var(--tc) 60%); align-self: flex-start; }
[data-skin="f"] .cx-tile .tag { background: transparent; color: #E53935; font-family: "Nanum Pen Script", cursive; font-size: 1.25rem; font-weight: 400; padding: 0; transform: rotate(-4deg); }
/* G: 수채 번짐 */
[data-skin="g"] .cx-tile { background: transparent; }
[data-skin="g"] .cx-tile .art { background-color: transparent; }
[data-skin="g"] .cx-tile .n { font-weight: 700; }
[data-skin="g"] .cx-tile .tag { background: transparent; color: #E9825E; font-family: "Nanum Pen Script", cursive; font-size: 1.25rem; font-weight: 400; padding: 0; }

/* ---------- 도구 가로 넘김(대문)·도구 격자(갈래) ---------- */
.rail { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 4px 16px 18px; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail .tt { flex: 0 0 70%; max-width: 290px; scroll-snap-align: start; }
.tgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tt { position: relative; display: flex; flex-direction: column; border-radius: var(--r); border: var(--bw) solid var(--bc); background: var(--card); box-shadow: var(--card-sh); overflow: hidden; color: var(--text); text-decoration: none; }
.tt .art { aspect-ratio: 4/3; }
.tt .tx { display: flex; flex-direction: column; flex: 1 1 auto; padding: 10px 12px 12px; }
.tt .n { font-family: var(--display); font-weight: 400; font-size: 1.12rem; line-height: 1.25; }
.tt .d { margin-top: 4px; font-size: .8rem; line-height: 1.4; color: var(--text-sub); }
.tt .go { align-self: flex-start; margin-top: auto; padding-top: 10px; }
.tt .go b { display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: 999px; background: var(--btn); color: var(--btn-ink); font-size: .84rem; font-weight: 900; }
.tt.is-soon .go b { background: var(--surface); color: var(--text-sub); }
.tt .flag { position: absolute; top: 8px; left: 8px; z-index: 1; height: 24px; display: inline-flex; align-items: center; padding: 0 9px; border-radius: 999px; background: rgba(0,0,0,.72); color: #fff; font-size: .7rem; font-weight: 800; }
[data-skin="b"] .tt .art { border-bottom: 3px solid #141414; }
[data-skin="b"] .rail .tt:nth-child(2n) { transform: rotate(1.2deg); } [data-skin="b"] .rail .tt:nth-child(2n+1) { transform: rotate(-1deg); }
[data-skin="c"] .tt { border: 0; }
[data-skin="c"] .tt .art { margin: 8px 8px 0; }
[data-skin="c"] .tt .go b { border-radius: 0; background: #111; color: #fff; }
[data-skin="e"] .tt .art { border-radius: calc(var(--r) - 8px); margin: 8px 8px 0; }
[data-skin="g"] .tt .art { background-color: transparent; }

/* ---------- 갈래 페이지 머리 ---------- */
.ch-head { position: relative; margin-top: 4px; border-radius: var(--r); border: var(--bw) solid var(--bc); overflow: hidden; box-shadow: var(--card-sh); background: var(--card); }
.ch-head .art { aspect-ratio: 16/10; }
.ch-head .tx { padding: 14px 16px 16px; }
.ch-head h1 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 9vw, 2.6rem); line-height: 1.1; }
.ch-head p { margin: 6px 0 0; color: var(--text-sub); font-weight: 600; }
[data-skin="d"] .ch-head h1 { color: #FF6A00; text-shadow: 0 0 12px rgba(255,106,0,.7); }

/* ---------- 기존 부품을 스킨 결로 ---------- */
.post-card, .tool-card, .chip, .today-card, .box { border-radius: var(--r-sm); }
.post-card, .tool-card { border: var(--bw) solid var(--bc); box-shadow: var(--card-sh); background: var(--card); }
[data-skin="a"] .post-card, :root:not([data-skin]) .post-card, [data-skin="e"] .post-card, [data-skin="a"] .tool-card, :root:not([data-skin]) .tool-card, [data-skin="e"] .tool-card { border: 1px solid var(--border); }
.btn { border-radius: 999px; background: var(--btn); color: var(--btn-ink); }
[data-skin="c"] .btn { border-radius: 0; }
.prose h2, .doc h1, .doc h2, .post h1 { font-family: var(--display); font-weight: 400; letter-spacing: -.02em; }
.post h1 { font-size: clamp(1.7rem, 7.5vw, 2.2rem); line-height: 1.25; }
.site-footer { background: var(--surface); color: var(--text-sub); }
[data-skin="d"] .site-footer { background: #080C26; }

/* ---------- 스킨 고르기 창 ---------- */
.skin-list { grid-template-columns: 1fr 1fr; }
.skin-opt { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden; min-height: 44px; border-radius: 14px; text-align: left; }
.skin-opt .pv { display: block; aspect-ratio: 3/2; background-size: cover; background-position: center 25%; }
.skin-opt .nm { display: flex; align-items: center; gap: 6px; padding: 8px 10px; font-weight: 800; font-size: .86rem; }
.skin-opt .nm i { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; border: 1px solid rgba(0,0,0,.2); }
.skin-opt[aria-checked="true"] { border-width: 2px; border-color: var(--accent-ink); box-shadow: 0 0 0 2px var(--accent-soft); }
.skin-panel { max-height: calc(100% - 80px); overflow-y: auto; }

/* ---------- 연출 공통 ---------- */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.rv.in { opacity: 1; transform: none; }
[data-skin="c"] .cx-tile.rv.in:nth-child(odd) { transform: rotate(-1.2deg); } [data-skin="c"] .cx-tile.rv.in:nth-child(even) { transform: rotate(1.4deg); }
.sq { transition: transform .45s cubic-bezier(.34,1.56,.64,1); }
.sq:active, .sq.pressed { transform: scale(.94) !important; transition-duration: .08s; }
#wipe { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 120; pointer-events: none; }
#wipe i { position: absolute; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: var(--pop); transform: scale(0); }
#wipe.go i { transition: transform .5s cubic-bezier(.7,0,.3,1); transform: scale(60); }
body.enter .page { animation: enter .6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes enter { from { opacity: 0; transform: translateY(14px) scale(.985); } }
#fx { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 110; }
.count { font-variant-numeric: tabular-nums; }
.snd .off { display: none; } .snd.muted .on { display: none; } .snd.muted .off { display: block; }
@media (prefers-reduced-motion: reduce) { *, *:before, *:after { animation: none !important; transition: none !important; } .rv { opacity: 1; transform: none; } .drop .ch { opacity: 1; transform: none; } }