/* ================================================================
   심석인한의원 — 공통 스타일
   페니페이지 제작. 베이지 x 원목 (실제 인테리어 톤).
   ================================================================ */

/* ---------- FONTS ---------- */
@font-face{font-family:'Pretendard';src:url('../fonts/PretendardVariable.woff2') format('woff2-variations');font-weight:45 920;font-display:swap;font-style:normal}
@font-face{font-family:'MaruBuri';src:url('../fonts/MaruBuri-Light.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'MaruBuri';src:url('../fonts/MaruBuri-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'MaruBuri';src:url('../fonts/MaruBuri-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'MaruBuri';src:url('../fonts/MaruBuri-Bold.woff2') format('woff2');font-weight:700;font-display:swap}

/* ---------- TOKENS ---------- */
/* 팔레트 = 실제 한의원 인테리어(베이지/원목/아치창) 실측 추출 기반.
   2026-07-28 고객 요청으로 버건디 → 베이지 전면 전환.
   변수명(--wine*)은 전 페이지 참조 중이라 유지, 값만 교체. */
:root{
  --wine:#8a6f4e;        /* 메인 — 따뜻한 원목 브라운 */
  --wine-deep:#4b3a2a;   /* 딥 — 다크 월넛 (히어로/밴드/푸터) */
  --wine-soft:#a98a63;   /* 보조 — 소프트 카멜 */
  --cream:#faf6f0;       /* 배경 — 아이보리 */
  --cream-2:#f1e9dd;     /* 배경2 — 베이지 */
  --ink:#2c2620;         /* 본문 — 차콜 브라운 */
  --ink-2:#5f564b;       /* 보조텍스트 */
  --ink-3:#8d8375;       /* 흐린텍스트 */
  --line:#e3d9c9;        /* 라인 */
  --gold:#b08d57;        /* 골드 액센트 (유지) */
  --white:#fff;
  --f-serif:'MaruBuri',serif;
  --f-sans:'Pretendard',-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif;
  --fs-body:18px;
  --fs-lead:20px;
  --shell:1180px;
  --pad:clamp(20px,5vw,40px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{font-family:var(--f-sans);font-size:var(--fs-body);line-height:1.85;color:var(--ink);
  background:var(--cream);letter-spacing:-.01em;overflow-x:hidden;word-break:keep-all}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--shell);margin:0 auto;padding-inline:var(--pad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- REVEAL ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1)}
.rv.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* ---------- TOPBAR ---------- */
.topbar{background:var(--wine-deep);color:#ece0cf;font-size:14px;letter-spacing:.02em}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;height:40px}
.topbar b{font-weight:600;color:#fff}
.topbar .tb-r{display:flex;gap:20px;opacity:.9}
.topbar .short{display:none}
@media(max-width:720px){
  .topbar .tb-r{display:none}
  .topbar .wrap{justify-content:center;height:36px}
  .topbar{font-size:13px}
  .topbar .full{display:none}
  .topbar .short{display:inline}
}

/* ---------- HEADER ---------- */
header{position:sticky;top:0;z-index:60;background:rgba(250,246,240,.94);
  backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
/* ⚠️ 모바일 네비 함정 2종 (둘 다 실측으로 잡음)
   ① header의 backdrop-filter가 containing block을 만들어 자식 position:fixed 패널을 가둠
   ② nav는 header(z:60) 자식이라 nav의 z:70이 header 안에서만 유효 → body 직계인
      .navscrim(z:65)이 nav 위에 덮여 패널이 흐리게 보임
   → 네비 열릴 때 header의 filter를 끄고 z-index를 스크림 위로 올려 해결 */
@media(max-width:1080px){
  body.nav-open header{backdrop-filter:none;background:var(--cream);z-index:75}
}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:82px}
/* 브랜드 = 고객 제공 로고 이미지 (붓글씨+한자인장). 텍스트 워드마크 폐기 */
.brand{display:flex;align-items:center;flex:none}
.brand img{height:46px;width:auto;display:block}
@media(max-width:560px){.brand img{height:38px}}
@media(max-width:390px){.brand img{height:33px}}
nav.gnb{display:flex;gap:34px;font-size:17px;font-weight:600;color:var(--ink-2)}
nav.gnb a{position:relative;padding:6px 0;transition:color .25s}
nav.gnb a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--wine);
  transition:right .35s cubic-bezier(.22,.61,.36,1)}
nav.gnb a:hover,nav.gnb a[aria-current="page"]{color:var(--wine)}
nav.gnb a:hover::after,nav.gnb a[aria-current="page"]::after{right:0}
.h-tel{display:flex;align-items:center;gap:9px;font-family:var(--f-serif);font-weight:700;
  font-size:22px;color:var(--wine);white-space:nowrap}
.h-tel svg{width:17px;height:17px;fill:var(--wine);flex:none}
.navtoggle{display:none;background:none;border:0;padding:8px;cursor:pointer}
.navtoggle svg{width:26px;height:26px;stroke:var(--wine);stroke-width:1.8;fill:none;stroke-linecap:round}
@media(max-width:1080px){
  nav.gnb{position:fixed;inset:0 0 0 auto;width:min(320px,84vw);background:var(--cream);
    flex-direction:column;gap:0;padding:96px 0 40px;box-shadow:-14px 0 44px rgba(75,58,42,.18);
    transform:translateX(100%);transition:transform .38s cubic-bezier(.22,.61,.36,1),visibility .38s;
    z-index:70;
    /* ⚠️ translateX(100%)만 쓰면 화면 밖 패널이 스크롤폭을 늘려 가로스크롤 발생.
       visibility로 레이아웃에서 완전히 빼야 함 */
    visibility:hidden}
  nav.gnb.open{transform:none;visibility:visible}
  nav.gnb a{padding:19px 32px;font-size:19px;border-bottom:1px solid var(--line)}
  nav.gnb a::after{display:none}
  .navtoggle{display:block;z-index:80}
  .navscrim{position:fixed;inset:0;background:rgba(44,33,24,.5);opacity:0;pointer-events:none;
    transition:opacity .35s;z-index:65}
  .navscrim.on{opacity:1;pointer-events:auto}
}
@media(max-width:560px){header .wrap{height:66px;gap:12px}.brand{font-size:21px}.brand em{display:none}.h-tel{font-size:18px}}
@media(max-width:390px){
  header .wrap{gap:8px}.brand{font-size:19px}
  .h-tel{font-size:0;gap:0;padding:10px}.h-tel svg{width:21px;height:21px}
}

/* ---------- 서브 히어로 ---------- */
.subhero{position:relative;background:var(--wine-deep);color:#fff;overflow:hidden}
.subhero .bgimg{position:absolute;inset:0;object-fit:cover;width:100%;height:100%;opacity:.3}
.subhero .veil{position:absolute;inset:0;
  background:linear-gradient(150deg,rgba(75,58,42,.92) 0%,rgba(44,33,24,.95) 100%)}
.subhero .veil::after{content:'';position:absolute;inset:0;opacity:.14;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}
.subhero .wrap{position:relative;z-index:2;padding-block:clamp(64px,9vw,104px)}
.crumb{font-size:14px;color:#d9c3a3;letter-spacing:.04em;margin-bottom:22px}
.crumb a:hover{color:#fff;text-decoration:underline}
.subhero .eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:12px;font-weight:600;
  letter-spacing:.26em;color:#e2cfb2;margin-bottom:18px}
.subhero .eyebrow::before{content:'';width:38px;height:1px;background:var(--gold)}
.subhero h1{font-family:var(--f-serif);font-weight:300;font-size:clamp(30px,4.6vw,50px);
  line-height:1.45;letter-spacing:-.03em}
.subhero h1 b{font-weight:700}
.subhero p{margin-top:22px;font-size:clamp(16px,1.8vw,19px);line-height:1.9;
  color:rgba(255,255,255,.78);max-width:40em;font-weight:300;text-wrap:pretty}

/* ---------- SECTION ---------- */
section{padding-block:clamp(66px,8.5vw,110px)}
.sec-head{text-align:center;margin-bottom:clamp(42px,5.5vw,64px)}
.sec-head .kicker{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.3em;color:var(--wine-soft);margin-bottom:18px}
.sec-head h2{font-family:var(--f-serif);font-weight:400;font-size:clamp(25px,3.7vw,38px);
  line-height:1.5;letter-spacing:-.03em;color:var(--ink)}
.sec-head h2 b{font-weight:700;color:var(--wine)}
.sec-head p{margin-top:18px;font-size:var(--fs-lead);color:var(--ink-2);line-height:1.9;text-wrap:pretty}
.rule{width:38px;height:2px;background:var(--gold);margin:0 auto 22px}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:60px;padding:0 34px;
  border-radius:8px;font-family:var(--f-sans);font-size:18px;font-weight:700;letter-spacing:-.01em;
  border:1.5px solid transparent;cursor:pointer;transition:all .3s cubic-bezier(.22,.61,.36,1)}
.btn svg{width:17px;height:17px;flex:none}
.btn-fill{background:var(--wine);color:#fff}.btn-fill svg{fill:#fff}
.btn-fill:hover{background:var(--wine-deep);transform:translateY(-2px);box-shadow:0 12px 30px rgba(124,20,40,.3)}
.btn-line{border-color:var(--wine);color:var(--wine)}.btn-line svg{fill:var(--wine)}
.btn-line:hover{background:var(--wine);color:#fff;transform:translateY(-2px)}
.btn-line:hover svg{fill:#fff}
/* 네이버 예약 — 네이버 브랜드 그린 */
.btn-nv{background:#03c75a;color:#fff;border-color:#03c75a}
.btn-nv svg{fill:#fff}
.btn-nv:hover{background:#02b350;border-color:#02b350;transform:translateY(-2px);box-shadow:0 12px 30px rgba(3,199,90,.3)}
/* 카카오톡 채널 — 카카오 옐로우 */
.btn-ka{background:#fee500;color:#3c1e1e;border-color:#fee500}
.btn-ka svg{fill:#3c1e1e}
.btn-ka:hover{background:#f2da00;border-color:#f2da00;transform:translateY(-2px);box-shadow:0 12px 30px rgba(254,229,0,.35)}
.cta-row{display:flex;flex-wrap:wrap;gap:14px}
@media(max-width:520px){
  .cta-row{flex-direction:column;align-items:stretch}
  .cta-row .btn{width:100%}
}

/* ---------- 하단 CTA ---------- */
.endcta{background:var(--cream-2);text-align:center;border-top:1px solid var(--line)}
.endcta h2{font-family:var(--f-serif);font-weight:300;font-size:clamp(25px,3.7vw,40px);
  line-height:1.55;letter-spacing:-.03em;margin-bottom:20px}
.endcta h2 b{font-weight:700;color:var(--wine)}
.endcta p{font-size:var(--fs-lead);color:var(--ink-2);margin-bottom:36px;line-height:1.9;text-wrap:pretty}
.endcta .cta-row{justify-content:center}

/* ---------- FOOTER ---------- */
footer{background:var(--ink);color:rgba(255,255,255,.62);padding-block:56px 44px;font-size:15.5px;line-height:1.9}
.f-top{display:flex;justify-content:space-between;gap:34px;flex-wrap:wrap;padding-bottom:28px;
  border-bottom:1px solid rgba(255,255,255,.13);margin-bottom:26px}
.f-brand img{height:44px;width:auto;display:block}
.f-nav{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:15px}
.f-nav a:hover{color:#fff}
.f-info p{margin-bottom:3px}
.f-bot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:14px;color:rgba(255,255,255,.42)}
.f-bot a{color:rgba(255,255,255,.6);transition:color .25s}
.f-bot a:hover{color:#fff}
.f-caution{margin-top:20px;font-size:13.5px;color:rgba(255,255,255,.36);line-height:1.8}

/* ---------- 우측 플로팅 퀵버튼 (데스크탑) ----------
   모바일은 하단 고정바(.mbar)가 같은 역할 → 860px 이하에서 숨김 */
.quick{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:70;
  display:flex;flex-direction:column;gap:10px}
.quick a{position:relative;display:flex;align-items:center;justify-content:center;
  width:62px;height:62px;border-radius:14px;background:var(--white);
  border:1px solid var(--line);box-shadow:0 6px 22px rgba(75,58,42,.16);
  transition:all .32s cubic-bezier(.22,.61,.36,1)}
.quick a svg{width:24px;height:24px;fill:var(--wine);transition:fill .32s}
.quick a .lb{position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%) translateX(8px);
  white-space:nowrap;background:var(--ink);color:#fff;font-size:14.5px;font-weight:700;
  padding:9px 14px;border-radius:8px;opacity:0;pointer-events:none;
  transition:opacity .28s,transform .28s}
.quick a .lb::after{content:'';position:absolute;left:100%;top:50%;transform:translateY(-50%);
  border:6px solid transparent;border-left-color:var(--ink)}
.quick a:hover{transform:translateX(-4px);box-shadow:0 12px 30px rgba(75,58,42,.26)}
.quick a:hover .lb{opacity:1;transform:translateY(-50%) translateX(0)}
/* 채널별 브랜드 컬러 */
.quick a.q-tel{background:var(--wine);border-color:var(--wine)}
.quick a.q-tel svg{fill:#fff}
.quick a.q-tel:hover{background:var(--wine-deep);border-color:var(--wine-deep)}
.quick a.q-nv{background:#03c75a;border-color:#03c75a}
.quick a.q-nv svg{fill:#fff}
.quick a.q-nv:hover{background:#02b350;border-color:#02b350}
.quick a.q-ka{background:#fee500;border-color:#fee500}
.quick a.q-ka svg{fill:#3c1e1e}
.quick a.q-ka:hover{background:#f2da00;border-color:#f2da00}
.quick a.q-top{background:var(--white)}
.quick a.q-top svg{fill:none;stroke:var(--wine);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.quick a.q-top:hover{background:var(--cream-2)}
@media(max-width:1280px){.quick{right:14px}.quick a{width:56px;height:56px;border-radius:12px}}
@media(max-width:860px){.quick{display:none}}
@media (prefers-reduced-motion:reduce){.quick a,.quick a .lb{transition:none}}

/* ---------- 모바일 고정바 ---------- */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;
  grid-template-columns:repeat(3,minmax(0,1fr));
  background:var(--wine);box-shadow:0 -6px 24px rgba(0,0,0,.2);padding-bottom:env(safe-area-inset-bottom)}
.mbar a{display:flex;align-items:center;justify-content:center;gap:8px;height:62px;color:#fff;
  font-size:16.5px;font-weight:700;letter-spacing:-.02em;white-space:nowrap;min-width:0}
.mbar a+a{border-left:1px solid rgba(255,255,255,.25)}
.mbar svg{width:18px;height:18px;fill:#fff;flex:none}
/* 예약 = 전환 버튼이라 네이버 그린으로 강조 */
.mbar a.rsv{background:#03c75a}
@media(max-width:860px){.mbar{display:grid}body{padding-bottom:62px}}
@media(max-width:380px){.mbar a{font-size:15px;gap:6px}.mbar svg{width:16px;height:16px}}

/* ================= 공용 컴포넌트 ================= */

/* 이미지 + 텍스트 2단 */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5.5vw,80px);align-items:center}
.split.rev .split-fig{order:2}
.split-fig img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px}
.split-copy .kicker{display:block;font-size:12px;font-weight:700;letter-spacing:.3em;color:var(--wine-soft);margin-bottom:20px}
.split-copy h2{font-family:var(--f-serif);font-weight:300;font-size:clamp(25px,3.4vw,37px);
  line-height:1.55;letter-spacing:-.03em;margin-bottom:24px}
.split-copy h2 b{font-weight:700;color:var(--wine)}
.split-copy p{color:var(--ink-2);font-size:var(--fs-lead);line-height:2;margin-bottom:16px;text-wrap:pretty}
@media(max-width:900px){.split{grid-template-columns:1fr}.split.rev .split-fig{order:0}}

/* 번호 리스트 */
.numlist{margin-top:30px;border-top:1px solid var(--line)}
.numlist li{list-style:none;display:flex;gap:18px;align-items:flex-start;padding:20px 0;border-bottom:1px solid var(--line)}
.numlist b{font-family:var(--f-serif);font-size:15px;font-weight:700;color:var(--gold);
  letter-spacing:.08em;flex:none;padding-top:3px;min-width:26px}
.numlist span{font-size:17px;color:var(--ink);line-height:1.75}

/* 카드 그리드 */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
.cards.two{grid-template-columns:repeat(2,1fr)}
.card{position:relative;background:var(--white);border:1px solid var(--line);overflow:hidden;
  transition:all .38s cubic-bezier(.22,.61,.36,1);display:flex;flex-direction:column}
.card::before{content:'';position:absolute;left:0;top:0;width:100%;height:3px;background:var(--wine);
  transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.22,.61,.36,1);z-index:2}
.card:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgba(124,20,40,.13);border-color:#dcc0bd}
.card:hover::before{transform:scaleX(1)}
.card-fig{aspect-ratio:16/10;overflow:hidden;background:var(--cream-2)}
.card-fig img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.card:hover .card-fig img{transform:scale(1.05)}
.card-body{padding:30px 28px 32px;flex:1;display:flex;flex-direction:column}
.card-num{font-family:var(--f-serif);font-size:13px;font-weight:700;letter-spacing:.16em;color:var(--gold);margin-bottom:14px;display:block}
.card h3{font-family:var(--f-serif);font-size:23px;font-weight:700;color:var(--ink);margin-bottom:12px;letter-spacing:-.02em;line-height:1.45}
.card p{font-size:16.5px;color:var(--ink-2);line-height:1.85;margin-bottom:18px;flex:1}
.tags{display:flex;flex-wrap:wrap;gap:7px}
.tags span{font-size:14px;font-weight:600;color:var(--wine);background:var(--cream-2);border-radius:999px;padding:6px 14px}
@media(max-width:980px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.cards,.cards.two{grid-template-columns:1fr}.card-body{padding:26px 24px 28px}}

/* 다크 밴드 */
.band{background:var(--wine-deep);color:#fff;position:relative;overflow:hidden}
.band::before{content:'';position:absolute;inset:0;
  background:radial-gradient(80% 70% at 85% 10%,rgba(190,160,120,.30),transparent 62%),
             radial-gradient(70% 60% at 5% 95%,rgba(176,141,87,.24),transparent 60%)}
.band .wrap{position:relative;z-index:2}
.band .sec-head h2{color:#fff}
.band .sec-head h2 b{color:#ecd9bb}
.band .sec-head p{color:rgba(255,255,255,.74)}
.band .sec-head .kicker{color:#d9c3a3}

/* 정보 테이블 */
.infotable{border-top:2px solid var(--wine)}
.infotable dl{display:grid;grid-template-columns:auto 1fr;gap:0}
.infotable dt,.infotable dd{padding:17px 0;border-bottom:1px solid var(--line);font-size:17.5px}
.infotable dt{font-weight:700;color:var(--ink);min-width:118px}
.infotable dd{text-align:right;color:var(--ink-2);font-variant-numeric:tabular-nums}
.infotable dd b{color:var(--wine);font-weight:700}
.infotable dd .nite{display:inline-block;font-size:13px;font-weight:700;color:#fff;background:var(--wine-soft);
  border-radius:999px;padding:3px 10px;margin-left:8px;vertical-align:middle}
.note{margin-top:22px;background:var(--cream);border-left:3px solid var(--gold);padding:18px 22px;
  font-size:16px;color:var(--ink-2);line-height:1.8}

/* FAQ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:24px 44px 24px 0;position:relative;
  font-size:18.5px;font-weight:700;color:var(--ink);line-height:1.6}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';position:absolute;right:12px;top:31px;width:11px;height:11px;
  border-right:2px solid var(--wine);border-bottom:2px solid var(--wine);transform:rotate(45deg);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .ans{padding:0 0 26px;font-size:17px;color:var(--ink-2);line-height:1.95;text-wrap:pretty}

/* ---------- 팝업 (어드민에서 등록) ---------- */
.popwrap{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  gap:18px;flex-wrap:wrap;padding:24px;background:rgba(38,29,21,.55);overflow-y:auto}
.pop{background:var(--white);border-radius:14px;overflow:hidden;width:min(400px,92vw);
  box-shadow:0 24px 60px rgba(38,29,21,.4);animation:popin .42s cubic-bezier(.22,.61,.36,1)}
@keyframes popin{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
.pop-img{width:100%;display:block;max-height:52vh;object-fit:cover}
.pop-body{padding:26px 26px 22px}
.pop-body h3{font-family:var(--f-serif);font-size:22px;font-weight:700;color:var(--ink);
  line-height:1.45;margin-bottom:12px;letter-spacing:-.02em}
.pop-body p{font-size:16.5px;color:var(--ink-2);line-height:1.85}
.pop-cta{display:inline-flex;align-items:center;justify-content:center;margin-top:18px;
  background:var(--wine);color:#fff;font-size:16px;font-weight:700;
  padding:13px 24px;border-radius:8px;transition:background .25s}
.pop-cta:hover{background:var(--wine-deep)}
.pop-foot{display:grid;grid-template-columns:1fr auto;border-top:1px solid var(--line)}
.pop-foot button{background:none;border:0;padding:16px 18px;font-family:inherit;
  font-size:15.5px;font-weight:600;color:var(--ink-3);cursor:pointer;transition:background .2s}
.pop-foot button:hover{background:var(--cream-2)}
.pop-foot .pop-close{font-weight:700;color:var(--ink);border-left:1px solid var(--line);padding-inline:26px}
@media(max-width:520px){
  .popwrap{padding:16px;align-items:flex-start;padding-top:40px}
  .pop-body{padding:22px 20px 18px}
  .pop-body h3{font-size:20px}
}
@media (prefers-reduced-motion:reduce){.pop{animation:none}}
/* 이미지 전용 팝업 — 여백 없이 이미지가 주인공 */
.pop-only-img .pop-img{max-height:70vh}
.pop-imglink{display:block}
.pop-imglink:hover .pop-img{opacity:.94;transition:opacity .25s}