/**
 * /child/study/study.css
 *
 * 학습 도메인 전용 스타일 — 모듈 특화 패턴만 잔류
 * 표준 컴포넌트(t-hero, t-card, t-chip, t-badge, t-progress, t-filter-chips, t-empty-v 등)는
 * /admin/samples/page-sample-theme.php + /common/css/theme-components.css 참조.
 *
 * 잔류 클래스:
 *   .deck-card 패밀리   — JS 렌더 학습 덱 카드 (color accent / ribbon / icon / counts / actions)
 *   .deck-like-btn     — 공유 덱 좋아요 토글
 *   .wp-token / .wp-tooltip — 단어 발음 토큰 (word-pronounce.js 연동)
 */

/* ═══════════════════════════════════════════════════
   덱 카드 (decks.php JS 렌더 — 모듈 특화)
   ═══════════════════════════════════════════════════ */
.deck-card {
    position: relative;
    background: var(--t-paper);
    border: 1px solid var(--t-line);
    border-radius: var(--t-radius-xl);
    overflow: hidden;
    transition: border-color var(--t-transition-fast), box-shadow var(--t-transition-fast), transform var(--t-transition-fast);
}
.deck-card:hover {
    border-color: var(--t-muted);
    box-shadow: var(--t-shadow-card);
    transform: translateY(-1px);
}
.deck-card--complete { border-color: var(--t-mustard-300); }
.deck-card__accent { height: 4px; width: 100%; }
.deck-card__ribbon {
    position: absolute;
    top: 0.75rem;
    right: 0;
    padding: 2px 0.625rem;
    font-family: var(--t-font-mono);
    font-size: var(--t-fs-2xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--t-paper);
    border-radius: 0 0 0 var(--t-radius-md);
    box-shadow: var(--t-shadow-soft);
}
.deck-card__ribbon--complete {
    background: linear-gradient(135deg, var(--t-mustard-500), var(--t-mustard-600));
}
.deck-card__body { padding: 1rem; }
.deck-card__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.625rem;
}
.deck-card__icon {
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--t-radius-md);
    font-size: 1.125rem;
    flex-shrink: 0;
}
.deck-card__type-badge {
    padding: 2px 6px;
    font-size: var(--t-fs-2xs);
    font-weight: 600;
    color: var(--t-paper);
    border-radius: var(--t-radius-sm);
}
.deck-card__subject-badge {
    padding: 2px 6px;
    font-size: var(--t-fs-2xs);
    font-weight: 500;
    background: var(--t-surface-alt);
    color: var(--t-text-sub);
    border-radius: var(--t-radius-sm);
}
.deck-card__counts {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.deck-card__author {
    font-size: var(--t-fs-2xs);
    color: var(--t-text-muted);
    margin-bottom: 4px;
}
.deck-card__title {
    font-family: var(--t-font-serif);
    font-size: var(--t-fs-md);
    font-weight: 600;
    color: var(--t-ink);
    margin: 0 0 2px;
    line-height: 1.3;
}
.deck-card__desc {
    font-size: var(--t-fs-xs);
    color: var(--t-text-muted);
    line-height: 1.5;
    margin: 0 0 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.deck-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 0.5rem;
}
.deck-card__tag {
    padding: 2px 6px;
    font-size: var(--t-fs-2xs);
    background: var(--t-plum-500);
    color: var(--t-paper);
    opacity: 0.85;
    border-radius: var(--t-radius-sm);
}
.deck-card__progress-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.deck-card__progress-text {
    font-family: var(--t-font-mono);
    font-size: var(--t-fs-2xs);
    color: var(--t-muted);
    white-space: nowrap;
}
.deck-card__progress-text em {
    font-style: normal;
    color: var(--t-text-sub);
    font-weight: 600;
}
.deck-card__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--t-line);
}
.deck-card__icon-btn {
    padding: 6px !important;
    min-width: 1.875rem;
    justify-content: center;
}
.deck-card__icon-btn--danger:hover {
    background: var(--t-danger-soft) !important;
    color: var(--t-danger) !important;
}

/* 좋아요 버튼 (공유 덱) */
.deck-like-btn { gap: 4px; }
.deck-like-btn--liked {
    background: var(--t-danger-soft) !important;
    border-color: var(--t-danger-100) !important;
}
.deck-like-btn__icon  { font-size: 0.875rem; }
.deck-like-btn__count { font-family: var(--t-font-mono); font-size: var(--t-fs-2xs); }

/* ═══════════════════════════════════════════════════
   학습 세션 단어 카드 호버 (session-page.js 연동)
   ─ 카드 여백 호버 시 약간 어두운 배경으로 시각 강조
   ═══════════════════════════════════════════════════ */
.ss-vcard--hover {
    background: var(--t-bg) !important;
}

/* ═══════════════════════════════════════════════════
   영어 단어 발음 토큰 — /common/css/word-pronounce.css 로 이전
   word-pronounce.js 가 IIFE 시작 시 <link> 자동 주입
   ═══════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════
   학습 설정 — 프리셋 카드 망각곡선 일정 도움말 (deck-settings.php)
   ═══════════════════════════════════════════════════ */
.ds-sched {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--t-line);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.ds-sched__title {
    font-size: var(--t-fs-2xs);
    font-weight: 600;
    color: var(--t-text-sub);
}
.ds-sched__title small {
    font-weight: 400;
    color: var(--t-text-muted);
}
.ds-sched__seq {
    font-size: var(--t-fs-xs);
    font-weight: 600;
    color: var(--t-clay-600);
    font-family: var(--t-font-mono);
    line-height: 1.4;
    word-break: keep-all;
}
.ds-sched__note {
    font-size: var(--t-fs-2xs);
    color: var(--t-text-muted);
    line-height: 1.5;
}
.ds-sched__note b { color: var(--t-text-sub); font-weight: 600; }

/* ═══ subject-landing.php 유틸 (공용 과목 랜딩) ═══ */
.sl-card-body    { display: flex; flex-direction: column; gap: 0.5rem; }
.sl-menu-ico     { font-size: 1.75rem; line-height: 1; }
.sl-title-flat   { margin: 0; }
.sl-desc         { margin: 0; font-size: var(--t-fs-xs); }
.sl-footer       { margin-top: auto; }
.sl-progress-txt {
    font-size: var(--t-fs-2xs);
    font-family: var(--t-font-mono);
    letter-spacing: 0.05em;
}
.sl-cta          { font-size: var(--t-fs-xs); font-weight: 600; }
.sl-recent-dot {
    margin-top: 0.375rem;
    width: 0.5rem; height: 0.5rem;
    border-radius: 9999px;
    flex-shrink: 0;
    background: var(--t-sage-500);
}
.sl-recent-date {
    color: var(--t-muted);
    font-family: var(--t-font-mono);
    letter-spacing: 0.05em;
}
.sl-recent-text  { color: var(--t-text-sub); }

/* ═══ science/index.php 전용 (교육과정 안내) ═══ */
.sl-group-body    { display: flex; flex-direction: column; gap: 0.25rem; }
.sl-group-ico     { font-size: 1.25rem; line-height: 1; }
.sl-group-title   { margin: 0; font-weight: 600; }
.sl-group-desc    { font-size: var(--t-fs-2xs); line-height: 1.4; }
.sl-template-desc { margin: 0 0 0.75rem; font-size: var(--t-fs-xs); }
.sl-template-wrap { gap: 0.5rem; }
.sl-chip-num {
    font-family: var(--t-font-mono);
    font-size: var(--t-fs-2xs);
    color: var(--t-muted);
    margin-right: 0.25rem;
}
.sl-chip-ico      { font-size: 1rem; line-height: 1; }

/* ═══ 수학 허브 (math/index.php) ═══ */
.mh-card-link      { text-decoration: none; color: inherit; }
.mh-hero-ico       { font-size: 40px; color: var(--t-clay-600); }
.mh-hero-title     { font-size: 1.125rem; font-weight: 700; color: var(--t-ink); }
.mh-card-ico       { font-size: 28px; color: var(--t-clay-600); }
.mh-card-title     { font-size: 1rem; font-weight: 600; color: var(--t-ink); margin: 0; }
.mh-progress {
    margin-top: 8px;
    height: 6px;
    background: color-mix(in srgb, var(--t-ink) 7%, transparent);
    border-radius: 3px;
    overflow: hidden;
}
.mh-progress__bar {
    height: 100%;
    background: var(--t-clay-500);
    transition: width 0.3s ease;
}
.mh-progress__pct {
    font-size: 11px;
    margin-top: 2px;
    text-align: right;
    color: var(--t-muted);
}

/* ── 학습 세션 카드 뒤집기 3D (PUB site-components.css 동등) ── */
#ss-flip-container { perspective: 1000px; }
#ss-flip,
#ss-vocab-card {
    transform-style: preserve-3d;
    transition: transform 0.5s ease;
}
#ss-flip.flipped,
#ss-flip.card-flip--flipped,
#ss-vocab-card.flipped,
#ss-vocab-card.card-flip--flipped {
    transform: rotateY(180deg);
}
#ss-front, #ss-back,
#ss-vfront, #ss-vback { backface-visibility: hidden; }
#ss-back, #ss-vback   { transform: rotateY(180deg); }

/* 진행 바 fill (JS 가 width% 설정) */
#ss-progress-fill { transition: width 0.3s ease; }