/* ============================================================
   DESIGN-spacex.md 토큰
   흑백 2색 · D-DIN 대체(Inter 700 + IBM Plex Sans KR) · 고스트 필 CTA
   그림자/블러/글로우/그라디언트 없음 — 구분은 1px 헤어라인만
   ============================================================ */
:root {
    /* colors — 브랜드 액센트 없음 */
    --sx-night: #000000;
    --sx-night-soft: #0a0a0a;
    --sx-white: #ffffff;
    --sx-white-mute: #f0f0fa;
    --sx-hairline: #3a3a3f;
    --sx-ink: #000000;

    /* type */
    --sx-display: "D-DIN-Bold", "Inter", "IBM Plex Sans KR", "Arial Narrow", Arial, Verdana, sans-serif;
    --sx-ui: "D-DIN", "Inter", "IBM Plex Sans KR", Arial, Verdana, sans-serif;
    --sx-d-xxl: 80px;
    --sx-d-xl: 60px;
    --sx-d-lg: 48px;
    --sx-card-title: 24px;
    --sx-body: 16px;
    --sx-btn: 13.008px;
    --sx-micro: 12px;
    --sx-caption: 13.008px;

    /* spacing */
    --sx-xxs: 4px; --sx-xs: 8px; --sx-sm: 12px; --sx-md: 16px;
    --sx-lg: 18px; --sx-xl: 24px; --sx-xxl: 32px; --sx-huge: 48px;

    /* radius */
    --sx-r-xs: 4px; --sx-r-sm: 8px; --sx-r-md: 16px; --sx-r-pill: 32px; --sx-r-full: 9999px;

    /* 밴드 내부 리딩 컬럼 — 원본은 1200px 고정, 여기서는 화면 비율에 맞춰 확장 */
    --sx-col: min(1600px, 92vw);
    --sx-nav-h: 68px;

    /* 한 페이지에 들어가는 카드 수 — 이 값이 곧 페이지 분할 기준 */
    --page-cols: 3;

    --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 2l10 10L8 22l-1.4-1.4L15.2 12 6.6 3.4z'/%3E%3C/svg%3E");
}

/* 페이지 분할 기준: 3장(≥1500) → 2장(961–1499) → 1장(≤960) */
@media (max-width: 1499px) { :root { --page-cols: 2; } }
@media (max-width: 960px)  { :root { --page-cols: 1; } }

/* Tablet 768–960: display 80 → 60 */
@media (max-width: 960px) {
    :root { --sx-d-xxl: 60px; --sx-d-xl: 48px; --sx-d-lg: 36px; --sx-card-title: 22px; --sx-col: min(1600px, 90vw); }
}
/* Mobile 600–767: display → 48 */
@media (max-width: 767px) {
    :root { --sx-d-xxl: 48px; --sx-d-xl: 36px; --sx-d-lg: 30px; --sx-col: calc(100vw - 2 * var(--sx-xl)); }
}
/* Small mobile <600: display → 40 */
@media (max-width: 599px) {
    :root { --sx-d-xxl: 40px; --sx-d-xl: 32px; --sx-d-lg: 26px; --sx-card-title: 20px; }
}

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: var(--sx-nav-h); }
body {
    margin: 0;
    background: var(--sx-night);
    color: var(--sx-white-mute);
    font-family: var(--sx-ui);
    font-size: var(--sx-body);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.32px;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: var(--sx-display);
    font-weight: 700;
    color: var(--sx-white);
    text-transform: uppercase;
}
h1 { font-size: var(--sx-d-xxl); line-height: 0.95; letter-spacing: 1.6px; }
h2 { font-size: var(--sx-d-xl); line-height: 1.2; letter-spacing: 1.2px; }
h3 { font-size: var(--sx-d-lg); line-height: 1.25; letter-spacing: 0.96px; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

.container {
    width: var(--sx-col);
    max-width: 100%;
    margin: 0 auto;
    padding: 0 var(--sx-xl);
    position: relative;
}
@media (max-width: 767px) { .container { padding: 0; } }

/* micro-cap — 모든 크롬 텍스트는 대문자 */
.meta {
    font-family: var(--sx-ui);
    font-size: var(--sx-micro);
    font-weight: 400;
    line-height: 2.0;
    letter-spacing: 0.96px;
    text-transform: uppercase;
    color: var(--sx-white-mute);
}
/* body-lg — 마케팅 리드 */
.lead { font-size: var(--sx-body); line-height: 1.7; letter-spacing: 0.32px; color: var(--sx-white-mute); }
/* 액센트 색이 없으므로 강조는 흰색 + 700 */
.text-accent { color: var(--sx-white); font-weight: 700; }

/* ============================================================
   풀뷰포트 밴드 — 한 섹션 = 한 화면
   ============================================================ */
section.page {
    min-height: 100svh;
    display: flex; flex-direction: column;
    padding: calc(var(--sx-nav-h) + var(--sx-huge)) 0 var(--sx-huge);
    position: relative;
}
section.page > .container {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column; justify-content: center;
}
#hero.page { min-height: calc(100svh - var(--sx-nav-h)); padding-top: var(--sx-huge); }
/* 카드 페이지는 화면 높이에 고정 → 카드 묶음이 한 화면을 정확히 채운다 */
@media (min-height: 620px) { section.page.band { height: 100svh; } }

/* 밴드 경계 — 그림자 대신 1px 헤어라인 */
section.page + section.page::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0;
    height: 1px; background: var(--sx-hairline); opacity: 0.6;
}

/* ============================================================
   Nav — 오버레이, 투명, 대문자
   ============================================================ */
#header {
    position: sticky; top: 0; z-index: 40;
    background: var(--sx-night);
}
#header .inner {
    width: var(--sx-col); max-width: 100%;
    margin: 0 auto;
    padding: var(--sx-xl) var(--sx-xxl);
    display: flex; align-items: center; justify-content: space-between; gap: var(--sx-xxl);
}
.brand {
    font-family: var(--sx-display);
    font-size: 15px; font-weight: 700;
    line-height: 0.94; letter-spacing: 1.17px;
    text-transform: uppercase;
    color: var(--sx-white);
    display: flex; align-items: center; gap: var(--sx-xs);
}
.brand .dot { display: none; }
#header nav { display: flex; gap: var(--sx-xxl); }
#header nav a {
    font-size: var(--sx-btn); font-weight: 700; line-height: 0.94;
    letter-spacing: 1.17px; text-transform: uppercase;
    color: var(--sx-white); opacity: 0.72;
    transition: opacity 0.2s;
}
@media (hover: hover) { #header nav a:hover { opacity: 1; } }

/* 햄버거 (<768px) */
.nav-toggle {
    display: none;
    width: 44px; height: 44px; padding: 0;
    background: none; border: 0; cursor: pointer;
    align-items: center; justify-content: center;
}
.nav-toggle i, .nav-toggle i::before, .nav-toggle i::after {
    content: ''; display: block; width: 22px; height: 1px; background: var(--sx-white);
}
.nav-toggle i { position: relative; }
.nav-toggle i::before { position: absolute; top: -7px; }
.nav-toggle i::after { position: absolute; top: 7px; }
.nav-toggle.is-open i { background: transparent; }
.nav-toggle.is-open i::before { top: 0; transform: rotate(45deg); }
.nav-toggle.is-open i::after { top: 0; transform: rotate(-45deg); }
#menu {
    position: fixed; inset: 0; z-index: 39;
    background: var(--sx-night);
    display: none; flex-direction: column; justify-content: center;
    gap: var(--sx-xl);
    padding: var(--sx-huge) var(--sx-xl);
}
#menu.is-open { display: flex; }
#menu a {
    font-family: var(--sx-display); font-size: var(--sx-d-lg);
    line-height: 1.25; letter-spacing: 0.96px;
    text-transform: uppercase; color: var(--sx-white);
}
@media (max-width: 767px) {
    #header nav { display: none; }
    .nav-toggle { display: flex; }
    #header .inner { padding: var(--sx-md) var(--sx-xl); }
}

/* ============================================================
   Buttons — 고스트 아웃라인 필 (밴드당 1개)
   ============================================================ */
.ds-button {
    display: inline-block;
    font-family: var(--sx-ui);
    font-size: var(--sx-btn); font-weight: 700;
    line-height: 0.94; letter-spacing: 1.17px;
    text-transform: uppercase;
    color: var(--sx-white);
    background: transparent;
    border: 1px solid var(--sx-white);
    border-radius: var(--sx-r-pill);
    padding: var(--sx-lg) var(--sx-xl);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}
@media (hover: hover) {
    .ds-button:hover { background: var(--sx-white); color: var(--sx-ink); }
}

/* 원형 고스트 아이콘 버튼 — 데크 이전/다음 */
.ds-icon-button {
    width: 48px; height: 48px; aspect-ratio: 1/1;
    display: flex; align-items: center; justify-content: center;
    padding: 0; cursor: pointer;
    color: var(--sx-white);
    background: transparent;
    border: 1px solid var(--sx-hairline);
    border-radius: var(--sx-r-full);
    transition: border-color 0.2s, background-color 0.2s, color 0.2s, opacity 0.2s;
}
.ds-icon-button[disabled] { opacity: 0.25; pointer-events: none; }
@media (hover: hover) {
    .ds-icon-button:hover { border-color: var(--sx-white); background: var(--sx-white); color: var(--sx-ink); }
}

.icon {
    display: inline-block;
    width: 16px; height: 16px;
    background-color: currentColor;
    -webkit-mask-image: var(--icon-chevron); mask-image: var(--icon-chevron);
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    vertical-align: middle;
}
.icon.is-left { transform: scaleX(-1); }

/* ============================================================
   Hero
   ============================================================ */
#hero .hero-inner { display: flex; flex-direction: column; gap: var(--sx-huge); }
#hero .hero-copy { display: flex; flex-direction: column; gap: var(--sx-xl); align-items: flex-start; }
#hero h1 { margin: var(--sx-xs) 0; }
#hero .lead { max-width: 60ch; }
#hero .actions { margin-top: var(--sx-md); }
/* 버튼 묶음 — 마무리 밴드처럼 둘 이상 놓일 때 */
.actions { display: flex; gap: var(--sx-md); flex-wrap: wrap; align-items: center; }
.closing .actions { justify-content: center; }
.hero-panel { display: flex; flex-direction: column; gap: var(--sx-xl); justify-content: flex-end; }
.hero-panel .note { font-size: var(--sx-caption); line-height: 1.5; letter-spacing: 0; opacity: 0.7; }
.hero-stats { display: flex; gap: var(--sx-huge); flex-wrap: wrap; }
.hero-stats .stat { border-top: 1px solid var(--sx-hairline); padding-top: var(--sx-sm); min-width: 120px; }
.hero-stats .stat .num {
    font-family: var(--sx-display); font-size: var(--sx-d-lg); font-weight: 700;
    line-height: 1; letter-spacing: 0.96px; color: var(--sx-white);
}
.hero-stats .stat .label { margin-top: var(--sx-xxs); }

@media (min-width: 961px) {
    #hero .hero-inner {
        display: grid;
        grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
        align-items: end;
        column-gap: var(--sx-huge);
    }
    .hero-stats { flex-direction: column; gap: var(--sx-xl); }
}

/* ============================================================
   Section head
   ============================================================ */
.section-head { display: flex; flex-direction: column; gap: var(--sx-xs); margin-bottom: var(--sx-huge); max-width: 68ch; }
.section-head .lead { margin-top: var(--sx-xs); }

/* ============================================================
   Cards — 순수 흑백, 1px 헤어라인만
   ============================================================ */
.glass-card {
    position: relative;
    background: var(--sx-night-soft);
    border: 1px solid var(--sx-hairline);
    border-radius: var(--sx-r-xs);
    padding: var(--sx-xxl);
    transition: border-color 0.2s;
}
@media (hover: hover) { .glass-card:hover { border-color: var(--sx-white); } }
.hero-panel.glass-card { background: none; border: 0; padding: 0; }

.card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sx-xl); align-items: stretch; }
.card-grid.is-single { grid-template-columns: 1fr; }
@media (max-width: 960px) { .card-grid { grid-template-columns: 1fr; } }
@media (min-width: 1280px) { #evaluate .card-grid.is-single { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }

.type-card { display: flex; flex-direction: column; gap: var(--sx-md); }
.type-card .card-top { display: flex; align-items: center; gap: var(--sx-md); }
.type-card .idx {
    flex: none;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--sx-hairline);
    border-radius: var(--sx-r-xs);
    font-size: var(--sx-micro); font-weight: 700; letter-spacing: 0.96px;
    color: var(--sx-white);
}
.type-card h3 { font-size: var(--sx-card-title); line-height: 1.1; letter-spacing: 0.96px; }
.type-card .sub {
    font-size: var(--sx-micro); font-weight: 400; line-height: 2.0;
    letter-spacing: 0.96px; text-transform: uppercase;
    color: var(--sx-white-mute); opacity: 0.7;
}
.type-card .body { display: flex; flex-direction: column; gap: var(--sx-md); }

/* 하위 리스트 — 채움 없이 헤어라인 박스 */
.sub-list { display: flex; flex-direction: column; gap: var(--sx-xs); }
.sub-list li {
    display: flex; gap: var(--sx-sm);
    padding: var(--sx-sm) var(--sx-md);
    border: 1px solid var(--sx-hairline);
    border-radius: var(--sx-r-xs);
}
.sub-list li .n { flex: none; color: var(--sx-white); font-weight: 700; }

/* 대처법 — 소프트블랙 카드 안의 순수 블랙 박스 */
.counter {
    display: flex; flex-direction: column; gap: var(--sx-xxs);
    padding: var(--sx-md);
    background: var(--sx-night);
    border: 1px solid var(--sx-hairline);
    border-radius: var(--sx-r-xs);
}
.counter .meta { color: var(--sx-white); }
.counter p { color: var(--sx-white); }

/* 예시 대구 */
.example { display: flex; flex-direction: column; gap: var(--sx-xs); }
.example .row {
    display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--sx-md); align-items: center;
    padding: var(--sx-sm) var(--sx-md);
    border: 1px solid var(--sx-hairline);
    border-radius: var(--sx-r-xs);
}
.example .row .arr { color: var(--sx-white); font-weight: 700; }
.example .row .a { opacity: 0.65; }
.example .row .b { color: var(--sx-white); }
@media (max-width: 767px) {
    .example .row { grid-template-columns: 1fr; }
    .example .row .arr { transform: rotate(90deg); width: 1em; }
}

/* 결론 배너 */
.warn {
    display: flex; flex-direction: column; gap: var(--sx-xs);
    padding: var(--sx-xxl);
    background: var(--sx-night);
    border: 1px solid var(--sx-white);
    border-radius: var(--sx-r-xs);
}

/* 마무리 밴드 */
.closing { align-items: center; text-align: center; gap: var(--sx-xl); }
.closing .q {
    font-family: var(--sx-display); font-size: var(--sx-d-xl); font-weight: 700;
    line-height: 1.2; letter-spacing: 1.2px; text-transform: uppercase; color: var(--sx-white);
}

/* ============================================================
   페이지 밴드 — 카드 N장이 한 화면을 꽉 채우고, 다음 묶음은 다음 페이지
   (가로 이동 없음. 9장 ÷ 3열 = 3페이지, ÷ 2열 = 5페이지)
   ============================================================ */
.page.band > .container { justify-content: flex-start; gap: var(--sx-xl); }
.page.band .section-head { flex: none; margin-bottom: 0; max-width: none; }
.page.band .section-head .lead { max-width: 68ch; }

.page.band .card-grid {
    flex: 1 1 auto; min-height: 260px;
    grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
    align-items: stretch;
}
.page.band .card-grid > * { min-height: 0; }

/* 카드 내부: 헤더 고정 + 본문만 스크롤 → 카드 높이가 화면에 맞춰 떨어진다 */
.page.band .type-card { overflow: hidden; }
.page.band .type-card .card-top { flex: none; }
.page.band .type-card .body {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto;
    padding-right: var(--sx-xs);
    scrollbar-width: thin; scrollbar-color: var(--sx-hairline) transparent;
    -webkit-mask-image: linear-gradient(#000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(#000 calc(100% - 24px), transparent);
}
.page.band .type-card .body::-webkit-scrollbar { width: 2px; }
.page.band .type-card .body::-webkit-scrollbar-thumb { background: var(--sx-hairline); }
.page.band .type-card .body::-webkit-scrollbar-track { background: transparent; }


/* 낮은 화면에서는 리드문을 접어 카드 높이를 확보 */
@media (max-height: 780px) { .page.band .section-head .lead { display: none; } }

/* ============================================================
   스크롤 진입 — 페이드만
   ============================================================ */
[data-appear] {
    opacity: 0;
    transition: opacity 0.6s, transform 0.6s;
    will-change: opacity, transform;
}
[data-appear].in-view { opacity: 1; transform: none; }
[data-appear="fade-up"]    { transform: translateY(16px); }
[data-appear="fade-down"]  { transform: translateY(-16px); }
[data-appear="fade-left"]  { transform: translateX(16px); }
[data-appear="fade-right"] { transform: translateX(-16px); }
[data-appear="zoom-in-up"] { transform: translateY(16px); }

@media (prefers-reduced-motion: reduce) {
    [data-appear] { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   Footer
   ============================================================ */
#footer { background: var(--sx-night); border-top: 1px solid var(--sx-hairline); }
#footer .inner {
    width: var(--sx-col); max-width: 100%;
    margin: 0 auto; padding: var(--sx-xxl) var(--sx-xl);
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sx-xl); flex-wrap: wrap;
}
#footer .legal { font-size: var(--sx-caption); line-height: 1.5; letter-spacing: 0; opacity: 0.7; }

/* ============================================================
   하위 페이지 공통 — 고마운 분들 / 한마디
   ============================================================ */
.page-hero { padding-top: calc(var(--sx-nav-h) + var(--sx-huge)); }
.page-hero .container { gap: var(--sx-xl); }
.page-hero h1 { max-width: 16ch; }
.page-hero .lead { max-width: 60ch; }
.back-link { display: inline-flex; align-items: center; gap: var(--sx-xs); }
.back-link .icon { transform: scaleX(-1); width: 12px; height: 12px; }

/* 자동 높이 밴드 (목록처럼 길이를 모르는 구간) */
section.flow {
    min-height: 0;
    padding: var(--sx-huge) 0;
}

/* ============================================================
   고마운 분들
   ============================================================ */
.thanks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--sx-xl);
}
.thanks-card { display: flex; flex-direction: column; gap: var(--sx-sm); }
.thanks-card .who {
    font-family: var(--sx-display); font-size: var(--sx-card-title); font-weight: 700;
    line-height: 1.1; letter-spacing: 0.96px; text-transform: uppercase; color: var(--sx-white);
}
.thanks-card .role { color: var(--sx-white-mute); opacity: 0.7; }
.thanks-card .word { border-top: 1px solid var(--sx-hairline); padding-top: var(--sx-sm); }

/* ============================================================
   폼 — 디자인 문서의 text-input 을 다크 캔버스용으로 반전
   ============================================================ */
.field { display: flex; flex-direction: column; gap: var(--sx-xs); }
.field > label { color: var(--sx-white); }
input[type="text"], textarea {
    width: 100%;
    font-family: var(--sx-ui);
    font-size: var(--sx-body); line-height: 1.5; letter-spacing: 0.32px;
    color: var(--sx-white);
    background: var(--sx-night);
    border: 1px solid var(--sx-hairline);
    border-radius: var(--sx-r-xs);
    padding: var(--sx-sm) var(--sx-md);
    transition: border-color 0.2s;
}
input[type="text"]:focus, textarea:focus { outline: none; border-color: var(--sx-white); }
input[type="text"]::placeholder, textarea::placeholder { color: var(--sx-white-mute); opacity: 0.35; }
textarea { min-height: 200px; resize: vertical; }

/* ============================================================
   한마디 — 작성 카드
   ============================================================ */
.composer { display: flex; flex-direction: column; gap: var(--sx-xl); }
.composer-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--sx-xl); }
@media (max-width: 767px) { .composer-row { grid-template-columns: 1fr; } }

.tabs { display: flex; gap: var(--sx-xs); border-bottom: 1px solid var(--sx-hairline); }
.tabs button {
    background: none; border: 0; cursor: pointer;
    padding: var(--sx-sm) var(--sx-md);
    font-size: var(--sx-btn); font-weight: 700; line-height: 0.94;
    letter-spacing: 1.17px; text-transform: uppercase;
    color: var(--sx-white-mute); opacity: 0.6;
    border-bottom: 1px solid transparent;
    margin-bottom: -1px;
    transition: opacity 0.2s, color 0.2s, border-color 0.2s;
}
.tabs button.is-on { color: var(--sx-white); opacity: 1; border-bottom-color: var(--sx-white); }

.toolbar { display: flex; flex-wrap: wrap; gap: var(--sx-xs); }
.toolbar button {
    background: none; cursor: pointer;
    border: 1px solid var(--sx-hairline);
    border-radius: var(--sx-r-xs);
    padding: var(--sx-xs) var(--sx-sm);
    font-size: var(--sx-micro); letter-spacing: 0.96px; text-transform: uppercase;
    color: var(--sx-white-mute);
    transition: border-color 0.2s, color 0.2s;
}
@media (hover: hover) { .toolbar button:hover { border-color: var(--sx-white); color: var(--sx-white); } }

.dropzone {
    border: 1px dashed var(--sx-hairline);
    border-radius: var(--sx-r-xs);
    padding: var(--sx-xxl) var(--sx-md);
    text-align: center;
    color: var(--sx-white-mute); opacity: 0.7;
    transition: border-color 0.2s, opacity 0.2s;
}
@media (hover: hover) { .dropzone:hover { border-color: var(--sx-white); opacity: 1; } }

.preview-pane {
    min-height: 200px;
    border: 1px solid var(--sx-hairline);
    border-radius: var(--sx-r-xs);
    padding: var(--sx-md);
    background: var(--sx-night);
}
.composer-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sx-md); flex-wrap: wrap; }
.hint { color: var(--sx-white-mute); opacity: 0.55; font-size: var(--sx-caption); letter-spacing: 0; }
.ds-button[disabled] { opacity: 0.35; pointer-events: none; }

/* ============================================================
   한마디 — 남겨진 글
   ============================================================ */
.entries { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--sx-xl); }
.entry { display: flex; flex-direction: column; gap: var(--sx-sm); }
.entry-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sx-md); }
.entry-head .who {
    font-family: var(--sx-display); font-size: var(--sx-body); font-weight: 700;
    letter-spacing: 0.96px; text-transform: uppercase; color: var(--sx-white);
}
.entry-body > * + * { margin-top: var(--sx-sm); }
.entry-body img { max-width: 100%; height: auto; border-radius: var(--sx-r-xs); display: block; }
.entry-body a { text-decoration: underline; color: var(--sx-white); }
.entry-body code {
    font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.9em;
    border: 1px solid var(--sx-hairline); border-radius: var(--sx-r-xs); padding: 1px 5px;
}
.entry-body pre {
    background: var(--sx-night); border: 1px solid var(--sx-hairline);
    border-radius: var(--sx-r-xs); padding: var(--sx-md); overflow-x: auto;
}
.entry-body pre code { border: 0; padding: 0; }
.entry-body blockquote {
    margin: 0; padding-left: var(--sx-md);
    border-left: 1px solid var(--sx-hairline); color: var(--sx-white-mute); opacity: 0.8;
}
.entry-body ul { list-style: disc; padding-left: 1.2em; }
.entry-body ol { list-style: decimal; padding-left: 1.4em; }
.entry-body h1, .entry-body h2, .entry-body h3 {
    font-size: var(--sx-card-title); line-height: 1.2; letter-spacing: 0.96px;
}

/* 상태 배지 */
.badge {
    display: inline-block;
    border: 1px solid var(--sx-hairline); border-radius: var(--sx-r-pill);
    padding: 2px 10px;
    font-size: var(--sx-micro); letter-spacing: 0.96px; text-transform: uppercase;
    color: var(--sx-white-mute);
}

/* 허니팟 — 사람 눈에는 안 보이고 봇만 채운다 */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
/* 드롭존 드래그 중 */
.dropzone.is-over { border-color: var(--sx-white); opacity: 1; }
.dropzone img { display: block; max-width: 100%; }