/* ── 칼럼 페이지 공통 (동탄리프팅 · 고민별 칼럼 7편) ──────── */
/* column page only */
.col-hero{background:var(--ink);color:var(--cream);padding:92px 0 78px}
.col-hero h1{font-size:clamp(30px,4.3vw,58px);line-height:1.3;color:var(--cream)}
.col-hero .sub{font-size:clamp(15px,1.3vw,18px);line-height:2;font-weight:300;color:#b8c1b4;margin-top:26px}
.col-meta{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:34px;padding-top:22px;border-top:1px solid var(--line-dark);font-size:11.5px;letter-spacing:.02em;color:#8d988b}
.col-meta b{color:var(--gold-soft);font-weight:500}
.col-fig{margin:54px 0 0}
.col-fig img{border:1px solid var(--line-dark);background:#000}
.col-fig figcaption{margin-top:14px;font-size:11.5px;line-height:1.9;color:#8d988b;letter-spacing:0}
.col{padding:104px 0 90px;background:var(--paper);display:block}
.col h2{font-size:clamp(23px,2.7vw,36px);line-height:1.45;margin:72px 0 26px}
.col p{font-size:16px;line-height:2.15;color:#2b332c;margin:0 0 20px}
.col p.say-q{font-family:var(--serif);font-weight:700;font-size:clamp(17px,1.7vw,22px);line-height:1.85;letter-spacing:-.05em;color:var(--text);margin:0 0 10px}
.col .pull{margin:52px 0;padding:34px 0;border-top:2px solid var(--text);border-bottom:1px solid var(--line)}
.col .pull p{font-family:var(--serif);font-weight:700;font-size:clamp(19px,2vw,27px);line-height:1.7;letter-spacing:-.05em;color:var(--text);margin:0}
.col figure{margin:46px 0}
.col figure img{border:1px solid var(--line);background:#000}
.col figcaption{margin-top:13px;font-size:12px;line-height:1.9;color:var(--dim);letter-spacing:0}
.col .pair{display:grid;grid-template-columns:1fr;gap:24px}
.devlist{margin:34px 0 0;border-top:2px solid var(--text)}
.devlist div{display:grid;grid-template-columns:168px 1fr;gap:28px;padding:22px 0;border-bottom:1px solid var(--line)}
.devlist b{font:700 13px/1.7 var(--sans);letter-spacing:-.02em}
.devlist span{font-size:14.5px;line-height:2;color:var(--dim)}
.col ol.steps{margin:34px 0 0;padding:0;list-style:none;counter-reset:s}
.col ol.steps li{counter-increment:s;position:relative;padding:0 0 26px 62px;font-size:15.5px;line-height:2.1;color:#2b332c}
.col ol.steps li:before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:2px;font:italic 700 17px/1 var(--num);color:var(--flag)}
.col-faq{background:var(--paper-2);padding:96px 0}
.col-end{background:var(--ink);color:var(--cream);padding:96px 0}
.col-end h2{color:var(--cream);font-size:clamp(24px,2.9vw,40px);line-height:1.4}
.col-end p{color:#b8c1b4;font-size:15.5px;line-height:2.1;margin:22px 0 0}
.ask4{margin:48px 0 0;border-top:1px solid var(--line-dark)}
.ask4 div{display:flex;gap:24px;align-items:baseline;padding:26px 0;border-bottom:1px solid var(--line-dark)}
.ask4 .q{font:italic 700 15px/1 var(--num);color:var(--flag-soft);flex:none}
.ask4 p{font-family:var(--serif);font-weight:700;font-size:clamp(17px,1.7vw,23px);line-height:1.6;letter-spacing:-.05em;color:var(--cream);margin:0}
.col-acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:48px}
.col-tags{margin-top:54px;font-size:11.5px;line-height:2;color:#7f8a7c;letter-spacing:0}
@media(max-width:760px){
  .col{padding:72px 0 64px}
  .col-hero{padding:62px 0 54px}
  .col h2{margin:56px 0 22px}
  .devlist div{grid-template-columns:1fr;gap:6px;padding:18px 0}
  .col ol.steps li{padding-left:46px}
}

/* ── 칼럼 본문 추가 컴포넌트 ─────────────────────────── */
/* 원인/유형 대조 카드 */
.col .types{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:40px 0 0;background:var(--line);border:1px solid var(--line)}
.col .types>div{background:var(--paper);padding:28px 24px 30px;display:flex;flex-direction:column}
.col .types .n{font:italic 700 15px/1 var(--num);color:var(--flag);margin:0 0 14px}
.col .types h3{font-size:19px;line-height:1.5;margin:0 0 12px}
.col .types p{font-size:14px;line-height:2;color:var(--dim);margin:0}
.col .types .vd{margin-top:auto;padding-top:14px;font:700 13.5px/1.8 var(--sans);color:var(--text);letter-spacing:-.02em}

/* 2단 대조 */
.col .vs{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:40px 0 0;background:var(--line);border:1px solid var(--line)}
.col .vs>div{background:var(--paper);padding:30px 26px 32px;display:flex;flex-direction:column}
.col .vs>div:last-child{background:#efe9df}
.col .vs .tag{font:700 10.5px/1.6 Arial;letter-spacing:.17em;color:var(--dim);margin:0 0 14px}
.col .vs h3{font-size:clamp(18px,1.8vw,22px);line-height:1.5;margin:0 0 14px}
.col .vs p{font-size:14.5px;line-height:2.05;color:var(--dim);margin:0 0 10px}
.col .vs .vd{margin:auto 0 0;padding-top:16px;font:700 14px/1.8 var(--sans);color:var(--flag);letter-spacing:-.02em}
.col .vs>div:first-child .vd{color:var(--green)}

/* 비중 막대 */
.col .shares{margin:36px 0 0;border-top:2px solid var(--text)}
.col .shares div{display:grid;grid-template-columns:150px 1fr 54px;gap:18px;align-items:center;padding:15px 0;border-bottom:1px solid var(--line)}
.col .shares b{font:700 13.5px/1.6 var(--sans);letter-spacing:-.02em}
.col .shares i{display:block;height:9px;background:var(--line);font-style:normal}
.col .shares i span{display:block;height:100%;background:var(--green)}
.col .shares div.lead-row i span{background:var(--flag)}
.col .shares em{font:italic 700 15px/1 var(--num);color:var(--dim);text-align:right;font-style:italic}
.col .shares div.lead-row em{color:var(--flag)}

/* 단계 체인 */
.col .chain{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:38px 0 0;background:var(--line);border:1px solid var(--line)}
.col .chain>div{background:var(--paper);padding:24px 20px 26px}
.col .chain .n{font:italic 700 14px/1 var(--num);color:var(--flag);margin:0 0 12px}
.col .chain b{display:block;font:700 14.5px/1.6 var(--sans);letter-spacing:-.03em;margin:0 0 9px}
.col .chain p{font-size:13.5px;line-height:1.95;color:var(--dim);margin:0}
.col .chain>div:last-child{background:#efe9df}

.col .chain5{grid-template-columns:repeat(5,1fr)}
@media(max-width:1100px){.col .chain5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.col .chain5{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.col .chain5{grid-template-columns:1fr}}

/* 체크 목록 */
.col .checks{margin:32px 0 0;padding:0;list-style:none}
.col .checks li{position:relative;padding:0 0 14px 28px;font-size:15px;line-height:2.05;color:#2b332c}
.col .checks li:before{content:"";position:absolute;left:2px;top:14px;width:9px;height:9px;border:2px solid var(--flag);border-radius:50%}

/* 도표 */
.col .fig-svg{margin:44px 0 0;padding:30px 26px 24px;background:var(--ink);border:1px solid var(--line-dark)}
.col .fig-svg svg{display:block;width:100%;height:auto}
.col .fig-svg .swipe{display:none;margin:0 0 12px;font:400 11px/1.6 var(--sans);color:#8d988b;letter-spacing:.02em}
.col .fig-svg figcaption{margin-top:16px;font-size:11.5px;line-height:1.9;color:#8d988b;letter-spacing:0}

/* 고민별 칼럼 더 보기 */
.col-more{background:var(--paper-2);padding:88px 0 92px;border-top:1px solid var(--line)}
.col-more h2{font-size:clamp(21px,2.3vw,30px);line-height:1.45;margin:0 0 8px}
.col-more .sub{font-size:14.5px;line-height:2;color:var(--dim);margin:0 0 34px}
.col-more ul{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0;padding:0;list-style:none;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.col-more li{background:var(--paper);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.col-more a{display:block;padding:24px 22px 26px;height:100%}
.col-more a:hover{background:#fff}
.col-more .kw{font:700 10.5px/1.6 Arial;letter-spacing:.16em;color:var(--flag);margin:0 0 11px}
.col-more b{display:block;font-family:var(--serif);font-weight:700;font-size:16.5px;line-height:1.55;letter-spacing:-.05em;margin:0 0 9px}
.col-more span{display:block;font-size:13px;line-height:1.9;color:var(--dim)}
.col-more a[aria-current]{background:#e2ddce}
.col-more a[aria-current] b{color:var(--dim)}

@media(max-width:900px){
  .col .types,.col .chain{grid-template-columns:1fr 1fr}
  .col-more ul{grid-template-columns:1fr 1fr}
}
/* ── 윤곽 단계 서브탭 (리프팅 허브 + 1·2·3단계 + 필러 5개 페이지) ── */
.stepnav{background:var(--ink);border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark)}
.stepnav .wrap{display:flex;align-items:center;flex-wrap:wrap;gap:0 26px;padding:0}
.stepnav .lb{flex:none;font:700 10.5px/1.6 Arial;letter-spacing:.16em;color:#7f8a7c;padding:16px 0}
.stepnav ul{display:flex;flex-wrap:wrap;gap:0 24px;margin:0;padding:0;list-style:none}
.stepnav a{display:block;padding:16px 0;font:500 13px/1.6 var(--sans);letter-spacing:-.02em;color:#b8c1b4;border-bottom:2px solid transparent}
.stepnav a:hover{color:var(--gold-soft)}
.stepnav a i{font-style:italic;font-family:var(--num);font-weight:700;color:var(--flag-soft);margin-right:7px}
.stepnav a[aria-current]{color:var(--cream);border-bottom-color:var(--flag)}
.stepnav a[aria-current] i{color:var(--flag)}
@media(max-width:760px){
  .stepnav .wrap{gap:0 16px}
  .stepnav .lb{padding:13px 0;font-size:9.5px;letter-spacing:.12em}
  .stepnav ul{gap:0 16px}
  .stepnav a{padding:11px 0;font-size:12px}
}

/* ── 치료 순서 공유 블록 (리프팅 · 볼륨 · 2단계 · 3단계 · 재료 칼럼 공용) ──
   윤곽치료모델.md 2장을 그대로 옮긴 블록. 5개 파일에 동일 마크업으로 들어간다.
   문구를 고칠 때는 다섯 곳을 같이 고친다(tools/check-columns.py가 일치를 검사). */
.order{margin:40px 0 0;border-top:2px solid var(--text)}
.order>div{display:grid;grid-template-columns:150px 1fr;gap:28px;align-items:start;padding:26px 0;border-bottom:1px solid var(--line)}
.order .st{margin:0}
.order .st i{display:block;font:italic 700 15px/1 var(--num);color:var(--flag);font-style:italic;margin:0 0 8px}
.order .st b{display:block;font:700 15px/1.6 var(--sans);letter-spacing:-.03em;color:var(--text)}
.order .st em{display:block;margin-top:6px;font:400 12px/1.7 var(--sans);font-style:normal;color:var(--dim)}
.order p{font-size:15px;line-height:2.05;color:#2b332c;margin:0 0 8px}
.order p:last-child{margin:0}
.order .cur{background:#efe9df;margin:0 -18px;padding:26px 18px;border-bottom:1px solid var(--line)}
.order a{color:var(--flag);border-bottom:1px solid var(--line);font-weight:500}
.rule{margin:30px 0 0;padding:22px 24px;background:var(--ink);color:#cfd6cb}
.rule p{font-size:14.5px;line-height:2;color:#cfd6cb;margin:0}
.rule b{color:var(--gold-soft)}
@media(max-width:760px){
  .order>div{grid-template-columns:1fr;gap:10px;padding:20px 0}
  .order .cur{margin:0;padding:20px 0}
}

/* 색소 3단 분류 비교박스 (리팟 칼럼) */
.col .vs3{grid-template-columns:repeat(3,1fr)}
.col .vs3>div:nth-child(2){background:#f5f1e9}
.col .vs3>div:nth-child(2) .vd{color:#8a5a12}
.col .vs3 h3{font-size:clamp(17px,1.5vw,20px)}
.col .vs3 p{font-size:14px}
@media(max-width:900px){.col .vs3{grid-template-columns:1fr}}
@media(max-width:620px){
  .col .types,.col .chain,.col .vs,.col-more ul{grid-template-columns:1fr}
  .col .shares div{grid-template-columns:116px 1fr 44px;gap:12px}
  .col .fig-svg{padding:22px 16px 18px}
  .col .fig-svg .swipe{display:block}
  .col .fig-svg .scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .col .fig-svg .scroll svg{min-width:520px}
}