/* 목표대학 카드·배경화면 공방을 기출싹 사이트와 같은 모양으로 맞춘다(Ez 11-06).
   사이트 토큰(src/ssak-ui.css)과 같은 값을 쓴다. 공방만의 느낌은 어두운 무대(흑백 대비)만 남긴다.
   카드·배경화면 결과물 안의 글씨체는 건드리지 않는다. */
:root, :root:not([data-theme="light"]), :root[data-theme="dark"] {
  --bg: #f3f1ec; --panel: #fffefa; --ink: #172033; --muted: #5c6370; --line: #e2ded6; --chip: #ffffff;
  --accent: #1a7a3f; --accent-ink: #ffffff;
  --ss-font: Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Segoe UI", "Noto Sans KR", sans-serif;
  --f-body: var(--ss-font);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #f3f1ec; --panel: #fffefa; --ink: #172033; --muted: #5c6370; --line: #e2ded6; --chip: #ffffff; --accent: #1a7a3f; --accent-ink: #ffffff; color-scheme: light; } }
body { font-family: var(--ss-font); font-size: 15px; letter-spacing: -0.01em; background: var(--bg); color: var(--ink); }
h1 { font-family: var(--ss-font) !important; font-weight: 800; letter-spacing: -0.02em; }
.sec h2, .crow > .lab, .controls label, .row > label { font-family: var(--ss-font); }

/* 머리줄: 다른 화면처럼 기출싹 로고 하나 */
.sitebar { display: flex; align-items: center; margin: 0 0 14px; }
.sitebar .site-logo { display: inline-flex; align-items: center; min-height: 44px; }
.sitebar .site-logo img { display: block; height: 30px; width: auto; }

/* 상자 */
.controls, .panel, .note { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 1px 2px rgba(30, 35, 44, .04); }

/* 탭: 사이트의 둥근 묶음 단추(ss-seg) */
.tabs { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-radius: 999px; background: #e9e7e1; }
.tabs button { border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 700 14px/1 var(--ss-font); padding: 0 16px; min-height: 36px; }
.tabs button[aria-selected="true"] { background: #ffffff; color: var(--accent); border-color: transparent; box-shadow: 0 1px 3px rgba(23, 32, 51, .1); }

/* 고르는 단추: 사이트 칩(ss-chip) */
.seg button, .btn, button.btn, .uni, .unichips button, .layer {
  border: 1px solid #dadce0; border-radius: 999px; background: #ffffff; color: #3c4043; font-family: var(--ss-font); font-weight: 700; }
.seg button, .btn, button.btn { min-height: 36px; padding: 0 14px; font-size: 13px; }
.uni, .layer { border-radius: 12px; }
.seg button[aria-pressed="true"], .uni[aria-pressed="true"], .unichips button[aria-pressed="true"], .layer[aria-selected="true"] {
  background: #eaf5ee; border-color: #a8d5bd; color: #145c3a; box-shadow: none; }
/* 그 화면의 주 단추 하나: 사이트 주황 */
.btn.primary, button.btn.primary { background: #ef9214; border-color: #ef9214; color: #2a1700; border-radius: 12px; min-height: 44px; padding: 0 18px; font-size: 15px; box-shadow: 0 6px 16px rgba(239, 146, 20, .22); }
.wall-cta { border-radius: 12px; }

/* 입력칸·고르기 */
select, input[type=text], input[type=number], textarea { border: 1px solid #d3cec4; border-radius: 12px; background: #ffffff; font-family: var(--ss-font); color: var(--ink); }
input[type=range], .layer input { accent-color: var(--accent); }
button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid #ef9214; outline-offset: 1px; }
.hint, .meta, header p { color: var(--muted); font-family: var(--ss-font); }
a.btn.primary.wall-cta, .wall-cta { display: flex; align-items: center; justify-content: center; padding: 0 18px; }
.sitebar { border-bottom: 0; background: transparent; padding: 4px 0; }

/* ===== 공방은 흑백(Ez 11-06). 글꼴·단추 모양·간격은 사이트 그대로, 색만 검정·흰색·회색 단계 ===== */
:root, :root:not([data-theme="light"]), :root[data-theme="dark"] {
  --bg: #0e0e0f; --panel: #18181a; --ink: #f2f2f2; --muted: #a6a6aa; --line: #2f2f33; --chip: #1f1f22;
  --accent: #f2f2f2; --accent-ink: #111111; --stage: #000000; color-scheme: dark;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0e0e0f; --panel: #18181a; --ink: #f2f2f2; --muted: #a6a6aa; --line: #2f2f33; --chip: #1f1f22; --accent: #f2f2f2; --accent-ink: #111111; color-scheme: dark; } }
body { background: var(--bg); color: var(--ink); }
.controls, .panel, .note { background: var(--panel); border-color: var(--line); box-shadow: none; }
.tabs { background: #222225; }
.tabs button { color: #a6a6aa; }
.tabs button[aria-selected="true"] { background: #f2f2f2; color: #111111; }
.seg button, .btn, button.btn, .uni, .unichips button, .layer { background: #1f1f22; border-color: #3a3a3e; color: #e6e6e8; }
.seg button[aria-pressed="true"], .uni[aria-pressed="true"], .unichips button[aria-pressed="true"], .layer[aria-selected="true"] { background: #f2f2f2; border-color: #f2f2f2; color: #111111; }
.btn.primary, button.btn.primary, .wall-cta { background: #f2f2f2; border-color: #f2f2f2; color: #111111; box-shadow: none; }
.btn.go { background: #f2f2f2; border-color: #f2f2f2; color: #111111; }
select, input[type=text], input[type=number], input[type=search], textarea { background: #1f1f22; border-color: #3a3a3e; color: #f2f2f2; }
button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible { outline: 3px solid #f2f2f2; outline-offset: 1px; }
.uni-hint { color: #f2f2f2; text-decoration: underline; }
.legend b, .note b { color: #ffffff; }
.stage { background: #000000; }

/* 머리줄: 사이트와 같은 구조(로고 · 문제/답지·채점/세트 · 내 서재/내 카드) */
.sitebar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 14px; padding: 6px 0 10px; border-bottom: 1px solid var(--line); background: transparent; }
.sitebar .site-logo { margin-right: 4px; }
.sitebar .site-tabs { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: #222225; }
.sitebar .site-tabs a, .sitebar .site-right a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: 999px; color: #a6a6aa; font: 700 14px/1 var(--ss-font); text-decoration: none; }
.sitebar .site-right { display: inline-flex; gap: 8px; margin-left: auto; }
.sitebar .site-right a { border: 1px solid #3a3a3e; color: #e6e6e8; }
.sitebar .site-right a[aria-current="page"] { background: #f2f2f2; border-color: #f2f2f2; color: #111111; }
@media (max-width: 720px) { .sitebar .site-tabs { order: 3; width: 100%; } .sitebar .site-tabs a { flex: 1; justify-content: center; } }

/* 손가락: 입력칸 눌러도 화면이 확대되지 않게 16px */
@media (pointer: coarse), (max-width: 1024px) { select, input[type=text], input[type=number], input[type=search], textarea { font-size: 16px; } }

/* 배경화면 학교 고르기: 한 칸 + 고르는 창(폰은 아래에서 올라옴) */
.uni-current { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; border-radius: 12px; font-size: 15px; }
.uni-sheet { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: rgba(0, 0, 0, .6); }
.uni-sheet-box { width: min(560px, 100%); max-height: min(80vh, 640px); display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); }
.uni-sheet-h { display: flex; align-items: center; justify-content: space-between; }
.uni-sheet-h b { font-size: 17px; }
.uni-sheet .unis { overflow-y: auto; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.uni-sheet .uni { min-height: 44px; }
@media (max-width: 720px) {
  .uni-sheet { place-items: end stretch; padding: 0; }
  .uni-sheet-box { width: 100%; max-height: 78vh; border-radius: 20px 20px 0 0; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
}
/* 흑백 바탕에서도 로고 글자가 보이게 밝은 바탕 위에 둔다 */
.sitebar .site-logo { padding: 4px 10px; border-radius: 12px; background: #f2f2f2; }
.sitebar .site-logo img { height: 26px; }

/* 70: 사이트 홈과 같은 모양(폰 390 기준). 흑백 바탕은 유지한다.
   공방 탭 = 홈 세그먼트(트랙 안 알약, 13px 700, 높이 44, 한 줄, 넘치면 가로로 밀기) */
.tabs { display: flex; flex-wrap: nowrap; width: 100%; box-sizing: border-box; gap: 2px; padding: 4px; border-radius: 999px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: 1 0 auto; min-height: 44px; padding: 0 14px; font: 700 13px/1 var(--ss-font); white-space: nowrap; }
/* 입력 칸: 라벨은 위에, 칸은 홈 입력칸(높이 44, 둥글기 12, 16px)과 같게. 폰에서는 두 칸씩 */
.me-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 12px; }
.fld input, .fld-pick { min-width: 0; }
@media (max-width: 640px) { .me-grid { grid-template-columns: 1fr 1fr; } }
.fld { display: flex; flex-direction: column; gap: 6px; min-width: 0; position: relative; }
.fld-lab, .controls .crow > .lab { font: 700 13px/1.2 var(--ss-font); color: var(--muted); letter-spacing: 0; }
.fld input, .fld-pick { width: 100%; box-sizing: border-box; min-height: 44px; padding: 0 12px; border: 1px solid #3a3a3e; border-radius: 12px; background: #1f1f22; color: var(--ink); font: 400 16px/1.2 var(--ss-font); }
.fld-pick { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; cursor: pointer; }
.fld-pick .chev { color: var(--muted); font-size: 12px; }
#targetsPick { width: auto; }
.fld .uni-hint { font-size: 12px; }
.dept-box #deptList { top: 100%; }
.controls .fld-lab, .controls .crow > .lab { font: 700 13px/1.2 var(--ss-font); color: var(--muted); }
.controls .fld { font-size: 13px; }
.fld .uni-hint { position: static; display: block; margin: 4px 0 8px; white-space: normal; }
/* 홈 실측(390): 세그먼트 단추 14px·700·높이 36·좌우 16 / 트랙 4 → 44, 머리줄 알약 12.5px·700·높이 32·좌우 8 */
.tabs button { min-height: 36px; padding: 0 16px; font: 700 14px/1 var(--ss-font); }
.sitebar .site-right a { min-height: 32px; padding: 0 10px; font: 700 12.5px/1 var(--ss-font); }
/* 홈과 같은 바깥 여백·머리줄(폰): 좌우 12, 위 8. 배경화면 입구는 홈처럼 테두리 있는 넓은 칸(둥글기 12) */
@media (max-width: 640px) {
  body { padding: 8px 12px 24px; }
  .sitebar { padding: 0 0 10px; margin-bottom: 12px; }
}
a.btn.primary.wall-cta, .wall-cta { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 12px; border: 1px solid #3a3a3e; background: #18181a; color: #f2f2f2; font: 700 13px/1 var(--ss-font); text-decoration: none; }
.controls label.fld { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; text-align: left; }
.controls .fld-lab { text-align: left; }
/* 라벨은 늘 칸 위에(폰). 줄마다 위치가 달라 보이지 않게 */
@media (max-width: 640px) { .controls .crow { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .controls .crow > .lab { width: auto; } }

/* 한국어는 어절 단위로만 줄바꿈 */
html, body { word-break: keep-all; overflow-wrap: break-word; line-break: strict; }