/* 펭구오픽 학습 경로 홈 (docs/remodel/PLAN.md) — 말할고래 홈(StonePath/pathLayout/HomeStats)의
 * 치수·색·배치를 웹으로 옮긴 것. 섹션 = 한 주제 · 한 단계 · 돌 4개, 지그재그 길, 현재 돌 옆 펭구 하나. */

:root {
  --pk-page: #FFFFFF;
  --pk-ink: #25303F;
  --pk-ink-soft: #5A6676;
  --pk-faint: #9AA5B3;
  --pk-card-border: #CFD7E1;
  --pk-card-lip: #BAC6D3;
  --pk-divider: #E6EBF1;
  --pk-go: #3AA60A;
  --pk-go-top: #4CBA14;
  --pk-go-lip: #2B8106;
  --pk-blue: #1A84E0;
  --pk-blue-lip: #0E64B3;
  --pk-bubble-border: #DCE2EA;
  --pk-path-dot: #9CD0FD;
  --pk-locked-face: #E5E9EE;
  --pk-ring-track: #E2EAF4;
  --pk-streak: #FF8A00;
  --pk-blue-face: #0A8FE8; --pk-blue-lip2: #0670C2;
  --pk-teal-face: #0A9E95; --pk-teal-lip: #077A73;
  --pk-purple-face: #8F5BEF; --pk-purple-lip: #6E3FD0;
  --pk-orange-face: #E36A00; --pk-orange-lip: #B35300;
  --pk-navy-face: #23408E; --pk-navy-lip: #172C66;
  --pk-col: 480px;
  --pk-safe-t: env(safe-area-inset-top, 0px);
}

body.pk-home {
  margin: 0;
  background: var(--pk-page);
  color: var(--pk-ink);
  font-family: var(--font-family-base, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif);
  -webkit-tap-highlight-color: transparent;
}
.pk-home [hidden] { display: none !important; }
.pk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.pk-shell { max-width: var(--pk-col); margin: 0 auto; position: relative; padding-bottom: 96px; overflow-x: clip; }

/* ---------- 통계 줄 ---------- */
.pk-stats-wrap {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: calc(var(--pk-safe-t) + 6px) 12px 4px;
  background: var(--pk-page);
}
.pk-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  min-height: 52px;
  padding: 0 10px;
  background: #fff;
  border: 2px solid #DCE6F2;
  border-radius: 22px;
  box-shadow: 0 2px 8px rgba(37, 48, 63, 0.06);
}
.pk-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  padding: 0 6px;
  border: 0;
  background: transparent;
  color: var(--pk-ink);
  font: inherit;
  font-size: 17px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  cursor: pointer;
}
.pk-stat:active { opacity: 0.6; }
.pk-stat b, .pk-stat span { white-space: nowrap; }
@media (max-width: 340px) {
  .pk-stats { padding-left: 4px; padding-right: 4px; gap: 0; }
  .pk-stat { font-size: 15px; gap: 4px; padding: 0 4px; }
  .pk-stat img, .pk-stat svg { width: 24px; height: 24px; }
  .pk-place-list button { font-size: 13px; }
}
.pk-stat img { width: 28px; height: 28px; object-fit: contain; }
.pk-stat .is-zero { color: var(--pk-ink-soft); }
.pk-stat img.is-dim { opacity: 0.4; }
.pk-goal-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 26px; padding: 0 7px; border-radius: 8px;
  background: #EAF3FF; color: var(--pk-blue-lip); font-size: 14px; font-weight: 800;
  border: 1.5px solid #B9D6FA;
}

/* ---------- 섹션 배너 (스크롤해도 통계 줄 아래에 붙음) ---------- */
.pk-banner-wrap {
  position: sticky;
  top: calc(var(--pk-safe-t) + 66px);  /* 통계 카드(6 + 56 + 4) 바로 아래 */
  z-index: 15;
  background: var(--pk-page);
  padding: 8px 16px 6px;
}
.pk-banner {
  display: flex;
  min-height: 96px;
  border-radius: 16px;
  border-bottom: 3px solid var(--lip);
  background: var(--face);
  overflow: hidden;
  color: var(--ink, #fff);
}
.pk-banner.tone-blue { --face: var(--pk-blue-face); --lip: var(--pk-blue-lip2); }
.pk-banner.tone-teal { --face: var(--pk-teal-face); --lip: var(--pk-teal-lip); }
.pk-banner.tone-purple { --face: var(--pk-purple-face); --lip: var(--pk-purple-lip); }
.pk-banner.tone-orange { --face: var(--pk-orange-face); --lip: var(--pk-orange-lip); }
.pk-banner.tone-navy { --face: var(--pk-navy-face); --lip: var(--pk-navy-lip); }
/* 주제 색(core/learning_path.py TOPIC_HUE, 2026-10-26): 진한 색은 흰 글자, 파스텔은 같은 계열 짙은 글자(--ink).
   --strong = 칩 바탕·숫자 글자·'다음 질문' 글자. 대비: 제목 3:1 이상, 칩·숫자 4.5:1 이상(진한 색 제목 최저 3.5) */
.hue-berry { --face: #D23F86; --lip: #A12A66; --ink: #FFFFFF; --strong: #A12A66; }
.hue-coral { --face: #E5534F; --lip: #B23633; --ink: #FFFFFF; --strong: #B23633; }
.hue-tangerine { --face: #DD6611; --lip: #A94A07; --ink: #FFFFFF; --strong: #A94A07; }
.hue-ocean { --face: #1285BE; --lip: #0B6491; --ink: #FFFFFF; --strong: #0B6491; }
.hue-leaf { --face: #2E9A44; --lip: #1F7232; --ink: #FFFFFF; --strong: #1F7232; }
.hue-grape { --face: #7D52E0; --lip: #5E39B8; --ink: #FFFFFF; --strong: #5E39B8; }
.hue-indigo { --face: #3D4FB0; --lip: #2C3A87; --ink: #FFFFFF; --strong: #2C3A87; }
.hue-teal { --face: #0E8C81; --lip: #0A6A61; --ink: #FFFFFF; --strong: #0A6A61; }
.hue-cocoa { --face: #8E5B3C; --lip: #6C432B; --ink: #FFFFFF; --strong: #6C432B; }
.hue-pink { --face: #FFDCE8; --lip: #F5B6CC; --ink: #9B2254; --strong: #9B2254; }
.hue-rose { --face: #FFDEDC; --lip: #F2B4AF; --ink: #A2302A; --strong: #A2302A; }
.hue-peach { --face: #FFE3CC; --lip: #F4C59C; --ink: #954712; --strong: #954712; }
.hue-lemon { --face: #FFF1B8; --lip: #EDD679; --ink: #775700; --strong: #775700; }
.hue-sky { --face: #D8EDFF; --lip: #A8D2F6; --ink: #145C99; --strong: #145C99; }
.hue-mint { --face: #D2F4E5; --lip: #9DDFC2; --ink: #16674A; --strong: #16674A; }
.hue-lavender { --face: #E8DFFF; --lip: #C8B7F6; --ink: #5331AE; --strong: #5331AE; }
.hue-aqua { --face: #D2F5F7; --lip: #94DEE5; --ink: #0D626B; --strong: #0D626B; }
.hue-sand { --face: #F4E8D6; --lip: #DCC5A2; --ink: #6B4A27; --strong: #6B4A27; }
.pk-banner-text { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 14px 12px 14px 18px; }
.pk-banner-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pk-chip-line { padding: 2px 8px; border-radius: 999px; background: var(--strong, var(--lip)); color: #fff; font-size: 13px; line-height: 18px; font-weight: 800; }
.pk-chip-count { padding: 2px 8px; border-radius: 999px; background: #fff; color: var(--strong, var(--lip)); font-size: 13px; line-height: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pk-banner-title { margin: 0; font-size: 20px; line-height: 26px; font-weight: 800; }
.pk-banner-divider { width: 2px; align-self: stretch; background: var(--lip); }
.pk-banner-art { width: 72px; display: flex; align-items: center; justify-content: center; }
.pk-banner-art img { width: 64px; height: 64px; object-fit: contain; }
.pk-topic-glyph {
  width: 46px; height: 46px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.22); color: var(--ink, #fff);
}

/* ---------- 길 ---------- */
.pk-section-body { position: relative; }
/* 얼음 강(점선 대신): 굽이치는 광택 물줄기 (모양은 path-home.js riverShape, 색은 홈 시안 home_ice_path_mock_01).
   돌처럼 회색이다가, 답한 돌까지 흘러드는 물길만 원래 색(is-lit)으로 켜진다. */
.pk-river { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.pk-rv-edge { fill: #DCE1E6; }
.pk-rv-body { fill: #E7EAEE; }
.pk-rv-mid { fill: #EEF0F3; }
.pk-rv-core { fill: #F4F6F8; }
.pk-rv-sheen { fill: none; stroke: #FFFFFF; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 64 26; opacity: 0.6; }
.pk-rv-edge.is-lit { fill: #5CC6F6; }
.pk-rv-body.is-lit { fill: #8EE3FC; }
.pk-rv-mid.is-lit { fill: #A9EEFC; }
.pk-rv-core.is-lit { fill: #C8F7FD; }
.pk-rv-sheen.is-lit { opacity: 0.95; }
.pk-river-snow { fill: #FFFFFF; stroke: #CFE6F6; stroke-width: 1.5; }
.pk-stone-box { position: absolute; display: flex; align-items: center; justify-content: center; }
/* 돌(2026-10-26 사용자가 고름): UI 키트 03의 동그란 광택 배지 그림(node-<종류>.webp, 160px 정사각형).
   답했거나 지금 차례면 원래 색, 아직이면 같은 배지를 회색으로, 잠김은 회색 자물쇠 배지(node-locked). */
.pk-stone {
  position: relative; width: 72px; height: 72px; padding: 0; border: 0; background: transparent; cursor: pointer;
  border-radius: 50%; transition: transform 0.08s ease; -webkit-tap-highlight-color: transparent;
}
.pk-stone img { width: 72px; height: 72px; object-fit: contain; display: block; pointer-events: none; }
.pk-stone:active { transform: translateY(2px) scale(0.96); }
/* 아직·잠김: 무채색으로 통일(잠김 배지 원본은 테두리 아래에 하늘색 음영이 있어 같은 필터로 뺀다, 2026-10-26) */
.pk-stone.is-grey img, .pk-stone.is-locked img { filter: grayscale(1) brightness(1.08) contrast(0.85); }
.pk-stone:focus-visible { outline: 3px solid var(--pk-blue); outline-offset: 4px; }
.pk-caption {
  position: absolute; transform: translateX(-50%);
  padding: 2px 8px; border-radius: 999px; background: #fff; border: 1.5px solid var(--pk-card-border);
  font-size: 12px; line-height: 16px; font-weight: 800; color: var(--pk-ink-soft); white-space: nowrap; pointer-events: none;
}

/* 현재 돌 위 태그 (통통) */
.pk-tag {
  position: absolute; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  border: 0; padding: 0; background: transparent; cursor: pointer;
  animation: pk-bob 1.3s ease-in-out infinite;
}
.pk-tag-face {
  padding: 6px 14px; border-radius: 12px; border: 2px solid var(--pk-bubble-border); background: #fff;
  font: inherit; font-size: 15px; line-height: 20px; font-weight: 800; color: var(--strong, var(--tone, var(--pk-blue-lip)));
  white-space: nowrap;
}
.pk-tag svg { margin-top: -2px; }
@keyframes pk-bob { 50% { transform: translate(-50%, -4px); } }

/* 펭구 (홈의 유일한 캐릭터). 자리(80~150px)는 말할고래와 같은 계산이고, 하모 그림이 그 칸의
   약 85%만 채우므로 펭구도 칸의 80%로 그려 발밑을 칸 바닥에 맞추고 그림자를 깐다. */
.pk-pengu { position: absolute; pointer-events: none; display: flex; align-items: flex-end; justify-content: center; }
/* 배 탄 펭구: 그림에 배·물결이 있어 그림자 없이 칸을 거의 채움 */
.pk-pengu.is-boat img { width: 94%; height: 94%; margin-bottom: 0; }
.pk-pengu.is-boat::after { display: none; }
/* 섹션을 마치기 전: 무채색 펭구(듀오링고처럼 연한 회색). 섹션을 마치면 원래 색 */
.pk-pengu.is-mono img { filter: grayscale(1) brightness(1.12) contrast(0.82); }
.pk-pengu img { position: relative; z-index: 1; width: 80%; height: 80%; object-fit: contain; object-position: center bottom; margin-bottom: 4%; }
.pk-pengu::after {
  content: ""; position: absolute; left: 24%; right: 24%; bottom: 1%; height: 9%;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(37, 48, 63, 0.16), rgba(37, 48, 63, 0));
}

/* 돌 카드 */
.pk-card {
  position: absolute; z-index: 30; width: min(320px, calc(100% - 32px));
  filter: drop-shadow(0 6px 14px rgba(42, 90, 148, 0.16));
}
.pk-card-arrow { display: block; margin-bottom: -2px; position: relative; z-index: 1; }
.pk-card-body {
  background: #fff; border-radius: 16px; border: 2px solid var(--pk-card-border); border-bottom: 6px solid var(--pk-card-lip);
  padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 6px;
}
.pk-card-head { display: flex; align-items: flex-start; gap: 8px; }
.pk-card-head > div { flex: 1; min-width: 0; }
.pk-card-line { margin: 0; font-size: 13px; line-height: 18px; font-weight: 800; color: var(--pk-ink-soft); }
.pk-card-title { margin: 0; font-size: 18px; line-height: 24px; font-weight: 800; color: var(--pk-ink); }
.pk-card-note { margin: 0; font-size: 14px; line-height: 20px; color: var(--pk-ink-soft); }
.pk-card-close { width: 44px; height: 44px; margin: -8px -12px 0 0; border: 0; background: transparent; color: var(--pk-faint); cursor: pointer; display: flex; align-items: center; justify-content: center; }

/* 버튼 (말할고래 KitButton) */
.pk-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 50px; margin-top: 6px; padding: 0 16px; border-radius: 14px;
  border: 0; border-bottom: 4px solid var(--pk-blue-lip); background: var(--pk-blue); color: #fff;
  font: inherit; font-size: 16px; font-weight: 800; text-decoration: none; cursor: pointer;
}
.pk-btn:active { transform: translateY(2px); border-bottom-width: 2px; }
.pk-btn--go { background: var(--pk-go); border-bottom-color: var(--pk-go-lip); }
.pk-btn--card { background: #fff; color: var(--pk-ink); border: 2px solid var(--pk-card-border); border-bottom: 4px solid var(--pk-card-lip); }
.pk-btn[disabled] { opacity: 0.5; cursor: default; }

/* 길 끝 · 더 연습하기 */
.pk-end, .pk-more { margin: 4px 16px 12px; }
.pk-end-band { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 16px; border-radius: 16px; border: 2px solid var(--pk-card-border); background: #fff; }
.pk-end-band img { width: 40px; height: 40px; object-fit: contain; }
.pk-end-band strong { font-size: 16px; line-height: 22px; }
.pk-more h2 { margin: 18px 4px 10px; font-size: 17px; font-weight: 800; }
.pk-more-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pk-more-item {
  display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 10px 12px; border-radius: 16px;
  border: 2px solid var(--pk-card-border); border-bottom-width: 4px; background: #fff; color: var(--pk-ink); text-decoration: none;
}
.pk-more-item img { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; }
.pk-more-item span { display: flex; flex-direction: column; min-width: 0; }
.pk-more-item strong { font-size: 15px; line-height: 20px; }
.pk-more-item small { font-size: 12.5px; line-height: 17px; color: var(--pk-ink-soft); }
.pk-guest { margin: 12px 16px 0; padding: 14px 16px; border-radius: 16px; background: #EAF3FF; border: 2px solid #B9D6FA; display: flex; gap: 12px; align-items: center; }
.pk-guest img { width: 64px; height: 64px; object-fit: contain; }
.pk-guest p { margin: 0 0 8px; font-size: 14px; line-height: 20px; color: var(--pk-ink); }
.pk-guest .pk-btn { margin: 0; min-height: 44px; font-size: 15px; }
.pk-guest p.pk-guest-login { margin: 8px 0 0; font-size: 13px; color: #5B6B80; }
.pk-guest-login a { color: #1B74DE; font-weight: 700; text-decoration: underline; padding: 6px 2px; }

/* 바로 가기 (아크틱 강남·AI 대화·모의고사) */
.pk-quick { display: flex; gap: 8px; overflow-x: auto; padding: 10px 16px 2px; scrollbar-width: none; }
.pk-quick::-webkit-scrollbar { display: none; }
.pk-quick a {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px 0 6px;
  border-radius: 999px; border: 2px solid var(--pk-card-border); border-bottom-width: 3px; background: #fff;
  color: var(--pk-ink); font-size: 14px; font-weight: 800; text-decoration: none; white-space: nowrap;
}
.pk-quick img { width: 28px; height: 28px; object-fit: contain; }

/* 시작 단계 고르기 (자기평가 배치) */
.pk-place { margin: 10px 16px 0; padding: 14px 14px 12px; border-radius: 16px; border: 2px solid #B9D6FA; border-bottom-width: 4px; background: #F3F8FF; }
.pk-place-head { display: flex; gap: 10px; align-items: center; }
.pk-place-head img { width: 56px; height: 56px; object-fit: contain; flex-shrink: 0; }
.pk-place-head p { margin: 0; font-size: 15px; line-height: 21px; font-weight: 800; }
.pk-place-head small { display: block; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--pk-ink-soft); }
.pk-place-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.pk-place-list button {
  min-height: 52px; padding: 4px 2px; border-radius: 12px; border: 2px solid var(--pk-card-border); border-bottom-width: 4px;
  background: #fff; color: var(--pk-ink); font: inherit; font-size: 15px; font-weight: 800; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1;
}
.pk-place-list button small { font-size: 11px; font-weight: 700; color: var(--pk-ink-soft); margin-top: 3px; }
.pk-place-list button[aria-pressed="true"] { border-color: var(--pk-blue); background: #EAF3FF; color: var(--pk-blue-lip); }
.pk-place-skip { display: block; margin: 8px auto 0; min-height: 36px; border: 0; background: none; color: var(--pk-ink-soft); font: inherit; font-size: 13px; font-weight: 700; text-decoration: underline; cursor: pointer; }

/* 단계 구분선: 단계가 바뀌는 섹션 위 */
.pk-tier-gate { display: flex; align-items: center; gap: 10px; margin: 18px 16px 4px; color: var(--pk-ink-soft); font-size: 13px; font-weight: 800; }
.pk-tier-gate::before, .pk-tier-gate::after { content: ""; flex: 1; height: 2px; background: var(--pk-divider); }
.pk-placed-note { margin: -2px 16px 0; font-size: 12.5px; color: var(--pk-ink-soft); text-align: center; }
/* 강이 배너·구분선 뒤로 이어져 지나가므로 글자만 흰 바탕으로 강 위에 */
.pk-tier-gate, .pk-placed-note { position: relative; z-index: 2; }
.pk-tier-gate span, .pk-placed-note span { background: var(--pk-page); padding: 2px 8px; border-radius: 999px; }

/* 맨 위로 */
.pk-top {
  position: fixed; right: max(16px, calc(50vw - var(--pk-col) / 2 + 16px)); bottom: calc(env(safe-area-inset-bottom, 0px) + 88px); z-index: 25;
  width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--pk-card-border); border-bottom-width: 4px;
  background: #fff; color: var(--pk-ink-soft); display: flex; align-items: center; justify-content: center; cursor: pointer;
}

/* 불러오는 중 */
.pk-skeleton-banner { height: 96px; margin: 8px 16px; border-radius: 16px; background: var(--pk-locked-face); }
.pk-skeleton-stone { width: 72px; height: 72px; border-radius: 50%; background: var(--pk-locked-face); margin: 20px auto 0; }

@media (prefers-reduced-motion: reduce) {
  .pk-tag { animation: none; }
}