/* ==========================================================================
   모우림의원 — 모션 레이어
   daderma(디에이피부과 도산)의 인터랙션 문법을 따르되 한 단계 더 정밀하게 구성
   ========================================================================== */

/* ---------- 0. 인트로 커튼 ---------- */
.intro{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;
  justify-content:center;background:var(--ink);pointer-events:none}
.intro_mark{display:flex;flex-direction:column;align-items:center;gap:0}
.intro_icon{width:clamp(3.1rem,7vw,4.1rem);height:auto;opacity:0;
  transform:translateY(1.1rem) scale(.94)}
.intro_rule{display:block;width:1px;height:0;margin-block:1.05rem;
  background:linear-gradient(rgba(201,180,106,.85),rgba(201,180,106,0))}
.intro_word{width:clamp(9.5rem,24vw,13.5rem);height:auto;opacity:0;
  transform:translateY(.9rem)}
.intro.on .intro_icon{opacity:1;transform:none;
  transition:opacity .95s cubic-bezier(.22,1,.36,1),transform 1.15s cubic-bezier(.22,1,.36,1)}
.intro.on .intro_rule{height:2.6rem;
  transition:height .85s cubic-bezier(.76,0,.24,1) .35s}
.intro.on .intro_word{opacity:1;transform:none;
  transition:opacity .95s cubic-bezier(.22,1,.36,1) .5s,transform 1.1s cubic-bezier(.22,1,.36,1) .5s}
.intro_veil{position:absolute;inset:0;background:var(--ink);transform-origin:top}
.intro.out{pointer-events:none}
.intro.out .intro_mark{opacity:0;transform:translateY(-.7rem);transition:all .55s ease}
.intro.done{display:none}
html.intro-lock,body.intro-lock{overflow:hidden}

/* ---------- 1. 스크롤 진행 표시 ---------- */
.scroll_progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:9500;
  background:transparent;pointer-events:none}
.scroll_progress i{display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--point),var(--point-l));
  transform-origin:left;transition:width .12s linear}

/* ---------- 2. 헤더 : 스크롤 방향에 따른 숨김 ---------- */
.main-header{will-change:transform}
.main-header.hide{transform:translateY(-100%)}
.main-header.open.hide{transform:none}

/* ---------- 3. 라인 단위 헤드라인 리빌 ---------- */
.lines{display:block}
.line{display:block;overflow:hidden}
.line > span{display:block;transform:translateY(105%);
  transition:transform 1.05s cubic-bezier(.19,1,.22,1)}
.on .line > span,.line.on > span{transform:none}
.line:nth-child(2) > span{transition-delay:.09s}
.line:nth-child(3) > span{transition-delay:.18s}
.line:nth-child(4) > span{transition-delay:.27s}

/* ---------- 4. 글자 단위 리빌 (영문 키워드) ---------- */
.chars{display:inline-block}
.chars i{display:inline-block;font-style:inherit;opacity:0;
  transform:translateY(.55em) rotate(4deg);
  transition:opacity .7s ease,transform .8s cubic-bezier(.19,1,.22,1)}
.chars.on i{opacity:1;transform:none}

/* ---------- 5. 이미지 클립 리빌 ---------- */
.img_reveal{position:relative;overflow:hidden}
.img_reveal > img{transform:scale(1.14);
  transition:transform 1.6s cubic-bezier(.19,1,.22,1)}
.img_reveal::after{content:'';position:absolute;inset:0;background:var(--ink);
  transform-origin:right;transform:scaleX(1);
  transition:transform 1.15s cubic-bezier(.76,0,.24,1)}
.img_reveal.on > img{transform:none}
.img_reveal.on::after{transform:scaleX(0)}
.img_reveal.from_left::after{transform-origin:left}
.img_reveal.from_left.on::after{transform-origin:right}

/* ---------- 6. 패럴랙스 ---------- */
.parallax{will-change:transform}
.parallax_wrap{overflow:hidden}

/* ---------- 7. 밑줄 하이라이트 ---------- */
.hl{position:relative;display:inline}
.hl::after{content:'';position:absolute;left:0;bottom:-.08em;width:0;height:.06em;
  background:var(--point-l);transition:width 1s cubic-bezier(.19,1,.22,1) .25s}
.on .hl::after,.hl.on::after{width:100%}

/* ---------- 8. 카운터 ---------- */
.stat_band{background:var(--ink);padding-block:clamp(3.5rem,6.5vw,6rem)}
.stat_grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.stat_item{text-align:center;position:relative}
.stat_item + .stat_item::before{content:'';position:absolute;left:0;top:50%;
  transform:translateY(-50%);width:1px;height:3.5rem;background:rgba(255,255,255,.14)}
.stat_num{font-family:'Sorts Mill Goudy',Georgia,serif;
  font-size:clamp(2.2rem,4.4vw,3.6rem);line-height:1;color:var(--point-l);
  letter-spacing:.01em}
.stat_num .u{font-size:.46em;margin-left:.16em;color:rgba(255,255,255,.72)}
.stat_lb{margin-top:1.05rem;font-size:.9375rem;font-weight:300;line-height:1.6;
  color:rgba(255,255,255,.6)}
@media (max-width:860px){
  .stat_grid{grid-template-columns:repeat(2,1fr);gap:2.5rem 1rem}
  .stat_item:nth-child(3)::before,.stat_item:nth-child(odd)::before{display:none}
}

/* ---------- 9. 러닝 텍스트 밴드 ---------- */
.marquee{overflow:hidden;padding-block:clamp(2rem,3.6vw,3.25rem);
  background:var(--beige);border-block:1px solid var(--line)}
.marquee_track{display:flex;width:max-content;gap:3.5rem;
  animation:mq 42s linear infinite;will-change:transform}
.marquee:hover .marquee_track{animation-play-state:paused}
.marquee_item{display:flex;align-items:center;gap:3.5rem;white-space:nowrap;
  font-family:'Sorts Mill Goudy',Georgia,serif;
  font-size:clamp(1.5rem,3.1vw,2.6rem);letter-spacing:.06em;color:var(--ink)}
.marquee_item::after{content:'';width:.45rem;height:.45rem;border-radius:50%;
  background:var(--point)}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- 10. 전후 비교 드래그 슬라이더 ---------- */
.ba_compare{position:relative;overflow:hidden;background:var(--beige);
  cursor:ew-resize;touch-action:none;user-select:none}
.ba_compare img{display:block;width:100%;pointer-events:none}
.ba_compare .after_wrap{position:absolute;inset:0;overflow:hidden;
  clip-path:inset(0 0 0 50%)}
.ba_compare .after_wrap img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover}
.ba_compare .handle{position:absolute;top:0;bottom:0;left:50%;width:2px;
  background:rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(23,21,15,.18);
  pointer-events:none}
.ba_compare .handle::after{content:'';position:absolute;top:50%;left:50%;
  width:2.75rem;height:2.75rem;transform:translate(-50%,-50%);border-radius:50%;
  background:rgba(255,255,255,.95);box-shadow:0 .3rem .9rem rgba(23,21,15,.22)}
.ba_compare .handle::before{content:'';position:absolute;top:50%;left:50%;z-index:2;
  width:1.05rem;height:.55rem;transform:translate(-50%,-50%);
  background:var(--ink);
  -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20'%3E%3Cpath d='M14 4L6 10l8 6M26 4l8 6-8 6' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20'%3E%3Cpath d='M14 4L6 10l8 6M26 4l8 6-8 6' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.ba_compare .tag{position:absolute;bottom:1rem;z-index:3;padding:.35rem .9rem;
  font-size:.75rem;letter-spacing:.12em;color:#fff;background:rgba(23,21,15,.72)}
.ba_compare .tag.b{left:1rem}
.ba_compare .tag.a{right:1rem;background:rgba(138,120,69,.9)}

/* ---------- 11. 커서 ---------- */
.cursor{position:fixed;top:0;left:0;z-index:99998;pointer-events:none;
  width:2.5rem;height:2.5rem;margin:-1.25rem 0 0 -1.25rem;border-radius:50%;
  border:1px solid rgba(138,120,69,.55);opacity:0;
  transition:opacity .3s ease,width .35s ease,height .35s ease,margin .35s ease,
    background-color .35s ease,border-color .35s ease}
.cursor.on{opacity:1}
.cursor.grow{width:4.5rem;height:4.5rem;margin:-2.25rem 0 0 -2.25rem;
  background:rgba(138,120,69,.13);border-color:transparent}
.cursor_dot{position:fixed;top:0;left:0;z-index:99998;pointer-events:none;
  width:.3rem;height:.3rem;margin:-.15rem 0 0 -.15rem;border-radius:50%;
  background:var(--point);opacity:0;transition:opacity .3s ease}
.cursor_dot.on{opacity:1}
@media (hover:none),(pointer:coarse),(max-width:1024px){
  .cursor,.cursor_dot{display:none}
}

/* ---------- 12. 링크 · 카드 호버 정밀화 ---------- */
.tx_item::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:2px;
  background:var(--point-l);transform:scaleX(0);transform-origin:left;
  transition:transform .55s cubic-bezier(.19,1,.22,1)}
.tx_item:hover::after{transform:scaleX(1)}
.tx_item .nm,.tx_item .ds,.tx_item .num,.tx_item .go{position:relative;z-index:1}
.tx_item .go{display:inline-flex;align-items:center;gap:.5rem}
.tx_item .go::after{content:'';width:1.1rem;height:1px;background:currentColor;
  transition:width .45s ease}
.tx_item:hover .go::after{width:2.1rem}

.ba_card{transition:transform .6s cubic-bezier(.19,1,.22,1),
  box-shadow .6s cubic-bezier(.19,1,.22,1)}
.ba_card:hover{transform:translateY(-.5rem);
  box-shadow:0 1.35rem 2.6rem rgba(23,21,15,.13)}

.doctor_item .doctor_desc{transform:translateY(.65rem);opacity:.92;
  transition:transform .6s cubic-bezier(.19,1,.22,1),opacity .6s ease}
.doctor_item:hover .doctor_desc{transform:none;opacity:1}

.board_card{transition:transform .55s cubic-bezier(.19,1,.22,1)}
.board_card:hover{transform:translateY(-.4rem)}

.fac_item img{transition:transform 1.1s cubic-bezier(.19,1,.22,1),
  filter .6s ease;filter:saturate(.9)}
.fac_item:hover img{transform:scale(1.04);filter:saturate(1)}

.header_solution{position:relative;overflow:hidden;isolation:isolate}
.header_solution::before{content:'';position:absolute;inset:0;z-index:-1;
  background:var(--point);transform:translateY(101%);
  transition:transform .5s cubic-bezier(.76,0,.24,1)}
.header_solution:hover::before{transform:none}

/* ---------- 13. LNB 메뉴 순차 등장 ---------- */
.lnb_group{opacity:0;transform:translateY(1.6rem);
  transition:opacity .8s ease,transform .9s cubic-bezier(.19,1,.22,1)}
.main-header.open .lnb_group{opacity:1;transform:none}
.main-header.open .lnb_group:nth-child(1){transition-delay:.32s}
.main-header.open .lnb_group:nth-child(2){transition-delay:.40s}
.main-header.open .lnb_group:nth-child(3){transition-delay:.48s}
.main-header.open .lnb_group:nth-child(4){transition-delay:.56s}
.main-header.open .lnb_group:nth-child(5){transition-delay:.64s}
.lnb_foot{opacity:0;transition:opacity .8s ease .72s}
.main-header.open .lnb_foot{opacity:1}
.header_lnb::before{content:'';position:absolute;inset:0;
  background:radial-gradient(90% 70% at 20% 0%,rgba(138,120,69,.16),transparent 62%);
  pointer-events:none}

/* ---------- 14. 메인 배너 텍스트 등장 ---------- */
.mainBanner_eyebrow,.mainBanner_title,.mainBanner_sub{opacity:0;
  transform:translateY(1.5rem);
  transition:opacity 1s ease,transform 1.15s cubic-bezier(.19,1,.22,1)}
.mainBanner.ready .mainBanner_eyebrow{opacity:1;transform:none;transition-delay:.15s}
.mainBanner.ready .mainBanner_title{opacity:1;transform:none;transition-delay:.3s}
.mainBanner.ready .mainBanner_sub{opacity:1;transform:none;transition-delay:.45s}
.mainBanner_scroll{position:absolute;left:50%;bottom:1.75rem;z-index:3;
  transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;
  gap:.6rem;font-family:'Sorts Mill Goudy',Georgia,serif;font-size:.75rem;
  letter-spacing:.24em;color:rgba(255,255,255,.62)}
.mainBanner_scroll i{display:block;width:1px;height:2.6rem;
  background:linear-gradient(rgba(255,255,255,.55),transparent);
  animation:scrollHint 2.1s ease-in-out infinite}
@keyframes scrollHint{
  0%{transform:scaleY(0);transform-origin:top}
  45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}
@media (max-width:768px){.mainBanner_scroll{display:none}}

/* ---------- 15. 서브 히어로 정밀화 ---------- */
.common_visual .imgBox img{transform:scale(1.1);
  transition:transform 2s cubic-bezier(.19,1,.22,1)}
.common_visual.on .imgBox img{transform:none}
.sub_title_eng{opacity:0;transform:translateY(.8rem);
  transition:opacity 1.1s ease .1s,transform 1.2s cubic-bezier(.19,1,.22,1) .1s}
.common_visual.on .sub_title_eng{opacity:1;transform:none}

/* ---------- 16. 인용 배너 강조 ---------- */
.quote_band{position:relative;overflow:hidden}
.quote_band::before{content:'';position:absolute;inset:0;
  background:radial-gradient(75% 130% at 50% 100%,rgba(138,120,69,.2),transparent 66%)}
.quote_band .inner{position:relative}
.quote_band .mark{display:block;margin-inline:auto;margin-bottom:1.9rem;
  font-family:'Sorts Mill Goudy',Georgia,serif;font-size:3.4rem;line-height:1;
  color:var(--point);opacity:.55}

/* ---------- 17. 섹션 상단 얇은 구분선 ---------- */
.rule{width:100%;height:1px;background:var(--line);transform:scaleX(0);
  transform-origin:left;transition:transform 1.2s cubic-bezier(.19,1,.22,1)}
.rule.on{transform:scaleX(1)}

/* ---------- 18. 접근성 : 모션 최소화 ---------- */
@media (prefers-reduced-motion:reduce){
  .intro{display:none}
  .line > span,.chars i,.img_reveal > img,.common_visual .imgBox img,
  .mainBanner_eyebrow,.mainBanner_title,.mainBanner_sub,.sub_title_eng,
  .lnb_group,.lnb_foot,.rule{transform:none !important;opacity:1 !important;
    transition:none !important}
  .img_reveal::after{display:none}
  .marquee_track{animation:none}
  .mainBanner_scroll i{animation:none}
  .cursor,.cursor_dot{display:none}
}

/* ---------- 19. 전후사진 카드 : 톤 통일 ---------- */
.ba_pair{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line)}
.blk.dark .ba_pair{background:rgba(255,255,255,.14)}
.ba_half{position:relative;overflow:hidden;background:var(--beige)}
.ba_half img{display:block;width:100%;aspect-ratio:56/47;object-fit:cover;
  transition:transform 1.1s cubic-bezier(.19,1,.22,1)}
.ba_card:hover .ba_half img{transform:scale(1.035)}
.ba_lb{position:absolute;left:0;bottom:0;z-index:2;width:100%;padding:.62rem .5rem;
  text-align:center;font-family:'Sorts Mill Goudy',Georgia,serif;font-size:.75rem;
  letter-spacing:.2em;color:#fff}
.ba_lb.b{background:rgba(23,21,15,.74)}
.ba_lb.a{background:rgba(138,120,69,.93)}
.ba_pair + .ba_cap{border-top:0}

/* ---------- 20. 구글 지도 ---------- */
.gmap{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;
  background:var(--beige);border:1px solid var(--line)}
.gmap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;
  filter:grayscale(.18) contrast(1.03)}
.footer_map .gmap{aspect-ratio:16/11;border-color:rgba(255,255,255,.16);
  background:rgba(255,255,255,.05)}
.loc_map .gmap{aspect-ratio:16/10;border:0}
.map_note{margin-top:1rem;font-size:.875rem;font-weight:300;line-height:1.7;
  color:var(--gray)}
.blk.dark .map_note,.m_sect7 .map_note{color:rgba(255,255,255,.6)}
.map_actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.25rem}
.map_btn{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.35rem;
  font-size:.875rem;font-weight:400;letter-spacing:.02em;color:var(--ink);
  border:1px solid var(--line);border-radius:2rem;
  transition:border-color .35s ease,color .35s ease,background .35s ease}
.map_btn:hover{border-color:var(--point);color:var(--point)}
.m_sect7 .map_btn{color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.24)}
.m_sect7 .map_btn:hover{color:var(--ink);background:var(--point-l);border-color:var(--point-l)}

/* 푸터 · 어두운 배경 위의 지도 버튼 */
.site_footer .map_btn,
.blk.dark .map_btn{color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.24)}
.site_footer .map_btn:hover,
.blk.dark .map_btn:hover{color:var(--ink);background:var(--point-l);border-color:var(--point-l)}
.footer_map{margin-top:1.4rem}
.footer_map .map_actions{margin-top:.9rem}
.footer_map .map_btn{padding:.55rem 1.05rem;font-size:.8125rem}

/* ==========================================================================
   E2E 감사 반영 (외국인 고객 페르소나 테스트)
   ========================================================================== */

/* 21. 서브 히어로는 리빌로 가리지 않는다 : 첫 화면이 검은 박스로 보이던 문제 */
.common_visual .imgBox.img_reveal::after{display:none}
.common_visual .imgBox.img_reveal > img{transform:none}
.common_visual .imgBox{background:var(--beige)}
.sub_title_eng{opacity:1;transform:none}
.common_visual .sub_title,
.common_visual .sub_slogan,
.common_visual .sub_desc{opacity:1;transform:none}
.common_visual .line > span{transform:none}

/* 22. 리빌은 짧고 이르게 : 본문이 한 박자 늦게 도착하던 문제 */
.reveal{transition-duration:.42s;transform:translateY(1.1rem)}
.d1{transition-delay:.05s}.d2{transition-delay:.1s}.d3{transition-delay:.15s}
.d4{transition-delay:.2s}.d5{transition-delay:.25s}.d6{transition-delay:.3s}
.line > span{transition-duration:.6s}
.line:nth-child(2) > span{transition-delay:.05s}
.line:nth-child(3) > span{transition-delay:.1s}
.line:nth-child(4) > span{transition-delay:.15s}
.img_reveal::after{transition-duration:.6s}
.img_reveal > img{transition-duration:.9s}
.chars i{transition-duration:.4s}

/* 23. 커서가 사진 위에 불투명한 원으로 얹히던 문제 */
.cursor{mix-blend-mode:difference;border-color:rgba(255,255,255,.7)}
.cursor.grow{background:rgba(255,255,255,.16);border-color:transparent}
.cursor_dot{mix-blend-mode:difference;background:#fff}
.ba_half:hover ~ .cursor,
.no-cursor .cursor,.no-cursor .cursor_dot{opacity:0 !important}

/* 24. 카드 호버가 캡션을 밀던 문제 : 기하 변화 대신 그림자와 테두리로 */
.ba_card:hover{transform:none;box-shadow:0 1.1rem 2.2rem rgba(23,21,15,.15)}
.ba_card{border:1px solid transparent;transition:box-shadow .45s ease,border-color .45s ease}
.ba_card:hover{border-color:var(--sand)}
.board_card:hover{transform:none}
.board_card .board_thumb{transition:box-shadow .45s ease}
.board_card:hover .board_thumb{box-shadow:0 .9rem 1.8rem rgba(23,21,15,.14)}
.trio_item:hover{transform:none;border-color:var(--point)}

/* 25. 01 / 02 가 OI / O2 로 읽히던 문제 : 라이닝 숫자 사용 */
.feat_num,.trio_no,.tx_item .num,.paging a,.paging span,
.ba_cap .v,.hours_table td,.stat_num,.footer_tel,.lnb_foot .tel{
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:'lnum' 1,'tnum' 1}

/* 26. 섹션 사이 빈 공간 축소 */
.m_sect3,.m_sect4,.m_sect5,.m_sect6{padding-block:clamp(3.5rem,6.4vw,6rem)}
.doctor_grid,.tx_grid,.ba_grid,.fac_track{margin-top:clamp(2.25rem,3.4vw,3rem)}
.more_btn{margin-top:clamp(1.85rem,2.6vw,2.4rem)}
.sect_desc_wrap{margin-top:clamp(1.35rem,2vw,1.85rem)}
.blk{padding-block:clamp(3.25rem,5.6vw,5.25rem)}
.feat_list{margin-top:clamp(2.25rem,3.4vw,3rem)}

/* 27. MENU 버튼 히트 영역 확대 */
.menu_hamburgerBtn{min-height:44px;padding-inline:.25rem;position:relative}
.menu_hamburgerBtn::before{content:'';position:absolute;inset:-8px -10px}

/* 28. 시설 갤러리 : 가로 스크롤이 세로 스크롤을 가두던 문제 + 조작 수단 제공 */
.fac_track{overscroll-behavior-x:contain;overscroll-behavior-y:auto}
.fac_wrap{position:relative}
.fac_nav{display:flex;gap:.6rem;margin-top:1.25rem}
.fac_btn{display:flex;align-items:center;justify-content:center;width:2.85rem;
  height:2.85rem;border:1px solid var(--line);border-radius:50%;color:var(--ink);
  transition:border-color .35s ease,color .35s ease,background .35s ease}
.fac_btn:hover{border-color:var(--point);color:var(--point)}
.fac_btn:disabled{opacity:.35;cursor:default}
.fac_btn svg{width:1rem;height:1rem;stroke:currentColor;fill:none;stroke-width:1.6}

/* 29. 의료진 카드 : 인물 사진(밝은 배경)에 맞춘 구성 */
.doctor_item{background:transparent}
.doctor_item .ph{aspect-ratio:3/4;background:#fff;overflow:hidden}
.doctor_item .ph img{filter:none;transform:none}
.doctor_item:hover .ph img{transform:scale(1.03);filter:none}
.doctor_item .ph::after{display:none}
.doctor_desc{position:static;padding:1.5rem 0 0;transform:none;opacity:1}
.doctor_go{display:block;width:1.6rem;height:1px;margin-top:1.15rem;
  background:var(--point-l);transition:width .45s ease}
.doctor_item:hover .doctor_go{width:3rem}

/* 30. 연락 수단 : 플로팅 레일 확장 */
.quick .q_wa{background:#25d366;color:#fff}
.quick .q_wa:hover{background:#1fb457}
.quick .q_mail{background:var(--point);color:#fff}
.quick .q_mail:hover{background:var(--point-d)}

/* ==========================================================================
   31. 상담 신청 폼
   ========================================================================== */
.enquiry_form{max-width:46rem;margin:clamp(2.25rem,3.4vw,3rem) auto 0;
  display:flex;flex-direction:column;gap:1.35rem;text-align:left}
.fld_grid{display:grid;grid-template-columns:1fr 1fr;gap:1.35rem}
.fld{display:flex;flex-direction:column;gap:.55rem}
.fld_lb{font-size:.8125rem;font-weight:500;letter-spacing:.04em;color:var(--ink)}
.fld_lb i{margin-left:.28rem;font-style:normal;color:var(--point)}
.fld input,.fld select,.fld textarea{
  width:100%;padding:.9rem 1rem;font-family:inherit;font-size:.9375rem;
  font-weight:300;color:var(--ink);background:#fff;border:1px solid var(--line);
  border-radius:2px;transition:border-color .3s ease,box-shadow .3s ease}
.fld textarea{resize:vertical;min-height:7.5rem;line-height:1.75}
.fld select{appearance:none;cursor:pointer;padding-right:2.4rem;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238a7845' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:.7rem}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:0;border-color:var(--point);box-shadow:0 0 0 3px rgba(138,120,69,.12)}
.fld input:user-invalid,.fld textarea:user-invalid{border-color:#b4553f}
.fld_hint{font-size:.8125rem;font-weight:300;line-height:1.65;color:var(--gray)}
.fld_file input[type=file]{padding:.75rem;font-size:.8125rem;background:#fff}
.fld_check{display:flex;align-items:flex-start;gap:.75rem;font-size:.875rem;
  font-weight:300;line-height:1.7;color:#4f4a3f;cursor:pointer}
.fld_check input{flex:0 0 auto;width:1.15rem;height:1.15rem;margin-top:.15rem;
  accent-color:var(--point)}
.form_actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.15rem;
  margin-top:.5rem}
.btn_primary{display:inline-flex;align-items:center;justify-content:center;
  min-width:12rem;height:3.25rem;padding-inline:2rem;
  font-family:'Noto Serif KR','Noto Serif SC','Noto Serif TC','Noto Serif JP',
    'Noto Serif Thai',serif;
  font-size:1rem;letter-spacing:.05em;color:#fff;background:var(--ink);
  border-radius:2rem;position:relative;overflow:hidden;isolation:isolate;
  transition:color .35s ease}
.btn_primary::before{content:'';position:absolute;inset:0;z-index:-1;
  background:var(--point);transform:translateY(101%);
  transition:transform .45s cubic-bezier(.76,0,.24,1)}
.btn_primary:hover::before{transform:none}
.btn_primary[disabled]{opacity:.55;cursor:default}
.form_sla{font-size:.8125rem;font-weight:300;color:var(--gray)}
.form_status{min-height:1.4rem;font-size:.875rem;font-weight:400;line-height:1.6}
.form_status.ok{color:var(--point-d)}
.form_status.err{color:#b4553f}

/* 연락 채널 카드 */
.channel_row{display:grid;grid-template-columns:repeat(4,1fr);gap:.85rem;
  max-width:46rem;margin:clamp(2rem,3vw,2.6rem) auto 0}
.channel{display:flex;flex-direction:column;gap:.4rem;padding:1.15rem 1.15rem 1.25rem;
  background:#fff;border:1px solid var(--line);
  transition:border-color .35s ease,transform .35s ease}
.channel:hover{border-color:var(--point);transform:translateY(-.25rem)}
.ch_lb{font-family:'Sorts Mill Goudy',Georgia,serif;font-size:.8125rem;
  letter-spacing:.14em;color:var(--point)}
.ch_vl{font-size:.875rem;font-weight:300;line-height:1.5;color:#4f4a3f;
  word-break:break-all}
.footer_mail{margin-top:1.1rem;font-size:.9375rem;font-weight:300;
  color:rgba(255,255,255,.72)}
.footer_mail a:hover{color:var(--point-l)}

@media (max-width:768px){
  .fld_grid{grid-template-columns:1fr;gap:1.1rem}
  .enquiry_form{gap:1.1rem;margin-top:2rem}
  .fld input,.fld select,.fld textarea{padding:.8rem .9rem;font-size:1rem}
  .btn_primary{width:100%;height:3rem}
  .form_actions{gap:.85rem}
  .channel_row{grid-template-columns:1fr 1fr;gap:.6rem}
  .channel{padding:.95rem}
}
@media (max-width:400px){ .channel_row{grid-template-columns:1fr} }

/* 푸터 연락처 */
.footer_contact{display:grid;grid-template-columns:auto 1fr;gap:.45rem 1rem;
  margin-top:1.15rem;font-size:.9375rem;font-weight:300;color:rgba(255,255,255,.72)}
.footer_contact dt{font-family:'Sorts Mill Goudy',Georgia,serif;
  letter-spacing:.1em;color:var(--point-l)}
.footer_contact dd{margin:0;word-break:break-all}
.footer_contact a:hover{color:var(--point-l)}

/* 32. 의료진 카드 : 사진 아래 텍스트가 잘리던 문제
   overflow:hidden 은 사진 확대에만 필요하므로 카드에서 걷어낸다 */
.doctor_item{display:block;overflow:visible}
.doctor_item .ph{overflow:hidden;display:block}
.doctor_desc{padding-bottom:.25rem}

/* ==========================================================================
   33. 메인 : 리얼모델 전후 롤링
   ========================================================================== */
.m_real .rm_wrap{position:relative;margin-top:clamp(2.25rem,3.4vw,3rem)}
.rm_track{display:flex;gap:1.15rem;overflow-x:auto;scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;overscroll-behavior-y:auto;
  scrollbar-width:none;-ms-overflow-style:none;cursor:grab}
.rm_track::-webkit-scrollbar{display:none}
.rm_track.dragging{cursor:grabbing;scroll-snap-type:none}
/* 카드를 넓힌다. 좁으면 전·후 두 칸으로 나뉘는 순간 한 칸이 세로로 길쭉해져서
   얼굴이 눌려 보인다. 넓은 화면에서 30rem 까지 열어 둔다. */
.rm_card{flex:0 0 clamp(17.5rem,34vw,30rem);scroll-snap-align:center;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.13);
  overflow:hidden;transition:border-color .45s ease,background .45s ease}
.rm_card:hover{border-color:rgba(201,180,106,.5);background:rgba(255,255,255,.075)}
.m_real .ba_pair{background:rgba(255,255,255,.16)}
.m_real .ba_half{background:#0f0d09}
/* 한 칸이 정사각이면 얼굴 사진에서 턱과 이마가 잘린다. 세로를 조금 길게 잡되
   4:5 까지만 둔다. 그보다 길면 다시 눌려 보인다.

   ⚠ height:auto 가 빠지면 이 aspect-ratio 가 아무 일도 하지 않는다.
     리얼모델 <img> 에는 width="386" height="386" 속성이 붙어 있는데, HTML 의
     그 두 속성은 CSS 의 width · height 프레젠테이션 힌트로 들어간다. 높이가
     386px 로 고정되면 폭만 100% 로 줄어들어(238px), 결국 얼굴이 세로로 길쭉한
     5:8 로 눌려 나온다. 여태 그렇게 나오고 있었다.
     속성을 지우면 안 된다. 그게 있어야 사진이 오기 전에 자리를 잡아 둔다. */
.m_real .ba_half img{aspect-ratio:4/5;height:auto}

/* 제휴 페이지에서도 같은 카드를 쓴다. 카드 스타일이 어두운 배경을 전제로
   짜여 있어서(캡션 글자가 흰색) 밝은 배경에 얹으면 글자가 안 보인다.
   그래서 그 섹션은 blk.dark 로 둔다. 아래는 blk.dark 안에서의 여백만 맞춘다. */
.blk.dark.m_real .rm_wrap{margin-top:clamp(2.25rem,3.4vw,3rem)}
.rm_cap{display:flex;flex-direction:column;align-items:center;gap:.45rem;
  padding:1.2rem 1rem 1.35rem;text-align:center}
.rm_cap .nm{font-family:'Noto Serif KR','Noto Serif SC','Noto Serif TC',
  'Noto Serif JP','Noto Serif Thai',serif;font-size:1.15rem;color:#fff;
  letter-spacing:.03em;line-height:1.4}
.rm_cap .t{font-size:.8125rem;font-weight:300;letter-spacing:.02em;
  color:rgba(255,255,255,.58)}
.rm_cap .v{font-size:.875rem;letter-spacing:.02em;color:var(--point-l);
  font-variant-numeric:lining-nums tabular-nums}
.rm_nav{display:flex;justify-content:center;gap:.6rem;margin-top:1.5rem}
.rm_btn{display:flex;align-items:center;justify-content:center;width:2.85rem;
  height:2.85rem;border:1px solid rgba(255,255,255,.32);border-radius:50%;color:#fff;
  transition:border-color .35s ease,color .35s ease}
.rm_btn:hover{border-color:var(--point-l);color:var(--point-l)}
.rm_btn svg{width:1rem;height:1rem;stroke:currentColor;fill:none;stroke-width:1.6}
.rm_dots{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;margin-top:1.1rem}
.rm_dots button{width:.42rem;height:.42rem;padding:0;border-radius:.21rem;
  background:rgba(255,255,255,.28);transition:width .4s ease,background .4s ease}
.rm_dots button.active{width:1.35rem;background:var(--point-l)}
.rm_note{margin-top:1.6rem;text-align:center;color:rgba(255,255,255,.42)}

/* ==========================================================================
   34. 메인 : 원장 인터뷰 영상
   ========================================================================== */
.m_video{background:var(--ink);padding-block:clamp(3.5rem,6.4vw,6rem)}
.m_video .sect_title{color:#fff}
.m_video .sect_keyword{color:var(--point-l)}
.m_video .sect_desc{color:rgba(255,255,255,.72)}
.video_frame{position:relative;max-width:60rem;margin:clamp(2.25rem,3.4vw,3rem) auto 0;
  aspect-ratio:16/9;background:#000;overflow:hidden}
.video_play{display:block;width:100%;height:100%;padding:0;border:0}
.video_play img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s cubic-bezier(.19,1,.22,1),opacity .4s ease}
.video_play:hover img{transform:scale(1.03);opacity:.86}
.video_btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:clamp(3.75rem,7vw,5.25rem);pointer-events:none}
.video_btn svg{width:100%;height:auto;display:block;
  filter:drop-shadow(0 .35rem 1.1rem rgba(0,0,0,.45))}
.video_btn .bg{fill:rgba(23,21,15,.72);transition:fill .35s ease}
.video_btn .tri{fill:#fff}
.video_play:hover .video_btn .bg{fill:var(--point)}
.video_frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video_cap{margin-top:1.15rem;text-align:center;font-size:.8125rem;font-weight:300;
  letter-spacing:.04em;color:rgba(255,255,255,.45)}

/* ==========================================================================
   35. 언어 선택 : 국기
   ========================================================================== */
.lang_flag{width:1.3rem;height:auto;flex:0 0 auto;border-radius:2px;
  box-shadow:0 0 0 1px rgba(23,21,15,.12)}
.main-header.open .lang_flag{box-shadow:0 0 0 1px rgba(255,255,255,.28)}
.dropdown-menu a{display:flex;align-items:center;gap:.6rem}
.dropdown-menu .lang_flag{box-shadow:0 0 0 1px rgba(23,21,15,.12)}

/* ==========================================================================
   36. 퀵메뉴 : 상담 채널을 눈에 띄게
   ========================================================================== */
.quick{align-items:center;gap:.5rem}
.quick a,.quick button{width:3.4rem;height:3.4rem}
.quick .q_cta{position:relative;width:4rem;height:4rem;gap:.16rem;
  background:var(--point);color:#fff;font-size:.6875rem;font-weight:500;
  letter-spacing:.02em;box-shadow:0 .5rem 1.35rem rgba(138,120,69,.48)}
.quick .q_cta:hover{background:var(--point-d);transform:translateY(-.18rem)}
.quick .q_cta .q_ico{width:1.35rem;height:1.35rem;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.quick .q_cta::after{content:'';position:absolute;inset:-.3rem;border-radius:50%;
  border:1px solid var(--point);animation:q_pulse 2.8s ease-out infinite;
  pointer-events:none}
@keyframes q_pulse{0%{transform:scale(.88);opacity:.65}70%,100%{transform:scale(1.14);opacity:0}}
.quick .q_ch{position:relative;background:transparent;box-shadow:0 .3rem .9rem rgba(23,21,15,.22)}
.quick .q_ch:hover{background:transparent;transform:translateY(-.18rem)}
.quick .q_ch img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.quick .q_tel{position:relative;background:var(--ink)}
.quick .q_tel .q_ico{width:1.35rem;height:1.35rem;fill:currentColor}
.quick .q_tip{position:absolute;right:calc(100% + .55rem);top:50%;
  transform:translateY(-50%) translateX(.35rem);padding:.32rem .62rem;
  border-radius:.25rem;background:var(--ink);color:#fff;font-size:.6875rem;
  letter-spacing:.02em;white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity .3s ease,transform .3s ease}
.quick a:hover .q_tip{opacity:1;transform:translateY(-50%)}
.quick .q_top{width:2.9rem;height:2.9rem}

/* 헤더 CTA : 배경을 포인트 컬러로 두어 먼저 눈에 들어오게 한다 */
.header_solution{background:var(--point);font-weight:500;
  box-shadow:0 .25rem .9rem rgba(138,120,69,.35)}
.header_solution:hover{background:var(--point-d)}

@media (prefers-reduced-motion:reduce){
  .q_cta::after{animation:none;opacity:.4}
  .rm_track{scroll-behavior:auto}
}

/* 인터뷰 영상 : 자체 컨트롤 */
.video_frame .video_host,.video_frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:1}
.video_hit{position:absolute;inset:0;z-index:2;width:100%;height:100%;padding:0;border:0;background:transparent}
.video_ctrl{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;
  gap:.85rem;padding:.85rem 1.05rem;
  background:linear-gradient(180deg,transparent,rgba(10,9,6,.82));
  opacity:0;transform:translateY(.4rem);transition:opacity .3s ease,transform .3s ease}
.video_frame.live:hover .video_ctrl,.video_frame.live:focus-within .video_ctrl,
.video_frame.live:not(.playing) .video_ctrl{opacity:1;transform:none}
.vc_btn{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;
  flex:0 0 auto;border-radius:50%;color:#fff;transition:color .25s ease,background .25s ease}
.vc_btn:hover{color:var(--point-l)}
.vc_btn svg{width:1.15rem;height:1.15rem;fill:currentColor;stroke:none}
.vc_mute svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.vc_fs svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.vc_play .i_pause,.video_frame.playing .vc_play .i_play{display:none}
.video_frame.playing .vc_play .i_pause{display:block}
.vc_mute .i_mute,.video_frame.muted .vc_mute .i_snd{display:none}
.video_frame.muted .vc_mute .i_mute{display:block}
.vc_bar{position:relative;flex:1 1 auto;height:3px;border-radius:2px;cursor:pointer;
  background:rgba(255,255,255,.28);touch-action:none}
.vc_bar::before{content:'';position:absolute;inset:-9px 0}
.vc_fill{position:absolute;left:0;top:0;height:100%;width:0;border-radius:2px;background:var(--point-l)}
.vc_fill::after{content:'';position:absolute;right:-4px;top:50%;width:9px;height:9px;
  border-radius:50%;background:var(--point-l);transform:translateY(-50%) scale(0);
  transition:transform .25s ease}
.vc_bar:hover .vc_fill::after,.vc_bar:focus-visible .vc_fill::after{transform:translateY(-50%) scale(1)}
.vc_time{flex:0 0 auto;font-size:.75rem;letter-spacing:.03em;color:rgba(255,255,255,.82);
  font-variant-numeric:lining-nums tabular-nums}
.video_frame:fullscreen{aspect-ratio:auto;width:100%;height:100%}

/* 오시는 길 : 지도 위에 제목을 두면서 간격을 잡는다 */
.gmap_wrap{margin-top:clamp(2.25rem,3.4vw,3rem)}

/* ==========================================================================
   35. 상담 버튼 · 대학교 제휴 말풍선
   ========================================================================== */

/* 상담 버튼에서 고리가 한 번씩 퍼진다. 화면에 늘 떠 있는 버튼이라 계속
   움직이면 거슬린다. 4초에 한 번, 두 번 퍼지고 쉰다. */
.q_cta--pulse{position:relative}
.q_cta--pulse::after{content:'';position:absolute;inset:0;border-radius:50%;
  border:1px solid var(--point-l);opacity:0;pointer-events:none;
  animation:qPulse 4s cubic-bezier(.22,1,.36,1) infinite}
@keyframes qPulse{
  0%{transform:scale(1);opacity:.7}
  28%{transform:scale(1.55);opacity:0}
  100%{transform:scale(1.55);opacity:0}
}
.q_cta--pulse:hover::after{animation-play-state:paused}

/* 말풍선. 상담 버튼 왼쪽에 붙는다. */
/* ⚠ .quick 의 자식이 아니라 형제다(layout.mjs 주석 참조).
   그래서 화면 기준으로 직접 잡는다. 퀵메뉴는 right:1.25rem 에 폭 3.65rem 이라
   그 왼쪽에 놓으려면 5.65rem 이다. */
.q_bubble{position:fixed;right:5.65rem;bottom:1.5rem;z-index:8100;
  width:15.5rem;min-width:15.5rem;
  background:linear-gradient(145deg,var(--point) 0%,var(--point-d) 100%);
  color:#fff;border-radius:.5rem;border:1px solid var(--point-l);
  box-shadow:0 .75rem 2rem rgba(109,93,51,.32);
  opacity:0;transform:translateX(.6rem) scale(.96);transform-origin:right center;
  transition:opacity .4s cubic-bezier(.22,1,.36,1),transform .4s cubic-bezier(.22,1,.36,1)}
.q_bubble.on{opacity:1;transform:none}
.q_bubble[hidden]{display:none}
/* 상담 버튼을 가리키는 꼬리 */
.q_bubble::after{content:'';position:absolute;right:-.36rem;top:50%;
  margin-top:-.375rem;width:.75rem;height:.75rem;background:var(--point-d);
  border-right:1px solid var(--point-l);border-top:1px solid var(--point-l);
  transform:rotate(45deg)}

.q_bubble_in{display:flex;flex-direction:column;gap:.2rem;
  padding:1rem 1.15rem 1.05rem}
.q_bubble_tag{font-family:'Sorts Mill Goudy',Georgia,serif;font-size:.6875rem;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.q_bubble_tit{font-size:1rem;font-weight:500;letter-spacing:-.01em;color:#fff;
  line-height:1.4}
.q_bubble_sub{margin-top:.15rem;font-size:.75rem;font-weight:300;line-height:1.55;
  color:rgba(255,255,255,.82)}
.q_bubble_go{margin-top:.55rem;font-size:.8125rem;font-weight:600;
  color:#fff;transition:transform .3s ease}
.q_bubble_in:hover .q_bubble_go{transform:translateX(.2rem)}

.q_bubble_x{position:absolute;top:.25rem;right:.25rem;z-index:2;
  width:2rem;height:2rem;border-radius:50%;
  font-size:.8125rem;line-height:1;color:rgba(255,255,255,.75);
  transition:color .25s ease,background .25s ease}
.q_bubble_x:hover{color:#fff;background:rgba(255,255,255,.12)}

@media (max-width:768px){
  /* ⚠ 좁은 화면에서는 .quick 에 매달지 않는다.
     .quick 은 모바일에서 화면 아래 가운데의 가로 알약으로 바뀌면서
     left:50% + translateX(-50%) 가 걸린다. 그 안에 absolute 로 매달아 두면
     위치 기준이 그 좁은 알약이 되고, 실제 기기에서 말풍선이 화면 왼쪽 끝으로
     밀려 한 글자씩 세로로 쪼개져 나왔다(2026-09-19 실기 확인).
     화면에 직접 고정하면 그 의존이 통째로 사라진다. */
  .q_bubble{left:.75rem;right:.75rem;bottom:5.5rem;width:auto;min-width:0;
    transform-origin:bottom center;transform:translateY(.6rem) scale(.98)}
  /* 꼬리는 알약을 가리키게 가운데로. */
  /* 꼬리는 아래 알약을 가리키게 가운데 아래로. */
  .q_bubble::after{right:auto;left:50%;margin-left:-.375rem;top:auto;margin-top:0;
    bottom:-.36rem;border:0;
    border-right:1px solid var(--point-l);border-bottom:1px solid var(--point-l)}
  .q_bubble_in{padding:.95rem 1.05rem 1rem;padding-right:2.6rem}
  .q_bubble_tit{font-size:1rem}
  .q_bubble_sub{font-size:.8125rem}
}

@media (prefers-reduced-motion:reduce){
  .q_cta--pulse::after{animation:none}
  .q_bubble{transition:none}
}