/* ==========================================================================
   Base CSS - 프로젝트 기초
   - CSS 변수 (프로젝트 전용)
   - 브라우저 리셋
   - 공통 유틸리티 클래스
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Variables (프로젝트 전용)
   -------------------------------------------------------------------------- */
:root {
    /* Layout */
    /* --coach-navbar-height는 variables.css에서 관리 */
    --input-height: 70px;
    --sidebar-width: 250px;

    /* Components */
    --chat-bubble-radius: 18px;
    --code-block-radius: 16px;

    /* Scrollbar */
    --scrollbar-width: 6px;
    --scrollbar-color: hsl(var(--st-line));

    /* Grid */
    --grid-left-width: 65%;
    --grid-right-width: 35%;
    --grid-gutter: 1px;

    /* Content Styles - 편집창과 뷰어 공통 */
    --content-font-size: var(--st-text-base);
    --content-line-height: 1.6;
    --content-p-margin-top: 1.0rem;
    --content-p-margin-bottom: 0.5rem;
    --content-h1-margin-top: 2.5rem;
    --content-h1-margin-bottom: 1rem;
    --content-h2-margin-top: 2rem;
    --content-h2-margin-bottom: 0.75rem;
    --content-h3-font-size: 1.25rem;
    --content-h3-margin-top: 1.5rem;
    --content-h3-margin-bottom: 0.75rem;
    --content-h3-line-height: 1.4;
    --content-list-item-margin: 0.75rem;
    --content-empty-p-margin: 0;
    --content-empty-p-height: calc(var(--content-line-height) * 1em);
}

/* --------------------------------------------------------------------------
   Browser Reset (Tailwind에서 안 하는 것만)
   -------------------------------------------------------------------------- */

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

/* Body 기본 설정 */
body {
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Focus 스타일 통일 */
button:focus,
a:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid hsl(var(--st-brand));
    outline-offset: 2px;
}

/* Focus visible (키보드만) */
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
    outline: none;
}

/* --------------------------------------------------------------------------
   Global Scrollbar Style (전체 페이지 공통)
   -------------------------------------------------------------------------- */

/* Firefox */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-color) transparent;
}

/* WebKit (Chrome, Edge, Safari 등) */
html::-webkit-scrollbar {
    width: var(--scrollbar-width);
    height: var(--scrollbar-width);
}

html::-webkit-scrollbar-track {
    background: transparent;
}

html::-webkit-scrollbar-thumb {
    background: var(--scrollbar-color);
    border-radius: 9999px;
}

html::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--st-fg) / 0.3);
}

/* --------------------------------------------------------------------------
   Utility Classes (공통 유틸리티)
   -------------------------------------------------------------------------- */

/* Scrollable (스크롤바 통일) */
.scrollable {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-color) transparent;
}

.scrollable::-webkit-scrollbar {
    width: var(--scrollbar-width);
}

.scrollable::-webkit-scrollbar-track {
    background: transparent;
}

.scrollable::-webkit-scrollbar-thumb {
    background: var(--scrollbar-color);
    border-radius: 3px;
}

.scrollable::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--st-fg) / 0.3);
}

/* 가로 스크롤 */
.scrollable-x {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

.scrollable-x::-webkit-scrollbar {
    height: var(--scrollbar-width);
}

.scrollable-x::-webkit-scrollbar-thumb {
    background: var(--scrollbar-color);
    border-radius: 3px;
}

/* --------------------------------------------------------------------------
   Language Dropdown Scrollbar (언어 선택 드롭다운 스크롤바)
   -------------------------------------------------------------------------- */

/* Firefox */
.language-dropdown-menu > div {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-color) transparent;
}

/* WebKit (Chrome, Edge, Safari 등) */
.language-dropdown-menu > div::-webkit-scrollbar {
    width: var(--scrollbar-width);
}

.language-dropdown-menu > div::-webkit-scrollbar-track {
    background: transparent;
}

.language-dropdown-menu > div::-webkit-scrollbar-thumb {
    background: var(--scrollbar-color);
    border-radius: var(--coach-scrollbar-thumb-radius);
    transition: background 0.2s ease;
}

.language-dropdown-menu > div::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--st-fg) / 0.15);
}

/* --------------------------------------------------------------------------
   Language Dropdown Text Alignment (언어 선택 드롭다운 텍스트 정렬)
   국기 이모지와 언어명의 세로 정렬을 맞춤
   -------------------------------------------------------------------------- */
.language-btn span {
    /* 국기 이모지와 텍스트의 baseline 정렬을 맞춤 */
    /* flex-1과 함께 사용되므로 display: flex 사용 */
    display: flex;
    align-items: center;
    line-height: 1.5;
}

/* Text Utilities (Tailwind 보완) */
.text-wrap {
    word-break: keep-all;
    overflow-wrap: break-word;
    white-space: normal;
}

.text-nowrap {
    white-space: nowrap;
}

.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Loading */
.loading {
    position: relative;
    pointer-events: none;
    opacity: 0.6;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border: 2px solid hsl(var(--st-brand));
    border-top-color: transparent;
    border-radius: 50%;
}

/* Loading spinner keyframes */
@keyframes loading-spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Loading class */
.loading::after {
    animation: loading-spin 0.8s linear infinite;
}

/* Tailwind animate-spin 대체 */
.animate-spin {
    animation: spin 1s linear infinite;
}

/* Hidden */
.hidden {
    display: none !important;
}

.invisible {
    visibility: hidden;
}

/* --------------------------------------------------------------------------
   Helper Text (도움말 텍스트) - RTL 환경에서 문장부호 BiDi 문제 방지
   -------------------------------------------------------------------------- */
/* 기본: LTR 환경에서는 정상 동작 (부모의 direction 상속) */

/* RTL 환경에서 리스트 불릿을 오른쪽에 표시 */
[dir="rtl"] .helper-text ul,
[dir="rtl"] .helper-text ol {
    direction: rtl;
    list-style-position: outside;
    padding-right: 1.5em;
    padding-left: 0;
    text-align: right;
}

/* RTL 환경에서 리스트 아이템: 불릿은 오른쪽에 표시되도록 RTL 유지 */
/* 하지만 텍스트 내용은 LTR로 처리하여 문장부호 문제 방지 */
[dir="rtl"] .helper-text li {
    direction: ltr;
    unicode-bidi: embed;
    text-align: right;
    padding-right: 0;
    padding-left: 0;
    /* 불릿을 위한 공간은 ul의 padding-right로 확보 */
}

/* RTL 환경에서 리스트 아이템 내부의 모든 요소도 LTR 처리 */
[dir="rtl"] .helper-text li * {
    direction: ltr !important;
    unicode-bidi: isolate !important;
}

/* RTL 환경에서 일반 텍스트(리스트가 아닌)도 문장부호 문제 방지 */
[dir="rtl"] .helper-text p,
[dir="rtl"] .helper-text div:not(ul):not(ol):not(li) {
    direction: ltr !important;
    unicode-bidi: isolate !important;
    text-align: right !important;
}

/* helper-text 클래스가 직접 적용된 요소도 처리 */
[dir="rtl"] .helper-text:not(ul):not(ol):not(li) {
    direction: ltr !important;
    unicode-bidi: isolate !important;
    text-align: right !important;
}

/* --------------------------------------------------------------------------
   버튼 영역 RTL 대응
   -------------------------------------------------------------------------- */
/* RTL 환경에서 ml-auto (margin-left: auto)를 mr-auto (margin-right: auto)로 변환 */
[dir="rtl"] .lecture-extra-buttons,
[dir="rtl"] .discussion-extra-buttons,
[dir="rtl"] .course-extra-buttons {
    margin-left: 0 !important;
    margin-right: auto !important;
}