/* 기본 레이아웃 */
:root {
    --side-panel-width: 500px;
}

html,
body {
    margin: 0;
    padding: 0;
    /*   body 배경색   */
    background-color: #FAF3E1;
    /* 모바일 가로 흔들림 방지: html에도 걸어야 확실히 잡힘 */
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    /* 좌우 오버스크롤(고무줄) 바운스 방지 */
    overscroll-behavior-x: none;
}

body {
    font-family: 'Noto Sans KR', sans-serif;

    min-height: 100vh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

.container {
    max-width: 1400px;
    width: 100%;
    background-color: #FAF3E1;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    position: relative;
    transition: margin-right 0.3s;
}




.app-shell {
    flex: 1;
    min-height: calc(100vh - 64px);
    padding: 20px;
    box-sizing: border-box;
    display: flex;
}

.app-header {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    /*     padding: 0 16px; */
    background: #495256;
    position: sticky;
    top: 0;
    z-index: 2500;
    box-shadow: 0 -1px 0 #495256;
}

.menu-toggle {
    position: absolute;
    left: 16px;
    width: 32px;
    height: 32px;
    border-radius: 0;
    background: transparent;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.header-svg-icon {
    width: 26px;
    height: 26px;
    display: block;
}

.header-title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-decoration: none;
    color: inherit;
}

.header-icon {
    width: 30px;
    height: 30px;
}

.header-main-title {
    color: #f2ede8;

    font-weight: 700;
    line-height: 1.1;
}

.header-sub-title {
    color: #e5dad1;
    font-size: 9px;
    font-weight: 700;
}

.main-sidebar {
    position: fixed;
    top: 0;
    left: -80vw;
    width: 70vw;
    max-width: 350px;
    height: 100vh;
    height: 100dvh;
    background: #82907a;
    box-shadow: 3px 0 20px rgba(0, 0, 0, 0.2);
    z-index: 3100;
    transition: left 0.25s ease;
    padding: 18px 14px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.main-sidebar.open {
    left: 0;
}

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 3050;
}

.sidebar-overlay.show {
    display: block;
}

.sidebar-brand {
    background: #fbf9f7;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;

    margin-left: -14px;
    margin-right: -14px;
    margin-top: -18px;
}

.sidebar-brand-icon {
    width: 28px;
    height: 28px;
}

.sidebar-main-title {
    font-size: 16px;
    color: #82907a;
    font-weight: 700;
    line-height: 1.1;
}

.header-auth-controls {
    position: absolute;
    right: clamp(52px, 12vw, 180px);
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-user-nickname {
    color: #f2ede8;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.top-auth-btn-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}


.sidebar-auth-btn-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.top-auth-btn-img {
    height: 28px;
    width: auto;
    display: block;
}

.header-home-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    text-decoration: none;
    width: 28px;
    height: 28px;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}

.sidebar-auth-wrap {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid rgba(250, 236, 185, 0.45);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sidebar-user-nickname {
    color: #fbf9f7;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
    text-align: center;
}

.sidebar-auth-btn-img {
    height: 40px;
    width: auto;
    display: block;
}

.admin-bottom-wrap {
    width: 100%;
    padding: 0 20px 16px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.admin-bottom-divider {
    width: min(980px, 100%);
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    margin: 0;
}

.admin-bottom-link {
    text-decoration: none;
    color: #4e342e;
    border: 1px solid rgba(78, 52, 46, 0.6);
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: lowercase;
    background: #fff;
}

.home-page-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 24px;
}

.home-card {
    width: min(720px, 100%);
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    color: #4e342e;
}

.sidebar-sub-title {
    font-size: 11px;
    color: #82907a;
    font-weight: 700;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    background: #82907a;
    margin-left: -14px;
    margin-right: -14px;
    padding: 0 14px 10px 14px;
    border: none;
    border-radius: 0;

}

.sidebar-link {
    display: block;
    text-decoration: none;
    color: #fbf9f7;
    background: #82907a;
    padding: 10px 12px;
    width: 100%;
    text-align: center;
    border-radius: 0;
    font-weight: 600;
    border: none;
    box-shadow: none;
    border-bottom: 1px solid rgba(250, 236, 185, 0.45);
}

.sidebar-link:hover,
.sidebar-link.active {
    background: #82907a;
    color: #fbf9f7;
}

.sidebar-section-divider {
    display: block;
    width: calc(100% + 28px);
    box-sizing: border-box;
    text-align: center;
    padding: 10px 12px;
    margin: 0 -14px;
    background: linear-gradient(180deg, #efe3d1 0%, #e4d2bb 100%);
    color: #6f5a48;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.02em;
    border-top: 1px solid rgba(255, 247, 237, 0.85);
    border-bottom: 1px solid rgba(111, 90, 72, 0.14);
}

/* 타이틀 */
h1 {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    font-size: 24px;
    gap: 8px;
    flex-shrink: 0;
    margin-top: 0;
}

.title-main {
    color: #4e342e;
    font-weight: 700;
}

.title-sub {
    color: #a1887f;
    font-weight: 700;
    font-size: 0.75em;
    margin-top: 4px;
}

#btn-home-abs {
    position: absolute;
    top: 5px;
    left: 0;
    width: 30px;
    height: 30px;
    cursor: pointer;
    z-index: 100;
    transition: transform 0.3s;
    opacity: 0.7;
}

#btn-home-abs:hover {
    transform: scale(1.1);
    opacity: 1;
}

/* 입력 영역 */
.input-area {
    background: white;
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    margin-bottom: 10px;
    display: flex;
    gap: 10px;
    flex-shrink: 0;
    flex-direction: column;
}

.input-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.input-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.paste-btn {
    background: none;
    border: none;
    padding: 3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    opacity: 0.5;
    transition: opacity 0.15s, background 0.15s;
}

.paste-btn:hover {
    opacity: 1;
    background: #f3ede8;
}

.paste-btn.hidden {
    display: none;
}

.paste-icon {
    width: 18px;
    height: 18px;
    display: block;
}

.input-label {
    font-weight: bold;
    color: #8D6E63;
    font-size: 13px;
    margin-left: 5px;
}

.char-count {
    font-size: 12px;
    color: #888;
}

textarea {
    width: 100%;
    height: 70px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    resize: none;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    box-sizing: border-box;
}

textarea.is-analyzing {
    color: #9e9e9e;
    background-color: #f2f2f2 !important;
    opacity: 0.9;
}

/* 버튼들 */
.btn-row {
    display: flex;
    gap: 8px;
    justify-content: space-between;
    align-items: center;
}

.btn-actions {
    display: flex;
    gap: 8px;
}

.btn-textract-open {
    border: 0;
    border-radius: 8px;
    background: #d36c4f;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    height: 26px;
    padding: 0 8px;
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-textract-open:hover {
    background: #bc5f45;
}

.chunk-limit-hint {
    font-size: 12px;
    color: #8D6E63;
    font-weight: 500;
    margin-left: 4px;
}

.chunk-limit-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 4px;
    color: #8D6E63;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.chunk-limit-label {
    line-height: 1.2;
}

.chunk-limit-select {
    border: 1px solid #d8c1b4;
    border-radius: 999px;
    background: #fffaf6;
    color: #7a5a4d;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    height: 30px;
}

.chunk-limit-select:focus {
    outline: none;
    border-color: #c77c64;
    box-shadow: 0 0 0 3px rgba(199, 124, 100, 0.14);
}

.textract-pick-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.45);
    /* 상단 고정 헤더(2500)보다 위에 떠야 함 */
    z-index: 3300;
    padding: 16px;
    box-sizing: border-box;
}

.textract-pick-modal.open {
    display: flex;
}

.textract-pick-modal-card {
    width: min(520px, 100%);
    background: #33595c;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
    padding: 14px;
    box-sizing: border-box;
}

.textract-pick-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #faecb9;
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 10px;
}

.textract-pick-close-btn {
    background: transparent;
    border: 0;
    color: #faecb9;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    font-size: 24px;
    line-height: 1;
    padding: 0;
}

.textract-pick-close-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

.textract-pick-modal-body {
    background: #fbf9f7;
    border: 1px solid rgba(51, 89, 92, 0.18);
    border-radius: 10px;
    padding: 8px;
    min-height: 240px;
    max-height: 360px;
    overflow: auto;
}

.textract-pick-list {
    display: grid;
    gap: 6px;
}

.textract-pick-item {
    width: 100%;
    border: 0;
    background: transparent;
    color: #111;
    height: auto;
    border-radius: 8px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    cursor: pointer;
    font-weight: 500;
}

.textract-pick-item:hover {
    background: rgba(51, 89, 92, 0.08);
}

.textract-pick-item-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    display: block;
}

.textract-pick-item-title {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.textract-pick-empty,
.textract-pick-loading,
.textract-pick-error {
    color: #111;
    font-size: 13px;
    padding: 8px 6px;
}

.textract-pick-pagination {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.textract-pick-page-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: 13px;
    padding: 0;
}

.textract-pick-page-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.textract-pick-page-info {
    color: #fff;
    font-weight: 700;
    min-width: 52px;
    text-align: center;
}

.textract-doc-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.5);
    /* 상단 고정 헤더(2500)보다 위에 떠야 함 */
    z-index: 3350;
    padding: 18px;
    box-sizing: border-box;
}

.textract-doc-modal.open {
    display: flex;
}

.textract-doc-modal-card {
    width: min(1180px, 96vw);
    height: min(88vh, 920px);
    background: #f6f0e7;
    border-radius: 16px;
    border: 1px solid rgba(66, 53, 44, 0.12);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.textract-doc-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    background: #5c5249;
    color: #fff6ea;
    font-weight: 700;
    font-size: 15px;
}

.textract-doc-close-btn {
    background: transparent;
    border: 0;
    color: #fff6ea;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    font-size: 24px;
    line-height: 1;
    padding: 0;
}

.textract-doc-close-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

.textract-doc-modal-body {
    position: relative;
    flex: 1;
    background: #fbf9f7;
}

.textract-doc-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6a5a50;
    font-size: 14px;
    font-weight: 600;
    background: linear-gradient(180deg, rgba(251, 249, 247, 0.98) 0%, rgba(245, 239, 232, 0.98) 100%);
    z-index: 1;
}

.textract-doc-frame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #fff;
}

button {
    padding: 0 15px;
    height: 34px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.2s;
    font-size: 13px;
}




.btn-load {
    background-color: #5D4037;
    color: white;
}

.btn-analyze {
    background-color: #8D6E63;
    color: white;
}

.btn-clear {
    background-color: #e0e0e0;
    color: #555;
}

/* 구문 분석 버튼 */
.btn-syntax {
    background-color: #A1887F;
    color: white;
    font-size: 11px;
    padding: 4px 10px;
    height: auto;
    border-radius: 8px;
    opacity: 0.5;
    pointer-events: none;
}

.btn-syntax.ready {
    opacity: 1;
    pointer-events: auto;
    cursor: pointer;
    background-color: #5D4037;
}

.btn-syntax.is-loading {
    opacity: 1;
    pointer-events: none;
    cursor: wait;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background-color: #7d665f;
}

.btn-spinner {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: btn-spin 0.8s linear infinite;
    flex-shrink: 0;
}

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

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

.panel-action-buttons {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-find-text {
    margin-left: 10px;
    border: none;
    border-radius: 8px;
    background: #c98f72;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    height: 28px;
    cursor: pointer;
    transition: opacity 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
}

.btn-find-text:hover:not(:disabled) {
    background: #b87e62;
    transform: translateY(-1px);
}

.btn-find-text:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.syntax-level-select {
    height: 28px;
    border: 1px solid #d7ccc8;
    border-radius: 14px;
    padding: 0 10px;
    font-size: 12px;
    color: #5d4037;
    background: #fff;
    font-weight: 600;
}

/* 페이지네이션 */
.pagination-bar {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
    padding: 5px 15px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    min-height: 32px;
}

.pagination-info {
    font-size: 12px;
    color: #888;
    font-weight: 500;
    margin-right: 5px;
}

.pagination-buttons {
    display: flex;
    gap: 5px;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

.page-nav-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #ddd;
    background: #fff;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    padding: 0;
}

.page-nav-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.page-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid #ddd;
    background: white;
    color: #aaa;
    cursor: pointer;
    font-weight: bold;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-btn.active {
    border-color: #333;
    color: #000;
    background-color: #fff;
    border-width: 1.5px;
    transform: scale(1.05);
}

.page-btn.analyzed {
    background-color: #E3F2FD;
    color: #1976D2;
    border-color: #1976D2;
}

.page-btn.active.analyzed {
    background-color: #2196F3;
    color: white;
    border-color: #2196F3;
}

/* 결과 화면 */
.study-view {
    display: flex;
    flex: 1;
    min-height: 520px;
    gap: 20px;
    overflow: hidden;
    position: relative;
}

.panel {
    flex: 1;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    padding: 25px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-size: 17px;
}

.panel-title {
    font-weight: bold;
    color: #a1887f;
    margin-bottom: 15px;
    border-bottom: 2px solid #eee;
    padding-bottom: 8px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.content-box {
    overflow-y: auto;
    flex: 1;
    line-height: 1.7;
    padding-right: 5px;
}

.sent {
    display: inline;
    padding: 2px 4px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.en-sent:hover {
    background-color: #efebe9;
}

.ko-sent {
    color: #555;
    display: block;
    margin-bottom: 10px;
}

.sent.active {
    background-color: #fff9c4 !important;
    color: #3e2723;
    /* Keep glyph widths unchanged when selecting a sentence. */
    font-weight: inherit;
}

.find-match {
    background: #f6d88a;
    color: #4e342e;
    border-radius: 3px;
}

.find-match-active {
    background: #ffb74d;
    color: #2d160e;
    box-shadow: 0 0 0 1px rgba(141, 80, 24, 0.2);
}

/* [복구] 단어 호버 효과 */
.word {
    cursor: pointer;
    border-bottom: 1px dotted transparent;
}

.sent.active .word:hover {
    border-bottom: 1px dotted #8D6E63;
    background-color: rgba(141, 110, 99, 0.2);
    /* Highlight without changing glyph widths or line wrapping. */
}

/* [복구] 플레이스홀더 디자인 (#aaa로 연하게) */
.placeholder {
    text-align: center;
    color: #aaa;
    margin-top: 10%;
    font-weight: normal;
}

/*
         * ===================== 구문분석 패널 색상 수정 가이드 =====================
         * 이 아래 블록에서 구문분석(side panel) 관련 색을 한 번에 조정할 수 있어요.
         *
         * 1) 구문분석 페이지 배경색(사이드 패널 전체 배경)
         *    - 선택자: #side-panel
         *    - 속성: background-color
         *
         * 2) '구문 분석' 타이틀(패널 상단 큰 제목) 색상
         *    - 선택자: .side-title
         *    - 속성: color
         *
         * 3) [원문] 라벨 색상
         *    - 선택자: .syntax-origin-label
         *    - 속성: color
         *    - 참고: static/js/readstudy.js의 requestSyntax()에서
         *      `<p class="syntax-origin-label">[원문]</p>`로 렌더링됩니다.
         *
         * 4) 1) 직역, 2) 문장 뼈대 같은 각 소제목 색상
         *    - 선택자: .syntax-title
         *    - 속성: color
         *
         * 5) 알파벳(영어) 강조 색상
         *    - 선택자: .syntax-en
         *    - 속성: color
         *
         * 6) 한글 설명 본문 색상
         *    - 선택자: .syntax-body
         *    - 속성: color
         *
         * 참고)
         * - 섹션 경계선 색: .syntax-item 의 border-bottom
         * - 패널 기본 본문 텍스트 색: .side-content 의 color(필요시 추가)
         * ========================================================================
         */
/* === [수정] 사이드 패널 (PC 너비 550px 적용) === */
#side-panel {
    position: fixed;
    top: 0;
    right: calc(-1 * var(--side-panel-width));
    width: var(--side-panel-width);
    height: 100%;
    background-color: var(--c-surface, #FCF7EC);
    color: var(--c-ink, #243240);
    box-shadow: -10px 0 34px rgba(36, 50, 64, 0.16);
    transition: right 0.3s ease-in-out;
    z-index: 3000;
    padding: 22px 22px 18px;
    box-sizing: border-box;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

#side-panel.open {
    right: 0;
}

.side-title {
    font-size: 17px;
    font-weight: 800;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--c-border, #E4D9C3);
    padding-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--c-ink, #243240);
}

.side-content {
    font-size: 14px;
    line-height: 1.6;
    color: var(--c-ink, #243240);
}

/* 구문분석 결과 헤더(원문) */
.syntax-origin-label {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-primary, #3A6EA4);
}

.side-content > i {
    display: block;
    font-size: 14px;
    line-height: 1.6;
    color: var(--c-ink, #243240);
    background: var(--c-tint, #E9F0F7);
    border-radius: var(--radius-md, 12px);
    padding: 10px 14px;
}

.side-content > hr {
    border: none;
    border-top: 1px solid var(--c-border, #E4D9C3);
    opacity: 1 !important;
    margin: 16px 0 !important;
}

/* ── 구문분석 카드 컴포넌트 (.sx-*) ── */
.sx-card {
    background: #fff;
    border: 1px solid var(--c-border, #E4D9C3);
    border-radius: var(--radius-md, 12px);
    box-shadow: var(--shadow-1, 0 1px 3px rgba(36, 50, 64, .08));
    padding: 12px 14px;
    margin-bottom: 10px;
}

.sx-card--accent {
    border-color: var(--c-primary, #3A6EA4);
    background: var(--c-tint, #E9F0F7);
}

.sx-card-title {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--c-primary-deep, #2A5179);
}

.sx-card-body {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--c-ink, #243240);
}

.sx-quote {
    margin: 0;
    color: var(--c-ink, #243240);
}

.sx-empty {
    margin: 0;
    color: var(--c-muted, #6E7178);
    font-style: italic;
}

/* 라벨/값 그리드 (S·V·O·C 등) */
.sx-grid {
    display: grid;
    gap: 6px;
}

.sx-grid-row {
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: 10px;
    align-items: baseline;
}

.sx-grid-label {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--c-muted, #6E7178);
}

.sx-grid-val {
    color: var(--c-ink, #243240);
}

/* 리스트(단어·구문 포인트 등) */
.sx-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.sx-item {
    padding: 0;
}

.sx-item + .sx-item {
    border-top: 1px dashed var(--c-border, #E4D9C3);
    padding-top: 10px;
}

.sx-item-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 4px;
}

.sx-item-term {
    font-weight: 700;
    color: var(--c-ink, #243240);
}

.sx-item-quote {
    font-style: italic;
    color: var(--c-primary-deep, #2A5179);
}

.sx-badge {
    flex: none;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--c-primary-deep, #2A5179);
    background: var(--c-tint, #E9F0F7);
    border: 1px solid var(--c-border, #E4D9C3);
    border-radius: var(--radius-pill, 999px);
    padding: 1px 9px;
}

.sx-line {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 8px;
    align-items: baseline;
    margin-top: 2px;
}

.sx-k {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--c-muted, #6E7178);
}

.sx-v {
    color: var(--c-ink, #243240);
}

.syntax-loading-wrap {
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.syntax-loading-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
    color: var(--c-muted, #6E7178);
}

.syntax-loading-spinner {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 3.5px solid var(--c-border, #E4D9C3);
    border-top-color: var(--c-primary, #3A6EA4);
    animation: syntax-spin 0.8s linear infinite;
}

.syntax-loading-text {
    font-size: 13px;
    font-weight: 600;
    color: var(--c-muted, #6E7178);
}

@keyframes syntax-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* 구문분석 결과 안의 영어 토큰 강조 (라이트 테마) */
.syntax-en {
    color: var(--c-primary-deep, #2A5179);
    font-weight: 600;
}

.close-btn {
    cursor: pointer;
    font-size: 24px;
    line-height: 20px;
}

/* 구문 분석 사이드 패널 – 하단 닫기 버튼 */
.side-panel-close-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: auto;
    padding: 14px 0;
    border: none;
    border-top: 1px solid var(--c-border, #E4D9C3);
    background: transparent;
    color: var(--c-muted, #6E7178);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    width: 100%;
    height: auto;
    border-radius: 0;
    transition: color 0.2s, background 0.2s;
}

.side-panel-close-bottom svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    transition: transform 0.2s;
}

.side-panel-close-bottom:hover {
    color: var(--c-ink, #243240);
    background: var(--c-tint, #E9F0F7);
}

.side-panel-close-bottom:hover svg {
    transform: translateX(4px);
}

/* 로딩 표시 — 작은 스피너 칩 */
#loading-layer {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(252, 247, 236, 0.55);
    backdrop-filter: blur(2px);
    z-index: 10;
    border-radius: 12px;
}

.loading-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--c-ink, #243240);
    background: #fff;
    padding: 9px 18px 9px 16px;
    border-radius: var(--radius-pill, 999px);
    box-shadow: var(--shadow-2, 0 6px 20px rgba(36, 50, 64, .12));
    border: 1px solid var(--c-border, #E4D9C3);
    white-space: nowrap;
}

.loading-text::before {
    content: "";
    width: 16px;
    height: 16px;
    flex: none;
    border-radius: 50%;
    border: 2.5px solid var(--c-border, #E4D9C3);
    border-top-color: var(--c-primary, #3A6EA4);
    animation: syntax-spin 0.7s linear infinite;
}

#definition-popup {
    display: none;
    position: absolute;
    background: #4e342e;
    color: #fff;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    max-width: 260px;
    /* 상단 고정 헤더(2500)보다 위에 떠야 함 */
    z-index: 2600;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.idiom-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 3200;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

.idiom-modal.open {
    display: flex;
}

.idiom-modal-card {
    width: min(520px, 100%);
    max-height: 80vh;
    overflow-y: auto;
    border-radius: 12px;
    background: #fffaf4;
    border: 1px solid #e6d8c5;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    color: #4e342e;
}

.idiom-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    padding: 12px 14px;
    border-bottom: 1px solid #e6d8c5;
    color: #6d4c41;
}

.idiom-close-btn {
    border: none;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    color: #8d6e63;
    cursor: pointer;
    height: auto;
    padding: 0 4px;
}

.idiom-modal-body {
    padding: 14px;
    font-size: 14px;
    line-height: 1.6;
}

.find-text-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 3250;
    align-items: flex-start;
    justify-content: center;
    padding-top: 110px;
    box-sizing: border-box;
}

.find-text-modal.open {
    display: flex;
}

.find-text-modal-card {
    width: min(360px, calc(100% - 24px));
    background: #fffdf8;
    border: 1px solid #e8dacd;
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
    color: #5d4037;
    position: relative;
}

.find-text-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px 10px;
    border-bottom: 1px solid #efe3d7;
    font-weight: 700;
}

.find-text-close-btn {
    border: none;
    background: transparent;
    color: #8d6e63;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}

.find-text-modal-body {
    padding: 14px;
}

.find-text-input {
    width: 100%;
    border: 1px solid #dbc9ba;
    border-radius: 10px;
    background: #fff;
    color: #4e342e;
    font-size: 14px;
    padding: 10px 12px;
    box-sizing: border-box;
}

.find-text-input:focus {
    outline: none;
    border-color: #c77c64;
    box-shadow: 0 0 0 3px rgba(199, 124, 100, 0.14);
}

.find-text-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
}

.find-text-nav-btn {
    border: none;
    border-radius: 8px;
    width: 34px;
    height: 34px;
    background: #8d6e63;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.find-text-nav-btn:hover {
    background: #75594f;
}

.find-text-status {
    min-height: 18px;
    margin-top: 10px;
    color: #8a6a5a;
    font-size: 12px;
}

.find-text-toast {
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    background: rgba(69, 48, 42, 0.92);
    color: #fff7f1;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
    white-space: nowrap;
}

.find-text-toast.show {
    opacity: 1;
}

.idiom-loading-wrap {
    min-height: 92px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.idiom-loading-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(109, 76, 65, 0.2);
    border-top-color: #6d4c41;
    border-radius: 50%;
    animation: btn-spin 0.8s linear infinite;
}

.idiom-loading-text,
.idiom-loading,
.idiom-empty {
    color: #6d4c41;
    text-align: center;
}

.idiom-selected-sentence {
    font-style: italic;
    color: #6d4c41;
    margin-bottom: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #f6ede3;
    border: 1px solid #eadcc9;
}

.idiom-hl {
    background: #ffe082;
    color: #4e342e;
    border-radius: 3px;
    padding: 1px 2px;
    font-weight: 600;
    font-style: normal;
}

.idiom-hl-selected {
    background: #ffd54f;
    color: #3e2723;
    border-radius: 4px;
    padding: 1px 3px;
    font-weight: 700;
    font-style: normal;
    box-shadow: inset 0 0 0 1px rgba(191, 128, 0, 0.12);
}

.idiom-list {
    margin: 0;
    padding-left: 18px;
}

.idiom-item {
    margin-bottom: 10px;
}

.idiom-expression {
    font-weight: 700;
    color: #4e342e;
}

.idiom-meaning {
    color: #5d4037;
    margin-top: 2px;
}

/* 숙어 단어 선택 모드 */
.word.idiom-selected {
    background-color: #8e6965;
    color: #fff !important;
    border-radius: 3px;
    /* Paint the selection outside the word without adding layout space. */
    box-shadow: 0 0 0 1px #8e6965;
    border-bottom-color: transparent !important;
}

.btn-syntax.idiom-active {
    background-color: #8e6965 !important;
    color: #fff !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #8e6965;
}

@media (min-width: 769px) {
    .study-view {
        align-items: flex-start;
    }

    .panel {
        height: auto;
    }

    .content-box {
        flex: none;
        height: calc(1.7em * 18);
        max-height: calc(1.7em * 18);
        overflow-y: auto;
    }
}

@media (max-width: 768px) {
    :root {
        --side-panel-width: 85vw;
    }

    h1 {
        font-size: 18px;
    }

    .study-view {
        flex-direction: column;
    }

    .app-shell {
        padding: 12px;
        min-height: calc(100vh - 64px);
    }

    .header-main-title {
        font-size: 16px;
    }

    .header-title-wrap {
        width: calc(100% - 110px);
        justify-content: center;
    }

    .header-auth-controls {
        right: 60px;
    }

    .header-user-nickname {
        display: none;
    }

    .btn-row {
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 12px;
    }

    /* 1줄: from 추출메뉴 + 번역 모델 */
    .btn-textract-open {
        flex: 0 0 auto;
    }

    .btn-row > .chunk-limit-wrap:nth-of-type(1) {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* 2줄: 페이지당 글자수 단독 */
    .btn-row > .chunk-limit-wrap:nth-of-type(2) {
        flex: 1 1 100%;
    }

    /* 3줄: 페이지 분할 + CLEAR */
    .btn-actions {
        flex: 1 1 100%;
        justify-content: flex-end;
    }

    .chunk-limit-hint,
    .chunk-limit-wrap {
        margin-left: 0;
    }

    .textract-pick-modal-card {
        padding: 12px;
        border-radius: 12px;
    }

    .textract-pick-modal-body {
        min-height: 200px;
        max-height: 52vh;
    }

    .textract-doc-modal {
        padding: 10px;
    }

    .textract-doc-modal-card {
        width: 100%;
        height: min(92vh, 920px);
        border-radius: 12px;
    }

    .study-view {
        min-height: 0;
    }

    .panel-title {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* '영어' 제목은 단독 줄, 검색 버튼은 숙어/표현찾기와 같은 줄 */
    .panel-title-text {
        flex: 1 1 100%;
    }

    .btn-find-text {
        margin-left: 0;
    }

    .panel-action-buttons {
        margin-left: 0;
        flex-wrap: wrap;
    }

    .content-box {
        height: calc(1.7em * 6);
        max-height: calc(1.7em * 6);
        overflow-y: auto;
    }
}