/* 공진단(herbal-gongjindan.html) 전용 — 2026-10-08 병원 오더(공진단 상세 페이지 전체 리뉴얼).
   흰색 · 아주 연한 청색 바탕, 남색 제목, 브랜드 파랑 강조. 이 페이지만 읽습니다. 헤더 · 푸터는 style.css 그대로입니다. */
.gj{
  --gj-navy:#0B1E4A; --gj-blue:#1F55D6; --gj-soft:#F3F7FD; --gj-ic:#E6EFFD;
  --gj-card:#fff; --gj-line:#D8E2EF; --gj-ink:#1A2533; --gj-ink-2:#556172;
  color:var(--gj-ink);background:#fff;
}
html[data-theme="dark"] .gj{
  --gj-navy:#E3EBFA; --gj-blue:#7EA6FF; --gj-soft:#111A28; --gj-ic:#1B2A42;
  --gj-card:#162033; --gj-line:rgba(160,190,240,.18); --gj-ink:#E8ECF1; --gj-ink-2:#AAB4C0;
  background:var(--bg);
}
.gj img{display:block;max-width:100%;height:auto}
.gj h2,.gj h3{color:var(--gj-navy);letter-spacing:-.02em;word-break:keep-all}
.gj p,.gj li{word-break:keep-all}
:where(.gj ul,.gj ol){list-style:none;margin:0;padding:0}  /* :where — 아래 카드 묶음의 margin-top 을 지우지 않게(2026-10-09) */
.gj > section{padding:0}
.gj-sec{padding:84px 0 !important}
.gj-soft{background:var(--gj-soft)}
.gj-card{background:var(--gj-card);border:1px solid var(--gj-line);border-radius:12px;box-shadow:0 2px 10px rgba(11,30,74,.04)}
.gj-ic{flex:none;display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:var(--gj-ic)}
.gj-ic svg{width:28px;height:28px;fill:none;stroke:var(--gj-blue);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* 제목 번호 01~07 */
.gj-no{display:inline-flex;align-items:center;gap:12px;margin:0 0 12px;color:var(--gj-blue);font-weight:800;font-size:var(--fs-sm);letter-spacing:.04em}
.gj-no::after{content:"";width:36px;height:1.5px;background:currentColor}
.gj-h2{margin:0;font-size:clamp(1.7rem,3.2vw,2.5rem);font-weight:800;line-height:1.3}
.gj-h2 span{color:var(--gj-blue)}
.gj-lead2{margin:.9rem 0 0;color:var(--gj-ink-2);font-size:var(--fs-md)}

/* 첫 화면 — 사진 오른쪽, 왼쪽으로 갈수록 진해지는 색 막 */
.gj-hero{position:relative;overflow:hidden;display:flex;align-items:center;min-height:calc(var(--nav-h) + 560px);background:#F6F8FC}
.gj-hero-bg{position:absolute;top:var(--nav-h);right:0;bottom:0;width:58%}  /* 사진을 오른쪽 58% 칸에만 두어 공진단이 지나치게 커 보이지 않게(2026-10-08) */
.gj-hero-bg img{width:100%;height:100% !important;object-fit:cover;object-position:right center}
.gj-hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#F6F8FC 0%,rgba(246,248,252,.6) 18%,rgba(246,248,252,0) 40%)}
.gj-hero-in{position:relative;padding:calc(var(--nav-h) + 36px) 0 72px}
.gj-hero .crumb{margin-bottom:34px}
html[data-theme="dark"] .gj-hero .crumb,html[data-theme="dark"] .gj-hero .crumb a{color:#4A5563}
.gj-eng{margin:0;color:#1F55D6;font-weight:700;letter-spacing:.06em}
.gj .gj-title{margin:.3rem 0 0;font-size:clamp(3rem,6.6vw,5.2rem);font-weight:900;line-height:1.1;letter-spacing:-.04em;color:#0B1E4A}
.gj-key{margin:1.2rem 0 0;font-size:clamp(1.25rem,2.2vw,1.6rem);font-weight:800;color:#0B1E4A}
.gj-lead{margin:.7rem 0 0;font-size:var(--fs-md);line-height:1.7;color:#4A5563}

.gj-intro{padding:36px 0 0 !important;position:relative;z-index:1}  /* 2026-10-09 첫 화면 사진에 걸치지 않게 아래로 */
.gj-intro3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gj-intro3 .gj-card{display:flex;align-items:center;gap:18px;padding:22px 24px}
.gj-intro3 h2{font-size:var(--fs-md);font-weight:800;margin:0}
.gj-intro3 p{margin:.35rem 0 0;color:var(--gj-ink-2);font-size:var(--fs-sm);line-height:1.55}

/* 01 */
.gj-hist{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.gj-p{margin:1.1rem 0 0;color:var(--gj-ink-2);font-size:var(--fs-sm);line-height:1.85}
.gj-p strong{color:var(--gj-navy)}
.gj-quote{margin:26px 0 0;padding:24px 28px;border-left:4px solid var(--gj-blue);border-radius:0 12px 12px 0;background:var(--gj-soft)}
.gj-quote p{margin:0;color:var(--gj-navy);font-size:var(--fs-md);font-weight:600;line-height:1.8}
.gj-quote cite{display:block;margin-top:10px;color:var(--gj-ink-2);font-style:normal;font-size:var(--fs-xs)}
.gj-hist-fig{margin:0}
.gj-hist-fig .img-todo{margin:0}

/* 02 */
.gj-herbs{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:36px}
.gj-herbs .gj-card{overflow:hidden}
.gj-herbs img{width:100%;aspect-ratio:4/3;object-fit:cover}
.gj-herb-tx{padding:18px 20px 22px}
.gj-herb-tx h3{margin:0;font-size:var(--fs-lg);font-weight:800}
.gj-herb-tx h3 b{color:var(--gj-blue);margin-right:4px}
.gj-herb-tx h3 small{color:var(--gj-ink-2);font-weight:600;font-size:var(--fs-xs);margin-left:4px}
.gj-tag{display:inline-block;margin:10px 0 0;padding:4px 12px;border-radius:999px;background:var(--gj-ic);color:var(--gj-blue);font-size:var(--fs-2xs);font-weight:700}
.gj-herb-tx p:not(.gj-tag){margin:10px 0 0;color:var(--gj-ink-2);line-height:1.7;font-size:var(--fs-sm)}

/* 03 */
.gj-uses,.gj-guide{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:36px}
.gj-uses .gj-card,.gj-guide .gj-card{padding:26px 22px}
.gj-uses h3,.gj-guide h3{margin:18px 0 8px;font-size:var(--fs-md);font-weight:800}
.gj-uses p,.gj-guide p{margin:0;color:var(--gj-ink-2);line-height:1.7;font-size:var(--fs-sm)}
.gj-more{margin-top:24px;padding:28px 32px;border-radius:12px;background:var(--gj-soft);border:1px solid var(--gj-line)}
.gj-more h3{margin:0 0 10px;font-size:var(--fs-md);font-weight:800}
.gj-more p{margin:0;color:var(--gj-ink-2);line-height:1.85}
.gj-more p+p{margin-top:10px}

/* 04 · 21가지 */
.gj-21{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px;align-items:start}
.gj-21-col{padding:24px 22px;border-radius:12px;background:var(--gj-card);border:1px solid var(--gj-line)}
.gj-21-col h3{margin:0 0 14px;padding-bottom:12px;border-bottom:2px solid var(--gj-blue);font-size:var(--fs-md);font-weight:800}
.gj-21-col.is-check h3{border-bottom-color:#C9A227}
.gj-21-col li{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid var(--gj-line);color:var(--gj-ink);line-height:1.55;font-size:var(--fs-sm)}
.gj-21-col li:last-child{border-bottom:0}
.gj-21-col li b{flex:none;color:var(--gj-blue);font-weight:800}
.gj-21-note{margin:12px 0 0;padding:12px 14px;border-radius:8px;background:#FBF6E6;color:#6B5A1E;font-size:var(--fs-xs);line-height:1.6}
html[data-theme="dark"] .gj-21-note{background:#2A2618;color:#E5D9A8}
.gj-notice{margin:24px 0 0;padding:18px 22px;border-radius:10px;background:var(--gj-navy);color:#fff;font-weight:600;line-height:1.7;text-align:center}
html[data-theme="dark"] .gj-notice{color:#0B1E4A}

/* 05 */
.gj-feats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:36px}
.gj-feats .gj-card{overflow:hidden}
.gj-feats img{width:100%;aspect-ratio:4/3;object-fit:cover}
.gj-feat-tx{padding:18px 20px 22px}
.gj-feat-tx h3{margin:0 0 8px;font-size:var(--fs-md);font-weight:800}
.gj-feat-tx p{margin:0;color:var(--gj-ink-2);line-height:1.7;font-size:var(--fs-sm)}
.gj-note{margin:16px 0 0;color:var(--gj-ink-2);font-size:var(--fs-xs)}

/* 06 */
.gj-sub2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:18px}
.gj-sub2 .gj-card{padding:22px 24px}
.gj-sub2 h3{margin:0 0 8px;font-size:var(--fs-md);font-weight:800}
.gj-sub2 p{margin:0;color:var(--gj-ink-2);line-height:1.7}

/* 07 · 자주 묻는 질문 */
.gj-faq{display:grid;gap:12px;margin-top:32px}
.gj-faq-item{border:1px solid var(--gj-line);border-radius:12px;background:var(--gj-card)}
.gj-faq-item h3{margin:0;font-size:var(--fs-md)}
.gj-faq button{display:flex;align-items:center;gap:18px;width:100%;padding:18px 24px;background:none;border:0;font:inherit;font-weight:700;color:var(--gj-navy);text-align:left;cursor:pointer}
.gj-faq button::after{content:"";margin-left:auto;flex:none;width:9px;height:9px;border-right:2px solid var(--gj-navy);border-bottom:2px solid var(--gj-navy);transform:rotate(45deg) translateY(-3px)}
.gj-faq button[aria-expanded="true"]::after{transform:rotate(-135deg) translateY(-3px)}
.gj-faq button:focus-visible{outline:2px solid var(--gj-blue);outline-offset:-2px;border-radius:12px}
.gj-q{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--gj-ic);color:var(--gj-blue);font-weight:800}
.gj-faq button[aria-expanded="true"] .gj-q{background:var(--gj-blue);color:#fff}
.gj-faq-a{padding:0 24px 20px 76px}
.gj-faq-a p{margin:0;padding:14px 18px;border-radius:8px;background:var(--gj-soft);color:var(--gj-ink-2);line-height:1.75}

/* 태블릿 */
@media (max-width:1024px){
  .gj-sec{padding:64px 0 !important}
  .gj-herbs,.gj-uses,.gj-guide,.gj-feats{grid-template-columns:repeat(2,1fr)}
  .gj-21{grid-template-columns:1fr}
  .gj-intro3{grid-template-columns:1fr}
  .gj-hist{grid-template-columns:1fr;gap:32px}
}
/* 휴대폰 */
@media (max-width:768px){
  .gj .wrap{width:calc(100% - 40px)}
  .gj-sec{padding:52px 0 !important}
  .gj-hero{flex-direction:column;align-items:stretch;min-height:0}
  .gj-hero-in{padding:calc(var(--nav-h) + 16px) 0 28px}
  .gj-hero .crumb{margin-bottom:20px}
  .gj-hero-bg{position:relative;height:240px;order:2;top:auto;width:auto}
  .gj-hero-bg img{object-position:72% center}
  .gj-hero-bg::after{background:linear-gradient(180deg,#F6F8FC 0%,rgba(246,248,252,0) 30%)}
  .gj-intro{padding-top:24px !important}
  .gj-sub2{grid-template-columns:1fr}
  .gj-faq button{padding:16px;gap:14px}
  .gj-faq-a{padding:0 16px 16px}
}
@media (max-width:560px){
  .gj-herbs,.gj-uses,.gj-guide,.gj-feats{grid-template-columns:1fr}
}

/* 04 · 21가지 — 예전 네 묶음 카드(.gjd-cat, style.css)를 이 페이지 색에 맞춤 */
.gj .gjd-cats{margin-top:36px;gap:18px}
.gj .gjd-cat{padding:26px 28px;border-radius:12px;background:var(--gj-card);border:1px solid var(--gj-line);border-top:3px solid var(--gj-blue)}
.gj .gjd-cat h4{font-size:var(--fs-md);font-weight:800;color:var(--gj-navy)}
.gj .gjd-cat li{font-size:var(--fs-sm);color:var(--gj-ink-2)}
.gj .gjd-cat li strong{color:var(--gj-navy)}
.gj-hist-fig img{width:100%;border-radius:12px;box-shadow:0 6px 24px rgba(11,30,74,.12)}

/* 06 · 좋은 공진단을 선택하는 기준 — 가로 줄 카드: 아이콘 · 번호+제목 | 설명 · 오른쪽 약재 그림(왼쪽 끝을 흐리게) (2026-10-09) */
.gj-choose{display:grid;gap:14px;margin-top:28px}
.gj-choose .gj-card{position:relative;display:grid;grid-template-columns:auto 250px 1fr 36%;grid-template-rows:118px;align-items:center;column-gap:24px;min-height:120px;padding:0 0 0 26px;overflow:hidden}
.gj-choose h3{display:flex;align-items:center;gap:12px;margin:0;font-size:var(--fs-md);font-weight:800}
.gj-choose h3 b{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--gj-ic);color:var(--gj-blue);font-size:var(--fs-xs)}
.gj-choose p{margin:0;padding:18px 0 18px 24px;border-left:1px solid var(--gj-line);color:var(--gj-ink-2);line-height:1.7;font-size:var(--fs-sm)}
.gj-choose img{align-self:stretch;width:100%;height:100% !important;min-height:0;object-fit:cover;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 35%);mask-image:linear-gradient(90deg,transparent 0,#000 35%)}
@media (max-width:1024px){
  .gj-choose .gj-card{grid-template-columns:auto 1fr;grid-template-rows:auto;row-gap:12px;padding:22px 22px 0}
  .gj-choose h3{grid-column:2}
  .gj-choose p{grid-column:1 / -1;padding:0;border-left:0}
  .gj-choose img{grid-column:1 / -1;height:auto !important;aspect-ratio:16/6;margin:0 -22px;width:calc(100% + 44px);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%);mask-image:linear-gradient(180deg,transparent 0,#000 30%)}
}