/*
 * kkzz 테마와 모션. style.css 뒤에 불러와 덮어쓴다.
 * 기준: branding/KKZZ_BRANDING_SHEET.html (잉크·종이·라임·바이올렛, 두툼하고 말랑한 워드마크)
 * 구조와 기능 스타일은 style.css에 두고, 여기에는 겉모습과 움직임만 둔다.
 */

:root {
  --r-box: 18px;
  --r-ctl: 12px;
  --shadow: 0 1px 0 rgba(23, 26, 25, 0.04), 0 10px 28px -18px rgba(23, 26, 25, 0.28);
  --shadow-lift: 0 2px 0 rgba(23, 26, 25, 0.05), 0 18px 36px -18px rgba(23, 26, 25, 0.38);
  --ink: #171a19;
  --lime: #d5fa43;
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --out: cubic-bezier(0.22, 1, 0.36, 1);
  --top-bg: rgba(246, 246, 239, 0.82);
  --burst-a: #171a19;
  --burst-b: #9fc400;
  --bestc-mix: 30%;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 12px 30px -18px rgba(0, 0, 0, 0.8);
    --shadow-lift: 0 2px 0 rgba(0, 0, 0, 0.3), 0 20px 40px -18px rgba(0, 0, 0, 0.9);
    --top-bg: rgba(23, 26, 25, 0.8);
    --burst-a: #d5fa43;
    --burst-b: #f6f6ef;
    --bestc-mix: 12%;
    color-scheme: dark;
  }
}

/* 헤더의 전환 버튼으로 고른 화면 모드. 시스템 설정보다 우선한다. 값은 style.css와 위 블록의 것과 같다. */
:root[data-theme="light"] {
  --bg: #f6f6ef; --box: #ffffff; --line: #d9ddd3; --text: #171a19; --muted: #59615b;
  --accent: #6342c6; --accent-bg: #ece8f8; --danger: #c0392b; --ok: #18794e; --ok-bg: #e3f4ea; --warn-bg: #fff4d6;
  --shadow: 0 1px 0 rgba(23, 26, 25, 0.04), 0 10px 28px -18px rgba(23, 26, 25, 0.28);
  --shadow-lift: 0 2px 0 rgba(23, 26, 25, 0.05), 0 18px 36px -18px rgba(23, 26, 25, 0.38);
  --top-bg: rgba(246, 246, 239, 0.82); --burst-a: #171a19; --burst-b: #9fc400; --bestc-mix: 30%;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #171a19; --box: #202423; --line: #353b38; --text: #f6f6ef; --muted: #a3aba5;
  --accent: #b9a8f5; --accent-bg: #2c2647; --danger: #ff8a7a; --ok: #6fd3a0; --ok-bg: #173526; --warn-bg: #3d3319;
  --shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 12px 30px -18px rgba(0, 0, 0, 0.8);
  --shadow-lift: 0 2px 0 rgba(0, 0, 0, 0.3), 0 20px 40px -18px rgba(0, 0, 0, 0.9);
  --top-bg: rgba(23, 26, 25, 0.8); --burst-a: #d5fa43; --burst-b: #f6f6ef; --bestc-mix: 12%;
  color-scheme: dark;
}

/* 페이지 사이 전환: 지원하는 브라우저에서만 부드럽게 넘어간다 */
@view-transition { navigation: auto; }
.top { view-transition-name: kkzz-top; }
::view-transition-old(root) { animation: kz-page-out 140ms ease-in both; }
::view-transition-new(root) { animation: kz-page-in 260ms var(--out) both; }
@keyframes kz-page-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes kz-page-in { from { opacity: 0; transform: translateY(10px); } }

body { font-size: 15px; letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; }
::selection { background: var(--lime); color: var(--ink); }
h1 { font-size: 24px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.3; }
h2 { font-size: 16px; font-weight: 700; letter-spacing: -0.015em; }
a:hover { text-decoration: none; }
.wrap { max-width: 1080px; padding: 0 16px; }

/* ── 상단 ─────────────────────────────────────────── */
.top {
  position: sticky; top: 0; z-index: 20; margin-bottom: 18px;
  background: var(--top-bg); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom-color: transparent; transition: border-color 200ms, box-shadow 200ms;
}
.top.scrolled { border-bottom-color: var(--line); box-shadow: 0 8px 24px -20px rgba(23, 26, 25, 0.5); }
.topbar { gap: 14px; padding-top: 14px; padding-bottom: 10px; }
.logo .wordmark { height: 30px; overflow: visible; }
.logo .wordmark path { transform-box: fill-box; transform-origin: 50% 100%; }
.search { max-width: 460px; }
.search input { border-radius: 999px; padding: 9px 16px; background: var(--box); transition: border-color 160ms, box-shadow 160ms; }
.search button { border-radius: 999px; padding: 8px 16px; }
.tabs { gap: 4px; padding-bottom: 10px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a {
  padding: 7px 14px; border: 0; border-radius: 999px; font-weight: 600; font-size: 14px;
  transition: background 160ms, color 160ms, transform 200ms var(--spring);
}
.tabs a:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.tabs a:active { transform: scale(0.94); }
.tabs a.on { background: var(--text); color: var(--bg); border: 0; }

/* 슬로건 띠 */
.kz-ticker { overflow: hidden; background: var(--ink); color: var(--lime); font-weight: 800; font-size: 13px; letter-spacing: 0.01em; white-space: nowrap; user-select: none; }
.kz-ticker-track { display: inline-flex; padding: 7px 0; animation: kz-marquee 38s linear infinite; }
.kz-ticker:hover .kz-ticker-track { animation-play-state: paused; }
.kz-ticker span { padding: 0 18px; }
.kz-ticker i { font-style: normal; color: #f6f6ef; opacity: 0.55; }
@keyframes kz-marquee { to { transform: translateX(-50%); } }

/* ── 상자 ─────────────────────────────────────────── */
.layout { gap: 18px; grid-template-columns: minmax(0, 1fr) 260px; }
@media (max-width: 800px) { .layout { grid-template-columns: minmax(0, 1fr); } }
.box { border-radius: var(--r-box); box-shadow: var(--shadow); margin-bottom: 18px; }
.pad { padding: 18px 20px; }
.boxhead { padding: 14px 18px; font-size: 15px; font-weight: 800; letter-spacing: -0.015em; }
.flash { border-radius: 14px; padding: 12px 16px; font-weight: 600; background: var(--ink); color: var(--lime); margin-bottom: 18px; }
.notice { border-radius: 12px; padding: 11px 14px; }
.share, .paywall, .shopline, .adslot, .card, .stack.sub, .code { border-radius: 14px; }
.empty { padding: 44px 14px; }
.foot { padding: 8px 12px 40px; }

/* ── 입력과 버튼 ───────────────────────────────────── */
input, select, textarea { border-radius: var(--r-ctl); padding: 9px 12px; transition: border-color 160ms, box-shadow 160ms; }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--text); box-shadow: 0 0 0 3px var(--lime); }
.btn, .search button {
  border-radius: 999px; padding: 7px 15px; font-weight: 600;
  transition: transform 220ms var(--spring), background 160ms, border-color 160ms, box-shadow 160ms, filter 160ms;
}
.btn:hover, .search button:hover { transform: translateY(-1px); border-color: var(--text); background: var(--box); }
.btn:active, .search button:active { transform: scale(0.95); transition-duration: 60ms; }
.btn.primary { font-weight: 700; box-shadow: 0 2px 0 var(--ink); border-color: var(--ink); }
.btn.primary:hover { background: var(--cta); border-color: var(--ink); filter: none; box-shadow: 0 4px 0 var(--ink); transform: translateY(-2px); }
.btn.primary:active { box-shadow: 0 0 0 var(--ink); transform: translateY(2px) scale(0.98); }
.btn.accent:hover { border-color: var(--accent); background: var(--accent-bg); }
.btn.on { border-color: var(--ink); font-weight: 700; }
.btn.on:hover { background: var(--cta); }
.btn.off:hover { transform: none; border-color: var(--line); }
.link { transition: color 160ms; }
fieldset { border-radius: var(--r-ctl); }

/* ── 목록 ─────────────────────────────────────────── */
.boardhead { padding: 20px 20px 16px; align-items: center; }
.boardhead h1 { font-size: 26px; }
.sorts { background: var(--bg); padding: 3px; border-radius: 999px; }
.sorts a { padding: 5px 13px; font-weight: 600; transition: background 160ms, color 160ms; }
.sorts a.on { background: var(--box); color: var(--text); box-shadow: 0 1px 3px rgba(23, 26, 25, 0.16); font-weight: 700; }
.prow { position: relative; gap: 12px; padding: 12px 20px; transition: background 160ms, padding-left 240ms var(--out); }
.prow::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0;
  background: var(--lime); transform: scaleY(0); transition: transform 240ms var(--spring);
}
.prow:hover { background: color-mix(in srgb, var(--text) 4%, transparent); padding-left: 26px; }
.prow:hover::before { transform: scaleY(1); }
.upcount {
  min-width: 46px; padding: 3px 6px; border-radius: 999px; font-size: 12px; font-weight: 800;
  transition: background 160ms, color 160ms, transform 260ms var(--spring);
}
.prow:hover .upcount { background: var(--lime); color: var(--ink); transform: scale(1.1) rotate(-4deg); }
.ttext { font-weight: 500; }
.blabel { font-size: 12px; }
.media, .badge { border-radius: 999px; padding: 0 7px; }
.lv { border-radius: 999px; padding: 1px 7px; }
.ccount { font-weight: 700; }
.pager { gap: 6px; }
.pager a { border-radius: 999px; min-width: 34px; text-align: center; font-weight: 600; transition: transform 220ms var(--spring), border-color 160ms; }
.pager a:hover { transform: translateY(-2px); border-color: var(--text); }
.pager a.on { background: var(--text); border-color: var(--text); color: var(--bg); }

/* ── 글 ───────────────────────────────────────────── */
.posthead { padding: 22px 22px 16px; }
.posthead h1 { font-size: 28px; margin: 6px 0 8px; }
.postbody { padding: 22px; }
.postbody img { border-radius: 14px; }
.postbody .text { font-size: 16px; line-height: 1.85; }
.video iframe { border-radius: 14px; }
.actions { gap: 10px; padding: 12px 16px 18px; }
.actions .btn { padding: 10px 18px; }
.actions .vote { min-width: 96px; font-size: 15px; }
.actions .vote b { font-weight: 800; }
.actions .vote.on { animation: kz-pop 420ms var(--spring); }
.share { margin: 14px 20px; padding: 16px 18px; }
.postfoot { padding: 12px 20px; }
.comment { padding: 12px 18px; }
.comment.reply { padding-left: 44px; }
.cform { padding: 14px 18px; }
.epnav { padding: 0 20px 16px; }

/* ── 옆단 ─────────────────────────────────────────── */
.hot { list-style: none; counter-reset: hot; padding: 8px 12px 10px; font-size: 14px; }
.hot li { counter-increment: hot; display: flex; align-items: center; gap: 10px; padding: 5px 6px; border-radius: 10px; transition: background 160ms; }
.hot li::before {
  content: counter(hot); flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 800; background: var(--bg); color: var(--muted);
  transition: background 160ms, color 160ms, transform 260ms var(--spring);
}
.hot li:nth-child(-n+3)::before { background: var(--ink); color: var(--lime); }
.hot li:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.hot li:hover::before { background: var(--lime); color: var(--ink); transform: scale(1.15) rotate(-8deg); }
.hot li a { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
aside .small a { transition: opacity 160ms; }
aside .small a:hover { opacity: 0.7; }

/* ── 수익과 작품 ───────────────────────────────────── */
.card { padding: 14px 16px; transition: transform 240ms var(--spring); }
.card:hover { transform: translateY(-3px); }
.bignum { font-size: 34px; letter-spacing: -0.03em; }
.cards { gap: 10px; }
.table th, .table td { padding: 10px 14px; }
.table tbody tr { transition: background 160ms; }
.table tbody tr:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.sgrid { gap: 18px 14px; padding: 14px 20px 18px; }
.scover { border-radius: 14px; box-shadow: var(--shadow); transition: transform 320ms var(--spring), box-shadow 240ms; }
.scard:hover .scover { transform: translateY(-5px) rotate(-1.5deg); box-shadow: var(--shadow-lift); }
.scard:hover .stitle { text-decoration: none; }
.scover img { transition: transform 500ms var(--out); }
.scard:hover .scover img { transform: scale(1.05); }
.subhead { padding: 14px 20px 0; font-size: 14px; }

/* 복사 알림 */
.kz-toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 50; transform: translate(-50%, 20px); opacity: 0;
  background: var(--ink); color: var(--lime); font-weight: 700; padding: 10px 18px; border-radius: 999px;
  box-shadow: var(--shadow-lift); pointer-events: none; transition: transform 320ms var(--spring), opacity 200ms;
}
.kz-toast.show { transform: translate(-50%, 0); opacity: 1; }

/* 추천을 누르면 튀어 오르는 ㅋ */
.kz-burst { position: fixed; z-index: 60; pointer-events: none; font-weight: 900; font-size: 18px; color: var(--burst-a); will-change: transform, opacity; }
.kz-burst.lime { color: var(--burst-b); }


/* ── 움직임 ───────────────────────────────────────── */
@keyframes kz-pop { 0% { transform: scale(0.86); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes kz-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes kz-row { from { opacity: 0; transform: translateX(-10px); } }
@keyframes kz-letter { 0% { opacity: 0; transform: translateY(60%) scale(0.6, 1.3); } 60% { opacity: 1; transform: translateY(-12%) scale(1.06, 0.94); } 100% { transform: none; } }
@keyframes kz-jelly { 0%, 100% { transform: none; } 30% { transform: translateY(-14%) scale(0.94, 1.08); } 60% { transform: translateY(3%) scale(1.06, 0.94); } }
@keyframes kz-flash { from { opacity: 0; transform: translateY(-10px) scale(0.98); } }

@media (prefers-reduced-motion: no-preference) {
  /* 워드마크: 처음 들어올 때 한 글자씩 튀어 오르고, 올리면 말랑하게 출렁인다 */
  .kz-intro .logo .wordmark path { animation: kz-letter 620ms var(--spring) both; animation-delay: calc(var(--n, 0) * 70ms); }
  .logo:hover .wordmark path { animation: kz-jelly 560ms var(--out) both; animation-delay: calc(var(--n, 0) * 55ms); }
  .logo .wordmark g:nth-child(1) { --n: 0; }
  .logo .wordmark g:nth-child(2) { --n: 1; }
  .logo .wordmark g:nth-child(3) { --n: 2; }
  .logo .wordmark g:nth-child(4) { --n: 3; }

  /* 화면 진입: 상자가 올라오고 목록이 차례로 들어온다 */
  .kz-in main > .box, .kz-in main > article.box, .kz-in aside > .box { animation: kz-rise 520ms var(--out) both; animation-delay: calc(var(--i, 0) * 70ms); }
  .kz-in .prow, .kz-in .scard { animation: kz-row 420ms var(--out) both; animation-delay: calc(120ms + var(--i, 0) * 28ms); }
  .kz-in .scard { animation-name: kz-rise; }
  .flash { animation: kz-flash 420ms var(--spring) both; }

  /* 스크롤하면 나타나는 요소 */
  .kz-reveal { opacity: 0; transform: translateY(12px); transition: opacity 420ms var(--out), transform 420ms var(--out); }
  .kz-reveal.seen { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .kz-ticker-track { animation: none; }
  .btn, .search button, .prow, .upcount, .card, .scover, .tabs a, .pager a { transition: none; }
}

/* 베스트 댓글: 초록 대신 브랜드 라임 */
.bestc { background: color-mix(in srgb, var(--lime) var(--bestc-mix), var(--box)); }
.bestc .badge.ok { background: var(--ink); color: var(--lime); }

/* 좁은 화면 */
@media (max-width: 520px) {
  .wrap { padding: 0 12px; }
  h1, .boardhead h1 { font-size: 22px; }
  .posthead h1 { font-size: 23px; }
  .logo .wordmark { height: 26px; }
  .search button { display: none; }
  .boardhead { padding: 16px; flex-wrap: wrap; }
  .prow { padding: 12px 16px; }
  .prow:hover { padding-left: 16px; }
  .posthead, .postbody { padding: 16px; }
  .share { margin: 12px; }
}

/* 화면 모드 전환 버튼 */
.kz-theme {
  flex: none; width: 38px; height: 38px; padding: 0; border-radius: 50%; border: 1px solid var(--line);
  background: var(--box); color: var(--text); cursor: pointer; display: grid; place-items: center; overflow: hidden;
  transition: transform 220ms var(--spring), border-color 160ms;
}
.kz-theme:hover { border-color: var(--text); transform: translateY(-1px) rotate(12deg); }
.kz-theme:active { transform: scale(0.9); }
.kz-theme:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--lime); }
.kz-theme svg { grid-area: 1 / 1; width: 18px; height: 18px; transition: transform 420ms var(--spring), opacity 200ms; }
.kz-theme .sun { transform: rotate(-90deg) scale(0.3); opacity: 0; }
.kz-dark .kz-theme .sun { transform: none; opacity: 1; }
.kz-dark .kz-theme .moon { transform: rotate(90deg) scale(0.3); opacity: 0; }
@media (max-width: 520px) { .kz-theme { width: 34px; height: 34px; } .topbar { gap: 8px; } }

/* 전환할 때 버튼 자리에서 원이 퍼지며 바뀐다 */
.kz-theme-switch::view-transition-old(root) { animation: none; }
.kz-theme-switch::view-transition-new(root) { animation: kz-iris 520ms var(--out) both; }
.kz-theme-switch::view-transition-group(kkzz-top) { animation: none; }
@keyframes kz-iris { from { clip-path: circle(0 at var(--kz-x, 50%) var(--kz-y, 0)); } to { clip-path: circle(150vmax at var(--kz-x, 50%) var(--kz-y, 0)); } }