/* ─────────────────────────────────────────────────────────────
   공용 레이아웃 프리미티브. 두 시안(메인·J컬)에서 반복되는 패턴만 모았다.
   섹션 CSS 는 여기 없는 것만 자기 파일에 쓴다.
   ───────────────────────────────────────────────────────────── */

/* 시안의 1280 컨테이너. 1280 미만에서는 좌우 --gutter 만 남기고 유동. */
.container{
  width:100%;
  max-width:calc(var(--container) + var(--gutter) * 2);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.container--narrow{max-width:calc(900px + var(--gutter) * 2)}

/* 풀블리드: 컨테이너 안에서 화면 끝까지 빼내야 할 때 */
.bleed{width:100vw;margin-inline:calc(50% - 50vw)}

.section{padding-block:var(--sp-section);position:relative}
.section--tight{padding-block:var(--sp-block)}
.section--flush{padding-block:0}
.section--muted{background:var(--surface-muted)}
.section--tint{background:var(--brand-tint-1)}
.section--tint-2{background:var(--brand-tint-2)}
.section--dark{background:var(--surface-dark);color:var(--text-inverse)}

/* ── 섹션 헤더 (eyebrow + H2 + lead) ─────────────────────────
   시안 반복 패턴: Italiana 핑크 eyebrow → 50/700 제목 → 18/1.5 회색 리드 */
.sec-head{text-align:center;display:flex;flex-direction:column;align-items:center}
.sec-head--left{text-align:left;align-items:flex-start}

.eyebrow{
  font-family:var(--font-display);font-weight:400;
  font-size:var(--fs-20);line-height:1.5;letter-spacing:var(--ls-tight);
  text-transform:uppercase;color:var(--brand);
}
.eyebrow--light{color:var(--text-inverse)}

.sec-title{
  margin-top:var(--sp-tight);
  font-weight:700;font-size:var(--fs-50);line-height:1.2;letter-spacing:var(--ls-tight);
  color:var(--text-primary);word-break:keep-all;
}
.sec-title--light{color:var(--text-inverse)}
.sec-title em{font-style:normal;color:var(--brand)}

.sec-lead{
  margin-top:var(--sp-tight);
  font-weight:400;font-size:var(--fs-18);line-height:1.5;letter-spacing:var(--ls-tight);
  color:var(--text-secondary);word-break:keep-all;
}
.sec-lead--light{color:rgba(255,255,255,.8)}

/* ── 버튼 ───────────────────────────────────────────────────
   시안 공통: 높이 56 / radius 60(pill) / 18px 700 */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:56px;padding-inline:35px;
  border-radius:var(--radius-pill);
  font-weight:700;font-size:var(--fs-18);line-height:1.2;
  letter-spacing:var(--ls-tight);text-align:center;
  transition:background-color .18s ease,color .18s ease,box-shadow .18s ease;
}
.btn--primary{background:var(--brand);color:var(--text-inverse)}
.btn--primary:hover{background:var(--brand-dark)}
/* 메인 히어로 CTA 만 검정 글자 (시안 그대로) */
.btn--primary-ink{background:var(--brand);color:#000;letter-spacing:normal}
.btn--primary-ink:hover{background:var(--brand-dark);color:var(--text-inverse)}

.btn--outline{
  background:transparent;color:var(--brand);
  box-shadow:inset 0 0 0 1px var(--brand);
}
.btn--outline:hover{background:var(--brand);color:var(--text-inverse)}

.btn--outline-light{
  background:transparent;color:var(--text-inverse);
  box-shadow:inset 0 0 0 1px var(--line-outline);letter-spacing:normal;
}
.btn--outline-light:hover{box-shadow:inset 0 0 0 1px var(--text-inverse)}

.btn--white{background:var(--surface);color:var(--brand)}
.btn--white:hover{background:var(--brand-tint-1)}

.btn--sm{min-height:44px;padding-inline:26px;font-size:var(--fs-16)}

/* 텍스트 링크 (Read more →) */
.link-more{
  display:inline-flex;align-items:center;gap:6px;
  font-weight:500;font-size:var(--fs-16);color:var(--text-primary);
  border-bottom:1px solid currentColor;padding-bottom:2px;
}
.link-more:hover{color:var(--brand)}

/* ── 카드 ───────────────────────────────────────────────── */
.card{
  background:var(--surface);
  border-radius:var(--radius-card);
  overflow:hidden;
}
.card--shadow{box-shadow:var(--shadow-card)}
.card--line{box-shadow:inset 0 0 0 1px var(--line-soft)}
.card__media{position:relative;display:block;width:100%;background:var(--surface-muted)}
.card__media img{width:100%;height:100%;object-fit:cover}
.card__body{padding:20px}
.card__title{
  font-weight:700;font-size:var(--fs-20);line-height:1.4;letter-spacing:var(--ls-tight);
  color:var(--text-primary);word-break:keep-all;
}
.card__meta{margin-top:12px;font-size:var(--fs-14);color:var(--text-tertiary);line-height:1.5}
.card__text{margin-top:10px;font-size:var(--fs-16);line-height:1.5;color:var(--text-secondary);word-break:keep-all}

/* 고정 비율 미디어 박스 */
.ratio{position:relative;width:100%;overflow:hidden}
.ratio>img,.ratio>iframe,.ratio>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ratio--1x1{aspect-ratio:1/1}
.ratio--4x3{aspect-ratio:4/3}
.ratio--16x9{aspect-ratio:16/9}
.ratio--3x4{aspect-ratio:3/4}
.ratio--9x16{aspect-ratio:9/16}

/* 유튜브 대표 영상 — 썸네일 위 재생 버튼. 누르면 site.js 가 같은 자리에 플레이어를 넣는다 */
.yt-play{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer}
.yt-play img{display:block;width:100%;height:100%;object-fit:cover}
.yt-play::before{
  content:'';position:absolute;left:50%;top:50%;width:96px;height:96px;
  border-radius:50%;background:var(--surface);box-shadow:0 4px 20px rgba(0,0,0,.25);
  transform:translate(-50%,-50%);transition:transform .2s ease;
}
.yt-play::after{   /* 삼각형 — 시각 중심을 맞추려고 오른쪽으로 조금 민다 */
  content:'';position:absolute;left:50%;top:50%;
  border-style:solid;border-width:14px 0 14px 23px;
  border-color:transparent transparent transparent var(--text-primary);
  transform:translate(-38%,-50%);
}
.yt-play:hover::before,.yt-play:focus-visible::before{transform:translate(-50%,-50%) scale(1.08)}
.yt-play:focus-visible{outline:3px solid var(--brand);outline-offset:-3px}
@media (max-width:767px){
  .yt-play::before{width:64px;height:64px}
  .yt-play::after{border-width:10px 0 10px 16px}
}
/* 섹션 제목의 유튜브 로고 — 채널로 가는 링크 */
.yt-logo{display:flex;flex:none}

/* ── 그리드 ─────────────────────────────────────────────── */
.grid{display:grid;gap:var(--sp-gap)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1023px){
  .grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:767px){
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
  .grid--keep-2{grid-template-columns:repeat(2,1fr)}
}

/* ── 가로 스크롤 레일 (Shorts / 카드 캐러셀) ───────────────── */
.rail{
  display:flex;gap:var(--sp-gap);
  overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  padding-bottom:4px;
}
.rail::-webkit-scrollbar{display:none}
.rail>*{flex:0 0 auto;scroll-snap-align:start}

/* 레일 진행 막대 (시안 Sec_6 하단) */
.rail-bar{position:relative;height:3px;background:var(--line-soft);border-radius:2px;margin-top:28px}
.rail-bar__thumb{position:absolute;left:0;top:0;height:100%;background:var(--text-primary);border-radius:2px;transition:left .12s linear,width .12s linear}

/* ── 태그 / 칩 / 번호 배지 ───────────────────────────────── */
.tag{
  display:inline-flex;align-items:center;height:28px;padding-inline:12px;
  border-radius:var(--radius-chip);background:var(--brand-tint-1);color:var(--brand);
  font-weight:500;font-size:var(--fs-14);letter-spacing:var(--ls-tight);
}
.tag-list{display:flex;flex-wrap:wrap;gap:6px}

.badge-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  background:var(--brand);color:var(--text-inverse);
  font-weight:700;font-size:var(--fs-18);line-height:1;letter-spacing:normal;
}

/* 섹션 안 소제목 (| 붙은 라벨) */
.sub-label{
  display:flex;align-items:center;gap:10px;
  font-weight:700;font-size:var(--fs-18);line-height:1.4;color:var(--text-primary);
}
.sub-label::before{content:"";width:3px;height:16px;background:var(--brand);border-radius:2px;flex:none}

/* ── 탭 ─────────────────────────────────────────────────── */
.tabs{display:flex;gap:0;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{
  flex:1 0 auto;display:inline-flex;align-items:center;justify-content:center;
  min-height:56px;padding-inline:24px;white-space:nowrap;
  font-weight:500;font-size:var(--fs-18);letter-spacing:var(--ls-tight);
  color:var(--text-tertiary);border-radius:var(--radius-pill);
}
.tab[aria-selected="true"]{color:var(--brand);font-weight:700;background:var(--brand-tint-1)}
.tabs--pill{background:var(--surface);border-radius:var(--radius-pill);box-shadow:var(--shadow-card);padding:6px}

.tabpanel[hidden]{display:none}

/* ── 아코디언 (FAQ) ──────────────────────────────────────────
   치수는 J컬 Sec_7 이 기준이다(시안 1920×748). 행 1줄당 100px =
   패딩 32 + 본문 36(24px × 1.5) + 패딩 32, 좌우 30(--sp-gap),
   셰브런 30×30, 구분선 --line-strong, 답변 18/1.8.
   FAQ 를 쓰는 페이지가 모두 같은 규격을 따르도록 프리미티브에 둔다 —
   페이지별 파일에서 크기를 다시 잡지 않는다. */
.accordion{border-top:1px solid var(--line-strong)}
.accordion__item{border-bottom:1px solid var(--line-strong)}
.accordion__btn{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;padding-block:32px;padding-inline:var(--sp-gap);text-align:left;
  font-weight:600;font-size:var(--fs-24);line-height:1.5;
  /* <button> 은 UA 스타일이 letter-spacing 을 normal 로 끊는다 — 다시 건다 */
  letter-spacing:var(--ls-tight);
  color:var(--text-primary);
}
/* 시안: "Q." 만 700 + 핑크. 뒤 공백은 마크업에 있다. */
.accordion__btn .q{color:var(--brand);font-weight:700}
.accordion__chev{flex:none;width:30px;height:30px;transition:transform .2s ease}
.accordion__btn[aria-expanded="true"] .accordion__chev{transform:rotate(180deg)}
.accordion__panel{
  padding-inline:var(--sp-gap);padding-bottom:32px;
  font-size:var(--fs-18);line-height:1.8;color:var(--text-secondary);word-break:keep-all;
}
.accordion__panel[hidden]{display:none}
@media (max-width:767px){
  .accordion__btn,.accordion__panel{padding-inline:0}
}

/* ── 페이지네이션 ────────────────────────────────────────────
   site.js 의 [data-pager] 가 버튼을 만들어 넣는다. 목록이 한 페이지
   뿐이면 스스로 hidden 이 된다. */
.pager{
  margin-top:var(--sp-block);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;
}
.pager__btn{
  min-width:44px;min-height:44px;padding-inline:10px;
  border-radius:var(--radius-sm);
  font-weight:600;font-size:var(--fs-16);line-height:1;
  color:var(--text-secondary);
  box-shadow:inset 0 0 0 1px var(--line-soft);
}
.pager__btn:hover:not(:disabled){color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
.pager__btn[aria-current="page"]{
  background:var(--brand);color:var(--text-inverse);box-shadow:none;cursor:default;
}
.pager__btn:disabled{color:var(--line-mid);cursor:default}
.pager__gap{min-width:24px;text-align:center;color:var(--text-tertiary)}
.pager[hidden]{display:none}

/* ── 의료광고 고지 ───────────────────────────────────────── */
.disclaimer{
  margin-top:var(--sp-stack);
  font-weight:400;font-size:var(--fs-14);line-height:1.6;letter-spacing:var(--ls-tight);
  color:var(--text-tertiary);text-align:center;word-break:keep-all;
}
.disclaimer--left{text-align:left}

/* ── 유틸 ───────────────────────────────────────────────── */
.stack-sm{margin-top:var(--sp-tight)}
.stack{margin-top:var(--sp-stack)}
.stack-lg{margin-top:var(--sp-block)}
.center{text-align:center}
.actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.actions--left{justify-content:flex-start}
@media (max-width:767px){
  .actions .btn{width:100%}
}