/* ==========================================================================
   싱크대부분리폼 (엠앤와이픽스) — 공통 스타일
   모티프: M1 라인 드로잉·도면풍(싱크대 부위 도면, 눈금자 테두리, 선 아이콘)
   ========================================================================== */

:root{
  --dark:#152020;
  --dark-2:#0d1615;
  --accent:#1E8A87;
  --accent-strong:#146B69;
  --accent-soft:#DCEEEC;
  --bg:#F6F7F6;
  --surface:#FFFFFF;
  --surface-2:#EDF0EF;
  --text:#1B2422;
  --text-on-dark:#F3F6F5;
  --muted:#545F5C;
  --muted-on-dark:#B7C4C1;
  --line:#DCE2E0;
  --line-strong:#C3CBC8;
  --radius:4px;
  --radius-sm:4px;
  --container:1180px;
  --space-section:clamp(56px,8vw,104px);
  --ease:cubic-bezier(.25,1,.4,1);
  --sticky-h:64px;
  --font-body:'Pretendard', -apple-system, BlinkMacSystemFont, 'Noto Sans KR', sans-serif;
  --font-display:'IBM Plex Sans KR', 'Pretendard', sans-serif;
  /* M1 도면 눈금자 — 표·전후사진 상단 테두리에 12px 간격 눈금 */
  --corner:repeating-linear-gradient(90deg,var(--line-strong) 0 1px,transparent 1px 12px) top left/100% 6px no-repeat;
  color-scheme: only light;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html,body{ overflow-x:hidden; }
* { -webkit-tap-highlight-color: transparent; }
:where(a,button,[role="button"],summary){ touch-action: manipulation; }

body{
  margin:0;
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  font-size:17px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

body,p,h1,h2,h3,h4,h5,h6,li,td,th,a,span,div,button,label,figcaption,dt,dd,strong,small,caption{
  word-break: keep-all;
  overflow-wrap: break-word;
}
/* 의미단위 줄바꿈 — 제목·짧은 강조문은 줄 길이를 고르게(한 단어만 떨어지는 줄 방지), 본문은 마지막 줄 외톨이 방지 */
h1,h2,h3,.card__title,.ba-case__label,.grid-cta strong,.faq-item__q,caption{ text-wrap:balance; }
p,li,dd,.faq-item__body,.card__desc,td{ text-wrap:pretty; }
.br-mobile{ display:none; }
@media(max-width:768px){ .br-mobile{ display:inline; } .br-desktop{ display:none; } }

a{ color:var(--accent-strong); }
img{ max-width:100%; height:auto; display:block; }
.container{ max-width:var(--container); margin-inline:auto; padding-inline:24px; }

/* 굵은 글자는 모두 IBM Plex 700 한 벌로 처리 → 본문 Pretendard 는 400 한 벌만 내려받는다(폰트 전송량 절감) */
strong,b,th,caption,.btn,.hdr-cta,.faq-item__q,.flow__meta dd,.card__note,.card__link,.mob-bar__btn,.ba figcaption{ font-family:var(--font-display); }
h1,h2,h3{ font-family:var(--font-display); font-weight:700; line-height:1.35; margin:0; letter-spacing:-.01em; }
h1{ font-size:clamp(2rem,5.4vw,3.4rem); }
h2{ font-size:clamp(1.5rem,3.2vw,2.2rem); }
h3{ font-size:1.15rem; }
p{ margin:0 0 1em; }
main p{ max-width:38em; }

.eyebrow{
  position:relative; display:inline-block; font-family:var(--font-display); font-size:13px; font-weight:700;
  letter-spacing:.08em; color:var(--accent-strong); margin-bottom:12px; padding-bottom:8px;
}
.eyebrow::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:2px; background:var(--accent);
  transform-origin:left;
}
section[data-dark] .eyebrow{ color:var(--accent-soft); }
.js [data-reveal] .eyebrow::after{ transform:scaleX(0); }
.js [data-reveal].is-in .eyebrow::after{ animation:underlineGrow .7s .15s var(--ease) both; }

/* ---------- 리빌 시스템 (2단 안전계약, 섹션 성격별 3종) ---------- */
.js [data-reveal]{ opacity:0; transform:translateY(24px); transition:opacity .6s var(--ease),transform .6s var(--ease); }
.js [data-reveal="fade"]{ transform:none; transition:opacity 1s var(--ease); }
/* wipe: 관찰 대상(부모)은 자르지 않는다 — 자신을 자르면 IntersectionObserver 가 교차를 0으로 계산해 영영 발동하지 않음 */
.js [data-reveal="wipe"]{ opacity:1; transform:none; }
.js [data-reveal="wipe"] > *{ clip-path:inset(0 0 100% 0); transition:clip-path .9s var(--ease); }
.js [data-reveal="wipe"] > *:nth-child(2){ transition-delay:.15s; }
.js [data-reveal="wipe"].is-in > *{ clip-path:inset(0); }
.js [data-reveal].is-in{ opacity:1; transform:none; }
.js [data-reveal-item]{ opacity:0; transform:translateY(16px); transition:opacity .5s var(--ease),transform .5s var(--ease); }
.js tr[data-reveal-item]{ transform:none; }
.js [data-reveal-item].is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .js [data-reveal],.js [data-reveal-item],.js [data-reveal="wipe"] > *{ opacity:1!important; transform:none!important; clip-path:none!important; transition:none!important; }
  .js [data-reveal] .eyebrow::after{ transform:none!important; }
  *{ animation-duration:.01ms!important; animation-iteration-count:1!important; }
}

@keyframes heroDrift{ 0%{ transform:scale(1.04) translateY(0);} 100%{ transform:scale(1.12) translateY(-10px);} }
@keyframes stageIn{ from{ clip-path:inset(0 100% 0 0);} to{ clip-path:inset(0);} }
@keyframes heroIn{ from{ opacity:0; transform:translateY(20px);} to{ opacity:1; transform:none;} }
@keyframes underlineGrow{ from{ transform:scaleX(0);} to{ transform:scaleX(1);} }

/* ---------- 헤더 ---------- */
.site-header{
  position:sticky; top:0; z-index:100; background:rgba(246,247,246,.9);
  border-bottom:1px solid transparent; transition:border-color .3s,background .3s;
}
.site-header.is-scrolled{ background:var(--surface); border-color:var(--line); }
.site-header__inner{
  max-width:var(--container); margin-inline:auto; padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.hdr-logo{ display:flex; flex-direction:column; justify-content:center; min-height:44px; text-decoration:none; color:var(--text); line-height:1.2; }
.hdr-logo__name{ font-family:var(--font-display); font-weight:700; font-size:1.05rem; }
.hdr-logo__tagline{ font-size:12px; letter-spacing:.06em; color:var(--muted); }
.hdr-cta{
  display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 22px;
  background:var(--dark); color:#fff; border-radius:var(--radius); text-decoration:none; font-size:15px; font-weight:700;
  white-space:nowrap; flex:0 0 auto;
}
@media(max-width:480px){ .hdr-logo__tagline{ display:none; } }

/* ---------- 버튼 ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 28px;
  border-radius:var(--radius); font-weight:700; font-size:16px; text-decoration:none; border:2px solid transparent;
  transition:transform .2s var(--ease),background .2s,border-color .2s;
}
/* 버튼 너비 통일 — 가장 긴 문구(문자로 사진 보내기) 기준 공통 최소폭, 480px 이하는 전폭 */
.btn{ min-width:212px; }
@media(max-width:480px){ .hero__actions .btn,.cta-photo__actions .btn,.section-404__links .btn{ width:100%; } }
.btn--primary{ background:var(--accent); color:#fff; }
.btn--outline{ background:transparent; color:inherit; border-color:currentColor; }
.btn--on-dark{ color:#fff; }
@media (hover:hover) and (pointer:fine){
  .btn:hover{ transform:translateY(-2px); }
  .btn--primary:hover{ background:var(--accent-strong); }
  .card:hover{ border-color:var(--accent); }
  .card--feature:hover .card__media img{ transform:scale(1.05); }
  .grid-cta:hover{ background:var(--accent-strong); }
  .grid-cta:hover span{ color:#fff; }
}
.btn:active{ transform:translateY(0); }

/* ---------- 섹션 공통 ---------- */
section{ padding:var(--space-section) 0; }
section[data-dark]{ background:var(--dark); color:var(--text-on-dark); }
section[data-dark] p{ color:var(--muted-on-dark); }
section[data-dark] h2{ color:#fff; }
.section-head{ max-width:640px; margin-bottom:40px; }
.section-head p{ color:var(--muted); }
section[data-dark] .section-head p{ color:var(--muted-on-dark); }

/* ---------- Hero (H5 풀블리드 사진 + 가장자리에 걸친 밝은 문구 패널 — 전면 색 오버레이 없음) ---------- */
.hero{ position:relative; padding:0; margin-bottom:clamp(48px,6vw,88px); }
.hero__stage{ position:relative; overflow:hidden; background:var(--surface-2); height:78vh; height:clamp(520px,78dvh,860px); animation:stageIn 1s .05s var(--ease) both; }
.hero__slide{ position:absolute; inset:0; opacity:0; transition:opacity 1.2s var(--ease); }
.hero__slide.is-active{ opacity:1; z-index:1; }
.hero__slide img{ width:100%; height:100%; object-fit:cover; animation:heroDrift 9s ease-in-out infinite alternate; }
.hero__slide:not(.is-active) img{ animation-play-state:paused; }
.hero__tag{ position:absolute; right:24px; top:24px; background:var(--dark); color:#fff; font-family:var(--font-display); font-weight:700; font-size:14px; padding:6px 12px; border-radius:var(--radius); }
.hero__panel-wrap{ position:absolute; left:0; right:0; bottom:calc(-1 * clamp(48px,6vw,88px)); z-index:2; max-width:var(--container); margin-inline:auto; padding-inline:24px; pointer-events:none; }
.hero__copy{ pointer-events:auto; max-width:620px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(24px,3vw,40px); animation:heroIn .9s .2s var(--ease) both; }
.hero__copy h1{ margin-bottom:16px; }
.hero__lead{ color:var(--text); font-size:18px; margin-bottom:24px; }
.hero__actions{ display:flex; gap:12px; flex-wrap:wrap; }
@media(max-width:1024px){
  .hero{ margin-bottom:0; }
  .hero__stage{ height:auto; aspect-ratio:16/9; }
  .hero__panel-wrap{ position:static; padding:0; max-width:none; }
  .hero__copy{ max-width:none; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:28px 24px 36px; }
}
@media(max-width:768px){ .hero__lead{ font-size:17px; } .hero__tag{ right:12px; top:12px; font-size:13px; } }

/* ---------- 모듈 카드 / 벤토형 서비스 그리드 (M7) ---------- */
ul.card-grid{ list-style:none; margin:0; padding:0; }
.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; grid-auto-rows:1fr; align-items:stretch; }
.card-grid > li{ display:flex; min-width:0; }
.card-grid > li > *{ width:100%; }
.card-grid > li.span-2{ grid-column:span 2; }
.card{
  display:flex; flex-direction:column; height:100%; min-width:0;
  background:var(--corner), var(--surface);
  border:1px solid var(--line); border-radius:var(--radius); padding:22px; position:relative; overflow:hidden;
  transition:border-color .25s;
}
.card__badge{ font-family:var(--font-display); font-size:13px; font-weight:700; letter-spacing:.06em; color:var(--accent-strong); margin-bottom:8px; }
.card__title{ font-weight:700; margin-bottom:8px; }
.card__desc{ color:var(--muted); font-size:16px; flex:1; }
.card__link{ margin-top:auto; padding-top:14px; font-weight:700; color:var(--accent-strong); text-decoration:none; min-height:44px; display:inline-flex; align-items:center; }
.card__note{ margin:auto 0 0; padding-top:14px; font-size:14px; font-weight:700; color:var(--accent-strong); }
.card--feature{ flex-direction:row; padding:0; border-color:var(--accent); }
.card--feature .card__media{ flex:0 0 46%; position:relative; margin:0; overflow:hidden; min-height:180px; }
.card--feature .card__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.card--feature .card__body{ display:flex; flex-direction:column; flex:1; padding:24px; min-width:0; }
.grid-cta{
  display:flex; align-items:center; justify-content:space-between; gap:12px 24px; flex-wrap:wrap;
  margin-top:20px; padding:20px 24px; min-height:64px; border-radius:var(--radius);
  background:var(--dark); color:var(--text-on-dark); text-decoration:none; transition:background .25s;
}
.grid-cta strong{ font-family:var(--font-display); font-size:1.1rem; }
.grid-cta span{ color:var(--muted-on-dark); }
.grid-cta span::after{ content:' \2192'; }
@media(max-width:1024px){ .card-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:auto; } }
@media(max-width:480px){
  .card-grid{ grid-template-columns:1fr; }
  .card-grid > li.span-2{ grid-column:auto; }
  .card--feature{ flex-direction:column; }
  .card--feature .card__media{ flex:none; aspect-ratio:16/9; min-height:0; }
}

/* ---------- 부위 도면 (M1) ---------- */
.parts-map{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(24px,4vw,56px); align-items:center; }
.parts-map__figure{ margin:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(12px,2vw,24px); }
.parts-map__figure svg{ display:block; width:100%; height:auto; }
.pm-line{ fill:none; stroke:var(--text); stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round; }
.pm-hidden{ stroke-dasharray:5 5; stroke:var(--muted); }
.pm-ticks{ fill:none; stroke:var(--line-strong); stroke-width:1; }
.pm-marker circle{ fill:var(--accent); stroke:var(--surface); stroke-width:3; }
.pm-marker text{ fill:#fff; font-family:var(--font-display); font-weight:700; font-size:20px; text-anchor:middle; }
.parts-map__list{ list-style:none; margin:0; padding:0; display:grid; gap:0; border-top:1px solid var(--line); }
.parts-map__list li{ display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--line); }
.parts-map__num{ flex:0 0 28px; height:28px; border-radius:50%; background:var(--accent); color:#fff; font-family:var(--font-display); font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center; margin-top:2px; }
.parts-map__list strong{ display:block; font-size:17px; }
.parts-map__list span:not(.parts-map__num){ color:var(--muted); font-size:16px; }
.parts-map__more{ display:inline-flex; align-items:center; min-height:44px; font-weight:700; color:var(--accent-strong); }
@media(max-width:1024px){ .parts-map{ grid-template-columns:1fr; } }

/* ---------- 부위별 전후 탭 ---------- */
.ba-tabs{ position:relative; }
.ba-tabs__list{ display:none; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
.js .ba-tabs__list{ display:flex; }
.ba-tabs__list button{
  min-height:44px; padding:0 18px; border:1px solid var(--line-strong); background:var(--surface); color:var(--text);
  font-family:var(--font-display); font-weight:700; font-size:15px; border-radius:var(--radius); cursor:pointer;
  transition:background .2s,color .2s,border-color .2s;
}
.ba-tabs__list button[aria-selected="true"]{ background:var(--dark); color:#fff; border-color:var(--dark); }
.ba-tabs__panel + .ba-tabs__panel{ margin-top:48px; }
.js .ba-tabs__panel{ margin-top:0; }
.js .ba-tabs__panel:not(.is-active){ display:none; }
.ba-tabs__title{ margin-bottom:14px; }
.js .ba-tabs__title{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.ba-tabs__facts{ display:grid; grid-template-columns:1fr 1fr; gap:12px 24px; margin:18px 0 0; }
.ba-tabs__facts div{ border-top:2px solid var(--dark); padding-top:10px; }
.ba-tabs__facts dt{ font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--muted); }
.ba-tabs__facts dd{ margin:4px 0 0; }
.ba-tabs__more{ display:inline-flex; align-items:center; min-height:44px; margin-top:8px; font-weight:700; color:var(--accent-strong); }
@media(max-width:768px){ .ba-tabs__facts{ grid-template-columns:1fr; } }
.parts-table tbody th{ text-align:left; font-weight:700; white-space:nowrap; }
.parts-table tbody th a{ color:var(--accent-strong); }

/* ---------- 체크리스트 ---------- */
ul[data-comp="checklist"]{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
ul[data-comp="checklist"] li{
  display:flex; gap:12px; align-items:flex-start; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:16px 18px;
}
ul[data-comp="checklist"] svg{ flex:0 0 auto; width:22px; height:22px; color:var(--accent); margin-top:2px; }
@media(max-width:768px){ ul[data-comp="checklist"]{ grid-template-columns:1fr; } }

/* ---------- 진행 절차: 설계사무소 공정표(시트) ---------- */
.flow-section{ background:var(--surface); border-block:1px solid var(--line); }
.flow{ position:relative; list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border-top:2px solid var(--line); }
.flow::before{ content:''; position:absolute; left:0; right:0; top:-2px; height:2px; background:var(--dark); transform-origin:left; transition:transform 1.1s var(--ease); }
.js [data-reveal] .flow::before{ transform:scaleX(0); }
.js [data-reveal].is-in .flow::before{ transform:scaleX(1); }
.flow__step{ display:flex; flex-direction:column; padding:22px 20px 4px; border-right:1px solid var(--line); min-width:0; }
.flow__step:first-child{ padding-left:0; }
.flow__step:last-child{ border-right:0; padding-right:0; }
.flow__no{ font-family:var(--font-display); font-weight:700; font-size:clamp(2rem,3vw,2.6rem); line-height:1; color:var(--accent-strong); letter-spacing:-.02em; font-variant-numeric:tabular-nums; margin-bottom:18px; }
.flow__body{ display:flex; flex-direction:column; flex:1; }
.flow__title{ font-size:17px; margin-bottom:6px; }
.flow__desc{ color:var(--muted); font-size:15px; margin-bottom:16px; }
.flow__meta{ margin:auto 0 0; border-top:1px dashed var(--line-strong); }
.flow__meta div{ display:flex; gap:10px; padding:8px 0; border-bottom:1px dashed var(--line); }
.flow__meta dt{ flex:0 0 32px; font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--muted); }
.flow__meta dd{ margin:0; font-size:14px; font-weight:700; }
@media(max-width:1024px){
  .flow{ grid-template-columns:1fr; }
  .flow__step{ display:grid; grid-template-columns:64px minmax(0,1fr); gap:0 12px; padding:20px 0; border-right:0; border-bottom:1px solid var(--line); }
  .flow__step:first-child{ padding-left:0; }
  .flow__no{ margin:2px 0 0; font-size:1.9rem; }
  .flow__meta{ display:flex; flex-wrap:wrap; gap:0 20px; border-top:0; }
  .flow__meta div{ border-bottom:0; padding:2px 0; }
}

/* ---------- Before/After ---------- */
.ba{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.ba figure{ margin:0; position:relative; background:var(--corner); padding:6px 0 0 6px; }
.ba img{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--radius); }
.ba figcaption{ position:absolute; top:18px; left:18px; background:var(--dark); color:#fff; font-size:13px; font-weight:700; letter-spacing:.08em; padding:5px 12px; border-radius:var(--radius); }
.ba-cases{ display:grid; gap:48px; }
.ba-case__label{ font-family:var(--font-display); font-weight:700; margin:14px 0 0; color:var(--muted); font-size:15px; }
.ba-case__label strong{ color:var(--text); margin-right:10px; }
@media(max-width:768px){ .ba{ grid-template-columns:1fr; } }

/* ---------- 비교/비용 표 ---------- */
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--corner), var(--surface); }
table.costtable{ width:100%; border-collapse:collapse; min-width:520px; }
table.costtable caption{ caption-side:top; text-align:left; padding:18px 20px 4px; font-weight:700; font-family:var(--font-display); }
table.costtable th,table.costtable td{ padding:14px 18px; text-align:left; border-bottom:1px solid var(--line); font-size:16px; }
table.costtable thead th{ background:var(--surface-2); font-size:14px; letter-spacing:.04em; color:var(--muted); }
table.costtable tbody tr:last-child td,table.costtable tbody tr:last-child th{ border-bottom:0; }
.table-note{ margin-top:16px; color:var(--muted); }

/* ---------- FAQ ---------- */
.faq-list{ margin:0; padding:0; }
.faq-list dt,.faq-list dd{ margin:0; }
.faq-item{ border-top:1px solid var(--line); }
.faq-list{ border-bottom:1px solid var(--line); }
.faq-item__q{
  width:100%; text-align:left; background:none; border:0; padding:18px 4px; min-height:52px;
  display:flex; justify-content:space-between; align-items:center; gap:16px; font-weight:700; font-size:17px;
  cursor:pointer; color:inherit;
}
.faq-item__q::after{ content:'+'; font-size:22px; font-weight:400; flex:0 0 auto; transition:transform .25s var(--ease); }
.faq-item[data-open="true"] .faq-item__q::after{ transform:rotate(45deg); }
.faq-item__a{ max-height:0; overflow:hidden; transition:max-height .35s var(--ease); }
.faq-item__body{ padding:0 4px 20px; color:var(--muted); }

/* ---------- 관련 세부페이지 카드 ---------- */
.related-grid{ border-top:1px solid var(--line); }
.related-grid__label{ font-weight:700; margin-bottom:18px; }
.related-grid__list{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.link-card{ display:flex; flex-direction:column; text-decoration:none; color:inherit; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface); }
.link-card__media{ aspect-ratio:16/9; overflow:hidden; margin:0; }
.link-card__media img{ width:100%; height:100%; object-fit:cover; }
.link-card figcaption{ padding:14px 16px; font-weight:700; }
.link-card--cta{ align-items:center; justify-content:center; background:var(--dark); color:#fff; font-weight:700; min-height:120px; }
@media(max-width:768px){ .related-grid__list{ grid-template-columns:1fr; } }

/* ---------- 상세페이지 인트로 ---------- */
.detail-intro{ padding-top:8px; }
.detail-figure{ margin:20px 0 24px; }
.detail-figure img{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--radius); }
.breadcrumb{ padding-top:20px; font-size:14px; color:var(--muted); }
.breadcrumb a{ color:inherit; display:inline-flex; align-items:center; min-height:44px; min-width:44px; }

/* ---------- 본문 중간 한 줄 CTA ---------- */
.inline-cta{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px 24px; margin-top:28px; padding:20px 24px; border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:var(--radius); background:var(--surface); }
.inline-cta p{ margin:0; font-weight:700; font-family:var(--font-display); }
@media(max-width:480px){ .inline-cta .btn{ width:100%; } }

/* ---------- 상담 채널 카드 ---------- */
.channel-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; list-style:none; margin:32px 0 0; padding:0; }
.channel-grid > li{ display:flex; min-width:0; }
.channel-card{ width:100%; color:var(--text); text-decoration:none; padding:30px 28px 28px; scroll-margin-top:96px; }
.channel-card__value{ font-size:clamp(1.6rem,3.4vw,2.2rem); letter-spacing:-.01em; margin:4px 0 6px; font-variant-numeric:tabular-nums; }
.channel-card .card__desc{ flex:0 0 auto; margin-bottom:20px; }
.channel-card .btn{ margin-top:auto; align-self:flex-start; }
/* CTA "문자로 사진 보내기"(#sms)로 들어오면 도착한 카드를 바로 알아보게 */
.channel-card:focus{ outline:2px solid var(--accent); outline-offset:2px; } /* #sms 로 들어오면 브라우저가 카드에 초점을 줌 — 기본 검은 링 대신 톤 맞춤 */
.channel-card:target{ border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); background:var(--accent-soft); }
@media(max-width:768px){ .channel-grid{ grid-template-columns:1fr; } }

/* ---------- 하단 CTA 배너 ---------- */
/* 사진 CTA: 어두운 색면 + "보낼 사진 예시" 실제 교체 전 사진 모자이크 */
.cta-photo{ background:var(--dark); color:var(--text-on-dark); }
.cta-photo__inner{ max-width:var(--container); margin-inline:auto; padding-inline:24px; display:grid; grid-template-columns:1fr 1.15fr; grid-template-areas:"copy media"; gap:clamp(32px,5vw,72px); align-items:center; }
.cta-photo__media{ grid-area:media; display:grid; grid-template-columns:1.35fr 1fr; grid-template-rows:auto 1fr 1fr; grid-template-areas:"cap cap" "main s1" "main s2"; gap:10px; }
.cta-photo__caption{ grid-area:cap; margin:0 0 4px; font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--muted-on-dark); padding-top:10px; background:repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 1px,transparent 1px 12px) top left/100% 6px no-repeat; }
.cta-photo__tile{ position:relative; margin:0; overflow:hidden; border-radius:var(--radius); min-height:0; }
.cta-photo__tile img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; }
.cta-photo__tile--main{ grid-area:main; }
.cta-photo__tile--main img{ aspect-ratio:auto; }
.cta-photo__tile:nth-of-type(2){ grid-area:s1; }
.cta-photo__tile:nth-of-type(3){ grid-area:s2; }
.cta-photo__tile figcaption{ position:absolute; left:10px; bottom:10px; background:var(--surface); color:var(--text); font-family:var(--font-display); font-weight:700; font-size:13px; padding:4px 10px; border-radius:var(--radius); }
.cta-photo__copy{ grid-area:copy; }
.cta-photo__copy h2{ color:#fff; margin-bottom:14px; }
.cta-photo__copy > p:not(.eyebrow){ color:var(--muted-on-dark); margin-bottom:24px; }
.cta-photo__actions{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.cta-photo small{ color:var(--muted-on-dark); display:block; font-size:14px; }
@media(max-width:1024px){
  .cta-photo__inner{ grid-template-columns:1fr; grid-template-areas:"media" "copy"; }
}

/* ---------- 푸터 ---------- */
.site-footer{ background:var(--surface-2); border-top:1px solid var(--line); padding:56px 0 24px; }
.site-footer .ft-inner{
  max-width:var(--container); margin-inline:auto; padding-inline:24px; display:grid;
  grid-template-columns:1.4fr 1fr 1.4fr; gap:40px; align-items:start; text-align:left;
}
.ft-cluster__title{ font-family:var(--font-display); font-size:14px; font-weight:700; margin-bottom:12px; letter-spacing:.04em; }
.ft-cluster ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.ft-cluster ul li{ line-height:24px; }
.ft-cluster ul li,.ft-cluster ul a{ color:var(--muted); font-size:15px; }
.ft-cluster ul a{ text-decoration:none; min-height:44px; margin-block:-10px; display:inline-flex; align-items:center; }
.ft-cluster--biz ul li{ color:var(--text); }
.ft-service--soon{ display:inline-block; }
.ft-bottom{
  max-width:var(--container); margin:40px auto 0; padding:16px 24px 0; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:14px; color:var(--muted);
}
@media(max-width:768px){
  .site-footer .ft-inner{ grid-template-columns:1fr; text-align:left; }
  .ft-bottom{ flex-direction:column; align-items:flex-start; }
}

/* ---------- 모바일 하단 스티키 바 ---------- */
.mob-bar{ display:none; }
@media(max-width:768px){
  body{ padding-bottom:calc(var(--sticky-h) + env(safe-area-inset-bottom)); }
  .mob-bar{
    display:block; position:fixed; bottom:0; left:0; right:0; z-index:90; background:var(--dark);
    padding:8px 16px calc(8px + env(safe-area-inset-bottom));
  }
  .mob-bar__btn{
    display:flex; align-items:center; justify-content:center; min-height:48px; background:var(--accent);
    color:#fff; border-radius:var(--radius); text-decoration:none; font-weight:700;
  }
  .mob-bar--split{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .mob-bar__btn--sub{ background:transparent; border:2px solid rgba(255,255,255,.7); }
}

/* ---------- 404 ---------- */
.section-404{ min-height:60vh; display:flex; align-items:center; }
.section-404__links{ display:flex; gap:12px; margin-top:20px; flex-wrap:wrap; }

@media(max-width:1024px){ :root{ --space-section:clamp(48px,7vw,80px); } }
@media(max-width:480px){ body{ font-size:16px; } }

/* ==========================================================================
   세부페이지 컴포넌트 (dt-*) — 페이지마다 인트로·레이아웃·본문 블록·FAQ·CTA·연관 목록 조합을 달리해 구성
   ========================================================================== */
.dt main section{ padding:clamp(44px,6vw,80px) 0; }
.dt h1{ font-size:clamp(2rem,4.6vw,3rem); }

/* --- 레이아웃 4종 --- */
.dt-narrow main .container{ max-width:820px; }                                   /* L3 읽기 폭 */
.dt-bands main section:nth-of-type(even):not([data-dark]):not(.dt-cta){ background:var(--surface); border-block:1px solid var(--line); } /* L4 띠 */
.dt-aside-wrap{ max-width:var(--container); margin-inline:auto; padding-inline:24px; display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:48px; align-items:start; } /* L2 */
.dt-aside-wrap > .dt-flow > section > .container{ padding-inline:0; max-width:none; }
.dt-aside{ position:sticky; top:96px; margin-top:clamp(44px,6vw,80px); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px; background:var(--corner), var(--surface); }
.dt-aside__label{ font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:.06em; color:var(--accent-strong); margin-bottom:10px; }
.dt-aside dl{ margin:0 0 18px; }
.dt-aside dl div{ padding:10px 0; border-bottom:1px dashed var(--line-strong); }
.dt-aside dt{ font-size:13px; color:var(--muted); }
.dt-aside dd{ margin:2px 0 0; font-family:var(--font-display); font-weight:700; font-size:15px; }
.dt-aside .btn{ width:100%; min-width:0; }
.dt-flow{ min-width:0; }
@media(max-width:1024px){ .dt-aside-wrap{ grid-template-columns:minmax(0,1fr); gap:0; } .dt-aside{ position:static; margin:0 0 48px; } }

/* --- 인트로 5종 --- */
.dt-intro{ padding-top:12px!important; }
.dt-intro .dt-lead{ font-size:18px; color:var(--text); }
.dt-intro--split .dt-intro__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px); align-items:center; }
.dt-intro--split figure{ margin:0; }
.dt-intro--split img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius); }
.dt-intro--banner{ padding-top:0!important; }
.dt-intro--banner .dt-banner{ margin:0; height:clamp(260px,42vw,480px); overflow:hidden; background:var(--surface-2); }
.dt-intro--banner .dt-banner img{ width:100%; height:100%; object-fit:cover; }
.dt-intro--banner .dt-intro__panel{ position:relative; margin-top:-72px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(22px,3vw,36px); max-width:760px; }
.dt-summary{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin:28px 0 0; border-top:2px solid var(--dark); }
.dt-summary div{ padding:14px 16px 0 0; }
.dt-summary dt{ font-size:13px; color:var(--muted); }
.dt-summary dd{ margin:2px 0 0; font-family:var(--font-display); font-weight:700; }
.dt-intro--sheet .dt-intro__grid{ display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(24px,4vw,56px); align-items:start; }
.dt-sheet{ margin:0; background:var(--corner), var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px 22px 8px; }
.dt-sheet div{ display:grid; grid-template-columns:96px 1fr; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); }
.dt-sheet div:last-child{ border-bottom:0; }
.dt-sheet dt{ font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--muted); }
.dt-sheet dd{ margin:0; }
.dt-intro--dark{ background:var(--dark); color:var(--text-on-dark); padding:clamp(48px,7vw,96px) 0!important; }
.dt-intro--dark h1{ color:#fff; }
.dt-intro--dark .dt-lead{ color:var(--muted-on-dark); }
.dt-intro--dark .breadcrumb{ color:var(--muted-on-dark); padding-top:0; }
.dt-intro--dark .dt-kicker{ display:inline-block; font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:.08em; color:var(--accent-soft); border:1px solid rgba(255,255,255,.3); padding:4px 10px; border-radius:var(--radius); margin-bottom:16px; }
@media(max-width:1024px){ .dt-intro--split .dt-intro__grid,.dt-intro--sheet .dt-intro__grid{ grid-template-columns:1fr; } }
@media(max-width:768px){ .dt-summary{ grid-template-columns:1fr; } .dt-summary div{ padding:10px 0; border-bottom:1px solid var(--line); } .dt-intro--banner .dt-intro__panel{ margin-top:-32px; } .dt-intro .dt-lead{ font-size:17px; } }

/* --- 사진 블록 --- */
.dt-note{ display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(24px,4vw,48px); align-items:start; }
.dt-note figure{ position:relative; margin:0; }
.dt-note img{ width:100%; height:auto; border-radius:var(--radius); } /* 핀 좌표(%)가 원본 비율 기준이라 자르지 않는다 */
.dt-pin{ position:absolute; width:30px; height:30px; margin:-15px 0 0 -15px; border-radius:50%; background:var(--accent); color:#fff; border:3px solid #fff; font-family:var(--font-display); font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 3px rgba(0,0,0,.3); }
.dt-note ol{ list-style:none; margin:0; padding:0; counter-reset:n; border-top:2px solid var(--dark); }
.dt-note li{ counter-increment:n; display:grid; grid-template-columns:30px 1fr; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); }
.dt-note li::before{ content:counter(n); width:26px; height:26px; border-radius:50%; background:var(--accent); color:#fff; font-family:var(--font-display); font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; margin-top:2px; }
.dt-note li strong{ display:block; }
.dt-note li span{ color:var(--muted); font-size:16px; }
.dt-duo{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:0; }
.dt-duo figure{ margin:0; }
.dt-duo img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius); }
.dt-duo figcaption,.dt-figure figcaption{ margin-top:10px; font-size:15px; color:var(--muted); padding-left:12px; border-left:2px solid var(--accent); }
.dt-prose{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px); align-items:start; }
.dt-prose--flip > figure{ order:-1; }
.dt-figure{ margin:0; }
.dt-figure img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius); }
.dt-bastack{ display:grid; gap:28px; }
.dt-bastack__row{ display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(20px,3vw,40px); align-items:center; }
.dt-bastack figure{ margin:0; position:relative; }
.dt-bastack img{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--radius); }
.dt-bastack__tag{ display:inline-block; font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:.08em; padding:4px 10px; border-radius:var(--radius); background:var(--surface-2); margin-bottom:10px; }
.dt-bastack__row--after .dt-bastack__tag{ background:var(--accent); color:#fff; }
@media(max-width:768px){ .dt-note,.dt-duo,.dt-prose,.dt-bastack__row{ grid-template-columns:1fr; } .dt-prose--flip > figure{ order:0; } }

/* --- 본문 블록 --- */
.dt-symptoms{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line); border-left:1px solid var(--line); }
.dt-symptoms li{ padding:22px 20px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--surface); }
.dt-symptoms b{ display:block; font-size:2rem; line-height:1; color:var(--accent-strong); margin-bottom:14px; font-variant-numeric:tabular-nums; }
.dt-symptoms strong{ display:block; margin-bottom:6px; }
.dt-symptoms span{ color:var(--muted); font-size:16px; }
@media(max-width:1024px){ .dt-symptoms{ grid-template-columns:1fr 1fr; } }
@media(max-width:600px){ .dt-symptoms{ grid-template-columns:1fr; } }

.dt-keep{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.dt-keep > div{ border-radius:var(--radius); padding:24px; }
.dt-keep__change{ background:var(--dark); color:var(--text-on-dark); }
.dt-keep__change h3{ color:#fff; }
.dt-keep__stay{ background:var(--surface); border:1px solid var(--line); }
.dt-keep h3{ margin-bottom:12px; }
.dt-keep ul{ margin:0; padding-left:1.1em; }
.dt-keep li{ margin:6px 0; }
.dt-keep__change li{ color:var(--muted-on-dark); }
@media(max-width:768px){ .dt-keep{ grid-template-columns:1fr; } }

.dt-steps{ list-style:none; margin:0; padding:0; position:relative; counter-reset:s; }
.dt-steps::before{ content:''; position:absolute; left:17px; top:8px; bottom:8px; width:2px; background:var(--line-strong); }
.dt-steps li{ counter-increment:s; position:relative; padding:0 0 26px 58px; }
.dt-steps li::before{ content:counter(s); position:absolute; left:0; top:0; width:36px; height:36px; border-radius:50%; background:var(--surface); border:2px solid var(--dark); font-family:var(--font-display); font-weight:700; display:flex; align-items:center; justify-content:center; }
.dt-steps li:last-child{ padding-bottom:0; }
.dt-steps h3{ font-size:17px; margin:4px 0 4px; }
.dt-steps p{ color:var(--muted); margin:0; }
.dt-steps em{ font-style:normal; font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--accent-strong); }

.dt-inline-steps{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px; counter-reset:s; }
.dt-inline-steps li{ counter-increment:s; flex:1 1 180px; background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--accent); border-radius:var(--radius); padding:16px 18px; }
.dt-inline-steps li::before{ content:'STEP ' counter(s); display:block; font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:.1em; color:var(--accent-strong); margin-bottom:6px; }
.dt-inline-steps strong{ display:block; margin-bottom:4px; }
.dt-inline-steps span{ color:var(--muted); font-size:15px; }

.dt-decision{ margin:0; border-top:2px solid var(--dark); }
.dt-decision div{ display:grid; grid-template-columns:minmax(0,1fr) 28px minmax(0,1.2fr); gap:12px; align-items:start; padding:16px 0; border-bottom:1px solid var(--line); }
.dt-decision div::after{ content:'\2192'; grid-column:2; grid-row:1; color:var(--accent); font-weight:700; text-align:center; }
.dt-decision dt{ grid-column:1; font-family:var(--font-display); font-weight:700; }
.dt-decision dd{ grid-column:3; margin:0; color:var(--muted); }
@media(max-width:600px){ .dt-decision div{ grid-template-columns:1fr; gap:4px; } .dt-decision div::after{ display:none; } .dt-decision dd{ grid-column:1; } }

.dt-myth{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.dt-myth li{ display:grid; grid-template-columns:1fr 1fr; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.dt-myth li > *{ padding:16px 20px; margin:0; }
.dt-myth__say{ color:var(--muted); background:var(--surface-2); }
.dt-myth__say::before{ content:'흔한 생각'; display:block; font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:.06em; margin-bottom:4px; }
.dt-myth__fact::before{ content:'실제로는'; display:block; font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:.06em; color:var(--accent-strong); margin-bottom:4px; }
@media(max-width:600px){ .dt-myth li{ grid-template-columns:1fr; } }

.dt-callout{ background:var(--surface); border:1px solid var(--line); border-left:6px solid var(--dark); border-radius:var(--radius); padding:24px 26px; }
.dt-callout__label{ font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:.08em; color:var(--accent-strong); margin-bottom:8px; }
.dt-callout h2{ font-size:clamp(1.25rem,2.4vw,1.6rem); margin-bottom:10px; }
.dt-callout ul{ margin:8px 0 0; padding-left:1.1em; }

.dt-spec{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 40px; margin:0; background:var(--corner); padding-top:14px; }
.dt-spec div{ padding:14px 0; border-bottom:1px solid var(--line); }
.dt-spec dt{ font-family:var(--font-display); font-weight:700; }
.dt-spec dd{ margin:4px 0 0; color:var(--muted); }
@media(max-width:768px){ .dt-spec{ grid-template-columns:1fr; } }

/* --- FAQ 변형 --- */
.dt-faq-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:0; }
.dt-faq-grid > div{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; }
.dt-faq-grid dt{ font-family:var(--font-display); font-weight:700; margin-bottom:8px; }
.dt-faq-grid dd{ margin:0; color:var(--muted); font-size:16px; }
@media(max-width:768px){ .dt-faq-grid{ grid-template-columns:1fr; } }
.dt-faq-list{ list-style:none; margin:0; padding:0; counter-reset:q; }
.dt-faq-list li{ counter-increment:q; display:grid; grid-template-columns:52px 1fr; padding:20px 0; border-top:1px solid var(--line); }
.dt-faq-list li::before{ content:'Q' counter(q); font-family:var(--font-display); font-weight:700; color:var(--accent-strong); }
.dt-faq-list h3{ font-size:17px; margin-bottom:6px; grid-column:2; }
.dt-faq-list p{ grid-column:2; color:var(--muted); margin:0; }

/* --- CTA 4종 --- */
.btn--light{ background:#fff; color:var(--accent-strong); }
.dt-cta{ padding:0!important; }
.dt-cta small{ display:block; font-size:14px; color:var(--muted); margin-top:14px; }
.dt-cta__actions{ display:flex; gap:12px; flex-wrap:wrap; }
.dt-cta--band{ background:var(--accent-strong); color:#fff; text-align:center; }
.dt-cta--band .dt-cta__inner{ padding-block:clamp(48px,7vw,88px); }
.dt-cta--band h2{ color:#fff; margin-bottom:12px; }
.dt-cta--band p{ color:rgba(255,255,255,.85); margin-inline:auto; }
.dt-cta--band .dt-cta__actions{ justify-content:center; margin-top:24px; }
.dt-cta--band small{ color:rgba(255,255,255,.75); }
.dt-cta--strip{ background:var(--dark); color:var(--text-on-dark); }
.dt-cta--strip .dt-cta__inner{ display:flex; align-items:center; justify-content:space-between; gap:24px 40px; flex-wrap:wrap; padding-block:36px; }
.dt-cta--strip h2{ color:#fff; font-size:clamp(1.25rem,2.4vw,1.6rem); margin-bottom:6px; }
.dt-cta--strip p{ color:var(--muted-on-dark); margin:0; }
.dt-cta--box .dt-cta__inner{ display:grid; grid-template-columns:1.3fr 1fr; gap:32px; align-items:center; background:var(--corner), var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius); padding:clamp(24px,4vw,44px); margin-block:clamp(44px,6vw,80px); }
.dt-cta--box h2{ margin-bottom:10px; }
.dt-cta__list{ margin:12px 0 0; padding-left:1.1em; color:var(--muted); }
.dt-cta--split{ border-top:1px solid var(--line); background:var(--surface); }
.dt-cta--split .dt-cta__inner{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,72px); align-items:end; padding-block:clamp(48px,7vw,88px); }
.dt-cta__q{ font-size:clamp(1.7rem,3.6vw,2.6rem); }
@media(max-width:768px){ .dt-cta--box .dt-cta__inner,.dt-cta--split .dt-cta__inner{ grid-template-columns:1fr; } }
@media(max-width:480px){ .dt-cta .btn{ width:100%; } }

/* --- 연관 서비스 3종 --- */
.dt-rel{ padding:clamp(40px,5vw,64px) 0; border-top:1px solid var(--line); }
.dt-rel__label{ font-family:var(--font-display); font-weight:700; margin-bottom:16px; }
.dt-rel__list{ list-style:none; margin:0; padding:0; }
.dt-rel a{ text-decoration:none; color:inherit; }
.dt-rel--list .dt-rel__list{ border-top:1px solid var(--line); }
.dt-rel--list a{ display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:56px; padding:12px 4px; border-bottom:1px solid var(--line); }
.dt-rel--list a::after{ content:'\2192'; color:var(--accent-strong); font-weight:700; }
.dt-rel--list strong{ flex:0 0 auto; }
.dt-rel--list span{ flex:1; color:var(--muted); font-size:15px; }
.dt-rel--chips .dt-rel__list{ display:flex; flex-wrap:wrap; gap:10px; }
.dt-rel--chips a{ display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border:1px solid var(--line-strong); border-radius:var(--radius); background:var(--surface); font-weight:700; font-family:var(--font-display); font-size:15px; }
.dt-rel--index .dt-rel__list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:0; border-top:2px solid var(--dark); }
.dt-rel--index a{ display:grid; grid-template-columns:36px 1fr; gap:2px 10px; padding:14px 12px 14px 0; border-bottom:1px solid var(--line); min-height:64px; }
.dt-rel--index em{ grid-row:span 2; font-style:normal; font-family:var(--font-display); font-weight:700; color:var(--accent-strong); }
.dt-rel--index span{ font-size:13px; color:var(--muted); }
@media (hover:hover) and (pointer:fine){
  .dt-rel--list a:hover strong,.dt-rel--index a:hover strong{ color:var(--accent-strong); }
  .dt-rel--chips a:hover{ border-color:var(--accent); color:var(--accent-strong); }
}
@media(max-width:600px){ .dt-rel--list a{ flex-wrap:wrap; } .dt-rel--list span{ flex-basis:100%; order:3; } }
/* L2 사이드·L3 좁은 레이아웃 안의 공정표 — 좁은 본문 폭이라 행형으로, 띠 배경 대신 본문 배경 */
.dt-flow .flow-section,.dt-narrow .flow-section{ background:none; border:0; }
.dt-flow .flow,.dt-narrow .flow{ grid-template-columns:1fr; }
.dt-flow .flow__step,.dt-narrow .flow__step{ display:grid; grid-template-columns:64px minmax(0,1fr); gap:0 12px; padding:20px 0; border-right:0; border-bottom:1px solid var(--line); }
.dt-flow .flow__no,.dt-narrow .flow__no{ margin:2px 0 0; font-size:1.9rem; }
.dt-flow .flow__meta,.dt-narrow .flow__meta{ display:flex; flex-wrap:wrap; gap:0 20px; border-top:0; }
.dt-flow .flow__meta div,.dt-narrow .flow__meta div{ border-bottom:0; padding:2px 0; }
.dt-narrow .dt-intro--sheet .dt-intro__grid{ grid-template-columns:1fr; } /* 좁은 레이아웃에선 제목 폭 확보 — 사양표는 아래로 */