/*!
 * ALLO KOREA — 사이트 리스킨 (site-restyle.css)
 * 엘리멘터 HTML 위젯 안의 손코딩 섹션을 **앱 팔레트로만** 갈아입힌다.
 * 색 · 라운드 · 그림자 · 타이포만 건드린다. 레이아웃(폭·그리드·패딩·마진·글자크기)은 손대지 않는다.
 *
 * ── 실측 근거 (2026-08-14, live-sim 저장본 5종 DOM 실측) ───────────────────────
 * 위젯은 전부 `<section id="ak-…">` (또는 .ak-univ-loop-section / .ak-pick / .hcQa /
 * #allo-school-list-only) 하나를 루트로 갖고, 그 안에 자기 <style> 을 인라인으로 들고 있다.
 * 그 <style> 안의 짧은 클래스(.card .chip .thumb .badge .hero-title …)는 **CSS 로는 스코프가
 * 없다**(맨 클래스 셀렉터로 선언돼 있다). 다만 DOM 상으로는 5개 페이지 전부에서 위 루트
 * 바깥에 단 한 번도 나타나지 않는다(실측: 누출 0건). 그래서 여기서는 전부 **루트 하위로만**
 * 스코프해서 쓴다 — 테마 헤더·푸터·메뉴·엘리멘터 위젯에는 규칙이 닿지 않는다.
 *
 * ── 특이도 설계 ──────────────────────────────────────────────────────────────
 * 페이지 인라인 <style> 은 <body> 안이라 이 파일(<head>)보다 **문서 순서가 뒤**다.
 * 따라서 같은 특이도면 페이지가 이긴다. 그래서:
 *   · 컴포넌트 규칙  = .allo-restyle :is(루트…) .클래스        → (1,2,0)
 *     페이지의 `#ak-x .클래스` (1,1,0) 를 넘는다.
 *   · 루트 자신 규칙 = .allo-restyle.allo-restyle :is(루트…)   → (1,2,0)
 *     페이지의 `#ak-pricing-final.ak-pricing-final` (1,1,0) 를 넘는다. 클래스 반복은
 *     !important 를 안 쓰려고 특이도만 올리는 의도적 장치다.
 * :is() 안의 #allo-school-list-only 때문에 :is() 전체가 ID 특이도를 갖는다 — 위 계산의 근거.
 *
 * ── 손대지 않는 것 (의도적) ───────────────────────────────────────────────────
 * · 섹션 배경/패딩/폭 : 페이지가 `!important` 로 잡고 있고, 히어로는 배경이 어두운 사진 위
 *   흰 글씨다. 여기서 크림을 깔면 글씨가 사라진다. 리스킨 대상(카드·칩·버튼·제목·가격)에
 *   섹션 배경은 들어있지 않으므로 건드리지 않는다.
 * · 어두운 문맥 컴포넌트 : .stat-card(히어로 글래스) · .ak-cc(어두운 띠) ·
 *   .akf-card/.akf-badge(주황 그라디언트 카드) · #ak-top-promo-belt(주황 벨트) —
 *   흰 카드로 바꾸면 대비가 죽는다. 목록에서 제외.
 * · 브랜드 색 : .akv2__circle--wa/--line/--ig (왓츠앱·라인·인스타 고유색), --ak-wa/--ak-line.
 * · border-width : box-sizing:border-box 라 두께가 바뀌면 내부 폭 → 줄바꿈 → 높이가 바뀐다.
 *   "0.5px 링"은 두께 대신 **색(6% 잉크)** 으로 표현한다. 두께가 0인 곳만 box-shadow 로 링을 준다.
 * · 폰트 : 스택 선언만(@font-face 없음). 실측상 모든 루트가 이미 Pretendard 로 계산된다 → 무변화.
 *
 * !important 사용: 0건. (특이도만으로 전부 이긴다 — 검증 완료)
 */

/* ── 토큰 ─────────────────────────────────────────────────────────────────── */
.allo-restyle.allo-restyle :is([id^="ak-"], .ak-univ-loop-section, .ak-pick, .hcQa, #allo-school-list-only) {
  --akrs-cream: #F7F3ED;
  --akrs-ink: #1A1710;
  --akrs-body: #5E574C;
  --akrs-accent: #E2600F;
  --akrs-accent-lite: #F2751A;
  --akrs-grad: linear-gradient(135deg, #F2751A 0%, #DE5B0B 100%);
  --akrs-ring: rgba(26, 23, 16, .06);
  --akrs-ring-2: rgba(26, 23, 16, .10);
  --akrs-shadow: 0 2px 10px -4px rgba(25, 31, 40, .10);
  --akrs-shadow-lift: 0 8px 24px -10px rgba(25, 31, 40, .18);
  --akrs-shadow-brand: 0 8px 24px -10px rgba(226, 96, 15, .45);
  --akrs-r-card: 20px;
  --akrs-r-sm: 16px;
  --akrs-r-pill: 999px;
  --akrs-teal: #146259;
  --akrs-indigo: #2E3A8C;
  --akrs-wine: #8C2F39;
  --akrs-olive: #5F6B2F;

  /* 페이지가 자기 루트에 선언해 둔 변수 재지정 — 셀렉터를 안 건드리고 색만 바꾸는 통로.
     ⚠ --ak-line(라인 메신저 초록) · --ak-wa(왓츠앱 초록) 은 브랜드색이라 손대지 않는다. */
  --ak-brand: #E2600F;
  --ak-orange: #E2600F;
  --ak-orange-hover: #F2751A;
  --ak-ink: #1A1710;
  --ak-text: #5E574C;
  --ak-sub: #5E574C;
  --ak-border: rgba(26, 23, 16, .06);
  --ak-soft: #F7F3ED;
  --ak-card: #ffffff;
  --ak-shadow: 0 2px 10px -4px rgba(25, 31, 40, .10);
  --ak-shadow-brand: 0 8px 24px -10px rgba(226, 96, 15, .45);

  /* Pretendard 스택 선언만 (@font-face 없음 — 폰트 파일은 페이지가 이미 로드한다) */
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans KR", sans-serif;
}

/* ── 1. 카드 : 흰 표면 + 6% 잉크 링 + 라운드 20 + 앱 그림자 ─────────────────── */
.allo-restyle :is([id^="ak-"], .ak-univ-loop-section, .ak-pick, .hcQa, #allo-school-list-only) :is(
  .card,
  .step,
  .main-plan-card, .sub-plan-card, .tuition-card, .prep-box, .living-box, .payment-notice,
  .req-card, .path-card, .process-item,
  .track-card,
  .univ-card,
  .akv2__card, .akda3__card,
  .ak-panel, .ak-input,
  .hcQa-answerInner
) {
  background: #ffffff;
  border-color: var(--akrs-ring);   /* 두께는 그대로 — 색만 앱 링으로 */
  border-radius: var(--akrs-r-card);
  box-shadow: var(--akrs-shadow);
  color: var(--akrs-body);
}

/* 호버 시 링만 액센트로 (그림자·이동은 페이지 것을 그대로 둔다) */
.allo-restyle :is([id^="ak-"], .ak-univ-loop-section, .ak-pick, .hcQa, #allo-school-list-only) :is(
  .card, .step, .track-card, .univ-card, .akv2__card, .akda3__card
):hover {
  border-color: rgba(226, 96, 15, .35);
}

/* 카드 안의 카드/타일은 한 단계 작은 라운드 */
.allo-restyle :is([id^="ak-"], .ak-univ-loop-section, .ak-pick, .hcQa, #allo-school-list-only) :is(
  .process-item, .ak-input, .hcQa-answerInner
) {
  border-radius: var(--akrs-r-sm);
}

/* .ak-panel 은 학교 선택 **드롭다운(떠 있는 면)** 이다 — 평면 카드 그림자로 낮추면
   본문 위에 떠 있다는 신호가 사라진다. 들린 그림자를 유지한다. */
.allo-restyle :is([id^="ak-"], .ak-univ-loop-section, .ak-pick, .hcQa, #allo-school-list-only) .ak-panel {
  box-shadow: var(--akrs-shadow-lift);
}

/* ── 2. 카드 안 부드러운 면(크림) — 페이지가 #f9fafb·#f2f7ff 로 쓰던 자리 ────── */
.allo-restyle :is([id^="ak-"], .ak-univ-loop-section, .ak-pick, .hcQa, #allo-school-list-only) :is(
  .h-card,
  .rules-box,
  .akda3__bubble
) {
  background: var(--akrs-cream);
  border-color: var(--akrs-ring);
  border-radius: var(--akrs-r-sm);
  color: var(--akrs-body);
}

/* 카드 하단 띠(.akv2__sub)는 카드에 붙어 있는 면이라 라운드를 주지 않는다 — 색만 크림으로 */
.allo-restyle :is([id^="ak-"], .ak-univ-loop-section, .ak-pick, .hcQa, #allo-school-list-only) .akv2__sub {
  background: var(--akrs-cream);
  border-color: var(--akrs-ring-2);
}

/* .rules-box 는 테두리 두께가 0이라 색만으론 링이 안 보인다 → 레이아웃에 영향 없는
   inset 그림자로 링을 만든다 (box-shadow 는 박스 크기를 바꾸지 않는다). */
.allo-restyle :is([id^="ak-"], .ak-univ-loop-section, .ak-pick, .hcQa, #allo-school-list-only) .rules-box {
  box-shadow: inset 0 0 0 1px var(--akrs-ring);
}

/* 타임라인 아이콘 버블 — 흰 원 + 액센트 링 (두께 2px 유지) */
.allo-restyle :is([id^="ak-"], .ak-univ-loop-section, .ak-pick, .hcQa, #allo-school-list-only) .icon-bubble {
  background: #ffffff;
  border-color: rgba(226, 96, 15, .38);
  box-shadow: var(--akrs-shadow);
}

/* ── 3. 칩 · 뱃지 : 라운드 999 + 틴트 ─────────────────────────────────────── */
.allo-restyle :is([id^="ak-"], .ak-univ-loop-section, .ak-pick, .hcQa, #allo-school-list-only) :is(
  .chip, .chip-city, .visa-yes, .item-chip, .total-tag, .step-tag, .pill,
  .track-tag, .extend-badge, .pop-badge, .city-tag, .badge,
  .akv2__badge, .akda3__badge, .hcQa-count
) {
  border-radius: var(--akrs-r-pill);
}

/* 기본 칩 = 인디고 틴트 */
.allo-restyle :is([id^="ak-"], .ak-univ-loop-section, .ak-pick, .hcQa, #allo-school-list-only) :is(.chip, .chip-city) {
  background: rgba(46, 58, 140, .09);
  color: var(--akrs-indigo);
  border-color: rgba(46, 58, 140, .18);
}

/* 도시 칩 — 앱 틴트 4색으로 재배치 (서울 인디고 · 부산 틸 · 대구 와인) */
.allo-restyle :is([id^="ak-"], .ak-univ-loop-section, .ak-pick, .hcQa, #allo-school-list-only) .city-seoul {
  background: rgba(46, 58, 140, .09);
  color: var(--akrs-indigo);
  border-color: rgba(46, 58, 140, .18);
}
.allo-restyle :is([id^="ak-"], .ak-univ-loop-section, .ak-pick, .hcQa, #allo-school-list-only) .city-busan {
  background: rgba(20, 98, 89, .09);
  color: var(--akrs-teal);
  border-color: rgba(20, 98, 89, .18);
}
.allo-restyle :is([id^="ak-"], .ak-univ-loop-section, .ak-pick, .hcQa, #allo-school-list-only) .city-daegu {
  background: rgba(140, 47, 57, .09);
  color: var(--akrs-wine);
  border-color: rgba(140, 47, 57, .18);
}

/* 확인/포함 표시 칩 = 올리브 */
.allo-restyle :is([id^="ak-"], .ak-univ-loop-section, .ak-pick, .hcQa, #allo-school-list-only) :is(.visa-yes, .extend-badge, .track-tag) {
  background: rgba(95, 107, 47, .10);
  color: var(--akrs-olive);
  border-color: rgba(95, 107, 47, .20);
}

/* 액센트 칩 (주황 계열로 이미 쓰이던 자리) */
.allo-restyle :is([id^="ak-"], .ak-univ-loop-section, .ak-pick, .hcQa, #allo-school-list-only) :is(
  .pill, .total-tag, .step-tag, .akv2__badge, .akda3__badge
) {
  background: rgba(226, 96, 15, .10);
  color: var(--akrs-accent);
  border-color: rgba(226, 96, 15, .20);
}

/* 중립 칩 — 크림 + 링 */
.allo-restyle :is([id^="ak-"], .ak-univ-loop-section, .ak-pick, .hcQa, #allo-school-list-only) .item-chip {
  background: var(--akrs-cream);
  color: var(--akrs-body);
  border-color: var(--akrs-ring-2);
}

/* 사진 위 오버레이 뱃지 — 잉크 반투명 */
.allo-restyle :is([id^="ak-"], .ak-univ-loop-section, .ak-pick, .hcQa, #allo-school-list-only) .badge {
  background: rgba(26, 23, 16, .55);
  color: #ffffff;
}
.allo-restyle :is([id^="ak-"], .ak-univ-loop-section, .ak-pick, .hcQa, #allo-school-list-only) .city-tag {
  background: rgba(255, 255, 255, .92);
  color: var(--akrs-indigo);
}
.allo-restyle :is([id^="ak-"], .ak-univ-loop-section, .ak-pick, .hcQa, #allo-school-list-only) .pop-badge {
  background: var(--akrs-ink);
  color: #ffffff;
}

/* ── 4. CTA 버튼 : 주황 그라디언트 ────────────────────────────────────────── */
/* ⚠ 그라디언트는 반드시 background-color + background-image **롱핸드**로 쓴다.
   엘리멘터 지연로딩 CSS 가
     `.e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded) * { background-image: none !important; }`
   로 4번째 이후 컨테이너 안의 background-image 를 통째로 죽인다(실측: home.html 의 .btn-apply·
   .more-btn 이 여기 걸렸다). shorthand 로 쓰면 이미지가 죽는 순간 색까지 initial(투명)로 돌아가
   **흰 글씨가 사라진다.** 롱핸드로 쓰면 그라디언트만 빠지고 단색 액센트가 남는다. */
.allo-restyle :is([id^="ak-"], .ak-univ-loop-section, .ak-pick, .hcQa, #allo-school-list-only) :is(
  .btn-apply, .btn-visa, .ak-btn, .akv2__cta, .akda3__cta
) {
  background-color: var(--akrs-accent);
  background-image: var(--akrs-grad);
  color: #ffffff;
  border-radius: var(--akrs-r-sm);
  box-shadow: var(--akrs-shadow-brand);
}
.allo-restyle :is([id^="ak-"], .ak-univ-loop-section, .ak-pick, .hcQa, #allo-school-list-only) :is(
  .btn-apply, .btn-visa, .ak-btn, .akv2__cta, .akda3__cta
):hover {
  background-color: var(--akrs-accent-lite);
  background-image: linear-gradient(135deg, #F58A34 0%, #E2600F 100%);
}

/* .more-btn 은 실측상 버튼이 아니라 카드 안의 **텍스트 라벨**(padding 0, pointer-events:none)이다.
   면을 칠하면 글자만 주황 덩어리가 된다 → 글자색만 액센트로. */
.allo-restyle :is([id^="ak-"], .ak-univ-loop-section, .ak-pick, .hcQa, #allo-school-list-only) .more-btn {
  color: var(--akrs-accent);
}

/* CTA 안의 아이콘 칩 */
.allo-restyle :is([id^="ak-"], .ak-univ-loop-section, .ak-pick, .hcQa, #allo-school-list-only) :is(
  .akv2__ctaIcon, .akda3__ctaIcon, .akda3__ctaArrow
) {
  background: rgba(255, 255, 255, .20);
  border-radius: 12px;
}

/* 반전 버튼 (주황 면 위에 얹힌 흰 버튼) — 면은 흰색 유지, 글자만 액센트 */
.allo-restyle :is([id^="ak-"], .ak-univ-loop-section, .ak-pick, .hcQa, #allo-school-list-only) :is(.mid-btn, .akf-btn--primary) {
  background: #ffffff;
  color: var(--akrs-accent);
  border-radius: var(--akrs-r-sm);
}

/* 텍스트형 미니 CTA */
.allo-restyle :is([id^="ak-"], .ak-univ-loop-section, .ak-pick, .hcQa, #allo-school-list-only) .btn-mini {
  color: var(--akrs-accent);
}

/* ── 5. 섹션 제목 · 라벨 · 본문 ──────────────────────────────────────────── */
.allo-restyle :is([id^="ak-"], .ak-univ-loop-section, .ak-pick, .hcQa, #allo-school-list-only) :is(
  .section-title, .housing-title, .living-title, .rules-title, .process-title,
  .card-subtitle, .req-name, .path-name, .process-name, .h-name, .plan-period,
  .name, .title, .ak-head, .duration,
  .akv2__title, .akda3__title, .hcQa-title, .hcQa-titleText
) {
  color: var(--akrs-ink);
}

/* 섹션 라벨(작은 대문자 머리표) = 액센트 */
.allo-restyle :is([id^="ak-"], .ak-univ-loop-section, .ak-pick, .hcQa, #allo-school-list-only) .section-label {
  color: var(--akrs-accent);
}

/* 본문/보조 텍스트 */
.allo-restyle :is([id^="ak-"], .ak-univ-loop-section, .ak-pick, .hcQa, #allo-school-list-only) :is(
  .section-desc, .req-desc, .path-desc, .process-desc, .h-desc, .lead,
  .info, .list, .meta, .footnote, .sub-info, .prep-desc, .notice-text,
  .akv2__desc, .akda3__desc, .akv2__subTitle, .akda3__subTitle,
  .akv2__footNote, .akda3__footNote, .hcQa-desc
) {
  color: var(--akrs-body);
}

/* ── 6. 가격 · 수치 : 액센트 ─────────────────────────────────────────────── */
.allo-restyle :is([id^="ak-"], .ak-univ-loop-section, .ak-pick, .hcQa, #allo-school-list-only) :is(
  .plan-price, .sub-price, .h-price, .prep-price, .fee-val,
  .req-val, .rule-val, .process-num
) {
  color: var(--akrs-accent);
}

/* 히어로 통계는 **강조로 색이 붙어 있던 것만** 액센트로 바꾼다.
   맨 .stat-val 은 흰색이라 그대로 둬야 어두운 히어로에서 강약이 유지된다.
   어두운 배경 위라 한 톤 밝은 액센트를 쓴다. */
.allo-restyle :is([id^="ak-"], .ak-univ-loop-section, .ak-pick, .hcQa, #allo-school-list-only) :is(.stat-val.orange, .stat-val.blue) {
  color: var(--akrs-accent-lite);
}

/* 페이지가 파란색(#3182f6, 흰 배경 대비 3.71)으로 강조하던 본문 <b> — 앱은 본문 강조를
   색이 아니라 굵기+잉크로 한다. 액센트 주황을 쓰면 대비가 3.55 로 더 떨어져서 잉크로 간다
   (실측 대비 14:1). 색 강조는 가격·라벨 같은 큰 글자에만 남긴다. */
.allo-restyle :is([id^="ak-"], .ak-univ-loop-section, .ak-pick, .hcQa, #allo-school-list-only) .faq-content b {
  color: var(--akrs-ink);
}

/* ── 7. FAQ 아코디언 (<details>/<summary>) ───────────────────────────────── */
.allo-restyle :is([id^="ak-"], .ak-univ-loop-section, .ak-pick, .hcQa, #allo-school-list-only) .faq-list details {
  background: #ffffff;
  border-color: var(--akrs-ring);
  border-radius: var(--akrs-r-card);
  box-shadow: var(--akrs-shadow);
}
.allo-restyle :is([id^="ak-"], .ak-univ-loop-section, .ak-pick, .hcQa, #allo-school-list-only) .faq-list details[open] {
  border-color: rgba(226, 96, 15, .35);
  box-shadow: var(--akrs-shadow-lift);
}
.allo-restyle :is([id^="ak-"], .ak-univ-loop-section, .ak-pick, .hcQa, #allo-school-list-only) .faq-list summary {
  color: var(--akrs-ink);
}
.allo-restyle :is([id^="ak-"], .ak-univ-loop-section, .ak-pick, .hcQa, #allo-school-list-only) .faq-list summary:hover {
  color: var(--akrs-accent);
}
.allo-restyle :is([id^="ak-"], .ak-univ-loop-section, .ak-pick, .hcQa, #allo-school-list-only) .faq-list summary::after {
  color: var(--akrs-body);
}
.allo-restyle :is([id^="ak-"], .ak-univ-loop-section, .ak-pick, .hcQa, #allo-school-list-only) .faq-list details[open] summary::after {
  color: var(--akrs-accent);
}
.allo-restyle :is([id^="ak-"], .ak-univ-loop-section, .ak-pick, .hcQa, #allo-school-list-only) .faq-content {
  color: var(--akrs-body);
}

/* ── 8. 썸네일 라운드 ────────────────────────────────────────────────────── */
/* ⚠ .thumb 의 **배경색은 건드리지 않는다.** 실측상 #111(거의 검정)인데, 그 위에 흰 글씨
   오버레이 뱃지(.badge)가 얹혀 있다. 크림으로 바꾸면 사진이 뜨기 전 한순간 흰 글씨가
   크림 위에 놓여 대비가 18.88 → 1.11 로 무너진다(실측). 라운드만 준다. */
.allo-restyle :is([id^="ak-"], .ak-univ-loop-section, .ak-pick, .hcQa, #allo-school-list-only) .thumb {
  border-radius: var(--akrs-r-card) var(--akrs-r-card) 0 0;
}

/* ── 9. 구분선 ───────────────────────────────────────────────────────────── */
.allo-restyle :is([id^="ak-"], .ak-univ-loop-section, .ak-pick, .hcQa, #allo-school-list-only) :is(
  .ak-divider, .included-box, .fee-row, .expense-item, .akv2__mid, .akda3__mid, .hcQa-tableHead
) {
  border-color: var(--akrs-ring-2);
}
