
:root{
  --ink:#1B221F;
  --ink-soft:#4E5852;
  --ink-faint:#7C8781;
  --paper:#FCFBF8;
  --paper-warm:#F3F1EA;
  --celadon:#4F7261;
  --celadon-deep:#3A5648;
  --celadon-wash:#E4EBE5;
  --ochre:#8A6A31;
  --line:#DCD9D0;
  --serif:'Noto Serif KR','Nanum Myeongjo','Apple SD Gothic Neo',serif;
  --sans:'Pretendard','Pretendard Variable','Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
  --wrap:46rem;
}

*{box-sizing:border-box;}

html{font-size:18px;-webkit-text-size-adjust:100%;}

body,button,input,textarea{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.85;
  letter-spacing:-.01em;
  word-break:keep-all;
  overflow-wrap:anywhere;
  padding-bottom:4.6rem;
}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 1.5rem;}

/* ---------- 상단 ---------- */

header.site{
  border-bottom:1px solid var(--line);
  background:var(--paper);
}
.site-inner{
  max-width:var(--wrap);margin:0 auto;padding:1.1rem 1.5rem;
  display:flex;align-items:baseline;gap:1.1rem;flex-wrap:wrap;
}
.brand{
  font-family:var(--serif);font-weight:800;font-size:1.22rem;
  color:var(--ink);text-decoration:none;letter-spacing:-.02em;white-space:nowrap;
}
.brand-sub{font-size:.78rem;color:var(--ink-faint);letter-spacing:.02em;}
nav.site{margin-left:auto;display:flex;gap:1.15rem;}
nav.site a{
  font-size:.86rem;color:var(--ink-soft);text-decoration:none;
  padding-bottom:.15rem;border-bottom:1px solid transparent;
}
nav.site a:hover,nav.site a:focus-visible{color:var(--celadon-deep);border-bottom-color:var(--celadon);}
nav.site a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink);}

/* ---------- 히어로 ---------- */

.hero{padding:4.2rem 0 3.4rem;}
.hero-stmt{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.72rem;
  line-height:1.72;
  letter-spacing:-.025em;
  margin:0;
  padding-left:1.3rem;
  border-left:2px solid var(--celadon);
  color:var(--ink);
}
.hero-stmt .turn{
  display:block;
  margin-top:1.1rem;
  font-weight:800;
  font-size:2.12rem;
  line-height:1.5;
}
.hero-note{
  margin:2.1rem 0 0;
  padding-left:1.3rem;
  color:var(--ink-soft);
  font-size:.98rem;
  max-width:34rem;
}

/* ---------- 섹션 ---------- */

section{padding:3.1rem 0;border-top:1px solid var(--line);}
section:first-of-type{border-top:none;}

h1{
  font-family:var(--serif);font-weight:800;font-size:2.1rem;line-height:1.45;
  letter-spacing:-.03em;margin:0 0 1.4rem;
}
h2{
  font-family:var(--serif);font-weight:800;font-size:1.42rem;line-height:1.55;
  letter-spacing:-.025em;margin:0 0 1.3rem;
}
h3{
  font-family:var(--sans);font-weight:700;font-size:1.06rem;line-height:1.6;
  letter-spacing:-.02em;margin:2.3rem 0 .6rem;
}
p{margin:0 0 1.15rem;}
p:last-child{margin-bottom:0;}
.lead{font-size:1.1rem;color:var(--ink-soft);margin-bottom:1.9rem;}
a{color:var(--celadon-deep);}
strong{font-weight:700;}
em{font-style:normal;color:var(--celadon-deep);font-weight:600;}

/* ---------- 세 갈래 ---------- */

.branches{display:grid;gap:0;margin:0;padding:0;list-style:none;}
.branches li{padding:1.5rem 0;border-top:1px solid var(--line);}
.branches li:first-child{border-top:none;padding-top:0;}
.branch-name{
  font-family:var(--serif);font-weight:700;font-size:1.18rem;
  letter-spacing:-.02em;margin:0 0 .35rem;color:var(--celadon-deep);
}
.branch-sign{color:var(--ink-soft);font-size:.96rem;margin:0;}

/* ---------- 진료 정보 ---------- */

.facts{margin:0;}
.facts div{
  display:flex;gap:1.1rem;align-items:baseline;
  padding:.72rem 0;border-bottom:1px solid var(--line);
}
.facts div:first-child{border-top:1px solid var(--line);}
.facts dt{
  flex:0 0 5.2rem;font-size:.86rem;color:var(--ink-faint);
  margin:0;letter-spacing:.01em;
}
.facts dd{margin:0;flex:1;}
.facts .minor{color:var(--ink-faint);font-size:.88rem;}

/* ---------- 이력 ---------- */

.cv{list-style:none;margin:0;padding:0;font-size:.95rem;color:var(--ink-soft);}
.cv li{padding:.42rem 0;border-bottom:1px solid var(--line);}
.cv li:first-child{border-top:1px solid var(--line);}

.paper{
  background:var(--paper-warm);
  padding:1.5rem 1.6rem;
  margin:1.7rem 0;
  font-size:.95rem;
  color:var(--ink-soft);
}
.paper .t{
  font-family:var(--serif);font-weight:700;color:var(--ink);
  font-size:1rem;display:block;margin-bottom:.4rem;line-height:1.6;
}

/* ---------- 글 목록 ---------- */

.posts{list-style:none;margin:0;padding:0;}
.posts li{border-bottom:1px solid var(--line);}
.posts li:first-child{border-top:1px solid var(--line);}
.posts a{
  display:block;padding:1.35rem 0;text-decoration:none;color:var(--ink);
}
.posts a:hover .pt,.posts a:focus-visible .pt{color:var(--celadon-deep);}
.pt{
  font-family:var(--serif);font-weight:700;font-size:1.12rem;
  line-height:1.6;letter-spacing:-.02em;display:block;
}
.pd{font-size:.86rem;color:var(--ink-faint);margin-top:.3rem;display:block;}

/* ---------- 본문 글 ---------- */

article.post{padding:3rem 0 1rem;}
article.post h2{margin-top:3rem;}
article.post h3{margin-top:2rem;}
article.post ul{padding-left:1.15rem;margin:0 0 1.15rem;}
article.post li{margin-bottom:.5rem;}
.post-date{font-size:.86rem;color:var(--ink-faint);margin:0 0 .9rem;}

.callout{
  border-left:2px solid var(--ochre);
  padding:.2rem 0 .2rem 1.2rem;
  margin:1.8rem 0;
  color:var(--ink-soft);
}

.answer{
  background:var(--celadon-wash);
  padding:1.6rem 1.7rem;
  margin:2.6rem 0 0;
}
.answer h3{margin-top:0;font-size:.86rem;color:var(--celadon-deep);letter-spacing:.02em;}
.answer p{margin-bottom:0;font-size:.97rem;}

/* ---------- 하단 ---------- */

footer.site{
  border-top:1px solid var(--line);
  margin-top:3rem;padding:2.4rem 0 3rem;
  font-size:.84rem;color:var(--ink-faint);line-height:1.9;
}
footer.site a{color:var(--ink-faint);}
footer.site .biz{margin-top:1rem;font-size:.78rem;}

/* ---------- 전화 바 ---------- */

.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  background:var(--celadon-deep);
  border-top:1px solid var(--celadon-deep);
}
.callbar{display:flex;}
.callbar a{
  flex:1;
  display:flex;align-items:center;justify-content:center;gap:.55rem;
  padding:1.05rem 1rem;
  color:#fff;text-decoration:none;font-size:1.02rem;font-weight:600;
  letter-spacing:.01em;
}
.callbar .cb-tel{background:var(--celadon-deep);}
.callbar .cb-book{background:#1F3A2C;box-shadow:inset 1px 0 0 rgba(255,255,255,.18);}
.callbar .num{font-family:var(--serif);font-weight:700;font-size:1.14rem;}
@media (min-width:641px){
  .callbar .cb-tel{justify-content:flex-end;padding-right:1.6rem;}
  .callbar .cb-book{justify-content:flex-start;padding-left:1.6rem;}
}

/* ---------- 반응형 ---------- */

@media (max-width:640px){
  html{font-size:17px;}
  .hero{padding:2.9rem 0 2.4rem;}
  .hero-stmt{font-size:1.36rem;padding-left:1rem;}
  .hero-stmt .turn{font-size:1.62rem;}
  .hero-note{padding-left:1rem;}
  h1{font-size:1.7rem;}
  h2{font-size:1.26rem;}
  .site-inner{padding:.9rem 1.2rem;gap:.6rem;}
  nav.site{margin-left:0;width:100%;gap:1rem;}
  .wrap{padding:0 1.2rem;}
  .facts div{flex-direction:column;gap:.1rem;}
  .facts dt{flex:none;}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;}
}

:focus-visible{outline:2px solid var(--celadon);outline-offset:3px;}

/* ---------- 클리닉 페이지 ---------- */

.signs{list-style:none;margin:0;padding:0;}
.signs li{padding:1.25rem 0;border-top:1px solid var(--line);}
.signs li:first-child{border-top:none;padding-top:0;}
.signs .s-t{font-weight:700;font-size:1.02rem;margin:0 0 .25rem;letter-spacing:-.02em;}
.signs .s-d{margin:0;color:var(--ink-soft);font-size:.95rem;}

.steps{list-style:none;margin:0;padding:0;counter-reset:step;}
.steps li{
  padding:1.35rem 0 1.35rem 2.7rem;position:relative;
  border-top:1px solid var(--line);counter-increment:step;
}
.steps li:first-child{border-top:none;padding-top:0;}
.steps li::before{
  content:counter(step);position:absolute;left:0;top:1.45rem;
  font-family:var(--serif);font-weight:700;font-size:1.05rem;
  color:var(--celadon);line-height:1;
}
.steps li:first-child::before{top:.35rem;}
.steps .st-t{font-family:var(--serif);font-weight:700;font-size:1.1rem;margin:0 0 .35rem;letter-spacing:-.02em;}
.steps .st-d{margin:0;color:var(--ink-soft);font-size:.96rem;}

.faq{margin:0;}
.faq dt{
  font-weight:700;font-size:1.01rem;margin:1.6rem 0 .45rem;letter-spacing:-.02em;
}
.faq dd{margin:0;color:var(--ink-soft);}

.warn{list-style:none;margin:0;padding:0;}
.warn li{
  padding:.9rem 0 .9rem 1.2rem;border-left:2px solid var(--ochre);
  margin-bottom:.9rem;
}
.warn .w-t{font-weight:700;margin:0 0 .2rem;font-size:.99rem;}
.warn .w-d{margin:0;color:var(--ink-soft);font-size:.94rem;}

.doctorbox{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:1.6rem 0;margin:2.4rem 0 0;
}
.doctorbox .dn{font-family:var(--serif);font-weight:700;font-size:1.12rem;margin:0 0 .5rem;}
.doctorbox p{font-size:.95rem;color:var(--ink-soft);}

/* ---------- 사진 ---------- */

figure.photo{margin:2.2rem 0;}
figure.photo img{
  display:block;width:100%;height:auto;
  border:1px solid var(--line);
}
figure.photo figcaption{
  margin-top:.6rem;font-size:.86rem;color:var(--ink-faint);
}
