/* ============================================================
   PINEHILL ENGLISH — 집중이 잘 되는 화면
   ------------------------------------------------------------
   ★ 왜 이 파일이 따로 있나요

     교실 장식과 배움을 살펴본 연구들이 한쪽을 가리킵니다.
     "장식이 많은 교실에서 7~12세 아이들은 선생님에게 덜 집중했고
      학습 점수가 떨어졌다. 자폐 스펙트럼 아이에게는 더 뚜렷했다."
     유치원 실험에서는 **교육과 관련된 장식**조차 과하면 과학 수업
     성과를 떨어뜨렸습니다.

     그래서 이 홈페이지는 자리마다 다르게 꾸밉니다.

       첫 화면 · 홈 · 목록  → 포스트모던 꾸밈 그대로 (pm.css)
       공부하는 자리         → 이 파일이 꾸밈을 덜어냅니다 (calm)
       시험 보는 중          → 메뉴까지 치웁니다 (testing)

   ★ 색은 어떻게 쓰나요
     파란 계열이 주의력에 유리하다는 실험이 있습니다(대학생 160명,
     VR, 뇌파·심박 측정). 다만 '파랗게 칠하면 집중된다' 는 뜻이 아니라
     **넓은 면은 차분하게 두고, 색은 뜻이 있는 곳에만** 써야 합니다.
     그래서 조용한 화면에서는 파랑을 '지금 보는 것 · 맞음 · 틀림 ·
     눌러야 할 단추' 에만 남기고 나머지는 회백색으로 내립니다.

   ★ 여기 들어 있는 것
       calm          공부·시험 화면에서 꾸밈 빼기
       testing       시험 중 메뉴·꼬리말 숨기기
       focus         집중 모드 (단추로 켭니다)
       one           한 낱말씩 보기
       data-theme    눈이 편한 바탕 (기본 · 종이색 · 어두운 화면)
   ============================================================ */

/* ============================================================
   1. 조용한 화면 — 꾸밈 덜어내기
   ============================================================ */
body.calm.pm .card,
body.calm.pm .empty-box,
body.calm.pm .q-card,
body.calm.pm .rv,
body.calm.pm .study-bar{
  box-shadow:0 1px 2px rgba(20,28,43,.04), 0 3px 10px rgba(20,28,43,.05);
  border-color:var(--line);
}
body.calm.pm .stat{
  box-shadow:0 1px 2px rgba(20,28,43,.04);
  border-color:var(--line);
}
/* 숫자 뒤 동그라미 · 번호표 같은 장식은 빼둡니다 */
body.calm.pm .stat::after{ display:none; }
body.calm.pm .btn-solid,
body.calm.pm .btn-outline{ box-shadow:none; }
body.calm.pm .btn-solid:hover,
body.calm.pm .btn-outline:hover{ transform:none; box-shadow:none; }
body.calm.pm .btn-lg{ box-shadow:none; }
body.calm.pm .main-nav a.on{ box-shadow:none; }
body.calm.pm .avatar{ box-shadow:none; border-width:1px; }
body.calm.pm .page-head{ border-bottom-width:1px; border-bottom-color:var(--line); }
body.calm.pm .site-head{ border-bottom-width:1px; border-bottom-color:var(--line); }
body.calm.pm .site-foot{ border-top-width:1px; border-top-color:var(--line); }
body.calm.pm .page-head h1{ letter-spacing:-.02em; }
body.calm.pm .eyebrow{ background:none; color:var(--ink-faint); padding:0; }

/* 읽는 자리는 넉넉하게 */
body.calm .word-list li{ padding:16px 4px; }
body.calm .word-list .ko{ line-height:1.8; }

/* ============================================================
   2. 시험 보는 중 — 메뉴를 치웁니다
   ------------------------------------------------------------
   예전에는 시험 화면에도 위쪽 메뉴와 🔔 빨간 숫자가 그대로 있었습니다.
   빨간 점은 눈이 가장 먼저 쫓는 것이라, 문제를 푸는 동안 계속
   시선을 끌어당깁니다. 시험이 끝나면 다시 나옵니다.
   ============================================================ */
body.testing .site-head,
body.testing .site-foot,
body.testing .admin-strip{ display:none; }
body.testing main{ padding-top:0; }
body.testing .exam-top{ top:0; }

/* 시험 중에도 나가는 길은 있어야 합니다 — 작게 둡니다 */
.test-exit{
  display:inline-flex; align-items:center; gap:5px;
  font-size:13px; color:var(--ink-faint); text-decoration:none;
  padding:4px 8px; border-radius:6px;
}
.test-exit:hover{ background:var(--surface-2); color:var(--ink-soft); }

/* ============================================================
   3. 집중 모드 — 단추로 켭니다
   ============================================================ */
.focus-bar{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 13px; border-radius:8px; cursor:pointer;
  border:1px solid var(--line-2); background:var(--surface);
  font-family:inherit; font-size:13.5px; font-weight:700; color:var(--ink-soft);
}
.focus-bar:hover{ border-color:var(--brand); color:var(--brand); }
.focus-bar.is-on{ background:var(--brand); border-color:var(--brand); color:#fff; }

/* 집중 거리 — '집중 모드 · 한 낱말씩 · 바탕' 이 놓이는 줄
   가리기 단추와 섞이면 줄이 길어져 오히려 산만해서 한 줄 아래에 둡니다 */
.calm-bar{
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
  margin:-6px 0 18px; padding:0 2px;
}
.calm-bar .lbl{ font-size:12.5px; color:var(--ink-faint); font-weight:600; }
.calm-bar .theme-pick{ margin-left:auto; }
@media (max-width:640px){ .calm-bar .theme-pick{ margin-left:0; } }

body.focus .calm-bar .theme-pick{ margin-left:auto; }

body.focus .site-head,
body.focus .site-foot,
body.focus .page-head .page-head-right,
body.focus .tag-line,
body.focus .stat-row{ display:none; }
body.focus .pad{ padding-top:18px; }
body.focus .wrap{ max-width:820px; }        /* 글 줄이 너무 길면 눈이 줄을 잃습니다 */
body.focus .card{ box-shadow:none; border-color:var(--line); }

/* 집중 모드에서 빠져나오는 길 — 화면 오른쪽 아래에 늘 있습니다 */
.focus-out{
  display:none; position:fixed; right:16px; bottom:16px; z-index:80;
  padding:10px 16px; border-radius:999px; border:1px solid var(--line-2);
  background:var(--surface); color:var(--ink-soft);
  font-family:inherit; font-size:13.5px; font-weight:700; cursor:pointer;
  box-shadow:0 2px 10px rgba(20,28,43,.14);
}
body.focus .focus-out{ display:inline-flex; }
.focus-out:hover{ border-color:var(--brand); color:var(--brand); }

/* ============================================================
   4. 한 낱말씩 보기
   ------------------------------------------------------------
   목록을 죽 훑으면 눈이 바쁩니다. 한 번에 하나만 크게 두면
   '지금 이 낱말' 에만 마음이 갑니다.
   ============================================================ */
.one-wrap{ display:none; }
body.one .one-wrap{ display:block; }
/* 목록은 통째로 치웁니다 — 목록만 숨기면 빈 흰 칸이 아래에 남습니다 */
body.one .word-card{ display:none; }
body.one #wordList{ display:none; }
body.one .study-bar [data-shuffle],
body.one .study-bar .speak-all{ display:none; }

.one-card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-l); box-shadow:var(--shadow);
  padding:clamp(30px,6vw,64px) 24px; text-align:center;
  min-height:clamp(250px,42vh,360px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
}
.one-card .one-en{
  font-size:clamp(30px,6vw,52px); font-weight:800; letter-spacing:-.03em;
  line-height:1.2; word-break:break-word; color:var(--ink);
}
/* 🔊 낱말이 크니 단추도 그만큼 키웁니다 (손가락으로 누를 수 있게) */
.has-tts .one-card .one-en .speak{
  width:38px; height:38px; font-size:18px; margin-left:12px; vertical-align:middle;
}
.one-card .one-pos{ font-size:14px; color:var(--ink-faint); }
.one-card .one-ko{
  font-size:clamp(17px,2.6vw,24px); color:var(--brand-dk); font-weight:700;
  line-height:1.6; max-width:24em;
}
.one-card .one-ex{
  font-size:15px; color:var(--ink-soft); font-style:italic; line-height:1.7;
  max-width:30em; margin-top:2px;
}
/* 가린 자리 — 누르면 보입니다 */
.one-card .is-veil{
  background:var(--surface-2); color:transparent; border-radius:8px;
  cursor:pointer; user-select:none; min-width:6em; display:inline-block;
}
.one-card .is-veil::after{
  content:'눌러서 보기'; display:block; font-size:14px; font-weight:600;
  color:var(--ink-faint); letter-spacing:0;
}
.one-card .is-veil.show{ background:none; color:inherit; }
.one-card .is-veil.show::after{ display:none; }

.one-nav{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin-top:16px; flex-wrap:wrap;
}
.one-nav .one-at{
  font-family:var(--font-mono); font-size:14px; color:var(--ink-faint);
  min-width:5.5em; text-align:center;
}
.one-dots{
  display:flex; gap:4px; justify-content:center; flex-wrap:wrap;
  margin-top:12px; max-width:560px; margin-inline:auto;
}
.one-dots i{
  width:6px; height:6px; border-radius:50%; background:var(--line-2); display:block;
}
.one-dots i.on{ background:var(--brand); }
.one-dots i.seen{ background:var(--brand-lt); }

/* ============================================================
   5. 눈이 편한 바탕
   ------------------------------------------------------------
   아주 밝은 흰 화면을 오래 보면 눈이 쉽게 피로합니다.
   '종이색' 은 밝기를 조금 낮춘 따뜻한 흰색,
   '어두운 화면' 은 밤에 보기 좋게 만든 것입니다.
   ★ 글자 대비는 두 바탕 모두 기준(4.5:1) 위로 맞췄습니다.
   ============================================================ */
.theme-pick{ display:inline-flex; gap:3px; padding:3px;
  border:1px solid var(--line-2); border-radius:9px; background:var(--surface); }
.theme-pick button{
  border:none; background:none; cursor:pointer; font-family:inherit;
  font-size:13px; font-weight:700; color:var(--ink-soft);
  padding:5px 11px; border-radius:6px; line-height:1.3;
}
.theme-pick button:hover{ background:var(--surface-2); color:var(--ink); }
.theme-pick button.on{ background:var(--brand); color:#fff; }

/* ---- 종이색 ---- */
html[data-theme="paper"]{
  --bg:        #F5F1E8;
  --surface:   #FBF8F1;
  --surface-2: #EDE7DA;
  --tint:      #E5E8F0;
  --line:      #E0D9CB;
  --line-2:    #C9C0AE;
  --ink:       #1E1B16;
  --ink-soft:  #4E4941;
  --ink-faint: #6B655B;
}
/* ---- 어두운 화면 ---- */
html[data-theme="night"]{
  --bg:        #10151E;
  --surface:   #172032;
  --surface-2: #1F2B41;
  --tint:      #1D2F4E;
  --line:      #293954;
  --line-2:    #3A4C6B;
  --ink:       #E8EDF6;
  --ink-soft:  #B3BFD3;
  --ink-faint: #8C9AB3;
  --brand:     #6D9EE8;   /* 어두운 바탕에서는 밝은 파랑이 또렷합니다 */
  --brand-dk:  #9DBEF2;
  --brand-lt:  #4C7FD4;
  --accent:    #8FB4EE;
  --ok:        #4FC79A;   --ok-bg:#16332A;
  --no:        #F08A85;   --no-bg:#3A2020;
  --warn:      #E3B559;   --warn-bg:#352B14;
  --shadow:    0 1px 2px rgba(0,0,0,.35), 0 4px 14px rgba(0,0,0,.4);
  --shadow-l:  0 2px 6px rgba(0,0,0,.4), 0 14px 34px rgba(0,0,0,.45);
}
html[data-theme="night"] body{ background:var(--bg); }

/* ★ 어두운 화면에서 '파란 바탕 + 흰 글자' 는 뒤집어야 읽힙니다.
     낮에는 파랑이 진해서 흰 글자가 또렷하지만, 밤에는 파랑을 밝게 올렸기 때문에
     흰 글자를 그대로 두면 흐려집니다. 그래서 그런 자리만 글자를 어둡게 바꿉니다.
     (아래 색 #0C1522 는 밝은 파랑 위에서 대비 7 : 1 이 넘습니다) */
html[data-theme="night"] .btn-solid,
html[data-theme="night"] .avatar,
html[data-theme="night"] .admin-strip,
html[data-theme="night"] .seg button.on,
html[data-theme="night"] .theme-pick button.on,
html[data-theme="night"] .focus-bar.is-on,
html[data-theme="night"] .has-tts .speak.is-on,
html[data-theme="night"] .choice:has(input:checked) .mark,
html[data-theme="night"] table.data thead th,
html[data-theme="night"] .pm .eyebrow,
html[data-theme="night"] .pm .main-nav a.on,
html[data-theme="night"] .pm .q-card .q-no,
html[data-theme="night"] .pm .seg button.on,
html[data-theme="night"] .pm table.data thead th,
html[data-theme="night"] .pm-feat .card::before{ color:#0C1522; }
/* 첫 화면의 흰 이름표 — 밤에는 파랑을 밝게 올려서 흰 바탕 위에서 흐려집니다 */
html[data-theme="night"] .pm-kicker{ color:#101B30; }
/* 알림 쪽지는 바탕이 '글자색' 이라 밤에는 밝습니다 — 글자를 어둡게 */
html[data-theme="night"] .toast{ color:#0C1522; }
html[data-theme="night"] .pm-hero{ background:#101B30; }
html[data-theme="night"] .pill-word { background:#1D2F4E; color:#9DBEF2; }
html[data-theme="night"] .pill-idiom{ background:#17313A; color:#79C2D8; }
html[data-theme="night"] .word-list.hide-ko .ko .m,
html[data-theme="night"] .word-list.hide-en .en b,
html[data-theme="night"] .one-card .is-veil{ background:var(--surface-2); }

/* 어두운 화면에서는 종이처럼 보여야 하는 것만 흰 바탕을 지킵니다 */
html[data-theme="night"] .rp,
html[data-theme="night"] .pp{ background:#fff; color:#141C2B; }

/* ============================================================
   6. 움직임 줄이기
   ------------------------------------------------------------
   기기 설정에서 '동작 줄이기' 를 켜 둔 분에게는 움직임을 없앱니다.
   멀미나 주의 분산을 겪는 분들이 있습니다.
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}

/* ---------- 인쇄 ---------- */
@media print{
  .focus-bar, .focus-out, .theme-pick, .test-exit,
  .one-wrap, .one-nav, .one-dots{ display:none !important; }
  body.one .word-card{ display:block !important; }
  body.one #wordList{ display:block !important; }
  html[data-theme="paper"], html[data-theme="night"]{
    --bg:#fff; --surface:#fff; --surface-2:#F2F2F2;
    --ink:#111; --ink-soft:#333; --ink-faint:#555;
    --line:#DDD; --line-2:#BBB;
  }
}