/* ============================================================
   탱글 랜딩(/ko/) 폰 레이아웃 — 2026-09-22

   랜딩은 psd2html 계열 1288px 고정 화면으로 만들어져 폰에서는 브라우저가
   전체를 축소(shrink-to-fit)해 «PC 화면이 작게» 보였다. 옛 라이브는 별도
   모바일 사이트(/m/)로 풀었지만 리뉴얼엔 그 짝이 없다 → 여기서 폰 규칙을 얹는다.

   ★이 파일은 반드시 </body> 앞에서 불러야 한다 — index.html 안 인라인 <style> 이
     head 와 body 양쪽에 흩어져 있어서, 앞에서 불면 같은 특정도라도 뒤의 인라인이 이긴다.
   ★분기점은 820px — 서브페이지(main.css/sub.css)와 같은 경계를 쓴다.
   ============================================================ */

@media (max-width: 820px) {

  /* ── 0. 1288px 고정 해제 ─────────────────────────────────────────── */
  #contents { min-width: 0 !important; width: 100% !important; overflow-x: clip; }
  html, body { overflow-x: hidden; }

  /* PC 전용 내비·퀵바는 숨긴다(폰 헤더·서랍이 대신한다 — js/landing-mobile.js) */
  #gnb { display: none !important; }
  #quick { display: none !important; }

  /* ── 1. 섹션 공통: 고정폭 내부 래퍼를 유동으로 ──────────────────── */
  #mc_banner .typo_wrap,
  #mc_academic .ac_inner,
  #mc_youtube .mc_youtube_container,
  #mc_shorts .sw {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  #mc_academic, #mc_youtube, #mc_shorts, #mc_model,
  #mc_bna, #mc_event, #mc_system, #c_guide { min-width: 0 !important; }
}

/* ============================================================
   폰 헤더 막대 + 서랍 (js/landing-mobile.js 가 마크업을 만든다)
   ============================================================ */
@media (max-width: 820px) {

  /* PC 헤더는 숨기고 폰 막대로 대체 — #top 은 로고를 절대좌표로 가운데 놓는 구조라
     폰에서 국기 11개가 로고 위로 쏟아졌다 */
  #top { display: none !important; }
  body { padding-top: 72px; }

  /* ★모양은 서브페이지 헤더와 같은 값으로 (2026-09-22 사용자: "서브처럼 헤더를 해달라")
       sub.css  @media(max-width:820px) body.sub{padding-top:72px} .hd-top{height:64px} .hd-logo img{height:34px}
       main.css .icon-btn / .hamburger = 42px 동그라미, 갈색(var(--brown) #7A6652 / --brown-deep #5B4A3B)
     ※ 랜딩은 main.css 를 안 불러서 변수가 없다 → 같은 색을 값으로 적는다. */
  .lm-bar {
    position: fixed; top: 0; left: 0; right: 0; height: 64px; z-index: 9800;
    display: flex; align-items: center; justify-content: flex-end;
    padding: 0 30px; background: #fff; border-bottom: 1px solid #ededed;
  }
  .lm-bar .lm-util { display: flex; gap: 10px; }
  .lm-bar .lm-logo {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    display: flex; align-items: center;
  }
  .lm-bar .lm-logo img { height: 34px; width: auto; max-width: none; display: block; }
  /* margin-right 3.5% 는 서브(sub.css `body.sub .hd-right{margin-right:3.5%}`)와 같은 값 —
     없으면 햄버거가 서브보다 12px 오른쪽에 선다(390px 실측) */
  .lm-right { display: flex; align-items: center; gap: 10px; margin-left: auto; margin-right: 3.5%; }

  /* ★선택자를 «.lm-bar .lm-circle» 로 — 옛 live/css/common.css 의 `a:link{color:#545454}` 가
       홑 클래스(.lm-circle)보다 구체적이라, 그냥 두면 갈색 원 안의 아이콘이 흰색이 아니라
       진회색으로 그려져 서브 헤더보다 흐리게 보였다(2026-09-22 사용자 지적). */
  .lm-bar .lm-circle {
    flex: none; width: 42px; height: 42px; border: 0; border-radius: 50%; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: #7A6652; color: #fff; cursor: pointer; text-decoration: none;
  }
  .lm-bar .lm-circle.lm-reserve { background: #5B4A3B; }
  .lm-bar .lm-circle svg { width: 18px; height: 18px; stroke: currentColor; }
  /* 햄버거는 서브(.hamburger span + box-shadow 로 세 줄)와 같은 모양 — 서브처럼 열어도 모양은 그대로 */
  .lm-bar .lm-ham span {
    display: block; width: 18px; height: 2px; background: #fff;
    box-shadow: 0 -6px 0 #fff, 0 6px 0 #fff;
  }

  /* 좁은 폰(≤379px): 30px 여백 + 136px 로고 + 동그라미 세 개는 서로 겹친다 → 여백·로고를 줄인다 */
  @media (max-width: 379px) {
    .lm-bar { padding: 0 16px; }
    .lm-bar .lm-util { gap: 8px; }
    .lm-bar .lm-logo img { height: 26px; }
    .lm-bar .lm-circle { width: 38px; height: 38px; }
  }

  /* 서랍 — 서브페이지(.hd-nav.open)와 같은 모양 */
  .lm-drawer {
    position: fixed; top: 72px; left: 0; right: 0; z-index: 9790;
    height: calc(100vh - 72px); height: calc(100dvh - 72px);
    overflow: auto; -webkit-overflow-scrolling: touch;
    background: #fff; border-top: 1px solid rgba(0,0,0,.06);
    padding: 4px 30px 40px; display: none;
  }
  .lm-open .lm-drawer { display: block; }
  .lm-open, .lm-open body { overflow: hidden; }          /* 뒤 화면 스크롤 잠금 */
  .lm-drawer ul { list-style: none; margin: 0; padding: 0; }
  .lm-drawer li { position: relative; border-bottom: 1px solid rgba(122,102,82,.18); }
  .lm-drawer .lm-d1 {
    display: block; padding: 15px 44px 15px 4px; min-height: 54px; box-sizing: border-box;
    font-family: inherit; font-size: 17px; font-weight: 500; line-height: 1.35;
    color: #5B4A3B; text-decoration: none;
  }
  .lm-drawer .lm-tog {
    position: absolute; top: 0; right: 0; width: 54px; height: 54px;
    border: 0; background: transparent; cursor: pointer; padding: 0;
    /* ★font: 단축의 가족 자리에 inherit 를 쓰면 선언 전체가 무효 — 이 페이지 body 는 font-size:0 이라 «+» 가 사라진다 */
    font-family: inherit; font-weight: 300; font-size: 22px; line-height: 1; color: #7A6652;
  }
  .lm-drawer .lm-tog::before { content: '+'; }
  .lm-drawer li.is-open .lm-tog::before { content: '\2013'; }
  .lm-drawer .lm-d2 { display: none; background: #F6F2EC; margin: 0 -30px; padding: 6px 30px; }
  .lm-drawer li.is-open .lm-d2 { display: block; }
  .lm-drawer .lm-d2 a {
    display: block; padding: 10px 16px; font-size: 15px; line-height: 1.4;
    color: #5B4A3B; text-decoration: none;
  }
  /* 서랍 맨 위 로그인 줄 — ★body 가 font-size:0 인 페이지라 글자 크기·가족을 반드시 적어 준다 */
  .lm-drawer .lm-member { display: flex; gap: 8px; padding: 14px 0 12px; }
  .lm-drawer .lm-mbtn {
    flex: 1 1 0; min-width: 0; height: 46px; border-radius: 100px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 1px solid rgba(122,102,82,.35); background: #fff; text-decoration: none;
    font-family: inherit; font-size: 15px; font-weight: 500; line-height: 1; color: #5B4A3B;
  }
  .lm-drawer .lm-mbtn.primary { background: #7A6652; border-color: #7A6652; color: #fff; }
  .lm-drawer .lm-mbtn svg { width: 16px; height: 16px; flex: none; stroke: currentColor; }

  .lm-lang { padding: 24px 0 8px; }
  .lm-lang .tgi-langs { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 !important; }
  /* 2행(나머지 언어)은 한 줄로 — ★이 파일이 langbar.js 의 <style> 보다 뒤에 실리므로
     같은 특정도면 여기가 이긴다. 두 서랍(랜딩·서브)이 같은 모양이 되게 값을 맞춰 적는다. */
  .lm-lang .tgl-rest { flex-wrap: nowrap !important; gap: 5px !important; margin: 0 -12px !important; }

  /* 서랍이 열려 있을 때는 레이어팝업을 가린다(서브페이지와 같은 규칙) */
  .lm-open #popuplayer, .lm-open .tglpop { display: none !important; }
}

/* ============================================================
   섹션별 폰 규칙 — PC 절대좌표(1288 판)를 버리고 위에서 아래로 흐르게 한다
   ============================================================ */
@media (max-width: 820px) {

  /* 그림은 칸을 넘지 않는다 */
  #contents img { max-width: 100%; height: auto; }

  /* ── 히어로: 커버 영상(min-width:177.78vh → 1422px)은 상자 안에서만 ── */
  #mc_special .hv { overflow: hidden; }

  /* ── 배너/타이포: .gp 들이 top:195/265/320/420/710 절대좌표라 폰에서 겹쳤다 ── */
  #mc_banner .mc_banner_wrap { height: auto !important; }
  #mc_banner .typo_wrap { height: auto !important; padding: 56px 20px 64px !important; }

  /* ★폰 차례: 히어로 → «대표원장 사진» → 글 (2026-09-22 사용자 지시).
       대표원장은 배경그림(.bg 2020px 판)의 오른쪽에 있어 폰 화면에는 안 들어온다 →
       사진 칸을 섹션 «맨 위» 에 두고 인물이 가운데 오게 잡은 뒤, 글은 그 아래로 내린다.
     ★움직이는 효과(PC 의 5초 가로 슬라이드)는 폰에서 쓰지 않는다 — 그냥 사진.
     ★두 겹(따뜻한 색 보정 레이어 + 원본 사진)은 반드시 «같은 크기·같은 자리» —
       어긋나면 사진의 흰 배경이 베이지 위로 드러난다. */
  #mc_banner .typo_wrap { padding-top: 404px !important; padding-bottom: 64px !important; }   /* 사진 380 + 사이 24 */
  #mc_banner .bg_wrap .bg {
    left: 0 !important; margin-left: 0 !important; width: 100% !important;
    transform: none !important; transition: none !important;     /* 슬라이드·전환 없음 */
    background-size: auto 380px, auto 380px !important;
    background-position: 77% top, 77% top !important;            /* 77% = 인물이 화면 가운데(320~414px 실측) */
  }
  #mc_banner .typo_wrap .gp {
    position: static !important; top: auto !important; left: auto !important;
    opacity: 1 !important; margin: 0 0 20px !important;
  }
  #mc_banner .typo_wrap .gp1 { flex-wrap: wrap; }
  #mc_banner .typo_wrap .gp2 { width: 60px !important; margin: 4px 0 20px !important; }
  #mc_banner .typo_wrap .gp3 { transform: none !important; }
  #mc_banner .typo_wrap .gp5 { flex-wrap: wrap; gap: 14px !important; }
  #mc_banner .typo_wrap .gp5 > div:nth-child(1) { transform: none !important; padding-bottom: 0 !important; }

  /* ── 학술 기록: 420px│110px│420px 타임라인 → 한 칸 ── */
  #mc_academic .ac_list { width: auto !important; max-width: 100% !important; }
  #mc_academic .ac_list::before, #mc_academic .ac_list::after { display: none !important; }  /* 가운데 세로선 */
  #mc_academic .ac_row { display: block !important; }
  #mc_academic .ac_row + .ac_row { margin-top: 26px !important; }
  #mc_academic .ac_card { width: auto !important; }
  #mc_academic .ac_year { margin: 0 0 14px !important; display: inline-block !important; }

  /* ── 탱글TV 탭 줄: 화면보다 넓다 → 옆으로 훑어 보게(스크롤바는 숨김) ── */
  #mc_youtube .menu_wrap {
    justify-content: flex-start !important; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding: 0 20px; scrollbar-width: none;
  }
  #mc_youtube .menu_wrap::-webkit-scrollbar { display: none; }
  #mc_youtube .menu_wrap .btn { flex: none; }
  #mc_youtube .menu_wrap .btn > p { padding: 24px 14px 20px !important; white-space: nowrap; }

  /* ── 캐러셀 화살표는 1288 판 «바깥»(left/right:-100px)에 놓여 있다 → 폰에선 손가락으로 ── */
  #mc_model .btn_pn, #mc_event .btn_pn { display: none !important; }

  /* ── 안심케어: 좌우 두 칸을 위아래로 ── */
  #mc_system .mc_system_wrap .wrap { flex-wrap: wrap; gap: 16px !important; }
  #mc_system .m_wrap_2 { margin-top: 40px !important; }

  /* ── 진료안내(#c_guide): 2칸 그리드 → 한 칸, 큰 제목은 화면 폭에 맞게 ── */
  #c_guide .loc .cols { grid-template-columns: 1fr !important; gap: 28px !important; }
  #c_guide .loc-head h2 { font-size: 38px !important; }
  #c_guide .loc-head h3 { font-size: 16px !important; }
}

/* ============================================================
   패스 3 — 남은 두 섹션(안심케어·진료안내) 마무리
   ============================================================ */
@media (max-width: 820px) {

  /* ── 안심케어: .wrap_1(50%)·.wrap_2(50% + padding-left:50px) 좌우 두 칸 → 위아래 ── */
  #mc_system .mc_system_wrap > .wrap {
    display: block !important; position: relative !important; left: auto !important;
    width: 100% !important; margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important;
  }
  #mc_system .m_wrap_2 { margin-top: 32px !important; padding: 0 20px !important; }
  #mc_system .wrap_2 .title_wrap { padding-bottom: 24px !important; }
  #mc_system .wrap_2 .title_wrap .wrap { gap: 14px !important; flex-wrap: wrap; }
  /* 120px·46px 글자는 폰에서 화면을 넘는다 */
  #mc_system .wrap_2 .title_wrap .wrap p:nth-child(1) { font-size: 56px !important; letter-spacing: -2px !important; }
  #mc_system .wrap_2 .title_wrap .wrap p:nth-child(2) { font-size: 22px !important; letter-spacing: -1px !important; margin-top: 4px !important; }

  /* ── 진료안내: ★grid 의 1fr 은 최소가 min-content 라 내용이 안 줄고 칸이 394px 로 커졌다
        (버스 번호 줄처럼 안 쪼개지는 글) → minmax(0,1fr) 로 바꾸고 줄바꿈을 허용한다 ── */
  #c_guide { --tg-axis: calc(100% - 40px); }
  #c_guide .loc .cols { grid-template-columns: minmax(0, 1fr) !important; }
  #c_guide .dir, #c_guide .info { min-width: 0 !important; width: auto !important; }
  #c_guide .info .row { grid-template-columns: minmax(0, 104px) minmax(0, 1fr) !important; gap: 12px !important; }
  #c_guide .info dd, #c_guide .info dd .tx { min-width: 0; overflow-wrap: anywhere; }
  #c_guide .info dd .hrs { grid-template-columns: minmax(0, 104px) minmax(0, 1fr) !important; }
  #c_guide .sns-box { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
}

/* ============================================================
   패스 4 — 마지막 세 군데
   ============================================================ */
@media (max-width: 820px) {
  /* ★AOS 슬라이드인 transform(translateX(50px))이 폰에서는 «오른쪽으로 밀린 상태»로 남아 있었다 */
  #mc_system .wrap_2 { transform: none !important; }

  /* 진료안내 오른쪽 칸의 PC 들여쓰기 */
  #c_guide .info { padding-left: 0 !important; }

  /* 탱글TV «더보기» 는 PC 좌표에 절대배치돼 화면 밖이었다 → 가운데로 */
  #mc_youtube .more_wrap { position: static !important; display: flex; justify-content: center; margin: 24px 0 0 !important; }
  #mc_youtube .more_wrap > a { position: static !important; }
}

/* ============================================================
   패스 5 — AOS 잔상과 탱글TV «더보기»
   ============================================================ */
@media (max-width: 820px) {
  /* ★AOS(스크롤 등장 효과)의 «들어오기 전» 상태 translateX(±50px) 가 폰에서 그대로 남아
     .sh·.bh·.wrap_1·.dir·.info 다섯 군데가 좌우로 밀려 있었다(화면 밖으로 삐져나감).
     폰에서는 가로 슬라이드인을 쓰지 않는다 — 투명도 효과는 그대로 둔다. */
  #contents [data-aos] { transform: none !important; }

  /* 탱글TV «더보기»: 114+151px 두 버튼이 132px 칸에 갇혀 있었다 → 한 줄 차지하고 가운데로 */
  #mc_youtube .mc_youtube_wrap { flex-wrap: wrap !important; }
  #mc_youtube .box { width: 100% !important; min-width: 0 !important; }
  #mc_youtube .more_wrap { flex-wrap: wrap; justify-content: center; margin-top: 24px !important; }
}

@media (max-width: 820px) {
  /* ★index.html 안에 `html #c_guide [data-aos=fade-left]:not(.aos-animate){transform:…!important}` 가 있어
     앞의 규칙(#contents [data-aos])보다 특정도가 높았다 → 같은 특정도로 맞춰 뒤에서 덮는다 */
  html #contents [data-aos]:not(.aos-animate),
  html #contents [data-aos].aos-animate { transform: none !important; }
}

/* ============================================================
   패스 6 — 길이·여백 다듬기
   ============================================================ */
@media (max-width: 820px) {

  /* ── 안심케어 오른쪽 칸: 글이 화면 끝에 붙었다(.wrap_1 은 사진이 꽉 차야 하니 그대로) ── */
  #mc_system .wrap_2 { padding-left: 20px !important; padding-right: 20px !important; }

  /* ── 학술 기록: 카드 18장을 통짜로 세우면 7,000px 이 넘는다 → 사진을 왼쪽에 작게 붙인 가로 카드 ── */
  #mc_academic .ac_card {
    display: grid !important;
    grid-template-columns: 112px minmax(0, 1fr) !important;
    grid-template-rows: auto auto;
    gap: 2px 14px !important;
  }
  #mc_academic .ac_card::before, #mc_academic .ac_card::after { display: none !important; }  /* 타임라인 점·선 */
  #mc_academic .ac_thumb {
    grid-column: 1; grid-row: 1 / span 2;
    width: 112px !important; height: 70px !important; padding-top: 0 !important; border-radius: 10px !important;
  }
  #mc_academic .ac_cat { grid-column: 2; grid-row: 1; align-self: start; }
  #mc_academic .ac_tit { grid-column: 2; grid-row: 2; align-self: start; font-size: 14.5px !important; line-height: 1.45 !important; }
  #mc_academic .ac_row + .ac_row { margin-top: 18px !important; }

  /* ── 진료안내: 주소와 «네이버 지도» 단추가 한 줄에서 서로를 밀었다 → 단추를 아래로 ── */
  #c_guide .dir-head { flex-wrap: wrap; gap: 12px !important; }
  #c_guide .info dd .hrs { grid-template-columns: minmax(0, 92px) minmax(0, 1fr) !important; }
}

@media (max-width: 820px) {
  /* 학술 기록의 연도 표시는 «타임라인 가운데 점» 이었다 — 세로 목록에서는 알약·주황 원·링이 과했다 → 작은 글자로 */
  #mc_academic .ac_year,
  #mc_academic .ac_row.ac-on .ac_year {
    display: inline-block !important; width: auto !important; height: auto !important;
    padding: 0 !important; margin: 0 0 6px !important;
    border: 0 !important; background: none !important; box-shadow: none !important;
    opacity: 1 !important; transform: none !important;
    font-size: 12px !important; letter-spacing: .08em !important; color: #8A7360 !important;
  }
  #mc_academic .ac_row.ac-on .ac_year { color: #f60 !important; }
}

@media (max-width: 820px) {
  /* 제목은 두 줄까지 — PC 46px 기준의 고정 높이 상자라 세 번째 줄이 반쯤 보이며 잘렸다 */
  #mc_academic .ac_tit {
    display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden !important; height: auto !important; max-height: none !important;
  }
}

@media (max-width: 820px) {
  /* ★#contents 의 첫 자식 .m_wrap_2 는 PC 헤더 자리(#top 100px + #gnb 75px)를 비워 두는 175px 여백이었다.
     폰 막대는 60px(body padding-top)로 대신하므로 이 175px 는 히어로 위의 흰 빈칸으로만 남는다.
     (#mc_system 안의 .m_wrap_2 는 다른 요소라 직계 자식으로만 집는다) */
  #contents > .m_wrap_2 { margin-top: 0 !important; }
}

@media (max-width: 820px) {
  /* 히어로 아래 조작 줄: PC 는 left:60px / right:60px 로 넉넉했지만 390px 에서는
     점·화살표·번호와 음소거 단추가 한자리에 겹쳤다 → 여백을 줄이고 서로 자리를 나눈다 */
  #mc_special .hs-ui { left: 16px !important; right: 74px !important; gap: 10px !important; }
  #mc_special .hv-sound { right: 16px !important; }
  #mc_special .hs-ui .pn button { width: 34px !important; height: 34px !important; }
  #mc_special .hs-ui .dots { gap: 6px !important; }
}

/* ============================================================
   퀵상담 띠(#c_sms) 폰 배치 — 2026-09-22

   PC 는 1288px 한 줄(이름 160 · 연락처 180 · 상담내용 440 · 동의 · 상담신청)이라
   폰에서는 «이름·연락처·상담내용» 세 칸만 보이고 동의·신청 단추가 화면 밖으로 잘렸다.
   옛 모바일 사이트(m/include/common_fixed_sms.php)가 쓰던 «두 줄» 짜임을 그대로 가져온다:
     1줄 이름 · 연락처 · 상담내용 / 2줄 개인정보 동의 · 상담신청
   손가락에 맞게 칸 높이 40px, 글자 16px(★16px 미만이면 iOS 가 입력할 때 화면을 확대한다).
   ============================================================ */
@media (max-width: 820px) {

  /* 띠가 본문·푸터 끝을 가리지 않게 자리를 비워 둔다(옛 사이트도 #footer 에 같은 처리를 했다) */
  body { padding-bottom: 104px; }

  /* 올라오는 동작: PC 는 bottom:-80px → 0 이지만 폰은 띠 높이가 달라진다 → transform 으로 */
  #c_sms { bottom: 0; transform: translateY(110%); }
  #c_sms.dbBox_on { transform: translateY(0); }
  #c_sms > div { height: auto; padding-bottom: env(safe-area-inset-bottom); }

  .quick_sms_wrap { width: auto; height: auto; display: block; }
  .quick_sms_wrap .field_wrap { flex-wrap: wrap; gap: 6px; padding: 10px 14px; }
  /* ★PC 규칙이 .box:nth-child(n+2){margin-left:15px} · :nth-child(5){margin-left:80px} 로
       더 구체적이라 그냥 margin:0 으로는 안 지워진다(칸이 밀려 세 줄이 됐다) */
  .quick_sms_wrap .field_wrap .box { margin: 0 !important; }

  /* 1줄 — 세 칸이 한 줄에(가로 여백 6px×2 만큼 여유를 두고 나눈다) */
  .quick_sms_wrap .field_wrap .box:nth-child(1) { width: calc(26% - 6px); }
  .quick_sms_wrap .field_wrap .box:nth-child(2) { width: calc(32% - 6px); }
  .quick_sms_wrap .field_wrap .box:nth-child(3) { width: calc(42% - 6px); }
  .quick_sms_wrap .field_wrap .box:nth-child(1) .input_sms,
  .quick_sms_wrap .field_wrap .box:nth-child(2) .input_sms,
  .quick_sms_wrap .field_wrap .box:nth-child(3) .input_sms {
    width: 100%; height: 40px; padding: 0 10px; border-radius: 6px;
    font-size: 16px; background: #fff !important;   /* ★blur 때 jQuery 가 #ccc 를 인라인으로 넣는다 */
  }
  .quick_sms_wrap .field_wrap .input_sms::placeholder { font-size: 14px; color: #8a8a8a; }

  /* 2줄 — 동의 줄은 남는 자리를, 신청 단추는 38%
     (★flex:1 1 0 + min-width:0 이어야 좁은 폰에서 글이 줄어 단추가 아래로 안 떨어진다) */
  /* 기본폭 150px — 한국어는 신청 단추와 한 줄에 서고, 글이 긴 언어(러시아어 등)는
     저절로 줄을 넘겨 «동의 한 줄 + 단추 한 줄» 이 된다(글자를 쪼개지 않는다)
     ★번역 페이지는 _i18n/intl.css 가 `html[data-tgi-lang] … .box:nth-child(4){max-width:230px}` 로
       더 구체적이라, 같은 자리에 같은 특정도로 다시 적어야 폰 규칙이 이긴다. */
  html[data-tgi-lang] .quick_sms_wrap .field_wrap .box:nth-child(4),
  .quick_sms_wrap .field_wrap .box:nth-child(4) { flex: 1 1 150px !important; width: auto; min-width: 0; max-width: none !important; align-items: center; }
  .quick_sms_wrap .field_wrap .box:nth-child(4) input { margin: 0; width: 18px; height: 18px; flex: none; }
  .quick_sms_wrap .field_wrap .box:nth-child(4) #btn_agree {
    margin-left: 8px; padding: 0; font-size: 12px; line-height: 1.3; color: #ddd; min-width: 0;
    word-break: keep-all; overflow-wrap: break-word;
  }
  /* ★단추 글자는 언어마다 길이가 다르다(영 «Request Consultation» 은 한국어의 두 배) →
       폭을 38% 로 못박으면 글자가 잘린다. 최소 38%·최대 65% 안에서 글자에 맞춰 늘린다.
     ★번역 페이지용 _i18n/intl.css 는 PC 기준으로 `margin-left:28px!important`·`white-space:nowrap`·
       `padding:13px 22px 10px!important` 를 준다 — 폰에서는 단추가 들여써지고 글이 한 줄로 삐져나간다.
       그 선택자와 «같은 특정도»로 다시 적어야 이긴다(html[data-tgi-lang] 접두사 포함). */
  html[data-tgi-lang] .quick_sms_wrap .field_wrap .box:nth-child(5),
  .quick_sms_wrap .field_wrap .box:nth-child(5) {
    width: auto; min-width: 38%; max-width: 65%; height: 40px; padding: 0 12px; border-radius: 6px;
    margin-left: 0 !important; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
  }
  /* 글자가 길면 잘라 버리는 대신 두 줄로 접는다(러시아어 «Запись на консультацию» 실측) */
  html[data-tgi-lang] .quick_sms_wrap .field_wrap .box:nth-child(5) > p,
  .quick_sms_wrap .field_wrap .box:nth-child(5) > p {
    padding: 0 !important; font-size: 15px !important; line-height: 1.15; text-align: center;
    white-space: normal; word-break: keep-all;
  }
}

/* ============================================================
   패스 7 — 섹션별 폰 재정비 (2026-09-23, 사용자 지적 7건)
   학술기록 갤러리 · Shorts/Before&After 슬라이더가 화면 밖 · 모델스토리/이벤트 카드가 우표만 함 ·
   안심케어·진료안내 여백 · AOS 가 멈춰 글이 아예 안 보이던 것
   ============================================================ */
@media (max-width: 820px) {

  /* ── 0. ★AOS 가 폰에서 «들어오기 전»(opacity:0) 으로 멈춰 있다 ─────────
        안심케어 설명글이 통째로 안 보이던 원인. 폰에서는 등장 효과를 쓰지 않는다. */
  html #contents [data-aos],
  html #contents [data-aos]:not(.aos-animate),
  html #contents [data-aos].aos-init { opacity: 1 !important; transform: none !important; }

  /* ── 1. 학술 기록: 웹진형 가로 카드 → 갤러리(2열, 사진 크게) ──────────── */
  #mc_academic .ac_list {
    width: auto !important; max-width: 100% !important;
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 26px 14px !important;
  }
  #mc_academic .ac_list::before, #mc_academic .ac_list::after { display: none !important; }
  #mc_academic .ac_row,
  #mc_academic .ac_row + .ac_row { display: block !important; margin: 0 !important; }
  /* ★«전체 17건 보기» 접기는 `.ac_row:nth-of-type(n+7){display:none}` 로 되어 있다 —
       위 !important 가 그걸 덮어 접힌 카드가 빈칸으로 남았다. 접기/펼치기를 다시 살린다. */
  #mc_academic .ac_row:nth-of-type(n+7) { display: none !important; }
  #mc_academic .ac_toggle:checked ~ .ac_list .ac_row:nth-of-type(n+7) { display: block !important; }
  #mc_academic .ac_card { display: block !important; width: auto !important; }
  #mc_academic .ac_card::before, #mc_academic .ac_card::after { display: none !important; }
  #mc_academic .ac_thumb {
    display: block !important; width: 100% !important; height: 0 !important;
    padding-top: 66% !important; border-radius: 12px !important; grid-column: auto !important; grid-row: auto !important;
  }
  #mc_academic .ac_thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  #mc_academic .ac_cat { display: block !important; grid-column: auto !important; grid-row: auto !important;
                         margin-top: 10px !important; font-size: 11px !important; }
  #mc_academic .ac_tit {
    grid-column: auto !important; grid-row: auto !important;
    display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    height: auto !important; max-height: none !important; margin-top: 6px !important;
    font-size: 14px !important; line-height: 1.45 !important;
  }
  /* ★타임라인 «그려지는 선» 모션은 PC 좌표(가운데 선·좌우 교차) 기준이라 폰 갤러리에서는
       카드가 영영 안 나타난다(.ac-in 이 안 붙어 opacity:0). 폰에서는 모션을 끄고 전부 보인다. */
  #mc_academic.ac-mo .ac_row:not(.ac-in) .ac_card,
  #mc_academic.ac-mo .ac_row:not(.ac-in) .ac_year,
  #mc_academic .ac_card, #mc_academic .ac_year { opacity: 1 !important; transform: none !important; }
  #mc_academic .ac_prog { display: none !important; }

  /* 연도는 카드마다 작은 글자로(타임라인 알약이 아니라) */
  #mc_academic .ac_year,
  #mc_academic .ac_row[data-showyear="no"] .ac_year,
  #mc_academic .ac_row.ac-on .ac_year { display: inline-block !important; margin: 0 0 6px !important; }

  /* ── 2. 탱글 Shorts · Before & After: PC 2칸(글 | 슬라이더) → 한 칸 ────
        ★슬라이더 칸이 0px 로 접혀 카드가 화면 밖에 있었다(사용자: "사진이 안 보인다"). */
  #mc_shorts .sw, #mc_bna .bw {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: calc(100% - 40px) !important;
    column-gap: 0 !important; row-gap: 22px !important;
  }
  #mc_shorts .sh, #mc_bna .bh { height: auto !important; margin-top: 0 !important; }
  #mc_shorts .srail, #mc_bna .brail { width: 100% !important; margin-left: 0 !important; justify-self: stretch !important; }
  #mc_shorts { padding: 70px 0 !important; }
  #mc_bna { padding: 70px 0 !important; --bc-w: calc(100vw - 64px); }
  #mc_shorts .sh-bot, #mc_bna .bh-bot { margin-top: 14px; }
  /* ★섹션 제목은 타이포 스탠다드가 `html body … .tg-h2{font-size:50px!important}` 로 못박아
       폰에서 «Before & After» 가 화면을 넘었다(nowrap). 같은 특정도로 폰 크기를 준다. */
  html body .tg-h2,
  html body #mc_academic .ac_title.tg-h2,
  html body #mc_shorts .st.tg-h2,
  html body #mc_bna .bt.tg-h2,
  html body #c_guide .h-serif.tg-h2 {
    font-size: 38px !important; line-height: 1.25 !important; white-space: normal !important;
  }

  /* ── 3. 모델스토리 · 이벤트: 카드가 우표만 했다(슬라이드 수는 js 가 줄인다) ── */
  #mc_model .mc_model_container, #mc_event .mc_event_container { padding: 0 20px !important; }
  #mc_model .mc_title_wrap, #mc_event .mc_title_wrap { padding: 70px 0 28px !important; }
  #mc_model .swiper-slide, #mc_event .swiper-slide { max-width: none !important; }
  #mc_model .swiper-slide .photo_wrap .photo > img,
  #mc_event .swiper-slide .photo_wrap .photo > img { width: 100% !important; height: auto !important; }
  /* «+» 더보기 단추가 제목 오른쪽 끝과 겹쳤다 → 설명글 아래로 내려 오른쪽에 둔다 */
  #mc_model .mc_title_wrap > a, #mc_event .mc_title_wrap > a { display: block !important; text-align: right; }
  #mc_model .common_btn_more, #mc_event .common_btn_more {
    position: static !important; display: inline-flex !important;
    width: 48px !important; height: 48px !important; border-radius: 24px !important; margin: 14px 0 0 auto !important;
  }
  #mc_model .common_btn_more .icon, #mc_event .common_btn_more .icon { position: relative !important; top: auto !important; left: auto !important; margin: 0 !important; }
  #mc_model .swiper-pagination, #mc_event .swiper-pagination { position: static !important; margin-top: 14px !important; }
  #mc_event { padding-bottom: 60px !important; }

  /* ── 4. 안심케어: 글칸에 좌우 여백이 없어 «01» 이 화면에 물렸다 ──────────
        ★앞선 규칙 `#mc_system .mc_system_wrap > .wrap`(클래스 2개)이 더 구체적이라
          `#mc_system .wrap_2` 로는 안 먹었다 → 같은 모양으로 더 구체적으로 적는다. */
  #mc_system .mc_system_wrap > .wrap.wrap_2 { padding: 26px 20px 10px !important; }
  #mc_system .mc_system_wrap > .wrap.wrap_1 { padding: 0 !important; }
  #mc_system .wrap_2 .title_wrap .wrap { gap: 16px !important; align-items: flex-start !important; }
  #mc_system .wrap_2 .contents { font-size: 15px !important; line-height: 1.7 !important; margin-top: 14px !important; }
  #mc_system .badge { position: static !important; margin: 0 20px 12px !important; display: inline-block !important; }

  /* ── 5. 진료안내: 카드 안쪽 여백이 없고(왼쪽 0) 값 칸이 좁아 글이 잘게 쪼개졌다 ── */
  #c_guide .info { padding: 26px 20px 30px !important; }
  #c_guide .info .row { grid-template-columns: minmax(0, 1fr) !important; gap: 6px !important; }
  /* 진료시간은 «평일 10:00 ~ 19:00» 가 한 줄에 들어간다 — 두 칸 유지 */
  #c_guide .info dd .hrs { grid-template-columns: minmax(0, 76px) minmax(0, 1fr) !important; gap: 4px 10px !important; }
  #c_guide .info .row { padding: 16px 0 !important; }
  #c_guide .dir { padding: 0 !important; }
  #c_guide .loc .cols { gap: 24px !important; }
}

/* ── 8. 탱글TV 재생목록: 글칸이 130px 뿐이라 제목·설명이 «…» 로 잘렸다 (2026-09-23) ── */
@media (max-width: 820px) {
  #mc_youtube .mc_youtube_wrap .list_wrap { display: flex !important; align-items: center; gap: 12px; }
  #mc_youtube .mc_youtube_wrap .list_wrap .photo_wrap { flex: 0 0 132px; width: 132px !important; }
  #mc_youtube .mc_youtube_wrap .list_wrap .photo_wrap .photo { height: 74px !important; }
  #mc_youtube .mc_youtube_wrap .list_wrap .txt_wrap { flex: 1 1 auto; width: auto !important; min-width: 0; }
  #mc_youtube .mc_youtube_wrap .txt_wrap p.subject {
    white-space: normal !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; height: auto !important; font-size: 15px !important; line-height: 1.35 !important;
  }
  #mc_youtube .mc_youtube_wrap .txt_wrap p.contents {
    white-space: normal !important; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
    overflow: hidden; height: auto !important; font-size: 13px !important; margin-top: 4px !important;
  }
}