@charset "utf-8";
/* =========================================================
   365경희사계한의원 — 스타일

   메인 컬러: 카키(올리브) 계열. 광고주 요청.
   모션: 최소한만. "너무 화려한 애니메이션은 안 들어가면 좋겠다"는 요청에 따라
        등장 애니메이션을 쓰지 않는다. 상태 변화(hover·focus)만 짧게 준다.

   🔴 스크롤 등장 애니메이션(IntersectionObserver)을 쓰지 않는 이유는 요청 때문만이
      아니다. 필터·목록으로 새로 생기는 요소가 opacity:0 인 채 남아 "목록이 비어
      보이는" 사고가 반복됐다. (제작 공통 규칙)
   ========================================================= */

:root{
  --khaki-900:#242718;
  --khaki-800:#33371f;
  --khaki-700:#454a2c;
  --khaki-600:#5b6139;
  --khaki-500:#6f7648;   /* 메인 */
  --khaki-400:#8d9464;
  --khaki-300:#b0b58e;
  --khaki-200:#d5d8c0;
  --khaki-100:#e9ebdd;
  --paper:#f8f7f2;
  --white:#fff;
  --ink:#1f2118;
  --ink-2:#4c4f42;
  --ink-3:#767a68;
  --line:#e2e3d7;
  --warn:#8a6d1f;
  --radius:14px;
  --wrap:1160px;
  --font:'Pretendard','Pretendard Variable',-apple-system,BlinkMacSystemFont,
         'Apple SD Gothic Neo','Malgun Gothic','맑은 고딕',system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font);color:var(--ink);background:var(--paper);
  font-size:16px;line-height:1.7;letter-spacing:-.02em;
  /* 한국어는 keep-all 이 맞지만, 공백 없는 긴 문자열이 컨테이너를 넘치는 것을
     막으려면 anywhere 를 함께 걸어 둬야 한다. (제작 공통 규칙) */
  word-break:keep-all;overflow-wrap:anywhere;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;line-height:1.35;letter-spacing:-.035em;font-weight:800}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

.wrap{width:min(var(--wrap),100% - 40px);margin-inline:auto}
@media (max-width:640px){ .wrap{width:min(var(--wrap),100% - 32px)} }

.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:999;padding:10px 16px;background:var(--khaki-800);color:#fff;border-radius:8px}
:focus-visible{outline:3px solid var(--khaki-400);outline-offset:2px}

/* ---------- 머리말 ---------- */
.hd{position:sticky;top:0;z-index:100;background:rgba(248,247,242,.94);
  backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--line)}
.hd__in{display:flex;align-items:center;gap:22px;min-height:70px}
.hd__logo{font-size:19px;font-weight:800;letter-spacing:-.045em;color:var(--khaki-700);white-space:nowrap}
.hd__nav{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap}
.hd__nav a{padding:9px 13px;border-radius:9px;font-size:15px;font-weight:600;color:var(--ink-2)}
.hd__nav a:hover{background:var(--khaki-100);color:var(--khaki-700)}
.hd__nav a[aria-current="page"]{background:var(--khaki-700);color:#fff}
.hd__tel{margin-left:10px;padding:10px 17px;border-radius:999px;background:var(--khaki-700);
  color:#fff;font-weight:700;font-size:15px;white-space:nowrap}
.hd__tel:hover{background:var(--khaki-800)}
@media (max-width:900px){
  .hd__in{flex-wrap:wrap;gap:10px;padding-block:12px}
  .hd__nav{width:100%;margin-left:0;order:3;overflow-x:auto;flex-wrap:nowrap;
    scrollbar-width:none;padding-bottom:2px}
  .hd__nav::-webkit-scrollbar{display:none}
  /* 칸이 줄어들면 한글이 한 글자씩 세로로 쪼개진다(10-12) — 칸 폭 고정, 넘치면 옆으로 넘긴다.
     오른쪽 끝을 흐려 넘길 메뉴가 더 있다고 알린다. 끝의 빈칸(::after)은 끝까지 넘겼을 때 마지막 메뉴가 흐려지지 않게 */
  .hd__nav a{flex:none;white-space:nowrap}
  .hd__nav{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent)}
  .hd__nav::after{content:"";flex:none;width:32px}
  .hd__tel{margin-left:auto}
}

/* ---------- 첫 화면 ---------- */
.hero{background:var(--khaki-800);color:#fff;padding:76px 0 68px}
/* 글과 사진을 나란히 둔다. 좁은 화면에서는 사진이 글 아래로 내려간다. */
.hero__in{display:grid;grid-template-columns:1fr minmax(0,44%);gap:40px;align-items:center}
.hero__eyebrow{font-size:14px;font-weight:700;letter-spacing:.04em;color:var(--khaki-300);margin-bottom:16px}
.hero h1{font-size:clamp(28px,5vw,46px);margin-bottom:20px}
.hero__lead{font-size:clamp(16px,2.1vw,19px);line-height:1.8;color:var(--khaki-200);max-width:44em}
.hero__acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.hero__fig{margin:0}
.hero__fig img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);
  background:var(--khaki-700)}
/* 2026-10-22 첫 화면 사진 세 장 — 천천히 겹쳐 바뀐다(병원 첫 화면 규칙: 뒤집기·확대 없이 크로스페이드).
   첫 장은 늘 깔려 있고 둘째·셋째가 그 위로 6초씩 나타났다 사라진다. 스크립트 없이 CSS 만 쓴다 */
.hero__fig--fade{position:relative}
.hero__fig--fade img+img{position:absolute;inset:0;height:100%;opacity:0;
  animation:heroFade 18s ease-in-out infinite}
.hero__fig--fade img:nth-child(2){animation-delay:6s}
.hero__fig--fade img:nth-child(3){animation-delay:12s}
/* 다음 장이 다 나타난 뒤(40%)에 앞 장이 사라지기 시작 — 바뀌는 순간 첫 장이 비쳐 세 장이 섞이지 않게 */
@keyframes heroFade{0%{opacity:0}7%{opacity:1}40%{opacity:1}47%{opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.hero__fig--fade img+img{animation:none;opacity:0}}
@media (max-width:900px){
  .hero{padding:56px 0 52px}
  .hero__in{grid-template-columns:1fr;gap:28px}
  .hero__fig img{aspect-ratio:16/10}
}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:48px;padding:0 26px;border-radius:999px;font-weight:700;font-size:16px;
  border:1px solid transparent;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.btn--primary{background:var(--khaki-400);color:var(--khaki-900)}
.btn--primary:hover{background:var(--khaki-300)}
.btn--ghost{border-color:rgba(255,255,255,.4);color:#fff}
.btn--ghost:hover{background:rgba(255,255,255,.12)}
.btn--solid{background:var(--khaki-700);color:#fff}
.btn--solid:hover{background:var(--khaki-800)}
.btn--line{border-color:var(--khaki-300);color:var(--khaki-700);background:var(--white)}
.btn--line:hover{background:var(--khaki-100)}

/* ---------- 사진 ----------
   🔴 사진은 전부 폭·높이가 적힌 채로 들어온다(worker/pages.js 의 photo()).
      그래서 자리를 미리 잡아 두고, 비율은 aspect-ratio 로 고정한다.
      이렇게 해야 사진이 늦게 떠도 글이 밀려 내려가지 않는다.
   🔴 파일은 tools/build-photos.mjs 가 만든다. 한 장당 두 벌이라 좁은 화면은
      작은 쪽만 받는다 — 휴대폰에서 데이터를 크게 끌어 쓰지 않는다. */
.fig{margin:0}
.fig img{width:100%;border-radius:var(--radius);background:var(--khaki-100)}
.fig figcaption{margin-top:9px;font-size:14px;line-height:1.6;color:var(--ink-3)}
/* 본문 가운데 놓는 큰 사진. 글 폭보다 조금 넓게 두되 화면을 다 덮지 않는다 */
.fig--wide{max-width:980px;margin:28px auto 34px}

.gal{display:grid;gap:16px;margin-top:22px}
.gal--2{grid-template-columns:repeat(2,1fr)}
.gal--3{grid-template-columns:repeat(3,1fr)}
.gal--4{grid-template-columns:repeat(4,1fr)}
.gal .fig img{aspect-ratio:4/3;object-fit:cover}
@media (max-width:900px){ .gal--3,.gal--4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .gal--2,.gal--3,.gal--4{grid-template-columns:1fr} }

/* 사진이 들어가는 절은 글 폭(60em) 제한을 풀어 격자가 좁아지지 않게 한다 */
.qa--wide{max-width:none}
.qa--wide > p{max-width:60em}

/* ---------- 구획 ---------- */
.sec{padding:72px 0}
.sec--alt{background:var(--white);border-block:1px solid var(--line)}
.sec__head{margin-bottom:34px;max-width:52em}
.sec__label{display:inline-block;font-size:13px;font-weight:800;letter-spacing:.06em;
  color:var(--khaki-500);margin-bottom:12px}
.sec__title{font-size:clamp(22px,3.4vw,32px);margin-bottom:14px}
.sec__desc{font-size:16.5px;line-height:1.8;color:var(--ink-2)}

/* ---------- 카드 ---------- */
.grid{display:grid;gap:16px}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){ .grid--3{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .grid--3,.grid--2{grid-template-columns:1fr} }

.card{display:block;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);padding:26px 24px;transition:border-color .15s,box-shadow .15s}
a.card:hover{border-color:var(--khaki-400);box-shadow:0 6px 22px rgba(60,64,40,.08)}
.card__name{font-size:19px;margin-bottom:9px;color:var(--khaki-700)}
.card__desc{font-size:15px;line-height:1.72;color:var(--ink-2)}
.card__more{display:inline-block;margin-top:16px;font-size:14.5px;font-weight:700;color:var(--khaki-500)}
.card--todo{background:repeating-linear-gradient(135deg,#faf9f3,#faf9f3 9px,#f2f1e6 9px,#f2f1e6 18px);
  border-style:dashed}
/* 사진이 붙은 카드 — 안쪽 여백을 글 쪽으로 옮긴다 */
.card--photo{padding:0;overflow:hidden}
.card__fig img{width:100%;aspect-ratio:16/9;object-fit:cover;
  border-radius:0;background:var(--khaki-100)}
.card__in{padding:22px 24px 26px}

/* ---------- 본문(클리닉·글) ---------- */
.page{padding:56px 0 84px}
.crumb{display:flex;flex-wrap:wrap;gap:7px;font-size:13.5px;color:var(--ink-3);margin-bottom:20px}
.crumb a:hover{color:var(--khaki-600);text-decoration:underline}
.page__title{font-size:clamp(26px,4.4vw,40px);margin-bottom:20px}
/* 정의형 첫 문장 — 답변 엔진이 떼어 가는 자리다. 눈에도 먼저 들어오게 둔다. */
.lead{font-size:clamp(17px,2.3vw,20px);line-height:1.75;font-weight:700;color:var(--khaki-700);
  padding:22px 24px;background:var(--khaki-100);border:1px solid var(--khaki-200);
  border-radius:var(--radius);margin-bottom:26px}
.intro{font-size:16.5px;line-height:1.85;color:var(--ink-2);margin-bottom:44px;max-width:56em}

.qa{margin-bottom:40px;max-width:60em}
.qa h2{font-size:clamp(19px,2.7vw,24px);color:var(--khaki-700);margin-bottom:14px}
.qa p{font-size:16.5px;line-height:1.88;color:var(--ink-2)}
.qa__list{margin-top:16px;display:grid;gap:9px}
.qa__list li{position:relative;padding-left:20px;font-size:16px;line-height:1.75;color:var(--ink-2)}
.qa__list li::before{content:"";position:absolute;left:3px;top:.72em;width:6px;height:6px;
  border-radius:50%;background:var(--khaki-400)}

/* 절차 */
.steps{display:grid;gap:12px;margin-top:22px}
.step{display:grid;grid-template-columns:52px 1fr;gap:16px;align-items:start;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px}
.step__n{font-size:15px;font-weight:800;color:var(--khaki-400);padding-top:2px}
.step__name{font-size:17px;font-weight:800;margin-bottom:6px;color:var(--khaki-700)}
.step__desc{font-size:15.5px;line-height:1.72;color:var(--ink-2)}
@media (max-width:560px){ .step{grid-template-columns:1fr;gap:6px} }

/* FAQ — 화면에 그대로 노출한다. 접어 두지 않는다.
   숨김 콘텐츠는 발췌 후보에서 밀린다. (기존 사이트가 그래서 진료시간을 잃었다) */
.faq{display:grid;gap:12px;margin-top:22px}
.faq__item{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px}
.faq__q{font-size:17px;font-weight:800;color:var(--khaki-700);margin-bottom:9px}
.faq__q::before{content:"Q. ";color:var(--khaki-400)}
.faq__a{font-size:16px;line-height:1.8;color:var(--ink-2)}

/* 확인 대기 항목 — 시안에서 점선으로 드러낸다 */
.todo{border-bottom:2px dotted var(--warn);color:var(--warn)}
.todo-box{border:2px dashed var(--warn);border-radius:var(--radius);padding:22px 24px;
  background:#fdfbf2;color:var(--warn);font-size:15.5px;line-height:1.75}
.todo-box strong{display:block;font-size:17px;margin-bottom:8px}

/* ---------- 표 ---------- */
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:420px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
th,td{padding:15px 18px;text-align:left;font-size:16px;border-bottom:1px solid var(--line)}
th{background:var(--khaki-100);color:var(--khaki-700);font-weight:800;white-space:nowrap}
tr:last-child th,tr:last-child td{border-bottom:0}
/* 비급여 표(.ptbl) — 휴대폰은 줄마다 「이름표 · 값」 카드로 편다(칸이 옆으로 밀려 약제비가 안 보이던 것 · 2026-10-21) */
@media (max-width:600px){
  .ptbl{min-width:0}
  .ptbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .ptbl tr{display:block;border-bottom:1px solid var(--line)}
  .ptbl tr:last-child{border-bottom:0}
  .ptbl th[scope=row]{display:block;white-space:normal;border-bottom:0;padding:12px 16px}
  .ptbl td{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-bottom:0;padding:7px 16px;font-size:15px}
  .ptbl td::before{content:attr(data-label);color:var(--khaki-700);font-weight:700;font-size:13.5px;flex:none}
  .ptbl tr td:last-child{padding-bottom:13px}
}

/* ---------- 오시는 길 ---------- */
/* 약도 — 두 벌이다 (제작 공통 규칙 00)
   넓은 화면은 가로형(800×640), 좁은 화면은 세로형(390×620).
   가로형 하나를 375px 에 줄이면 글자가 6px 대가 되어 못 읽는다.
   🔴 크기는 여기서만 정한다. SVG 태그에 인라인 style 로 적으면 이 규칙이 안 먹는다. */
.map{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.map .map-desk svg,.map .map-mob svg{display:block;width:100%;height:auto}
.map .map-desk svg{max-width:880px;margin:0 auto}
.map .map-mob{display:none}
@media (max-width:760px){
  .map{padding:8px}
  .map .map-desk{display:none}
  .map .map-mob{display:block}
}
.info{display:grid;gap:14px;margin-top:24px}
.info__row{display:grid;grid-template-columns:112px 1fr;gap:14px;align-items:start;
  padding-bottom:14px;border-bottom:1px solid var(--line)}
.info__row:last-child{border-bottom:0;padding-bottom:0}
.info__k{font-weight:800;color:var(--khaki-700);font-size:15.5px}
.info__v{font-size:16px;line-height:1.75;color:var(--ink-2)}
@media (max-width:560px){ .info__row{grid-template-columns:1fr;gap:4px} }

/* ---------- 꼬리말 ---------- */
.ft{background:var(--khaki-900);color:var(--khaki-200);padding:52px 0 40px;font-size:14.5px;line-height:1.85}
.ft a:hover{color:#fff;text-decoration:underline}
.ft__top{display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between;margin-bottom:28px}
.ft__name{font-size:18px;font-weight:800;color:#fff;margin-bottom:10px}
.ft__links{display:flex;flex-wrap:wrap;gap:16px}
.ft__copy{padding-top:22px;border-top:1px solid rgba(255,255,255,.14);color:var(--khaki-300);font-size:13.5px}

/* ---------- 글 목록·본문 ---------- */
.post__body{max-width:60em;font-size:16.5px;line-height:1.9;color:var(--ink-2)}
.post__body h2{font-size:clamp(19px,2.7vw,24px);color:var(--khaki-700);margin:38px 0 14px}
.post__body h3{font-size:18px;color:var(--khaki-600);margin:28px 0 10px}
.post__body p{margin:0 0 16px}
.post__body ul{margin:0 0 18px;display:grid;gap:8px}
.post__body li{position:relative;padding-left:20px}
.post__body li::before{content:"";position:absolute;left:3px;top:.72em;width:6px;height:6px;
  border-radius:50%;background:var(--khaki-400)}
.post__meta{font-size:14px;color:var(--ink-3);margin-bottom:26px}

/* ---------- 글 본문 — 관리자 편집기가 만드는 것 ----------
   🔴 편집기 버튼 ↔ worker/posts.js md() ↔ 이 규칙이 짝이다. 버튼만 늘리면 화면에서 모양이 없다. */
.post__body h4{font-size:16.5px;color:var(--khaki-600);margin:24px 0 8px}
.post__body ol{margin:0 0 18px;padding-left:1.6em;list-style:decimal;display:grid;gap:8px}
.post__body ol li{padding-left:2px}
.post__body ol li::before{content:none}
.post__body blockquote{margin:0 0 18px;padding:16px 20px;border:1px solid var(--khaki-200);
  background:var(--khaki-100);border-radius:var(--radius);color:var(--ink)}
.post__body blockquote p{margin:0}
.post__body hr{border:0;border-top:1px solid var(--line);margin:32px 0}
.post__body img{display:block;max-width:100%;height:auto;margin:10px 0 18px;border-radius:10px}
.post__body table{border-collapse:collapse;min-width:100%;margin:0 0 18px;font-size:15px}
.post__body th,.post__body td{border:1px solid var(--line);padding:9px 12px;text-align:left;vertical-align:top}
.post__body th{background:var(--khaki-100);color:var(--khaki-800)}
.post__body del{color:var(--ink-3)}
.post__body a{color:var(--khaki-600);text-decoration:underline;text-underline-offset:3px}
.post__cover{margin:0 0 30px;max-width:60em}
.post__cover img{display:block;width:100%;height:auto;border-radius:var(--radius)}
.post__cover figcaption{margin-top:9px;font-size:14px;color:var(--ink-3)}

/* ---------- 대표원장 인사말 (한의원 소개) ---------- */
/* 2026-10-22 대표원장 사진 — 왼쪽 세로 사진 · 오른쪽 글. 좁은 화면에서는 사진이 위로 */
.director{display:grid;grid-template-columns:240px 1fr;gap:32px;align-items:start}
.director__fig{margin:0}
.director__fig img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--radius);background:var(--khaki-100)}
@media (max-width:620px){.director{grid-template-columns:1fr;gap:18px}.director__fig{max-width:60%}}
.greeting{margin:0 0 20px;padding:20px 24px;border:1px solid var(--khaki-200);background:var(--white);
  border-radius:var(--radius)}
.greeting p{font-size:16.5px;line-height:1.85;color:var(--ink);margin:0 0 6px}
.greeting footer{margin-top:10px;font-size:14px;color:var(--ink-3)}

/* ---------- 공지사항 목록 ---------- */
.notice-list{margin-top:28px;border-top:2px solid var(--khaki-700);max-width:60em}
.notice-list a{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:space-between;padding:17px 4px;border-bottom:1px solid var(--line)}
.notice-list a:hover .notice-list__t{color:var(--khaki-600);text-decoration:underline}
.notice-list__t{font-size:16.5px;font-weight:700;color:var(--ink)}
.notice-list__d{font-size:14px;color:var(--ink-3)}

/* ---------- 휴진 · 알림 띠 ----------
   관리자 「휴진·알림」에서 등록한 것. 🔴 오늘인지는 브라우저가 고른다(assets/js/site.js). */
.alertbar{display:block;padding:11px 16px;text-align:center;font-size:14.5px;font-weight:700;
  line-height:1.5;background:var(--khaki-700);color:#fff}
.alertbar[hidden]{display:none}
.alertbar.is-alert{background:#B3261E}
.alertbar a{color:#fff;text-decoration:underline;text-underline-offset:3px}
@media (max-width:560px){.alertbar{font-size:13.5px;padding:10px 14px}}
/* 휴진일이면 진료시간 표 바로 위에 붉게 */
.closed-today{margin:0 0 14px;padding:12px 16px;border-radius:10px;background:#fdecea;color:#B3261E;
  font-size:16px;font-weight:800}
.closed-today[hidden]{display:none}


/* ---------- 팝업 ---------- */
/* =========================================================
   🔴 팝업 — 동경하이 원본(app/globals.css 의 .popup-* 규칙) 그대로 (의정부365경희한의원 styles.js 에서 옮김)
   admin-page 스킬 : 「슬라이더는 popup-slider.tsx 를 그대로 옮긴다. 새로 짜지 않는다」.
   바꾼 것은 동경하이 남색(#061d54)을 이 홈페이지 주색 변수(--khaki-600)로 바꾼 것뿐이다.
   화면 코드는 worker/popup.js(마크업) · public/assets/js/site.js(동작).
   ========================================================= */
/* ===== 메인 팝업 — 병원이 관리자페이지에서 등록한다 ===== */
/* 팝업은 병원이 관리자페이지에서 끌어 놓은 자리에 뜬다.
   자리(left·top)는 popup-view.tsx가 실제 크기를 재서 px로 넣는다 — 화면 밖으로 나가지 않게
   보정하려면 팝업 자신의 높이를 알아야 하는데 CSS로는 알 수 없다. */
.popup-layer{position:fixed;inset:0;z-index:400;pointer-events:none}
/* 세로로 쌓되 머리·발은 자리를 고정하고 가운데만 줄어들게 한다.
   예전에는 창 전체에 overflow:auto를 걸어, 화면이 짧으면 **그림 아래가 잘리고 닫기 버튼까지 밀려
   내려가** 보이지 않았다. 지금은 그림이 남은 높이에 맞춰 줄어들어 한 장이 통째로 보인다. */
.popup-win{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;
  max-width:calc(100% - 32px);max-height:calc(100% - 32px);overflow:hidden;
  background:#fff;border-radius:8px;box-shadow:0 18px 44px rgba(20,40,30,.28);pointer-events:auto;animation:popupIn .28s ease both}
.popup-head,.popup-foot{flex:0 0 auto}
/* translate(-50%,-50%)는 자리를 잡는 값이라 등장 효과가 지워 버리면 안 된다.
   (transform:none으로 끝내면 팝업이 지정한 자리에서 오른쪽 아래로 밀린다) */
@keyframes popupIn{from{opacity:0;transform:translate(-50%,calc(-50% - 10px))}to{opacity:1;transform:translate(-50%,-50%)}}
.popup-head{padding:14px 18px;background:var(--khaki-600);color:#fff}
.popup-head strong{font-size:16px;font-weight:700;letter-spacing:-.3px;word-break:keep-all}
/* min-height:0 이 없으면 flex 자식이 내용 크기 아래로 못 줄어들어 그림이 그대로 넘친다 */
.popup-content{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:auto}
.popup-img{display:block;width:100%;height:auto}
.popup-body{margin:0;padding:18px;font-size:15px;line-height:1.75;color:#333;white-space:pre-line;word-break:keep-all}
.popup-link{display:block;color:inherit}
.popup-link:hover .popup-body{text-decoration:underline}
.popup-foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #e8ecf1;background:#f7f9fc}
.popup-foot button{padding:12px 16px;border:0;background:none;font:inherit;font-size:13px;color:#4b5563;cursor:pointer}
.popup-foot button:hover{color:var(--khaki-600);text-decoration:underline}
.popup-foot .popup-close{font-weight:700;color:var(--khaki-600)}
/* 좁은 화면에서는 좌표를 쓰지 않고 가운데에 둔다(popup-view.tsx). 폭도 화면에 맞춘다 */
@media(max-width:760px){.popup-win{width:100%!important;max-width:calc(100% - 28px);max-height:calc(100% - 28px)}}

/* ===== 팝업 이미지 슬라이더 ===== */
/* 넘기는 동작은 CSS가 한다 — scroll-snap이면 휴대폰 스와이프가 기본 동작으로 그대로 먹는다.
   JS로 흉내 내면 관성·경계를 다시 만들어야 하고 대개 더 뻑뻑해진다 (popup-slider.tsx) */
.popup-slider{position:relative;flex:0 0 auto;display:flex;flex-direction:column}
.popup-track{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.popup-track::-webkit-scrollbar{display:none}
.popup-slide-link{flex:0 0 100%;scroll-snap-align:center;display:flex;align-items:center;justify-content:center;min-width:0;position:relative;overflow:hidden}
/* 그림보다 칸이 높을 때 남는 위아래를, 그 그림의 **맨 윗줄·맨 아랫줄 색을 늘려** 메운다
   (색은 popup-slider.tsx가 캔버스로 읽어 style로 넣는다). 가장자리를 그대로 이으니 경계가 안 보인다.
   ⚠️ 흐린 사본을 깔아 봤더니 가운데 내용이 비쳐 유령처럼 보였다. 되돌리지 말 것.
   ⚠️ 그림은 이 위에 통째로 얹힌다 — 잘라서 채우는 것이 아니다. 광고주 그림은 자르지 않는다
      (1~3장은 내용 상자가 좌우 끝에서 28px 안쪽까지 차 있어 조금만 잘라도 테두리가 깎인다). */
.popup-slide-band{position:absolute;left:0;right:0;z-index:0;height:50%}
.popup-slide-band.top{top:0}
.popup-slide-band.bottom{bottom:0}
/* 마우스로 끌 때 글자·그림이 선택되거나 끌려 나가지 않게 한다 (popup-slider.tsx) */
.popup-slider.many .popup-track{cursor:grab;user-select:none;-webkit-user-drag:none}
.popup-slider.many .popup-track:active{cursor:grabbing}
.popup-track img{-webkit-user-drag:none;user-select:none}
/* 그림 한 장이 화면 안에 통째로 들어가게 한다.
   ⚠️ 높이를 flex로 나눠 주려 했더니 그림 높이와 칸 높이가 서로를 물어 **필요 이상으로 작아졌다**
      (375px 폭에서 434px면 될 그림이 234px로 줄었다). 화면 높이에서 직접 뺀다.
   150px = 창 여백 32 + 머리 띠 52 + 발 45 에 여유를 더한 값. 머리 띠를 없앤 팝업은 그만큼 덜 쓴다. */
.popup-track img{display:block;width:auto;max-width:100%;height:auto;margin:0 auto;
  max-height:calc(100vh - 150px);max-height:calc(100dvh - 150px)}
/* 그림마다 비율이 달라도 팝업 크기는 첫 장(권장 900×636px)의 비율로 고정한다.
   뒤의 그림은 이 칸 안에서 contain으로 축소하므로 슬라이드를 넘겨도 팝업 크기가 변하지 않는다.
   비율은 첫 img onLoad에서 즉시 얻고, 가장자리 색은 나중에 읽는다. */
/* ⚠️ 비율에 transition을 걸지 말 것. 크롬이 값을 중간에 물고 있다가 **칸 높이가 첫 장 값에서 안 움직인다**
   (실제로 4번째 장이 600px가 돼야 하는데 564px에 머물렀다). 36px 차이라 즉시 바뀌어도 티가 안 난다. */
.popup-slider.fit .popup-track{max-height:calc(100vh - 150px);max-height:calc(100dvh - 150px)}
.popup-slider.fit .popup-track img{position:relative;z-index:1;width:100%;height:100%;max-height:none;object-fit:contain}
/* 화면 높이 제한에 걸린 세로형 그림도 object-fit:contain으로 원본 비율을 지킨다.
   object-fit:fill을 쓰면 제한된 상자 높이에 맞춰 그림이 위아래로 눌린다. */
/* 화살표는 그림 위에 얹는다. 한 장일 때는 아예 그리지 않는다(popup-slider.tsx) */
.popup-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:34px;height:34px;display:grid;place-items:center;padding:0;
  border:0;border-radius:50%;background:rgba(0,0,0,.42);color:#fff;
  font-size:22px;line-height:1;cursor:pointer;transition:background .15s,opacity .15s}
.popup-arrow:hover{background:rgba(0,0,0,.62)}
.popup-arrow:disabled{opacity:.25;cursor:default}
.popup-arrow.prev{left:8px}
.popup-arrow.next{right:8px}
.popup-dots{position:absolute;left:0;right:0;bottom:10px;z-index:2;display:flex;justify-content:center;gap:7px}
.popup-dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;
  background:rgba(255,255,255,.55);box-shadow:0 0 0 1px rgba(0,0,0,.18);cursor:pointer;transition:background .15s,width .15s}
.popup-dots button.on{width:18px;border-radius:5px;background:#fff}
@media(max-width:760px){
  /* 손가락으로 넘기면 되므로 화살표는 자리만 차지한다 */
  .popup-arrow{display:none}
  .popup-dots{bottom:8px}
}
@media(prefers-reduced-motion:reduce){
  .popup-track{scroll-behavior:auto}
  .popup-dots button{transition:none}
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ---------- 건강 정보 글 목록·글 끝 — 작업장 뼈대 B안 「목록 밀도」(2026-10-16) ----------
   목록: 한 줄씩(글 왼쪽 · 정사각 사진 오른쪽 · 사진 없으면 전체 폭 · 요약 3줄) · 10개 넘거나 분류가 둘 이상이면
   칩·찾기·「목록 더보기」(worker/posts.js LIST_SCRIPT). 11번째부터 숨김은 스크립트가 뜬 뒤(data-ready)에만 —
   스크립트가 죽어도 글이 다 보인다. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.blog-tools[hidden],.blog-none[hidden],.blog-more[hidden]{display:none}
.blog-wrap{display:flex;flex-direction:column;max-width:880px;margin-top:28px}
.blog-tools{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.blog-chips{display:flex;flex-wrap:wrap;gap:8px;flex:1 1 auto;min-width:0}
.blog-chips button{min-height:40px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:var(--white);color:var(--ink-2);font:inherit;font-size:14px;cursor:pointer;transition:background-color .16s cubic-bezier(.16,1,.3,1),color .16s cubic-bezier(.16,1,.3,1),border-color .16s cubic-bezier(.16,1,.3,1)}
.blog-chips button span{margin-left:2px;font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.blog-chips button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.blog-chips button[aria-pressed="true"] span{color:inherit;opacity:.75}
.blog-chips button:focus-visible,.blog-find input:focus-visible,.blog-more:focus-visible{outline:2px solid var(--khaki-500);outline-offset:2px}
.blog-find{position:relative;flex:0 1 240px;min-width:0}
.blog-find input{width:100%;min-height:40px;padding:0 16px 0 38px;border:1px solid var(--line);border-radius:999px;background:var(--white);color:var(--ink);font:inherit;font-size:14px}
.blog-find svg{position:absolute;left:13px;top:50%;margin-top:-9px;color:var(--ink-3);pointer-events:none}
.blog-count{margin:18px 0 0;font-size:13.5px;color:var(--ink-3)}
.blog-count b{color:var(--ink);font-variant-numeric:tabular-nums}
.blist{list-style:none;margin:10px 0 0;padding:0;border-top:2px solid var(--ink)}
.blist__item{border-bottom:1px solid var(--line)}
.blist__item.is-out,.blog-wrap[data-ready] .blist__item[data-more]{display:none}
.blist__link{display:grid;grid-template-columns:minmax(0,1fr) 132px;gap:22px;align-items:start;padding:22px 4px;color:inherit;text-decoration:none}
.blist__item--text .blist__link{grid-template-columns:minmax(0,1fr)}
.blist__text{display:grid;gap:5px;min-width:0}
.blist__cat{margin:0;font-size:12.5px;font-weight:700;color:var(--khaki-600)}
.blist__title{margin:0;font-size:18px;font-weight:700;line-height:1.45;letter-spacing:-.02em;color:var(--ink);word-break:keep-all}
.blist__desc{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:0;font-size:14.5px;line-height:1.7;color:var(--ink-2);word-break:keep-all}
.blist__date{margin-top:4px;font-size:13px;color:var(--ink-3)}
.blist__img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:10px;background:var(--khaki-100)}
.blog-none{margin:22px 0 0;color:var(--ink-2)}
.blog-more{display:flex;justify-content:center;align-items:center;gap:8px;min-height:52px;margin-top:18px;border:1px solid var(--line);border-radius:10px;background:var(--white);color:var(--ink);font:inherit;font-weight:700;cursor:pointer}
.blog-more span{font-weight:400;font-size:13.5px;color:var(--ink-3)}
.blog-more:active{transform:translateY(1px)}
.post-rel{margin-top:48px;padding-top:26px;border-top:1px solid var(--line)}
.post-rel__title{margin:0;font-size:19px}
.post-rel__list{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.post-rel__list a{display:grid;gap:8px;color:inherit;text-decoration:none;font-size:14.5px;line-height:1.5;word-break:keep-all}
.post-rel__list img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:10px}
.post-rel__list .is-text a{align-content:start;min-height:100%;padding:14px;border-radius:10px;background:var(--khaki-100)}
.post-rel__cat{font-size:12.5px;font-weight:700;color:var(--khaki-600)}
.post-rel__name{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;color:var(--ink)}
.post-pn{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:32px}
.post-pn a{display:grid;gap:2px;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--white);color:var(--ink);text-decoration:none;font-size:14.5px;line-height:1.5;word-break:keep-all}
.post-pn small{font-size:12.5px;color:var(--ink-3)}
.post-pn__next{text-align:right}
@media (hover:hover) and (pointer:fine){
  .blist__link:hover .blist__title,.post-rel__list a:hover .post-rel__name,.post-pn a:hover{text-decoration:underline;text-underline-offset:3px}
  .blog-chips button:hover{border-color:var(--ink-3)}
}
@media (max-width:640px){
  .blog-tools{flex-direction:column-reverse;align-items:stretch}
  .blog-find{flex-basis:auto}
  .blog-find input{font-size:16px}
  .blog-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .blog-chips button{flex:none}
  .blist__link{grid-template-columns:minmax(0,1fr) 84px;gap:14px;padding:16px 0}
  .blist__title{font-size:16px}
  .blist__desc{-webkit-line-clamp:2}
  .post-rel__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .post-pn{grid-template-columns:1fr}
  .post-pn__next{text-align:left}
}
@media (prefers-reduced-motion:reduce){.blog-chips button{transition:none}}