/* 화면 틀 CSS — 배치와 간격만 담는다 (docs/FRAME.md §1).
   색·글자·컴포넌트 모양은 전부 Seed Design 토큰과 recipe 클래스가 담당한다.
   여기서 색 값(hex/rgb)을 쓰지 않는다 — 라이트/다크는 토큰이 알아서 바뀐다. */
:root {
  --so-max-width: 640px;
  --so-gutter: var(--seed-dimension-spacing-x-global-gutter, 16px);
  --so-gap: var(--seed-dimension-spacing-y-component-default, 20px);
  --so-group-gap: 24px;
  --so-radius: var(--seed-radius-r4, 12px);
  --so-row-min: 52px;
  --so-tap: 44px;
  --so-bottom-h: 0px;
}
html, body {
  margin: 0;
  background: var(--seed-color-bg-layer-default);
  color: var(--seed-color-fg-neutral);
  font-family: var(--seed-font-family, -apple-system, BlinkMacSystemFont, "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  overflow-wrap: break-word;
}
/* ---- 상단바 + 진행선 ---- */
.so-head {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--seed-color-bg-layer-default);
}
.so-appbar {
  position: static;
  display: flex;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
  max-width: var(--so-max-width);
  margin: 0 auto;
  padding: var(--seed-safe-area-top, 0px) var(--so-gutter) 0;
  background: var(--seed-color-bg-layer-default);
}
.so-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: var(--seed-font-size-t6, 1.125rem);
  font-weight: var(--seed-font-weight-bold, 700);
  line-height: 1.3;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.so-title--center {
  text-align: center;
  font-variant-numeric: tabular-nums;
}
/* 좌·우 아이콘 자리는 제목이 가운데 서도록 같은 폭을 지킨다. */
.so-appbar-side {
  display: flex;
  flex: 0 0 var(--so-tap);
  align-items: center;
  justify-content: center;
  min-width: var(--so-tap);
}
.so-appbar-side--right { justify-content: flex-end; }
.so-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--so-tap);
  height: var(--so-tap);
  padding: 0;
  border: none;
  border-radius: var(--seed-radius-full, 999px);
  background: none;
  color: var(--seed-color-fg-neutral);
  cursor: pointer;
}
.so-icon-button svg { width: 24px; height: 24px; }
/* 얇은 진행선 (FRAME §3 학습). */
.so-progress {
  max-width: var(--so-max-width);
  height: 3px;
  margin: 0 auto;
  background: var(--seed-color-bg-neutral-weak, var(--seed-color-bg-layer-fill));
}
.so-progress-bar {
  display: block;
  width: 0;
  height: 100%;
  background: var(--seed-color-bg-brand-solid);
  transition: width var(--seed-duration-d2, 160ms) linear;
}
/* ---- 본문: 한 열 ---- */
.so-main {
  max-width: var(--so-max-width);
  margin: 0 auto;
  padding: var(--so-gap) var(--so-gutter) calc(var(--so-gap) * 2 + var(--so-bottom-h));
}
.so-screen {
  display: grid;
  gap: var(--so-group-gap);
  align-content: start;
}
.so-section {
  display: grid;
  gap: 6px;
  align-content: start;
}
.so-list {
  display: grid;
  overflow: hidden;
  background: var(--seed-color-bg-layer-fill);
  border-radius: var(--so-radius);
}
.so-list > * { position: relative; }
.so-list > * + *::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: var(--so-gutter);
  height: 1px;
  background: var(--seed-color-stroke-neutral-subtle);
}
/* ---- 숫자 줄 (FRAME §3 과목·결과) ---- */
.so-stats {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  min-width: 0;
}
.so-stat {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.so-stat-label {
  color: var(--seed-color-fg-neutral-muted);
  font-size: var(--seed-font-size-t3, 0.8125rem);
  line-height: 1.3;
  white-space: nowrap;
}
.so-stat-value {
  font-size: var(--seed-font-size-t9, 2rem);
  font-weight: var(--seed-font-weight-bold, 700);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.so-muted {
  margin: 0;
  color: var(--seed-color-fg-neutral-muted);
  font-size: var(--seed-font-size-t3, 0.8125rem);
  line-height: 1.5;
}
.so-line {
  margin: 0;
  font-size: var(--seed-font-size-t5, 1rem);
  line-height: 1.5;
}
/* ---- 목록 행 ---- */
.so-row {
  gap: 10px;
  min-height: var(--so-row-min);
  text-align: left;
  background: none;
  cursor: default;
}
button.so-row { cursor: pointer; }
button.so-row[disabled] { cursor: default; opacity: 0.6; }
.so-row .seed-list-item__content { flex: 1 1 auto; min-width: 0; }
.so-row .seed-list-item__suffix {
  display: flex;
  flex-shrink: 0;
  gap: 6px;
  align-items: center;
}
.so-row .seed-list-item__detail { color: var(--seed-color-fg-neutral-muted); }
/* 문장 행은 제목이 길다. 두 줄까지 보이고 그 뒤는 말줄임한다. */
.so-row--statement .seed-list-item__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  white-space: normal;
}
/* ---- 학습 화면 ---- */
.so-study { display: grid; gap: 16px; align-content: start; }
.so-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.so-statement {
  margin: 0;
  font-size: var(--seed-font-size-t7, 1.25rem);
  font-weight: var(--seed-font-weight-medium, 500);
  line-height: 1.75;
}
.so-answer {
  margin: 0;
  font-size: var(--seed-font-size-t9, 2rem);
  font-weight: var(--seed-font-weight-bold, 700);
  line-height: 1.2;
}
.so-explain {
  margin: 0;
  font-size: var(--seed-font-size-t5, 1rem);
  line-height: 1.65;
}
.so-result { display: grid; gap: 10px; }
/* ---- 하단 고정 행동 영역 (FRAME §2) ---- */
.so-bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 15;
  border-top: 1px solid var(--seed-color-stroke-neutral-subtle);
  background: var(--seed-color-bg-layer-default);
}
.so-bottom-inner {
  display: flex;
  gap: 8px;
  box-sizing: border-box;
  max-width: var(--so-max-width);
  margin: 0 auto;
  padding: 10px var(--so-gutter) calc(10px + env(safe-area-inset-bottom, 0px));
}
.so-bottom-inner > .seed-action-button {
  flex: 1 1 0;
  min-width: 0;
  min-height: var(--so-tap);
}
/* 판정 버튼 셋: 큰 글자 위, 작은 라벨 아래. */
.so-verdict-label {
  display: grid;
  gap: 2px;
  justify-items: center;
  line-height: 1.2;
}
.so-verdict-mark {
  font-size: var(--seed-font-size-t7, 1.25rem);
  font-weight: var(--seed-font-weight-bold, 700);
}
.so-verdict-hint {
  font-size: var(--seed-font-size-t2, 0.75rem);
  font-weight: var(--seed-font-weight-regular, 400);
  opacity: 0.85;
}
.so-bottom-inner > .so-verdict-button { min-height: 60px; }
/* ---- 접이식: <details> 가 열고 닫기를, Seed 클래스가 겉모습을 맡는다 ---- */
.so-accordion {
  overflow: hidden;
  background: var(--seed-color-bg-layer-fill);
  border-radius: var(--so-radius);
}
.so-accordion > summary {
  box-sizing: border-box;
  min-height: var(--so-tap);
  cursor: pointer;
  list-style: none;
}
.so-accordion > summary::-webkit-details-marker { display: none; }
.so-accordion[open] > summary .seed-accordion__suffixIcon { transform: rotate(180deg); }
.so-accordion-body {
  display: grid;
  gap: 10px;
  padding: 0 var(--so-gutter) 14px;
}
.so-accordion-body p { margin: 0; }
.so-accordion-body .so-list { background: none; border-radius: 0; }
/* 목록 안의 접이식 행(개념 화면의 문장)은 컨테이너 안에 들어가 있다. */
.so-list > .so-accordion { background: none; border-radius: 0; }
.so-list > .so-accordion > summary { padding: 0; }
/* ---- 설정 ---- */
.so-setting-row {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  min-height: var(--so-row-min);
  padding: 8px var(--so-gutter);
}
.so-setting-row > .seed-switch__label { min-width: 0; }
/* 스위치 알약은 줄어들지 않는다 — 플렉스 칸에서 눌리면 세로 막대가 된다. */
.so-setting-row .seed-switchmark__root { flex: 0 0 auto; }
.so-setting-row .seed-switchmark__thumb { flex: 0 0 auto; display: block; }
.so-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.so-actions > .seed-action-button { flex: 1 1 40%; min-height: var(--so-tap); }
.so-segmented { width: 100%; }
/* 세그먼트 항목은 <button> 이라 브라우저 기본 배경이 Seed 의 인디케이터를 가린다. */
.seed-segmented-control__item {
  appearance: none;
  border: none;
  background-color: var(--seed-color-bg-transparent, transparent);
  min-width: 0;
  min-height: var(--so-tap);
  padding-inline: var(--seed-dimension-x3, 12px);
}
.seed-segmented-control__item[disabled] { opacity: 0.4; cursor: not-allowed; }
/* 테마를 고정하면 브라우저 기본 위젯도 같이 따라오게 한다. */
:root[data-seed-color-mode="light-only"] { color-scheme: light; }
:root[data-seed-color-mode="dark-only"] { color-scheme: dark; }
/* 누를 수 있는 것은 44px 이상 (Apple HIG). */
.so-screen .seed-action-button,
.so-screen .seed-chip__root { min-height: var(--so-tap); }
:focus-visible {
  outline: 2px solid var(--seed-color-stroke-focus-ring, currentColor);
  outline-offset: 2px;
}
/* Seed 컴포넌트는 display 를 클래스로 정하므로 hidden 속성이 먹히지 않는다. 되돌려 준다. */
[hidden] { display: none !important; }
/* ---- 좁은 화면 보호: 그리드·플렉스 칸이 내용의 최소 폭으로 벌어지지 않게 한다 ---- */
.so-screen > *,
.so-section > *,
.so-stats > *,
.so-row > * { min-width: 0; }
.seed-list-item__title,
.seed-list-item__detail,
.seed-inline-banner__description,
.seed-callout__description { overflow-wrap: anywhere; }
@media (max-width: 360px) {
  .so-stats { gap: 14px; }
  .so-stat-value { font-size: var(--seed-font-size-t8, 1.5rem); }
}