/* ═══════════════════════════════════════════════════════════════════
   v2/assets/styles.css — IMA KOREA CHAPTER 공통 스타일
   팔레트: 뉴트럴 ink + 초록(accent) + 하늘색(pin-ink) 포인트
   규칙: 기본 샤프 코너, 핀/칩/reg-block 등 라운드 예외
   레이아웃: grid-auto-flow: dense, Hero Slider (L) / Wide Pin Slider (Mw) / 1×1 (S)

   TOC — Ctrl+F 로 섹션 이름(== ... ==)을 찾아서 이동하세요. 기존 섹션 헤더를
   그대로 두고 TOC 만 추가한 구조. 큰 리팩터 없음.

   GLOBALS
     - TOKENS                 (:root, --c-*, --fs-*, --sp-*, 등)
     - Heading 기본           (h1~h6 기본 치수)
   LAYOUT & CHROME
     - HEADER                 (.site-header, .main-nav, .search-form)
     - NOTIFICATION BELL      (.notif-menu, .notif-panel)
     - BOTTOM NAV             (mobile)
     - FOOTER                 (.site-footer)
   COMMON
     - AVATAR                 (.avatar)
     - FLASH                  (.flash-ok / .flash-err)
     - HERO / PAGE HEAD       (.page-head)
     - SUBTAG CHIPS           (.chip-row, .chip)
   FEED PAGES (index / c / search / u)
     - FEED GRID (BLOCK)      (.feed-grid, .card-item, 하에어라인)
     - HERO SLIDER            (L 핀 · .hero-slider, .hero-card)
     - WIDE PIN SLIDER        (Mw 핀 · .wpin, .wpin-slide)
     - FEED PAGE HEAD         (.feed-page-head, .feed-chip-row)
     - SECTION LABEL          (.sec-lbl — PINNED / LATEST)
     - LOAD MORE              (.more-btn)
   ARTICLE DETAIL (post / event / study)
     - ARTICLE DETAIL         (.article-layout, .article-card)
     - HEAD SPLIT             (.article-head-split, 썸네일 좌/메타 우)
     - INLINE SHARE BAR       (.article-share-bar)
     - STUDY 파일 인라인 카드
     - RELATED POSTS          (.related-posts)
     - ASIDE BLOCK            (공통 리스트형 aside)
     - EVENT UNIFIED CARD     (이벤트 상세 상단 통합 카드)
     - LEGACY .detail-hero    (과도기 호환)
   COMMENTS
     - COMMENTS               (.comment, .comment-form)
   ME / PROFILE
     - ORGANIZER EVENTS       (/me 내가 운영하는 이벤트)
     - MY NOTIFICATIONS       (/me 내 글에 달린 댓글 풀 리스트)
     - UPCOMING REMINDER      (/me 예정 이벤트 강조)
     - PROFILE PAGE           (.profile-hero, .profile-info)
     - ADMIN PAGES            (.admin-card, .breadcrumb)
   FORMS
     - FORMS 공통             (login/signup/write/me)
     - EMAIL VERIFY           (signup 인라인 인증)
     - WRITE PAGE             (Libretto 참고 에디터)
     - TAG ROW                (.write-tag-row)
     - SUBTAG COMBOBOX        (.subtag-combobox, 자동완성)
     - RADIO CHOICE           (signup IMA 멤버번호 radio)
     - DIRECTORY SEARCH       (.members-search)
     - MEMBERS GRID           (.members-grid)
   ADMIN
     - EVENT ADMIN            (신청자 관리 테이블)
     - ORGANIZER LINK BAR     (이벤트 상세 하단)
     - ADMIN TOOLBAR          (핀 관리, 편집 버튼)
   ABOUT
     - ABOUT PAGE             (.about-*, /about)
   BASE UTILITIES
     - UTIL                   (.empty-state, .pager)
     - BUTTON 상태            (is-submitting, disabled)
     - SCROLL MARGIN          (스티키 헤더 앵커 보정)
     - FOCUS OUTLINE          (a11y)
     - KEYFRAMES              (menuDrop, flashIn, h1FadeUp)
     - RESPONSIVE             (@media 1024 / 900 / 640 / 480)
     - REDUCED MOTION         (@media prefers-reduced-motion)
   ═══════════════════════════════════════════════════════════════════ */

/* ============ UTILITY CLASSES (인라인 style 대체 — 고반복 패턴만) ============ */
.form-inline     { margin: 0 !important; }
.form-inline-ib  { display: inline; margin: 0; }
.text-muted      { color: var(--c-muted); }
.text-ok         { color: #166534; }
.text-err        { color: var(--c-err); }
.fs-small        { font-size: 13px; }
.fs-xsmall       { font-size: 12px; }
.mt-sm           { margin-top: var(--sp-2); }
.mt-md           { margin-top: var(--sp-3); }
.mt-lg           { margin-top: var(--sp-4); }

/* ============ TOKENS (:root CSS variables) ============ */

:root {
    /* ========== 폰트 스택 (Pretendard Variable 우선) ========== */
    --font-sans:
        'Pretendard Variable', Pretendard,
        -apple-system, BlinkMacSystemFont,
        'Apple SD Gothic Neo',
        system-ui, Roboto, 'Helvetica Neue',
        'Segoe UI', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
    --font-mono:
        'JetBrains Mono', 'D2Coding', 'SF Mono',
        Menlo, Consolas, monospace;

    /* ========== Neutral 스케일 11단계 (Radix 12-step 의미론) ========== */
    --n-50:  #fafafa;
    --n-100: #f5f5f5;
    --n-200: #e5e5e5;
    --n-300: #d4d4d4;
    --n-400: #a3a3a3;
    --n-500: #737373;
    --n-600: #525252;
    --n-700: #404040;
    --n-800: #262626;
    --n-900: #171717;
    --n-950: #0a0a0a;

    /* ========== Semantic 컬러 (handoff BLOCK 기준 — 페이지 배경 #fafaf9) ========== */
    --c-ink:        #0a0a0a;   /* 주 텍스트 / primary CTA */
    --c-ink-2:      #262626;   /* 본문 강조 */
    --c-text:       #262626;
    --c-muted:      #737373;   /* 보조 텍스트 */
    --c-line:       #ececea;   /* 경계 (hairline 강) */
    --c-line-soft:  #f3f3f0;   /* 카드 간 hairline (약) */
    --c-line-hard:  #d0d0cb;   /* 강조 hairline (sheet grip 등) */
    --c-bg:         #fafaf9;   /* 페이지 배경 (handoff) */
    --c-surface:    #ffffff;   /* 카드 hover / 입력 필드 */

    /* 2종 포인트 컬러: 초록(action) + 네이비(pin/link) */
    --c-brand:      #10b981;   /* Emerald — 참가 신청 CTA */
    --c-brand-dk:   #059669;   /* hover */
    --c-brand-lt:   #d1fae5;   /* 페일 그린 — outline hover bg */
    --c-navy:       #1b3a5c;   /* Pin 텍스트 / hover 제목 */
    --c-link:       #1b3a5c;
    --c-link-lt:    #eef2f8;

    /* 카테고리 dot (handoff 규정) */
    --cat-net:      #10b981;   /* Networking */
    --cat-talks:    #1b3a5c;   /* Talks */
    --cat-res:      #b8763f;   /* Resources */
    --c-networking: var(--cat-talks);
    --c-talks:      var(--cat-talks);
    --c-resources:  var(--cat-talks);

    --pin:      #eef2f8;
    --pin-line: #c5d1e3;
    --pin-ink:  #1b3a5c;
    --accent:   #10b981;

    --c-ok:    #166534;
    --c-ok-bg: #dcfce7;
    --c-err:   #991b1b;
    --c-err-bg:#fee2e2;

    /* ========== Radius (R6 샤프 기본 유지 + 용도별 확장) ========== */
    --r-xs:   2px;     /* 기본 UI (버튼·input 이미지) */
    --r-sm:   4px;     /* D-day 칩·badge */
    --r-md:   6px;     /* 드롭다운 항목 */
    --r-lg:   8px;     /* reg-block·카드 내부 강조 */
    --r-xl:   12px;    /* 아티클 카드·모달 */
    --r-2xl:  16px;    /* 히어로 카드 */
    --r-chip: 999px;   /* pill chip·avatar */
    --r-full: 9999px;
    --r-block: var(--r-lg);  /* 기존 alias */

    /* ========== Spacing 13단계 (base 4px) ========== */
    --sp-0: 0;
    --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
    --sp-5: 20px;  --sp-6: 24px;  --sp-7: 32px;  --sp-8: 40px;
    --sp-9: 48px;  --sp-10: 64px; --sp-11: 80px; --sp-12: 96px;
    --sp-13: 128px;

    /* ========== Type 스케일 (Pretendard Variable + 한글 최적) ========== */
    --fs-xxs:  11px;
    --fs-xs:   12px;
    --fs-sm:   13px;
    --fs-base: 14px;
    --fs-md:   16px;    /* body 권장 */
    --fs-lg:   18px;
    --fs-xl:   22px;
    --fs-2xl:  28px;
    --fs-3xl:  32px;
    --fs-4xl:  40px;

    /* Letter-spacing — 사이즈가 커질수록 음수 강화 (한글 시각 보정) */
    --ls-xs:     0;
    --ls-sm:    -0.005em;
    --ls-base:  -0.01em;
    --ls-md:    -0.011em;
    --ls-lg:    -0.014em;
    --ls-xl:    -0.015em;
    --ls-2xl:   -0.018em;
    --ls-3xl:   -0.02em;
    --ls-4xl:   -0.025em;

    /* Line-height — 용도별 */
    --lh-tight:   1.2;   /* display */
    --lh-snug:    1.3;   /* heading large */
    --lh-normal:  1.5;   /* subheading·UI */
    --lh-relaxed: 1.7;   /* body */
    --lh-loose:   1.85;  /* long-form article */

    /* ========== Motion — Material 3 + Apple Liquid Glass 참조 ========== */
    --dur-instant: 80ms;    /* 리스트 hover, 색 즉시 전환 */
    --dur-fast:    160ms;   /* 버튼·chip hover */
    --dur-base:    240ms;   /* 드롭다운·토글·카드 lift */
    --dur-slow:    360ms;   /* 모달·오버레이·라우트 전환 */

    --ease-standard:   cubic-bezier(0.4, 0, 0.2, 1);           /* 범용 */
    --ease-out:        cubic-bezier(0.22, 1, 0.36, 1);         /* 진입·등장 */
    --ease-in:         cubic-bezier(0.3, 0, 0.8, 0.15);        /* 퇴장·사라짐 */
    --ease-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1);        /* 모달·sheet */
    --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);           /* alias */

    /* ========== Shadow — 레이어드 (contact + ambient) ========== */
    --shadow-xs:   0 1px 1px 0 rgba(10, 10, 10, 0.04);
    --shadow-sm:   0 1px 2px 0 rgba(10, 10, 10, 0.05), 0 1px 1px -1px rgba(10, 10, 10, 0.04);
    --shadow-md:   0 4px 8px -2px rgba(10, 10, 10, 0.06), 0 2px 4px -2px rgba(10, 10, 10, 0.04);
    --shadow-lg:   0 10px 20px -4px rgba(10, 10, 10, 0.08), 0 4px 8px -4px rgba(10, 10, 10, 0.04);
    --shadow-xl:   0 20px 36px -8px rgba(10, 10, 10, 0.10), 0 8px 16px -8px rgba(10, 10, 10, 0.06);
    --shadow-focus:       0 0 0 3px rgba(16, 185, 129, 0.18);
    --shadow-focus-navy:  0 0 0 3px rgba(27, 58, 92, 0.14);
    --shadow-focus-error: 0 0 0 3px rgba(153, 27, 27, 0.18);
    --shadow-inset-line:  inset 0 -1px 0 0 rgba(10, 10, 10, 0.06);
}

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

html {
    /* 스크롤바 점유 공간 예약 — 페이지마다 폭이 달라지는 시프트 방지 */
    scrollbar-gutter: stable;
    /* sticky 헤더 높이만큼 앵커 스크롤 보정 */
    scroll-padding-top: 72px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--font-sans);
    background: var(--c-bg);
    color: var(--c-text);
    font-size: var(--fs-md);            /* 15 → 16px */
    line-height: var(--lh-relaxed);     /* 1.55 → 1.7 */
    letter-spacing: var(--ls-base);     /* -0.01em */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    word-break: keep-all;               /* 한글 단어 단위 줄바꿈 */
    overflow-wrap: break-word;
    font-feature-settings: 'ss10' on;   /* Pretendard Variable 스타일셋 */
}
a {
    color: var(--c-link); text-decoration: none;
    text-underline-offset: 0.2em; text-decoration-thickness: 1px;
    transition: color var(--dur-fast) var(--ease-out);
}
a:hover { text-decoration: underline; }
a:focus-visible { outline: none; box-shadow: var(--shadow-focus-navy); border-radius: var(--r-xs); }
img { max-width: 100%; height: auto; display: block; }

/* ========== Heading 기본 — 사이즈별 letter-spacing·line-height 매핑 ========== */
h1, h2, h3, h4, h5, h6 { color: var(--c-ink); margin: 0 0 var(--sp-3); font-weight: 700; }
h1 { font-size: var(--fs-3xl);  line-height: var(--lh-snug);   letter-spacing: var(--ls-3xl); font-weight: 800; }
h2 { font-size: var(--fs-2xl);  line-height: var(--lh-snug);   letter-spacing: var(--ls-2xl); }
h3 { font-size: var(--fs-xl);   line-height: var(--lh-normal); letter-spacing: var(--ls-xl);  font-weight: 600; }
h4 { font-size: var(--fs-lg);   line-height: var(--lh-normal); letter-spacing: var(--ls-lg);  font-weight: 600; }
h5 { font-size: var(--fs-md);   line-height: var(--lh-normal); letter-spacing: var(--ls-md);  font-weight: 600; }
h6 { font-size: var(--fs-sm);   line-height: var(--lh-normal); letter-spacing: var(--ls-sm);  font-weight: 600; }

p { margin: 0 0 var(--sp-3); }
button { font-family: inherit; }
code { font-family: var(--font-mono); background: var(--n-100); padding: 1px 5px; border-radius: var(--r-sm); font-size: 0.92em; }

.container { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
.main-content { padding-top: 40px; padding-bottom: var(--sp-8); }
@media (max-width: 720px) {
    .container { padding: 0 20px; }
    .main-content { padding-top: 24px; }
}

/* ============ HEADER (sh-hdr handoff 기준 — 64px · 4-col grid) ============ */
.site-header {
    background: rgba(255, 255, 255, 0.86);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--c-line);
    position: sticky; top: 0; z-index: 50;
}
.header-row {
    display: flex; align-items: center; gap: 28px;
    height: 64px;
    max-width: 1280px; margin: 0 auto; padding: 0 40px;
}
.header-row .search-form { margin-left: auto; }
.logo { display: inline-flex; align-items: baseline; gap: 8px; text-decoration: none; white-space: nowrap; flex-shrink: 0; }
.logo-main, .logo-sub {
    font-weight: 800; font-size: 16px;
    letter-spacing: -0.02em; font-family: inherit;
}
.logo-main { color: var(--c-ink); }
.logo-sub  { color: var(--c-brand); }
.logo:hover { text-decoration: none; }
@media (max-width: 1040px) {
    .logo-main, .logo-sub { font-size: 15px; }
}
@media (max-width: 480px) {
    .logo-main, .logo-sub { font-size: 14px; }
}

.main-nav { display: flex; gap: 24px; flex: 0 0 auto; }
.main-nav a {
    font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
    color: var(--c-muted); padding: 6px 0;
    border-bottom: 2px solid transparent;
    transition: color var(--dur-fast) var(--ease-out),
                border-bottom-color var(--dur-fast) var(--ease-out);
}
.main-nav a:hover { text-decoration: none; color: var(--c-ink); }
.main-nav a.is-active { color: var(--c-ink); border-bottom-color: var(--c-ink); }

.search-form {
    justify-self: end;
    max-width: 340px; min-width: 260px;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 12px;
    background: var(--c-surface); border: 1px solid var(--c-line);
    color: var(--c-muted); font-size: 13px;
    transition: border-color var(--dur-fast) var(--ease-out);
    position: relative;
}
.search-form::before {
    content: ''; width: 14px; height: 14px; flex-shrink: 0;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center;
}
.search-form:hover { border-color: var(--c-ink-2); }
.search-form input[type=search] {
    border: 0; background: transparent; outline: 0;
    flex: 1; min-width: 0; padding: 0;
    font: inherit; color: var(--c-ink-2);
    font-size: 13px;
}
.search-form input[type=search]::placeholder { color: var(--c-muted); }
.search-form input[type=search]:focus { box-shadow: none; background: transparent; }
.search-form kbd {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 10.5px; color: var(--c-muted);
    background: var(--c-bg); border: 1px solid var(--c-line);
    padding: 2px 5px; border-radius: 3px;
    flex-shrink: 0;
}

.auth-bar { display: flex; align-items: center; gap: 6px; }
/* 헤더 내 로그인(ghost) · 가입(primary ink) — handoff sh-btn 규정 */
.auth-bar .btn-outline-sm {
    background: transparent; border-color: transparent;
    color: var(--c-ink-2); font-size: 13px; font-weight: 600;
    padding: 7px 12px; min-height: 0;
}
.auth-bar .btn-outline-sm:hover {
    background: transparent; border-color: transparent;
    color: var(--c-ink);
}
.auth-bar .btn-sm {
    background: var(--c-ink); border-color: var(--c-ink);
    color: #fff; font-size: 13px; font-weight: 600;
    padding: 7px 14px; min-height: 0;
}
.auth-bar .btn-sm:hover {
    background: var(--c-ink-2); border-color: var(--c-ink-2);
    color: #fff; box-shadow: none;
}
.btn-sm, .btn-outline-sm {
    font-size: 13px; font-weight: 600; padding: 7px 12px;
    text-decoration: none; cursor: pointer; border: 1px solid var(--c-brand);
    background: var(--c-brand); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 36px; white-space: nowrap;
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
}
.btn-sm:hover { background: var(--c-brand-dk); border-color: var(--c-brand-dk); color: #fff; text-decoration: none; box-shadow: var(--shadow-sm); }
.btn-sm:active { transform: scale(0.97); box-shadow: none; }
.btn-outline-sm { background: #fff; color: var(--c-brand); }
.btn-outline-sm:hover { background: var(--c-brand-lt); border-color: var(--c-brand-dk); color: var(--c-brand-dk); text-decoration: none; }
.btn-outline-sm:active { transform: scale(0.97); background: var(--c-brand-lt); }
.btn-sm:focus-visible, .btn-outline-sm:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.user-menu { position: relative; }
.user-menu summary {
    list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--sp-2);
    padding: 4px 10px 4px 4px; border: 1px solid var(--c-line);
    transition: border-color var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out);
}
.user-menu summary:hover { border-color: var(--c-ink); background: var(--c-line-soft); }
.user-menu[open] summary { border-color: var(--c-ink); }
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu .user-name { font-size: 13px; font-weight: 600; color: var(--c-ink); }
.user-menu-panel {
    position: absolute; right: 0; top: calc(100% + 6px);
    background: #fff; border: 1px solid var(--c-line); min-width: 180px;
    display: flex; flex-direction: column; z-index: 60;
    box-shadow: var(--shadow-lg);
}
.user-menu[open] .user-menu-panel { animation: menuDrop var(--dur-base) var(--ease-out) both; }
.user-menu-panel a, .user-menu-panel .menu-logout {
    padding: 11px 14px; font-size: 13px; color: var(--c-text);
    text-decoration: none; border: none; background: transparent; text-align: left;
    cursor: pointer; border-bottom: 1px solid var(--c-line-soft);
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                padding-left var(--dur-fast) var(--ease-out);
}
.user-menu-panel a:hover, .user-menu-panel .menu-logout:hover { background: var(--c-link-lt); color: var(--c-navy); padding-left: 18px; }
.user-menu-panel > *:last-child { border-bottom: none; }

/* ============ NOTIFICATION BELL (헤더 🔔 드롭다운) ============ */
.notif-menu {
    position: relative;
}
.notif-menu > summary {
    list-style: none; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border: 1px solid var(--c-line);
    background: #fff;
    color: var(--c-text);
    border-radius: var(--r-xs);
    position: relative;
    transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.notif-menu > summary::-webkit-details-marker { display: none; }
.notif-menu > summary:hover { border-color: var(--c-ink); background: var(--c-line-soft); }
.notif-menu[open] > summary { border-color: var(--c-ink); background: var(--c-line-soft); }

.notif-badge {
    position: absolute; top: -6px; right: -6px;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    background: var(--c-err); color: #fff;
    font-size: 10.5px; font-weight: 700;
    border-radius: var(--r-full);
    display: inline-flex; align-items: center; justify-content: center;
    border: 2px solid #fff;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.notif-panel {
    position: absolute; right: 0; top: calc(100% + 6px);
    width: 360px;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    z-index: 60;
    overflow: hidden;
    animation: menuDrop var(--dur-base) var(--ease-out) both;
}
.notif-panel-head {
    display: flex; align-items: baseline; justify-content: space-between;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--c-line-soft);
    background: var(--c-bg);
}
.notif-panel-head strong { font-size: 14px; color: var(--c-ink); }
.notif-panel-sub { font-size: 12px; color: var(--c-muted); }

.notif-empty {
    padding: var(--sp-5) var(--sp-4);
    text-align: center; color: var(--c-muted);
}
.notif-empty p { margin: 0 0 4px; font-size: 13px; color: var(--c-text); font-weight: 500; }
.notif-empty small { font-size: 11.5px; }

.notif-list {
    list-style: none; margin: 0; padding: 0;
    max-height: 420px;
    overflow-y: auto;
}
.notif-item { border-bottom: 1px solid var(--c-line-soft); }
.notif-item:last-child { border-bottom: none; }
.notif-item a {
    display: block; padding: var(--sp-3) var(--sp-4);
    text-decoration: none; color: inherit;
    transition: background var(--dur-fast) var(--ease-out);
}
.notif-item a:hover { background: var(--c-bg); text-decoration: none; }

.notif-head {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 4px;
}
.notif-head .avatar { flex: 0 0 auto; }
.notif-head-text { display: flex; gap: 6px; align-items: baseline; flex: 1; min-width: 0; }
.notif-name { font-size: 13px; font-weight: 600; color: var(--c-ink); }
.notif-ago { font-size: 11.5px; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.notif-body {
    font-size: 12.5px; color: var(--c-text);
    line-height: 1.5;
    margin-left: 36px;
    margin-bottom: 4px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.notif-post {
    margin-left: 36px;
    font-size: 11.5px; color: var(--c-muted);
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.notif-post::before { content: '📌 '; }

.notif-panel-foot {
    display: block; padding: var(--sp-3) var(--sp-4);
    text-align: center;
    font-size: 12.5px; color: var(--c-navy);
    text-decoration: none;
    border-top: 1px solid var(--c-line-soft);
    background: var(--c-bg);
    font-weight: 600;
    transition: background var(--dur-fast) var(--ease-out);
}
.notif-panel-foot:hover { background: var(--c-link-lt); text-decoration: none; }

/* 모바일 — 드롭다운 폭 조정 */
@media (max-width: 900px) {
    .notif-panel { width: min(360px, calc(100vw - 24px)); right: -12px; }
}

/* ============ 검색 토글 버튼 + suggest 드롭다운 ============ */
.search-toggle {
    display: none;
    align-items: center; justify-content: center;
    width: 36px; height: 36px;
    padding: 0; margin-left: auto;
    background: transparent; border: 0;
    color: var(--c-text);
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-out);
}
.search-toggle:hover { color: var(--c-ink); }

/* 기본 (데스크톱) — 아이콘 감추고 인라인 search-form 그대로 노출 */
@media (min-width: 901px) {
    .search-toggle { display: none; }
    .header-row.is-search-open .search-toggle { display: none; }
}

/* 데스크톱 모드에서도 검색 제안 드롭다운은 search-form 아래에 떠야 함 */
.search-form { position: relative; }
.search-suggest {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0;
    margin: 0; padding: 4px 0;
    list-style: none;
    background: #fff; border: 1px solid var(--c-line);
    box-shadow: 0 8px 24px rgba(10,10,10,0.12);
    max-height: min(480px, 70vh); overflow-y: auto;
    z-index: 70;
}
.search-suggest li { margin: 0; }
.search-suggest .sg-head {
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em;
    color: var(--c-muted); text-transform: uppercase;
    padding: 8px 14px 4px;
    border-top: 1px solid var(--c-line-soft);
}
.search-suggest li:first-child.sg-head { border-top: 0; }
.search-suggest .sg-empty {
    padding: 14px; text-align: center;
    color: var(--c-muted); font-size: 13px;
}
.search-suggest a {
    display: grid; grid-template-columns: auto 1fr;
    gap: 3px 10px; align-items: center;
    padding: 8px 14px;
    color: var(--c-text); text-decoration: none;
    transition: background var(--dur-fast) var(--ease-out);
}
.search-suggest a:hover { background: var(--c-line-soft); text-decoration: none; }
.search-suggest .sg-cat {
    grid-column: 1;
    display: inline-block;
    padding: 2px 7px; font-size: 9.5px; font-weight: 800;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: #fff; background: var(--c-muted);
    line-height: 1.4;
}
.search-suggest .sg-cat.sg-net   { background: var(--cat-net); }
.search-suggest .sg-cat.sg-talks { background: var(--cat-talks); }
.search-suggest .sg-cat.sg-res   { background: var(--cat-res); }
.search-suggest .sg-av {
    grid-column: 1; grid-row: span 2;
    width: 28px; height: 28px; border-radius: 50%;
    object-fit: cover; background: var(--c-line-soft);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--c-muted); font-weight: 700; font-size: 12px;
}
.search-suggest .sg-title {
    grid-column: 2; font-size: 13.5px; font-weight: 600;
    color: var(--c-ink); line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.search-suggest .sg-sub {
    grid-column: 2; font-size: 11.5px; color: var(--c-muted);
    line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.search-suggest .sg-all a {
    display: block; text-align: center;
    padding: 10px; font-size: 12px; font-weight: 700;
    color: var(--c-navy); letter-spacing: 0.02em;
    border-top: 1px solid var(--c-line-soft);
}
.search-suggest .sg-all a:hover { background: var(--c-link-lt); }

/* ============ BOTTOM NAV (모바일 웹앱 스타일) ============ */
.bottom-nav { display: none; }

/* ============ AVATAR ============ */
.avatar {
    display: inline-block; background-size: cover; background-position: center;
    border-radius: 50%; vertical-align: middle; background-color: var(--c-line);
    flex: 0 0 auto;
}
.avatar-initial {
    color: #fff; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    text-transform: uppercase;
}

/* ============ FLASH ============ */
.flash { padding: 10px 14px; margin-bottom: var(--sp-4); font-size: 14px; border: 1px solid; }
.flash-ok  { background: var(--c-ok-bg);  color: var(--c-ok);  border-color: #86efac; }
.flash-err { background: var(--c-err-bg); color: var(--c-err); border-color: #fca5a5; }

/* ============ HERO / PAGE HEAD ============ */
.page-head { margin: var(--sp-4) 0 var(--sp-5); }
.page-head h1 { font-size: 26px; letter-spacing: -0.01em; color: var(--c-navy); }
.page-head .subtitle { color: var(--c-muted); font-size: 14px; }
.breadcrumb { font-size: 12px; color: var(--c-muted); margin-bottom: var(--sp-2); }
.breadcrumb a { color: var(--c-muted); }

/* ============ SUBTAG CHIPS ============ */
.chip-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-3) 0 var(--sp-5); }
.chip {
    display: inline-block; padding: 5px 12px; font-size: 12px; font-weight: 600;
    background: #fff; border: 1px solid var(--c-line); color: var(--c-text);
    border-radius: var(--r-chip); text-decoration: none;
    transition: background var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
}
.chip:hover { background: var(--c-link-lt); border-color: var(--c-navy); color: var(--c-navy); text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.chip:active { transform: translateY(0); box-shadow: none; }
.chip:focus-visible { outline: none; box-shadow: var(--shadow-focus-navy); }
.chip.is-active { background: var(--c-navy); border-color: var(--c-navy); color: #fff; }
.chip.is-active:hover { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }

/* ============ FEED GRID (BLOCK — handoff) ============ */
.feed-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 218px;
    grid-auto-flow: dense;
    gap: 0;
    background: transparent;
    margin-bottom: 32px;
    border-top: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
}
.card-item {
    background: transparent;
    border: 0;
    padding: 20px 22px;
    overflow: hidden;
    display: flex; flex-direction: column;
    position: relative;
    min-width: 0; min-height: 0;
    transition: background var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out);
    will-change: transform;
    animation: h1FadeUp 500ms var(--ease-out) both;
}
/* 카드 사이 1px hairline (첫 카드 제외 · 좌측 수직선) */
.card-item + .card-item { box-shadow: -1px 0 0 var(--c-line-soft); }
/* 두 번째 행부터 시작되는 카드 (data-row=2) — 상단 hairline 추가 */
.card-item[data-row="2"] { box-shadow: -1px 0 0 var(--c-line-soft), 0 -1px 0 var(--c-line-soft); }
.card-item[data-col="0"] { box-shadow: none; }
.card-item[data-col="0"][data-row="2"] { box-shadow: 0 -1px 0 var(--c-line-soft); }

@keyframes h1FadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (hover: hover) {
    .card-item:hover {
        background: var(--c-surface);
        box-shadow: 0 6px 24px -8px rgba(10,10,10,.12), 0 2px 6px -2px rgba(10,10,10,.06);
        transform: translateY(-2px);
        z-index: 2;
    }
    .card-item:hover .card-title { color: var(--c-navy); }
    .card-item:hover .thumb:not(.thumb-placeholder) { transform: scale(1.04); }
}
.card-item:active { transform: translateY(-1px) scale(0.997); transition-duration: var(--dur-fast); }
.card-link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; gap: 10px; min-width: 0; }
.card-link:hover { text-decoration: none; }
.card-link:focus-visible { outline: none; }
.card-item:focus-within { background: var(--c-surface); box-shadow: 0 0 0 2px var(--c-navy); outline: none; z-index: 2; }

/* 1×1 (S) / 1×2 (Mw) — L 은 Hero Slider 로 대체되어 grid 에서는 미사용 */
.pin.pin-L  { grid-column: span 2; grid-row: span 2; padding: 0; overflow: hidden; }
.pin.pin-Mw { grid-column: span 2; grid-row: span 1; padding: 0; }
.pin.pin-S  { grid-column: span 1; grid-row: span 1; }
.card-item.pin { background: var(--pin); }
.card-item.pin .card-title { color: var(--pin-ink); }

/* 이벤트 세로형 카드 (1열 × 2행) — 프로필 페이지 등에서 facts + reg-block 수납 */
.card-item.card-event-tall {
    grid-column: span 1;
    grid-row: span 2;
}
.card-item.card-event-tall .card-excerpt { -webkit-line-clamp: 2; }
.card-item.card-event-tall .card-facts {
    font-size: 12px;
    grid-template-columns: 42px 1fr;
    gap: 4px 10px;
    margin: 6px 0 8px;
}
.card-item.card-event-tall .reg-block {
    padding: var(--sp-3);
    font-size: 12px;
    margin-top: var(--sp-2);
}

/* L 핀 — 수직 분할 (썸네일 위 landscape 2열1행 · 메타 아래)
   카드 456px 높이 (220×2+gap) 중 썸네일 200~220px, 메타 영역 ~240px 확보 */
.pin.pin-L .card-link { flex-direction: column; }
.pin.pin-L .thumb {
    width: 100%;
    aspect-ratio: 16/9;
    max-height: 220px;   /* 메타 수납 위해 상한 */
    min-height: 0;
}
.pin.pin-L .card-meta { flex: 1; padding: var(--sp-3) var(--sp-4); min-width: 0; }
/* L 핀 이벤트: outer facts-list 숨김 — reg-block.tight 로 이미 표시됨 */
.pin.pin-L.is-event-pin .meta-top-group > .card-facts { display: none; }

/* Mw 핀 — 가로 분할 (썸네일 좌 45% · 메타 우 55%) */
.pin.pin-Mw .card-link { flex-direction: row; }
.pin.pin-Mw .thumb { width: 45%; aspect-ratio: auto; min-height: 0; }
.pin.pin-Mw .card-meta { flex: 1; padding: var(--sp-4); min-width: 0; }

.thumb {
    background: linear-gradient(135deg, #f5f5f5, #e5e5e5);
    background-size: cover; background-position: center;
    position: relative; aspect-ratio: 16/9;
    flex-shrink: 0;
    transition: transform var(--dur-slow) var(--ease-out);
    transform-origin: center;
}
/* 카드별 썸네일 비율 최적화 — 메타 영역 확보 */
.pin.pin-S .thumb  { aspect-ratio: 16/9; }
.pin.pin-Mw .thumb { aspect-ratio: auto; }   /* 가로분할이라 세로 stretch */
.thumb-placeholder { background: linear-gradient(135deg, #1a1a1a, #2d2d35); }
.thumb-watermark {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: rgba(255, 255, 255, 0.12); font-weight: 800; font-size: 20px;
    letter-spacing: 0.15em; text-transform: uppercase;
    padding: var(--sp-3); text-align: center;
}
.dday-chip {
    position: absolute; top: 12px; left: 12px;
    background: var(--accent); color: #fff;
    padding: 5px 11px; font-size: 11px; font-weight: 700;
    border-radius: 6px; letter-spacing: 0.12em;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    font-variant-numeric: tabular-nums;
}
/* pin-icon — 이미지 위 → meta 인라인으로 이동. 기존 absolute 포지션 중립화 */
.pin-icon-inline {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px;
    background: var(--pin); color: var(--pin-ink);
    border: 1px solid var(--pin-line);
    line-height: 0; margin-left: 4px;
}
.pin-icon-inline svg { display: block; }
/* 레거시 pin-icon (위치 보존 잔존 호환) — 더 이상 사용되지 않지만 제거하지 않고 숨김 */
.pin-icon:not(.pin-icon-inline) { display: none; }
/* 인라인 D-day 칩 (meta-top 내부) */
.dday-inline {
    display: inline-block; padding: 1px 7px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
    background: var(--c-brand); color: #fff;
    font-variant-numeric: tabular-nums;
}

/* 카드 메타 영역 — 2 그룹 구조 (top-group + bottom-group, bottom 은 하단 고정)
   BLOCK 디자인: 일반 카드는 .card-item 외곽 padding 에 의존 → .card-meta 는 padding 0.
   L/Mw 핀만 thumb 와 분할되는 구조라 별도 padding 지정. */
.card-meta {
    flex: 1;
    padding: 0;
    display: flex; flex-direction: column;
    min-width: 0; min-height: 0; overflow: hidden;
    gap: 0;
}
.meta-top-group {
    display: flex; flex-direction: column; gap: 6px;
    min-width: 0; min-height: 0;
}
.meta-bottom-group {
    margin-top: auto;    /* 핵심 — 하단으로 밀어내림 (glue 영역) */
    display: flex; flex-direction: column; gap: var(--sp-2);
    padding-top: var(--sp-2);
}
/* L핀은 여유가 있으므로 bottom-group 상단 여백 더 */
.pin.pin-L .meta-bottom-group { gap: var(--sp-3); padding-top: var(--sp-3); }
.meta-top { display: flex; gap: var(--sp-2); font-size: 11px; flex-wrap: wrap; align-items: center; }
/* 태그 (handoff .tag) — 앞에 카테고리 색 dot, uppercase */
.cat {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0; background: transparent; border: 0;
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--c-muted);
    align-self: flex-start;
}
.cat::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: var(--c-muted); flex-shrink: 0;
}
.cat-networking::before { background: var(--cat-net); }
.cat-talks::before      { background: var(--cat-talks); }
.cat-resources::before  { background: var(--cat-res); }
.cat-clickable { cursor: pointer; transition: color var(--dur-fast) var(--ease-out); }
.cat-clickable:hover { color: var(--c-ink); }
.card-item.pin .cat { color: var(--pin-ink); opacity: 0.75; }
.subtag { color: var(--c-muted); font-size: 11px; }

/* 이벤트 L 핀 카드 내부 facts — dt/dd grid */
.card-facts {
    display: grid; grid-template-columns: 40px 1fr;
    gap: 4px 12px; font-size: 12.5px; margin: 6px 0 0;
}
.card-facts.tight { margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px dashed var(--pin-line); font-size: 12px; }
.card-facts dt { color: var(--c-muted); font-weight: 600; font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.06em; padding-top: 2px; }
.card-facts dd { margin: 0; color: var(--c-text); font-weight: 500; line-height: 1.45; }

/* 카드 하단 "💬 N" */
.meta-bottom .replies {
    display: inline-flex; align-items: center; gap: 3px;
    font-variant-numeric: tabular-nums;
    color: var(--c-text); font-weight: 600;
}

/* 제목 행수 규정 — 기본 2줄 (handoff: 15px 2줄), L핀 3줄, L핀 이벤트 2줄 */
.card-title {
    font-size: 15px; line-height: 1.4; font-weight: 600;
    letter-spacing: -0.012em; color: var(--c-ink); margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    word-break: keep-all;
    transition: color var(--dur-fast) var(--ease-out);
}
.pin.pin-L  .card-title { font-size: 20px; line-height: 1.35; font-weight: 700; letter-spacing: -0.018em; -webkit-line-clamp: 2; }
.pin.pin-Mw .card-title { font-size: 16px; font-weight: 700; -webkit-line-clamp: 2; }
.pin.pin-L.is-event-pin .card-title { -webkit-line-clamp: 2; }

/* 요약 행수 규정 — 기본 3줄, L핀 일반 5줄, L핀 이벤트 2줄, reg-block 있는 이벤트 카드 2줄 */
.card-excerpt {
    color: var(--c-muted); font-size: 13px; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    line-height: 1.55;
    flex: 1;
}
.pin.pin-L .card-excerpt { -webkit-line-clamp: 5; }
.pin.pin-L.is-event-pin .card-excerpt { -webkit-line-clamp: 2; }
.pin.pin-Mw .card-excerpt { -webkit-line-clamp: 3; }
/* 이벤트 카드(reg-block 있는) — bottom 공간 양보 위해 excerpt 행수 축소 */
.card-item.has-reg .card-excerpt { -webkit-line-clamp: 2; }
.pin.pin-Mw.has-reg .card-excerpt,
.pin.pin-S.has-reg .card-excerpt,
.card-item.has-reg:not(.pin) .card-excerpt { -webkit-line-clamp: 1; }

/* 하단 메타 — 글쓴이 · 댓글 수 (항상 카드 최하단) */
.meta-bottom {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 11.5px; color: var(--c-muted);
    padding-top: 10px;
    margin-top: auto;
}
.meta-bottom .author { font-weight: 600; color: var(--c-ink-2); }
.meta-bottom .replies { display: inline-flex; align-items: center; gap: 4px;
    font-variant-numeric: tabular-nums; color: var(--c-ink-2); font-weight: 600; }
.meta-bottom .replies.is-zero { color: var(--c-muted); font-weight: 500; }

/* 핀 카드 하단 메타 — pin-ink 톤 */
.card-item.pin .meta-bottom { color: var(--pin-ink); opacity: 0.7; }
.card-item.pin .meta-bottom .author,
.card-item.pin .meta-bottom .replies { color: var(--pin-ink); }

/* ============ REG-BLOCK (이벤트 신청) — 핀 팔레트 톤 ============ */
.reg-block {
    padding: var(--sp-2) var(--sp-3);
    background: rgba(255,255,255,0.55);
    border: 1px solid var(--pin-line);
    border-radius: 8px;
    font-size: 11.5px;
}
/* L 핀 이벤트는 facts 포함하므로 padding 살짝 더 */
.pin.pin-L.is-event-pin .reg-block { padding: var(--sp-3); font-size: 12px; }
.reg-row { display: flex; justify-content: space-between; color: var(--c-text); margin-bottom: 4px; }
.reg-row b { color: var(--pin-ink); }
.seat-progress { height: 4px; background: rgba(197, 209, 227, 0.6); border-radius: 2px; overflow: hidden; }
.seat-fill { height: 100%; background: var(--accent); transition: width .3s; }

/* ============ ARTICLE DETAIL — 2-column 레이아웃 (패턴 A+C 하이브리드) ============ */
.article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;   /* 이벤트 RSVP 폼 수납 위해 aside 360px */
    gap: var(--sp-6);
    max-width: 1180px;
    margin: 0 auto;
}
@media (max-width: 1024px) {
    .article-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp-5); }
}
@media (max-width: 900px) {
    .article-layout { grid-template-columns: 1fr; gap: var(--sp-4); }
}

/* 단일 컬럼 전용 (이벤트 상세 — aside 제거 + 통합 카드 본문 위 배치) */
.article-layout.single-col {
    grid-template-columns: 1fr;
    max-width: 900px;
}

.article-main { min-width: 0; }

.article-card {
    background: #fff;
    border-radius: var(--r-xl);
    padding: var(--sp-6) var(--sp-6) var(--sp-7);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--sp-4);
    overflow: hidden;
    border: 1px solid var(--c-line);
    position: relative;
}
@media (max-width: 720px) {
    .article-card { padding: var(--sp-4); border-radius: var(--r-lg); }
}

/* 카테고리별 차별화는 pill (.cat-networking/talks/resources) 좌측 border 로 충분 — 상단 색 라인 제거 */

/* ========== HEAD SPLIT — 썸네일 좌 + 메타 우 (모바일은 stack) ========== */
.article-head-split {
    display: grid;
    grid-template-columns: minmax(0, 42%) 1fr;
    gap: var(--sp-5);
    padding: 0 0 var(--sp-5);
    margin-bottom: var(--sp-5);
    border-bottom: 1px solid var(--c-line-soft);
    align-items: center;
}
.article-head-split.no-cover { grid-template-columns: 1fr; }
@media (max-width: 720px) {
    .article-head-split { grid-template-columns: 1fr; gap: var(--sp-4); padding-bottom: var(--sp-4); }
}

.article-head-thumb {
    margin: 0;
    aspect-ratio: 4/3;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--c-line-soft);
    position: relative;
}
.article-head-thumb img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center; display: block;
}
/* 이벤트 포스터 — contain + letterbox */
.is-event .article-head-thumb {
    aspect-ratio: auto;
    max-height: 360px;
    background: var(--c-ink);
    display: flex; align-items: center; justify-content: center;
}
.is-event .article-head-thumb img {
    width: auto; height: auto; max-width: 100%; max-height: 360px;
    object-fit: contain;
}

.article-head-meta {
    display: flex; flex-direction: column; gap: var(--sp-3);
    min-width: 0;
}
.article-head-meta .article-title { font-size: var(--fs-2xl); }
.article-head-split.no-cover .article-head-meta .article-title { font-size: var(--fs-3xl); }
@media (max-width: 720px) {
    .article-head-meta .article-title { font-size: var(--fs-xl); }
}

/* 헤더 — 카테고리 · 제목 · 작성자 byline */
.article-head {
    margin-bottom: var(--sp-5);
    padding-bottom: var(--sp-5);
    border-bottom: 1px solid var(--c-line-soft);
}
.article-cat-row {
    display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap;
    margin-bottom: var(--sp-3);
}
.article-title {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -0.015em;
    color: var(--c-ink);
    margin: 0 0 var(--sp-4);
    word-break: keep-all;
}
@media (max-width: 720px) { .article-title { font-size: 22px; } }

.article-byline {
    display: flex; align-items: center; gap: 10px;
    color: var(--c-muted); font-size: 13.5px;
    flex-wrap: wrap;
}
.article-byline .avatar { flex: 0 0 auto; }
.article-byline .byline-author {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--c-text); font-weight: 600; text-decoration: none;
    border-radius: var(--r-chip);
    padding: 2px 8px 2px 2px;
    margin-left: -2px;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.article-byline a.byline-author:hover {
    background: var(--c-link-lt);
    color: var(--c-navy);
    text-decoration: none;
}
.article-byline a.byline-author:focus-visible {
    outline: none; background: var(--c-link-lt);
    box-shadow: var(--shadow-focus-navy);
}
.article-byline .byline-author.no-link { cursor: default; padding-left: 2px; }
.article-byline .dot { color: var(--c-line); }
.article-byline time { font-variant-numeric: tabular-nums; color: var(--c-muted); }

/* 댓글 아바타 링크 — hover 시 연한 ring */
.comment-avatar-link {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--r-full);
    transition: box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
    flex: 0 0 auto;
}
.comment-avatar-link:hover { transform: scale(1.05); box-shadow: var(--shadow-focus-navy); }
.comment-avatar-link:focus-visible { outline: none; box-shadow: var(--shadow-focus-navy); }

/* 커버 이미지 — figure + img, 둥근 모서리, 16/9 landscape */
.article-cover {
    margin: 0 0 var(--sp-5);
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 16/9;
    max-height: 380px;
    background: var(--c-line-soft);
    position: relative;
}
.article-cover img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    display: block;
}
/* 이벤트 포스터 — contain + letterbox */
.article-card.is-event .article-cover {
    aspect-ratio: auto;
    max-height: 520px;
    background: var(--c-ink);
    display: flex; align-items: center; justify-content: center;
}
.article-card.is-event .article-cover img {
    width: auto; height: auto; max-width: 100%; max-height: 520px;
    object-fit: contain;
}
@media (max-width: 720px) {
    .article-cover { max-height: 280px; }
    .article-card.is-event .article-cover, .article-card.is-event .article-cover img { max-height: 380px; }
}

/* 본문 영역 */
.article-body {
    font-size: 17px;
    line-height: 1.85;
    color: var(--c-text);
    word-break: break-word;
}
.article-body p { margin: 0 0 1.2em; }
.article-body br + br { display: block; margin-top: 0.9em; content: ""; }
.article-body a { color: var(--c-link); text-decoration: underline; text-underline-offset: 0.2em; }
.article-body img { max-width: 100%; height: auto; border-radius: 8px; margin: var(--sp-4) 0; }
.article-body blockquote {
    border-left: 3px solid var(--accent);
    padding: 4px 0 4px 16px;
    margin: 1.2em 0;
    color: var(--c-text);
    background: var(--c-bg);
    border-radius: 0 6px 6px 0;
}
.article-body code { font-size: 0.92em; }
.article-body .article-body-img {
    display: block;
    max-width: 100%; height: auto;
    margin: var(--sp-4) auto;
    border: 1px solid var(--c-line);
}
@media (max-width: 720px) { .article-body { font-size: 16px; line-height: 1.75; } }

/* 이벤트 extras (facts-list + reg-block-lg) */
.article-body-extras { margin-bottom: var(--sp-5); }
.article-body-extras .facts-list { margin-top: 0; }
.article-body-extras .reg-block-lg { margin-top: var(--sp-3); }

/* ============ INLINE SHARE BAR (본문 하단) ============ */
.inline-share-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-3);
    margin-top: var(--sp-6);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--c-line-soft);
}
.inline-share-label { font-size: 12.5px; color: var(--c-muted); font-weight: 500; }
.inline-share-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--c-line);
    background: #fff;
    color: var(--c-text);
    font-size: 13px; font-weight: 600;
    border-radius: var(--r-chip);
    cursor: pointer; font-family: inherit;
    transition: all var(--dur-fast) var(--ease-out);
}
.inline-share-btn:hover {
    border-color: var(--c-navy); color: var(--c-navy); background: var(--c-link-lt);
}
.inline-share-btn:active { transform: scale(0.97); }
.article-card.inline-share-only { padding: var(--sp-3) var(--sp-5); margin-bottom: var(--sp-3); border-radius: var(--r-lg); }
.article-card.inline-share-only .inline-share-bar { margin-top: 0; padding-top: 0; border-top: none; }

/* ============ STUDY 파일 인라인 카드 (본문 위) ============ */
.article-file-inline {
    display: flex; align-items: center; gap: var(--sp-4);
    margin: var(--sp-4) 0 var(--sp-5);
    padding: var(--sp-4) var(--sp-5);
    background: linear-gradient(135deg, var(--c-link-lt) 0%, #f5faff 100%);
    border: 1px solid var(--pin-line);
    border-radius: var(--r-lg);
}
.afi-label {
    flex: 0 0 auto;
    font-size: 12px; font-weight: 700; color: var(--c-navy);
    letter-spacing: 0.03em;
}
.afi-btn {
    flex: 1; min-width: 0;
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-3);
    padding: 10px 14px;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    text-decoration: none; color: var(--c-text);
    transition: all var(--dur-fast) var(--ease-out);
}
.afi-btn:hover { border-color: var(--c-navy); background: var(--c-link-lt); text-decoration: none; }
.afi-name { font-size: 13px; color: var(--c-text); word-break: break-all; }
.afi-cta { font-size: 12px; font-weight: 700; color: var(--c-navy); white-space: nowrap; flex: 0 0 auto; }

/* ============ RELATED POSTS (같은 카테고리 다른 글) ============ */
.related-posts-section {
    margin-top: var(--sp-6);
    padding: var(--sp-5) 0;
}
.related-posts-head {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: var(--sp-4);
}
.related-posts-title {
    font-size: var(--fs-lg); font-weight: 700;
    color: var(--c-ink);
    letter-spacing: var(--ls-lg);
    margin: 0;
}
.related-posts-more {
    font-size: 12.5px; color: var(--c-muted);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);
}
.related-posts-more:hover { color: var(--c-navy); text-decoration: underline; }

.related-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    gap: var(--sp-3);
}
.related-card {
    display: flex; flex-direction: column; gap: 8px;
    padding: var(--sp-4);
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    text-decoration: none; color: inherit;
    min-height: 110px;
    transition: border-color var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
    .related-card:hover {
        border-color: var(--c-ink);
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
        text-decoration: none;
    }
}
.related-top {
    display: flex; justify-content: space-between; align-items: center;
    min-height: 20px;
}
.related-subtag {
    font-size: 11px; color: var(--c-muted);
    font-weight: 500;
}
.related-pin { color: var(--pin-ink); display: inline-flex; }
.related-title {
    font-size: 14px; font-weight: 700; color: var(--c-ink);
    line-height: 1.4; margin: 0;
    letter-spacing: var(--ls-base);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    word-break: keep-all;
}
.related-meta {
    margin-top: auto;
    display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
    font-size: 11.5px; color: var(--c-muted);
}
.related-meta .dot { color: var(--c-line); }

/* ============ ASIDE BLOCK — 공통 리스트형 블록 (관련글·과거이벤트·이벤트 RSVP 공통) ============ */
.aside-block {
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    padding: var(--sp-4) var(--sp-5);
    margin-bottom: var(--sp-3);
    transition: border-color var(--dur-fast) var(--ease-out);
}
.aside-block-title {
    font-size: 11.5px;
    color: var(--c-muted);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 var(--sp-3);
}
.aside-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column;
}
.aside-list-item {
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--c-line-soft);
}
.aside-list-item:first-child { padding-top: 0; }
.aside-list-item:last-child { border-bottom: none; padding-bottom: 0; }
.aside-list-item a {
    display: block; text-decoration: none; color: inherit;
    transition: color var(--dur-fast) var(--ease-out);
}
.aside-list-item a:hover { text-decoration: none; color: var(--c-navy); }
.aside-list-item .il-title {
    font-size: 13.5px; font-weight: 600; color: var(--c-ink);
    line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    word-break: keep-all;
    letter-spacing: var(--ls-base);
}
.aside-list-item .il-pin {
    display: inline-flex; color: var(--pin-ink); margin-right: 4px;
    vertical-align: -1px;
}
.aside-list-item .il-meta {
    font-size: 11.5px; color: var(--c-muted);
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}
.aside-list-item.is-past { opacity: 0.75; }
.aside-block-more {
    display: block;
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--c-line-soft);
    font-size: 12px; color: var(--c-muted);
    text-decoration: none;
    text-align: center;
    transition: color var(--dur-fast) var(--ease-out);
}
.aside-block-more:hover { color: var(--c-navy); }

/* ============ ASIDE — 저자 · 공유 · 이벤트 summary ============ */
.article-aside {
    display: flex; flex-direction: column;
    gap: var(--sp-3);
    position: sticky;
    top: calc(60px + var(--sp-3));   /* sticky 헤더 높이 + 여유 */
    align-self: start;
}
@media (max-width: 900px) {
    .article-aside { position: static; }
}

.aside-card {
    background: #fff;
    border-radius: 12px;
    padding: var(--sp-5);
    box-shadow: var(--shadow-sm);
}

/* 저자 카드 — 소프트 그라디언트 배경 */
.aside-author-card {
    text-align: center;
    background: linear-gradient(160deg, var(--pin) 0%, #f5faff 100%);
}
.aside-author-card .avatar {
    margin: 0 auto var(--sp-3);
    width: 72px; height: 72px;
    font-size: 28px;
    box-shadow: var(--shadow-sm);
}
.aside-author-name {
    font-size: 17px; font-weight: 700;
    color: var(--c-ink); margin-bottom: 2px;
}
.aside-author-handle {
    font-size: 12.5px; color: var(--c-muted); margin-bottom: var(--sp-2);
    font-variant-numeric: tabular-nums;
}
.aside-author-tagline {
    font-size: 13px; color: var(--c-text); line-height: 1.55;
    margin: var(--sp-2) 0 var(--sp-3);
}
.aside-author-link {
    display: inline-block;
    padding: 8px 18px; font-size: 12.5px; font-weight: 600;
    color: var(--c-navy); text-decoration: none;
    background: #fff; border-radius: 8px; border: 1px solid var(--pin-line);
    transition: all var(--dur-fast) var(--ease-out);
}
.aside-author-link:hover { background: var(--c-navy); color: #fff; text-decoration: none; border-color: var(--c-navy); }

/* 이벤트 RSVP aside (신규 통합) — aside-block 확장 */
.aside-block.aside-event-rsvp {
    padding: var(--sp-5);
}
.aside-rsvp-action {
    margin-top: var(--sp-3);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--c-line-soft);
}
.aside-rsvp-title {
    font-size: var(--fs-md);
    color: var(--c-ink);
    font-weight: 700;
    margin: 0 0 var(--sp-3);
    letter-spacing: var(--ls-md);
}

/* 이벤트 요약 카드 (legacy — 호환용) */
.aside-event-card {
    background: #fff;
    border-top: 4px solid var(--accent);
    box-shadow: var(--shadow-md);
}
.aside-event-dday {
    display: inline-block;
    padding: 4px 11px;
    background: var(--accent); color: #fff;
    font-size: 11px; font-weight: 700;
    border-radius: 6px; letter-spacing: 0.1em;
    font-variant-numeric: tabular-nums;
    margin-bottom: var(--sp-3);
    box-shadow: 0 2px 6px rgba(16,185,129,0.25);
}
.aside-event-facts {
    display: flex; flex-direction: column; gap: var(--sp-3);
    font-size: 13.5px; color: var(--c-text);
    margin-bottom: var(--sp-3);
    padding-bottom: var(--sp-3);
    border-bottom: 1px dashed var(--c-line);
}
.aside-event-facts .fact-label {
    color: var(--c-muted); font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.06em;
    margin-bottom: 2px; font-weight: 600;
}
.aside-event-seats { margin-bottom: var(--sp-3); font-size: 12.5px; }
.aside-event-seats .reg-row { font-weight: 500; }
.aside-event-seats .seat-progress { margin-top: 6px; height: 6px; }
.aside-event-rsvp-btn {
    display: block; width: 100%;
    padding: 12px; font-weight: 700; font-size: 14px;
    background: var(--c-brand); color: #fff;
    border: none; border-radius: 8px;
    text-align: center; text-decoration: none;
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-out);
    box-shadow: 0 2px 6px rgba(16,185,129,0.18);
}
.aside-event-rsvp-btn:hover {
    background: var(--c-brand-dk); color: #fff; text-decoration: none;
    transform: translateY(-1px); box-shadow: 0 4px 10px rgba(16,185,129,0.25);
}

/* 공유 카드 */
.aside-share-label {
    font-size: 11px; font-weight: 700;
    color: var(--c-muted);
    text-transform: uppercase; letter-spacing: 0.06em;
    margin-bottom: var(--sp-2);
}
.aside-share-buttons { display: flex; gap: var(--sp-2); }
.share-btn {
    flex: 1; padding: 10px 12px;
    border: 1px solid var(--c-line); background: #fff;
    border-radius: 8px;
    font-size: 12.5px; font-weight: 500;
    color: var(--c-text);
    cursor: pointer; font-family: inherit;
    transition: all var(--dur-fast) var(--ease-out);
}
.share-btn:hover {
    border-color: var(--c-navy); color: var(--c-navy);
    background: var(--c-link-lt);
}

/* RSVP 박스 (aside 내 신청 폼) */
.aside-rsvp-box {
    border-top: 3px solid var(--c-brand);
}
.aside-rsvp-title {
    font-size: 15px;
    color: var(--c-ink);
    margin: 0 0 var(--sp-3);
    font-weight: 700;
}
.aside-rsvp-form .form-row { margin-bottom: var(--sp-3); }
.aside-rsvp-form .form-row label { font-size: 12px; color: var(--c-text); font-weight: 600; margin-bottom: 4px; }
.aside-rsvp-form input, .aside-rsvp-form textarea {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--c-line); background: #fff;
    font-size: 14px; font-family: inherit;
    border-radius: 6px; outline: none;
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.aside-rsvp-form input:focus, .aside-rsvp-form textarea:focus {
    border-color: var(--c-brand);
    box-shadow: var(--shadow-focus);
}
.aside-rsvp-cancel-btn {
    display: block; width: 100%;
    padding: 9px 12px; font-size: 13px; font-weight: 600;
    background: #fff; color: var(--c-err);
    border: 1px solid var(--c-err); border-radius: 8px;
    cursor: pointer; font-family: inherit;
    transition: all var(--dur-fast) var(--ease-out);
    margin-top: var(--sp-2);
}
.aside-rsvp-cancel-btn:hover { background: var(--c-err-bg); }
.rsvp-msg {
    padding: var(--sp-3);
    background: var(--c-bg);
    border-radius: 8px;
    font-size: 13.5px; color: var(--c-muted);
    text-align: center;
    margin-bottom: var(--sp-2);
}
.rsvp-msg.rsvp-msg-ok  { background: var(--c-ok-bg);  color: var(--c-ok);  font-weight: 600; }
.rsvp-msg.rsvp-msg-err { background: var(--c-err-bg); color: var(--c-err); font-weight: 600; }
.rsvp-msg small { font-weight: 400; opacity: 0.8; font-size: 11.5px; }
.rsvp-hint {
    font-size: 12.5px; color: var(--c-muted);
    margin-bottom: var(--sp-2); line-height: 1.5;
}

/* 첨부 파일 카드 (study) */
.aside-file-card .aside-file-name {
    font-size: 11px; color: var(--c-muted);
    margin-top: var(--sp-2); word-break: break-all;
    text-align: center;
}

/* ========= LEGACY — 기존 `.detail-hero` 는 유지 (과도기 호환) ========= */
.detail-hero {
    margin: 0 auto var(--sp-5);
    max-width: 900px;
}

/* 상단 카드 — 커버 이미지 + 제목 패널 */
.hero-head {
    background: #fff; border: 1px solid var(--c-line);
    margin-bottom: var(--sp-5); overflow: hidden;
    transition: border-color var(--dur-base) var(--ease-out);
}

/* 커버 이미지 — 기본 16/9 landscape (비이벤트) */
.detail-cover {
    width: 100%; aspect-ratio: 16/9;
    max-height: 400px;
    background: var(--c-line-soft);
    overflow: hidden;
    position: relative;
}
.detail-cover img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    display: block;
}

/* 이벤트 상세 — 세로형 포스터 허용 (letterbox + contain) */
.detail-hero.is-event .detail-cover {
    aspect-ratio: auto;
    max-height: 540px;
    display: flex; align-items: center; justify-content: center;
    background: var(--c-ink);
}
.detail-hero.is-event .detail-cover img {
    width: auto; height: auto;
    max-width: 100%; max-height: 540px;
    object-fit: contain;
}

/* 제목 패널 — 기본 (커버 없을 때 전체 너비) */
.hero-title {
    padding: var(--sp-5) var(--sp-6);
    display: flex; flex-direction: column; gap: var(--sp-2);
}
.hero-title .cat-row {
    display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap;
    margin-bottom: 4px;
}
.hero-title h1 {
    font-size: 26px; line-height: 1.3; margin: 0;
    color: var(--c-ink); letter-spacing: -0.005em;
}
.hero-title .meta {
    color: var(--c-muted); font-size: 13px;
    display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center;
    margin-top: 4px;
}
.hero-title .meta a { color: var(--c-text); font-weight: 600; }

/* 데스크톱: 커버 좌 · 제목 우 grid */
@media (min-width: 901px) {
    .hero-head.has-cover {
        display: grid;
        grid-template-columns: minmax(0, 58%) 1fr;
        align-items: stretch;
    }
    .hero-head.has-cover .hero-title {
        border-left: 1px solid var(--c-line);
        min-width: 0;
        justify-content: center;
    }
    .hero-head.has-cover .hero-title h1 { font-size: 24px; }
}

/* 모바일: 커버 위에 제목 오버레이 (샘플 카드 스타일) */
@media (max-width: 900px) {
    .hero-head.has-cover { position: relative; }
    .hero-head.has-cover .detail-cover { max-height: 340px; }
    .hero-head.has-cover .detail-cover::after {
        content: "";
        position: absolute; inset: 0;
        background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.35) 48%, transparent 85%);
        pointer-events: none; z-index: 1;
    }
    .hero-head.has-cover .hero-title {
        position: absolute; left: 0; right: 0; bottom: 0;
        padding: var(--sp-4);
        color: #fff; z-index: 2;
    }
    .hero-head.has-cover .hero-title h1 {
        color: #fff; font-size: 20px;
        text-shadow: 0 1px 3px rgba(0,0,0,0.4);
    }
    .hero-head.has-cover .hero-title .meta { color: rgba(255,255,255,0.92); }
    .hero-head.has-cover .hero-title .meta a { color: #fff; }
    .hero-head.has-cover .hero-title .cat {
        background: rgba(255,255,255,0.95);
        color: var(--c-ink);
        border-color: rgba(255,255,255,0.95);
    }
    .hero-head.has-cover .hero-title .subtag { color: rgba(255,255,255,0.85); }
}

/* 본문 영역 — 가독성 위한 max-width 700px 중앙 정렬 */
.detail-body {
    padding: 0;
    margin-bottom: var(--sp-5);
}
.detail-body .body-text {
    max-width: 700px; margin: var(--sp-5) auto 0;
    padding: 0 var(--sp-4);
    font-size: 17px; line-height: 1.85;
    color: var(--c-text);
    word-break: break-word; white-space: normal;
}
.detail-body .body-text p { margin: 0 0 1.15em; }
.detail-body .body-text br + br { display: block; margin-top: 0.9em; content: ""; }
.detail-body .body-text img { max-width: 100%; height: auto; border-radius: 4px; margin: var(--sp-4) 0; }
.detail-body .body-text a { color: var(--c-link); text-decoration: underline; text-underline-offset: 0.2em; }
.detail-body .facts-list,
.detail-body .reg-block-lg {
    max-width: 760px; margin-left: auto; margin-right: auto;
}

@media (max-width: 900px) {
    .detail-body .body-text { font-size: 16px; line-height: 1.75; padding: 0 var(--sp-3); }
    .detail-cover { max-height: 340px; }
    .detail-hero.is-event .detail-cover,
    .detail-hero.is-event .detail-cover img { max-height: 420px; }
    .hero-title h1 { font-size: 20px; }
}

.facts-list {
    display: grid; grid-template-columns: 90px 1fr; gap: 10px 18px;
    padding: var(--sp-4); background: var(--c-line-soft);
    margin: var(--sp-4) 0;
    font-size: 14px;
}
.facts-list dt { color: var(--c-muted); font-weight: 600; }
.facts-list dd { margin: 0; color: var(--c-text); }

.reg-block-lg {
    margin: var(--sp-5) 0;
    padding: var(--sp-5);
    background: var(--pin);
    border-radius: var(--r-block);
    border: 1px solid var(--pin-line);
}
.reg-block-lg h3 { font-size: 15px; color: var(--pin-ink); margin: 0 0 var(--sp-3); }
.reg-block-lg .reg-row { font-size: 14px; }
.reg-block-lg .seat-progress { height: 6px; margin-top: 6px; }

/* ============ ADMIN TOOLBAR — 사이트 팔레트(pin + navy) 통일 디자인 ============ */
.admin-toolbar {
    margin: 0 0 var(--sp-4);
    padding: var(--sp-2) var(--sp-4);
    background: var(--pin);
    border-left: 3px solid var(--c-navy);
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    font-size: 13px;
    color: var(--pin-ink);
}
.admin-toolbar-head {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    flex-shrink: 0;
}
.admin-toolbar-label {
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--c-navy);
}
.admin-toolbar-status {
    font-size: 11px; font-weight: 600;
    padding: 2px 9px; border-radius: 999px;
    background: rgba(27, 58, 92, 0.12);
    color: var(--pin-ink);
    letter-spacing: 0.04em;
}
.admin-toolbar-status.is-pinned {
    background: var(--c-brand); color: #fff;
}
.admin-toolbar-actions {
    display: inline-flex; flex-wrap: wrap; align-items: center;
    gap: var(--sp-2);
}
.admin-toolbar .form-inline { display: inline-flex; align-items: center; gap: 6px; }
.admin-toolbar-btn {
    padding: 5px 12px;
    background: var(--c-surface);
    border: 1px solid var(--pin-line);
    color: var(--pin-ink);
    font-size: 12px; font-weight: 600;
    cursor: pointer; text-decoration: none;
    transition: background var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}
.admin-toolbar-btn:hover {
    background: var(--c-navy); border-color: var(--c-navy);
    color: #fff; text-decoration: none;
}
.admin-toolbar-btn.is-active {
    background: var(--c-navy); border-color: var(--c-navy); color: #fff;
}
.admin-toolbar-btn.is-active:hover { background: #0f2440; border-color: #0f2440; }
.admin-toolbar-size {
    background: var(--c-surface);
    border: 1px solid var(--pin-line);
    padding: 3px 4px 3px 10px;
}
.admin-toolbar-size-label {
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--c-muted);
}
.admin-toolbar-size select {
    border: 0; background: transparent;
    font-size: 12px; font-weight: 600;
    color: var(--pin-ink); cursor: pointer;
    padding: 2px 6px;
    -webkit-appearance: menulist-button;
}

@media (max-width: 720px) {
    .admin-toolbar { padding: var(--sp-2) var(--sp-3); gap: var(--sp-2); }
    .admin-toolbar-actions { width: 100%; }
}

/* 레거시 btn-pinned 클래스는 admin-toolbar-btn.is-active 로 대체됨 — 기타 호출처에서 여전히 사용될 수 있어 최소 정의 유지 */
.btn-pinned {
    background: var(--c-navy); color: #fff; border-color: var(--c-navy);
    font-size: 13px; padding: 7px 12px; cursor: pointer;
}

/* ============ ORGANIZER EVENTS (/me 내가 운영하는 이벤트) ============ */
.organizer-events {
    background: #fff;
    border: 1px solid var(--c-navy);
    border-top: 3px solid var(--c-navy);
    padding: var(--sp-5);
    margin-bottom: var(--sp-5);
}
.organizer-head { margin-bottom: var(--sp-4); }
.organizer-head h2 { font-size: 18px; color: var(--c-navy); margin: 0 0 4px; }
.organizer-head .count { color: var(--c-muted); font-weight: 500; }
.organizer-head .organizer-sub { font-size: 13px; color: var(--c-muted); }

.organizer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: var(--sp-3);
}
.organizer-card {
    background: var(--c-line-soft);
    border: 1px solid var(--c-line);
    padding: var(--sp-3) var(--sp-4);
    display: flex; flex-direction: column; gap: var(--sp-2);
    transition: border-color var(--dur-fast) var(--ease-out);
}
.organizer-card:hover { border-color: var(--c-navy); }
.organizer-card.is-past { opacity: 0.7; background: #fafafa; }

.oe-top { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.oe-dday {
    display: inline-block; padding: 2px 8px;
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em;
    background: var(--accent); color: #fff;
    border-radius: 6px; font-variant-numeric: tabular-nums;
}
.oe-dday.past { background: var(--c-muted); }
.oe-title {
    font-size: 14.5px; font-weight: 700; color: var(--c-ink);
    text-decoration: none;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.oe-title:hover { color: var(--c-navy); text-decoration: underline; }
.oe-meta { font-size: 12px; color: var(--c-muted); line-height: 1.5; }
.oe-stats {
    display: flex; gap: var(--sp-3); flex-wrap: wrap;
    font-size: 12px; color: var(--c-muted);
    padding: var(--sp-2) 0;
    border-top: 1px dashed var(--c-line);
}
.oe-stats b { color: var(--c-ink); font-variant-numeric: tabular-nums; }
.oe-actions {
    display: flex; gap: var(--sp-2); margin-top: auto;
}
.oe-actions .btn-sm, .oe-actions .btn-outline-sm { flex: 0 0 auto; min-height: 32px; padding: 4px 10px; font-size: 12px; }

/* ============ ORGANIZER LINK BAR (이벤트 상세 페이지 하단 링크) ============ */
.organizer-link-bar {
    margin: var(--sp-5) 0;
    padding: var(--sp-3) var(--sp-4);
    background: #fff7ed; border: 1px dashed #fb923c; border-radius: 8px;
    display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
    font-size: 13px; color: #9a3412;
}
.organizer-link-bar .btn-sm { margin-left: auto; }

/* ============ EVENT UNIFIED CARD — 통합 이벤트 카드 (본문 위, facts + 신청 + 공유 하나로) ============ */
.event-unified-card {
    background: #fff;
    border: 1px solid var(--c-line);
    border-top: 3px solid var(--c-brand);
    border-radius: var(--r-xl);
    overflow: hidden;
    margin-bottom: var(--sp-5);
    box-shadow: var(--shadow-sm);
}
.event-unified-card > div { padding: var(--sp-5) var(--sp-6); }
.event-unified-card > div + div { border-top: 1px solid var(--c-line-soft); }
@media (max-width: 720px) {
    .event-unified-card > div { padding: var(--sp-4); }
    .event-unified-card { border-radius: var(--r-lg); }
}

.euc-section-title {
    font-size: var(--fs-lg); color: var(--c-ink);
    margin: 0 0 var(--sp-3); font-weight: 700;
    letter-spacing: var(--ls-lg);
}
.euc-dday {
    display: inline-block; padding: 4px 11px;
    background: var(--accent); color: #fff;
    font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
    border-radius: var(--r-md);
    font-variant-numeric: tabular-nums;
    margin-bottom: var(--sp-3);
    box-shadow: 0 2px 6px rgba(16,185,129,0.2);
}
.euc-facts-list {
    display: grid; grid-template-columns: 72px 1fr;
    gap: 8px 16px;
    margin: 0 0 var(--sp-3);
    font-size: 14px;
}
.euc-facts-list dt { color: var(--c-muted); font-weight: 600; font-size: 12px;
    text-transform: uppercase; letter-spacing: 0.05em; padding-top: 2px; }
.euc-facts-list dd { margin: 0; color: var(--c-text); font-weight: 500; }
@media (max-width: 560px) {
    .euc-facts-list { grid-template-columns: 60px 1fr; gap: 6px 12px; font-size: 13px; }
}
.euc-seats {
    margin-top: var(--sp-3); padding-top: var(--sp-3);
    border-top: 1px dashed var(--c-line);
    font-size: 13px;
}
.euc-seats .reg-row { font-weight: 500; }
.euc-seats .seat-progress { margin-top: 8px; height: 6px; }

.euc-rsvp-form .form-row { margin-bottom: var(--sp-3); }
.euc-rsvp-form input, .euc-rsvp-form textarea {
    width: 100%; padding: 10px 12px;
    border: 1px solid var(--c-line); background: #fff;
    font-size: 15px; border-radius: var(--r-md);
    font-family: inherit; outline: none;
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.euc-rsvp-form input:focus, .euc-rsvp-form textarea:focus {
    border-color: var(--c-brand); box-shadow: var(--shadow-focus);
}
.euc-share { display: flex; align-items: center; gap: var(--sp-3); }
.euc-share .aside-share-label { margin: 0; flex: 0 0 auto; }
.euc-share .share-btn { flex: 1; }

/* 카테고리 pill 링크화 — <a> 또는 [role=link] span */
a.cat, .cat-clickable {
    text-decoration: none;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
a.cat:hover, .cat-clickable:hover { background: var(--c-line-soft); border-color: var(--c-ink); text-decoration: none; color: var(--c-ink); }
.cat-clickable:focus-visible { outline: none; box-shadow: var(--shadow-focus-navy); border-color: var(--c-navy); }

a.subtag { text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a.subtag:hover { color: var(--c-navy); text-decoration: underline; text-underline-offset: 0.15em; }

/* ============ MY NOTIFICATIONS (/me 내 글에 달린 댓글 풀 리스트) ============ */
.my-notifications {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    padding: var(--sp-5);
    margin-bottom: var(--sp-5);
}
.my-notifications-head { margin-bottom: var(--sp-4); }
.my-notifications-head h2 { font-size: 18px; color: var(--c-ink); margin: 0 0 4px; font-weight: 700; letter-spacing: -0.012em; }
.my-notifications-head .count { color: var(--c-muted); font-weight: 500; font-size: 14px; }
.my-notifications-head .my-notifications-sub { font-size: 13px; color: var(--c-muted); }

.my-notifications-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 0;
}
.my-notif-item {
    border-top: 1px solid var(--c-line-soft);
}
.my-notif-item:first-child { border-top: 0; }
.my-notif-link {
    display: block; padding: var(--sp-3) 0;
    text-decoration: none; color: inherit;
    transition: background var(--dur-fast) var(--ease-out), padding-left var(--dur-fast) var(--ease-out);
}
.my-notif-link:hover {
    background: var(--c-bg); text-decoration: none;
    padding-left: var(--sp-2);
}
.my-notif-top {
    display: flex; align-items: center; gap: var(--sp-2); margin-bottom: 6px;
}
.my-notif-head {
    display: flex; align-items: baseline; gap: var(--sp-2); flex: 1; min-width: 0;
}
.my-notif-name { font-size: 13.5px; font-weight: 600; color: var(--c-ink); }
.my-notif-ago  { font-size: 11.5px; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.my-notif-body {
    margin: 0 0 6px 40px;
    font-size: 13px; color: var(--c-text); line-height: 1.55;
    font-style: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.my-notif-post {
    margin-left: 40px;
    font-size: 12px; color: var(--c-muted);
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}

@media (max-width: 640px) {
    .my-notifications { padding: var(--sp-4); }
    .my-notif-body, .my-notif-post { margin-left: 0; }
}

/* ============ UPCOMING REMINDER (/me 예정 이벤트 강조) ============ */
.upcoming-reminder {
    background: linear-gradient(135deg, var(--pin) 0%, #f0fdf4 100%);
    border: 1px solid var(--pin-line);
    padding: var(--sp-5);
    margin-bottom: var(--sp-5);
}
.upcoming-head { margin-bottom: var(--sp-4); }
.upcoming-head h2 { font-size: 18px; color: var(--pin-ink); margin: 0 0 4px; }
.upcoming-head .count { color: var(--c-muted); font-weight: 500; }
.upcoming-head .upcoming-sub { font-size: 13px; color: var(--c-muted); }

.upcoming-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: var(--sp-3);
}
.upcoming-card {
    display: flex; gap: var(--sp-3);
    background: #fff; border: 1px solid var(--c-line);
    padding: 0; overflow: hidden;
    text-decoration: none; color: inherit;
    transition: border-color var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out);
    min-height: 110px;
}
@media (hover: hover) {
    .upcoming-card:hover {
        border-color: var(--c-ink); transform: translateY(-2px);
        box-shadow: var(--shadow-md); text-decoration: none;
    }
}
.upcoming-card.is-soon { border-color: var(--c-brand); border-width: 2px; }
.upcoming-thumb {
    width: 96px; flex: 0 0 96px;
    background-size: cover; background-position: center;
    background-color: var(--c-line-soft);
}
.upcoming-thumb-placeholder { background: linear-gradient(135deg, var(--pin), #dfe6ef); }
.upcoming-body {
    flex: 1; padding: var(--sp-3); min-width: 0;
    display: flex; flex-direction: column; gap: 4px;
}
.upcoming-dday {
    display: inline-block; padding: 2px 8px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
    background: var(--accent); color: #fff;
    border-radius: 6px; align-self: flex-start;
    font-variant-numeric: tabular-nums;
}
.upcoming-card.is-soon .upcoming-dday { animation: pulse 2s var(--ease-in-out) infinite; }
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45); }
    50%      { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
}
.upcoming-title {
    font-size: 14px; font-weight: 700; color: var(--c-ink);
    line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.upcoming-facts {
    font-size: 11.5px; color: var(--c-muted); line-height: 1.5;
    margin-top: auto;
}
.upcoming-facts div { display: block; }

/* ============ EVENT ADMIN (신청자 관리, 이벤트 등록자/관리자 전용) ============ */
.event-admin-section {
    margin: var(--sp-6) auto var(--sp-5);
    max-width: 1060px;
    background: #fff; border: 1px solid var(--c-line);
    padding: var(--sp-5);
}
.event-admin-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4);
    padding-bottom: var(--sp-3); border-bottom: 1px solid var(--c-line);
}
.notify-details { position: relative; }
.notify-details > summary { list-style: none; cursor: pointer; user-select: none; }
.notify-details > summary::-webkit-details-marker { display: none; }
.notify-details[open] > summary { background: var(--c-link-lt); border-color: var(--c-navy); color: var(--c-navy); }
.notify-form {
    position: absolute; right: 0; top: calc(100% + var(--sp-2)); z-index: 20;
    background: #fff; border: 1px solid var(--c-line);
    padding: var(--sp-4); min-width: 420px; max-width: 560px;
    box-shadow: var(--shadow-lg);
    animation: menuDrop var(--dur-base) var(--ease-out) both;
}
@media (max-width: 720px) {
    .notify-form { position: static; min-width: 0; box-shadow: none; margin-top: var(--sp-3); }
}
.notify-form .form-row { margin-bottom: var(--sp-3); }
.notify-form textarea { min-height: 120px; }

.attendees-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.attendees-table th, .attendees-table td {
    border-bottom: 1px solid var(--c-line-soft); padding: 10px 8px;
    text-align: left; vertical-align: middle;
}
.attendees-table th { background: var(--c-line-soft); font-weight: 600; color: var(--c-navy); font-size: 12px; }
.attendees-table tr:hover { background: var(--c-link-lt); }

.attend-badge {
    display: inline-block; padding: 3px 10px; font-size: 11px; font-weight: 700;
    border-radius: var(--r-chip); letter-spacing: 0.04em;
}
.attend-badge.badge-ok     { background: var(--c-ok-bg);  color: var(--c-ok); }
.attend-badge.badge-cancel { background: var(--c-err-bg); color: var(--c-err); }
.attend-badge.badge-wait   { background: #fef3c7; color: #92400e; }

/* ============ COMMENTS ============ */
.comments-section {
    margin: var(--sp-6) 0 0;
    background: #fff;
    border-radius: 12px;
    padding: var(--sp-5) var(--sp-6);
    box-shadow: var(--shadow-sm);
}
/* article-layout 밖에서 호출되는 경우(구 페이지) 에는 중앙 정렬 */
.article-main .comments-section { margin: var(--sp-5) 0 0; }
@media (max-width: 720px) {
    .comments-section { padding: var(--sp-4) var(--sp-4); border-radius: 10px; }
}
.comments-section h3 { font-size: 16px; color: var(--c-navy); margin-bottom: var(--sp-4); }
.comment {
    display: flex; gap: var(--sp-3); padding: var(--sp-3) 0;
    border-top: 1px solid var(--c-line-soft);
}
.comment:first-child { border-top: none; padding-top: 0; }
.comment-body-box { flex: 1; }
.comment-head { display: flex; gap: 10px; align-items: baseline; margin-bottom: 4px; }
.comment-author { font-weight: 600; color: var(--c-ink); font-size: 13px; }
.comment-time { color: var(--c-muted); font-size: 12px; }
.comment-body { color: var(--c-text); font-size: 14px; }
.comment-form { margin-top: var(--sp-4); }
.comment-form textarea {
    width: 100%; padding: 10px 12px; border: 1px solid var(--c-line);
    font-family: inherit; font-size: 14px; resize: vertical; min-height: 80px; outline: none;
}
.comment-form textarea:focus { border-color: var(--c-brand); }
.comment-form .actions { margin-top: var(--sp-2); display: flex; justify-content: flex-end; }

/* ============ FORMS (login/signup/write/me) ============ */
.form-card {
    max-width: 480px; margin: 40px auto;
    background: #fff; border: 1px solid var(--c-line); padding: var(--sp-6);
}
.form-card.lg { max-width: 760px; }
.form-card h1 { font-size: 20px; color: var(--c-navy); margin-bottom: var(--sp-4); }
.form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sp-4); }
.form-row label { font-size: 13px; font-weight: 600; color: var(--c-text); }
.form-row input[type=text], .form-row input[type=email], .form-row input[type=password],
.form-row input[type=url], .form-row input[type=date], .form-row input[type=datetime-local],
.form-row input[type=number], .form-row input[type=search], .form-row input[type=tel],
.form-row select, .form-row textarea {
    padding: 10px 12px; border: 1px solid var(--c-line); font-size: 16px;
    font-family: inherit; outline: none; background: #fff;
    -webkit-appearance: none; appearance: none;
    transition: border-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
    border-color: var(--c-brand);
    box-shadow: var(--shadow-focus);
}
.form-row .hint { font-size: 12px; color: var(--c-muted); }
.form-row textarea { min-height: 120px; resize: vertical; }
.form-actions { display: flex; gap: var(--sp-3); align-items: center; margin-top: var(--sp-4); }
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 10px 18px; border: 1px solid var(--c-brand);
    background: var(--c-brand); color: #fff; font-weight: 600; font-size: 14px;
    text-decoration: none; cursor: pointer;
    min-height: 44px; white-space: nowrap;
    transition: background var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--c-brand-dk); border-color: var(--c-brand-dk); color: #fff; text-decoration: none; box-shadow: var(--shadow-md); }
.btn:active { transform: scale(0.98); box-shadow: var(--shadow-sm); }
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn-outline { background: #fff; color: var(--c-brand); }
.btn-outline:hover { background: var(--c-brand-lt); border-color: var(--c-brand-dk); color: var(--c-brand-dk); text-decoration: none; }
.btn-outline:active { transform: scale(0.98); }
.btn-danger { background: var(--c-err); border-color: var(--c-err); color: #fff; }
.btn-danger:hover { background: #7f1d1d; border-color: #7f1d1d; color: #fff; }
.btn-lg { padding: 12px 22px; font-size: 15px; }

.form-card .help { font-size: 13px; color: var(--c-muted); margin-top: var(--sp-4); text-align: center; }
.form-card .help a { color: var(--c-brand); }

/* ============ EMAIL VERIFY (signup 인라인 인증) ============ */
.email-verify-row {
    display: flex; gap: var(--sp-2); align-items: stretch;
    margin-bottom: var(--sp-2);
}
.email-verify-row input[type=email],
.email-verify-row input[type=text] {
    flex: 1 1 auto; min-width: 0;
    padding: 10px 12px; border: 1px solid var(--c-line);
    font-size: 16px; font-family: inherit; outline: none; background: #fff;
    -webkit-appearance: none; appearance: none;
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.email-verify-row input:focus { border-color: var(--c-brand); box-shadow: var(--shadow-focus); }
.email-verify-row input[readonly] {
    background: var(--c-line-soft); color: var(--c-muted); cursor: not-allowed;
}
.email-verify-row button {
    flex: 0 0 auto; white-space: nowrap;
    min-height: 44px; padding: 0 14px;
}
.email-verify-row button[disabled] {
    background: var(--c-line-soft); color: var(--c-muted);
    border-color: var(--c-line); cursor: not-allowed;
}
[hidden] { display: none !important; }

.verify-badge {
    display: inline-block; margin-left: 8px;
    padding: 2px 8px; font-size: 11px; font-weight: 700;
    background: var(--c-brand-lt); color: var(--c-brand-dk);
    border-radius: var(--r-chip); letter-spacing: 0.03em;
}
.hint.hint-ok  { color: var(--c-ok); font-weight: 500; }
.hint.hint-err { color: var(--c-err); font-weight: 500; }

/* ============ WRITE PAGE — Libretto 참고 에디터 레이아웃 ============ */
.is-write-page .main-content { padding-bottom: 120px; }   /* sticky action bar 자리 확보 */

.write-layout {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 var(--sp-4);
}

/* 타입 탭 — 카테고리 선택: 얇은 세그먼티드 컨트롤 (본문에 집중) */
.write-type-tabs {
    display: inline-flex; align-items: stretch; gap: 0;
    padding: 3px;
    background: var(--c-line-soft);
    border: 1px solid var(--c-line);
    margin-bottom: var(--sp-5);
    font-size: 0;  /* inline gap 제거 */
}
.write-type-tab {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 14px;
    background: transparent; border: 0;
    text-decoration: none; color: var(--c-muted);
    font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em;
    cursor: pointer; white-space: nowrap;
    transition: color var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out);
}
.write-type-tab::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: var(--c-muted); flex-shrink: 0;
    transition: background var(--dur-fast) var(--ease-out);
}
.write-type-tab.cat-networking::before { background: var(--cat-net); }
.write-type-tab.cat-talks::before      { background: var(--cat-talks); }
.write-type-tab.cat-resources::before  { background: var(--cat-res); }
.write-type-tab:hover { color: var(--c-ink); text-decoration: none; background: rgba(255,255,255,0.55); }
.write-type-tab.is-active {
    background: var(--c-surface); color: var(--c-ink);
    box-shadow: 0 1px 2px rgba(10,10,10,0.06);
}
.write-type-tab .tab-sub { font-size: 11.5px; color: var(--c-muted); font-weight: 500; letter-spacing: 0; }
.write-type-tab.is-active .tab-sub { color: var(--c-ink-2); }
@media (max-width: 720px) {
    .write-type-tabs { display: flex; width: 100%; }
    .write-type-tab { flex: 1; justify-content: center; padding: 8px 10px; }
    .write-type-tab .tab-sub { display: none; }
}

/* 편집 모드 인디케이터 */
.write-edit-indicator {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--c-line-soft);
    border-radius: var(--r-md);
    margin-bottom: var(--sp-5);
    font-size: 13px; color: var(--c-muted);
}

/* 2열 레이아웃 — 좌측 메인 에디터 · 우측 사이드바 (커버 + byline, sticky) */
.write-layout-2col {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--sp-5);
    margin-bottom: var(--sp-4);
}
@media (max-width: 960px) {
    .write-layout-2col { grid-template-columns: 1fr; gap: var(--sp-4); }
}
.write-main-col {
    min-width: 0;
    display: flex; flex-direction: column;
    gap: var(--sp-3);
    background: #fff;
    border: 1px solid var(--c-line);
    padding: 40px 56px;
}
@media (max-width: 720px) {
    .write-main-col { padding: 24px 20px; }
}
.write-side-col { min-width: 0; }
.write-side-inner {
    position: sticky; top: 88px;
    display: flex; flex-direction: column; gap: var(--sp-3);
    padding: var(--sp-4);
    background: #fff;
    border: 1px solid var(--c-line);
}
@media (max-width: 960px) {
    .write-side-inner { position: static; top: auto; }
}

/* ============ WRITE HERO — detail .pd-hero 와 동일 구조 (cover 좌 + 메타 우) ============ */
.write-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    background: #fff;
    border: 1px solid var(--c-line);
    margin-bottom: var(--sp-4);
    overflow: hidden;
    max-height: 460px;
}
@media (max-width: 860px) {
    .write-hero { grid-template-columns: 1fr; max-height: none; }
}
.write-hero-cover {
    position: relative;
    background: linear-gradient(135deg, #1b3a5c 0%, #0e2240 100%);
    min-height: 300px;
    overflow: hidden;
    cursor: pointer;
    display: block;
}
.write-hero-cover::before {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(circle at 72% 72%, rgba(16,185,129,0.22) 0, transparent 55%),
        radial-gradient(circle at 25% 25%, rgba(255,255,255,0.10) 0, transparent 55%);
    pointer-events: none;
}
.write-hero-cover input[type=file] {
    position: absolute; inset: 0; opacity: 0; cursor: pointer;
    -webkit-appearance: none;
}
.write-hero-cover img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    z-index: 1;
}
.write-hero-cover.has-image::before { display: none; }
.write-hero-cover .write-cover-placeholder {
    position: absolute; inset: 0; z-index: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; text-align: center;
    color: rgba(255,255,255,0.92);
}
.write-hero-cover .write-cover-label { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.write-hero-cover .write-cover-hint { font-size: 11.5px; opacity: 0.7; letter-spacing: 0.02em; }

.write-hero-meta {
    padding: 28px 32px;
    display: flex; flex-direction: column; gap: 10px;
    min-width: 0;
}
.write-hero-cat { margin-bottom: 2px; }
.write-hero-cat .pd-cat {
    display: inline-block;
    padding: 4px 9px;
    font-size: 10.5px; font-weight: 800;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: #fff; border-radius: 2px;
    background: var(--c-muted);
}
.write-hero-cat .pd-cat.net   { background: #10b981; }
.write-hero-cat .pd-cat.talks { background: #1b3a5c; }
.write-hero-cat .pd-cat.res   { background: #b8763f; }

.write-hero-meta .write-title-input {
    font-size: 26px;
}
@media (max-width: 860px) {
    .write-hero-meta .write-title-input { font-size: 22px; }
}

/* 부제목 — 디자인: deck 텍스트 감각 */
.write-subtitle-input {
    border: none; outline: none;
    font-size: 15px; font-weight: 500;
    line-height: 1.55; letter-spacing: -0.01em;
    color: var(--c-text);
    background: transparent;
    font-family: inherit;
    width: 100%; padding: 0;
}
.write-subtitle-input::placeholder { color: var(--c-muted); font-weight: 400; }

/* 태그 행 — hero 내부에서는 칩 없이 얇게 */
.write-hero .write-tag-row {
    padding: 0; margin: 4px 0 0;
    background: transparent; border: 0;
    gap: 8px;
}
.write-hero .write-tag-row .subtag-combobox { min-width: 0; flex: 1; }
.write-hero .write-tag-row .subtag-combo-input {
    padding: 6px 10px;
    border: 1px solid var(--c-line);
    background: var(--c-bg);
    font-size: 12.5px;
    max-width: none;
}
.write-hero .write-tag-row .subtag-hint { font-size: 10.5px; }

.write-hero-byline {
    display: flex; align-items: center; gap: 10px;
    padding-top: 12px; margin-top: auto;
    border-top: 1px dashed var(--c-line);
    font-size: 12.5px;
}
.write-hero-byline .byline-name { color: var(--c-text); font-weight: 700; margin-right: 8px; }
.write-hero-byline .byline-date { color: var(--c-muted); }
.write-hero-byline > div { display: flex; align-items: baseline; gap: 6px; }
/* ============ TAG ROW (write.php hero 아래 전체 폭) ============ */
.write-tag-row {
    display: flex; align-items: center; gap: var(--sp-4);
    flex-wrap: wrap;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    padding: 10px var(--sp-5);
    margin-bottom: var(--sp-4);
}
.write-tag-label {
    font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--c-muted);
    flex-shrink: 0;
}
.write-tag-row .subtag-combobox { flex: 1; min-width: 240px; }
.write-tag-row .subtag-hint {
    font-size: 11.5px; color: var(--c-muted);
    line-height: 1.5;
    flex-shrink: 0;
}
.write-tag-row .subtag-hint b { color: var(--c-navy); font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
    .write-tag-row { flex-direction: column; align-items: stretch; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); }
    .write-tag-row .subtag-combobox { min-width: 0; }
}

/* ============ SUBTAG COMBOBOX (자동완성 input + 드롭다운) ============ */
.subtag-combobox {
    position: relative;
    display: block;
}
.subtag-combo-input {
    padding: 7px 12px;
    border: 1px solid transparent;
    background: transparent;
    font-size: 13.5px; font-weight: 500;
    color: var(--c-ink);
    font-family: inherit;
    width: 100%; max-width: 420px;
    outline: none;
    transition: border-color var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
}
.subtag-combo-input::placeholder { color: var(--c-muted); font-weight: 400; }
.subtag-combo-input:hover { background: var(--c-bg); }
.subtag-combo-input:focus { border-color: var(--c-navy); background: var(--c-surface); box-shadow: var(--shadow-focus-navy); }
.subtag-hint {
    font-size: 11.5px; color: var(--c-muted);
    line-height: 1.5;
}
.subtag-hint b { color: var(--c-navy); font-variant-numeric: tabular-nums; }

.subtag-suggestions {
    position: absolute; top: calc(100% + 4px); left: 0;
    max-width: 420px; width: 100%;
    margin: 0; padding: 4px 0;
    list-style: none;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    box-shadow: var(--shadow-lg);
    max-height: 280px; overflow-y: auto;
    z-index: 20;
}
.subtag-suggest-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 14px;
    font-size: 13px; color: var(--c-text);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out);
}
.subtag-suggest-item:hover,
.subtag-suggest-item.is-active { background: var(--c-link-lt); }
.subtag-suggest-item .subtag-sg-label { font-weight: 500; }
.subtag-suggest-item .subtag-sg-count {
    font-size: 11px; color: var(--c-muted);
    font-variant-numeric: tabular-nums;
    padding: 1px 7px;
    background: var(--c-bg);
    border: 1px solid var(--c-line-soft);
    border-radius: var(--r-chip);
}
.subtag-suggest-item.is-new {
    border-top: 1px dashed var(--c-line-soft);
    margin-top: 4px;
}
.subtag-suggest-item.is-new .subtag-sg-new {
    color: var(--c-navy); font-size: 12.5px;
}
.subtag-suggest-item.is-new .subtag-sg-new b { color: var(--c-ink); }

.write-title-input {
    border: none; outline: none;
    font-size: var(--fs-3xl);
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -0.024em;
    color: var(--c-ink);
    background: transparent;
    font-family: inherit;
    width: 100%;
    padding: 0;
}
.write-title-input::placeholder { color: var(--n-300); font-weight: 700; }
@media (max-width: 720px) {
    .write-title-input { font-size: var(--fs-2xl); }
}

.write-byline {
    display: flex; align-items: center; gap: 10px;
    color: var(--c-muted); font-size: 13px;
    flex-wrap: wrap;
}
.write-byline .byline-name { color: var(--c-text); font-weight: 600; }
.write-byline .dot { color: var(--c-line); }

/* ============ WRITE BODY — WYSIWYG 에디터 (contenteditable + 툴바) ============ */
.write-body-section {
    background: #fff;
    border: 1px solid var(--c-line);
    margin-bottom: var(--sp-4);
    display: flex; flex-direction: column;
}
.write-body-toolbar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--c-line);
    background: var(--c-bg);
    position: sticky; top: 0; z-index: 4;
}
.wy-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 32px; height: 30px;
    padding: 0 9px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--c-ink-2);
    font-size: 13px; font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}
.wy-btn:hover { background: var(--c-surface); border-color: var(--c-line); color: var(--c-ink); }
.wy-btn:active { background: var(--c-line-soft); }
.wy-btn:disabled { opacity: 0.4; cursor: wait; }
.wy-btn b { font-weight: 800; }
.wy-btn i { font-style: italic; font-weight: 600; }
.wy-sep {
    display: inline-block; width: 1px; height: 18px;
    background: var(--c-line); margin: 0 4px;
}
.write-body-tool-status { font-size: 11.5px; font-weight: 600; margin-left: auto; padding-right: 4px; }
.write-body-tool-status[data-kind="ok"]   { color: var(--c-ok); }
.write-body-tool-status[data-kind="err"]  { color: var(--c-err); }
.write-body-tool-status[data-kind="busy"] { color: var(--c-navy); }

/* contenteditable 본문 — detail pd-body 톤과 유사 */
.write-body-editor {
    min-height: 380px;
    padding: 28px 40px 40px;
    font-family: inherit;
    font-size: 15px; line-height: 1.72; letter-spacing: -0.01em;
    color: var(--c-text);
    background: transparent;
    outline: none;
    word-break: keep-all;
    overflow-wrap: anywhere;
}
@media (max-width: 720px) {
    .write-body-editor { padding: 20px 20px 30px; }
}
.write-body-editor:focus { outline: none; }
.write-body-editor.is-empty::before {
    content: attr(data-placeholder);
    color: var(--c-muted);
    pointer-events: none;
}
/* 에디터 내부 요소 스타일 — detail 뷰와 감각 일치 */
.write-body-editor p { margin: 0 0 1.15em; }
.write-body-editor p:last-child { margin-bottom: 0; }
.write-body-editor h2 {
    font-size: 20px; font-weight: 700;
    margin: 28px 0 10px; color: var(--c-ink);
    letter-spacing: -0.018em;
}
.write-body-editor h3 {
    font-size: 16px; font-weight: 700;
    margin: 20px 0 6px; color: var(--c-ink);
    letter-spacing: -0.012em;
}
.write-body-editor ul, .write-body-editor ol {
    margin: 0 0 1.15em; padding-left: 22px;
}
.write-body-editor li { margin-bottom: 4px; }
.write-body-editor blockquote {
    margin: 14px 0; padding: 10px 16px;
    border-left: 3px solid var(--c-line);
    background: var(--c-bg);
    color: var(--c-muted);
    font-style: italic;
}
.write-body-editor a { color: var(--c-navy); text-decoration: underline; text-underline-offset: 2px; }
.write-body-editor img, .write-body-editor .article-body-img {
    display: block;
    max-width: 100%; height: auto;
    margin: 14px auto;
    border: 1px solid var(--c-line);
}
.write-body-editor hr {
    border: 0; height: 1px; background: var(--c-line); margin: 22px 0;
}

/* 사이드바 byline — 중앙 정렬 */
.write-side-col .write-byline {
    margin-top: 0;
    font-size: 12.5px;
    padding-top: var(--sp-2);
    border-top: 1px solid var(--c-line-soft);
}

/* 이벤트/자료 추가 섹션 */
.write-section {
    background: #fff;
    border: 1px solid var(--c-line);
    padding: 40px 56px;
    margin-bottom: var(--sp-4);
}
@media (max-width: 720px) {
    .write-section { padding: 24px 20px; }
}
.write-section-title {
    font-size: var(--fs-lg); font-weight: 700;
    color: var(--c-ink); letter-spacing: var(--ls-lg);
    margin: 0 0 var(--sp-4);
}
.write-grid-2 {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
}
.write-grid-3 {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-3);
}
@media (max-width: 720px) {
    .write-grid-2, .write-grid-3 { grid-template-columns: 1fr; }
}
.write-section small { color: var(--c-muted); font-size: 11.5px; font-weight: 400; }

/* 자료 업로드 가이드 (write-fields_study) — 허용/불가/크기 3 행 안내 */
.write-file-guide {
    background: var(--c-bg);
    border: 1px dashed var(--c-line);
    padding: var(--sp-3) var(--sp-4);
    font-size: 12.5px; line-height: 1.55;
    color: var(--c-text);
}
.write-file-guide .wfg-row {
    display: flex; align-items: baseline; gap: var(--sp-2);
    margin-bottom: 4px;
}
.write-file-guide .wfg-row:last-child { margin-bottom: 0; }
.write-file-guide .wfg-ok,
.write-file-guide .wfg-no,
.write-file-guide .wfg-size {
    flex-shrink: 0; min-width: 56px;
    font-weight: 700; font-size: 12px;
    letter-spacing: 0.02em;
}
.write-file-guide .wfg-ok   { color: var(--c-ok); }
.write-file-guide .wfg-no   { color: var(--c-err); }
.write-file-guide .wfg-size { color: var(--c-navy); }


/* RSVP 모드 선택 — 카드형 radio */
.write-rsvp-modes {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-3);
}
.write-rsvp-choice {
    display: flex; gap: 10px; align-items: flex-start;
    padding: var(--sp-3) var(--sp-4);
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-out);
}
.write-rsvp-choice:hover { border-color: var(--c-navy); }
.write-rsvp-choice:has(input:checked) { border-color: var(--c-brand); background: var(--c-brand-lt); }
.write-rsvp-choice input[type=radio] {
    width: 16px; height: 16px; margin: 4px 0 0; accent-color: var(--c-brand);
    flex: 0 0 auto;
}
.write-rsvp-choice b { display: block; font-size: 13.5px; color: var(--c-ink); margin-bottom: 2px; }
.write-rsvp-choice small { color: var(--c-muted); font-size: 11.5px; line-height: 1.4; }
@media (max-width: 720px) {
    .write-rsvp-modes { grid-template-columns: 1fr; }
}

/* STICKY ACTION BAR (하단 고정) */
.write-action-bar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid var(--c-line);
    padding: var(--sp-3) var(--sp-5);
    padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom));
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-4);
    box-shadow: 0 -2px 12px rgba(10,10,10,0.04);
}
.write-stats {
    display: flex; align-items: center; gap: var(--sp-4);
    font-size: 12.5px; color: var(--c-muted);
    font-variant-numeric: tabular-nums;
}
.write-state { color: var(--c-muted); font-weight: 500; }
.write-state.is-dirty { color: var(--c-brand); font-weight: 600; }
.write-count, .write-reading { color: var(--c-text); }
.write-actions { display: flex; align-items: center; gap: var(--sp-2); }
.write-submit-btn { min-width: 120px; }

/* 모바일 — 바텀 탭과 충돌 방지 */
@media (max-width: 900px) {
    body.is-write-page { padding-bottom: 0; }    /* 기존 바텀 네비 공간 해제 */
    .bottom-nav.is-hidden-on-write { display: none; }
    .is-write-page .main-content { padding-bottom: 100px; }
    .write-action-bar { padding: var(--sp-2) var(--sp-3);
        padding-bottom: calc(var(--sp-2) + env(safe-area-inset-bottom)); }
    .write-stats { gap: var(--sp-2); font-size: 11.5px; }
    .write-submit-btn { min-width: auto; padding: 10px 16px; font-size: 13px; }
}

/* ============ RADIO CHOICE (signup IMA 멤버 번호 등) ============ */
.radio-row {
    display: flex; flex-direction: column; gap: var(--sp-2);
    margin-bottom: var(--sp-2);
}
.radio-choice {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 14px; border: 1px solid var(--c-line);
    cursor: pointer; font-size: 14px; font-weight: 500;
    transition: border-color var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out);
}
.radio-choice:hover { border-color: var(--c-navy); background: var(--c-link-lt); }
.radio-choice input[type=radio] {
    width: 18px; height: 18px; margin: 0; accent-color: var(--c-brand);
    flex: 0 0 auto;
}
.radio-choice input[type=radio]:checked ~ span { color: var(--c-ink); font-weight: 600; }
.radio-choice:has(input:checked) { border-color: var(--c-brand); background: var(--c-brand-lt); }

/* ============ DIRECTORY SEARCH (members.php slim 검색바) ============ */
.directory-search {
    margin: var(--sp-4) 0 var(--sp-5);
    display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
}
.directory-search input[type=search] {
    flex: 1 1 240px; max-width: 360px;
    padding: 10px 14px; border: 1px solid var(--c-line); background: #fff;
    font-size: 16px; font-family: inherit; outline: none;
    -webkit-appearance: none; appearance: none;
}
.directory-search input[type=search]:focus { border-color: var(--c-navy); }
.directory-search .reset-link { color: var(--c-muted); font-size: 13px; text-decoration: none; }
.directory-search .reset-link:hover { color: var(--c-ink); text-decoration: underline; }

/* ============ MEMBERS GRID ============ */
.members-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--sp-4);
    margin-top: var(--sp-4);
}
.member-card {
    background: #fff; border: 1px solid var(--c-line);
    padding: var(--sp-5) var(--sp-3);
    text-align: center; text-decoration: none; color: inherit;
    display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
    transition: border-color var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out);
}
@media (hover: hover) {
    .member-card:hover { border-color: var(--c-ink); text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-md); }
}
.member-card:active { transform: translateY(0) scale(0.99); }
.member-card:focus-visible { outline: none; border-color: var(--c-navy); box-shadow: var(--shadow-focus-navy); }
.member-card .avatar { margin-bottom: 6px; }
.member-name { font-weight: 700; color: var(--c-ink); font-size: 14px; }
.member-tagline {
    color: var(--c-muted); font-size: 12px; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ============ PROFILE PAGE ============ */
.profile-hero {
    background: #fff; border: 1px solid var(--c-line);
    padding: var(--sp-6); display: flex; gap: var(--sp-5);
    align-items: center; margin-bottom: var(--sp-5);
}
.profile-hero .avatar { width: 96px; height: 96px; font-size: 36px; }
.profile-info h1 { font-size: 22px; color: var(--c-navy); margin-bottom: 4px; }
.profile-info .role { color: var(--c-muted); font-size: 13px; }
.profile-info .tagline { color: var(--c-text); font-size: 14px; margin-top: var(--sp-2); }

/* ============ ADMIN PAGES ============ */
.admin-card {
    background: #fff; border: 1px solid var(--c-line);
    padding: var(--sp-5); margin-bottom: var(--sp-4);
}
.admin-card h2 {
    font-size: 16px; color: var(--c-navy);
    border-bottom: 2px solid var(--c-brand);
    display: inline-block; padding-bottom: 4px; margin-bottom: var(--sp-4);
}
.admin-card h2 small {
    font-weight: 500; font-size: 12.5px; margin-left: 8px;
    border-bottom: none; color: var(--c-muted);
}

/* ============ 내 계정(/me) — 컴팩트 탭 레이아웃 ============ */
.me-hero {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-4); flex-wrap: wrap;
    padding: var(--sp-4) 0 var(--sp-4);
    border-bottom: 1px solid var(--c-line);
    margin-bottom: var(--sp-4);
}
.me-hero-main { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; }
.me-hero-info { min-width: 0; }
.me-hero-name {
    font-size: 20px; font-weight: 800;
    letter-spacing: -0.018em; color: var(--c-ink);
    margin: 0 0 4px;
}
.me-hero-handle {
    font-size: 13.5px; font-weight: 500;
    color: var(--c-muted); margin-left: 8px;
}
.me-hero-meta {
    font-size: 13px; color: var(--c-muted);
    line-height: 1.5;
}
.me-hero-tagline {
    font-size: 13px; color: var(--c-ink-2);
    margin-top: 4px; word-break: keep-all;
}
.me-admin-tag {
    display: inline-block; padding: 1px 7px;
    background: #fecaca; color: #7f1d1d;
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em;
    border-radius: 999px; border: 1px solid #fca5a5;
}
.me-hero-actions {
    display: flex; gap: 6px; flex-wrap: wrap;
}
@media (max-width: 720px) {
    .me-hero { flex-direction: column; align-items: flex-start; }
    .me-hero-actions { width: 100%; }
}

/* 통계 카드 = primary 탭 네비게이션. 별도 탭 행 없음. */
.me-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-2);
    margin-bottom: var(--sp-5);
}
.me-stat {
    display: block; padding: var(--sp-3) var(--sp-4);
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    text-align: center; text-decoration: none;
    transition: background var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
}
.me-stat:hover {
    background: var(--c-bg); border-color: var(--c-ink-2);
    text-decoration: none; transform: translateY(-1px);
}
.me-stat.is-active {
    border-color: var(--c-ink); background: var(--c-ink); color: #fff;
}
.me-stat.is-active .me-stat-n,
.me-stat.is-active .me-stat-label { color: #fff; }
.me-stat-n {
    font-size: 22px; font-weight: 800;
    letter-spacing: -0.018em; color: var(--c-ink);
    font-variant-numeric: tabular-nums; line-height: 1.1;
}
.me-stat-label {
    font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em;
    color: var(--c-muted); margin-top: 4px;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.me-stat-sub {
    font-size: 10.5px; font-weight: 500; letter-spacing: 0;
    color: var(--c-muted); opacity: 0.85;
    font-variant-numeric: tabular-nums;
}
.me-stat.is-active .me-stat-sub { color: rgba(255,255,255,0.75); }
@media (max-width: 640px) {
    .me-stats { grid-template-columns: repeat(3, 1fr); }
    .me-stat-sub { display: none; }
}

/* 탭 패널 공통 */
.me-panel { margin-bottom: var(--sp-6); }
.me-subtabs {
    border-bottom: 1px dashed var(--c-line);
    margin-bottom: var(--sp-4);
}

/* 이벤트 탭 — 블록별 그룹 */
.me-events-panel { display: flex; flex-direction: column; gap: var(--sp-5); }
.me-events-block { }
.me-events-head {
    margin-bottom: var(--sp-3);
}
.me-events-head h2 {
    font-size: 15px; font-weight: 700;
    color: var(--c-ink); letter-spacing: -0.012em;
    margin: 0;
}

/* upcoming-grid · me 이벤트 탭에서의 추가 UX (카드 클릭 영역 + 취소 버튼) */
.upcoming-body-link {
    display: block; padding: var(--sp-3) var(--sp-3) 0;
    color: inherit; text-decoration: none;
}
.upcoming-body-link:hover { text-decoration: none; }
.upcoming-body .upcoming-body-link + .me-rsvp-cancel-form {
    margin-top: auto;
}
.me-rsvp-cancel-form {
    padding: var(--sp-2) var(--sp-3) var(--sp-3);
    display: flex; justify-content: flex-end;
}
/* upcoming-card 내부는 body 가 flex column 이 되어 하단 취소 버튼이 아래로 밀림 */
.upcoming-card .upcoming-body {
    padding: 0;
    display: flex; flex-direction: column;
}

/* 알림 탭 리스트 */
.me-notif-intro { margin-bottom: var(--sp-3); }
.mb-md { margin-bottom: var(--sp-3); }

/* ============ 프로필 편집 (me_edit.php) — 플랫·디바이더 기반 ============ */
.profile-edit-form {
    max-width: 680px;
    margin: 0 auto var(--sp-8);
}
.edit-page-title {
    font-size: 20px; font-weight: 700;
    letter-spacing: -0.015em; color: var(--c-ink);
    margin: 0 0 var(--sp-4);
}
.edit-section {
    padding: var(--sp-4) 0;
    border-top: 1px solid var(--c-line);
}
.edit-section:first-of-type { border-top: 0; padding-top: 0; }
.edit-section-title {
    font-size: 13px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--c-muted);
    margin: 0 0 var(--sp-3);
    display: flex; align-items: baseline; gap: 8px;
}
.edit-section-opt {
    font-size: 10.5px; font-weight: 500; letter-spacing: 0.04em;
    color: var(--c-muted);
    padding: 1px 7px; border-radius: 999px;
    background: var(--c-line-soft);
    text-transform: none;
}
.edit-label {
    display: block;
    font-size: 12.5px; font-weight: 600;
    color: var(--c-ink-2);
    margin-bottom: 4px;
}
.edit-required { color: var(--c-err); margin-left: 2px; }
.edit-hint {
    font-size: 11.5px; color: var(--c-muted);
    margin: 4px 0 0; line-height: 1.5;
}
.edit-grid-2 {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}
.edit-grid-2 .form-row { margin-bottom: 0; }
@media (max-width: 720px) {
    .edit-grid-2 { grid-template-columns: 1fr; gap: var(--sp-3); }
}

/* 아바타 업로드 행 */
.edit-avatar-row {
    display: flex; align-items: center; gap: var(--sp-4);
    margin-bottom: var(--sp-4);
}
.edit-avatar-preview {
    flex-shrink: 0; width: 80px; height: 80px;
    border-radius: 50%; overflow: hidden;
    background: var(--c-bg);
    display: flex; align-items: center; justify-content: center;
}
.edit-avatar-preview .avatar {
    width: 80px !important; height: 80px !important;
    font-size: 30px !important;
}
.edit-avatar-preview img,
.edit-avatar-preview .edit-avatar-img {
    width: 80px; height: 80px; object-fit: cover;
}
.edit-avatar-controls { flex: 1; min-width: 0; }
.edit-avatar-controls input[type="file"] { font-size: 12.5px; }

/* 첨부 파일 업로드 행 (명함·CV 공통) */
.edit-upload-row {
    display: flex; align-items: flex-start; gap: var(--sp-3);
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px dashed var(--c-line-soft);
}
.edit-upload-preview {
    flex-shrink: 0;
    width: 120px; min-height: 64px;
    border: 1px solid var(--c-line);
    background: var(--c-bg);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.edit-upload-preview img {
    width: 100%; height: auto; max-height: 100px;
    object-fit: cover; display: block;
}
.edit-upload-empty {
    font-size: 11px; color: var(--c-muted);
    padding: var(--sp-3); text-align: center;
}
.edit-upload-file {
    padding: var(--sp-2);
    font-size: 11.5px; color: var(--c-ink-2);
    word-break: break-all;
}
.edit-upload-controls { flex: 1; min-width: 0; }
.edit-upload-controls input[type="file"] { font-size: 12.5px; }

.edit-checkbox-inline {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--c-err);
    margin-top: var(--sp-2); cursor: pointer;
}

/* 체크박스 카드 (공개 설정) */
.edit-checkbox-card {
    display: flex; align-items: flex-start; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--c-bg);
    border: 1px solid var(--c-line);
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out);
}
.edit-checkbox-card:hover { border-color: var(--c-ink-2); background: var(--c-surface); }
.edit-checkbox-card input[type="checkbox"] {
    flex-shrink: 0; margin: 3px 0 0;
    width: 16px; height: 16px;
    accent-color: var(--c-brand);
}
.edit-checkbox-card .ecb-title {
    font-size: 13.5px; font-weight: 600;
    color: var(--c-ink);
}
.edit-checkbox-card .ecb-sub {
    font-size: 12px; color: var(--c-muted);
    margin-top: 2px; line-height: 1.5;
}

/* 하단 액션 바 */
.edit-actions-bar {
    display: flex; justify-content: space-between;
    align-items: center; flex-wrap: wrap; gap: var(--sp-3);
    padding: var(--sp-4) 0 var(--sp-2);
    margin-top: var(--sp-4);
    border-top: 1px solid var(--c-line);
    position: sticky; bottom: 0;
    background: var(--c-bg);
}
.edit-actions-right {
    display: flex; gap: var(--sp-2); align-items: center;
}

@media (max-width: 720px) {
    .edit-avatar-row { flex-direction: column; align-items: flex-start; }
    .edit-upload-row { flex-direction: column; }
    .edit-upload-preview { width: 100%; max-width: 220px; }
    .edit-actions-bar { flex-direction: column; align-items: stretch; }
    .edit-actions-right { justify-content: flex-end; }
}

/* 공개 프로필(/@slug) 2-column 레이아웃 */
.user-profile-layout {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: var(--sp-5);
    max-width: 1180px;
    margin: 0 auto var(--sp-8);
}
@media (max-width: 960px) {
    .user-profile-layout { grid-template-columns: 1fr; gap: var(--sp-4); }
}

/* 좌측 프로필 카드 — 경량화 (테두리 제거, 좌측 정렬, 미니멀 섹션 분리) */
.user-profile-card {
    padding: var(--sp-3) 0 var(--sp-4);
    position: sticky; top: 84px;
    align-self: start;
    display: flex; flex-direction: column; align-items: flex-start;
    text-align: left;
}
@media (max-width: 960px) {
    .user-profile-card { position: static; top: auto; padding: var(--sp-4) 0; }
}
.upc-avatar-wrap { margin-bottom: var(--sp-3); }
.upc-avatar-wrap .avatar { box-shadow: 0 2px 8px rgba(10,10,10,0.06); }

.upc-name {
    font-size: 22px; font-weight: 800;
    letter-spacing: -0.018em;
    color: var(--c-ink);
    margin: 0 0 2px;
}
.upc-identity {
    font-size: 13px; color: var(--c-muted);
    margin-bottom: var(--sp-3);
}
.upc-role-admin {
    font-size: 11px; font-weight: 700;
    color: var(--c-navy);
    letter-spacing: 0.04em;
}
.upc-tagline {
    font-size: 14px; color: var(--c-ink-2);
    line-height: 1.6; margin: 0 0 var(--sp-3);
    word-break: keep-all;
}
.upc-actions {
    display: flex; flex-wrap: wrap; gap: var(--sp-2);
    margin-bottom: var(--sp-4);
}

.upc-bio {
    font-size: 13.5px; color: var(--c-text);
    line-height: 1.65; word-break: keep-all;
    padding: var(--sp-3) 0;
    border-top: 1px solid var(--c-line-soft);
}
.upc-bio a { color: var(--c-navy); font-weight: 500; }

.upc-details {
    display: grid; grid-template-columns: 60px 1fr;
    gap: 6px 12px; margin: 0;
    font-size: 13px;
    padding: var(--sp-3) 0;
    border-top: 1px solid var(--c-line-soft);
}
.upc-details dt {
    color: var(--c-muted); font-weight: 600;
    font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.06em;
    padding-top: 2px;
}
.upc-details dd {
    margin: 0; color: var(--c-ink-2);
    word-break: break-all;
}
.upc-details dd a { color: var(--c-navy); }

.upc-attachments {
    display: flex; flex-direction: column; gap: 8px;
    padding: var(--sp-3) 0;
    border-top: 1px solid var(--c-line-soft);
}
.upc-attach {
    display: inline-block;
    border: 1px solid var(--c-line);
    text-decoration: none; color: var(--c-ink-2);
    transition: border-color var(--dur-fast) var(--ease-out);
}
.upc-attach:hover { border-color: var(--c-ink); text-decoration: none; }
.upc-attach-image {
    line-height: 0; overflow: hidden;
}
.upc-attach-image img {
    width: 100%; height: auto; max-height: 140px; display: block;
    object-fit: cover;
}
.upc-attach-file {
    padding: 8px 12px;
    background: var(--c-bg);
    font-size: 12.5px;
}

.upc-joined {
    font-size: 11px; color: var(--c-muted);
    padding-top: var(--sp-3);
    margin-top: var(--sp-3);
    border-top: 1px solid var(--c-line-soft);
    width: 100%;
}

/* 우측 활동 영역 */
.user-profile-activity { min-width: 0; }

/* 한 줄 stat line (3 카드 → 인라인 텍스트) */
.upa-statline {
    display: flex; align-items: baseline; flex-wrap: wrap;
    gap: 6px;
    font-size: 13px; color: var(--c-muted);
    padding: var(--sp-2) 0 var(--sp-4);
    border-bottom: 1px solid var(--c-line);
    margin-bottom: var(--sp-4);
}
.upa-stat-item b {
    font-size: 16px; font-weight: 700;
    color: var(--c-ink);
    font-variant-numeric: tabular-nums;
    margin-right: 4px;
}
.upa-stat-sep { color: var(--c-line); }

/* 우측 feed-grid 는 2열로 (좌측 카드 고려) */
.profile-feed-grid {
    grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 640px) {
    .profile-feed-grid { grid-template-columns: 1fr; }
}

/* 공개 프로필(/@slug) 작성 콘텐츠 탭 */
.profile-posts {
    margin: var(--sp-5) 0 var(--sp-7);
}
.profile-posts-head {
    display: flex; align-items: baseline; gap: var(--sp-4);
    margin-bottom: var(--sp-3);
    border-bottom: 1px solid var(--c-line);
    flex-wrap: wrap;
}
.profile-posts-head h2 {
    font-size: 16px; font-weight: 700;
    color: var(--c-ink); letter-spacing: -0.012em;
    margin: 0; padding-bottom: var(--sp-3);
}
.profile-tabs {
    display: flex; gap: 0; flex: 1;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.profile-tabs::-webkit-scrollbar { display: none; }
.profile-tab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: var(--sp-3) var(--sp-4);
    font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
    color: var(--c-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;   /* border 와 부모 border 겹치기 */
    transition: color var(--dur-fast) var(--ease-out),
                border-bottom-color var(--dur-fast) var(--ease-out);
    white-space: nowrap; flex-shrink: 0;
}
.profile-tab:hover { color: var(--c-ink); text-decoration: none; }
.profile-tab.is-active {
    color: var(--c-ink);
    border-bottom-color: var(--c-ink);
}
.profile-tab-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--c-muted); flex-shrink: 0;
}
.profile-tab-dot.dot-net   { background: var(--cat-net); }
.profile-tab-dot.dot-talks { background: var(--cat-talks); }
.profile-tab-dot.dot-res   { background: var(--cat-res); }
.profile-tab-count {
    font-size: 11.5px; font-weight: 500;
    color: var(--c-muted);
    font-variant-numeric: tabular-nums;
    padding: 1px 7px;
    background: var(--c-line-soft);
    border-radius: 999px;
    letter-spacing: 0;
}
.profile-tab.is-active .profile-tab-count {
    background: var(--c-ink); color: #fff;
}
@media (max-width: 720px) {
    .profile-posts-head { flex-direction: column; align-items: stretch; gap: 0; }
    .profile-posts-head h2 { padding-bottom: var(--sp-2); }
    .profile-tab { padding: var(--sp-2) var(--sp-3); font-size: 12.5px; }
}

/* 회원 관리 (admin/members.php) — 필터 칩 · 검색 · 리스트 */
.member-filter-row {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding-bottom: var(--sp-3);
    border-bottom: 1px dashed var(--c-line);
    margin-bottom: var(--sp-3);
}
.member-filter-row .chip small { margin-left: 4px; }
.member-search-row {
    display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
}
.member-search-input {
    padding: 7px 12px; border: 1px solid var(--c-line);
    font-size: 13px; width: 260px; max-width: 100%;
}
.member-search-input:focus { outline: none; border-color: var(--c-navy); box-shadow: var(--shadow-focus-navy); }
.member-sort-select {
    padding: 7px 10px; border: 1px solid var(--c-line);
    font-size: 13px; background: #fff; cursor: pointer;
}
.member-admin-table td { vertical-align: middle; }
.member-admin-table tr.is-me { background: #fffbeb; }
.member-admin-table tr.is-admin-row .role-pill { background: #fecaca; color: #7f1d1d; border-color: #fca5a5; }
.role-pill {
    display: inline-block; padding: 2px 9px;
    font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em;
    border-radius: 999px;
    background: var(--c-line-soft); color: var(--c-ink-2);
    border: 1px solid var(--c-line);
}
.role-pill.role-admin { background: #fecaca; color: #7f1d1d; border-color: #fca5a5; }
.role-select {
    padding: 4px 8px; border: 1px solid var(--c-line);
    font-size: 12px; background: #fff; cursor: pointer;
    min-width: 78px;
}
.role-select:focus { outline: none; border-color: var(--c-navy); }
.tag-me-badge {
    display: inline-block; margin-left: 6px;
    padding: 1px 7px; font-size: 10.5px; font-weight: 700;
    letter-spacing: 0.04em; border-radius: 999px;
    background: #fef3c7; color: #92400e;
    border: 1px solid #fde68a;
}
.btn-xs {
    padding: 3px 10px !important;
    font-size: 11.5px !important;
    min-height: 0 !important;
}

/* admin/subtags 상단 일괄 정리 버튼 행 */
.subtag-cleanup-row {
    display: flex; gap: var(--sp-2); flex-wrap: wrap;
    padding: var(--sp-3); background: var(--c-bg);
    border: 1px solid var(--c-line);
}
.subtag-cleanup-row .btn-outline-sm small {
    font-weight: 400; margin-left: 4px; font-size: 10.5px;
}

/* 서브태그 관리 통합 뷰 (admin/subtags.php) */
.subtag-admin-table tr.is-unmanaged { background: #fffaf0; }
.subtag-admin-table tr.is-unmanaged:hover { background: #fef5e1; }
.tag-unmanaged-badge {
    display: inline-block; margin-left: 6px;
    padding: 1px 7px; font-size: 10.5px; font-weight: 600;
    letter-spacing: 0.04em; border-radius: 999px;
    background: #fef3c7; color: #92400e;
    border: 1px solid #fde68a;
}
.subtag-actions {
    display: flex; gap: 6px; flex-wrap: wrap;
}
.subtag-actions .form-inline { display: inline; }
.subtag-add-form {
    display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap;
}
.subtag-add-input {
    padding: 7px 10px; border: 1px solid var(--c-line);
    font-size: 13px; min-width: 280px; flex: 1 1 280px;
}
.subtag-add-input:focus { outline: none; border-color: var(--c-navy); box-shadow: var(--shadow-focus-navy); }
table.schema, table.data {
    width: 100%; border-collapse: collapse; font-size: 13px;
}
table.schema th, table.schema td, table.data th, table.data td {
    border: 1px solid var(--c-line); padding: 8px 10px; text-align: left; vertical-align: top;
}
table.schema th, table.data th { background: var(--c-line-soft); font-weight: 600; color: var(--c-navy); }

/* ============ FOOTER (handoff sh-ftr) ============ */
.site-footer {
    margin-top: 56px; padding: 0;
    border-top: 1px solid var(--c-line);
    background: transparent; color: var(--c-muted); font-size: 12.5px;
}
.footer-row {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: var(--sp-3);
    max-width: 1280px; margin: 0 auto; padding: 28px 40px;
}
.footer-nav { display: flex; gap: 18px; }
.footer-nav a { color: var(--c-muted); font-size: 12.5px; text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
.footer-nav a:hover { color: var(--c-ink); text-decoration: none; }

/* ============ RESPONSIVE ============ */

/* 1024px 이하 — 태블릿 가로 */
@media (max-width: 1024px) {
    .feed-grid { grid-template-columns: repeat(3, 1fr); }
    .pin.pin-L  { grid-column: span 3; grid-row: span 2; }
    .pin.pin-Mw, .wpin { grid-column: span 2; grid-row: span 1; }
    .search-form { min-width: 200px; }
}

/* 900px 이하 — 태블릿 세로 + 모바일 공통
   - 상단 햄버거·inline main-nav 제거, 하단 탭바로 대체 (웹앱 스타일)
   - 핀 내부 레이아웃 column 화 (썸네일 전폭 + 메타 하단)
   - 폼 카드·테이블·facts-list 축소 */
@media (max-width: 900px) {
    /* ---- Header — 로고 + 검색 아이콘 + 유저 메뉴만 ---- */
    .header-row { height: 56px; padding: 0; gap: var(--sp-2); justify-content: flex-start; }
    .logo { flex: 0 0 auto; }
    .main-nav { display: none; }
    /* 모바일 — search-form 은 기본 숨김. 아이콘 클릭 시 header-row.is-search-open 으로 전체 헤더 폭 덮는 오버레이 형태로 펼침 */
    .search-form { display: none; }
    .search-toggle { display: inline-flex; }
    .auth-bar { gap: var(--sp-2); }

    /* 검색 열림 상태 — 로고/알림/유저 감추고 form 만 풀폭 */
    .header-row.is-search-open .logo,
    .header-row.is-search-open .notif-menu,
    .header-row.is-search-open .auth-bar,
    .header-row.is-search-open .search-toggle { display: none; }
    .header-row.is-search-open .search-form {
        display: flex; flex: 1 1 auto; width: 100%;
        background: #fff; border: 1px solid var(--c-line);
        padding: 0 10px; height: 40px;
    }
    .header-row.is-search-open .search-form input[type=search] {
        flex: 1; border: 0; font-size: 15px; padding: 0 8px;
        background: transparent; color: var(--c-ink); outline: none;
    }
    .header-row.is-search-open .search-form kbd { display: none; }
    /* 모바일 suggest 드롭다운 — form 아래 풀폭 */
    .header-row.is-search-open .search-suggest {
        position: fixed; top: 52px; left: 0; right: 0;
        border-left: 0; border-right: 0; max-height: calc(100vh - 52px);
    }
    .user-menu summary { padding: 4px 8px 4px 4px; }
    .user-menu .user-name { display: none; }   /* 모바일은 아바타만 */
    .user-menu-panel { right: 0; left: auto; }

    /* ---- Bottom Tab Nav (fixed) — 5 tabs (NET/TALKS/RES/MEMBERS/ABOUT) ---- */
    .bottom-nav {
        display: grid; grid-template-columns: repeat(5, 1fr);
        position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
        background: rgba(255, 255, 255, 0.88);
        -webkit-backdrop-filter: saturate(180%) blur(14px);
        backdrop-filter: saturate(180%) blur(14px);
        border-top: 1px solid var(--c-line);
        padding-bottom: env(safe-area-inset-bottom);
        box-shadow: 0 -4px 12px rgba(0,0,0,0.05);
    }
    /* 5탭 좁은 라벨 여유 — font 축소 */
    .bottom-nav .bn-label {
        font-size: 9.5px; letter-spacing: 0.03em;
        white-space: nowrap;
    }
    .bottom-nav a {
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 3px; padding: 8px 4px 6px;
        font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
        color: var(--c-muted); text-decoration: none;
        border-top: 2px solid transparent;
        min-height: 56px;
        transition: color var(--dur-fast) var(--ease-out),
                    border-top-color var(--dur-base) var(--ease-out),
                    background var(--dur-fast) var(--ease-out);
    }
    .bottom-nav a:hover { text-decoration: none; color: var(--c-ink); }
    .bottom-nav a:active { background: var(--c-line-soft); }
    .bottom-nav a.is-active { color: var(--c-ink); border-top-color: var(--c-brand); }
    .bottom-nav a.is-active .bn-icon { color: var(--c-brand); transform: translateY(-1px) scale(1.06); }
    .bn-icon { display: inline-flex; color: var(--c-muted); transition: color var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out); }
    .bn-label { font-size: 10px; line-height: 1.1; }

    /* body padding-bottom 은 §M-2.1 / §M-5.1 에서 분기 처리됨 (여기 규칙은 제거 · 2026-04-24 cleanup) */

    /* ---- Feed grid 2 col + 핀 column 화 (gap 0 유지: BLOCK hairline) ---- */
    .feed-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 210px; gap: 0; }
    .feed-grid .pin.pin-L,
    .feed-grid .pin.pin-Mw { grid-row: span 1; }
    .pin.pin-L  { grid-column: span 2; }
    .pin.pin-Mw { grid-column: span 2; }
    .pin.pin-S  { grid-column: span 1; }
    .wpin       { grid-column: span 2; }
    .pin.pin-L .card-link,
    .pin.pin-Mw .card-link { flex-direction: column; }
    .pin.pin-L .thumb  { width: 100%; min-height: 0; aspect-ratio: 16/10; }
    .pin.pin-Mw .thumb { width: 100%; min-height: 0; aspect-ratio: 16/9; }
    .pin.pin-L .card-meta,
    .pin.pin-Mw .card-meta { padding: var(--sp-3) var(--sp-4) var(--sp-4); flex: none; }
    .pin.pin-L .card-title  { font-size: 17px; -webkit-line-clamp: 2; }
    .pin.pin-Mw .card-title { font-size: 16px; }

    /* ---- Detail page ---- */
    .detail-body { padding: var(--sp-4); }
    .detail-body h1 { font-size: 22px; }
    .detail-cover { aspect-ratio: 16/9; }
    .facts-list {
        grid-template-columns: 64px 1fr;
        gap: 8px 12px; padding: var(--sp-3);
        font-size: 13px;
    }
    .reg-block-lg { padding: var(--sp-4); margin: var(--sp-4) 0; }

    /* ---- Profile hero ---- */
    .profile-hero { flex-direction: column; text-align: center; padding: var(--sp-4); gap: var(--sp-3); }
    .profile-info { width: 100%; }
    .profile-info .role { justify-content: center; }

    /* ---- Forms ---- */
    .form-card { margin: var(--sp-4) auto; padding: var(--sp-4); max-width: 100%; }
    .form-card.lg { padding: var(--sp-4); }
    .form-card h1 { font-size: 18px; }
    .form-actions { flex-wrap: wrap; gap: var(--sp-2); }
    .form-actions > .btn,
    .form-actions > .btn-lg { flex: 1 1 100%; }
    .form-actions > .btn-outline-sm,
    .form-actions > .btn-sm { flex: 1 1 auto; }

    /* ---- Tables → 가로 스크롤 래핑 ---- */
    .admin-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table.data, table.schema { min-width: 540px; font-size: 12px; }
    table.data td, table.data th { padding: 6px 8px; }

    /* ---- Comments ---- */
    .comment { gap: var(--sp-2); }

    /* ---- Members ---- */
    .members-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }

    /* ---- Footer ---- */
    .footer-row { flex-direction: column; gap: var(--sp-2); text-align: center; }
    .footer-nav { flex-wrap: wrap; justify-content: center; gap: var(--sp-3); }

    /* ---- Admin toolbar (pin/size 편집) ---- */
    .admin-toolbar { gap: var(--sp-2); padding: var(--sp-3); }
    .admin-toolbar .inline-form { flex: 1 1 auto; }

    /* ---- Page head ---- */
    .page-head h1 { font-size: 22px; }

    /* ---- Chip row 가로 스크롤 가능 ---- */
    .chip-row { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
        padding-bottom: 4px; margin-left: calc(-1 * var(--sp-5)); margin-right: calc(-1 * var(--sp-5));
        padding-left: var(--sp-5); padding-right: var(--sp-5); }
    .chip { flex-shrink: 0; }
}

/* 480px 이하 — 작은 모바일 (iPhone SE 등) */
@media (max-width: 480px) {
    .container { padding: 0 var(--sp-4); }
    .feed-grid { grid-template-columns: 1fr; }
    .pin.pin-L, .pin.pin-Mw, .pin.pin-S { grid-column: span 1; }
    .members-grid { grid-template-columns: repeat(2, minmax(140px, 1fr)); }

    /* 아바타 helper 는 inline style 로 크기 설정하므로 !important 필요 */
    .profile-hero > .avatar { width: 72px !important; height: 72px !important; font-size: 28px !important; }

    .profile-info h1 { font-size: 20px; }
    .page-head h1 { font-size: 20px; }
    .detail-body h1 { font-size: 20px; line-height: 1.35; }
    .detail-cover { aspect-ratio: 4/3; }

    .facts-list { grid-template-columns: 1fr; gap: 2px; padding: var(--sp-3); }
    .facts-list dt { padding-top: var(--sp-2); }
    .facts-list dt:first-child { padding-top: 0; }

    /* 댓글 — 아바타 축소 */
    .comment > .avatar { width: 28px !important; height: 28px !important; font-size: 12px !important; }
    .comment-head { flex-wrap: wrap; gap: 6px; }

    /* 헤더 로고 축소 */
    .logo-main, .logo-sub { font-size: 15px; }

    /* 카드 패딩 타이트 */
    .card-meta { padding: var(--sp-3); }
    .pin.pin-L .card-meta,
    .pin.pin-Mw .card-meta { padding: var(--sp-3); }

    /* 인라인 스타일 flex-direction:row 인 form-row 를 컬럼으로 강제
       (write.php 접수 시작/종료, me_edit.php 아바타+파일 등) */
    .form-row[style*="flex-direction:row"],
    .form-row[style*="flex-direction: row"] {
        flex-direction: column !important;
        align-items: stretch !important;
    }
}

/* ============ UTIL ============ */
.empty-state {
    text-align: center; padding: var(--sp-8) var(--sp-4);
    background: #fff; border: 1px dashed var(--c-line); color: var(--c-muted);
}
.empty-state h3 { color: var(--c-text); font-size: 16px; margin-bottom: var(--sp-2); }

.pager { display: flex; justify-content: center; gap: var(--sp-2); margin: var(--sp-6) 0; }
.pager a, .pager span {
    padding: 6px 12px; border: 1px solid var(--c-line); background: #fff; font-size: 13px;
    color: var(--c-text); text-decoration: none;
}
.pager a { transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.pager a:hover { border-color: var(--c-brand); color: var(--c-brand); background: var(--c-brand-lt); text-decoration: none; }
.pager a:active { transform: scale(0.96); }
.pager .current { background: var(--c-brand); color: #fff; border-color: var(--c-brand); }

/* ============ BUTTON DISABLED / SUBMITTING 상태 (전역 폼 더블 서브밋 방지) ============ */
button[disabled],
button.is-submitting,
.btn[disabled], .btn-sm[disabled], .btn-outline-sm[disabled], .btn-outline[disabled], .btn-lg[disabled],
.aside-event-rsvp-btn.is-submitting, .aside-event-rsvp-btn[disabled],
.aside-rsvp-cancel-btn.is-submitting, .aside-rsvp-cancel-btn[disabled] {
    opacity: 0.65;
    cursor: wait !important;
    pointer-events: none;
    transform: none !important;
    box-shadow: none !important;
    position: relative;
}
/* 서브밋 중 — 버튼 앞에 회전 스피너 */
button.is-submitting::before,
.btn.is-submitting::before,
.btn-sm.is-submitting::before,
.btn-outline-sm.is-submitting::before,
.btn-lg.is-submitting::before,
.aside-event-rsvp-btn.is-submitting::before,
.aside-rsvp-cancel-btn.is-submitting::before {
    content: ""; display: inline-block;
    width: 12px; height: 12px; margin-right: 8px;
    border: 2px solid currentColor; border-right-color: transparent;
    border-radius: 50%;
    animation: btn-spin 0.7s linear infinite;
    vertical-align: -2px;
}
@keyframes btn-spin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    button.is-submitting::before,
    .btn.is-submitting::before,
    .btn-sm.is-submitting::before,
    .btn-outline-sm.is-submitting::before,
    .btn-lg.is-submitting::before,
    .aside-event-rsvp-btn.is-submitting::before,
    .aside-rsvp-cancel-btn.is-submitting::before {
        animation: none;
    }
}

/* ============ FLASH (플래시 메시지 등장 애니메이션) ============ */
.flash { animation: flashIn var(--dur-base) var(--ease-out) both; }

/* ============ COMMENT FORM (포커스 시 미세 상승) ============ */
.comment-form textarea {
    transition: border-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
}
.comment-form textarea:focus { border-color: var(--c-brand); box-shadow: var(--shadow-focus); }

/* ============ KEYFRAMES ============ */
@keyframes menuDrop {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes flashIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============ SCROLL MARGIN — 스티키 헤더 뒤로 앵커 숨김 방지 ============ */
h1, h2, h3, h4, [id] { scroll-margin-top: 80px; }

/* ============ FOCUS OUTLINE — 접근성 기본 아웃라인 (focus-visible 미지원 대비) ============ */
:focus { outline: 2px solid transparent; }
:focus-visible { outline: 2px solid transparent; }

/* ============ ABOUT PAGE (/about) ============ */
.about-hero {
    padding: var(--sp-6) 0 var(--sp-5);
    border-bottom: 1px solid var(--c-line);
    margin-bottom: var(--sp-5);
}
.about-hero h1 {
    font-size: 28px; font-weight: 800;
    letter-spacing: -0.022em; color: var(--c-ink);
    margin: 0 0 var(--sp-2);
}
.about-hero .about-tagline {
    font-size: 15px; color: var(--c-muted);
    line-height: 1.55; margin: 0;
}
.about-hero .about-tagline b { color: var(--c-ink-2); font-weight: 700; }

.about-card {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    padding: var(--sp-5);
    margin-bottom: var(--sp-4);
}
.about-card h2 {
    font-size: 16px; font-weight: 700; letter-spacing: -0.012em;
    color: var(--c-ink); margin: 0 0 var(--sp-3);
}
.about-card p {
    font-size: 14px; color: var(--c-text);
    line-height: 1.7; margin: 0 0 var(--sp-3);
    word-break: keep-all;
}
.about-card p:last-child { margin-bottom: 0; }
.about-card p b { color: var(--c-ink); font-weight: 700; }

/* 카테고리 정의 리스트 */
.about-cats {
    display: grid; grid-template-columns: 180px 1fr;
    gap: var(--sp-2) var(--sp-4);
    margin: 0; font-size: 14px;
}
.about-cats dt {
    display: flex; align-items: center; gap: 8px;
    font-weight: 700; letter-spacing: 0.04em;
    color: var(--c-ink); text-transform: uppercase;
    font-size: 12.5px;
}
.about-cats dd {
    margin: 0; color: var(--c-text); line-height: 1.55;
}
.cat-marker {
    display: inline-block; width: 10px; height: 10px;
    border-radius: 50%; flex-shrink: 0;
    background: var(--c-muted);
}
.cat-marker-net    { background: var(--cat-net); }
.cat-marker-talks  { background: var(--cat-talks); }
.cat-marker-res    { background: var(--cat-res); }

/* 법적 면책 카드 — 살짝 다른 톤으로 주의 강조 (공격적이지 않게) */
.about-disclaimer {
    background: var(--pin);
    border-color: var(--pin-line);
}
.about-disclaimer h2 {
    color: var(--pin-ink);
    font-size: 15.5px;
}
.about-disclaimer p { color: var(--pin-ink); }
.about-disclaimer p b { color: var(--pin-ink); font-weight: 800; }
.about-disclaimer-list {
    margin: var(--sp-3) 0 0; padding: 0 0 0 18px;
    font-size: 13.5px; color: var(--pin-ink);
    line-height: 1.7;
}
.about-disclaimer-list li { margin-bottom: var(--sp-2); word-break: keep-all; }
.about-disclaimer-list li:last-child { margin-bottom: 0; }
.about-disclaimer-list b { color: var(--pin-ink); font-weight: 700; }

/* 소셜 링크 */
.about-social-row {
    display: flex; flex-wrap: wrap; gap: var(--sp-2);
    margin-top: var(--sp-3);
}
.about-social {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    color: var(--c-ink-2);
    font-size: 13px; font-weight: 600;
    text-decoration: none;
    transition: border-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out);
}
.about-social:hover {
    border-color: var(--c-ink); color: var(--c-ink);
    background: var(--c-bg); text-decoration: none;
}
.about-social svg { flex-shrink: 0; opacity: 0.82; }
.about-social:hover svg { opacity: 1; }

.about-actions {
    display: flex; flex-wrap: wrap; gap: var(--sp-2);
    margin-top: var(--sp-3);
}

@media (max-width: 640px) {
    .about-hero { padding: var(--sp-5) 0 var(--sp-4); }
    .about-hero h1 { font-size: 24px; }
    .about-card { padding: var(--sp-4); }
    .about-cats { grid-template-columns: 1fr; gap: 2px var(--sp-3); }
    .about-cats dt { margin-top: var(--sp-2); }
    .about-cats dt:first-child { margin-top: 0; }
}

/* ============ REDUCED MOTION — 모션 민감 사용자 존중 ============ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .card-item:hover .thumb:not(.thumb-placeholder) { transform: none !important; }
}

/* ============ FEED PAGE HEAD (handoff .ph) ============ */
.feed-page-head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin: 0 0 14px;
}
.feed-page-head h1 {
    font-size: 20px; font-weight: 700; letter-spacing: -0.015em;
    color: var(--c-ink); margin: 0;
}
.feed-page-head .ph-meta {
    font-size: 12.5px; color: var(--c-muted);
    font-variant-numeric: tabular-nums;
}

/* ============ FEED PAGE CHIP ROW — 대시 구분선 (handoff) ============ */
.feed-chip-row {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding-bottom: 22px; margin-bottom: 26px;
    border-bottom: 1px dashed var(--c-line);
}
.feed-chip-row .chip {
    padding: 5px 12px; font-size: 12px; font-weight: 600;
    border: 0; border-radius: 999px; color: var(--c-muted);
    background: transparent;
    transition: color var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out);
}
.feed-chip-row .chip:hover { color: var(--c-ink); background: var(--c-surface); transform: none; box-shadow: none; }
.feed-chip-row .chip.is-active { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }

/* ============ SECTION LABEL (PINNED / LATEST) ============ */
.sec-lbl {
    display: flex; align-items: baseline; gap: 12px;
    margin: 0 0 14px;
}
.sec-lbl b {
    font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--c-ink); font-weight: 700;
}
.sec-lbl em { font-style: normal; color: var(--c-muted); font-size: 11.5px; }
.sec-lbl .spacer { flex: 1; height: 1px; background: var(--c-line); margin: 0 4px; }
.sec-lbl .cnt { color: var(--c-muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }

/* ============ HERO SLIDER (2×2 Pin · Featured 풀폭 슬라이더) ============ */
.hero-slider { position: relative; margin: 0 0 40px; }
.hero-viewport {
    overflow-x: auto; overflow-y: visible;
    scroll-snap-type: x mandatory; scroll-behavior: smooth;
    -ms-overflow-style: none; scrollbar-width: none;
}
.hero-viewport::-webkit-scrollbar { display: none; }
.hero-track { display: flex; gap: 0; }
.hero-card {
    flex: 0 0 100%; scroll-snap-align: start;
    background: var(--c-surface);
    display: grid; grid-template-columns: 1.4fr 1fr;
    min-height: 380px; overflow: hidden;
    border-top: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
    position: relative;
    text-decoration: none;
}
.hero-card:hover { text-decoration: none; }
.hero-card.pin { background: var(--pin); border-color: var(--pin-line); }

.hero-thumb-box {
    position: relative; overflow: hidden;
    background: linear-gradient(135deg, #1b3a5c 0%, #0a1a30 100%);
    min-height: 380px;
    background-size: cover; background-position: center;
}
.hero-thumb-box::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 70% 70%, rgba(16,185,129,0.28) 0, transparent 55%),
                radial-gradient(circle at 25% 25%, rgba(255,255,255,0.10) 0, transparent 55%);
    transition: transform 1.2s ease;
}
.hero-card:hover .hero-thumb-box::before { transform: scale(1.06); }
.hero-thumb-box.has-image::before { background: rgba(10, 10, 20, 0.12); }
.hero-thumb-box.th-cream { background: linear-gradient(135deg, #e9dbc3, #d4bf9a); }
.hero-thumb-box.th-cream::before { background: radial-gradient(circle at 70% 70%, rgba(27,58,92,0.18) 0, transparent 55%), radial-gradient(circle at 25% 25%, rgba(255,255,255,0.30) 0, transparent 55%); }
.hero-thumb-box.th-green { background: linear-gradient(135deg, #a7d9c5, #6fbfa0); }
.hero-thumb-box.th-green::before { background: radial-gradient(circle at 70% 70%, rgba(27,58,92,0.18) 0, transparent 55%), radial-gradient(circle at 25% 25%, rgba(255,255,255,0.25) 0, transparent 55%); }
.hero-thumb-box.th-stone { background: linear-gradient(135deg, #cfccc1, #a9a69b); }
.hero-thumb-box.th-stone::before { background: radial-gradient(circle at 70% 70%, rgba(27,58,92,0.20) 0, transparent 55%), radial-gradient(circle at 25% 25%, rgba(255,255,255,0.25) 0, transparent 55%); }

/* hero-badge-row — hero-body 안 상단에서 카테고리·D-day·라벨·핀이 나란히 */
.hero-badge-row {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 8px; margin-bottom: 6px;
}
.hero-thumb-label {
    display: inline-flex; align-items: center;
    font-size: 10.5px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--c-muted);
    font-weight: 600;
}
.hero-dday {
    display: inline-flex; align-items: center;
    padding: 3px 9px; background: var(--c-brand); color: #fff;
    font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em;
    font-variant-numeric: tabular-nums;
    border-radius: 2px;
}
.hero-pin-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px;
    background: var(--pin); color: var(--pin-ink);
    border: 1px solid var(--pin-line); border-radius: 2px;
    margin-left: auto;
}
/* pin-mark 톤은 기존에 썸네일 variant 에 따라 조정됐으나,
   이제 hero-body 안으로 이동해 배경과 무관 — 고정 pin-ink 사용 */

.hero-body {
    padding: 40px 44px 36px;
    display: flex; flex-direction: column; gap: 14px;
    min-width: 0;
}
.hero-body .cat {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--c-muted);
    align-self: flex-start; background: transparent; border: 0; padding: 0;
}
.hero-body .cat::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: var(--c-muted); flex-shrink: 0;
}
.hero-body .cat-networking::before { background: var(--cat-net); }
.hero-body .cat-talks::before      { background: var(--cat-talks); }
.hero-body .cat-resources::before  { background: var(--cat-res); }
.hero-card.pin .hero-body .cat { color: var(--pin-ink); opacity: 0.75; }

.hero-body h3 {
    font-size: 26px; line-height: 1.25; font-weight: 800;
    letter-spacing: -0.022em; color: var(--c-ink);
    margin: 0 0 2px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    word-break: keep-all;
}
.hero-card.pin .hero-body h3 { color: var(--pin-ink); }
.hero-body p {
    font-size: 14.5px; color: var(--c-muted); margin: 0;
    line-height: 1.6;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    word-break: keep-all;
}
.hero-card.pin .hero-body p { color: var(--pin-ink); opacity: 0.75; }

.hero-facts {
    display: grid; grid-template-columns: 52px 1fr;
    gap: 6px 16px; font-size: 13px;
    margin: auto 0 0; padding-top: 18px;
    border-top: 1px dashed var(--c-line);
}
.hero-facts dt {
    color: var(--c-muted); font-size: 10.5px;
    letter-spacing: 0.08em; text-transform: uppercase;
    font-weight: 700; padding-top: 2px;
}
.hero-facts dd { margin: 0; color: var(--c-ink-2); font-weight: 500; }
.hero-card.pin .hero-facts { border-top-color: var(--pin-line); }
.hero-card.pin .hero-facts dd { color: var(--pin-ink); }

.hero-cta {
    display: flex; align-items: center; gap: 12px; margin-top: 12px;
}
.hero-cta .btn {
    padding: 10px 20px; background: var(--c-ink); color: #fff;
    font-size: 13px; font-weight: 700; letter-spacing: 0.02em;
    border: 0; text-decoration: none;
    transition: background var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
    cursor: pointer;
}
.hero-cta .btn:hover { background: var(--c-ink-2); }
.hero-cta .btn.go { background: var(--c-brand); }
.hero-cta .btn.go:hover { background: var(--c-brand-dk); }
.hero-cta .btn:active { transform: scale(.97); }
.hero-cta .seat-mini {
    font-size: 12px; color: var(--c-muted);
    font-variant-numeric: tabular-nums;
}
.hero-cta .seat-mini b { color: var(--c-ink); }
.hero-card.pin .hero-cta .seat-mini { color: var(--pin-ink); opacity: 0.75; }
.hero-card.pin .hero-cta .seat-mini b { color: var(--pin-ink); opacity: 1; }

/* Hero 하단 메타 — Pinned N/M 카운터 + 도트 */
.hero-meta {
    display: flex; align-items: center; justify-content: flex-start;
    margin-top: 18px; gap: 18px;
}
.hero-counter {
    font-size: 10.5px; color: var(--c-muted);
    font-variant-numeric: tabular-nums; letter-spacing: 0.14em;
    font-weight: 700; text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 8px;
}
.hero-counter::after {
    content: ''; width: 1px; height: 10px; background: var(--c-line);
}
.hero-counter b { color: var(--c-ink); font-weight: 700; }
.hero-dots { display: inline-flex; gap: 8px; }
.hero-dots button {
    width: 28px; height: 3px; background: var(--c-line-soft);
    border: 0; padding: 0; cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out);
}
.hero-dots button.on { background: var(--c-ink); }
.hero-dots button:focus-visible { outline: 2px solid var(--c-navy); outline-offset: 2px; }

/* ============ WIDE PIN SLIDER (1×2 — feed grid 내 자리 차지) ============ */
.wpin {
    grid-column: span 2; padding: 0;
    position: relative; overflow: hidden;
    background: var(--pin);
    border: 1px solid var(--c-line);
    display: block;           /* .card-item flex column 상속 해제 — viewport 가 100% 높이 수령 */
    height: 100%;             /* 그리드 셀 높이 명시 (자식 % 높이 기준) */
}
.wpin:hover { background: var(--pin); box-shadow: 0 6px 24px -8px rgba(10,10,10,.12); transform: none; }
.wpin-viewport {
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; scroll-behavior: smooth;
    -ms-overflow-style: none; scrollbar-width: none;
    height: 100%;
}
.wpin-slide { height: 100%; }
.wpin-viewport::-webkit-scrollbar { display: none; }
.wpin-track { display: flex; height: 100%; }
.wpin-slide {
    flex: 0 0 100%; scroll-snap-align: start;
    display: flex; flex-direction: row; min-width: 0;
    text-decoration: none; color: inherit;
}
.wpin-slide:hover { text-decoration: none; }
.wpin-slide .thumb {
    width: 50%; flex-shrink: 0; align-self: stretch;
    position: relative; aspect-ratio: auto;
}
.wpin-slide .meta {
    flex: 1; padding: 20px 22px 36px;
    display: flex; flex-direction: column; gap: 8px;
    min-width: 0; min-height: 0;
}
.wpin-slide .card-title { color: var(--pin-ink); font-size: 16px; -webkit-line-clamp: 2; font-weight: 700; }
/* wpin 본문: 2줄로 축소 + flex-grow 제거 → meta-bottom 이 margin-top: auto 로 하단 고정 가능 */
.wpin-slide .card-excerpt { -webkit-line-clamp: 2; flex: none; }
/* wpin 의 foot 은 일반 카드의 .meta-bottom 규칙을 그대로 승계 (color / weight / layout 동일). */

.wpin-dots {
    position: absolute; bottom: 14px; left: 25%;
    transform: translateX(-50%);
    display: inline-flex; gap: 8px; z-index: 3;
}
.wpin-dots button {
    width: 28px; height: 3px;
    background: rgba(255,255,255,0.45);
    border: 0; padding: 0; cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out);
    border-radius: 0;
}
.wpin-dots button.on { background: #fff; }
.wpin-dots button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.wpin-pin-mark {
    position: absolute; top: 14px; right: 16px;
    color: var(--pin-ink); z-index: 2;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.14));
}
.wpin-nav {
    position: absolute; top: 50%;
    transform: translateY(-50%); z-index: 3;
    width: 28px; height: 28px; border: 0;
    background: rgba(255,255,255,0.9);
    color: var(--c-ink); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    transition: opacity var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out);
    opacity: 0; border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.wpin:hover .wpin-nav { opacity: 1; }
.wpin-nav:hover { background: #fff; }
.wpin-nav:focus-visible { opacity: 1; outline: 2px solid var(--c-navy); outline-offset: 2px; }
.wpin-nav.prev { left: 8px; }
.wpin-nav.next { left: calc(50% - 34px); }
.wpin-nav:disabled { opacity: 0 !important; pointer-events: none; }

/* Wide-pin 카드 사이즈 오버라이드 — 카드 셀렉터보다 뒤에 와야 함 */
.card-item.wpin + .card-item { box-shadow: -1px 0 0 var(--c-line-soft); }

/* ============ LOAD MORE ============ */
.more-wrap { display: flex; justify-content: center; margin-top: 36px; }
.more-btn {
    padding: 10px 22px; background: var(--c-surface);
    border: 1px solid var(--c-line);
    color: var(--c-ink-2); font-size: 13px; font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--dur-fast) var(--ease-out);
}
.more-btn:hover { border-color: var(--c-ink); color: var(--c-ink); background: #fff; text-decoration: none; }

/* ============ 반응형 — 태블릿/모바일 그리드 축소 ============ */
@media (max-width: 960px) {
    .feed-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 210px; }
    .pin.pin-L, .pin.pin-Mw, .wpin { grid-column: span 2; }
    .hero-card { grid-template-columns: 1fr; min-height: 0; }
    .hero-thumb-box { min-height: 220px; aspect-ratio: 16/9; }
    .hero-body { padding: 24px 22px 28px; gap: 12px; }
    .hero-body h3 { font-size: 22px; }
    .wpin-slide { flex-direction: column; }
    .wpin-slide .thumb { width: 100%; aspect-ratio: 16/9; }
    .wpin-slide .meta { padding: 16px 18px 40px; }
    .wpin-dots { left: 50%; }
}
@media (max-width: 640px) {
    .feed-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
    .card-item { min-height: 160px; padding: 18px 20px; }
    .card-item + .card-item,
    .card-item[data-row="2"] { box-shadow: 0 -1px 0 var(--c-line-soft); }
    .card-item[data-col="0"] { box-shadow: 0 -1px 0 var(--c-line-soft); }
    .card-item:first-child { box-shadow: none; }
    .pin.pin-L, .pin.pin-Mw, .wpin { grid-column: span 1; }
    .hero-body { padding: 22px 20px 26px; }
    .hero-body h3 { font-size: 20px; }
    .hero-facts { grid-template-columns: 44px 1fr; font-size: 12.5px; }
    .hero-cta { flex-wrap: wrap; }
}

/* ═══════════════════════════════════════════════════════════════════
   POST DETAIL (.pd) — 상세 페이지 전용 스코프
   post.php / event.php / study.php 의 <div class="pd"> 하위에만 적용.
   홈·피드 카드 CSS 와 절대 겹치지 않음.
   handoff: docs/design_handoff_post_detail/README.md
   ═══════════════════════════════════════════════════════════════════ */

.pd {
    /* 전용 토큰 (피드와 살짝 다른 따뜻한 cream + 살짝 어두운 hairline) */
    --pd-bg: #fbfbf8;
    --pd-surface: #ffffff;
    --pd-ink: #0a0a0a;
    --pd-ink-2: #1a1a1a;
    --pd-ink-3: #2c2c2a;
    --pd-mute: #6b6b66;
    --pd-mute-2: #9a9a94;
    --pd-line: #e5e4df;
    --pd-line-soft: #efeee9;
    --pd-line-hard: #d9d8d2;
    --pd-brand: #10b981;
    --pd-brand-dk: #059669;
    --pd-brand-lt: #d1fae5;
    --pd-navy: #1b3a5c;
    --pd-navy-lt: #eef2f8;
    --pd-navy-line: #c5d1e3;
    --pd-amber: #b8763f;

    background: var(--pd-bg);
    color: var(--pd-ink-3);
    font-size: 15px; line-height: 1.6; letter-spacing: -0.01em;
    word-break: keep-all;
    padding: 20px 0 40px;
    max-width: 1280px; margin: 0 auto;
}
.pd a { color: inherit; text-decoration: none; }
.pd *, .pd *::before, .pd *::after { font-variant-numeric: tabular-nums; }

/* 2-column grid (rail 없음 — Phase 1)
   hero 는 `grid-column: 1 / -1` 로 전체 너비, main/aside 는 그 아래 row 에서 분할 */
.pd-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px 28px;
    padding: 0 40px;
    align-items: start;
}
.pd-grid > .admin-toolbar,
.pd-grid > .pd-hero { grid-column: 1 / -1; }
.pd-main {
    grid-column: 1 / 2;
    min-width: 0;
    display: flex; flex-direction: column; gap: 24px;
}
.pd-aside-col {
    grid-column: 2 / 3;
    align-self: start;
    display: flex; flex-direction: column; gap: 18px;
    min-width: 0;
}
@media (max-width: 1024px) {
    .pd-grid { grid-template-columns: 1fr; }
    .pd-main, .pd-aside-col { grid-column: 1 / -1; }
}

/* ===== HERO =====
   cover 는 홈 피드와 동일한 16/9 로 고정. meta 는 cover 의 높이에 맞춰 stretch. */
.pd-hero {
    background: var(--pd-surface);
    border: 1px solid var(--pd-line);
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    overflow: hidden;
    margin-bottom: 0;
    align-items: stretch;
}
@media (max-width: 768px) {
    .pd-hero { grid-template-columns: 1fr; }
}
.pd-hero-cover {
    position: relative;
    background: linear-gradient(135deg, #1b3a5c 0%, #0e2240 100%);
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.pd-hero-cover::before {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(circle at 72% 72%, rgba(16,185,129,0.22) 0, transparent 55%),
        radial-gradient(circle at 25% 25%, rgba(255,255,255,0.10) 0, transparent 55%);
}
.pd-hero-cover.has-image { background: #0e2240; }
.pd-hero-cover.has-image img {
    width: 100%; height: 100%; object-fit: cover;
    position: absolute; inset: 0;
}
.pd-hero-cover.is-event-cover img { object-fit: contain; background: #0a1420; }
.pd-hero-cover-label {
    position: absolute; bottom: 16px; left: 18px;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 10.5px; color: rgba(255,255,255,0.5);
    letter-spacing: 0.08em;
}
/* D-day · Pin 은 cat-row 안의 inline chip 으로 배치 — 이미지 위를 가리지 않음 */
.pd-hero-dday {
    display: inline-flex; align-items: center;
    padding: 3px 9px;
    background: var(--pd-brand); color: #fff;
    font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em;
    border-radius: 2px;
    font-variant-numeric: tabular-nums;
}
.pd-hero-pin {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px;
    background: var(--pd-navy); color: #fff;
    border-radius: 2px;
}
.pd-hero-meta {
    padding: 28px 32px 26px;
    display: flex; flex-direction: column; gap: 10px;
    min-width: 0;
}
.pd-cat-row {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
}
.pd .pd-cat {
    display: inline-block;
    padding: 4px 9px;
    font-size: 10.5px; font-weight: 800;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: #fff; border-radius: 2px;
    background: var(--pd-mute);
    text-decoration: none;
}
.pd .pd-cat.net    { background: var(--pd-brand); }
.pd .pd-cat.talks  { background: var(--pd-navy); }
.pd .pd-cat.res    { background: var(--pd-amber); }
.pd-subtag {
    font-size: 12px; color: var(--pd-mute); font-weight: 600;
    padding: 3px 8px; background: var(--pd-line-soft);
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}
.pd-subtag:hover { color: var(--pd-ink); background: var(--pd-line); }

/* 북마크 form — margin-left:auto 는 공유 버튼에만 적용, 북마크는 share 왼쪽에 붙음 */
.pd .pd-hero-bookmark-form {
    margin: 0 0 0 auto;
    padding: 0;
    display: inline-flex;
}
.pd .pd-hero-bookmark-form + .pd-hero-share {
    margin-left: 6px;  /* share 가 form 바로 옆에 붙었으므로 추가 auto 제거 + 6px gap */
}
.pd .pd-hero-bookmark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    padding: 0; background: transparent;
    border: 1px solid var(--pd-line);
    color: var(--pd-mute);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
}
.pd .pd-hero-bookmark:hover {
    color: var(--pd-brand-dk);
    border-color: var(--pd-brand-dk);
}
.pd .pd-hero-bookmark.is-on {
    background: var(--pd-brand);
    color: #fff;
    border-color: var(--pd-brand);
}
.pd .pd-hero-bookmark.is-on:hover {
    background: var(--pd-brand-dk);
    border-color: var(--pd-brand-dk);
}
@media (max-width: 480px) {
    .pd .pd-hero-bookmark { width: 32px; height: 32px; }
}

/* 공유 버튼 — cat-row 우측 끝. 탭 타겟 넓게 유지하되 시각적으로 얇게 */
.pd .pd-hero-share {
    margin-left: auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    padding: 0; background: transparent;
    border: 1px solid var(--pd-line);
    color: var(--pd-mute);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
}
.pd .pd-hero-share:hover {
    background: var(--pd-ink); color: #fff; border-color: var(--pd-ink);
}
.pd .pd-hero-share.is-ok {
    background: var(--pd-brand); color: #fff; border-color: var(--pd-brand);
}
@media (max-width: 480px) {
    .pd .pd-hero-share { width: 32px; height: 32px; }
}

.pd-hero-title {
    font-size: 30px; line-height: 1.22; font-weight: 800;
    letter-spacing: -0.024em; color: var(--pd-ink);
    margin: 0; text-wrap: pretty;
}
.pd-hero-deck {
    font-size: 17px; color: var(--pd-ink-3);
    font-weight: 500;
    line-height: 1.55; letter-spacing: -0.012em;
    margin: 2px 0 4px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 768px) {
    .pd-hero-deck { font-size: 15px; }
}
/* 발행/업데이트 — 부제목 아래 독립 행 (byline 위, 가벼운 메타 스트립) */
.pd-hero-dates {
    display: flex; gap: 18px; flex-wrap: wrap;
    font-size: 11.5px; color: var(--pd-mute);
    font-weight: 600; letter-spacing: 0;
    margin-top: 4px;
}
.pd-hero-dates b {
    color: var(--pd-ink-2); font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-left: 6px;
}
.pd-hero-dates em {
    font-style: normal; color: var(--pd-mute);
    font-weight: 500; margin-left: 6px;
}

.pd-hero-byline {
    display: grid; grid-template-columns: 44px 1fr auto;
    gap: 12px; align-items: center;
    padding-top: 14px; margin-top: auto;
    border-top: 1px dashed var(--pd-line);
}
.pd-hero-byline .avatar { width: 44px !important; height: 44px !important; font-size: 15px !important; }
.pd-byline-name {
    font-size: 13px; font-weight: 700; color: var(--pd-ink);
}
.pd-byline-handle {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 12px; color: var(--pd-mute); margin-left: 6px;
}
.pd-byline-bio {
    font-size: 12px; color: var(--pd-mute); line-height: 1.5;
    margin-top: 2px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ===== BODY ===== */
.pd-body {
    background: var(--pd-surface);
    border: 1px solid var(--pd-line);
    padding: 40px 56px 48px;
}
@media (max-width: 768px) {
    .pd-body { padding: 28px 22px 32px; }
}
.pd-body h2 {
    font-size: 21px; line-height: 1.35; font-weight: 800;
    letter-spacing: -0.018em; color: var(--pd-ink);
    margin: 28px 0 10px; padding-top: 6px;
    position: relative; scroll-margin-top: 100px;
}
.pd-body h2:first-child { margin-top: 0; padding-top: 0; }
.pd-body h2::before {
    content: '§'; position: absolute; left: -26px; top: 9px;
    font-size: 16px; font-weight: 400; color: var(--pd-mute-2);
}
@media (max-width: 768px) { .pd-body h2::before { display: none; } }
.pd-body h3 {
    font-size: 16px; font-weight: 700; color: var(--pd-ink);
    letter-spacing: -0.012em;
    margin: 18px 0 6px;
}
.pd-body p {
    margin: 0 0 1.15em;
    font-size: 15px; line-height: 1.72;
    color: var(--pd-ink-3);
}
.pd-body p > b, .pd-body p > strong {
    color: var(--pd-ink); font-weight: 700;
    background: linear-gradient(180deg, transparent 62%, rgba(16,185,129,0.20) 62%);
    padding: 0 2px;
}
.pd-body ul, .pd-body ol { margin: 0 0 1.2em; padding-left: 20px; }
.pd-body li { margin-bottom: 6px; color: var(--pd-ink-3); }
.pd-body ul li::marker { color: var(--pd-brand-dk); }
.pd-body a {
    color: var(--pd-brand-dk); text-decoration: underline;
    text-decoration-color: rgba(16,185,129,0.35);
    text-underline-offset: 3px;
}
.pd-body a:hover { text-decoration-color: var(--pd-brand-dk); }
.pd-body img.article-body-img {
    display: block; max-width: 100%; height: auto;
    margin: 24px auto;
    border: 1px solid var(--pd-line);
}
.pd-body code {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 0.92em;
    padding: 1px 6px; background: var(--pd-line-soft);
    border-radius: 2px;
}

/* Pull quote */
.pd-body .pq {
    border-left: 3px solid var(--pd-brand);
    padding: 8px 0 8px 18px;
    margin: 22px 0;
    font-size: 17px; line-height: 1.55;
    color: var(--pd-ink); font-weight: 500;
    letter-spacing: -0.014em;
}
.pd-body .pq cite {
    display: block; font-size: 12px; color: var(--pd-mute);
    font-weight: 500; margin-top: 8px; letter-spacing: 0.02em;
    font-style: normal;
}

/* Callout box (navy tint) */
.pd-body .callout {
    display: grid; grid-template-columns: 32px 1fr;
    gap: 14px; align-items: start;
    padding: 14px 18px;
    background: var(--pd-navy-lt);
    border: 1px solid var(--pd-navy-line);
    margin: 22px 0;
}
.pd-body .callout .c-ic {
    width: 28px; height: 28px; border-radius: 2px;
    background: var(--pd-navy); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 800;
}
.pd-body .callout .c-body {
    font-size: 13.5px; color: var(--pd-navy); line-height: 1.6;
}
.pd-body .callout .c-body b { color: var(--pd-navy); font-weight: 700; }

/* Figure + caption */
.pd-body figure { margin: 24px 0; }
.pd-body figcaption {
    font-size: 11.5px; color: var(--pd-mute);
    margin-top: 8px; padding-left: 14px;
    border-left: 2px solid var(--pd-line-hard);
    letter-spacing: 0.01em;
}

/* Facts grid (event 4-col) */
.pd-body .pd-facts {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border: 1px solid var(--pd-line);
    background: var(--pd-bg);
    margin: 4px 0 28px;
}
.pd-body .pd-facts > div {
    padding: 12px 14px;
    border-right: 1px solid var(--pd-line-soft);
    background: var(--pd-surface);
}
.pd-body .pd-facts > div:last-child { border-right: 0; }
.pd-body .pd-facts .fk {
    font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--pd-mute); font-weight: 700; margin-bottom: 4px;
}
.pd-body .pd-facts .fv { font-size: 13px; color: var(--pd-ink); font-weight: 600; }
.pd-body .pd-facts .fv small {
    font-size: 11px; color: var(--pd-mute); font-weight: 500; margin-left: 3px;
}
@media (max-width: 640px) {
    .pd-body .pd-facts { grid-template-columns: repeat(2, 1fr); }
    .pd-body .pd-facts > div:nth-child(2) { border-right: 0; }
}

/* Study file inline card */
.pd-file-card {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 18px;
    background: var(--pd-navy-lt); border: 1px solid var(--pd-navy-line);
    margin: 0 0 22px;
    color: var(--pd-navy);
}
.pd-file-card .pd-file-label {
    font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--pd-navy);
    flex-shrink: 0;
}
.pd-file-card .pd-file-btn {
    display: inline-flex; align-items: center; gap: 10px; flex: 1;
    padding: 9px 14px; background: var(--pd-surface);
    border: 1px solid var(--pd-navy-line);
    color: var(--pd-navy); font-size: 13px; font-weight: 600;
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
}
.pd-file-card .pd-file-btn:hover {
    background: var(--pd-navy); color: #fff; border-color: var(--pd-navy);
}
.pd-file-card .pd-file-name { flex: 1; font-weight: 600; }
.pd-file-card .pd-file-cta { font-weight: 700; font-size: 12px; }

/* .pd-pfoot / .pd-share-btn 블록 제거됨 (2026-04-24 cleanup)
   공유 기능은 .pd-hero-share (hero cat-row) 로 통합 이전 */

/* ===== 댓글 삭제 버튼 — 터치 타겟 확장 (invisible hit area) ===== */
.pd-cm-del-btn {
    position: relative;
    background: none; border: 0;
    color: var(--pd-mute, var(--c-muted));
    font-size: 11.5px; font-weight: 600;
    padding: 0;
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-out);
}
.pd-cm-del-btn:hover { color: #991b1b; }
/* invisible hit area 로 44×44 터치 타겟 확보 (시각 크기는 유지) */
.pd-cm-del-btn::after {
    content: ''; position: absolute;
    top: -12px; left: -12px; right: -12px; bottom: -12px;
}

/* ===== 접근성: Skip to content 링크 (키보드 탭으로만 표시) ===== */
.skip-link {
    position: absolute; top: 0; left: 0;
    padding: 10px 16px;
    background: var(--c-ink); color: #fff;
    font-size: 13px; font-weight: 700;
    text-decoration: none;
    transform: translateY(-100%);
    transition: transform var(--dur-fast) var(--ease-out);
    z-index: 200;
}
.skip-link:focus {
    transform: translateY(0);
    outline: 2px solid var(--c-brand);
    outline-offset: 2px;
}

/* main tabindex=-1 focus outline 제거 (내비 후 포커스 이동만) */
.main-content:focus { outline: none; }

/* ===== 상세 페이지 breadcrumb (pd 스코프 외 — 독립 nav) ===== */
.pd-breadcrumb {
    max-width: 1280px; margin: 0 auto;
    padding: 4px 40px 8px;
    font-size: 12px; color: var(--pd-mute, var(--c-muted));
    display: flex; align-items: center; gap: 6px;
    flex-wrap: wrap;
    letter-spacing: -0.006em;
}
.pd-breadcrumb a {
    color: inherit;
    transition: color var(--dur-fast) var(--ease-out);
}
.pd-breadcrumb a:hover { color: var(--c-ink); text-decoration: none; }
.pd-breadcrumb-sep { color: var(--c-line-hard, #d0d0cb); user-select: none; }
.pd-breadcrumb-current {
    color: var(--c-ink-2);
    font-weight: 600;
    max-width: 50ch;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 1024px) {
    .pd-breadcrumb { padding: 4px 12px 8px; }
}
@media (max-width: 480px) {
    .pd-breadcrumb { font-size: 11px; padding: 2px 12px 6px; }
    .pd-breadcrumb-current { max-width: 20ch; }
}

/* ===== event_admin PII 경고 배너 ===== */
.pii-warning {
    max-width: 1180px; margin: 16px auto 0;
    padding: 14px 18px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-left: 4px solid #991b1b;
    font-size: 13px; line-height: 1.6;
    color: #7f1d1d;
}
.pii-warning-head {
    font-size: 13.5px; font-weight: 800;
    margin-bottom: 6px;
    color: #7f1d1d;
}
.pii-warning p { margin: 4px 0; }
.pii-warning ul { margin: 4px 0 4px 18px; padding: 0; }
.pii-warning li { margin-bottom: 2px; }
.pii-warning b { color: #7f1d1d; font-weight: 700; }
.pii-warning .text-brand { color: var(--c-brand-dk); }
.pii-warning-link { margin-top: 6px; }
.pii-warning-link a {
    color: #7f1d1d; font-weight: 700;
    text-decoration: underline;
}

/* ===== 가입 시 개인정보 수집 동의 ===== */
.consent-row {
    background: var(--c-line-soft);
    border: 1px solid var(--c-line);
    padding: 14px 16px;
    margin-top: 12px;
}
.consent-label {
    display: flex; align-items: flex-start; gap: 10px;
    cursor: pointer;
    font-weight: 700; color: var(--c-ink);
    font-size: 14px; line-height: 1.4;
}
.consent-label input[type="checkbox"] {
    margin-top: 2px; width: 16px; height: 16px; flex-shrink: 0;
    cursor: pointer;
}
.consent-text { flex: 1; }
.consent-summary {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--c-line);
    font-size: 12.5px; line-height: 1.65;
    color: var(--c-muted);
}
.consent-summary b { color: var(--c-ink-2); font-weight: 600; }
.consent-summary .text-brand { color: var(--c-brand-dk); font-weight: 700; }
.consent-link {
    display: inline-block; margin-top: 8px;
    font-size: 12.5px; font-weight: 700;
    color: var(--c-navy);
    letter-spacing: -0.008em;
}
.consent-link:hover { color: var(--c-ink); }

/* ===== 법률 문서 페이지 (/privacy, /terms 등) ===== */
.legal-page { max-width: 760px; margin: 0 auto; padding: 40px 24px 80px; }
.legal-body { font-size: 14.5px; line-height: 1.72; color: var(--c-text); }
.legal-body h2 {
    font-size: 18px; font-weight: 800;
    margin: 32px 0 12px; color: var(--c-ink);
    letter-spacing: -0.012em;
}
.legal-body h3 {
    font-size: 15px; font-weight: 700;
    margin: 20px 0 8px; color: var(--c-ink-2);
}
.legal-body p { margin: 0 0 12px; }
.legal-body ul, .legal-body ol { margin: 0 0 16px; padding-left: 22px; }
.legal-body li { margin-bottom: 5px; }
.legal-body code {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 12.5px;
    background: var(--c-line-soft);
    padding: 1px 6px;
    color: var(--c-navy);
}
.legal-body hr { border: 0; border-top: 1px solid var(--c-line); margin: 32px 0 16px; }
.legal-highlight {
    background: var(--c-link-lt, #eef2f8);
    border-left: 3px solid var(--c-navy);
    padding: 12px 16px;
    margin: 16px 0;
    line-height: 1.65;
}

/* ===== /me 북마크 탭 ===== */
.my-bookmarks-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; }
.my-bookmark-item { border-top: 1px solid var(--c-line-soft); }
.my-bookmark-item:first-child { border-top: 0; }
.my-bookmark-link {
    display: grid; grid-template-columns: 72px 1fr; gap: 14px;
    padding: 14px 6px;
    text-decoration: none; color: inherit;
    transition: background var(--dur-fast) var(--ease-out);
}
.my-bookmark-link:hover { background: var(--c-line-soft); text-decoration: none; }
.my-bookmark-thumb {
    width: 72px; height: 54px;
    object-fit: cover;
    background: var(--c-line-soft);
    display: inline-block;
}
.my-bookmark-thumb-empty {
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
    color: var(--c-muted);
    background: linear-gradient(135deg, #f0efe9, #e7e6df);
}
.my-bookmark-meta { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.my-bookmark-title {
    font-size: 14.5px; font-weight: 700; color: var(--c-ink);
    line-height: 1.35; letter-spacing: -0.012em;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.my-bookmark-sub {
    font-size: 12.5px; color: var(--c-muted);
    line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.my-bookmark-footer {
    margin-top: 2px;
    font-size: 11px; color: var(--c-muted);
    display: flex; gap: 8px; align-items: center;
}
.my-bookmark-tag { color: var(--c-navy); font-weight: 600; }
.my-bookmark-ago { font-variant-numeric: tabular-nums; }

/* ===== COMMENTS ===== */
.pd-comments {
    background: var(--pd-surface);
    border: 1px solid var(--pd-line);
    padding: 28px 40px 32px;
}
@media (max-width: 768px) { .pd-comments { padding: 22px 20px 26px; } }
.pd-comments-head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 6px; padding-bottom: 12px;
    border-bottom: 1px solid var(--pd-line-soft);
}
.pd-comments-head h3 {
    font-size: 15px; font-weight: 800; color: var(--pd-ink);
    letter-spacing: -0.01em; margin: 0;
}
.pd-comments-head .pd-cnt {
    color: var(--pd-brand-dk); margin-left: 3px; font-weight: 800;
}
.pd-cm-form {
    display: grid; grid-template-columns: 36px 1fr;
    gap: 12px;
    padding: 14px 0 18px;
    border-bottom: 1px dashed var(--pd-line);
    margin-bottom: 16px;
}
.pd-cm-form .avatar { width: 36px !important; height: 36px !important; font-size: 13px !important; }
.pd-cm-form .pd-cm-input {
    display: block; width: 100%; padding: 10px 12px;
    border: 1px solid var(--pd-line);
    font: inherit; font-size: 13.5px;
    color: var(--pd-ink-2); background: var(--pd-bg);
    resize: vertical; min-height: 68px; outline: none;
    transition: border-color var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out);
    box-sizing: border-box;
}
.pd-cm-form .pd-cm-input:focus {
    border-color: var(--pd-ink); background: var(--pd-surface);
}
.pd-cm-form .pd-cm-actions {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 8px; flex-wrap: wrap; gap: 8px;
}
.pd-cm-form .pd-cm-hint { font-size: 11px; color: var(--pd-mute); }
.pd-cm-form .pd-cm-submit {
    font-size: 12.5px; font-weight: 700;
    padding: 7px 14px;
    background: var(--pd-brand); color: #fff; border: 0;
    cursor: pointer; letter-spacing: 0.02em;
    transition: background var(--dur-fast) var(--ease-out);
}
.pd-cm-form .pd-cm-submit:hover { background: var(--pd-brand-dk); }

.pd-cm {
    display: grid; grid-template-columns: 36px 1fr;
    gap: 12px; padding: 14px 0;
    border-bottom: 1px solid var(--pd-line-soft);
    position: relative;
}
.pd-cm:last-child { border-bottom: 0; }
.pd-cm .avatar { width: 36px !important; height: 36px !important; font-size: 13px !important; }
.pd-cm-head-in {
    display: flex; align-items: baseline; gap: 8px;
    margin-bottom: 4px; flex-wrap: wrap;
}
.pd-cm-name { font-size: 13px; font-weight: 700; color: var(--pd-ink); }
.pd-cm-badge {
    font-size: 9.5px; font-weight: 800; text-transform: uppercase;
    padding: 1px 6px; border-radius: 2px;
    background: var(--pd-brand); color: #fff; letter-spacing: 0.06em;
}
.pd-cm-time {
    font-size: 11.5px; color: var(--pd-mute);
    font-variant-numeric: tabular-nums;
}
.pd-cm-body {
    font-size: 13.5px; line-height: 1.62;
    color: var(--pd-ink-3); margin: 0;
    word-break: keep-all;
}
.pd-cm-actions-row {
    display: flex; gap: 12px; margin-top: 6px;
    font-size: 11.5px; color: var(--pd-mute); font-weight: 600;
}
.pd-cm-actions-row a:hover { color: var(--pd-ink); }
.pd-cm-actions-row .pd-up.on { color: var(--pd-brand-dk); }
.pd-cm.reply {
    margin-left: 48px; padding-left: 28px;
}
.pd-cm.reply::before {
    content: ''; position: absolute;
    left: -30px; top: -14px;
    width: 2px; height: calc(50% + 14px);
    background: var(--pd-line-hard);
}
.pd-cm.reply::after {
    content: ''; position: absolute;
    left: -30px; top: calc(50% + 0px);
    width: 22px; height: 2px;
    background: var(--pd-line-hard);
}
.pd-cm.is-author {
    background: linear-gradient(90deg, rgba(16,185,129,0.08), transparent 65%);
    padding-right: 14px;
}
.pd-cm.is-author::before, .pd-cm.is-author::after {
    background: var(--pd-brand);
}

/* ===== ASIDE BLOCKS ===== */
.pd-aside-col .as-card {
    background: var(--pd-surface);
    border: 1px solid var(--pd-line);
    padding: 16px 18px;
}
.pd-aside-col .as-title {
    font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
    font-weight: 800; color: var(--pd-ink); margin: 0 0 10px;
    display: flex; align-items: baseline; justify-content: space-between;
}
.pd-aside-col .as-title em {
    font-style: normal; font-weight: 500; font-size: 11px;
    color: var(--pd-mute); letter-spacing: 0.02em;
}
.pd-aside-col .as-list {
    list-style: none; margin: 0; padding: 0;
}
.pd-aside-col .as-list li {
    padding: 9px 0;
    border-top: 1px solid var(--pd-line-soft);
    cursor: pointer;
}
.pd-aside-col .as-list li:first-child { border-top: 0; padding-top: 2px; }
.pd-aside-col .as-list .il-title {
    font-size: 12.5px; font-weight: 600; color: var(--pd-ink-2);
    line-height: 1.4; letter-spacing: -0.008em; margin-bottom: 3px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    transition: color var(--dur-fast) var(--ease-out);
}
.pd-aside-col .as-list li:hover .il-title { color: var(--pd-brand-dk); }
.pd-aside-col .as-list .il-meta {
    font-size: 11px; color: var(--pd-mute);
    display: flex; gap: 8px; align-items: center;
}
.pd-aside-col .as-list .il-meta .dot { opacity: 0.5; }
.pd-aside-col .as-list .il-meta .pin-mk { color: var(--pd-navy); font-weight: 700; }
.pd-aside-col .as-more {
    display: block; margin-top: 10px;
    font-size: 11.5px; font-weight: 700; color: var(--pd-mute);
    text-align: right; letter-spacing: 0.02em;
    transition: color var(--dur-fast) var(--ease-out);
}
.pd-aside-col .as-more:hover { color: var(--pd-ink); }

/* Event aside: D-day + seats progress */
.pd-aside-col .as-event-dday {
    font-size: 22px; font-weight: 800; color: var(--pd-brand-dk);
    letter-spacing: -0.012em; margin-bottom: 8px;
}
.pd-aside-col .as-seat-row {
    display: flex; justify-content: space-between;
    font-size: 11.5px; color: var(--pd-mute); font-weight: 600;
    margin-bottom: 6px;
}
.pd-aside-col .as-seat-row b {
    color: var(--pd-ink); font-variant-numeric: tabular-nums;
}
.pd-aside-col .as-seat-bar {
    height: 6px; background: var(--pd-line-soft);
    position: relative; overflow: hidden;
}
.pd-aside-col .as-seat-fill {
    position: absolute; top: 0; left: 0; bottom: 0;
    background: linear-gradient(90deg, var(--pd-brand), var(--pd-brand-dk));
}
.pd-aside-col .as-rsvp-btn {
    display: block; width: 100%; margin: 0;
    padding: 12px 0; text-align: center;
    background: var(--pd-brand); color: #fff;
    font-size: 13.5px; font-weight: 700; letter-spacing: 0.02em;
    border: 0; cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out);
}
.pd-aside-col .as-rsvp-btn:hover { background: var(--pd-brand-dk); }
.pd-aside-col .as-rsvp-hint {
    font-size: 11px; color: var(--pd-mute);
    text-align: center; margin-top: 8px;
}

/* Event aside: facts dl */
.pd-aside-col .as-event-facts {
    margin: 10px 0 0; padding: 10px 0 0;
    display: grid; grid-template-columns: 1fr; gap: 6px;
    border-top: 1px solid var(--pd-line-soft);
}
.pd-aside-col .as-event-facts > div {
    display: grid; grid-template-columns: 48px 1fr; gap: 10px;
    font-size: 12.5px; line-height: 1.45;
}
.pd-aside-col .as-event-facts .fact-label {
    font-size: 11px; color: var(--pd-mute); font-weight: 600;
    letter-spacing: 0; text-transform: none;
    padding-top: 1px;
}
.pd-aside-col .as-event-facts > div > div:last-child {
    color: var(--pd-ink-2); font-weight: 500;
    word-break: keep-all;
}

/* Event aside: seats wrapper */
.pd-aside-col .as-event-seats {
    margin: 10px 0 0;
    padding: 10px 0 0;
    border-top: 1px solid var(--pd-line-soft);
}

/* Event aside: RSVP action box */
.pd-aside-col .as-rsvp-box {
    margin-top: 12px; padding-top: 12px;
    border-top: 1px solid var(--pd-line-soft);
}
.pd-aside-col .as-rsvp-msg {
    font-size: 12.5px; color: var(--pd-ink-2); font-weight: 600;
    padding: 10px 12px; background: var(--pd-line-soft);
    border-left: 2px solid var(--pd-line);
    line-height: 1.5;
}
.pd-aside-col .as-rsvp-msg small {
    display: block; font-size: 11px; color: var(--pd-mute);
    font-weight: 500; margin-top: 3px;
}
.pd-aside-col .as-rsvp-msg-ok {
    color: var(--pd-brand-dk); border-left-color: var(--pd-brand);
    background: var(--pd-brand-lt);
}
.pd-aside-col .as-rsvp-msg-err {
    color: #991b1b; border-left-color: #991b1b;
    background: #fef2f2;
}
.pd-aside-col .as-rsvp-cancel-btn {
    display: block; width: 100%; margin-top: 10px;
    padding: 9px 0; text-align: center;
    background: transparent; color: var(--pd-mute);
    font-size: 12px; font-weight: 600;
    border: 1px solid var(--pd-line); cursor: pointer;
    transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.pd-aside-col .as-rsvp-cancel-btn:hover {
    color: #991b1b; border-color: #991b1b;
}

/* Event aside: RSVP form fields */
.pd-aside-col .as-rsvp-form {
    display: grid; gap: 10px;
}
.pd-aside-col .as-rsvp-form .form-row {
    display: grid; gap: 4px;
}
.pd-aside-col .as-rsvp-form .form-row label {
    font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--pd-mute);
}
.pd-aside-col .as-rsvp-form .form-row label small {
    font-weight: 500; text-transform: none; letter-spacing: 0;
    color: var(--pd-mute); opacity: 0.8;
}
.pd-aside-col .as-rsvp-form input[type="text"],
.pd-aside-col .as-rsvp-form input[type="tel"],
.pd-aside-col .as-rsvp-form input[type="email"],
.pd-aside-col .as-rsvp-form textarea {
    width: 100%; padding: 8px 10px;
    font: inherit; font-size: 13px;
    color: var(--pd-ink); background: #fff;
    border: 1px solid var(--pd-line);
    box-sizing: border-box;
    transition: border-color var(--dur-fast) var(--ease-out);
}
.pd-aside-col .as-rsvp-form input:focus,
.pd-aside-col .as-rsvp-form textarea:focus {
    outline: 0; border-color: var(--pd-brand);
}
.pd-aside-col .as-rsvp-form textarea {
    resize: vertical; min-height: 56px; line-height: 1.5;
}

/* Admin toolbar in .pd context — 기본 스타일 재사용하되 상단 마진 조정 */
.pd .admin-toolbar { margin: 0 0 12px; }

/* ═══════════════════════════════════════════════════════════════════
   § M — MOBILE OVERRIDES (added 2026-04-24)
   Breakpoints: XS 360 · SM 480 · MD 720 · LG 1024
   Plan: docs/plans/PLAN-20260424-mobile.md
   모바일에서만 적용. 데스크톱 스타일은 상단 블록 유지.
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   M.1 — Token overrides (:root 를 모바일에서만 축소)
   색상·radius·letter-spacing 은 건드리지 않음 (R4, R6 유지).
   ───────────────────────────────────────────── */
@media (max-width: 720px) {
    :root {
        /* 큰 여백 토큰만 축소 — sp-1~4 는 유지 */
        --sp-7:  24px;   /* was 32 */
        --sp-8:  28px;   /* was 40 */
        --sp-9:  36px;   /* was 48 */
        --sp-10: 48px;   /* was 64 */
        --sp-11: 56px;   /* was 80 */

        /* 대형 타이포만 축소 — h1/h2/display */
        --fs-4xl: 32px;  /* was 40 */
        --fs-3xl: 26px;  /* was 32 — h1 */
        --fs-2xl: 22px;  /* was 28 — h2 */
        --fs-xl:  19px;  /* was 22 */
    }
}
@media (max-width: 480px) {
    :root {
        --sp-5:  16px;   /* was 20 */
        --sp-6:  18px;   /* was 24 */
        --sp-7:  20px;   /* was 32 */
        --sp-8:  22px;   /* was 40 */

        --fs-3xl: 24px;
        --fs-2xl: 20px;
    }
}

/* ─────────────────────────────────────────────
   M.2 — Layout (컨테이너 · 히어로 · 그리드 폴백)
   ───────────────────────────────────────────── */
@media (max-width: 720px) {
    /* feed-grid · SM/MD 재확인 (기존 3371·4009 가 이미 2열, §M 이 source order 로 확정) */
    .feed-grid { grid-auto-rows: auto; }

    /* hero slider · L 핀을 모바일에서 단열로 */
    .hero-slider { margin-bottom: 24px; }
    .hero-card  { grid-template-columns: 1fr; min-height: auto; }
    .hero-thumb-box { min-height: 220px; aspect-ratio: 16/9; }
    .hero-body  { padding: 24px 22px 28px; gap: 12px; }
    .hero-body h3 { font-size: 22px; }

    /* §M.2 의 .pd-hero-title · pd-body · pd-hero-meta 는 §M-3 가 완전 대체 — 제거 완료 (2026-04-24 cleanup) */

    /* members grid · 중간 폭 명시 폴백 */
    .members-grid { grid-template-columns: repeat(2, minmax(160px, 1fr)); }
}
@media (max-width: 480px) {
    /* .pd-cm-form · 댓글 폼 축소 + textarea 확장 — §M-4.4 가 덮지만 여기 32px grid 만 유지 (하위 호환) */
    .pd .pd-cm-form { grid-template-columns: 32px 1fr; gap: 8px; }
    .pd .pd-cm-input { min-height: 84px; }

    /* .write-main-col · 쓰기 페이지 좌우 패딩 */
    .write-main-col { padding: 18px 14px; }

    /* members · 2열 유지하되 minmax 조정 */
    .members-grid { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
}
@media (max-width: 360px) {
    /* XS · 초소형 */
    .members-grid { grid-template-columns: repeat(2, minmax(130px, 1fr)); }
}

/* ─────────────────────────────────────────────
   M.3 — Touch targets (44×44 정책)
   시각 크기 유지, 히트 영역만 확장하는 ::after 패턴 포함.
   ───────────────────────────────────────────── */
@media (max-width: 720px) {
    .btn-sm, .btn-outline-sm,
    .pd .pd-cm-submit,
    .chip, .me-stat, .reset-link {
        min-height: 44px;
    }
    .pd .pd-cm-submit { padding: 10px 18px; font-size: 13px; }

    /* 히어로 도트 — 시각 크기 유지, invisible hit area */
    .hero-dots button { position: relative; }
    .hero-dots button::after {
        content: ''; position: absolute; inset: -20px -6px;
    }
}

/* ─────────────────────────────────────────────
   M.4 — 페이지별·컴포넌트별 조정
     · .me-stats · 인증 폼 · 관리자 전용
   ───────────────────────────────────────────── */
@media (max-width: 480px) {
    /* me.php 통계 카드 세로 스택 */
    .me-stats { grid-template-columns: 1fr; gap: 6px; }
}

/* 인증 페이지 — 입력·버튼 44 보장 */
@media (max-width: 720px) {
    .auth-form input,
    .auth-form button {
        min-height: 44px;
    }
}

/* ── 관리자 테이블 공통 — 3414~3416 의 padding/overflow 는 이미 선언됨 ── */
@media (max-width: 720px) {
    .admin-card > table.data,
    .attendees-table { min-width: 640px; } /* table.schema 는 기존 540 유지 */
    table.data th,
    table.data td { font-size: 12px; }
    table.data td form.form-inline button {
        min-height: 36px; padding: 6px 10px;
    }

    /* 인라인 역할·공개 편집 — 모바일 탭 정확도 */
    .role-select { min-height: 36px; font-size: 13px; padding: 4px 6px; }
    .role-pill   { min-height: 32px; padding: 6px 10px; }
}

/* ── admin/members.php 검색·정렬 ── */
@media (max-width: 480px) {
    .member-search-row {
        flex-direction: column; align-items: stretch; gap: 8px;
    }
    .member-search-input,
    .member-sort-select {
        width: 100%; min-width: 0; min-height: 44px; font-size: 16px;
    }
    .member-filter-row { gap: 6px; }
    .member-filter-row .chip {
        flex: 1 0 calc(50% - 3px); text-align: center;
    }
}

/* ── event_admin.php 신청자·공지 폼 ── */
@media (max-width: 720px) {
    .attendees-table { min-width: 720px; }
    .event-admin-head { flex-wrap: wrap; gap: 8px; }
    .event-admin-head > * { flex: 0 0 auto; }
    .event-admin-head .btn-sm { min-height: 40px; }
    .notify-details > summary {
        min-height: 44px; padding: 10px 14px;
        display: flex; align-items: center;
    }
}
@media (max-width: 480px) {
    .notify-form textarea { min-height: 160px; font-size: 16px; }
    .notify-form .form-row input { min-height: 44px; font-size: 16px; }
}

/* ── admin/subtags.php 카테고리 섹션 ── */
@media (max-width: 720px) {
    .subtag-admin-table { min-width: 560px; }
    .subtag-add-form { flex-wrap: wrap; }
    .subtag-add-input {
        min-height: 44px; font-size: 16px; flex: 1 1 200px;
    }
    .subtag-cleanup-row { flex-wrap: wrap; gap: 6px; }
}

/* ── admin/pins.php 조작 버튼 정돈 ── */
@media (max-width: 480px) {
    table.data tbody form.form-inline { flex-wrap: wrap; gap: 4px; }
    table.data tbody form.form-inline button,
    table.data tbody form.form-inline select {
        min-height: 36px;
    }
}

/* ── setup.php (body.is-setup-page 로 scope) ── */
@media (max-width: 720px) {
    .is-setup-page .card .btn,
    .is-setup-page .form-row .btn { min-height: 44px; }
    .is-setup-page .form-row { flex-wrap: wrap; }
    .is-setup-page input[type="text"],
    .is-setup-page input[type="password"],
    .is-setup-page input[type="email"] {
        min-height: 44px; font-size: 16px;
    }
}

/* ─────────────────────────────────────────────
   M.5 — Safe-area · Viewport · 키보드
   ───────────────────────────────────────────── */
@media (max-width: 480px) {
    /* iOS 자동 줌 방지 — 모든 주요 input 16px 강제 */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="search"],
    input[type="number"],
    input[type="url"],
    input[type="date"],
    input[type="datetime-local"],
    textarea,
    select {
        font-size: 16px;
    }
}

/* Safe-area 패딩 (iOS 노치·Android 가장자리) */
@supports (padding: max(0px)) {
    @media (max-width: 720px) {
        .site-header,
        .main-content {
            padding-left:  max(var(--sp-4), env(safe-area-inset-left));
            padding-right: max(var(--sp-4), env(safe-area-inset-right));
        }
    }
}

/* ═══════════════════════════════════════════════════════════════════
   § M-2 — 모바일 답답함 해소 (added 2026-04-24)
   Plan: docs/plans/PLAN-20260424-mobile-v2.md
   캡처 5장 기반 · 패딩/마진/폰트/보더 축소 · 이미지 crop · 탭바·헤더 톤다운
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   M-2.1 — 헤더·하단 탭바
   ───────────────────────────────────────────── */
@media (max-width: 900px) {
    /* 헤더 높이 축소 */
    .header-row { height: 52px; }
    /* 하단 탭바 높이 축소 — is-active 시각 표시는 §M-4.3 pill ::before 가 담당 */
    .bottom-nav a { min-height: 52px; padding: 6px 4px 4px; }
    /* body padding-bottom 은 페이지별로 분기 — event 는 .is-event-detail 에서, 그 외는 아래 기본 */
    body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
}
@media (max-width: 720px) {
    .logo-main, .logo-sub { font-size: 14px; }
}

/* ─────────────────────────────────────────────
   M-2.2 — 상세 페이지 (.pd) 답답함 해소
   hero meta · title · deck · body(카드 느낌 제거) · comments · cover crop
   ───────────────────────────────────────────── */
/* 이벤트 커버 aspect-ratio 는 base(16/9) 그대로 사용 — 1920×1080 업로드 시 레터박스 없이 꽉 채움.
   (세로 포스터는 여전히 object-fit: contain 으로 중앙 레터박스 처리됨) */
@media (max-width: 480px) {
    /* §M-3 가 덮지 않는 규칙만 유지 — cat row · byline · deck line-clamp */
    .pd .pd-cat-row { gap: 6px; }
    .pd .pd-cat { padding: 3px 7px; font-size: 10px; }
    .pd .pd-subtag { font-size: 11px; padding: 3px 6px; }
    .pd .pd-hero-deck { -webkit-line-clamp: 2; }
    .pd .pd-hero-dates { font-size: 11px; margin-top: 2px; }

    /* byline 아바타·간격 축소 */
    .pd .pd-hero-byline { padding-top: 10px; gap: 10px; grid-template-columns: 36px 1fr auto; }
    .pd .pd-hero-byline .avatar { width: 36px !important; height: 36px !important; font-size: 13px !important; }
    .pd .pd-byline-name { font-size: 12.5px; }
    .pd .pd-byline-handle { font-size: 11px; }
}

/* ─────────────────────────────────────────────
   M-2.3 — Aside (이벤트 정보) 정돈
   ───────────────────────────────────────────── */
@media (max-width: 720px) {
    .pd-aside-col .as-card { padding: 14px 14px; }
    .pd-aside-col .as-title { font-size: 10px; margin: 0 0 8px; }
    .pd-aside-col .as-event-dday { font-size: 18px; margin-bottom: 4px; }
    .pd-aside-col .as-event-facts {
        gap: 5px; padding-top: 8px; margin-top: 8px;
    }
    .pd-aside-col .as-event-facts > div {
        grid-template-columns: 44px 1fr; gap: 8px; font-size: 12px;
    }
    .pd-aside-col .as-event-facts .fact-label { font-size: 10.5px; }
    .pd-aside-col .as-event-seats { padding-top: 8px; margin-top: 8px; }
    .pd-aside-col .as-seat-bar { height: 4px; }
    .pd-aside-col .as-rsvp-box { padding-top: 10px; margin-top: 10px; }
    .pd-aside-col .as-rsvp-btn { padding: 11px 0; font-size: 13px; }
}

/* ─────────────────────────────────────────────
   M-2.4 — 홈 히어로 슬라이더 정돈 (피드 카드 규칙은 §M-3.6 에서 덮음)
   ───────────────────────────────────────────── */
@media (max-width: 720px) {
    /* 피드 카드 구분선 진하게 */
    .feed-grid > .card-item + .card-item {
        border-top: 1px solid var(--c-line);
    }
    .card-meta { margin-top: 8px; font-size: 11.5px; }

    /* L 핀 히어로 슬라이더 — 본문 overflow 해소 */
    .hero-card .hero-body { padding: 16px 14px 20px; gap: 8px; }
    .hero-card .hero-body h3 { font-size: 18px; line-height: 1.3; }
    .hero-card .hero-body p {
        font-size: 13px; -webkit-line-clamp: 3;
    }
    .hero-thumb-box { min-height: 180px; }
    /* 뱃지들이 body 안으로 이동 — absolute 위치 조정 불필요, 크기만 축소 */
    .hero-badge-row { gap: 6px; margin-bottom: 4px; }
    .hero-thumb-label { font-size: 9.5px; letter-spacing: 0.1em; }
    .hero-dday       { padding: 3px 8px; font-size: 10px; }
    .hero-pin-mark   { width: 18px; height: 18px; }

    /* "PINNED 1/1" 영역 축소 */
    .hero-meta { padding: 8px 14px 4px; }
    .hero-counter { font-size: 10.5px; letter-spacing: 0.12em; }
    .hero-dots { gap: 6px; }
    .hero-dots button { width: 24px; height: 2px; }
}

/* ═══════════════════════════════════════════════════════════════════
   § M-3 — 본문 폭 극대화 · Libretto 벤치마크 (added 2026-04-24)
   Plan: docs/plans/PLAN-20260424-mobile-v3.md
   목표: 화면 가장자리 ↔ 글자 12px · 이미지 edge-to-edge · flat · 본문 16/1.72
   ═══════════════════════════════════════════════════════════════════ */

/* ─ M-3.1 — 컨테이너 여백 + 자식 레이어 이중 패딩 해제 ─
   ≤1024 태블릿까지 .pd-grid padding:0 으로 확장 (container padding 에만 의존).
   ≤720 모바일에서만 .container 12px, write 경로 12px 통일. */
@media (max-width: 1024px) {
    /* .pd-grid 는 태블릿부터 container padding 에 의존 — 이중 여백 방지 */
    .pd-grid { padding: 0; gap: 20px; }
}
@media (max-width: 720px) {
    .container { padding: 0 12px; }
    .write-layout { padding: 0; }
    /* .form-card 는 시각 카드이므로 완전 0 대신 12px 로 소폭 유지 */
    .form-card { padding: 14px 12px; margin: 12px auto; }

    /* write.php 쓰기 경로 — 제목·에디터·섹션 좌우 12px 로 통일 */
    .write-hero-meta { padding: 16px 12px 18px; }
    .write-body-editor { padding: 16px 12px 24px; }
    .write-section { padding: 20px 12px; }
    .write-main-col { padding: 18px 12px; }
}

/* ─ M-3.2 — overflow-x 방어 (hero edge-to-edge margin 음수에 의한 가로 스크롤 차단) ─ */
@media (max-width: 720px) {
    .main-content { overflow-x: clip; }
    /* clip 미지원 폴백 (Safari < 16) */
    @supports not (overflow-x: clip) {
        .main-content { overflow-x: hidden; }
    }
}

/* ─ M-3.3 — 상세 hero edge-to-edge + 메타 패딩 ─ */
@media (max-width: 720px) {
    /* hero 자체를 좌우 -12px 음수 마진으로 화면 끝까지 확장 */
    .pd .pd-hero {
        margin-left: -12px; margin-right: -12px;
        border-left: 0; border-right: 0;
    }
    .pd .pd-hero-meta {
        padding: 16px 12px 20px;
        gap: 8px;
    }
    .pd .pd-hero-title {
        font-size: 24px; line-height: 1.25;
        letter-spacing: -0.024em;
    }
    .pd .pd-hero-deck {
        font-size: 15.5px; line-height: 1.55;
    }
}
@media (max-width: 360px) {
    .pd .pd-hero-title { font-size: 21px; }
}

/* ─ M-3.4 — 본문 .pd-body : 카드 느낌 완전 제거 + 타이포 Libretto 수준 ─ */
@media (max-width: 720px) {
    .pd .pd-body {
        background: transparent;
        border: 0;
        padding: 16px 0 24px; /* 좌우 0 — 부모 container 12px 만 살림 */
    }
    .pd .pd-body p {
        margin: 0 0 1.15em;
        font-size: 16px; line-height: 1.72;
        letter-spacing: -0.005em;
    }
    .pd .pd-body p:last-child { margin-bottom: 0; }
    .pd .pd-body h2 {
        font-size: 22px; font-weight: 700;
        letter-spacing: -0.015em; line-height: 1.35;
        margin: 28px 0 10px;
    }
    .pd .pd-body h3 {
        font-size: 17px; font-weight: 700;
        letter-spacing: -0.012em; line-height: 1.4;
        margin: 20px 0 6px;
    }
    .pd .pd-body ul,
    .pd .pd-body ol {
        margin: 0 0 1.2em; padding-left: 22px;
    }
    .pd .pd-body li { margin-bottom: 4px; }
    .pd .pd-body blockquote {
        margin: 16px 0; padding: 10px 14px;
        font-size: 15px;
    }
    /* 본문 이미지도 edge-to-edge (좌우 -12px 로 화면 끝까지) */
    .pd .pd-body img,
    .pd .pd-body .article-body-img {
        display: block;
        margin: 18px -12px;
        max-width: calc(100% + 24px);
        width: calc(100% + 24px);
        height: auto;
    }
}

/* ─ M-3.5 — 댓글 영역 flat + 좌우 0 (container 12px 살림) ─ */
@media (max-width: 720px) {
    .pd .pd-comments {
        background: transparent;
        border: 0;
        padding: 16px 0 24px;
    }
    .pd .pd-comments-head h3 { font-size: 15px; }
    .pd .pd-cm { padding: 14px 0; }
    .pd .pd-cm-form { padding-bottom: 12px; }
}

/* ─ M-3.6 — 피드 카드 폭·타이포 맞춤 ─ */
@media (max-width: 720px) {
    .card-item { padding: 14px 12px; }
    .card-title {
        font-size: 17px; line-height: 1.35;
        letter-spacing: -0.015em;
    }
    .card-excerpt {
        font-size: 14px; line-height: 1.55;
        margin-top: 4px;
    }
}

/* ─ M-3.7 — 관리자 툴바 풀폭 + 축소 ─ */
@media (max-width: 720px) {
    .pd .admin-toolbar {
        padding: 10px 12px;
        margin: 0 -12px 12px;
        font-size: 12px;
    }
    .pd .admin-toolbar-actions { gap: 6px; flex-wrap: wrap; }
    .pd .admin-toolbar-btn { min-height: 36px; font-size: 12px; padding: 6px 10px; }
}

/* ═══════════════════════════════════════════════════════════════════
   § M-4 — 최종 폴리시 (added 2026-04-24)
   · 스크롤 진행도 바
   · 한국어 타이포 pretty
   · 탭바 active pill
   · 댓글 Libretto 맞춤
   · admin-toolbar 모바일 1행 요약
   ═══════════════════════════════════════════════════════════════════ */

/* ─ M-4.1 — 읽기 진행도 바 (상세 페이지 상단 fixed) ─ */
.pd-progress {
    position: fixed; top: 0; left: 0; right: 0;
    height: 2px; z-index: 80;
    background: transparent;
    pointer-events: none;
}
.pd-progress-bar {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, var(--c-brand) 0%, var(--c-brand-dk) 100%);
    transition: width 60ms linear;
}
@media (max-width: 720px) {
    .pd-progress { height: 2px; }
}

/* ─ M-4.2 — 한국어 타이포 pretty wrap (고아 단어 방지) ─ */
.pd .pd-hero-title,
.pd .pd-body h2,
.pd .pd-body h3,
.card-title,
.hero-body h3 {
    text-wrap: pretty;
    word-break: keep-all;
    overflow-wrap: anywhere;
}
.pd .pd-hero-deck,
.card-excerpt {
    text-wrap: pretty;
    word-break: keep-all;
}

/* ─ M-4.3 — 하단 탭바 active pill 배경 (Libretto 감성) ─ */
@media (max-width: 900px) {
    .bottom-nav a {
        position: relative;
        border-top: 0;   /* 기존 border-top 대신 inset pill */
    }
    .bottom-nav a::before {
        content: ''; position: absolute;
        top: 6px; left: 50%; transform: translateX(-50%);
        width: 0; height: 3px;
        background: var(--c-brand);
        border-radius: 2px;
        transition: width var(--dur-base) var(--ease-out);
    }
    .bottom-nav a.is-active::before { width: 24px; }
    .bottom-nav a.is-active { color: var(--c-brand); }
    .bottom-nav a.is-active .bn-label { color: var(--c-brand); font-weight: 800; }
}

/* ─ M-4.4 — 댓글 영역 Libretto 스타일 ─ */
@media (max-width: 720px) {
    .pd .pd-comments-head {
        padding-bottom: 8px;
        margin-bottom: 4px;
    }
    .pd .pd-comments-head h3 {
        font-size: 15px; font-weight: 700;
        letter-spacing: -0.012em;
    }
    .pd .pd-cm {
        padding: 14px 0;
        grid-template-columns: 32px 1fr;
        gap: 10px;
    }
    .pd .pd-cm-head-in { flex-wrap: wrap; gap: 6px; }
    .pd .pd-cm-name { font-size: 13px; font-weight: 700; }
    .pd .pd-cm-time { font-size: 11.5px; color: var(--pd-mute); }
    .pd .pd-cm-body {
        font-size: 14.5px; line-height: 1.62;
        margin-top: 4px;
        word-break: keep-all;
    }
    .pd .pd-cm-form {
        grid-template-columns: 32px 1fr;
        gap: 10px;
        padding: 10px 0 14px;
    }
    .pd .pd-cm-input {
        min-height: 64px;
        font-size: 16px;  /* iOS 자동 줌 방지 */
        line-height: 1.5;
    }
    .pd .pd-cm-actions { padding-top: 6px; }
    .pd .pd-cm-submit { min-height: 40px; font-size: 13px; font-weight: 700; }
}

/* ─ M-4.5 — admin-toolbar 1행 요약 (모바일) ─ */
@media (max-width: 480px) {
    /* 상태 라벨만 compact 하게 유지, 버튼은 세로 정렬 */
    .pd .admin-toolbar-head { gap: 8px; font-size: 11px; }
    .pd .admin-toolbar-label { font-size: 10.5px; letter-spacing: 0.1em; }
    .pd .admin-toolbar-status { font-size: 11px; padding: 2px 6px; }
    .pd .admin-toolbar-actions form.form-inline { flex: 1 1 auto; }
    .pd .admin-toolbar-size {
        width: 100%; gap: 4px;
    }
    .pd .admin-toolbar-size-label { font-size: 11px; }
    .pd .admin-toolbar-size select { flex: 1; font-size: 13px; min-height: 34px; }
}

/* ═══════════════════════════════════════════════════════════════════
   § M-5 — 모바일 이벤트 Sticky CTA + Bottom Sheet (added 2026-04-24)
   · < 1024px 에서 하단 탭바 위에 RSVP CTA 고정
   · 탭 시 슬라이드업 시트에 _aside_event_rsvp 재사용
   ═══════════════════════════════════════════════════════════════════ */

/* ─ M-5.1 — Sticky CTA 바 (하단 탭바 위 / 태블릿에선 바닥 직접) ─ */
.pd-mcta {
    display: none;
    position: fixed; left: 0; right: 0;
    bottom: env(safe-area-inset-bottom);  /* 기본 바닥 · 탭바 있는 범위에선 @media 로 위로 올림 */
    z-index: 55;  /* 탭바(60) 아래 · sheet(90) 아래 */
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    backdrop-filter: saturate(180%) blur(10px);
    border-top: 1px solid var(--c-line);
    align-items: center; gap: 10px;
}
/* 901~1024: 탭바 없음 → CTA 는 바닥 직접, body padding-bottom 은 event 페이지에만 */
@media (max-width: 1024px) {
    .pd-mcta { display: flex; }
    body.is-event-detail { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}
/* ≤900: 탭바(a 52 + border-top 1 = 53) 바로 위에 CTA gap 없이 · body padding = 53 + 64 + env */
@media (max-width: 900px) {
    .pd-mcta { bottom: calc(53px + env(safe-area-inset-bottom)); }
    body.is-event-detail { padding-bottom: calc(53px + 64px + env(safe-area-inset-bottom)); }
}
.pd-mcta-meta {
    flex: 1; min-width: 0;
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; color: var(--c-muted);
}
.pd-mcta-dday {
    padding: 3px 8px; font-size: 11.5px; font-weight: 800;
    letter-spacing: 0.08em; color: #fff; background: var(--c-brand);
    font-variant-numeric: tabular-nums;
}
.pd-mcta-seat {
    font-weight: 600; color: var(--c-ink-2);
    font-variant-numeric: tabular-nums;
}
.pd-mcta-btn {
    flex: 0 0 auto;
    padding: 11px 22px;
    background: var(--c-brand); color: #fff;
    font-size: 14px; font-weight: 700; letter-spacing: 0.02em;
    border: 0; cursor: pointer;
    min-height: 44px;
    transition: background var(--dur-fast) var(--ease-out);
}
.pd-mcta-btn:hover { background: var(--c-brand-dk); }
.pd-mcta-btn:active { transform: scale(0.98); }

/* ─ M-5.2 — Bottom Sheet (슬라이드업 모달) ─ */
.pd-sheet {
    position: fixed; inset: 0;
    z-index: 90;
    pointer-events: none;
}
.pd-sheet[hidden] { display: none; }
.pd-sheet-backdrop {
    position: absolute; inset: 0;
    background: rgba(10, 10, 10, 0);
    transition: background var(--dur-base) var(--ease-out);
    pointer-events: auto;
}
.pd-sheet.is-open .pd-sheet-backdrop { background: rgba(10, 10, 10, 0.5); }

.pd-sheet-panel {
    position: absolute; left: 0; right: 0; bottom: 0;
    max-height: 88vh;
    background: #fff;
    border-top-left-radius: 14px; border-top-right-radius: 14px;
    transform: translateY(100%);
    transition: transform 260ms var(--ease-out);
    pointer-events: auto;
    display: flex; flex-direction: column;
    box-shadow: 0 -8px 32px rgba(10, 10, 10, 0.22);
    padding-bottom: env(safe-area-inset-bottom);
}
.pd-sheet.is-open .pd-sheet-panel { transform: translateY(0); }
.pd-sheet-grip {
    width: 40px; height: 4px; border-radius: 2px;
    background: var(--c-line-hard, #d0d0cb);
    margin: 8px auto 4px;
}
.pd-sheet-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 16px 12px;
    border-bottom: 1px solid var(--c-line-soft);
}
.pd-sheet-title {
    font-size: 15px; font-weight: 800;
    letter-spacing: -0.012em; color: var(--c-ink);
    margin: 0;
}
.pd-sheet-close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    padding: 0; background: transparent;
    border: 0; color: var(--c-muted);
    cursor: pointer;
}
.pd-sheet-close:hover { color: var(--c-ink); }
.pd-sheet-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 14px 20px;
    flex: 1 1 auto;
}
/* sheet 내부 .as-card 는 이미 .pd-aside-col 스코프로 스타일 적용 — 동일하게 하기 위해 sheet 에도 해당 스코프 상속 */
.pd-sheet-body .as-card {
    background: var(--pd-surface, #fff);
    border: 0; padding: 0;  /* sheet-body padding 이 대체 */
}
.pd-sheet-body .as-title {
    font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
    font-weight: 800; color: var(--c-ink); margin: 0 0 10px;
    display: flex; align-items: baseline; justify-content: space-between;
}
.pd-sheet-body .as-event-dday {
    font-size: 22px; font-weight: 800; color: var(--c-brand-dk);
    letter-spacing: -0.012em; margin-bottom: 8px;
}
.pd-sheet-body .as-event-facts {
    margin: 10px 0 0; padding: 10px 0 0;
    display: grid; grid-template-columns: 1fr; gap: 6px;
    border-top: 1px solid var(--c-line-soft);
}
.pd-sheet-body .as-event-facts > div {
    display: grid; grid-template-columns: 48px 1fr; gap: 10px;
    font-size: 12.5px; line-height: 1.45;
}
.pd-sheet-body .as-event-facts .fact-label {
    font-size: 11px; color: var(--c-muted); font-weight: 600;
}
.pd-sheet-body .as-event-facts > div > div:last-child {
    color: var(--c-ink-2); font-weight: 500; word-break: keep-all;
}
.pd-sheet-body .as-event-seats {
    margin-top: 10px; padding-top: 10px;
    border-top: 1px solid var(--c-line-soft);
}
.pd-sheet-body .as-seat-row {
    display: flex; justify-content: space-between;
    font-size: 12px; color: var(--c-muted); font-weight: 600;
    margin-bottom: 6px;
}
.pd-sheet-body .as-seat-row b { color: var(--c-ink); font-variant-numeric: tabular-nums; }
.pd-sheet-body .as-seat-bar {
    height: 4px; background: var(--c-line-soft);
    position: relative; overflow: hidden;
}
.pd-sheet-body .as-seat-fill {
    position: absolute; top: 0; left: 0; bottom: 0;
    background: linear-gradient(90deg, var(--c-brand), var(--c-brand-dk));
}
.pd-sheet-body .as-rsvp-box {
    margin-top: 14px; padding-top: 14px;
    border-top: 1px solid var(--c-line-soft);
}
.pd-sheet-body .as-rsvp-btn {
    display: block; width: 100%; margin: 0;
    padding: 14px 0; text-align: center;
    background: var(--c-brand); color: #fff;
    font-size: 15px; font-weight: 700; letter-spacing: 0.02em;
    border: 0; cursor: pointer; min-height: 48px;
}
.pd-sheet-body .as-rsvp-btn:hover { background: var(--c-brand-dk); }
.pd-sheet-body .as-rsvp-msg {
    font-size: 13px; color: var(--c-ink-2); font-weight: 600;
    padding: 10px 12px; background: var(--c-line-soft);
    border-left: 2px solid var(--c-line);
    line-height: 1.5;
}
.pd-sheet-body .as-rsvp-hint {
    font-size: 11.5px; color: var(--c-muted);
    text-align: center; margin-top: 8px;
}
.pd-sheet-body .as-rsvp-cancel-btn {
    display: block; width: 100%; margin-top: 10px;
    padding: 10px 0; background: transparent;
    color: var(--c-muted); border: 1px solid var(--c-line);
    font-size: 13px; font-weight: 600;
    cursor: pointer; min-height: 40px;
}
/* Sheet 내부 input 은 iOS 자동 줌 방지 (global 규칙은 ≤480 이라 481~720 보강) */
.pd-sheet-body input[type="text"],
.pd-sheet-body input[type="email"],
.pd-sheet-body input[type="tel"],
.pd-sheet-body textarea {
    font-size: 16px;
    padding: 10px 12px;
    border: 1px solid var(--c-line);
    background: #fff;
    box-sizing: border-box; width: 100%;
}

/* 데스크톱 (> 1024) 에서는 시트가 있어도 마크업만 DOM 에 존재, 보이지 않음 */
@media (min-width: 1025px) {
    .pd-mcta { display: none !important; }
    .pd-sheet { display: none !important; }
}

/* ============================================================
   § U — 회원 세그먼트 칩 + 헤드헌팅 존 (2026-04-25)
   6 세그먼트: board · cma · candidate · student · industry · academic + admin
   industry 는 칩 없음 (기본값, 과노출 방지)
   ============================================================ */
.seg-chip {
    display: inline-block;
    padding: 1px 7px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.5;
    border-radius: 2px;
    vertical-align: 1px;
    margin-left: 6px;
    white-space: nowrap;
}
.seg-chip.cma       { background: #d1fae5; color: #065f46; }
.seg-chip.candidate { background: #eef2f8; color: #1b3a5c; }
.seg-chip.student   { background: transparent; color: #737373; border: 1px solid #e5e5e5; padding: 0 6px; }
.seg-chip.board     { background: #10b981; color: #ffffff; }
.seg-chip.academic  { background: #eef2f8; color: #1b3a5c; font-style: italic; }
.seg-chip.admin     { background: #0a0a0a; color: #ffffff; }

/* 프로필 상단 대형 칩 — /@slug 헤더에서 사용 */
.seg-chip-lg {
    padding: 3px 10px;
    font-size: 12.5px;
    margin-left: 8px;
    vertical-align: 2px;
}

/* 헤드헌팅 존 — open_to_opportunities='open' 일 때 /@slug 프로필 상단 */
.opp-zone {
    margin-top: var(--sp-3);
    padding: 12px 14px;
    border: 1px solid #b2e5cf;
    background: #f0fdf6;
    border-radius: 2px;
}
.opp-zone-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: #065f46;
    margin-bottom: 6px;
}
.opp-zone-head::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}
.opp-zone-links {
    font-size: 13px;
    color: #334155;
    line-height: 1.65;
}
.opp-zone-links a {
    color: var(--c-link);
    text-decoration: none;
    border-bottom: 1px dotted var(--c-line);
}
.opp-zone-links a:hover { border-bottom-color: var(--c-link); }

/* passive 모드 — 로그인 유저에게만 작은 힌트 */
.opp-zone-passive {
    margin-top: var(--sp-2);
    font-size: 12.5px;
    color: var(--c-muted);
}

/* me_edit 의 헤드헌팅 섹션 라디오 3택 */
.opp-radio-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}
.opp-radio-choice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--c-line);
    background: #ffffff;
    border-radius: 2px;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
}
.opp-radio-choice:has(input:checked) {
    border-color: var(--c-brand);
    background: var(--c-brand-lt);
}
.opp-radio-choice input { margin-top: 3px; }
.opp-radio-choice .opp-r-title { font-weight: 600; color: var(--c-ink); font-size: 14px; display: block; }
.opp-radio-choice .opp-r-desc  { color: var(--c-muted); font-size: 12.5px; display: block; margin-top: 2px; line-height: 1.5; }

/* ============================================================
   § S — 학생·Candidate 할인 코드 패널 (2026-04-25 Phase 2 MVP)
   ============================================================ */
.student-disc-panel {
    margin: var(--sp-3) 0;
    padding: 16px 18px;
    background: #ecfdf5;
    border: 1px solid #b2e5cf;
    border-radius: 2px;
}
.student-disc-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.student-disc-head h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #065f46;
    display: flex;
    align-items: center;
    gap: 8px;
}
.student-disc-count {
    display: inline-block;
    padding: 1px 7px;
    font-size: 11.5px;
    background: #10b981;
    color: #ffffff;
    border-radius: 2px;
    font-weight: 600;
}
.student-disc-sub {
    font-size: 12.5px;
    color: #16785a;
}
.student-disc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.student-disc-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 12px;
    background: #ffffff;
    border: 1px solid #d4eadd;
    border-radius: 2px;
}
.sd-main { flex: 1; min-width: 0; }
.sd-title { font-weight: 600; color: var(--c-ink); font-size: 14px; line-height: 1.4; }
.sd-summary { font-size: 13px; color: var(--c-muted); margin-top: 2px; }
.sd-provider { color: #065f46; font-weight: 500; }
.sd-meta { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.sd-code-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: #f0fdf6;
    border: 1px dashed #a7d4bf;
    border-radius: 2px;
}
.sd-code-chip code {
    font-family: Menlo, Consolas, monospace;
    font-size: 12.5px;
    color: #065f46;
    background: transparent;
    padding: 0;
}
.sd-copy-btn {
    padding: 2px 8px;
    font-size: 11px;
    background: #10b981;
    color: #ffffff;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    transition: background 120ms ease;
}
.sd-copy-btn:hover { background: #059669; }
.sd-copy-btn.is-copied { background: #065f46; }
.sd-days {
    font-size: 11.5px;
    color: var(--c-muted);
    font-variant-numeric: tabular-nums;
}
.sd-cta {
    display: inline-block;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    background: #10b981;
    text-decoration: none;
    border-radius: 2px;
    white-space: nowrap;
    align-self: center;
}
.sd-cta:hover { background: #059669; }

@media (max-width: 720px) {
    .student-disc-panel { padding: 12px; }
    .student-disc-item { flex-direction: column; padding: 10px; }
    .sd-cta { width: 100%; text-align: center; }
}

/* ============================================================
   § T — 멤버 디렉토리 세그먼트 탭 · 필터 · 카드 확장 (2026-04-25)
   ============================================================ */
.members-guest-gate {
    max-width: 520px;
    margin: 40px auto;
    padding: 32px;
    background: var(--c-paper, #fafaf9);
    border: 1px solid var(--c-line);
    border-radius: 2px;
    text-align: center;
}
.members-guest-gate h1 {
    margin: 0 0 12px; font-size: 22px; color: var(--c-link);
}
.members-guest-gate p {
    color: var(--c-muted); font-size: 14px; line-height: 1.7;
    margin: 0 0 16px;
}
.members-guest-gate .btn { padding: 10px 20px; }

.dir-seg-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: var(--sp-3) 0 var(--sp-3);
    border-bottom: 1px solid var(--c-line);
    padding-bottom: 8px;
}
.dir-seg-tab {
    display: inline-block;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--c-muted);
    text-decoration: none;
    border-radius: 2px;
    transition: background 120ms ease, color 120ms ease;
}
.dir-seg-tab:hover {
    background: var(--c-paper);
    color: var(--c-ink);
}
.dir-seg-tab.is-active {
    background: var(--c-link-lt, #eef2f8);
    color: var(--c-link);
    font-weight: 600;
}

.dir-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: var(--sp-3);
}
.dir-controls input[type="search"] {
    flex: 1 1 200px;
    min-width: 160px;
}
.dir-controls select {
    padding: 7px 10px;
    border: 1px solid var(--c-line);
    border-radius: 2px;
    background: #ffffff;
    font-size: 13.5px;
    color: var(--c-ink);
}
.dir-controls .dir-check {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--c-ink);
    cursor: pointer;
    white-space: nowrap;
}
.dir-controls .dir-check input { margin: 0; }

.member-card .member-meta {
    font-size: 12px;
    color: var(--c-muted);
    margin-top: 2px;
}
.member-card .member-opp {
    font-size: 12px;
    color: #065f46;
    margin-top: 4px;
    font-weight: 500;
}
.member-card.is-open {
    border-left: 3px solid var(--c-brand);
    padding-left: calc(var(--sp-3) - 3px);
}

/* ============================================================
   § V — 푸터 독립 고지 (2026-04-25 · CLAUDE.md §4.2)
   ============================================================ */
.footer-disclaimer {
    padding: 16px 0 20px;
    border-top: 1px dashed var(--c-line);
    margin-top: 8px;
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--c-muted);
    text-align: center;
}
.footer-disclaimer strong { color: var(--c-ink); font-weight: 600; }
.footer-disclaimer a {
    color: var(--c-link);
    text-decoration: none;
    border-bottom: 1px dotted var(--c-line);
}
.footer-disclaimer a:hover { border-bottom-color: var(--c-link); }

@media (max-width: 720px) {
    .footer-disclaimer {
        text-align: left;
        font-size: 12px;
        padding: 14px 12px 18px;
    }
}

/* ============================================================
   § W — 위험 영역 (탈퇴·삭제) — /me/edit 하단 및 관리자 위험 액션
   ============================================================ */
.edit-danger-zone {
    margin-top: var(--sp-6);
    border: 1px solid #e7c3c3;
    background: #fdf6f6;
    border-radius: 2px;
    padding: var(--sp-4);
}
.edit-danger-title {
    color: var(--c-err, #991b1b);
    margin-bottom: var(--sp-3);
}
.edit-danger-note {
    color: #6b3b3b;
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 var(--sp-2) 0;
}
.edit-danger-list {
    color: #6b3b3b;
    font-size: 13.5px;
    line-height: 1.7;
    margin: 0 0 var(--sp-2) 0;
    padding-left: 18px;
}
.edit-danger-list li { margin-bottom: 4px; }
.edit-danger-form {
    margin-top: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: 1px dashed #e7c3c3;
}
.edit-danger-form .form-row { margin-bottom: var(--sp-3); }
.edit-danger-form code {
    background: #fff;
    padding: 2px 6px;
    border: 1px solid #e7c3c3;
    border-radius: 2px;
    font-family: Menlo, Consolas, monospace;
}
.btn-danger {
    display: inline-block; padding: 10px 18px;
    background: #991b1b; color: #fff;
    border: 1px solid #7c1414; border-radius: 2px;
    font-weight: 600; font-size: 14px;
    cursor: pointer; transition: background 120ms ease;
}
.btn-danger:hover { background: #7c1414; }
.btn-danger:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; }

/* ============================================================
   § X — 크로스브라우저 폴백 (2026-04-24 감사 G)
   iOS Safari 14.x · 구형 안드로이드 WebView 대응.
   @supports not (…) 블록으로 최신 CSS 기능이 없는 브라우저에서만 적용.
   ============================================================ */

/* X-1. aspect-ratio 폴백 — Safari 14 이하에서 썸네일·커버가 높이 0 으로 안 보이는 문제
       padding-top hack (비율 = height/width × 100%) 으로 공간 확보. */
@supports not (aspect-ratio: 1/1) {
    .pin.thumb,
    .pin .thumb,
    .hero-thumb-box,
    .wpin-slide .thumb,
    .detail-cover,
    .pd-hero-cover,
    .card-thumb,
    .hero-card .hero-thumb-box {
        position: relative; height: 0;
    }
    /* 16:9 = 56.25% · 4:3 = 75% · 16:10 = 62.5% */
    .pin.thumb::before,
    .pin .thumb::before,
    .hero-thumb-box::before,
    .wpin-slide .thumb::before,
    .detail-cover::before,
    .pd-hero-cover::before {
        content: ''; display: block; padding-top: 56.25%;
    }
    /* 내부 img 는 절대 위치로 비율 공간 채우기 */
    .pin.thumb > img,
    .pin .thumb > img,
    .hero-thumb-box > img,
    .wpin-slide .thumb > img,
    .detail-cover > img,
    .pd-hero-cover > img {
        position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        object-fit: cover;
    }
}

/* X-2. :has() 폴백 — RSVP / 라디오 카드 선택 시각화
       Safari 15.3 이하 대응. input:checked 에 outline 을 직접 그려 선택 상태 표시. */
@supports not selector(:has(*)) {
    .write-rsvp-choice input[type="radio"]:checked,
    .radio-choice input[type="radio"]:checked {
        outline: 2px solid var(--c-brand);
        outline-offset: 3px;
    }
}

/* X-3. inset: 0 롱핸드 폴백 — iOS 14.4 이하에서 오버레이 크기 0 으로 안 보이는 문제
       shorthand 미지원 브라우저를 위한 각 방향 명시. inset 지원 브라우저는 이 블록 무시. */
@supports not (inset: 0) {
    .pin.thumb .thumb-label,
    .pd-hero-cover::before,
    .pd-hero-cover::after,
    .pd-sheet-backdrop,
    .wpin-overlay,
    .hero-overlay {
        top: 0; right: 0; bottom: 0; left: 0;
    }
}

/* X-4. 강제 다크 모드 환경에서 배경-텍스트 대비 보정
       Samsung Internet 강제 다크 · UA 자동 반전 대응. meta color-scheme 이 1차 방어선. */
@media (prefers-color-scheme: dark) {
    /* 사이트가 라이트 전용이므로 자동 반전 받아도 가독성 유지하도록 배경 고정 */
    html, body { background: var(--c-bg); color: var(--c-ink); }
}