/* 과목선택도우미 화면: 메인 앱의 종이·펜·크레용 테마(storybook-theme.css)를 그대로 따릅니다. */

/* 도우미를 여는 동안에는 머리말만 남기고 대시보드를 접습니다. */
body.helper-open #app > :not(.app-topbar):not(#helperView) { display: none !important; }

#helperView {
  --sh-pen: var(--sb-pen, #3a3f62);
  --sh-ink: var(--ink, #2c3566);
  --sh-muted: var(--muted, #6b6f86);
  --sh-paper: var(--sb-paper, #fffdf8);
  --sh-dash: #e2d9c4;
  --sh-wobble: var(--sb-wobble, 14px 6px 12px 7px / 7px 12px 6px 14px);
  --sh-wobble-sm: var(--sb-wobble-sm, 255px 15px 225px 15px / 15px 225px 15px 255px);
  --sh-stamp: 10px 4px 9px 5px / 5px 9px 4px 10px;
  margin-top: 26px;
  color: var(--sh-ink);
  font-size: calc(16px * var(--reading-scale, 1));
  line-height: 1.6;
  outline: none;
}
#helperView button { font: inherit; }

/* ── 제목 ── */
#helperView .sh-head { margin: 0 0 18px; }
#helperView .sh-eyebrow { margin: 0; color: var(--sb-red, #e0533d); font-size: calc(14px * var(--reading-scale, 1)); font-weight: 800; }
#helperView .sh-head h2 { display: inline-block; margin: 2px 0 0; font-size: calc(30px * var(--reading-scale, 1)); line-height: 1.25; font-weight: 800; letter-spacing: -.045em; }
#helperView .sh-head h2::after {
  content: ""; display: block; width: 100%; height: 10px; margin-top: 2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M3 7 C30 11 60 3 90 7 S112 8 117 4' fill='none' stroke='%23f6c24a' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") left center / 100% 100% no-repeat;
}
#helperView .sh-loading { padding: 40px 0; color: var(--sh-muted); font-weight: 700; text-align: center; }

/* ── 메뉴 탭: 학년 탭과 같은 색 포스트잇 ── */
#helperView .sh-toolbar { display: flex; flex-wrap: wrap; gap: 16px; align-items: end; justify-content: space-between; }
#helperView .sh-tabs { display: flex; gap: 12px; flex: 1 1 420px; }
#helperView .sh-tab {
  flex: 1 1 0; min-height: 64px; padding: 10px 18px; text-align: left; color: #5d6180; cursor: pointer;
  border: 2px solid transparent; border-radius: 6px 12px 8px 14px / 12px 6px 14px 8px;
  box-shadow: 2px 3px 0 rgba(44, 53, 102, .12); transform: rotate(-.6deg); transition: transform .15s ease, box-shadow .15s ease;
}
#helperView .sh-tab strong { display: block; font-size: calc(18px * var(--reading-scale, 1)); font-weight: 800; line-height: 1.3; }
#helperView .sh-tab span { display: block; font-size: calc(13px * var(--reading-scale, 1)); font-weight: 600; opacity: .85; }
#helperView .sh-tab--career { background: #fff1c2; }
#helperView .sh-tab--subject { background: #dff1ec; transform: rotate(.5deg); }
#helperView .sh-tab:hover { color: var(--sh-ink); transform: translateY(-2px) rotate(-.6deg); }
#helperView .sh-tab[aria-pressed="true"] { color: var(--sh-ink); border-color: var(--sh-pen); box-shadow: 3px 4px 0 var(--sh-pen); transform: translateY(-3px) rotate(-1deg); }
#helperView .sh-tab--career[aria-pressed="true"] { background: #ffe79a; }
#helperView .sh-tab--subject[aria-pressed="true"] { background: #bfe6dc; }
#helperView .sh-year { display: flex; gap: 10px; align-items: center; }
#helperView .sh-year label { margin: 0; white-space: nowrap; }
#helperView .sh-year select { width: auto; min-width: 128px; font-weight: 700; }

/* ── 관심 학과 띠: 테이프 붙인 종이 ── */
#helperView .sh-context {
  position: relative; display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; justify-content: space-between;
  margin-top: 22px; padding: 16px 22px; background: var(--sh-paper); border: 2px dashed #d7cdb5; border-radius: var(--sh-wobble);
}
#helperView .sh-context.is-set { border-style: solid; border-color: var(--sh-pen); box-shadow: var(--sb-lift, 3px 4px 0 rgba(44, 53, 102, .14)); }
#helperView .sh-context.is-set::before {
  content: ""; position: absolute; top: -12px; left: 26px; width: 84px; height: 22px; pointer-events: none;
  background: rgba(242, 184, 75, .6); rotate: -5deg; clip-path: polygon(3% 0, 97% 6%, 100% 50%, 96% 100%, 2% 94%, 0 50%);
}
#helperView .sh-context__text { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; min-width: 0; }
#helperView .sh-context__text span { color: var(--sh-muted); font-size: calc(14px * var(--reading-scale, 1)); font-weight: 700; }
#helperView .sh-context__text strong { font-size: calc(20px * var(--reading-scale, 1)); font-weight: 800; letter-spacing: -.03em; }
#helperView .sh-context__text em { color: var(--sh-muted); font-style: normal; font-size: calc(14px * var(--reading-scale, 1)); }
#helperView .sh-context__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
#helperView .sh-context__actions .btn,
#helperView .sh-context__all { min-height: 40px; padding: 4px 16px; }
#helperView .sh-link { padding: 6px 4px; color: var(--sh-muted); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; cursor: pointer; }
#helperView .sh-link:hover { color: var(--sb-red, #e0533d); }
#helperView #helperStatus { margin-top: 14px; }
#helperView .sh-panel { margin-top: 24px; }

/* ── 검색과 계열 칩 ── */
#helperView .sh-search input { min-height: 52px; padding: 0 16px; font-size: calc(17px * var(--reading-scale, 1)); }
#helperView .sh-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
#helperView .sh-chip {
  min-height: 38px; padding: 4px 14px; color: #4b4f6e; font-size: calc(15px * var(--reading-scale, 1)); font-weight: 700; cursor: pointer;
  background: #fff; border: 2px solid #d7cdb5; border-radius: var(--sh-stamp);
}
#helperView .sh-chip:hover { border-color: var(--sh-pen); background: #fff8e6; }
#helperView .sh-chip[aria-pressed="true"] { color: #fff; background: var(--sh-pen); border-color: var(--sh-pen); }
#helperView .sh-track {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px 24px; margin-top: 18px; padding: 18px 22px;
  background: #fff7df; border: 2px dashed #e2d3a6; border-radius: 12px;
}
#helperView .sh-track h3 { margin: 0 0 4px; font-size: calc(20px * var(--reading-scale, 1)); font-weight: 800; }
#helperView .sh-track p { margin: 0; color: #4b4f6e; }
#helperView .sh-track__topics { display: flex; flex-wrap: wrap; gap: 6px; align-content: start; }
#helperView .sh-track__topics span { width: 100%; color: var(--sh-muted); font-size: calc(13px * var(--reading-scale, 1)); font-weight: 700; }
#helperView .sh-track__topics i { padding: 2px 10px; font-style: normal; font-size: calc(14px * var(--reading-scale, 1)); background: #fff; border: 1.5px solid #e8c56a; border-radius: var(--sh-stamp); }
#helperView .sh-count { margin: 20px 0 10px; color: var(--sh-muted); font-size: calc(14px * var(--reading-scale, 1)); font-weight: 700; }
#helperView .sh-empty { margin: 24px 0; padding: 26px; color: var(--sh-muted); text-align: center; background: #fffaf0; border: 2px dashed var(--sh-dash); border-radius: 12px; }
#helperView .sh-empty--action { display: grid; justify-items: center; gap: 6px; }
#helperView .sh-empty--action strong { color: var(--sh-ink); font-size: calc(19px * var(--reading-scale, 1)); }
#helperView .sh-empty--action .btn { margin-top: 10px; }

/* ── 학과 카드 ── */
#helperView .sh-majors { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; }
#helperView .sh-major {
  display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 14px; text-align: left; color: var(--sh-ink); cursor: pointer;
  background: var(--sh-paper); border: 2px solid var(--sh-pen); border-radius: var(--sh-wobble); box-shadow: var(--sb-lift, 3px 4px 0 rgba(44, 53, 102, .14));
  transition: transform .15s ease, box-shadow .15s ease;
}
#helperView .sh-major:nth-child(3n + 2) { border-radius: 8px 14px 7px 12px / 12px 7px 14px 8px; }
#helperView .sh-major:hover { transform: translate(-1px, -2px); box-shadow: 4px 6px 0 rgba(44, 53, 102, .2); }
#helperView .sh-major.is-chosen { background: #fff7df; box-shadow: 4px 5px 0 var(--sb-yellow, #f6c24a); }
#helperView .sh-major__track { color: var(--sb-green, #2f8f55); font-size: calc(13px * var(--reading-scale, 1)); font-weight: 800; }
#helperView .sh-major strong { font-size: calc(19px * var(--reading-scale, 1)); font-weight: 800; letter-spacing: -.035em; line-height: 1.35; }
#helperView .sh-major__hint { color: var(--sb-red, #e0533d); font-size: calc(13px * var(--reading-scale, 1)); font-weight: 700; }
#helperView .sh-major__intro {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  color: #555a76; font-size: calc(14px * var(--reading-scale, 1)); line-height: 1.55;
}
#helperView .sh-major__levels { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 8px; border-top: 1.5px dashed #ece4d0; }

/* ── 등급 도장(핵심·권장·추천)과 과목 유형 배지 ── */
.sh-level {
  display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 9px; white-space: nowrap;
  font-size: calc(13px * var(--reading-scale, 1)); font-weight: 800; line-height: 1.2;
  border: 2px solid var(--sb-pen, #3a3f62); border-radius: 10px 4px 9px 5px / 5px 9px 4px 10px;
}
.sh-level b { font-weight: 800; }
.sh-level--core { color: #fff; background: var(--sb-red, #e0533d); }
.sh-level--recommended { color: var(--sb-pen, #3a3f62); background: var(--sb-yellow, #f6c24a); }
.sh-level--suggested { color: #1f5f59; background: #e3f4f1; border-color: #6fbfb5; }
.sh-level--advanced { color: #4a3f8c; background: #f0edfb; border-color: #a99ce0; }
.sh-type {
  display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; white-space: nowrap;
  font-size: calc(12px * var(--reading-scale, 1)); font-weight: 700; line-height: 1.2;
  border: 1.5px solid currentColor; border-radius: 10px 4px 9px 5px / 5px 9px 4px 10px;
}
.sh-type--common { color: #1f5a8c; background: #e8f2fb; }
.sh-type--general { color: #24603d; background: #eaf6ec; }
.sh-type--career { color: #8a5a10; background: #fff3cf; }
.sh-type--fusion { color: #4a3f8c; background: #f0edfb; }
.sh-type--other { color: #5d6180; background: #f3f1ea; }
.sh-offer { color: #4b4f6e; font-size: calc(13px * var(--reading-scale, 1)); font-weight: 700; white-space: nowrap; }
.sh-offer::before { content: "우리 학교 "; color: var(--muted, #6b6f86); font-weight: 600; }
.sh-offer--fixed { color: #24603d; }
.sh-offer--none { color: #9a2e1e; }

/* ── 학과 상세 ── */
#helperView .sh-back { padding: 6px 2px; color: var(--sh-muted); font-weight: 800; background: none; border: 0; cursor: pointer; }
#helperView .sh-back:hover { color: var(--sb-red, #e0533d); }
#helperView .sh-detail { margin-top: 10px; }
#helperView .sh-detail__head {
  display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: flex-end; justify-content: space-between;
  padding: 22px 26px; background: var(--sh-paper); border: 2px solid var(--sh-pen); border-radius: var(--sh-wobble); box-shadow: var(--sb-lift, 3px 4px 0 rgba(44, 53, 102, .14));
}
#helperView .sh-detail__head > div:first-child { flex: 1 1 420px; min-width: 0; }
#helperView .sh-detail__track { color: var(--sb-green, #2f8f55); font-size: calc(14px * var(--reading-scale, 1)); font-weight: 800; }
#helperView .sh-detail__head h3 { margin: 2px 0 6px; font-size: calc(28px * var(--reading-scale, 1)); line-height: 1.25; font-weight: 800; letter-spacing: -.045em; }
#helperView .sh-detail__head p { margin: 0; color: #4b4f6e; }
#helperView .sh-detail__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
#helperView .sh-chosen { padding: 6px 14px; color: #24603d; font-weight: 800; background: #eaf6ec; border: 2px solid #8fc79d; border-radius: var(--sh-stamp); }

#helperView .sh-recs {
  position: relative; margin-top: 30px; padding: 22px 26px 18px; background: var(--sh-paper);
  border: 2px solid var(--sh-pen); border-radius: 8px 14px 7px 12px / 12px 7px 14px 8px; box-shadow: var(--sb-lift, 3px 4px 0 rgba(44, 53, 102, .14));
}
#helperView .sh-recs::before,
#helperView .sh-recs::after {
  content: ""; position: absolute; top: -13px; width: 84px; height: 24px; pointer-events: none;
  clip-path: polygon(3% 0, 97% 6%, 100% 50%, 96% 100%, 2% 94%, 0 50%);
}
#helperView .sh-recs::before { left: 22px; background: rgba(242, 184, 75, .6); rotate: -6deg; }
#helperView .sh-recs::after { right: 22px; background: rgba(79, 179, 169, .45); rotate: 5deg; }
#helperView .sh-recs__head h4 { margin: 0; font-size: calc(21px * var(--reading-scale, 1)); font-weight: 800; letter-spacing: -.035em; }
#helperView .sh-recs__head p { margin: 2px 0 0; color: var(--sh-muted); font-size: calc(14px * var(--reading-scale, 1)); }
#helperView .sh-recs__group { margin-top: 18px; padding-top: 16px; border-top: 2px dashed var(--sh-dash); }
#helperView .sh-recs__label { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-bottom: 12px; }
#helperView .sh-recs__label .sh-level { min-height: 30px; padding: 0 14px; font-size: calc(16px * var(--reading-scale, 1)); }
#helperView .sh-recs__label span:not(.sh-level) { color: var(--sh-muted); font-size: calc(14px * var(--reading-scale, 1)); font-weight: 700; }
#helperView .sh-recs__label b { margin-left: auto; color: var(--sh-ink); font-size: calc(14px * var(--reading-scale, 1)); }
#helperView .sh-recs__none { margin: 0; color: var(--sh-muted); font-size: calc(14px * var(--reading-scale, 1)); }
#helperView .sh-subjects { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 10px; }
#helperView .sh-subject {
  display: grid; gap: 6px; padding: 10px 14px; text-align: left; color: var(--sh-ink); cursor: pointer;
  background: #fff; border: 2px solid #d7cdb5; border-radius: 10px 6px 9px 7px / 7px 9px 6px 10px;
}
#helperView .sh-subject:hover { border-color: var(--sh-pen); background: #fffaf0; box-shadow: 2px 3px 0 rgba(44, 53, 102, .14); }
#helperView .sh-subject__name { font-size: calc(16px * var(--reading-scale, 1)); font-weight: 800; line-height: 1.35; }
#helperView .sh-subject__meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
#helperView .sh-recs__group--core .sh-subject { border-color: #e88b7a; }
#helperView .sh-recs__group--recommended .sh-subject { border-color: #e8c56a; }
#helperView .sh-footnote { margin: 18px 0 0; padding-top: 12px; color: var(--sh-muted); font-size: calc(13px * var(--reading-scale, 1)); border-top: 2px dashed var(--sh-dash); }

#helperView .sh-about { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 26px; }
#helperView .sh-about__card { padding: 16px 20px; background: #fff; border: 2px solid #d7cdb5; border-radius: 10px 6px 9px 7px / 7px 9px 6px 10px; }
#helperView .sh-about__card h4 { margin: 0 0 8px; font-size: calc(17px * var(--reading-scale, 1)); font-weight: 800; }
.sh-list { margin: 0; padding-left: 1.15em; }
.sh-list li { margin: 2px 0; }
.sh-list li::marker { color: var(--sb-red, #e0533d); }
#helperView .sh-depts { margin-top: 26px; }
#helperView .sh-depts > h4 { margin: 0 0 10px; font-size: calc(19px * var(--reading-scale, 1)); font-weight: 800; }
#helperView .sh-dept { margin-top: 10px; background: var(--sh-paper); border: 2px solid var(--sh-pen); border-radius: 10px 6px 9px 7px / 7px 9px 6px 10px; overflow: hidden; }
#helperView .sh-dept > summary { display: grid; gap: 2px; padding: 14px 18px; cursor: pointer; list-style: none; }
#helperView .sh-dept > summary::-webkit-details-marker { display: none; }
#helperView .sh-dept > summary strong { font-size: calc(17px * var(--reading-scale, 1)); font-weight: 800; }
#helperView .sh-dept > summary strong::after { content: " ›"; color: var(--sb-red, #e0533d); }
#helperView .sh-dept[open] > summary { background: #fff4d8; }
#helperView .sh-dept[open] > summary strong::after { content: " ⌄"; }
#helperView .sh-dept > summary span { color: #555a76; font-size: calc(14px * var(--reading-scale, 1)); }
#helperView .sh-dept__body { padding: 4px 20px 18px; border-top: 2px dashed #ece4d0; }
#helperView .sh-dept__body h5 { margin: 14px 0 4px; font-size: calc(15px * var(--reading-scale, 1)); font-weight: 800; }
#helperView .sh-inline { margin: 0; color: #4b4f6e; font-size: calc(15px * var(--reading-scale, 1)); }

/* ── 과목 찾기 ── */
#helperView .sh-segment { display: inline-flex; gap: 0; padding: 4px; background: #fff; border: 2px solid var(--sh-pen); border-radius: var(--sh-wobble-sm); }
#helperView .sh-segment button { min-height: 42px; padding: 4px 18px; color: #5d6180; font-weight: 800; background: none; border: 0; border-radius: 999px; cursor: pointer; }
#helperView .sh-segment button[aria-pressed="true"] { color: #fff; background: var(--sh-pen); }
#helperView .sh-filters { display: grid; grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 18px; align-items: end; }
#helperView .sh-filters label { margin-bottom: 4px; }
#helperView .sh-result-group { margin-top: 26px; }
#helperView .sh-result-group h4 { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 10px; font-size: calc(18px * var(--reading-scale, 1)); font-weight: 800; }
#helperView .sh-result-group h4 > span:not(.sh-level) { color: var(--sh-muted); font-size: calc(14px * var(--reading-scale, 1)); font-weight: 700; }
#helperView .sh-result-group h4 > b { color: var(--sh-muted); font-size: calc(14px * var(--reading-scale, 1)); }
#helperView .sh-rows { background: var(--sh-paper); border: 2px solid var(--sh-pen); border-radius: var(--sh-wobble); box-shadow: var(--sb-lift, 3px 4px 0 rgba(44, 53, 102, .14)); overflow: hidden; }
/* 모든 줄과 머리줄이 같은 칸 너비를 써서 과목명·유형·소개·학점·개설 학기가 세로로 맞습니다. */
#helperView .sh-rows {
  --sh-s: var(--reading-scale, 1);
  --sh-cols: calc(210px * var(--sh-s)) calc(80px * var(--sh-s)) minmax(0, 1fr) calc(64px * var(--sh-s)) calc(116px * var(--sh-s)) 14px;
}
#helperView .sh-rows--level { --sh-cols: calc(52px * var(--sh-s)) calc(210px * var(--sh-s)) calc(80px * var(--sh-s)) minmax(0, 1fr) calc(64px * var(--sh-s)) calc(116px * var(--sh-s)) 14px; }
#helperView .sh-rows__head,
#helperView .sh-row { display: grid; grid-template-columns: var(--sh-cols); column-gap: 16px; align-items: center; padding: 0 18px; }
#helperView .sh-rows__head {
  padding-top: 9px; padding-bottom: 8px; color: var(--sh-muted); font-size: calc(12.5px * var(--reading-scale, 1)); font-weight: 800;
  background: #f8f2e3; border-bottom: 2px solid #e2d9c4;
}
#helperView .sh-row {
  row-gap: 4px; width: 100%; padding-top: 13px; padding-bottom: 13px; text-align: left; color: var(--sh-ink); cursor: pointer; background: none; border: 0;
}
#helperView .sh-row + .sh-row { border-top: 1.5px dashed #ece4d0; }
#helperView .sh-row:hover { background: #fffaf0; }
#helperView .sh-row__name { min-width: 0; font-size: calc(17px * var(--reading-scale, 1)); font-weight: 800; letter-spacing: -.03em; line-height: 1.35; }
#helperView .sh-row__track { display: block; margin-top: 2px; color: #4a3f8c; font-size: calc(12px * var(--reading-scale, 1)); font-weight: 700; letter-spacing: 0; }
#helperView .sh-row__level, #helperView .sh-row__type { display: flex; min-width: 0; }
#helperView .sh-row__summary { min-width: 0; color: #555a76; font-size: calc(14px * var(--reading-scale, 1)); line-height: 1.5; }
#helperView .sh-row__credits { color: #4b4f6e; font-size: calc(13px * var(--reading-scale, 1)); font-weight: 700; white-space: nowrap; }
#helperView .sh-row__offer .sh-offer { white-space: normal; }
#helperView .sh-row__offer .sh-offer::before { content: none; }
#helperView .sh-row__go { color: var(--sb-red, #e0533d); font-size: calc(22px * var(--reading-scale, 1)); line-height: 1; text-align: right; }

/* ── 과목정보 창 ── */
/* 긴 과목정보는 창 안에서 스크롤합니다. 머리말은 그대로 두고 본문만 움직입니다. */
#helperSubjectModal .modal-panel { display: flex; flex-direction: column; width: min(960px, 100%); max-height: calc(100dvh - 32px); }
#helperSubjectModal .modal-head { flex: 0 0 auto; }
body.sb-theme #helperSubjectModal .modal-body { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; border-radius: 0 0 14px 6px; }
#helperSubjectModal .modal-head > strong { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: calc(22px * var(--reading-scale, 1)); letter-spacing: -.035em; }
#helperSubjectModal .modal-body { color: var(--ink, #2c3566); font-size: calc(16px * var(--reading-scale, 1)); line-height: 1.65; }
#helperSubjectModal .sh-dialog-tabs { display: inline-flex; gap: 0; padding: 4px; background: #fff; border: 2px solid var(--sb-pen, #3a3f62); border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; }
#helperSubjectModal .sh-dialog-tabs button { min-height: 38px; padding: 2px 18px; color: #5d6180; font-weight: 800; background: none; border: 0; border-radius: 999px; cursor: pointer; }
#helperSubjectModal .sh-dialog-tabs button[aria-pressed="true"] { color: #fff; background: var(--sb-pen, #3a3f62); }
#helperSubjectModal .sh-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 18px 0 0; }
#helperSubjectModal .sh-facts div { padding: 10px 14px; background: #fff; border: 2px solid #d7cdb5; border-radius: 10px 6px 9px 7px / 7px 9px 6px 10px; }
#helperSubjectModal .sh-facts dt { color: var(--muted, #6b6f86); font-size: calc(13px * var(--reading-scale, 1)); font-weight: 700; }
#helperSubjectModal .sh-facts dd { margin: 2px 0 0; font-size: calc(17px * var(--reading-scale, 1)); font-weight: 800; }
#helperSubjectModal .sh-summary { margin: 16px 0 0; padding: 14px 18px; background: #fff7df; border-left: 5px solid var(--sb-yellow, #f6c24a); border-radius: 4px 10px 10px 4px; }
#helperSubjectModal .sh-section { margin-top: 24px; }
#helperSubjectModal .sh-section > h4 { margin: 0 0 10px; font-size: calc(19px * var(--reading-scale, 1)); font-weight: 800; letter-spacing: -.03em; }
#helperSubjectModal .sh-muted { margin: 0; color: var(--muted, #6b6f86); }
#helperSubjectModal .sh-note.sh-note--special { margin-top: 12px; color: #4a3f8c; background: #f3f0fc; border-color: #b9aee3; }
#helperSubjectModal .sh-note { margin: 0; padding: 12px 16px; color: #6b4e16; background: #fff6d6; border: 2px dashed #e0b85c; border-radius: 10px; }
#helperSubjectModal .sh-offers { display: flex; flex-wrap: wrap; gap: 10px; }
#helperSubjectModal .sh-offers__item { display: grid; padding: 10px 16px; background: #fff; border: 2px solid #8fc79d; border-radius: 10px 6px 9px 7px / 7px 9px 6px 10px; }
#helperSubjectModal .sh-offers__item strong { font-weight: 800; }
#helperSubjectModal .sh-offers__item span { color: #4b4f6e; font-size: calc(14px * var(--reading-scale, 1)); }
#helperSubjectModal .sh-learn__legend { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin: 0 0 12px; color: var(--muted, #6b6f86); font-size: calc(13px * var(--reading-scale, 1)); }
#helperSubjectModal .sh-learn__legend > span:not(.sh-learn__label) { margin-right: 6px; }
#helperSubjectModal .sh-learn__label {
  display: inline-block; padding: 1px 9px; color: var(--sb-pen, #3a3f62); font-weight: 800;
  border: 1.5px solid currentColor; border-radius: 10px 4px 9px 5px / 5px 9px 4px 10px;
}
#helperSubjectModal .sh-learn__label--knowledge { color: #1f5a8c; background: #e8f2fb; }
#helperSubjectModal .sh-learn__label--skills { color: #8a5a10; background: #fff3cf; }
#helperSubjectModal .sh-learn__label--values { color: #24603d; background: #eaf6ec; }
#helperSubjectModal .sh-learn__kind { display: inline-block; margin-left: 6px; color: var(--muted, #6b6f86); font-size: calc(13px * var(--reading-scale, 1)); }
#helperSubjectModal .sh-learn__area { margin: 12px 0 0; padding-bottom: 2px; color: var(--ink, #2c3566); font-size: calc(15px * var(--reading-scale, 1)); font-weight: 800; line-height: 1.45; border-bottom: 1.5px dashed #e2d9c4; }
#helperSubjectModal .sh-learn__area + .sh-list { margin-top: 4px; }
#helperSubjectModal .sh-learn__q { margin: 10px 0 0; color: #1f5a8c; font-size: calc(14px * var(--reading-scale, 1)); font-weight: 700; line-height: 1.45; }
#helperSubjectModal .sh-learn__q::before { content: "Q. "; font-weight: 800; }
#helperSubjectModal .sh-learn__q + .sh-list { margin-top: 4px; }
#helperSubjectModal .sh-learn { margin-top: 12px; padding: 14px 18px; background: #fff; border: 2px solid #d7cdb5; border-radius: 10px 6px 9px 7px / 7px 9px 6px 10px; }
#helperSubjectModal .sh-learn h5 { margin: 0 0 8px; font-size: calc(17px * var(--reading-scale, 1)); font-weight: 800; }
#helperSubjectModal .sh-learn__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 12px 22px; }
#helperSubjectModal .sh-learn__col { min-width: 0; }
#helperSubjectModal .sh-learn__col .sh-list { margin-top: 6px; font-size: calc(15px * var(--reading-scale, 1)); }
#helperSubjectModal .sh-ideas { margin-top: 14px; padding: 10px 16px; background: #f1effa; border: 2px dashed #b9aee3; border-radius: 10px; }
#helperSubjectModal .sh-ideas summary { color: #4a3f8c; font-weight: 800; cursor: pointer; }
#helperSubjectModal .sh-ideas .sh-list { margin-top: 8px; font-size: calc(15px * var(--reading-scale, 1)); }
#helperSubjectModal .sh-jobs { margin: 0; color: #4b4f6e; }
#helperSubjectModal .sh-empty { margin: 16px 0; padding: 20px; color: var(--muted, #6b6f86); text-align: center; background: #fffaf0; border: 2px dashed #e2d9c4; border-radius: 12px; }
#helperSubjectModal #helperEvidence { margin-top: 16px; }
#helperSubjectModal #helperEvidence > .sh-list { margin: 10px 0; }
#helperSubjectModal .sh-evidence { display: grid; gap: 10px; margin-top: 12px; }
#helperSubjectModal .sh-evidence__item { padding: 12px 16px; background: #fff; border: 2px solid #d7cdb5; border-radius: 10px 6px 9px 7px / 7px 9px 6px 10px; }
#helperSubjectModal .sh-evidence__item header { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; }
#helperSubjectModal .sh-evidence__item header strong { display: block; font-weight: 800; }
#helperSubjectModal .sh-evidence__item header span:not(.sh-level) { color: #4b4f6e; font-size: calc(14px * var(--reading-scale, 1)); }
#helperSubjectModal .sh-evidence__item details { margin-top: 6px; font-size: calc(14px * var(--reading-scale, 1)); }
#helperSubjectModal .sh-evidence__item summary { color: var(--muted, #6b6f86); font-weight: 700; cursor: pointer; }
#helperSubjectModal .sh-evidence__item details p { margin: 6px 0 0; white-space: pre-line; }
#helperSubjectModal .sh-evidence__note { margin: 6px 0 0; color: #6b4e16; font-size: calc(14px * var(--reading-scale, 1)); }

/* ── 좁은 화면 ── */
@media (max-width: 1000px) {
  #helperView .sh-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #helperView .sh-filters__search { grid-column: 1 / -1; }
  #helperView .sh-about { grid-template-columns: minmax(0, 1fr); }
  /* 소개는 둘째 줄로 내리고 나머지 칸은 그대로 맞춥니다. */
  #helperView .sh-rows { --sh-cols: minmax(0, 1fr) calc(80px * var(--sh-s)) calc(64px * var(--sh-s)) calc(110px * var(--sh-s)) 14px; }
  #helperView .sh-rows--level { --sh-cols: calc(52px * var(--sh-s)) minmax(0, 1fr) calc(80px * var(--sh-s)) calc(64px * var(--sh-s)) calc(110px * var(--sh-s)) 14px; }
  #helperView .sh-rows__head { display: none; }
  #helperView .sh-row__summary { grid-column: 1 / -1; grid-row: 2; }
  #helperView .sh-rows--level .sh-row__summary { grid-column: 2 / -1; }
  #helperView .sh-row__offer .sh-offer::before { content: "우리 학교 "; }
}
@media (max-width: 680px) {
  #helperView { margin-top: 18px; }
  #helperView .sh-head h2 { font-size: calc(25px * var(--reading-scale, 1)); }
  #helperView .sh-tabs { flex-basis: 100%; gap: 8px; }
  #helperView .sh-tab { min-height: 56px; padding: 8px 12px; }
  #helperView .sh-tab span { display: none; }
  #helperView .sh-year { width: 100%; }
  #helperView .sh-year select { flex: 1; }
  #helperView .sh-context { padding: 14px 16px; }
  #helperView .sh-context__actions { width: 100%; }
  #helperView .sh-context__actions .btn { flex: 1 1 auto; }
  #helperView .sh-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
  #helperView .sh-chip { flex: 0 0 auto; }
  #helperView .sh-track { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  #helperView .sh-detail__head, #helperView .sh-recs { padding: 18px 16px; }
  #helperView .sh-detail__head h3 { font-size: calc(24px * var(--reading-scale, 1)); }
  #helperView .sh-detail__actions { width: 100%; }
  #helperView .sh-detail__actions .btn { flex: 1 1 auto; }
  #helperView .sh-segment { display: flex; }
  #helperView .sh-segment button { flex: 1; padding: 4px 8px; }
  #helperView .sh-filters { grid-template-columns: minmax(0, 1fr); }
  #helperView .sh-row { display: flex; flex-wrap: wrap; gap: 4px 8px; padding: 12px 14px; }
  #helperView .sh-row__summary { flex: 1 0 100%; }
  #helperView .sh-row__level:empty { display: none; }
  #helperView .sh-row__go { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #helperView .sh-tab, #helperView .sh-major { transform: none !important; transition: none; }
}

#helperView .sh-detail h3:focus { outline: none; }