@charset "utf-8";

/* ==============================
   Common Medical Landing CSS
   - 병원명/주제명 비의존 공통 클래스
   - HTML에 인라인 style 사용 금지
   ============================== */

:root{
  --page-bg:#f8f5ef;
  --hero-bg:#eadfce;
  --section-bg:#ffffff;
  --card-bg:#fbfaf7;
  --line:#e4ddd2;
  --text:#2d2a26;
  --muted:#746c61;
  --subtle:#918678;
  --accent:#8b7558;
  --accent-dark:#5f4d38;
  --accent-soft:#f1eadf;
  --shadow:0 14px 34px rgba(74,62,48,.08);
}

*{
  box-sizing:border-box;
}

body{
  margin:0;
  background:var(--page-bg);
  color:var(--text);
  font-family:"Pretendard","Noto Sans KR","Apple SD Gothic Neo",Arial,sans-serif;
  line-height:1.75;
  letter-spacing:-0.035em;
  word-break:keep-all;
  -webkit-font-smoothing:antialiased;
}

/* ==============================
   Layout
============================== */

.page-wrap{
  width:100%;
  max-width:1120px;
  margin:0 auto;
  padding:0 22px 84px;
}

/* ==============================
   Hero
============================== */

.hero{
  margin:0 0 36px;
  padding:74px 0 44px;
  background:linear-gradient(180deg,#eadfce 0%,#f4eee5 100%);
}

.hero-inner{
  width:100%;
  max-width:1120px;
  margin:0 auto;
  padding:0 22px;
}

.hero-card{
  position:relative;
  overflow:hidden;
  padding:70px 38px 66px;
  background:#fffaf3;
  border:1px solid var(--line);
  border-radius:34px;
  box-shadow:var(--shadow);
  text-align:center;
}

.hero-card::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  width:116px;
  height:6px;
  background:var(--accent);
  border-radius:0 0 999px 999px;
  transform:translateX(-50%);
}

.clinic-name{
  margin:0 0 10px;
  font-size:clamp(40px,6vw,68px);
  font-weight:900;
  line-height:1.12;
  color:#26231f;
  letter-spacing:-0.05em;
}

.clinic-en{
  margin:0 0 34px;
  font-size:clamp(14px,2vw,20px);
  font-weight:700;
  color:var(--accent);
  letter-spacing:.04em;
}

.hero-copy{
  margin:0 0 24px;
  font-size:clamp(18px,2.4vw,25px);
  font-weight:600;
  color:#5f574d;
  letter-spacing:-0.03em;
}

.hero-title{
  position:relative;
  display:inline-block;
  margin:18px 0 22px;
  padding-bottom:22px;
  font-size:clamp(36px,5vw,56px);
  font-weight:900;
  line-height:1.18;
  color:#211f1c;
  letter-spacing:-0.055em;
}

.hero-title::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  width:88px;
  height:4px;
  background:var(--accent);
  border-radius:999px;
  transform:translateX(-50%);
}

.hero-desc{
  margin:0;
  font-size:clamp(21px,3vw,30px);
  font-weight:700;
  line-height:1.55;
  color:#655846;
}

/* ==============================
   Section
============================== */

.section{
  margin:34px 0;
  padding:54px 44px;
  background:var(--section-bg);
  border:1px solid var(--line);
  border-radius:28px;
  box-shadow:var(--shadow);
}

.section-title{
  position:relative;
  margin:0 0 30px;
  padding-bottom:23px;
  font-size:clamp(32px,4.6vw,50px);
  font-weight:900;
  line-height:1.22;
  color:#25221e;
  text-align:center;
  letter-spacing:-0.055em;
}

.section-title::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  width:82px;
  height:4px;
  background:var(--accent);
  border-radius:999px;
  transform:translateX(-50%);
}

.section-sub{
  margin:-6px auto 38px;
  max-width:820px;
  text-align:center;
  font-size:clamp(18px,2vw,22px);
  font-weight:400;
  line-height:1.75;
  color:var(--muted);
}

/* ==============================
   Cards
============================== */

.card-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}

.card-grid.three{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.card{
  padding:28px 26px;
  background:var(--card-bg);
  border:1px solid var(--line);
  border-radius:22px;
}

.card-title{
  position:relative;
  margin:0 0 20px;
  padding-bottom:15px;
  font-size:clamp(21px,2.4vw,26px);
  font-weight:800;
  line-height:1.35;
  color:#302b25;
  letter-spacing:-0.04em;
}

.card-title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:42px;
  height:3px;
  background:var(--accent);
  border-radius:999px;
}

.center-text .card-title::after,
.card.center-text .card-title::after{
  left:50%;
  transform:translateX(-50%);
}

.card-text{
  margin:0;
  font-size:clamp(16px,1.8vw,18px);
  font-weight:400;
  line-height:1.75;
  color:#5b544b;
}

.card-spacing{
  margin-top:22px;
}

.center-text{
  text-align:center;
}

/* ==============================
   Feature List
============================== */

.feature-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin:0;
  padding:0;
  list-style:none;
}

.feature-list li{
  padding:18px 20px;
  background:var(--card-bg);
  border:1px solid var(--line);
  border-radius:18px;
  font-size:clamp(17px,1.9vw,20px);
  font-weight:700;
  line-height:1.45;
  text-align:center;
  color:#39342e;
}

/* ==============================
   Text Emphasis
============================== */

.emphasis{
  display:inline-block;
  padding:6px 16px;
  margin-bottom:14px;
  background:var(--accent-soft);
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--accent-dark);
  font-size:16px;
  font-weight:800;
}

.big-copy{
  margin:0;
  font-size:clamp(22px,2.8vw,30px);
  font-weight:900;
  line-height:1.48;
  color:#2b2824;
}

.notice,
.notice-box{
  margin:24px 0 0;
  padding:18px 20px;
  background:var(--card-bg);
  border:1px solid var(--line);
  border-radius:18px;
  font-size:clamp(14px,1.5vw,16px);
  font-weight:400;
  line-height:1.75;
  color:#6a6258;
}

.notice-box p{
  margin:0;
}

.notice-box p + p{
  margin-top:8px;
}

/* ==============================
   Process
============================== */

.process-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}

.step-label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:54px;
  height:54px;
  margin-bottom:16px;
  border-radius:50%;
  background:var(--accent-soft);
  color:var(--accent-dark);
  font-size:18px;
  font-weight:900;
}

/* ==============================
   Symptoms
============================== */

.symptom-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.symptom-item{
  min-height:92px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:var(--card-bg);
  border:1px solid var(--line);
  border-radius:18px;
  text-align:center;
  font-size:clamp(17px,1.8vw,19px);
  font-weight:700;
  line-height:1.5;
  color:#38332d;
}

/* ==============================
   Treatment Program
============================== */

.treatment-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}

.program-card{
  padding:30px 28px;
  background:var(--card-bg);
  border:1px solid var(--line);
  border-radius:22px;
}

.program-card h3{
  position:relative;
  margin:0 0 20px;
  padding-bottom:15px;
  font-size:clamp(22px,2.6vw,28px);
  font-weight:800;
  color:#302b25;
  letter-spacing:-0.04em;
}

.program-card h3::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:42px;
  height:3px;
  background:var(--accent);
  border-radius:999px;
}

.program-card p{
  margin:0;
  font-size:clamp(16px,1.8vw,18px);
  font-weight:400;
  line-height:1.75;
  color:#5b544b;
}

/* ==============================
   Number Cards
============================== */

.number-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:26px;
}

.number-card{
  padding:30px 22px;
  background:var(--card-bg);
  border:1px solid var(--line);
  border-radius:22px;
  text-align:center;
}

.number-card strong{
  position:relative;
  display:inline-block;
  margin-bottom:16px;
  padding-bottom:10px;
  font-size:32px;
  font-weight:900;
  color:var(--accent);
}

.number-card strong::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  width:34px;
  height:3px;
  background:var(--accent);
  border-radius:999px;
  transform:translateX(-50%);
}

.number-card p{
  margin:0;
  font-size:clamp(17px,1.9vw,20px);
  font-weight:700;
  line-height:1.55;
  color:#3b352e;
}

/* ==============================
   Q&A
============================== */

.qa-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:58px;
  height:58px;
  margin:0 auto 16px;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  font-size:30px;
  font-weight:900;
}

/* ==============================
   List
============================== */

.plain-list{
  margin:0;
  padding-left:20px;
}

.plain-list li{
  margin:4px 0;
  font-size:17px;
  line-height:1.7;
  color:#5b544b;
}

/* ==============================
   Contact
============================== */

.contact-card{
  padding:34px 30px;
  background:var(--card-bg);
  border:1px solid var(--line);
  border-radius:24px;
}

.contact-line{
  margin:0 0 12px;
  font-size:clamp(17px,1.9vw,20px);
  font-weight:700;
  line-height:1.6;
  color:#38322c;
}

/* ==============================
   Table
============================== */

.table-wrap{
  overflow-x:auto;
  margin-top:22px;
  background:var(--card-bg);
  border:1px solid var(--line);
  border-radius:22px;
}

table{
  width:100%;
  border-collapse:collapse;
  min-width:640px;
  background:var(--card-bg);
}

th,
td{
  padding:16px 14px;
  border:1px solid var(--line);
  text-align:center;
  vertical-align:middle;
  font-size:clamp(15px,1.6vw,17px);
  line-height:1.65;
}

th{
  background:#eee7dc;
  color:#3b3329;
  font-weight:800;
}

td{
  font-weight:400;
  color:#514b43;
}

td:first-child{
  font-weight:700;
  color:#3b3833;
}

.comparison-table td{
  text-align:center;
}

.grade-table td{
  text-align:left;
}

.grade-table td:first-child{
  width:160px;
  text-align:center;
  font-size:20px;
  font-weight:900;
  color:var(--accent);
}

/* ==============================
   Mobile
============================== */

@media (max-width:900px){
  .page-wrap{
    padding:0 18px 60px;
  }

  .section{
    padding:40px 22px;
    border-radius:22px;
  }

  .section-title{
    margin-bottom:26px;
    padding-bottom:20px;
    font-size:clamp(30px,8vw,42px);
  }

  .section-title::after{
    width:70px;
    height:3px;
  }

  .section-sub{
    margin-bottom:32px;
    font-size:17px;
  }

  .card-grid,
  .card-grid.three,
  .process-grid,
  .symptom-grid,
  .treatment-grid,
  .number-grid,
  .feature-list{
    grid-template-columns:1fr;
  }

  .hero{
    padding:46px 0 28px;
  }

  .hero-card{
    padding:42px 20px;
  }

  .hero-title::after{
    width:72px;
    height:3px;
  }
}