/* =============================================
   GLOBAL CORE — style.css
   ============================================= */

:root {
    /* ---- Brand (Yapp) ---- */
    --bg-main:       #FFFFFF;   /* 페이지 베이스 — 순백으로 환하게 */
    --bg-surface:    #FFFFFF;   /* 카드·표면 */
    --bg-soft:       #F4F4F2;   /* 입력창·약한 면 */
    --bg-sidebar:    #F6F6F4;   /* 사이드바 hover 등 */
    --bg-badge:      #EFEEEB;
    --bg-hover:      #F4F4F2;
    --bg-sunken:     #F8F8F6;   /* feed hover */

    /* 텍스트 = 잉크 네이비 계열 (칠이 아니라 글자색으로 위계) */
    --text-main:     #1F2C45;
    --text-muted:    #86857E;
    --text-subtle:   #9A9A95;

    /* 포인트 = 틸. 주 액션·링크·네비게이션에 절제해서 */
    --primary:       #1D9E75;
    --primary-light: #E1F5EE;
    --primary-dark:  #0F6E56;

    /* 보조 액센트 = 인디고/보라. 봇·특수 강조 등 틸과 구분이 필요한 곳 */
    --accent:        #5A57D6;
    --accent-light:  #ECEBFB;
    --accent-dark:   #3F3CB0;

    /* 포인트·순위·보상 = 골드 (GBC와 통일) */
    --gold:          #C9912B;
    --gold-light:    #FBF1DC;

    /* 선으로 나눈다 — 색이 아니라 얇은 선 */
    --border:        rgba(0,0,0,0.07);
    --border-strong: rgba(0,0,0,0.13);

    /* 등락색 기본값 (보기 언어로 오버라이드됨 — body.market-* 참조) */
    --up:            #C0392B;   /* 상승 */
    --down:          #1F6FB2;   /* 하락 */

    /* GBC 포인트 코인색 */
    --gbc:           #C9912B;

    --radius-sm:   6px;
    --radius-md:   9px;
    --radius-lg:   12px;
    --radius-full: 999px;

    --shadow-sm: none;
    --shadow-md: 0 2px 10px rgba(31,44,69,0.06);

    --transition: 0.16s ease;
}

/* 등락색 — 보기 언어(국가) 기준 자동 적용.
   ko·ja(한국·일본): 상승 빨강 / 하락 파랑
   en(미국·서구권): 상승 녹색 / 하락 빨강
   ※ 추후 유저별 국가 설정이 생기면 그 값으로 교체 예정 */
body.market-ko, body.market-ja {
    --up:   #C0392B;   /* 상승 빨강 */
    --down: #1F6FB2;   /* 하락 파랑 */
}
body.market-en {
    --up:   #1A8F4C;   /* 상승 녹색 */
    --down: #C0392B;   /* 하락 빨강 */
}

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

/* 스크롤바 세로 트랙을 항상 표시.
   페이지 높이가 뷰포트보다 짧으면 스크롤바가 사라져 가로 폭이 늘어나고,
   길면 스크롤바가 생겨 폭이 줄어든다 → 페이지 이동·새로고침마다 중앙 정렬
   본문이 스크롤바 폭만큼 좌우로 흔들린다. 트랙을 상시 확보해 폭을 고정한다.
   (모바일은 오버레이 스크롤바라 폭을 차지하지 않아 영향 없음) */
html { overflow-y: scroll; }

/* 페이지별 배경 색조 — 영역 구분감 (환한 흰 배경 위에 은은하게) */
body.page-home {
    background:
        radial-gradient(1100px 520px at 100% 0%, rgba(29,158,117,0.07), transparent 60%),
        var(--bg-main);
}
body.page-crypto {
    background:
        radial-gradient(1100px 520px at 100% 0%, rgba(201,145,43,0.10), transparent 60%),
        var(--bg-main);
}
body.page-stocks {
    background:
        radial-gradient(1100px 520px at 100% 0%, rgba(31,111,178,0.09), transparent 60%),
        var(--bg-main);
}
body.page-home, body.page-crypto, body.page-stocks {
    background-attachment: fixed;
}
/* 글쓰기 — 틸 톤 (로그인의 보라와 구분) */
body.page-write {
    background:
        radial-gradient(900px 420px at 0% 0%, rgba(29,158,117,0.07), transparent 62%),
        var(--bg-main);
    background-attachment: fixed;
}

body {
    background: var(--bg-main);
    color: var(--text-main);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo",
                 "Pretendard", "Noto Sans KR", "맑은 고딕", sans-serif;
    font-size: 14.5px;
    line-height: 1.65;
    letter-spacing: -0.2px;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ── Header ── */
header {
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    width: 100%;
    height: 56px;
    z-index: 1000;
}
/* 헤더(56px)와 고정 툴바/사이드바 시작선(80px) 사이 24px 틈을 배경으로 덮는다.
   이게 없으면 스크롤한 본문 내용이 그 틈으로 삐져나와 보인다.
   순수 흰색이 아니라 body의 그라데이션과 이어지도록 페이지별로 같은 그라데이션을 입힌다
   (background-attachment:fixed로 뷰포트 기준 좌표를 맞춰야 body 배경과 이음매 없이 붙는다). */
header::after {
    content: "";
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    height: 24px;
    background: var(--bg-main);
    background-attachment: fixed;
    z-index: 999;
}
body.page-home header::after {
    background: radial-gradient(1100px 520px at 100% 0%, rgba(29,158,117,0.07), transparent 60%), var(--bg-main);
    background-attachment: fixed;
}
body.page-crypto header::after {
    background: radial-gradient(1100px 520px at 100% 0%, rgba(201,145,43,0.10), transparent 60%), var(--bg-main);
    background-attachment: fixed;
}
body.page-stocks header::after {
    background: radial-gradient(1100px 520px at 100% 0%, rgba(31,111,178,0.09), transparent 60%), var(--bg-main);
    background-attachment: fixed;
}
body.page-write header::after {
    background: radial-gradient(900px 420px at 0% 0%, rgba(29,158,117,0.07), transparent 62%), var(--bg-main);
    background-attachment: fixed;
}

.nav-inner {
    max-width: 1540px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    gap: 16px;
}

.logo {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-main);
    text-decoration: none;
    letter-spacing: -0.3px;
    white-space: nowrap;
    transition: opacity var(--transition);
}
.logo:hover { opacity: 0.8; }
.logo-dot { color: var(--primary); }

/* ── Search ── */
.search-container {
    flex: 0 1 480px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
.search-container input {
    flex: 1;
    min-width: 0;
    height: 38px;
    background: var(--bg-sidebar);
    border: 1.5px solid transparent;
    border-radius: var(--radius-full);
    padding: 0 18px;
    font-size: 14px;
    color: var(--text-main);
    transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
    outline: none;
}
.search-container input:focus {
    background: var(--bg-surface);
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(29,158,117,0.12);
}
.search-container input::placeholder { color: var(--text-subtle); }
.search-btn {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    color: var(--text-muted);
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.search-btn:hover {
    background: var(--bg-sidebar);
    color: var(--text-main);
    border-color: var(--text-subtle);
}

/* ── Layout ── */
.container {
    display: grid;
    grid-template-columns: 286px 920px 286px;  /* 트랙을 미리 예약 — 사이드바가 늦게 파싱돼도 main(2번 트랙) 좌표 불변 */
    justify-content: center;   /* 3열(사이드+본문+사이드) 합이 1540보다 좁을 때도 중앙 정렬 유지 */
    max-width: 1540px;
    margin: 0 auto 60px auto;
    padding: 24px 0 0;
    align-items: start;
}

/* 피드 툴바가 없는 페이지(글쓰기/마이페이지)는 상단 고정 여백 불필요 */
body.no-toolbar main { padding-top: 24px; }
/* main 안에 들어간 마이페이지 래퍼는 본문 폭을 꽉 채운다 (글목록과 동일 폭)
   ※ 글쓰기(.editor-wrap)는 제외 — 에디터는 760px 가운데 정렬이 읽기/쓰기에 적당하다.
     여기 포함하면 max-width가 풀려 main 폭(920)을 꽉 채우고 왼쪽에 붙어 어색해진다. */
main .mypage-wrap { max-width: none; margin: 0; padding-left: 0; padding-right: 0; }
/* 무한 스크롤 로딩 표시 */
.feed-loading { text-align: center; padding: 16px; color: var(--text-muted); font-size: 13px; }

/* ── 마이페이지 설정 카드 ── */
.settings-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    margin-bottom: 20px;
}
.settings-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    margin: 0 0 14px;
    letter-spacing: 0.2px;
}
.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.settings-label { display: flex; flex-direction: column; gap: 2px; }
.settings-label-main { font-size: 14px; font-weight: 600; color: var(--text-main); }
.settings-label-sub { font-size: 12px; color: var(--text-subtle); }
.settings-select { width: auto; min-width: 180px; flex-shrink: 0; }

/* ── 시세 위젯 ──
   예전엔 border+radius로 박스 카드였는데, 사이드바의 nav-item(홈/커뮤니티)은 테두리 없는
   플랫 스타일이라 같은 사이드바 안에서 "박스 있는 것 / 없는 것"이 섞여 산만했다.
   사이트 전체 원칙("선으로 나눈다 — 색이 아니라 얇은 선")대로 상단 구분선만 남기고
   박스 테두리·배경을 없애 nav-item과 톤을 맞춘다. */
.market-widget {
    margin-top: 8px;
    padding: 14px 2px 12px;
    border-top: 1px solid var(--border);
}
.market-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
}
.market-tab {
    flex: 1;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    padding: 5px 0;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.market-tab:hover { color: var(--text-main); }
/* 코인 탭 활성 = 골드 틴트 */
.market-tab[data-mtab="coins"].active {
    background: var(--gold-light);
    color: var(--gold);
    border-color: transparent;
}
/* 주식 탭 활성 = 블루 틴트 */
.market-tab[data-mtab="stocks"].active {
    background: #E7F0F8;
    color: var(--down);
    border-color: transparent;
}
.market-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 2px;
    border-bottom: 1px solid var(--border);
}
.market-row:last-child { border-bottom: none; }
.market-name { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mk-sym { font-size: 12px; font-weight: 700; color: var(--text-main); }
.mk-label { font-size: 10.5px; color: var(--text-subtle); }
.market-num { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.mk-price { font-size: 12px; font-weight: 600; color: var(--text-main); }
.mk-change { font-size: 10.5px; font-weight: 700; }
.mk-up { color: var(--up); }
.mk-down { color: var(--down); }
.market-loading { padding: 14px 2px; font-size: 11.5px; color: var(--text-subtle); text-align: center; }
.market-updated { margin-top: 8px; font-size: 10px; color: var(--text-subtle); text-align: right; }

/* ── Sidebar Left ──
   예전엔 position:fixed + right:calc(50% + 460px) 로 "뷰포트 중앙 기준"을 매번 재계산해서
   창 크기를 바꿀 때마다 슬쩍슬쩍 움직였다. 이제는 그냥 main 옆에 자리 잡는 평범한
   flex 형제 요소로 두고, position:sticky로 세로 스크롤 때만 붙어있게 한다.
   → 가로 위치는 flex 배치로 결정되므로 리사이즈해도 재계산·이동이 없다. */
.sidebar-left {
    grid-column: 1;
    position: sticky;
    top: 80px;
    width: 286px;
    padding-right: 24px;    /* 본문과의 간격 */
    padding-top: 7px;       /* 첫 줄(홈)을 툴바·우측 사이드바 첫 줄과 세로 중심 맞춤 */
    flex-shrink: 0;
    /* height:100vh 로 자르지 않는다 — sticky는 자기 박스 높이만큼만 고정 구간을 가지므로,
       뷰포트 높이로 박스를 잘라두면 긴 피드를 끝까지 스크롤했을 때 그 지점부터 sticky가
       풀려버려 사이드바가 화면 위로 튕겨나가 보인다(버그). 내용이 짧아 높이 제한이 필요 없다. */
}

/* ── Main ── */
main {
    grid-column: 2;   /* 항상 가운데 트랙 — 사이드바 파싱 타이밍과 무관하게 위치 고정 */
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* 고정폭 — 창을 줄여도 가운데 피드 영역은 줄어들지 않는다. */
    flex: 0 0 920px;
    width: 920px;
    padding: 88px 32px 0;   /* 상단 88px = 고정 툴바 시작(80px) + 높이(52) 여백 확보. 툴바가 fixed라 흐름에서 빠지므로 직접 확보 */
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
}

/* ── Sidebar Right ── */
.sidebar-right {
    grid-column: 3;
    position: sticky;
    top: 80px;
    width: 286px;
    padding-left: 24px;     /* 본문과의 간격 */
    flex-shrink: 0;
    /* height:100vh 로 자르지 않는 이유는 .sidebar-left 주석 참고 */
}

/* ── Nav Group ── */
.nav-group { margin-bottom: 20px; }
.nav-group h4 {
    color: var(--text-subtle);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin: 0 0 6px 0;
    padding: 0 10px;
}
.nav-item {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    color: var(--text-main);
    text-decoration: none;
    border-radius: var(--radius-md);
    font-size: 13.5px;
    font-weight: 500;
    transition: background var(--transition), color var(--transition);
    gap: 8px;
}
.nav-item:hover { background: var(--bg-hover); color: var(--text-main); }
.nav-item.active { background: var(--bg-badge); color: var(--text-main); font-weight: 600; }
.nav-ico { flex-shrink: 0; opacity: 0.65; }
.nav-item.active .nav-ico { opacity: 1; }
.nav-hash {
    flex-shrink: 0;
    width: 18px;
    text-align: center;
    font-weight: 600;
    color: var(--text-subtle);
    font-size: 14px;
}
.nav-item:hover .nav-hash { color: var(--text-muted); }
.nav-item.active .nav-hash { color: var(--gold); }

/* ── Gallery Banner ── */
.gallery-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 4px 18px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}
.gallery-banner-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: var(--primary-light);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    flex-shrink: 0;
}
/* 커뮤니티별 배너 색조 — 코인=골드, 주식=블루 */
.banner-crypto .gallery-banner-icon { background: var(--gold-light); color: var(--gold); }
.banner-stocks .gallery-banner-icon { background: #E7F0F8; color: var(--down); }
.gallery-banner-text h2 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 2px;
}
.gallery-banner-text p {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

/* ── Feed Toolbar (최신/인기/댓글순 탭) ──
   스크롤 위치와 무관하게 항상 고정(position:fixed). main과 똑같이
   "left:50% + translateX(-50%)"로 뷰포트 중앙에 맞춘다 — 이 방식은 손으로 계산한
   calc(50% - 770px + …) 같은 매직넘버가 없어 창 크기를 바꿔도 절대 어긋나지 않고,
   main이 사이드바 유무와 상관없이 항상 뷰포트 중앙에 오는 것과 정확히 맞물린다. */
.feed-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 52px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-main);
    position: fixed;
    top: 80px;                 /* 좌우 사이드바 첫 줄(홈/보기 언어)과 높이를 맞춤 */
    left: 50%;
    transform: translateX(-50%);
    width: 920px;               /* main과 동일 폭 */
    z-index: 900;
    padding: 0 32px;
    box-sizing: border-box;
}

/* 사이드바까지 놓을 공간이 없을 만큼 좁아지면: 가운데 피드(920px 고정)만 남기고
   좌우 사이드바는 숨긴다. main은 고정폭이라 줄어들지 않으므로 사이드바가 겹치는 대신
   깔끔히 사라지고, 본문이 화면 중앙에 그대로 고정된다. */
@media (max-width: 1580px) {
    .sidebar-left, .sidebar-right { display: none; }
    /* 사이드바 숨김 구간: 그리드를 가운데 단일 컬럼으로 (빈 트랙으로 인한 가로 오버플로우 방지) */
    .container { grid-template-columns: minmax(0, 920px); }
    main { grid-column: 1; }
}
/* toolbar가 fixed라 본문에서 빠지므로 main padding-top으로 공간 확보됨 */
.feed-tabs { display: flex; align-items: center; gap: 20px; height: 100%; }
.feed-tab {
    display: inline-flex;
    align-items: center;
    height: 100%;
    text-decoration: none;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 0 1px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition);
}
.feed-tab:hover { color: var(--text-main); }
.feed-tab.active { color: var(--text-main); font-weight: 600; border-bottom-color: var(--primary); }
.write-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: none;
    color: var(--primary-dark);
    border: 1.5px solid var(--primary);
    text-decoration: none;
    border-radius: var(--radius-full);
    padding: 7px 18px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.1px;
}
.write-btn svg { margin-top: -1px; }
.write-btn:active { opacity: 0.9; }

/* ── Feed ── */
.feed { display: flex; flex-direction: column; }
.feed-item {
    padding: 16px;
    margin: 0 -16px;         /* 좌우 패딩만큼 바깥으로 밀어내 기존 정렬(제목·툴바 등)과 맞춤 */
    border-radius: var(--radius-md);
    position: relative;      /* 아래 ::after 구분선의 기준 */
    cursor: pointer;
    transition: background var(--transition);
}
.feed-item:hover { background: var(--bg-sunken); }
/* 구분선: border-bottom은 border-radius를 따라 양 끝이 휘므로,
   라운드 hover 배경과 분리해 직선(각진 끝)으로 그린다 */
.feed-item::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: var(--border);
}
.feed-head {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
}
.avatar-xs { width: 21px; height: 21px; font-size: 10px; }
.feed-author { font-size: 12.5px; font-weight: 600; }
.feed-dot { color: var(--text-subtle); font-size: 12px; }
.feed-time { font-size: 11.5px; color: var(--text-subtle); }
.feed-chip {
    font-size: 10.5px;
    color: var(--text-muted);
    border: 1px solid var(--border-strong);
    background: none;
    font-weight: 500;
    padding: 1px 7px;
    border-radius: 4px;
    margin-left: 4px;
}
.feed-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.2px;
    margin: 0 0 5px;
    color: var(--text-main);
    transition: color var(--transition);
}
.feed-item:hover .feed-title { color: var(--primary-dark); }
.feed-preview {
    font-size: 13.5px;
    color: var(--text-secondary, var(--text-muted));
    line-height: 1.6;
    margin: 0 0 11px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* 미리보기 줄 수 = 뷰어 언어별. 영문은 폭 넓힘 후 2줄이 half-empty로 어색해져 1줄로,
   한·일(CJK)은 글자 밀도가 높아 2줄이라야 한 생각이 담기므로 기본값 2줄 유지.
   피드는 항상 뷰어 언어 하나로만 렌더되므로 한 화면 안에선 항상 일관됨. */
body.market-en .feed-preview {
    -webkit-line-clamp: 1;
}
.feed-foot {
    display: flex;
    align-items: center;
    gap: 14px;
}
.feed-stat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}
.feed-stat svg { opacity: 0.6; }

/* ── Panel ──
   .market-widget과 같은 이유로 박스 카드 대신 상단 구분선만 남긴 플랫 스타일로 통일. */
.panel {
    padding: 16px 2px;
    border-top: 1px solid var(--border);
}
.panel:first-child { border-top: none; padding-top: 0; }
.panel h3 {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 12px 0;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-faint, var(--text-subtle));
    letter-spacing: 0.3px;
    text-transform: none;
}
.panel-ico { flex-shrink: 0; opacity: 0.8; }

/* ── Buttons ── */
.login-btn {
    background: none;
    color: var(--text-main);
    border: 1.5px solid var(--text-main);
    padding: 7px 20px;
    border-radius: var(--radius-full);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.login-btn:active { opacity: 0.9; }

/* 비로그인 상태의 로그인 진입 버튼.
   텍스트 버튼('로그인')이 바로 아래 '글쓰기' 버튼(.write-btn)과 테두리+알약형으로 형태가 겹쳐
   구분이 잘 안 됐다. 원형 아이콘으로 바꿔 역할이 다르다는 걸 형태로 드러낸다.
   로그인 후 같은 자리에 들어오는 .user-profile-circle(32px)과 크기를 맞춰
   로그인 전/후 레이아웃이 튀지 않게 했다. */
.login-icon-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    background: var(--bg-sidebar, #F6F7F8);
    border: 1.5px solid var(--border, rgba(0, 0, 0, 0.10));
    color: var(--text-subtle, #86857E);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.login-icon-btn:hover {
    background: var(--bg-surface, #FFFFFF);
    border-color: var(--text-main);
    color: var(--text-main);
}
.login-icon-btn:active { opacity: 0.9; }

.btn-save {
    display: block;
    text-align: center;
    text-decoration: none;
    background: var(--primary);
    color: white !important;
    padding: 12px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 16px;
    transition: background var(--transition);
}
.btn-save:hover {
    background: var(--primary-dark);
}

/* ── User Profile ── */
.user-menu-container { position: relative; }

.user-profile-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 5px 10px 5px 5px;
    border-radius: var(--radius-full);
    border: 1.5px solid transparent;
    transition: background var(--transition), border-color var(--transition);
}
.user-profile-trigger:hover {
    background: var(--bg-sidebar);
    border-color: var(--border);
}

.user-profile-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
}

/* 프로필 이미지가 있으면 배경색을 없앤다.
   var(--primary) 배경은 이미지가 없을 때 이니셜을 받쳐주는 용도인데,
   투명 배경(PNG) 프로필을 올리면 녹색이 비쳐 보인다. */
.user-profile-circle:has(img) {
    background: transparent;
}

.user-name-text {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
}

.arrow-down {
    font-size: 10px;
    color: var(--text-subtle);
    transition: transform var(--transition);
}
.user-profile-trigger:hover .arrow-down { transform: translateY(1px); }

.user-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    min-width: 140px;
    z-index: 2000;
    overflow: hidden;
    animation: dropIn 0.15s ease;
}
.user-dropdown.open { display: block; }

@keyframes dropIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.dropdown-item {
    display: block;
    padding: 11px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    text-decoration: none;
    transition: background var(--transition), color var(--transition);
}
.dropdown-item:hover {
    background: var(--bg-hover);
    color: var(--primary);
}

/* ── Post Detail (flat, wide) ── */
.post-detail {
    padding: 16px 4px 0;
    margin: 0 0 8px;
}
.gallery-chip {
    display: inline-block;
    background: var(--bg-badge);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    text-decoration: none;
    margin-bottom: 14px;
    transition: background var(--transition), color var(--transition);
}
.gallery-chip:hover { background: var(--primary-light); color: var(--primary-dark); }
.post-detail-title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 20px;
    letter-spacing: -0.5px;
}
.post-detail-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border);
}
.post-detail-meta-text { display: flex; flex-direction: column; }
.meta-author { font-size: 14px; font-weight: 700; }
.meta-sub { font-size: 12px; color: var(--text-muted); }
.lang-badge {
    background: var(--bg-badge);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}
/* 보기 언어와 원문이 달라 번역되어 표시 중일 때 — 보라로 살짝 강조 */
.lang-badge-translated {
    background: var(--accent-light);
    color: var(--accent-dark);
}
/* 댓글용 작은 버전 */
.lang-badge-sm {
    font-size: 10px;
    padding: 0 5px;
}
.post-detail-body {
    padding: 28px 0 32px;
    font-size: 16.5px;
    line-height: 1.9;
    white-space: pre-wrap;
    word-break: break-word;
}
.post-detail-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
.vote-pill {
    display: inline-flex;
    align-items: center;
    background: var(--bg-sidebar);
    border-radius: var(--radius-full);
    overflow: hidden;
}
.vote-btn {
    background: none;
    border: none;
    padding: 8px 10px;
    cursor: pointer;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    transition: background var(--transition), color var(--transition);
}
.vote-btn:first-child:hover { background: #FFE5DD; color: #D93A00; }
.vote-btn:last-child:hover { background: #E1E8FE; color: #3B5BDB; }
.vote-btn.voted-up { color: #D93A00; }
.vote-btn.voted-down { color: #3B5BDB; }
.vote-count { font-size: 13px; font-weight: 800; padding: 0 2px; min-width: 16px; text-align: center; }
.pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-sidebar);
    border: none;
    border-radius: var(--radius-full);
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
    cursor: pointer;
    transition: background var(--transition);
}
.pill-btn:hover { background: var(--bg-badge); }
.pill-btn svg { opacity: 0.75; }

/* ── Avatars (per-user color) ── */
.avatar {
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    flex-shrink: 0;
    user-select: none;
    overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-md { width: 36px; height: 36px; font-size: 15px; }
.avatar-sm { width: 26px; height: 26px; font-size: 11px; }
/* 유저 아바타 색상 — 채도를 낮춘 톤으로 통일해 피드를 내릴 때 알록달록 튀지 않게 함.
   (봇은 별도 초록 아이콘+뱃지로 이미 구분되므로 여기선 일반 유저만 해당) */
.avatar-c0 { background: #B25D3C; }
.avatar-c1 { background: #3E7D82; }
.avatar-c2 { background: #6F5FA3; }
.avatar-c3 { background: #52855A; }
.avatar-c4 { background: #A3486A; }
.avatar-c5 { background: #3F6D95; }
.avatar-c6 { background: #9C7A2E; }
.avatar-c7 { background: #6B6F73; }

/* ── Comment Section (flat) ── */
.comment-section {
    padding: 20px 4px 40px;
}
.comment-toolbar { margin-bottom: 20px; }
.comment-count { font-size: 16px; font-weight: 800; margin: 0; }
.comment-count span { color: var(--text-muted); font-weight: 700; }

/* Composer */
.composer-row { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 28px; }
.composer-form { flex: 1; min-width: 0; }
.composer-form textarea,
.reply-form textarea {
    width: 100%;
    border: none;
    border-bottom: 1.5px solid var(--border-strong);
    border-radius: 0;
    background: none;
    padding: 6px 2px;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.5;
    resize: none;
    overflow: hidden;
    outline: none;
    transition: border-color var(--transition);
}
.composer-form textarea::placeholder,
.reply-form textarea::placeholder { color: var(--text-subtle); }
.composer-form textarea:focus,
.reply-form textarea:focus {
    border-bottom-color: var(--primary);
    border-bottom-width: 2px;
}

/* ── 대댓글(답글) 입력: 댓글보다 작고 조밀하게 구별 ── */
.reply-form .composer-row { margin-bottom: 4px; }
.reply-form textarea {
    font-size: 13px;
    padding: 4px 2px;
}
.reply-form .composer-actions { margin-top: 6px; }
.reply-form .ghost-btn,
.reply-form .solid-btn { padding-top: 5px; padding-bottom: 5px; font-size: 12.5px; }

/* 최상위 댓글 제출 버튼 = 위계 최상: 깔끔한 아웃라인(앱 CTA 결과 통일).
   채움 대신 hover 때만 은은히 틴트가 차오르게 — 알약(둥근 pill)은 피하고 9px 소프트 사각.
   ※ 선택자를 .comment-section 직속으로 한정하지 않으면 대댓글 폼의
     동일한 .composer-row>.composer-form>.composer-actions 구조에도 걸려 둘이 똑같아진다 */
.comment-section > .composer-row > .composer-form > .composer-actions .solid-btn {
    background: none;
    color: var(--primary-dark);
    border: 1.5px solid rgba(29,158,117,0.55);
    border-radius: var(--radius-md);
    font-weight: 700;
    letter-spacing: -0.1px;
    padding: 6px 18px;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.comment-section > .composer-row > .composer-form > .composer-actions .solid-btn:hover {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary-dark);
}
.comment-section > .composer-row > .composer-form > .composer-actions .solid-btn:disabled {
    background: none;
    border-color: var(--border-strong);
    color: var(--text-subtle);
}
.composer-actions {
    display: none;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
}
.composer-actions.show { display: flex; }
/* 취소 — 가장 약한 위계: 회색 텍스트만 */
.ghost-btn {
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-subtle);
    cursor: pointer;
    transition: color var(--transition), background var(--transition);
}
.ghost-btn:hover { color: var(--text-main); background: var(--bg-hover); }

/* 제출(댓글/답글) — 주 액션: 채운 알약 대신 진한 틸 텍스트 + 밑줄 강조 */
.solid-btn {
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 700;
    color: var(--primary);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.solid-btn:hover { background: var(--primary-light); color: var(--primary-dark); }
.solid-btn:active { transform: translateY(1px); }
.solid-btn:disabled { color: var(--text-subtle); background: none; cursor: default; }

/* ── Comment Thread (YouTube style) ── */
.comment-thread { display: flex; flex-direction: column; gap: 2px; }
.comment-node { position: relative; }
.comment-row { display: flex; gap: 12px; padding: 10px 8px; border-radius: var(--radius-md); transition: background var(--transition); }
.comment-row:hover { background: none; }
.comment-gutter { flex-shrink: 0; }
.comment-main { flex: 1; min-width: 0; }
.comment-head {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 4px;
}
.comment-author { font-size: 13px; font-weight: 700; color: var(--text-main); }
.comment-time { font-size: 11.5px; color: var(--text-subtle); }
.comment-body {
    font-size: 14.5px;
    line-height: 1.65;
    margin: 0 0 6px;
    word-break: break-word;
    white-space: pre-wrap;
    color: var(--text-main);
}
.comment-body span { background: none; color: inherit; }
.comment-body a { color: var(--primary); }
.comment-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: -6px;
}
.icon-btn {
    background: none;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.icon-btn:hover { background: var(--bg-badge); color: var(--text-main); }
.icon-btn.vote-up:hover { color: var(--primary); }
.like-count { font-size: 12px; color: var(--text-muted); margin-right: 6px; }
.text-btn {
    background: none;
    border: none;
    border-radius: var(--radius-full);
    padding: 6px 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.text-btn:hover { background: var(--bg-badge); color: var(--text-main); }

/* Reply form */
.reply-form { display: none; margin: 10px 0 4px; }
.reply-form.open { display: block; }
.reply-form .composer-row { margin-bottom: 0; }

/* "답글 N개" toggle */
.replies-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    border-radius: var(--radius-full);
    padding: 6px 14px 6px 9px;
    margin: 2px 0 0 48px;
    font-size: 13px;
    font-weight: 700;
    color: var(--primary);
    cursor: pointer;
    transition: background var(--transition);
}
.replies-toggle:hover { background: var(--primary-light); }
.replies-toggle .caret { transition: transform 0.2s ease; }
.replies-toggle.open .caret { transform: rotate(180deg); }

/* Nested replies — 부모 아바타 열에 세로선 하나. 곡선·형제선 계산 불필요(구조로 해결) */
.comment-children {
    display: none;
    position: relative;
    /* 부모 아바타 중앙(=아바타 시작 8px + 36/2 = 26px 부근)에 세로선이 오도록 좌패딩 */
    margin-left: 17px;
    padding-left: 22px;
}
.comment-children.open { display: block; }
/* 자식 묶음 왼쪽을 관통하는 세로 스레드 선 */
.comment-children::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border);
}
.comment-children .comment-row { padding: 7px 4px; }
/* 깊어질수록 아바타가 작아지므로(sm) 하위 세로선 정렬 보정 */
.comment-children .comment-children { margin-left: 12px; padding-left: 18px; }

/* ── Select / Form ── */
select {
    width: 100%;
    padding: 9px 12px;
    border-radius: var(--radius-md);
    border: 1.5px solid var(--border);
    background: var(--bg-surface);
    font-size: 13px;
    color: var(--text-main);
    cursor: pointer;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236C757D' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}
select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(29,158,117,0.12);
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-subtle); }

/* ── Auth Pages (보라 톤 — 글쓰기의 틸과 구분) ── */
.auth-container {
    display: flex;
    justify-content: center;
    padding: 60px 20px;
    min-height: calc(100vh - 56px);
    /* 인증 화면 전용: 보라 계열 은은한 그라데이션 */
    background:
        radial-gradient(1100px 420px at 50% -10%, rgba(90,87,214,0.12), transparent 70%),
        radial-gradient(800px 360px at 88% 115%, rgba(99,102,241,0.08), transparent 70%),
        var(--bg-main);
    align-items: flex-start;
}
.auth-card {
    width: 100%;
    max-width: 400px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 36px 32px;
    box-shadow: 0 8px 30px rgba(31,44,69,0.10);
}
.auth-title {
    font-size: 24px;
    font-weight: 800;
    margin: 0 0 6px;
    text-align: center;
}
.auth-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
    margin: 0 0 24px;
}
.auth-alert {
    padding: 10px 14px;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 16px;
}
.auth-alert-error {
    background: #FCEBEB;
    color: #A32D2D;
    border: 1px solid #F7C1C1;
}
.auth-alert-success {
    background: #E1F5EE;
    color: #0F6E56;
    border: 1px solid #9FE1CB;
}
.auth-form { display: flex; flex-direction: column; }
.auth-label {
    font-size: 13px;
    font-weight: 700;
    margin: 12px 0 6px;
    color: var(--text-main);
}
.auth-input {
    padding: 11px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 14px;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.auth-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(90,87,214,0.14);
}
.auth-submit {
    margin-top: 20px;
    padding: 12px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--transition);
}
.auth-submit:hover { background: var(--accent-dark); }

/* 인증 코드 입력 + 재발송 + 힌트 */
.auth-hint {
    font-size: 12px;
    color: var(--text-subtle);
    margin: 2px 0 4px;
    line-height: 1.5;
}
.auth-code-input {
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 8px;
    padding-left: 8px;
}
.auth-resend-form { margin-top: 12px; text-align: center; }
.auth-resend-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--transition);
}
.auth-resend-btn:hover { color: var(--accent); }
.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    color: var(--text-subtle);
    font-size: 12px;
}
.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}
.auth-google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
    text-decoration: none;
    transition: background var(--transition), border-color var(--transition);
}
.auth-google-btn:hover {
    background: var(--bg-sidebar);
    border-color: var(--border-strong);
}
.auth-footer {
    text-align: center;
    font-size: 13px;
    color: var(--text-muted);
    margin: 20px 0 0;
}
.auth-footer a {
    color: var(--accent);
    font-weight: 700;
    text-decoration: none;
}

/* ── Translation View Toggle ── */
.orig-view { display: none; }
body.show-original .orig-view { display: inline; }
body.show-original .tr-view { display: none; }

/* 원문 언어 뱃지 — '전시'가 아니라 '여운' 수준 */
/* 원문 언어 배지(origin-flag)는 lang-badge로 통일되어 제거됨 */

.panel select { background: var(--bg-surface); border-color: var(--border-strong); }

/* ── Trending Widget ── */
.trending-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.trending-item {
    display: flex;
    gap: 11px;
    padding: 11px 0;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
}
.trending-item:last-child { border-bottom: none; }
.trending-item:hover .trending-title { color: var(--primary); }
.trending-rank {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-subtle);
    min-width: 16px;
    line-height: 1.5;
}
.trending-item:nth-child(1) .trending-rank { color: var(--gold); }
.trending-item:nth-child(2) .trending-rank { color: var(--gold); opacity: 0.65; }
.trending-item:nth-child(3) .trending-rank { color: var(--gold); opacity: 0.45; }
.trending-body { min-width: 0; flex: 1; }
.trending-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 4px;
    color: var(--text-main);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color var(--transition);
}
.trending-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--text-muted);
}
.trending-score { font-weight: 700; display: inline-flex; align-items: center; gap: 3px; }
.trending-score svg { opacity: 0.6; }

/* ── GBC Point Badge ── */
.gbc-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    color: var(--text-main);
    font-size: 13px;
    font-weight: 600;
    padding: 0;
    border: none;
    cursor: default;
    user-select: none;
}
.gbc-badge::before {
    content: "●";
    color: var(--gbc);
    font-size: 11px;
}

/* ── Bot Badge & Disclaimer (보라 액센트로 분리) ── */
.bot-badge {
    display: inline-block;
    background: none;
    color: var(--accent-dark);
    border: 1px solid var(--accent);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 0 5px;
    border-radius: 4px;
    vertical-align: middle;
    margin-left: 2px;
}
.bot-disclaimer {
    background: var(--accent-light);
    border: 1px solid #D0CFF5;
    color: var(--accent-dark);
    font-size: 12.5px;
    line-height: 1.5;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    margin: 16px 0;
}

/* 댓글 추천 영역 */
.comment-vote {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.comment-vote .vote-count {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    min-width: 14px;
    text-align: center;
}
.icon-btn.voted-up { color: #D93A00; }
.icon-btn.voted-down { color: #3B5BDB; }

/* ── Write Editor (Reddit-style) ── */
.editor-wrap {
    width: 100%;
    max-width: 760px;
    align-self: center;   /* main이 flex column이라 margin:auto만으론 가로 중앙정렬이 안 됨 → align-self로 처리 */
    margin: 0 auto;
    padding: 28px 20px 60px;
}
.editor-page-head { margin-bottom: 20px; }
.editor-page-title {
    font-size: 19px;
    font-weight: 800;
    margin: 0 0 4px;
}
.editor-page-sub {
    font-size: 13.5px;
    color: var(--text-muted);
    margin: 0;
}
.community-select { margin-bottom: 16px; }
.community-select select {
    width: auto;
    min-width: 200px;
    padding: 10px 36px 10px 16px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-strong);
    font-weight: 700;
    font-size: 14px;
}
.editor-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 8px 22px 22px;
    overflow: visible;
}
.editor-title-input {
    width: 100%;
    border: none;
    outline: none;
    padding: 8px 0 14px;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.6px;
    box-sizing: border-box;
    border-bottom: 1px solid var(--border);
}
.editor-title-input::placeholder { color: var(--text-subtle); }
.editor-toolbar {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 6px 2px;
    border-bottom: 1px solid var(--border);
    background: transparent;
    flex-wrap: wrap;
}
.tb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 9px;
    border: none;
    background: none;
    border-radius: var(--radius-md);
    font-size: 14px;
    color: var(--text-muted);      /* 평소엔 은은하게, hover 때 또렷해짐 */
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.tb-btn:hover {
    background: var(--bg-hover);
    color: var(--text-main);
}
.tb-btn:active {
    background: var(--bg-badge);
    transform: translateY(0.5px);
}
/* 서식 아이콘 글자(B/i/S 등)는 자체 폰트스타일을 유지하되 굵기만 통일 */
.tb-btn b, .tb-btn i, .tb-btn s { font-weight: 700; font-style: inherit; }
.tb-sep {
    width: 1px;
    height: 18px;
    background: var(--border);
    margin: 0 5px;
}
.editor-body {
    min-height: 280px;
    padding: 18px 0 0;
    font-size: 16px;
    line-height: 1.8;
    outline: none;
    word-break: break-word;
}
.editor-body:empty::before {
    content: attr(data-placeholder);
    color: var(--text-subtle);
}
.editor-body img { max-width: 100%; border-radius: 8px; margin: 8px 0; }
.editor-body blockquote {
    border-left: 3px solid var(--border-strong);
    margin: 8px 0;
    padding: 4px 0 4px 14px;
    color: var(--text-muted);
}
.editor-body pre {
    background: var(--bg-sidebar);
    padding: 12px;
    border-radius: var(--radius-md);
    overflow-x: auto;
    font-size: 13px;
}
.editor-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}

/* 본문 렌더링(상세)에서 이미지/인용 표시 */
/* 본문 이미지: 블록 + 좌우 auto 마진으로 가운데 정렬, height:auto로 원본 비율 유지 */
.post-detail-body img { max-width: 100%; height: auto; border-radius: 8px; margin: 12px auto; display: block; }
.post-detail-body blockquote {
    border-left: 3px solid var(--border-strong);
    margin: 10px 0;
    padding: 4px 0 4px 16px;
    color: var(--text-muted);
}
.post-detail-body pre {
    background: var(--bg-sidebar);
    padding: 14px;
    border-radius: var(--radius-md);
    overflow-x: auto;
}

.feed-item-body {
    display: block;
}
.feed-item-text { min-width: 0; }
.feed-thumb {
    margin-top: 12px;
    margin-bottom: 14px;
    width: 100%;
    max-height: 420px;
    border-radius: var(--radius-md);
    overflow: hidden;
}
.feed-thumb img {
    width: 100%;
    height: auto;
    max-height: 420px;
    /* contain: 원본 비율 유지(잘림·왜곡 없음). cover는 높이 제한에 맞춰 잘라내며 비율이 깨진다. */
    object-fit: contain;
    display: block;
}
.feed-thumb.is-video { position: relative; }
.play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 4px;
    pointer-events: none;
    transition: background var(--transition), transform var(--transition);
}
.feed-thumb.is-video:hover .play-overlay {
    background: #FF0000;
    transform: translate(-50%, -50%) scale(1.08);
}

/* 동영상 임베드 (반응형 16:9) */
.video-embed {
    position: relative;
    width: 100%;
    margin: 12px 0;
    padding-bottom: 56.25%;
    height: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #000;
}
.video-embed iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ── My Page ── */
.mypage-wrap {
    max-width: 720px;
    margin: 0 auto;
    padding: 32px 20px 80px;
}
.profile-card {
    display: flex;
    gap: 24px;
    align-items: center;
    padding: 24px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 20px;
}
.profile-avatar-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.profile-avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-avatar span {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 34px; font-weight: 700;
}
.avatar-edit-btn {
    background: none;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-full);
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: background var(--transition);
}
.avatar-edit-btn:hover { background: var(--bg-soft); color: var(--text-main); }
.profile-info { flex: 1; min-width: 0; }
.profile-name-row { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.profile-nickname-input {
    font-size: 20px;
    font-weight: 700;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    background: none;
    color: var(--text-main);
    outline: none;
    transition: border-color var(--transition), background var(--transition);
    max-width: 220px;
}
.profile-nickname-input:focus { border-color: var(--primary); background: var(--bg-surface); }
.profile-email { font-size: 13px; color: var(--text-muted); margin: 0 0 16px; }
.profile-stats { display: flex; gap: 28px; }
.profile-stat { display: flex; flex-direction: column; gap: 1px; }
.profile-stat strong { font-size: 18px; font-weight: 800; color: var(--text-main); }
.profile-stat span { font-size: 12px; color: var(--text-muted); }

.mypage-tabs {
    display: flex;
    gap: 20px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}
.mypage-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 12px 2px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition);
}
.mypage-tab:hover { color: var(--text-main); }
.mypage-tab.active { color: var(--text-main); font-weight: 600; border-bottom-color: var(--primary); }

.mypage-panel { display: none; }
.mypage-panel.active { display: block; }

.my-item {
    display: block;
    padding: 14px 4px;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
    transition: background var(--transition);
}
.my-item:hover { background: var(--bg-sunken); }
.my-item-title {
    font-size: 14.5px;
    font-weight: 500;
    color: var(--text-main);
    margin: 0 0 4px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.my-item-sub { font-size: 12px; color: var(--text-muted); margin: 0; }

.point-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 4px;
    border-bottom: 1px solid var(--border);
}
.point-reason { display: flex; flex-direction: column; gap: 2px; }
.point-reason-label { font-size: 14px; font-weight: 500; color: var(--text-main); }
.point-date { font-size: 11.5px; color: var(--text-subtle); }
.point-amount { font-size: 15px; font-weight: 700; }
.point-amount.plus { color: var(--primary-dark); }
.point-amount.minus { color: var(--text-muted); }

/* ── Empty State ── */
.empty-state {
    text-align: center;
    padding: 48px 24px;
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    border: 1.5px dashed var(--border);
    color: var(--text-muted);
    font-size: 14px;
}