* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
font-size: 14px; /* 기준 글자 크기 축소(기본 16px) — 전체 rem 글자가 비례 축소되어 더 심플·세련. 인쇄용 px 값은 영향 없음 */
}
/* ===== 회원가입 / 로그인 게이트 ===== */
.auth-gate {
position: fixed; inset: 0; z-index: 9999;
display: flex; align-items: flex-start; justify-content: center;
padding: 28px 16px; overflow-y: auto;
background: rgba(15, 23, 42, 0.45);
}
.auth-gate[hidden] { display: none; } /* 수정창 등 hidden 제어 */
html.is-authed #authGate { display: none; } /* 로그인 상태면 가입 게이트 숨김 */
.auth-card {
width: 100%; max-width: 460px; background: #fff;
border: 1px solid #e6ebf3; border-radius: 18px;
box-shadow: 0 18px 50px rgba(15, 23, 42, 0.16);
padding: 26px 24px 22px; margin: auto;
}
.auth-head { text-align: center; margin-bottom: 18px; }
.auth-logo { width: 100%; max-width: 300px; height: auto; object-fit: contain; margin-bottom: 12px; }
.auth-head h2 { margin: 6px 0; font-size: 1.6rem; font-weight: 800; color: #0f2b5b; line-height: 1.35; }
.auth-sub { margin: 6px 0 0; font-size: 0.9rem; color: #64748b; }
.auth-form { display: flex; flex-direction: column; gap: 10px; }
.auth-field { display: flex; flex-direction: column; gap: 4px; font-size: 0.86rem; font-weight: 600; color: #334155; }
.auth-field input {
padding: 10px 12px; border: 1.5px solid #cbd5e1; border-radius: 10px;
font-size: 0.95rem; font-weight: 500; color: #1f2937; background: #fff;
}
.auth-field input:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); }
.auth-field .req { color: #dc2626; }
.auth-field .opt { color: #94a3b8; font-weight: 500; }
.auth-terms { margin-top: 6px; }
.auth-terms-box {
max-height: 170px; overflow-y: auto;
border: 1px solid #e2e8f0; border-radius: 10px; background: #f8fafc;
padding: 12px 14px; font-size: 0.8rem; line-height: 1.6; color: #475569;
}
.auth-terms-box h3 { margin: 0 0 8px; font-size: 0.9rem; color: #16335c; }
.auth-terms-box p { margin: 0 0 8px; }
.auth-terms-box b { color: #334155; }
.auth-agree {
display: flex; align-items: flex-start; gap: 8px;
margin-top: 10px; font-size: 0.86rem; font-weight: 600; color: #334155; cursor: pointer;
}
.auth-agree input { width: 18px; height: 18px; margin-top: 1px; accent-color: #2563eb; flex: 0 0 auto; }
.auth-agree .req { color: #dc2626; }
.auth-msg {
background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c;
border-radius: 8px; padding: 8px 12px; font-size: 0.85rem; font-weight: 600;
}
.auth-submit {
margin-top: 4px; padding: 13px 18px; border: none; border-radius: 10px;
background: #0f2b5b; color: #fff;
font-size: 1rem; font-weight: 800; cursor: pointer;
}
.auth-submit:hover { background: #173d7a; }
.auth-foot { margin: 8px 0 0; text-align: center; font-size: 0.78rem; color: #94a3b8; }
/* 소셜 로그인 구분선 */
.auth-or { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; color: #94a3b8; font-size: 0.82rem; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: #e2e8f0; }
/* 네이버 로그인 버튼 (네이버 브랜드 컬러 #03C75A) */
.naver-login-btn {
width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
padding: 13px 18px; border: none; border-radius: 10px;
background: #03C75A; color: #fff; font-size: 1rem; font-weight: 800; cursor: pointer;
}
.naver-login-btn:hover { background: #02b350; }
.naver-login-btn .naver-n {
display: inline-flex; align-items: center; justify-content: center;
width: 20px; height: 20px; border-radius: 4px;
background: #fff; color: #03C75A; font-weight: 900; font-size: 0.9rem; line-height: 1;
}
.kakao-login-btn {
width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
padding: 13px 18px; border: none; border-radius: 10px; margin-bottom: 10px;
background: #FEE500; color: #191600; font-size: 1rem; font-weight: 800; cursor: pointer;
}
.kakao-login-btn:hover { background: #f5dc00; }
.kakao-login-btn .kakao-k {
display: inline-flex; align-items: center; justify-content: center;
width: 20px; height: 20px; border-radius: 4px;
background: #191600; color: #FEE500; font-weight: 900; font-size: 0.9rem; line-height: 1;
}
.google-login-btn {
width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
padding: 13px 18px; border: 1.5px solid #dadce0; border-radius: 10px; margin-top: 10px;
background: #fff; color: #3c4043; font-size: 1rem; font-weight: 800; cursor: pointer;
}
.google-login-btn:hover { background: #f8f9fa; }
.google-login-btn .google-g {
display: inline-flex; align-items: center; justify-content: center;
width: 20px; height: 20px; border-radius: 4px;
background: #fff; color: #4285F4; font-weight: 900; font-size: 1rem; line-height: 1;
border: 1px solid #e5e7eb;
}
html.gate-open body { overflow: hidden; }
/* 헤더 계정 배지 */
.acct-badge { display: none; align-items: center; gap: 8px; margin-left: auto; }
html.is-authed .acct-badge { display: flex; }
.acct-name { font-size: 0.86rem; font-weight: 700; color: #16335c; }
.acct-logout, .acct-edit {
padding: 5px 12px; border: 1.5px solid #cbd5e1; border-radius: 999px;
background: #fff; color: #475569; font-size: 0.8rem; font-weight: 700; cursor: pointer;
}
.acct-logout:hover, .acct-edit:hover { border-color: #93c5fd; color: #1d4ed8; }
.acct-edit { border-color: #bfdbfe; color: #1d4ed8; background: #eff6ff; }
.profile-actions { display: flex; gap: 10px; margin-top: 4px; }
.profile-actions .acct-logout { flex: 0 0 auto; }
.profile-actions .auth-submit { flex: 1 1 auto; margin-top: 0; }
/* 나의 정보: 탭 + 활동 대시보드 */
.prof-card { max-width: 520px; }
.prof-tabs { display: flex; gap: 6px; margin-bottom: 16px; background: #f1f5f9; padding: 5px; border-radius: 12px; }
.prof-tab { flex: 1 1 0; padding: 9px 12px; border: none; background: none; border-radius: 9px; font-size: 0.92rem; font-weight: 700; color: #64748b; cursor: pointer; }
.prof-tab.active { background: #fff; color: #1d4ed8; box-shadow: 0 2px 6px rgba(15,23,42,.08); }
.prof-panel[hidden] { display: none; }
.prof-who { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: #eff6ff; border: 1px solid #dbeafe; border-radius: 12px; padding: 11px 14px; margin-bottom: 14px; font-size: 0.98rem; color: #1d4ed8; font-weight: 700; }
.prof-who .pw-badge { background: #22c55e; color: #fff; font-size: 0.72rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; }
.prof-who .pw-real { color: #64748b; font-weight: 600; font-size: 0.88rem; }
.ps-greet { font-size: 0.98rem; color: #334155; margin-bottom: 14px; }
.ps-greet b { color: #16335c; }
.ps-empty { background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 12px; padding: 22px 16px; text-align: center; color: #64748b; font-size: 0.9rem; line-height: 1.6; }
.ps-top { display: flex; align-items: center; gap: 12px; border: 2px solid #2563eb; border-radius: 14px; padding: 12px 14px; margin-bottom: 16px; background: #fbfdff; }
.ps-top-ic { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex: 0 0 auto; }
.ps-top-tx { flex: 1 1 auto; }
.ps-top-lb { font-size: 0.78rem; color: #94a3b8; font-weight: 700; }
.ps-top-name { font-size: 1.1rem; font-weight: 800; color: #16335c; }
.ps-top-n { font-size: 1.3rem; font-weight: 900; }
.ps-bars { display: flex; flex-direction: column; gap: 12px; }
.ps-row { display: grid; grid-template-columns: 130px 1fr auto; align-items: center; gap: 10px; }
.ps-lb { font-size: 0.9rem; font-weight: 700; color: #334155; display: flex; align-items: center; gap: 6px; }
.ps-ico { font-size: 1rem; }
.ps-track { height: 12px; background: #eef2f7; border-radius: 999px; overflow: hidden; }
.ps-fill { height: 100%; border-radius: 999px; transition: width .5s ease; min-width: 2px; }
.ps-n { font-size: 0.85rem; font-weight: 800; color: #1f2937; white-space: nowrap; }
.ps-share { color: #94a3b8; font-weight: 600; font-size: 0.78rem; }
@media (max-width: 480px) { .ps-row { grid-template-columns: 96px 1fr auto; } }
/* === 고급스러운 마감 (정중한 느낌) === */
.site-header { background: linear-gradient(180deg, #ffffff 0%, #fafbfe 100%) !important; border-bottom: 1px solid #e6ebf3 !important; }
.panel { box-shadow: 0 6px 26px rgba(15, 23, 42, 0.05); border: 1px solid #eef1f6; }
h1 { color: #16335c; }
.nav-tab.active { box-shadow: 0 3px 12px rgba(37, 99, 235, 0.25); }
body {
margin: 0;
font-family: 'Malgun Gothic', '맑은 고딕', 'Segoe UI', Tahoma, sans-serif;
background: linear-gradient(160deg, #f7f9fc 0%, #eef2f9 100%);
color: #1f2937;
letter-spacing: -0.01em;
}
h1, h2, h3, .np-head, .gr-title, .review-h, .rank-h { font-family: 'Malgun Gothic', '맑은 고딕', 'Segoe UI', sans-serif; letter-spacing: -0.02em; }
/* ===== 상단 배너(네이비) + 밑줄형 메뉴 ===== */
.site-header { position: sticky; top: 0; z-index: 30; }
.header-band { background: #16335c; }
.header-navbar { background: #ffffff; border-bottom: 1px solid #e6ebf3; box-shadow: 0 2px 14px rgba(15, 23, 42, 0.06); }
.header-inner {
max-width: 1040px;
margin: 0 auto;
padding: 0 20px;
display: flex;
align-items: center;
}
.header-band .header-inner { padding: 12px 20px; gap: 14px; }
.logo-link { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo-img {
height: 44px; width: auto; display: block;
box-sizing: content-box; /* 아래 padding이 로고를 줄이지 않고 흰 여백으로 더해지게 */
background: #ffffff;
padding: 6px 12px;
border-radius: 12px;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.20);
}
.brand {
font-family: 'Malgun Gothic', '맑은 고딕', 'Segoe UI', sans-serif;
font-size: 1.1rem;
font-weight: 700;
letter-spacing: -0.02em;
color: #ffffff;
line-height: 1.3;
}
/* 배경 워터마크 (오른쪽 하단, 일부 잘린 채 반투명) */
/* 상단 히어로 (좌: 텍스트 / 우: 로고) */
.hero {
display: flex; align-items: center; justify-content: space-between; gap: 28px;
padding: 34px 10px 26px; flex-wrap: wrap;
}
.hero-left { flex: 1 1 320px; }
.hero-title-main {
font-family: 'Malgun Gothic', '맑은 고딕', 'Segoe UI', sans-serif;
font-size: 2.2rem; line-height: 1.2; margin: 0; font-weight: 800; letter-spacing: -0.03em;
}
.hero-title-main .hl-navy { color: #16335c; }
.hero-title-main .hl-blue { color: #2563eb; }
.hero-sub { margin: 16px 0 0; font-size: 1.08rem; color: #64748b; font-weight: 600; }
.hero-logo { flex: 0 0 auto; max-width: 48%; height: auto; max-height: 160px; object-fit: contain; }
@media (max-width: 680px) {
.hero { flex-direction: column; align-items: flex-start; gap: 16px; padding: 26px 12px 18px; }
.hero-title-main { font-size: 2rem; }
.hero-logo { max-width: 90%; max-height: 110px; }
}
.bg-mark { position: fixed; right: -120px; bottom: -120px; width: 480px; height: auto; opacity: 0.07; pointer-events: none; z-index: 0; user-select: none; }
.container, .site-footer { position: relative; z-index: 1; }
.nav { display: flex; gap: 4px; flex-wrap: wrap; }
.nav-tab {
background: none;
color: #475569;
font-weight: 600;
padding: 15px 16px;
border: none;
border-bottom: 3px solid transparent;
border-radius: 0;
cursor: pointer;
font-size: 0.96rem;
transition: color 0.15s ease, border-color 0.15s ease;
}
.nav-tab:hover { color: #16335c; background: #f8fafc; }
.nav-tab.active {
color: #16335c;
font-weight: 800;
border-bottom-color: #16335c;
background: none;
box-shadow: none;
}
.site-footer {
text-align: center;
padding: 24px 20px 40px;
color: #64748b;
font-size: 0.9rem;
}
.site-footer a { color: #1d4ed8; font-weight: 700; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-biz { margin-top: 14px; padding-top: 14px; border-top: 1px solid #e8edf5; }
.footer-biz p { margin: 3px 0; font-size: 0.8rem; color: #94a3b8; line-height: 1.6; }
.footer-biz .footer-copy { margin-top: 8px; color: #cbd5e1; font-size: 0.76rem; }
.container {
max-width: 1000px;
margin: 40px auto;
padding: 20px;
}
h1 {
margin-bottom: 8px;
font-size: 2.4rem;
}
p {
margin: 0 0 18px;
line-height: 1.6;
}
/* 섹션(뷰) 전환 */
.view[hidden] { display: none; }
.panel {
background: #ffffff;
border: 1px solid rgba(148, 163, 184, 0.25);
border-radius: 18px;
padding: 24px;
margin-bottom: 18px;
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}
label {
display: block;
margin-bottom: 10px;
font-weight: 600;
}
textarea {
width: 100%;
min-height: 200px;
border: 1px solid #cbd5e1;
border-radius: 14px;
padding: 14px;
font-size: 1rem;
line-height: 1.6;
resize: vertical;
}
/* API 키 패널 (카드 + AI 칩 + 화살표) */
/* API 키는 서버가 보관하므로 회원에게 노출하지 않음 */
.key-panel { display: none !important; }
.key-panel details {
background: #fff; border: 1px solid #e8edf4; border-radius: 16px;
box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04);
}
.key-panel details[open] { padding-bottom: 16px; }
.key-panel summary {
list-style: none; display: flex; align-items: center; gap: 12px;
padding: 16px 20px; cursor: pointer; font-weight: 700; color: #1f2937;
}
.key-panel summary::-webkit-details-marker { display: none; }
.key-chip {
width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto;
background: #e8eefc; color: #2563eb; font-weight: 900; font-size: 0.72rem;
display: flex; align-items: center; justify-content: center;
}
.key-sum-tx { flex: 1 1 auto; color: #1d4ed8; }
.key-chev { color: #94a3b8; font-size: 1.5rem; line-height: 1; transition: transform 0.2s ease; }
.key-panel details[open] .key-chev { transform: rotate(90deg); }
.key-panel label, .key-panel .key-row, .key-panel .hint { margin-left: 20px; margin-right: 20px; }
.key-panel label { display: block; margin-top: 6px; }
/* 섹션 제목 + 아이콘 칩 */
.sec-head { display: flex; align-items: flex-start; gap: 14px; margin: 8px 0 6px; }
.sec-ico {
width: 46px; height: 46px; border-radius: 13px; flex: 0 0 auto;
background: #eff4ff; color: #2563eb; font-size: 1.35rem;
display: flex; align-items: center; justify-content: center;
}
.sec-head-tx h1 { margin: 0 0 4px; }
.sec-head-tx p { margin: 0; }
/* 라벨 아이콘 / 입력 글자수 */
.lb-ico { font-size: 1rem; }
.ta-wrap { position: relative; }
.ta-count {
position: absolute; right: 14px; bottom: 12px;
font-size: 0.8rem; color: #94a3b8; font-weight: 600; pointer-events: none;
background: rgba(255, 255, 255, 0.85); padding: 1px 6px; border-radius: 6px;
}
.key-row {
display: flex;
gap: 10px;
margin-top: 12px;
}
.key-row input {
flex: 1;
border: 1px solid #cbd5e1;
border-radius: 12px;
padding: 12px 14px;
font-size: 1rem;
}
.hint {
font-size: 0.85rem;
color: #64748b;
margin: 8px 0 0;
}
/* 선택 항목 */
.field-group {
margin-top: 18px;
padding: 16px;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 14px;
}
.field-group-title {
display: block;
font-weight: 700;
margin-bottom: 10px;
}
.checks {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.check {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0;
padding: 10px 16px;
background: #ffffff;
border: 1.5px solid #cbd5e1;
border-radius: 999px;
font-weight: 600;
cursor: pointer;
user-select: none;
transition: border-color 0.15s ease, background 0.15s ease;
}
.check:hover { border-color: #93c5fd; }
.check input {
width: 18px;
height: 18px;
accent-color: #2563eb;
cursor: pointer;
}
.check:has(input:checked) {
border-color: #2563eb;
background: #eff6ff;
color: #1d4ed8;
}
.check { font-size: 0.92rem; }
.check.disabled {
opacity: 0.45;
cursor: not-allowed;
background: #f1f5f9;
border-color: #e2e8f0;
}
.check.disabled:hover { border-color: #e2e8f0; }
/* 변형문제 제작 버튼들 */
.exam-btns {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.exam-btn {
background: #3b82f6;
font-size: 0.88rem;
}
.exam-btn.rec {
background: #7c3aed;
}
.exam-btn.rec:hover {
background: #6d28d9;
}
/* 셋트유형 제작 (한 줄 유지) */
.set-row { display: flex; align-items: center; gap: 10px; margin: 8px 0; flex-wrap: nowrap; }
.set-row .set-group { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.set-row .set-btn { white-space: nowrap; flex: 0 0 auto; padding: 7px 11px; font-size: 0.8rem; }
.set-label { font-weight: 800; color: #475569; flex: 0 0 54px; }
.set-btn { background: #eef2f7; color: #475569; border: 2px solid #e2e8f0; border-radius: 999px; padding: 8px 14px; font-size: 0.85rem; font-weight: 700; cursor: pointer; }
.set-btn:hover { border-color: #93c5fd; }
.set-btn.active { background: #2563eb; color: #fff; border-color: #2563eb; }
.set-msg { color: #dc2626; font-weight: 800; background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px; padding: 11px 13px; margin: 10px 0; }
.set-make { background: #10b981; color: #fff; border: none; border-radius: 12px; padding: 12px 24px; font-weight: 800; cursor: pointer; }
.set-make:hover:not(:disabled) { background: #059669; }
.set-make:disabled { opacity: 0.45; cursor: default; }
.set-btn.conf { opacity: 0.32; }
.set-btn.conf:hover { border-color: #e2e8f0; }
/* 서술형 변형 세로 정렬 (괄호 설명은 버튼 밖) */
.sa-list { display: flex; flex-direction: column; gap: 10px; }
.sa-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sa-row .exam-btn { flex: 0 0 130px; text-align: center; }
.sa-desc { color: #475569; font-weight: 600; font-size: 0.9rem; }
/* 단어장 제작 옵션 (포함항목 / 단어수준 / 예문유형) */
/* ===== 단어장 옵션 카드 스타일 ===== */
.field-group.vo-card { background: #ffffff; padding: 20px 22px; }
.vo-head { margin-bottom: 16px; }
.vo-head .vo-subhint { display: block; margin-top: 4px; font-size: 0.9rem; color: #64748b; font-weight: 500; }
.vocab-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.vo-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.vo-title {
display: flex; align-items: center; gap: 8px;
font-weight: 800; color: #1f2937; font-size: 1.02rem; margin-bottom: 4px;
background: none; padding: 0;
}
.vo-title .vo-tico {
display: inline-flex; align-items: center; justify-content: center;
width: 26px; height: 26px; border-radius: 8px;
background: #e8eefc; color: #2563eb; font-size: 0.85rem; font-weight: 900;
}
/* 옵션 행 = 카드 */
.vocab-options .check {
display: flex; align-items: center; gap: 10px; width: 100%;
padding: 13px 16px; margin: 0;
border: 1.5px solid #e8edf4; border-radius: 14px;
background: #fbfcff; font-weight: 700; font-size: 0.95rem; color: #334155;
cursor: pointer; transition: border-color .12s, background .12s, box-shadow .12s;
}
.vocab-options .check:hover { border-color: #bfdbfe; background: #f5f9ff; }
.vocab-options .check:has(input:checked) { border-color: #2563eb; background: #eff6ff; color: #1d4ed8; box-shadow: 0 2px 8px rgba(37,99,235,.10); }
.vocab-options .vo-ico { width: 22px; text-align: center; font-size: 1.05rem; flex: 0 0 auto; }
.vocab-options .vo-lb { flex: 1 1 auto; }
/* 네이티브 입력 → 오른쪽 원형/체크 표시기 */
.vocab-options .check input {
-webkit-appearance: none; appearance: none;
margin: 0 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
border: 2px solid #cbd5e1; background: #fff; flex: 0 0 auto; position: relative; cursor: pointer;
}
.vocab-options .check input:checked { border-color: #2563eb; background: #2563eb; }
.vocab-options .check input:checked::after {
content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px;
border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.vocab-options .check.disabled { opacity: 0.5; cursor: not-allowed; background: #f1f5f9; border-color: #e2e8f0; }
.vocab-options .check.disabled:hover { border-color: #e2e8f0; background: #f1f5f9; }
.vo-substyle { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 2px 14px; padding-left: 12px; border-left: 2px solid #dbeafe; }
@media (max-width: 760px) { .vocab-options { grid-template-columns: 1fr; gap: 18px; } }
/* 옵션 */
.options {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-top: 16px;
}
.options label { margin: 0; }
.options input[type="number"] {
width: 90px;
border: 1px solid #cbd5e1;
border-radius: 10px;
padding: 8px 10px;
font-size: 1rem;
}
.controls {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 16px;
}
button {
border: none;
border-radius: 12px;
padding: 12px 20px;
cursor: pointer;
font-size: 0.92rem;
font-weight: 600;
color: #ffffff;
background: #3b82f6;
transition: transform 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}
button:hover {
transform: translateY(-1px);
background: #2563eb;
}
button:disabled {
opacity: 0.45;
cursor: not-allowed;
transform: none;
}
button.secondary { background: #10b981; }
button.secondary:hover { background: #059669; }
button.ghost { background: #64748b; }
button.ghost:hover { background: #475569; }
.result-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
flex-wrap: wrap;
}
/* 상태 메시지 */
.status {
margin-top: 14px;
padding: 14px 16px;
border-radius: 12px;
font-weight: 500;
}
.status.loading { background: #eff6ff; color: #1d4ed8; }
.status.error { background: #fef2f2; color: #b91c1c; }
.status.success { background: #f0fdf4; color: #15803d; }
/* 진행률 바 */
.prog-msg { font-weight: 500; margin-bottom: 8px; }
.prog-row { display: flex; align-items: center; gap: 10px; }
.prog-bar { flex: 1; height: 10px; background: #dbeafe; border-radius: 999px; overflow: hidden; }
.prog-fill { height: 100%; background: linear-gradient(90deg, #3b82f6, #2563eb); border-radius: 999px; transition: width 0.3s ease; }
.prog-pct { font-weight: 800; color: #1d4ed8; min-width: 40px; text-align: right; }
/* 단어장 표 */
.table-wrap { margin-top: 18px; overflow-x: auto; }
table.vocab {
border-collapse: collapse;
width: 100%;
min-width: 600px;
font-size: 0.92rem;
}
table.vocab th,
table.vocab td {
border: 1px solid #cdd5e0;
padding: 8px 10px;
vertical-align: top;
text-align: left;
}
table.vocab thead th {
background: #4a90d9;
color: #ffffff;
font-weight: 700;
text-align: center;
white-space: nowrap;
}
table.vocab td.num,
table.vocab td.no {
text-align: center;
font-weight: 600;
white-space: nowrap;
background: #f1f5fb;
}
table.vocab td.word { font-weight: 700; white-space: nowrap; }
table.vocab tbody tr:nth-child(even) td:not(.num):not(.no) { background: #fafcff; }
.col-syn { color: #1e40af; }
.col-ant { color: #475569; }
.col-conf { color: #047857; }
/* 변형문제 결과 */
.exam-output { margin-top: 18px; display: grid; gap: 18px; }
.exam-card {
border: 1px solid #dbe3ee;
border-radius: 14px;
overflow: hidden;
}
.exam-card-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
background: #eff6ff;
padding: 10px 16px;
font-weight: 700;
color: #1d4ed8;
}
.exam-card-head button {
padding: 6px 14px;
font-size: 0.85rem;
background: #2563eb;
}
.exam-card pre {
margin: 0;
padding: 16px;
white-space: pre-wrap;
word-break: break-word;
font-family: 'Malgun Gothic', 'Segoe UI', sans-serif;
font-size: 0.95rem;
line-height: 1.7;
color: #1f2937;
background: #ffffff;
}
.exam-card pre b.exam-pick { font-weight: 800; color: #111827; }
/* 분석노트 */
.note-output {
margin-top: 18px;
line-height: 1.75;
font-size: 0.97rem;
color: #1f2937;
overflow-x: auto;
}
/* PDF 다운로드용 임시 사본 — 잘림 없이 고정 폭에 맞춰 줄바꿈 */
.pdf-export, .pdf-export * { overflow: visible !important; }
.pdf-export .s-cols { flex-wrap: wrap; }
.pdf-export .s-box, .pdf-export .note-card { min-width: 0; }
.pdf-export .seg-en, .pdf-export .s-en, .pdf-export .ln-key-en { overflow-wrap: anywhere; word-break: break-word; }
.note-output h1,
.note-output h2,
.note-output h3 {
margin: 18px 0 8px;
font-size: 1.15rem;
}
.note-output p { margin: 6px 0; }
.note-output strong { color: #1d4ed8; font-weight: 800; }
.note-output ul, .note-output ol { margin: 6px 0; padding-left: 22px; }
.note-output li { margin: 3px 0; }
.note-output hr { border: none; border-top: 2px solid #e2e8f0; margin: 20px 0; }
.note-output code {
background: #f1f5f9;
padding: 2px 6px;
border-radius: 5px;
font-size: 0.92em;
}
.note-output table {
border-collapse: collapse;
width: 100%;
min-width: 480px;
margin: 12px 0;
font-size: 0.93rem;
}
.note-output th,
.note-output td {
border: 1px solid #cdd5e0;
padding: 8px 10px;
text-align: left;
vertical-align: top;
}
.note-output thead th {
background: #eff6ff;
color: #1d4ed8;
font-weight: 700;
}
/* 분석노트 — 문서 헤더 */
.note-tophead { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; color: #1f2937; font-weight: 800; margin-bottom: 6px; }
.note-tophead b { color: #c2410c; }
.note-logo { height: 44px; width: auto; }
.note-titlerow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 2px; }
.note-titlelabel {
display: inline-block; font-size: 0.72rem; font-weight: 800; color: #fff;
background: #1e3a5f; border-radius: 5px; padding: 2px 9px; white-space: nowrap;
}
.note-title { font-size: 1.5rem; font-weight: 800; margin: 0; }
.note-subtitle { color: #475569; margin-bottom: 10px; }
/* 하단 마크 */
.note-footer-mark {
display: flex; align-items: center; justify-content: center; gap: 10px;
margin-top: 22px; padding-top: 12px; border-top: 1px solid #e2e8f0;
color: #64748b; font-size: 0.98rem; font-weight: 700;
}
.note-footer-mark .nf-logo { height: 32px; width: auto; opacity: 1; }
/* ===== 분량 카운터 / 이어지는 지문 ===== */
.note-count { font-size: 0.85rem; color: #64748b; margin: 6px 2px 0; font-weight: 600; }
.note-count.warn { color: #b45309; }
.note-count.over { color: #dc2626; font-weight: 800; }
.trans-notice { margin: 8px 2px 0; font-size: 0.85rem; font-weight: 700; color: #0f766e; background: #ccfbf1; border-radius: 8px; padding: 7px 10px; }
.note-cont-row { margin: 8px 2px 0; font-size: 0.9rem; }
.controls button.is-blocked { opacity: 0.45; }
/* 분석노트 2종 구분 (색 테마) */
.note-panel { border-top: 5px solid #cbd5e1; }
/* 일반: 파란 테두리 박스 세트 */
.panel.note-panel-normal {
border: 2px solid #2563eb; border-top-width: 8px; background: #f5f9ff;
border-radius: 20px; padding: 22px 20px;
box-shadow: 0 8px 24px rgba(37, 99, 235, .1);
}
.note-panel-normal .np-head { text-align: center; font-size: 1.6rem; padding-bottom: 10px; border-bottom: 2px dashed #bfdbfe; margin-bottom: 8px; }
.note-panel-normal .np-sub { text-align: center; }
/* 대용량: 전체를 굵은 청록 테두리 박스로 감싸 '하나의 세트'임을 분명히 */
.panel.note-panel-big {
border: 3px solid #0d9488; border-top-width: 8px; background: #ecfdf5;
border-radius: 20px; padding: 22px 20px; margin-top: 28px;
box-shadow: 0 8px 24px rgba(13, 148, 136, .14);
}
.np-head { font-size: 1.2rem; font-weight: 800; color: #1d4ed8; }
.np-head-big { color: #0f766e; }
/* 대용량 제목·설명 가운데 정렬 + 강조 */
.note-panel-big .np-head-big { text-align: center; font-size: 1.6rem; padding-bottom: 10px; border-bottom: 2px dashed #5eead4; margin-bottom: 8px; }
.note-panel-big .np-sub { text-align: center; }
.note-panel-big > .hint { text-align: center; }
.np-sub { color: #475569; font-size: 0.9rem; margin: 3px 0 14px; }
.note-panel > label { display: block; font-weight: 700; margin-top: 12px; color: #334155; }
button.btn-normal { background: #2563eb; }
button.btn-normal:hover { background: #1d4ed8; }
button.btn-big { background: #0d9488; }
button.btn-big:hover { background: #0f766e; }
/* 대용량: 1단계(청록) / 2단계(주황) 확실히 구분 */
.big-step { border-radius: 14px; padding: 14px 16px 16px; margin-top: 16px; border: 2px solid; }
.big-step.step1 { border-color: #0d9488; background: #effdfa; }
.big-step.step2 { border-color: #f59e0b; background: #fffaf0; }
.big-step-h { display: block; width: fit-content; margin: 0 auto 12px; font-weight: 800; color: #fff; padding: 7px 20px; border-radius: 999px; font-size: 1.1rem; box-shadow: 0 4px 12px rgba(13, 148, 136, .3); }
.big-step.step1 .big-step-h { background: #0d9488; }
.big-step.step2 .big-step-h { background: #f59e0b; }
.big-step > label { display: block; font-weight: 700; margin: 4px 0 6px; }
.big-step.step1 > label { color: #0f766e; }
.big-step.step2 > label { color: #b45309; }
textarea.ta-step1 { border: 2px solid #14b8a6; background: #f7fffd; }
textarea.ta-step2 { border: 2px solid #f59e0b; background: #fffdf7; }
textarea.ta-step1:focus { outline: none; border-color: #0d9488; box-shadow: 0 0 0 3px rgba(13,148,136,.18); }
textarea.ta-step2:focus { outline: none; border-color: #d97706; box-shadow: 0 0 0 3px rgba(245,158,11,.2); }
button.btn-step1 { background: #0d9488; }
button.btn-step1:hover { background: #0f766e; }
button.btn-step2 { background: #f59e0b; }
button.btn-step2:hover { background: #d97706; }
/* 1 → 2 큰 화살표 (가운데 라벨) */
.step-arrow { text-align: center; margin: 14px 0 8px; }
.sa-down { font-size: 3rem; line-height: 1; color: #f59e0b; animation: arrowbob 1.4s ease-in-out infinite; }
.sa-label { display: inline-block; margin: 2px 0; padding: 8px 22px; background: linear-gradient(90deg, #f59e0b, #fb923c);
color: #fff; font-weight: 900; font-size: 1.15rem; border-radius: 999px; box-shadow: 0 6px 16px rgba(245,158,11,.35); }
@keyframes arrowbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
.big-reset-row { text-align: center; margin-top: 18px; padding-top: 14px; border-top: 1px dashed #e2e8f0; }
/* 1단계 완성 후: 입력창 접고 완성 버튼만 */
.big-step.step1.collapsed { padding: 12px 16px; }
.big-step.step1.collapsed > label,
.big-step.step1.collapsed > .ta-step1,
.big-step.step1.collapsed > .big-file-row,
.big-step.step1.collapsed > .trans-notice,
.big-step.step1.collapsed > .controls { display: none; }
.step1-done-btn { display: none; width: 100%; margin-top: 4px; padding: 14px 18px; font-size: 1.02rem; font-weight: 800;
color: #fff; background: linear-gradient(90deg, #0d9488, #14b8a6); border-radius: 14px; box-shadow: 0 6px 18px rgba(13,148,136,.28); cursor: pointer; }
.big-step.step1.collapsed .step1-done-btn { display: block; }
.step1-done-btn:hover { background: linear-gradient(90deg, #0f766e, #0d9488); }
.step1-redo { display: inline-block; margin-left: 8px; font-size: 0.82rem; font-weight: 700; opacity: 0.9; background: rgba(255,255,255,.2); padding: 2px 8px; border-radius: 999px; }
.auto-or-manual { margin: 10px 0; }
.auto-or-manual > summary { cursor: pointer; color: #b45309; font-weight: 700; font-size: 0.9rem; }
#bigAutoBtn { font-size: 1.05rem; padding: 14px 22px; }
/* 대용량 분석 모드 */
.big-mode { margin-top: 14px; border: 1px solid #e2e8f0; border-radius: 12px; padding: 10px 14px; background: #f8fafc; }
.big-mode > summary { cursor: pointer; font-weight: 700; color: #1e3a5f; }
.big-mode textarea { min-height: 120px; margin-top: 10px; }
.big-file-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
.big-chunk { margin-top: 0; }
/* 부분 사이 경계: 글자 없이 연한 점선만 */
.big-chunk + .big-chunk { border-top: 2px dashed #d1d5db; margin-top: 18px; padding-top: 16px; }
/* ===== 장지문 분석노트 ===== */
.ln-para { border-top: 2px solid #e2e8f0; padding: 12px 8px 10px; margin-top: 12px; }
.ln-para-h { font-weight: 800; color: #1d4ed8; font-size: 1.02rem; margin-bottom: 8px; }
.ln-row { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0; }
.ln-tag { flex: none; font-size: 0.74rem; font-weight: 800; color: #fff; border-radius: 6px; padding: 2px 8px; margin-top: 2px; }
.ln-tag.tag-ptopic { background: #0ea5e9; }
.ln-tag.tag-pmain { background: #f59e0b; }
.ln-tag-tx { flex: 1; color: #334155; line-height: 1.55; }
.ln-key { background: #f8fafc; border-left: 3px solid #93c5fd; border-radius: 6px; padding: 8px 10px; margin: 8px 0; }
.ln-key-lbl { font-size: 0.72rem; font-weight: 800; color: #2563eb; margin-bottom: 3px; }
.ln-key-en { font-size: 1.05rem; color: #1e293b; line-height: 1.5; }
.ln-key-ko { font-size: 0.85rem; color: #475569; margin-top: 3px; line-height: 1.5; }
.ln-expr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.ln-expr-lbl { font-size: 0.72rem; font-weight: 800; color: #16a34a; }
.ln-expr-item { font-size: 0.86rem; color: #334155; background: #f1f5f9; border-radius: 6px; padding: 2px 8px; }
.ln-expr-item b { color: #0f172a; }
.ln-vocab { margin-top: 16px; border-top: 2px solid #e2e8f0; padding-top: 12px; }
.ln-h { font-weight: 800; color: #1d4ed8; margin-bottom: 8px; }
.ln-vocab-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 16px; }
.ln-voc { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 0.88rem; padding: 3px 0; border-bottom: 1px dashed #e2e8f0; }
.ln-voc-w { font-weight: 800; color: #1e293b; }
.ln-voc-m { color: #475569; flex: 1; }
.ln-voc-x { font-size: 0.76rem; color: #64748b; background: #f8fafc; border-radius: 4px; padding: 0 5px; }
@media (max-width: 600px) { .ln-vocab-list { grid-template-columns: 1fr; } }
.note-legend {
font-size: 0.82rem; color: #475569;
border-top: 1px solid #e2e8f0; padding-top: 8px; margin-top: 6px; line-height: 2;
}
.note-legend b { color: #1f2937; }
/* 마커 칩 */
.tag {
display: inline-block; font-size: 0.72rem; font-weight: 700; color: #fff;
padding: 2px 8px; border-radius: 6px; white-space: nowrap; vertical-align: middle;
}
.tag.sm { font-size: 0.58rem; padding: 0 5px; }
.tg-theme { background: #ea580c; }
.tg-main { background: #d97706; }
.tg-blank { background: #7c3aed; }
.tg-write { background: #0d9488; }
.tg-vocab { background: #a16207; }
/* 핵심 소재/요지 카드 */
.note-cards { display: flex; gap: 12px; flex-wrap: wrap; margin: 14px 0; align-items: stretch; }
.note-card {
flex: 1 1 240px; border: 1px solid #e2e8f0; border-radius: 10px;
padding: 12px 14px; background: #ffffff;
}
/* 핵심 소재는 짧으니 좁게, 핵심 요지는 넓게 잡아 한 줄에 들어가도록 */
.note-card.nc-topic { flex: 1 1 180px; }
.note-card.nc-idea { flex: 2.6 1 420px; }
.note-card .nc-h { font-weight: 800; color: #1d4ed8; margin-bottom: 4px; }
.note-card .nc-b { line-height: 1.55; font-weight: 600; font-size: 0.92rem; }
.note-card .nc-en { color: #64748b; font-style: italic; font-size: 0.95rem; margin-top: 3px; line-height: 1.5; }
/* 글 전개 (가로 흐름) */
.note-flow {
border-top: 1px solid #e2e8f0;
padding-top: 10px;
margin: 10px 0 6px;
font-size: 0.9rem;
line-height: 1.9;
color: #334155;
}
.note-flow .flow-h {
font-weight: 800; color: #1f2937; margin-right: 6px;
background: #fde047; padding: 2px 8px; border-radius: 5px;
}
.note-flow .flow-num { color: #c2410c; font-weight: 700; }
.note-flow .flow-range { color: #2563eb; font-style: italic; }
.note-flow .flow-arrow { color: #ea580c; font-weight: 800; }
/* 전개 방식 표 */
table.note-stages { width: 100%; border-collapse: collapse; margin: 8px 0 6px; font-size: 0.92rem; }
table.note-stages th { background: #1f2937; color: #fff; padding: 8px 10px; text-align: left; border: 1px solid #1f2937; }
table.note-stages td { border: 1px solid #d6deea; padding: 8px 10px; vertical-align: top; }
table.note-stages tbody tr:nth-child(even) td { background: #f8fafc; }
/* 문장 블록 */
.note-s { border-top: 2px solid #e2e8f0; padding: 10px 8px 8px; margin-top: 12px; }
.note-s.hl-key-s {
background: #fffbeb; border: 1px solid #fcd34d; border-radius: 10px;
padding: 12px 12px 10px;
}
.s-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
/* 영어문장 / 직독직해 / 해석 묶음 박스 */
.s-top {
border: 1px solid #e2e8f0; border-left: 4px solid #93c5fd; border-radius: 10px;
padding: 10px 12px; background: #ffffff; margin-bottom: 10px;
}
.s-en { font-size: 1.44rem; line-height: 1.7; }
.s-num { font-size: 1.25rem; color: #c2410c; font-weight: 700; }
/* 끼워읽기(직독직해): 영어 조각 / 아래 한국어 / (왼쪽 정렬) */
.s-inter { line-height: 1.45; }
.seg { display: inline-block; vertical-align: top; text-align: left; margin: 0 2px 10px; }
.seg-en { display: block; font-size: 1.42rem; line-height: 1.35; }
.seg-ko { display: block; font-size: 0.82rem; color: #475569; line-height: 1.3; margin-top: 1px; }
.seg-sl { color: #cbd5e1; font-weight: 400; margin-left: 2px; }
.s-ko { font-size: 0.8rem; line-height: 1.5; margin: 4px 0 0 18px; color: #475569; }
.ln-lbl {
display: inline-block; font-size: 0.66rem; font-weight: 800; color: #64748b;
background: #eef2f7; border-radius: 5px; padding: 1px 6px; margin-right: 5px; vertical-align: middle;
}
.blank { background: #fde047; border-radius: 2px; padding: 0 2px; font-weight: 700; }
/* 구조 표기 */
.cl { font-weight: 700; }
.md { color: #2563eb; font-weight: 600; }
.bx { border: 1px solid #94a3b8; border-radius: 3px; padding: 0 3px; background: #fff; }
/* 병렬 묶음별 색 (같은 묶음 = 같은 색) */
.bx.bx0 { border-color: #2563eb; color: #1e40af; background: #eff6ff; }
.bx.bx1 { border-color: #16a34a; color: #166534; background: #f0fdf4; }
.bx.bx2 { border-color: #d97706; color: #92400e; background: #fffbeb; }
.bx.bx3 { border-color: #db2777; color: #9d174d; background: #fdf2f8; }
.bx.bx4 { border-color: #7c3aed; color: #5b21b6; background: #f5f3ff; }
.vk { text-decoration: underline; text-decoration-color: #ec4899; }
/* 구조분해 ↔ 표현정리 2단 */
.s-cols { display: flex; gap: 12px; flex-wrap: wrap; margin: 6px 0 8px; }
.s-box { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 12px; flex: 1 1 280px; }
.s-box.vbox { background: #ffffff; border-color: #e2e8f0; }
.s-box.vbox .s-box-h { color: #1d4ed8; }
.s-box-h { font-weight: 700; color: #0f766e; font-size: 0.86rem; margin-bottom: 6px; }
.s-st { line-height: 1.65; margin: 3px 0; font-size: 0.92rem; }
.st-label {
display: inline-block; background: #e0e7ff; color: #3730a3; font-weight: 700;
font-size: 0.74rem; padding: 1px 7px; border-radius: 5px; margin-right: 4px;
}
.st-label.st-gr { background: #eff6ff; color: #1d4ed8; }
/* 함축/빈칸 포인트 줄 */
.s-pt { line-height: 1.65; margin: 4px 0; }
.s-pt .pt-ex { color: #1f2937; }
/* 함축/어법/어휘 줄 */
.s-line { line-height: 1.65; margin: 4px 0; }
.lbl-imp {
display: inline-block; background: #fff7ed; color: #c2410c; font-weight: 700;
font-size: 0.74rem; padding: 1px 7px; border-radius: 5px; margin-right: 4px;
}
.lbl-gr {
display: inline-block; background: #eff6ff; color: #1d4ed8; font-weight: 700;
font-size: 0.74rem; padding: 1px 7px; border-radius: 5px; margin-right: 4px;
}
.gr-text { background: #f1f5f9; padding: 1px 6px; border-radius: 4px; font-size: 0.92rem; }
.s-voc { line-height: 1.7; margin: 3px 0; font-size: 0.93rem; }
.vt {
display: inline-block; font-size: 0.72rem; font-weight: 700;
padding: 1px 7px; border-radius: 5px; margin-right: 4px;
}
.vt-word { background: #fef3c7; color: #92400e; }
.vt-phr { background: #dbeafe; color: #1e40af; }
.vt-idiom { background: #fae8ff; color: #86198f; }
.vt-expr { background: #dcfce7; color: #166534; }
.s-voc .vx { color: #64748b; font-size: 0.92em; }
/* ===== 단어게임 ===== */
.game-grouptitle { font-weight: 800; font-size: 1.1rem; margin: 8px 0 12px; }
.cat-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 16px; }
.cat-tab {
flex: 1 1 auto; background: #fff; color: #334155; border: 1px solid #cbd5e1;
border-radius: 10px; padding: 14px 10px; font-weight: 700; font-size: 0.9rem; cursor: pointer;
}
.cat-tab.active { background: #1e3a5f; color: #fff; border-color: #1e3a5f; }
.game-sel-h, .rank-h { font-size: 1.05rem; margin-bottom: 14px; }
.game-sel-h span, .rank-h span { font-weight: 400; color: #64748b; font-size: 0.85rem; margin-left: 6px; }
.game-cards { display: flex; gap: 14px; flex-wrap: wrap; }
.game-card {
flex: 1 1 280px; display: flex; align-items: center; gap: 12px;
border: 1px solid #e2e8f0; border-radius: 14px; padding: 16px;
}
.gc-icon { font-size: 1.8rem; background: #f1f5f9; border-radius: 12px; padding: 8px 12px; }
.gc-info { flex: 1; display: flex; flex-direction: column; }
.gc-info b { font-size: 1.05rem; }
.gc-info span { color: #64748b; font-size: 0.85rem; line-height: 1.4; }
.play-btn { background: #1e3a5f; padding: 10px 22px; }
.play-btn:hover { background: #15293f; }
.rank-filter { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.rf-cat, .rf-game {
background: #f1f5f9; color: #475569; border: none; border-radius: 999px;
padding: 8px 14px; font-size: 0.82rem; font-weight: 700; cursor: pointer;
}
.rf-cat.active { background: #1e3a5f; color: #fff; }
.rf-game.active { background: #3b82f6; color: #fff; }
/* 랭킹: 카드매칭 / 객관식 탭 (표 위에 붙은 탭) */
.rank-gametabs { display: flex; gap: 6px; margin-top: 12px; }
.rank-gametabs .rf-game {
flex: 1; background: #eef2f7; color: #64748b; border: 2px solid #e2e8f0; border-bottom: none;
border-radius: 12px 12px 0 0; padding: 13px 10px; font-size: 1rem; font-weight: 800;
position: relative; bottom: -2px;
}
.rank-gametabs .rf-game.active { background: #fff; color: #1d4ed8; border-color: #3b82f6; }
.rank-board { border: 2px solid #3b82f6; border-radius: 0 12px 12px 12px; padding: 14px; background: #fff; }
.rank-board .rank-filter { margin-bottom: 12px; }
/* 게임 종료 후 틀린 항목 복습 */
.review-wrap { max-height: 50vh; overflow-y: auto; margin: 6px 0 14px; text-align: left; }
.review-h { font-weight: 800; color: #b91c1c; margin-bottom: 10px; text-align: center; }
.review-item { border-bottom: 1px dashed #e2e8f0; padding: 8px 4px; }
.ri-en { font-weight: 800; color: #1e293b; }
.ri-ko { font-weight: 700; color: #2563eb; margin-left: 6px; }
.ri-ex { color: #475569; font-size: 0.9rem; margin-top: 3px; line-height: 1.5; }
.ri-exko { color: #94a3b8; }
/* 퀴즈 단축키 라벨 (2초 후 사라짐) */
.qkey { display: inline-block; margin-left: 4px; font-size: 0.66rem; font-weight: 800; color: #94a3b8; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 5px; padding: 0 5px; transition: opacity 0.6s ease; }
.q-listen.keyfade .qkey { opacity: 0; }
/* ===== 자료실 게시판 ===== */
.board-tabs { display: flex; gap: 6px; margin: 14px 0; flex-wrap: wrap; }
.bd-tab { background: #eef2f7; color: #475569; border: 2px solid #e2e8f0; border-radius: 10px; padding: 10px 18px; font-weight: 800; cursor: pointer; }
.bd-tab.active { background: #2563eb; color: #fff; border-color: #2563eb; }
.board-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.board-count { color: #64748b; font-weight: 700; }
.board-form { display: block; border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px; background: #f8fafc; margin-bottom: 14px; }
.board-form label { display: block; font-weight: 700; margin: 8px 0 4px; }
.board-form input[type="text"], .board-form textarea { width: 100%; box-sizing: border-box; border: 1px solid #cbd5e1; border-radius: 10px; padding: 10px; font-size: 0.95rem; }
.board-form textarea { min-height: 120px; }
.board-tablehead { display: grid; grid-template-columns: minmax(0, 1fr) 92px 92px 60px 62px; gap: 8px; padding: 11px 10px; background: #1e293b; color: #fff; border-radius: 10px 10px 0 0; font-weight: 700; font-size: 0.85rem; }
.bh-author, .bh-date, .bh-views, .bh-likes { text-align: center; }
.board-list { border: 1px solid #e2e8f0; border-top: none; border-radius: 0 0 10px 10px; overflow: hidden; }
.board-item { border-bottom: 1px solid #eef2f7; }
.board-row { display: grid; grid-template-columns: minmax(0, 1fr) 92px 92px 60px 62px; gap: 8px; padding: 12px 10px; cursor: pointer; align-items: center; }
.board-row:hover { background: #f8fafc; }
.board-item.open .board-row { background: #eff6ff; }
.br-title { font-weight: 700; color: #1e293b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-cmt { color: #2563eb; font-weight: 800; font-size: 0.85rem; }
.br-author, .br-date, .br-views { text-align: center; color: #64748b; font-size: 0.85rem; }
.br-likes { text-align: center; color: #e11d48; font-weight: 700; font-size: 0.85rem; }
.board-detail { padding: 14px; background: #fbfdff; border-top: 1px dashed #dbeafe; }
.bd-text { color: #334155; line-height: 1.7; margin-bottom: 10px; }
.bd-file { display: inline-block; margin-bottom: 10px; color: #1d4ed8; font-weight: 700; }
.bd-actions { display: flex; gap: 8px; margin-bottom: 12px; }
.bd-like, .bd-del { background: #f1f5f9; color: #334155; border: 1px solid #e2e8f0; border-radius: 8px; padding: 6px 12px; font-weight: 700; cursor: pointer; }
.bd-like:hover { background: #ffe4e6; color: #e11d48; }
.bd-comments { border-top: 1px solid #e2e8f0; padding-top: 10px; }
.cmt-h { font-weight: 800; color: #475569; margin-bottom: 8px; }
.cmt { border-bottom: 1px solid #f1f5f9; padding: 6px 0; position: relative; }
.cmt-date { color: #94a3b8; font-size: 0.78rem; margin-left: 6px; }
.cmt-del { position: absolute; right: 0; top: 4px; background: transparent; color: #cbd5e1; border: none; cursor: pointer; font-size: 1.1rem; padding: 0 4px; }
.cmt-del:hover { color: #ef4444; }
.cmt-text { color: #334155; margin-top: 2px; }
.cmt-form { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.cmt-form input { border: 1px solid #cbd5e1; border-radius: 8px; padding: 8px 10px; }
.cmt-name { flex: 0 0 110px; }
.cmt-input { flex: 1 1 200px; }
.cmt-add { background: #2563eb; color: #fff; border: none; border-radius: 8px; padding: 8px 16px; font-weight: 700; cursor: pointer; }
@media (max-width: 640px) {
.board-tablehead, .board-row { grid-template-columns: minmax(0, 1fr) 64px 52px; }
.bh-date, .br-date, .bh-views, .br-views { display: none; }
}
.rank-list { margin-top: 8px; }
.rank-row {
display: flex; align-items: center; gap: 12px;
padding: 14px 6px; border-bottom: 1px solid #eef2f7;
}
.rk-rank { flex: 0 0 48px; text-align: center; font-size: 1.2rem; font-weight: 800; }
.rk-name { flex: 0 0 150px; font-weight: 700; }
.rk-msg { flex: 1; color: #64748b; font-size: 0.86rem; }
.rk-score { font-weight: 800; color: #1d4ed8; white-space: nowrap; }
.rank-empty { padding: 24px; text-align: center; color: #64748b; }
/* 랭킹 2열 (왼쪽 1~10 · 오른쪽 11~20) · 이름·점수 가깝게 */
.rank-grid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(10, auto); grid-template-columns: 1fr 1fr; gap: 3px 18px; }
.rank-cell { display: flex; align-items: center; gap: 6px; padding: 4px 9px; border: 1px solid #eef2f7; border-radius: 7px; background: #fff; min-width: 0; font-size: 0.82rem; }
.rank-cell.top { border-color: #fcd34d; background: #fffbeb; }
.rank-cell.me { border-color: #2563eb; background: #eff6ff; }
.rc-rank { flex: 0 0 46px; font-weight: 800; color: #1e293b; }
.rc-name { flex: 0 1 auto; max-width: 120px; font-weight: 700; color: #334155; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-you { background: #2563eb; color: #fff; font-size: 0.62rem; padding: 0 6px; border-radius: 999px; margin-left: 2px; vertical-align: middle; }
.rc-score { flex: 0 0 auto; color: #f59e0b; font-weight: 800; }
@media (max-width: 640px) { .rank-grid { grid-auto-flow: row; grid-template-columns: 1fr; grid-template-rows: none; } }
.rank-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; }
.rank-pager .rk-pg { background: #f1f5f9; color: #334155; border: 1px solid #e2e8f0; border-radius: 8px; padding: 7px 16px; font-weight: 700; }
.rank-pager .rk-pg:hover:not(:disabled) { background: #e2e8f0; }
.rank-pager .rk-pg:disabled { opacity: 0.4; cursor: default; }
.rk-pglabel { font-weight: 700; color: #475569; font-size: 0.9rem; }
/* 게임 모달 */
.game-modal {
position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55);
display: flex; align-items: center; justify-content: center; z-index: 100; padding: 16px;
}
.game-modal[hidden] { display: none; }
.gm-box {
background: #fff; border-radius: 18px; width: 100%; max-width: 640px;
max-height: 90vh; display: flex; flex-direction: column; overflow: hidden;
}
.gm-head {
display: flex; align-items: center; gap: 12px;
padding: 14px 18px; background: #1e3a5f; color: #fff; font-weight: 700;
}
.gm-head > span:first-child { flex: 1; }
.gm-score { font-weight: 800; }
.gm-close { background: transparent; padding: 4px 8px; font-size: 1.1rem; }
.gm-close:hover { background: rgba(255, 255, 255, 0.15); }
.gm-body { padding: 18px; overflow-y: auto; }
/* 카드매칭 */
.match-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mcard {
position: relative; aspect-ratio: 1 / 1; border-radius: 12px; border: none;
background: #3b82f6; color: #fff; cursor: pointer; padding: 4px;
display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.mcard .mc-front { font-size: 1.4rem; }
.mcard .mc-back { display: none; font-size: 0.82rem; line-height: 1.2; word-break: break-word; }
.mcard.flip { background: #eff6ff; color: #1e3a5f; border: 2px solid #3b82f6; }
.mcard.flip .mc-front { display: none; }
.mcard.flip .mc-back { display: block; }
.mcard.matched { background: #dcfce7; color: #166534; border: 2px solid #16a34a; cursor: default; }
.mcard.matched .mc-front { display: none; }
.mcard.matched .mc-back { display: block; }
.match-info { text-align: center; margin-top: 14px; color: #475569; }
/* 퀴즈 */
.quiz-word { text-align: center; font-size: 2rem; font-weight: 800; margin: 10px 0; color: #1e3a5f; }
.quiz-q { text-align: center; color: #64748b; margin-bottom: 16px; }
.quiz-opts { display: grid; gap: 10px; }
.qopt {
background: #f8fafc; color: #1f2937; border: 1.5px solid #cbd5e1; border-radius: 12px;
padding: 14px; font-size: 1rem; font-weight: 600; cursor: pointer; text-align: left;
}
.qopt:hover { border-color: #3b82f6; }
.qopt.ok { background: #dcfce7; border-color: #16a34a; color: #166534; }
.qopt.no { background: #fee2e2; border-color: #ef4444; color: #b91c1c; }
/* 게임 결과 */
.game-result { text-align: center; padding: 20px 10px; }
.gr-emoji { font-size: 3rem; }
.gr-ic { display: flex; justify-content: center; margin-bottom: 4px; }
.gr-ic svg { width: 52px; height: 52px; color: #1d4ed8; }
.gr-title { font-size: 1.3rem; font-weight: 800; margin: 6px 0; }
.gr-score { font-size: 2rem; font-weight: 800; color: #1d4ed8; }
.gr-sub { color: #64748b; margin-top: 6px; }
.gr-btns { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }
/* ===== 업그레이드 게임 (VS 매칭 · 예문 퀴즈) ===== */
.gm-box.playing { max-width: 940px; }
.gm-box.playing .gm-head { display: none; }
.gm-body { position: relative; }
/* 상단바 */
.game-top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.g-home, .g-mute { background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 10px;
padding: 6px 12px; font-size: 1.1rem; cursor: pointer; color: #334155; line-height: 1; }
.g-home:hover, .g-mute:hover { background: #e2e8f0; }
.g-spacer { flex: 1; }
.g-progress { flex: 1; height: 10px; background: #e2e8f0; border-radius: 999px; overflow: hidden; }
.g-progress-bar { height: 100%; width: 0; background: linear-gradient(90deg, #34d399, #3b82f6); transition: width .9s linear; }
.g-count { color: #64748b; font-weight: 700; font-size: .85rem; min-width: 54px; text-align: center; }
.g-timer { font-size: 1.7rem; font-weight: 800; color: #1e293b; letter-spacing: 1px; min-width: 92px; text-align: center; font-variant-numeric: tabular-nums; }
.g-timer.danger { color: #dc2626; animation: tpulse .5s ease-in-out infinite; }
@keyframes tpulse { 50% { transform: scale(1.13); } }
.g-score { position: relative; text-align: right; min-width: 72px; }
.g-score-l { display: block; font-size: .6rem; letter-spacing: 2px; color: #94a3b8; font-weight: 700; }
.g-score b { font-size: 1.5rem; color: #f59e0b; display: inline-block; }
.g-score b.bump { animation: sbump .35s ease; }
@keyframes sbump { 30% { transform: scale(1.45); } }
.g-plus { position: absolute; right: 4px; top: 0; color: #16a34a; font-weight: 800; pointer-events: none; animation: gplus .9s ease forwards; }
@keyframes gplus { 0% { opacity: 0; transform: translateY(8px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-22px); } }
/* 정답/오답 팝업 */
.fb-pop { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); z-index: 6;
padding: 14px 26px; border-radius: 14px; font-weight: 800; font-size: 1.3rem; color: #fff;
box-shadow: 0 12px 34px rgba(0, 0, 0, .2); animation: fbpop .25s ease; max-width: 92%; text-align: center; }
.fb-ok { background: #16a34a; }
.fb-no { background: #ef4444; font-size: 1.02rem; }
@keyframes fbpop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.7); } 100% { opacity: 1; } }
/* VS 매칭 */
.vs-help { text-align: center; color: #64748b; margin-bottom: 16px; font-weight: 600; }
.vs-wrap { display: flex; align-items: flex-start; gap: 10px; }
.vs-col { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.vs-mid { align-self: center; font-weight: 900; color: #cbd5e1; font-size: 1.4rem; padding: 0 2px; }
.vs-card { display: flex; align-items: center; gap: 10px; text-align: left; background: #fff;
border: 2px solid #e2e8f0; border-radius: 14px; padding: 14px 14px; cursor: pointer; font-weight: 700;
color: #1e293b; transition: border-color .12s, box-shadow .12s, background .12s; }
.vs-card:hover { border-color: #93c5fd; background: #eff6ff; }
.vs-card.sel:hover { background: #fff7ed; }
.vs-num { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #f1f5f9; color: #475569;
font-size: .8rem; display: flex; align-items: center; justify-content: center; font-weight: 800; }
.vs-tx { flex: 1; }
.vs-en .vs-tx { font-size: 1.1rem; }
.vs-ko .vs-tx { font-size: .96rem; }
.vs-spk { color: #94a3b8; }
.vs-card.sel { border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .28); }
.vs-card.ok { border-color: #16a34a; background: #dcfce7; color: #166534; }
.vs-card.bad { border-color: #ef4444; background: #fee2e2; color: #b91c1c; animation: shake .3s; }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
/* 맞춘 카드: 톡 빠져나감 */
.vs-card.vs-out { animation: vsout .5s ease forwards; pointer-events: none; z-index: 2; }
@keyframes vsout {
0% { transform: scale(1); opacity: 1; }
35% { transform: scale(1.08); opacity: 1; }
100% { transform: scale(.55) translateY(-14px); opacity: 0; }
}
/* 5초 힌트: 정답 후보 카드 (희미한 글씨 + 반짝임) */
.vs-card.hint { position: relative; border-color: #fcd34d; animation: hintshimmer 1.1s ease-in-out infinite; }
@keyframes hintshimmer { 0%, 100% { box-shadow: 0 0 0 0 rgba(252, 211, 77, 0); } 50% { box-shadow: 0 0 0 4px rgba(252, 211, 77, .45); } }
.vs-hintlabel { position: absolute; top: 4px; right: 8px; font-size: .62rem; font-weight: 800; color: #ca8a04; opacity: .5; letter-spacing: 1px; pointer-events: none; }
/* 새로 들어온 카드: 확 튀어나오며 노란 테두리로 강조 */
.vs-card.vs-in { animation: vsin .55s cubic-bezier(.18, .9, .32, 1.5) both; }
@keyframes vsin {
0% { transform: scale(.4); opacity: 0; box-shadow: 0 0 0 6px rgba(250, 204, 21, .55); border-color: #facc15; }
55% { transform: scale(1.12); opacity: 1; box-shadow: 0 0 0 6px rgba(250, 204, 21, .45); border-color: #facc15; }
100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(250, 204, 21, 0); }
}
/* 예문 퀴즈 */
.quiz-stage { min-height: 280px; }
.q-sentence { font-size: 1.4rem; line-height: 1.7; color: #475569; text-align: center; margin: 14px 6px; font-weight: 500; }
.q-exgen { font-size: 0.62em; color: #94a3b8; font-weight: 600; }
.q-target { color: #2563eb; font-weight: 800; font-size: 1.55em; }
.q-listen { display: flex; gap: 14px; justify-content: center; margin: 6px 0 20px; }
.q-lbtn { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 8px 14px; color: #475569; font-weight: 700; cursor: pointer; }
.q-lbtn:hover { background: #eff6ff; border-color: #93c5fd; }
.q-lbtn:disabled { opacity: .4; cursor: default; }
.q-opts { display: grid; gap: 12px; max-width: 580px; margin: 0 auto; }
.q-opts .qopt { display: flex; align-items: center; gap: 12px; text-align: left; background: #fff;
border: 2px solid #e2e8f0; border-radius: 14px; padding: 14px 16px; font-size: 1.02rem; font-weight: 600;
color: #1f2937; cursor: pointer; transition: border-color .12s, box-shadow .12s, background .12s; }
.q-opts .qopt:hover { border-color: #93c5fd; background: #eff6ff; }
.qopt-num { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid #cbd5e1;
display: flex; align-items: center; justify-content: center; font-size: .82rem; font-weight: 800; color: #475569; }
.q-opts .qopt.sel { border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .28); }
.q-opts .qopt.ok { background: #dcfce7; border-color: #16a34a; color: #166534; }
.q-opts .qopt.no { background: #fee2e2; border-color: #ef4444; color: #b91c1c; }
.q-opts .qopt.disabled { pointer-events: none; }
/* 적응형 실력측정 모드 */
.adapt-stage { min-height: 300px; }
.adapt-meta { display: flex; align-items: center; justify-content: space-between; max-width: 580px; margin: 2px auto 4px; font-size: 0.9rem; color: #64748b; }
.adapt-lv b { color: #1d4ed8; }
.adapt-diff { font-weight: 700; color: #7c3aed; background: #f3e8ff; border-radius: 999px; padding: 3px 12px; }
.adapt-word { font-size: 2rem; margin: 18px 6px 10px; }
.adapt-word .q-target { font-size: 1.15em; }
.adapt-hint { max-width: 580px; margin: 0 auto 18px; font-size: 1.02rem; line-height: 1.6; color: #475569;
background: #f8fafc; border: 1px solid #eef1f6; border-radius: 12px; padding: 10px 14px;
animation: adaptHintIn .25s ease-out; }
.adapt-hint-tag { display: inline-block; font-size: 0.72rem; font-weight: 800; color: #7c3aed;
background: #f3e8ff; border-radius: 999px; padding: 2px 9px; margin-right: 6px; vertical-align: middle; }
@keyframes adaptHintIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.adapt-result .adapt-band { margin: 12px auto 6px; }
.adapt-result .adapt-band span { display: block; font-size: 0.92rem; color: #64748b; font-weight: 700; }
.adapt-result .adapt-band b { font-size: 2rem; color: #1d4ed8; letter-spacing: -0.01em; }
.adapt-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 460px; margin: 18px auto 4px; }
.adapt-stats > div { background: #f8fafc; border: 1px solid #eef1f6; border-radius: 12px; padding: 12px 6px; text-align: center; }
.adapt-stats span { display: block; font-size: 0.76rem; color: #94a3b8; font-weight: 700; }
.adapt-stats b { font-size: 1.15rem; color: #0f172a; }
@media (max-width: 520px) { .adapt-stats { grid-template-columns: repeat(2, 1fr); } .adapt-word { font-size: 1.6rem; } }
/* 실력측정 카드 강조 */
.cg-featured { position: relative; border-color: #c7d2fe !important; background: linear-gradient(135deg, #eef4ff 0%, #f5f3ff 100%); }
.cg-featured .cg-ic { color: #6d28d9; }
/* 예문 해석 힌트 버튼 (7초 후 선명) */
.q-trans-btn.dim { opacity: .35; filter: grayscale(.4); }
.q-trans-btn:not(.dim) { background: #fef9c3; border-color: #fde047; color: #854d0e; animation: hintglow 1.2s ease-in-out infinite; }
@keyframes hintglow { 50% { box-shadow: 0 0 0 4px rgba(250, 204, 21, .25); } }
.q-trans { max-width: 580px; margin: 0 auto 12px; text-align: center; color: #475569; font-size: 1rem; line-height: 1.55; background: #f8fafc; border-radius: 10px; padding: 10px 12px; }
.q-trans-hl { font-weight: 800; color: #1d4ed8; background: #dbeafe; border-radius: 4px; padding: 0 3px; }
/* 오답 정답공개 패널 + 넘어가기 */
.q-reveal { max-width: 580px; margin: 16px auto 0; text-align: center; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 14px; padding: 14px; }
.q-rev-line { font-size: 1.1rem; font-weight: 700; color: #9a3412; }
.q-rev-line b { color: #c2410c; }
/* 정답(초록) / 내가 고른 오답(빨강) 섹션 분리 */
.q-rev-correct { background: #dcfce7; border: 1px solid #86efac; color: #166534; border-radius: 9px; padding: 9px 12px; font-weight: 700; font-size: 1.05rem; }
.q-rev-correct b { color: #15803d; font-size: 1.1em; }
.q-rev-wrong { margin-top: 8px; background: #fee2e2; border: 1px solid #fecaca; color: #b91c1c; border-radius: 9px; padding: 9px 12px; font-weight: 700; }
.q-rev-wrong b { color: #991b1b; }
.q-rev-ex { margin-top: 8px; color: #57534e; font-size: .96rem; line-height: 1.55; }
.q-next { margin-top: 14px; background: #2563eb; color: #fff; border: none; border-radius: 12px; padding: 12px 22px; font-size: 1.05rem; font-weight: 800; cursor: pointer; }
.q-next:hover { background: #1d4ed8; }
/* 콤보 / 강타 연출 */
.combo-pop { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 8;
font-size: 2.4rem; font-weight: 900; color: #16a34a; text-shadow: 0 4px 14px rgba(0,0,0,.18);
pointer-events: none; animation: cpop 1.3s ease forwards; }
.combo-pop.smash { color: #f97316; font-size: 2rem; white-space: nowrap; text-shadow: 0 0 18px rgba(249,115,22,.6); }
@keyframes cpop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4) rotate(-6deg); }
14% { opacity: 1; transform: translate(-50%, -50%) scale(1.25) rotate(3deg); }
30% { transform: translate(-50%, -50%) scale(1) rotate(0); }
82% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
100% { opacity: 0; transform: translate(-50%, -60%) scale(1); } }
.combo-badge { position: absolute; left: 50%; top: 60%; transform: translateX(-50%); z-index: 8;
background: linear-gradient(90deg, #f59e0b, #ef4444); color: #fff; font-weight: 900; font-size: 1.1rem;
padding: 6px 16px; border-radius: 999px; pointer-events: none; box-shadow: 0 6px 18px rgba(239,68,68,.4);
animation: cbadge 1.3s ease forwards; }
@keyframes cbadge { 0% { opacity: 0; transform: translateX(-50%) scale(.5); } 22% { opacity: 1; transform: translateX(-50%) scale(1.1); } 82% { opacity: 1; transform: translateX(-50%) scale(1); } 100% { opacity: 0; transform: translateX(-50%) translateY(-14px) scale(1); } }
.gm-box.flash { animation: boxflash .35s ease; }
@keyframes boxflash { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } 30% { box-shadow: inset 0 0 60px 0 rgba(34,197,94,.35); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
.gm-box.shake { animation: boxshake .35s ease; }
@keyframes boxshake { 0%,100% { transform: translate(0,0); } 20% { transform: translate(-6px,2px); } 40% { transform: translate(6px,-2px); } 60% { transform: translate(-5px,1px); } 80% { transform: translate(5px,-1px); } }
@media (max-width: 600px) {
.gm-box.playing { max-width: 100%; }
.g-timer { font-size: 1.3rem; min-width: 66px; }
.vs-card { padding: 11px 10px; }
.vs-en .vs-tx { font-size: .98rem; }
.vs-ko .vs-tx { font-size: .85rem; }
.q-sentence { font-size: 1.1rem; }
}
@media (max-width: 600px) {
.result-header { flex-direction: column; align-items: stretch; }
h1 { font-size: 1.8rem; }
.brand { font-size: 1.1rem; }
.logo-img { height: 52px; }
.bg-mark { width: 320px; right: -90px; bottom: -90px; }
.nav-tab { padding: 8px 12px; font-size: 0.85rem; }
.rk-name { flex-basis: 90px; }
.match-grid { gap: 6px; }
}
/* PDF 저장(인쇄): 분석노트만 깔끔하게 출력 */
/* 인쇄 전용 컨테이너: 화면에서는 숨김 (인쇄 직전 JS가 분석노트만 복제해 넣음) */
#notePrintRoot { display: none; }
@media print {
@page { margin: 8mm; }
html, body { background: #fff !important; margin: 0 !important; padding: 0 !important; }
/* 분석노트 전용 컨테이너만 출력하고 나머지는 흐름에서 완전히 제거(빈 페이지 방지) */
body > *:not(#notePrintRoot) { display: none !important; }
/* --nz: JS가 내용 높이를 재서 정한 자동 축소 배율. width를 1/배율로 키워 축소 후 폭이 페이지에 꽉 차게 함 */
#notePrintRoot { display: block !important; margin: 0; zoom: var(--nz, 1); width: calc(100% / var(--nz, 1)); }
* { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}
/* 인쇄·PDF용 compact 레이아웃 (인쇄 직전 #noteOutput에 .pfit 부여, 측정용 복제본에도 동일 적용) */
.pfit { font-size: 10px; line-height: 1.4; }
.pfit .note-tophead { font-size: 9px; }
.pfit .note-title { font-size: 15px; margin: 1px 0; }
.pfit .note-subtitle { font-size: 10px; margin-bottom: 6px; }
.pfit .note-cards { gap: 8px; margin: 8px 0; flex-wrap: nowrap; }
.pfit .note-card { padding: 7px 9px; }
.pfit .note-card.nc-topic { flex: 1 1 0; }
.pfit .note-card.nc-idea { flex: 2.6 1 0; }
.pfit .note-card .nc-h { font-size: 10px; margin-bottom: 2px; }
.pfit .note-card .nc-b { font-size: 9.3px; }
.pfit .note-card .nc-en { font-size: 9.5px; margin-top: 1px; }
.pfit .note-flow { font-size: 9px; line-height: 1.5; padding-top: 6px; margin: 6px 0 4px; }
/* 문장 블록은 통째로 다음 장으로 넘기지 않고, 안의 깔끔한 지점(문장 ↔ 분석박스)에서만 나뉘게 해 빈 공간·여분 페이지를 줄임 */
.pfit .note-s { padding: 6px 4px 4px; margin-top: 8px; break-inside: auto; page-break-inside: auto; }
.pfit .note-s.hl-key-s { padding: 8px 8px 6px; }
.pfit .s-top, .pfit .s-cols { break-inside: avoid; page-break-inside: avoid; }
.pfit .s-tags { margin-bottom: 3px; }
.pfit .tag { font-size: 8px; padding: 1px 5px; }
.pfit .tag.sm { font-size: 7px; padding: 0 4px; }
.pfit .s-top { padding: 6px 8px; margin-bottom: 7px; }
.pfit .s-en { font-size: 12.5px; line-height: 1.4; }
.pfit .s-num { font-size: 12px; }
.pfit .seg { margin: 0 2px 7px; }
.pfit .seg-en { font-size: 12.5px; line-height: 1.3; }
.pfit .seg-ko { font-size: 8.5px; line-height: 1.2; }
.pfit .s-ko { font-size: 8px; line-height: 1.35; margin: 2px 0 0 14px; }
.pfit .ln-lbl { font-size: 7px; padding: 0 4px; }
.pfit .s-cols { gap: 8px; margin: 3px 0 4px; }
.pfit .s-box { padding: 6px 8px; }
.pfit .s-box-h { font-size: 9px; margin-bottom: 3px; }
.pfit .s-st { font-size: 9px; margin: 1px 0; }
.pfit .st-label { font-size: 8px; padding: 0 5px; }
.pfit .s-line, .pfit .s-pt { font-size: 9px; margin: 2px 0; }
.pfit .lbl-imp, .pfit .lbl-gr { font-size: 8px; padding: 0 5px; }
.pfit .gr-text { font-size: 9px; }
.pfit .s-voc { font-size: 9px; line-height: 1.45; margin: 1px 0; }
.pfit .vt { font-size: 8px; padding: 0 5px; }
/* 측정용 복제본: 화면에 안 보이게 */
.note-measure { position: fixed; left: -10000px; top: 0; visibility: hidden; box-sizing: border-box; background: #fff; }
/* ===== 나의 학습 대시보드 ===== */
.dash-modal {
position: fixed; inset: 0; z-index: 9000; overflow-y: auto;
background: #f8fafc; padding: 0 0 60px;
}
.dash-modal[hidden] { display: none; }
body.dash-open { overflow: hidden; }
.dash-wrap { max-width: 1080px; margin: 0 auto; padding: 26px 22px; }
.dash-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.dash-title { font-size: 1.7rem; font-weight: 800; color: #0f172a; margin: 0; }
.dash-sub { margin: 6px 0 0; color: #64748b; font-size: 0.95rem; }
#dashGreet { color: #2563eb; font-weight: 700; }
.dash-top-btns { display: flex; gap: 8px; flex: 0 0 auto; }
.dash-card { background: #fff; border: 1px solid #eef1f6; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); padding: 20px 22px; }
.dc-h { font-size: 1.02rem; font-weight: 800; color: #0f172a; margin-bottom: 16px; }
.dc-h .dc-sub { float: right; font-size: 0.78rem; font-weight: 600; color: #94a3b8; background: #f1f5f9; padding: 3px 10px; border-radius: 999px; }
.dash-sec-t { font-size: 1.1rem; font-weight: 800; color: #0f172a; margin: 26px 4px 14px; }
/* KPI */
.dash-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 18px; }
.kpi-card { background: #fff; border: 1px solid #eef1f6; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); padding: 18px 20px; }
.kpi-top { display: flex; align-items: center; justify-content: space-between; }
.kpi-lb { font-size: 0.88rem; color: #64748b; font-weight: 700; }
.kpi-ic { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1rem; }
.kpi-n { font-size: 1.9rem; font-weight: 900; color: #0f172a; margin: 8px 0 2px; }
.kpi-n span { font-size: 0.95rem; font-weight: 700; color: #94a3b8; margin-left: 3px; }
.kpi-up { color: #22c55e; font-weight: 800; font-size: 0.82rem; }
.kpi-flat { color: #94a3b8; font-weight: 600; font-size: 0.82rem; }
/* 메인: 게이지 / 레벨 / 도넛 */
.dash-main { display: grid; grid-template-columns: 1.1fr 0.9fr 1.2fr; gap: 16px; }
.gauge { position: relative; width: 100%; max-width: 230px; margin: 6px auto 0; }
.gauge svg { width: 100%; height: auto; display: block; }
.gauge-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.gauge-n { font-size: 2.5rem; font-weight: 900; color: #0f172a; line-height: 1; }
.gauge-n span { font-size: 1.1rem; }
.gauge-lb { font-size: 0.82rem; color: #94a3b8; font-weight: 600; margin-top: 4px; }
.dc-level { text-align: left; }
.lv-cur { color: #64748b; font-size: 0.85rem; font-weight: 700; }
.lv-n { font-size: 2rem; font-weight: 900; color: #0f172a; margin: 2px 0 8px; }
.lv-tag { display: inline-block; background: #eff4ff; color: #2563eb; font-weight: 700; font-size: 0.82rem; padding: 4px 12px; border-radius: 999px; margin-bottom: 16px; }
.lv-next { color: #64748b; font-size: 0.85rem; font-weight: 700; margin-top: 6px; }
.lv-pts { font-size: 1.1rem; color: #0f172a; margin: 2px 0 8px; }
.lv-pts b { font-size: 1.4rem; font-weight: 900; }
.lv-bar { height: 10px; background: #eef2f7; border-radius: 999px; overflow: hidden; }
.lv-fill { height: 100%; background: linear-gradient(90deg,#2563eb,#1d4ed8); border-radius: 999px; }
/* 도넛 */
.dn-wrap { display: flex; align-items: center; gap: 18px; }
.dn-chart { width: 130px; height: 130px; border-radius: 50%; flex: 0 0 auto; position: relative; }
.dn-hole { position: absolute; inset: 26px; background: #fff; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 1.3rem; font-weight: 900; color: #0f172a; }
.dn-hole span { font-size: 0.7rem; font-weight: 700; color: #94a3b8; }
.dn-legend { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; }
.dn-row { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; }
.dn-dot { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.dn-lb { flex: 1 1 auto; color: #475569; font-weight: 600; }
.dn-pct { font-weight: 800; color: #0f172a; }
/* 활동 현황 */
.dash-acts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.act-card { background: #fff; border: 1px solid #eef1f6; border-radius: 18px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); padding: 16px 18px; }
.act-top { font-size: 0.9rem; font-weight: 700; color: #334155; display: flex; align-items: center; gap: 6px; }
.act-n { font-size: 1.6rem; font-weight: 900; color: #0f172a; margin: 8px 0; }
.act-n span { font-size: 0.85rem; color: #94a3b8; font-weight: 700; }
.act-bar { height: 8px; background: #eef2f7; border-radius: 999px; overflow: hidden; }
.act-fill { height: 100%; border-radius: 999px; }
/* 하단: 최근활동 + 차트 */
.dash-bottom { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 16px; }
.ra-day { display: flex; align-items: center; gap: 8px; font-weight: 800; color: #0f172a; margin: 10px 0 6px; font-size: 0.95rem; }
.ra-dot { width: 9px; height: 9px; border-radius: 50%; background: #2563eb; }
.ra-list { list-style: none; margin: 0 0 8px 17px; padding: 0; border-left: 2px solid #eef2f7; }
.ra-list li { font-size: 0.88rem; color: #475569; padding: 4px 0 4px 12px; }
.ra-list li b { color: #0f172a; }
.ra-none { color: #94a3b8 !important; }
.line-svg { width: 100%; height: 180px; }
.ch-x { display: flex; justify-content: space-between; font-size: 0.78rem; color: #94a3b8; margin-top: 4px; }
/* 배지 */
.dash-badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.badge-card { background: #fff; border: 1px solid #eef1f6; border-radius: 18px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); padding: 20px 14px; text-align: center; opacity: 0.5; filter: grayscale(0.6); }
.badge-card.got { opacity: 1; filter: none; }
.badge-ic { font-size: 2.1rem; }
.badge-nm { font-size: 0.88rem; font-weight: 800; color: #0f172a; margin: 8px 0 4px; }
.badge-st { font-size: 0.78rem; font-weight: 700; color: #94a3b8; }
.badge-card.got .badge-st { color: #22c55e; }
@media (max-width: 900px) {
.dash-kpis, .dash-acts, .dash-badges { grid-template-columns: repeat(2, 1fr); }
.dash-main, .dash-bottom { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
.dash-kpis, .dash-acts, .dash-badges { grid-template-columns: 1fr; }
}
/* ===== 캐시 배지 / 충전·구독 모달 ===== */
.acct-cash {
border: 1.5px solid #fde68a; background: #fffbeb; color: #b45309;
border-radius: 999px; padding: 5px 12px; font-size: 0.82rem; font-weight: 800; cursor: pointer;
}
.acct-cash:hover { border-color: #fcd34d; background: #fef3c7; }
.topup-card { max-width: 440px; }
.topup-demo { background: #fff7ed; border: 1px solid #fed7aa; color: #c2410c; border-radius: 10px; padding: 10px 12px; font-size: 0.85rem; font-weight: 600; margin-bottom: 14px; }
.ts-block { margin-bottom: 14px; }
.ts-h { font-weight: 800; color: #0f172a; font-size: 0.95rem; margin-bottom: 8px; }
.ts-reco { background: #2563eb; color: #fff; font-size: 0.68rem; padding: 2px 8px; border-radius: 999px; margin-left: 6px; vertical-align: middle; }
.ts-btn { width: 100%; border: 1.5px solid #cbd5e1; background: #fff; border-radius: 12px; padding: 13px 14px; font-size: 0.92rem; font-weight: 700; color: #334155; cursor: pointer; }
.ts-btn:hover { border-color: #93c5fd; color: #1d4ed8; }
.ts-sub { background: linear-gradient(90deg, #2563eb, #1d4ed8); color: #fff; border: none; }
.ts-sub:hover { color: #fff; opacity: 0.95; }
.ts-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ts-row .ts-btn { padding: 10px 6px; font-size: 0.8rem; line-height: 1.5; }
.topup-prices { font-size: 0.8rem; color: #64748b; background: #f8fafc; border-radius: 10px; padding: 10px 12px; margin: 4px 0 12px; }
.topup-close { width: 100%; }
/* 대시보드 캐시 배너 */
.dash-cash { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: linear-gradient(100deg, #1d4ed8, #2563eb); color: #fff; border-radius: 20px; padding: 18px 22px; margin-bottom: 18px; box-shadow: 0 10px 30px rgba(37,99,235,0.25); }
.dc-cash-l { display: flex; align-items: center; gap: 12px; }
.dc-cash-ic { font-size: 1.6rem; }
.dc-cash-lb { font-size: 0.82rem; opacity: 0.9; font-weight: 600; }
.dc-cash-n { font-size: 1.5rem; font-weight: 900; }
.dc-cash-btn { background: #fff; color: #1d4ed8; border: none; border-radius: 999px; padding: 10px 18px; font-weight: 800; font-size: 0.9rem; cursor: pointer; }
.dc-cash-btn:hover { background: #eff6ff; }
/* ===== 출석체크 ===== */
.acct-attend {
border: 1.5px solid #bbf7d0; background: #f0fdf4; color: #15803d;
border-radius: 999px; padding: 5px 12px; font-size: 0.82rem; font-weight: 800; cursor: pointer;
}
.acct-attend:hover { border-color: #86efac; background: #dcfce7; }
.acct-attend.att-todo { animation: attPulse 1.6s ease-in-out infinite; position: relative; }
.acct-attend.att-todo::after { content: ""; position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; background: #ef4444; border-radius: 50%; border: 2px solid #fff; }
@keyframes attPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.0); } 50% { box-shadow: 0 0 0 5px rgba(34,197,94,0.18); } }
.attend-card { max-width: 400px; text-align: center; }
.at-streak { font-size: 1.05rem; color: #0f172a; margin-bottom: 14px; }
.at-streak b { color: #ea580c; font-size: 1.5rem; }
.at-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; margin-bottom: 14px; }
.at-day { aspect-ratio: 1; border-radius: 10px; background: #f1f5f9; color: #94a3b8; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.95rem; border: 1.5px solid #e2e8f0; }
.at-day.on { background: #dcfce7; color: #16a34a; border-color: #86efac; }
.at-day.bonus { background: #fef3c7; color: #b45309; border-color: #fcd34d; }
.at-day.bonus.on { background: #fde68a; }
.at-info { font-size: 0.84rem; color: #64748b; margin-bottom: 14px; }
.attend-close { width: 100%; margin-top: 10px; }
/* ===== 좌측 사이드바 앱 골격 (교육기관 프리미엄 톤) ===== */
body { background: #f8fafc !important; }
.bg-mark { display: none !important; }
.app-shell { display: flex; min-height: 100vh; align-items: stretch; }
.sidebar {
width: 232px; flex: 0 0 232px; background: #ffffff; border-right: 1px solid #eef1f6;
display: flex; flex-direction: column; padding: 18px 14px; position: sticky; top: 0; height: 100vh;
}
.side-brand { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; padding: 4px 8px 14px; border-bottom: 1px solid #f1f5f9; margin-bottom: 12px; }
.side-logo-img { width: 100%; max-width: 262px; height: auto; object-fit: contain; flex: 0 0 auto; }
.side-brand-tx { display: flex; flex-direction: column; align-items: center; text-align: center; font-weight: 800; color: #0f172a; font-size: 1.24rem; line-height: 1.16; letter-spacing: -0.01em; }
.side-brand-tx small { font-weight: 600; color: #94a3b8; font-size: 0.72rem; margin-top: 3px; }
.side-nav { display: flex; flex-direction: column; gap: 3px; }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 3px; padding-top: 12px; border-top: 1px solid #f1f5f9; }
.side-item {
display: flex; align-items: center; gap: 11px; width: 100%;
padding: 10px 12px; border: none; background: none; border-radius: 10px; box-shadow: none;
font-size: 1.02rem; font-weight: 600; color: #475569; cursor: pointer; text-align: left; position: relative;
}
.side-item .ic { width: 19px; height: 19px; flex: 0 0 auto; color: #94a3b8; }
.side-item:hover { background: #f5f7fb; color: #0f172a; }
.side-item:hover .ic { color: #475569; }
.side-item.nav-tab { border-bottom: none; }
.side-item.active, .side-item.nav-tab.active { background: #eef4ff; color: #1d4ed8; font-weight: 800; border-bottom: none; box-shadow: none; }
.side-item.active .ic, .side-item.nav-tab.active .ic { color: #2563eb; }
.side-item.att-todo::after { content: ""; position: absolute; left: 26px; top: 9px; width: 8px; height: 8px; background: #ef4444; border-radius: 50%; border: 2px solid #fff; }
.app-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; background: #f8fafc; }
.topbar { display: flex; align-items: center; gap: 12px; padding: 12px 26px; background: #ffffff; border-bottom: 1px solid #eef1f6; position: sticky; top: 0; z-index: 20; }
.topbar-sp { flex: 1 1 auto; }
.topbar-title {
font-size: 1.22rem; font-weight: 800; color: #0f2b5b; letter-spacing: -0.01em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto;
}
@media (max-width: 760px) { .topbar-title { font-size: 1rem; } }
@media (max-width: 560px) { .topbar-title { display: none; } }
.topbar .acct-badge { margin-left: 0; }
.app-body .container { max-width: 1060px; margin: 0 auto; padding: 26px 26px 48px; width: 100%; }
@media (max-width: 880px) {
.sidebar { width: 60px; flex-basis: 60px; padding: 14px 7px; }
.side-brand-tx, .side-item span { display: none; }
.side-brand { justify-content: center; padding: 4px 0 12px; }
.side-logo-img { width: 46px; max-width: 46px; height: auto; }
.side-item { justify-content: center; padding: 12px 0; gap: 0; }
.side-item.att-todo::after { left: auto; right: 12px; top: 8px; }
.app-body .container { padding: 18px 14px 40px; }
.topbar { padding: 10px 14px; }
}
/* ===== 단어장 제작 페이지 (3단 레이아웃) ===== */
.page-head { margin-bottom: 26px; }
.page-title { font-size: 1.85rem; font-weight: 800; color: #0f172a; margin: 0 0 8px; }
.page-desc { color: #64748b; font-size: 0.95rem; margin: 0; }
.vocab-layout { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
.vocab-main { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
/* 단계 표시 */
.stepper { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 16px 22px; }
.step { display: flex; align-items: center; gap: 9px; font-weight: 700; color: #94a3b8; font-size: 0.9rem; white-space: nowrap; }
.step-n { width: 24px; height: 24px; border-radius: 50%; background: #e2e8f0; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 800; flex: 0 0 auto; }
.step.active { color: #0f2b5b; }
.step.active .step-n { background: #0f2b5b; }
.step-line { flex: 1 1 auto; height: 2px; background: #e8edf4; min-width: 14px; }
/* 본문 카드 */
.pcard { background: #fff; border: 1px solid #e2e8f0; border-radius: 20px; padding: 32px; }
.pcard-t { font-size: 1.2rem; font-weight: 800; color: #0f172a; margin: 0 0 6px; }
.pcard-d { color: #64748b; font-size: 0.92rem; margin: 0 0 20px; }
.pcard-d .vo-subhint { color: #94a3b8; }
/* 입력 탭 */
.in-tabs { display: flex; gap: 26px; border-bottom: 1px solid #e2e8f0; margin-bottom: 18px; }
.in-tab { background: none; border: none; padding: 0 0 12px; font-size: 0.95rem; font-weight: 700; color: #94a3b8; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.in-tab.active { color: #2563eb; border-bottom-color: #2563eb; }
.in-pane[hidden] { display: none; }
#sourceText { width: 100%; min-height: 420px; border: 1.5px solid #cbd5e1; border-radius: 12px; padding: 20px; font-size: 1rem; line-height: 1.6; color: #1f2937; resize: vertical; box-sizing: border-box; }
#sourceText:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.12); }
.file-drop { border: 1.5px dashed #cbd5e1; border-radius: 12px; padding: 30px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.tip-box { display: flex; align-items: center; gap: 14px; background: #f8faff; border: 1px solid #e7eefb; border-radius: 12px; padding: 15px 18px; margin-top: 16px; }
.tip-ic { width: 22px; height: 22px; color: #2563eb; flex: 0 0 auto; }
.tip-tx { flex: 1 1 auto; font-size: 0.86rem; color: #475569; line-height: 1.5; }
.tip-tx b { color: #0f172a; }
.tip-btn { flex: 0 0 auto; border: 1px solid #cbd5e1; background: #fff; border-radius: 10px; padding: 9px 14px; font-weight: 700; font-size: 0.85rem; color: #475569; cursor: pointer; }
.tip-btn:hover { border-color: #93c5fd; color: #1d4ed8; }
.pcard-actions { display: flex; justify-content: flex-end; margin-top: 22px; gap: 10px; }
.pcard-actions.between { justify-content: space-between; }
.btn-next { background: #0f2b5b; color: #fff; border: none; border-radius: 12px; padding: 13px 26px; font-weight: 800; font-size: 0.95rem; cursor: pointer; }
.btn-next:hover { background: #173d7a; }
.btn-back { background: #fff; color: #475569; border: 1.5px solid #cbd5e1; border-radius: 12px; padding: 13px 22px; font-weight: 700; font-size: 0.92rem; cursor: pointer; }
.btn-back:hover { border-color: #93c5fd; color: #1d4ed8; }
.result-btns { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
/* 우측 패널 */
.vocab-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 92px; }
.side-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 20px; padding: 22px; }
.side-card-h { font-size: 1.02rem; font-weight: 800; color: #0f172a; margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; }
.side-edit { border: 1px solid #cbd5e1; background: #fff; border-radius: 8px; padding: 5px 11px; font-size: 0.78rem; font-weight: 700; color: #475569; cursor: pointer; }
.side-edit:hover { border-color: #93c5fd; color: #1d4ed8; }
.side-row { margin-bottom: 15px; }
.side-row:last-child { margin-bottom: 0; }
.side-lb { font-size: 0.8rem; color: #94a3b8; font-weight: 700; margin-bottom: 3px; }
.side-val { font-size: 0.92rem; color: #0f172a; font-weight: 600; }
.side-stat { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #f1f5f9; font-size: 0.9rem; color: #64748b; }
.side-stat:last-child { border-bottom: none; }
.side-stat b { color: #0f172a; font-weight: 800; }
.info-card { background: #f8faff; border-color: #e7eefb; }
.info-card p { font-size: 0.85rem; color: #64748b; line-height: 1.6; margin: 0; }
@media (max-width: 1100px) {
.vocab-layout { grid-template-columns: 1fr; }
.vocab-side { position: static; }
}
@media (max-width: 560px) {
.stepper { gap: 6px; padding: 12px; overflow-x: auto; }
.step span:not(.step-n) { display: none; }
.pcard { padding: 20px; }
}
/* ===== 나의 정보 — 학습 사용량 대시보드 ===== */
#view-dash { color: #0f172a; }
.mi-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.mi-head .page-title { margin: 0 0 6px; }
.mi-head .page-desc { margin: 0; }
.mi-updated { font-size: 0.82rem; color: #94a3b8; white-space: nowrap; }
.mi-updated b { color: #475569; font-weight: 700; }
.mi-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 20px; box-shadow: 0 1px 2px rgba(15,23,42,0.03); padding: 24px; }
.mi-card-h { font-size: 1.02rem; font-weight: 800; color: #0f172a; margin-bottom: 18px; }
.mi-card-h.spread { display: flex; align-items: center; justify-content: space-between; }
.mi-kpis { display: grid; grid-template-columns: 1fr 1.05fr 1.45fr; gap: 20px; margin-bottom: 20px; align-items: stretch; }
/* 카드1 요금제 */
.mi-plan { display: flex; flex-direction: column; }
.mi-plan-box { background: #f1f5fb; border: 1px solid #e6edf7; border-radius: 16px; padding: 20px; flex: 1 1 auto; }
.mi-plan-lb { font-size: 0.86rem; color: #64748b; font-weight: 700; margin-bottom: 6px; }
.mi-plan-price { font-size: 1.75rem; font-weight: 800; color: #0f2b5b; line-height: 1.1; }
.mi-plan-price span { font-size: 0.92rem; font-weight: 700; color: #64748b; margin-left: 4px; }
.mi-plan-row { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 20px; gap: 12px; }
.mi-plan-k { font-size: 0.78rem; color: #94a3b8; font-weight: 700; margin-bottom: 3px; }
.mi-plan-v { font-size: 0.95rem; color: #0f172a; font-weight: 700; }
.mi-attend { margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; border: 1px solid #dbe3ef; background: #fff; color: #0f2b5b; font-weight: 700; font-size: 0.88rem; border-radius: 12px; padding: 11px; cursor: pointer; }
.mi-attend svg { width: 18px; height: 18px; }
.mi-attend:hover { background: #f1f5fb; border-color: #c3d3ea; }
.mi-btn-line { border: 1px solid #cbd5e1; background: #fff; color: #475569; border-radius: 10px; padding: 9px 15px; font-weight: 700; font-size: 0.84rem; cursor: pointer; white-space: nowrap; }
.mi-btn-line:hover { border-color: #93c5fd; color: #1d4ed8; }
/* 카드2 전체 사용량 (링) */
.mi-gauge-wrap { display: flex; align-items: center; gap: 18px; }
.mi-ring { position: relative; width: 150px; height: 150px; flex: 0 0 auto; }
.mi-ring svg { width: 100%; height: 100%; }
.mi-ring-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mi-ring-n { font-size: 1.9rem; font-weight: 800; color: #0f2b5b; line-height: 1; }
.mi-ring-n span { font-size: 0.95rem; margin-left: 1px; }
.mi-ring-lb { font-size: 0.78rem; color: #94a3b8; font-weight: 700; margin-top: 4px; }
.mi-gauge-info { flex: 1 1 auto; display: flex; flex-direction: column; gap: 14px; }
.mi-gi-row { display: flex; flex-direction: column; gap: 2px; }
.mi-gi-k { font-size: 0.8rem; color: #94a3b8; font-weight: 700; }
.mi-gi-v { font-size: 1.15rem; font-weight: 800; color: #0f172a; }
.mi-gi-v em { font-size: 0.78rem; font-weight: 700; color: #94a3b8; font-style: normal; }
.mi-gi-v.accent { color: #2563eb; }
/* 카드3 사용량 추이 */
.mi-legend { font-size: 0.76rem; color: #94a3b8; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.mi-legend i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; margin-left: 8px; }
.mi-legend i.lg-used { background: #0f2b5b; margin-left: 0; }
.mi-legend i.lg-rem { background: #cbd5e1; }
.mi-chart { height: 150px; }
.mi-line { width: 100%; height: 100%; }
.mi-chart-x { display: flex; justify-content: space-between; font-size: 0.72rem; color: #94a3b8; margin-top: 6px; }
/* 세션별 사용 현황 테이블 */
.mi-table { margin-bottom: 20px; }
.mi-th, .mi-tr { display: grid; grid-template-columns: 160px 1.4fr 150px 1fr 64px; align-items: center; gap: 14px; }
.mi-th { padding: 0 6px 12px; border-bottom: 1px solid #eef2f7; font-size: 0.8rem; color: #94a3b8; font-weight: 700; }
.mi-tr { padding: 15px 6px; border-bottom: 1px solid #f1f5f9; font-size: 0.9rem; }
.mi-tr:last-child { border-bottom: none; }
.mi-c-sec { font-weight: 700; color: #0f172a; }
.mi-c-desc { color: #64748b; font-size: 0.85rem; }
.mi-c-use { color: #475569; }
.mi-c-use b { color: #0f172a; font-weight: 800; }
.mi-bar { display: block; width: 100%; height: 8px; background: #eef2f7; border-radius: 6px; overflow: hidden; }
.mi-bar-f { display: block; height: 100%; background: #0f2b5b; border-radius: 6px; }
.mi-c-pct { text-align: right; font-weight: 800; color: #0f172a; font-size: 0.85rem; }
/* 하단: 이번 달 요약 + 안내 */
.mi-bottom { display: grid; grid-template-columns: 1.9fr 1fr; gap: 20px; }
.mi-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.mi-stat { background: #f8fafc; border: 1px solid #eef2f7; border-radius: 14px; padding: 16px; }
.mi-stat-k { font-size: 0.8rem; color: #64748b; font-weight: 700; margin-bottom: 10px; }
.mi-stat-n { font-size: 1.5rem; font-weight: 800; color: #0f172a; line-height: 1; }
.mi-stat-u { font-size: 0.76rem; color: #94a3b8; font-weight: 700; margin-top: 5px; }
.mi-guide { display: flex; flex-direction: column; }
.mi-guide-tx { font-size: 0.88rem; color: #64748b; line-height: 1.6; margin: 0 0 18px; flex: 1 1 auto; }
@media (max-width: 1100px) {
.mi-kpis { grid-template-columns: 1fr; }
.mi-bottom { grid-template-columns: 1fr; }
.mi-head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 720px) {
.mi-th { display: none; }
.mi-tr { grid-template-columns: 1fr auto; row-gap: 6px; }
.mi-c-desc { grid-column: 1 / -1; order: 3; }
.mi-c-bar { grid-column: 1 / -1; order: 4; }
.mi-c-pct { order: 2; }
.mi-stat-grid { grid-template-columns: repeat(2, 1fr); }
}
/* 토바 알림 벨 */
.topbar-bell { background: none; border: none; color: #64748b; cursor: pointer; padding: 7px; border-radius: 10px; display: flex; align-items: center; }
.topbar-bell svg { width: 20px; height: 20px; }
.topbar-bell:hover { background: #f1f5f9; color: #0f2b5b; }
/* ===== 변형문제 · 분석노트 — 프리미엄 톤 통일 ===== */
#view-exam .pcard, #view-note .pcard { margin-bottom: 20px; }
/* 입력 textarea 통일 */
#view-exam textarea, #view-note textarea {
border: 1.5px solid #cbd5e1; border-radius: 12px; padding: 16px; min-height: 180px; box-sizing: border-box;
}
#view-exam textarea:focus, #view-note textarea:focus {
outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
/* 변형문제 버튼 톤다운 (밝은 파랑/보라 → 차분한 네이비/블루) */
#view-exam .exam-btn { background: #2563eb; border-radius: 10px; padding: 11px 16px; font-weight: 700; }
#view-exam .exam-btn:hover { background: #1d4ed8; }
#view-exam .exam-btn.rec { background: #0f2b5b; }
#view-exam .exam-btn.rec:hover { background: #173d7a; }
#view-exam .set-btn { border-radius: 10px; }
#view-exam .set-btn.active { background: #0f2b5b; border-color: #0f2b5b; }
/* 권장(출제예상) 카드 강조 */
.pcard-accent { border-color: #d8e2f2; background: #f8faff; }
.pcard-badge { display: inline-block; margin-left: 8px; font-size: 0.72rem; font-weight: 800; color: #2563eb; background: #e8f0fe; border-radius: 999px; padding: 3px 10px; vertical-align: middle; }
/* 카드 제목 + 태그 배지 */
.pcard-tagrow { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.pcard-tagrow .pcard-t { margin: 0; }
.pcard-tag { font-size: 0.72rem; font-weight: 800; color: #475569; background: #eef2f7; border: 1px solid #e2e8f0; border-radius: 999px; padding: 3px 11px; }
.pcard-tag.tag-amber { color: #b45309; background: #fef6e7; border-color: #f6e2bd; }
/* 분석노트: 색 띠/형광 제거, 차분하게 */
#view-note .note-panel { border-top: none; }
#view-note .note-panel > label,
#view-note .big-step > label { display: block; font-weight: 700; color: #334155; margin: 14px 0 8px; }
#view-note .trans-notice { background: #eef5ff; color: #1d4ed8; font-weight: 600; border: 1px solid #dbe7fb; }
/* 단계 박스 — 네이비 계열 통일 (형광 청록/주황 제거) */
#view-note .big-step { border-width: 1px; border-radius: 16px; padding: 20px; }
#view-note .big-step.step1, #view-note .big-step.step2 { border-color: #dbe3ef; background: #f7f9fc; }
#view-note .big-step-h { background: #0f2b5b !important; box-shadow: none; color: #fff; display: flex; align-items: center; gap: 8px; font-size: 0.98rem; padding: 8px 18px; }
#view-note .step-num { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,.22); font-size: 0.78rem; font-weight: 800; }
#view-note textarea.ta-step1, #view-note textarea.ta-step2 { border: 1.5px solid #cbd5e1; background: #fff; }
#view-note textarea.ta-step1:focus, #view-note textarea.ta-step2:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
#view-note .btn-step1 { background: #0f2b5b; }
#view-note .btn-step1:hover { background: #173d7a; }
#view-note .btn-step2 { background: #2563eb; }
#view-note .btn-step2:hover:not(:disabled) { background: #1d4ed8; }
#view-note .step1-done-btn { background: #0f2b5b; color: #fff; border-radius: 12px; }
#view-note .step1-done-btn:hover { background: #173d7a; }
#view-note .step1-redo { font-weight: 700; opacity: .85; text-decoration: underline; margin-left: 8px; }
/* 1 → 2 구분선 */
.step-divider { display: flex; align-items: center; gap: 14px; margin: 24px 2px; }
.step-divider::before, .step-divider::after { content: ""; flex: 1 1 auto; height: 1px; background: #e2e8f0; }
.step-divider > span { display: flex; align-items: center; gap: 8px; font-weight: 800; color: #0f2b5b; font-size: 0.92rem; }
.step-divider .step-num { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #0f2b5b; color: #fff; font-size: 0.76rem; font-weight: 800; }
/* 결과 헤더 제목 정렬 */
#view-exam .result-header .pcard-t, #view-note .result-header .pcard-t { margin: 0; }
/* 글자수 초과 시 버튼 흐리게 (pcard-actions 안에서도 동작) */
button.is-blocked { opacity: 0.45; }
/* ===== 홈 화면 ===== */
#view-home { max-width: 860px; margin: 0 auto; }
.home-hero { text-align: center; padding: 28px 20px 8px; }
.home-logo { width: 100%; max-width: 340px; height: auto; object-fit: contain; margin-bottom: 20px; }
.home-title { font-size: 2rem; font-weight: 800; color: #0f2b5b; line-height: 1.3; margin: 0 0 14px; }
.home-title span { color: #2563eb; }
.home-slogan { color: #64748b; font-size: 1rem; line-height: 1.7; margin: 0 0 24px; }
.home-start { background: #0f2b5b; color: #fff; border: none; border-radius: 14px; padding: 15px 30px; font-size: 1rem; font-weight: 800; cursor: pointer; box-shadow: 0 6px 18px rgba(15,43,91,0.18); }
.home-start:hover { background: #173d7a; }
.home-video { margin: 30px 0 26px; }
.home-sec-h { font-size: 1.05rem; font-weight: 800; color: #0f172a; margin-bottom: 14px; }
.yt-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; border: 1px solid #e2e8f0; background: #0f172a; box-shadow: 0 8px 30px rgba(15,23,42,0.12); }
.yt-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-thumb { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; margin: 0; cursor: pointer; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; }
.yt-thumb::after { content: ""; position: absolute; inset: 0; background: rgba(15,23,42,0.28); transition: background .15s; }
.yt-thumb:hover::after { background: rgba(15,23,42,0.14); }
.yt-play { position: relative; z-index: 1; width: 74px; height: 74px; border-radius: 50%; background: rgba(255,255,255,0.95); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(0,0,0,0.3); }
.yt-play svg { width: 30px; height: 30px; color: #0f2b5b; margin-left: 4px; }
.yt-embed.is-empty { background: #f1f5f9; border-style: dashed; }
.yt-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #94a3b8; }
.yt-ph-ic { width: 64px; height: 64px; border-radius: 50%; background: #e2e8f0; display: flex; align-items: center; justify-content: center; }
.yt-ph-ic svg { width: 28px; height: 28px; color: #94a3b8; margin-left: 3px; }
.yt-ph-tx { font-weight: 700; font-size: 0.92rem; }
.home-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 10px; }
.home-link { display: flex; align-items: center; gap: 12px; text-align: left; background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 18px; cursor: pointer; box-shadow: 0 1px 2px rgba(15,23,42,0.03); transition: border-color .15s, box-shadow .15s, transform .15s; }
.home-link:hover { border-color: #bcd0f0; box-shadow: 0 8px 22px rgba(15,43,91,0.08); transform: translateY(-1px); }
.hl-ic { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 12px; background: #eff4ff; color: #2563eb; display: flex; align-items: center; justify-content: center; }
.hl-ic svg { width: 21px; height: 21px; }
.hl-tx { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hl-tx b { color: #0f172a; font-size: 0.95rem; font-weight: 800; }
.hl-tx small { color: #94a3b8; font-size: 0.78rem; }
.hl-arrow { color: #cbd5e1; font-size: 1.4rem; line-height: 1; flex: 0 0 auto; }
/* 사이드바 홈 active 상태 (nav-tab과 동일 톤) */
.side-item#navHome.active { background: #eff6ff; color: #2563eb; }
.side-item#navHome.active .ic { color: #2563eb; }
@media (max-width: 680px) {
.home-links { grid-template-columns: 1fr; }
.home-title { font-size: 1.6rem; }
}
/* ===== 변형문제 2컬럼 · 카드 선택형 UI ===== */
.tool-layout { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
.tool-main { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.tool-main .pcard { margin-bottom: 0; }
.tool-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 92px; }
@media (max-width: 1100px) { .tool-layout { grid-template-columns: 1fr; } .tool-side { position: static; } }
/* 카드 제목 + 단계 번호 */
.pcard-step { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.pcard-step .pcard-t { margin: 0 0 4px; }
.pcard-step .pcard-d { margin: 0; }
.pcard-step-n { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; background: #0f2b5b; color: #fff; font-weight: 800; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.pcard-step-star { background: #2563eb; }
/* 변형문제 입력 탭 */
.ex-tab { background: none; border: none; padding: 0 0 12px; font-size: 0.95rem; font-weight: 700; color: #94a3b8; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ex-tab.active { color: #2563eb; border-bottom-color: #2563eb; }
.url-row { display: flex; gap: 10px; margin-bottom: 8px; }
.url-row input { flex: 1 1 auto; border: 1.5px solid #cbd5e1; border-radius: 12px; padding: 12px 14px; font-size: 0.95rem; box-sizing: border-box; }
.url-row input:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
/* 유형 선택 카드 그리드 */
.type-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.type-grid-2 { grid-template-columns: repeat(2, 1fr); }
.type-card { position: relative; text-align: left; display: flex; flex-direction: column; gap: 5px; background: #fff; border: 1.5px solid #e2e8f0; border-radius: 14px; padding: 16px; cursor: pointer; transition: border-color .12s, background .12s, box-shadow .12s; }
.type-card:hover { border-color: #bcd0f0; background: #f8faff; }
.type-card .tc-ic { width: 34px; height: 34px; border-radius: 9px; background: #eff4ff; color: #2563eb; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.type-card .tc-ic svg { width: 19px; height: 19px; }
.type-card .tc-tt { font-weight: 800; color: #0f172a; font-size: 1.08rem; }
.type-card .tc-ds { color: #64748b; font-size: 0.8rem; line-height: 1.4; }
.type-card .tc-check { position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; border-radius: 50%; background: #0f2b5b; color: #fff; display: none; align-items: center; justify-content: center; }
.type-card .tc-check svg { width: 12px; height: 12px; }
.type-card.selected { border-color: #0f2b5b; background: #f1f5fb; box-shadow: 0 0 0 1px #0f2b5b inset; }
.type-card.selected .tc-ic { background: #0f2b5b; color: #fff; }
.type-card.selected .tc-check { display: flex; }
@media (max-width: 900px) { .type-grid { grid-template-columns: repeat(2, 1fr); } }
/* 세트 행 */
.ex-set-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ex-set-lb { flex: 0 0 60px; font-weight: 700; color: #475569; font-size: 0.9rem; }
.ex-sel { flex: 1 1 0; min-width: 0; border: 1.5px solid #cbd5e1; border-radius: 10px; padding: 10px 12px; font-size: 0.9rem; background: #fff; color: #0f172a; cursor: pointer; }
.ex-sel:focus { outline: none; border-color: #2563eb; }
.ex-set-del { flex: 0 0 auto; width: 38px; height: 38px; padding: 0; background: #f8fafc; border: 1px solid #e2e8f0; color: #94a3b8; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.ex-set-del:hover { background: #fef2f2; border-color: #fecaca; color: #dc2626; }
.ex-set-del svg { width: 17px; height: 17px; }
.set-add { width: 100%; margin-top: 4px; background: #fff; border: 1.5px dashed #cbd5e1; color: #475569; font-weight: 700; border-radius: 12px; padding: 12px; cursor: pointer; }
.set-add:hover { border-color: #93c5fd; color: #1d4ed8; background: #f8faff; }
/* 우측 패널 */
.side-sub { font-size: 0.82rem; color: #94a3b8; margin: -8px 0 14px; }
.sel-grp { margin-bottom: 14px; }
.sel-grp:last-child { margin-bottom: 0; }
.sel-grp-h { font-size: 0.8rem; font-weight: 800; color: #0f2b5b; margin-bottom: 7px; }
.sel-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; background: #f8fafc; border: 1px solid #eef2f7; border-radius: 9px; margin-bottom: 6px; }
.sel-lb { font-size: 0.86rem; color: #334155; font-weight: 600; }
.sel-x { width: 22px; height: 22px; padding: 0; background: none; border: none; color: #94a3b8; display: flex; align-items: center; justify-content: center; border-radius: 6px; }
.sel-x:hover { background: #fee2e2; color: #dc2626; }
.sel-x svg { width: 13px; height: 13px; }
.sel-empty { font-size: 0.85rem; color: #94a3b8; margin: 0; }
/* 출력 형태 라디오 */
.fmt-row { display: flex; align-items: center; gap: 10px; padding: 9px 4px; cursor: pointer; font-size: 0.9rem; color: #334155; font-weight: 600; }
.fmt-row input { width: 18px; height: 18px; accent-color: #2563eb; cursor: pointer; }
/* 생성 CTA */
.side-cta { width: 100%; background: #0f2b5b; color: #fff; border: none; border-radius: 14px; padding: 16px; font-size: 1rem; font-weight: 800; cursor: pointer; box-shadow: 0 6px 18px rgba(15,43,91,.18); }
.side-cta:hover:not(:disabled) { background: #173d7a; }
.side-cta:disabled { opacity: .5; cursor: default; box-shadow: none; }
/* 변형문제 지문 입력칸 높이 */
#examText { min-height: 340px; }
/* 나의 정보 — 사용량 안내 단가표 */
.mi-price-list { list-style: none; margin: 0 0 16px; padding: 0; }
.mi-price-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid #f1f5f9; font-size: 0.85rem; color: #64748b; }
.mi-price-list li:last-child { border-bottom: none; }
.mi-price-list li b { color: #0f2b5b; font-weight: 800; white-space: nowrap; }
/* ===== 분석노트 — 간결 헤더 + 일반/대용량 구분 강조 ===== */
#view-note .note-panel-normal { border-left: 4px solid #2563eb; }
#view-note .note-panel-big { border-left: 4px solid #f59e0b; }
.note-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.note-ic { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 12px; background: #eff4ff; color: #2563eb; display: flex; align-items: center; justify-content: center; }
.note-ic svg { width: 23px; height: 23px; }
.note-ic-amber { background: #fef6e7; color: #d97706; }
.note-head-tx { min-width: 0; }
.note-head-t { font-size: 1.18rem; font-weight: 800; color: #0f172a; display: flex; align-items: center; gap: 8px; }
.note-head-d { color: #64748b; font-size: 0.96rem; margin-top: 3px; }
.note-when { display: flex; align-items: center; gap: 9px; width: 100%; box-sizing: border-box; font-size: 0.95rem; font-weight: 700; color: #1d4ed8; background: #eff6ff; border: 1px solid #dbe7fb; border-radius: 12px; padding: 13px 16px; margin-bottom: 18px; }
.note-when svg { width: 18px; height: 18px; flex: 0 0 auto; }
.note-when-amber { color: #b45309; background: #fef6e7; border-color: #f6e2bd; }
.pcard-tag.tag-blue { color: #1d4ed8; background: #e8f0fe; border-color: #d4e2fb; }
.note-steps { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.9rem; color: #475569; font-weight: 700; background: #f8fafc; border: 1px solid #eef2f7; border-radius: 12px; padding: 12px 16px; margin: 0 0 4px; }
.note-steps b { color: #0f2b5b; }
.ns-arrow { color: #94a3b8; font-weight: 800; }
/* 변형문제 결과 — 출력 형식 선택 */
.ex-fmt-sel { border: 1.5px solid #cbd5e1; border-radius: 10px; padding: 9px 12px; font-size: 0.88rem; font-weight: 600; color: #0f172a; background: #fff; cursor: pointer; }
.ex-fmt-sel:focus { outline: none; border-color: #2563eb; }
/* 요금제 구독 상태 배지 */
.mi-plan-on { font-size: 0.72rem; font-weight: 800; color: #047857; background: #d1fae5; border-radius: 999px; padding: 2px 9px; margin-left: 4px; }
.mi-plan-off { font-size: 0.72rem; font-weight: 800; color: #64748b; background: #e2e8f0; border-radius: 999px; padding: 2px 9px; margin-left: 4px; }
/* 지문 입력 카드 헤더용 중립 아이콘 배지 */
.pcard-step-ic { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; background: #eef2f7; color: #475569; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.pcard-step-ic svg { width: 17px; height: 17px; }
/* ===== 로그인 / 신규가입 / 찾기 ===== */
.auth-panel[hidden] { display: none; }
.auth-links { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.auth-link { background: none; border: none; color: #2563eb; font-weight: 700; font-size: 0.88rem; cursor: pointer; padding: 4px 6px; }
.auth-link:hover { color: #173d7a; text-decoration: underline; transform: none; }
.auth-link-sep { color: #cbd5e1; }
.auth-find-desc { font-size: 0.9rem; color: #475569; line-height: 1.6; background: #f8fafc; border: 1px solid #eef2f7; border-radius: 12px; padding: 14px; margin: 0 0 8px; }
.auth-find-desc b { color: #0f2b5b; }
.auth-link:hover { background: none; }
/* ===== 내 정보 모달 (보기·수정·비번) ===== */
.prof-card { max-width: 440px; }
.prof-modal-title { font-size: 1.15rem; font-weight: 800; color: #0f172a; margin-bottom: 14px; }
/* 내 정보 — 페이지형 */
.profile-page { max-width: 640px; display: flex; flex-direction: column; gap: 20px; }
.prof-summary { display: flex; align-items: center; gap: 16px; }
/* ===== 입력 영역 세련화 (탭 + 파일 업로드) ===== */
.seg-tabs { display: inline-flex; gap: 4px; background: #f1f5f9; border: 1px solid #e8edf4; border-radius: 12px; padding: 4px; margin-bottom: 16px; max-width: 100%; flex-wrap: wrap; }
.seg-tabs .seg-tab { display: inline-flex; align-items: center; gap: 7px; border: 0; margin: 0; background: none; color: #64748b; font-weight: 700; font-size: 0.9rem; padding: 9px 16px; border-radius: 9px; cursor: pointer; }
.seg-tabs .seg-tab svg { width: 16px; height: 16px; }
.seg-tabs .seg-tab:hover { background: #e9eef5; color: #0f2b5b; transform: none; }
.seg-tabs .seg-tab.active { background: #fff; color: #0f2b5b; box-shadow: 0 1px 3px rgba(15,23,42,.10); }
/* 파일 업로드 드롭존 */
.file-drop { position: relative; display: block; padding: 0; border: 1.5px dashed #cbd5e1; border-radius: 14px; background: #f8fafc; overflow: hidden; transition: border-color .12s, background .12s; }
.file-drop:hover { border-color: #93c5fd; background: #f5f9ff; }
.file-drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.fd-inner { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 30px 20px 22px; text-align: center; pointer-events: none; }
.fd-ic { width: 48px; height: 48px; border-radius: 50%; background: #eef4ff; color: #2563eb; display: flex; align-items: center; justify-content: center; }
.fd-ic svg { width: 22px; height: 22px; }
.fd-main { font-weight: 700; color: #334155; font-size: 0.94rem; }
.fd-sub { font-size: 0.78rem; color: #94a3b8; }
.fd-name { padding: 11px 14px; border-top: 1px dashed #e2e8f0; font-size: 0.82rem; color: #94a3b8; font-weight: 600; text-align: center; background: #fff; }
.fd-name.has { color: #0f2b5b; }
/* 분석노트 등 일반 파일 입력 버튼 다듬기 */
.big-file-row input[type="file"] { font-size: 0.84rem; color: #64748b; }
.big-file-row input[type="file"]::file-selector-button { background: #fff; border: 1.5px solid #cbd5e1; border-radius: 9px; padding: 8px 13px; font-weight: 700; font-size: 0.82rem; color: #475569; cursor: pointer; margin-right: 10px; transition: border-color .12s, color .12s; }
.big-file-row input[type="file"]::file-selector-button:hover { border-color: #93c5fd; color: #1d4ed8; }
.prof-head { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid #eef2f7; margin-bottom: 14px; }
.prof-ava { width: 52px; height: 52px; flex: 0 0 auto; border-radius: 50%; background: #0f2b5b; color: #fff; font-weight: 800; font-size: 1.3rem; display: flex; align-items: center; justify-content: center; }
.prof-name { font-size: 1.15rem; font-weight: 800; color: #0f172a; }
.prof-meta { font-size: 0.82rem; color: #64748b; margin-top: 3px; }
.prof-tabs { display: flex; gap: 6px; background: #f1f5f9; border-radius: 12px; padding: 4px; margin-bottom: 16px; }
.prof-tab { flex: 1 1 0; background: none; border: none; padding: 9px; border-radius: 9px; font-weight: 700; font-size: 0.9rem; color: #64748b; cursor: pointer; }
.prof-tab:hover { background: none; transform: none; color: #0f2b5b; }
.prof-tab.active { background: #fff; color: #0f2b5b; box-shadow: 0 1px 3px rgba(15,23,42,.08); }
.prof-panel[hidden] { display: none; }
.prof-pw-desc { font-size: 0.86rem; color: #64748b; margin: 0 0 4px; }
.btn-ghost2 { background: #fff; border: 1.5px solid #cbd5e1; color: #475569; border-radius: 10px; padding: 11px 16px; font-weight: 700; cursor: pointer; }
.btn-ghost2:hover { border-color: #93c5fd; color: #1d4ed8; background: #fff; }
/* 상단 로그인 이름 = 클릭 가능한 버튼 */
button.acct-name { background: none; border: none; cursor: pointer; padding: 5px 9px; border-radius: 8px; color: #16335c; font-weight: 700; font-size: 0.86rem; }
button.acct-name:hover { background: #f1f5f9; transform: none; }
/* 랭킹 순위 배지 (이모지 대신 깔끔한 숫자 배지) */
.rc-rank.rc-medal { display: inline-flex; align-items: baseline; justify-content: center; gap: 1px; min-width: 30px; height: 30px; padding: 0 7px; border-radius: 9px; color: #fff; font-weight: 800; }
.rc-rank.rc-medal small { font-size: 0.66rem; font-weight: 700; opacity: 0.9; }
.rc-rank.m1 { background: linear-gradient(135deg, #d4a017, #b8860b); }
.rc-rank.m2 { background: linear-gradient(135deg, #9aa3ad, #6b7280); }
.rc-rank.m3 { background: linear-gradient(135deg, #c08457, #a05a2c); }
.gc-icon svg { width: 26px; height: 26px; }
.rank-h-ic { display: inline-flex; vertical-align: middle; color: #e0a92e; }
.rank-h-ic svg { width: 20px; height: 20px; }
/* ===== 랭킹 — 카드 행 (월계관 메달 · 상위 강조) ===== */
.rk-list { display: flex; flex-direction: column; gap: 10px; }
.rk-row { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid #eef2f7; border-radius: 14px; padding: 13px 18px; }
.rk-row.top1 { background: linear-gradient(90deg, #fff6e0, #fffdf6); border-color: #f1dca0; }
.rk-row.top2 { background: linear-gradient(90deg, #f2f4f7, #fbfcfd); border-color: #e1e5ea; }
.rk-row.top3 { background: linear-gradient(90deg, #fdeede, #fffaf5); border-color: #efd4ba; }
.rk-row.me { box-shadow: 0 0 0 2px #2563eb inset; }
.rk-badge { position: relative; width: 48px; height: 48px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.rk-laurel { position: absolute; inset: 0; width: 100%; height: 100%; }
.rk-badge-n { position: relative; font-weight: 800; font-size: 1.15rem; }
.rk-badge.m1 { color: #e0a92e; } .rk-badge.m1 .rk-badge-n { color: #c2900c; }
.rk-badge.m2 { color: #a7adb6; } .rk-badge.m2 .rk-badge-n { color: #6b7280; }
.rk-badge.m3 { color: #cf8c54; } .rk-badge.m3 .rk-badge-n { color: #b06a32; }
.rk-num { width: 48px; flex: 0 0 auto; text-align: center; font-weight: 800; color: #64748b; font-size: 1.02rem; }
.rk-num small { font-size: 0.7rem; font-weight: 700; color: #94a3b8; margin-left: 1px; }
.rk-name { flex: 1 1 auto; min-width: 0; font-weight: 800; color: #1f2937; font-size: 1.02rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-score { flex: 0 0 auto; font-weight: 800; color: #2563eb; font-size: 0.98rem; white-space: nowrap; border-left: 1px solid #e5e7eb; padding-left: 14px; }
.rk-row.top1 .rk-score { color: #c2900c; } .rk-row.top1 .rk-score { border-left-color: #f1dca0; }
.rk-row.top2 .rk-score { color: #475569; }
.rk-row.top3 .rk-score { color: #b4632a; border-left-color: #efd4ba; }
.rk-crown { flex: 0 0 auto; color: #f2c14e; display: flex; }
.rk-crown svg { width: 30px; height: 30px; }
.rk-chev { width: 18px; height: 18px; flex: 0 0 auto; color: #cbd5e1; }
.rk-row.top1 .rk-chev, .rk-row.top3 .rk-chev { color: #d9c08a; }
.rc-you { background: #2563eb; color: #fff; font-size: 0.66rem; font-weight: 800; border-radius: 5px; padding: 1px 6px; margin-left: 6px; vertical-align: middle; }
@media (max-width: 560px) { .rk-score { border-left: none; padding-left: 0; } .rk-row { gap: 10px; padding: 12px 14px; } }
/* 자료실 하단 버튼바 */
.board-bottombar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid #eef2f7; flex-wrap: wrap; }
.board-bottombar .board-count { font-size: 0.85rem; color: #64748b; font-weight: 700; }
.board-btns { display: flex; gap: 8px; }
.board-form { margin-top: 14px; padding-top: 14px; border-top: 1px solid #eef2f7; }
/* 게이트 닫기 버튼 (모달화) */
.auth-card { position: relative; }
.auth-close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; padding: 0; border: none; background: #f1f5f9; color: #64748b; border-radius: 10px; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.auth-close:hover { background: #e2e8f0; color: #0f172a; }
/* 토바 로그인/가입 버튼 (비로그인 시 노출) */
.topbar-login { background: #0f2b5b; color: #fff; border: none; border-radius: 999px; padding: 8px 16px; font-size: 0.84rem; font-weight: 800; cursor: pointer; }
.topbar-login:hover { background: #173d7a; }
html.is-authed .topbar-login { display: none; }
/* ===== 단어 챌린지 (게임 페이지 리디자인) ===== */
#view-game { color: #0f172a; }
.ch-hero { position: relative; overflow: hidden; padding: 8px 4px 16px; }
.ch-title { font-size: 2.1rem; font-weight: 800; color: #0f172a; margin: 0 0 10px; display: flex; align-items: center; gap: 10px; }
.ch-title-trophy { display: inline-flex; color: #e0a92e; }
.ch-title-trophy svg { width: 30px; height: 30px; }
.ch-sub { color: #64748b; font-size: 0.98rem; line-height: 1.6; margin: 0; }
.ch-hero-trophy { position: absolute; right: 12px; top: -8px; width: 150px; height: 150px; color: #94a3b8; opacity: 0.12; pointer-events: none; }
.ch-sec-label { font-weight: 800; color: #0f172a; font-size: 0.98rem; margin: 16px 2px 12px; display: flex; align-items: center; gap: 9px; }
.ch-sec-label::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: #0f2b5b; transform: rotate(45deg); }
.diff-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
.diff-tab { height: 64px; border-radius: 16px; border: 1.5px solid #e2e8f0; background: #fff; color: #334155; font-weight: 700; font-size: 0.92rem; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 10px; transition: border-color .12s, color .12s, background .12s, box-shadow .12s; }
.diff-tab:hover { border-color: #bcd0f0; color: #0f2b5b; background: #f5f9ff; transform: none; }
.diff-tab.active { background: #0f2b5b; border-color: #0f2b5b; color: #fff; box-shadow: 0 6px 16px rgba(15,43,91,.18); }
@media (max-width: 760px) { .diff-tabs { grid-template-columns: repeat(2, 1fr); } }
.ch-games { margin-bottom: 20px; }
.ch-games-h { margin-bottom: 16px; }
.ch-games-h b { font-size: 1.05rem; font-weight: 800; color: #0f172a; }
.ch-games-h span { color: #94a3b8; font-size: 0.88rem; margin-left: 8px; }
.ch-game-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ch-game-card { display: flex; align-items: center; gap: 16px; text-align: left; min-height: 120px; padding: 22px; background: #fff; border: 1.5px solid #e8edf4; border-radius: 18px; cursor: pointer; transition: transform .12s, box-shadow .12s, border-color .12s; }
.ch-game-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(15,43,91,.12); border-color: #bcd0f0; background: #fff; }
.cg-ic { width: 56px; height: 56px; flex: 0 0 auto; border-radius: 16px; background: #0f2b5b; color: #fff; display: flex; align-items: center; justify-content: center; }
.cg-ic svg { width: 26px; height: 26px; }
.ch-game-card:nth-child(2) .cg-ic { background: #2563eb; }
.cg-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.cg-tx b { font-size: 1.1rem; font-weight: 800; color: #0f172a; }
.cg-tx small { font-size: 0.86rem; color: #64748b; line-height: 1.45; }
.cg-arrow { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: #eef4ff; color: #2563eb; display: flex; align-items: center; justify-content: center; }
.cg-arrow svg { width: 18px; height: 18px; }
@media (max-width: 680px) { .ch-game-grid { grid-template-columns: 1fr; } }
.ch-rank-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.ch-rank .rank-h { display: flex; align-items: center; gap: 9px; }
.ch-rank .rank-h b { font-size: 1.15rem; font-weight: 800; color: #0f172a; }
.ch-rank .rank-h span:last-child { font-size: 0.84rem; color: #94a3b8; font-weight: 600; }
.rank-gametabs { display: inline-flex; gap: 4px; flex: 0 0 auto; background: #f1f5f9; border: 1px solid #e8edf4; border-radius: 12px; padding: 4px; white-space: nowrap; }
.rf-game { background: none; border: none; padding: 9px 16px; border-radius: 9px; font-weight: 700; font-size: 0.88rem; color: #64748b; cursor: pointer; white-space: nowrap; transition: background .12s, color .12s; }
.rf-game:hover { color: #0f2b5b; background: #e9eef5; transform: none; }
.rf-game.active { color: #0f2b5b; background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.10); }
.rank-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.rf-cat { background: #fff; border: 1.5px solid #e2e8f0; color: #475569; border-radius: 999px; padding: 8px 15px; font-weight: 700; font-size: 0.85rem; cursor: pointer; }
.rf-cat:hover { border-color: #bcd0f0; color: #0f2b5b; background: #fff; transform: none; }
.rf-cat.active { background: #0f2b5b; border-color: #0f2b5b; color: #fff; }
.rk-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rk-col { border: 1px solid #eef2f7; border-radius: 16px; overflow: hidden; background: #fff; }
.rk-col-single { max-width: 560px; }
.rkr { display: flex; align-items: center; gap: 14px; padding: 0 16px; height: 52px; border-bottom: 1px solid #f1f5f9; }
.rk-col .rkr:last-child { border-bottom: none; }
.rkr-rank { width: 30px; flex: 0 0 auto; text-align: center; font-weight: 800; color: #64748b; font-size: 0.95rem; }
.rkr-name { flex: 1 1 auto; min-width: 0; font-weight: 700; color: #1f2937; font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rkr-score { flex: 0 0 auto; font-weight: 800; color: #2563eb; font-size: 0.95rem; white-space: nowrap; }
.rkr.me { background: #eff6ff; }
.rkr-top { height: 72px; }
.rkr-m1 { background: linear-gradient(90deg, #fff6e0, #fffdf6); }
.rkr-m2 { background: linear-gradient(90deg, #f3f4f6, #fbfcfd); }
.rkr-m3 { background: linear-gradient(90deg, #fdeede, #fffaf5); }
.rkr-medal { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1rem; color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.14); }
.rkr-m1 .rkr-medal { background: linear-gradient(135deg, #f5c84c, #e0a92e); }
.rkr-m2 .rkr-medal { background: linear-gradient(135deg, #d8dde3, #aab0b8); }
.rkr-m3 .rkr-medal { background: linear-gradient(135deg, #e0ab78, #cf8c54); }
.rkr-top .rkr-score { font-size: 1rem; }
.rkr-m1 .rkr-score { color: #c2900c; }
.rkr-m2 .rkr-score { color: #6b7280; }
.rkr-m3 .rkr-score { color: #b06a32; }
.rkr-crown { flex: 0 0 auto; display: flex; }
.rkr-crown svg { width: 24px; height: 24px; }
.rkr-m1 .rkr-crown { color: #f1c84e; }
.rkr-m2 .rkr-crown { color: #cbd1d8; }
.rkr-m3 .rkr-crown { color: #dca878; }
@media (max-width: 760px) { .rk-cols { grid-template-columns: 1fr; } }
.rank-pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 18px; }
.rk-pg { background: #fff; border: 1.5px solid #e2e8f0; color: #475569; border-radius: 10px; padding: 9px 16px; font-weight: 700; font-size: 0.85rem; cursor: pointer; }
.rk-pg:hover:not(:disabled) { border-color: #bcd0f0; color: #0f2b5b; background: #fff; transform: none; }
.rk-pg:disabled { opacity: .45; cursor: default; }
.rk-pglabel { font-size: 0.88rem; color: #64748b; font-weight: 700; }
/* 빈 등수 슬롯 */
.rkr-empty { color: #cbd5e1; font-weight: 600; }
.rkr-blank .rkr-rank { color: #cbd5e1; }
.rkr-blank.rkr-top .rkr-medal { opacity: 0.5; }
.rkr-blank.rkr-m1, .rkr-blank.rkr-m2, .rkr-blank.rkr-m3 { background: #fff; }
/* ===== 북스토어 ===== */
.store-admin { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; }
.store-empty { grid-column: 1 / -1; padding: 48px; text-align: center; color: #94a3b8; font-weight: 600; }
.store-card {
background: #fff; border: 1px solid #eef1f6; border-radius: 14px; overflow: hidden;
display: flex; flex-direction: column; box-shadow: 0 6px 22px rgba(15, 23, 42, 0.05);
transition: transform .18s, box-shadow .18s;
}
.store-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12); }
.store-cover {
position: relative; height: 180px;
background: linear-gradient(135deg, #0f2b5b, #2563eb);
display: flex; align-items: center; justify-content: center;
}
.store-cover img { width: 100%; height: 100%; object-fit: cover; }
.store-cover-ic { font-size: 3.4rem; }
.store-badge {
position: absolute; top: 10px; right: 10px; background: #10b981; color: #fff;
font-size: 0.72rem; font-weight: 800; padding: 3px 10px; border-radius: 20px;
}
.store-cardbody { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.store-title { font-size: 1rem; font-weight: 800; color: #0f2b5b; margin-bottom: 6px; }
.store-desc {
font-size: 0.84rem; color: #64748b; line-height: 1.5; margin-bottom: 14px; flex: 1;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.store-cardfoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.store-price { font-size: 1.15rem; font-weight: 900; color: #2563eb; }
.store-price small { font-size: 0.78rem; font-weight: 700; color: #94a3b8; margin-left: 1px; }
.store-buy {
padding: 8px 16px; background: #10b981; color: #fff; border: none; border-radius: 9px;
font-size: 0.84rem; font-weight: 800; cursor: pointer; white-space: nowrap;
}
.store-buy:hover { background: #059669; }
.store-buy:disabled { opacity: .6; cursor: default; }
.store-dl {
padding: 8px 16px; background: #0f2b5b; color: #fff; border-radius: 9px;
font-size: 0.84rem; font-weight: 800; text-decoration: none; white-space: nowrap;
}
.store-dl:hover { background: #143a78; }
.store-del {
margin-top: 10px; padding: 6px 10px; background: #fff5f5; color: #dc2626;
border: 1px solid #fecaca; border-radius: 7px; font-size: 0.78rem; font-weight: 700; cursor: pointer;
}
.store-del:hover { background: #dc2626; color: #fff; }
/* 나의 정보 — 구매한 교재 목록 */
.mi-books { margin-top: 16px; }
.mi-books-list { display: flex; flex-direction: column; gap: 10px; }
.mi-books-empty { padding: 18px 4px; color: #94a3b8; font-size: 0.92rem; text-align: center; }
.mi-book {
display: flex; align-items: center; gap: 14px; padding: 12px 14px;
border: 1px solid #eef1f6; border-radius: 14px; background: #fbfcfe;
}
.mi-book-cover {
width: 46px; height: 60px; flex: 0 0 46px; border-radius: 7px; object-fit: cover;
background: #eef3ff; display: flex; align-items: center; justify-content: center;
}
.mi-book-cover-ic { font-size: 0.72rem; font-weight: 800; color: #2563eb; }
.mi-book-info { flex: 1 1 auto; min-width: 0; }
.mi-book-tt { font-size: 0.98rem; font-weight: 800; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mi-book-meta { margin-top: 3px; font-size: 0.8rem; color: #94a3b8; }
.mi-book-dl {
flex: 0 0 auto; padding: 9px 18px; background: #0f2b5b; color: #fff; border-radius: 9px;
font-size: 0.85rem; font-weight: 800; text-decoration: none; white-space: nowrap;
}
.mi-book-dl:hover { background: #143a78; }
@media (max-width: 560px) {
.mi-book { flex-wrap: wrap; }
.mi-book-dl { width: 100%; text-align: center; }
}
/* 북스토어 상품 등록 모달 */
.store-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; background: rgba(15, 23, 42, 0.45); }
.store-modal[hidden] { display: none; }
.store-modal-box { width: min(500px, 92vw); max-height: 90vh; overflow-y: auto; background: #fff; border-radius: 16px; box-shadow: 0 20px 56px rgba(15, 23, 42, 0.2); }
.store-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 14px; border-bottom: 1px solid #eef1f6; font-size: 1.1rem; font-weight: 800; color: #0f2b5b; }
.store-modal-x { width: 32px; height: 32px; border-radius: 50%; border: 1px solid #e2e8f0; background: #fff; font-size: 1rem; cursor: pointer; color: #64748b; }
.store-modal-body { padding: 20px 24px; }
.store-modal-body label { display: block; font-size: 0.82rem; font-weight: 700; color: #334155; margin-bottom: 6px; }
.store-modal-body input[type="text"], .store-modal-body input[type="number"], .store-modal-body textarea {
width: 100%; padding: 9px 12px; border: 1.5px solid #cbd5e1; border-radius: 10px;
font-size: 0.92rem; margin-bottom: 15px; box-sizing: border-box; font-family: inherit;
}
.store-modal-body textarea { min-height: 84px; resize: vertical; }
.store-modal-body input[type="file"] { margin-bottom: 15px; }
.store-modal-foot { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 24px 22px; }
/* 결제수단 선택 모달 */
.store-pay-box { width: min(420px, 92vw); }
.store-pay-info { text-align: center; padding: 4px 0 20px; border-bottom: 1px solid #eef1f6; margin-bottom: 18px; }
.store-pay-title { font-size: 1rem; font-weight: 800; color: #0f2b5b; margin-bottom: 6px; }
.store-pay-price { font-size: 1.5rem; font-weight: 900; color: #2563eb; }
.store-pay-methods { display: flex; flex-direction: column; gap: 12px; }
.store-pay-method {
display: flex; align-items: center; gap: 14px; width: 100%;
padding: 16px 20px; border: 2px solid #e2e8f0; border-radius: 12px; background: #fff;
font-size: 1rem; font-weight: 800; color: #1f2937; cursor: pointer; transition: all .15s;
}
.store-pay-method:hover { border-color: #2563eb; box-shadow: 0 6px 18px rgba(37, 99, 235, 0.12); }
.store-pay-ic {
width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
font-size: 1.2rem; font-weight: 900; background: #eff4ff; color: #2563eb;
}
.store-pay-naver .store-pay-ic { background: #03c75a; color: #fff; }
@media (max-width: 640px) { .store-grid { grid-template-columns: 1fr 1fr; gap: 12px; } .store-cover { height: 140px; } }
/* ============================================================
MODERN UI REFRESH (2026) — 전반적 세련화 레이어
파일 맨 끝에 위치해 기존 규칙 위에 덮어씀. 구조/마크업 변경 없음.
============================================================ */
:root {
--brand-900: #0b2350;
--brand-700: #12376f;
--brand-500: #2563eb;
--brand-400: #3b82f6;
--ink-900: #0f172a;
--ink-700: #334155;
--ink-500: #64748b;
--ink-400: #94a3b8;
--line: #e9eef6;
--line-soft: #f1f5f9;
--radius-sm: 12px;
--radius: 16px;
--radius-lg: 22px;
--shadow-xs: 0 1px 2px rgba(15, 23, 42, .05);
--shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 2px 6px rgba(15, 23, 42, .05);
--shadow-md: 0 6px 18px rgba(15, 23, 42, .06), 0 14px 40px rgba(15, 23, 42, .06);
--shadow-lg: 0 20px 55px rgba(15, 23, 42, .16);
}
/* 1) 폰트 — Pretendard 전면 적용 (기존 맑은고딕 → 현대적 산세리프) */
body, button, input, textarea, select, a,
h1, h2, h3, h4, h5, h6,
.page-title, .home-title, .np-head, .gr-title, .review-h, .rank-h,
.side-brand-tx, .topbar-title, .store-title {
font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
'Apple SD Gothic Neo', 'Segoe UI', Roboto, 'Noto Sans KR', sans-serif !important;
}
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
/* 2) 배경 — 은은한 브랜드 글로우 + 클린 그라데이션 */
body {
background:
radial-gradient(1100px 520px at 100% -10%, #e9f0ff 0%, rgba(233, 240, 255, 0) 55%),
linear-gradient(180deg, #f7f9fd 0%, #eef2f9 100%) !important;
}
.app-body { background: transparent; }
/* 3) 버튼 — 부드러운 상승/그림자, 시맨틱 색상은 유지 */
button {
border-radius: var(--radius-sm);
font-weight: 700;
letter-spacing: -0.01em;
box-shadow: var(--shadow-xs);
transition: transform .16s ease, box-shadow .16s ease, filter .16s ease, background .16s ease;
}
button:hover { transform: translateY(-1px); filter: brightness(1.03); box-shadow: var(--shadow-sm); }
button:active { transform: translateY(0); filter: brightness(.98); }
/* 주요 CTA — 프리미엄 그라데이션 */
.home-start, .auth-submit, .topbar-login {
background: linear-gradient(135deg, #12376f 0%, #2563eb 100%) !important;
box-shadow: 0 8px 22px rgba(37, 99, 235, .26);
}
.home-start:hover, .auth-submit:hover, .topbar-login:hover { filter: brightness(1.05); }
/* 4) 카드/패널 — 얇은 헤어라인 + 레이어드 소프트 섀도 */
.panel {
border-radius: 20px !important;
border: 1px solid var(--line) !important;
box-shadow: var(--shadow-md) !important;
}
/* 5) 입력요소 — 라운드/포커스 링 통일 */
input[type="text"], input[type="password"], input[type="number"],
input[type="email"], input[type="search"], input[type="tel"], textarea, select {
border-radius: 12px;
border: 1.5px solid #dce4ef;
transition: border-color .15s ease, box-shadow .15s ease;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus,
input[type="email"]:focus, input[type="search"]:focus, input[type="tel"]:focus,
textarea:focus, select:focus {
outline: none;
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}
/* 6) 사이드바 — 클린 화이트 + 액티브 필(pill) */
.sidebar {
background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
border-right: 1px solid var(--line);
}
.side-item { border-radius: 12px; transition: background .15s ease, color .15s ease; }
.side-item:hover { background: #f2f6fd; color: #0f2b5b; }
.side-item .ic { transition: color .15s ease, transform .15s ease; }
.side-item:hover .ic { color: #2563eb; }
.side-item.nav-tab.active,
.side-nav .nav-tab.active,
.side-item#navHome.active {
background: linear-gradient(135deg, #eef3ff 0%, #e6edff 100%);
color: #1d4ed8;
border-bottom-color: transparent;
box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .12);
}
.side-item.nav-tab.active .ic, .side-item#navHome.active .ic { color: #2563eb; }
/* 7) 상단바 — 반투명 블러 + 미세 섀도 */
.topbar {
background: rgba(255, 255, 255, .82);
backdrop-filter: saturate(180%) blur(10px);
-webkit-backdrop-filter: saturate(180%) blur(10px);
border-bottom: 1px solid var(--line);
box-shadow: 0 6px 20px rgba(15, 23, 42, .03);
}
/* 최상단 태그라인 배너 (풀폭 스트립) */
.main-tagline {
width: 100%; margin: 0; padding: 10px 18px; text-align: center;
font-size: 0.96rem; font-weight: 700; letter-spacing: -0.01em; color: #ffffff;
background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 55%, #3b82f6 100%);
box-shadow: 0 2px 12px rgba(29, 78, 216, .18);
position: relative; z-index: 30;
}
.main-tagline b { color: #ffffff; font-weight: 900; }
@media (max-width: 640px) {
.main-tagline { font-size: 0.82rem; padding: 8px 12px; line-height: 1.4; }
}
/* 8) 콘텐츠 탭(밑줄형) — 브랜드 블루 강조 */
.nav-tab.active { border-bottom-color: #2563eb; color: #12376f; }
/* 9) 홈 화면 — 타이포/카드 리프레시 */
.home-title { letter-spacing: -0.03em; }
.home-link {
border-radius: 18px;
border: 1px solid var(--line);
box-shadow: var(--shadow-xs);
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.home-link:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: #c7d7f5; }
.hl-ic { border-radius: 14px; background: linear-gradient(135deg, #eef3ff 0%, #e0e9ff 100%); }
/* 10) 스크롤바 · 텍스트 선택 — 디테일 마감 */
::selection { background: rgba(37, 99, 235, .18); }
* { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: content-box; }
/* 11) 접근성 — 키보드 포커스 링 */
a:focus-visible, button:focus-visible, .side-item:focus-visible, .nav-tab:focus-visible {
outline: 2px solid rgba(37, 99, 235, .55);
outline-offset: 2px;
}
/* 12) 좌측 상단 로고 — 동그라미 엠블럼(콤팩트 원형) */
.side-brand { gap: 10px; padding: 6px 8px 16px; }
.side-logo-img { width: 60px; max-width: 60px; height: 60px; border-radius: 50%; }
@media (max-width: 880px) {
.side-logo-img { width: 40px; max-width: 40px; height: 40px; }
.side-brand { padding: 4px 0 12px; }
}