/* 로기.ai 블로그 — style.css (티스토리 스킨용 단일 파일)
   구성: 글꼴 · 토큰 · 기본 · 공통 컴포넌트 · 레이아웃 · 홈 · 글 상세 · 밝은 종이 면 */
/* ============================================================
   00 · 글꼴
   ============================================================ */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css");
@font-face { font-family: "Paperlogy"; font-weight: 700; font-display: swap; src: url("./images/Paperlogy-7Bold.woff2") format("woff2"); }
@font-face { font-family: "Paperlogy"; font-weight: 800; font-display: swap; src: url("./images/Paperlogy-8ExtraBold.woff2") format("woff2"); }

/* ============================================================
   01 · 토큰 (디자인 값은 여기서만 정한다)
   · 기본 테마 = 미드나이트(다크). 밝은 면은 .theme-paper 가 "역할 토큰"만 바꾼다.
   · 컴포넌트는 색을 직접 쓰지 않고 아래 토큰만 읽는다.
   ============================================================ */
:root {
  /* ---- 색: 면 ---- */
  --bg: #0d1431;
  --bg-2: #101736;
  --surface: #141b3f;
  --surface-2: #1b2450;
  /* ---- 색: 선 · 글자 ---- */
  --line: rgba(127, 227, 168, .13);
  --line-strong: rgba(127, 227, 168, .3);
  --text: #eef3fb;
  --text-2: #b4c0dc;
  --text-3: #909ec4;
  /* ---- 색: 포인트 ---- */
  --green: #2fb872;      /* 브랜드 포인트 (CTA·선) */
  --mint: #7fe3a8;       /* 글자용 포인트 (강조 구절) */
  --teal: #5fe0c0;       /* 표지 속 글로우 */
  --yellow: #ffe566;     /* 로기 귀 — 드물게 */
  --orange: #f59a62;     /* Clawd */

  /* ---- 역할 토큰: 테마가 바꾸는 값 ---- */
  --on-accent: #031009;                 /* 초록 위 글자 */
  --body-text: #d3dfdc;                 /* 본문 글자 */
  --article-bg: transparent;            /* 본문 면 */
  --article-shadow: none;
  --post-link: currentcolor;            /* 본문 속 링크 */
  --sel-bg: var(--green); --sel-ink: #04110a;   /* 글자 선택 */
  --hl-mark: none;                      /* 강조 구절 형광펜 */
  --tile: rgba(255, 255, 255, .03);     /* 옅은 타일 */
  --tile-2: rgba(255, 255, 255, .05);   /* 한 단계 진한 타일 */
  --tile-warn: var(--tile);             /* '아직 모르는 것' 타일 */
  --chip-fill: rgba(255, 255, 255, .06);
  --link-line: var(--line-strong);      /* 링크 밑줄 */
  --accent-tint: rgba(47, 184, 114, .18);       /* 번호 칸 배경 */
  --accent-tint-line: var(--line-strong);
  --badge-ink: var(--on-accent);        /* 요약 번호 글자 */
  --tldr-bg: linear-gradient(140deg, rgba(47, 184, 114, .12), rgba(20, 27, 63, .6) 60%);
  --tldr-line: var(--line-strong);
  --cmp-a-bg: rgba(255, 229, 102, .14); --cmp-a-ink: var(--yellow);   /* 비교 '이전' */
  --cmp-b-bg: rgba(47, 184, 114, .2);   --cmp-b-ink: var(--mint);     /* 비교 '지금' */
  --warn-bg: rgba(255, 229, 102, .06);  --warn-line: rgba(255, 229, 102, .35);

  /* ---- 글꼴 ---- */
  --font: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --font-head: "Paperlogy", "Pretendard Variable", Pretendard, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  /* ---- 간격 (8px 격자) · 모양 · 움직임 ---- */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px;
  --radius: 22px;
  --radius-sm: 14px;
  --pill: 999px;
  --maxw: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --t-fast: .2s; --t-base: .25s; --t-slow: .3s;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

/* ============================================================
   02 · 기본 (리셋 · 요소 기본값 · 접근성 · 유틸)
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.7; word-break: keep-all; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--sel-bg); color: var(--sel-ink); }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, .head { font-family: var(--font-head); }

/* ---- 유틸 ---- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.mono { font-family: var(--mono); letter-spacing: .02em; }
em.hl { font-style: normal; color: var(--mint); }

/* ---- 모션 줄이기 ---- */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ============================================================
   03 · 공통 컴포넌트 (두 곳 이상에서 쓰는 부품)
   · 색은 토큰(01-tokens)만 읽는다. 페이지 전용 조정은 10-home / 20-post 에서.
   ============================================================ */

/* ---------- 칩 · 알약 라벨 ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: var(--pill); font-size: 13px; font-weight: 700; color: #fff; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .28); backdrop-filter: blur(6px); }
.chip.mono { font-weight: 500; color: var(--mint); background: rgba(47, 184, 114, .08); border-color: var(--line-strong); font-size: 12px; }
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); animation: pulse 2s infinite; }
@keyframes pulse { 50% { opacity: .35; } }

/* ---------- 버튼 (알약) ---------- */
.btn, .act { display: inline-flex; align-items: center; gap: 8px; border-radius: var(--pill); }
.btn { padding: 14px 22px; font-weight: 700; font-size: 15px; transition: var(--t-base); }
.btn-primary { background: var(--green); color: var(--on-accent); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 34px -8px rgba(47, 184, 114, .7); }
.btn-ghost { border: 1px solid var(--line-strong); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--mint); }
.act { padding: 10px 16px; border: 1px solid var(--line-strong); font-size: 14px; font-weight: 600; color: var(--text); transition: var(--t-fast); }
.act svg { width: 16px; height: 16px; color: var(--mint); }
.act:hover { background: var(--surface-2); border-color: var(--mint); }

/* ---------- 동그란 아이콘 버튼 ---------- */
.icon-btn, .vb, .row .go { display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong); }
.icon-btn { width: 40px; height: 40px; border-color: var(--line); color: var(--text-2); transition: var(--t-fast); }
.icon-btn:hover { color: var(--mint); border-color: var(--line-strong); }
.icon-btn svg { width: 18px; height: 18px; }
.vb { width: 36px; height: 36px; color: var(--mint); transition: var(--t-fast); flex: none; }
.vb svg { width: 16px; height: 16px; }
.row .go { width: 40px; height: 40px; color: var(--mint); transition: var(--t-base); }
.vb:hover, .row:hover .go { background: var(--green); color: var(--on-accent); border-color: var(--green); }

/* ---------- 타일 (옅은 면 + 얇은 테두리) ---------- */
.facts div, .flowline li, .two > div, .steps li, .cmp .c { background: var(--tile); border: 1px solid var(--line); border-radius: var(--radius-sm); }

/* ---------- 패널 (surface 면) ---------- */
.cat, .source, .pn a { background: var(--surface); border: 1px solid var(--line); }

/* ---------- 점선 자리표시 (광고·댓글) ---------- */
.ad-slot, .cmt-box { border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); text-align: center; }

/* ---------- 글자 역할 ---------- */
/* 모노 라벨: 숫자·메타·라벨은 모노 글꼴 */
.sec-head .kicker, .cat .no, .cat .ct, .row .meta, .tags .tags-l, .flowline li b, .facts div b, .stage .tagfloat,
.post-meta, .two b, .cmp-h, .tldr li::before, .ad-slot, .pn small, .vcount, .toc b, .v-cmp .h, .v-sum li::before { font-family: var(--mono); }
/* 흐린 글자: 메타·캡션·안내 */
.promise div, .row .meta, .cat .no, .tags .tags-l, .site-footer .copy, .crumb, .post-meta, .stamp,
.pn small, .vcount, .toc b, .toc a, .cmt-box, .ad-slot, .vslide .foot { color: var(--text-3); }
/* 링크 호버: 민트 */
.sec-head .more:hover, .site-footer .links a:hover, .crumb a:hover { color: var(--mint); }

/* ============================================================
   04 · 레이아웃 (모든 페이지가 공유: 배경 효과 · 헤더 · 푸터 · 섹션 머리)
   ============================================================ */

/* ---------- 배경 효과: 점 격자 + 글로우 + 별 ---------- */
.bg-fx { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.bg-fx::before { content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px); background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 80% 60% at 70% 15%, #000, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 80% 60% at 70% 15%, #000, transparent 75%); }
.bg-fx .glow { position: absolute; border-radius: 50%; filter: blur(100px); }
.bg-fx .g1 { width: 560px; height: 560px; right: -140px; top: -160px; background: rgba(95, 224, 192, .17); }
.bg-fx .g2 { width: 460px; height: 460px; left: -180px; top: 760px; background: rgba(84, 98, 226, .16); }
.star { position: absolute; width: 7px; height: 7px; background: #fff; opacity: 0; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: twinkle 4.8s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.6); } 50% { opacity: .85; transform: scale(1.25); } }

/* ---------- 헤더 ---------- */
.site-header { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: rgba(13, 20, 49, .78); border-bottom: 1px solid var(--line); }
.site-header .bar { display: flex; align-items: center; gap: var(--s3); height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 800; font-size: 21px; letter-spacing: -.01em; }
.brand .mini { width: 34px; height: 34px; }
.brand b { color: var(--mint); font-weight: 800; }
.nav { display: flex; gap: 4px; margin-left: var(--s3); }
.nav a { padding: 8px 14px; border-radius: var(--pill); color: var(--text-2); font-size: 14px; font-weight: 600; transition: var(--t-fast); }
.nav a:hover, .nav a.on { color: var(--text); background: var(--surface-2); }
.header-r { margin-left: auto; display: flex; align-items: center; gap: var(--s1); }
.menu-btn { display: none; }

/* ---------- 푸터 ---------- */
.site-footer { margin-top: var(--s6); border-top: 1px solid var(--line); padding: var(--s5) 0 var(--s6); }
.site-footer .row2 { display: flex; justify-content: space-between; align-items: center; gap: var(--s2) var(--s4); flex-wrap: wrap; }
.site-footer .links { display: flex; gap: var(--s3); font-size: 14px; color: var(--text-2); flex-wrap: wrap; }
.site-footer .copy { margin: 0; font-family: var(--mono); font-size: 12px; }

/* ---------- 섹션 ---------- */
.section { padding: var(--s6) 0; }
.sec-head { display: flex; align-items: end; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); }
.sec-head .kicker { font-size: 12px; color: var(--green); letter-spacing: .14em; text-transform: uppercase; }
.sec-head h2 { font-size: clamp(26px, 3.4vw, 38px); letter-spacing: -.04em; line-height: 1.2; font-weight: 800; margin-top: 6px; }
.sec-head p { color: var(--text-2); font-size: 15px; margin-top: 6px; max-width: 560px; }
.sec-head .more { font-size: 14px; color: var(--text-2); white-space: nowrap; padding-bottom: 6px; }

@media (max-width: 720px) {
  .nav { display: none; }
  .menu-btn { display: grid; }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ============================================================
   10 · 홈 전용 (히어로 · 카드뉴스 레일 · 글 목록 · 카테고리 · 태그 · 로기 소개)
   ============================================================ */

/* ---------- 히어로 ---------- */
.hero { padding: var(--s6) 0 var(--s5); }
.hero .grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--s5); align-items: center; }
.hero h1 { font-size: clamp(40px, 6vw, 72px); line-height: 1.1; letter-spacing: -.05em; font-weight: 800; margin: var(--s3) 0; }
.hero h1 .hl { color: var(--mint); }
.hero p.lead { color: var(--text-2); font-size: clamp(16px, 1.5vw, 18px); max-width: 560px; line-height: 1.75; }
.hero p.lead .s { display: block; }
.hero p.lead .ph { display: inline-block; }
.hero .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s4); }
.promise { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--line); }
.promise div { font-size: 13px; line-height: 1.5; }
.promise b { display: block; font-family: var(--font-head); font-size: 16px; color: var(--text); font-weight: 800; letter-spacing: -.02em; margin-bottom: 2px; }

/* ---------- 히어로: 로기 + 행성 우주 ---------- */
.stage { position: relative; aspect-ratio: 1 / 1; max-width: 500px; margin-left: auto; width: 100%; }
.stage .halo { position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(circle, rgba(95, 224, 192, .42), rgba(47, 184, 114, .1) 55%, transparent 72%); filter: blur(28px); }
.stage .ring { position: absolute; border-radius: 50%; border: 1px dashed var(--line-strong); }
.stage .r1 { inset: 3%; animation: spin 90s linear infinite; }
.stage .r2 { inset: 17%; border: 1px solid var(--line); animation: spin 46s linear infinite reverse; }
.stage .r3 { inset: 30%; border: 1px dotted rgba(127, 227, 168, .22); animation: spin 28s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.stage .moon { position: absolute; left: 50%; top: -9px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #f3f6f5, #aeb9b8 55%, #66727a); box-shadow: inset -3px -3px 6px rgba(0, 0, 0, .35), 0 0 14px rgba(255, 255, 255, .25); }
.stage .sat { position: absolute; right: -6px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 16px rgba(255, 229, 102, .8); }
.stage .logi { position: absolute; left: 50%; top: 50%; width: 42%; transform: translate(-50%, -50%); animation: floaty 6s ease-in-out infinite; filter: drop-shadow(0 26px 36px rgba(13, 171, 111, .38)); z-index: 5; }
@keyframes floaty { 0%, 100% { transform: translate(-50%, -50%) rotate(-2deg); } 50% { transform: translate(-50%, calc(-50% - 14px)) rotate(2deg); } }

/* 행성 — 구 + 뒤/앞 고리 */
.planet { position: absolute; z-index: 3; animation: bob 9s ease-in-out infinite; }
.planet .sp { position: absolute; inset: 0; border-radius: 50%; display: block; }
.planet.p1 { width: 21%; aspect-ratio: 1; right: 2%; top: 7%; }
.planet.p1 .sp { background: radial-gradient(circle at 30% 26%, #c6ffee 0%, #4fdcb2 30%, #14806f 68%, #08323a 100%); box-shadow: inset -16px -16px 30px rgba(0, 0, 0, .5), 0 0 44px rgba(95, 224, 192, .35); }
.planet .rb, .planet .rf { position: absolute; left: -48%; right: -48%; top: 28%; height: 44%; border-radius: 50%; border: 5px solid rgba(255, 229, 102, .62); transform: rotate(-20deg); display: block; }
.planet .rb { z-index: 0; }
.planet .sp { z-index: 1; }
.planet .rf { z-index: 2; clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%); }
.planet.p2 { width: 9%; aspect-ratio: 1; left: 5%; bottom: 17%; animation-delay: -3s; }
.planet.p2 .sp { background: radial-gradient(circle at 30% 28%, #ffd3ae 0%, #f59a62 45%, #a14e22 100%); box-shadow: inset -7px -7px 14px rgba(0, 0, 0, .4), 0 0 26px rgba(245, 154, 98, .4); }
.planet.p3 { width: 6%; aspect-ratio: 1; right: 15%; bottom: 8%; animation-delay: -5s; }
.planet.p3 .sp { background: radial-gradient(circle at 30% 28%, #d7ccff 0%, #8b7bf0 50%, #3c2f94 100%); box-shadow: inset -5px -5px 10px rgba(0, 0, 0, .4), 0 0 20px rgba(139, 123, 240, .45); }
.stage .tagfloat { position: absolute; z-index: 6; padding: 7px 13px; border-radius: var(--pill); font-size: 12px; color: var(--mint); background: rgba(20, 27, 63, .86); border: 1px solid var(--line-strong); backdrop-filter: blur(6px); animation: bob 6s ease-in-out infinite; white-space: nowrap; }
.stage .t1 { left: 0; top: 24%; }
.stage .t2 { right: 0; bottom: 30%; animation-delay: -2.4s; }
.stage .t3 { left: 17%; top: 8%; animation-delay: -1.2s; }
.stage .t4 { left: 31%; top: 93%; animation-delay: -3.6s; }
@keyframes bob { 50% { transform: translateY(-9px); } }
/* 로기 표정 애니메이션 (SVG 로기) */
.logi .eye { transform-box: fill-box; transform-origin: center; animation: blink 5s infinite; }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
.logi .ant { animation: antglow 2.4s ease-in-out infinite; }
@keyframes antglow { 50% { filter: drop-shadow(0 0 8px #7fe3a8); } }
.logi .hand-r { transform-box: fill-box; transform-origin: 20% 80%; animation: wave 3.2s ease-in-out infinite; }
@keyframes wave { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-24deg); } 80% { transform: rotate(10deg); } 90% { transform: rotate(-18deg); } }

@media (max-width: 1024px) {
  .hero .grid { grid-template-columns: 1fr; }
  .stage { margin: 0 auto; max-width: 400px; order: -1; }
  .hero { padding-top: var(--s4); }
}
@media (max-width: 720px) {
  .promise { grid-template-columns: 1fr; }
}

/* ---------- 카드뉴스 레일 (표지 이미지 + 카드뉴스 텍스트 오버레이) ---------- */
.rail { display: flex; gap: var(--s2); overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px var(--gutter) var(--s3); margin: 0 calc(var(--gutter) * -1); scrollbar-width: none; scroll-padding-inline: var(--gutter); }
.rail::-webkit-scrollbar { display: none; }
.cn { flex: 0 0 clamp(236px, 26vw, 300px); scroll-snap-align: start; position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); isolation: isolate; transition: transform .4s var(--ease), border-color var(--t-slow); background: var(--surface); }
.cn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s var(--ease); }
.cn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(13, 20, 49, .55) 0%, rgba(13, 20, 49, 0) 26%, rgba(13, 20, 49, 0) 48%, rgba(13, 20, 49, .92) 100%); }
.cn:hover { transform: translateY(-8px); border-color: var(--line-strong); }
.cn:hover img { transform: scale(1.05); }
.cn .in { position: absolute; inset: 0; padding: var(--s2); display: flex; flex-direction: column; justify-content: space-between; }
.cn h3 { font-size: clamp(21px, 2vw, 25px); line-height: 1.25; letter-spacing: -.045em; font-weight: 800; text-shadow: 0 2px 18px rgba(0, 0, 0, .5); }
.cn .src { font-size: 12px; color: rgba(255, 255, 255, .72); margin-top: 8px; }
.cn .pg { display: flex; gap: 4px; margin-top: 12px; }
.cn .pg i { width: 14px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .3); }
.cn .pg i:first-child { background: var(--mint); }
.cn .tag { align-self: flex-start; }

/* ---------- 글 목록 (행) ---------- */
.rows { display: flex; flex-direction: column; }
.row { display: grid; grid-template-columns: 96px 1fr auto; gap: var(--s3); align-items: center; padding: var(--s3) 0; border-top: 1px solid var(--line); transition: var(--t-base); }
.row:last-child { border-bottom: 1px solid var(--line); }
.row .th { width: 96px; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); position: relative; }
.row .th img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.row .th.txt { display: grid; place-items: center; padding: 8px; text-align: center; font-family: var(--font-head); font-weight: 800; font-size: 13px; line-height: 1.3; letter-spacing: -.03em; background: radial-gradient(100% 80% at 50% 0%, rgba(95, 224, 192, .22), transparent 70%), var(--surface); }
.row:hover { padding-left: 12px; background: linear-gradient(90deg, rgba(95, 224, 192, .06), transparent 60%); }
.row:hover .th img { transform: scale(1.08); }
.row .meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; margin-bottom: 4px; }
.row .meta .c { color: var(--green); }
.row h3 { font-size: clamp(18px, 2vw, 22px); line-height: 1.4; letter-spacing: -.02em; font-weight: 700; }
.row p { font-size: 14px; color: var(--text-2); line-height: 1.6; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 720px) {
  .row { grid-template-columns: 76px 1fr; gap: var(--s2); }
  .row .th { width: 76px; }
  .row .go { display: none; }
}

/* ---------- 카테고리 ---------- */
.cats { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s2); }
.cat { position: relative; padding: var(--s3); border-radius: var(--radius); min-height: 170px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; transition: var(--t-slow); }
.cat:hover { border-color: var(--mint); background: var(--surface-2); transform: translateY(-4px); }
.cat .no { font-size: 12px; }
.cat h3 { font-size: 20px; font-weight: 800; letter-spacing: -.04em; margin-top: 2px; }
.cat p { font-size: 13px; color: var(--text-2); line-height: 1.5; margin-top: 4px; }
.cat .ct { position: absolute; right: 16px; top: 14px; font-size: 12px; color: var(--mint); }
.cat svg { width: 26px; height: 26px; color: var(--green); margin-bottom: 14px; }
.cat.empty { opacity: .62; }
@media (max-width: 1024px) { .cats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .cats { grid-template-columns: repeat(2, 1fr); } }

/* ---------- 태그 ---------- */
.tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: var(--s4); }
.tags .tags-l { font-size: 12px; margin-right: 6px; letter-spacing: .08em; }
.tags a { padding: 7px 14px; border-radius: var(--pill); border: 1px solid var(--line); font-size: 13px; color: var(--text-2); transition: var(--t-fast); }
.tags a:hover { color: var(--on-accent); background: var(--mint); border-color: var(--mint); }

/* ---------- 로기 소개 ---------- */
.about { display: grid; grid-template-columns: .75fr 1.25fr; gap: var(--s5); align-items: center; padding: var(--s4); border-radius: var(--radius); background: linear-gradient(140deg, var(--surface) 0%, var(--bg-2) 100%); border: 1px solid var(--line); }
.portrait { position: relative; aspect-ratio: 1 / 1; display: grid; place-items: center; }
.portrait .pl { position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(circle, rgba(95, 224, 192, .4), rgba(47, 184, 114, .08) 60%, transparent 72%); filter: blur(10px); }
.portrait::before { content: ""; position: absolute; inset: 4%; border-radius: 50%; border: 1px dashed var(--line-strong); animation: spin 60s linear infinite; }
.portrait img { position: relative; left: 2.6%; width: 64%; animation: floaty2 5s ease-in-out infinite; filter: drop-shadow(0 22px 30px rgba(0, 0, 0, .5)); }
@keyframes floaty2 { 50% { transform: translateY(-10px) rotate(1.5deg); } }
.about .quote { font-family: var(--font-head); font-size: clamp(24px, 3vw, 36px); line-height: 1.3; letter-spacing: -.045em; font-weight: 800; }
.about .sum { color: var(--text-2); font-size: 16px; margin-top: 12px; max-width: 560px; }
.flowline { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: var(--s3) 0; counter-reset: n; }
.flowline li { position: relative; padding: 12px 12px 12px 14px; font-size: 13px; color: var(--text-2); line-height: 1.4; }
.flowline li b { display: block; font-size: 11px; color: var(--green); margin-bottom: 2px; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.facts div { padding: 14px 16px; font-size: 14px; color: var(--text-2); line-height: 1.5; }
.facts div b { display: block; font-size: 11px; font-weight: 500; letter-spacing: .08em; color: var(--green); margin-bottom: 2px; }
.facts .no b { color: var(--yellow); }
@media (max-width: 1024px) { .about { grid-template-columns: 1fr; } .portrait { max-width: 300px; margin: 0 auto; } }
@media (max-width: 720px) { .about { padding: var(--s2); } .flowline { grid-template-columns: 1fr 1fr; } .facts { grid-template-columns: 1fr; } }

/* ============================================================
   20 · 글 상세 전용 (글 머리 · 2단 · 본문 블록 · 카드뉴스 뷰어 · 목차)
   · 본문 블록(.two .cmp .steps ...)의 색은 모두 역할 토큰이라,
     밝은 면(.theme-paper)에서도 이 파일을 고치지 않는다.
   ============================================================ */

.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; background: transparent; }
.progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--green), var(--teal)); box-shadow: 0 0 12px rgba(95, 224, 192, .6); }

.post-wrap { padding-bottom: var(--s6); }
.crumb { display: flex; gap: 8px; align-items: center; font-size: 13px; padding: var(--s4) 0 var(--s3); }

/* ---------- 글 머리 ---------- */
.post-head { max-width: 860px; }
.post-head h1 { font-size: clamp(26px, 3.9vw, 46px); line-height: 1.2; letter-spacing: -.045em; font-weight: 800; margin: var(--s2) 0 var(--s2); }
.post-head h1 .hl { color: var(--mint); }
.post-lead { font-size: clamp(17px, 1.8vw, 20px); color: var(--text-2); max-width: 640px; line-height: 1.7; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: var(--s3); font-size: 12px; }
.post-meta i { width: 3px; height: 3px; border-radius: 50%; background: var(--text-3); }
.post-actions { display: flex; gap: 8px; margin-top: var(--s3); flex-wrap: wrap; }

/* ---------- 2단 ---------- */
.post-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--s6); align-items: start; margin-top: var(--s5); }
.post-side { position: sticky; top: 92px; display: flex; flex-direction: column; gap: var(--s3); }

/* ---------- 본문 ---------- */
.post-body { max-width: 776px; font-size: 17px; line-height: 1.9; color: var(--body-text); background: var(--article-bg); padding: var(--s5) clamp(24px, 5vw, 56px); border-radius: var(--radius); box-shadow: var(--article-shadow); }
.post-body section { margin-bottom: var(--s5); }
.post-body section:last-child { margin-bottom: 0; }
.post-body h2 { font-family: var(--font-head); font-size: clamp(22px, 2.6vw, 28px); line-height: 1.3; letter-spacing: -.04em; font-weight: 800; color: var(--text); margin: 0 0 var(--s2); scroll-margin-top: 96px; display: flex; align-items: baseline; gap: 12px; }
.post-body h2 span { font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--green); letter-spacing: .08em; }
.post-body h2.plain { font-size: 22px; }
.post-body p { margin: 0 0 var(--s2); }
.post-body a { color: var(--post-link); }
.post-body b { color: var(--text); font-weight: 700; }
.post-body .hl { font-style: normal; color: var(--mint); background: var(--hl-mark); }

/* 요약 */
.tldr { padding: var(--s3); border-radius: var(--radius); background: var(--tldr-bg); border: 1px solid var(--tldr-line); }
.tldr h2 { margin-bottom: var(--s2); }
.tldr ol { list-style: none; counter-reset: n; display: flex; flex-direction: column; gap: 12px; }
.tldr li { counter-increment: n; position: relative; padding-left: 40px; font-size: 16px; line-height: 1.7; }
.tldr li::before { content: counter(n); position: absolute; left: 0; top: 2px; width: 26px; height: 26px; border-radius: 50%; background: var(--green); color: var(--badge-ink); font-weight: 700; font-size: 13px; display: grid; place-items: center; }

/* 확인된 것 / 모르는 것 */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: var(--s2); }
.two > div { padding: var(--s2) var(--s3); }
.two .no { background: var(--tile-warn); }
.two b { display: block; font-size: 12px; font-weight: 500; letter-spacing: .08em; margin-bottom: 8px; }
.two .yes b { color: var(--green); } .two .no b { color: var(--yellow); }
.two ul { list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.6; }
.two li { position: relative; padding-left: 18px; }
.two li::before { content: ""; position: absolute; left: 0; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .55; }
.two .yes li::before { background: var(--green); opacity: 1; } .two .no li::before { background: var(--yellow); opacity: 1; }

/* 비교 */
.cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: var(--s2); font-size: 15px; }
.cmp-h { font-size: 12px; font-weight: 700; letter-spacing: .08em; padding: 8px 14px; border-radius: 10px; text-align: center; }
.cmp-h.a { background: var(--cmp-a-bg); color: var(--cmp-a-ink); } .cmp-h.b { background: var(--cmp-b-bg); color: var(--cmp-b-ink); }
.cmp .c { padding: 12px 16px; border-radius: 12px; line-height: 1.5; }

/* 광고 자리 (시안용 — 티스토리에서는 자동 광고) */
.ad-slot { margin: var(--s5) 0; padding: var(--s3); font-size: 12px; }
.ad-slot span { display: inline-block; margin-right: 8px; padding: 2px 8px; border-radius: 6px; background: var(--chip-fill); }

/* 순서 */
.steps { list-style: none; counter-reset: s; display: flex; flex-direction: column; gap: 12px; margin-top: var(--s2); }
.steps li { counter-increment: s; position: relative; padding: var(--s2) var(--s3) var(--s2) 76px; display: flex; flex-direction: column; gap: 2px; }
.steps li::before { content: counter(s); position: absolute; left: 22px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 12px; background: var(--accent-tint); border: 1px solid var(--accent-tint-line); color: var(--mint); font-family: var(--font-head); font-weight: 800; font-size: 18px; display: grid; place-items: center; }
.steps b { font-size: 17px; } .steps span { font-size: 15px; color: var(--text-2); }

/* 질문 → 결과 */
.qa { display: flex; flex-direction: column; }
.qa > div { display: grid; grid-template-columns: 1fr; gap: 4px; padding: var(--s2) 0; border-top: 1px solid var(--line); }
.qa > div:last-child { border-bottom: 1px solid var(--line); }
.qa b { font-size: 16px; }
.qa span { font-size: 15px; color: var(--mint); position: relative; padding-left: 22px; }
.qa span::before { content: "→"; position: absolute; left: 0; color: var(--green); }

/* 주의 */
.callout { padding: var(--s3); border-radius: var(--radius-sm); border: 1px solid var(--warn-line); background: var(--warn-bg); }
.callout b { display: block; color: var(--yellow); font-family: var(--font-head); font-size: 18px; margin-bottom: 6px; }
.callout p { margin: 0; font-size: 15.5px; line-height: 1.8; }

/* 출처 */
.source { display: flex; flex-direction: column; gap: 4px; padding: var(--s3); border-radius: var(--radius-sm); }
.source b { font-family: var(--font-head); font-size: 18px; }
.source span { font-size: 14px; color: var(--text-2); }
.source a { align-self: flex-start; margin-top: 10px; font-size: 14px; color: var(--mint); border-bottom: 1px solid var(--link-line); }
.source a:hover { border-color: var(--mint); }
.stamp { margin-top: var(--s2); font-size: 14px; }

/* 이전/다음 · 관련 글 · 댓글 */
.pn { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pn a { display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; border-radius: var(--radius-sm); transition: var(--t-base); }
.pn a.r { flex-direction: row-reverse; text-align: right; padding: 12px 12px 12px 16px; }
.pn a:hover { border-color: var(--mint); transform: translateY(-3px); }
.pn .im { flex: none; width: 48px; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.pn img { width: 100%; height: 100%; object-fit: cover; }
.pn .tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pn small { font-size: 11px; }
.pn b { font-family: var(--font-head); font-size: 15px; line-height: 1.4; letter-spacing: -.03em; }
.post-body .cmt { padding-top: var(--s4); border-top: 1px solid var(--line); }
.cmt-box { padding: var(--s3); font-size: 14px; }

/* ---------- 본문 밖: 이전/다음 · 관련 글 · 댓글 (다크 영역) ---------- */
.post-more { max-width: 776px; margin-top: var(--s5); }
.post-more h2 { font-family: var(--font-head); font-size: 18px; line-height: 1.3; letter-spacing: -.04em; font-weight: 800; color: var(--text); margin: 0 0 var(--s2); }


/* ---------- 옆: 카드뉴스 열기 버튼 + 팝업(라이트박스) ---------- */
.cn-open { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 16px 12px 12px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line-strong); text-align: left; transition: var(--t-base); }
.cn-open:hover { border-color: var(--mint); transform: translateY(-2px); }
.cn-open .im { flex: none; width: 56px; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.cn-open img { width: 100%; height: 100%; object-fit: cover; }
.cn-open .tx { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.cn-open b { font-family: var(--font-head); font-size: 16px; letter-spacing: -.03em; }
.cn-open small { font-family: var(--mono); font-size: 12px; color: var(--text-3); }
.cn-open > svg { width: 18px; height: 18px; color: var(--mint); flex: none; }
.lb { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: var(--s2); }
.lb[hidden] { display: none; }
.lb-bg { position: absolute; inset: 0; background: rgba(6, 9, 24, .82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.lb-box { position: relative; width: min(440px, 100%); }
.lb-x { position: absolute; top: -52px; right: 0; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); transition: var(--t-fast); }
.lb-x:hover { background: var(--green); color: var(--on-accent); border-color: var(--green); }
.lb-x svg { width: 18px; height: 18px; }

/* ---------- 옆: 카드뉴스 뷰어 ---------- */
.viewer { container-type: inline-size; border-radius: var(--radius); border: 1px solid var(--line-strong); background: var(--surface); padding: 12px; box-shadow: 0 30px 60px -30px rgba(95, 224, 192, .25); }
.vtrack { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: calc(var(--radius) - 8px); scrollbar-width: none; outline-offset: 4px; }
.vtrack::-webkit-scrollbar { display: none; }
.vslide { flex: 0 0 100%; scroll-snap-align: center; aspect-ratio: 4 / 5; position: relative; overflow: hidden; background: var(--bg); padding: 6cqw; display: flex; flex-direction: column; gap: 4cqw; isolation: isolate; }
.vslide::before { content: ""; position: absolute; left: 50%; top: -35%; width: 130%; aspect-ratio: 1; transform: translateX(-50%); background: radial-gradient(circle, rgba(95, 224, 192, .14), transparent 60%); z-index: -1; }
.vslide .chip.tag { align-self: flex-start; font-size: 3.1cqw; padding: .8cqw 3cqw; }
.vslide h4 { font-family: var(--font-head); font-size: 6.4cqw; line-height: 1.28; letter-spacing: -.045em; font-weight: 800; }
.vslide .hl { font-style: normal; color: var(--mint); }
.vslide.cover { padding: 0; background: var(--surface); }
.vslide.cover::before { display: none; }
.vslide.cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.vslide.cover::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(13, 20, 49, .55), rgba(13, 20, 49, 0) 26%, rgba(13, 20, 49, 0) 48%, rgba(13, 20, 49, .92)); }
.vslide .vin { position: absolute; inset: 0; padding: 5cqw; display: flex; flex-direction: column; justify-content: space-between; }
.vslide.cover h4 { font-size: 7.2cqw; text-shadow: 0 2px 18px rgba(0, 0, 0, .5); }
.vslide .s { font-size: 3.6cqw; color: rgba(255, 255, 255, .75); margin-top: 2cqw; }
.vslide .foot { margin-top: auto; font-size: 2.8cqw; line-height: 1.5; }

/* 슬라이드 속 도식: 같은 타일(.05)·비교 색 토큰을 쓴다 */
.v-cmp .c, .v-chk > div, .v-flow .st, .v-sum li { background: var(--tile-2); }
.v-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; font-size: 3.5cqw; line-height: 1.4; margin: auto 0; }
.v-cmp .h { font-weight: 700; font-size: 3.2cqw; padding: 1.4cqw 2cqw; border-radius: 2cqw; text-align: center; }
.v-cmp .h.a { background: var(--cmp-a-bg); color: var(--cmp-a-ink); } .v-cmp .h.b { background: var(--cmp-b-bg); color: var(--cmp-b-ink); }
.v-cmp .c { padding: 2.4cqw 2.6cqw; border-radius: 2.4cqw; color: var(--text-2); }
.v-chk { display: flex; flex-direction: column; gap: 2cqw; margin: auto 0; font-size: 3.6cqw; line-height: 1.4; }
.v-chk > div { display: flex; gap: 2.6cqw; align-items: flex-start; padding: 2.4cqw 3cqw; border-radius: 2.6cqw; color: var(--text-2); }
.v-chk b { color: var(--text); font-weight: 700; }
.v-chk i { flex: none; width: 4.2cqw; height: 4.2cqw; border-radius: 1.2cqw; background: var(--green); position: relative; margin-top: .4cqw; }
.v-chk i::after { content: ""; position: absolute; left: 1.2cqw; top: .5cqw; width: 1.2cqw; height: 2.3cqw; border: solid var(--on-accent); border-width: 0 .6cqw .6cqw 0; transform: rotate(45deg); }
.v-flow { display: flex; flex-direction: column; gap: 1.4cqw; margin: auto 0; font-size: 3.5cqw; line-height: 1.4; }
.v-flow .st { padding: 3cqw 3.6cqw; border-radius: 3cqw; border: 1px solid var(--line); color: var(--text-2); }
.v-flow .st b { display: block; color: var(--text); font-size: 4cqw; margin-bottom: .6cqw; }
.v-flow .ar { text-align: center; color: var(--green); font-size: 3cqw; line-height: 1; }
.v-sum { list-style: none; counter-reset: n; display: flex; flex-direction: column; gap: 2cqw; margin: auto 0 0; font-size: 3.6cqw; line-height: 1.4; }
.v-sum li { counter-increment: n; position: relative; padding: 2.4cqw 3cqw 2.4cqw 9cqw; border-radius: 2.6cqw; color: var(--text-2); }
.v-sum li::before { content: counter(n); position: absolute; left: 3cqw; top: 50%; transform: translateY(-50%); font-weight: 700; color: var(--green); }
.v-sum b { color: var(--text); }

.vbar { display: flex; align-items: center; gap: 10px; padding: 12px 4px 2px; }
.vdots { display: flex; gap: 6px; flex: 1; justify-content: center; }
.vdots button { width: 8px; height: 8px; border-radius: 4px; background: var(--line-strong); transition: var(--t-slow); padding: 0; }
.vdots button.on { width: 22px; background: var(--mint); }
.vcount { font-size: 12px; min-width: 40px; text-align: right; }

/* ---------- 목차 ---------- */
.toc { display: flex; flex-direction: column; gap: 2px; padding: var(--s2) var(--s2) var(--s2) var(--s3); border-left: 1px solid var(--line); }
.toc b { font-size: 11px; font-weight: 500; letter-spacing: .14em; margin-bottom: 8px; }
.toc a { position: relative; padding: 6px 0; font-size: 14px; transition: var(--t-fast); }
.toc a:hover { color: var(--text-2); }
.toc a.on { color: var(--mint); font-weight: 700; }
.toc a.on::before { content: ""; position: absolute; left: calc(var(--s3) * -1 - 1px); top: 50%; width: 3px; height: 18px; margin-top: -9px; border-radius: 2px; background: var(--mint); }

/* ---------- 토스트 ---------- */
.toast { position: fixed; left: 50%; bottom: 32px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; padding: 12px 20px; border-radius: var(--pill); background: var(--green); color: var(--on-accent); font-weight: 700; font-size: 14px; transition: var(--t-slow); z-index: 70; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 반응형 ---------- */
@media (max-width: 1024px) {
  .post-grid { grid-template-columns: 1fr; gap: var(--s4); }
  .post-side { position: static; order: -1; max-width: 420px; margin: 0 auto; width: 100%; }
  .toc { display: none; }
}
@media (max-width: 720px) {
  .post-body { padding: var(--s4) var(--s2); font-size: 16px; }
  .two, .cmp, .pn { grid-template-columns: 1fr; }
  .steps li { padding-left: 68px; }
  .steps li::before { left: 16px; }
  .pn a.r { flex-direction: row; text-align: left; padding: 12px 16px 12px 12px; }
}

/* ============================================================
   30 · 밝은 종이 면 (.theme-paper)
   · 본문(글 읽기)만 밝게. 색은 이 블록의 토큰으로만 바꾼다.
   · 모든 글자색은 종이 위 AA(4.5) 이상.
   ============================================================ */
.theme-paper {
  --text: #121a17; --text-2: #46544e; --text-3: #5f6b65;
  --line: #e1ddd0; --line-strong: #cfc9b9;
  --mint: #0b6b3c;     /* 강조·링크 (진한 초록) */
  --green: #0b6b3c;    /* 라벨·번호 */
  --yellow: #7a5200;   /* 주의 라벨(앰버) */
  --surface: #ffffff; --surface-2: #efece3;

  --body-text: #26332e;
  --article-bg: #f5f3ec;
  --article-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .06);
  --post-link: #0b6b3c;
  --sel-bg: #bfe6cf; --sel-ink: #0b2a1a;
  --hl-mark: linear-gradient(transparent 64%, rgba(47, 184, 114, .28) 64%);
  --tile: #ffffff; --tile-2: #ffffff; --tile-warn: #fffaf0;
  --chip-fill: rgba(0, 0, 0, .06);
  --link-line: #bfe0cd;
  --accent-tint: #dff1e7; --accent-tint-line: #bfe0cd;
  --badge-ink: #ffffff;
  --tldr-bg: #e8f4ec; --tldr-line: #bfe0cd;
  --cmp-a-bg: #f6e7b0; --cmp-a-ink: #6b4700;
  --cmp-b-bg: #d3eddd; --cmp-b-ink: #0b5c35;
  --warn-bg: #fff6d1; --warn-line: #e3c75a;
}

/* === LOGI-CODE START === 코드 블록(복사 아이콘) · 단계 안 코드 */
body .code-wrap { position: relative; margin: 10px 0 0; width: 100%; }
body .code-wrap pre, body .entry-content pre.code, body .post-body pre.code { margin: 0; padding: 14px 56px 14px 16px; border-radius: 12px; background: #0d1431; color: #d3dfdc; border: 1px solid rgba(127, 227, 168, .22); font-family: var(--mono); font-size: 14px; line-height: 1.7; overflow-x: auto; white-space: pre; text-align: left; }
body .steps li > pre.code { margin-top: 10px; }
body .code-wrap pre code, body pre.code code { font-family: inherit; font-size: inherit; background: none; padding: 0; color: inherit; border-radius: 0; }
.code-copy { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; padding: 0; border-radius: 10px; border: 1px solid rgba(127, 227, 168, .3); background: rgba(255, 255, 255, .06); color: #bfe8d0; cursor: pointer; display: grid; place-items: center; }
.code-copy:hover, .code-copy:focus-visible { background: rgba(127, 227, 168, .2); outline: none; }
.code-copy svg { width: 18px; height: 18px; }
.code-copy .ok { display: none; }
.code-copy.done { color: #7fe3a8; border-color: #7fe3a8; }
.code-copy.done .cp { display: none; }
.code-copy.done .ok { display: block; }
.code-copy.done::after { content: '복사됨'; position: absolute; right: 42px; top: 50%; transform: translateY(-50%); font-size: 12px; line-height: 1; white-space: nowrap; color: #7fe3a8; background: #0d1431; padding: 5px 8px; border-radius: 8px; }
.steps li:has(pre)::before { top: 22px; transform: none; }
/* === LOGI-CODE END === */

/* ============================================================
   40 · 티스토리 전용 (티스토리가 만드는 마크업에 시안 디자인을 입힌다)
   ============================================================ */
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.theme-paper { --on-accent: #ffffff; }

/* ---------- 카테고리 메뉴: [##_category_list_##] 마크업을 알약 메뉴로 ---------- */
.nav ul, .nav li { display: contents; list-style: none; }
.nav .c_cnt { display: none; }
.nav a.link_sub_item, .nav ul ul ul { display: none; }
.nav a { white-space: nowrap; }

/* ---------- 홈 전용 영역 (홈 1페이지에서만 보임) ---------- */
.home-only { display: none; }
#tt-body-index .home-only { display: block; }
.no-home-intro .home-only { display: none !important; }
#tt-body-index .sec-head.home-only { display: flex; }
.content-wrap { min-height: 24vh; }
#tt-body-index .list-head { display: none; }
.empty-note { padding: var(--s5) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; color: var(--text-3); font-size: 15px; }
#tt-body-index .content-wrap { padding-top: var(--s3); }

/* ---------- 목록 머리 (카테고리 · 검색 · 태그) ---------- */
.list-head { padding: var(--s6) 0 var(--s4); }
.list-head .kicker { font-size: 12px; color: var(--green); letter-spacing: .14em; text-transform: uppercase; }
.list-head h1 { font-size: clamp(27px, 4.14vw, 43px); letter-spacing: -.045em; line-height: 1.2; font-weight: 800; margin-top: 6px; }
.list-head h1 small { font-size: .5em; color: var(--text-3); font-weight: 600; letter-spacing: 0; }

/* ---------- 검색창 ---------- */
.search-pop { border-top: 1px solid var(--line); background: var(--bg-2); padding: var(--s2) 0; }
.search-pop[hidden] { display: none; }
.search-pop .wrap { display: flex; gap: 12px; }
.search-pop input { flex: 1; min-width: 0; padding: 12px 18px; border-radius: var(--pill); border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font: inherit; }
.search-pop input:focus-visible { border-color: var(--mint); outline: none; }
.search-pop .btn { padding: 12px 22px; }

/* ---------- 모바일 메뉴 ---------- */
@media (max-width: 720px) {
  .site-header.open .nav { display: flex; flex-wrap: wrap; position: absolute; left: 0; right: 0; top: 68px; margin: 0; padding: var(--s2) var(--gutter); background: var(--bg-2); border-bottom: 1px solid var(--line); }
}

/* ---------- 글 본문 (에디터가 만든 요소) ---------- */
.entry-content { word-break: keep-all; overflow-wrap: anywhere; }
.entry-content img { display: inline-block; max-width: 100%; height: auto; border-radius: 12px; }
.entry-content figure { margin: var(--s3) 0; }
.entry-content figure.imageblock { text-align: center; }
.entry-content figcaption { font-size: 13px; color: var(--text-3); margin-top: 8px; text-align: center; }
.entry-content h3 { font-family: var(--font-head); font-size: 20px; line-height: 1.4; letter-spacing: -.03em; font-weight: 800; color: var(--text); margin: var(--s4) 0 12px; }
.entry-content ul, .entry-content ol { padding-left: 1.4em; margin: 0 0 var(--s2); }
.entry-content blockquote { margin: var(--s3) 0; padding: 4px 0 4px var(--s3); border-left: 3px solid var(--green); color: var(--text-2); }
.entry-content hr { border: 0; border-top: 1px solid var(--line); margin: var(--s4) 0; }
.entry-content table { width: 100%; border-collapse: collapse; margin: var(--s3) 0; font-size: 15px; }
.entry-content th, .entry-content td { padding: 10px 12px; border: 1px solid var(--line); text-align: left; }
.entry-content pre { margin: var(--s3) 0; padding: var(--s2) var(--s3); border-radius: var(--radius-sm); background: #0d1431; color: #d3dfdc; overflow-x: auto; font-size: 14px; line-height: 1.7; }
.entry-content code { font-family: var(--mono); font-size: .92em; }
.entry-content p code, .entry-content li code { padding: 2px 6px; border-radius: 6px; background: var(--accent-tint); color: var(--text); }
.entry-content a { color: var(--post-link); text-decoration: underline; text-decoration-color: var(--link-line); text-underline-offset: 3px; }
.entry-content > :last-child { margin-bottom: 0; }

/* 카드뉴스 원본 이미지: 화면에는 숨기고 팝업 뷰어에서 쓴다 */
.cardnews { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.vslide.img { padding: 0; background: var(--surface); }
.vslide.img::before { display: none; }
.vslide.img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- 태그 (글 하단 · 태그 모음) ---------- */
.post-body .post-tags { margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--line); font-size: 0; }
.post-tags .tags-l, .post-tags a { font-size: 13px; }
.post-tags .tags-l { font-size: 12px; }
.tag-page { margin-top: 0; }

/* ---------- 페이지 이동 ---------- */
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: var(--s5) 0 var(--s6); }
.pagination a { min-width: 40px; height: 40px; padding: 0 12px; border-radius: var(--pill); border: 1px solid var(--line); display: inline-grid; place-items: center; font-family: var(--mono); font-size: 13px; color: var(--text-2); transition: var(--t-fast); }
.pagination a:hover { border-color: var(--mint); color: var(--mint); }
.pagination a.selected { background: var(--green); color: var(--on-accent); border-color: var(--green); }
.pagination .no-more-prev, .pagination .no-more-next { opacity: .35; pointer-events: none; }

/* ---------- 보호글 · 댓글 ---------- */
.protected_form fieldset { display: flex; gap: 8px; border: 0; margin-top: var(--s2); }
.protected_form input { flex: 1; min-width: 0; padding: 12px 18px; border-radius: var(--pill); border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font: inherit; }
.post-body .tt-comment-cont { max-width: none; margin: 0; padding-top: var(--s2); }
.post-body .tt-comment-cont .tt-btn_register { width: auto; height: 44px; padding: 0 22px; border: 0; border-radius: var(--pill); background: var(--green); color: var(--on-accent); font-weight: 700; }
.post-body .tt-comment-cont .tt-btn_register:hover, .post-body .tt-comment-cont .tt-btn_register:focus { background: var(--green); color: var(--on-accent); opacity: .9; }
.site-footer .links .admin { color: var(--mint); }

/* 티스토리 본문 기본 목록 스타일보다 우선: 우리 컴포넌트의 목록은 번호·점을 직접 그린다 */
.entry-content .tldr ol, .entry-content .two ul { list-style: none !important; padding-left: 0; margin: 0; }
.entry-content ol.steps { list-style: none !important; padding-left: 0; margin: var(--s2) 0 0; }

.entry-content .tldr li, .entry-content .two li, .entry-content ol.steps li { list-style: none !important; }

/* ---------- 글 하단: 티스토리 기본 프로필 박스는 숨기고, 한 줄 소개 띠로 대신한다 ---------- */
.post-body .tt_box_namecard, .post-body .tt-box-namecard { display: none !important; }
.author { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s3); padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.author .mini { flex: none; width: 36px; height: 40px; }
.author .who { flex: 1; min-width: 0; }
.author .who b { font-family: var(--font-head); font-size: 16px; color: var(--text); }
.author .who b span { color: var(--green); }
.author .who p { margin: 2px 0 0; font-size: 14px; color: var(--text-2); }
.author .follow { flex: none; padding: 8px 16px; border-radius: var(--pill); background: var(--green); color: var(--on-accent); font-size: 14px; font-weight: 700; }
.author .follow:hover { opacity: .9; }
@media (max-width: 520px) { .author { flex-wrap: wrap; } .author .follow { width: 100%; text-align: center; } }

/* ---------- 같은 카테고리의 다른 글 (티스토리 기본 박스 → 깔끔한 목록) ---------- */
.post-body .another_category { margin: var(--s5) 0 var(--s4); padding: 0; border: 0 !important; background: none !important; }
.post-body .another_category h4 { margin: 0 0 var(--s2); padding: 0; border: 0 !important; font-family: var(--font-head); font-size: 17px !important; font-weight: 700; letter-spacing: -.02em; color: var(--text) !important; }
.post-body .another_category h4 a { color: var(--green) !important; font-weight: 800; text-decoration: none; }
.post-body .another_category table { width: 100%; border: 0; border-collapse: collapse; }
.post-body .another_category tr { border-top: 1px solid var(--line-strong, var(--line)); }
.post-body .another_category tr:last-child { border-bottom: 1px solid var(--line-strong, var(--line)); }
.post-body .another_category th, .post-body .another_category td { padding: 16px 0; border: 0 !important; background: none !important; text-align: left; vertical-align: middle; }
.post-body .another_category th { width: 100%; font-size: 16.5px !important; font-weight: 600; line-height: 1.5; color: var(--text) !important; }
.post-body .another_category th a { color: var(--text) !important; font-size: 16.5px !important; font-weight: 600; text-decoration: none; }
.post-body .another_category th a:hover { color: var(--green) !important; }
.post-body .another_category th span { font-family: var(--mono); font-size: 13px !important; font-weight: 500; color: var(--text-2); }
.post-body .another_category td { padding-left: 20px; white-space: nowrap; font-family: var(--mono); font-size: 13.2px !important; font-weight: 500; color: var(--text-2) !important; text-align: right; }
@media (max-width: 520px) { .post-body .another_category th { font-size: 15.5px !important; } .post-body .another_category td { padding-left: 12px; font-size: 12.5px !important; } }

/* ---------- 카테고리 메뉴: 새 글 표시(N)는 글자 아래로 밀리지 않게 알약 오른쪽 위에 얹는다 ---------- */
.nav a { position: relative; }
.nav a img[alt="N"] { position: absolute; top: 3px; right: 3px; width: 9px; height: 9px; margin: 0; padding: 0 !important; vertical-align: top; }

/* ============================================================
   글 상세 레이아웃: 본문 100% 폭 · 위쪽(좌 캐러셀 · 우 요약) · 목차는 위에 붙는 가로 띠
   ============================================================ */
.post-grid { display: block; margin-top: var(--s3); }
.post-body { max-width: none; padding: var(--s4) clamp(20px, 3.4vw, 40px); }
.post-body section { margin-bottom: var(--s6); }
.post-body section:last-child { margin-bottom: 0; }
.post-more { max-width: none; }
.post-head { max-width: none; }
.post-lead { max-width: none; }
/* 글 머리 영역의 위아래 간격을 줄인다 */
.crumb { padding: var(--s3) 0 var(--s2); }
.post-head h1 { margin: 8px 0 12px; }
.post-meta { margin-top: var(--s2); }
.post-actions { margin-top: var(--s2); }

/* 본문 흰 패널 안: 맨 위 히어로(좌 캐러셀 · 우 요약 + 인스타 바로가기), 그 아래 본문 + 오른쪽 목차 */
.post-top { display: grid; grid-template-columns: minmax(200px, 250px) minmax(0, 1fr); gap: 20px; align-items: stretch; margin-bottom: var(--s3); }
.post-top[hidden] { display: none; }
.post-top.solo { grid-template-columns: minmax(0, 1fr); }
.post-top.solo .hero-slides { max-width: 250px; }
.hero-slides .vslide { cursor: zoom-in; }
.hero-slides .viewer { padding: 8px; }
.hero-slides .vbar { padding: 8px 2px 0; }
.hero-sum { display: flex; flex-direction: column; gap: 12px; }
.hero-sum .tldr { flex: 1; display: flex; flex-direction: column; justify-content: center; margin: 0; padding: 18px 28px; }
.hero-sum .tldr h2 { margin-bottom: 12px; font-size: 22px; }
.hero-sum .tldr ol { list-style: none !important; padding-left: 0; margin: 0; gap: 14px; }
.hero-sum .tldr li { list-style: none !important; font-size: 16.5px; line-height: 1.7; padding-left: 40px; }
.hero-ig { flex: none; display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 14px; border: 1px solid var(--line-strong, var(--line)); background: var(--surface); color: var(--text) !important; font-size: 15px; text-decoration: none !important; transition: var(--t-fast); }
.hero-ig svg { flex: none; width: 20px; height: 20px; color: var(--green); }
.hero-ig b { color: var(--green); font-weight: 700; }
.hero-ig i { margin-left: auto; font-style: normal; color: var(--green); transition: var(--t-fast); }
.hero-ig:hover { border-color: var(--green); }
.hero-ig:hover i { transform: translateX(3px); }

.post-cols { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: var(--s4); align-items: start; }
.post-cols .toc { position: sticky; top: 92px; border-left: 1px solid var(--line); }
.post-cols .toc[hidden] { display: none; }
.post-cols .toc a { color: var(--text-3); }
.post-cols .toc a:hover { color: var(--text-2); }
.post-cols .toc a.on { color: var(--green); }
.post-cols .toc a.on::before { background: var(--green); }

@media (max-width: 900px) {
  .post-top { grid-template-columns: minmax(0, 1fr); }
  .hero-slides { max-width: 320px; width: 100%; margin: 0 auto; }
  .post-cols { grid-template-columns: minmax(0, 1fr); }
  .post-cols .toc { display: none; }
}

/* ---------- 홈 "이번 주 카드뉴스": 아래 제목 영역은 검정 그라데이션, 글자 10% 작게, 강조 부분은 포인트 컬러 ---------- */
.cn::after { background: linear-gradient(to bottom, rgba(13, 20, 49, .55) 0%, rgba(13, 20, 49, 0) 24%, rgba(4, 7, 20, 0) 36%, rgba(4, 7, 20, .8) 64%, rgba(0, 0, 0, .96) 100%); }
.cn h3 { font-size: clamp(19px, 1.8vw, 22.5px); }
.cn h3 .hl { color: var(--mint); }
.cn .in { padding-bottom: 8%; }
.cn h3 { font-weight: 700; }
.cn h3 { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }