@charset "UTF-8";
/* ==========================================================================
   AIEMR — 사용자단 공통 스타일 (단일 파일)
   --------------------------------------------------------------------------
   근거: docs/design/main_pc.png (1920 frame @2x) / main_mo.png (390 frame @2x)
         docs/design/quiz_pc.png / quiz_mo.png
   측정: 색상·간격·폰트크기 전량 원본 PNG 픽셀 계측 (docs/design/MEASURED.md)

   ★ 이 파일 하나만 include 한다. 페이지별 CSS 파일을 만들지 않는다.
     페이지 고유 스타일이 필요하면 이 파일 하단 "페이지별" 섹션에 추가한다.

   실제 배치 경로 → src/public/assets/css/user.css
   include 위치   → src/views/common/head.php

   반응형 분기 (→ docs/global/06.architecture.md 12장)
     Mobile   ~767
     Tablet   768~1023
     Desktop  1024~
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 폰트
   ⚠️ 디자인 원본은 Pretendard 로 제작된 것으로 판단된다.
      현재 프로젝트에 웹폰트 파일이 없어(→ 확인 필요 #1) 시스템 폰트로 대체된다.
      woff2 를 assets/fonts/ 에 넣으면 아래 @font-face 주석만 해제하면 된다.
      (CDN 금지 → 00.project-config.md 외부 연동)
-------------------------------------------------------------------------- */
/*
@font-face {
    font-family: 'Pretendard';
    src: url('../fonts/Pretendard-Regular.woff2') format('woff2');
    font-weight: 400; font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('../fonts/Pretendard-SemiBold.woff2') format('woff2');
    font-weight: 600; font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('../fonts/Pretendard-Bold.woff2') format('woff2');
    font-weight: 700; font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('../fonts/Pretendard-ExtraBold.woff2') format('woff2');
    font-weight: 800; font-display: swap;
}
*/

/* --------------------------------------------------------------------------
   1. 토큰
-------------------------------------------------------------------------- */
:root {
    /* 브랜드 — 원본 계측값 */
    --c-primary:        #0080FF;   /* 버튼·링크·활성메뉴·뱃지 */
    --c-primary-dark:   #0069D9;   /* hover (파생) */
    --c-primary-line:   #66B3FF;   /* 활성 카드 테두리 */
    --c-primary-soft:   #EBF5FF;   /* 사용자 칩 배경 */
    --c-primary-tint:   #F2F8FF;   /* 선택된 보기 배경 */
    --c-primary-tint-2: #F7FBFF;   /* 아주 옅은 행 배경 */
    --c-primary-ring:   #E6F3FF;   /* Q뱃지 후광 */

    /* 텍스트 */
    --c-ink:            #242424;
    --c-ink-2:          #4A4A4A;
    --c-muted:          #727272;
    --c-muted-2:        #929393;
    --c-faint:          #ADADAD;

    /* 면 */
    --c-bg:             #FFFFFF;
    --c-bg-alt:         #F5F6F8;   /* 섹션·본문 회색 배경 */
    --c-line:           #E4E7EA;   /* 기본 테두리 */
    --c-line-2:         #EFF0F3;   /* 옅은 테두리 */
    --c-divider:        #EDEDED;   /* 목록 구분선 */
    --c-dark:           #272828;   /* 푸터·다크 버튼 */

    /* 그라디언트 */
    --g-hero:  linear-gradient(105deg, #B6ECFB 0%, #BAE8FB 45%, #BFDFFB 100%);
    --g-cta:   linear-gradient(100deg, #DCECFE 0%, #D3E7FE 55%, #CDE3FE 100%);

    /* 상태 */
    --c-danger:         #E5484D;
    --c-danger-bg:      #FFF0F0;
    --c-success:        #2B8A3E;
    --c-success-bg:     #EBFBEE;
    --c-warn:           #E8590C;
    --c-warn-bg:        #FFF4E6;
    --c-star:           #FFB020;

    /* 푸터 */
    --c-footer-text:    #757676;
    --c-footer-strong:  #D5D6D6;
    --c-footer-dim:     #4E4F4F;

    /* 모서리 */
    --r-xs:   6px;
    --r-sm:   8px;
    --r-md:  12px;
    --r-lg:  16px;
    --r-xl:  20px;
    --r-pill: 999px;

    /* 레이아웃 */
    --container: 1280px;
    --gutter:    24px;
    --gnb-h:     70px;

    /* 그림자 */
    --sh-card:   0 1px 3px rgba(16, 24, 64, .04);
    --sh-pop:    0 8px 24px rgba(28, 40, 80, .14);
    --sh-drawer: -4px 0 16px rgba(0, 0, 0, .12);
}

/* --------------------------------------------------------------------------
   2. 리셋 / 베이스
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* ★ hidden 속성이 항상 이기게 한다.
   .drawer 처럼 display 를 지정한 요소는 UA 의 [hidden]{display:none} 을 눌러버려
   드로어가 데스크톱에서 그대로 보이는 사고가 난다 (실제 발생) */
[hidden] { display: none !important; }

body {
    margin: 0;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont,
                 'Segoe UI', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--c-ink);
    background: var(--c-bg);
    letter-spacing: -.01em;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
svg { max-width: 100%; vertical-align: middle; }
/* height:auto 를 반드시 함께 준다. width/height 속성이 붙은 img 에 CSS 로 width 만 주면
   height 속성이 그대로 살아 비율이 깨진다 (실제 발생: 배너 일러스트 132×420) */
img { max-width: 100%; height: auto; vertical-align: middle; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
input, select, textarea { font: inherit; color: inherit; }
table { width: 100%; border-collapse: collapse; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. 레이아웃 골격
-------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* 마지막 섹션이 회색이면 남는 높이까지 회색이 차도록 한다.
   (안 그러면 내용이 짧은 화면에서 푸터 위에 흰 띠가 생긴다) */
/* ★ 콘텐츠 화면은 **회색 바탕 + 흰 카드**로 구분한다 (시안 quiz_pc/quiz_mo 기준).
   흰 바탕 위에 흰 카드를 얹으면 경계가 사라져 목록·본문이 뭉쳐 보인다 (2026-08-19 피드백).
   메인만 히어로·일러스트가 주인공이라 흰 바탕을 유지한다 → body.is-plain */
.site-main {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    background: var(--c-bg-alt);
}
body.is-plain .site-main { background: var(--c-bg); }
.site-main > .section:last-child.section--gray { flex: 1 0 auto; }

/* 회색 배경 섹션 (본문 전체가 회색인 화면은 body 에 .is-gray) */
body.is-gray { background: var(--c-bg-alt); }

.section { padding-block: 80px; }
.section--gray { background: var(--c-bg-alt); }
.section--tight { padding-block: 56px; }

/* 섹션 제목 */
.section-title {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -.03em;
    text-align: center;
}
.section-title--left { text-align: left; }

/* 페이지 제목 (목록·상세 화면 공통) */
.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 24px;
}
/* 제목 오른쪽 액션 묶음 (회차 select · 다시 응시하기 등) */
.page-head-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.page-title {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.03em;
}
.page-sub {
    margin-top: 6px;
    font-size: 15px;
    color: var(--c-muted);
}

/* --------------------------------------------------------------------------
   4. GNB
   → include: src/views/common/header/header_user.php
-------------------------------------------------------------------------- */
.gnb {
    position: sticky;
    top: 0;
    z-index: 900;
    background: var(--c-bg);
    border-bottom: 1px solid #F1F2F4;
}
.gnb-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    height: var(--gnb-h);
}
.gnb-logo {
    flex-shrink: 0;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.045em;
    color: var(--c-ink);
}
.gnb-logo em { font-style: normal; color: var(--c-primary); }

.gnb-menu {
    display: flex;
    flex: 1;
    justify-content: center;
    gap: 40px;
}
.gnb-menu a {
    position: relative;
    font-size: 16px;
    font-weight: 500;
    color: var(--c-ink-2);
}
.gnb-menu a:hover { color: var(--c-primary); }
.gnb-menu a.is-active { font-weight: 700; color: var(--c-primary); }
/* 활성 메뉴 위 점 — 원본 디자인의 표시 방식 */
.gnb-menu a.is-active::before {
    content: '';
    position: absolute;
    top: -9px;
    left: 50%;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    background: var(--c-primary);
    border-radius: 50%;
}

.gnb-util {
    display: flex;
    flex-shrink: 0;
    gap: 8px;
    align-items: center;
}

/* 로그인 상태 사용자 칩 */
.gnb-user {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    height: 34px;
    padding: 0 14px 0 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--c-primary);
    background: var(--c-primary-soft);
    border-radius: var(--r-pill);
}
.gnb-user svg { flex-shrink: 0; }

/* 모바일 전용 아이콘 버튼 */
.gnb-icon-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: var(--c-ink);
}
.gnb-divider { display: none; width: 1px; height: 18px; background: var(--c-line); }

/* --------------------------------------------------------------------------
   5. 모바일 드로어
   ★ common.js 의 기존 계약 유지: #gnbDrawer / .drawer-overlay /
     [data-drawer-open] / [data-drawer-close] / hidden 속성 토글
-------------------------------------------------------------------------- */
.drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, .4);
}
.drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    width: 78vw;
    max-width: 320px;
    height: 100%;
    background: var(--c-bg);
    box-shadow: var(--sh-drawer);
}
.drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 0 20px;
    border-bottom: 1px solid var(--c-line);
}
.drawer-title { font-size: 15px; font-weight: 700; }
.drawer-close { color: var(--c-muted); }
.drawer-menu { padding: 8px 0; }
.drawer-menu a,
.drawer-menu button {
    display: block;
    width: 100%;
    padding: 15px 20px;
    font-size: 15px;
    text-align: left;
    border-bottom: 1px solid #F6F6F6;
}
.drawer-menu a:hover,
.drawer-menu button:hover { color: var(--c-primary); background: var(--c-primary-tint); }
.drawer-menu a.is-active { font-weight: 700; color: var(--c-primary); }

/* --------------------------------------------------------------------------
   6. 버튼
-------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    height: 46px;
    padding: 0 22px;
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    transition: background .15s, border-color .15s, color .15s;
}
.btn:disabled, .btn[aria-disabled='true'] {
    cursor: not-allowed;
    opacity: .45;
}

.btn--primary  { color: #fff; background: var(--c-primary); }
.btn--primary:hover:not(:disabled)  { background: var(--c-primary-dark); }

.btn--dark      { color: #fff; background: var(--c-dark); }
.btn--dark:hover:not(:disabled) { background: #3A3B3B; }

.btn--line      { color: var(--c-ink); background: #fff; border-color: var(--c-line); }
.btn--line:hover:not(:disabled) { border-color: var(--c-primary); color: var(--c-primary); }

.btn--ghost     { color: var(--c-muted); background: transparent; }
.btn--ghost:hover:not(:disabled) { color: var(--c-primary); }

.btn--danger    { color: #fff; background: var(--c-danger); }

/* 크기 */
.btn--lg   { height: 54px; padding: 0 28px; font-size: 17px; }
.btn--sm   { height: 36px; padding: 0 14px; font-size: 14px; }
.btn--xs   { height: 30px; padding: 0 10px; font-size: 13px; border-radius: var(--r-xs); }
.btn--pill { border-radius: var(--r-pill); }
.btn--block { width: 100%; }

/* 원형 아이콘 버튼 (전체보기 화살표 등) */
.btn-round {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: #fff;
    background: var(--c-dark);
    border-radius: 50%;
    flex-shrink: 0;
}
.btn-round--primary { color: var(--c-primary); background: #fff; box-shadow: 0 2px 10px rgba(0, 92, 175, .18); }
.btn-round--lg { width: 48px; height: 48px; }

/* --------------------------------------------------------------------------
   7. 뱃지 / 칩
-------------------------------------------------------------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    border-radius: var(--r-xs);
    white-space: nowrap;
}
.badge--new     { height: 20px; color: #fff; background: var(--c-primary); }
.badge--primary { color: var(--c-primary); background: var(--c-primary-soft); }
.badge--gray    { color: var(--c-muted); background: #F1F3F5; }
.badge--green   { color: var(--c-success); background: var(--c-success-bg); }
.badge--red     { color: var(--c-danger); background: var(--c-danger-bg); }
.badge--orange  { color: var(--c-warn); background: var(--c-warn-bg); }
.badge--step {
    height: 28px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #fff;
    background: var(--c-primary);
    border-radius: var(--r-pill);
}

/* 문항 번호 뱃지 (후광 링) — quiz_pc.png 계측 */
.q-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: var(--c-primary);
    border-radius: 50%;
    box-shadow: 0 0 0 7px var(--c-primary-ring);
}

/* --------------------------------------------------------------------------
   8. 카드
-------------------------------------------------------------------------- */
.card {
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-card);
}
.card--flat   { box-shadow: none; }
.card--active { border-color: var(--c-primary-line); }
.card-body    { padding: 24px; }

/* --------------------------------------------------------------------------
   9. 히어로 (메인)
   원본: 1920 프레임에서 좌우 40px 여백, 반경 20, 높이 660
-------------------------------------------------------------------------- */
.hero {
    position: relative;
    margin: 20px clamp(20px, 2.1vw, 40px) 0;
    overflow: hidden;
    background: var(--g-hero);
    border-radius: var(--r-xl);
}
.hero-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    max-width: 1600px;
    min-height: 660px;
    margin-inline: auto;
    padding: 48px clamp(24px, 3vw, 60px);
}
.hero-copy { flex: 1 1 0; min-width: 0; }
.hero-title {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.45;
    letter-spacing: -.04em;
}
.hero-desc {
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.75;
    color: var(--c-ink-2);
}
.hero-actions { margin-top: 34px; }
.hero-art {
    flex: 0 1 auto;
    align-self: flex-end;
    width: min(50%, 920px);   /* 원본: 히어로 폭 1840 중 918 */
}
.hero-art img { display: block; width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   10. 이용방법 스텝 카드
   Desktop  : 3열 세로형 (410px × 3, gap 24)
   ~1023    : 1열 가로형 (모바일 디자인)
-------------------------------------------------------------------------- */
.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 48px;
}
.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 24px 36px;
    text-align: center;
    /* hover 로 테두리·그림자·부상이 함께 움직인다 (첫 카드 활성 상태와 같은 톤) */
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
/* 터치 기기는 hover 가 '고착'되므로 마우스 환경에서만 건다 */
@media (hover: hover) and (pointer: fine) {
    .step:hover {
        border-color: var(--c-primary-line);
        box-shadow: 0 10px 26px rgba(0, 128, 255, .14);
        transform: translateY(-6px);
    }
    .step:hover .step-art img { transform: scale(1.06); }
    .step:hover .step-title  { color: var(--c-primary); }
}
@media (prefers-reduced-motion: reduce) {
    .step, .step-art img { transition: none; }
    .step:hover { transform: none; }
}
.step-art {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
    margin: 26px 0 24px;
}
.step-art img { width: auto; height: 100%; transition: transform .3s ease; }
.step-title { transition: color .25s ease; }
.step-title { font-size: 20px; font-weight: 700; letter-spacing: -.03em; }
.step-desc  { margin-top: 10px; font-size: 16px; line-height: 1.55; color: var(--c-muted); }

/* --------------------------------------------------------------------------
   11. 가입유도 배너
-------------------------------------------------------------------------- */
/* overflow 를 자르지 않는다 — 시안에서 인물 머리가 배너 위로 26px 튀어나온다 */
.promo {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 180px;
    padding: 32px 40px;
    background: var(--g-cta);
    border-radius: var(--r-lg);
}
.promo-copy { position: relative; z-index: 1; max-width: 60%; }
.promo-title { font-size: 24px; font-weight: 700; line-height: 1.45; letter-spacing: -.03em; }
.promo-desc  { margin-top: 10px; font-size: 16px; color: var(--c-ink-2); }
.promo-art {
    position: absolute;
    right: 13%;
    bottom: 0;
    width: 265px;               /* 원본 실측 265 × 178 */
    pointer-events: none;
}
.promo-art img { display: block; width: 100%; }
.promo-go {
    position: absolute;
    right: 18px;
    bottom: 18px;
}

/* --------------------------------------------------------------------------
   12. 공지 블록 (메인)
   Desktop : 좌 제목 / 우 카드 2열
   ~1023   : 상 제목 / 하 카드
-------------------------------------------------------------------------- */
.notice-block {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}
.notice-block-head .section-title { text-align: left; }
.notice-more {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    margin-top: 18px;
    font-size: 16px;
    font-weight: 500;
    color: var(--c-ink-2);
}
.notice-more:hover { color: var(--c-primary); }

/* 목록 (메인 카드형 · 공지 목록 화면 공용) */
.notice-list {
    padding: 8px 0;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-card);
}
.notice-list > li + li { border-top: 1px solid var(--c-divider); }
.notice-list a {
    display: flex;
    gap: 12px;
    align-items: center;
    min-height: 72px;
    padding: 12px 28px;
}
.notice-list a:hover .notice-subject { color: var(--c-primary); }
.notice-subject {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-size: 16px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.notice-date { flex-shrink: 0; font-size: 14px; color: var(--c-faint); }

/* --------------------------------------------------------------------------
   13. 푸터
   → include: src/views/common/footer/footer_user.php
-------------------------------------------------------------------------- */
.site-footer {
    flex-shrink: 0;
    padding: 52px 0 44px;
    font-size: 14px;
    color: var(--c-footer-text);
    background: var(--c-dark);
}
/* 순서 — PC: 브랜드 → 정보 → 약관링크 → 저작권
             Mobile: 약관링크가 맨 위 (시안 반영, 아래 미디어쿼리에서 order 변경) */
.footer-links {
    display: flex;
    gap: 22px;
    align-items: center;
    order: 3;
    margin-top: -14px;
}
.footer-links a:hover { color: #fff; }
.footer-links a.is-strong { font-weight: 700; color: var(--c-footer-strong); }
.footer-inner { display: flex; flex-direction: column; gap: 26px; }
.footer-brand { order: 1; }
.footer-logo {
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -.05em;
    color: #55565626;
    color: rgba(255, 255, 255, .28);
    line-height: 1;
}
.footer-tagline { margin-top: 6px; font-size: 13px; color: var(--c-footer-dim); }
.footer-info {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    order: 2;
    margin-top: -12px;
}
.footer-info span { position: relative; }
.footer-info span + span::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 50%;
    width: 2px;
    height: 2px;
    background: currentColor;
    border-radius: 50%;
}
.footer-copy { order: 4; font-size: 13px; color: var(--c-footer-dim); }

/* --------------------------------------------------------------------------
   14. 폼 (로그인·가입 등에서 재사용)
-------------------------------------------------------------------------- */
.form-box { max-width: 640px; margin-inline: auto; }
.field + .field { margin-top: 18px; }
.field-label {
    display: block;
    margin-bottom: 7px;
    font-size: 14px;
    font-weight: 600;
    color: var(--c-ink-2);
}
.field-label.is-required::after { content: ' *'; color: var(--c-danger); }
.input,
.select,
.textarea {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-sm);
    transition: border-color .15s, box-shadow .15s;
}
.textarea { height: auto; min-height: 120px; padding: 12px 14px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus {
    outline: 0;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(0, 128, 255, .12);
}
.input::placeholder { color: var(--c-faint); }
.input:disabled, .input[readonly] { color: var(--c-muted); background: var(--c-bg-alt); }
.field-help  { margin-top: 6px; font-size: 13px; color: var(--c-muted); }
.field-error { margin-top: 6px; font-size: 13px; color: var(--c-danger); }
/* 같은 슬롯을 '사용 가능' 안내에도 쓴다 (→ user.js setFieldMessage) */
.field-error.is-ok { color: var(--c-success); }
.field-error.is-ok::before { content: '✓ '; }
.field-row { display: flex; gap: 8px; }
.field-row .input { flex: 1; min-width: 0; }

/* 검색 폼 */
.search-bar { display: flex; gap: 8px; margin-bottom: 20px; }
.search-bar .input { max-width: 320px; }

/* 체크 / 라디오 */
.check {
    display: inline-flex;
    gap: 9px;
    align-items: flex-start;
    font-size: 15px;
    cursor: pointer;
}
.check input { flex-shrink: 0; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--c-primary); }

/* --------------------------------------------------------------------------
   15. 아코디언 (시나리오 상세)
-------------------------------------------------------------------------- */
.acc {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-card);
}
.acc + .acc { margin-top: 20px; }
.acc-head {
    display: flex;
    gap: 14px;
    align-items: center;
    width: 100%;
    padding: 22px 28px;
    text-align: left;
}
.acc-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--c-primary);
    background: var(--c-primary-soft);
    border-radius: var(--r-md);
}
.acc-titles { flex: 1; min-width: 0; }
.acc-title { display: block; font-size: 18px; font-weight: 700; letter-spacing: -.03em; }
.acc-sub   { display: block; margin-top: 3px; font-size: 14px; color: var(--c-muted); }
.acc-toggle {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    flex-shrink: 0;
    height: 30px;
    padding: 0 11px;
    font-size: 13px;
    color: var(--c-muted);
    border: 1px solid var(--c-line-2);
    border-radius: var(--r-xs);
}
.acc-toggle svg { transition: transform .2s; }
.acc[data-open='false'] .acc-toggle svg { transform: rotate(180deg); }
.acc[data-open='false'] .acc-body { display: none; }
.acc-body { padding: 0 28px 28px; }

/* 정의 목록 (환자정보·임상자료) */
.dl {
    border: 1px solid var(--c-line-2);
    border-radius: var(--r-md);
    overflow: hidden;
}
.dl-row { display: flex; }
.dl-row + .dl-row { border-top: 1px solid var(--c-line-2); }
.dl-row dt {
    flex-shrink: 0;
    width: 150px;
    padding: 14px 18px;
    font-size: 15px;
    font-weight: 600;
    color: var(--c-ink-2);
    background: #F7F8FA;
}
.dl-row dd { flex: 1; min-width: 0; padding: 14px 18px; font-size: 15px; line-height: 1.6; }

/* --------------------------------------------------------------------------
   16. 메타 바 (난이도 / 학습상태 / 기간)
-------------------------------------------------------------------------- */
.meta-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 40px;
    padding: 20px 28px;
    margin-bottom: 20px;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-card);
}
.meta-item { display: flex; gap: 12px; align-items: center; font-size: 15px; }
.meta-key {
    padding: 3px 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--c-muted);
    background: var(--c-bg-alt);
    border-radius: var(--r-xs);
}
.stars { color: var(--c-star); letter-spacing: 1px; }
.stars i { font-style: normal; }
.stars .is-off { color: #DDE1E6; }

/* --------------------------------------------------------------------------
   17. 퀴즈 문항 / 보기
-------------------------------------------------------------------------- */
.quiz + .quiz { margin-top: 8px; border-top: 1px solid var(--c-line-2); padding-top: 32px; }
.quiz-head {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 18px;
}
.quiz-q { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; line-height: 1.55; }
.quiz-tools { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.hint-btn {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    height: 30px;
    padding: 0 11px;
    font-size: 13px;
    font-weight: 500;
    color: var(--c-primary);
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-xs);
}
.hint-btn:hover { border-color: var(--c-primary); }
.quiz-score {
    flex-shrink: 0;
    padding: 4px 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--c-dark);
    background: var(--c-bg-alt);
    border-radius: var(--r-xs);
}
.hint-box {
    padding: 14px 16px;
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--c-ink-2);
    background: #FFFBEB;
    border: 1px solid #FDE9A9;
    border-radius: var(--r-sm);
}

.options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.option {
    display: flex;
    gap: 10px;
    align-items: center;
    min-height: 50px;
    padding: 11px 16px;
    font-size: 15px;
    /* 시안(quiz_pc.png)의 보기는 **흰 바탕 + 회색 테두리**다.
       연한 파랑 채움은 '선택됨' 신호로만 남긴다 — 기본값에 쓰면 선택이 안 보인다 */
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.option:hover { background: var(--c-primary-tint-2); border-color: var(--c-primary-line); }
.option input { flex-shrink: 0; width: 18px; height: 18px; margin: 0; accent-color: var(--c-primary); }
.option.is-selected,
.option:has(input:checked) {
    font-weight: 600;
    background: var(--c-primary-tint);
    border-color: var(--c-primary);
}
/* 결과 화면 */
.option.is-answer  { background: var(--c-success-bg); border-color: #8CE99A; }
.option.is-wrong   { background: var(--c-danger-bg);  border-color: #FFC9C9; }
.option-tag { flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--c-muted); }

.quiz.is-todo { position: relative; }

/* 하단 제출 바 */
.submit-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding-top: 24px;
    margin-top: 28px;
    border-top: 1px solid var(--c-line);
}
.submit-info { display: flex; gap: 8px; align-items: center; font-size: 15px; font-weight: 600; }
.submit-actions { display: flex; gap: 10px; }

/* --------------------------------------------------------------------------
   18. 표 (내 학습결과 등) — Mobile 카드형 전환
-------------------------------------------------------------------------- */
.table-wrap {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-card);
}
.table th, .table td { padding: 15px 18px; text-align: left; }
.table thead th {
    font-size: 14px;
    font-weight: 600;
    color: var(--c-muted);
    background: #F9FAFB;
    white-space: nowrap;
}
.table tbody tr + tr td { border-top: 1px solid var(--c-divider); }
.table td { font-size: 15px; }

/* 행 전체 클릭 (→ user.js [data-row-href]) — 누를 수 있다는 걸 보이게 한다 */
[data-row-href] { cursor: pointer; }
.table tbody tr[data-row-href]:hover td { background: var(--c-primary-tint-2); }
.table tbody tr[data-row-href]:hover .col-subject a { color: var(--c-primary); }
.table .col-num { text-align: center; white-space: nowrap; }

/* --------------------------------------------------------------------------
   19. 진행률 / 빈 상태 / 페이징
-------------------------------------------------------------------------- */
.progress { display: flex; gap: 10px; align-items: center; }
.progress-track { flex: 1; height: 8px; background: #EBEEF2; border-radius: var(--r-pill); overflow: hidden; }
/* ⚠️ display:block 필수 — <span> 으로 쓰면 인라인이라 width·height 가 무시된다 */
.progress-fill  { display: block; height: 100%; background: var(--c-primary); border-radius: inherit; }
.progress-label { flex-shrink: 0; font-size: 13px; color: var(--c-muted); }

.empty {
    padding: 64px 20px;
    text-align: center;
    color: var(--c-faint);
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
}
.empty svg { margin-bottom: 14px; }
.empty-text { font-size: 15px; }
.empty .btn { margin-top: 18px; }

.pagination { display: flex; gap: 4px; justify-content: center; margin-top: 28px; }
.pagination a, .pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    font-size: 14px;
    color: var(--c-muted);
    border-radius: var(--r-sm);
}
.pagination a:hover { color: var(--c-primary); background: var(--c-primary-tint); }
.pagination .is-current { font-weight: 700; color: #fff; background: var(--c-primary); }

/* --------------------------------------------------------------------------
   20. 토스트 (common.js 계약 유지: #toastContainer / .toast-item / .show)
-------------------------------------------------------------------------- */
.toast-container {
    position: fixed;
    bottom: 32px;
    left: 50%;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
    transform: translateX(-50%);
}
.toast-item {
    min-width: 220px;
    max-width: 90vw;
    padding: 13px 22px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: #fff;
    /* 성공 토스트는 **브랜드 컬러**를 쓴다. 초록은 '정답' 을 뜻하는 색이라
       저장·확인 알림에 쓰면 채점 결과처럼 읽힌다 (2026-08-19 피드백) */
    background: var(--c-primary);
    border-radius: var(--r-md);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .16);
    text-align: center;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .2s, transform .2s;
}
.toast-item.show { opacity: 1; transform: translateY(0); }
.toast-success { background: var(--c-primary); }
.toast-error   { background: var(--c-danger); }
.toast-warning { background: var(--c-warn); }

/* --------------------------------------------------------------------------
   20-B. 공통 컴포넌트 호환 레이어
   views/common/component/*.php 9종은 관리자단과 **공유**한다.
   그 파일들을 고치면 관리자 18화면이 함께 흔들리므로 건드리지 않고,
   컴포넌트가 뿜는 클래스명을 여기서 사용자단 톤으로 받아준다.
   (그래서 사용자 화면은 bootstrap.min.css / admin.css 를 로드하지 않는다)
-------------------------------------------------------------------------- */

/* empty_state.php */
.empty-state {
    padding: 64px 20px;
    text-align: center;
    color: var(--c-faint);
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
}
.empty-state i { display: block; margin-bottom: 12px; font-size: 38px; }
.empty-state-text { margin: 0 0 16px; font-size: 15px; }

/* pagination.php (Bootstrap 마크업 그대로 받는다) */
.pagination {
    display: flex;
    gap: 4px;
    justify-content: center;
    padding: 0;
    margin: 28px 0 0;
    list-style: none;
}
.pagination .page-item.disabled .page-link { color: #D5D8DD; pointer-events: none; }
.pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    font-size: 14px;
    color: var(--c-muted);
    border-radius: var(--r-sm);
}
.pagination .page-link:hover { color: var(--c-primary); background: var(--c-primary-tint); }
.pagination .page-item.active .page-link { font-weight: 700; color: #fff; background: var(--c-primary); }
.d-flex { display: flex; }
.justify-content-center { justify-content: center; }
.mt-3 { margin-top: 16px; }
.mb-0 { margin-bottom: 0; }

/* confirm_modal.php */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(16, 22, 40, .5);
}
.modal-overlay.show { display: flex; }
.modal-box {
    width: 100%;
    max-width: 420px;
    overflow: hidden;
    background: #fff;
    border-radius: var(--r-lg);
    box-shadow: 0 20px 50px rgba(10, 16, 40, .28);
}
.modal-box-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--c-line);
}
.modal-box-header h5 { margin: 0; font-size: 17px; font-weight: 700; }
.modal-box-header .close-btn { color: var(--c-muted); font-size: 15px; }
.modal-box-body { padding: 22px; font-size: 15px; line-height: 1.7; }
.modal-box-footer {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 16px 22px;
    background: var(--c-bg-alt);
}
.modal-warning {
    padding: 14px 16px;
    margin-top: 16px;
    font-size: 14px;
    background: var(--c-warn-bg);
    border-radius: var(--r-sm);
}
.modal-warning-title { margin-bottom: 6px; font-weight: 700; color: #A63C00; }
.modal-warning ul { padding-left: 16px; list-style: disc; color: var(--c-ink-2); }
.modal-info-row { display: flex; gap: 12px; padding: 7px 0; font-size: 14px; }
.modal-info-label { flex: 0 0 108px; color: var(--c-muted); }
.modal-info-value { flex: 1; min-width: 0; font-weight: 600; }

/* 컴포넌트가 쓰는 Bootstrap 계열 버튼 이름 → 사용자단 버튼으로 매핑
   (뷰에서는 .btn--primary 계열을 쓰지만 공용 컴포넌트는 이 이름을 뿜는다) */
.btn-sm { height: 36px; padding: 0 14px; font-size: 14px; border-radius: var(--r-xs); }
.btn-primary { color: #fff; background: var(--c-primary); }
.btn-primary:hover { background: var(--c-primary-dark); }
.btn-outline-primary { color: var(--c-primary); background: #fff; border-color: var(--c-primary); }
.btn-outline-secondary { color: var(--c-ink); background: #fff; border-color: var(--c-line); }
.btn-outline-secondary:hover { color: var(--c-primary); border-color: var(--c-primary); }
.btn-danger { color: #fff; background: var(--c-danger); }
.btn-primary, .btn-outline-primary, .btn-outline-secondary, .btn-danger {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    height: 46px;
    padding: 0 22px;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
}

/* status_badge() 헬퍼는 badge-outline-{color} 를 뿜는다 (→ policy.md 뱃지 매핑).
   사용자단 시안은 테두리 없는 채움형이므로 여기서 톤을 맞춘다. */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    border-radius: var(--r-xs);
    white-space: nowrap;
}
.badge-outline-blue   { color: var(--c-primary);  background: var(--c-primary-soft); }
.badge-outline-green  { color: var(--c-success);  background: var(--c-success-bg); }
.badge-outline-red    { color: var(--c-danger);   background: var(--c-danger-bg); }
.badge-outline-orange { color: var(--c-warn);     background: var(--c-warn-bg); }
.badge-outline-gray   { color: var(--c-muted);    background: #F1F3F5; }
.badge-outline-purple { color: #7048E8;           background: #F3F0FF; }
.badge-outline-cyan   { color: #0C8599;           background: #E3FAFC; }

/* progress_bar.php (Bootstrap progress 마크업) */
.progress-block { display: flex; gap: 10px; align-items: center; min-width: 120px; }
.progress-block .progress {
    flex: 1;
    height: 8px;
    overflow: hidden;
    background: #EBEEF2;
    border-radius: var(--r-pill);
}
.progress-bar { height: 100%; background: var(--c-primary); }
.progress-bar.bg-success { background: var(--c-success); }
.progress-bar.bg-primary { background: var(--c-primary); }
.progress-bar.bg-warning { background: var(--c-warn); }

/* tab_nav.php */
.nav-tabs.tab-nav {
    display: flex;
    gap: 4px;
    padding: 0;
    margin: 0 0 20px;
    list-style: none;
    border-bottom: 1px solid var(--c-line);
}
.nav-tabs .nav-link {
    display: inline-block;
    padding: 11px 18px;
    font-size: 15px;
    color: var(--c-muted);
    border-bottom: 2px solid transparent;
}
.nav-tabs .nav-link.active { font-weight: 700; color: var(--c-primary); border-bottom-color: var(--c-primary); }

/* --------------------------------------------------------------------------
   21. 유틸
-------------------------------------------------------------------------- */
.u-muted  { color: var(--c-muted); }
.u-faint  { color: var(--c-faint); }
.u-primary { color: var(--c-primary); }
.u-danger { color: var(--c-danger); }
.u-bold   { font-weight: 700; }
.u-center { text-align: center; }
.u-right  { text-align: right; }
.u-nowrap { white-space: nowrap; }
.u-mt-0  { margin-top: 0 !important; }
.u-mt-8  { margin-top: 8px; }
.u-mt-16 { margin-top: 16px; }
.u-mt-24 { margin-top: 24px; }
.u-mt-40 { margin-top: 40px; }
.only-mo { display: none; }

/* --------------------------------------------------------------------------
   22. 페이지별
   ★ 페이지 전용 CSS 파일을 새로 만들지 않는다. 여기에 화면별로 이어 붙인다.
-------------------------------------------------------------------------- */

/* ── 인증 화면 공통 (/login /join /find-id /find-password /reset-password) ── */
.auth-wrap { padding: 56px 0 96px; }
.auth-head { margin-bottom: 28px; text-align: center; }
.auth-title { font-size: 28px; font-weight: 700; letter-spacing: -.03em; }
.auth-lead { margin-top: 10px; font-size: 15px; color: var(--c-muted); }

.auth-panel {
    padding: 32px;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
}
.auth-panel + .auth-panel { margin-top: 16px; }
.auth-panel-title {
    margin-bottom: 18px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.02em;
}

/* 폼 하단 보조 링크 */
.auth-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    justify-content: center;
    margin-top: 22px;
    font-size: 14px;
    color: var(--c-muted);
}
.auth-links a:hover { color: var(--c-primary); }
.auth-links .sep { color: #D9DCE1; }

/* 2열 필드 */
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field-grid .field + .field { margin-top: 0; }
/* 2열 묶음이 연달아 오면 사이 여백이 없어 앞줄 안내문과 뒷줄 라벨이 붙는다 */
.field-grid + .field-grid,
.field + .field-grid,
.field-grid + .field { margin-top: 18px; }

/* 안내 박스 */
.notice-box {
    padding: 16px 18px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--c-ink-2);
    background: var(--c-primary-tint);
    border-left: 3px solid var(--c-primary);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.notice-box--warn { color: #7A3B00; background: var(--c-warn-bg); border-left-color: var(--c-warn); }
.notice-box--error { color: #A32328; background: var(--c-danger-bg); border-left-color: var(--c-danger); }
.notice-box b { font-weight: 700; }
.notice-box + .field, .field + .notice-box, .notice-box + .auth-actions { margin-top: 18px; }

.auth-actions { margin-top: 26px; }

/* 아이디 찾기 결과 */
.result-box {
    padding: 30px 24px;
    margin-top: 16px;
    text-align: center;
    background: var(--c-success-bg);
    border: 1px solid #C3F0CC;
    border-radius: var(--r-lg);
}
.result-label { font-size: 14px; color: var(--c-ink-2); }
.result-value {
    margin: 10px 0 20px;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.02em;
}
.result-actions { display: flex; gap: 8px; justify-content: center; }

/* 약관 동의 */
.agree-all {
    padding: 16px 18px;
    margin-bottom: 6px;
    background: var(--c-bg-alt);
    border-radius: var(--r-sm);
}
.agree-all .check { font-size: 16px; font-weight: 700; }
.agree-row {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px 18px;
}
.agree-row .check { flex: 1; min-width: 0; font-size: 14px; }
.agree-row .req { margin-right: 4px; font-weight: 700; color: var(--c-primary); }
.agree-view { flex-shrink: 0; font-size: 13px; color: var(--c-muted); text-decoration: underline; }
.agree-view:hover { color: var(--c-primary); }

/* 약관 전문 */
.terms-doc { max-width: 900px; margin-inline: auto; }
.terms-date { margin-bottom: 18px; font-size: 14px; color: var(--c-muted); }
.terms-body {
    padding: 30px 28px;
    font-size: 15px;
    line-height: 1.9;
    color: var(--c-ink-2);
    word-break: break-word;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
}
.terms-body h2, .terms-body h3 { margin: 22px 0 8px; font-size: 16px; font-weight: 700; color: var(--c-ink); }
.terms-body p { margin-bottom: 10px; }
.terms-body ul, .terms-body ol { padding-left: 20px; margin-bottom: 10px; list-style: disc; }

/* ── 공지사항 상세 (/notice/{idx}) ─────────────────────────────── */
.notice-detail {
    max-width: 900px;
    padding: 36px 40px 40px;
    margin-inline: auto;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-card);
}
.notice-detail-head { padding-bottom: 16px; border-bottom: 2px solid var(--c-ink); }
.notice-detail-title {
    margin: 0 0 10px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -.03em;
}
.notice-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: 14px;
    color: var(--c-muted);
}
.notice-detail-body {
    padding: 28px 2px 36px;
    font-size: 16px;
    line-height: 1.9;
    color: var(--c-ink-2);
    word-break: break-word;
}
.notice-files { padding-top: 18px; border-top: 1px solid var(--c-line); }
.notice-files-title { margin-bottom: 10px; font-size: 14px; font-weight: 700; color: var(--c-ink-2); }
.notice-files-list li {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px 14px;
    margin-bottom: 6px;
    font-size: 14px;
    background: var(--c-bg-alt);
    border-radius: var(--r-sm);
}
.notice-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notice-file-size { flex-shrink: 0; font-size: 13px; color: var(--c-faint); }
/* 이전글 · 다음글 2열 — [목록으로] 는 아래 별도 행(.notice-detail-actions) */
.notice-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 12px;
    padding-top: 20px;
    margin-top: 32px;
    border-top: 1px solid var(--c-line);
}
.notice-nav-item {
    display: flex;
    gap: 10px;
    align-items: center;
    min-width: 0;
    padding: 12px 16px;
    background: var(--c-bg-alt);
    border: 1px solid var(--c-line);
    border-radius: var(--r-sm);
    transition: border-color .2s ease, background-color .2s ease;
}
.notice-nav-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.notice-nav-item--next { justify-content: flex-end; text-align: right; }
.notice-nav-item--next .notice-nav-text { align-items: flex-end; }
.notice-nav-arrow { flex-shrink: 0; color: var(--c-muted-2); }

.notice-nav-item:not(.is-disabled):hover {
    background: var(--c-primary-tint-2);
    border-color: var(--c-primary);
}
.notice-nav-item:not(.is-disabled):hover .notice-nav-arrow { color: var(--c-primary); }
.notice-nav-item.is-disabled { color: var(--c-faint); background: var(--c-bg-alt); }
.notice-nav-item.is-disabled .notice-nav-arrow { color: var(--c-faint); }

.notice-nav-label { font-size: 12px; color: var(--c-muted); }
.notice-nav-title { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }

/* [목록으로] — 글 이동과 성격이 다르므로 줄을 나누고 **가운데**에 둔다
   (다른 화면의 [목록으로] 와 위치를 맞춘다) */
.notice-detail-actions { display: flex; justify-content: center; margin-top: 20px; }
.notice-detail-actions .btn { gap: 7px; }

/* 공지 목록 표의 열 폭 */
.notice-table .col-no   { width: 80px; text-align: center; color: var(--c-muted); }
.notice-table .col-view { width: 90px; text-align: center; color: var(--c-muted); }
.notice-table .col-date { width: 120px; color: var(--c-muted); white-space: nowrap; }
.notice-table .col-subject a:hover { color: var(--c-primary); }
.notice-table .bi-paperclip { margin-left: 6px; color: var(--c-faint); }

/* ── 마이페이지 · 학습 · 결과 (2026-08-18 추가) ────────────────── */
/* ── 공용 조각 (마이페이지·학습·결과에서 함께 쓴다) ───────────── */

/* 흰 패널 — 폼 섹션의 기본 그릇 */
.panel {
    padding: 28px;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
}
.panel + .panel { margin-top: 16px; }
.panel-title {
    margin-bottom: 20px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.02em;
}
.panel-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding-top: 20px;
    margin-top: 22px;
    border-top: 1px solid var(--c-line-2);
}
.panel-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 24px;
    padding: 14px 16px;
    margin-top: 20px;
    font-size: 13px;
    color: var(--c-muted);
    background: var(--c-bg-alt);
    border-radius: var(--r-sm);
}
.panel-meta b { font-weight: 600; color: var(--c-ink-2); }

/* 요약 지표 줄 */
.stat-row {
    display: grid;
    gap: 12px;
    margin-bottom: 24px;
}
.stat-row--3 { grid-template-columns: repeat(3, 1fr); }
.stat-row--4 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.stat {
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
}
.stat-label { display: block; font-size: 13px; font-weight: 600; color: var(--c-muted); }
.stat-value {
    display: block;
    margin-top: 6px;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.03em;
}
.stat-value small { margin-left: 2px; font-size: 14px; font-weight: 600; color: var(--c-muted); }
.stat-value--date { font-size: 16px; font-weight: 700; }

/* ── 컴팩트 요약 — 지표 5개가 카드 5장으로 흩어지면 표보다 요약이 커진다.
      **한 장의 카드 안에 구분선으로 나눈 줄**로 묶어 높이를 3분의 1로 줄인다
      (회차 이력 /result/{idx}, 2026-08-19) */
.stat-row--compact {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    padding: 4px 0;
    margin-bottom: 20px;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-card);
}
.stat-row--compact .stat {
    flex: 1 1 0;
    min-width: 130px;
    padding: 12px 20px;
    background: none;
    border: 0;
    border-radius: 0;
}
.stat-row--compact .stat + .stat { box-shadow: inset 1px 0 0 var(--c-line-2); }
.stat-row--compact .stat-label { font-size: 12.5px; }
.stat-row--compact .stat-value { margin-top: 2px; font-size: 21px; }
.stat-row--compact .stat-value small { font-size: 13px; }
.stat-row--compact .stat-value--date { font-size: 14.5px; font-weight: 700; }
/* '최고 / 최신' 처럼 값 두 개를 한 칸에 묶을 때의 구분자 */
.stat-sep { margin: 0 3px; font-weight: 500; color: var(--c-faint); }

/* 페이지 하단 액션 줄 — 첫 버튼은 좌측, 마지막은 우측으로 민다 */
.page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 28px;
}
.page-actions > :last-child:not(:first-child) { margin-left: auto; }

/* ── [목록으로] 가운데 고정 ──────────────────────────────────
   3열(1fr / auto / 1fr)로 두면 좌우 액션의 유무·개수와 무관하게
   가운데 버튼이 **화면 정중앙**에 남는다. flex + margin:auto 로는
   한쪽 액션이 사라질 때마다 가운데가 밀린다 (2026-08-19 피드백) */
.page-actions--center {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    align-items: center;
    margin-top: 28px;
}
.page-actions--center > .page-actions-side {
    display: flex;
    gap: 8px;
    align-items: center;
    min-width: 0;
}
.page-actions--center > .page-actions-side--end { justify-content: flex-end; }
/* ⚠️ 위 .page-actions 의 `margin-left:auto`(마지막 자식 우측 밀기)를 되돌린다.
   grid 아이템에 auto 마진이 남아 있으면 **stretch 가 꺼져** 칸을 채우지 않는다
   (모바일 1열에서 우측 액션이 내용 너비로 쪼그라들었다) */
.page-actions--center > :last-child:not(:first-child) { margin-left: 0; }
.btn.is-disabled { cursor: not-allowed; opacity: .45; }

.page-head-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; font-size: 14px; }
.field--half { max-width: 50%; }
.select--auto { width: auto; min-width: 130px; }
.notice-list-plain { padding-left: 18px; list-style: disc; }
.notice-list-plain li + li { margin-top: 4px; }

/* 목록 표 공통 열 */
.result-table .col-mid  { width: 96px; white-space: nowrap; }
.result-table .col-date { width: 148px; color: var(--c-muted); white-space: nowrap; }
.result-table .col-act  { width: 112px; white-space: nowrap; }
.result-table .col-subject a { font-weight: 600; }
.result-table .col-subject a:hover { color: var(--c-primary); }
.cell-sub { display: block; margin-top: 3px; font-size: 13px; color: var(--c-muted); }

/* ── 마이페이지 (/mypage · /mypage/withdraw) ──────────────────── */
.mypage-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 24px; }
.mypage-body { min-width: 0; }

.mypage-side {
    align-self: start;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
}
.mypage-profile {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 22px 20px;
    border-bottom: 1px solid var(--c-line-2);
}
.mypage-avatar {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    color: var(--c-primary);
    background: var(--c-primary-soft);
    border-radius: 50%;
}
.mypage-name { font-size: 16px; font-weight: 700; letter-spacing: -.02em; }

.mypage-menu { display: flex; flex-direction: column; padding: 8px; }
.mypage-menu a {
    padding: 12px 14px;
    font-size: 15px;
    color: var(--c-ink-2);
    border-radius: var(--r-sm);
}
.mypage-menu a:hover { background: var(--c-bg-alt); }
.mypage-menu a.is-active { font-weight: 700; color: var(--c-primary); background: var(--c-primary-tint); }

/* ── 학습 홈 (/learn) — 리스트형 2섹션 ────────────────────────── */
.learn-progress {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    align-items: center;
    padding: 18px 22px;
    margin-bottom: 24px;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
}
.learn-progress .progress-track { flex: 1; min-width: 140px; }
.learn-progress-text { font-size: 15px; font-weight: 600; white-space: nowrap; }
.learn-progress-text em { font-style: normal; font-size: 19px; font-weight: 800; color: var(--c-primary); }
.learn-progress-note { font-size: 13px; color: var(--c-muted); white-space: nowrap; }

.learn-sec {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 28px 0 12px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.02em;
}
.learn-sec:first-of-type { margin-top: 8px; }
.learn-sec-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    font-size: 12px;
    font-weight: 700;
    color: var(--c-primary);
    background: var(--c-primary-soft);
    border-radius: var(--r-pill);
}

.learn-list { display: flex; flex-direction: column; gap: 8px; }
.learn-item {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    align-items: center;
    padding: 20px 24px;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    transition: border-color .15s, box-shadow .15s;
}
.learn-item:hover { border-color: var(--c-primary-line); box-shadow: var(--sh-card); }
.learn-item.is-ing { border-color: var(--c-primary-line); background: var(--c-primary-tint-2); }

.learn-item-main { flex: 1; min-width: 0; }
.learn-item-title {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.02em;
}
.learn-item-title a:hover { color: var(--c-primary); }
.learn-item-meta { margin-top: 6px; font-size: 13.5px; color: var(--c-muted); }

.learn-item-side { display: flex; gap: 14px; align-items: center; flex-shrink: 0; }
.learn-item-stat { font-size: 13px; color: var(--c-muted); white-space: nowrap; }
.learn-item-stat b { margin-left: 6px; font-size: 15px; font-weight: 700; color: var(--c-ink); }

/* ── 시나리오 상세 퀴즈 섹션 (/learn/{idx}) ───────────────────── */


/* Q 뱃지 */
.quiz-no {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 26px;
    padding: 0 8px;
    font-size: 12.5px;
    font-weight: 800;
    color: #fff;
    background: var(--c-primary);
    border-radius: var(--r-pill);
    box-shadow: 0 0 0 3px var(--c-primary-ring);
}

/* 미응답 경고 — 응답한 문항에서는 감춘다 (.is-todo 는 user.js 가 붙인다) */


/* 시작 / 완료 안내 블록 */
.quiz-start { padding: 8px 0; text-align: center; }
.quiz-start-text { font-size: 15px; line-height: 1.7; color: var(--c-ink-2); }
.quiz-start-actions { display: flex; gap: 8px; justify-content: center; margin-top: 20px; }

/* ── 결과 확인 (/learn/{idx}/result) ─────────────────────────── */
.attempt-picker { display: flex; gap: 8px; align-items: center; }
.attempt-picker-label { font-size: 13px; font-weight: 600; color: var(--c-muted); white-space: nowrap; }

.score-box {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 40px;
    align-items: flex-end;
    padding: 26px 28px;
    margin-bottom: 24px;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
}
.score-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--c-muted); }
.score-main .score-value {
    display: block;
    margin-top: 4px;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -.03em;
    white-space: nowrap;
}
.score-main .score-value small { margin-left: 4px; font-size: 15px; font-weight: 600; color: var(--c-muted); }
.score-item strong {
    display: block;
    margin-top: 6px;
    font-size: 19px;
    font-weight: 800;
    white-space: nowrap;
}
.score-item strong small { margin-left: 3px; font-size: 12.5px; font-weight: 600; color: var(--c-muted); }
.score-item .score-date { font-size: 14px; font-weight: 700; }

.result-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 14px;
}
.result-toolbar-note { margin-left: auto; font-size: 13px; }

.toggle-group { display: inline-flex; gap: 4px; padding: 4px; background: var(--c-bg-alt); border-radius: var(--r-sm); }
.toggle {
    height: 32px;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--c-muted);
    border-radius: var(--r-xs);
}
.toggle:hover { color: var(--c-ink); }
.toggle.is-on { color: var(--c-primary); background: #fff; box-shadow: var(--sh-card); }

.result-list { display: flex; flex-direction: column; gap: 16px; }
.result-quiz {
    padding: 24px 26px;
    background: #fff;
    border: 1px solid var(--c-line);
    border-left: 3px solid var(--c-line);
    border-radius: var(--r-md);
}
/* .quiz + .quiz 의 구분선·여백은 카드형에서 불필요하다 (섹션 17 기본값 상쇄) */
.result-quiz + .result-quiz { margin-top: 0; padding-top: 24px; border-top: 1px solid var(--c-line); }
.result-quiz.is-right { border-left-color: var(--c-success); }
.result-quiz.is-wrong { border-left-color: var(--c-danger); }
.result-quiz .options { grid-template-columns: 1fr; }
.result-noanswer {
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 700;
    color: var(--c-warn);
}

/* 결과의 보기는 고르는 대상이 아니다 — 커서·호버를 끈다 */
.option.is-static { cursor: default; justify-content: space-between; }
.option.is-static:hover { border-color: var(--c-line-2); }
.option.is-static.is-answer:hover { border-color: #8CE99A; }
.option.is-static.is-wrong:hover  { border-color: #FFC9C9; }
.option-tag.is-answer-tag { color: var(--c-success); }
.option-tag.is-mine-tag   { color: var(--c-primary); }

.explain {
    padding: 14px 16px;
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--c-ink-2);
    background: var(--c-bg-alt);
    border-radius: var(--r-sm);
}
.explain b { margin-right: 6px; font-weight: 700; color: var(--c-ink); }

.result-allright {
    padding: 48px 20px;
    font-size: 16px;
    font-weight: 600;
    color: var(--c-success);
    text-align: center;
}

/* ==========================================================================
   마이페이지·학습·결과 — 반응형
   ========================================================================== */
@media (max-width: 1023px) {
    .mypage-layout { grid-template-columns: 1fr; gap: 16px; }

    /* 사이드바는 가로 배치로 접는다 — 세로로 두면 본문이 한참 밀린다 */
    .mypage-side { display: flex; align-items: center; }
    .mypage-profile { flex: 0 0 auto; border-right: 1px solid var(--c-line-2); border-bottom: 0; }
    .mypage-menu { flex: 1; flex-direction: row; }
    .mypage-menu a { flex: 1; text-align: center; }

    .score-box { gap: 18px 28px; padding: 22px; }
    .score-main .score-value { font-size: 30px; }
}

@media (max-width: 767px) {
    .panel { padding: 20px 18px; border-radius: var(--r-md); }
    .panel-actions { justify-content: stretch; }
    .panel-actions .btn { flex: 1; }
    .field--half { max-width: 100%; }

    .stat-row { gap: 8px; margin-bottom: 20px; }
    .stat-row--3 { grid-template-columns: repeat(3, 1fr); }
    .stat-row--4 { grid-template-columns: repeat(2, 1fr); }
    .stat { padding: 14px 12px; }
    .stat-label { font-size: 12px; }
    .stat-value { font-size: 20px; }
    .stat-value--date { font-size: 13px; }

    .page-actions .btn { flex: 1; }
    /* Mobile — 가운데 액션 줄은 [목록으로]가 폭을 채우고 우측 액션은 아래 줄로 내린다.
       1fr/auto/1fr 을 좁은 폭에서 유지하면 버튼이 손가락보다 작아진다 */
    .page-actions--center { grid-template-columns: 1fr; }
    .page-actions--center > .page-actions-side:empty { display: none; }
    .page-actions--center > .page-actions-side--end { order: -1; }
    .page-actions--center > .page-actions-side .btn,
    .page-actions--center > .page-actions-side > .is-disabled { flex: 1; justify-content: center; }
    .page-actions--center > .btn { justify-content: center; }
    /* 검색줄 — 좁은 폭에서도 [검색] 이 같은 줄에 남도록 기준폭을 줄인다 */
    .search-bar { flex-wrap: wrap; gap: 6px; }
    .search-bar .input { flex: 1 1 118px; max-width: none; }
    .search-bar .select { flex: 1 1 104px; min-width: 0; }
    .search-bar .btn { flex: 0 0 auto; padding-inline: 16px; }
    .select--auto { flex: 1; }

    /* 사이드바 : 프로필 위 / 메뉴 아래 */
    .mypage-side { flex-direction: column; align-items: stretch; }
    .mypage-profile { border-right: 0; border-bottom: 1px solid var(--c-line-2); }

    /* 학습 홈 리스트 */
    .learn-progress { padding: 16px 18px; }
    .learn-progress .progress-track { order: 3; flex: 1 1 100%; }
    .learn-item { padding: 16px 18px; align-items: stretch; }
    .learn-item-title { font-size: 15.5px; }
    .learn-item-meta { font-size: 13px; }
    .learn-item-side { justify-content: space-between; width: 100%; }
    .learn-item-side .btn { flex: 0 0 auto; }

    /* 퀴즈 */
    .quiz-start-actions { flex-direction: column; }

    /* 결과 */
    .score-box { gap: 14px 22px; padding: 18px; }
    .score-main { flex: 1 1 100%; }
    .score-main .score-value { font-size: 27px; }
    .score-item strong { font-size: 17px; }
    .result-toolbar-note { display: none; }
    .result-quiz { padding: 18px 16px; }
    /* 컴팩트 요약 — Mobile 은 2열 격자. 줄바꿈이 생기면 세로 구분선이 엉뚱한 자리에
       남으므로 가로선으로 바꾸고, 홀수로 남는 마지막 칸은 두 열을 다 쓴다 */
    .stat-row--compact { display: grid; grid-template-columns: 1fr 1fr; padding: 0; }
    .stat-row--compact .stat {
        min-width: 0;
        padding: 12px 16px;
        box-shadow: none;
        border-top: 1px solid var(--c-line-2);
    }
    .stat-row--compact .stat:nth-child(-n+2) { border-top: 0; }
    .stat-row--compact .stat:nth-child(odd) { border-right: 1px solid var(--c-line-2); }
    .stat-row--compact .stat:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
    .stat-row--compact .stat-value { font-size: 19px; }

    /* 2열 × 2줄 전용 — 제목 바로 아래 붙이고 칸 여백을 더 줄인다 (2026-08-19 피드백)
       ※ 제목과의 간격은 .page-head 쪽을 줄여서 만든다. :has() 미지원 브라우저는
         기본 간격(18px)이 유지될 뿐 깨지지 않는다 */
    .stat-row--2x2 { margin-top: 0; margin-bottom: 14px; }
    .page-head:has(+ .stat-row--2x2) { margin-bottom: 10px; }
    .stat-row--2x2 .stat { padding: 9px 14px; }
    .stat-row--2x2 .stat-label { font-size: 11.5px; }
    .stat-row--2x2 .stat-value { margin-top: 0; font-size: 17px; }
    .stat-row--2x2 .stat-value small { font-size: 11.5px; }
    .stat-row--2x2 .stat-value--date { font-size: 13px; }
    .stat-row--2x2 .stat-sep { margin: 0 2px; }

    /* Mobile — 제목 아래 액션은 폭을 꽉 채워 손가락으로 누르기 쉽게 */
    .page-head-actions { width: 100%; }
    .page-head-actions > .btn { flex: 1; justify-content: center; }
    .attempt-picker { flex: 1 1 100%; }
    .attempt-picker .select { flex: 1; }

    .result-table .col-act { width: auto; }
}

/* ==========================================================================
   Tablet 768 ~ 1023
   ========================================================================== */
@media (max-width: 1023px) {
    :root { --gutter: 24px; }

    .hero-inner { min-height: 520px; padding: 40px; }
    .hero-title { font-size: 38px; }
    .hero-art { width: 44%; }

    .section { padding-block: 64px; }
    .section-title { font-size: 28px; }

    /* 스텝 카드 → 가로형 1열 (모바일 시안 채택)
       뱃지 / 본문 은 좌측 세로 스택, 일러스트는 우측에서 두 행에 걸친다 */
    .steps { grid-template-columns: 1fr; gap: 16px; margin-top: 32px; }
    .step {
        display: grid;
        grid-template-areas: 'badge art' 'body art';
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 16px;
        align-items: center;
        padding: 22px 24px;
        text-align: left;
    }
    .step > .badge--step { grid-area: badge; justify-self: start; margin-bottom: 10px; }
    .step-body { grid-area: body; min-width: 0; }
    .step-art { grid-area: art; height: 88px; margin: 0; }

    /* 공지 블록 → 1열 */
    .notice-block { grid-template-columns: 1fr; gap: 20px; }
    .notice-block-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .notice-more { margin-top: 0; }

    .promo-art { right: 80px; width: 200px; }
    .promo-copy { max-width: 55%; }

    .options { grid-template-columns: 1fr; }
    .dl-row dt { width: 120px; }
}

/* ==========================================================================
   Mobile ~767
   ========================================================================== */
@media (max-width: 767px) {
    :root {
        --gutter: 20px;
        --gnb-h: 56px;
    }

    body { font-size: 15px; }

    /* GNB : 메뉴·버튼 숨기고 아이콘 2개 + 드로어 */
    .gnb-inner { gap: 10px; }
    .gnb-logo { font-size: 23px; }
    .gnb-menu { display: none; }
    .gnb-util { flex: 1; justify-content: flex-end; gap: 6px; }
    .gnb-util .btn,
    .gnb-user { display: none; }
    .gnb-icon-btn { display: inline-flex; }
    .gnb-divider { display: block; }

    /* 히어로 : 카피 위 / 일러스트 아래 */
    .hero { margin: 16px 20px 0; }
    .hero-inner {
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
        gap: 0;
        padding: 32px 24px 0;
    }
    .hero-title { font-size: 27px; line-height: 1.4; }
    .hero-desc { margin-top: 14px; font-size: 14px; line-height: 1.65; }
    .hero-actions { margin-top: 24px; }
    .hero-art { align-self: center; width: 100%; max-width: 340px; margin-top: 4px; }

    .section { padding-block: 48px; }
    .section--tight { padding-block: 36px; }
    .section-title { font-size: 24px; }

    .page-head { margin-bottom: 18px; }
    .page-title { font-size: 22px; }

    /* 스텝 카드 */
    .steps { gap: 12px; margin-top: 24px; }
    .step { padding: 18px 20px; border-radius: var(--r-md); }
    .step-title { font-size: 17px; }
    .step-desc { margin-top: 6px; font-size: 14px; }
    .step-art { height: 70px; margin-left: 12px; }

    /* 배너 */
    .promo { min-height: 0; padding: 22px 20px 24px; }
    .promo-copy { max-width: 66%; }
    .promo-title { font-size: 19px; }
    .promo-desc { margin-top: 8px; font-size: 13px; }
    .promo-art { right: 8px; width: 132px; }
    .promo-go { right: 16px; bottom: 16px; }

    /* 공지 */
    .notice-block-head { justify-content: center; position: relative; }
    .notice-block-head .section-title { text-align: center; }
    .notice-block-head .btn-round { position: absolute; right: 0; }
    .notice-more { display: none; }
    .notice-list { padding: 4px 0; }
    .notice-list a {
        flex-direction: column;
        gap: 5px;
        align-items: flex-start;
        min-height: 0;
        padding: 16px 18px;
    }
    .notice-subject { white-space: normal; font-size: 15px; line-height: 1.45; }
    .notice-list .badge--new { margin-bottom: 2px; }

    /* 푸터 : 약관 링크를 최상단으로 */
    .site-footer { padding: 0 0 36px; }
    .footer-inner { gap: 20px; }
    .footer-links {
        order: 0;                       /* 모바일은 약관 링크가 맨 위 */
        padding: 18px 0;
        margin: 0 0 4px;
        border-bottom: 1px solid #333434;
    }
    .footer-logo { font-size: 32px; }
    .footer-info { flex-direction: column; gap: 4px; margin-top: -8px; }
    .footer-info span + span::before { display: none; }

    /* 아코디언 / 퀴즈 */
    .acc + .acc { margin-top: 14px; }
    .acc-head { gap: 11px; padding: 18px 18px; }
    .acc-body { padding: 0 18px 20px; }
    .acc-icon { width: 34px; height: 34px; }
    .acc-title { font-size: 16px; }
    .acc-sub { font-size: 13px; }
    .acc-toggle { padding: 0; width: 30px; justify-content: center; }
    .acc-toggle span { display: none; }

    /* 시안(quiz_mo.png)은 모바일에서도 **라벨 왼쪽 / 값 오른쪽 2열**을 유지한다.
       세로로 쌓으면 줄 수가 두 배로 늘고 라벨 띠만 반복돼 훑기 어렵다 */
    .dl-row dt {
        width: 88px;
        padding: 12px 12px;
        font-size: 13.5px;
        line-height: 1.5;
    }
    .dl-row dd { padding: 12px 14px; font-size: 14px; }

    .meta-bar { flex-direction: column; gap: 0; padding: 6px 18px; }
    .meta-item { justify-content: space-between; padding: 11px 0; width: 100%; }
    .meta-item + .meta-item { border-top: 1px solid var(--c-line-2); }

    /* Mobile — 시안(quiz_mo.png) 순서: Q뱃지 → 질문 → [힌트보기]·배점 → 보기.
       도구 줄을 질문 위로 올려두면 무슨 문항인지 보기도 전에 버튼부터 읽게 된다 */
    .quiz-head { flex-direction: column; align-items: flex-start; gap: 10px; }
    .quiz-q { font-size: 15.5px; }
    .option { min-height: 46px; padding: 10px 14px; }
    .submit-actions { flex: 1; }
    .submit-actions .btn { flex: 1; }

    /* 표 → 카드형 (→ architecture.md 12장)
       ★ 한 덩어리 카드 안에서 옅은 구분선만 두면 **글이 어디서 끊기는지 안 보인다**
         (2026-08-19 피드백). 행마다 독립 카드로 떼고, 보조 정보는 2열 그리드로
         '라벨 위 / 값 아래' 미니 지표처럼 정리한다 */
    .table-wrap {
        overflow: visible;
        background: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .table thead { display: none; }
    .table, .table tbody { display: block; width: 100%; }
    .table tbody tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px 14px;
        padding: 16px 18px;
        background: #fff;
        border: 1px solid var(--c-line);
        border-radius: var(--r-md);
        box-shadow: var(--sh-card);
    }
    .table tbody tr + tr { margin-top: 10px; }
    /* 카드형에서는 td 배경이 아니라 카드 자체로 눌림을 표시한다 */
    .table tbody tr[data-row-href]:hover td { background: none; }
    .table tbody tr[data-row-href]:hover,
    .table tbody tr[data-row-href]:active { border-color: var(--c-primary-line); }
    .table tbody tr + tr td { border-top: 0; }
    .table td { display: block; width: auto; padding: 0; text-align: left; }
    /* 데스크톱 표에서 가운데·고정폭으로 잡아둔 열들을 카드 안에서 왼쪽 정렬로 되돌린다
       (선택자 특정도가 .notice-table .col-view 같은 규칙보다 높아야 한다) */
    .table tbody tr td.col-mid,
    .table tbody tr td.col-num,
    .table tbody tr td.col-view,
    .table tbody tr td.col-date { width: auto; text-align: left; }
    .table td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 3px;
        font-size: 12px;
        font-weight: 600;
        color: var(--c-muted);
    }
    /* 제목·관리 열은 카드 폭을 다 쓴다 */
    .table td.col-subject,
    .table td.col-act { grid-column: 1 / -1; }
    .table td.col-subject {
        font-size: 16px;
        font-weight: 700;
        line-height: 1.45;
    }
    .table td.col-subject::before { display: none; }
    /* 순번은 카드형에서 의미가 약하고 자리만 먹는다 */
    .table td.col-no { display: none; }
    /* 관리 열 — 버튼 자체가 곧 라벨이다. data-label 을 감추고 폭을 꽉 채운다
       (이 규칙은 위 td[data-label]::before 보다 **뒤에** 와야 이긴다) */
    .table td.col-act::before { display: none; }
    .table td.col-act .btn,
    .table td.col-act .is-disabled { display: flex; width: 100%; justify-content: center; }

    .toast-container { bottom: 20px; }

    /* 인증 화면 */
    .auth-wrap { padding: 32px 0 64px; }
    .auth-title { font-size: 22px; }
    .auth-lead { font-size: 14px; }
    .auth-panel { padding: 22px 18px; border-radius: var(--r-md); }
    .field-grid { grid-template-columns: 1fr; gap: 0; }
    .field-grid .field + .field { margin-top: 18px; }
    .agree-row { padding: 12px 4px; }
    .result-value { font-size: 20px; }
    .terms-body { padding: 22px 18px; font-size: 14px; }

    /* 공지 상세 */
    .notice-detail-title { font-size: 19px; }
    .notice-detail-body { padding: 22px 0 28px; font-size: 15px; line-height: 1.8; }
    /* Mobile — 이전글 / 다음글 1열 쌓기. [목록으로] 는 폭을 꽉 채운다 */
    .notice-nav { grid-template-columns: 1fr; gap: 8px; }
    .notice-nav-item--next { justify-content: flex-start; text-align: left; }
    .notice-nav-item--next .notice-nav-text { align-items: flex-start; }
    .notice-nav-item--next .notice-nav-arrow { order: -1; }
    .notice-detail-actions .btn { flex: 1; justify-content: center; }

    .only-mo { display: block; }
    .only-pc { display: none; }
    /* ⚠️ .only-mo 가 display 를 block 으로 덮어써 원형 버튼의 flex 가운데 정렬이 깨졌다
       (화살표가 좌상단에 붙었다). 자기 정렬이 필요한 요소는 되살린다 */
    .btn-round.only-mo { display: inline-flex; }

    /* 메인 공지 — PC 5건 중 뒤 2건은 Mobile 에서 감춘다 (→ MAIN_NOTICE_LIMIT_MO) */
    .notice-list > li.is-mo-hide { display: none; }
}

/* 아주 좁은 화면 */
@media (max-width: 380px) {
    .hero-title { font-size: 24px; }
    .promo-art { display: none; }
    .promo-copy { max-width: 100%; }
}

/* 모션 최소화 */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}