/* FanGraphs AI 칼럼 — 카드·모달 공용 스타일
   사용처: templates/login.html(서비스 선택 화면 카드), templates/ai_articles.html(리스트 페이지)
   렌더링: static/js/ai-articles.js */

.ai-card-list {
    display: flex;
    flex-direction: column;
}
.ai-card {
    text-align: left;
    background: #fff;
    border: none;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* 서비스 카드와 동일 */
    padding: 10px;
    cursor: pointer;
    font-family: inherit;
    width: 100%;
    height: 155px; /* 서비스 카드(155×155) 높이와 동일 */
    box-sizing: border-box;
    display: flex;
    gap: 10px;
    align-items: stretch;
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ai-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}
.ai-card:active { transform: translateY(0); }

/* 로딩 전 자리 확보용 스켈레톤 */
.ai-card-skeleton {
    pointer-events: none;
    animation: aiSkelPulse 1.3s ease-in-out infinite;
}
@keyframes aiSkelPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}
.ai-card-skeleton::before { /* 썸네일 자리 */
    content: '';
    flex: 0 0 100px;
    border-radius: 6px;
    background: #eef1f5;
}
.ai-card-skeleton::after { /* 텍스트 자리 */
    content: '';
    flex: 1;
    border-radius: 6px;
    background: #f4f6f9;
}

.ai-card-thumb {
    flex: 0 0 100px;
    border-radius: 6px;
    overflow: hidden;
    background: #e8ebf0;
}
.ai-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ai-card-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.ai-card-title {
    font-size: calc(12px + var(--ai-fs-delta, 0px)); /* 가−/가＋ 조절 연동 (리스트 페이지) */
    font-weight: 700;
    color: #333;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ai-card-summary {
    font-size: calc(11px + var(--ai-fs-delta, 0px)); /* 가−/가＋ 조절 연동 (리스트 페이지) */
    color: #666;
    line-height: 1.5;
    margin-top: 5px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* 썸네일 없는 글: 텍스트가 전체 폭 사용 + 요약 한 줄 더 */
.ai-card.no-thumb .ai-card-summary { -webkit-line-clamp: 5; }
.ai-card-meta {
    font-size: 9px;
    color: #999;
    margin-top: auto; /* 카드 바닥에 고정 */
    padding-top: 4px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}
.ai-card-meta .ai-meta-left {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ai-card-meta .ai-meta-source { /* 우하단 출처 표기 (항상 우측 정렬) */
    flex-shrink: 0;
    margin-left: auto;
    text-align: right;
    font-weight: 600;
    color: #1D467D;
    opacity: 0.85;
}
/* 원천 사이트별 기본 색상 (카드 출처 표기·필터 체크박스 라벨 공용)
   — .ai-card-meta .ai-meta-source(2클래스)보다 우선하도록 .ai-meta-source 결합형 병기 */
.src-fangraphs, .ai-meta-source.src-fangraphs { color: #2f9e44; } /* 초록 */
.src-bp,        .ai-meta-source.src-bp        { color: #c0392b; } /* 빨강 */
.src-savant,    .ai-meta-source.src-savant    { color: #1c7ed6; } /* 파랑 */
.src-tango,     .ai-meta-source.src-tango     { color: #e8590c; } /* 주황 */
.src-yagongso,  .ai-meta-source.src-yagongso  { color: #7048e8; } /* 보라 */

/* ── 전문 번역 모달 ── */
.ai-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 8px; /* 모바일: 화면에 거의 꽉 차게 */
    /* 상단: 12px + 노치/다이내믹 아일랜드 safe-area (08-26, 홈화면 앱 모드에서 상단 아일랜드에 걸리던 문제) */
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
    /* 하단 여백을 상단보다 넉넉히(28px) → 모달이 살짝 위로 올라가 홈바/브라우저 바에 하단 모서리가 안 잘림 */
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
}
.ai-modal-backdrop.open { display: flex; }
.ai-modal {
    background: #fff;
    border-radius: 12px;
    max-width: 680px;
    width: 100%;
    max-height: calc(100vh - 40px);
    /* svh=주소창이 보일 때의 최소 뷰포트 기준 → 주소창 유무와 무관하게 하단이 잘리지 않음
       (40px = 상단 12 + 하단 28, 상·하 safe-area 는 backdrop padding 과 동일하게 차감) */
    max-height: calc(100svh - 40px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    /* 본문 글자 크기는 :root 의 --ai-body-fs (리스트 페이지 가−/가+ 버튼이 조절) */
}
/* 넓은 화면: 최대 크기 제한 유지 */
@media (min-width: 768px) {
    .ai-modal-backdrop { padding: 20px; }
    .ai-modal { max-height: 90vh; }
}
.ai-modal-head {
    padding: 16px 20px 12px;
    border-bottom: 1px solid #eee;
    position: relative;
}
.ai-modal-title {
    font-size: 16px;
    font-weight: 700;
    color: #222;
    line-height: 1.4;
}
.ai-modal-meta {
    font-size: 10px;
    color: #999;
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap; /* 작성자·일시 + 주제 칩 */
}
.ai-meta-badge { /* AI 번역·요약 배지 칩 (요약 박스 끝 등) */
    background: #eef3fa;
    color: #1D467D;
    border: 1px solid #d9e4f2;
    border-radius: 5px;
    padding: 1px 6px;
    font-size: 9px;
    font-weight: 600;
    white-space: nowrap;
}
.ai-modal-body {
    padding: 14px 20px;
    overflow-y: auto;
    overscroll-behavior: contain; /* 팝업 내부 스크롤이 뒷배경으로 이어지지 않게 */
    font-size: calc(13px + var(--ai-fs-delta, 0px)); /* 가−/가＋ 조절 연동 */
    line-height: 1.7;
    color: #333;
}
.ai-modal-body p { margin: 0 0 12px; }
.ai-modal-body img { /* 본문 중간 이미지 ([IMG] 마커 렌더) — 클릭 시 라이트박스 확대 */
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
    margin: 4px auto 14px;
    cursor: zoom-in;
}
/* 이미지 확대 보기 (라이트박스) — 모달 위에 겹침 */
.ai-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.88);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 10px;
    cursor: zoom-out;
}
.ai-lightbox img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
}
.ai-modal-summary {
    background: #f2f5fa;
    border-left: 3px solid #1D467D;
    border-radius: 0 6px 6px 0;
    padding: 10px 12px;
    font-size: calc(12px + var(--ai-fs-delta, 0px)); /* 본문보다 1px 작게, 조절 연동 */
    line-height: 1.6;
    color: #444;
    margin-bottom: 14px;
}
/* 하단: 좌=[원문|번역] 세그먼트 · 중앙=원문 페이지 링크 · 우=닫기(X) */
.ai-modal-foot {
    padding: 10px 20px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap; /* 관리자 '재생성' 버튼이 추가돼도 좁은 화면에서 줄바꿈 */
}
.ai-modal-foot-left { display: flex; gap: 6px; align-items: center; }

/* ── 관리자 재생성 패널 (ai-regen.js) — 모달 룩(팀색·배지 칩·요약 박스 톤)에 맞춤 ──
   레이아웃: .ai-modal(flex column) 안에서 본문(.ai-modal-body)과 높이를 나눠 씀.
   패널은 뷰포트 높이의 최대 45svh, 이력(.ai-regen-hist)만 내부 스크롤 → 이력이 아무리 많아도
   패널·하단 버튼이 화면 밖으로 밀리지 않음.
   ⚠ 이력 영역은 min-height 필수(09-03) — 상시 규칙이 늘어 헤더+폼+규칙이 45svh 를 다 먹으면
   min-height:0 인 이력이 0px 로 눌려 제목만 남고 칸이 사라짐. 최소 높이를 보장하고
   그만큼 넘치는 건 패널(overflow-y:auto) 스크롤로 흡수.
   접기/펼치기(09-03): 규칙(.ai-rules.collapsed)·이력(.ai-regen-panel:not(.hist-open)) 기본 접힘,
   헤더(.ai-sec-toggle) 클릭 토글 — ▸/▾ 표식은 ::before. */
.ai-modal-regen { /* 하단 'AI 재생성' 버튼 — '원문' 토글과 같은 크기, 팀색 글자 */
    font-size: 12px;
    font-weight: 600;
    color: #1D467D;
    background: #eef3fa;
    border: 1px solid #d9e4f2;
    border-radius: 6px;
    padding: 4px 12px;
    cursor: pointer;
    font-family: inherit;
}
.ai-modal-regen:hover,
.ai-modal-regen.active { background: #1D467D; color: #fff; border-color: #1D467D; }
.ai-regen-panel {
    display: none;
    flex-direction: column;
    /* 축소 금지 — 본문(.ai-modal-body, overflow auto)만 줄어들게. (flex-shrink 1 이면 본문과
       비례 축소돼 패널이 100px 대로 눌려 버튼·이력이 잘림)
       ⚠ % max-height 금지 — 모달 높이가 max-height 로만 제한돼 % 가 무시됨 → 뷰포트 고정값 */
    flex: 0 0 auto;
    max-height: 45vh;
    max-height: 45svh;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-top: 1px solid #e3e7ee;
    background: #f7f9fc;
    font-size: 12px;
    color: #444;
}
.ai-regen-panel.open { display: flex; }
.ai-regen-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px 8px;
    flex-shrink: 0;
}
.ai-regen-head-title { font-size: 13px; font-weight: 700; color: #222; flex: 1 1 auto; min-width: 0; }
.ai-regen-head-sub { font-size: 10px; color: #999; font-weight: 400; margin-left: 6px; }
@media (max-width: 480px) { .ai-regen-head-sub { display: none; } } /* 좁은 화면: 부제 생략 (placeholder 가 설명) */
.ai-regen-x { /* 패널 닫기 × */
    width: 24px; height: 24px; flex-shrink: 0;
    border: 0; border-radius: 6px;
    background: transparent; color: #999;
    font-size: 18px; line-height: 1; cursor: pointer; font-family: inherit;
}
.ai-regen-x:hover { background: #e9edf3; color: #1D467D; }
.ai-regen-form { padding: 0 20px 10px; flex-shrink: 0; }
.ai-regen-form textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 62px;
    resize: vertical;
    font: inherit;
    font-size: 12px;
    line-height: 1.55;
    padding: 8px 10px;
    border: 1px solid #d9e0ea;
    border-radius: 8px;
    background: #fff;
    color: #333;
}
.ai-regen-form textarea::placeholder { color: #aab; }
.ai-regen-form textarea:focus { outline: none; border-color: #1D467D; box-shadow: 0 0 0 2px rgba(29,70,125,0.12); }
.ai-regen-form textarea:disabled { background: #f1f3f6; color: #888; }
.ai-regen-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.ai-regen-run { /* 실행 = 팀색 채움 (패널의 유일한 주 동작) */
    font-size: 12px; font-weight: 700; color: #fff;
    background: #1D467D; border: 1px solid #1D467D; border-radius: 6px;
    padding: 6px 14px; cursor: pointer; font-family: inherit; white-space: nowrap; flex-shrink: 0;
}
.ai-regen-run:hover { background: #173a68; }
.ai-regen-run:disabled { opacity: 0.4; cursor: default; }
.ai-regen-status { font-size: 11px; color: #777; flex: 1 1 auto; min-width: 0; line-height: 1.4; }
.ai-regen-status.err { color: #c0392b; }
.ai-regen-status.ok { color: #2f9e44; }
.ai-regen-status.busy::before { /* 진행 중 점 깜빡임 */
    content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    background: #1c7ed6; margin-right: 6px; vertical-align: 1px;
    animation: ai-regen-blink 1s ease-in-out infinite;
}
@keyframes ai-regen-blink { 50% { opacity: 0.25; } }

/* ── 상시 규칙 (ai-rules.js, 08-26) — 폼과 이력 사이. 목록은 자체 스크롤(최대 120px, 09-03 150→120: 이력 칸 확보) ── */
.ai-rules { flex-shrink: 0; border-top: 1px solid #e3e7ee; padding: 0 20px 8px; }
.ai-rules-head {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    padding: 6px 0 4px;
    font-size: 10px; font-weight: 700; color: #888; letter-spacing: 0.3px;
}
.ai-rules-count { font-weight: 600; color: #1D467D; background: #eef3fa; border: 1px solid #d9e4f2; border-radius: 5px; padding: 0 5px; font-size: 9px; }
.ai-rules-note { margin-left: auto; font-weight: 400; color: #aaa; }
@media (max-width: 480px) { .ai-rules-note { display: none; } }
.ai-rules-add { display: flex; gap: 6px; }
.ai-rules-add input {
    flex: 1 1 auto; min-width: 0;
    font: inherit; font-size: 12px; padding: 6px 9px;
    border: 1px solid #d9e0ea; border-radius: 6px; background: #fff; color: #333;
}
.ai-rules-add input:focus { outline: none; border-color: #1D467D; box-shadow: 0 0 0 2px rgba(29,70,125,0.12); }
.ai-rules-add input.flash { animation: ai-rules-flash 0.9s ease-out; }
@keyframes ai-rules-flash { 0% { background: #dbe7f7; } 100% { background: #fff; } }
.ai-rules-add-btn {
    font-size: 12px; font-weight: 700; color: #fff; background: #1D467D; border: 1px solid #1D467D;
    border-radius: 6px; padding: 6px 12px; cursor: pointer; font-family: inherit; white-space: nowrap; flex-shrink: 0;
}
.ai-rules-add-btn:hover { background: #173a68; }
.ai-rules-add-btn:disabled { opacity: 0.4; cursor: default; }
.ai-rules-msg { font-size: 11px; color: #777; line-height: 1.4; min-height: 0; margin-top: 4px; }
.ai-rules-msg:empty { display: none; }
.ai-rules-msg.err { color: #c0392b; }
.ai-rules-msg.ok { color: #2f9e44; }
.ai-rules-list {
    max-height: 120px; overflow-y: auto; overscroll-behavior: contain;
    display: flex; flex-direction: column; gap: 4px; margin-top: 6px;
}
.ai-rules-empty { color: #aaa; font-size: 11px; padding: 2px 0; }
.ai-rule-item {
    display: flex; align-items: flex-start; gap: 7px; flex-shrink: 0;
    background: #fff; border: 1px solid #e3e7ee; border-radius: 6px; padding: 6px 8px;
}
.ai-rule-item.off { opacity: 0.55; }
.ai-rule-item input[type=checkbox] { margin: 2px 0 0; flex-shrink: 0; accent-color: #1D467D; }
.ai-rule-body { flex: 1 1 auto; min-width: 0; }
.ai-rule-text { font-size: 11.5px; line-height: 1.45; color: #333; word-break: break-word; }
.ai-rule-meta { font-size: 9.5px; color: #aaa; margin-top: 2px; }
.ai-rule-body textarea {
    display: block; width: 100%; box-sizing: border-box; font: inherit; font-size: 11.5px; line-height: 1.45;
    padding: 5px 8px; border: 1px solid #1D467D; border-radius: 6px; resize: vertical;
}
.ai-rule-edit-row { display: flex; gap: 4px; margin-top: 4px; }
.ai-rule-btn { /* 규칙·이력 카드의 작은 액션 버튼 (승격/수정/삭제/저장/취소) */
    font-size: 10px; font-weight: 600; color: #1D467D; background: #eef3fa;
    border: 1px solid #d9e4f2; border-radius: 5px; padding: 2px 7px; cursor: pointer;
    font-family: inherit; white-space: nowrap; flex-shrink: 0; line-height: 1.5;
}
.ai-rule-btn:hover { background: #1D467D; color: #fff; border-color: #1D467D; }
.ai-rule-btn.primary { color: #fff; background: #1D467D; border-color: #1D467D; }
.ai-rule-btn.primary:hover { background: #173a68; }
.ai-rule-btn.del { color: #c0392b; background: #fff5f4; border-color: #f1d2ce; }
.ai-rule-btn.del:hover { background: #c0392b; color: #fff; border-color: #c0392b; }
.ai-rule-btn.done { color: #2f9e44; background: #f0faf2; border-color: #cfe9d5; cursor: default; }
.ai-rule-btn.done:hover { color: #2f9e44; background: #f0faf2; border-color: #cfe9d5; }
.ai-rule-btn:disabled { opacity: 0.5; cursor: default; }
.ai-regen-log-actions { display: flex; gap: 4px; margin-top: 5px; justify-content: flex-end; }

/* 섹션 접기/펼치기 헤더 (규칙·이력 공용) */
.ai-sec-toggle { cursor: pointer; user-select: none; }
.ai-sec-toggle:hover { color: #1D467D; }
.ai-sec-toggle::before {
    content: "▾"; font-size: 11px; line-height: 1; color: #999; width: 10px; flex-shrink: 0;
    transition: transform 0.15s;
}
.ai-rules.collapsed > .ai-rules-head::before,
.ai-regen-panel:not(.hist-open) .ai-regen-hist-head::before { transform: rotate(-90deg); }
.ai-rules.collapsed > :not(.ai-rules-head) { display: none; }
.ai-regen-panel:not(.hist-open) .ai-regen-hist { display: none; }
.ai-regen-panel:not(.hist-open) .ai-regen-hist-head { padding-bottom: 8px; }

/* 이력 — 패널 안에서 이 영역만 스크롤 */
.ai-regen-hist-head {
    display: flex; align-items: center; gap: 6px; flex-shrink: 0;
    padding: 6px 20px 4px;
    border-top: 1px solid #e3e7ee;
    font-size: 10px; font-weight: 700; color: #888; letter-spacing: 0.3px;
}
.ai-regen-hist-count { font-weight: 600; color: #1D467D; background: #eef3fa; border: 1px solid #d9e4f2; border-radius: 5px; padding: 0 5px; font-size: 9px; }
.ai-regen-hist-note { margin-left: auto; font-weight: 400; color: #aaa; }
.ai-regen-hist {
    flex: 1 1 auto;
    min-height: 140px; /* 0 이면 규칙 섹션에 눌려 사라짐 — 상단 주석 참고 */
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 20px 12px;
    display: flex; flex-direction: column; gap: 6px;
}
.ai-regen-hist-empty { color: #aaa; font-size: 11px; padding: 4px 0 2px; }
.ai-regen-log-item {
    background: #fff;
    border: 1px solid #e3e7ee;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 12px;
    flex-shrink: 0;
}
.ai-regen-log-item.mine { border-color: #1D467D; box-shadow: inset 3px 0 0 #1D467D; }
.ai-regen-log-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 10px; color: #999; }
.ai-regen-log-state { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 10px; }
.ai-regen-log-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ai-regen-log-state.done { color: #2f9e44; }
.ai-regen-log-state.error { color: #c0392b; }
.ai-regen-log-state.running { color: #1c7ed6; }
.ai-regen-log-state.running::before { animation: ai-regen-blink 1s ease-in-out infinite; }
.ai-regen-log-mine { margin-left: auto; } /* '이 글' 배지 — 우측 끝 */
.ai-regen-log-title {
    display: block; width: 100%; margin-top: 4px; padding: 0;
    background: none; border: 0; text-align: left; cursor: pointer;
    font: inherit; font-size: 12px; font-weight: 600; color: #1D467D; line-height: 1.4;
}
.ai-regen-log-title:hover { text-decoration: underline; }
.ai-regen-log-title:disabled { color: #222; cursor: default; text-decoration: none; }
.ai-regen-log-src { font-size: 9px; font-weight: 700; color: #999; margin-left: 5px; letter-spacing: 0.2px; }
.ai-regen-log-comment { /* 코멘트 = 모달 요약 박스와 같은 톤 */
    margin-top: 5px; padding: 6px 9px;
    background: #f2f5fa; border-left: 3px solid #1D467D; border-radius: 0 6px 6px 0;
    font-size: 11.5px; line-height: 1.5; color: #444;
    white-space: pre-wrap; word-break: break-word;
}
.ai-regen-log-comment.empty { color: #999; border-left-color: #ccd3dd; font-style: italic; }
.ai-regen-log-err { margin-top: 4px; font-size: 11px; color: #c0392b; white-space: pre-wrap; word-break: break-word; }
.ai-regen-log-item details { margin-top: 5px; }
.ai-regen-log-item summary { cursor: pointer; font-size: 10px; color: #888; list-style: none; }
.ai-regen-log-item summary::-webkit-details-marker { display: none; }
.ai-regen-log-item summary::before { content: "\25B8 "; }
.ai-regen-log-item details[open] summary::before { content: "\25BE "; }
.ai-regen-log-prev { margin-top: 4px; font-size: 11px; line-height: 1.5; color: #666; white-space: pre-wrap; word-break: break-word; }
.ai-regen-log-prev b { color: #444; }
.ai-regen-log-title {
    display: block;
    margin-top: 4px;
    font-weight: 600;
    color: #1D467D;
    background: none;
    border: 0;
    padding: 0;
    text-align: left;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
}
.ai-regen-log-title:hover { text-decoration: underline; }
.ai-regen-log-comment {
    margin-top: 4px;
    padding: 6px 8px;
    background: #f8f9fb;
    border-left: 3px solid #1D467D;
    border-radius: 4px;
    white-space: pre-wrap;
    word-break: break-word;
}
.ai-regen-log-comment.empty { color: #999; border-left-color: #ccc; font-style: italic; }
.ai-regen-log-err { margin-top: 4px; color: #c0392b; white-space: pre-wrap; word-break: break-word; }
.ai-regen-log-item details { margin-top: 4px; }
.ai-regen-log-item summary { cursor: pointer; font-size: 11px; color: #888; }
.ai-regen-log-prev { margin-top: 4px; font-size: 11px; color: #666; white-space: pre-wrap; word-break: break-word; }
.ai-regen-log-prev b { color: #444; }
.ai-modal-toggle { /* 원문↔번역 토글 (버튼엔 전환될 대상 표시) */
    font-size: 12px;
    font-weight: 600;
    color: #555;
    background: #f0f2f5;
    border: 1px solid #dde1e7;
    border-radius: 6px;
    padding: 4px 12px;
    cursor: pointer;
    font-family: inherit;
}
.ai-modal-toggle:hover {
    color: #1D467D;
    border-color: #1D467D;
}
.ai-modal-link {
    font-size: 12px;
    color: #1D467D;
    font-weight: 600;
    text-decoration: none;
    background: #f0f2f5;
    border: 1px solid #dde1e7;
    border-radius: 6px;
    padding: 4px 12px;
}
.ai-modal-link:hover {
    color: #fff;
    background: #1D467D;
    border-color: #1D467D;
}
.ai-modal-close { /* '원문' 토글과 동일 UI */
    font-size: 12px;
    font-weight: 600;
    color: #555;
    background: #f0f2f5;
    border: 1px solid #dde1e7;
    border-radius: 6px;
    padding: 4px 12px;
    cursor: pointer;
    font-family: inherit;
}
.ai-modal-close:hover {
    color: #1D467D;
    border-color: #1D467D;
}