/* ============================================================================
   apple.css — MEC 통합 디자인 시스템 (Apple HIG 기반 · 라이트 전용)
   index.html(응시) · admin.html(관리자) · qbank.html(문제은행) 공용 단일 소스.
   색/타입/간격/모서리/그림자/모션 토큰은 **여기서만** 정의한다.
   설계 근거: docs/apple-design-system.md
   ============================================================================ */

/* ── 1. 토큰 ───────────────────────────────────────────────────────────── */
:root{
  color-scheme:light;

  /* 액센트 — Apple.com 버튼 블루. 흰 글자 대비 4.70:1 (AA).
     iOS #007AFF 는 4.02:1 로 AA 미달이라 채우기 배경에 쓰지 않는다. */
  --ap-blue:#0071e3;
  --ap-blue-hover:#005fcc;
  --ap-blue-active:#0052b0;
  --ap-blue-text:#0062c4;          /* 흰 배경 위 파란 글자 (5.9:1) */
  --ap-blue-tint:#e8f1fd;          /* tinted 버튼·선택 행 배경 */
  --ap-blue-tint-strong:#d4e6fb;
  --ap-blue-ring:rgba(0,113,227,.32);

  /* 보조 액센트 — 분류가 필요한 곳(스피킹·리포트 강조)에만 */
  --ap-indigo:#3634a3;
  --ap-indigo-hover:#2b298c;
  --ap-indigo-light:#5e5ce6;       /* 그라디언트 밝은 쪽 (배경 전용) */
  --ap-indigo-tint:#ecebfa;

  /* 중성 그레이 (iOS system grays) */
  --ap-gray-1:#8e8e93; --ap-gray-2:#aeaeb2; --ap-gray-3:#c7c7cc;
  --ap-gray-4:#d1d1d6; --ap-gray-5:#e5e5ea; --ap-gray-6:#f2f2f7;

  /* 레이블 계층 */
  --ap-label:#1d1d1f;              /* 본문·제목 (16.9:1) */
  --ap-label-2:#515154;            /* 보조 (7.6:1) */
  --ap-label-3:#6e6e73;            /* 3차 (5.3:1) */
  --ap-label-4:#86868b;            /* 장식·대형 전용 (3.5:1) */
  --ap-label-inv:#ffffff;

  /* 어두운 표면 위 계단 — 라이트 전용 팔레트에 없던 축이다.
     제품 소개(랜딩)의 먹판 섹션이 쓴다. 대비는 --ap-label(#1d1d1f) 바탕 기준. */
  --ap-on-ink:#f5f5f7;             /* 본문      15.1:1 */
  --ap-on-ink-2:#b8b8bd;           /* 보조       8.5:1 */
  --ap-on-ink-accent:#7ab8ff;      /* 액센트     8.1:1 */

  /* 표면 */
  --ap-bg:#f5f5f7;                 /* 페이지 바닥 */
  --ap-surface:#ffffff;            /* 카드 */
  --ap-surface-2:#fbfbfd;          /* 살짝 낮춘 표면 */
  --ap-fill:#f2f2f7;               /* 컨트롤 필 */
  --ap-fill-2:#e8e8ed;
  --ap-fill-3:#dcdce1;

  /* 구분선 — 그림자보다 하어라인을 우선한다 */
  --ap-separator:#d2d2d7;
  --ap-separator-soft:#e8e8ed;
  --ap-separator-hair:rgba(0,0,0,.08);

  /* 시맨틱 — 흰 글자를 얹어도, 자기 틴트 위 글자로 써도 AA 를 넘는 값.
     iOS 원색(#34c759 등)은 대비가 모자라 **채움 배경 전용**(-solid)으로만 둔다. */
  --ap-green:#1e7433;   --ap-green-tint:#e7f6eb;  --ap-green-solid:#30c14e;  --ap-green-hover:#186029;
  --ap-red:#d70015;     --ap-red-tint:#fdecec;    --ap-red-solid:#ff3b30;    --ap-red-hover:#b1000f;
  --ap-red-tint-strong:#fbdcdc;
  --ap-orange:#b25000;  --ap-orange-tint:#fff3e6; --ap-orange-solid:#ff9500;
  --ap-teal:#00778f;    --ap-teal-tint:#e2f4f8;
  --ap-purple:#8944ab;  --ap-purple-tint:#f6ecfa;
  --ap-pink:#c9155f;    --ap-pink-tint:#fdeaf1;

  /* CEFR 레벨 램프 (낮음→높음) */
  --ap-lv-prea1:#6e6e73; --ap-lv-prea1-tint:#f2f2f7;
  --ap-lv-a1:#00778f;    --ap-lv-a1-tint:#e2f4f8;
  --ap-lv-a2:#1e7433;    --ap-lv-a2-tint:#e7f6eb;
  --ap-lv-b1:#0062c4;    --ap-lv-b1-tint:#e8f1fd;
  --ap-lv-b2:#3634a3;    --ap-lv-b2-tint:#ecebfa;
  --ap-lv-c1:#8944ab;    --ap-lv-c1-tint:#f6ecfa;

  /* 크롬(내비게이션) — macOS 식 밝은 반투명 머티리얼 */
  --ap-chrome:rgba(255,255,255,.72);
  --ap-chrome-solid:#ffffff;
  --ap-chrome-dark:#1d1d1f;        /* HUD·타이머 등 반전 요소 */
  --ap-material:saturate(180%) blur(20px);

  /* 타이포 */
  --ap-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",
    "Inter","Pretendard Variable",Pretendard,"Helvetica Neue","Segoe UI Variable Text",
    "Segoe UI",Roboto,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --ap-font-mono:ui-monospace,SFMono-Regular,"SF Mono","Menlo","Cascadia Code",Consolas,monospace;

  --ap-t-large:34px;   --ap-t-large-lh:41px;   --ap-t-large-ls:-.022em;
  --ap-t-title1:28px;  --ap-t-title1-lh:34px;  --ap-t-title1-ls:-.021em;
  --ap-t-title2:22px;  --ap-t-title2-lh:28px;  --ap-t-title2-ls:-.018em;
  --ap-t-title3:20px;  --ap-t-title3-lh:25px;  --ap-t-title3-ls:-.014em;
  --ap-t-headline:17px;--ap-t-headline-lh:22px;--ap-t-headline-ls:-.012em;
  --ap-t-body:17px;    --ap-t-body-lh:25px;    --ap-t-body-ls:-.011em;
  --ap-t-callout:16px; --ap-t-callout-lh:21px; --ap-t-callout-ls:-.009em;
  --ap-t-subhead:15px; --ap-t-subhead-lh:20px; --ap-t-subhead-ls:-.006em;
  --ap-t-footnote:13px;--ap-t-footnote-lh:18px;--ap-t-footnote-ls:-.003em;
  --ap-t-caption:12px; --ap-t-caption-lh:16px; --ap-t-caption-ls:0;
  --ap-t-caption2:11px;--ap-t-caption2-lh:14px;--ap-t-caption2-ls:.006em;

  /* 간격 (4pt 그리드) */
  --ap-s1:4px; --ap-s2:8px; --ap-s3:12px; --ap-s4:16px; --ap-s5:20px;
  --ap-s6:24px; --ap-s7:32px; --ap-s8:40px; --ap-s9:48px; --ap-s10:64px;

  /* 모서리 */
  --ap-r-xs:6px; --ap-r-sm:8px; --ap-r:10px; --ap-r-md:12px;
  --ap-r-lg:16px; --ap-r-xl:20px; --ap-r-2xl:28px; --ap-r-pill:980px;

  /* 깊이 */
  --ap-shadow-xs:0 1px 2px rgba(0,0,0,.04);
  --ap-shadow-sm:0 1px 3px rgba(0,0,0,.05),0 1px 2px rgba(0,0,0,.03);
  --ap-shadow:0 2px 6px rgba(0,0,0,.05),0 8px 24px rgba(0,0,0,.04);
  --ap-shadow-md:0 4px 12px rgba(0,0,0,.07),0 16px 40px rgba(0,0,0,.06);
  --ap-shadow-lg:0 8px 24px rgba(0,0,0,.10),0 32px 72px rgba(0,0,0,.12);

  /* 모션 */
  --ap-ease:cubic-bezier(.25,.1,.25,1);
  --ap-ease-out:cubic-bezier(.16,1,.3,1);
  --ap-ease-sheet:cubic-bezier(.32,.72,0,1);
  --ap-dur-1:140ms; --ap-dur-2:240ms; --ap-dur-3:400ms;

  --ap-tap:44px;                   /* HIG 최소 터치 타깃 */
  --ap-content:min(100%,760px);
  --ap-content-wide:min(100%,1120px);
}

/* ── 2. 레거시 변수 별칭 ────────────────────────────────────────────────
   기존 규칙/인라인 style 이 옛 이름을 참조해도 애플 팔레트로 해석되게 한다.
   신규 코드는 --ap-* 만 쓸 것.                                          */
:root{
  /* 응시 화면 (base/brand/overrides) */
  --g:var(--ap-blue);       --gm:var(--ap-blue-hover); --gl:var(--ap-blue);
  --gp:var(--ap-blue-tint); --gpp:var(--ap-blue-tint); --gd:var(--ap-blue-active);
  --forest:var(--ap-blue);  --gold:var(--ap-blue);
  --cu:var(--ap-indigo);    --cul:var(--ap-indigo);    --cup:var(--ap-indigo-tint);
  --bg:var(--ap-bg);        --sur:var(--ap-surface);
  --bd:var(--ap-separator); --bdl:var(--ap-separator-soft);
  --tx:var(--ap-label);     --txm:var(--ap-label-2);
  --txl:var(--ap-label-3);  --txll:var(--ap-label-4);
  --green:var(--ap-green);  --greenp:var(--ap-green-tint);
  --red:var(--ap-red);      --redp:var(--ap-red-tint);
  --amber:var(--ap-orange); --amberp:var(--ap-orange-tint);
  --blue:var(--ap-blue-text); --bluep:var(--ap-blue-tint);
  --sh:var(--ap-shadow-sm); --shm:var(--ap-shadow);
  --navy:var(--ap-chrome-dark); --navy2:var(--ap-chrome-dark); --navy-2:var(--ap-chrome-dark);

  /* 리포트 템플릿 */
  --ground:var(--ap-bg);    --paper:var(--ap-surface); --shadow:var(--ap-shadow);
  --ink:var(--ap-label);    --ink-2:var(--ap-label-2);  --ink-3:var(--ap-label-3);
  --rule:var(--ap-separator-soft); --rule-2:var(--ap-separator);
  --teal:var(--ap-blue);    --teal-deep:var(--ap-blue-text);
  --teal-soft:var(--ap-blue-tint); --teal-softer:var(--ap-surface-2);
  --amber-soft:var(--ap-orange-tint); --track:var(--ap-fill-2);
  --sans:var(--ap-font);    --mono:var(--ap-font-mono);

  /* connecthub-theme(.ch-*) */
  --ch-bg:var(--ap-bg); --ch-card:var(--ap-surface); --ch-muted:var(--ap-surface-2);
  --ch-sunken:var(--ap-fill); --ch-fg:var(--ap-label); --ch-fg-muted:var(--ap-label-2);
  --ch-fg-subtle:var(--ap-label-3); --ch-border:var(--ap-separator-soft);
  --ch-border-strong:var(--ap-separator); --ch-hairline:var(--ap-separator-hair);
  --ch-slate-50:var(--ap-surface-2); --ch-slate-100:var(--ap-fill); --ch-slate-200:var(--ap-separator-soft);
  --ch-accent:var(--ap-blue); --ch-accent-hover:var(--ap-blue-hover);
  --ch-accent-solid:var(--ap-blue); --ch-accent-solid-hover:var(--ap-blue-hover);
  --ch-accent-tint:var(--ap-blue-tint);
  --ch-blue:var(--ap-blue); --ch-blue-hover:var(--ap-blue-hover);
  --ch-blue-100:var(--ap-blue-tint); --ch-blue-800:var(--ap-blue-text);
  --ch-navbar:var(--ap-chrome-solid); --ch-sidebar:var(--ap-surface-2);
  --ch-green-100:var(--ap-green-tint); --ch-green-800:var(--ap-green);
  --ch-amber-100:var(--ap-orange-tint); --ch-amber-800:var(--ap-orange);
  --ch-red-100:var(--ap-red-tint); --ch-red-700:var(--ap-red); --ch-red-800:var(--ap-red); --ch-red-800b:var(--ap-red);
  --ch-gray-100:var(--ap-fill); --ch-gray-700:var(--ap-label-2);
  --ch-indigo-100:var(--ap-indigo-tint); --ch-indigo-800:var(--ap-indigo);
  --ch-orange-100:var(--ap-orange-tint); --ch-orange-800:var(--ap-orange);
  --ch-purple-100:var(--ap-purple-tint); --ch-purple-800:var(--ap-purple);
  --ch-r-control:var(--ap-r); --ch-r-tag:var(--ap-r-xs); --ch-r-card:var(--ap-r-lg);
  --ch-r-pill:var(--ap-r-pill); --ch-r-btn:var(--ap-r-sm);
  --ch-shadow-card:var(--ap-shadow-sm); --ch-shadow-hover:var(--ap-shadow);
  --ch-shadow-float:var(--ap-shadow-lg);
  --ch-font-sans:var(--ap-font); --ch-font-mono:var(--ap-font-mono);
  --ch-ease:var(--ap-ease-out); --ch-dur-fast:var(--ap-dur-1); --ch-dur:var(--ap-dur-2);
}

/* ── 3. 리셋 · 기본 타이포 ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0;-webkit-tap-highlight-color:transparent}

html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--ap-font);
  font-size:var(--ap-t-subhead);
  line-height:var(--ap-t-subhead-lh);
  letter-spacing:var(--ap-t-subhead-ls);
  color:var(--ap-label);
  background:var(--ap-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-synthesis-weight:none;
  min-height:100vh;
}
h1,h2,h3,h4,h5,h6{font-weight:600;letter-spacing:-.015em;color:var(--ap-label)}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
a{color:var(--ap-blue-text);text-decoration:none}
a:hover{text-decoration:underline}
img,svg,video{display:block;max-width:100%}
table{border-collapse:collapse}
ul,ol{list-style:none}

/* 숫자는 전부 tabular — 표·점수·타이머가 흔들리지 않게 */
.ap-num,td,th,time,output{font-variant-numeric:tabular-nums}

::selection{background:var(--ap-blue-tint-strong);color:var(--ap-label)}

/* Apple 식 얇은 오버레이 스크롤바 */
*{scrollbar-width:thin;scrollbar-color:var(--ap-gray-3) transparent}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--ap-gray-3);border-radius:var(--ap-r-pill);border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--ap-gray-1);background-clip:content-box}

/* 포커스 링 — 마우스 클릭엔 안 뜨고 키보드에만 뜬다 */
:focus{outline:none}
:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px var(--ap-blue-ring);
  position:relative;z-index:1;
}

/* ── 4. 타이포 유틸 ────────────────────────────────────────────────────── */
.ap-large-title{font-size:var(--ap-t-large);line-height:var(--ap-t-large-lh);letter-spacing:var(--ap-t-large-ls);font-weight:700}
.ap-title1{font-size:var(--ap-t-title1);line-height:var(--ap-t-title1-lh);letter-spacing:var(--ap-t-title1-ls);font-weight:700}
.ap-title2{font-size:var(--ap-t-title2);line-height:var(--ap-t-title2-lh);letter-spacing:var(--ap-t-title2-ls);font-weight:600}
.ap-title3{font-size:var(--ap-t-title3);line-height:var(--ap-t-title3-lh);letter-spacing:var(--ap-t-title3-ls);font-weight:600}
.ap-headline{font-size:var(--ap-t-headline);line-height:var(--ap-t-headline-lh);letter-spacing:var(--ap-t-headline-ls);font-weight:600}
.ap-body{font-size:var(--ap-t-body);line-height:var(--ap-t-body-lh);letter-spacing:var(--ap-t-body-ls)}
.ap-callout{font-size:var(--ap-t-callout);line-height:var(--ap-t-callout-lh);letter-spacing:var(--ap-t-callout-ls)}
.ap-subhead{font-size:var(--ap-t-subhead);line-height:var(--ap-t-subhead-lh);letter-spacing:var(--ap-t-subhead-ls)}
.ap-footnote{font-size:var(--ap-t-footnote);line-height:var(--ap-t-footnote-lh);color:var(--ap-label-3)}
.ap-caption{font-size:var(--ap-t-caption);line-height:var(--ap-t-caption-lh);color:var(--ap-label-3)}
.ap-mono{font-family:var(--ap-font-mono);font-variant-numeric:tabular-nums}
.ap-muted{color:var(--ap-label-3)}

/* 섹션 아이브로우 — 대문자 소형 레이블 (Apple 의 grouped list header) */
.ap-eyebrow{
  font-size:var(--ap-t-caption2);line-height:var(--ap-t-caption2-lh);
  font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ap-label-3);
}

/* ── 5. 버튼 ───────────────────────────────────────────────────────────── */
.ap-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--ap-s2);
  min-height:36px;padding:9px 18px;border-radius:var(--ap-r-pill);
  font-size:var(--ap-t-subhead);font-weight:500;letter-spacing:-.006em;
  white-space:nowrap;border:1px solid transparent;cursor:pointer;
  transition:background var(--ap-dur-1) var(--ap-ease),
             color var(--ap-dur-1) var(--ap-ease),
             border-color var(--ap-dur-1) var(--ap-ease),
             transform var(--ap-dur-1) var(--ap-ease-out),
             box-shadow var(--ap-dur-1) var(--ap-ease);
}
.ap-btn:active{transform:scale(.97)}
.ap-btn:disabled,.ap-btn[aria-disabled="true"]{opacity:.4;cursor:not-allowed;transform:none}

.ap-btn-filled{background:var(--ap-blue);color:var(--ap-label-inv)}
.ap-btn-filled:hover:not(:disabled){background:var(--ap-blue-hover)}
.ap-btn-tinted{background:var(--ap-blue-tint);color:var(--ap-blue-text)}
.ap-btn-tinted:hover:not(:disabled){background:var(--ap-blue-tint-strong)}
.ap-btn-gray{background:var(--ap-fill);color:var(--ap-label)}
.ap-btn-gray:hover:not(:disabled){background:var(--ap-fill-2)}
.ap-btn-outline{background:var(--ap-surface);border-color:var(--ap-separator);color:var(--ap-label)}
.ap-btn-outline:hover:not(:disabled){background:var(--ap-fill);border-color:var(--ap-gray-3)}
.ap-btn-plain{background:transparent;color:var(--ap-blue-text);padding-left:var(--ap-s2);padding-right:var(--ap-s2)}
.ap-btn-plain:hover:not(:disabled){background:var(--ap-fill)}
.ap-btn-danger{background:var(--ap-red);color:var(--ap-label-inv)}
.ap-btn-danger:hover:not(:disabled){background:var(--ap-red-hover)}
.ap-btn-danger-tinted{background:var(--ap-red-tint);color:var(--ap-red)}

.ap-btn-lg{min-height:50px;padding:14px 28px;font-size:var(--ap-t-headline);font-weight:600}
.ap-btn-sm{min-height:30px;padding:6px 14px;font-size:var(--ap-t-footnote)}
.ap-btn-xs{min-height:26px;padding:4px 11px;font-size:var(--ap-t-caption)}
.ap-btn-block{display:flex;width:100%}

/* 손가락 입력에서는 최소 44px 보장 */
@media (pointer:coarse){
  .ap-btn,.ap-btn-sm,.ap-btn-xs{min-height:var(--ap-tap)}
}

/* ── 6. 폼 컨트롤 ──────────────────────────────────────────────────────── */
.ap-field{
  width:100%;min-height:44px;padding:11px 14px;
  background:var(--ap-surface);color:var(--ap-label);
  border:1px solid var(--ap-separator);border-radius:var(--ap-r);
  font-size:var(--ap-t-callout);line-height:var(--ap-t-callout-lh);
  transition:border-color var(--ap-dur-1) var(--ap-ease),box-shadow var(--ap-dur-1) var(--ap-ease);
  -webkit-appearance:none;appearance:none;
}
.ap-field::placeholder{color:var(--ap-label-4)}
.ap-field:hover:not(:disabled){border-color:var(--ap-gray-3)}
.ap-field:focus{border-color:var(--ap-blue);box-shadow:0 0 0 4px var(--ap-blue-ring)}
.ap-field:disabled{background:var(--ap-fill);color:var(--ap-label-4);cursor:not-allowed}
.ap-field[aria-invalid="true"],.ap-field.err{border-color:var(--ap-red)}
.ap-field[aria-invalid="true"]:focus,.ap-field.err:focus{box-shadow:0 0 0 4px rgba(215,0,21,.24)}
textarea.ap-field{min-height:120px;line-height:1.65;resize:vertical}

/* select 는 네이티브 화살표를 지우고 애플식 셰브런을 그린다 */
select.ap-field{
  padding-right:36px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1.5 1.75 6 6.25l4.5-4.5' stroke='%236e6e73' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;
}
.ap-label-text{
  display:block;margin-bottom:var(--ap-s2);
  font-size:var(--ap-t-footnote);font-weight:500;color:var(--ap-label-2);
}
.ap-help{font-size:var(--ap-t-caption);color:var(--ap-label-3);margin-top:var(--ap-s1)}
.ap-error{font-size:var(--ap-t-caption);color:var(--ap-red);margin-top:var(--ap-s1)}

/* 세그먼티드 컨트롤 — Apple 의 상징적 탭 */
.ap-segmented{
  display:inline-flex;padding:2px;gap:2px;
  background:var(--ap-fill);border-radius:var(--ap-r);
}
.ap-segmented button{
  flex:1;min-height:32px;padding:6px 14px;border-radius:8px;
  font-size:var(--ap-t-footnote);font-weight:500;color:var(--ap-label-2);
  transition:background var(--ap-dur-2) var(--ap-ease-out),color var(--ap-dur-1) var(--ap-ease),
             box-shadow var(--ap-dur-2) var(--ap-ease-out);
}
.ap-segmented button:hover{color:var(--ap-label)}
.ap-segmented button.active{background:var(--ap-surface);color:var(--ap-label);font-weight:600;box-shadow:var(--ap-shadow-xs)}

/* 토글 스위치 */
.ap-switch{position:relative;display:inline-block;width:51px;height:31px;flex-shrink:0}
.ap-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
.ap-switch span{
  position:absolute;inset:0;background:var(--ap-gray-4);border-radius:var(--ap-r-pill);
  transition:background var(--ap-dur-2) var(--ap-ease-out);
}
.ap-switch span::after{
  content:'';position:absolute;top:2px;left:2px;width:27px;height:27px;
  background:#fff;border-radius:50%;box-shadow:0 3px 8px rgba(0,0,0,.15),0 1px 1px rgba(0,0,0,.16);
  transition:transform var(--ap-dur-2) var(--ap-ease-out);
}
.ap-switch input:checked+span{background:var(--ap-green-solid)}
.ap-switch input:checked+span::after{transform:translateX(20px)}
.ap-switch input:focus-visible+span{box-shadow:0 0 0 4px var(--ap-blue-ring)}

/* ── 7. 표면 ───────────────────────────────────────────────────────────── */
.ap-card{
  background:var(--ap-surface);border:1px solid var(--ap-separator-soft);
  border-radius:var(--ap-r-lg);box-shadow:var(--ap-shadow-xs);
}
.ap-card-raised{background:var(--ap-surface);border-radius:var(--ap-r-lg);box-shadow:var(--ap-shadow);border:1px solid transparent}
.ap-card-pad{padding:var(--ap-s5)}

/* 그룹 리스트 — iOS 설정 앱의 inset grouped list */
.ap-list{background:var(--ap-surface);border:1px solid var(--ap-separator-soft);border-radius:var(--ap-r-md);overflow:hidden}
.ap-list-row{
  display:flex;align-items:center;gap:var(--ap-s3);
  min-height:var(--ap-tap);padding:12px 16px;
  transition:background var(--ap-dur-1) var(--ap-ease);
}
.ap-list-row+.ap-list-row{border-top:1px solid var(--ap-separator-soft)}
.ap-list-row.interactive{cursor:pointer}
.ap-list-row.interactive:hover{background:var(--ap-fill)}
.ap-list-row.interactive:active{background:var(--ap-fill-2)}

/* ── 8. 배지 · 칩 ──────────────────────────────────────────────────────── */
.ap-badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;border-radius:var(--ap-r-pill);
  font-size:var(--ap-t-caption2);line-height:16px;font-weight:600;letter-spacing:.01em;
  white-space:nowrap;
}
.ap-badge-gray{background:var(--ap-fill);color:var(--ap-label-2)}
.ap-badge-blue{background:var(--ap-blue-tint);color:var(--ap-blue-text)}
.ap-badge-green{background:var(--ap-green-tint);color:var(--ap-green)}
.ap-badge-red{background:var(--ap-red-tint);color:var(--ap-red)}
.ap-badge-orange,.ap-badge-amber{background:var(--ap-orange-tint);color:var(--ap-orange)}
.ap-badge-indigo{background:var(--ap-indigo-tint);color:var(--ap-indigo)}
.ap-badge-purple{background:var(--ap-purple-tint);color:var(--ap-purple)}
.ap-badge-teal{background:var(--ap-teal-tint);color:var(--ap-teal)}

.ap-chip{
  display:inline-flex;align-items:center;gap:6px;min-height:32px;
  padding:6px 14px;border-radius:var(--ap-r-pill);
  background:var(--ap-surface);border:1px solid var(--ap-separator);
  font-size:var(--ap-t-footnote);font-weight:500;color:var(--ap-label-2);
  cursor:pointer;transition:background var(--ap-dur-1) var(--ap-ease),border-color var(--ap-dur-1) var(--ap-ease),color var(--ap-dur-1) var(--ap-ease);
}
.ap-chip:hover{background:var(--ap-fill);border-color:var(--ap-gray-3)}
.ap-chip.active{background:var(--ap-blue);border-color:var(--ap-blue);color:var(--ap-label-inv)}
@media (pointer:coarse){.ap-chip{min-height:var(--ap-tap)}}

/* ── 9. 테이블 ─────────────────────────────────────────────────────────── */
.ap-table-wrap{
  background:var(--ap-surface);border:1px solid var(--ap-separator-soft);
  border-radius:var(--ap-r-lg);overflow:auto;box-shadow:var(--ap-shadow-xs);
}
.ap-table{width:100%;font-size:var(--ap-t-footnote)}
.ap-table thead th{
  position:sticky;top:0;z-index:1;
  background:var(--ap-surface-2);color:var(--ap-label-3);
  font-size:var(--ap-t-caption2);font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  padding:11px 14px;text-align:left;white-space:nowrap;
  border-bottom:1px solid var(--ap-separator);
}
.ap-table tbody td{
  padding:13px 14px;color:var(--ap-label-2);vertical-align:middle;
  border-bottom:1px solid var(--ap-separator-soft);
}
.ap-table tbody tr:last-child td{border-bottom:none}
.ap-table tbody tr{transition:background var(--ap-dur-1) var(--ap-ease)}
.ap-table tbody tr:hover td{background:var(--ap-surface-2)}
.ap-table tbody tr.selected td{background:var(--ap-blue-tint)}
.ap-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ── 10. 오버레이 · 시트 ───────────────────────────────────────────────── */
.ap-scrim{
  position:fixed;inset:0;z-index:900;
  background:rgba(0,0,0,.32);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:var(--ap-s5);
  animation:ap-fade var(--ap-dur-2) var(--ap-ease) both;
}
.ap-sheet{
  background:var(--ap-surface);border-radius:var(--ap-r-xl);
  box-shadow:var(--ap-shadow-lg);width:100%;max-width:560px;max-height:88vh;
  display:flex;flex-direction:column;overflow:hidden;
  animation:ap-rise var(--ap-dur-3) var(--ap-ease-sheet) both;
}
.ap-sheet-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--ap-s3);
  padding:16px 20px;border-bottom:1px solid var(--ap-separator-soft);flex-shrink:0;
}
.ap-sheet-title{font-size:var(--ap-t-headline);font-weight:600;letter-spacing:-.012em}
.ap-sheet-body{padding:20px;overflow-y:auto;flex:1}
.ap-sheet-foot{
  display:flex;gap:var(--ap-s2);justify-content:flex-end;
  padding:14px 20px;border-top:1px solid var(--ap-separator-soft);flex-shrink:0;
}
.ap-close{
  width:30px;height:30px;border-radius:50%;background:var(--ap-fill);color:var(--ap-label-2);
  display:flex;align-items:center;justify-content:center;font-size:15px;line-height:1;flex-shrink:0;
  transition:background var(--ap-dur-1) var(--ap-ease);
}
.ap-close:hover{background:var(--ap-fill-2)}

/* 좁은 화면에서는 바닥에서 올라오는 iOS 시트로 */
@media (max-width:600px){
  .ap-scrim{align-items:flex-end;padding:0}
  .ap-sheet{max-width:none;border-radius:var(--ap-r-2xl) var(--ap-r-2xl) 0 0;max-height:92vh;
    animation:ap-sheet-up var(--ap-dur-3) var(--ap-ease-sheet) both}
}

@keyframes ap-fade{from{opacity:0}to{opacity:1}}
@keyframes ap-rise{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@keyframes ap-sheet-up{from{transform:translateY(100%)}to{transform:none}}
@keyframes ap-spin{to{transform:rotate(360deg)}}

/* ── 11. 피드백 ────────────────────────────────────────────────────────── */
.ap-toast{
  position:fixed;left:50%;bottom:24px;z-index:1200;
  transform:translateX(-50%) translateY(14px);
  display:inline-flex;align-items:center;gap:var(--ap-s2);
  max-width:min(92vw,420px);padding:12px 20px;border-radius:var(--ap-r-pill);
  background:rgba(29,29,31,.88);color:#fff;
  backdrop-filter:var(--ap-material);-webkit-backdrop-filter:var(--ap-material);
  font-size:var(--ap-t-footnote);font-weight:500;box-shadow:var(--ap-shadow-lg);
  opacity:0;pointer-events:none;
  transition:opacity var(--ap-dur-2) var(--ap-ease),transform var(--ap-dur-2) var(--ap-ease-out);
}
.ap-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.ap-toast.success{background:rgba(30,116,51,.94)}
.ap-toast.error{background:rgba(215,0,21,.94)}
.ap-toast.warn{background:rgba(178,80,0,.94)}

.ap-spinner{
  width:20px;height:20px;flex-shrink:0;border-radius:50%;
  border:2px solid var(--ap-fill-2);border-top-color:var(--ap-blue);
  animation:ap-spin .7s linear infinite;
}
.ap-spinner-lg{width:36px;height:36px;border-width:3px}

.ap-progress{height:4px;background:var(--ap-fill-2);border-radius:var(--ap-r-pill);overflow:hidden}
.ap-progress>i{
  display:block;height:100%;background:var(--ap-blue);border-radius:inherit;
  transition:width var(--ap-dur-3) var(--ap-ease-out);
}

.ap-empty{text-align:center;padding:var(--ap-s9) var(--ap-s5);color:var(--ap-label-3)}
.ap-empty-icon{font-size:40px;margin-bottom:var(--ap-s3);opacity:.55}
.ap-empty-title{font-size:var(--ap-t-headline);font-weight:600;color:var(--ap-label-2);margin-bottom:var(--ap-s1)}
.ap-empty-sub{font-size:var(--ap-t-footnote)}

/* 안내 배너 (notice/callout) */
.ap-notice{
  display:flex;gap:var(--ap-s3);align-items:flex-start;
  padding:14px 16px;border-radius:var(--ap-r-md);
  background:var(--ap-fill);border:1px solid var(--ap-separator-soft);
  font-size:var(--ap-t-footnote);line-height:1.6;color:var(--ap-label-2);
}
.ap-notice-icon{flex-shrink:0;font-size:16px;line-height:1.35}
.ap-notice-info{background:var(--ap-blue-tint);border-color:transparent;color:var(--ap-blue-text)}
.ap-notice-warn{background:var(--ap-orange-tint);border-color:transparent;color:var(--ap-orange)}
.ap-notice-ok{background:var(--ap-green-tint);border-color:transparent;color:var(--ap-green)}
.ap-notice-err{background:var(--ap-red-tint);border-color:transparent;color:var(--ap-red)}

/* ── 12. 크롬 (내비게이션) ─────────────────────────────────────────────── */
.ap-chrome-bar{
  position:sticky;top:0;z-index:200;
  background:var(--ap-chrome);
  backdrop-filter:var(--ap-material);-webkit-backdrop-filter:var(--ap-material);
  border-bottom:1px solid var(--ap-separator-hair);
}
/* backdrop-filter 미지원 브라우저는 불투명 배경으로 폴백 */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .ap-chrome-bar{background:var(--ap-chrome-solid)}
}

/* ── 13. 유틸 ──────────────────────────────────────────────────────────── */
.ap-row{display:flex;align-items:center;gap:var(--ap-s2)}
.ap-between{display:flex;align-items:center;justify-content:space-between;gap:var(--ap-s3)}
.ap-stack{display:flex;flex-direction:column;gap:var(--ap-s4)}
.ap-wrap{flex-wrap:wrap}
.ap-grow{flex:1;min-width:0}
.ap-center{text-align:center}
.ap-hairline{height:1px;background:var(--ap-separator-soft);border:0;margin:var(--ap-s5) 0}
.ap-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── 14. 접근성: 모션 축소 ─────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
}

/* ── 15. 접근성: 고대비 모드 ───────────────────────────────────────────── */
@media (prefers-contrast:more){
  :root{
    --ap-label-3:#55555a;--ap-label-4:#6e6e73;
    --ap-separator:#a1a1a6;--ap-separator-soft:#c7c7cc;
  }
}