/* ============================================================
   PINEHILL ENGLISH — 포스트모던 꾸밈
   ------------------------------------------------------------
   ★ 이 파일은 학생·학부모가 보는 앞쪽 화면에만 붙습니다.
     각 화면 맨 앞에서 page_style('assets/pm.css') 로 부릅니다.
     선생님·관리자 화면과 인쇄물(시험지·상장·성적표)에는 붙지 않습니다.

   ★ 무엇이 달라지나요
     · 그림자가 흐릿한 번짐이 아니라 **딱 떨어지는 색 덩어리**입니다
     · 테두리가 굵고, 모서리가 덜 둥급니다
     · 제목이 크고 자간이 좁습니다
     · 학원 벽에 있는 것들을 따온 무늬가 들어갑니다
         - 세계시계 여섯 개  → 동그라미 여섯 개 띠
         - 지구본           → 큰 원
         - 방패 로고        → 각진 덩어리

   ★ 색은 여기서 정하지 않습니다
     모두 style.css 의 --brand 계열을 그대로 씁니다.
     벽 색을 바꾸시면 이 꾸밈도 따라 바뀝니다.

   ★ 읽기 쉬움이 먼저입니다
     공부하는 화면이라 '멋'보다 '또렷함'이 앞섭니다.
     넓은 면(카드·숫자칸)의 선과 그림자는 옅게 두고,
     힘은 제목·단추·표 머리처럼 '누르거나 찾는 곳'에만 줍니다.
   ============================================================ */

:root{
  /* ★ 꾸밈의 세기 — 여기 네 줄로 조절합니다
     처음에는 테두리 2px · 그림자 5px 로 했는데,
     한 화면에 카드가 여럿 놓이니 굵은 선이 글자와 다투어
     "잘 안 보인다" 는 말을 들었습니다. 그래서 선은 가늘게,
     그림자는 옅은 파랑으로 낮추고, 대신 제목과 단추에서만
     힘을 주는 쪽으로 바꿨습니다. */
  --pm-edge:  1.5px;                      /* 테두리 굵기 */
  --pm-pop:   4px;                        /* 그림자가 밀려난 거리 */
  --pm-r:     12px;                       /* 모서리 */
  --pm-ink:   var(--brand-dk);            /* 테두리·그림자 색 (단추·제목) */
  --pm-soft:  #C9D6EC;                    /* 넓은 면에 쓰는 옅은 그림자 */
}

/* ---------- 딱 떨어지는 그림자 ---------- */
/* 넓은 면(카드)은 옅은 파랑 그림자 — 글을 읽는 자리라 조용해야 합니다 */
.pm .card,
.pm .empty-box,
.pm .q-card,
.pm .rv{
  border:var(--pm-edge) solid var(--pm-soft);
  border-radius:var(--pm-r);
  box-shadow:var(--pm-pop) var(--pm-pop) 0 var(--pm-soft);
  transition:transform .12s ease, box-shadow .12s ease;
}
.pm .empty-box{ border-style:dashed; }

/* 누를 수 있는 카드만 살짝 움직입니다 */
.pm a.card:hover,
.pm .card a.main:hover{ text-decoration:none; }
.pm a.card:hover{
  transform:translate(-2px,-2px);
  border-color:var(--brand);
  box-shadow:calc(var(--pm-pop) + 2px) calc(var(--pm-pop) + 2px) 0 var(--brand-lt);
}

/* ---------- 단추 ---------- */
.pm .btn{
  border-width:var(--pm-edge);
  border-radius:8px;
  font-weight:800;
  letter-spacing:-.01em;
  transition:transform .1s ease, box-shadow .1s ease, background .13s;
}
.pm .btn-solid,
.pm .btn-outline{
  border-color:var(--pm-ink);
  box-shadow:3px 3px 0 var(--pm-ink);
}
.pm .btn-solid:hover,
.pm .btn-outline:hover{ transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--pm-ink); }
.pm .btn-solid:active,
.pm .btn-outline:active{ transform:translate(3px,3px); box-shadow:0 0 0 var(--pm-ink); }
.pm .btn-lg{ box-shadow:5px 5px 0 var(--pm-ink); }
.pm .btn-lg:hover{ box-shadow:7px 7px 0 var(--pm-ink); }

/* ---------- 제목 ---------- */
.pm .page-head{
  align-items:flex-end;
  border-bottom:2px solid var(--brand);
  padding-bottom:14px;
}
.pm .page-head h1{
  font-size:clamp(25px,3.6vw,38px);
  font-weight:800;
  letter-spacing:-.035em;
  line-height:1.15;
}
.pm .eyebrow{
  display:inline-block;
  background:var(--brand); color:#fff;
  font-weight:800; letter-spacing:.18em;
  padding:3px 9px 2px; border-radius:4px;
  margin-bottom:9px;
}
.pm .section-title{
  font-size:18px; font-weight:800; letter-spacing:-.025em;
  padding-left:13px; position:relative;
}
.pm .section-title::before{
  content:''; position:absolute; left:0; top:4px; bottom:4px; width:5px;
  background:var(--brand); border-radius:3px;
}

/* ---------- 머리말 · 꼬리말 ---------- */
.pm .site-head{ border-bottom:2px solid var(--brand); }
.pm .main-nav a{ font-weight:700; border-radius:7px; }
.pm .main-nav a.on{
  background:var(--brand); color:#fff;
  box-shadow:2px 2px 0 var(--pm-ink);
}
.pm .avatar{ border:2px solid var(--pm-ink); box-shadow:2px 2px 0 var(--pm-ink); }
.pm .site-foot{ border-top:2px solid var(--brand); }

/* ---------- 숫자 칸 (홈 · 성적) ---------- */
.pm .stat{
  border:var(--pm-edge) solid var(--pm-soft);
  border-radius:var(--pm-r);
  box-shadow:var(--pm-pop) var(--pm-pop) 0 var(--pm-soft);
  position:relative; overflow:hidden;
}
.pm .stat .v,
.pm .stat b,
.pm .stat strong{
  font-weight:800; letter-spacing:-.045em;
}
/* 숫자 뒤에 옅은 큰 동그라미 — 벽의 지구본에서 따왔습니다 */
.pm .stat::after{
  content:''; position:absolute; right:-26px; bottom:-30px;
  width:86px; height:86px; border-radius:50%;
  background:var(--tint); z-index:0;
}
.pm .stat > *{ position:relative; z-index:1; }
.pm a.stat:hover{ transform:translate(-2px,-2px); border-color:var(--brand);
  box-shadow:calc(var(--pm-pop) + 2px) calc(var(--pm-pop) + 2px) 0 var(--brand-lt); }

/* ---------- 알약 ---------- */
.pm .pill{
  border:1.5px solid currentColor; font-weight:800; letter-spacing:-.01em;
  border-radius:999px;
}

/* ---------- 표 ---------- */
.pm table.data{ border-collapse:separate; border-spacing:0; }
.pm table.data thead th{
  background:var(--brand); color:#fff; font-weight:800;
  border-bottom:var(--pm-edge) solid var(--pm-ink);
}
.pm table.data tbody tr:hover td{ background:var(--tint); }

/* ---------- 시험 · 연습 문제 ---------- */
.pm .q-card .q-no{
  background:var(--brand); color:#fff; font-weight:800;
  padding:2px 8px; border-radius:5px;
}
.pm .q-stem{ font-weight:800; letter-spacing:-.03em; }
.pm .choice{
  border-width:var(--pm-edge); border-radius:9px;
  transition:transform .1s ease, box-shadow .1s ease;
}
.pm .choice:hover{ border-color:var(--brand); }
.pm .choice .mark{ font-weight:800; }
.pm .choice:has(input:checked){
  border-color:var(--pm-ink); box-shadow:3px 3px 0 var(--pm-ink);
}

/* ---------- 가리고 외우기 줄 ---------- */
.pm .study-bar{
  border:var(--pm-edge) solid var(--pm-soft);
  border-radius:var(--pm-r);
  box-shadow:var(--pm-pop) var(--pm-pop) 0 var(--pm-soft);
}
.pm .seg{ border-width:var(--pm-edge); border-color:var(--pm-ink); border-radius:8px; }
.pm .seg button{ font-weight:700; }
.pm .seg button.on{ background:var(--brand); color:#fff; }

/* ============================================================
   ★ 손님 화면 (로그인 전) — 학원 벽을 그대로 옮겨온 자리
   ============================================================ */
.pm-hero{
  position:relative; overflow:hidden;
  background:var(--brand-dk);
  border-bottom:3px solid var(--pm-ink);
  color:#fff;
  padding:clamp(40px,7vw,78px) 0 clamp(44px,8vw,86px);
}
/* 벽에 걸린 세계시계 여섯 개 */
.pm-clocks{
  position:absolute; top:clamp(18px,3vw,34px); right:clamp(14px,4vw,60px);
  display:flex; gap:clamp(8px,1.4vw,18px); opacity:.42; pointer-events:none;
}
.pm-clocks i{
  display:block; width:clamp(26px,3.4vw,46px); height:clamp(26px,3.4vw,46px);
  border:2.5px solid #fff; border-radius:50%;
}
.pm-clocks i:nth-child(2){ opacity:.85; }
.pm-clocks i:nth-child(3){ opacity:.7; }
.pm-clocks i:nth-child(4){ opacity:.55; }
.pm-clocks i:nth-child(5){ opacity:.42; }
.pm-clocks i:nth-child(6){ opacity:.3; }
/* 바닥에 놓인 지구본 */
.pm-hero::after{
  content:''; position:absolute; left:-90px; bottom:-130px;
  width:300px; height:300px; border-radius:50%;
  border:3px solid rgba(255,255,255,.16);
  background:radial-gradient(circle at 34% 30%, rgba(255,255,255,.10), transparent 62%);
  pointer-events:none;
}
.pm-hero .wrap{ position:relative; z-index:2; }

.pm-kicker{
  display:inline-block; background:#fff; color:var(--brand-dk);
  font-weight:800; font-size:12px; letter-spacing:.2em;
  padding:5px 12px 4px; border-radius:5px; margin-bottom:18px;
  box-shadow:3px 3px 0 rgba(0,0,0,.28);
}
.pm-hero h1{
  font-size:clamp(30px,6.4vw,62px); font-weight:800;
  letter-spacing:-.045em; line-height:1.08; margin:0 0 18px;
  max-width:16em;
}
.pm-hero h1 em{
  font-style:normal; position:relative; white-space:nowrap;
  background:#fff; color:var(--brand-dk);
  padding:0 .16em; border-radius:6px;
  box-shadow:4px 4px 0 rgba(0,0,0,.28);
}
.pm-hero p.lead{
  font-size:clamp(15.5px,2vw,19px); line-height:1.8;
  color:rgba(255,255,255,.95); max-width:32em; margin:0 0 30px;
}
.pm-cta{ display:flex; gap:12px; flex-wrap:wrap; }
.pm-cta .btn{ border-color:#fff; box-shadow:4px 4px 0 rgba(0,0,0,.3); }
.pm-cta .btn-solid{ background:#fff; color:var(--brand-dk); }
.pm-cta .btn-solid:hover{ background:var(--tint); color:var(--brand-dk); }
.pm-cta .btn-outline{ background:transparent; color:#fff; }
.pm-cta .btn-outline:hover{ background:rgba(255,255,255,.12); color:#fff; border-color:#fff; }

/* 벽과 바닥이 만나는 자리 — 굵은 띠 */
.pm-band{
  height:14px; background:var(--brand);
  border-bottom:3px solid var(--pm-ink);
  background-image:repeating-linear-gradient(
    -45deg, rgba(255,255,255,.22) 0 8px, transparent 8px 20px);
}

/* 소개 카드 셋 — 숫자를 크게 */
.pm-feat{ counter-reset:pmf; }
.pm-feat .card{ position:relative; padding-top:30px; }
.pm-feat .card::before{
  counter-increment:pmf; content:'0' counter(pmf);
  position:absolute; top:-16px; left:18px;
  background:var(--brand); color:#fff;
  font-weight:800; font-size:14px; letter-spacing:.04em;
  padding:5px 11px; border-radius:6px;
  border:1.5px solid var(--brand-dk);
  box-shadow:3px 3px 0 var(--brand-dk);
}
.pm-feat .card h3{ font-size:18px; font-weight:800; letter-spacing:-.03em; }

/* ---------- 읽는 자리는 넉넉하게 ---------- */
.pm .card .desc,
.pm .rv-line,
.pm .empty-box .d{ line-height:1.85; }
.pm .word-list .ko{ line-height:1.75; }

/* ---------- 좁은 화면 ---------- */
@media (max-width:640px){
  :root{ --pm-pop:4px; }
  .pm-clocks{ display:none; }
  .pm-hero::after{ width:200px; height:200px; left:-70px; bottom:-100px; }
  .pm .page-head h1{ letter-spacing:-.03em; }
}

/* ---------- 인쇄 ----------
   종이에는 꾸밈을 모두 뺍니다. 두꺼운 테두리와 색 덩어리는
   잉크만 먹고 읽기에는 도움이 되지 않습니다. */
@media print{
  .pm .card, .pm .empty-box, .pm .q-card, .pm .rv,
  .pm .stat, .pm .study-bar, .pm .btn{
    box-shadow:none !important; border-width:1px !important;
  }
  .pm .stat::after{ display:none !important; }
  .pm-hero, .pm-band, .pm-clocks{ display:none !important; }
}