:root {
    /* ===== TYPE SCALE =====
       모든 font-size는 아래 7단계만 사용한다. 새 크기 하드코딩 금지.
       주 사용기기인 모바일/태블릿 가독성 기준으로 값을 정했다(최소 11px).
       korea.html과 public/pages 정적 페이지에도 같은 토큰이 복제되어 있으니
       값을 바꾸면 그쪽 :root 블록도 함께 갱신할 것. (2026-07-14) */
    --fs-3xs: 0.6875rem; /* 11px 초소형 배지/타임스탬프 */
    --fs-2xs: 0.75rem;   /* 12px 크롬 라벨/네비 캡션 */
    --fs-xs: 0.8125rem;  /* 13px 서브탭/보조 텍스트 */
    --fs-sm: 0.875rem;   /* 14px 보조 본문/버튼/입력창 */
    --fs-feed-body: 0.8125rem; /* ToTalk 본문: 시스템 글자 크기에 비례 */
    --fs-md: 0.9375rem;  /* 15px 피드 글 본문 전용 */
    --fs-base: 1rem;     /* 16px 본문 */
    --fs-lg: 1.125rem;   /* 18px 네비 아이콘/소제목 */
    --fs-xl: 1.25rem;    /* 20px 섹션 히어로 제목 */
    --tt-primary: #2C8A9E;
    --tt-primary-hover: #1A5B69;
    --tt-primary-action: #2C8A9E;
    --tt-primary-action-hover: #1A5B69;
    --tt-primary-soft: #F0F9FA;
    --tt-bg: #F6FAFB;
    --tt-bg-soft: #EEF5F7;
    --tt-surface: #FFFFFF;
    --tt-text: #1A202C;
    --tt-text-secondary: #4A5568;
    --tt-text-muted: #718096;
    --tt-border: #E2E8F0;
    --tt-accent: #E06D53;
    --tt-success: #3CBF9B;
    --tt-danger: #D32F2F;
    --tt-radius-card: 16px;
    --tt-radius-control: 8px;
    --tt-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.05), 0 10px 28px rgba(44, 138, 158, 0.04);
    --tt-font-latin: "Inter", "Segoe UI", Arial, sans-serif;
    --tt-font-ko: "Pretendard Variable", "Pretendard", "Malgun Gothic", sans-serif;
    --tt-font-ja: "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
    --tt-font-zh: "Noto Sans SC", "Microsoft YaHei", sans-serif;
    --z-app-chrome: 100;
    --z-dropdown: 1000;
    --z-modal: 5000;
    --z-modal-priority: 6000;
    --z-toast: 9000;
}

/* Font preferences change typography tokens only. Scaling the html root also
   resized every rem-based gap/control and caused full-page reflow on mobile. */
html.tt-font-small {
    --fs-3xs: 0.625rem;
    --fs-2xs: 0.6875rem;
    --fs-xs: 0.75rem;
    --fs-sm: 0.8125rem;
    --fs-md: 0.875rem;
    --fs-base: 0.9375rem;
    --fs-lg: 1rem;
    --fs-xl: 1.125rem;
    --fs-feed-body: 0.75rem;
}
html.tt-font-large {
    --fs-3xs: 0.8125rem;
    --fs-2xs: 0.875rem;
    --fs-xs: 0.9375rem;
    --fs-sm: 1rem;
    --fs-md: 1.0625rem;
    --fs-base: 1.125rem;
    --fs-lg: 1.3125rem;
    --fs-xl: 1.4375rem;
    --fs-feed-body: 0.9375rem;
}

/* ===== TYPE SCALE 유틸리티 =====
   마크업에서는 Tailwind 임의값(text-[0.625rem] 등) 대신 아래 8개 클래스만 쓴다.
   !important인 이유: 기존 arbitrary 클래스 리매핑 레이어(하단 .text-\[...\] 규칙들)와
   공존하는 마이그레이션 기간 동안 토큰 클래스가 항상 이기게 하기 위함.
   리매핑 레이어가 모두 제거되면 !important도 함께 제거할 것. */
.tt-fs-3xs { font-size: var(--fs-3xs) !important; }
.tt-fs-2xs { font-size: var(--fs-2xs) !important; }
.tt-fs-xs  { font-size: var(--fs-xs) !important; }
.tt-fs-sm  { font-size: var(--fs-sm) !important; }
.tt-fs-md  { font-size: var(--fs-md) !important; }
.tt-fs-base { font-size: var(--fs-base) !important; }
.tt-fs-lg  { font-size: var(--fs-lg) !important; }
.tt-fs-xl  { font-size: var(--fs-xl) !important; }

.feed-comment-active {
    color: #84cc16 !important;
}

.feed-comment-active:hover {
    color: #65a30d !important;
}

.font-size-option[aria-pressed="true"] {
    background: var(--tt-primary-action) !important;
    border-color: var(--tt-primary-action) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px var(--tt-primary-shadow) !important;
}

.font-size-option {
    min-height: 40px;
}

.font-size-option[aria-pressed="false"] {
    background: var(--tt-bg-soft) !important;
    border-color: var(--tt-border) !important;
    color: var(--tt-text-secondary) !important;
}

/* 동료 첨삭 목록/상세는 앱 헤더와 하단 내비게이션까지 덮는 전체화면이다. */
.peer-review-fullscreen-modal {
    z-index: var(--z-modal) !important;
}

body:has(.peer-review-fullscreen-modal) #bottom-nav {
    display: none !important;
}

#sp-admin-graph-shell:fullscreen,
#sp-admin-graph-shell.sp-graph-fullscreen-fallback {
    width: 100vw !important;
    height: 100vh !important;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    background: var(--tt-bg) !important;
}

#sp-admin-graph-shell.sp-graph-fullscreen-fallback {
    position: fixed !important;
    inset: 0 !important;
    z-index: var(--z-modal-priority) !important;
}

#sp-admin-graph-shell:fullscreen #sp-admin-graph,
#sp-admin-graph-shell.sp-graph-fullscreen-fallback #sp-admin-graph {
    border-radius: 1rem;
}
#auth-modal {
    overflow-y: auto;
}

#auth-modal-content {
    max-height: calc(100dvh - 32px - env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    overscroll-behavior: contain;
}

#auth-main-form,
#auth-forgot-form {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 2px;
    overscroll-behavior: contain;
}

#auth-submit-btn {
    position: sticky;
    bottom: 0;
    z-index: 3;
    box-shadow: 0 -10px 18px rgba(255, 255, 255, 0.92);
}

/* 다크 테마에서는 위 흰색 페이드가 흰 띠처럼 보이므로 모달 배경색으로 맞춘다. */
.dark-theme #auth-submit-btn {
    box-shadow: 0 -10px 18px rgba(11, 22, 38, 0.92);
}

/* 모바일: 댓글 모달을 화면(동적 뷰포트)에 직접 고정한다. 100dvh가 아닌 조상 높이에
   묶이면 주소창이 나타날 때 하단 댓글 입력창이 화면 밖으로 밀려 스와이프에 따라
   보였다 안 보였다 하는 원인이 된다. */
@media (max-width: 839px) {
    #comment-detail-modal {
        position: fixed !important;
        inset: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
    }
    #comment-detail-modal-content {
        padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
    }
}

#global-search-input,
#feed-search-input {
    text-indent: 0;
}

#info-subtab-about,
#info-subtab-korea,
#info-subtab-life,
#info-subtab-study,
#info-subtab-essential {
    min-height: 0;
    scroll-padding-top: 12px;
}

/* ===== FONT READABILITY ===== */
* { word-break: keep-all; overflow-wrap: break-word; }
html.lang-zh *,
html.lang-ja * {
    word-break: normal;
    line-break: strict;
    overflow-wrap: anywhere;
}
html {
    /* 모바일 OS/브라우저의 접근성 글자 확대를 허용한다. */
    -webkit-text-size-adjust: auto;
    text-size-adjust: auto;
}
html, body { height: 100%; height: 100dvh; }
body,
body.font-sans,
html.lang-vi body,
html.lang-vi body.font-sans,
html.lang-id body,
html.lang-id body.font-sans,
html.lang-en body,
html.lang-en body.font-sans,
html.lang-ru body,
html.lang-ru body.font-sans {
    font-family: var(--tt-font-latin);
}
html.lang-ko body,
html.lang-ko body.font-sans {
    font-family: var(--tt-font-ko);
}
html.lang-ja body,
html.lang-ja body.font-sans {
    font-family: var(--tt-font-ja);
}
html.lang-zh body,
html.lang-zh body.font-sans {
    font-family: var(--tt-font-zh);
}
body {
    /* Unclassified UI copy should match the 13px auxiliary/body baseline. */
    font-size: var(--fs-xs);
    line-height: 1.68;
    letter-spacing: 0;
    min-height: 100dvh;
    background: var(--tt-bg);
    color: var(--tt-text);
    /* 湲곌린蹂??고듃 ?뚮뜑留??듭씪 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
#root-outer-wrapper { height: 100dvh !important; max-height: 100dvh !important; }

/* ===== TOPIKTALK COMMON VISUAL TONE ===== */
body,
html body {
    background-color: var(--tt-bg) !important;
}

body #root-outer-wrapper,
body #main-content-column,
body .bg-\[\#F7FAFB\] {
    background-color: var(--tt-bg) !important;
}

body .bg-\[\#EEF2F7\],
body .bg-slate-50,
body .bg-slate-100 {
    background-color: var(--tt-bg-soft) !important;
}

body .bg-white,
body .bg-white\/80,
body .bg-white\/90,
body .bg-white\/95 {
    background-color: var(--tt-surface) !important;
}

body .border-slate-100,
body .border-slate-150,
body .border-slate-200,
body .border-slate-250 {
    border-color: var(--tt-border) !important;
}

body .text-slate-800,
body .text-slate-700,
body .text-slate-650 {
    color: var(--tt-text) !important;
}

body .text-slate-600,
body .text-slate-550 {
    color: var(--tt-text-secondary) !important;
}

body .text-slate-500,
body .text-slate-400 {
    color: var(--tt-text-muted) !important;
}

body .text-brand-300,
body .text-brand-400,
body .text-brand-500,
body .text-brand-600 {
    color: var(--tt-primary) !important;
}

body .bg-brand-500,
body .bg-brand-600 {
    background-color: var(--tt-primary-action) !important;
}

body .hover\:bg-brand-500:hover,
body .hover\:bg-brand-600:hover {
    background-color: var(--tt-primary-action-hover) !important;
}

body .border-brand-100,
body .border-brand-200,
body .border-brand-300,
body .border-brand-400 {
    border-color: var(--tt-primary-border) !important;
}

body input,
body textarea,
body select {
    min-height: 40px;
    border-radius: var(--tt-radius-control) !important;
    border-color: var(--tt-border) !important;
    background-color: rgba(255, 255, 255, 0.92) !important;
}

body input:focus,
body textarea:focus,
body select:focus {
    border-color: var(--tt-primary) !important;
    box-shadow: 0 0 0 3px var(--tt-primary-shadow) !important;
}

/* class~= 는 완전한 클래스 토큰만 매칭한다 — class*= 는 hover:bg-brand-500 같은
   변형까지 잡아서 회색 버튼(예: 관심 해제)에 상시 글로우가 생기던 원인이었다. */
body button[class~="bg-brand-500"],
body button[class~="bg-brand-600"],
body a[class~="bg-brand-500"],
body a[class~="bg-brand-600"] {
    border-radius: var(--tt-radius-control) !important;
    min-height: 40px;
    font-weight: 700;
    box-shadow: 0 8px 18px var(--tt-primary-shadow);
}

body button[class*="bg-slate-100"],
body button[class*="bg-white"],
body a[class*="bg-slate-100"],
body a[class*="bg-white"] {
    border-radius: var(--tt-radius-control) !important;
}

body #feed-list > div[id^="thread-"],
body #my-feed-list > div,
body #edu-feed-list > div,
body #ts-exam-list > div,
body #comment-modal-original-post > div,
body #search-results-inner > div,
body #mypage-connections-content .bg-white,
body #admin-masks-list .bg-white {
    border: 1px solid var(--tt-border) !important;
    border-radius: var(--tt-radius-card) !important;
    box-shadow: var(--tt-shadow-card) !important;
}

::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
::-webkit-scrollbar-track {
    background: #f0f9fa;
}
::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #4D9DAD;
}
* {
    scrollbar-width: thin;
    scrollbar-color: #CBD5E1 #f0f9fa;
}
.scrollbar-none::-webkit-scrollbar {
    display: none;
}
.scrollbar-none {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
/* ??뺤삋域?獄?癰귣벊沅?筌△뫀??????립 ?癒?궚 癰귣똾??*/
.no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

@keyframes like-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

.animate-like-pop {
    animation: like-pop 0.3s ease-out;
}

/* Theme Toggle - Dark Theme Overrides */
.dark-theme,
.dark-theme body {
    background-color: var(--tt-bg-soft) !important;
    color: #E5E7EB !important;
}

/* Outer Wrapper & Panels */
.dark-theme #root-outer-wrapper {
    border-color: var(--tt-border) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.5) !important;
}

.dark-theme #sidebar-left {
    background-color: var(--tt-surface) !important;
    border-color: var(--tt-border) !important;
}

.dark-theme #sidebar-right {
    background-color: var(--tt-surface) !important;
    border-color: var(--tt-border) !important;
}

/* Cards & Containers */
.dark-theme .bg-white {
    background-color: var(--tt-surface) !important;
}

.dark-theme .bg-slate-50,
.dark-theme .bg-slate-100 {
    background-color: var(--tt-surface-raised) !important;
}

.dark-theme .bg-\[\#EEF2F7\] {
    background-color: var(--tt-bg-soft) !important;
}

/* Borders */
.dark-theme .border-slate-100,
.dark-theme .border-slate-150,
.dark-theme .border-slate-200,
.dark-theme .border-slate-250 {
    border-color: var(--tt-border) !important;
}

.dark-theme .border-slate-800,
.dark-theme .border-slate-850 {
    border-color: var(--tt-border) !important;
}

/* Typography Colors */
.dark-theme .text-slate-600,
.dark-theme .text-slate-500 {
    color: #9CA3AF !important;
}

.dark-theme .text-slate-400,
.dark-theme .text-slate-300 {
    color: #D1D5DB !important;
}

.dark-theme .text-slate-200 {
    color: #E5E7EB !important;
}

.dark-theme h2.text-slate-800,
.dark-theme span.text-slate-800 {
    color: #FFFFFF !important;
}

/* Hover and active states */
.dark-theme .hover\:bg-slate-100:hover {
    background-color: var(--tt-surface-raised) !important;
}

.dark-theme .hover\:text-slate-800:hover {
    color: #FFFFFF !important;
}

.dark-theme .hover\:bg-slate-50:hover {
    background-color: var(--tt-surface-raised) !important;
}

.dark-theme .hover\:text-brand-500:hover {
    color: #4D9DAD !important;
}

/* Inputs & Form Elements */
.dark-theme input,
.dark-theme textarea,
.dark-theme select {
    background-color: var(--tt-surface) !important;
    border-color: var(--tt-border) !important;
    color: #F3F4F6 !important;
}

.dark-theme input:focus,
.dark-theme textarea:focus,
.dark-theme select:focus {
    border-color: #4D9DAD !important;
}

.dark-theme input:disabled {
    color: #6B7280 !important;
    border-color: var(--tt-border) !important;
}

/* Header & Bottom Nav */
.dark-theme header,
.dark-theme nav {
    background-color: var(--tt-surface) !important;
    border-color: var(--tt-border) !important;
}

/* Modals */
.dark-theme #post-modal-content,
.dark-theme #auth-modal-content,
.dark-theme #comment-detail-modal-content,
.dark-theme #admin-change-modal-content,
.dark-theme #edu-apply-modal-content,
.dark-theme #admin-program-modal-content,
.dark-theme #info-modal > div {
    background-color: var(--tt-surface) !important;
    border-color: var(--tt-border) !important;
    color: #F3F4F6 !important;
}

/* Captcha container theme adjustments */
.dark-theme #captcha-container.bg-slate-50 {
    background-color: var(--tt-surface) !important;
    border-color: var(--tt-border) !important;
}

.dark-theme #captcha-container.bg-emerald-50 {
    background-color: rgba(16, 185, 129, 0.1) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}

.dark-theme #captcha-text.text-slate-500 {
    color: #9CA3AF !important;
}

.dark-theme #captcha-text.text-emerald-600 {
    color: #34D399 !important;
}

.dark-theme #captcha-handle.bg-white {
    background-color: var(--tt-surface-raised) !important;
    border-color: var(--tt-border) !important;
}

.dark-theme #captcha-handle.bg-emerald-100 {
    background-color: rgba(16, 185, 129, 0.2) !important;
    border-color: rgba(16, 185, 129, 0.4) !important;
}

/* Scrollbars in dark theme */
.dark-theme ::-webkit-scrollbar-track {
    background: var(--tt-bg-soft) !important;
}
.dark-theme ::-webkit-scrollbar-thumb {
    background: var(--tt-border) !important;
}
.dark-theme * {
    scrollbar-color: var(--tt-border) var(--tt-bg-soft);
}

/* Prevent Font Size Zoom from affecting Header, Bottom Nav, Tabs, and Floating panel */
#mobile-header {
    height: 48px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    font-size: var(--fs-2xs) !important;
}

#mobile-header * {
    font-size: var(--fs-2xs) !important;
}

#mobile-header > div {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

#mobile-header img[src="logo_icon.png"] {
    width: 32px !important;
    height: 32px !important;
}

#mobile-header img[src="logo_text.png"] {
    height: 18px !important;
    width: auto !important;
}

#mobile-header span#header-subtitle {
    font-size: var(--fs-3xs) !important;
    margin-top: 2px !important;
    line-height: 10px !important;
}

#mobile-header #lang-dropdown-btn {
    font-size: var(--fs-3xs) !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    border-radius: 8px !important;
    gap: 6px !important;
    height: 28px !important;
    line-height: 14px !important;
    display: flex !important;
    align-items: center !important;
}

#mobile-header #lang-dropdown-btn * {
    font-size: var(--fs-3xs) !important;
}

#mobile-header #lang-dropdown-btn i.fa-globe {
    font-size: var(--fs-2xs) !important;
}

#mobile-header #lang-dropdown-btn i.fa-chevron-down {
    font-size: var(--fs-3xs) !important;
    margin-left: 2px !important;
}

#mobile-header #lang-dropdown-menu {
    width: 112px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    margin-top: 4px !important;
    border-radius: 12px !important;
    font-size: var(--fs-2xs) !important;
}

#mobile-header #lang-dropdown-menu button {
    padding: 8px 10px !important;
    font-size: var(--fs-2xs) !important;
}

#mobile-header #lang-dropdown-menu button * {
    font-size: var(--fs-2xs) !important;
}

#mobile-header #auth-panel button {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: var(--fs-2xs) !important;
    height: 28px !important;
    line-height: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
}

#mobile-header #auth-panel span {
    font-size: var(--fs-2xs) !important;
    font-weight: bold !important;
}

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

/* JS ??€???疫꿸퀡而???됱뵠?袁⑹뜍 揶쏅벡??(沃섎챶逾??곸삓??癰귣똻?? */
html.layout-desktop #root-outer-wrapper { max-width: 1000px !important; min-height: 100vh !important; }
html.layout-desktop #body-row { flex-direction: row !important; position: relative !important; overflow: visible !important; min-height: 100vh !important; }
html.layout-desktop #mobile-topbar { display: none !important; }
html.layout-desktop #content-column { margin-left: 68px !important; padding-bottom: 0 !important; overflow: hidden !important; }
html.layout-desktop #bottom-nav { position: absolute !important; left: 0 !important; top: 0 !important; bottom: 0 !important; width: 68px !important; flex-direction: column !important; background-color: #ffffff !important; z-index: 35 !important; overflow: visible !important; }
/* 嚥≪뮄????湲???뽯뻻 */
html.layout-desktop #bottom-nav > div:first-of-type { display: flex !important; }
html.layout-desktop #bottom-nav > div:first-of-type img.sidebar-show { display: block !important; max-width: 56px !important; }
html.layout-desktop #bottom-nav > div:first-of-type span.sidebar-show { display: block !important; }
/* ?袁⑹뵠?꾩꼶彛?- 沃섎챶逾??곸삓??hover ?類ㅼ삢 ?얜????*/
html.layout-desktop #bottom-nav .sidebar-show { display: none !important; }
html.layout-desktop #bottom-nav .sidebar-footer { display: none !important; }
html.layout-desktop #bottom-nav > div.flex-1 { flex: 0 0 auto !important; }
html.layout-desktop #bottom-nav:hover { width: 68px !important; overflow: visible !important; box-shadow: none !important; align-items: center !important; }
html.layout-desktop #bottom-nav:hover .sidebar-show { display: none !important; }
/* 甕곌쑵??hover ????꾨샍 */
html.layout-desktop #bottom-nav > div.flex-1 button { position: relative !important; }
html.layout-desktop #bottom-nav button .sidebar-show {
    display: none !important;
    position: absolute !important;
    left: 72px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: #1e293b !important;
    color: #ffffff !important;
    padding: 5px 12px !important;
    border-radius: 8px !important;
    font-size: var(--fs-sm) !important;
    white-space: nowrap !important;
    z-index: 200 !important;
    pointer-events: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
}
html.layout-desktop #bottom-nav button:hover .sidebar-show { display: block !important; }
html.layout-mobile #body-row { flex-direction: column !important; overflow: hidden !important; }
html.layout-mobile #mobile-topbar { display: flex !important; }
html.layout-mobile #content-column { margin-left: 0 !important; padding-bottom: 48px !important; }
html.layout-mobile #bottom-nav { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; width: 100% !important; height: calc(48px + env(safe-area-inset-bottom)) !important; padding-bottom: env(safe-area-inset-bottom) !important; flex-direction: row !important; justify-content: space-around !important; align-items: center !important; z-index: 100 !important; box-shadow: 0 -2px 10px rgba(0,0,0,0.05) !important; }

html.layout-touch-landscape {
    --tt-touch-landscape-top-gap: max(30px, env(safe-area-inset-top));
}

html.layout-touch-landscape #root-outer-wrapper {
    padding-top: var(--tt-touch-landscape-top-gap) !important;
    box-sizing: border-box !important;
}

html.layout-touch-landscape #body-row {
    min-height: calc(100dvh - var(--tt-touch-landscape-top-gap)) !important;
}

html.layout-mobile #bottom-nav > div:first-of-type { display: none !important; }
html.layout-mobile #bottom-nav .sidebar-footer { display: none !important; }
html.layout-mobile #bottom-nav button { flex: 1 1 0 !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 2px !important; padding: 0 !important; border-radius: 0 !important; width: auto !important; }
html.layout-mobile #bottom-nav button.rounded-full { border-radius: 9999px !important; flex: 0 0 36px !important; width: 36px !important; min-width: 36px !important; max-width: 36px !important; height: 36px !important; min-height: 36px !important; padding: 0 !important; }
html.layout-mobile #bottom-nav button.hidden { display: none !important; }
html.layout-mobile #bottom-nav button i { font-size: var(--fs-lg) !important; }
html.layout-mobile #bottom-nav button span { display: block !important; font-size: var(--fs-2xs) !important; font-weight: 700 !important; }

/* ===== NAVIGATION AND TAB VISUAL POLISH ===== */
html.layout-mobile #bottom-nav {
    height: calc(48px + env(safe-area-inset-bottom)) !important;
    background: rgba(255, 255, 255, 0.96) !important;
    border-top: 1px solid rgba(226, 232, 240, 0.9) !important;
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.06) !important;
    backdrop-filter: blur(14px) !important;
}

html.layout-mobile #bottom-nav button {
    min-height: 42px !important;
    color: var(--tt-text-muted) !important;
    border-radius: 14px !important;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease !important;
}

html.layout-mobile #bottom-nav button.text-brand-500 {
    background: var(--tt-primary-soft) !important;
    color: var(--tt-primary) !important;
}

html.layout-mobile #bottom-nav button:active {
    transform: scale(0.96);
}

html.layout-mobile #bottom-nav button i {
    font-size: var(--fs-lg) !important;
}

html.layout-mobile #bottom-nav button span {
    font-size: var(--fs-3xs) !important;
    line-height: 1.1 !important;
}

/* Lowercase letters look optically smaller than the all-caps TOPIK label. */
html.layout-mobile #bottom-nav #tab-btn-guide span {
    font-size: var(--fs-2xs) !important;
}

html.layout-mobile #bottom-nav button.rounded-full {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    border-radius: 9999px !important;
    box-shadow: 0 2px 6px var(--tt-primary-shadow) !important;
}

html.layout-desktop #bottom-nav {
    background: rgba(255, 255, 255, 0.98) !important;
    border-right-color: rgba(226, 232, 240, 0.95) !important;
}

html.layout-desktop #bottom-nav button {
    color: var(--tt-text-muted) !important;
}

html.layout-desktop #bottom-nav button.text-brand-500 {
    background: var(--tt-primary-soft) !important;
    color: var(--tt-primary) !important;
}

html.layout-desktop #bottom-nav button:hover {
    background: var(--tt-primary-soft) !important;
    color: var(--tt-primary) !important;
}

body #home-feed-tabs,
body #edu-feed-tabs,
body #info-feed-tabs {
    background: rgba(246, 250, 251, 0.94) !important;
    backdrop-filter: blur(14px) !important;
    border-bottom-color: rgba(226, 232, 240, 0.92) !important;
}

body #home-feed-tabs .seg-track,
body #edu-feed-tabs .seg-track,
body #info-feed-tabs .seg-track,
body .setting-seg-track {
    background: rgba(238, 245, 247, 0.96) !important;
    border: 1px solid rgba(226, 232, 240, 0.88) !important;
    padding: 2px !important;
    gap: 4px !important;
}

body #home-feed-tabs .seg-track button,
body #edu-feed-tabs .seg-track button,
body #info-feed-tabs .seg-track button,
body .setting-seg-track button {
    min-height: 30px !important;
    border-radius: 8px !important;
    color: var(--tt-text-muted) !important;
}

body #home-feed-tabs .seg-track button.bg-brand-500,
body #edu-feed-tabs .seg-track button.bg-brand-500,
body #info-feed-tabs .seg-track button.bg-brand-500,
body .setting-seg-track button.active-tab {
    background: var(--tt-primary-action) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px var(--tt-primary-shadow) !important;
}

body #home-feed-tabs .seg-track button:not(.bg-brand-500):hover,
body #edu-feed-tabs .seg-track button:not(.bg-brand-500):hover,
body #info-feed-tabs .seg-track button:not(.bg-brand-500):hover,
body .setting-seg-track button:not(.active-tab):hover {
    background: rgba(255, 255, 255, 0.76) !important;
    color: var(--tt-text-secondary) !important;
}

.dark-theme.layout-mobile #bottom-nav,
.dark-theme html.layout-mobile #bottom-nav,
.dark-theme #bottom-nav {
    background: rgba(15, 26, 28, 0.96) !important;
    border-right-color: rgba(255, 255, 255, 0.08) !important;
}

/* Desktop (??40px 揶쎛€嚥≪뮆??? */
@media (min-width: 840px) and (min-aspect-ratio: 1/1) {
    #root-outer-wrapper { max-width: 1000px !important; }
    #body-row {
        flex-direction: row !important;
        position: relative !important;
        overflow: visible !important;
    }
    #mobile-topbar { display: none !important; }
    #content-column {
        margin-left: 68px !important;
        padding-bottom: 0 !important;
        overflow: hidden !important;
    }
}

/* Mobile (<768px) */
@media (max-width: 839px) {
    #body-row {
        flex-direction: column !important;
        overflow: hidden !important;
    }
    #mobile-topbar { display: flex !important; }
    #content-column {
        margin-left: 0 !important;
        padding-bottom: 48px !important;
    }
    /* Desktop sidebar sections: hide on mobile */
    #bottom-nav .hidden.md\:flex { display: none !important; }
}

/* ===== LEFT SIDEBAR ===== */

/* Mobile: scroll views need padding so content isn't hidden under fixed nav */
@media (max-width: 839px) {
    #main-content-area > div.overflow-y-auto {
        padding-bottom: 58px !important;
    }
}

/* Mobile: bottom navigation */
@media (max-width: 839px) {
    #bottom-nav {
        position: fixed !important;
        left: 0; right: 0; bottom: 0; top: auto !important;
        width: 100% !important;
        height: calc(48px + env(safe-area-inset-bottom)) !important;
        padding-bottom: env(safe-area-inset-bottom) !important;
        flex-direction: row !important;
        justify-content: space-around !important;
        align-items: center !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        gap: 0 !important;
        border-right: none !important;
        border-top: 1px solid rgba(203, 213, 225, 0.7) !important;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.05) !important;
        z-index: 100 !important;
    }
    #bottom-nav button {
        display: flex !important;
        flex: 1 1 0 !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        height: 42px !important;
        padding: 3px 4px !important;
        border-radius: 0 !important;
        gap: 2px !important;
    }
    #bottom-nav button.text-brand-500 { background-color: transparent !important; }
    #bottom-nav button.hidden { display: none !important; }
    #bottom-nav button i { font-size: var(--fs-lg) !important; }
    #bottom-nav button span { font-size: var(--fs-2xs) !important; font-weight: 700 !important; }
    #bottom-nav .sidebar-footer { display: none !important; }
}

/* korea.html iframe: 筌뤴뫀而????됱뵠?袁⑹뜍?癒?퐣 ??롫뼊 ??삵돩 獄쏅뗄? 野껊??귨쭪? ??낅즲嚥??誘れ뵠 癰귣똻??*/
html.layout-mobile #info-subtab-korea iframe {
    height: calc(100dvh - 220px) !important;
}

/* Desktop: overlay sidebar (collapsed = 68px, hover = 180px) ??揶쎛€嚥≪뮆???뺤춸 ?怨몄뒠 */
@media (min-width: 840px) and (min-aspect-ratio: 1/1) {
    #bottom-nav {
        position: absolute !important;
        left: 0; top: 0; bottom: 0 !important;
        width: 68px !important;
        height: 100% !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 0 !important;
        gap: 0 !important;
        background-color: white !important;
        border-right: 1px solid rgba(203, 213, 225, 0.7) !important;
        border-top: none !important;
        box-shadow: none !important;
        overflow: hidden !important;
        transition: width 0.2s ease, box-shadow 0.2s ease !important;
        z-index: 35 !important;
    }

    /* Collapsed: hide expandable elements */
    #bottom-nav .sidebar-show { display: none !important; }
    #bottom-nav .sidebar-footer { display: none !important; }

    /* Collapsed buttons: icon centered */
    #bottom-nav button {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 52px !important;
        height: auto !important;
        padding: 9px 6px !important;
        gap: 3px !important;
        border-radius: 14px !important;
        transition: background 0.15s, color 0.15s !important;
    }
    #bottom-nav button.hidden { display: none !important; }
    #bottom-nav button.text-brand-500 { background-color: rgba(77, 157, 173, 0.13) !important; }
    #bottom-nav button i { font-size: var(--fs-lg) !important; line-height: 1 !important; }
    #bottom-nav button span { font-size: var(--fs-3xs) !important; font-weight: 700 !important; line-height: 1 !important; }

    /* Hover: no expand ??stay fixed at 68px */
    #bottom-nav:hover { width: 68px !important; box-shadow: none !important; }
}

/* Dark mode nav rail */
.dark-theme #bottom-nav {
    background-color: #0f1a1c !important;
    border-right-color: rgba(255,255,255,0.08) !important;
}
.dark-theme #bottom-nav button.text-brand-500 {
    background-color: rgba(77, 157, 173, 0.18) !important;
}

/* Floating Action Panel override */
#floating-action-panel {
    position: fixed !important;
    right: 16px !important;
    bottom: 16px !important;
    gap: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    z-index: 50 !important;
}

body.modal-open #floating-action-panel {
    display: none !important;
}

@media (max-width: 839px) {
    #floating-action-panel {
        bottom: 53px !important;
        right: 16px !important;
    }
}


/* ?臾볦삋/??깅쵟 甕곌쑵??域밸챶竊?*/
#float-panel-btns {
    max-height: 0px;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.2s ease;
}

#floating-action-panel button {
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: unset !important;
    box-shadow: 0 2px 6px var(--tt-primary-shadow) !important;
}

#floating-action-panel #float-btn-write {
    background: var(--tt-primary-action) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 8px 18px var(--tt-primary-shadow) !important;
}

#floating-action-panel #float-btn-write:hover,
#floating-action-panel #float-btn-write:active {
    background: var(--tt-primary-action-hover) !important;
}

#floating-action-panel button span {
    font-size: var(--fs-3xs) !important;
    line-height: 10px !important;
}

#floating-action-panel button i {
    font-size: var(--fs-xs) !important;
}

/* View containers: no top padding so sub-tabs sit flush at top */
#view-sns-feed,
#view-edu-programs,
#view-guide-info,
#view-setting {
    padding: 0 16px 16px 16px !important;
}

/* ===== Sticky segmented control sub-tabs on feeds ===== */
#home-feed-tabs,
#edu-feed-tabs,
#info-feed-tabs {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
    margin: 0 -16px 4px -16px !important;
    padding: 0 16px 5px 16px !important;
    border-bottom: 1px solid #E2E8EC !important;
}

/* My Page sticky profile header */
#mypage-profile-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
    margin: 0 -16px 0 -16px !important;
}
/* the gray segmented track that holds the segments */
#home-feed-tabs .seg-track,
#edu-feed-tabs .seg-track,
#info-feed-tabs .seg-track {
    display: flex !important;
    gap: 4px !important;
    background-color: #EAF0F2 !important;
    border-radius: 12px !important;
    padding: 2px !important;
}
#home-feed-tabs .seg-track button,
#edu-feed-tabs .seg-track button,
#info-feed-tabs .seg-track button {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    font-size: var(--fs-xs) !important;
    line-height: 15px !important;
    padding: 4px 6px !important;
    height: auto !important;
    border: 0 !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    cursor: pointer;
}
/* Mobile: segments size to content + horizontal scroll (no truncation of labels) */
@media (max-width: 839px) {
    #home-feed-tabs .seg-track button,
    #edu-feed-tabs .seg-track button,
    #info-feed-tabs .seg-track button {
        flex: 1 1 0% !important;
        padding: 4px 6px !important;
    }
}
/* TOPIK subtab buttons: same 12px as other seg-track buttons */
#view-topik .seg-track button {
    font-size: var(--fs-xs) !important;
    padding: 4px 6px !important;
}

#view-topik > div.sticky {
    padding-top: 4px !important;
    padding-bottom: 2px !important;
}
/* TOPIK card body text: bumped up for readability across all 5 TOPIK subtabs */
#topik-subtab-guide .text-xs,
#topik-subtab-study-path .text-xs,
#topik-subtab-writing .text-xs      { font-size: var(--fs-base) !important; }

/* My Page sub-tabs: same style as feed seg-track but wraps to multiple rows */
.setting-seg-track {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    background-color: #EAF0F2 !important;
    border-radius: 12px !important;
    padding: 2px !important;
}

.setting-tab-row {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
}

.setting-group-switch {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-bottom: 3px !important;
}

.setting-seg-track .setting-group-switch button {
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 5px 10px !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: #475569 !important;
    border: 1px solid #dbe7ed !important;
    box-shadow: none !important;
}

.setting-seg-track .setting-group-switch button.active {
    background: #4d9dad !important;
    color: #ffffff !important;
    border-color: #4d9dad !important;
    box-shadow: 0 4px 12px rgba(77, 157, 173, 0.22) !important;
}

.setting-seg-track .setting-group-switch button.admin.active {
    background: #102238 !important;
    border-color: #102238 !important;
}

.setting-seg-track button {
    flex: 1 1 auto !important;
    min-width: max-content !important;
    font-size: var(--fs-xs) !important;
    line-height: 14px !important;
    padding: 4px 12px !important;
    border: 0 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-weight: 700 !important;
    color: #64748b !important;
    background: transparent !important;
    white-space: nowrap !important;
}
.setting-seg-track button.active-tab {
    background: #4d9dad !important;
    color: #ffffff !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.10) !important;
}
.setting-seg-track .admin-tab { color: #b45309 !important; }
.setting-seg-track .admin-tab.active-tab { background: #b45309 !important; color: #ffffff !important; }
.setting-tab-divider {
    width: 1px !important;
    align-self: stretch !important;
    background: #c0ced4 !important;
    margin: 2px 2px !important;
    border-radius: 1px !important;
    display: inline-block !important;
}
.dark-theme .setting-seg-track button { color: var(--tt-text-muted) !important; background-color: transparent !important; }
.dark-theme .setting-seg-track button.active-tab { background: #4D9DAD !important; color: #ffffff !important; }
.dark-theme .setting-tab-divider { background: #2a3f4f !important; }
.dark-theme .setting-seg-track .setting-group-switch button {
    background: var(--tt-bg-soft) !important;
    color: var(--tt-text-secondary) !important;
    border-color: var(--tt-border) !important;
}
.dark-theme .setting-seg-track .setting-group-switch button.active {
    background: #4d9dad !important;
    color: #ffffff !important;
    border-color: #4d9dad !important;
}
.dark-theme .setting-seg-track .setting-group-switch button.admin.active {
    background: #102238 !important;
    border-color: #33516f !important;
}

/* Dark theme: navy track */
.dark-theme #home-feed-tabs .seg-track,
.dark-theme #edu-feed-tabs .seg-track,
.dark-theme #info-feed-tabs .seg-track {
    background-color: var(--tt-surface) !important;
}

/* Admin console sub tabs locking */
#admin-sub-tabs {
    gap: 4px !important;
    padding: 2px !important;
    border-radius: 8px !important;
}

#admin-sub-tabs button {
    font-size: var(--fs-xs) !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    border-radius: 6px !important;
}

/* My Page sub tabs locking */
#mypage-sub-tabs {
    gap: 4px !important;
    padding: 2px !important;
    border-radius: 8px !important;
}

#mypage-sub-tabs button {
    font-size: var(--fs-xs) !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    border-radius: 6px !important;
}

/* Modals & Overlay Stacking Controls */
#comment-detail-modal,
#post-modal,
#auth-modal,
#info-modal,
#admin-change-modal,
#edu-apply-modal,
#admin-program-modal {
    z-index: var(--z-modal) !important;
}

/* post-modal ?꾩뿉 ?좎빞 ?섎뒗 ?섏쐞 ?뺤씤李?*/
#draft-prompt-modal {
    z-index: var(--z-modal-priority) !important;
}

#toast-container {
    z-index: var(--z-toast) !important;
}

.dark-theme #toast-container > div {
    background-color: var(--tt-surface-raised) !important;
    color: #F3F4F6 !important;
    border-color: rgba(77, 157, 173, 0.3) !important;
}

.dark-theme #toast-container > div.border-rose-500\/30 {
    border-color: rgba(239, 68, 68, 0.4) !important;
}

/* Dark theme overrides for warning masks (amber = analogous to teal) */
.dark-theme .text-amber-600,
.dark-theme .text-amber-700,
.dark-theme .text-rose-600 {
    color: #f59e0b !important;
}
.dark-theme .bg-amber-50,
.dark-theme .bg-rose-50 {
    background-color: rgba(245, 158, 11, 0.1) !important;
}
.dark-theme .bg-amber-50\/50 {
    background-color: rgba(245, 158, 11, 0.08) !important;
}
.dark-theme .border-amber-100,
.dark-theme .border-amber-200,
.dark-theme .border-rose-100 {
    border-color: rgba(245, 158, 11, 0.25) !important;
}
.dark-theme .bg-amber-100 {
    background-color: rgba(245, 158, 11, 0.14) !important;
}

/* Brand-100/50 badges & operation buttons in dark mode */
.dark-theme .bg-brand-100 {
    background-color: rgba(77, 157, 173, 0.18) !important;
}
.dark-theme .bg-brand-50 {
    background-color: rgba(77, 157, 173, 0.10) !important;
}
.dark-theme .text-brand-700,
.dark-theme .text-brand-800 {
    color: #7dc4ce !important;
}
.dark-theme .hover\:bg-brand-200:hover {
    background-color: rgba(77, 157, 173, 0.28) !important;
}

/* Admin action buttons (??곸젫/Unmask = emerald, ????Delete = red) ??translucent in dark
   so they match the orange Mask button instead of glowing as bright pastel pills */
.dark-theme .bg-emerald-50 {
    background-color: rgba(16, 185, 129, 0.14) !important;
}
.dark-theme .text-emerald-600 {
    color: #34D399 !important;
}
.dark-theme .border-emerald-200 {
    border-color: rgba(16, 185, 129, 0.35) !important;
}
.dark-theme .hover\:bg-emerald-100:hover {
    background-color: rgba(16, 185, 129, 0.22) !important;
}
.dark-theme .bg-red-50 {
    background-color: rgba(239, 68, 68, 0.14) !important;
}
.dark-theme .text-red-500 {
    color: #F87171 !important;
}
.dark-theme .border-red-200 {
    border-color: rgba(239, 68, 68, 0.35) !important;
}
.dark-theme .hover\:bg-red-100:hover {
    background-color: rgba(239, 68, 68, 0.22) !important;
}

/* Additional Dark Theme Overrides for V26, Alerts, and Custom Typography classes */
.dark-theme .bg-\[\#F7FAFB\]\/95,
.dark-theme .bg-\[\#EEF2F7\]\/95 {
    background-color: rgba(14, 26, 43, 0.95) !important;
}

.dark-theme .bg-slate-50\/40,
.dark-theme .bg-slate-50\/50,
.dark-theme .bg-slate-50\/60,
.dark-theme .bg-slate-50\/70,
.dark-theme .bg-slate-50\/80,
.dark-theme .bg-slate-50\/90 {
    background-color: var(--tt-surface-raised) !important;
}

.dark-theme .bg-slate-150,
.dark-theme .bg-slate-200 {
    background-color: var(--tt-surface-raised) !important;
}

.dark-theme .bg-white\/80,
.dark-theme .bg-white\/90 {
    background-color: rgba(22, 39, 62, 0.8) !important;
}

.dark-theme .text-slate-550,
.dark-theme .text-slate-505,
.dark-theme .text-slate-450 {
    color: #9CA3AF !important;
}

.dark-theme .text-slate-850 {
    color: #F3F4F6 !important;
}

.dark-theme .text-slate-900,
.dark-theme .text-slate-950 {
    color: #FFFFFF !important;
}

/* Warnings and appeal alert overrides in dark mode */
.dark-theme .bg-rose-50\/50 {
    background-color: rgba(245, 158, 11, 0.08) !important;
}

.dark-theme .text-rose-800,
.dark-theme .text-rose-500 {
    color: #f59e0b !important;
}

.dark-theme .border-rose-200 {
    border-color: rgba(245, 158, 11, 0.25) !important;
}

/* Amber/yellow appeal alert overrides in dark mode */
.dark-theme .bg-amber-50,
.dark-theme .bg-amber-50\/50,
.dark-theme .bg-amber-100 {
    background-color: rgba(245, 158, 11, 0.15) !important;
}

.dark-theme .border-amber-100,
.dark-theme .border-amber-200 {
    border-color: rgba(245, 158, 11, 0.3) !important;
}

.dark-theme .text-amber-600,
.dark-theme .text-amber-700,
.dark-theme .text-amber-800 {
    color: #FBBF24 !important;
}

/* Border overlays with opacities */
.dark-theme .border-slate-100\/80,
.dark-theme .border-slate-150\/80,
.dark-theme .border-slate-200\/60,
.dark-theme .border-slate-200\/80,
.dark-theme .border-slate-205 {
    border-color: rgba(50, 72, 106, 0.6) !important;
}

.dark-theme .border-slate-800\/60,
.dark-theme .border-slate-800\/80,
.dark-theme .border-slate-850\/40,
.dark-theme .border-slate-850\/50,
.dark-theme .border-slate-900 {
    border-color: var(--tt-border) !important;
}

.dark-theme .bg-brand-600\/10,
.dark-theme .bg-brand-600\/20 {
    background-color: rgba(77, 157, 173, 0.15) !important;
}

.dark-theme .bg-brand-950\/20 {
    background-color: rgba(77, 157, 173, 0.1) !important;
}

/* Fix active sidebar tab background */
.dark-theme .bg-brand-50\/60 {
    background-color: rgba(77, 157, 173, 0.15) !important;
}

/* Fix active status badge bg */
.dark-theme .bg-rose-100 {
    background-color: rgba(245, 158, 11, 0.14) !important;
}

/* Fix console logs hover state */
.dark-theme .hover\:bg-slate-150:hover {
    background-color: var(--tt-surface-raised) !important;
}

/* Dark mode overrides for language menu selection */
.dark-theme .bg-brand-50 {
    background-color: rgba(77, 157, 173, 0.2) !important;
    color: #6BBAC6 !important;
}
.dark-theme #lang-dropdown-btn {
    background-color: var(--tt-surface-raised) !important;
    border-color: var(--tt-border) !important;
    color: #F3F4F6 !important;
}
.dark-theme #sidebar-lang-dropdown-btn {
    background-color: var(--tt-surface) !important;
    border-color: var(--tt-border) !important;
    color: #9CA3AF !important;
}
.dark-theme #lang-dropdown-menu,
.dark-theme #sidebar-lang-dropdown-menu {
    background-color: var(--tt-surface) !important;
    border-color: var(--tt-border) !important;
}

/* Active/inactive segmented sub-tabs for Home / Edu / Info feeds (dark) */
.dark-theme #home-feed-tabs .seg-track button,
.dark-theme #edu-feed-tabs .seg-track button,
.dark-theme #info-feed-tabs .seg-track button {
    background-color: transparent !important;
    border: 0 !important;
}
.dark-theme #home-feed-tabs .seg-track button:hover,
.dark-theme #edu-feed-tabs .seg-track button:hover,
.dark-theme #info-feed-tabs .seg-track button:hover {
    color: var(--tt-text-secondary) !important;
}
/* active segment keeps the teal fill */
.dark-theme #home-feed-tabs .seg-track button.bg-brand-500,
.dark-theme #edu-feed-tabs .seg-track button.bg-brand-500,
.dark-theme #info-feed-tabs .seg-track button.bg-brand-500 {
    color: #FFFFFF !important;
}

/* Subtabs for Admin Dashboard and My Page */
.dark-theme #mypage-sub-tabs,
.dark-theme #admin-sub-tabs {
    background-color: var(--tt-bg-soft) !important;
}
.dark-theme #mypage-sub-tabs button,
.dark-theme #admin-sub-tabs button {
    color: #9CA3AF !important;
}
.dark-theme #mypage-sub-tabs button.bg-white,
.dark-theme #admin-sub-tabs button.bg-white {
    background-color: var(--tt-surface-raised) !important;
    color: #6BBAC6 !important;
}

/* Real green terminal style for Console Logs */
.dark-theme #admin-log-console {
    background-color: var(--tt-bg-soft) !important;
    border-color: var(--tt-border) !important;
    color: #10B981 !important;
}
.dark-theme #admin-log-console .log-item-row:hover {
    background-color: rgba(16, 185, 129, 0.1) !important;
}

/* Newsletter Subscriber List contrast and dividers */
.dark-theme #admin-subscribers-list {
    background-color: var(--tt-bg-soft) !important;
    border-color: var(--tt-border) !important;
}
.dark-theme #admin-subscribers-list div {
    border-color: var(--tt-border) !important;
}

/* Platform Guidelines card opacity and paragraph contrast */
.dark-theme #view-guide-info .opacity-85 {
    opacity: 1 !important;
}
.dark-theme #info-guide-collapse p {
    color: #D1D5DB !important;
}
.dark-theme #info-guide-collapse .bg-\[\#F7FAFB\] {
    background-color: var(--tt-surface) !important;
    border-color: var(--tt-border) !important;
}

/* Mask Management items outer/inner container contrast */
.dark-theme #admin-masks-list .bg-white {
    background-color: var(--tt-bg-soft) !important;
}
.dark-theme #admin-masks-list .bg-slate-50\/60 {
    background-color: var(--tt-surface-raised) !important;
}

/* ===== DESKTOP LAYOUT FIXES ===== */

/* ??롫뼊??? ?怨쀫뮞??源숈쮯筌뤴뫀而???⑤벏???紐꾪뀱 (#bottom-nav ??? ??볤탢) */

/* ===== COLLAPSIBLE LEFT SIDEBAR ===== */
@media (min-width: 840px) and (min-aspect-ratio: 1/1) {
    #sidebar-left {
        width: 4.5rem;
        min-width: 4.5rem;
        transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                    min-width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        overflow: hidden;
    }
    #sidebar-left:hover {
        width: 15rem;
        min-width: 15rem;
    }

    /* Text labels hidden when collapsed */
    .sidebar-label {
        opacity: 0;
        max-width: 0;
        overflow: hidden;
        white-space: nowrap;
        display: inline-block;
        transition: opacity 0.15s, max-width 0.2s;
        pointer-events: none;
    }
    #sidebar-left:hover .sidebar-label {
        opacity: 1;
        max-width: 11rem;
        pointer-events: auto;
        transition: opacity 0.2s 0.06s, max-width 0.22s;
    }

    /* Nav buttons: center icon when collapsed, align left when expanded */
    .sidebar-nav-btn {
        justify-content: center !important;
        gap: 0 !important;
    }
    #sidebar-left:hover .sidebar-nav-btn {
        justify-content: flex-start !important;
        gap: 0.75rem !important;
    }

    /* Logo text: hidden when collapsed */
    .sidebar-logo-text {
        max-width: 0;
        overflow: hidden;
        opacity: 0;
        white-space: nowrap;
        transition: opacity 0.15s, max-width 0.2s;
    }
    #sidebar-left:hover .sidebar-logo-text {
        max-width: 12rem;
        opacity: 1;
        transition: opacity 0.2s 0.06s, max-width 0.22s;
    }

    /* Sidebar footer: hidden when collapsed */
    .sidebar-footer-content {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: opacity 0.15s, max-height 0.25s;
    }
    #sidebar-left:hover .sidebar-footer-content {
        max-height: 400px;
        opacity: 1;
        transition: opacity 0.2s 0.1s, max-height 0.28s;
    }

    /* Feed content: 13px base on desktop */
    #feed-list,
    #edu-feed-list {
        font-size: var(--fs-base);
    }
    #feed-list .thread-text,
    #feed-list p,
    #edu-feed-list .thread-text,
    #edu-feed-list p {
        font-size: var(--fs-xs);
    }
}

/* Dark theme: sidebar-right removed, update dark bg reference */
.dark-theme #sidebar-right {
    display: none !important;
}

/* ===== BRAND NAVY (logo secondary accent) ===== */
/* Navy heading text reads as dark navy in light mode; lift to soft white on dark navy bg */
.dark-theme .text-navy-700,
.dark-theme .text-navy-600,
.dark-theme .text-navy-500 {
    color: #E3E9F2 !important;
}
.dark-theme .text-navy-300 {
    color: #8298BC !important;
}
/* Navy surfaces/borders in dark mode */
.dark-theme .bg-navy-50,
.dark-theme .bg-navy-100 {
    background-color: rgba(58, 90, 133, 0.18) !important;
}
.dark-theme .border-navy-100,
.dark-theme .border-navy-200 {
    border-color: rgba(58, 90, 133, 0.40) !important;
}

/* Desktop: navy-tinted backdrop frames the teal app panel (light mode only) */
@media (min-width: 840px) and (min-aspect-ratio: 1/1) {
    html:not(.dark-theme) body {
        background-color: #E7EDF4 !important;
    }
}

/* ===== UNIFIED TOP NAVIGATION BAR (centered single-column layout) ===== */
#top-nav {
    /* font-zoom only scales #main-content-area, so the nav stays fixed-size */
}
#top-nav-tabs {
    border-top: 1px solid rgba(148, 163, 184, 0.18);
}
#top-nav-tabs .nav-tab {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 16px;
    font-size: var(--fs-base);
    font-weight: 800;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    background: transparent !important; /* ??뽯땾 獄쏅쵐夷??????튋 獄쏄퀗瑗???볤탢 */
    border-radius: 0 !important;
    transition: color 0.15s, border-color 0.15s;
    cursor: pointer;
}
#top-nav-tabs .nav-tab i {
    font-size: var(--fs-base);
}
/* Active tab: teal text + teal underline (switchTab toggles .text-brand-600 on sidebar-tab-btn-*) */
#top-nav-tabs .nav-tab.text-brand-600 {
    color: #3D8696;
    border-bottom-color: #4D9DAD;
}
#top-nav-tabs .nav-tab.text-slate-500:hover {
    color: #2E6B79;
}

/* Dark theme: top nav surface + muted inactive tabs */
.dark-theme #top-nav {
    background-color: rgba(22, 39, 62, 0.92) !important;
    border-color: #2A3F5F !important;
}
.dark-theme #top-nav-tabs {
    border-top-color: rgba(130, 152, 188, 0.20);
}
.dark-theme #top-nav-tabs .nav-tab.text-slate-500 {
    color: #7E93B0 !important;
}
.dark-theme #top-nav-tabs .nav-tab.text-slate-500:hover {
    color: var(--tt-text-secondary) !important;
}
.dark-theme #top-nav-tabs .nav-tab.text-brand-600 {
    color: #6BBAC6 !important;
    border-bottom-color: #6BBAC6 !important;
}




/* (?쒓굅??2026-07-09) RETRO ?듭떊 紐⑤뱶 ?뚮쭏 ??toggleRetro() ?몄텧泥섍? ?놁뼱 二쎌? 肄붾뱶?€??
   :not(.retro-theme) ?€?됲꽣 719怨노룄 媛숈? ???쒓굅?? ?대븣 ?뱀씠?깆씠 ???④퀎 ??븘吏€硫?
   援ъ떇 ?섎뱶肄붾뵫 ?ㅽ겕 洹쒖튃??吏€寃???吏€?먮뱾?€ ?щЦ 洹쒖튃 ??젣(26嫄??€ ?뚯씪 留먮???
   '?덇굅???ㅽ겕 罹먯뒪耳€?대뱶 留덇컧' 釉붾줉?쇰줈 ?먮옒 ?뚮뜑瑜?蹂댁〈?덈떎. */

/* ===== MY PAGE WITHDRAWAL VISIBILITY ===== */
#mypage-withdrawal-detail-card {
    box-shadow: 0 10px 22px rgba(244, 63, 94, 0.10) !important;
}

#mypage-withdrawal-detail-card button {
    min-height: 42px !important;
}

#withdrawal-modal {
    padding: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
}

#withdrawal-modal-content {
    max-height: calc(100dvh - 32px - env(safe-area-inset-bottom));
    overflow-y: auto;
}

html.layout-mobile #withdrawal-modal {
    align-items: flex-end !important;
    padding: 16px 16px calc(76px + env(safe-area-inset-bottom)) !important;
}

html.layout-mobile #withdrawal-modal-content {
    max-height: calc(100dvh - 92px - env(safe-area-inset-bottom));
}

.dark-theme #mypage-withdrawal-detail-card {
    background-color: rgba(159, 18, 57, 0.18) !important;
    border-color: rgba(251, 113, 133, 0.45) !important;
}

.dark-theme #mypage-withdrawal-detail-card,
.dark-theme #mypage-withdrawal-detail-card li {
    color: #fecdd3 !important;
}

.dark-theme #mypage-withdrawal-detail-card button {
    background-color: #e11d48 !important;
    color: #ffffff !important;
}

/* ===== MOBILE UX TOUCH TARGET TUNING ===== */
@media (max-width: 839px) {
    #mobile-topbar {
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }

    #home-feed-tabs .seg-track button,
    #edu-feed-tabs .seg-track button,
    #info-feed-tabs .seg-track button,
    #view-topik .seg-track button,
    #mobile-topbar #lang-dropdown-btn,
    #mobile-topbar #auth-panel button {
        height: 32px !important;
        min-height: 32px !important;
    }

    #home-feed-tabs .seg-track button,
    #edu-feed-tabs .seg-track button,
    #info-feed-tabs .seg-track button {
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }

    #main-content-area > div.overflow-y-auto {
        padding-bottom: 68px !important;
    }

    #floating-action-panel {
        bottom: calc(48px + env(safe-area-inset-bottom)) !important;
    }
}

/* ===== FEED CARD READABILITY AND ACTION TARGETS ===== */
#feed-list > div[id^="thread-"] {
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
    transform: none !important;
}

#feed-list > div[id^="thread-"]:hover {
    transform: none !important;
}

/* Keep feed text stable while the mouse passes over cards. */
#feed-list > div[id^="thread-"] p,
#my-feed-list > div p,
#edu-feed-list > div p {
    backface-visibility: hidden;
}

/* ===== COMMUNITY FEED CARD POLISH ===== */
html:not(.dark-theme) body #feed-list {
    gap: 14px !important;
}

html:not(.dark-theme) body #feed-list > div[id^="thread-"] {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: rgba(226, 232, 240, 0.95) !important;
    padding: 18px !important;
}

.dark-theme #feed-list > div[id^="thread-"] {
    background: rgba(22, 39, 62, 0.96) !important;
    border-color: rgba(50, 72, 106, 0.72) !important;
}

#feed-list > div[id^="thread-"] > div:first-child {
    align-items: flex-start !important;
    gap: 12px !important;
}

#feed-list > div[id^="thread-"] > div:first-child .rounded-full {
    box-shadow: inset 0 0 0 1px rgba(44, 138, 158, 0.08);
}

#feed-list > div[id^="thread-"] p {
    font-size: var(--fs-xs) !important;
    line-height: 1.45 !important;
}

#feed-list > div[id^="thread-"] p.thread-body-clamp {
    font-size: var(--fs-feed-body) !important;
}

/* ?쇰뱶 蹂몃Ц?€ 湲곕낯 8以꾧퉴吏€留?蹂댁뿬二쇨퀬, ?ㅼ젣濡??섏튌 ?뚮쭔 "?꾩껜蹂닿린" 踰꾪듉???몄텧?쒕떎 (app-feed.js initThreadBodyClamp) */
.thread-body-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.thread-body-clamp.expanded {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}

.totalk-paragraph-gap {
    display: block;
    height: 0.5em;
}

#feed-list > div[id^="thread-"] a[href^="http"] {
    word-break: break-word !important;
}

#feed-list > div[id^="thread-"] a.bg-slate-50\/90,
#feed-list > div[id^="thread-"] div.bg-slate-50\/80 {
    border-radius: 14px !important;
    border-color: rgba(226, 232, 240, 0.9) !important;
    margin-top: 2px !important;
}

.dark-theme #feed-list > div[id^="thread-"] a.bg-slate-50\/90,
.dark-theme #feed-list > div[id^="thread-"] div.bg-slate-50\/80 {
    background: rgba(33, 51, 82, 0.58) !important;
    border-color: rgba(50, 72, 106, 0.72) !important;
}

#feed-list > div[id^="thread-"] > div:last-child {
    border-top-color: rgba(226, 232, 240, 0.78) !important;
    margin-top: 4px !important;
}

.dark-theme #feed-list > div[id^="thread-"] > div:last-child {
    border-top-color: rgba(50, 72, 106, 0.72) !important;
}

#feed-list > div[id^="thread-"] button[onclick^="requestConnectionByHandle"] {
    min-height: 28px !important;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    font-size: var(--fs-2xs) !important;
    line-height: 1 !important;
}

@media (max-width: 839px) {
    #feed-list {
        padding-left: 2px !important;
        padding-right: 2px !important;
    }

    /* 모바일 카드 간격과 카드 하단 여백을 한 번 더 압축한다. */
    #feed-list > * + * {
        margin-top: 5px !important;
    }

    #feed-list > div[id^="thread-"] {
        padding: 14px 16px 7px !important;
        border-radius: 16px !important;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
    }

    #feed-list > div[id^="thread-"] p {
        font-size: var(--fs-xs) !important;
        line-height: 1.45 !important;
    }

    #feed-list > div[id^="thread-"] > div:last-child {
        justify-content: space-between !important;
        gap: 4px !important;
        margin-top: 2px !important;
        padding-top: 2px !important;
        border-top: 0 !important;
    }

    #feed-list > div[id^="thread-"] button[data-click^="likeThread"],
    #feed-list > div[id^="thread-"] button[data-click^="openCommentModal"],
    #feed-list > div[id^="thread-"] button[data-click^="openQuoteModal"],
    #feed-list > div[id^="thread-"] button[data-click^="reportThread"],
    #feed-list > div[id^="thread-"] button[data-click^="openShareModal"] {
        min-width: 42px !important;
        min-height: 42px !important;
        padding: 8px !important;
    }

    #feed-list > div[id^="thread-"] a.bg-slate-50\/90 {
        gap: 10px !important;
    }
}

#feed-list > div[id^="thread-"] > div:last-child,
#comment-modal-original-post > div > div:last-child {
    gap: 8px !important;
}

#feed-list > div[id^="thread-"] button[data-click^="likeThread"],
#feed-list > div[id^="thread-"] button[data-click^="openCommentModal"],
#feed-list > div[id^="thread-"] button[data-click^="openQuoteModal"],
#feed-list > div[id^="thread-"] button[data-click^="reportThread"],
#feed-list > div[id^="thread-"] button[data-click^="openShareModal"],
#comment-modal-original-post button[data-click^="likeThread"],
#comment-modal-original-post button[data-click^="reportThread"] {
    min-width: 40px !important;
    min-height: 36px !important;
    padding: 7px 9px !important;
    border-radius: 10px !important;
    justify-content: center !important;
}

#feed-list > div[id^="thread-"] button[data-click^="likeThread"]:hover,
#feed-list > div[id^="thread-"] button[data-click^="openCommentModal"]:hover,
#feed-list > div[id^="thread-"] button[data-click^="openQuoteModal"]:hover,
#feed-list > div[id^="thread-"] button[data-click^="reportThread"]:hover,
#feed-list > div[id^="thread-"] button[data-click^="openShareModal"]:hover,
#comment-modal-original-post button[data-click^="likeThread"]:hover,
#comment-modal-original-post button[data-click^="reportThread"]:hover {
    background-color: rgba(77, 157, 173, 0.10) !important;
}

@media (max-width: 839px) {
    /* 모바일 하단 여백은 7px, 액션행 구분선은 표시하지 않는다. */
    #feed-list > div[id^="thread-"] {
        padding: 14px 16px 7px !important;
        border-radius: 18px !important;
    }

    #feed-list > div[id^="thread-"] > div:last-child {
        padding-top: 4px !important;
        border-top: 0 !important;
    }

    #feed-list > div[id^="thread-"] button[data-click^="likeThread"],
    #feed-list > div[id^="thread-"] button[data-click^="openCommentModal"],
    #feed-list > div[id^="thread-"] button[data-click^="openQuoteModal"],
    #feed-list > div[id^="thread-"] button[data-click^="reportThread"],
    #feed-list > div[id^="thread-"] button[data-click^="openShareModal"] {
        min-height: 36px !important;
        padding: 6px 9px !important;
    }

    #ts-filter-tabs button,
    #ts-exam-list button[onclick^="ts_toggleBm"],
    #ts-exam-list a[target="_blank"],
    #edu-feed-list button[onclick*="openEduApplyModal"],
    #edu-feed-list button[onclick*="openShareModal"] {
        min-height: 40px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #ts-filter-tabs button {
        padding: 8px 12px !important;
    }

    #ts-exam-list button[onclick^="ts_toggleBm"],
    #edu-feed-list button[onclick*="openShareModal"] {
        min-width: 40px !important;
    }
}

/* ===== STEP 3 FINAL NAV/TAB OVERRIDES ===== */
@media (max-width: 839px) {
    html.layout-mobile #content-column {
        padding-bottom: 52px !important;
    }

    html.layout-mobile #bottom-nav {
        height: calc(48px + env(safe-area-inset-bottom)) !important;
        padding: 3px 8px env(safe-area-inset-bottom) !important;
        background: rgba(255, 255, 255, 0.96) !important;
        border-top: 1px solid rgba(226, 232, 240, 0.9) !important;
        box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.06) !important;
    }

    html.layout-mobile #bottom-nav button:not(.rounded-full) {
        min-height: 42px !important;
        border-radius: 14px !important;
        color: var(--tt-text-muted) !important;
    }

    html.layout-mobile #bottom-nav button.text-brand-500:not(.rounded-full) {
        background: var(--tt-primary-soft) !important;
        color: var(--tt-primary) !important;
    }

    html.layout-mobile #bottom-nav button i {
        font-size: var(--fs-lg) !important;
    }

    html.layout-mobile #bottom-nav button span {
        font-size: var(--fs-3xs) !important;
        line-height: 1.1 !important;
    }

    html.layout-mobile #bottom-nav button.rounded-full {
        flex: 0 0 36px !important;
        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
        border-radius: 9999px !important;
    }
}

html.layout-desktop #bottom-nav button.text-brand-500 {
    background: var(--tt-primary-soft) !important;
    color: var(--tt-primary) !important;
}

body #home-feed-tabs .seg-track,
body #edu-feed-tabs .seg-track,
body #info-feed-tabs .seg-track {
    border: 1px solid rgba(226, 232, 240, 0.88) !important;
    background: rgba(238, 245, 247, 0.96) !important;
}

body #home-feed-tabs .seg-track button,
body #edu-feed-tabs .seg-track button,
body #info-feed-tabs .seg-track button {
    min-height: 30px !important;
    border-radius: 8px !important;
}

/* ===== STEP 4 TOPIK / ARCHIVE / EDUCATION CARD POLISH ===== */
body #view-topik .seg-track {
    background: rgba(238, 245, 247, 0.96) !important;
    border: 1px solid rgba(226, 232, 240, 0.88) !important;
    border-radius: 12px !important;
    padding: 2px !important;
}

body #view-topik > .sticky {
    background: var(--tt-bg) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.78) !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04) !important;
}

body #view-topik .seg-track button {
    min-height: 30px !important;
    border-radius: 8px !important;
    color: var(--tt-text-muted) !important;
}

body #view-topik .seg-track button.bg-white,
body #view-topik .seg-track button.bg-brand-500 {
    background: var(--tt-primary-action) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px var(--tt-primary-shadow) !important;
}

body #ts-next-exam-card {
    background: linear-gradient(135deg, var(--tt-primary-action), var(--tt-primary-action-hover)) !important;
    border-radius: 18px !important;
    box-shadow: 0 12px 30px var(--tt-primary-shadow) !important;
}

body #ts-dday-badge,
body #ts-exam-list span.text-red-500 {
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
    background: var(--tt-accent) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 3px 7px !important;
    font-size: var(--fs-2xs) !important;
    line-height: 1.1 !important;
}

body #ts-filter-tabs {
    gap: 6px !important;
}

body #ts-filter-tabs button {
    min-height: 34px !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    padding: 7px 12px !important;
}

body #ts-filter-tabs button.ts-filter-active {
    background: var(--tt-primary-soft) !important;
    border-color: var(--tt-primary-border) !important;
    color: var(--tt-primary) !important;
}

body #ts-exam-list > div,
body #ta-list > div,
body #edu-feed-list > div {
    background: rgba(255, 255, 255, 0.97) !important;
    border-color: rgba(226, 232, 240, 0.96) !important;
    border-radius: 16px !important;
    box-shadow: var(--tt-shadow-card) !important;
}

body #ts-exam-list > div {
    overflow: hidden !important;
}

body #ts-exam-list > div > div:first-child,
body #ta-list > div > div:last-child {
    border-color: rgba(226, 232, 240, 0.82) !important;
}

body #ts-exam-list .grid,
body #edu-feed-list .bg-slate-50 {
    background: rgba(238, 245, 247, 0.72) !important;
    border-color: rgba(226, 232, 240, 0.9) !important;
}

body #ts-exam-list a[href*="topik.go.kr"],
body #ta-list a[href],
body #edu-feed-list button[onclick*="openEduApplyModal"] {
    border-radius: var(--tt-radius-control) !important;
    min-height: 38px !important;
}

body #ta-list > div {
    padding: 14px !important;
    gap: 10px !important;
}

body #ta-list .bg-brand-50 {
    background: var(--tt-primary-soft) !important;
}

body #ta-list span[class*="rounded-md"] {
    border-radius: 999px !important;
    padding: 4px 8px !important;
}

body #info-subtab-archive .ta-cat-btn {
    min-height: 32px !important;
    border-radius: 999px !important;
    padding: 6px 10px !important;
}

body #info-subtab-archive .ta-cat-btn.ta-cat-active {
    background: var(--tt-primary-action) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px var(--tt-primary-shadow) !important;
}

body #edu-feed-list > div {
    overflow: hidden !important;
}

body #edu-feed-list > div > div:first-child {
    padding-top: 16px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.72) !important;
}

body #edu-feed-list h3 {
    font-size: var(--fs-base) !important;
    line-height: 1.42 !important;
}

body #edu-feed-list p {
    line-height: 1.62 !important;
}

body #edu-feed-list button[onclick*="openEduApplyModal"] {
    box-shadow: 0 8px 18px var(--tt-primary-shadow) !important;
}

body #edu-feed-list button[onclick*="openShareModal"],
body #edu-feed-list a[title="자료 다운로드"] {
    width: 40px !important;
    height: 40px !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
}

body .infoboard-post-image-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
}

body .infoboard-post-image {
    display: block !important;
    width: 100% !important;
    max-width: min(100%, 920px) !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    background: #ffffff !important;
}

body #info-subtab-archive .infoboard-post-image {
    max-width: min(100%, 860px) !important;
}

/* Unified TOPIK tab surfaces */
body #info-subtab-archive,
body #topik-subtab-writing {
    color: var(--tt-text) !important;
}

body .topik-consistent-panel {
    max-width: 980px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body #topik-subtab-schedule,
body #topik-subtab-guide {
    max-width: 980px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body .topik-section-hero {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 18px !important;
    padding: 18px 18px 20px !important;
    background: linear-gradient(135deg, var(--tt-primary-action), var(--tt-primary-action-hover)) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 30px var(--tt-primary-shadow) !important;
}

body .topik-section-hero::after {
    content: "" !important;
    position: absolute !important;
    right: -26px !important;
    top: -30px !important;
    width: 120px !important;
    height: 120px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.12) !important;
}

body .topik-section-kicker {
    position: relative !important;
    z-index: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 5px 9px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.16) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    font-size: var(--fs-3xs) !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
}

body .topik-section-hero h2 {
    position: relative !important;
    z-index: 1 !important;
    margin: 12px 0 6px !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    font-size: var(--fs-xl) !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
}

body .topik-section-hero p {
    position: relative !important;
    z-index: 1 !important;
    max-width: 680px !important;
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.82) !important;
    font-size: var(--fs-sm) !important;
    line-height: 1.55 !important;
}

body #info-subtab-archive > .flex.items-center.justify-between {
    background: #ffffff !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    border-radius: 16px !important;
    padding: 14px 16px !important;
    margin-top: 14px !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04) !important;
}

body #topik-subtab-writing .topik-notice-card,
body #topik-subtab-writing .bg-white.border {
    border-color: rgba(226, 232, 240, 0.9) !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05) !important;
}

body #writing-essay-input {
    min-height: 220px !important;
    line-height: 1.7 !important;
}

/* Unified OnEdu tab surfaces */
body #view-edu-programs {
    color: var(--tt-text) !important;
}

body .edu-consistent-panel {
    max-width: 980px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
}

body .edu-section-hero {
    position: relative !important;
    overflow: hidden !important;
    margin-top: 14px !important;
    margin-bottom: 14px !important;
    border-radius: 18px !important;
    padding: 18px 18px 20px !important;
    background: linear-gradient(135deg, var(--tt-primary-action), var(--tt-primary-action-hover)) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 30px var(--tt-primary-shadow) !important;
}

body .edu-section-hero::after {
    content: "" !important;
    position: absolute !important;
    right: -28px !important;
    top: -32px !important;
    width: 124px !important;
    height: 124px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.12) !important;
}

body .edu-section-kicker {
    position: relative !important;
    z-index: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 5px 9px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.16) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    font-size: var(--fs-3xs) !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
}

body .edu-section-hero h2 {
    position: relative !important;
    z-index: 1 !important;
    margin: 12px 0 6px !important;
    font-size: var(--fs-xl) !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
}

/* '온라인' 접두 라벨 — 제목보다 작고 은은하게 */
body .edu-section-hero h2 .edu-hero-online {
    font-size: 0.55em !important;
    font-weight: 700 !important;
    opacity: 0.8 !important;
    vertical-align: middle !important;
    margin-right: 2px !important;
    display: inline-block !important;
}

body .edu-section-hero p {
    position: relative !important;
    z-index: 1 !important;
    max-width: 680px !important;
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.84) !important;
    font-size: var(--fs-sm) !important;
    line-height: 1.55 !important;
}

/* Unified info. tab surfaces */
body #view-guide-info {
    color: var(--tt-text) !important;
}

body #info-subtab-about,
body #info-subtab-korea,
body .info-consistent-panel {
    max-width: 980px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
}

body #info-subtab-about > .relative:first-child,
body #info-subtab-korea > .relative:first-child,
body .info-section-hero {
    position: relative !important;
    overflow: hidden !important;
    margin-top: 14px !important;
    border-radius: 18px !important;
    padding: 18px 18px 20px !important;
    background: linear-gradient(135deg, var(--tt-primary-action), var(--tt-primary-action-hover)) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 30px var(--tt-primary-shadow) !important;
}

body .info-section-hero::after {
    content: "" !important;
    position: absolute !important;
    right: -26px !important;
    top: -30px !important;
    width: 120px !important;
    height: 120px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.12) !important;
}

body .info-section-kicker {
    position: relative !important;
    z-index: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 5px 9px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.16) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    font-size: var(--fs-3xs) !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
}

body .info-section-hero h2 {
    position: relative !important;
    z-index: 1 !important;
    margin: 12px 0 6px !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    font-size: var(--fs-xl) !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
}

body .info-section-hero p {
    position: relative !important;
    z-index: 1 !important;
    max-width: 680px !important;
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.82) !important;
    font-size: var(--fs-sm) !important;
    line-height: 1.55 !important;
}

body .info-consistent-panel > .flex.items-center.justify-between {
    background: #ffffff !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    border-radius: 16px !important;
    padding: 14px 16px !important;
    margin-top: 14px !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04) !important;
}

body #info-subtab-about .bg-white,
body #info-subtab-korea .bg-white {
    border-color: rgba(226, 232, 240, 0.9) !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05) !important;
}

@media (max-width: 839px) {
    body #ts-exam-list {
        padding-left: 2px !important;
        padding-right: 2px !important;
    }

    body #ts-exam-list .grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    body #ta-list > div,
    body #edu-feed-list > div {
        border-radius: 16px !important;
    }
}

/* ===== STEP 6 MODAL / FORM VISUAL POLISH ===== */
body #post-modal,
body #auth-modal,
body #comment-detail-modal,
body #admin-change-modal,
body #edu-apply-modal,
body #admin-program-modal,
body #info-modal,
body #privacy-modal,
body #share-modal,
body #withdrawal-modal,
body #infoboard-modal {
    background-color: rgba(15, 23, 42, 0.48) !important;
    backdrop-filter: blur(10px) !important;
}

html:not(.dark-theme) body #post-modal-content,
html:not(.dark-theme) body #auth-modal-content,
html:not(.dark-theme) body #comment-detail-modal-content,
html:not(.dark-theme) body #admin-change-modal-content,
html:not(.dark-theme) body #edu-apply-modal-content,
html:not(.dark-theme) body #admin-program-modal-content,
html:not(.dark-theme) body #withdrawal-modal-content,
html:not(.dark-theme) body #infoboard-modal-content,
html:not(.dark-theme) body #info-modal > div,
html:not(.dark-theme) body #privacy-modal > div,
html:not(.dark-theme) body #share-modal > div {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid rgba(226, 232, 240, 0.96) !important;
    border-radius: 18px !important;
    box-shadow: 0 22px 58px rgba(15, 23, 42, 0.22) !important;
    color: var(--tt-text) !important;
}

/* ??洹쒖튃??.dark-theme瑜?諛곗젣?섎㈃??鍮꾩뼱踰꾨┛ ?ㅽ겕紐⑤뱶 紐⑤떖 諛곌꼍???ㅼ떆 梨꾩슫??
   (紐⑤떖 肄섑뀗痢?諛곌꼍?됱? --tt-surface 蹂€?섎? ?곗? ?딄퀬 ?섎뱶肄붾뵫???덉뿀??. */
html.dark-theme body #post-modal-content,
html.dark-theme body #auth-modal-content,
html.dark-theme body #comment-detail-modal-content,
html.dark-theme body #admin-change-modal-content,
html.dark-theme body #edu-apply-modal-content,
html.dark-theme body #admin-program-modal-content,
html.dark-theme body #withdrawal-modal-content,
html.dark-theme body #infoboard-modal-content,
html.dark-theme body #info-modal > div,
html.dark-theme body #privacy-modal > div,
html.dark-theme body #share-modal > div {
    background: var(--tt-surface) !important;
    border: 1px solid var(--tt-border) !important;
    border-radius: 18px !important;
    box-shadow: 0 22px 58px rgba(0, 0, 0, 0.4) !important;
    color: var(--tt-text) !important;
}

body #post-modal-content,
body #auth-modal-content,
body #comment-detail-modal-content,
body #admin-change-modal-content,
body #edu-apply-modal-content,
body #admin-program-modal-content,
body #withdrawal-modal-content,
body #infoboard-modal-content {
    padding: 20px !important;
}

body #post-modal-content input,
body #post-modal-content textarea,
body #post-modal-content select,
body #auth-modal-content input,
body #auth-modal-content textarea,
body #auth-modal-content select,
body #comment-detail-modal-content input,
body #comment-detail-modal-content textarea,
body #admin-change-modal-content input,
body #admin-change-modal-content textarea,
body #admin-change-modal-content select,
body #edu-apply-modal-content input,
body #edu-apply-modal-content textarea,
body #edu-apply-modal-content select,
body #admin-program-modal-content input,
body #admin-program-modal-content textarea,
body #admin-program-modal-content select,
body #withdrawal-modal-content input,
body #infoboard-modal-content input,
body #infoboard-modal-content textarea,
body #infoboard-modal-content select {
    min-height: 44px !important;
    border-radius: var(--tt-radius-control) !important;
    border-color: rgba(203, 213, 225, 0.92) !important;
    background-color: rgba(248, 250, 252, 0.94) !important;
    color: var(--tt-text) !important;
}
/* ???낅젰李?諛곌꼍???ㅽ겕紐⑤뱶?먯꽌??--tt-bg-soft濡??€泥?(?섎뱶肄붾뵫??諛앹? rgba 諛⑹?) */
html.dark-theme body #post-modal-content input,
html.dark-theme body #post-modal-content textarea,
html.dark-theme body #post-modal-content select,
html.dark-theme body #auth-modal-content input,
html.dark-theme body #auth-modal-content textarea,
html.dark-theme body #auth-modal-content select,
html.dark-theme body #comment-detail-modal-content input,
html.dark-theme body #comment-detail-modal-content textarea,
html.dark-theme body #admin-change-modal-content input,
html.dark-theme body #admin-change-modal-content textarea,
html.dark-theme body #admin-change-modal-content select,
html.dark-theme body #edu-apply-modal-content input,
html.dark-theme body #edu-apply-modal-content textarea,
html.dark-theme body #edu-apply-modal-content select,
html.dark-theme body #admin-program-modal-content input,
html.dark-theme body #admin-program-modal-content textarea,
html.dark-theme body #admin-program-modal-content select,
html.dark-theme body #withdrawal-modal-content input,
html.dark-theme body #infoboard-modal-content input,
html.dark-theme body #infoboard-modal-content textarea,
html.dark-theme body #infoboard-modal-content select {
    background-color: var(--tt-bg-soft) !important;
    border-color: var(--tt-border) !important;
    color: var(--tt-text) !important;
}

body #post-modal-content textarea,
body #comment-detail-modal-content textarea,
body #admin-change-modal-content textarea,
body #edu-apply-modal-content textarea,
body #admin-program-modal-content textarea,
body #infoboard-modal-content textarea {
    line-height: 1.62 !important;
    min-height: 108px !important;
}

body #post-modal-content input:focus,
body #post-modal-content textarea:focus,
body #post-modal-content select:focus,
body #auth-modal-content input:focus,
body #auth-modal-content textarea:focus,
body #auth-modal-content select:focus,
body #comment-detail-modal-content input:focus,
body #comment-detail-modal-content textarea:focus,
body #admin-change-modal-content input:focus,
body #admin-change-modal-content textarea:focus,
body #admin-change-modal-content select:focus,
body #edu-apply-modal-content input:focus,
body #edu-apply-modal-content textarea:focus,
body #edu-apply-modal-content select:focus,
body #admin-program-modal-content input:focus,
body #admin-program-modal-content textarea:focus,
body #admin-program-modal-content select:focus,
body #withdrawal-modal-content input:focus,
body #infoboard-modal-content input:focus,
body #infoboard-modal-content textarea:focus,
body #infoboard-modal-content select:focus {
    border-color: var(--tt-primary) !important;
    box-shadow: 0 0 0 3px var(--tt-primary-shadow) !important;
}

body #post-modal-content button,
body #auth-modal-content button,
body #comment-detail-modal-content button,
body #admin-change-modal-content button,
body #edu-apply-modal-content button,
body #admin-program-modal-content button,
body #withdrawal-modal-content button,
body #infoboard-modal-content button,
body #privacy-modal button,
body #share-modal button {
    border-radius: var(--tt-radius-control) !important;
    min-height: 42px !important;
}

body #post-modal-content button.bg-brand-500,
body #auth-modal-content button.bg-brand-500,
body #comment-detail-modal-content button.bg-brand-500,
body #edu-apply-modal-content button.bg-brand-500,
body #admin-program-modal-content button.bg-brand-500,
body #infoboard-modal-content button.bg-brand-500,
body #privacy-modal button.bg-brand-600 {
    background: var(--tt-primary-action) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 20px var(--tt-primary-shadow) !important;
}

body #post-modal-content button.bg-brand-500:hover,
body #auth-modal-content button.bg-brand-500:hover,
body #comment-detail-modal-content button.bg-brand-500:hover,
body #edu-apply-modal-content button.bg-brand-500:hover,
body #admin-program-modal-content button.bg-brand-500:hover,
body #infoboard-modal-content button.bg-brand-500:hover,
body #privacy-modal button.bg-brand-600:hover {
    background: var(--tt-primary-action-hover) !important;
}

body #post-modal-content button[onclick*="close"],
body #auth-modal-content button[onclick*="close"],
body #comment-detail-modal-content button[onclick*="close"],
body #admin-change-modal-content button[onclick*="close"],
body #edu-apply-modal-content button[onclick*="close"],
body #admin-program-modal-content button[onclick*="classList.add"],
body #infoboard-modal-content button[onclick*="close"],
body #privacy-modal button[onclick*="classList.add"] {
    min-width: 38px !important;
    min-height: 38px !important;
}

.dark-theme #share-modal > div,
.dark-theme #privacy-modal > div,
.dark-theme #withdrawal-modal-content,
.dark-theme #infoboard-modal-content {
    background-color: var(--tt-surface) !important;
    border-color: var(--tt-border) !important;
    color: #F3F4F6 !important;
}

/* Dark-mode feed readability: later light-theme polish rules can otherwise
   override Tailwind text colors inside cards. Keep this scoped to the feed. */
.dark-theme body #feed-list > div[id^="thread-"] {
    background: var(--tt-surface) !important;
    border-color: rgba(77, 157, 173, 0.24) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24) !important;
}

.dark-theme body #feed-list > div[id^="thread-"] p,
.dark-theme body #feed-list > div[id^="thread-"] .text-slate-800,
.dark-theme body #feed-list > div[id^="thread-"] .text-slate-700,
.dark-theme body #feed-list > div[id^="thread-"] .text-slate-650 {
    color: var(--tt-text) !important;
}

.dark-theme body #feed-list > div[id^="thread-"] .text-slate-600,
.dark-theme body #feed-list > div[id^="thread-"] .text-slate-500,
.dark-theme body #feed-list > div[id^="thread-"] .text-slate-400 {
    color: #AFC0D4 !important;
}

.dark-theme body #feed-list > div[id^="thread-"] > div:last-child {
    color: #AFC0D4 !important;
    border-top-color: rgba(77, 157, 173, 0.22) !important;
}

.dark-theme body #feed-list > div[id^="thread-"] a.bg-slate-50\/90,
.dark-theme body #feed-list > div[id^="thread-"] div.bg-slate-50\/80 {
    background: rgba(12, 24, 40, 0.72) !important;
    border-color: rgba(77, 157, 173, 0.22) !important;
    color: #DDEAF3 !important;
}

.dark-theme body #feed-list > div[id^="thread-"] button[onclick^="requestConnectionByHandle"],
.dark-theme body #feed-list > div[id^="thread-"] button[onclick^="peekUserByHandle"],
.dark-theme body #feed-list > div[id^="thread-"] button[onclick^="ghostUserByHandle"] {
    background-color: rgba(77, 157, 173, 0.14) !important;
    border-color: rgba(77, 157, 173, 0.36) !important;
    color: #BEEAF2 !important;
}

.dark-theme body #feed-list > div[id^="thread-"] button[onclick^="peekUserByHandle"] {
    background-color: rgba(245, 158, 11, 0.14) !important;
    border-color: rgba(245, 158, 11, 0.42) !important;
    color: #FCD486 !important;
}

.dark-theme body #feed-list > div[id^="thread-"] button[onclick^="ghostUserByHandle"] {
    background-color: rgba(244, 63, 94, 0.12) !important;
    border-color: rgba(244, 63, 94, 0.34) !important;
    color: #FDA4AF !important;
}

@media (max-width: 839px) {
    body #post-modal-content,
    body #comment-detail-modal-content,
    body #withdrawal-modal-content,
    body #share-modal > div {
        border-radius: 20px 20px 0 0 !important;
    }

    body #auth-modal,
    body #admin-change-modal,
    body #edu-apply-modal,
    body #admin-program-modal,
    body #privacy-modal,
    body #infoboard-modal {
        padding: 16px !important;
    }

    body #post-modal-content,
    body #auth-modal-content,
    body #comment-detail-modal-content,
    body #admin-change-modal-content,
    body #edu-apply-modal-content,
    body #admin-program-modal-content,
    body #withdrawal-modal-content,
    body #infoboard-modal-content,
    body #privacy-modal > div,
    body #share-modal > div {
        max-height: calc(100dvh - 88px - env(safe-area-inset-bottom)) !important;
    }
}

/* ===== STEP 7 ADMIN SCREEN VISUAL POLISH ===== */
body #view-setting [id^="admin-sub-content-"] {
    color: var(--tt-text) !important;
}

body #view-setting [id^="admin-sub-content-"] > .flex:first-child {
    min-height: 34px !important;
    padding: 8px 2px !important;
    border-bottom-color: rgba(226, 232, 240, 0.9) !important;
    color: var(--tt-text-secondary) !important;
}

body #view-setting [id^="admin-sub-content-"] .bg-white,
body #admin-users-list > div,
body #admin-managers-list > div,
body #admin-masks-list > div,
body #admin-programs-list > div,
body #admin-subscribers-list > div,
body #info-admin-panel-pageedit,
body #info-admin-panel-infoboard {
    background: rgba(255, 255, 255, 0.97) !important;
    border-color: rgba(226, 232, 240, 0.96) !important;
    border-radius: 16px !important;
    box-shadow: var(--tt-shadow-card) !important;
}

body #admin-log-console {
    background: #0f172a !important;
    border-color: rgba(15, 23, 42, 0.92) !important;
    border-radius: 14px !important;
    color: #cbd5e1 !important;
    line-height: 1.55 !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), var(--tt-shadow-card) !important;
}

body #admin-users-list table,
body #admin-applications-list table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    min-width: 760px !important;
}

body #admin-users-list thead th,
body #admin-applications-list thead th {
    background: rgba(238, 245, 247, 0.92) !important;
    color: var(--tt-text-secondary) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.95) !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

body #admin-users-list tbody tr,
body #admin-applications-list tbody tr {
    background: rgba(255, 255, 255, 0.92) !important;
}

body #admin-users-list tbody td,
body #admin-applications-list tbody td {
    border-bottom: 1px solid rgba(226, 232, 240, 0.72) !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    vertical-align: middle !important;
}

body #admin-users-list input,
body #admin-users-list select,
body #admin-sub-content-seo input,
body #admin-sub-content-seo textarea,
body #admin-sub-content-seo select,
body #admin-sub-content-info input,
body #admin-sub-content-info textarea,
body #admin-sub-content-info select,
body #admin-sub-content-programs input,
body #admin-sub-content-programs textarea,
body #admin-sub-content-programs select {
    min-height: 38px !important;
    border-radius: 10px !important;
    border-color: rgba(203, 213, 225, 0.92) !important;
    background-color: rgba(248, 250, 252, 0.96) !important;
    color: var(--tt-text) !important;
}

body #admin-users-list input:focus,
body #admin-users-list select:focus,
body #admin-sub-content-seo input:focus,
body #admin-sub-content-seo textarea:focus,
body #admin-sub-content-seo select:focus,
body #admin-sub-content-info input:focus,
body #admin-sub-content-info textarea:focus,
body #admin-sub-content-info select:focus,
body #admin-sub-content-programs input:focus,
body #admin-sub-content-programs textarea:focus,
body #admin-sub-content-programs select:focus {
    border-color: var(--tt-primary) !important;
    box-shadow: 0 0 0 3px var(--tt-primary-shadow) !important;
}

body #view-setting [id^="admin-sub-content-"] button {
    border-radius: 10px !important;
    min-height: 34px !important;
}

body #view-setting [id^="admin-sub-content-"] button.bg-brand-600,
body #view-setting [id^="admin-sub-content-"] button.bg-brand-500 {
    background: var(--tt-primary-action) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 16px var(--tt-primary-shadow) !important;
}

body #admin-applications-tabs button,
body #admin-sub-tabs button,
body #info-admin-panel-infoboard button[id^="admin-board-btn-"] {
    min-height: 30px !important;
    border-radius: 999px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
}

body #admin-applications-list,
body #admin-users-list .overflow-x-auto {
    border: 1px solid rgba(226, 232, 240, 0.96) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.97) !important;
    box-shadow: var(--tt-shadow-card) !important;
}

.dark-theme #admin-users-list > div,
.dark-theme #admin-managers-list > div,
.dark-theme #admin-masks-list > div,
.dark-theme #admin-programs-list > div,
.dark-theme #admin-subscribers-list > div,
.dark-theme #info-admin-panel-pageedit,
.dark-theme #info-admin-panel-infoboard,
.dark-theme #admin-applications-list,
.dark-theme #admin-users-list .overflow-x-auto {
    background-color: var(--tt-surface) !important;
    border-color: var(--tt-border) !important;
    color: #F3F4F6 !important;
}

.dark-theme #admin-users-list thead th,
.dark-theme #admin-applications-list thead th {
    background-color: var(--tt-surface-raised) !important;
    color: #CBD5E1 !important;
    border-color: var(--tt-border) !important;
}

.dark-theme #admin-users-list tbody td,
.dark-theme #admin-applications-list tbody td {
    border-color: var(--tt-border) !important;
}

@media (max-width: 839px) {
    body #admin-users-list table,
    body #admin-applications-list table {
        min-width: 680px !important;
    }

    body #admin-log-console {
        min-height: 260px !important;
        height: calc(100dvh - 250px) !important;
    }
}

/* ===== STEP 8 SECONDARY SHEETS / SHARE POLISH ===== */
body #ta-write-modal {
    background-color: rgba(15, 23, 42, 0.48) !important;
    backdrop-filter: blur(10px) !important;
}

body #ta-write-modal > div {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid rgba(226, 232, 240, 0.96) !important;
    border-radius: 18px !important;
    box-shadow: 0 22px 58px rgba(15, 23, 42, 0.22) !important;
}

body #ta-write-modal input,
body #ta-write-modal textarea,
body #ta-write-modal select {
    min-height: 44px !important;
    border: 1px solid rgba(203, 213, 225, 0.92) !important;
    border-radius: var(--tt-radius-control) !important;
    background-color: rgba(248, 250, 252, 0.96) !important;
    color: var(--tt-text) !important;
}

body #ta-write-modal textarea {
    min-height: 108px !important;
    line-height: 1.62 !important;
}

body #ta-write-modal input:focus,
body #ta-write-modal textarea:focus,
body #ta-write-modal select:focus {
    border-color: var(--tt-primary) !important;
    box-shadow: 0 0 0 3px var(--tt-primary-shadow) !important;
}

body #ta-write-modal button {
    min-height: 42px !important;
    border-radius: var(--tt-radius-control) !important;
}

body #ta-write-modal button[type="submit"] {
    background: var(--tt-primary-action) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 20px var(--tt-primary-shadow) !important;
}

body #share-modal > div {
    padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important;
}

body #share-modal .grid button,
body #share-modal .grid a {
    border-radius: 14px !important;
    padding: 8px 6px !important;
}

body #share-modal .grid button:hover,
body #share-modal .grid a:hover {
    background-color: rgba(238, 245, 247, 0.72) !important;
}

body #share-modal .grid button > div,
body #share-modal .grid a > div {
    width: 46px !important;
    height: 46px !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08) !important;
}

body #share-modal .grid span {
    color: var(--tt-text-secondary) !important;
    line-height: 1.2 !important;
}

.dark-theme #ta-write-modal > div {
    background-color: var(--tt-surface) !important;
    border-color: var(--tt-border) !important;
    color: #F3F4F6 !important;
}

.dark-theme #ta-write-modal {
    background-color: rgba(14, 26, 43, 0.82) !important;
}

/* ===== FINAL MODERN THEME SEPARATION =====
   Keep this near the end so earlier broad utility overrides cannot flatten
   light and dark mode into the same mid-tone palette. */
html:not(.dark-theme) body {
    --tt-primary: #25879A;
    --tt-primary-hover: #176372;
    --tt-primary-action: #25879A;
    --tt-primary-action-hover: #176372;
    --tt-primary-soft: #E7F5F7;
    --tt-primary-border: rgba(37, 135, 154, 0.28);
    --tt-primary-shadow: rgba(37, 135, 154, 0.16);
    --tt-bg: #F7FBFC;
    --tt-bg-soft: #EAF2F5;
    --tt-surface: #FFFFFF;
    --tt-surface-raised: #FFFFFF;
    --tt-text: #172033;
    --tt-text-secondary: #43526A;
    --tt-text-muted: #6E7F95;
    --tt-border: #D9E4EA;
    --tt-surface-opaque: rgba(255, 255, 255, 0.96);
    --tt-track: #EAF2F5;
    background: #F7FBFC !important;
    color: #172033 !important;
}

html.dark-theme body {
    --tt-primary: #65C7D3;
    --tt-primary-hover: #8DDAE2;
    --tt-primary-action: #24798A;
    --tt-primary-action-hover: #176372;
    --tt-primary-soft: rgba(101, 199, 211, 0.14);
    --tt-primary-border: rgba(101, 199, 211, 0.36);
    --tt-primary-shadow: rgba(101, 199, 211, 0.22);
    --tt-bg: #07111F;
    --tt-bg-soft: #0B1626;
    --tt-surface: #12243A;
    --tt-surface-raised: #172C46;
    --tt-text: #EAF2F8;
    --tt-text-secondary: #B7C7DA;
    --tt-text-muted: #8DA2BB;
    --tt-border: #29425F;
    --tt-surface-opaque: rgba(16, 31, 51, 0.98);
    --tt-track: #0B1626;
    background: #07111F !important;
    color: #EAF2F8 !important;
}

body #root-outer-wrapper,
body #main-content-column,
body .bg-\[\#F7FAFB\] {
    background: var(--tt-bg) !important;
}

body #sidebar-left,
body #sidebar-right,
body #bottom-nav,
body #mobile-header,
body header,
body nav,
body #home-feed-tabs,
body #edu-feed-tabs,
body #info-feed-tabs {
    background: var(--tt-surface-opaque) !important;
    border-color: var(--tt-border) !important;
    color: var(--tt-text) !important;
}

body .seg-track,
body #home-feed-tabs .seg-track,
body #edu-feed-tabs .seg-track,
body #info-feed-tabs .seg-track,
body .setting-seg-track {
    background: var(--tt-track) !important;
    border: 1px solid var(--tt-border) !important;
}

html:not(.dark-theme) body .bg-white,
html:not(.dark-theme) body .bg-white\/80,
html:not(.dark-theme) body .bg-white\/90,
html:not(.dark-theme) body .bg-white\/95,
html:not(.dark-theme) body #feed-list > div[id^="thread-"],
html:not(.dark-theme) body #edu-feed-list > div,
html:not(.dark-theme) body #mypage-sub-content-profile > div,
html:not(.dark-theme) body #mypage-sub-content-connections > div,
html:not(.dark-theme) body #mypage-sub-content-received > div,
html:not(.dark-theme) body #mypage-sub-content-sent > div,
html:not(.dark-theme) body #mypage-sub-content-write > div,
html:not(.dark-theme) body #ts-exam-list > div,
html:not(.dark-theme) body #ta-list > div,
html:not(.dark-theme) body #view-setting [id^="admin-sub-content-"] .bg-white,
html:not(.dark-theme) body #admin-users-list > div,
html:not(.dark-theme) body #admin-managers-list > div,
html:not(.dark-theme) body #admin-masks-list > div,
html:not(.dark-theme) body #admin-programs-list > div,
html:not(.dark-theme) body #admin-subscribers-list > div,
html:not(.dark-theme) body #info-admin-panel-pageedit,
html:not(.dark-theme) body #info-admin-panel-infoboard,
html:not(.dark-theme) body #admin-applications-list,
html:not(.dark-theme) body #admin-users-list .overflow-x-auto {
    background: #FFFFFF !important;
    border-color: #DDE8EE !important;
    color: #172033 !important;
    box-shadow: 0 8px 24px rgba(35, 73, 88, 0.07) !important;
}

html.dark-theme body .bg-white,
html.dark-theme body .bg-white\/80,
html.dark-theme body .bg-white\/90,
html.dark-theme body .bg-white\/95,
html.dark-theme body #feed-list > div[id^="thread-"],
html.dark-theme body #edu-feed-list > div,
html.dark-theme body #mypage-sub-content-profile > div,
html.dark-theme body #mypage-sub-content-connections > div,
html.dark-theme body #mypage-sub-content-received > div,
html.dark-theme body #mypage-sub-content-sent > div,
html.dark-theme body #mypage-sub-content-write > div,
html.dark-theme body #ts-exam-list > div,
html.dark-theme body #ta-list > div,
html.dark-theme body #view-setting [id^="admin-sub-content-"] .bg-white,
html.dark-theme body #admin-users-list > div,
html.dark-theme body #admin-managers-list > div,
html.dark-theme body #admin-masks-list > div,
html.dark-theme body #admin-programs-list > div,
html.dark-theme body #admin-subscribers-list > div,
html.dark-theme body #info-admin-panel-pageedit,
html.dark-theme body #info-admin-panel-infoboard,
html.dark-theme body #admin-applications-list,
html.dark-theme body #admin-users-list .overflow-x-auto {
    background: var(--tt-surface) !important;
    border-color: var(--tt-border) !important;
    color: var(--tt-text) !important;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28) !important;
}

html:not(.dark-theme) body #home-feed-tabs .seg-track,
html:not(.dark-theme) body #edu-feed-tabs .seg-track,
html:not(.dark-theme) body #info-feed-tabs .seg-track,
html:not(.dark-theme) body #view-topik .seg-track {
    background: rgba(238, 245, 247, 0.96) !important;
    border-color: rgba(226, 232, 240, 0.88) !important;
}
html.dark-theme body #home-feed-tabs .seg-track,
html.dark-theme body #edu-feed-tabs .seg-track,
html.dark-theme body #info-feed-tabs .seg-track,
html.dark-theme body #view-topik .seg-track {
    background: var(--tt-bg-soft) !important;
    border-color: var(--tt-border) !important;
}

/* ?꾩?湲€/?뺣낫寃뚯떆??紐⑸줉 ?곷떒 "寃뚯떆湲€" ?ㅻ뜑諛?(topik-consistent-panel, info-consistent-panel) */
html:not(.dark-theme) body .info-consistent-panel > .flex.items-center.justify-between,
html:not(.dark-theme) body #info-subtab-archive > .flex.items-center.justify-between {
    background: #ffffff !important;
    border-color: rgba(226, 232, 240, 0.9) !important;
}
html.dark-theme body .info-consistent-panel > .flex.items-center.justify-between,
html.dark-theme body #info-subtab-archive > .flex.items-center.justify-between {
    background: var(--tt-surface) !important;
    border-color: var(--tt-border) !important;
}

/* 移대뱶 ?대????낆? ?뚯깋 ?쒕툕諛뺤뒪(?쒗뿕?쇱젙 ?붿빟移? 怨듭쑀 踰꾪듉 hover ?? */
html:not(.dark-theme) body #ts-exam-list .grid,
html:not(.dark-theme) body #edu-feed-list .bg-slate-50,
html:not(.dark-theme) body #share-modal .grid button:hover,
html:not(.dark-theme) body #share-modal .grid a:hover {
    background: rgba(238, 245, 247, 0.72) !important;
    border-color: rgba(226, 232, 240, 0.9) !important;
}
html.dark-theme body #ts-exam-list .grid,
html.dark-theme body #edu-feed-list .bg-slate-50,
html.dark-theme body #share-modal .grid button:hover,
html.dark-theme body #share-modal .grid a:hover {
    background: var(--tt-bg-soft) !important;
    border-color: var(--tt-border) !important;
}

html:not(.dark-theme) body .bg-slate-50,
html:not(.dark-theme) body .bg-slate-100,
html:not(.dark-theme) body .bg-\[\#EEF2F7\],
html:not(.dark-theme) body input,
html:not(.dark-theme) body textarea,
html:not(.dark-theme) body select {
    background-color: #F1F6F8 !important;
    border-color: #D9E4EA !important;
    color: #172033 !important;
}

html.dark-theme body .bg-slate-50,
html.dark-theme body .bg-slate-100,
html.dark-theme body .bg-\[\#EEF2F7\],
html.dark-theme body input,
html.dark-theme body textarea,
html.dark-theme body select {
    background-color: var(--tt-bg-soft) !important;
    border-color: var(--tt-border) !important;
    color: var(--tt-text) !important;
}

/* Dark-mode pale-surface audit (2026-07-15)
   Tailwind opacity and gradient utilities do not inherit the base bg-* dark
   overrides. Keep every pale learning/card surface on the shared navy scale. */
html.dark-theme body .bg-brand-50\/30,
html.dark-theme body .bg-brand-50\/50,
html.dark-theme body .bg-indigo-50,
html.dark-theme body .bg-indigo-50\/50,
html.dark-theme body .bg-indigo-50\/80,
html.dark-theme body .bg-blue-50,
html.dark-theme body .bg-blue-100,
html.dark-theme body .bg-purple-50,
html.dark-theme body .bg-sky-50,
html.dark-theme body .bg-sky-100,
html.dark-theme body .bg-teal-50,
html.dark-theme body .bg-teal-100,
html.dark-theme body .bg-violet-50,
html.dark-theme body .bg-violet-100,
html.dark-theme body .bg-orange-50,
html.dark-theme body .bg-orange-100,
html.dark-theme body .bg-lime-50,
html.dark-theme body .bg-lime-100,
html.dark-theme body .bg-pink-100 {
    background-color: var(--tt-surface-raised) !important;
}

html.dark-theme body .bg-emerald-100,
html.dark-theme body .bg-emerald-100\/50 {
    background-color: rgba(16, 185, 129, 0.14) !important;
}

html.dark-theme body .bg-amber-50\/70,
html.dark-theme body .bg-yellow-50 {
    background-color: rgba(245, 158, 11, 0.15) !important;
}

html.dark-theme body .bg-rose-200 {
    background-color: rgba(245, 158, 11, 0.20) !important;
}

html.dark-theme body .from-brand-50\/80.to-white {
    background-image: linear-gradient(to bottom right, var(--tt-surface-raised), var(--tt-surface)) !important;
}

html.dark-theme body .hover\:bg-brand-50:hover,
html.dark-theme body .hover\:bg-brand-50\/40:hover,
html.dark-theme body .hover\:bg-brand-100:hover,
html.dark-theme body .has-\[\:checked\]\:bg-brand-50:has(:checked) {
    background-color: var(--tt-primary-soft) !important;
}

html.dark-theme body .hover\:bg-slate-200:hover,
html.dark-theme body .hover\:bg-slate-350:hover,
html.dark-theme body .hover\:bg-blue-100:hover,
html.dark-theme body .hover\:bg-violet-100:hover {
    background-color: var(--tt-surface-raised) !important;
}

html.dark-theme body .hover\:bg-amber-50:hover,
html.dark-theme body .hover\:bg-amber-100:hover,
html.dark-theme body .hover\:bg-rose-50:hover,
html.dark-theme body .hover\:bg-rose-100:hover {
    background-color: rgba(245, 158, 11, 0.20) !important;
}

html.dark-theme body .hover\:bg-emerald-50:hover,
html.dark-theme body .hover\:bg-emerald-100:hover {
    background-color: rgba(16, 185, 129, 0.20) !important;
}

html.dark-theme body .file\:bg-brand-50::file-selector-button {
    background-color: var(--tt-surface-raised) !important;
}

html.dark-theme body .text-indigo-600,
html.dark-theme body .text-indigo-650,
html.dark-theme body .text-indigo-700,
html.dark-theme body .text-indigo-800 {
    color: #A5B4FC !important;
}

html.dark-theme body .text-blue-600,
html.dark-theme body .text-blue-700,
html.dark-theme body .text-purple-500,
html.dark-theme body .text-purple-700 {
    color: #AFCBEF !important;
}

html.dark-theme body .text-sky-600,
html.dark-theme body .text-sky-700 { color: #7DD3FC !important; }
html.dark-theme body .text-teal-600,
html.dark-theme body .text-teal-700 { color: #5EEAD4 !important; }
html.dark-theme body .text-violet-600,
html.dark-theme body .text-violet-700 { color: #C4B5FD !important; }
html.dark-theme body .text-orange-600,
html.dark-theme body .text-orange-700 { color: #FDBA74 !important; }
html.dark-theme body .text-lime-600,
html.dark-theme body .text-lime-700 { color: #BEF264 !important; }
html.dark-theme body .text-pink-600,
html.dark-theme body .text-pink-700 { color: #F9A8D4 !important; }

html.dark-theme body #user-type-grid label {
    background-color: var(--tt-surface-raised) !important;
    border-color: var(--tt-border) !important;
}

html.dark-theme body #user-type-grid label:has(input:checked) {
    border-color: var(--tt-primary-border) !important;
}

.thread-table-wrap {
    overflow-x: auto;
    margin: 10px 0;
}

.thread-rich-table {
    border-collapse: collapse;
    width: 100%;
    min-width: 300px;
    font-size: var(--fs-xs);
}

.thread-rich-table th,
.thread-rich-table td {
    border: 1px solid var(--tt-border);
    padding: 7px 10px;
}

.thread-rich-table th {
    background: var(--tt-bg-soft);
    color: var(--tt-text);
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
}

.thread-rich-table td {
    background: var(--tt-surface);
    color: var(--tt-text-secondary);
    text-align: left;
    vertical-align: top;
}

html:not(.dark-theme) body .text-slate-800,
html:not(.dark-theme) body .text-slate-700,
html:not(.dark-theme) body .text-slate-650,
html:not(.dark-theme) body .text-slate-900,
html:not(.dark-theme) body .text-slate-950 {
    color: #172033 !important;
}

html.dark-theme body .text-slate-800,
html.dark-theme body .text-slate-700,
html.dark-theme body .text-slate-650,
html.dark-theme body .text-slate-900,
html.dark-theme body .text-slate-950 {
    color: var(--tt-text) !important;
}

html:not(.dark-theme) body .text-slate-600,
html:not(.dark-theme) body .text-slate-550,
html:not(.dark-theme) body .text-slate-505,
html:not(.dark-theme) body .text-slate-500,
html:not(.dark-theme) body .text-slate-400 {
    color: #5E7088 !important;
}

html.dark-theme body .text-slate-600,
html.dark-theme body .text-slate-550,
html.dark-theme body .text-slate-505,
html.dark-theme body .text-slate-500,
html.dark-theme body .text-slate-400 {
    color: #A9BBD0 !important;
}

html:not(.dark-theme) body .border-slate-100,
html:not(.dark-theme) body .border-slate-150,
html:not(.dark-theme) body .border-slate-200,
html:not(.dark-theme) body .border-slate-250 {
    border-color: #DDE8EE !important;
}

html.dark-theme body .border-slate-100,
html.dark-theme body .border-slate-150,
html.dark-theme body .border-slate-200,
html.dark-theme body .border-slate-250 {
    border-color: var(--tt-border) !important;
}

html:not(.dark-theme) body .bg-brand-500,
html:not(.dark-theme) body .bg-brand-600,
html:not(.dark-theme) body button.bg-brand-500,
html:not(.dark-theme) body button.bg-brand-600 {
    background-color: var(--tt-primary-action) !important;
    color: #ffffff !important;
}

html.dark-theme body .bg-brand-500,
html.dark-theme body .bg-brand-600,
html.dark-theme body button.bg-brand-500,
html.dark-theme body button.bg-brand-600 {
    background-color: var(--tt-primary-action) !important;
    color: #ffffff !important;
}

html:not(.dark-theme) body ::-webkit-scrollbar-track {
    background: #EEF5F7 !important;
}

html.dark-theme body ::-webkit-scrollbar-track {
    background: var(--tt-bg) !important;
}

@media (max-width: 839px) {
    body #ta-write-modal {
        padding: 16px 16px calc(76px + env(safe-area-inset-bottom)) !important;
    }

    body #ta-write-modal > div {
        border-radius: 20px 20px 0 0 !important;
        max-height: calc(100dvh - 92px - env(safe-area-inset-bottom)) !important;
        overflow-y: auto !important;
    }

    body #share-modal .grid {
        gap: 8px !important;
    }
}

/* --- TOPIK Writing Practice Tab Styles --- */
.manuscript-paper {
    background-color: #fbfbf6;
    border: 2px solid #589b88;
    padding: 10px;
    border-radius: 12px;
}

.manuscript-row {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 2px;
}

.manuscript-cell {
    width: 20px;
    height: 24px;
    border: 1px solid rgba(88, 155, 136, 0.45);
    margin-right: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-sm);
    font-weight: 700;
    font-family: 'Outfit', 'Noto Sans KR', sans-serif;
    color: #2c5a4d;
    background-color: #ffffff;
    user-select: none;
}

.manuscript-cell.filled {
    background-color: #f3f9f7;
}

.manuscript-cell.over-limit {
    border-color: rgba(220, 38, 38, 0.6);
    color: #dc2626;
    background-color: #fef2f2;
}

@media (min-width: 840px) {
    .manuscript-cell {
        width: 24px !important;
        height: 28px !important;
        font-size: var(--fs-base) !important;
        margin-right: 2px !important;
    }
}

/* Hide floating action panel when any modal is open */
body:has(#post-modal:not(.hidden), #withdrawal-modal:not(.hidden), #auth-modal:not(.hidden), #comment-detail-modal:not(.hidden), #admin-change-modal:not(.hidden), #admin-program-modal:not(.hidden), #edu-apply-modal:not(.hidden), #privacy-modal:not(.hidden), #share-modal:not(.hidden), #infoboard-modal:not(.hidden), #edit-modal, #ta-write-modal:not(.hidden)) #floating-action-panel {
    display: none !important;
}

.edu-job-post > summary::-webkit-details-marker {
    display: none;
}

.edu-job-post[open] .edu-job-chevron {
    transform: rotate(180deg);
}

/* ==========================================
   FULL-SCREEN MODALS OVERRIDES
   ========================================== */

/* Remove paddings and background overlays from modal outer containers */
body #post-modal,
body #withdrawal-modal,
body #auth-modal,
body #comment-detail-modal,
body #admin-change-modal,
body #admin-program-modal,
body #edu-apply-modal,
body #privacy-modal,
body #share-modal,
body #infoboard-modal,
body #edit-modal,
body #ta-write-modal,
body #email-verify-modal,
body #info-modal {
    padding: 0 !important;
}

/* Force modal contents to be full screen (100% width & height) with no border radius */
body #post-modal-content,
body #withdrawal-modal-content,
body #auth-modal-content,
body #comment-detail-modal-content,
body #admin-change-modal-content,
body #admin-program-modal-content,
body #edu-apply-modal-content,
body #privacy-modal > div,
body #share-modal > div,
body #infoboard-modal-content,
body #edit-modal > div,
body #ta-write-modal > div,
body #email-verify-modal > div,
body #info-modal > div {
    border-radius: 0 !important;
    max-width: none !important;
    max-height: none !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
}

/* Vertically center content inside short modals for a clean layout */
body #withdrawal-modal-content,
body #admin-change-modal-content,
body #share-modal > div,
body #email-verify-modal > div,
body #info-modal > div {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

/* Fix write button pencil color: force icon color to white when background exists */
#bottom-nav button.rounded-full i,
#bottom-nav button.bg-brand-500 i,
#bottom-nav button.bg-brand-600 i {
    color: #ffffff !important;
}

/* On hover, transition the desktop sidebar write button icon to the logo color */
html.layout-desktop #bottom-nav button.rounded-full:hover i {
    color: var(--tt-primary) !important;
}

/* Keep the infoboard editor above app chrome on mobile and make actions reachable. */
body #infoboard-modal {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    padding: 0 !important;
    z-index: var(--z-modal-priority) !important;
    background: #ffffff !important;
}

body #infoboard-modal-content {
    width: 100% !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
}

body #infoboard-modal-content > .overflow-y-auto {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding-bottom: 24px !important;
}

body #infoboard-modal-content > .border-t {
    position: sticky !important;
    bottom: 0 !important;
    background: #ffffff !important;
    padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
    z-index: 2 !important;
}

body:has(#infoboard-modal:not(.hidden)) #bottom-nav {
    display: none !important;
}

body.infoboard-editor-open {
    overflow: hidden !important;
}

body.infoboard-editor-open #bottom-nav,
body.modal-open #bottom-nav {
    display: none !important;
}

#toast-container {
    z-index: var(--z-toast) !important;
}

body.infoboard-editor-open #infoboard-modal {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    transform: none !important;
    z-index: var(--z-modal-priority) !important;
    display: flex !important;
    padding: 0 !important;
    background: #ffffff !important;
}

body.infoboard-editor-open #infoboard-modal.hidden {
    display: none !important;
}

body.infoboard-editor-open #infoboard-modal-content {
    width: 100vw !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    transform: none !important;
}

body.infoboard-editor-open #infoboard-modal-content > .overflow-y-auto {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding-bottom: 28px !important;
}

body.infoboard-editor-open #infoboard-modal-content > .border-t {
    position: sticky !important;
    bottom: 0 !important;
    background: #ffffff !important;
    padding-bottom: max(18px, env(safe-area-inset-bottom)) !important;
    z-index: 3 !important;
}

body.infoboard-editor-open #infoboard-modal-body {
    min-height: 260px !important;
    height: 32dvh !important;
    max-height: 46dvh !important;
    resize: vertical !important;
}

body #post-text,
body #edit-textarea,
body .totalk-body-textarea {
    min-height: 300px !important;
    height: 38dvh !important;
    max-height: 52dvh !important;
    line-height: 1.7 !important;
    resize: vertical !important;
}

body #post-modal-content,
body #edu-apply-modal-content,
body #infoboard-modal-content,
body #comment-detail-modal-content,
body #edit-modal > div,
body #ta-write-modal > div {
    font-size: var(--fs-sm) !important;
}

body #post-modal-content input,
body #post-modal-content textarea,
body #post-modal-content select,
body #edu-apply-modal-content input,
body #edu-apply-modal-content textarea,
body #edu-apply-modal-content select,
body #infoboard-modal-content input,
body #infoboard-modal-content textarea,
body #infoboard-modal-content select,
body #comment-detail-modal-content input,
body #comment-detail-modal-content textarea,
body #edit-modal input,
body #edit-modal textarea,
body #edit-modal select,
body #ta-write-modal input,
body #ta-write-modal textarea,
body #ta-write-modal select {
    font-size: var(--fs-sm) !important;
}

body #post-modal-content label,
body #post-modal-content button,
body #post-modal-content #modal-warning-text,
body #post-modal-content #char-counter,
body #edu-apply-modal-content label,
body #edu-apply-modal-content button,
body #infoboard-modal-content label,
body #infoboard-modal-content button,
body #comment-detail-modal-content label,
body #comment-detail-modal-content button,
body #comment-detail-modal-content #comment-char-counter,
body #edit-modal label,
body #edit-modal button,
body #ta-write-modal label,
body #ta-write-modal button {
    font-size: var(--fs-sm) !important;
}

body #post-modal-content .flex-1.overflow-y-auto,
body #edit-modal > div {
    min-height: 0 !important;
}

@media (max-width: 640px) {
    body.infoboard-editor-open #infoboard-modal-body {
        min-height: 300px !important;
        height: 38dvh !important;
    }

    body #post-text,
    body #edit-textarea,
    body .totalk-body-textarea {
        min-height: 330px !important;
        height: 42dvh !important;
    }
}

/* Desktop modal sizing: keep mobile full-screen, but avoid wall-to-wall dialogs on wide screens. */
@media (min-width: 840px) {
    body #post-modal,
    body #withdrawal-modal,
    body #auth-modal,
    body #comment-detail-modal,
    body #admin-change-modal,
    body #admin-program-modal,
    body #edu-apply-modal,
    body #privacy-modal,
    body #share-modal,
    body #infoboard-modal,
    body #edit-modal,
    body #ta-write-modal,
    body #email-verify-modal,
    body #info-modal {
        position: fixed !important;
        inset: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 32px !important;
        background: rgba(7, 17, 31, 0.42) !important;
        z-index: var(--z-modal) !important;
    }

    body #infoboard-modal,
    body.infoboard-editor-open #infoboard-modal {
        z-index: var(--z-modal-priority) !important;
    }

    body #post-modal-content,
    body #comment-detail-modal-content,
    body #admin-program-modal-content,
    body #edu-apply-modal-content,
    body #infoboard-modal-content,
    body #edit-modal > div,
    body #ta-write-modal > div {
        width: min(760px, calc(100vw - 64px)) !important;
        height: auto !important;
        max-height: calc(100dvh - 64px) !important;
        border-radius: 16px !important;
        border: 1px solid var(--tt-border) !important;
        box-shadow: 0 22px 60px rgba(7, 17, 31, 0.22) !important;
        overflow: hidden !important;
    }

    body #auth-modal-content,
    body #withdrawal-modal-content,
    body #admin-change-modal-content,
    body #privacy-modal > div,
    body #share-modal > div,
    body #email-verify-modal > div,
    body #info-modal > div {
        width: min(460px, calc(100vw - 64px)) !important;
        height: auto !important;
        max-height: calc(100dvh - 64px) !important;
        border-radius: 16px !important;
        border: 1px solid var(--tt-border) !important;
        box-shadow: 0 22px 60px rgba(7, 17, 31, 0.22) !important;
        overflow: auto !important;
    }

    body #ta-write-modal > div {
        width: min(980px, calc(100vw - 64px)) !important;
    }

    body.infoboard-editor-open #infoboard-modal,
    body.infoboard-editor-open #infoboard-modal-content {
        width: auto !important;
        height: auto !important;
        max-width: none !important;
        max-height: calc(100dvh - 64px) !important;
    }

    body.infoboard-editor-open #infoboard-modal-content {
        width: min(760px, calc(100vw - 64px)) !important;
    }
}
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ===== ?ㅽ겕紐⑤뱶 ?붿뿬 ?섎뱶肄붾뵫 ?됱긽 ?쇨큵 ?섏젙 (2026-07-03) =====
   ???뚯씪 ?ш린?€湲곗쓽 body 洹쒖튃?ㅼ씠 var(--tt-*) ?€???곗깋/諛앹? ?뚯깋??
   吏곸젒 ?섎뱶肄붾뵫?댁꽌, .dark-theme 履쎌뿉 ?€??洹쒖튃???녾굅???먮뒗 body ?섎━癒쇳듃 ?좏깮???섎굹
   李⑥씠濡??뱀씠?꾧? 諛€?ㅼ꽌) ?ㅽ겕紐⑤뱶?먯꽌??怨꾩냽 諛앹? 諛곌꼍?쇰줈 蹂댁씠??怨노뱾??紐⑥븘 怨좎튇??
   html.dark-theme body 議고빀?€ element 2媛?class 2媛쒕줈, 湲곗〈
   body #id(element 1媛?class 1媛? 蹂대떎 ?뱀씠?꾧? ??긽 ?믪븘 ?쒖꽌?€
   臾닿??섍쾶 ?닿릿?? */

/* ?ъ씠???꾩껜 input/textarea/select 湲곕낯 諛곌꼍 (愿€由ъ옄 ?섏씠吏€?몄쭛 textarea ???ㅼ닔 ?곹뼢) */
html.dark-theme body input,
html.dark-theme body textarea,
html.dark-theme body select {
    background-color: var(--tt-bg-soft) !important;
    border-color: var(--tt-border) !important;
    color: var(--tt-text) !important;
}

html.dark-theme body #home-feed-tabs .seg-track button:not(.bg-brand-500):hover,
html.dark-theme body #edu-feed-tabs .seg-track button:not(.bg-brand-500):hover,
html.dark-theme body #info-feed-tabs .seg-track button:not(.bg-brand-500):hover,
html.dark-theme body .setting-seg-track button:not(.active-tab):hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--tt-text-secondary) !important;
}

/* ?뚯썝愿€由??좎껌???뚯씠釉?蹂몃Ц ??(吏€湲덇퉴吏€ ??긽 ?곗깋?쇰줈 怨좎젙???덈뜕 遺€遺? */
html.dark-theme body #admin-users-list tbody tr,
html.dark-theme body #admin-applications-list tbody tr {
    background: var(--tt-surface) !important;
}

/* ?뚯썝愿€由?SEO/info.?ㅼ젙/媛뺤쥖愿€由?愿€由ъ옄 ?⑤꼸 ?덉쓽 ?낅젰李?(?섏씠吏€?몄쭛 textarea ?? */
html.dark-theme body #admin-users-list input,
html.dark-theme body #admin-users-list select,
html.dark-theme body #admin-sub-content-seo input,
html.dark-theme body #admin-sub-content-seo textarea,
html.dark-theme body #admin-sub-content-seo select,
html.dark-theme body #admin-sub-content-info input,
html.dark-theme body #admin-sub-content-info textarea,
html.dark-theme body #admin-sub-content-info select,
html.dark-theme body #admin-sub-content-programs input,
html.dark-theme body #admin-sub-content-programs textarea,
html.dark-theme body #admin-sub-content-programs select {
    background-color: var(--tt-bg-soft) !important;
    border-color: var(--tt-border) !important;
    color: var(--tt-text) !important;
}

/* ?곌린?곗뒿 珥앺룊 ?묒꽦 紐⑤떖(#ta-write-modal) */
html.dark-theme body #ta-write-modal > div {
    background: var(--tt-surface) !important;
    border-color: var(--tt-border) !important;
}
html.dark-theme body #ta-write-modal input,
html.dark-theme body #ta-write-modal textarea,
html.dark-theme body #ta-write-modal select {
    background-color: var(--tt-bg-soft) !important;
    border-color: var(--tt-border) !important;
    color: var(--tt-text) !important;
}

/* ?꾩?湲€ ?묒꽦 紐⑤떖 ?섎떒 怨좎젙 ?≪뀡諛?*/
html.dark-theme body #infoboard-modal-content > .border-t {
    background: var(--tt-surface) !important;
    border-color: var(--tt-border) !important;
}

/* ?뱀젙 ?붾㈃ ID濡?踰붿쐞瑜?醫곹엺 移대뱶 ?뚮몢由ъ깋 ?섎뱶肄붾뵫 ???먮옒 洹쒖튃??#id瑜??ы븿??
   ?뱀씠?꾧? ?믪쑝誘€濡? ?ㅽ겕 ?€??洹쒖튃??媛숈? #id瑜??ы븿?댁빞 ?닿릿???대옒?ㅻ쭔?쇰줈??
   #id媛€ ?덈뒗 洹쒖튃???닿만 ???녿떎). */
html.dark-theme body #info-subtab-about .bg-white,
html.dark-theme body #info-subtab-korea .bg-white {
    border-color: var(--tt-border) !important;
}
html.dark-theme body #ts-exam-list > div > div:first-child,
html.dark-theme body #ta-list > div > div:last-child {
    border-color: var(--tt-border) !important;
}
html.dark-theme body #edu-feed-list > div > div:first-child {
    border-bottom-color: var(--tt-border) !important;
}
html.dark-theme body #edu-feed-list button[onclick*="openShareModal"],
html.dark-theme body #edu-feed-list a[title="자료 다운로드"] {
    border-color: var(--tt-border) !important;
}
html.dark-theme body #topik-subtab-writing .topik-notice-card,
html.dark-theme body #topik-subtab-writing .bg-white.border {
    border-color: var(--tt-border) !important;
}
/* ?ㅽ겕?먯꽌 ?곕쾭 二쇱쓽臾멸뎄媛€ ?곕쾭 諛곌꼍+?곕쾭 湲€?먮줈 萸됯컻吏€??寃????대몢???곕쾭 諛곌꼍??諛앹? 湲€?먮줈 */
html.dark-theme body .topik-notice-card {
    background: rgba(120, 53, 15, 0.22) !important;
    border-color: rgba(217, 119, 6, 0.45) !important;
    color: #FCD34D !important;
}
html.dark-theme body .topik-notice-card b { color: #FDE68A !important; }
html.dark-theme body .topik-notice-card .fa-triangle-exclamation { color: #F59E0B !important; }
html.dark-theme body #view-setting [id^="admin-sub-content-"] > .flex:first-child {
    border-bottom-color: var(--tt-border) !important;
}

/* 留덉씠?섏씠吏€/愿€由ъ옄 ?ㅼ젙 ?곸뿭(#view-setting) 媛€?낆꽦 媛쒖꽑.
   ?곕젅??蹂몃Ц(15px)/?묒꽦?먮챸(13px)??湲곗??쇰줈, ???곸뿭?먯꽌 怨쇰룄?섍쾶 ?묒븯??
   text-[8~11px] 怨꾩뿴 ?좏떥由ы떚 ?고듃 ?ш린瑜??꾩껜?곸쑝濡??뚯뼱?щ┛?? */
#view-setting [class*="text-[8px]"] { font-size: var(--fs-2xs) !important; }
#view-setting [class*="text-[9px]"] { font-size: var(--fs-xs) !important; }
#view-setting [class*="text-[10px]"] { font-size: var(--fs-sm) !important; }
#view-setting [class*="text-[11px]"] { font-size: var(--fs-sm) !important; }
#view-setting [class*="text-[12px]"] { font-size: var(--fs-sm) !important; }
#view-setting [class*="text-[13px]"] { font-size: var(--fs-base) !important; }
#view-setting input,
#view-setting select,
#view-setting textarea { font-size: var(--fs-sm) !important; }
#view-setting .text-xs { font-size: var(--fs-sm) !important; }

/* ===== info.>?좏뵿?? ?뚭컻 ?붾㈃ (About) ?쒕뵫 ?ㅽ???===== */
@keyframes about-blob-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-8px, 12px) scale(1.08); }
}
.about-hero-blob-1 { animation: about-blob-float 9s ease-in-out infinite; }
.about-hero-blob-2 { animation: about-blob-float 11s ease-in-out infinite reverse; }

.about-reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
.about-reveal-visible { opacity: 1; transform: translateY(0); }

.about-feat-card {
    background: #fff;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 16px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.about-feat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    border-color: rgba(77, 157, 173, 0.35);
}
.about-feat-icon {
    width: 34px; height: 34px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-sm);
}
.about-feat-title { font-size: var(--fs-xs); font-weight: 800; color: #1e293b; }
.about-feat-desc { font-size: var(--fs-3xs); color: #64748b; line-height: 1.5; }

.about-cta-banner {
    background: linear-gradient(120deg, #4D9DAD, #3D8696, #2E6B79, #4D9DAD);
    background-size: 300% 300%;
    animation: about-cta-gradient 8s ease infinite;
}
@keyframes about-cta-gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

html.dark-theme .about-feat-card { background: rgba(22, 39, 62, 0.92) !important; border-color: rgba(255,255,255,0.10) !important; }
html.dark-theme .about-feat-title { color: #F3F7FA !important; }
html.dark-theme .about-feat-desc { color: #A8B7C7 !important; }

.hangul-feature-grid > * {
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 639px) {
    .hangul-feature-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 420px) {
    #info-subtab-about .about-pillar-grid,
    #info-subtab-about .about-feature-grid {
        grid-template-columns: 1fr !important;
    }

    #info-subtab-about .about-pillar-grid > .bg-white,
    #info-subtab-about .about-feature-grid > .about-feat-card {
        min-height: 104px;
    }
}

/* Final writing surface readability override. Keep this at the end so it wins over
   older modal and utility rules, and make mobile browsers load it via style.css?v=. */
body #post-modal-content input,
body #post-modal-content textarea,
body #post-modal-content select,
body #edu-apply-modal-content input,
body #edu-apply-modal-content textarea,
body #edu-apply-modal-content select,
body #infoboard-modal-content input,
body #infoboard-modal-content textarea,
body #infoboard-modal-content select,
body #comment-detail-modal-content input,
body #comment-detail-modal-content textarea,
body #edit-modal input,
body #edit-modal textarea,
body #edit-modal select,
body #ta-write-modal input,
body #ta-write-modal textarea,
body #ta-write-modal select {
    font-size: var(--fs-base) !important;
}

body #post-modal-content label,
body #post-modal-content button,
body #post-modal-content #modal-warning-text,
body #post-modal-content #char-counter,
body #edu-apply-modal-content label,
body #edu-apply-modal-content button,
body #infoboard-modal-content label,
body #infoboard-modal-content button,
body #comment-detail-modal-content label,
body #comment-detail-modal-content button,
body #comment-detail-modal-content #comment-char-counter,
body #edit-modal label,
body #edit-modal button,
body #ta-write-modal label,
body #ta-write-modal button {
    font-size: var(--fs-sm) !important;
}

/* Mobile nav role split: bottom bar owns primary movement and writing;
   the top hamburger owns My Page, DM, settings, and admin utilities. */
#mobile-menu-wrap {
    display: none;
}

.mobile-menu-btn {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: #102238;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
}

.mobile-menu-badge,
.mobile-menu-count {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #ef4444;
    color: #ffffff;
    font-size: var(--fs-3xs);
    font-weight: 900;
    line-height: 18px;
    text-align: center;
}

.mobile-menu-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    border: 2px solid #ffffff;
}

.mobile-menu-panel {
    position: absolute;
    top: 44px;
    right: 0;
    width: min(250px, calc(100vw - 24px));
    max-height: calc(100dvh - 96px);
    overflow-y: auto;
    padding: 10px;
    border-radius: 18px;
    border: 1px solid var(--tt-border);
    background: var(--tt-surface);
    box-shadow: 0 20px 54px rgba(15, 32, 50, 0.22);
    z-index: 80;
}

.mobile-menu-title {
    padding: 7px 10px 9px;
    color: var(--tt-text-muted);
    font-size: var(--fs-xs);
    font-weight: 900;
}

.mobile-notif-box {
    margin-bottom: 8px;
    padding: 10px;
    border-radius: 14px;
    border: 1px solid var(--tt-border);
    background: var(--tt-bg-soft);
}

.mobile-notif-box.hidden {
    display: none !important;
}

.mobile-notif-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--tt-text);
    font-size: var(--fs-xs);
    font-weight: 900;
}

.mobile-notif-head span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.mobile-notif-head button {
    color: #2c8a9e;
    font-size: var(--fs-2xs);
    font-weight: 900;
}

.mobile-notif-summary {
    margin-top: 5px;
    color: var(--tt-text-muted);
    font-size: var(--fs-2xs);
    font-weight: 800;
}

.mobile-notif-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.mobile-notif-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    padding: 8px;
    border-radius: 11px;
    background: var(--tt-surface);
    border: 1px solid var(--tt-border);
    text-align: left;
}

.mobile-notif-item.unread {
    border-color: rgba(77, 157, 173, 0.45);
    box-shadow: inset 3px 0 0 #4d9dad;
}

.mobile-notif-icon {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-width: 1px;
    font-size: var(--fs-2xs);
}

.mobile-notif-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--tt-text);
    font-size: var(--fs-2xs);
    font-weight: 800;
}

.mobile-notif-copy small,
.mobile-notif-empty {
    color: var(--tt-text-muted);
    font-size: var(--fs-3xs);
    font-weight: 700;
    line-height: 1.35;
}

.mobile-notif-empty {
    padding: 6px 2px 2px;
}

.mobile-menu-item {
    width: 100%;
    min-height: 42px;
    padding: 10px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: transparent;
    color: var(--tt-text);
    font-size: var(--fs-sm);
    font-weight: 800;
    text-align: left;
}

.mobile-menu-item.hidden {
    display: none !important;
}

.mobile-menu-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.mobile-menu-item:hover,
.mobile-menu-item:active {
    background: var(--tt-bg-soft);
}

.mobile-menu-item.danger {
    color: #dc2626;
}

.mobile-menu-item.mobile-admin-only {
    color: #b45309;
    background: rgba(251, 146, 60, 0.10);
}

html.layout-mobile #mobile-menu-wrap {
    display: block;
}

html.layout-mobile #notif-bell-wrapper {
    display: none !important;
}

html.layout-mobile #tab-btn-setting {
    display: none !important;
}

html.dark-theme .mobile-menu-panel {
    background: var(--tt-surface);
    border-color: var(--tt-border);
}

html.dark-theme .mobile-menu-btn {
    background: var(--tt-bg-soft);
    border: 1px solid var(--tt-border);
}

/* Korean dictionary lookup popover */
.dictionary-lookup-button {
    position: fixed;
    z-index: 11000;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border: 0;
    border-radius: 12px;
    background: #0f1f34;
    color: #f8fafc;
    font-size: var(--fs-xs);
    font-weight: 800;
    box-shadow: 0 12px 28px rgba(15,31,52,.25);
    cursor: pointer;
}
.dictionary-lookup-button.hidden {
    display: none !important;
}
.dictionary-popover {
    position: fixed;
    right: 14px;
    bottom: 86px;
    z-index: 11010;
    width: min(360px, calc(100vw - 28px));
    max-height: min(520px, calc(100vh - 130px));
    overflow: hidden;
    border: 1px solid rgba(37,99,235,.18);
    border-radius: 18px;
    background: rgba(255,255,255,.98);
    color: #0f172a;
    box-shadow: 0 18px 50px rgba(15,23,42,.22);
}
.dictionary-popover.hidden {
    display: none !important;
}
.dictionary-popover-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 14px 10px;
    border-bottom: 1px solid rgba(226,232,240,.9);
}
.dictionary-popover-kicker {
    display: block;
    margin-bottom: 3px;
    font-size: var(--fs-3xs);
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #0e8fa1;
}
#dictionary-popover-term {
    display: block;
    font-size: var(--fs-base);
    line-height: 1.25;
}
#dictionary-popover-close {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 10px;
    background: #eef6f8;
    color: #475569;
    cursor: pointer;
}
.dictionary-popover-body {
    max-height: min(440px, calc(100vh - 210px));
    overflow-y: auto;
    padding: 12px 14px 14px;
}
.dictionary-source {
    margin-bottom: 8px;
    color: #64748b;
    font-size: var(--fs-2xs);
    font-weight: 800;
}
.dictionary-entry {
    padding: 11px 0;
    border-top: 1px solid rgba(226,232,240,.9);
}
.dictionary-entry:first-of-type {
    border-top: 0;
}
.dictionary-entry-title {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-bottom: 5px;
}
.dictionary-entry-title strong {
    font-size: var(--fs-sm);
}
.dictionary-entry-title span {
    color: #0e8fa1;
    font-size: var(--fs-3xs);
    font-weight: 900;
}
.dictionary-entry p {
    margin: 0;
    color: #334155;
    font-size: var(--fs-sm);
    line-height: 1.55;
}
.dictionary-entry em {
    display: block;
    margin-top: 7px;
    color: #64748b;
    font-size: var(--fs-xs);
    font-style: normal;
    line-height: 1.5;
}
.dictionary-popover-empty {
    margin: 0;
    color: #475569;
    font-size: var(--fs-sm);
    line-height: 1.5;
}
.dictionary-popover-hint {
    margin: 8px 0 0;
    color: #0e8fa1;
    font-size: var(--fs-xs);
    font-weight: 800;
    line-height: 1.45;
}
.dictionary-license {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(226,232,240,.9);
    color: #94a3b8;
    font-size: var(--fs-3xs);
    line-height: 1.5;
}
.dictionary-license a {
    color: #0e8fa1;
    text-decoration: underline;
}
html.dark-theme body .dictionary-popover {
    border-color: rgba(45,212,191,.22);
    background: rgba(15,31,52,.98);
    color: #f8fafc;
    box-shadow: 0 18px 50px rgba(0,0,0,.35);
}
html.dark-theme body .dictionary-popover-head,
html.dark-theme body .dictionary-entry {
    border-color: rgba(148,163,184,.18);
}
html.dark-theme body #dictionary-popover-close {
    background: rgba(148,163,184,.12);
    color: #cbd5e1;
}
html.dark-theme body .dictionary-source,
html.dark-theme body .dictionary-entry em,
html.dark-theme body .dictionary-popover-empty {
    color: #cbd5e1;
}
html.dark-theme body .dictionary-entry p {
    color: #e2e8f0;
}
html.dark-theme body .dictionary-license {
    border-color: rgba(148,163,184,.18);
    color: #64748b;
}

/* ?€?€ ?덇굅???ㅽ겕 罹먯뒪耳€?대뱶 留덇컧 (2026-07-09) ?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€
   :not(.retro-theme) ?쒓굅濡??뱀씠?깆씠 ???④퀎 ??븘吏?紐⑤뜕(var --tt-*) 洹쒖튃??
   ?꾨옒 ??吏€?먯뿉?쒕쭔 援ъ떇 ?ㅽ겕 洹쒖튃??吏€誘€濡? 紐낆떆?곸쑝濡??밸?瑜??섎룎由곕떎. */
/* ===== GLOBAL TYPE-SCALE REMAP — 제거 완료 (2026-07-15) =====
   모든 rem 임의 크기 유틸리티가 tt-fs-* 토큰 클래스로 치환되어 리매핑 레이어가
   더 이상 필요 없다. md:/file: 변형 클래스만 원래부터 리매핑 밖이라 그대로 남아 있다. */

/* ToTalk card header: preserve the compact author/time hierarchy. */
.feed-author-name { font-size: var(--fs-2xs); }
.feed-post-timestamp { font-size: var(--fs-3xs); }

/* Feed action glyphs/counts match the compact display-name size. */
.feed-action-row,
.feed-action-row i {
    font-size: var(--fs-2xs) !important;
}

.feed-action-row button {
    min-width: 40px !important;
    min-height: 36px !important;
    padding: 7px 9px !important;
}

/* Main mobile feed: keep only the space needed by the action glyphs. */
@media (max-width: 839px) {
    #feed-list > div[id^="thread-"] {
        padding-bottom: 2px !important;
    }

    #feed-list > div[id^="thread-"] .feed-action-row {
        margin-top: 0 !important;
        padding-top: 0 !important;
        border-top: 0 !important;
    }

    #feed-list > div[id^="thread-"] .feed-action-row button {
        min-height: 28px !important;
        padding: 2px 9px !important;
    }
}

/* ===== 화면별 크기 보정 (2026-07-14 사용자 피드백) =====
   #id 스코프라 위의 전역 리매핑보다 우선한다. 값은 반드시 스케일 토큰만 사용. */

/* 로그인/회원가입 모달: 전 요소 한 단계 확대.
   (임의 크기 클래스는 tt-fs-*로 치환 완료 — 표준 text-xs/text-sm 확대만 남음) */
#auth-modal-content .text-xs { font-size: var(--fs-sm) !important; }
#auth-modal-content .text-sm { font-size: var(--fs-base) !important; }
#auth-modal-content input,
#auth-modal-content select,
#auth-modal-content textarea { font-size: var(--fs-base) !important; }

/* Keep consent checkboxes out of the modal's 44px text-input treatment. */
#auth-modal-content input[type="checkbox"] {
    width: 14px !important;
    min-width: 14px !important;
    height: 14px !important;
    min-height: 14px !important;
    padding: 0 !important;
    border-radius: 3px !important;
    box-shadow: none !important;
    accent-color: var(--tt-primary);
}

#auth-modal-content input[type="checkbox"]:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* 레벨 자가진단 모달: 문항/선택지/버튼/결과 확대.
   (임의 크기 클래스는 tt-fs-*로 치환 완료 — 표준 text-xs 확대만 남음) */
#level-test-modal .text-xs { font-size: var(--fs-sm) !important; }

/* 학습 대시보드(TOPIK>학습 미러 + 마이페이지>학습): 작은 글씨 확대.
   (임의 크기 클래스는 tt-fs-*로 치환 완료 — 표준 text-xs 확대만 남음) */
#topik-learning-study-mount .text-xs,
#mypage-sub-content-study .text-xs { font-size: var(--fs-sm) !important; }

/* 마이페이지/관리자(#view-setting): 임의 크기 클래스는 tt-fs-*로 치환 완료(2026-07-15) */

.dark-theme .bg-brand-50.text-brand-300, .dark-theme .bg-brand-50.text-brand-400, .dark-theme .bg-brand-50.text-brand-500, .dark-theme .bg-brand-50.text-brand-600 { color: var(--tt-primary) !important; }
html.dark-theme.layout-desktop #bottom-nav { background-color: var(--tt-surface-opaque) !important; border-right-color: rgb(41, 66, 95) !important; }
.dark-theme input, .dark-theme textarea, .dark-theme select { color: rgb(234, 242, 248) !important; }

/* Compact comment-detail header while keeping a touch-friendly back control. */
body #comment-detail-modal-content {
    padding-top: 0 !important;
}

body #comment-detail-modal-header {
    min-height: 44px;
    padding: 4px 0 !important;
    gap: 8px !important;
}

body #comment-detail-modal-header > button {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
}

body #comment-detail-modal-scroll {
    margin-top: 8px !important;
}

/* Compact ToTalk composer header and honor the textarea's eight visible rows. */
body #post-modal-content {
    padding-top: 0 !important;
}

body #post-modal-header {
    min-height: 44px;
    padding: 4px 0 !important;
    gap: 8px !important;
}

body #post-modal-header > button {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
}

body #post-modal-scroll {
    margin-top: 8px !important;
}

@media (max-width: 839px) {
    body #post-text {
        min-height: calc(13.6em + 1.5rem + 2px) !important;
        height: calc(13.6em + 1.5rem + 2px) !important;
        max-height: calc(13.6em + 1.5rem + 2px) !important;
    }
}

/* Comment/original and quote composer typography mirrors the main feed. */
body #comment-detail-modal-content,
body #post-modal-content {
    font-size: var(--fs-xs) !important;
}

body #comment-detail-modal-content input,
body #comment-detail-modal-content textarea,
body #comment-detail-modal-content select,
body #post-modal-content input,
body #post-modal-content textarea,
body #post-modal-content select {
    font-size: var(--fs-feed-body) !important;
}

body #comment-detail-modal-content label,
body #comment-detail-modal-content button,
body #comment-detail-modal-content #comment-char-counter,
body #post-modal-content label,
body #post-modal-content button,
body #post-modal-content #char-counter {
    font-size: var(--fs-2xs) !important;
}

body #comment-detail-modal-header h3,
body #post-modal-header h3 {
    font-size: var(--fs-xs) !important;
}

body #comment-detail-modal-content .thread-body-clamp,
body #post-modal-content #quote-preview-body {
    font-size: var(--fs-feed-body) !important;
}

body #comment-detail-modal-content .feed-author-name {
    font-size: var(--fs-2xs) !important;
}

body #comment-detail-modal-content .feed-post-timestamp {
    font-size: var(--fs-3xs) !important;
}

body #comment-detail-modal-content .feed-action-row,
body #comment-detail-modal-content .feed-action-row i,
body #comment-detail-modal-content .feed-action-row button {
    font-size: var(--fs-2xs) !important;
}

body #post-modal-content #modal-warning-text,
body #draft-prompt-modal,
body #draft-prompt-modal .text-sm {
    font-size: var(--fs-xs) !important;
}

body #draft-prompt-modal button {
    font-size: var(--fs-2xs) !important;
}

/* Info-board composer follows the same compact typography hierarchy. */
body #infoboard-modal-content {
    font-size: var(--fs-xs) !important;
}

body #infoboard-modal-content input,
body #infoboard-modal-content textarea,
body #infoboard-modal-content select {
    font-size: var(--fs-feed-body) !important;
}

/* ── Continuous conversation flow: quote source + inline reply trail ─────── */
.tt-quote-trail {
    position: relative;
    margin-top: 10px;
    padding-left: 12px;
    border-left: 2px solid var(--tt-primary);
    text-align: left;
}

.tt-quote-trail::before {
    content: "";
    position: absolute;
    left: -5px;
    top: -1px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--tt-primary);
    box-shadow: 0 0 0 3px var(--tt-primary-soft);
}

.tt-quote-bridge,
.tt-quote-author-row,
.tt-feed-conversation-heading,
.tt-feed-reply-meta,
.tt-conversation-summary,
.tt-conversation-reply-header {
    display: flex;
    align-items: center;
}

.tt-quote-bridge {
    justify-content: space-between;
    gap: 8px;
    min-height: 24px;
    margin-bottom: 5px;
}

.tt-quote-bridge-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--tt-primary);
    font-size: var(--fs-3xs);
    font-weight: 800;
}

.tt-quote-bridge-label i {
    transform: rotate(90deg);
}

.tt-quote-open-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    min-height: 24px !important;
    padding: 0 2px !important;
    color: var(--tt-text-muted) !important;
    background: transparent !important;
    border: 0 !important;
    font-size: var(--fs-3xs) !important;
    font-weight: 700;
}

.tt-quote-open-btn:hover {
    color: var(--tt-primary) !important;
}

.tt-quote-source {
    padding: 10px 11px;
    border: 1px solid var(--tt-border);
    border-radius: 4px 12px 12px 12px;
    background: var(--tt-bg-soft);
}

.tt-quote-author-row {
    gap: 8px;
    margin-bottom: 7px;
}

.tt-quote-body {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    color: var(--tt-text-secondary);
    font-size: var(--fs-feed-body);
    font-weight: 400;
    line-height: 1.55;
    white-space: pre-line;
}

.tt-quote-trail-detail .tt-quote-body {
    -webkit-line-clamp: 7;
}

.tt-quote-link-preview {
    margin-top: 8px;
}

.tt-quote-mask-warning {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    border: 1px solid rgb(253 230 138);
    border-radius: 9px;
    background: rgb(255 251 235);
}

.tt-quote-appeal-btn {
    align-self: flex-start;
    min-height: 26px !important;
    padding: 3px 8px !important;
    border: 0 !important;
    border-radius: 7px;
    background: var(--tt-text) !important;
    color: var(--tt-surface) !important;
    font-size: var(--fs-3xs) !important;
    font-weight: 800;
}

.tt-feed-conversation {
    padding-top: 7px;
    border-top: 1px dashed var(--tt-border);
}

.tt-feed-conversation-heading {
    width: 100%;
    justify-content: space-between;
    min-height: 28px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--tt-primary) !important;
    font-size: var(--fs-2xs) !important;
    font-weight: 800;
    text-align: left;
}

.tt-feed-conversation-heading > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tt-feed-conversation-list {
    padding-top: 3px;
}

.tt-feed-reply,
.tt-conversation-reply {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    column-gap: 9px;
}

.tt-feed-reply-rail,
.tt-conversation-reply-rail {
    position: relative;
    min-height: 34px;
}

.tt-feed-reply-rail > div,
.tt-conversation-reply-rail > div {
    position: relative;
    z-index: 1;
}

.tt-conversation-line {
    position: absolute;
    z-index: 0;
    left: 13px;
    top: 27px;
    bottom: -1px;
    width: 2px;
    border-radius: 999px;
    background: var(--tt-border);
}

.tt-feed-reply.is-last .tt-conversation-line,
.tt-conversation-reply.is-last .tt-conversation-line {
    display: none;
}

.tt-feed-reply-content {
    display: block !important;
    min-width: 0;
    min-height: 0 !important;
    padding: 2px 0 9px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--tt-text-secondary) !important;
    text-align: left;
}

.tt-feed-reply-meta {
    gap: 7px;
    min-width: 0;
    margin-bottom: 2px;
    font-size: var(--fs-3xs);
    line-height: 1.25;
}

.tt-feed-reply-meta strong {
    overflow: hidden;
    color: var(--tt-text);
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tt-feed-reply-meta span {
    flex-shrink: 0;
    color: var(--tt-text-muted);
}

.tt-feed-reply-body {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--tt-text-secondary);
    font-size: var(--fs-feed-body);
    font-weight: 400;
    line-height: 1.45;
    white-space: normal;
}

.tt-feed-conversation-more {
    display: flex !important;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 28px !important;
    padding: 0 0 0 9px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--tt-text-muted) !important;
    font-size: var(--fs-3xs) !important;
    font-weight: 700;
    text-align: left;
}

.tt-feed-conversation-more:hover {
    color: var(--tt-primary) !important;
}

.tt-conversation-gap-dot {
    width: 9px;
    height: 9px;
    border: 2px solid var(--tt-primary);
    border-radius: 999px;
    background: var(--tt-surface);
}

/* Full conversation view: one root and a single readable reply rail. */
.tt-conversation-root {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 4px 2px 10px;
}

.tt-conversation-root::after {
    content: "";
    position: absolute;
    left: 15px;
    bottom: -24px;
    width: 2px;
    height: 25px;
    border-radius: 999px;
    background: var(--tt-border);
}

.tt-conversation-summary {
    justify-content: space-between;
    min-height: 32px;
    margin-left: 38px;
    padding: 0 2px 0 0;
    color: var(--tt-text-muted);
    font-size: var(--fs-3xs);
    font-weight: 800;
}

.tt-conversation-summary > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tt-conversation-summary strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--tt-primary-soft);
    color: var(--tt-primary);
    font-size: var(--fs-3xs);
}

.tt-conversation-list {
    display: block;
}

.tt-conversation-reply {
    padding-bottom: 12px;
}

.tt-conversation-reply-content {
    min-width: 0;
    padding: 2px 0 12px;
    border-bottom: 1px solid var(--tt-border);
}

.tt-conversation-reply.is-last .tt-conversation-reply-content {
    padding-bottom: 2px;
    border-bottom: 0;
}

.tt-conversation-reply-header {
    min-width: 0;
    gap: 6px;
    margin-bottom: 5px;
}

.tt-conversation-reply-body {
    color: var(--tt-text-secondary) !important;
    font-size: var(--fs-feed-body) !important;
    font-weight: 400;
    line-height: 1.55;
}

.tt-conversation-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 5px;
    border-radius: 999px;
    font-size: var(--fs-3xs);
    font-weight: 800;
}

.tt-conversation-badge.is-premium {
    background: rgb(245 243 255);
    color: rgb(109 40 217);
}

.tt-conversation-badge.is-secret {
    background: rgb(255 251 235);
    color: rgb(180 83 9);
}

.tt-conversation-delete {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 26px;
    min-width: 26px;
    height: 26px;
    min-height: 26px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px;
    background: transparent !important;
    color: rgb(225 29 72) !important;
    font-size: var(--fs-3xs) !important;
}

.tt-conversation-delete:hover {
    background: rgb(255 241 242) !important;
}

.tt-conversation-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 88px;
    margin-left: 38px;
    color: var(--tt-text-muted);
    font-size: var(--fs-2xs);
}

html.dark-theme .tt-quote-mask-warning {
    border-color: rgb(120 85 30);
    background: rgb(55 42 23);
}

html.dark-theme .tt-conversation-badge.is-premium {
    background: rgb(53 36 83);
    color: rgb(216 180 254);
}

html.dark-theme .tt-conversation-badge.is-secret {
    background: rgb(69 48 24);
    color: rgb(253 186 116);
}

@media (max-width: 839px) {
    body #view-sns-feed .tt-feed-conversation {
        margin-top: 8px !important;
        padding-top: 4px;
    }

    body #view-sns-feed .tt-feed-conversation-heading {
        min-height: 36px !important;
        padding: 0 !important;
    }

    body #view-sns-feed .tt-feed-conversation-list {
        padding-top: 1px;
    }

    body #view-sns-feed .tt-feed-reply-content {
        min-height: 40px !important;
        padding: 0 0 5px !important;
    }

    body #view-sns-feed .tt-feed-conversation-more {
        min-height: 36px !important;
        padding: 0 0 0 9px !important;
    }

    .tt-feed-reply-meta {
        margin-bottom: 1px;
    }

    .tt-feed-reply-body {
        -webkit-line-clamp: 1;
        line-height: 1.35;
    }

    .tt-quote-trail {
        margin-top: 8px;
        padding-left: 10px;
    }

    .tt-quote-source {
        padding: 8px 9px;
    }

    body #comment-detail-modal .tt-quote-bridge {
        min-height: 28px;
        margin-bottom: 4px;
    }

    body #comment-detail-modal .tt-quote-open-btn {
        min-height: 28px !important;
        padding: 0 !important;
    }

    .tt-quote-trail-detail .tt-quote-body {
        -webkit-line-clamp: 4;
    }

    .tt-quote-author-row {
        margin-bottom: 5px;
    }

    .tt-quote-author-row .feed-author-name,
    .tt-quote-author-row .feed-post-timestamp {
        line-height: 1.25;
    }

    .tt-quote-link-preview {
        margin-top: 6px;
    }

    .tt-quote-link-preview > a {
        min-height: 64px;
        gap: 8px !important;
        padding: 6px !important;
        border-radius: 10px;
    }

    .tt-quote-link-preview > a > .shrink-0 {
        width: 52px !important;
        height: 52px !important;
        border-radius: 7px;
    }

    .tt-quote-link-preview > a > .min-w-0 {
        gap: 2px !important;
    }

    .tt-quote-link-preview > a > .min-w-0 > span:nth-child(3) {
        display: none;
    }

    body #comment-detail-modal-scroll {
        padding-right: 0 !important;
    }
}

body #infoboard-modal-content label,
body #infoboard-modal-content button {
    font-size: var(--fs-2xs) !important;
}

body #infoboard-modal-content #infoboard-modal-title {
    font-size: var(--fs-xs) !important;
}

body #infoboard-modal-content input[type="file"]::file-selector-button {
    font-size: var(--fs-3xs) !important;
}