/* ═══ MEDICON 타이포그래피 보정 (모든 페이지 마지막에 로드)
   한글 제목은 글자 높이가 꽉 차서 영문보다 행간이 더 필요하다 — 두 줄 이상 제목 1.2~1.3, 본문 1.65~1.75
   작은 영문 라벨이 줄바꿈될 때 붙지 않도록 1.4, 한글 자간은 0 ~ -0.03em 안에서만 */
html{-webkit-text-size-adjust:100%}
h1,h2,h3,h4{text-wrap:balance;word-break:keep-all;overflow-wrap:anywhere}
p,li,dd,td,.ans,.lead{word-break:keep-all;overflow-wrap:anywhere;text-wrap:pretty}

/* 섹션 제목 */
.d2{line-height:1.2;letter-spacing:-.035em}
.sec-h .d2,.top .d2{line-height:1.2}
.cta-band h2{line-height:1.3;letter-spacing:-.025em}
.cb h3{line-height:1.3;letter-spacing:-.025em}
.pc.intro h3{line-height:1.3;letter-spacing:-.025em}
.b-brand h3{line-height:1.1}
.follow h3,.fbox h3{line-height:1.35}
.shero .kr,.phero .kr{line-height:1.45;letter-spacing:-.02em}
.mdesc h3{line-height:1.2}

/* 카드 · 박스 안 글자 */
.card h3{line-height:1.4;letter-spacing:-.015em}
.card p{line-height:1.7}
.card .k,.eyebrow,.mono,.tag,.hint{line-height:1.4}
.card .k{display:block}
.box-list li b,.box-list li span{line-height:1.5}
.spec th,.spec td{line-height:1.6}
.acc summary .q{line-height:1.5}
.acc .ans{line-height:1.75}
.rt-steps li strong,.hp-sel strong,.gui li b{line-height:1.4}
.pcard p,.gcard p,.nc h4,.news .nc h4{line-height:1.55}
.pdetail b{line-height:1.15}

/* 숫자 · 단위가 줄바꿈될 때 */
.facts b,.vals b{line-height:1.12!important}

/* 작은 글자 하한 */
.chk{font-size:11.5px!important;line-height:1.4}
.badges span{letter-spacing:.02em}

/* 모바일에서 큰 제목 한 단계 축소 */
@media (max-width:720px){
  .d2{font-size:clamp(28px,7.6vw,36px);line-height:1.24}
  .cta-band h2,.cb h3{font-size:clamp(24px,6.6vw,30px)}
  .card h3{font-size:18px}
}

/* 메인 페이지용 .facts(가로 행) 스타일이 서브페이지 카드에 간섭하지 않도록 */
.facts>.card{display:block;padding:20px 22px;border-bottom:0;font:inherit}
.facts>.card b{width:auto}
@media (max-width:720px){
  .tabbar{flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tabbar::-webkit-scrollbar{display:none}
  .tabbar button{flex:none}
}

/* 그리드 칸이 내용(줄바꿈 없는 탭·긴 영문)보다 좁아지지 못해 폰에서 옆으로 밀리던 문제 */
.grid2>*,.focus .grid>*,.flist,.tsec .wrap>*{min-width:0}
@media (max-width:720px){.fnav-m{max-width:calc(100% + 32px)}}
.tsec .top>*{min-width:0} .tsec .code small{white-space:normal;line-height:1.5}
@media (max-width:720px){.tsec .facts>div{min-width:0}.tsec .facts b{font-size:24px}.tsec .facts b.sm{font-size:16px;white-space:normal}}

/* ═══ 모바일 2단계 — 11. 터치 영역 44px · 12. 최소 글자 12px (10-07, 375px 측정 결과 기준) ═══ */
@media (max-width:720px){
  /* 12. 작은 라벨류 12px 하한 · 영문 대문자 자간 축소(줄바꿈 방지) */
  .eyebrow,.mono,.lab,.k,.card .k,.tag,.pill,.ln,.line,.tlabel,.hint,.en,.lbl,.yr,.legend,
  .tech span,.energies span,.fitem .k,.fitem .k span,.pdetail span,.dli .ic,.types button em,.quick i,
  .b-cert .chips span em,.bc .num sup,.shero .facts span,.meta .line,.pcard .tags span,.newsroom .d b,.nc .d b,
  .scrolltag,.chk,.hp-view .lbl em,.sns-card em{font-size:12px!important;letter-spacing:.06em}
  .totop span{font-size:10px}
  .mdesc .mono,.hp-view .lbl{letter-spacing:.06em}
  /* 11. 터치 영역 */
  .hd .logo{display:flex;align-items:center;min-height:44px}
  .crumb a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
  .tabbar button,.tabs button,.chips button,.era button,.ui nav button,.links a,.apply a,
  .lnav a,.series a,.emap-panel .go,.regions button,.filters button,.dl-admin a{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .lnav .wrap,.series .wrap{align-items:stretch}
  .ft nav a{display:inline-flex;align-items:center;min-height:44px}
  [class*="fsel"] button,.epw button{min-height:44px}
}
@media (max-width:720px){
  .b-toggle .sw span,.fitem .vals span,.mnav summary small,.shero .facts b small,a.b>span,div.b>span,
  .fsel button,.nc .d b,.d b,.contact-strip span{font-size:12px!important}
  #labNav button{min-height:44px;padding-inline:14px}
  .ft .logo{display:inline-flex;align-items:center;min-height:44px}
  .dli .langs a{min-height:44px;padding:0 16px}
  .agree a{display:inline-block;padding:10px 2px}
}
@media (max-width:720px){
  /* 회사소개 첫 화면 수치 — 숫자 위 · 설명 아래로 (메인 .facts 가로 행 스타일 간섭 해제) */
  .shero .facts>div{display:block;border-bottom:0;padding:18px 12px 0 0}
  .shero .facts span{margin-top:6px}
  /* 기술 페이지 수치 카드 — 긴 영문(Nano-Phoresis 등) 줄바꿈 */
  .tsec .facts b{font-size:22px!important;white-space:normal;overflow-wrap:anywhere;line-height:1.15!important}
}

/* ── 10-07 UX 개선: 모바일 스크롤 줄이기 · 구조 단순화 ── */
.swipe-hint,.hist-more{display:none}
@media (min-width:1101px){.fitem{min-height:62vh}}
@media (max-width:720px){
  /* 메인 제품 소개: 한 번에 한 제품(탭 · 좌우로 밀기) */
  body .fitem.moff{display:none}
  body .fitem{animation:fIn .35s ease}
  @keyframes fIn{from{opacity:.4;transform:translateY(8px)}to{opacity:1;transform:none}}
  body .fimg-m{position:relative;overflow:hidden}
  body .fimg-m img{position:absolute;left:14%;top:8%;width:72%;height:84%;max-width:none;max-height:none;object-fit:contain}
  .fnav-dots{display:flex;justify-content:center;gap:6px;margin-top:14px}
  .fnav-dots i{width:6px;height:6px;border-radius:50%;background:var(--line)} .fnav-dots i.on{width:18px;border-radius:3px;background:var(--navy)}
  /* 가로로 넘기는 목록 공통 안내 */
  .swipe-hint{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font:600 12px/1 Pretendard;color:var(--ink3)}
  .swipe-hint::after{content:"→";font-family:Inter}
  /* 메인 연혁: 세로 목록 → 가로 넘기기 */
  body .rec-track{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-top:18px;padding:6px 16px 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  body .rec-track::-webkit-scrollbar{display:none}
  body .rec{flex:0 0 72%;display:block;scroll-snap-align:start;padding:20px 0 0}
  body .rec .y{font-size:36px}
  body .rec .ph{height:130px;margin-top:14px}
  /* SNS: 다섯 줄 목록 → 아이콘 한 줄 */
  body .sns-cards{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
  body .sns-card{flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:14px 2px 12px;min-height:0;text-align:center;border-radius:16px}
  body .sns-card .ic{margin:0}
  body .sns-card b{margin:0;font-size:11px;letter-spacing:0;white-space:nowrap}
  body .sns-card em,body .sns-card i{display:none}
  /* 제품 목록: 큰 세로 카드 → 사진 왼쪽 · 글 오른쪽 */
  body .pcard{flex-direction:row;border-radius:20px;min-height:156px}
  body .pcard .im{flex:0 0 38%;aspect-ratio:auto}
  body .pcard .tags{left:8px;top:8px} body .pcard .tags span{padding:5px 8px;font-size:10px}
  body .pcard .bd{padding:14px 14px 12px 16px;min-width:0}
  body .pcard h3{margin:6px 0 4px;font-size:21px}
  body .pcard p{font-size:13px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  body .pcard .pdetail{display:none}
  body .pcard .meta{margin-top:10px;padding-top:10px}
  /* 회사소개 사업 영역: 다섯 장 세로 → 가로 넘기기 */
  body .biz{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin:0 -16px;padding:0 16px 10px;scrollbar-width:none}
  body .biz::-webkit-scrollbar{display:none}
  body .biz .b{flex:0 0 80%;min-height:300px;scroll-snap-align:start}
  /* 회사소개 연혁: 기간 버튼을 가로로, 해마다 대표 항목만 먼저 */
  body .hist .rail .yr{display:none}
  body .hist .rail .era{flex-direction:row;gap:8px;margin-top:0;overflow-x:auto;scrollbar-width:none}
  body .hist .rail .era button{flex:none;padding:10px 14px;border:1px solid var(--line);border-radius:999px;background:#fff}
  body .hist .rail .era button.on{background:var(--navy);border-color:var(--navy);color:#fff}
  body .yrs:not(.full) .yrow li:nth-child(n+2){display:none}
  .hist-more{display:flex;align-items:center;justify-content:center;width:100%;min-height:46px;margin-top:14px;border:1px solid var(--line);border-radius:999px;background:#fff;font:600 14px/1 Pretendard;color:var(--navy)}
  /* 자료실: 세 줄 카드 → 한 줄 */
  body .dli{grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:14px 16px}
  body .dli .ic{display:none}
  body .dli .langs{grid-column:auto;justify-content:flex-end}
  body .dli .langs a{padding:8px 10px}
  /* 도입 지원 4단계 · A/S 4단계: 한 줄 하나 → 2열 */
  body .supp{grid-template-columns:1fr 1fr;gap:10px}
  body .supp .card{padding:16px}
  body .flow{grid-template-columns:1fr 1fr;column-gap:14px}
  /* 옆으로 밀리는 버튼 줄: 오른쪽 끝을 흐리게 해 더 있다는 걸 보여 줌(끝까지 밀면 사라짐) */
  .series-m:not(.end),.lnav .wrap:not(.end),.fnav-m:not(.end){-webkit-mask-image:linear-gradient(90deg,#000 84%,transparent);mask-image:linear-gradient(90deg,#000 84%,transparent)}
  /* 제품 고르기 카드 · 공장 사진: 높이 줄이기 */
  body .gcard{min-height:230px;padding:22px}
  body .gcard p{font-size:13.5px}
  body .gcard ul{margin-top:12px}
  body .fgal{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin:20px -16px 0;padding:0 16px 6px;scrollbar-width:none;grid-template-rows:none}
  body .fgal::-webkit-scrollbar{display:none}
  body .fgal .media{flex:0 0 70%;height:200px;scroll-snap-align:start;grid-row:auto!important;grid-column:auto!important}
  /* 제품 상세: 사용 방법 단계는 가로 넘기기, 큰 특징 사진 높이 줄이기, 4단계 카드 2열 */
  body .howto{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 -16px;padding:0 16px 8px;scrollbar-width:none}
  body .howto::-webkit-scrollbar{display:none}
  body .howto li{flex:0 0 72%;scroll-snap-align:start}
  body .howto b{margin-top:12px}
  body .fbig{min-height:280px}
  body #howto .cards.c4{grid-template-columns:1fr 1fr;gap:10px}
  /* 기술: 주파수 3종 · 단계 3개를 세로 3장 → 가로 3칸 */
  body .freq,body .steps3{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  body .freq div,body .steps3 div{padding:12px 10px;border-radius:14px}
  body .freq b{font-size:12px} body .freq em{font-size:20px;margin:6px 0 4px} body .freq span{font-size:11.5px;line-height:1.4}
  body .steps3 b{font-size:13.5px;margin:8px 0 4px} body .steps3 span{font-size:12px;line-height:1.45}
  /* 메인 Technology Lab 3D: 3D 모양 · 위치는 그대로, 설명만 줄여 3D와 함께 한 화면에 */
  body #lab3d{height:min(88vw,400px)}
  body .lab .step .code{font-size:34px;letter-spacing:-.04em;display:inline-block;margin-right:8px}
  body .lab .step .en{display:inline-block;font-size:11px}
  body .lab .step h3{margin:8px 0 6px;font-size:18px}
  body .lab .step p{font-size:14px;line-height:1.6}
  body .lab .step .tags{margin-top:10px}
  /* 메인 'One technology, two lines' 가로 슬라이드: 제목 · 버튼 · 카드 · 진행 막대가 한 화면에 들어오게 */
  body .prod{padding-top:56px}
  body .prod .head{gap:16px}
  body .prod .head h2{margin-top:12px!important}
  body .gal-pin{padding-top:2px}
  body .gal .pc{width:78vw;height:clamp(320px,calc(100svh - 330px),460px)}
  body .gal .pc.intro{padding:26px}
  body .gal .pc .meta{left:20px;right:20px;bottom:20px}
  body .gal .pc h3{font-size:28px}
  body .gal .pc p{font-size:13px;margin-top:6px}
  body .gprog{margin-top:12px}
  /* 연구 · 논문: 처음 4건만, 더 보기 */
  body .papers:not(.full) .paper:nth-of-type(n+5){display:none}
}

/* ── 10-07 상단바 SNS 펼침 메뉴(PC) ── */
.sns-dd{position:relative}
.sns-tg{height:38px;display:inline-flex;align-items:center;gap:7px;padding:0 13px 0 12px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.86);color:var(--ink);font:600 12px/1 Inter;letter-spacing:.04em;cursor:pointer;transition:background .25s,border-color .25s,color .25s}
.sns-tg svg{width:16px;height:16px}
.sns-tg i{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .25s}
.sns-tg:hover,.sns-dd.on .sns-tg{border-color:var(--navy);color:var(--navy);background:#fff}
.sns-dd.on .sns-tg i{transform:translateY(2px) rotate(-135deg)}
.sns-tg:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.sns-pop{position:absolute;right:0;top:calc(100% + 10px);z-index:120;width:268px;padding:10px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:0 22px 50px rgba(12,46,130,.14);display:grid;gap:2px;animation:snsIn .22s ease}
.sns-pop[hidden]{display:none}
@keyframes snsIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.sns-pop-h{padding:6px 10px 8px;font:600 11px/1 Inter;letter-spacing:.14em;color:var(--ink3)}
.sns-pop a{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:12px;color:var(--ink);transition:background .2s}
.sns-pop a:hover,.sns-pop a:focus-visible{background:var(--bg2,#F4F6FA);outline:none}
.sns-pop .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--bg2,#F4F6FA);color:var(--navy);flex:none}
.sns-pop .ic svg{width:18px;height:18px}
.sns-pop .tx{display:grid;gap:3px;min-width:0}
.sns-pop .tx b{font:700 13.5px/1.2 Inter} .sns-pop .tx em{font:500 12px/1.2 Inter;font-style:normal;color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sns-pop a>i{margin-left:auto;font-style:normal;color:var(--ink3);font-size:13px}
@media (max-width:1100px){.sns-dd{display:none}}

/* ── 10-07 ulkin 병원 찾기 버튼(ulkin.net 병원 목록으로) ── */
.find-h .pin{width:18px;height:18px;flex:none}
.btn.find-h{gap:8px}
.btn.find-h:hover .pin{transform:translateY(-2px)}
.find-h .ext{font:500 13px/1 Inter;opacity:.6}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.buybar .find-h{padding:0 16px}
@media (min-width:721px) and (max-width:1100px){body .buybar .find-h{display:inline-flex!important;width:46px;padding:0;justify-content:center}.buybar .find-h .lbl{display:none}}
@media (max-width:720px){
  /* 상단 버튼 3개: 문의는 한 줄 전체, 브로셔 · 병원 찾기는 반씩 */
  body .phero .ctas{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  body .phero .ctas .btn{justify-content:center;padding:0 12px;height:50px;font-size:13.5px}
  body .phero .ctas .btn.navy{grid-column:1/-1}
  body .cta-band .btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
  body .cta-band .btns .btn{justify-content:center;padding:0 12px}
  body .cta-band .btns .btn.navy{grid-column:1/-1}
  /* 하단 고정 바: 병원 찾기는 아이콘 버튼 */
  body .buybar .find-h{display:inline-flex!important;flex:none;width:46px;height:46px;padding:0;justify-content:center}
  body .buybar .find-h .lbl{display:none}
}