/* [만들어진 파일] work/v2/extras.py — 소개 쪽에 더한 두 절(센터장·연구 경력)에만 쓴다.
   ⚠ 센터장 절의 **뼈대와 꾸밈은 원본 `.sec03` 그대로** 쓴다. 여기 있는 것은
      원본에 없던 것 둘뿐이다 — 사진을 누르면 편지가 열린다는 **표시**와, 편지 팝업. */
.dn_center .img .story-open{display:block;position:relative;line-height:0;border-radius:0.75rem;overflow:hidden}
.dn_center .img .story-open img{width:100%;height:auto;display:block}
.dn_center .story-hint{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;
  font-size:calc(15px*var(--dn-fs,1));line-height:1.4;color:#fff;text-align:center;letter-spacing:-.01em;
  background:linear-gradient(to top,rgba(32,24,14,.82),rgba(32,24,14,0));
  opacity:0;transition:opacity .25s ease}
.dn_center .story-open:hover .story-hint,.dn_center .story-open:focus-visible .story-hint{opacity:1}
/* 손가락으로 쓰는 화면에는 hover 가 없다 — 늘 보여 준다(안 그러면 누를 수 있는 줄 모른다) */
@media(hover:none){.dn_center .story-hint{opacity:1}}
/* 의료진 약력은 끝 줄에 한 단어만 남기지 않는다(원장님 2026-10-07 「추천안대로」 · 「의료진 카드 모두에」) — **이 한 규칙**이 둘을 같이 잡는다 :
   의료진 카드(.dn_doc — 두 홈 · 척추교정 · 수술 후 재활 · home.doctor_card) 와 암 서사 쪽의 약력 목록(.sec03 dl.career — 대표원장 fill_career · 센터장 center_section).
   이 CSS(v2-extra.css)는 그 쪽들이 다 싣는다. 처음엔 .dn_doc 만 home.py 에 걸어 서사 쪽 둘이 빠졌다(검수 20261007_son_v2 R2 · 360 에서 둘).
   text-wrap:pretty 를 모르는 브라우저는 이 줄을 버리고 전처럼 꺾는다(깨지지 않음). 「·」 줄 머리는 글 쪽(build_v2.career_html)이 막는다 */
.dn_doc,.sec03 dl.career{text-wrap:pretty}
dialog.dn_letter{border:0;border-radius:16px;padding:0;max-width:min(680px,92vw);
  box-shadow:0 30px 80px rgba(30,22,12,.3)}
dialog.dn_letter::backdrop{background:rgba(28,22,14,.55)}
dialog.dn_letter article{padding:clamp(28px,4vw,48px)}
dialog.dn_letter .letter-to{font-size:calc(17px*var(--dn-fs,1));font-weight:700;margin:0 0 20px}
dialog.dn_letter p{line-height:1.85;margin:0 0 16px;font-size:calc(16px*var(--dn-fs,1))}
dialog.dn_letter .letter-sign{margin-top:26px;text-align:right;font-weight:600}
dialog.dn_letter .dn_close{margin-top:8px;padding:10px 22px;border:1px solid currentColor;
  background:transparent;border-radius:999px;cursor:pointer;font:inherit}
.dn_papers{margin:40px 0 0;padding:0;list-style:none;counter-reset:pp}
.dn_papers li{counter-increment:pp;padding:20px 0 20px 46px;border-top:1px solid rgba(0,0,0,.09);position:relative}
.dn_papers li::before{content:counter(pp,decimal-leading-zero);position:absolute;left:0;top:22px;
  font-size:calc(13px*var(--dn-fs,1));letter-spacing:.06em;opacity:.45}
.dn_papers .pt{display:block;font-size:calc(16px*var(--dn-fs,1));line-height:1.55;margin-bottom:7px}
.dn_papers .pa{display:block;font-size:calc(13.5px*var(--dn-fs,1));line-height:1.6;opacity:.6}
.dn_papers .pj{display:block;font-size:calc(13.5px*var(--dn-fs,1));margin-top:4px;opacity:.75}

/* ── 머리띠 슬로건 — 「항암 치료 중에도, 치료를 마친 뒤에도」 (2026-09-20 평가 ① · 원장님 「머리띠에 넣자」 →
   같은 날 밤 「더 강조해서 눈에 띄게」 — 첫 화면 아래 한눈에 띠를 빼는 대신). 글은 build_v2.SLOGAN, 자리는 assemble.build_nav.
   앞 토막(b)은 굵게·갈색·크게, 뒤 토막(span)은 작게 회색으로 두 줄. 상자·배지 없이 로고 옆 가는 선 하나.
   ⚠ 1024px 이하(폰 머리띠는 로고와 메뉴 단추뿐)에서는 숨긴다 — 자리가 없다. */
#header .logo_wrap{display:flex;align-items:center;gap:1.1rem}
.dn_slogan{margin:0;padding:.15rem 0 .15rem 1.1rem;border-left:1px solid rgba(61,54,46,.25);
  display:flex;flex-direction:column;justify-content:center;gap:.2rem;white-space:nowrap}
.dn_slogan>b{font-size:max(1.12rem,calc(16px*var(--dn-fs,1)));font-weight:700;letter-spacing:-.015em;line-height:1.25;color:var(--dn-accent,#7C5526)}
.dn_slogan span{font-size:max(.8rem,calc(13px*var(--dn-fs,1)));font-weight:500;letter-spacing:.02em;line-height:1.3;color:#6B6158}
.dn_slogan span b{font-weight:700;color:#3D362E}   /* 「전이·재발 예방」 — 원장님 「굵은 글씨로 강조」(build_v2.SLOGAN_EM) */
@media(max-width:1200px){.dn_slogan>b{font-size:max(1rem,calc(15px*var(--dn-fs,1)))}}
@media(max-width:1024px){.dn_slogan{display:none}}

/* (머리띠 캡슐은 2026-09-21 에 뺐다 — 홈의 「한눈에」와 첫 화면 「오늘 진료」 알약(home.py · css/v2-home.css)이 그 자리다) */

/* ── 첫 화면 가독성 — 편지 글자가 배경 사진과 겹쳐 읽기 어렵다(원장님 2026-09-20 밤). 글 뒤에 밝은 타원 베일을 깔고 글자를 진하게.
   원본 글자색 --font-color(#6D6D6D)는 사진 위에서 너무 옅다. 베일은 .inner 의 ::before — 자식들을 그 위에 올린다(z-index). */
#main .sec01 .inner{position:relative}
#main .sec01 .inner::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(72rem,100vw);height:min(46rem,100%);
  border-radius:50%;background:radial-gradient(closest-side,rgba(253,251,246,.95) 0%,rgba(253,251,246,.88) 55%,rgba(253,251,246,0) 100%);pointer-events:none;z-index:0}
#main .sec01 .inner>*{position:relative;z-index:1}
#main .sec01 .main_tit .tit{color:#1F1B16}
#main .sec01 .cont .txt p{color:#3D362E}
@media(max-width:1024px){
  /* 폰 — 글 상자 위아래로 조금 더 넓게, 가장자리는 스르르(네모난 판으로 보이지 않게) */
  #main .sec01 .inner::before{left:0;top:-3rem;transform:none;width:100%;height:calc(100% + 6rem);border-radius:0;
    background:linear-gradient(rgba(253,251,246,0),rgba(253,251,246,.84) 12%,rgba(253,251,246,.84) 88%,rgba(253,251,246,0))}
}

/* ── 절 끝 단추 — 마음이 움직인 자리에서 바로 문의 (2026-09-20 평가 ⑤) ──────
   빛깔·모양은 폰 전체메뉴의 단추(`.v2nav-cta` · mobnav.py)를 **그대로 쓴다.** 같은 단추가
   두 벌이면 한쪽만 바뀐다. 여기서는 가로로 눕히는 것과 크기만 바꾼다. */
.dn_cta.v2nav-cta{flex-direction:row;flex-wrap:wrap;align-items:center;gap:.6rem;margin:0;flex-shrink:0}
.dn_cta.v2nav-cta a{padding:.62rem 1.15rem;font-size:max(.85rem,calc(13px*var(--dn-fs,1)));min-height:2.75rem;white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center}
.dn_cta--end.v2nav-cta{justify-content:center;margin-top:2.2rem}
.dn_cta__lead{font-size:max(.95rem,calc(14px*var(--dn-fs,1)));color:#3D362E;margin-right:.3rem}
/* 홈 안의 단추 줄(동행 절 · 2026-10-02) — v2-home.css 의 .dn_hm a{color:inherit}(0,1,1)이 .v2nav-*(0,1,0)의 글자색을 이기므로 세기를 올려 같은 색으로 */
.dn_hm .dn_cta.v2nav-cta .v2nav-kko{color:var(--dn-kko-ink)}
.dn_hm .dn_cta.v2nav-cta .v2nav-tel{color:var(--dn-amber-ink)}
.dn_hm .dn_cta.v2nav-cta .v2nav-ask{color:var(--dn-accent)}

/* (고민 절의 여섯 얼굴은 클립아트코리아 인물 사진으로 — extras.make_question_photos · 원본 CSS 그대로 쓴다) */

/* ── 다나음의 하루 — 「매일 살핀다」를 말 대신 **하루 시간표 그래픽**으로 (2026-09-20 평가 ③④ · 원장님 일정)
   원장님 지적 2026-09-20 「디자인·그래픽 요소가 너무 없어서 심심해 보인다」 → 다시 지었다 :
     · 해가 뜨고 지는 호(弧) 위에 다섯 마디(회진 · 조식 · 중식 · 재활 · 석식) — 「매일」의 뼈대를 그림으로
     · 카드 셋은 사진 머리(우리 시설 사진 · danaeum-c 것) + 선 아이콘 줄 · 셋째 카드는 「병실 → 상급병원 → 병실」 길 그림
     · 바탕에 흐린 영문 글자띠(원본 절들이 쓰는 꾸밈 · sec05 .bg_txt 와 같은 말)
   ⚠ 「본병원에서는 받기 어려운」 같은 **다른 기관과의 비교 문구는 안 쓴다**(의료광고 비교광고). 배지도 없다 — 일곱이 같은 급. */
.dn_day{position:relative;overflow:hidden;background:#FDFBF6;color:#1F1B16}
.dn_day .inner{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;gap:1.1rem;padding-top:1.6rem;padding-bottom:1.2rem}
.dn_day__bg{position:absolute;right:-.6rem;bottom:.2rem;z-index:0;font-size:7.4rem;font-weight:800;line-height:1;letter-spacing:.02em;
  white-space:nowrap;color:transparent;-webkit-text-stroke:1px #E5D8C0;pointer-events:none;user-select:none}
/* 위 줄 — 왼쪽 글, 오른쪽 하루 시간표 */
.dn_day__top{display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);gap:2.6rem;align-items:center}
.dn_day .dn_head h2{font-size:1.9rem}
.dn_day .dn_head p{font-size:max(.88rem,calc(13px*var(--dn-fs,1)))}
.dn_day__tl{position:relative;padding-bottom:2.9rem}
.dn_day__arc{display:block;width:100%;height:auto}
.dn_day__nodes{list-style:none;margin:0;padding:0}
.dn_day__nodes li{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:.3rem;width:7.4rem;text-align:center}
.dn_day__nodes .dn_ic{width:2.7rem;height:2.7rem;border-radius:50%;background:#FFF;border:1.5px solid #C9B48F;color:var(--dn-accent,#7C5526);
  display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(46,40,31,.08)}
.dn_day__nodes .dn_ic svg{width:1.3rem;height:1.3rem}
.dn_day__nodes .is-noon .dn_ic{background:#F6D97E;border-color:#E9C35A;color:#5B3D14;box-shadow:0 0 0 .55rem rgba(246,217,126,.28)}
.dn_day__nodes b{display:block;font-size:max(.72rem,calc(13px*var(--dn-fs,1)));font-weight:700;letter-spacing:.04em;color:var(--dn-accent,#7C5526);line-height:1.1}
.dn_day__nodes span{display:block;font-size:max(.74rem,calc(13px*var(--dn-fs,1)));line-height:1.3;color:#3D362E}
.dn_day__nodes li .dn_day__lbl{transform:translateY(.1rem)}
/* 카드 셋 */
.dn_day__grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;align-items:stretch}
.dn_day__col{display:flex;flex-direction:column;background:#FFF;border:1px solid #E5D8C0;border-radius:.9rem;overflow:hidden;
  box-shadow:0 12px 30px rgba(46,40,31,.06)}
/* 사진 머리가 남는 높이를 먹는다 — 카드 아래가 비어 보이지 않게(1440x900 실측). 글 줄은 제 높이만 */
.dn_day__ph{position:relative;min-height:6.6rem;flex:1 1 auto;background:#F3EADB;overflow:hidden}
.dn_day__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.dn_day__ph::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(31,27,22,.62),rgba(31,27,22,0) 65%)}
.dn_day__ph h3{position:absolute;left:1rem;bottom:.75rem;z-index:1;margin:0;font-size:max(1rem,calc(14px*var(--dn-fs,1)));font-weight:700;letter-spacing:.02em;color:#FFF;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.dn_day__ph--route{background:#F6EFE2;min-height:8.5rem}
.dn_day__ph--route::after{display:none}
.dn_day__ph--route h3{color:#1F1B16;text-shadow:none;top:.8rem;bottom:auto}
.dn_day__ph--route svg{position:absolute;left:0;top:2.2rem;width:100%;height:calc(100% - 2.4rem)}
.dn_day__col ul{margin:0;padding:.55rem .9rem .8rem;list-style:none;display:flex;flex-direction:column;flex:0 0 auto}
.dn_day__col li{display:flex;align-items:flex-start;gap:.7rem;padding:.6rem 0;border-top:1px solid #F0E9DB}
.dn_day__col li:first-child{border-top:0}
.dn_day__col .dn_ic{flex:0 0 auto;width:2.1rem;height:2.1rem;border-radius:.6rem;background:#F6EFE2;color:var(--dn-accent,#7C5526);display:flex;align-items:center;justify-content:center}
.dn_day__col .dn_ic svg{width:1.15rem;height:1.15rem}
.dn_day__col li b{display:block;font-size:max(.93rem,calc(14px*var(--dn-fs,1)));font-weight:600;line-height:1.35;color:#1F1B16}
.dn_day__col li span{display:block;margin-top:.1rem;font-size:max(.78rem,calc(13px*var(--dn-fs,1)));line-height:1.55;font-weight:300;color:#6B6158}
.dn_day__note{margin:0;padding-top:.7rem;border-top:1px solid #E6DCC9;font-size:max(.72rem,calc(13px*var(--dn-fs,1)));font-weight:300;color:#6B6158}
.dn_ic svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:1200px){
  .dn_day__top{grid-template-columns:1fr;gap:1.4rem}
  /* 좁으면 호를 접고 다섯 마디를 세로 줄로 — 글자가 못 읽을 만큼 작아지지 않게 */
  .dn_day__arc{display:none}
  .dn_day__tl{padding:0 0 0 .2rem}
  .dn_day__nodes{display:flex;flex-direction:column;gap:.55rem;position:relative}
  .dn_day__nodes::before{content:"";position:absolute;left:1.3rem;top:.5rem;bottom:.5rem;width:1px;background:#D3C3A5}
  .dn_day__nodes li{position:static;transform:none;flex-direction:row;width:auto;text-align:left;gap:.8rem;align-items:center}
  .dn_day__nodes .dn_ic{width:2.6rem;height:2.6rem;position:relative;z-index:1}
  .dn_day__nodes b{display:inline;margin-right:.5rem;font-size:max(.8rem,calc(13px*var(--dn-fs,1)))}
  .dn_day__nodes span{display:inline;font-size:max(.9rem,calc(14px*var(--dn-fs,1)))}
  .dn_day__bg{font-size:4.2rem;right:-.4rem}
  .dn_day .dn_head h2{font-size:1.6rem}
}
@media(max-width:600px){.dn_day__ph{min-height:6rem}.dn_day__ph.dn_day__ph--route{min-height:9rem}}

/* ── 동행 서비스 — 인천 상급병원 연계 지도 (원장님 시안 2026-09-20) ──────────
   ⚠ 빛깔·글꼴 크기는 **시안에서 그대로** 가져왔다. 여기서 새로 정하지 않는다.
   ⚠ 한 화면(1440x900)에 다 들어가야 한다 — 그래서 지도 칸이 남는 높이를
      먹고(`flex:1 min-height:0`), 글은 고정 크기로 둔다. */
.dn_es{position:relative;overflow:hidden;background:#FDFBF6;color:#1F1B16}
/* 원본 동행 서비스 절에 깔려 있던 차 사진을 **흐릿하게** 되살린다(원장님 지시 2026-09-20).
   ⚠ 흐리기(blur)는 가장자리를 비우므로 -1.5rem 씩 넓혀 깔고 절에서 잘라 낸다.
   ⚠ 글 뒤에 깔리니 진하게 하지 않는다 — 글자색 #3D362E·#6B6158 이 바탕과
      4.5:1 을 지켜야 한다. 그래서 흰 장막(::after)을 한 겹 더 덮는다. */
.dn_es::before{content:"";position:absolute;inset:-1.5rem;z-index:0;pointer-events:none;
  background:url(../img/main/sec16_bg.jpg) no-repeat center center/cover;
  filter:blur(5px) saturate(.6)}
.dn_es::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(253,251,246,.62),rgba(253,251,246,.86))}
.dn_es .inner{position:relative;z-index:1;
  height:100%;display:flex;flex-direction:column;gap:1.2rem;
  padding-top:2rem;padding-bottom:1.6rem}
/* 절 머리(작은 제목·큰 제목·설명) — 동행 절과 하루 절이 **같은 것**을 쓴다. 한 벌만 둔다. */
.dn_head{display:flex;flex-direction:column;gap:.7rem}
.dn_head em{font-style:normal;font-size:max(.75rem,calc(13px*var(--dn-fs,1)));font-weight:600;letter-spacing:.21rem;color:var(--dn-accent,#7C5526)}
.dn_head h2{margin:0;font-size:2.2rem;font-weight:700;line-height:1.34;letter-spacing:-.025rem;color:#1F1B16}
.dn_head p{margin:0;max-width:59rem;font-size:max(.95rem,calc(14px*var(--dn-fs,1)));line-height:1.78;font-weight:300;color:#3D362E}
/* 동행 설명 속 「N분 안에」(N = ESCORT_WITHIN · 2026-10-02 부터 30) — 원장님 2026-09-26 D 「강조해줘」. 상자·배지 없이 굵기·강조색·글자 크기만(원장님 취향 · 이 절의 제목·번호와 같은 강조색) */
.dn_es .dn_head p .dn_es__em{font-weight:700;font-size:1.15em;color:var(--dn-accent,#7C5526);white-space:nowrap}   /* 한 덩어리 — 폰 390·393·412·414 에서 「20분 / 안에」로 갈렸다(검수 20260926_hp0926b s1) */
.dn_es__body{flex:1;min-height:0;display:flex;gap:2.75rem}
.dn_es__mapbox{width:37rem;flex-shrink:0;min-height:0;display:flex}
.dn_es__map{display:block;width:100%;height:100%}
/* 서울 연계 한 줄이 들어오며 오른쪽 기둥이 900px 을 넘쳤다(실측 2026-09-20) — 사이 간격과
   목록 줄 높이를 조금 줄여 자리를 낸다. 넘치면 아래 단서줄과 겹쳐 찍힌다. */
.dn_es__side{flex:1;min-width:0;display:flex;flex-direction:column;gap:1.15rem}
.dn_es__cap{font-size:max(.72rem,calc(13px*var(--dn-fs,1)));font-weight:600;letter-spacing:.16rem;color:var(--dn-accent,#7C5526);
  padding-bottom:.56rem;border-bottom:1px solid #D3C3A5}
.dn_es__two{display:flex;gap:.75rem;margin-top:.85rem}
.dn_es__card{flex:1 1 0;display:flex;flex-direction:column;gap:.7rem;
  padding:.95rem 1.2rem 1rem;background:#F6EFE2;border:1px solid #E5D8C0;border-radius:.75rem}
.dn_es__cardhd{display:flex;align-items:center;gap:.62rem}
.dn_es__cardhd svg{display:block;flex-shrink:0}
.dn_es__cardhd svg circle{fill:var(--dn-accent,#7C5526)}
.dn_es__cardhd svg path{stroke:#FDFBF6}
.dn_es__cardhd b{font-size:max(1.03rem,calc(14px*var(--dn-fs,1)));font-weight:600;color:#1F1B16}
.dn_es__cardhd span{font-size:max(.75rem,calc(13px*var(--dn-fs,1)));font-weight:500;color:var(--dn-accent,#7C5526)}
.dn_es__card p{margin:0;font-size:max(.78rem,calc(13px*var(--dn-fs,1)));line-height:1.68;font-weight:300;color:#6B6158}
.dn_es__list{margin:.25rem 0 0;padding:0;list-style:none}
.dn_es__list li{display:flex;align-items:center;gap:.8rem;height:3.05rem;border-bottom:1px solid #E6DCC9}
.dn_es__n{width:1.44rem;height:1.44rem;border-radius:50%;background:var(--dn-accent,#7C5526);color:#FDFBF6;
  font-size:max(.72rem,calc(13px*var(--dn-fs,1)));font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dn_es__nm{width:8.6rem;font-size:max(.9rem,calc(14px*var(--dn-fs,1)));font-weight:500;color:#1F1B16}
.dn_es__dir{width:3.6rem;display:flex;align-items:center;gap:.3rem;
  font-size:max(.72rem,calc(13px*var(--dn-fs,1)));font-weight:400;color:#6B6158}
.dn_es__dir svg{display:block;flex-shrink:0}
.dn_es__dir svg path{fill:var(--dn-accent,#7C5526)}
.dn_es__bar{flex:1;height:5px;border-radius:3px;background:#E6DCC9;min-width:2rem}
.dn_es__bar i{display:block;height:5px;border-radius:3px;background:var(--dn-accent,#7C5526)}
.dn_es__km{width:3.9rem;text-align:right;font-size:max(.94rem,calc(14px*var(--dn-fs,1)));font-weight:600;color:var(--dn-accent,#7C5526);
  font-variant-numeric:tabular-nums}
/* 차로 걸리는 시간 — 시안의 OSM 계산값을 원장님 실측(2026-10-02)대로 2배 한 값(HOSPITALS). 거리보다
   약하게 둔다: 이것만 보고 예약 시간을 잡으시면 안 되기 때문이다. */
.dn_es__tm{width:5.5rem;text-align:right;font-size:max(.72rem,calc(13px*var(--dn-fs,1)));font-weight:400;color:#6B6158;
  font-variant-numeric:tabular-nums}
/* 서울 연계 — 사실이고 **차로도 모신다**(원장님 확인 2026-09-20). 다만 **인천이 주**라
   지도·목록은 인천 다섯 곳, 서울은 한 줄로만 둔다. */
.dn_es__more{margin:0 0 .3rem;font-size:max(.76rem,calc(13px*var(--dn-fs,1)));line-height:1.6;font-weight:400;color:#3D362E}
.dn_es__more b{font-weight:600;color:var(--dn-accent,#7C5526);margin-right:.45rem}
.dn_es__foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-top:.8rem;border-top:1px solid #E6DCC9}
.dn_es__notes{display:flex;flex-direction:column;min-width:0}
.dn_es__note{margin:0;font-size:max(.72rem,calc(13px*var(--dn-fs,1)));font-weight:300;color:#6B6158}
/* 좁은 화면 — 지도를 위로, 목록을 아래로. 폰에서는 fullpage 가 꺼져 있어 길어져도 된다 */
@media(max-width:1200px){
  .dn_es .inner{height:auto}
  .dn_es__body{flex-direction:column;gap:1.6rem}
  /* 지도는 **제 비율(592x572)** 대로 편다 — 납작하게 눌리면 글자가 못 읽을 만큼 작아진다 */
  .dn_es__mapbox{width:100%;height:auto;aspect-ratio:592/572;max-height:none}
  .dn_head h2{font-size:1.6rem}
  .dn_day .inner{height:auto}
  .dn_day__grid{grid-template-columns:1fr}
  .dn_es__two{flex-direction:column}
  .dn_es__nm{width:7.2rem}
  .dn_es__dir{display:none}
  /* 좁으면 막대를 접고 거리·시간을 남긴다 — 막대는 거리를 한 번 더 말하는 것뿐이다 */
  .dn_es__bar{display:none}
  .dn_es__list li{gap:.55rem}
  .dn_es__tm{width:auto;flex:1}
  .dn_es__foot{flex-direction:column;align-items:flex-start}
}

/* ── 단추 빛깔 — 한 곳 (폰 메뉴 단추 mobnav.py · 절 끝 단추 · 우하단 빠른 단추가 다 이것을 쓴다) ── */
:root{--dn-kko:#FAE100;--dn-kko-ink:#3B1E1E;
  --dn-tel:#34C759;--dn-tel-ink:#0B2E14;         /* **떠 있는**(position:fixed) 전화 단추 — 우하단 빠른 단추 · 폰 아래 띠 · 폰 전체메뉴. 폰에서 흔한 밝은 녹색(iOS 전화 #34C759) + 짙은 녹색 글자 · 대비 6.68:1 실측(원장님 2026-09-22 「밝은 녹색 계열」 · 흰 글자는 2.22 라 못 쓴다) */
  --dn-amber:#E4A63C;--dn-amber-ink:#3B1E1E;     /* 호박색 — 쪽 안의 전화 단추(.dn_btn--tel · 절 끝 .dn_cta .v2nav-tel)와 점심 알약. 떠 있는 전화(.quick .q_tel · 폰 전체메뉴)만 --dn-tel 녹색(원장님 2026-09-22 밤 「연두색은 유치하다 · 예전 색으로」) · 대비 7.06:1 */
  --dn-accent:#7C5526;--dn-accent-ink:#5E3F1B;--dn-accent-soft:#C9B48F}   /* 암면역센터 — 갈색 (강조색은 이 변수 하나 · 2026-09-22) */
/* 척추관절센터 — 본원 로고색 계열(website/assets/css/tokens.css 의 --c-brand-ink). 두 센터를 색 하나로 가른다(원장님 승인 2026-09-22 개선안 ③) */
body.is-spine{--dn-accent:#157C82;--dn-accent-ink:#0F5C61;--dn-accent-soft:#9CCBCE}
/* 글자 크기 단추(.size-ctl · fontsize.py)의 글자색 — 센터 강조 잉크색. body 에 두는 까닭은 위 home.py 와 같다(:root 에 두면 body.is-spine 의 색이 안 따라온다) */
body{--dn-size-ink:var(--dn-accent-ink)}
/* 척추관절센터 머리띠 로고 — 본원 로고(가로로 긴 꼴)는 암 쪽 로고 자리(폭 기준)에 넣으면 너무 커진다 → 높이로 맞춘다(2026-09-22 실측 · 이동줄이 두 줄로 밀렸다) */
body.is-spine .header .logo{width:auto;height:2.25rem}
@media(max-width:1024px){body.is-spine .header .logo{height:1.9rem}}
/* 아직 안 지은 쪽(build_v2.PAGES ready=False) — 이동줄·폰 메뉴에 이름만, 링크 없이 */
.gnb .soon{font-size:1.125rem;font-weight:600;line-height:150%;opacity:.4;cursor:default}
.v2nav-list li .soon{display:block;padding:14px 8px;font-weight:600;color:#8B8072;opacity:.6}
/* 전화 빛깔 — 처음 #8C6430(어두운 갈색)은 「죽은 단추처럼 보인다」(원장님 2026-09-20 밤) → 밝은 호박색 → 떠 있는 것만 밝은 녹색(원장님 2026-09-22 · 위 --dn-tel).
   밝은 바탕이라 글자·아이콘은 짙은 색(--dn-tel-ink) — 흰 글자는 대비가 안 나온다. */

/* ── 우하단 빠른 단추 — 원본은 셋 다 검정이라 눈에 안 띄었다(원장님 지시 2026-09-20 「색상 입혀서 잘 보이게」) ──
   카카오는 카카오 노랑에 검정 말풍선(카카오가 정한 모양), 전화는 폰에서 흔한 녹색에 검정 수화기. 맨 위로는 진한 갈색으로 한 식구. */
.quick a{box-shadow:0 6px 18px rgba(30,22,12,.22)}
.quick .q_kko{background:var(--dn-kko)}
.quick .q_kko img{filter:invert(1)}   /* 흰 말풍선·검정 글자 → 검정 말풍선·흰 글자 */
.quick .q_tel{background:var(--dn-tel)}
.quick .q_tel img{filter:invert(1)}   /* 흰 수화기 → 검정(카카오와 같은 꼴 · 녹색 위 대비 9.46:1) */
.quick .top_btn{background-color:#3D332A}

/* ── 주차안내 팝업 — 원본은 단추만 있고 팝업이 없었다(눌러도 아무 일 없음 · 2026-09-20 원장님 지적) ──
   뼈대·빛깔은 원본 `.popup.beige_pop .park` 규칙(main.css)을 그대로 쓴다. 여기는 원본에 없던 줄 둘뿐. */
.beige_pop .park .item li p{font-weight:600}
.dn_park__addr{display:block;margin-top:.35rem;font-size:max(.85rem,calc(13px*var(--dn-fs,1)));line-height:1.5;color:#6B6158}
.dn_park__note{margin:1rem 0 0;font-size:max(.8rem,calc(13px*var(--dn-fs,1)));line-height:1.6;color:#6B6158}

/* ── 요즘의 식단 — 맞춤 식이 쪽 (원장님 지시 2026-09-20 「현재 식단이 노출되도록」) ──────
   카드를 누르면 그날 식단표(긴 그림)가 팝업으로 뜬다. 여는 손은 편지 팝업과 같은 v2-extra.js. */
.dn_food .inner{padding-top:4rem;padding-bottom:4rem}
.dn_food__list{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem;margin:2.2rem 0 0;padding:0;list-style:none}
.dn_food__card{display:block;text-decoration:none;color:inherit}
.dn_food__img{display:block;border-radius:.75rem;overflow:hidden;line-height:0;background:#EFE7D8}
.dn_food__img img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .35s ease}
.dn_food__card:hover .dn_food__img img,
.dn_food__card:focus-visible .dn_food__img img{transform:scale(1.05)}
.dn_food__day{display:block;margin-top:.7rem;font-size:max(.95rem,calc(14px*var(--dn-fs,1)));font-weight:700;color:#3D362E}
.dn_food__more{display:block;margin-top:.2rem;font-size:max(.8rem,calc(13px*var(--dn-fs,1)));color:var(--dn-accent,#7C5526)}
.dn_food__foot{margin-top:2rem;padding-top:1.1rem;border-top:1px solid #E6DCC9}   /* 안내 한 줄뿐(식단 게시판 링크는 원장님 2026-10-05 뺌 · 둘을 양끝에 벌리던 flex 도 같이 뺌) */
.dn_food__note{margin:0;font-size:max(.85rem,calc(13px*var(--dn-fs,1)));color:#6B6158}
/* 팝업 — 식단표는 세로로 길다. 창 높이에 맞춰 안에서 굴린다. */
dialog.dn_food__pop{max-width:min(560px,94vw)}
dialog.dn_food__pop article{padding:1.4rem 1.4rem 1.1rem;max-height:86vh;overflow-y:auto}
dialog.dn_food__pop img{width:100%;height:auto;display:block;border-radius:.6rem}
.dn_food__src{margin:.9rem 0 0;font-size:max(.8rem,calc(13px*var(--dn-fs,1)));color:#6B6158}
@media(max-width:1200px){
  .dn_food__list{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:600px){
  .dn_food__list{grid-template-columns:repeat(2,1fr);gap:.8rem}
  .dn_food__day{font-size:max(.88rem,calc(13px*var(--dn-fs,1)))}
}
/* 원본 팝업 본문은 22.8rem 에서 안으로 굴리는데, 주차 넷은 그보다 길어 넷째가 잘린다(PC 1400 실측) — 창 높이만큼 편다 */
.popup.s20 .pop_cont{max-height:min(72vh,40rem)}

/* ── 글자 바닥 — 이 사이트는 1rem 이 창 폭을 따라 12.8px(1366~1440 노트북)까지 준다.
   위의 rem 크기에는 max(…,13px) 를 걸었고, 원본의 옆 점 메뉴 이름표도 같이 올린다. */
#menu ul li .txt{font-size:max(.875rem,calc(13px*var(--dn-fs,1)))}   /* 원본 규칙과 같은 세기(#menu ul li .txt)여야 이긴다 */

/* ── 본원 홈으로 가는 길 (원장님 지적 2026-09-20 「껍데기 페이지로 돌아가는 루트가 없어」 · 같은 날 밤 「우상단 끝으로」 — 메뉴 오른쪽) ── */
.dn_home{display:inline-flex;align-items:center;gap:.35rem;margin-left:1.6rem;font-size:max(.8rem,calc(13px*var(--dn-fs,1)));font-weight:500;
  color:#6B6158;text-decoration:none;white-space:nowrap;padding:.35rem .7rem;border:1px solid #E6DCC9;border-radius:999px}
.dn_home:hover{color:var(--dn-accent,#7C5526);border-color:#C9B48F}
.dn_home svg{width:.9rem;height:.9rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:1024px){.dn_home{display:none}}

/* ── 「상담 신청」 캡슐 — 아래 동그라미 셋과 **같은 폭**의 세로 캡슐 (원장님 2026-09-20 밤 「가로로 튀어나와 보기 안 좋다 ·
   아래 단추들과 정렬 · '상담 신청'으로 간소화」). 갈색 바탕·연필 아이콘·두 줄 글자·숨쉬는 테두리. 폭은 원본 .quick a 의 값 그대로.
   움직임을 꺼 둔 분에게는 안 움직인다. */
.quick .q_ask{position:relative;width:4.0625rem;height:auto;min-height:4.0625rem;border-radius:999px;display:flex;flex-direction:column;align-items:center;text-decoration:none;
  justify-content:center;gap:0;padding:.8rem 0 .75rem;background:var(--dn-accent,#7C5526);color:#FFF;border:0;
  font-size:max(.72rem,calc(11px*var(--dn-fs,1)));font-weight:600;line-height:1.15;letter-spacing:-.01em;text-align:center;
  box-shadow:0 10px 24px rgba(124,85,38,.32);transition:transform .2s ease,box-shadow .2s ease}
.quick .q_ask:hover,.quick .q_ask:focus-visible{transform:translateY(-2px);box-shadow:0 14px 28px rgba(124,85,38,.38);color:#FFF}
.quick .q_ask svg{width:1.2rem;height:1.2rem;margin-bottom:.3rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.quick .q_ask::after{content:"";position:absolute;inset:-5px;border-radius:999px;border:2px solid rgba(124,85,38,.55);
  animation:dn-breathe 2.6s ease-out infinite;pointer-events:none}
@keyframes dn-breathe{0%{transform:scale(.96);opacity:.9}70%{transform:scale(1.1);opacity:0}100%{transform:scale(1.1);opacity:0}}
@media(prefers-reduced-motion:reduce){.quick .q_ask::after{animation:none;display:none}}
.quick .q_ask .q_w{display:block}
.quick .q_lbl{display:none}   /* 카톡·전화의 글자는 폰 띠에서만 */

/* ── 폰(1024px 이하) : 빠른 단추를 **화면 아래 가로 띠**로 (원장님 2026-09-20 밤 — 오른쪽 세로 묶음이 진료시간 글을 가렸다).
   상담 신청 · 카카오톡 · 전화 걸기 셋을 같은 폭으로. 「맨 위로」는 뺀다(띠에 자리가 없고 폰은 손가락으로 올리면 된다).
   ⚠ body .quick 으로 적는 까닭 — consult.py 의 .quick{flex-direction:column} 이 이 파일 뒤에 붙어 같은 세기면 진다.
   ⚠ !important 둘 — 원본 sub.js 가 스크롤마다 .quick 에 position:absolute / bottom:Npx 를 인라인으로 박는다(꼬리말 위에서 멈추게).
     띠는 늘 바닥이어야 하므로 그것을 이긴다. */
@media(max-width:1024px){
  body .quick{position:fixed !important;left:0;right:0;bottom:0 !important;top:auto;display:flex;flex-direction:row;align-items:stretch;
    padding:.45rem .6rem calc(.45rem + env(safe-area-inset-bottom));background:rgba(253,251,246,.97);
    border-top:1px solid rgba(61,54,46,.14);box-shadow:0 -6px 18px rgba(30,22,12,.08);z-index:100}
  body .quick a{width:auto;height:2.9rem;flex:1 1 0;border-radius:.8rem;box-shadow:none;margin:0}
  body .quick a + a{margin:0 0 0 .5rem}
  body .quick .q_item{display:flex;align-items:center;justify-content:center;gap:.4rem;font-size:max(.9rem,calc(14px*var(--dn-fs,1)));font-weight:700;text-decoration:none}
  body .quick .q_ask{min-height:0;padding:0;flex-direction:row;gap:.3rem;font-size:max(.9rem,calc(14px*var(--dn-fs,1)));line-height:1}
  body .quick .q_ask svg{width:1rem;height:1rem;margin-bottom:0}
  body .quick .q_ask::after{display:none}
  body .quick .q_kko{color:var(--dn-kko-ink)}
  body .quick .q_kko img{width:1.25rem}
  body .quick .q_tel{color:var(--dn-tel-ink)}
  body .quick .q_tel img{width:1.1rem}
  body .quick .q_lbl{display:inline}
  body .quick .top_btn{display:none}
  body{padding-bottom:calc(4rem + env(safe-area-inset-bottom))}   /* 띠가 꼬리말 끝을 가리지 않게(띠 62px · 잰 값) */
}

/* ── 자주 묻는 질문 — 보이는 절 (원장님 3번). 코드 속 FAQ 와 같은 목록(enhance.FAQ) ── */
.dn_faq{background:#FDFBF6;color:#1F1B16}
.dn_faq .inner{padding-top:4.5rem;padding-bottom:4.5rem}
.dn_faq__grid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem 2.4rem;margin-top:2.2rem;align-items:start}
.dn_faq__q{border-top:1px solid #E6DCC9;padding:.2rem 0}
.dn_faq__q summary{list-style:none;cursor:pointer;display:flex;gap:.9rem;align-items:flex-start;padding:.95rem 0;
  font-size:max(1rem,calc(15px*var(--dn-fs,1)));font-weight:600;line-height:1.5;color:#1F1B16}
.dn_faq__q summary::-webkit-details-marker{display:none}
.dn_faq__q summary::before{content:"Q";flex:0 0 1.7rem;height:1.7rem;border-radius:50%;background:#F3EADB;color:var(--dn-accent,#7C5526);
  font-size:max(.78rem,calc(13px*var(--dn-fs,1)));font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:.05rem}
.dn_faq__q summary::after{content:"+";margin-left:auto;font-size:1.3rem;font-weight:300;color:#8B8072;line-height:1;transition:transform .25s ease}
.dn_faq__q[open] summary::after{transform:rotate(45deg)}
.dn_faq__q p{margin:0 0 1rem 2.6rem;font-size:max(.92rem,calc(14px*var(--dn-fs,1)));line-height:1.8;font-weight:300;color:#3D362E}
@media(max-width:1024px){.dn_faq__grid{grid-template-columns:1fr;gap:.3rem}}

/* ── 시설 한눈에 — 시설안내 쪽에 글로 (원장님 7번 · 글이 666자뿐이었다) ── */
.dn_fac{background:#FDFBF6;color:#1F1B16}
.dn_fac .inner{height:100%;display:flex;flex-direction:column;justify-content:center;gap:2rem}
.dn_fac__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:0;padding:0;list-style:none}
.dn_fac__grid li{display:flex;gap:.9rem;align-items:flex-start;padding:1.2rem 1.25rem;background:#FFF;border:1px solid #E5D8C0;border-radius:.9rem}
.dn_fac__grid .dn_ic{flex:0 0 auto;width:2.4rem;height:2.4rem;border-radius:.7rem;background:#F6EFE2;color:var(--dn-accent,#7C5526);display:flex;align-items:center;justify-content:center}
.dn_fac__grid .dn_ic svg{width:1.25rem;height:1.25rem}
.dn_fac__grid b{display:block;font-size:max(1rem,calc(15px*var(--dn-fs,1)));font-weight:700;line-height:1.35}
.dn_fac__grid span{display:block;margin-top:.3rem;font-size:max(.85rem,calc(13px*var(--dn-fs,1)));line-height:1.65;font-weight:300;color:#5F564A}
@media(max-width:1200px){.dn_fac .inner{height:auto;padding-top:3rem;padding-bottom:3rem}.dn_fac__grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.dn_fac__grid{grid-template-columns:1fr}}

/* ── 맞춤치료 중요성(면역 치료 쪽 sec09) — 대화 꼴 (원장님 2026-10-03 · design 시안 sec09_dialog_1003) ──
   묻는 말 = 오른쪽 옅은 말풍선(읽는 분 자리) · 답 = 왼쪽 강조색 말풍선(의료진) · 맺음 = 대화 밖 가운데 큰 글(위 짧은 선)
   · 차례로 나타남(머리 .5s → 묻는 말 .7s → 답 1s → 맺음 1.3s · 폰은 원래대로 효과 없이 다 보임).
   ⚠ sec09 덮어쓰기는 전부 .sec09.is-talk(새 마크업에만 붙는 표시 · extras.SEC09_MARK)로 묶는다 — 올리는 틈에 새 css + 옛 html 이 만나도 옛 모양 그대로(검수 J1).
   말하는 사람 표시는 글자뿐(「묻는 분」·「의료진」) — 얼굴·이름·아이콘 없음(의료법 56조② 경험담 · 인물을 만들지 않음).
   빛깔은 이 파일에 이미 있는 것만(새 색 0) : 강조 var(--dn-accent) · 짧은 선 var(--dn-accent-soft) · 묻는 말 바탕 #F3EADB(자주 묻는 질문의 「Q」 동그라미와 같은 값)
     · 짙은 글 #1F1B16 · 흐린 글 #6B6158 · 흰 #FFF.
   ⚠ .cont 를 다시 붙이지 않는다 — 붙이면 page.js(initSec09Animation)가 말풍선 글을 .line 으로 감싸 투명 글자로 만든다. .cont 가 없으면 그 효과는 저절로 안 걸린다. */
/* 절 틀 — 원본은 .inner 200vh + 가운데 붙박이(.wrap sticky) + 스크롤로 글이 차오르는 효과. 대화 꼴은 한 화면(100vh) · 내용은 세로 가운데
   · 위는 머리띠 높이만큼 비운다(pt_0 이라 절에는 위 여백이 없다) · 아래를 조금 더 비워 바닥 글씨 그림(DANAEUM MEDICAL)과 덜 겹치게 */
#main .sec09.is-talk .inner{height:auto;min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding-top:5.625rem;padding-bottom:4rem}
#main .sec09.is-talk .wrap{position:static;transform:none;width:100%}
#main .sec09.is-talk .main_tit{margin-bottom:3.5rem}
/* 바닥 글씨 그림 — 원본 bottom 4.25rem → 0(폰 원본과 같은 자리) : 1280×720 · 1366×768 · 1600×900 에서 맺음 글과 겹치던 것이 풀린다 */
#main .sec09.is-talk::after{bottom:0}
/* 글자를 키운 단계(html[data-size])에 창이 낮으면(≤820) 맺음 글이 그림 위에 얹힌다 — 그때는 그림을 숨기고(꾸밈보다 읽기) 사이를 폰 값으로 좁힌다 */
@media (min-width:1025px) and (max-height:820px){
  html[data-size] #main .sec09.is-talk::after{display:none}
  html[data-size] #main .sec09.is-talk .inner{padding-bottom:2rem}
  html[data-size] #main .sec09.is-talk .main_tit{margin-bottom:2.25rem}
  html[data-size] .dn_talk{gap:1.1rem}
  html[data-size] .dn_talk__end{margin-top:2.25rem}
  html[data-size] .dn_talk__end::before{margin-bottom:1.5rem}
}
.dn_talk{max-width:46rem;margin:0 auto;display:flex;flex-direction:column;gap:1.5rem;text-align:left}
.dn_talk__msg{display:flex;flex-direction:column;gap:.55rem;max-width:82%}
.dn_talk__msg--ask{align-self:flex-end;align-items:flex-end}
.dn_talk__msg--answer{align-self:flex-start;align-items:flex-start}
.dn_talk__who{font-size:max(.875rem,calc(13px*var(--dn-fs,1)));font-weight:600;line-height:1.3;letter-spacing:.02em;color:#6B6158;padding:0 .35rem}
.dn_talk__msg--answer .dn_talk__who{color:var(--dn-accent,#7C5526)}
/* 말풍선 — 꼬리는 따로 그리지 않고 말하는 사람 쪽 위 모서리만 작게(.375rem) */
.dn_talk__bubble{margin:0;padding:1.05rem 1.6rem 1.15rem;font-size:1.75rem;font-weight:600;line-height:1.4;letter-spacing:-.02em;word-break:keep-all}
.dn_talk__msg--ask .dn_talk__bubble{background:#F3EADB;color:#1F1B16;border-radius:1.75rem .375rem 1.75rem 1.75rem}
.dn_talk__msg--answer .dn_talk__bubble{background:var(--dn-accent,#7C5526);color:#FFF;border-radius:.375rem 1.75rem 1.75rem 1.75rem}
/* 맺음 — 대화 밖의 정리. 원래 크기(fs_36 = 2.25rem · 폰 1.25rem) 그대로 · 위에 짧은 선 하나 */
.dn_talk__end{margin:3.25rem auto 0;font-size:2.25rem;font-weight:600;line-height:1.4;letter-spacing:-.03em;color:#1F1B16}
.dn_talk__end::before{content:"";display:block;width:2.5rem;height:1px;margin:0 auto 2.25rem;background:var(--dn-accent-soft,#C9B48F)}
/* 차례로 나타남 — 머리는 원본 그대로(.5s 뒤 1s) · 묻는 말 .7s → 답 1s → 맺음 1.3s 에 .6s 씩 : 맺음까지 다 보이는 데 2초 안쪽
   (검수 20261003_sec09_dialog J5 — 처음 판은 1 · 2 · 3s 뒤 1s 라 3.75초였다 · 사이트 다른 곳은 최대 1.5초). 시각은 여기 한 곳(마크업에 ani-delay 없음) */
#main .sec09.is-talk .dn_talk__msg,#main .sec09.is-talk .dn_talk__end{transition-duration:.6s}
#main .sec09.is-talk .dn_talk__msg--ask{transition-delay:.7s}
#main .sec09.is-talk .dn_talk__msg--answer{transition-delay:1s}
#main .sec09.is-talk .dn_talk__end{transition-delay:1.3s}
/* 점 메뉴(왼쪽 · 공용 부품 · 켜진 이름표 오른끝 ≈ 8.35rem)와 답 말풍선의 「의료진」이 같은 줄에 붙어 한 낱말처럼 읽히던 것 —
   창이 좁고(1025~1280) 글자를 키우면 대화 폭(46rem)이 창을 거의 채워서다(검수 J2 · 1025 더 크게 틈 17px). 대화 폭을 창에서 양쪽 13.5rem 씩 뺀 만큼으로 줄여 비킨다.
   넓은 창 · 보통 크기에서는 46rem 이 더 작아 그대로다 */
@media (min-width:1025px){#main .sec09.is-talk .dn_talk{max-width:min(46rem,100vw - 27rem)}}
/* 스크립트가 안 돌면 .section.active 가 안 붙어 원본 [ani="up"]{opacity:0} 에 갇힌다 — 이 절은 보이게.
   「스크립트가 돎」 표시는 머리 부트스트랩이 켜는 html[data-size-js](v2-size.css 가 쓰는 것과 같은 표시) */
html:not([data-size-js]) #main .sec09.is-talk [ani]{opacity:1;transform:none}
@media (max-width:1024px){
  /* 원본 폰 규칙 #main .sec09{height:40.625rem} · .inner{height:100%} 를 풀어 내용만큼(크게·더 크게에서 넘치지 않게) */
  #main .sec09.is-talk{height:auto}
  #main .sec09.is-talk .inner{min-height:0;padding-top:4.5rem;padding-bottom:5rem}
  #main .sec09.is-talk .main_tit{margin-bottom:2.25rem}
  .dn_talk{gap:1.1rem}
  .dn_talk__msg{max-width:88%;gap:.4rem}
  .dn_talk__bubble{font-size:1.125rem;padding:.8rem 1.1rem .85rem}
  .dn_talk__msg--ask .dn_talk__bubble{border-radius:1.25rem .3rem 1.25rem 1.25rem}
  .dn_talk__msg--answer .dn_talk__bubble{border-radius:.3rem 1.25rem 1.25rem 1.25rem}
  .dn_talk__end{font-size:1.25rem;margin-top:2.25rem}
  .dn_talk__end::before{margin-bottom:1.5rem}
}

/* ── 상담 신청 폼 (원장님 승인 2026-09-20 · 기획안 아티팩트) — 마크업은 consult.py 한 곳 ──────
   빛깔은 절 끝 단추와 같은 갈색(#7C5526)·카카오 변수. 필수 표시만 주황. */
.dn_consult{display:flex;flex-direction:column;gap:.9rem;text-align:left}
.dn_consult[hidden],.dn_consult__done[hidden],.dn_consult__out[hidden]{display:none}
.dn_consult__grid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.dn_f{display:block}
.dn_f__l{display:block;font-size:max(.85rem,calc(13px*var(--dn-fs,1)));font-weight:600;margin-bottom:.35rem;color:#3D362E;line-height:1.4}
.dn_f__l em{font-style:normal;font-size:max(.7rem,calc(13px*var(--dn-fs,1)));color:#A8601C;margin-left:.3rem;font-weight:600}
.dn_f__l i{font-style:normal;font-weight:400;color:#6B6158;font-size:max(.78rem,calc(13px*var(--dn-fs,1)));margin-left:.3rem}
.dn_consult input[type=text],.dn_consult input[type=tel],.dn_consult textarea{width:100%;box-sizing:border-box;
  padding:.7rem .8rem;font:inherit;font-size:max(.95rem,calc(14px*var(--dn-fs,1)));line-height:1.4;border:1px solid #E6DCC9;border-radius:.55rem;
  background:#FFF;color:#2E281F}
.dn_consult input:focus-visible,.dn_consult textarea:focus-visible,.dn_chip:focus-visible,
.dn_consult__send:focus-visible{outline:2px solid var(--dn-accent,#7C5526);outline-offset:2px}
.dn_consult textarea{resize:vertical;min-height:4.4rem;line-height:1.55}
.dn_chips{display:flex;flex-wrap:wrap;gap:.4rem}
.dn_chip{font:inherit;font-size:max(.85rem,calc(13px*var(--dn-fs,1)));line-height:1.3;padding:.5rem .85rem;border-radius:999px;border:1px solid #E6DCC9;
  background:#FFF;color:#5F564A;cursor:pointer;min-height:2.4rem}
.dn_chip[aria-pressed="true"]{background:var(--dn-accent,#7C5526);border-color:var(--dn-accent,#7C5526);color:#FFF;font-weight:600}
/* 동의 칸 셋(2026-09-25 · agree_html) — 칸마다 [체크 상자] + 굵은 제목 한 줄. 알릴 넷(목적·항목·보유 기간·거부할 권리)은 **제목을 누르면 펼쳐진다**(<details> · 원장님 2026-09-25 저녁).
   칸 사이는 12px · 건강 정보 칸은 「지금 상황」을 골랐을 때만([hidden] 이 풀린다) */
.dn_agrees{display:flex;flex-direction:column;gap:max(.75rem,12px)}
.dn_agree{display:flex;gap:.35rem;align-items:flex-start;font-size:max(.8rem,calc(13px*var(--dn-fs,1)));line-height:1.55;color:#5F564A}
.dn_agree[hidden]{display:none}
.dn_agree__box{flex:0 0 auto;display:grid;place-items:center;width:28px;height:28px;margin:-3px 0 0 -5px;cursor:pointer}   /* 누르는 자리 28px — 상자(16px)보다 넓게 */
.dn_agree__box input{margin:0;width:16px;height:16px;accent-color:var(--dn-accent,#7C5526);cursor:pointer}
.dn_agree__more{flex:1;min-width:0}
.dn_agree__more>summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;border-radius:4px}
.dn_agree__more>summary::-webkit-details-marker{display:none}
.dn_agree__more>summary:focus-visible{outline:2px solid var(--dn-accent,#7C5526);outline-offset:2px}
.dn_agree__more>summary b{font-weight:700;color:#3D362E}
.dn_agree__tog{flex:0 0 auto;white-space:nowrap;font-size:max(.75rem,calc(12px*var(--dn-fs,1)));color:var(--dn-accent,#7C5526);font-weight:600}
.dn_agree__tog::after{content:"";display:inline-block;width:.4em;height:.4em;margin:0 0 .2em .35em;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .15s}
.dn_agree__more[open] .dn_agree__tog::after{transform:rotate(-135deg);margin-bottom:-.05em}
/* 세부 글 — <p> 가 아니라 <div> 이고 세기도 둘(0,2,0) : <p> 였을 때 팝업에서는 편지 팝업 규칙 dialog.dn_letter p{font-size:calc(16px*var(--dn-fs,1));margin:0 0 16px}(extras)가,
   절 안 폼에서는 홈의 .dn_hm p{margin:0}(home)이 이겨 세부가 16px(제목 13px 보다 큼) · 위 틈 0 이 됐다(검수 20260925_hp7 F1·F1b). 글자는 칸(.dn_agree)의 13px 그대로 */
.dn_agree .dn_agree__d{margin:.35rem 0 0;font-size:inherit;line-height:inherit}
.dn_agree .dn_agree__d a{color:var(--dn-accent,#7C5526);text-decoration:underline}   /* 세기 0,2,1 — .dn_agree a(0,1,1)였을 때 홈·속 쪽 절 폼에서 v2-home.css 의 .dn_hm a{color:inherit;text-decoration:none}(같은 세기 · 뒤)에 져 방침 링크가 글과 같은 색·밑줄 없음이었다(검수 hp7b R1) */
.dn_hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.dn_consult__out{margin:0;font-size:max(.85rem,calc(13px*var(--dn-fs,1)));line-height:1.5;padding:.6rem .8rem;border-radius:.5rem;background:#F3EADB;color:#3D362E}
.dn_consult__out[data-state="bad"]{background:#FBE9E3;color:#8A3B1E}
.dn_consult__send{font:inherit;font-size:max(1rem,calc(14px*var(--dn-fs,1)));font-weight:700;padding:.9rem;border:0;border-radius:999px;
  background:var(--dn-accent,#7C5526);color:#FFF;cursor:pointer;min-height:48px}
.dn_consult__send:disabled{opacity:.6;cursor:default}
.dn_consult__or{margin:-.3rem 0;text-align:center;font-size:max(.78rem,calc(13px*var(--dn-fs,1)));color:#6B6158}
.dn_consult .v2nav-kko{display:block;text-align:center;padding:.85rem;border-radius:999px;font-weight:700;
  text-decoration:none;min-height:48px;box-sizing:border-box;font-size:max(.95rem,calc(14px*var(--dn-fs,1)));
  background:var(--dn-kko,#FAE100);color:var(--dn-kko-ink,#3B1E1E)}
.dn_consult__note{margin:0;text-align:center;font-size:max(.75rem,calc(13px*var(--dn-fs,1)));color:#6B6158}
.dn_consult__done{text-align:center;padding:1.5rem .5rem}
.dn_consult__done b{display:block;font-size:max(1.15rem,calc(14px*var(--dn-fs,1)));margin-bottom:.6rem;color:#1F1B16}
.dn_consult__done p{margin:0 0 1rem;font-size:max(.9rem,calc(14px*var(--dn-fs,1)));line-height:1.75;color:#5F564A}
.dn_consult__done a{color:var(--dn-accent,#7C5526);font-weight:700}
/* 팝업 — 폼이 길다. 창 높이에 맞춰 안에서 굴린다 */
dialog.dn_consult__pop{max-width:min(520px,94vw)}
dialog.dn_consult__pop article{position:relative;padding:1.6rem 1.5rem 1.4rem;max-height:88vh;overflow-y:auto;box-sizing:border-box}
dialog.dn_consult__pop h3{margin:0 2.2rem .3rem 0;font-size:1.25rem;line-height:1.35;color:#1F1B16}
dialog.dn_consult__pop .dn_consult__lead{margin:0 0 1.1rem;font-size:max(.88rem,calc(13px*var(--dn-fs,1)));color:#5F564A;line-height:1.6}
.dn_consult__x{position:absolute;right:.7rem;top:.6rem;width:2.4rem;height:2.4rem;border:0;background:transparent;
  font-size:1.7rem;line-height:1;cursor:pointer;color:#8B8072}
/* 소개 쪽의 절 — 왼쪽 글, 오른쪽 폼 상자 */
.dn_consult_sec{background:#FDFBF6;color:#1F1B16}
.dn_consult_sec .inner{height:100%;display:flex;align-items:center;gap:3rem}
.dn_consult_sec .dn_head{flex:0 0 36%}
.dn_consult__box{flex:1;min-width:0;background:#FFF;border:1px solid #E6DCC9;border-radius:1rem;padding:1.6rem;
  box-shadow:0 12px 32px rgba(46,40,31,.06)}
/* 단추들 — 절 끝 줄·폰 메뉴의 세 번째, 빠른 단추의 알약 */
.v2nav-ask{background:#FFF;color:var(--dn-accent,#7C5526);border:2px solid var(--dn-accent,#7C5526);padding-top:13px;padding-bottom:13px}
.quick{display:flex;flex-direction:column;align-items:flex-end}
/* 빠른 단추의 「상담 신청」 캡슐(.q_ask)은 extras.py 의 CSS 한 곳 — 여기 두면 뒤에 붙는 이 파일이 폭을 덮는다(2026-09-20 실측 19px) */
@media(max-width:1200px){
  .dn_consult_sec .inner{flex-direction:column;align-items:stretch;gap:1.5rem;height:auto;padding-top:3rem;padding-bottom:3rem}
  .dn_consult_sec .dn_head{flex:none}
}
@media(max-width:600px){
  .dn_consult__grid{grid-template-columns:1fr}
  .dn_consult__box{padding:1.1rem}
}

/* ── 치료 로드맵 — 면역 치료 쪽(/cancer/program/) 「치료 프로그램」(sec07) 바로 뒤 절 #roadmap (원장님 2026-10-04 「이대로 가자. 지어.」 · design 6차 시안 B6 순환 차트 · extras.roadmap_section)
   · 단추 없음. 절이 켜지면(.is-drawn — 아래 JS 가 단다) 고리의 「첫날」 점에서 오른쪽으로 화살표가 그어지고, 그 끝에 상자가 나타난다. 다른 절로 갔다 오면 다시 그어진다.
   · 감추는 규칙은 .is-js(스크립트가 돈다) + prefers-reduced-motion:no-preference 안에만 → 스크립트가 없거나 움직임 줄이기면 처음부터 다 보인다.
     상자는 opacity 로만 감춘다(visibility · display · aria-hidden 을 쓰지 않는다) → 화면 읽기 프로그램은 처음부터 읽는다.
   · 상자는 늘 칸 안에 있다(position:absolute 아님) → 다른 칸을 덮을 수 없다. 자리가 모자란 창은 꼴을 바꾼다 :
       W(1201 이상) = 머리 | 고리 | 상자   ·   Q(1025~1200 전부 + 1201 이상에서 높이 800 이하 · 더 크게) = 고리 | 머리 위 · 상자 아래
       폰(1024 이하) = 머리 → 상자 → 고리 → 두 칸 · 화살표는 첫날 점에서 오른쪽으로 꺾여 위로(첫날 글자 · 고리를 안 지나감)
   ⚠ 색은 이미 있는 값 : #FDFBF6 · #1F1B16 · #3D362E · #6B6158 · #F6EFE2 · #FFF · #E5D8C0 · #E6DCC9 · #EFE7D8 · var(--dn-accent).
   ⚠ 새 값 하나 — 상자 그림자 rgba(46,40,31,.10)(하루 절 카드 그림자 색의 10% · 있던 투명도는 .06 · .08) : 시안 값 그대로.
   ⚠ 글자는 사이트 사다리 꼴 max(rem 바닥, calc(px*var(--dn-fs,1))) — 글자 크기 단추(크게 · 더 크게)를 따른다.
   ⚠ 왼쪽 점 메뉴(#menu 이름표) · 오른쪽 떠 있는 단추(.quick)를 비운다 → --rm-l · --rm-r(rem 이라 글자 크기 단계를 따라 넓어진다). */
.dn_rv6{position:relative;background:#FDFBF6;color:#1F1B16;
  --rm-l:max(132px,calc(8.4rem + 18px));--rm-r:max(84px,calc(5.65rem + 12px));
  --rm-k:clamp(0px,calc((100vh - 720px) * (5 - 4 * var(--dn-fs,1))),400px);--rm-f:calc(var(--rm-k,0px) * .01);
  --d:clamp(13rem,calc(100vh - 36.5rem - 9rem * (var(--dn-fs,1) - 1) * 4),25rem);
  --lw:9.5rem;--big:2.7rem;--cg:1rem;--rg:.9rem;
  --mt:calc(var(--big) * .78 + .55rem);                       /* 고리 위 여백 = 「첫날」 글자 높이 + 틈 */
  --ay:calc(var(--d) * .09);                                  /* 화살표 가운데 높이 — 첫날 점 가운데(0.10)보다 1 단위 위 : 고리 선 위를 스치듯 지나 겹치지 않는다 */
  --ax:calc(var(--d) * .5286);                                /* 화살표 시작 — 그 높이에서 첫날 점의 바깥 둘레(반지름 2.6 + 선 0.425 · √(3.025² − 1²) = 2.86) */
  --h3:max(1.05rem,calc(15.5px * var(--dn-fs,1) + var(--rm-f,0px)));
  --cpt:1rem;                                                 /* 상자 윗 안쪽 여백 */
  --hy:calc(var(--cpt) + 1px + var(--h3) * .675);            /* 상자 위끝 → 상자 제목 줄 가운데 = 화살표가 닿는 높이 */
  --tip:.6rem}
@media(min-width:1641px){.dn_rv6{--rm-l:max(176px,calc(9.75rem + 18px))}}   /* 1641 이상은 #menu left 2.5rem */
.dn_rv6 .inner{height:100%;display:flex;flex-direction:column;gap:calc(1rem + var(--rm-k,0px) * .06);
  padding-top:.8rem;padding-bottom:1rem;
  padding-left:max(3rem,calc(var(--rm-l) - max(0px,(100vw - 105rem) / 2)));
  padding-right:max(3rem,calc(var(--rm-r) - max(0px,(100vw - 105rem) / 2)))}
/* W — 머리 | 고리 | 상자. 상자 칸을 넓게(.8 : 1.2) 잡아 상자가 고리 줄 높이 안에 든다. 세로 가운데는 auto 여백(center 면 넘칠 때 위가 머리띠 밑으로 잘린다) */
.dn_rv6__top{margin-top:auto;display:grid;grid-template-columns:minmax(0,.8fr) auto minmax(0,1.2fr);align-items:start;column-gap:var(--cg)}
.dn_rv6 .dn_head{grid-column:1;grid-row:1;gap:.5rem;padding-top:.4rem}
.dn_rv6 .dn_head h2{font-size:2.3rem}
/* 고리 */
.dn_rv6__chart{grid-column:2;grid-row:1;position:relative;width:var(--d);min-height:var(--d);
  margin:var(--mt) var(--lw) max(.4rem,calc(var(--big) + 2.9rem - var(--d) * .115))}
.dn_rv6__circ{position:absolute;left:0;top:0;width:var(--d);height:var(--d);overflow:visible}
.dn_rv6__face{fill:#F6EFE2}
.dn_rv6__arc{fill:none;stroke:var(--dn-accent,#7C5526);stroke-width:.85;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0}
.dn_rv6__ret{fill:none;stroke:var(--dn-accent,#7C5526);stroke-width:.7;stroke-dasharray:1.8 1.8}   /* 4주 → 첫날 : 고리 선으로만 잇는다(글자 없음) */
/* 흐름 — 고리 선 위를 옅은 빛 점이 시계 방향으로 끊임없이 돈다(움직임 줄이기면 멈춤) */
.dn_rv6__flow{fill:none;stroke:#FDFBF6;stroke-width:.55;stroke-linecap:round;stroke-dasharray:.95 4.05;opacity:.95}
@media(prefers-reduced-motion:no-preference){.dn_rv6__flow{animation:rv6flow 7s linear infinite}}
@keyframes rv6flow{to{stroke-dashoffset:-100}}
.dn_rv6__chev path{fill:none;stroke:var(--dn-accent,#7C5526);stroke-width:.85;stroke-linecap:round;stroke-linejoin:round}
.dn_rv6__dot{fill:#FDFBF6;stroke:var(--dn-accent,#7C5526);stroke-width:.85}
.dn_rv6__dot.is-key{fill:var(--dn-accent,#7C5526)}
/* 가운데 — 「4주마다 재평가」 하나 */
.dn_rv6__mid{position:absolute;left:50%;top:calc(var(--d) / 2);transform:translate(-50%,-50%);width:58%;margin:0;text-align:center;
  font-size:max(1.4rem,calc(19px * var(--dn-fs,1) + var(--rm-f,0px) * 2));line-height:1.3;font-weight:700;letter-spacing:-.01em;color:var(--dn-accent,#7C5526)}
/* 이름표 — 고리 바깥쪽으로만 자란다. 자리(--x · --y)는 마크업의 style 속성(extras.ROADMAP.nodes) */
.dn_rv6__nodes{list-style:none;margin:0;padding:0}
.dn_rv6__lab{position:absolute;left:calc(var(--d) * var(--x));top:calc(var(--d) * var(--y));display:flex;flex-direction:column;gap:.15rem;width:max-content;max-width:calc(var(--lw) + var(--d) * .04)}
.dn_rv6__lab.is-br,.dn_rv6__lab.is-bl{max-width:calc(var(--lw) + var(--d) * .2)}   /* 아래 두 마디는 고리 바깥 점(.79 · .21)에서 자라므로 그만큼 더 쓸 수 있다 */
.dn_rv6__lab.is-top{transform:translate(-50%,-100%);align-items:center;text-align:center}
.dn_rv6__lab.is-r{transform:translate(0,-50%);align-items:flex-start;text-align:left}
.dn_rv6__lab.is-l{transform:translate(-100%,-50%);align-items:flex-end;text-align:right}
.dn_rv6__lab.is-br{transform:none;align-items:flex-start;text-align:left}
.dn_rv6__lab.is-bl{transform:translate(-100%,0);align-items:flex-end;text-align:right}
.dn_rv6__big{font-size:var(--big);line-height:1;font-weight:700;letter-spacing:-.03em;color:#1F1B16;white-space:nowrap}
.dn_rv6__lab.is-top .dn_rv6__big{font-size:calc(var(--big) * .78)}
.dn_rv6__big small{font-size:max(1.05rem,calc(15px * var(--dn-fs,1)));font-weight:700;margin-left:.06em;letter-spacing:0;color:#6B6158}
.dn_rv6__nm{font-size:max(1.05rem,calc(15.5px * var(--dn-fs,1) + var(--rm-f,0px)));font-weight:600;line-height:1.35;color:#3D362E}
/* 화살표 — 고리 안에 둔다(첫날 점에서 시작). 길이 = 점 → 고리 칸 오른끝 → 칸 사이 → 상자 왼끝(촉 끝이 상자 테두리에 닿게 촉 몫만큼 덜 그음) */
.dn_rv6__line{position:absolute;z-index:2;left:var(--ax);top:calc(var(--ay) - 1px);height:2px;
  width:calc(var(--d) - var(--ax) + var(--lw) + var(--cg) - var(--tip) * .2071);background:var(--dn-accent,#7C5526)}
.dn_rv6__tip{position:absolute;right:0;top:50%;width:var(--tip);height:var(--tip);box-sizing:border-box;
  border-top:2px solid var(--dn-accent,#7C5526);border-right:2px solid var(--dn-accent,#7C5526);transform:translateY(-50%) rotate(45deg)}
.dn_rv6__up{display:none}
/* 상자 — 오른쪽 칸 안(덮지 않음). 위 여백 = 화살표 높이 − 상자 제목 줄 가운데 → 화살표가 제목 줄 높이로 들어간다 */
.dn_rv6__box{grid-column:3;grid-row:1;align-self:start;justify-self:start;width:100%;max-width:36rem;
  margin-top:calc(var(--mt) + var(--ay) - var(--hy));container:rv6box / inline-size}
.dn_rv6__card{background:#FFF;border:1px solid #E5D8C0;border-radius:1rem;padding:var(--cpt) 1.2rem 1.1rem;box-shadow:0 14px 34px rgba(46,40,31,.10)}
.dn_rv6__card h3{margin:0 0 .45rem;font-size:var(--h3);line-height:1.35;font-weight:700;color:var(--dn-accent,#7C5526)}
.dn_rv6__card h4{margin:0 0 .2rem;font-size:max(.95rem,calc(14.5px * var(--dn-fs,1)));font-weight:700;color:#1F1B16}
.dn_rv6__card p{margin:.35rem 0 0;font-size:max(.95rem,calc(14px * var(--dn-fs,1)));line-height:1.6;color:#3D362E}
.dn_rv6__g+.dn_rv6__g{margin-top:.6rem}
.dn_rv6__dots{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.1rem .9rem}
.dn_rv6__dots+.dn_rv6__dots{margin-top:.1rem}
.dn_rv6__dots li{position:relative;padding-left:.8rem;font-size:max(.95rem,calc(14px * var(--dn-fs,1)));font-weight:500;line-height:1.55;color:#1F1B16}
.dn_rv6__dots li::before{content:"";position:absolute;left:0;top:.7em;width:.3rem;height:.3rem;border-radius:50%;background:var(--dn-accent,#7C5526)}
/* 상자가 넓으면 두 갈래 — 왼쪽 처음 살피기 · 오른쪽 치료 목표(가는 세로선으로 가름). 상자 키를 줄여 고리 줄 안에 든다 */
@container rv6box (min-width:25rem){
  .dn_rv6__card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.22fr);column-gap:1.15rem;align-items:start}
  .dn_rv6__card h3{grid-column:1 / -1}
  .dn_rv6__g+.dn_rv6__g{margin-top:0;padding-left:1.15rem;border-left:1px solid #EFE7D8}
}
/* 그리기 — 절이 켜지면(.is-drawn) 화살표가 왼쪽에서 오른쪽으로 그어지고(clip-path : 촉이 찌그러지지 않게) 끝에 상자가 나타난다.
   꺼지면(.is-drawn 이 떨어지면) 소리 없이 처음으로 — 다시 들어올 때마다 다시 그어진다 */
@media(prefers-reduced-motion:no-preference){
  .dn_rv6.is-js .dn_rv6__line{clip-path:inset(-8px -8px -8px -8px);transition:clip-path .5s cubic-bezier(.4,0,.2,1) .5s}
  .dn_rv6.is-js:not(.is-drawn) .dn_rv6__line{clip-path:inset(-8px calc(100% + 8px) -8px -8px);transition:none}
  .dn_rv6.is-js .dn_rv6__card{transition:opacity .45s ease .95s,transform .45s ease .95s}
  .dn_rv6.is-js:not(.is-drawn) .dn_rv6__card{opacity:0;transform:translateX(-12px);transition:none}
}
/* 아래 두 칸 */
.dn_rv6__pans{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.3rem}
.dn_rv6__pan{background:#F6EFE2;border-radius:1rem;padding:calc(1rem + var(--rm-k,0px) * .03) 1.4rem calc(1.1rem + var(--rm-k,0px) * .03)}
.dn_rv6__pan h3{margin:0 0 .35rem;font-size:max(1.1rem,calc(16.5px * var(--dn-fs,1) + var(--rm-f,0px)));font-weight:700;line-height:1.35;color:#1F1B16}
.dn_rv6__pan>p{margin:0;font-size:max(.95rem,calc(14px * var(--dn-fs,1) + var(--rm-f,0px)));line-height:1.6;color:#3D362E}
.dn_rv6__kinds{list-style:none;margin:.7rem 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem 1.3rem}
.dn_rv6__kinds li{display:flex;align-items:center;gap:.65rem;min-width:0}
.dn_rv6__kinds .dn_ic{flex:none;width:2.2rem;height:2.2rem;border-radius:50%;background:#FFF;color:var(--dn-accent,#7C5526);display:flex;align-items:center;justify-content:center}
.dn_rv6__kinds .dn_ic svg{width:1.25rem;height:1.25rem}
.dn_rv6__kinds span{font-size:max(.95rem,calc(14px * var(--dn-fs,1) + var(--rm-f,0px)));font-weight:600;line-height:1.4;color:#1F1B16}
.dn_rv6__kinds small{font-size:max(.85rem,calc(13px * var(--dn-fs,1)));font-weight:400;color:#6B6158;margin:0 .1em}
/* 한 주 띠 — 월~일 일곱 칸, 프로그램이 있는 요일(build_v2.WEEKLY)만 칠하고 넓힌다. 요일이 바뀌어도 따라오게 grid 대신 flex 비율(빈 칸 1 · 칠한 칸 3.4 — 시안의 1fr · 3.4fr 와 같은 나눔) */
.dn_rv6__days{list-style:none;margin:.55rem 0 0;padding:0;display:flex;gap:3px}
.dn_rv6__days li{flex:1 1 0;min-height:3rem;border-radius:.45rem;background:#FFF;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:max(.85rem,calc(13px * var(--dn-fs,1)));color:#6B6158;line-height:1.2;text-align:center}
.dn_rv6__days li.on{flex-grow:3.4;background:var(--dn-accent,#7C5526);color:#FFF}
.dn_rv6__days li.on b{font-size:max(.95rem,calc(14px * var(--dn-fs,1)));font-weight:700}
.dn_rv6__days li.on span{font-size:max(.85rem,calc(13px * var(--dn-fs,1)));font-weight:600}
.dn_rv6__wk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.8rem 1.4rem;align-items:center;margin-top:.75rem}
.dn_rv6__cycle{position:relative}
.dn_rv6__cyc{margin:0 0 .3rem;font-size:max(.85rem,calc(13px * var(--dn-fs,1)));font-weight:600;color:#6B6158}
/* 돌아가는 차례 — 둥근 길 위의 넷(주차와 짝짓지 않는다 · R5). 위 줄 →, 아래 줄 ← (자리 넷 — build_v2.CULTURE 가 넷이 아니면 짓기가 멎는다) */
ol.dn_rv6__ring{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1.7rem 1.7rem;row-gap:1.1rem}
ol.dn_rv6__ring::before{content:"";position:absolute;left:4%;right:4%;top:.85rem;bottom:.85rem;border:1.5px solid var(--dn-accent,#7C5526);border-radius:999px}
ol.dn_rv6__ring::after{content:"";position:absolute;left:50%;top:.85rem;width:.5rem;height:.5rem;border-top:1.5px solid var(--dn-accent,#7C5526);border-right:1.5px solid var(--dn-accent,#7C5526);transform:translate(-50%,-50%) rotate(45deg)}
.dn_rv6__cycle::after{content:"";position:absolute;left:50%;bottom:.85rem;width:.5rem;height:.5rem;border-bottom:1.5px solid var(--dn-accent,#7C5526);border-left:1.5px solid var(--dn-accent,#7C5526);transform:translate(-50%,50%) rotate(45deg)}
ol.dn_rv6__ring li{position:relative;z-index:1;justify-self:center;align-self:center;padding:0 .45rem;background:#F6EFE2;
  font-size:max(.95rem,calc(14px * var(--dn-fs,1) + var(--rm-f,0px)));font-weight:600;color:#1F1B16;white-space:nowrap}
ol.dn_rv6__ring li:nth-child(3){grid-row:2;grid-column:2}
ol.dn_rv6__ring li:nth-child(4){grid-row:2;grid-column:1}
.dn_rv6__pan p.dn_rv6__more{margin:0;font-size:max(.9rem,calc(13.5px * var(--dn-fs,1)));line-height:1.6;color:#6B6158}
p.dn_rv6__more a{color:var(--dn-accent,#7C5526);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.dn_rv6__note{margin:0 0 auto;padding-top:.7rem;border-top:1px solid #E6DCC9;font-size:max(.9rem,calc(14px * var(--dn-fs,1)));line-height:1.6;color:#6B6158}
/* 처음 들어올 때(PC) — 고리가 그려지며 마디가 차례로 켜진다(신호는 .is-drawn 하나).
   점은 svg 안 둘째~여섯째 circle(첫째는 고리 면) — nth-of-type(2~6) */
@media(min-width:1025px) and (prefers-reduced-motion:no-preference){
  .dn_rv6.is-js .dn_rv6__arc{transition:stroke-dashoffset 1.5s ease .15s}
  .dn_rv6.is-js:not(.is-drawn) .dn_rv6__arc{stroke-dashoffset:100;transition:none}
  .dn_rv6.is-js .dn_rv6__lab,.dn_rv6.is-js .dn_rv6__dot,.dn_rv6.is-js .dn_rv6__ret,.dn_rv6.is-js .dn_rv6__chev,.dn_rv6.is-js .dn_rv6__flow,.dn_rv6.is-js .dn_rv6__mid{transition:opacity .5s ease}
  .dn_rv6.is-js:not(.is-drawn) .dn_rv6__lab,.dn_rv6.is-js:not(.is-drawn) .dn_rv6__dot,.dn_rv6.is-js:not(.is-drawn) .dn_rv6__ret,
  .dn_rv6.is-js:not(.is-drawn) .dn_rv6__chev,.dn_rv6.is-js:not(.is-drawn) .dn_rv6__flow,.dn_rv6.is-js:not(.is-drawn) .dn_rv6__mid{opacity:0;transition:none}
  .dn_rv6.is-js .dn_rv6__lab:nth-child(1),.dn_rv6.is-js .dn_rv6__dot:nth-of-type(2){transition-delay:.15s}
  .dn_rv6.is-js .dn_rv6__lab:nth-child(2),.dn_rv6.is-js .dn_rv6__dot:nth-of-type(3){transition-delay:.45s}
  .dn_rv6.is-js .dn_rv6__lab:nth-child(3),.dn_rv6.is-js .dn_rv6__dot:nth-of-type(4){transition-delay:.8s}
  .dn_rv6.is-js .dn_rv6__lab:nth-child(4),.dn_rv6.is-js .dn_rv6__dot:nth-of-type(5){transition-delay:1.1s}
  .dn_rv6.is-js .dn_rv6__lab:nth-child(5),.dn_rv6.is-js .dn_rv6__dot:nth-of-type(6){transition-delay:1.4s}
  .dn_rv6.is-js .dn_rv6__ret,.dn_rv6.is-js .dn_rv6__chev,.dn_rv6.is-js .dn_rv6__flow,.dn_rv6.is-js .dn_rv6__mid{transition-delay:1.65s}
}
/* 낮은 창 + 커진 글자 — 줄인다 */
@media(min-width:1025px) and (max-height:800px){
  html[data-size] .dn_rv6{--big:2.05rem;--cpt:.75rem;--d:clamp(10.5rem,calc(100vh - 36.5rem - 9rem * (var(--dn-fs,1) - 1) * 4),25rem)}
  html[data-size] .dn_rv6 .inner{gap:.7rem;padding-top:.3rem;padding-bottom:.4rem}
  html[data-size] .dn_rv6__chart{margin-bottom:max(.3rem,calc(var(--big) + 2.4rem - var(--d) * .115))}
  html[data-size] .dn_rv6__pan{padding:.75rem 1.2rem .8rem}
  html[data-size] .dn_rv6__kinds{margin-top:.45rem;gap:.35rem 1.1rem}
  html[data-size] .dn_rv6__kinds .dn_ic{width:1.9rem;height:1.9rem}
  html[data-size] .dn_rv6__days li{min-height:2.6rem}
  html[data-size] .dn_rv6__wk{margin-top:.5rem}
  html[data-size] .dn_rv6__note{padding-top:.5rem}
  html[data-size] .dn_rv6__card{padding:var(--cpt) 1rem .8rem}
  html[data-size] .dn_rv6__card h3{margin-bottom:.3rem}
  html[data-size] .dn_rv6__dots li,html[data-size] .dn_rv6__card p{line-height:1.45}
}
@media(min-width:1025px) and (max-width:1280px){.dn_rv6{--lw:calc(5.6rem + 22px)}}   /* 이름표가 고리 밖으로 나가는 만큼만(보통 94 · 크게 103 · 더 크게 112px) — 상자 칸을 넓힌다 */
/* Q — 1025~1200(모든 글자 단계) : 고리 | (머리 위 · 상자 아래). 상자 칸이 넓어져 덮지도 넘치지도 않게 */
@media(min-width:1025px) and (max-width:1200px){
  .dn_rv6{--cg:2rem;--rg:.6rem;--d:clamp(11rem,calc(100vh - 38.5rem - 9rem * (var(--dn-fs,1) - 1) * 4),21rem)}
  .dn_rv6__top{grid-template-columns:auto minmax(0,1fr);row-gap:var(--rg)}
  .dn_rv6 .dn_head{grid-column:2;grid-row:1;padding-top:0}
  .dn_rv6__chart{grid-column:1;grid-row:2;margin-top:max(0px,calc(var(--hy) - var(--ay)))}
  .dn_rv6__box{grid-column:2;grid-row:2;margin-top:max(0px,calc(var(--ay) - var(--hy)))}
}
/* Q — 1201 이상이라도 낮은 창(≤800) + 더 크게 */
@media(min-width:1201px) and (max-height:800px){
  html[data-size="xl"] .dn_rv6{--cg:2rem;--rg:.6rem}
  html[data-size="xl"] .dn_rv6__top{grid-template-columns:auto minmax(0,1fr);row-gap:var(--rg)}
  html[data-size="xl"] .dn_rv6 .dn_head{grid-column:2;grid-row:1;padding-top:0}
  html[data-size="xl"] .dn_rv6__chart{grid-column:1;grid-row:2;margin-top:max(0px,calc(var(--hy) - var(--ay)))}
  html[data-size="xl"] .dn_rv6__box{grid-column:2;grid-row:2;margin-top:max(0px,calc(var(--ay) - var(--hy)))}
}
/* 낮은 창(≤800) + 더 크게 — 1280×720 에서 한 화면에 들게 조금씩 덜어 낸다(Q 꼴에서만 걸린다 : 1025~1200 · 1201 이상 모두) */
@media(min-width:1025px) and (max-height:800px){
  html[data-size="xl"] .dn_rv6{--cpt:.6rem;--d:10rem}                                                  /* 고리 160px — 가운데 글이 고리 안에 든다 */
  html[data-size="xl"] .dn_rv6 .dn_head{gap:.3rem}
  html[data-size="xl"] .dn_rv6 .dn_head h2{line-height:1.15}
  html[data-size="xl"] .dn_rv6__chart{margin-bottom:calc(var(--big) + 2.05rem - var(--d) * .115)}   /* 아래 이름표(1줄 · 61px) 끝 + 4px */
  html[data-size="xl"] .dn_rv6 .inner{gap:.5rem}
  html[data-size="xl"] .dn_rv6__note{padding-top:.4rem}
}
/* 폰 — 머리 → 상자 → 고리 → 치료 내용 → 화 · 목 프로그램 → 아래 한 줄.
   화살표 : 첫날 점에서 오른쪽으로 「첫날」 글자 오른끝 바깥까지 → 꺾어 위로 → 상자 아래끝(촉이 위를 가리킴). 고리 · 이름표를 안 지난다.
   폰은 쪽을 굴려 내려오며 보므로 상자를 감추지 않는다(빈 자리가 보이지 않게) — 고리가 화면에 들면 화살표만 그어진다 */
@media(max-width:1024px){
  .dn_rv6{--rm-k:0px;--lw:max(4.25rem,80px);--big:2rem;--rg:1.5rem;--d:min(calc(100vw - 2.5rem - 2 * var(--lw)),17rem);
    --bx:calc(var(--d) * .5 + var(--big) * .65 + .55rem)}   /* 꺾는 자리 = 「첫날」 글자 오른끝(.5d + 글자 반폭 .65big) + 틈 → 1주 이름표보다 왼쪽 */
  .dn_rv6 .inner{height:auto;gap:1.4rem;padding:3.75rem 1.25rem 6rem}   /* 아래 6rem — 다음 절 sec09 의 머리글이 sticky 로 위로 올라와 겹친다(design 실측) */
  /* 다음 절이 대화 꼴 sec09(.sec09.is-talk · 가지 hp-sec09-dialog — 머리글이 따라붙지 않는다)면 위 6rem 이 필요 없다 → 이 절 아래 여백 둘(안쪽 6rem · 원본 .section 의 아래 5rem)을 0 으로.
     어느 쪽이 먼저 들어가도 맞게 다음 절의 꼴로 가른다. 남는 틈은 sec09 자신의 위 여백(4.5rem)뿐 — 더 좁히려면 그 여백(대화 꼴 가지의 것)을 줄여야 한다(main 2026-10-03) */
  .dn_rv6:has(+ .sec09.is-talk){padding-bottom:0}
  .dn_rv6:has(+ .sec09.is-talk) .inner{padding-bottom:0}
  .dn_rv6__top{grid-template-columns:minmax(0,1fr);row-gap:var(--rg)}
  .dn_rv6 .dn_head{grid-column:1;grid-row:1}
  .dn_rv6 .dn_head h2{font-size:1.8rem}
  .dn_rv6__box{grid-column:1;grid-row:2;margin:0;max-width:none}
  .dn_rv6__chart{grid-column:1;grid-row:3;justify-self:center;margin:var(--mt) var(--lw) max(.4rem,calc(var(--big) + 2.6rem - var(--d) * .115))}
  .dn_rv6__nm{font-size:max(.85rem,calc(13px * var(--dn-fs,1)))}
  .dn_rv6__mid{font-size:max(1.1rem,calc(16px * var(--dn-fs,1)))}
  .dn_rv6__line{width:calc(var(--bx) - var(--ax))}
  .dn_rv6__line .dn_rv6__tip{display:none}
  .dn_rv6__up{display:block;position:absolute;z-index:2;left:calc(var(--bx) - 2px);width:2px;
    top:calc(var(--tip) * .2071 - var(--mt) - var(--rg));height:calc(var(--mt) + var(--rg) + var(--ay) + 1px - var(--tip) * .2071);background:var(--dn-accent,#7C5526)}
  .dn_rv6__up .dn_rv6__tip{right:auto;left:50%;top:0;transform:translate(-50%,0) rotate(-45deg)}
  .dn_rv6__pans{grid-template-columns:1fr;gap:1rem}
  .dn_rv6__kinds{grid-template-columns:1fr}
  .dn_rv6__wk{grid-template-columns:1fr}
}
@media(max-width:1024px) and (prefers-reduced-motion:no-preference){
  .dn_rv6.is-js .dn_rv6__card,.dn_rv6.is-js:not(.is-drawn) .dn_rv6__card{opacity:1;transform:none;transition:none}
  .dn_rv6.is-js .dn_rv6__line{transition:clip-path .35s cubic-bezier(.4,0,.2,1) .15s}
  .dn_rv6.is-js .dn_rv6__up{clip-path:inset(-8px -8px -8px -8px);transition:clip-path .45s cubic-bezier(.4,0,.2,1) .5s}
  .dn_rv6.is-js:not(.is-drawn) .dn_rv6__up{clip-path:inset(calc(100% + 8px) -8px -8px -8px);transition:none}
}

/* 글자 크기 단계 × 원본 main.css 의 바탕(@media 마다 html{font-size}) — work/v2/fontsize.root_css_for_main 이 main.css 를 읽어 만든다. 차례도 main.css 그대로(뒤가 이긴다) */
@media screen and (max-width:1640px){html[data-size="lg"]{font-size:101.25%}html[data-size="xl"]{font-size:112.5%}}
@media screen and (max-width:1440px){html[data-size="lg"]{font-size:90%}html[data-size="xl"]{font-size:100%}}
@media screen and (max-width:1024px){html[data-size="lg"]{font-size:112.5%}html[data-size="xl"]{font-size:125%}}