@charset "utf-8";

:root{
  --page-bg:#f8f5ef;
  --hero-bg:#eadfce;
  --section-bg:#ffffff;
  --card-bg:#fbfaf7;
  --line:#e4ddd2;
  --text:#312d28;
  --muted:#7b6d5e;
  --subtle:#9b8b78;
  --accent:#a08767;
  --accent-dark:#6d5b48;
  --accent-soft:#f2eadf;
  --shadow:0 14px 34px rgba(74,62,48,.08);
}

*{
  box-sizing:border-box;
}

body{
  margin:0;
  letter-spacing:-0.035em;
  word-break:keep-all;
  -webkit-font-smoothing:antialiased;
	background:#f9f7f4;
}

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

.hero{
  margin:0 0 36px;
  padding:74px 0 44px;

  background:linear-gradient(
    180deg,
    #EADFCE 0%,
    #E8DDCC 25%,
    #F0EAE2 60%,
    #F9F7F4 100%
  );
}

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

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

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

.clinic-name{
  margin:0 0 20px;
  font-size:clamp(42px,5vw,64px);
  font-weight:800;
  line-height:1.15;
  letter-spacing:-0.06em;
  color:#2f2b27;
}

.clinic-en{
  margin:0 0 34px;
  font-size:clamp(13px,1.5vw,17px);
  font-weight:600;
  line-height:1.5;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#9b8b78;
}

.hero-copy{
  margin:0 0 26px;
  padding:10px 25px;
  display:inline-block;
  background:var(--accent-soft);
  border:1px solid var(--line);
  border-radius:999px;
  font-size:clamp(18px,2vw,24px);
  font-weight:800;
  line-height:1.7;
  color:#7a6d5d;
}

.hero-title,
.hero-desc{
  display:block;
  margin:0;
  padding:0;
  font-size:clamp(30px,4.5vw,40px);
  font-weight:800;
  line-height:1.25;
  letter-spacing:-0.06em;
  color:#6e5d4b;
}

.hero-title::after{
  display:none;
}

.hero-title + .hero-desc{
  margin-top:4px;
}

.page-wrap .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 28px;
  padding-bottom:20px;
  font-size:clamp(30px,4vw,40px);
  font-weight:800;
  line-height:1.25;
  letter-spacing:-0.06em;
  color:#6e5d4b;
  text-align:center;
}

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

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

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

.card-grid:has(.card:nth-child(3)):not(:has(.card:nth-child(4))){
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.card-grid:has(.card:nth-child(6)):not(:has(.card:nth-child(7))){
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.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;
  font-size:clamp(21px,2.4vw,26px);
  font-weight:800;
  line-height:1.35;
  color:#332e28;
  letter-spacing:-0.04em;
}

.card-text{
  padding-top:15px;
  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{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:14px;
  margin:0;
  padding:0;
  list-style:none;
}

.feature-list li{
  min-height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  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:#3d372f;
}

.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:800;
  line-height:1.48;
  color:#332e28;
}

.notice,
.notice-box{
  margin:24px 0 0;
  padding:18px 20px;
  background:#fff;;
  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-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  align-items:stretch;
  width:100%;
  max-width:none;
  margin:0;
}

.process-grid:has(.card:nth-child(3)):not(:has(.card:nth-child(4))){
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.process-grid:has(.card:nth-child(4)){
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.process-grid .card{
  min-height:360px;
  padding:38px 28px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
}

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

.process-grid .card-title{
  font-size:clamp(24px,2.6vw,30px);
  line-height:1.25;
  text-align:center;
}

.process-grid .card-title::after{
  left:50%;
  transform:translateX(-50%);
}

.process-grid .card-text{
  font-size:clamp(16px,1.7vw,19px);
  line-height:1.85;
  text-align:center;
}

.symptom-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:14px;
  width:100%;
  max-width:none;
  margin:0;
}

.symptom-item{
  min-height:96px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px 22px;
  background:var(--card-bg);
  border:1px solid var(--line);
  border-radius:18px;
  text-align:center;
  font-size:clamp(17px,1.8vw,20px);
  font-weight:700;
  line-height:1.45;
  color:#3d372f;
}

.section.point .symptom-grid,
.section.point .feature-list{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  max-width:100%;
  margin:0 auto;
}

.section.point .symptom-item,
.section.point .feature-list li{
  width:auto;
  min-height:auto;
  padding:14px 22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#f7f1e7;
  border:1px solid #e4d8c8;
  border-radius:999px;
  font-size:16px;
  font-weight:700;
  line-height:1.4;
  color:#7b6549;
  white-space:nowrap;
  flex:none;
}

.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:#332e28;
  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-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:800;
  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:#3d372f;
}

.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:800;
}

.plain-list{
  margin:0;
  padding:0;
  list-style:none;
}

.plain-list li{
  position:relative;
  padding-left:18px;
  margin:8px 0;
  font-size:17px;
  line-height:1.8;
  color:#5b544b;
}

.plain-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:15px;
  width:8px;
  height:2px;
  border-radius:999px;
  background:var(--accent);
}

.contact-card{
  padding:38px 32px;
  background:var(--card-bg);
  border:1px solid var(--line);
  border-radius:24px;
  text-align:center;
}

.contact-line{
  margin:0;
  line-height:1.65;
  color:#3d372f;
}

.contact-line.address{
  font-size:clamp(22px,2.5vw,30px);
  font-weight:800;
  letter-spacing:-0.04em;
  color:#2f2b27;
}

.contact-line.location{
  margin-top:8px;
  font-size:clamp(15px,1.5vw,17px);
  font-weight:500;
  color:#8a7b69;
}

.contact-line.phone{
  margin-top:26px;
  font-size:clamp(34px,4vw,48px);
  font-weight:800;
  line-height:1.25;
  letter-spacing:-0.04em;
  color:var(--accent-dark);
}

.contact-line.mobile{
  margin-top:4px;
  font-size:clamp(19px,2vw,24px);
  font-weight:700;
  color:#4d4740;
}

.contact-line.guide{
  margin-top:20px;
  font-size:clamp(16px,1.7vw,18px);
  font-weight:400;
  line-height:1.8;
  color:#6e665c;
}

.contact-line.kakao{
  display:inline-block;
  margin-top:22px;
  padding:10px 18px;
  background:var(--accent-soft);
  border:1px solid var(--line);
  border-radius:999px;
  font-size:clamp(15px,1.5vw,17px);
  font-weight:700;
  color:var(--accent-dark);
}

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

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

.table-wrap::-webkit-scrollbar{
    height:8px;
}

.table-wrap::-webkit-scrollbar-track{
    background:#eee;
}

.table-wrap::-webkit-scrollbar-thumb{
    background:#b7a187;
    border-radius:999px;
}
.table-wrap
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;
}
.table-wrap
th{
  background:#eee7dc;
  color:#3b3329;
  font-weight:800;
}
.table-wrap
td{
  font-weight:400;
  color:#514b43;
}
.table-wrap
td:first-child{
  font-weight:700;
  color:#3b3833;
}

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

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

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

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

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

  .hero-inner{
    padding:0 18px;
  }

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

  .clinic-name{
    font-size:clamp(36px,9vw,48px);
  }

  .clinic-en{
    margin-bottom:28px;
  }

  .hero-title,
  .hero-desc{
    font-size:clamp(28px,7.5vw,40px);
  }

  .section{
    margin:26px 0;
    padding:40px 20px;
    border-radius:22px;
  }

  .section-title{
    margin-bottom:24px;
    padding-bottom:18px;
    font-size:clamp(26px,7vw,38px);
  }

  .section-sub{
    margin-bottom:10px;
    font-size:16px;
  }

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

  .card,
  .program-card,
  .number-card,
  .symptom-item{
    width:100%;
    min-height:auto;
  }

  .card{
    padding:26px 22px;
  }

  .process-grid .card{
    min-height:auto;
    padding:28px 22px;
  }

  .feature-list li{
    min-height:auto;
  }

  .contact-card{
    padding:30px 20px;
  }

  .contact-line.phone{
    font-size:clamp(30px,9vw,40px);
  }

  table{
    min-width:560px;
  }
}

@media (max-width:480px){
  .page-wrap{
    padding:0 14px 50px;
  }

  .hero-inner{
    padding:0 14px;
  }

  .hero-card{
    padding:38px 16px;
    border-radius:22px;
  }

  .section{
    padding:34px 16px;
  }

  .card,
  .program-card,
  .contact-card{
    padding:24px 18px;
  }

  .section-title{
    font-size:clamp(25px,8vw,34px);
  }

  .section-sub{
    font-size:15px;
  }

  .clinic-name{
    font-size:clamp(34px,10vw,44px);
  }

  .hero-copy{
    font-size:17px;
  }

  .hero-title,
  .hero-desc{
    font-size:clamp(26px,8.5vw,36px);
  }

  .section.point .symptom-grid,
  .section.point .feature-list{
    justify-content:flex-start;
    gap:10px;
  }

  .section.point .symptom-item,
  .section.point .feature-list li{
    padding:12px 18px;
    font-size:15px;
  }
}