/* 펭구오픽 메뉴 공통 얼음 무드 — 새 홈·모의고사 탭(B안, templates/exam.html)과 같은 결.
   시안 penguopic-assets screens/2026-10-26(프로필·커뮤니티·표현노트·첨삭함). body에 class="ice-page"를 붙인 화면에서만 쓴다.
   기존 화면의 기능·스크립트는 그대로 두고 겉모습만 바꾼다 — 각 화면 css 뒤에 불러와 같은 세기 규칙을 덮는다. */

body.ice-page {
  --ice-ink: #0E1B3D; --ice-soft: #5B6B85; --ice-blue: #1A84E0; --ice-blue-deep: #1767C9;
  --ice-line: #D6E8FA; --ice-tile: #EAF4FF;
  --ice-glossy: linear-gradient(180deg, #3A9BF5 0%, #1B74DE 100%);
  background: linear-gradient(180deg, #DDF1FD 0%, #EEF8FF 40%, #F7FBFF 100%) fixed !important;
  color: var(--ice-ink);
}
body.ice-page::before, body.ice-page::after { content: none !important; display: none !important; }  /* style.css 옛 배경·덮개 */

/* ---------- 공통 조각 ---------- */
body.ice-page .ice-icon { display: block; flex-shrink: 0; }
body.ice-page .ice-card {
  background: #fff; border: 1.5px solid var(--ice-line); border-radius: 22px; box-shadow: 0 6px 18px rgba(26, 132, 224, 0.08);
}

/* 머리 카드: 흰 둥근 카드에 선 아이콘 + 제목. 마스코트·부연 문구는 뺀다(화면은 단순하게) */
body.ice-page .pengu-page-hero {
  display: flex; align-items: center; gap: 12px; width: auto; max-width: 560px; margin: 14px auto 0; padding: 16px 20px;
  border-radius: 24px; background: #fff; border: 1.5px solid var(--ice-line); box-shadow: 0 6px 18px rgba(26, 132, 224, 0.08);
  box-sizing: border-box; min-height: 0 !important;
}
body.ice-page .pengu-page-hero-copy { gap: 12px; }
body.ice-page .pengu-page-hero-mascot, body.ice-page .pengu-page-hero-subtitle { display: none !important; }
body.ice-page .pengu-page-hero-icon {
  display: flex !important; width: auto; height: auto; background: none; border: 0; box-shadow: none; color: var(--ice-blue);
}
body.ice-page .pengu-page-hero-icon svg { width: 30px; height: 30px; stroke-width: 2; }
body.ice-page .pengu-page-hero-title { font-size: 26px !important; font-weight: 800; letter-spacing: -0.5px; color: var(--ice-ink); }

/* 칩(난이도·분류 탭) — 흰 알약, 고른 것은 파란 광택 */
body.ice-page .ice-chip, body.ice-page .notes-chip, body.ice-page .community-tab, body.ice-page .top-tab-btn {
  border-radius: 999px; border: 1.5px solid var(--ice-line); background: #fff; color: var(--ice-ink);
  font-weight: 800; box-shadow: none;
}
body.ice-page .notes-chip.active, body.ice-page .community-tab.is-active, body.ice-page .top-tab-btn.active {
  background: var(--ice-glossy); border-color: var(--ice-blue-deep); color: #fff; box-shadow: 0 6px 14px rgba(27, 116, 222, 0.22);
}

/* =================== 프로필 (templates/mypage.html) =================== */
body.ice-page.profile-page .profile-shell { width: min(100%, 560px); padding: 0 16px var(--app-bottom-content-space, 96px); box-sizing: border-box; }
body.ice-page.profile-page .profile-card-main {
  position: relative; overflow: hidden; margin-top: 14px; min-height: 0; padding: 20px; gap: 16px; border-radius: 26px;
  background: var(--ice-glossy); border: 1.5px solid var(--ice-blue-deep); color: #fff; box-shadow: 0 10px 22px rgba(20, 100, 190, 0.20);
}
body.ice-page.profile-page .profile-card-main::before {
  content: ""; position: absolute; left: 14px; right: 14px; top: 8px; height: 38%; border-radius: 20px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0));
}
body.ice-page.profile-page .profile-avatar-wrap { flex: 0 0 88px; }
body.ice-page.profile-page .profile-avatar {
  width: 88px; height: 88px; object-fit: contain; padding: 6px; box-sizing: border-box; background: #fff; border: 3px solid rgba(255, 255, 255, 0.85);
}
body.ice-page.profile-page .profile-camera-btn, body.ice-page.profile-page .profile-card-arrow,
body.ice-page.profile-page .profile-main-copy p { display: none; }
body.ice-page.profile-page .profile-main-copy h2 { color: #fff; font-size: 26px; font-weight: 800; letter-spacing: -0.5px; margin: 0 0 10px; }
body.ice-page.profile-page .profile-chip-row { flex-wrap: wrap; gap: 6px; }
body.ice-page.profile-page .profile-chip {
  gap: 4px; background: rgba(255, 255, 255, 0.24); color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.45); font-weight: 800;
}

body.ice-page.profile-page .profile-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
body.ice-page.profile-page .profile-stat-card {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center;
  padding: 14px; border-radius: 20px; background: #fff; border: 1.5px solid var(--ice-line); box-shadow: 0 4px 12px rgba(26, 132, 224, 0.06);
  min-height: 0; text-align: left;
}
body.ice-page.profile-page .profile-stat-icon {
  grid-row: span 2; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 0; background: var(--ice-tile); color: var(--ice-blue);
}
body.ice-page.profile-page .profile-stat-icon.flame { background: #FFF1E6; color: #F57C1F; }
body.ice-page.profile-page .profile-stat-icon.coin { background: #FFF6D9; color: #E3A008; }
body.ice-page.profile-page .profile-stat-icon.chart { background: #F0EBFF; color: #7A5AF0; }
body.ice-page.profile-page .profile-stat-label { font-size: 13px; font-weight: 700; color: var(--ice-soft); margin: 0; align-self: end; }
body.ice-page.profile-page .profile-stat-value { font-size: 24px; font-weight: 800; color: var(--ice-ink); margin: 0; align-self: start; line-height: 1.15; }
body.ice-page.profile-page .profile-stat-value small { font-size: 14px; margin-left: 2px; }

body.ice-page.profile-page .profile-panel {
  margin-top: 14px; padding: 18px 16px; border-radius: 22px; background: #fff; border: 1.5px solid var(--ice-line);
  box-shadow: 0 6px 18px rgba(26, 132, 224, 0.06);
}
body.ice-page.profile-page .profile-section-title h2 { font-size: 18px; font-weight: 800; color: var(--ice-ink); }
body.ice-page.profile-page .profile-section-icon, body.ice-page.profile-page .profile-row-icon {
  width: 36px; height: 36px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--ice-tile); color: var(--ice-blue); font-size: 0; border: 0; box-shadow: none; flex-shrink: 0;
}
body.ice-page.profile-page .profile-link-row, body.ice-page.profile-page .profile-status-row {
  border-radius: 16px; background: transparent; border: 0; border-bottom: 1px solid #EEF4FB; color: var(--ice-ink);
}
body.ice-page.profile-page .profile-row-list > :last-child, body.ice-page.profile-page .profile-status-list > :last-child { border-bottom: 0; }
body.ice-page.profile-page .profile-status-row.highlighted { background: #F5FAFF; }
body.ice-page.profile-page .profile-row-title { font-weight: 800; }
body.ice-page.profile-page .profile-row-arrow { color: #9DB4CF; }
body.ice-page.profile-page .profile-pill { background: var(--ice-tile); color: var(--ice-blue-deep); border: 0; font-weight: 800; }
body.ice-page.profile-page .referral-bar-fill { background: var(--ice-glossy); }
body.ice-page.profile-page .copy-btn { border-radius: 999px; background: var(--ice-glossy); color: #fff; border: 0; font-weight: 800; }

/* =================== 커뮤니티 (templates/community.html, static/js/community.js) =================== */
body.ice-page.community-page .community-shell { max-width: 560px; margin: 0 auto; padding-left: 16px; padding-right: 16px; box-sizing: border-box; }
body.ice-page.community-page .community-hero {
  display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 16px 20px; border-radius: 24px; min-height: 0;
  background: #fff; border: 1.5px solid var(--ice-line); box-shadow: 0 6px 18px rgba(26, 132, 224, 0.08);
}
body.ice-page.community-page .community-hero::before, body.ice-page.community-page .community-hero::after { display: none; }
body.ice-page.community-page .community-hero-title { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.5px; color: var(--ice-ink); }
body.ice-page.community-page .community-hero-sub { display: none; }
body.ice-page.community-page .community-hero .ice-icon { color: var(--ice-blue); }
body.ice-page.community-page .community-quick {
  background: #fff; border: 1.5px solid var(--ice-line); border-radius: 20px; box-shadow: 0 4px 12px rgba(26, 132, 224, 0.06); color: var(--ice-ink);
}
body.ice-page.community-page .community-quick-ico { background: var(--ice-tile); color: var(--ice-blue); fill: currentColor; }
body.ice-page.community-page .community-section-title { font-size: 19px; font-weight: 800; color: var(--ice-ink); }
body.ice-page.community-page .community-refresh {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
  background: #fff; border: 1.5px solid var(--ice-line); color: var(--ice-blue); font-size: 0;
}
body.ice-page.community-page .community-fcard {
  background: var(--ice-glossy); border: 1.5px solid var(--ice-blue-deep); border-radius: 22px; color: #fff;
  box-shadow: 0 10px 22px rgba(20, 100, 190, 0.20);
}
body.ice-page.community-page .community-fcard .community-ftitle, body.ice-page.community-page .community-fcard .community-fcard-host,
body.ice-page.community-page .community-fcard .community-row-slot { color: #fff; }
body.ice-page.community-page .community-row {
  background: #fff; border: 1.5px solid var(--ice-line); border-radius: 22px; box-shadow: 0 4px 12px rgba(26, 132, 224, 0.06);
}
body.ice-page.community-page .community-row-name { font-weight: 800; color: var(--ice-ink); }
body.ice-page.community-page .community-row-slot { background: var(--ice-tile); color: var(--ice-blue-deep); border-radius: 999px; font-weight: 800; }
body.ice-page.community-page .community-join {
  border-radius: 999px; background: var(--ice-glossy); color: #fff; border: 0; font-weight: 800; box-shadow: 0 4px 10px rgba(27, 116, 222, 0.22);
}
body.ice-page.community-page .community-action--primary { background: var(--ice-glossy); border: 0; color: #fff; border-radius: 999px; font-weight: 800; }
body.ice-page.community-page .community-action--ghost { background: #fff; border: 1.5px solid var(--ice-line); color: var(--ice-blue-deep); border-radius: 999px; font-weight: 800; }
body.ice-page.community-page .community-action .ice-icon { display: inline-block; vertical-align: -5px; }

/* =================== 표현노트 (templates/scripts.html) =================== */
body.ice-page.notes-page .notes-shell { max-width: 560px; margin: 0 auto; padding-left: 16px; padding-right: 16px; box-sizing: border-box; }
body.ice-page.notes-page .notes-search {
  background: #fff; border: 1.5px solid var(--ice-line); border-radius: 18px; box-shadow: 0 4px 12px rgba(26, 132, 224, 0.06);
}
body.ice-page.notes-page .notes-search-icon, body.ice-page.notes-page .notes-filter-icon { color: var(--ice-blue); font-size: 0; display: inline-flex; }
body.ice-page.notes-page .top-tab-toggle { background: transparent; border: 0; gap: 8px; box-shadow: none; }
body.ice-page.notes-page .topic-tile {
  background: #fff; border: 1.5px solid var(--ice-line); border-radius: 22px; box-shadow: 0 4px 12px rgba(26, 132, 224, 0.06);
}
body.ice-page.notes-page .notes-toolbar { margin-top: 12px; }
/* 주제 카드: 시안처럼 그림을 크게 위에, 이름을 아래에 */
body.ice-page.notes-page .topic-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 16px 10px;
}
body.ice-page.notes-page .tile-icon {
  display: flex; align-items: center; justify-content: center; width: 68px; height: 68px;
  background: none; border: 0; box-shadow: none; font-size: 40px;
}
body.ice-page.notes-page .tile-art { width: 68px; height: 68px; object-fit: contain; }
body.ice-page.notes-page .tile-name { font-weight: 800; color: var(--ice-ink); }
body.ice-page.notes-page .tile-caption { display: none; }  /* 부연 문구는 뺀다 — 그림 + 주제 이름만 */
body.ice-page.notes-page .exam-cta {
  background: var(--ice-glossy); border: 1.5px solid var(--ice-blue-deep); border-radius: 22px; color: #fff; box-shadow: 0 10px 22px rgba(20, 100, 190, 0.20);
}
body.ice-page.notes-page .exam-cta h3, body.ice-page.notes-page .exam-cta p { color: #fff; }
body.ice-page.notes-page .exam-cta-btn { background: #fff; color: var(--ice-blue-deep); border-radius: 999px; font-weight: 800; }

/* =================== 첨삭함 (templates/history.html) =================== */
body.ice-page.history-page .corrections-shell { max-width: 560px; margin: 0 auto; padding-left: 16px; padding-right: 16px; box-sizing: border-box; }
body.ice-page.history-page .ice-head { margin: 14px 0 12px; }
body.ice-page.history-page .growth-dash, body.ice-page.history-page .growth-building,
body.ice-page.history-page .review-sentences-section, body.ice-page.history-page .previous-reports,
body.ice-page.history-page .corrections-empty {
  background: #fff; border: 1.5px solid var(--ice-line); border-radius: 22px; box-shadow: 0 6px 18px rgba(26, 132, 224, 0.06);
}
body.ice-page.history-page .growth-card { background: #F7FBFF; border: 1.5px solid #E3EFFB; border-radius: 18px; box-shadow: none; }
body.ice-page.history-page .growth-title, body.ice-page.history-page .previous-head h2 { color: var(--ice-ink); font-weight: 800; }
body.ice-page.history-page .growth-footer { background: var(--ice-glossy); color: #fff; border: 0; border-radius: 18px; }
body.ice-page.history-page .sort-chip { background: var(--ice-tile); color: var(--ice-blue-deep); border: 0; border-radius: 999px; font-weight: 800; }

/* 머리 카드(템플릿에 직접 넣은 것) — 첨삭함처럼 hero가 없던 화면 */
body.ice-page .ice-head {
  display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-radius: 24px;
  background: #fff; border: 1.5px solid var(--ice-line); box-shadow: 0 6px 18px rgba(26, 132, 224, 0.08); color: var(--ice-blue);
}
body.ice-page .ice-head h1 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.5px; color: var(--ice-ink); }
body.ice-page.community-page .community-empty-pengu { display: block; width: 96px; height: 96px; object-fit: contain; margin: 0 auto 6px; }
body.ice-page.history-page .corrections-empty .report-btn-primary { background: var(--ice-glossy); border: 0; border-radius: 999px; box-shadow: 0 6px 14px rgba(27, 116, 222, 0.25); }
body.ice-page.history-page .previous-icon { border-radius: 14px; background: var(--ice-tile); color: var(--ice-blue); }
body.ice-page.history-page .previous-item { background: #fff; border: 1.5px solid var(--ice-line); border-radius: 18px; }

/* ---------- 2차 검토(로그인 뒤 세부 화면): 옛 남색 기본 버튼을 파란 광택으로 ---------- */
body.ice-page .question-type-tab.active, body.ice-page .level-btn.active,
body.ice-page .inline-save-btn, body.ice-page.notes-page .report-btn,
body.ice-page.history-page .report-btn-primary {
  background: var(--ice-glossy) !important; border-color: var(--ice-blue-deep) !important; color: #fff !important;
  box-shadow: 0 6px 14px rgba(27, 116, 222, 0.22) !important;
}
body.ice-page .question-type-tab, body.ice-page .level-btn { border-radius: 999px; font-weight: 800; }
body.ice-page .inline-save-btn:disabled { opacity: 0.55; }
body.ice-page.notes-page .back-btn { border-radius: 999px; border: 1.5px solid var(--ice-line); color: var(--ice-blue-deep); font-weight: 800; }
/* 돌발·롤플레이 묶음 카드는 파란 광택(그 안 주제로 들어가는 카드) */
body.ice-page.notes-page .topic-tile.special { background: var(--ice-glossy); border-color: var(--ice-blue-deep); box-shadow: 0 8px 18px rgba(20, 100, 190, 0.20); }
body.ice-page.notes-page .topic-tile.special .tile-name { color: #fff; }
body.ice-page.community-page .community-fcard .community-row-slot { background: rgba(255, 255, 255, 0.22); color: #fff; }
body.ice-page.notes-page .mini-art { width: 22px; height: 22px; object-fit: contain; vertical-align: -5px; margin-right: 2px; }
body.ice-page.notes-page .sub-icon .tile-art { width: 44px; height: 44px; }
body.ice-page.notes-page .sub-icon { background: none; border: 0; box-shadow: none; }
/* 예상 등급 카드 그림: 비니 펭구 깃발(static/images/pengu/grade-flag-pengu.webp) — 등급 글자를 새 깃발 천 가운데에 */
body.ice-page.history-page .report-grade-illust .report-grade-flag { left: 63%; top: 23%; transform: translate(-50%, -50%) rotate(-4deg); }

/* =================== 고정 회차 (templates/exam_fixed.html) — 모의고사 탭 B안과 같은 결 =================== */
body.ice-page.fixed-exam-page .fixed-shell { max-width: 560px; padding: 14px 16px var(--app-bottom-content-space, 100px); box-sizing: border-box; }
body.ice-page .ice-back {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-right: 2px; border-radius: 50%;
  background: var(--ice-tile); color: var(--ice-blue-deep); flex-shrink: 0;
}
body.ice-page.fixed-exam-page .ice-head { margin-bottom: 12px; }
body.ice-page.fixed-exam-page .fixed-status-banner { border-radius: 18px; border: 1.5px solid var(--ice-line); background: #fff; color: var(--ice-ink); font-weight: 700; }
body.ice-page.fixed-exam-page .fixed-status-banner.locked { background: #F2F5F9; color: var(--ice-soft); }
body.ice-page.fixed-exam-page .fixed-group {
  margin-top: 12px; padding: 14px; border-radius: 22px; background: #fff; border: 1.5px solid var(--ice-line); box-shadow: 0 4px 12px rgba(26, 132, 224, 0.06);
}
body.ice-page.fixed-exam-page .fixed-group-emoji { display: none; }
body.ice-page.fixed-exam-page .fixed-group-title { font-size: 17px; font-weight: 800; color: var(--ice-ink); }
body.ice-page.fixed-exam-page .fixed-group-meta { padding: 3px 10px; border-radius: 999px; background: var(--ice-tile); color: var(--ice-blue-deep); font-weight: 800; }
body.ice-page.fixed-exam-page .fixed-tile {
  border-radius: 14px; border: 1.5px solid var(--ice-line); background: #F7FBFF; color: var(--ice-ink); font-size: 16px; font-weight: 800;
}
body.ice-page.fixed-exam-page .fixed-tile.full, body.ice-page.fixed-exam-page .fixed-tile.trial { background: #fff; border-color: #9FCBF5; }
body.ice-page.fixed-exam-page .fixed-tile.locked, body.ice-page.fixed-exam-page .fixed-tile.disabled { background: #F2F5F9; border-color: #E1E7EF; color: #9AA7B8; }
body.ice-page .ice-head h1, body.ice-page .pengu-page-hero-title, body.ice-page .community-hero-title { text-shadow: none !important; }