/* =========================================================
   자황원외탕전실 — 임상약침학회 산하
   AJAD 대응 종합 사이트 · 예전 미주 디자인 언어 재사용 위 추가 컴포넌트
   ========================================================= */

/* 자황 하우스 액센트 — 모던 클리니컬 네이비 + 블루 */
:root{
  --brand:      #1B3A6B;
  --brand-deep: #12294E;
  --brand-soft: #D6E2F4;
  --brand-tint: #F1F6FC;
  --terra:      #2E6BE6;
}

/* 로고 — 자황(원외탕전실) + 임상약침학회(산하) 병기 */
.nav__brand{ display:flex; align-items:center; gap:12px; padding-left:0; }
.nav__logo{ height:27px; width:auto; display:block; transition:height .4s var(--ease); }
.nav.solid .nav__logo{ height:24px; }
.nav__brand-div{ width:1px; height:20px; background:var(--line); flex:0 0 auto; }
.nav__logo--kscp{ height:25px; }
.nav.solid .nav__logo--kscp{ height:22px; }
@media (max-width:860px){ .nav__logo{ height:23px; } .nav__logo--kscp{ height:21px; } .nav__brand{ gap:9px; } }
.foot__logo{ height:36px; width:auto; display:block; margin-bottom:14px; }

/* 히어로 — 로고 + 이미지 스플릿 */
.hero--split{ min-height:100svh; }
.hero--split .hero__inner{ display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(30px,5vw,74px); align-items:center; }
.hero__logo{ width:min(440px,80%); height:auto; margin:6px 0 0; opacity:0; animation:rise 1.1s var(--ease) .18s forwards; }
.hero__head{ font-family:var(--serif-ko); font-weight:800; font-size:clamp(2.5rem,5.4vw,4.1rem);
  line-height:1.12; letter-spacing:-.045em; color:var(--ink); margin-top:22px;
  opacity:0; animation:rise 1.1s var(--ease) .18s forwards; }
.hero__sub{ margin-top:24px; font-size:clamp(1.02rem,1.5vw,1.2rem); color:var(--ink-soft);
  line-height:1.72; font-weight:400; max-width:34ch; opacity:0; animation:rise 1.1s var(--ease) .34s forwards; }
.hero--split .hero__tagline{ font-family:var(--serif-ko); font-weight:600; font-size:clamp(1.4rem,2.5vw,2.05rem);
  color:var(--ink); margin-top:28px; line-height:1.45; letter-spacing:-.02em; max-width:30ch; opacity:0; animation:rise 1.1s var(--ease) .34s forwards; }
.hero__cta{ margin-top:36px; display:flex; gap:14px; flex-wrap:wrap; opacity:0; animation:rise 1.1s var(--ease) .5s forwards; }
.hero__endorse{ margin-top:40px; display:flex; align-items:center; gap:20px; padding-top:26px;
  border-top:1px solid var(--line); max-width:520px; opacity:0; animation:fade 1s ease .8s forwards; }
.hero__endorse img{ height:66px; width:auto; }
.hero__endorse span{ font-size:.95rem; color:var(--ink-soft); font-weight:500; letter-spacing:.01em; line-height:1.5; }
.hero__frame{ position:relative; border-radius:10px; overflow:hidden; aspect-ratio:4/5;
  box-shadow:0 50px 90px -55px rgba(42,36,32,.6); opacity:0; animation:rise 1.2s var(--ease) .4s forwards; }
.hero__frame img{ width:100%; height:100%; object-fit:cover; }
.hero__frame::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(20,16,14,.28)); }
.hero__frame__cap{ position:absolute; left:0; bottom:0; z-index:2; padding:26px 30px; color:#fff; }
.hero__frame__cap b{ font-family:var(--serif); font-weight:500; font-size:1.15rem; letter-spacing:.04em; display:block; }
.hero__frame__cap span{ font-size:.78rem; letter-spacing:.14em; opacity:.85; }
@media (max-width:860px){
  .hero--split .hero__inner{ grid-template-columns:1fr; gap:36px; }
  .hero__frame{ aspect-ratio:16/11; order:-1; }
  .hero__logo{ width:min(360px,86%); }
}

/* nav 우측 조제문의 버튼 */
.nav__cta{
  font-size:.76rem; letter-spacing:.14em; color:var(--on-brand);
  background:var(--brand); border:1px solid var(--brand);
  padding:9px 18px; border-radius:100px; transition:all .35s var(--ease);
}
.nav__cta:hover{ background:var(--brand-deep); border-color:var(--brand-deep); }
.nav__links a.nav__cta::after{ display:none; }
@media (max-width:860px){ .nav__cta{ width:auto!important; border-bottom:0!important; margin-top:8px; } }

/* =========================================================
   Sub-page hero (인터뷰/약침/논문/디자인센터 공통)
   ========================================================= */
.phero{
  padding: clamp(150px,20vw,220px) 0 clamp(48px,7vw,86px);
  background:
    radial-gradient(120% 90% at 88% 8%, rgba(46,107,230,.08), transparent 58%),
    var(--ivory);
  border-bottom:1px solid var(--line-soft);
}
.phero__eyebrow{ display:block; margin-bottom:22px; }
.phero h1{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(2.6rem,7vw,5rem); line-height:1; letter-spacing:.01em; color:var(--ink);
}
.phero h1 .ko{ font-family:var(--serif-ko); }
.phero__sub{ margin-top:26px; color:var(--ink-soft); font-size:clamp(1rem,1.6vw,1.14rem);
  line-height:1.9; max-width:60ch; font-weight:300; }
.phero__meta{ margin-top:30px; display:flex; gap:26px; flex-wrap:wrap;
  font-size:.76rem; letter-spacing:.16em; color:var(--muted); }
.phero__meta span{ display:flex; align-items:center; gap:9px; }
.phero__meta span::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--brand); }

/* =========================================================
   좌측 정렬 섹션 헤드 (서브페이지용)
   ========================================================= */
.sec-head--left{ margin:0 0 clamp(38px,5vw,64px); text-align:left; max-width:none; }
.sec-head--left .eyebrow{ display:block; margin-bottom:18px; }
.sec-head--left h2{ font-family:var(--serif); font-size:clamp(1.8rem,4vw,2.8rem); }
.sec-head--left p{ margin-top:16px; color:var(--ink-soft); max-width:62ch; }

/* =========================================================
   Category filter bar (약침 리스트)
   ========================================================= */
.catbar{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:clamp(36px,5vw,56px); }
.catbar button{
  font-family:var(--sans); font-size:.82rem; letter-spacing:.06em; font-weight:300;
  padding:10px 20px; border-radius:100px; cursor:pointer;
  background:var(--paper); border:1px solid var(--line); color:var(--ink-soft);
  transition:all .3s var(--ease);
}
.catbar button:hover{ border-color:var(--brand-soft); color:var(--ink); }
.catbar button.active{ background:var(--ink); border-color:var(--ink); color:var(--ivory); }

/* =========================================================
   제품(약침) 카드 그리드
   ========================================================= */
.plist{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.2vw,28px); }
@media (max-width:860px){ .plist{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .plist{ grid-template-columns:1fr; } }

.pcard{
  position:relative; display:flex; flex-direction:column;
  background:var(--paper); border:1px solid var(--line-soft); border-radius:8px;
  overflow:hidden; transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.pcard:hover{ transform:translateY(-6px); box-shadow:0 26px 54px -32px rgba(42,36,32,.4); border-color:var(--brand-soft); }
.pcard__top{
  aspect-ratio:1/1; position:relative; overflow:hidden; background:#fff;
  display:flex; align-items:center; justify-content:center;
}
.pcard__photo{ width:100%; height:100%; object-fit:cover; }
.pcard__vial{ width:clamp(46px,6vw,64px); height:auto; filter:drop-shadow(0 12px 22px rgba(42,36,32,.18)); }
.pcard__cat{ position:absolute; top:14px; left:14px; font-size:.66rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--brand-deep); background:rgba(255,255,255,.8);
  padding:5px 11px; border-radius:100px; border:1px solid var(--brand-soft); }
.pcard__body{ padding:clamp(20px,2.4vw,28px); display:flex; flex-direction:column; flex:1; }
.pcard__name{ font-family:var(--serif-ko); font-weight:500; font-size:1.24rem; color:var(--ink); }
.pcard__code{ font-family:var(--sans); font-size:.72rem; letter-spacing:.14em; color:var(--muted); margin-top:6px; }
.pcard__desc{ margin-top:14px; color:var(--ink-soft); font-size:.92rem; line-height:1.8; font-weight:300; flex:1; }
.pcard__foot{ margin-top:20px; padding-top:16px; border-top:1px solid var(--line-soft);
  display:flex; align-items:center; justify-content:space-between; }
.pcard__link{ font-size:.76rem; letter-spacing:.14em; color:var(--brand); display:inline-flex; align-items:center; gap:.5em; }
.pcard__link .arw{ transition:transform .3s var(--ease); }
.pcard:hover .pcard__link .arw{ transform:translateX(4px); }

/* =========================================================
   인터뷰 영상 카드
   ========================================================= */
.vgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,30px); }
@media (max-width:860px){ .vgrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .vgrid{ grid-template-columns:1fr; } }
.vcard{ display:flex; flex-direction:column; }
.vcard__thumb{
  aspect-ratio:16/10; border-radius:8px; overflow:hidden; position:relative;
  background:linear-gradient(150deg,rgba(42,36,32,.72),rgba(42,36,32,.5)), url('../img/vials-fill.jpg') center/cover, #2A2420;
  display:flex; align-items:center; justify-content:center;
}
.vcard__thumb::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,16,14,.15) 40%,rgba(20,16,14,.55)); }
.vcard__play{ width:58px; height:58px; border-radius:50%; background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.5); display:flex; align-items:center; justify-content:center; z-index:2;
  transition:all .4s var(--ease); }
.vcard:hover .vcard__play{ background:var(--brand); border-color:var(--brand); transform:scale(1.08); }
.vcard__play svg{ width:20px; height:20px; fill:#fff; margin-left:3px; }
.vcard__tag{ position:absolute; top:14px; left:14px; z-index:2; font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:#fff; background:rgba(20,16,14,.5); padding:5px 11px; border-radius:100px; }
.vcard__badge{ position:absolute; top:14px; right:14px; z-index:2; font-size:.64rem; letter-spacing:.12em;
  color:var(--ink); background:var(--gold-soft); padding:4px 10px; border-radius:100px; font-weight:500; }
.vcard__meta{ padding:20px 4px 0; }
.vcard__clinic{ font-size:.74rem; letter-spacing:.14em; color:var(--brand); }
.vcard__ttl{ font-family:var(--serif-ko); font-size:1.16rem; color:var(--ink); margin-top:10px; line-height:1.5; }
.vcard__q{ margin-top:12px; font-size:.88rem; color:var(--ink-soft); font-weight:300; }
.vcard__q span{ font-family:var(--serif); color:var(--brand); margin-right:6px; }

/* =========================================================
   최신논문 리스트
   ========================================================= */
.papers{ border-top:1px solid var(--line); }
.paper{
  display:grid; grid-template-columns:120px 1fr auto; gap:clamp(16px,3vw,44px); align-items:center;
  padding:clamp(24px,3vw,34px) 0; border-bottom:1px solid var(--line);
  transition:background .4s var(--ease);
}
.paper:hover{ background:var(--brand-tint); }
.paper__date{ font-family:var(--serif); font-size:1.1rem; color:var(--brand-deep); }
.paper__date small{ display:block; font-family:var(--sans); font-size:.7rem; letter-spacing:.16em; color:var(--muted); margin-top:4px; }
.paper__ttl{ font-family:var(--serif-ko); font-size:1.16rem; color:var(--ink); line-height:1.5; }
.paper__src{ margin-top:8px; font-size:.82rem; color:var(--muted); letter-spacing:.02em; }
.paper__arw{ color:var(--brand); font-size:1.1rem; transition:transform .3s var(--ease); }
.paper:hover .paper__arw{ transform:translateX(5px); }
@media (max-width:640px){
  .paper{ grid-template-columns:1fr; gap:8px; }
  .paper__arw{ display:none; }
}

/* =========================================================
   디자인센터 카드
   ========================================================= */
.dcards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.2vw,26px); }
@media (max-width:860px){ .dcards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .dcards{ grid-template-columns:1fr; } }
.dcard{
  border:1px solid var(--line-soft); border-radius:8px; padding:clamp(26px,3vw,38px);
  background:var(--paper); transition:all .5s var(--ease); display:flex; flex-direction:column;
}
.dcard:hover{ transform:translateY(-6px); box-shadow:0 24px 50px -32px rgba(42,36,32,.36); border-color:var(--brand-soft); }
.dcard__ic{ width:44px; height:44px; color:var(--brand); }
.dcard__ic svg{ width:100%; height:100%; }
.dcard h3{ font-family:var(--serif-ko); font-size:1.2rem; color:var(--ink); margin:22px 0 12px; }
.dcard p{ color:var(--ink-soft); font-size:.94rem; line-height:1.8; font-weight:300; flex:1; }
.dcard__tag{ margin-top:20px; font-size:.72rem; letter-spacing:.14em; color:var(--muted); }

/* =========================================================
   디자인센터 — 홍보물 갤러리
   ========================================================= */
.mgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,30px); }
@media(max-width:860px){ .mgrid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .mgrid{ grid-template-columns:1fr; } }
.mcard{ border:1px solid var(--line-soft); border-radius:14px; overflow:hidden; background:var(--paper);
  display:flex; flex-direction:column; transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease); }
.mcard:hover{ transform:translateY(-6px); box-shadow:0 26px 54px -34px rgba(21,35,63,.32); border-color:var(--brand-soft); }
.mcard__thumb{ aspect-ratio:3/4; background:var(--ivory-2); display:flex; align-items:center; justify-content:center;
  overflow:hidden; border-bottom:1px solid var(--line-soft); position:relative; }
.mcard__thumb img{ width:100%; height:100%; object-fit:contain; }
.mcard__badge{ position:absolute; top:12px; left:12px; font-size:.66rem; letter-spacing:.08em; font-weight:600;
  color:#fff; background:rgba(21,35,63,.72); padding:5px 11px; border-radius:100px; }
.mcard__body{ padding:20px 22px 22px; display:flex; flex-direction:column; }
.mcard__type{ font-size:.72rem; letter-spacing:.1em; color:var(--brand); font-weight:700; text-transform:uppercase; }
.mcard__title{ font-family:var(--serif-ko); font-weight:700; font-size:1.14rem; color:var(--ink); margin-top:6px; }
.mcard__dl{ margin-top:16px; display:inline-flex; align-items:center; gap:.5em; font-size:.84rem; font-weight:600; color:var(--brand); }
.mcard__dl svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.8; }
.mcard:hover .mcard__dl svg{ transform:translateY(2px); transition:transform .3s var(--ease); }

/* =========================================================
   Home — featured highlight rows
   ========================================================= */
.hi-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap;
  margin-bottom:clamp(30px,4vw,48px); }
.hi-head .eyebrow{ display:block; margin-bottom:14px; }
.hi-head h2{ font-family:var(--serif); font-size:clamp(1.8rem,4vw,2.8rem); }
.hi-head h2 .ko{ font-family:var(--serif-ko); }
.hi-more{ font-size:.78rem; letter-spacing:.16em; color:var(--brand); display:inline-flex; align-items:center; gap:.5em; white-space:nowrap; }
.hi-more .arw{ transition:transform .3s var(--ease); }
.hi-more:hover .arw{ transform:translateX(4px); }

/* 카테고리(시리즈) 쇼케이스 카드 */
.scards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
@media (max-width:820px){ .scards{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .scards{ grid-template-columns:1fr; } }
.scard{ background:var(--paper); padding:clamp(30px,3.4vw,46px); display:flex; flex-direction:column;
  transition:background .45s var(--ease); position:relative; }
.scard:hover{ background:var(--brand-tint); }
.scard__k{ font-family:var(--sans); font-size:.74rem; letter-spacing:.12em; color:var(--brand); }
.scard h3{ font-family:var(--serif); font-size:clamp(1.5rem,2.6vw,2rem); color:var(--ink); margin:14px 0 12px; }
.scard p{ color:var(--ink-soft); font-size:.94rem; line-height:1.8; font-weight:300; flex:1; }
.scard__go{ margin-top:22px; font-size:.76rem; letter-spacing:.14em; color:var(--brand-deep); display:inline-flex; align-items:center; gap:.5em; }
.scard__go .arw{ transition:transform .3s var(--ease); }
.scard:hover .scard__go .arw{ transform:translateX(5px); }

/* 소개 밴드 */
.introband{ background:var(--brand-tint); }
.introband .split h2{ font-family:var(--serif); }
.stat-row{ display:flex; gap:clamp(28px,5vw,64px); flex-wrap:wrap; margin-top:34px; }
.stat b{ font-family:var(--serif); font-size:clamp(2rem,4vw,2.8rem); color:var(--brand-deep); font-weight:500; display:block; line-height:1; }
.stat span{ font-size:.8rem; letter-spacing:.12em; color:var(--muted); margin-top:8px; display:block; }

/* 안내 고지 바 */
.noticebar{ background:var(--ink); color:rgba(247,242,234,.82); text-align:center;
  padding:12px var(--gutter); font-size:.8rem; letter-spacing:.01em; font-weight:300; }
.noticebar b{ color:#fff; font-weight:400; }

/* =========================================================
   실물 이미지 컴포넌트
   ========================================================= */
/* 전체폭 시설 이미지 밴드 */
.facility-band{ position:relative; height:clamp(320px,52vw,560px); overflow:hidden; }
.facility-band img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.facility-band::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(20,16,14,.62), rgba(20,16,14,.18) 60%, transparent); }
.facility-band__cap{ position:absolute; left:0; bottom:0; z-index:2; padding:clamp(28px,5vw,64px) var(--gutter);
  max-width:var(--maxw); margin:0 auto; left:50%; transform:translateX(-50%); width:100%; }
.facility-band__cap .eyebrow{ color:var(--gold-soft); display:block; margin-bottom:14px; }
.facility-band__cap h2{ font-family:var(--serif); color:#fff; font-size:clamp(1.7rem,3.6vw,2.8rem); line-height:1.3; max-width:20ch; }
.facility-band__cap p{ color:rgba(255,255,255,.82); margin-top:14px; font-weight:300; max-width:44ch; font-size:.98rem; }

/* 이미지 배경 어두운 밴드(품질 섹션) */
.philo.philo--img{ position:relative; }
.philo.philo--img::before{ content:""; position:absolute; inset:0; z-index:0;
  background-image:var(--bgimg); background-size:cover; background-position:center; opacity:.20; }
.philo.philo--img .wrap{ position:relative; z-index:1; }

/* 성분 SEM 이미지 */
.ing-figure{ margin-top:40px; border-radius:8px; overflow:hidden; border:1px solid var(--line); }
.ing-figure img{ width:100%; height:auto; display:block; }
.ing-figure figcaption{ background:var(--paper); color:var(--muted); font-size:.78rem; letter-spacing:.02em;
  padding:12px 18px; border-top:1px solid var(--line-soft); }

/* 제품 페이지 공정 이미지 */
.prod-figure{ border-radius:8px; overflow:hidden; margin-bottom:clamp(30px,4vw,48px); position:relative; aspect-ratio:16/7; }
.prod-figure img{ width:100%; height:100%; object-fit:cover; display:block; }

/* 약침 페이지 — 홍보물 비주얼 에디토리얼 밴드 */
.prod-poster{ background:var(--brand-tint); }
.pp-split{ display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(30px,5vw,72px); align-items:center; }
.pp-media{ border-radius:16px; overflow:hidden; box-shadow:0 44px 90px -52px rgba(21,35,63,.55); background:#fff; }
.pp-media img{ width:100%; height:auto; display:block; }
.pp-text h2{ font-family:var(--serif-ko); font-weight:800; font-size:clamp(2rem,4.2vw,3.2rem); line-height:1.15; margin:0; }
.pp-tag{ font-family:var(--serif-ko); font-weight:600; font-size:clamp(1.15rem,2vw,1.45rem); color:var(--ink); margin-top:18px; line-height:1.5; }
.pp-desc{ margin-top:16px; color:var(--ink-soft); font-size:1rem; line-height:1.9; max-width:52ch; }
.pp-text .btn{ margin-top:30px; }
@media(max-width:820px){ .pp-split{ grid-template-columns:1fr; } .pp-media{ max-width:440px; } }

/* =========================================================
   약침 개별 페이지 — 히어로
   ========================================================= */
.prodhero{
  min-height:88svh; display:grid; grid-template-columns:1.08fr .92fr; align-items:center;
  gap:clamp(30px,5vw,70px); padding:clamp(130px,16vw,180px) var(--gutter) clamp(50px,7vw,80px);
  background:
    radial-gradient(110% 90% at 88% 12%, rgba(46,107,230,.10), transparent 58%),
    var(--brand-tint);
}
.prodhero__text{ max-width:600px; }
.prodhero__latin{
  font-family:var(--serif); font-weight:500; color:var(--brand-deep);
  font-size:clamp(3rem,7vw,5.6rem); line-height:.96; letter-spacing:.03em; margin-top:8px;
}
.prodhero__ko{ font-family:var(--serif-ko); font-size:1.05rem; letter-spacing:.14em; color:var(--ink); margin-top:16px; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.prodhero__ko .hanja{ color:var(--brand); }
.prodhero__code{ font-family:var(--sans); font-size:.74rem; letter-spacing:.12em; color:var(--muted); }
.prodhero__tag{ font-family:var(--serif-ko); font-weight:300; font-size:clamp(1.3rem,3vw,2rem);
  color:var(--ink); margin-top:32px; line-height:1.55; }
.prodhero__desc{ margin-top:22px; color:var(--ink-soft); font-size:1.02rem; max-width:48ch; line-height:1.95; }
.prodhero__cta{ margin-top:36px; display:flex; gap:14px; flex-wrap:wrap; }
.prodhero__media{ display:flex; align-items:center; justify-content:center; }
.prodhero__media svg{ filter:drop-shadow(0 30px 50px rgba(42,36,32,.22)); }
.prodhero__photo{ width:min(430px,88%); height:auto; border-radius:14px; background:#fff;
  box-shadow:0 44px 84px -52px rgba(42,36,32,.55); border:1px solid var(--line-soft); }
@media (max-width:900px){
  .prodhero{ grid-template-columns:1fr; min-height:auto; }
  .prodhero__media{ order:-1; }
  .prodhero__media svg{ width:130px; }
}
.backlink .arw{ display:inline-block; }

/* 임상약침학회 메인 복귀 링크 강조 */
.nav__links a.nav__home{ color: var(--brand); font-weight: 700; }

/* =========================================================
   가독성 보정 (2026-08 점검)
   style.css 가 먼저 로드되므로 여기서 마지막으로 덮어쓴다.
   ========================================================= */

/* ① 상단 '조제의뢰 문의' 버튼 — 남색 배경에 남색 글씨라 묻혀 있었다.
      .nav__links a 규칙이 색을 덮어써서 대비가 거의 없었다. */
.nav .nav__links a.nav__cta{
  color:#fff;
  background:var(--brand);
  border-color:var(--brand);
  font-weight:600;
  font-size:.82rem;
  letter-spacing:.02em;
  /* 글자에 배경이 딱 붙어 답답했다. 좌우 여백을 넉넉히 줘 버튼처럼 보이게. */
  padding:12px 30px;
  line-height:1;
  white-space:nowrap;
  box-shadow:0 6px 18px rgba(27,58,107,.22);
}
.nav .nav__links a.nav__cta:hover{ box-shadow:0 8px 22px rgba(27,58,107,.3); }
@media (max-width:860px){
  .nav .nav__links a.nav__cta{ display:block; text-align:center; padding:14px 24px; }
}
.nav .nav__links a.nav__cta:hover,
.nav .nav__links a.nav__cta:focus-visible{
  color:#fff;
  background:var(--brand-deep,#12294d);
  border-color:var(--brand-deep,#12294d);
}

/* ② 좌상단 임상약침학회 로고 — 25px 로는 글자가 뭉개져 무엇인지 알 수 없었다.
      크기를 키우고, 왜 붙어 있는지 알 수 있게 '산하' 라벨을 함께 둔다. */
.nav__brand{ gap:14px; }
.nav__logo--kscp{ height:34px; }
.nav.solid .nav__logo--kscp{ height:30px; }
/* 로고 이미지를 빼고 텍스트만 남겼으므로, 보조표기처럼 작게가 아니라
   읽히는 크기로 둔다. 화면이 좁으면 감춘다(자황 로고만 남김). */
.nav__by{ display:flex; align-items:center; padding-right:6px; }
.nav__by small{
  font-size:.7rem; line-height:1.35; letter-spacing:.01em;
  color:var(--muted,#6b7280); white-space:nowrap;
}
@media (max-width:1100px){ .nav__by{ display:none; } }
@media (max-width:860px){
  .nav__logo--kscp{ height:26px; }
  .nav__brand{ gap:10px; }
}

/* ③ 한글에 라틴용 자간(.2~.34em)이 그대로 걸려 "임 상 약 침 학 회" 처럼 벌어졌다.
      한글은 자간을 넓히면 단어가 끊겨 읽힌다. 라틴 표기에만 넓은 자간을 남긴다. */
.eyebrow, .hero__eyebrow, .phero__eyebrow{ letter-spacing:.08em; }
.bcard__ko, .bhero__ko, .pillar__t{ letter-spacing:.02em; }
.sec-head h2 .ko{ letter-spacing:.01em; }
.nav__brand .ko{ letter-spacing:.06em; }
/* 라틴 캡션은 원래대로 넓게 */
.hero__frame__cap span, .bcard__latin, .pillar__no{ letter-spacing:.18em; }

/* ④ 본문 가독성 — 긴 문장이 촘촘해 읽기 힘들었다. */
.hero__sub, .sec-head p, .card p{ line-height:1.75; }

/* 히어로의 보조 버튼도 같은 리듬으로 (기본 .btn 이 CTA 보다 헐거워 짝이 안 맞았다) */
.hero__cta .btn{ padding:16px 34px; font-size:.86rem; letter-spacing:.02em; }
.hero__cta .btn .arw{ margin-left:8px; }
/* 상단바 좌우 여백 — 로고와 메뉴가 화면 끝에 붙어 있었다 */
.nav{ padding-left:clamp(18px,4vw,44px); padding-right:clamp(18px,4vw,44px); }

/* =========================================================
   헤더 타이포 재정비
   측정해 보니 문제가 여럿이었다.
   ① 한글 라벨에 Manrope(라틴 전용)가 잡혀 폴백 서체로 렌더 → 로고 옆에서 서체가 튐
   ② 메뉴 자간 .12em 이 한글에 걸려 "인 터 뷰 영 상" 처럼 벌어짐
   ③ 13px 는 한글 내비로 작음
   ④ 부모 사이트로 돌아가는 링크가 현재 메뉴보다 굵고 진해 주객이 바뀜
   ⑤ 자물쇠 이모지가 정갈한 타이포에 섞여 톤이 깨짐
   ========================================================= */

/* ① 한글은 반드시 한글 폰트로 */
.nav__by small{
  font-family:var(--sans);
  font-size:.74rem;
  font-weight:500;
  line-height:1.4;
  color:#5b6b86;
  letter-spacing:0;
}

/* ②③ 메뉴: 한글 자간 정상화 + 읽히는 크기 */
.nav .nav__links a{
  font-family:var(--sans);
  /* .92rem 으로 키웠더니 메뉴가 두 줄로 접혔다. 자간을 줄인 만큼 이미 읽기 쉬워졌으므로
     크기는 원래대로 두고 줄바꿈만 막는다. */
  font-size:.84rem;
  letter-spacing:.005em;
  font-weight:500;
  color:#4a5872;
  white-space:nowrap;
}
.nav .nav__links a:hover{ color:var(--brand); }
.nav .nav__links a.active{ color:var(--brand); font-weight:700; }

/* ④ 학회로 돌아가기 — 보조 링크답게 한 단계 낮춘다 */
.nav .nav__links a[href*="kscp"],
.nav .nav__links a.nav__home{
  font-weight:500;
  color:#7b879c;
  font-size:.86rem;
}
.nav .nav__links a[href*="kscp"]:hover{ color:var(--brand); }

/* ⑤ 자물쇠 이모지 대신 '회원' 배지 — 메뉴를 JS가 텍스트로 그리므로 CSS 로 붙인다 */
/* 로그인 링크가 "/login?next=/wontang/design-center.html" 이라 부분·끝 일치로는
   둘 다 걸린다. 메뉴 항목은 상대경로 그대로이므로 정확히 일치시킨다. */
.nav .nav__links a[href="design-center.html"]::before{
  content:"회원";
  margin-right:6px; padding:2px 6px; border-radius:4px;
  background:#eef1f6; color:#7b879c;
  font-size:.62rem; font-weight:600; letter-spacing:0; vertical-align:1px;
}

/* 통계 항목 — '공동 처방전' 처럼 숫자가 아닌 값도 들어가서 크기를 맞춘다 */
.stat b{ font-size:clamp(1.35rem,2.4vw,1.9rem); line-height:1.15; letter-spacing:-.01em; }
.stat span{ display:block; margin-top:8px; font-size:.78rem; line-height:1.55; color:var(--muted,#6b7280); letter-spacing:0; }

/* =========================================================
   우하단 고정 문의 버튼 (전 페이지)
   ========================================================= */
.floaty{
  position:fixed; right:20px; bottom:20px; z-index:60;
  display:flex; flex-direction:column; align-items:flex-end; gap:10px;
}
.floaty a{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 18px; border-radius:100px;
  font-size:.82rem; font-weight:700; letter-spacing:.01em;
  box-shadow:0 8px 22px rgba(0,0,0,.16);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.floaty a:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.2); }
.floaty__kakao{ background:#FEE500; color:#3C1E1E; }
.floaty__mall{ background:var(--brand); color:#fff; padding:14px 22px; }
.floaty__mall img{ display:block; height:17px; width:auto; }
@media (max-width:520px){
  .floaty{ right:14px; bottom:14px; }
  .floaty a{ padding:11px 16px; font-size:.78rem; }
  .floaty__mall{ padding:12px 18px; }
  .floaty__mall img{ height:15px; }
}

/* 시설 밴드 문구는 넓은 화면에서 한 줄로 읽히게.
   44ch 는 한글 기준으로 한 문장을 억지로 접어 놓는다(한글은 글자폭이 ch 의 두 배). */
.facility-band__cap p{ max-width:none; }
@media (min-width:900px){
  .facility-band__cap p{ white-space:nowrap; }
}

/* 밝은 건물 사진 위라 좌→우 그라데이션만으로는 글자가 뜬다.
   글자가 놓이는 아래쪽에 어둠을 한 겹 더 깔아 어떤 사진에서도 읽히게 한다. */
.facility-band::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(12,14,24,.78) 0%, rgba(12,14,24,.42) 34%, transparent 62%);
}
.facility-band__cap .eyebrow{ color:#fff; opacity:.9; text-shadow:0 1px 8px rgba(0,0,0,.45); }
.facility-band__cap h2,
.facility-band__cap p{ text-shadow:0 1px 10px rgba(0,0,0,.35); }
.facility-band__cap p{ color:rgba(255,255,255,.9); }


/* 보건복지부 인증 — 소개 페이지 */
.cert__badge{ display:flex; align-items:center; gap:clamp(16px,2.4vw,28px); flex-wrap:wrap;
  padding:clamp(20px,2.6vw,30px) clamp(22px,3vw,34px); margin:0 0 clamp(28px,3.4vw,44px);
  background:var(--brand-tint); border:1px solid var(--line); border-radius:8px; }
.cert__seal{ font-family:var(--sans); font-size:.78rem; letter-spacing:.14em; color:var(--paper);
  background:var(--brand-deep); padding:10px 18px; border-radius:100px; white-space:nowrap; }
.cert__badge p{ color:var(--ink); font-size:1rem; line-height:1.8; margin:0; }
.cert__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.cert__card{ background:var(--paper); padding:clamp(24px,2.8vw,36px); }
.cert__card:hover{ background:var(--brand-tint); }
.cert__no{ font-family:var(--sans); font-size:.72rem; letter-spacing:.14em; color:var(--brand); }
.cert__card h3{ font-family:var(--serif); font-size:clamp(1.15rem,1.9vw,1.4rem); color:var(--ink); margin:10px 0 10px; }
.cert__card p{ color:var(--ink-soft); font-size:.92rem; line-height:1.85; font-weight:300; }
@media (max-width:820px){ .cert__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .cert__grid{ grid-template-columns:1fr; } }


/* 인증 세부 페이지 */
.certhero{ padding-top:clamp(120px,12vw,170px); }
.certhero__head{ font-family:var(--serif); font-size:clamp(2rem,4.6vw,3.2rem); color:var(--ink); margin:6px 0 0; }
.certhero__tag{ margin-top:16px; color:var(--brand-deep); font-size:1.02rem; }
.certhero__intro{ margin-top:20px; max-width:64ch; color:var(--ink-soft); line-height:1.95; }
.certrows{ border-top:1px solid var(--line); }
.certrow{ display:grid; grid-template-columns:220px 1fr; gap:clamp(14px,2.4vw,34px);
  padding:clamp(20px,2.4vw,28px) 0; border-bottom:1px solid var(--line); }
.certrow__k{ font-family:var(--serif); font-size:1.06rem; color:var(--ink); }
.certrow__v{ color:var(--ink-soft); line-height:1.9; font-weight:300; }
.certchecks{ list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.certchecks li{ position:relative; padding-left:26px; color:var(--ink); line-height:1.85; }
.certchecks li::before{ content:""; position:absolute; left:6px; top:.72em; width:7px; height:7px;
  border-radius:50%; background:var(--brand); }
@media (max-width:720px){ .certrow{ grid-template-columns:1fr; gap:6px; } }

/* About 밴드의 인증 한 줄 */
.about-cert{ display:inline-flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:22px;
  padding:12px 18px; background:var(--brand-tint); border:1px solid var(--line); border-radius:100px; }
.about-cert b{ font-family:var(--sans); font-size:.74rem; letter-spacing:.12em; color:var(--paper);
  background:var(--brand-deep); padding:7px 14px; border-radius:100px; }
.about-cert span{ color:var(--ink); font-size:.95rem; }
.about-cert a{ color:var(--brand-deep); font-size:.9rem; white-space:nowrap; }


/* 인증 세부 페이지 — 2차(소개 PPT 반영) */
.certhero{ padding-top:clamp(120px,12vw,170px); }
.certhero__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(26px,4vw,60px); align-items:center; }
.certhero__head{ font-family:var(--serif); font-size:clamp(2rem,4.4vw,3rem); color:var(--ink); margin:6px 0 0; }
.certhero__tag{ margin-top:16px; color:var(--brand-deep); font-size:1.02rem; }
.certhero__intro{ margin-top:18px; color:var(--ink-soft); line-height:1.95; }
.certhero__media{ border-radius:10px; overflow:hidden; background:var(--brand-tint); }
.certhero__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.certflow{ list-style:none; display:flex; flex-wrap:wrap; gap:10px; padding:0; margin:0; }
.certflow__i{ display:flex; align-items:center; gap:9px; padding:12px 18px; background:var(--paper);
  border:1px solid var(--line); border-radius:100px; font-size:.95rem; color:var(--ink); }
.certflow__n{ display:inline-flex; width:20px; height:20px; border-radius:50%; background:var(--brand-deep);
  color:var(--paper); font-size:.68rem; align-items:center; justify-content:center; font-family:var(--sans); }
.certlists{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(20px,3vw,40px); }
.certlist h3{ font-family:var(--serif); font-size:1.15rem; color:var(--ink); margin:0 0 14px; }
@media (max-width:900px){ .certhero__grid{ grid-template-columns:1fr; } }

/* 인증 정보 배지 */
.certinfo{ display:grid; grid-template-columns:auto 1fr; gap:clamp(18px,3vw,34px); align-items:center;
  padding:clamp(20px,2.6vw,30px) clamp(22px,3vw,34px); margin:0 0 clamp(28px,3.4vw,44px);
  background:var(--brand-tint); border:1px solid var(--line); border-radius:8px; }
.certinfo__mark{ width:clamp(84px,9vw,116px); height:auto; display:block; }
.certinfo dl{ display:grid; grid-template-columns:auto 1fr; gap:6px 18px; margin:0; }
.certinfo dt{ font-family:var(--sans); font-size:.74rem; letter-spacing:.1em; color:var(--brand); align-self:center; }
.certinfo dd{ margin:0; color:var(--ink); font-size:.98rem; }
.certgroup{ margin:0 0 14px; font-family:var(--sans); font-size:.74rem; letter-spacing:.12em; color:var(--brand); }
.certgroup + .cert__grid{ margin-bottom:clamp(22px,2.6vw,34px); }
@media (max-width:640px){ .certinfo{ grid-template-columns:1fr; } }


/* 인증 세부 페이지 — 현장 사진 */
.certshots{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:clamp(14px,2vw,24px); }
.certshot{ margin:0; }
.certshot img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:8px; display:block; background:var(--brand-tint); }
.certshot figcaption{ margin-top:10px; font-size:.85rem; line-height:1.7; color:var(--ink-soft); }


/* 따라 하기 어려운 설비 — 소개 화면 */
.strength{ background:var(--brand-tint); }
.strength__list{ display:grid; gap:clamp(18px,2.4vw,30px); }
.strength__item{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(20px,3vw,44px); align-items:center; background:var(--paper);
  border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.strength__item:nth-child(even) .strength__media{ order:2; }
.strength__media{ height:100%; min-height:clamp(220px,26vw,340px); background:var(--brand-tint); }
.strength__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.strength__body{ padding:clamp(22px,3vw,40px) clamp(22px,3vw,44px) clamp(26px,3vw,40px) 0; }
.strength__item:nth-child(even) .strength__body{ padding-right:0; padding-left:clamp(22px,3vw,44px); }
.strength__n{ font-family:var(--sans); font-size:.74rem; letter-spacing:.14em; color:var(--brand); }
.strength__body h3{ font-family:var(--serif); font-size:clamp(1.3rem,2.4vw,1.8rem); color:var(--ink); margin:10px 0 14px; }
.strength__lead{ color:var(--ink); line-height:1.9; font-size:.99rem; }
.strength__pts{ list-style:none; padding:0; margin:16px 0 0; display:grid; gap:9px; }
.strength__pts li{ position:relative; padding-left:22px; color:var(--ink-soft); font-size:.93rem; line-height:1.8; font-weight:300; }
.strength__pts li::before{ content:""; position:absolute; left:4px; top:.75em; width:6px; height:6px; border-radius:50%; background:var(--brand); }
.strength__go{ display:inline-flex; align-items:center; gap:.5em; margin-top:20px;
  font-size:.78rem; letter-spacing:.12em; color:var(--brand-deep); }
.strength__go .arw{ transition:transform .3s var(--ease); }
.strength__go:hover .arw{ transform:translateX(5px); }
@media (max-width:820px){
  .strength__item{ grid-template-columns:1fr; }
  .strength__item:nth-child(even) .strength__media{ order:0; }
  .strength__body,
  .strength__item:nth-child(even) .strength__body{ padding:clamp(20px,4vw,28px); }
}


/* 세부 페이지 안의 강점 한 줄 */
.certkey{ display:flex; gap:clamp(14px,2vw,24px); align-items:flex-start; flex-wrap:wrap;
  padding:clamp(20px,2.4vw,28px) clamp(22px,3vw,32px);
  background:var(--brand-tint); border-left:3px solid var(--brand-deep); border-radius:6px; }
.certkey__tag{ font-family:var(--sans); font-size:.72rem; letter-spacing:.14em; color:var(--paper);
  background:var(--brand-deep); padding:7px 14px; border-radius:100px; white-space:nowrap; }
.certkey p{ margin:0; flex:1; min-width:240px; color:var(--ink); line-height:1.9; font-size:1rem; }