/* SkiinOBS V64 — unified design system and responsive typography
   Loaded last on every page. Keeps Preview internals untouched. */
:root{
  --ui-blue:#2563eb;
  --ui-blue-dark:#1d4ed8;
  --ui-ink:#0f172a;
  --ui-text:#334155;
  --ui-muted:#64748b;
  --ui-line:#e2e8f0;
  --ui-soft:#f8fafc;
  --ui-radius:20px;
  --ui-shadow:0 10px 30px rgba(15,23,42,.055);
  --ui-section:88px;
  --ui-content:1180px;
}
html{font-size:16px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-size:16px!important;font-weight:400!important;line-height:1.75!important;color:var(--ui-ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.lang-ja{font-family:'Noto Sans JP',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important}
body.lang-ko{font-family:'Noto Sans KR',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important}
body.lang-en{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important}
body.lang-zh{font-family:'Noto Sans SC',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important}

/* Cross-browser line breaking: predictable rather than browser-specific "pretty" wrapping */
body.lang-ja :where(p,li,dd,summary,h1,h2,h3,strong,span){line-break:strict;word-break:normal;overflow-wrap:break-word;text-wrap:wrap!important}
body.lang-zh :where(p,li,dd,summary,h1,h2,h3,strong,span){line-break:strict;word-break:normal;overflow-wrap:break-word;text-wrap:wrap!important}
body.lang-ko :where(p,li,dd,summary,h1,h2,h3,strong,span){word-break:keep-all;overflow-wrap:break-word;text-wrap:wrap!important}
body.lang-en :where(p,li,dd,summary,h1,h2,h3,strong,span){word-break:normal;overflow-wrap:break-word;hyphens:none;text-wrap:wrap!important}

/* Preview is a self-contained product mockup: preserve its own typography */
.skiin-preview,.skiin-preview *{text-wrap:initial}

/* Shared typographic hierarchy */
.eyebrow,.kicker,.clinic-lite-kicker,.clinic-lite-eyebrow,.pricing-value-label{
  font-size:12px!important;font-weight:700!important;line-height:1.35!important;letter-spacing:.11em!important;
}
.brand,.footbrand,.footer-brand{font-weight:800!important;letter-spacing:-.035em!important}
.btn,.clinic-cta,.clinic-support-btn,.submit-btn{font-size:15px!important;font-weight:700!important;line-height:1.25!important}

/* Homepage hero — lock the two semantic lines; old language-router JS cannot control wrapping */
.hero-experience .hero{
  min-height:calc(100svh - 68px)!important;
  padding:64px 0!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
}
.hero-experience .hero-grid{width:100%;max-width:var(--ui-content);margin:auto!important}
.hero-experience .hero-copy-center{width:100%;max-width:none!important;margin:auto!important;padding:0 20px;text-align:center}
.hero-experience .hero h1{
  margin:0!important;
  font-size:clamp(48px,4.9vw,68px)!important;
  font-weight:800!important;
  line-height:1.17!important;
  letter-spacing:-.045em!important;
}
.hero-experience .hero .hero-title-line{
  display:block!important;
  width:max-content!important;max-width:100%!important;
  margin-left:auto!important;margin-right:auto!important;
  white-space:nowrap!important;
  font-size:1em!important;font-weight:800!important;line-height:1.17!important;
}
.hero-experience .hero .hero-title-line.accent{margin-top:.16em!important;color:var(--ui-blue)!important}
body.lang-en .hero-experience .hero h1{font-size:clamp(44px,4.45vw,62px)!important;letter-spacing:-.04em!important}
body.lang-ko .hero-experience .hero h1{font-size:clamp(44px,4.5vw,62px)!important}
body.lang-zh .hero-experience .hero h1{font-size:clamp(48px,4.7vw,66px)!important}

/* Homepage headings/body — same scale across sections */
.product-head,.core-tech-head,#faq .head,.pricing .head,.home-clinic-head{text-align:center!important;max-width:900px!important;margin-left:auto!important;margin-right:auto!important}
.product-head h2,.core-tech-head h2,#faq .head h2,.pricing .head h2,.home-clinic-head h2{
  margin:10px 0 16px!important;
  font-size:clamp(34px,3.35vw,48px)!important;
  font-weight:800!important;
  line-height:1.25!important;
  letter-spacing:-.035em!important;
}
.product-head h2 span{display:block}
.product-head p,.core-tech-head>p,#faq .head>p,.pricing .head>p,.home-clinic-head>p{
  margin:0 auto!important;max-width:800px!important;
  font-size:16px!important;font-weight:400!important;line-height:1.85!important;color:var(--ui-muted)!important;
}
.product-head p{max-width:850px!important}

.product-card,.workflow-panel,.pricing-value-item,.faq details,.clinic-problem-group{
  border-radius:var(--ui-radius)!important;
}
.product-card h3,.workflow-label,.pricing-value-item strong,.clinic-problem-group h3{
  font-size:19px!important;font-weight:700!important;line-height:1.45!important;letter-spacing:-.015em!important;
}
.product-card p,.workflow-panel p,.workflow-panel li,.pricing-value-item,.faq details p,.clinic-problem-list li{
  font-size:15px!important;font-weight:400!important;line-height:1.75!important;
}
.product-card p{color:#5b687b!important}
.workflow-chain span{font-size:14px!important;font-weight:600!important;line-height:1.45!important}
.workflow-benefit-tag{font-size:13px!important;font-weight:700!important}

/* Consistent homepage rhythm */
.product-section.beauty-focus,.core-technology,#faq,.pricing,.home-clinic{padding-top:var(--ui-section)!important;padding-bottom:var(--ui-section)!important;margin-top:0!important;margin-bottom:0!important}
.product-head,#faq .head,.pricing .head{margin-bottom:38px!important}
.hero-experience .hero-workflow-wrap{padding:0 0 var(--ui-section)!important;margin:0 auto!important}
.hero-experience .workflow-after-preview{margin:0!important}
.hero-experience .hero-preview-wrap{padding:0 20px var(--ui-section)!important;margin:0!important}
.core-technology{padding-left:20px!important;padding-right:20px!important}
.home-clinic .home-clinic-head{margin-bottom:28px!important}
.home-clinic .clinic-cta-row{margin-top:26px!important}
.hero-experience>.clinic-support{margin-top:64px!important;margin-bottom:64px!important}

/* Core Technology — reduce the visual jump caused by oversized/uneven copy */
.core-tech-inner{max-width:1080px!important;margin:auto!important}
.core-tech-head>p{max-width:850px!important;margin-top:12px!important}
.core-tech-pillars,.core-tech-capabilities{gap:10px!important}
.core-tech-pillars span,.core-tech-capabilities span{font-size:13px!important;font-weight:600!important;line-height:1.45!important}

/* FAQ */
.faq details summary{font-size:16px!important;font-weight:700!important;line-height:1.55!important}
.faq details p{color:var(--ui-muted)!important}

/* Pricing */
.price{font-size:clamp(38px,4vw,54px)!important;font-weight:800!important;line-height:1.05!important;letter-spacing:-.035em!important}
.price small{font-size:.34em!important;font-weight:600!important;letter-spacing:0!important}
.pricing-value-item{padding:18px!important}
.pricing-value-item strong{font-size:16px!important}
.trial-payment-note{font-size:13px!important;line-height:1.7!important;color:var(--ui-muted)!important}

/* One-to-one support — same type system as the rest of the site */
.clinic-support .clinic-lite-eyebrow{font-size:12px!important;font-weight:700!important;letter-spacing:.11em!important}
.clinic-support h2{font-size:clamp(30px,3vw,42px)!important;font-weight:800!important;line-height:1.28!important;letter-spacing:-.03em!important}
.clinic-support-lead{font-size:16px!important;font-weight:400!important;line-height:1.85!important}
.clinic-support-note{font-size:14px!important;line-height:1.7!important}
.clinic-support-step strong{font-size:16px!important;font-weight:700!important;line-height:1.45!important}
.clinic-support-step span{font-size:14px!important;line-height:1.65!important}

/* Subpage hero and body hierarchy */
.page-hero{padding:82px 0 48px!important}
.page-hero h1{
  margin:10px 0 14px!important;font-size:clamp(40px,4.5vw,54px)!important;font-weight:800!important;
  line-height:1.2!important;letter-spacing:-.035em!important;
}
.page-hero p{font-size:15px!important;line-height:1.75!important;color:var(--ui-muted)!important}
.contact-section,.policy-wrap{padding:28px 0 88px!important}
.contact-card,.policy-card{border-radius:22px!important;box-shadow:var(--ui-shadow)!important}
label,legend{font-size:15px!important;font-weight:700!important;line-height:1.45!important}
input,select,textarea{font-size:15px!important;line-height:1.5!important}
.review-card h2{font-size:28px!important;font-weight:800!important;line-height:1.3!important}

/* Privacy policy — deliberately calmer than marketing pages */
.policy-intro,.policy-section p,.policy-section li{font-size:15px!important;font-weight:400!important;line-height:1.85!important;color:#3f4d63!important}
.policy-section{padding:28px 0!important}
.policy-section h2{font-size:22px!important;font-weight:700!important;line-height:1.45!important;letter-spacing:-.015em!important;margin:0 0 14px!important}
.policy-section h3{font-size:17px!important;font-weight:700!important;line-height:1.55!important;margin:24px 0 8px!important}

/* OBS Clinic subpage */
.clinic-lite{max-width:1180px!important;padding:76px 24px 72px!important}
.clinic-lite-hero{margin-bottom:60px!important}
.clinic-lite-hero h1{font-size:clamp(44px,5vw,62px)!important;font-weight:800!important;line-height:1.14!important;letter-spacing:-.035em!important}
.clinic-lite-hero h2{font-size:clamp(22px,2.4vw,30px)!important;font-weight:700!important;line-height:1.5!important;letter-spacing:-.02em!important}
.clinic-lite-hero p,.clinic-lite-heading p{font-size:16px!important;line-height:1.85!important;color:var(--ui-muted)!important}
.clinic-lite-section{margin-top:72px!important}
.clinic-lite-heading{margin-bottom:32px!important}
.clinic-lite-heading h2{font-size:clamp(30px,3vw,40px)!important;font-weight:800!important;line-height:1.3!important;letter-spacing:-.03em!important}
.clinic-problem-group{padding:22px!important;box-shadow:none!important;border-color:var(--ui-line)!important}
.clinic-problem-group h3{font-size:17px!important}
.clinic-problem-list li{font-size:14.5px!important;line-height:1.65!important}
.clinic-cause-band{padding:26px!important;border-radius:20px!important}
.clinic-cause-band>strong{font-size:17px!important;font-weight:700!important}
.clinic-cause-copy{font-size:14px!important;line-height:1.7!important}
.clinic-cause-list span{font-size:13px!important;font-weight:500!important;line-height:1.4!important}

/* Footer — compact and consistent */
.footer .foot{gap:34px!important}
.footer .brand,.footer .footbrand{font-size:22px!important;font-weight:800!important}
.footer .preview-disclaimer{font-size:13px!important;font-weight:400!important;line-height:1.65!important}
.footer h3{font-size:13px!important;font-weight:700!important;line-height:1.4!important}
.footer a{font-size:13.5px!important;font-weight:400!important;line-height:1.55!important}
.footer .legal-copy{font-size:11.5px!important;font-weight:400!important}

/* Tablet */
@media (max-width:960px){
  :root{--ui-section:72px}
  .hero-experience .hero{min-height:calc(100svh - 64px)!important;padding:56px 0!important}
  .hero-experience .hero h1{font-size:clamp(38px,5.4vw,50px)!important}
  body.lang-en .hero-experience .hero h1{font-size:clamp(34px,4.9vw,44px)!important}
  body.lang-ko .hero-experience .hero h1{font-size:clamp(36px,5vw,46px)!important}
  body.lang-zh .hero-experience .hero h1{font-size:clamp(38px,5.2vw,48px)!important}
  .product-head h2,.core-tech-head h2,#faq .head h2,.pricing .head h2,.home-clinic-head h2{font-size:clamp(30px,4vw,38px)!important}
  .clinic-support-grid{grid-template-columns:1fr!important;gap:28px!important}
  .page-hero{padding:68px 0 42px!important}
}

/* Mobile — use smaller predictable titles, not browser auto-scaling */
@media (max-width:640px){
  :root{--ui-section:56px}
  html{font-size:15px}
  body{font-size:15px!important;line-height:1.72!important}
  .wrap,.narrow{width:min(calc(100% - 28px),var(--ui-content))!important}
  .navin{min-height:62px!important;height:auto!important}
  .brand{font-size:21px!important}
  .btn{font-size:13px!important;padding-left:14px!important;padding-right:14px!important}

  .hero-experience .hero{min-height:calc(100svh - 62px)!important;padding:44px 0!important;overflow:hidden!important}
  .hero-experience .hero-copy-center{padding:0 12px!important;overflow:visible!important}
  .hero-experience .hero h1{font-size:clamp(22px,6.2vw,27px)!important;line-height:1.23!important;letter-spacing:-.035em!important}
  body.lang-en .hero-experience .hero h1{font-size:clamp(18px,5.15vw,22px)!important;letter-spacing:-.025em!important}
  body.lang-ko .hero-experience .hero h1{font-size:clamp(20px,5.6vw,24px)!important}
  body.lang-zh .hero-experience .hero h1{font-size:clamp(21px,5.9vw,26px)!important}
  .hero-experience .hero .hero-title-line{white-space:nowrap!important;max-width:calc(100vw - 36px)!important}

  .product-head,.core-tech-head,#faq .head,.pricing .head,.home-clinic-head{max-width:none!important}
  .product-head h2,.core-tech-head h2,#faq .head h2,.pricing .head h2,.home-clinic-head h2{font-size:27px!important;line-height:1.34!important;letter-spacing:-.025em!important;margin-bottom:14px!important}
  .product-head p,.core-tech-head>p,#faq .head>p,.pricing .head>p,.home-clinic-head>p{font-size:15px!important;line-height:1.75!important}
  .product-head,#faq .head,.pricing .head{margin-bottom:28px!important}

  .product-card h3,.workflow-label,.pricing-value-item strong,.clinic-problem-group h3{font-size:17px!important}
  .product-card p,.workflow-panel p,.workflow-panel li,.faq details p{font-size:14px!important;line-height:1.7!important}
  .workflow-chain span{font-size:13px!important}

  .hero-experience .hero-preview-wrap{padding-left:10px!important;padding-right:10px!important}
  .core-technology{padding-left:14px!important;padding-right:14px!important}
  .core-tech-pillars span,.core-tech-capabilities span{font-size:12px!important}
  .faq details summary{font-size:15px!important;line-height:1.5!important}
  .price{font-size:40px!important}
  .pricing-value-grid{grid-template-columns:1fr!important}
  .pricing-value-item{padding:16px!important}
  .pricing-value-item strong{font-size:15px!important}

  .home-clinic .clinic-cta{width:100%!important;max-width:360px!important;font-size:14px!important}
  .hero-experience>.clinic-support{margin-top:48px!important;margin-bottom:42px!important}
  .clinic-support{padding:24px 18px!important;border-radius:22px!important}
  .clinic-support h2{font-size:27px!important;line-height:1.35!important}
  .clinic-support-lead{font-size:15px!important;line-height:1.75!important}
  .clinic-support-step strong{font-size:15px!important}
  .clinic-support-step span{font-size:13.5px!important}

  .page-hero{padding:58px 0 34px!important}
  .page-hero h1{font-size:34px!important;line-height:1.25!important}
  .contact-section,.policy-wrap{padding:20px 0 64px!important}
  .contact-card,.policy-card{padding:24px 18px!important;border-radius:18px!important}
  .policy-intro,.policy-section p,.policy-section li{font-size:14px!important;line-height:1.8!important}
  .policy-section{padding:24px 0!important}
  .policy-section h2{font-size:19px!important;line-height:1.5!important}
  .policy-section h3{font-size:16px!important}

  .clinic-lite{padding:54px 16px 54px!important}
  .clinic-lite-hero{margin-bottom:44px!important}
  .clinic-lite-hero h1{font-size:36px!important;line-height:1.2!important}
  .clinic-lite-hero h2{font-size:20px!important;line-height:1.55!important}
  .clinic-lite-hero p,.clinic-lite-heading p{font-size:14.5px!important;line-height:1.75!important}
  .clinic-lite-section{margin-top:54px!important}
  .clinic-lite-heading{margin-bottom:26px!important}
  .clinic-lite-heading h2{font-size:27px!important;line-height:1.35!important}
  .clinic-problem-groups{grid-template-columns:1fr!important;gap:12px!important}
  .clinic-problem-group{padding:19px 17px!important}
  .clinic-problem-list li{font-size:14px!important}
  .clinic-cause-band{padding:20px 16px!important}
  .clinic-cause-list{gap:7px!important}
  .clinic-cause-list span{font-size:12.5px!important;padding:7px 10px!important}

  .footer .foot{gap:28px!important}
  .footer a{font-size:13px!important}
}

@media (max-width:360px){
  .hero-experience .hero h1{font-size:20px!important}
  body.lang-en .hero-experience .hero h1{font-size:17px!important}
  body.lang-ko .hero-experience .hero h1{font-size:18.5px!important}
  body.lang-zh .hero-experience .hero h1{font-size:19.5px!important}
}