/* ==========================================================================
   김낙준 포트폴리오 — EDITORIAL INDEX
   밝은 종이 바탕. 배경 장식 없음. 타이포와 여백, 얇은 괘선이 화면을 만든다.

   설계 원칙
     · 목록은 카드 그리드가 아니라 '작품집 목차'다. 번호 → 제목 → 메타.
     · 장식(그라디언트 블롭·큰 그림자)을 쓰지 않는다. 위계는 크기 대비로 만든다.
     · 한글 본문은 산세리프, 숫자·라벨은 모노스페이스. 이 대비가 유일한 장식이다.
     · 색은 카테고리 강조색으로만 들어온다.

   명암비 (#FBF9FF 바탕 기준)
     본문  --text      14.9 : 1
     보조  --text-dim   7.8 : 1
     흐림  --text-mute  6.6 : 1
     링크  --accent     5.4 : 1

   구성
     1. 토큰
     2. 리셋 / 기본
     3. 표면(유리) 기본형
     4. 내비게이션
     5. 히어로 / 섹션
     6. 인라인 카테고리 필터
     7. 인덱스 목록 + 커서 썸네일
     8. 게시물 상세
     9. 마크다운 본문
    10. 버튼 / 폼
    11. 관리자
    12. 피드백
    13. 유틸리티
    14. 반응형
    15. 모션 최소화
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 토큰
   -------------------------------------------------------------------------- */

:root {
    /* 바탕 */
    --bg: #FBF9FF;
    --bg-2: #F4F0FB;
    --surface: #FFFFFF;
    --surface-2: #F6F2FD;

    /* 표면 */
    --glass: rgba(255, 255, 255, 0.82);
    --glass-border: rgba(124, 92, 200, 0.16);
    --glass-hi: rgba(255, 255, 255, 0.95);
    --blur: blur(14px) saturate(130%);

    /* 괘선 — 이 디자인의 뼈대 */
    --rule: rgba(42, 33, 64, 0.12);
    --rule-strong: rgba(42, 33, 64, 0.26);

    /* 글자 */
    --text: #2A2140;
    --text-dim: #584A75;
    --text-mute: #635578;

    /* 강조 */
    --accent: #6D48F0;
    --accent-2: #E85BA0;
    --accent-3: #1F9E8B;
    --accent-ink: #FFFFFF;

    /* 그라디언트 — 아주 제한적으로만 쓴다 */
    --grad-hero: linear-gradient(100deg, #8B6BFF 0%, #C56FE8 45%, #F072B8 100%);
    --grad-accent: linear-gradient(135deg, #8B6BFF 0%, #E85BA0 100%);

    /* 그림자 — 떠 있는 것(썸네일·모달·토스트)에만 */
    --shadow:
        0 1px 2px rgba(76, 46, 140, 0.05),
        0 4px 14px -6px rgba(76, 46, 140, 0.14);
    --shadow-lg:
        0 2px 8px rgba(76, 46, 140, 0.07),
        0 18px 40px -16px rgba(76, 46, 140, 0.26);
    --ring:
        0 0 0 2px var(--bg),
        0 0 0 4px rgba(109, 72, 240, 0.6);

    /* 형태 */
    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 20px;

    /* 타이포 — 디스플레이와 본문의 낙차를 크게 둔다 */
    --step--2: clamp(0.68rem, 0.66rem + 0.10vw, 0.74rem);
    --step--1: clamp(0.78rem, 0.75rem + 0.15vw, 0.86rem);
    --step-0: clamp(0.94rem, 0.90rem + 0.20vw, 1.02rem);
    --step-1: clamp(1.06rem, 0.99rem + 0.34vw, 1.26rem);
    --step-2: clamp(1.24rem, 1.08rem + 0.76vw, 1.72rem);
    --step-3: clamp(1.50rem, 1.20rem + 1.44vw, 2.44rem);
    --step-4: clamp(1.95rem, 1.35rem + 2.90vw, 3.60rem);
    --step-5: clamp(2.80rem, 1.30rem + 6.60vw, 6.40rem);

    /* 간격 */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 18px;
    --space-5: 26px;
    --space-6: 40px;
    --space-7: 64px;
    --space-8: 104px;

    /* 모션 */
    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --dur: 220ms;

    /* 카테고리 강조색. JS 가 인라인으로 덮어쓴다. */
    --card-accent: var(--accent);

    /* 글꼴 — fonts.css 에서 자체 호스팅한다.
       제목은 주아(Jua), 본문은 고운돋움(Gowun Dodum). 둘 다 둥근 한글 서체다.
       숫자·라벨은 그대로 모노스페이스를 써서 대비를 남긴다. */
    --font-display: Jua, "Gowun Dodum", -apple-system, BlinkMacSystemFont,
                    "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    --font: "Gowun Dodum", -apple-system, BlinkMacSystemFont, "Segoe UI", Pretendard,
            "Apple SD Gothic Neo", "Malgun Gothic", Roboto, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;

    color-scheme: light;
}

/* --------------------------------------------------------------------------
   2. 리셋 / 기본
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font);
    font-size: var(--step-0);
    line-height: 1.75;
    color: var(--text);
    /* 장식 없는 종이. 위쪽만 아주 미세하게 밝다. */
    background-color: var(--bg);
    background-image: linear-gradient(180deg, #FFFFFF 0%, var(--bg) 42%);
    background-repeat: no-repeat;
    background-size: 100% 60vh;
    background-attachment: fixed;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img,
svg,
video {
    max-width: 100%;
    display: block;
}

a {
    color: var(--accent);
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: var(--font-display);
    line-height: 1.32;
    letter-spacing: -0.01em;
    /* 주아는 400 한 가지뿐이다. 더 굵게 지정하면 합성 굵기라 뭉개진다. */
    font-weight: 400;
}

p {
    margin: 0;
}

ol, ul {
    margin: 0;
    padding: 0;
}

em {
    font-style: normal;
    color: var(--accent-3);
    font-weight: 600;
}

::selection {
    background: rgba(232, 91, 160, 0.22);
    color: var(--text);
}

:focus-visible {
    outline: none;
    box-shadow: var(--ring);
    border-radius: var(--radius-sm);
}

* {
    scrollbar-width: thin;
    scrollbar-color: rgba(124, 92, 200, 0.3) transparent;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-thumb {
    background: rgba(124, 92, 200, 0.24);
    border-radius: 99px;
    border: 2px solid transparent;
    background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
    background: rgba(124, 92, 200, 0.42);
    background-clip: content-box;
}

/* --------------------------------------------------------------------------
   3. 표면(유리) 기본형 — 소개 패널·모달·관리자 카드에만 쓴다
   -------------------------------------------------------------------------- */

.glass {
    position: relative;
    background-color: var(--glass);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .glass {
        background-color: var(--surface);
    }
}

/* --------------------------------------------------------------------------
   4. 내비게이션 — 떠 있는 알약이 아니라 얇은 괘선 한 줄
   -------------------------------------------------------------------------- */

.nav {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    width: min(1080px, calc(100% - 2 * var(--space-5)));
    margin: 0 auto;
    padding: var(--space-4) 0;
    border-radius: 0;
    border-bottom: 1px solid var(--rule);
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* .nav 는 index.html 에서 .glass 도 함께 갖는다. 여기서는 그 장식을 지운다. */
.nav.glass {
    border: 0;
    border-bottom: 1px solid var(--rule);
    border-radius: 0;
}

.nav__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-weight: 700;
    font-size: var(--step-0);
    letter-spacing: -0.01em;
    color: var(--text);
}

.nav__mark {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--grad-accent);
    flex: none;
}

.nav__links {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex-wrap: wrap;
}

.nav__link {
    position: relative;
    padding: var(--space-1) 0;
    color: var(--text-mute);
    font-size: var(--step--1);
    font-weight: 600;
    transition: color var(--dur) var(--ease);
}

.nav__link:hover {
    color: var(--text);
}

.nav__link.is-active {
    color: var(--text);
}

/* 활성 항목에만 얇은 밑줄 */
.nav__link.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--grad-accent);
}

.nav__admin {
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-mute);
    font-size: var(--step--1);
    font-weight: 600;
    font-family: var(--font-mono);
    cursor: pointer;
    transition: color var(--dur) var(--ease);
}

.nav__admin:hover {
    color: var(--accent);
}

/* --------------------------------------------------------------------------
   5. 히어로 / 섹션
   -------------------------------------------------------------------------- */

.shell {
    position: relative;
    z-index: 1;
    width: min(1080px, calc(100% - 2 * var(--space-5)));
    margin: 0 auto;
    padding: var(--space-8) 0;
    display: block;
}

.hero {
    padding: 0 0 var(--space-6);
}

/* 인덱스 구조에서는 쓰지 않지만, 다른 화면이 쓸 수 있어 남겨 둔다. */
.hero__eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--text-mute);
    margin-bottom: var(--space-5);
}

/* 화면에서 가장 큰 요소. 여기서 위계가 결정된다. */
.hero__title {
    font-size: var(--step-5);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.12;
    max-width: min(100%, 12em);
    word-break: keep-all;
    color: var(--text);
}

.hero__grad {
    color: var(--accent);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .hero__grad {
        background: var(--grad-hero);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}

.hero__sub {
    margin-top: var(--space-5);
    max-width: min(100%, 30em);
    word-break: keep-all;
    font-size: var(--step-1);
    color: var(--text-dim);
    line-height: 1.7;
}

/* 통계는 배지가 아니라 모노스페이스 한 줄 */
.hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--rule);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    color: var(--text-mute);
}

.hero__stat b {
    color: var(--text);
    font-weight: 700;
}

.section {
    margin-top: var(--space-7);
}

.section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.section__title {
    font-size: var(--step-2);
    letter-spacing: -0.03em;
    color: var(--text);
}

.section__sub {
    font-size: var(--step--1);
    color: var(--text-mute);
}

/* --------------------------------------------------------------------------
   7. 인덱스 목록 + 커서 썸네일
   -------------------------------------------------------------------------- */

/* 이미지가 없는 글의 자리 — 카테고리 색으로 옅게 물든 판 + 제목 첫 글자 */
.idx__thumb--none {
    display: grid;
    place-items: center;
    background-color: var(--surface-2);
    background-image:
        linear-gradient(140deg,
            color-mix(in srgb, var(--card-accent) 18%, transparent) 0%,
            transparent 62%);
    color: color-mix(in srgb, var(--card-accent) 45%, var(--text-mute));
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 26px;
    line-height: 1;
}

@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    .idx__thumb--none {
        background-image: none;
        color: var(--text-mute);
    }
}

/* 인덱스 행의 썸네일 */
.idx__thumb {
    margin: 0;
    width: 132px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius-sm);
    border: 1px solid var(--rule);
    background: var(--surface-2);
    flex: none;
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.idx__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.idx:hover .idx__thumb {
    transform: scale(1.05);
    border-color: color-mix(in srgb, var(--card-accent) 45%, var(--rule));
}

/* 카테고리 묶음 — 분야 제목 + 그 아래 목록 */
.group {
    margin-bottom: var(--space-7);
}

.group:last-child {
    margin-bottom: 0;
}

.group__title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    font-size: var(--step-1);
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--text);
}

.group__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--card-accent);
    flex: none;
}

.group__count {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    font-weight: 700;
    color: var(--text-mute);
}

.index {
    list-style: none;
    border-top: 1px solid var(--rule-strong);
}

.index__item {
    border-bottom: 1px solid var(--rule);
}

/* 행 하나. 번호 / 본문 / 메타 세 칸 그리드. */
.idx {
    display: grid;
    /* 번호 · 썸네일 · 본문 · 날짜 */
    grid-template-columns: 2.4rem auto 1fr auto;
    align-items: center;
    gap: var(--space-5);
    /* 썸네일이 잘 보이도록 위아래를 넉넉히 둔다 */
    padding: var(--space-5) 0;
    color: var(--text);
    transition: padding-left var(--dur) var(--ease), color var(--dur) var(--ease);
}

.idx:hover {
    /* 행 전체가 살짝 안으로 밀려 들어온다 */
    padding-left: var(--space-4);
}

.idx__no {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    font-weight: 700;
    color: var(--text-mute);
    letter-spacing: 0.02em;
    align-self: center;
    transition: color var(--dur) var(--ease);
}

.idx:hover .idx__no {
    color: var(--card-accent);
}

.idx__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.idx__title {
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.4;
    word-break: keep-all;
    color: var(--text);
}

/* 요약은 항상 보여 준다.
   호버로 높이를 바꾸면 아래 행들이 커서 밑에서 밀려 목록을 훑기가 어려워진다. */
.idx__sum {
    font-size: var(--step--1);
    color: var(--text-mute);
    line-height: 1.65;
    word-break: keep-all;
    max-width: 46em;
    transition: color var(--dur) var(--ease);
}

.idx:hover .idx__sum {
    color: var(--text-dim);
}

.idx__meta {
    display: flex;
    align-items: baseline;
    gap: var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    color: var(--text-mute);
    white-space: nowrap;
}

.idx__cat {
    color: var(--card-accent);
    font-weight: 700;
}

.idx__date {
    font-variant-numeric: tabular-nums;
}

/* 로딩 스켈레톤 */
.index__item--skeleton .idx {
    pointer-events: none;
}

.index__item--skeleton .idx__no,
.index__item--skeleton .idx__title,
.index__item--skeleton .idx__meta {
    display: block;
    border-radius: 4px;
    background: linear-gradient(100deg,
        rgba(42, 33, 64, 0.05) 30%,
        rgba(42, 33, 64, 0.10) 50%,
        rgba(42, 33, 64, 0.05) 70%);
    background-size: 220% 100%;
    animation: shimmer 1.4s linear infinite;
    color: transparent;
}

.index__item--skeleton .idx__no { height: 12px; }
.index__item--skeleton .idx__title { height: 20px; width: 58%; }
.index__item--skeleton .idx__meta { height: 12px; width: 88px; }

.index__item--skeleton .idx__thumb {
    background: linear-gradient(100deg,
        rgba(42, 33, 64, 0.05) 30%,
        rgba(42, 33, 64, 0.10) 50%,
        rgba(42, 33, 64, 0.05) 70%);
    background-size: 220% 100%;
    animation: shimmer 1.4s linear infinite;
}

@keyframes shimmer {
    from { background-position: 140% 0; }
    to   { background-position: -60% 0; }
}

#home-more {
    margin-top: var(--space-6);
    display: flex;
    justify-content: center;
}

#home-state:not(:empty) {
    margin-top: var(--space-5);
}

/* --------------------------------------------------------------------------
   8. 게시물 상세
   -------------------------------------------------------------------------- */

.post {
    max-width: 100%;
}

/* 소개 화면처럼 본문이 패널 안에 바로 들어가는 경우 */
.glass.post {
    max-width: min(100%, 46em);
    padding: clamp(var(--space-5), 3.5vw, var(--space-7));
}

.glass.post .post__body {
    max-width: 100%;
}

.post__head {
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--rule);
}

.post__cat {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--card-accent);
}

.post__title {
    margin-top: var(--space-4);
    font-size: var(--step-4);
    letter-spacing: -0.04em;
    line-height: 1.1;
    max-width: min(100%, 15em);
    word-break: keep-all;
    color: var(--text);
}

.post__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    margin-top: var(--space-5);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    color: var(--text-mute);
}

.post__nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-7);
    padding-top: var(--space-5);
    border-top: 1px solid var(--rule);
}

/* --------------------------------------------------------------------------
   9. 마크다운 본문
   -------------------------------------------------------------------------- */

.post__body {
    max-width: min(100%, 36em);
    font-size: var(--step-0);
    line-height: 1.95;
    color: var(--text-dim);
    word-break: keep-all;
}

.post__body > *:first-child {
    margin-top: 0;
}

.md-h1, .md-h2, .md-h3, .md-h4, .md-h5, .md-h6 {
    color: var(--text);
    margin: var(--space-7) 0 var(--space-3);
    scroll-margin-top: 96px;
    letter-spacing: -0.03em;
}

.md-h1 { font-size: var(--step-3); }
.md-h2 { font-size: var(--step-2); }
.md-h3 { font-size: var(--step-1); }
.md-h4 { font-size: var(--step-0); }
.md-h5 { font-size: var(--step-0); color: var(--text-dim); }

.md-h6 {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    color: var(--text-mute);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.md-p {
    margin: var(--space-4) 0;
}

.md-ul,
.md-ol {
    margin: var(--space-4) 0;
    padding-left: 1.5em;
}

.md-ul { list-style: none; }
.md-ol { list-style: decimal; }

.md-li {
    margin: var(--space-2) 0;
    position: relative;
}

/* 불릿은 짧은 선 하나 — 목차 디자인과 같은 어휘 */
.md-ul > .md-li::before {
    content: "";
    position: absolute;
    left: -1.4em;
    top: 0.92em;
    width: 12px;
    height: 1.5px;
    background: var(--accent);
}

.md-ol::marker,
.md-ol > .md-li::marker {
    color: var(--text-mute);
    font-family: var(--font-mono);
    font-size: 0.9em;
}

.md-ul .md-ul,
.md-ul .md-ol,
.md-ol .md-ul,
.md-ol .md-ol {
    margin: var(--space-2) 0;
}

.md-quote {
    margin: var(--space-6) 0;
    padding: 0 0 0 var(--space-5);
    border-left: 2px solid var(--accent-2);
    color: var(--text);
    font-size: var(--step-1);
    line-height: 1.7;
}

.md-quote > *:first-child { margin-top: 0; }
.md-quote > *:last-child { margin-bottom: 0; }

.md-code {
    margin: var(--space-5) 0;
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-sm);
    border: 1px solid var(--rule);
    background: #FAF8FE;
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: var(--step--1);
    line-height: 1.7;
    color: #3B2E5A;
}

.md-code code {
    font: inherit;
    color: inherit;
    background: none;
    padding: 0;
    white-space: pre;
}

.md-inline-code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    padding: 0.12em 0.4em;
    border-radius: 5px;
    background: rgba(124, 92, 200, 0.10);
    color: #5B3FC7;
    white-space: break-spaces;
}

.md-hr {
    margin: var(--space-7) 0;
    border: 0;
    height: 1px;
    background: var(--rule);
}

.md-link {
    color: var(--text);
    font-weight: 600;
    box-shadow: inset 0 -2px 0 rgba(109, 72, 240, 0.35);
    transition: box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
}

.md-link:hover {
    color: var(--accent);
    box-shadow: inset 0 -2px 0 var(--accent);
}

/* 이미지 — 기본은 본문 폭 100%.
   alt 뒤에 크기 지시자를 붙여 조절한다:  ![캡션|half](주소)
     small  약 260px      half  절반(연속 2장은 나란히)
     wide   본문보다 넓게  숫자  그 픽셀 폭 (예: |320)  */
.md-figure {
    margin: var(--space-6) 0;
}

.md-img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
    border: 1px solid var(--rule);
    background: var(--surface-2);
}

/* 캡션 — alt 텍스트가 있으면 이미지 아래에 붙는다 */
.md-cap {
    margin-top: var(--space-2);
    font-size: var(--step--2);
    color: var(--text-mute);
    line-height: 1.55;
}

/* 유튜브 임베드 — 16:9 비율을 유지한다 */
.md-embed {
    margin: var(--space-6) 0;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--rule);
    background: #000;
}

.md-embed__frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.md-figure--small {
    width: min(100%, 260px);
}

.md-figure--fixed {
    width: min(100%, var(--md-img-w, 100%));
}

/* 연속해서 두 장을 쓰면 나란히 놓인다 (inline-block 사이 공백만큼 뺀다) */
.md-figure--half {
    display: inline-block;
    vertical-align: top;
    width: min(100%, calc(50% - 5px));
}

/* 본문 단(36em)보다 넓게. 화면이 좁으면 알아서 본문 폭으로 줄어든다. */
.md-figure--wide {
    width: min(calc(100vw - 2 * var(--space-5)), 46em);
    max-width: none;
    margin-left: 50%;
    transform: translateX(-50%);
}

.post__body strong { color: var(--text); font-weight: 700; }
.post__body em { color: var(--accent-3); font-style: italic; font-weight: 600; }
.post__body del { color: var(--text-mute); }

.post__body table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-5) 0;
    font-size: var(--step--1);
}

.post__body th,
.post__body td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--rule);
    text-align: left;
}

/* --------------------------------------------------------------------------
   10. 버튼 / 폼
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-radius: 99px;
    border: 1px solid var(--rule-strong);
    background: transparent;
    color: var(--text);
    font-size: var(--step--1);
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
                color var(--dur) var(--ease);
}

.btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(109, 72, 240, 0.06);
}

.btn--primary {
    background: var(--text);
    border-color: var(--text);
    color: var(--accent-ink);
}

.btn--primary:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
}

.btn--ghost {
    border-color: var(--rule);
}

.btn--danger {
    border-color: rgba(224, 74, 106, 0.4);
    color: #C3324F;
}

.btn--danger:hover {
    border-color: #C3324F;
    background: rgba(224, 74, 106, 0.08);
    color: #A9203C;
}

.btn--sm {
    padding: var(--space-1) var(--space-4);
}

.btn:disabled,
.btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* 폼 */

.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.field__label {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-mute);
}

.field__hint {
    font-size: var(--step--1);
    color: var(--text-mute);
    line-height: 1.6;
}

.field__hint.is-error {
    color: #C3324F;
}

.input,
.textarea,
.select {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    border: 1px solid var(--rule);
    background: var(--surface);
    color: var(--text);
    font-size: var(--step-0);
    transition: border-color var(--dur) var(--ease);
}

.input::placeholder,
.textarea::placeholder {
    color: var(--text-mute);
    opacity: 0.7;
}

.input:hover,
.textarea:hover,
.select:hover {
    border-color: var(--rule-strong);
}

.input:focus,
.textarea:focus,
.select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--ring);
}

.input[type="color"] {
    padding: var(--space-1);
    height: 44px;
    cursor: pointer;
}

.input[type="number"] {
    font-family: var(--font-mono);
}

.textarea {
    min-height: 420px;
    flex: 1 1 auto;
    max-height: 70vh;
    resize: vertical;
    font-family: var(--font-mono);
    font-size: var(--step--1);
    line-height: 1.75;
    white-space: pre-wrap;
    tab-size: 4;
}

.select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: var(--space-6);
    background-image:
        linear-gradient(45deg, transparent 50%, var(--text-dim) 50%),
        linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
    background-position:
        calc(100% - 20px) calc(50% + 2px),
        calc(100% - 14px) calc(50% + 2px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    cursor: pointer;
}

.select option {
    background: var(--surface);
    color: var(--text);
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: flex-end;
}

.form-row > * {
    flex: 1 1 140px;
    min-width: 0;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

/* --------------------------------------------------------------------------
   11. 관리자
   -------------------------------------------------------------------------- */

.admin {
    padding: var(--space-6);
    max-width: 440px;
    margin: var(--space-8) auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.admin__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--rule-strong);
}

.admin__title {
    font-size: var(--step-2);
    letter-spacing: -0.03em;
    color: var(--text);
}

.editor {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-5);
}

.editor__panes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    align-items: stretch;
}

.editor__pane {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.editor__preview {
    min-height: 420px;
    max-height: 70vh;
    overflow-y: auto;
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-sm);
    border: 1px solid var(--rule);
    background: var(--surface);
    max-width: none;
}

.dropzone {
    display: grid;
    place-items: center;
    gap: var(--space-1);
    padding: var(--space-6) var(--space-4);
    border-radius: var(--radius-sm);
    border: 1px dashed var(--rule-strong);
    background: transparent;
    color: var(--text-mute);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease),
                color var(--dur) var(--ease);
}

.dropzone:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.dropzone.is-over {
    border-color: var(--accent);
    border-style: solid;
    background: rgba(109, 72, 240, 0.06);
    color: var(--accent);
}

.dropzone[data-progress]::after {
    content: attr(data-progress) " 업로드 중…";
    font-family: var(--font-mono);
    font-size: var(--step--1);
    color: var(--accent);
}

.thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--space-3);
}

.thumb {
    position: relative;
    margin: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--rule);
    background: var(--surface);
}

.thumb.is-cover {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}

.thumb.is-cover::before {
    content: "대표";
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    z-index: 2;
    padding: 1px var(--space-3);
    border-radius: 99px;
    background: var(--accent);
    color: var(--accent-ink);
    font-family: var(--font-mono);
    font-size: var(--step--2);
    font-weight: 700;
}

.thumb__img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.thumb__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    padding: var(--space-2);
    border-top: 1px solid var(--rule);
}

.thumb__actions .btn {
    flex: 1 1 auto;
    padding: 2px var(--space-2);
}

.rows {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--rule);
}

/* 관리자 목록도 같은 어휘: 카드가 아니라 괘선으로 나뉜 행 */
.row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--rule);
    transition: padding-left var(--dur) var(--ease);
}

.row:hover {
    padding-left: var(--space-3);
}

.row.glass {
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
}

.row.glass:hover {
    padding-left: var(--space-4);
}

.row__main {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1 1 320px;
    min-width: 0;
}

.row__side {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* 관리자 목록이 쓰는 카드 계열 클래스 (홈은 더 이상 쓰지 않는다) */
.card__cat {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--step--2);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--card-accent);
}

.card__title {
    font-size: var(--step-0);
    font-weight: 700;
    color: var(--text);
    word-break: keep-all;
}

.card__meta {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    color: var(--text-mute);
}

.cat__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    flex: none;
}

/* --------------------------------------------------------------------------
   12. 피드백
   -------------------------------------------------------------------------- */

.progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 90;
    pointer-events: none;
    opacity: 0;
    transition: opacity 200ms linear;
}

.progress > span {
    display: block;
    height: 100%;
    width: 40%;
    background: var(--grad-accent);
    transform: translateX(-100%);
}

.progress.is-busy {
    opacity: 1;
}

.progress.is-busy > span {
    animation: progress-slide 1.1s var(--ease) infinite;
}

@keyframes progress-slide {
    from { transform: translateX(-100%); }
    to   { transform: translateX(350%); }
}

.toast-root {
    position: fixed;
    right: var(--space-5);
    bottom: var(--space-5);
    z-index: 80;
    display: flex;
    flex-direction: column-reverse;
    gap: var(--space-2);
    pointer-events: none;
    max-width: min(380px, calc(100vw - 2 * var(--space-5)));
}

.toast {
    pointer-events: auto;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    border: 1px solid var(--rule);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    color: var(--text);
    font-size: var(--step--1);
    font-weight: 600;
    line-height: 1.55;
    border-left: 3px solid var(--text-mute);
    animation: toast-in 220ms var(--ease);
}

.toast--ok {
    border-left-color: var(--accent-3);
}

.toast--error {
    border-left-color: #E04A6A;
}

@keyframes toast-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: var(--space-4);
    background: rgba(42, 33, 64, 0.32);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    animation: fade-in 160ms var(--ease);
}

.modal__card {
    width: min(420px, 100%);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    background-color: var(--surface);
    border: 1px solid var(--rule);
    box-shadow: var(--shadow-lg);
    animation: modal-in 220ms var(--ease);
}

.modal__msg {
    color: var(--text);
    font-size: var(--step-0);
    line-height: 1.65;
}

.modal__msg:first-child {
    font-weight: 700;
    font-size: var(--step-1);
}

.modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    flex-wrap: wrap;
}

@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes modal-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-8) 0;
    text-align: left;
    color: var(--text-dim);
}

.empty__icon {
    font-family: var(--font-mono);
    font-size: var(--step-1);
    line-height: 1;
    color: var(--text-mute);
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 1px var(--space-3);
    border-radius: 99px;
    border: 1px solid var(--rule);
    font-family: var(--font-mono);
    font-size: var(--step--2);
    color: var(--text-mute);
}

.tagline {
    font-size: var(--step--1);
    color: var(--text-mute);
    line-height: 1.65;
}

.foot {
    position: relative;
    z-index: 1;
    width: min(1080px, calc(100% - 2 * var(--space-5)));
    margin: 0 auto var(--space-7);
    padding: var(--space-5) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    border-radius: 0;
    border-top: 1px solid var(--rule);
    background: none;
}

.foot.glass {
    border: 0;
    border-top: 1px solid var(--rule);
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-radius: 0;
}

/* --------------------------------------------------------------------------
   13. 유틸리티
   -------------------------------------------------------------------------- */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

a.sr-only:focus,
a.sr-only:focus-visible {
    position: fixed;
    top: var(--space-3);
    left: var(--space-3);
    z-index: 200;
    width: auto;
    height: auto;
    margin: 0;
    padding: var(--space-3) var(--space-4);
    clip: auto;
    clip-path: none;
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--ring);
}

.stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.row-between {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.is-hidden {
    display: none !important;
}

/* --------------------------------------------------------------------------
   14. 반응형
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
    .editor__panes {
        grid-template-columns: 1fr;
    }

    .textarea {
        min-height: 320px;
    }

    .editor__preview {
        min-height: 220px;
    }
}

@media (max-width: 719px) {
    .shell {
        padding: var(--space-7) 0;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .nav__links {
        gap: var(--space-4);
    }

    .lead {
        grid-template-columns: 1fr;
        gap: var(--space-4);
        margin-bottom: var(--space-6);
    }

    /* 좁은 화면에서는 메타를 제목 아래로 내린다 */
    .idx {
        grid-template-columns: 2rem 88px 1fr;
        gap: var(--space-4);
        padding: var(--space-4) 0;
    }

    .idx__thumb {
        width: 88px;
    }

    .group {
        margin-bottom: var(--space-7);
    }

    .idx__meta {
        grid-column: 3;
        gap: var(--space-3);
    }

    .idx:hover {
        padding-left: 0;
    }

    .row {
        align-items: flex-start;
    }

    .row__side {
        width: 100%;
    }

    .toast-root {
        left: var(--space-3);
        right: var(--space-3);
        max-width: none;
    }
}

@media (max-width: 380px) {
    .thumbs {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    }
}

/* 포인터가 없는 기기(터치)에서는 요약을 항상 보여 준다 */
@media (hover: none) {
    .idx:hover {
        padding-left: 0;
    }
}

/* --------------------------------------------------------------------------
   15. 모션 최소화
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    .idx:hover,
    .row:hover {
        padding-left: 0;
    }

}