/* ═══════════════════════════════════════════════════════════════════
   독감 안내창 — 창 하나의 모양

   ⚠ 이 파일은 홈페이지 말고 다른 화면에서도 그대로 불러다 씁니다.
      베껴 두 벌로 만들면 한쪽만 고쳐져 어긋납니다 — 여기서만 고치십시오.

   ⚠ 글씨는 전부 calc(… * var(--fs)) 입니다.
      --fs 하나만 바꾸면 창 안 글씨가 한꺼번에 커지고 작아집니다
      (지금 값은 flu.js 의 WANT_FS 입니다).


   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   첫 화면에 띄울 때의 자리

   ⚠ 뒤를 어둡게 하지 않는 「그림 창」 방식입니다.
      그래서 덮개(.popup-overlay)를 쓰지 않고 자리만 잡습니다.
   ⚠ z-index 는 140 — 기존 팝업 덮개(150)보다 아래, 상단 메뉴(60)보다 위입니다.
      진료일정·클리닉 창이 닫힌 뒤에 뜨므로 겹칠 일은 없지만,
      혹시 겹치더라도 먼저 뜬 창이 위에 있어야 합니다.
   ⚠ 실제 자리(가로 83.9% · 세로 44.9%)는 flu.js 가 잽니다 —
      화면이 작을 때 상단 메뉴를 가리거나 아래가 잘리지 않게 붙잡아야 해서입니다.
   ═══════════════════════════════════════════════════════════════════ */
.flu-pop{
  position:fixed; z-index:140;
  opacity:0; transform:translateY(10px);
  transition:opacity .22s var(--ease,ease), transform .22s var(--ease,ease);
  pointer-events:none;
}
.flu-pop.is-open{ opacity:1; transform:none; pointer-events:auto; }
.flu-pop .pop{ width:100%; max-height:inherit; }

/* 맨 위 띠를 잡고 끌어 옮기실 수 있습니다 — 창이 보고 싶은 것을 가릴 때.
   ⚠ touch-action:none 은 **띠에만** 줍니다. 창 전체에 주면 안쪽 일정을
      손가락으로 밀어 볼 수 없습니다. */
.flu-pop .pop-band{ cursor:grab; touch-action:none; user-select:none; }
.flu-pop.is-drag .pop-band{ cursor:grabbing; }
.flu-pop.is-drag{ transition:none; }          /* 끄는 동안 따라오는 느낌이 굼뜨지 않게 */
.flu-pop.is-drag .pop{ box-shadow:0 26px 64px rgba(88,61,35,.26); }

.pop{
  --fs:1;
  --ink:#332a23; --dim:#71665C; --line:#e6e0d8; --paper:#faf7f3;
  --o-date:#a8480a;      /* 날짜 — 흰 바탕에서 5.84:1 */

  /* 띠 — 사이트 기본 주황 그대로입니다(--o-500 ~ --o-700).
     ⚠ 흰 글씨 대비가 2.59:1 로 WCAG 기준에는 못 미칩니다. 알고 두는 것입니다.
        한 번 어둡게 바꿨다가 너무 칙칙해 보여 되돌렸습니다(2026-09-12).
        띠에 있는 글자는 「독감 예방접종」 다섯 글자 — **무슨 안내인가**를 알리는 머리글뿐이고,
        정작 읽어야 할 것(대상·날짜·상태)은 전부 아래 흰 바탕에 14:1 로 있습니다.
        나중에 이 파일을 손보는 사람이 「대비가 낮다」며 또 어둡게 바꾸지 않도록 적어 둡니다. */
  --o-band1:#f58220;
  --o-band2:#e06c10;
  --o-band3:#a8480a;
  --live:#1c6440;        /* 「접종 중」 — style.css 의 .popup-now.is-open 과 같은 색 */

  /* position:relative — 위의 부드러운 원 둘과 아래 .pop-bar 가 이 상자를 기준으로 놓입니다 */
  position:relative;
  border-radius:18px; overflow:hidden; color:#fff;
  /* ⚠ 창 **전체**가 주황 포스터입니다 — 그림 바탕 위에 글씨가 얹히는 모양입니다 (2026-09-13).
        앞 판은 주황 머리 + 흰 몸통으로 갈라 놔서 포스터가 아니라 카드가 됐습니다. */
  background:linear-gradient(135deg,var(--o-band1) 0%,var(--o-band2) 52%,var(--o-band3) 100%);
  box-shadow:0 18px 44px rgba(88,61,35,.16);
  display:flex; flex-direction:column; position:relative;
  font-family:-apple-system,"Segoe UI","Malgun Gothic",sans-serif;
  line-height:1.7;
}
/* 소아과라 뾰족한 것을 피했습니다 — svg 의 부드러운 원 둘 */
.pop::before,
.pop::after{ content:''; position:absolute; border-radius:50%; background:#fff;
             pointer-events:none; }
.pop::before{ width:190px; height:190px; right:-46px; top:26%;  opacity:.07; }
.pop::after { width:118px; height:118px; left:-34px;  top:-40px; opacity:.06; }
.pop > *{ flex:0 0 auto; position:relative; }

/* ① 머리 — 처음 만든 포스터 그림(popup-flu.svg) 모양 그대로입니다 (2026-09-13).
      주황 그라데이션 · 부드러운 원 둘 · 주사기 · FLU VACCINE · 큰 제목 두 줄.
      ⚠ 이 덩이가 **끌기 손잡이**입니다(flu.js 의 makeDraggable 이 .pop-band 를 찾습니다).
      ⚠ 펼치면 아래 .pop.is-all 규칙이 이걸 얇은 띠로 줄입니다 —
         안 그러면 표까지 950px 이 넘어 노트북(768px)에서 크게 잘립니다. */
.pop-band{ text-align:center; color:#fff;
           padding:calc(16px * var(--fs)) 20px calc(12px * var(--fs)); }

.pop-shot{ display:block; line-height:0; }
.pop-shot svg{ display:inline-block; }
.pop-shot-sm{ display:none; line-height:0; }

.pop-eyebrow{ margin:calc(2px * var(--fs)) 0 calc(6px * var(--fs));
              font-size:calc(11.5px * var(--fs)); font-weight:700;
              letter-spacing:.38em; opacity:.82; }

.pop-title{ margin:0; letter-spacing:-.045em; line-height:1.18; }
.pop-title b{ display:block; font-size:calc(30px * var(--fs)); font-weight:800; }
.pop-title em{ display:block; font-style:normal;
               font-size:calc(30px * var(--fs)); font-weight:800; }

/* ② 유료 / 무료 — 두 줄로 갈라 둔 곳입니다 (2026-09-13).
      유료는 절기 내내 그대로라 한 줄, 무료는 날짜를 보고 바뀌므로 크게 둡니다. */
/* ⚠ 흰 덩이 없이 주황 위에 바로 올립니다 (2026-09-13).
      앞 판들은 흰 칩·알약으로 갈라 놓아 포스터가 아니라 게시판이 됐습니다.

   ⚠ 주황 위 흰 글씨는 대비가 낮습니다(#e06c10 에 3.41:1).
      그래서 이 두 줄 **뒤에만** 아주 옅은 어둠을 깔아 4:1 대로 올립니다.
      흰 칩처럼 보이지 않으면서 날짜는 읽히게 하려는 것입니다. */
.pop-two{ border-radius:18px; overflow:hidden; background:rgba(0,0,0,.23);
          border:1px solid rgba(255,255,255,.30); }
.pop-two-row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px;
              padding:calc(12px * var(--fs)) 17px; }
.pop-two-row + .pop-two-row{ border-top:1px solid rgba(255,255,255,.26); }
.pop-two-row b{ font-size:calc(13.5px * var(--fs)); font-weight:700;
                color:rgba(255,255,255,.86); white-space:nowrap; }
/* ⚠ overflow-wrap — 대상 이름이 길어져도 창이 가로로 안 넘치게 합니다.
      지금 들어가는 말은 다 짧지만, 내년 절기에 대상 이름이 길어지면
      줄이 옆으로 삐져나가 창이 깨집니다. 미리 막아 둡니다. */
.pop-two-row span{ font-size:calc(19px * var(--fs)); font-weight:800;
                   letter-spacing:-.04em; text-align:right; color:#fff;
                   min-width:0; overflow-wrap:anywhere; }
/* 상태말 자리 — 아직인 때는 그냥 흰 글씨(「9월 21일부터」)입니다 */
.pop-two-row span em{ font-style:normal; display:inline-block; }
/* ⚠ 「접종 중」 — **점만 초록**입니다. 글씨는 흰색 그대로 큽니다.
      (여섯 가지 안을 나란히 놓고 견주어 고른 것입니다.)

      왜 글씨를 초록으로 안 하는가:
        · 진한 초록(--live #1c6440)은 주황 바탕 위에서 **1.50:1** 이라 아예 안 읽힙니다.
        · 읽히게 연하게 만들면(#c9fae0) 4.13:1 인데, 이번엔 흰 글씨와 구분이 흐려집니다.
        · 연초록 알약도 해 봤는데 어수선해 보였습니다 — 특히 9/21부터는
          유료·무료가 둘 다 「접종 중」이라 알약이 두 개 겹쳐 더 그랬습니다.
      그래서 글씨는 흰색(4.76:1) 그대로 두고 **점 하나로만** 초록을 남깁니다.
      점은 3.19:1 로 그림 기준(3:1)을 넘습니다. 표 안의 「접종 중」과 같은 표시입니다. */
.pop-two-row span.go em{ letter-spacing:-.04em; }
.pop-two-row span.go em::before{ content:'●'; color:#57efa2;
                                 font-size:calc(11.5px * var(--fs));
                                 margin-right:calc(8px * var(--fs)); vertical-align:2px; }

/* ⚠ 「아직인 분은 언제부터」 줄 — 위의 대상 줄보다 한 단 흐리게 둡니다.
      같은 밝기로 두면 지금 되는 사람과 아직인 사람이 섞여 읽힙니다. */
.pop-two-row span i.soon{ color:rgba(255,255,255,.72); font-weight:600; }
/* 대상 — 작은 글씨로 담습니다 */
.pop-two-row span i{ display:block; font-style:normal;
                     font-size:calc(12.5px * var(--fs)); font-weight:700;
                     letter-spacing:-.02em; color:#fff;
                     margin-top:calc(2px * var(--fs)); line-height:1.45; }
/* ⚠ 무료 줄을 밝게 하면 그만큼 흰 글씨 대비가 떨어집니다(4.56 → 4.33).
      가르는 일은 위의 실선이 이미 하고 있으니 밝히지 않습니다. */

/* ③ 지금 누가 맞는지 — 한 덩이로 (2026-09-12)
      ⚠ 전에는 대상마다 한 줄씩 세 줄이었습니다. 보호자가 세 줄을 견주며
         「내가 어디에 드는지」를 스스로 따져야 했습니다.
         지금은 **지금 맞는 사람**을 알약 하나로 보여주고,
         아직인 대상은 그 아래 작은 줄에, 자세한 것은 「전체 일정 보기」에 둡니다. */
.pop-list{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:14px 18px 6px; }
/* ⚠ 굴릴 것이 남았다는 **막대를 우리가 직접 그립니다**.
      브라우저가 그려 주는 막대는 믿을 수 없습니다 — 요즘 크롬은 「떠 있는 막대」라
      가만히 두면 아무것도 안 보이고 자리도 안 차지합니다.
      ::-webkit-scrollbar 와 scrollbar-width 둘 다 재 봤는데 0px 이었습니다.
      그래서 낮은 화면에서 전체 일정 표가 「75세 이상」에서 끝난 것처럼 보였습니다 —
      65세 어르신이 무료 대상인데 아닌 줄 알고 닫으십니다.

      ⚠ 자리는 목록의 **오른쪽 여백**입니다(.pop-list 의 padding-right 18px 안).
         글자를 한 점도 덮지 않습니다 — 예전에 쓰던 「↓ 아래에 더 있습니다」는
         마지막 줄을 덮어서 버렸습니다.
      굴릴 것이 없으면 flu.js 의 syncBar 가 알아서 숨깁니다. (2026-09-13) */
.pop > .pop-bar{ position:absolute; right:7px; width:6px; border-radius:999px;
                 background:rgba(255,255,255,.20); pointer-events:none; z-index:2; }
.pop > .pop-bar > i{ display:block; width:100%; border-radius:999px;
                     background:rgba(255,255,255,.80);
                     transition:transform .08s linear; }

/* ⚠ 여기 있던 .pop-pill · .pop-next 규칙을 뺐습니다 (2026-09-13).
      2026-09-12 판의 「알약 한 줄 + 다음 차례 줄」 모양인데,
      창을 유료·무료 두 줄로 단순하게 고치면서 flu.js 가 더 이상 만들지 않습니다.
      쓰이지 않는 규칙을 남겨 두면 다음 사람이 「이게 어디에 나오지?」 하고 헤맵니다.
      지금 상태말은 .pop-two-row span.go 가 맡습니다(위쪽). */

/* 전체 일정 — 요약과 「바꿔 끼웁니다」. 같은 내용을 두 번 보여주지 않습니다 */
.pop-all{ width:100%; border-collapse:collapse; font-size:calc(13.5px * var(--fs)); }
.pop-all th{ text-align:left; font-weight:800; color:var(--dim);
             font-size:calc(12px * var(--fs)); padding:6px; background:var(--paper); }
.pop-all td{ padding:8px 6px; border-bottom:1px solid #f4efe8; vertical-align:top; }
.pop-all td.d{ white-space:nowrap; font-weight:800; color:var(--o-date); text-align:right; }
/* ⚠ 날짜만 적어 두면 보호자가 오늘 날짜와 견줘 스스로 따져야 합니다.
      시작된 줄에는 「접종 중」을 함께 붙입니다 (2026-09-12). */
.pop-all td.d .st{ display:block; color:var(--live); }
.pop-all td.d .st::before{ content:'●'; font-size:calc(9px * var(--fs));
                           margin-right:5px; vertical-align:1.5px; }
.pop-all td.d small{ display:block; color:var(--dim); font-weight:400;
                     font-size:calc(11.5px * var(--fs)); margin-top:2px; }
.pop-all td small{ display:block; color:var(--dim); font-weight:400;
                   font-size:calc(12px * var(--fs)); margin-top:2px; line-height:1.5; }
.pop-allfoot{ margin:9px 6px 0; font-size:calc(12px * var(--fs)); color:var(--dim); line-height:1.6; }
.pop-card{ background:#fff; border-radius:16px; padding:4px 12px 12px; color:var(--ink);
            box-shadow:0 8px 20px rgba(120,58,10,.18); }

/* ══ 낮은 창 ═══════════════════════════════════════════════════════
   ⚠ 화면 크기가 아니라 **브라우저 창** 높이입니다.
      1366x768 노트북이라도 주소창·탭·작업표시줄을 빼면 600px 남짓 남습니다.
      그 높이에서 접힌 창의 「무료 접종 · 9월 21일부터」 줄이 통째로 잘려
      보이지 않았습니다 — 이 창을 띄우는 까닭 자체가 사라집니다.
      그래서 포스터(주사기·큰 제목)를 먼저 줄여 그 줄에 자리를 내줍니다.
      넉넉한 화면에서는 아래 규칙이 하나도 안 걸려 지금 모습 그대로입니다.
      ※ 줄이는 차례는 「덜 중요한 것부터」입니다 —
         주사기 → 여백 → FLU VACCINE → 수첩 안내. 유료·무료 두 줄은 끝까지 남깁니다.
   ══════════════════════════════════════════════════════════════ */
@media (max-height: 740px) {
  .pop-shot svg{ width:96px !important; height:96px !important; }
  .pop-band{ padding:calc(11px * var(--fs)) 20px calc(9px * var(--fs)); }
  .pop-title b, .pop-title em{ font-size:calc(26px * var(--fs)); }
  .pop-list{ padding:10px 18px 5px; }
}
@media (max-height: 680px) {
  .pop-shot svg{ width:64px !important; height:64px !important; }
  .pop-eyebrow{ display:none; }
  .pop-title b, .pop-title em{ font-size:calc(23px * var(--fs)); }
  .pop-band{ padding:calc(9px * var(--fs)) 20px calc(7px * var(--fs)); }
  .pop-two-row{ padding:calc(9px * var(--fs)) 17px; }
  /* 수첩 안내는 펼쳤을 때도 숨기는 줄입니다 — 여기서도 먼저 내줍니다 */
  .pop-note{ display:none; }
  .pop-btn{ padding:calc(13px * var(--fs)) 18px; }
  .pop-more{ padding:calc(10px * var(--fs)) 14px; }
}

/* ⚠ 스크롤이 남아 있을 때만 「더 있다」고 알립니다.
      1판은 표가 잘려도 아무 표시가 없어 「표가 세 줄뿐」으로 읽혔습니다. */
/* ⚠ 여기 있던 「↓ 아래에 더 있습니다」를 뺐습니다 (2026-09-13).
      margin-top:-22px 라 목록 마지막 줄을 덮고 있었습니다.
      대신 펼쳤을 때는 아래 「예방접종수첩」 줄을 잠시 숨겨 목록에 자리를 줍니다 —
      접으면 다시 나옵니다. 768px 노트북에서 전체 일정이 스크롤 없이 다 들어갑니다. */
/* ⚠ 펼치면 머리를 얇은 띠로 줄입니다.
      안 줄이면 주사기 96 + 제목 두 줄 + 표 500 이 겹쳐 950px 이 넘고,
      노트북(768px)에서 표가 크게 잘립니다. 접으면 그대로 돌아옵니다. */
.pop.is-all .pop-band{ display:flex; align-items:center; gap:10px;
                       text-align:left; padding:12px 18px 10px; }
.pop.is-all .pop-shot{ display:none; }
.pop.is-all .pop-shot-sm{ display:block; }
.pop.is-all .pop-eyebrow{ display:none; }
.pop.is-all .pop-title{ margin:0; }
.pop.is-all .pop-title b{ font-size:calc(16px * var(--fs)); }
.pop.is-all .pop-title em{ display:none; }
.pop.is-all .pop-note{ display:none; }

/* ⚠ 1판은 회색 글씨에 윗선만 있는 납작한 모양이라 단추로 안 보였습니다.
      테두리를 주어 눌리는 것으로 보이게 하고, 이름도 무엇이 나오는지로 바꿨습니다. (2026-09-13) */
.pop-more{ display:block; width:calc(100% - 40px); margin:calc(14px * var(--fs)) 20px calc(10px * var(--fs));
           font:inherit; font-size:calc(14.5px * var(--fs)); font-weight:800;
           color:#fff; background:rgba(255,255,255,.14);
           border:1.5px solid rgba(255,255,255,.55);
           border-radius:999px; padding:calc(12px * var(--fs)) 0; cursor:pointer;
           letter-spacing:-.02em; transition:.18s; }
.pop-more:hover{ background:rgba(255,255,255,.26); }

/* 주황 포스터 위 흰 글씨입니다 — 윗선(border-top)은 카드처럼 보이게 해서 뺐습니다 */
.pop-note{ margin:0; padding:0 18px calc(3px * var(--fs)); text-align:center;
           font-size:calc(13.5px * var(--fs)); color:rgba(255,255,255,.92); line-height:1.6; }
.pop-clinic{ margin:0; padding:0 18px calc(13px * var(--fs)); text-align:center;
             font-size:calc(12px * var(--fs)); font-weight:700;
             color:rgba(255,255,255,.62); letter-spacing:-.02em; }
/* 예약 단추는 흰 띠입니다 — 흰 바탕에 진한 주황(--o-date)이라 글씨가 또렷합니다(5.84:1).
   한때 띠와 같은 주황 바탕에 흰 글씨로 두었는데(2026-09-12),
   그 조합은 흰 글씨 대비가 2.59:1 이라 지금 모양으로 되돌렸습니다. */
.pop-btn{ display:block; text-align:center; text-decoration:none;
          background:#fff; color:var(--o-date); font-size:calc(15.5px * var(--fs));
          font-weight:800; padding:15px 0; border-top:1px solid var(--line);
          letter-spacing:-.02em; }
.pop-btn:hover{ background:#fff6ec; }

/* 아래 줄 — 어두운 띠를 걷어냈습니다. 닫기가 안내보다 세 보이면 안 됩니다.
   누르는 자리는 44px 을 채웁니다(1판은 9x20 이었습니다). */
.pop-foot{ display:flex; align-items:center; justify-content:space-between;
           background:var(--paper); border-top:1px solid var(--line); padding:0 6px; }
.pop-foot button{ font:inherit; font-size:calc(14px * var(--fs)); color:var(--dim);
                  background:none; border:0; cursor:pointer; min-height:44px; padding:0 12px; }
.pop-foot button:hover{ color:var(--ink); }
.pop-foot .x{ min-width:44px; font-size:calc(16px * var(--fs)); }

/* 좁은 화면 — 띠와 상태만 줄이고 일정 글씨는 지킵니다 */
.pop.sm .pop-band{ padding:9px 13px; }
.pop.sm .pop-band b{ font-size:calc(15px * var(--fs)); }
.pop.sm .pop-band{ padding:calc(16px * var(--fs)) 16px calc(14px * var(--fs)); }
.pop.sm .pop-shot svg{ width:76px; height:76px; }
.pop.sm .pop-title b, .pop.sm .pop-title em{ font-size:calc(25px * var(--fs)); }
.pop.sm .pop-list{ padding:12px 14px 6px; }

/* 절기가 끝났을 때 자리에 두는 안내 — flu.js 의 html() 에 v 가 없을 때 나오는 모양입니다.
   홈페이지에서는 그런 날 창 자체가 뜨지 않습니다(show() 가 그냥 나갑니다) */
.pop-off{ padding:34px 20px; text-align:center; color:var(--dim);
          font-size:calc(14px * var(--fs)); }