/* ============================================
   FOR ME Skin & Body — Global Stylesheet
   ============================================ */
:root{
  --copper: #C77B5C;
  --copper-deep: #A65E40;
  --copper-soft: #E5BFA8;
  --cream: #FAF6F1;
  --cream-deep: #F1EADE;
  --ink: #1F1A17;
  --ink-soft: #4A413C;
  --ink-muted: #8B8079;
  --border: rgba(31,26,23,0.12);
  --border-soft: rgba(31,26,23,0.06);
  --kakao: #FEE500;
  --kakao-text: #3A1D1D;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Pretendard Variable', Pretendard, sans-serif;
  color:var(--ink); background:var(--cream);
  line-height:1.7; font-weight:350;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block;}
a{color:inherit; text-decoration:none;}
em, i{
  font-family:'Cormorant Garamond', serif;
  font-style:italic; color:var(--copper-deep);
  font-weight:400;
}

/* ===== NAV ===== */
nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:0.9rem 2.5rem;
  background:rgba(250,246,241,0.92);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:0.5px solid var(--border-soft);
  display:flex; justify-content:space-between; align-items:center;
}
nav .logo-link{display:flex; align-items:center;}
nav .logo-mark{height:54px; width:auto;}
nav ul{display:flex; gap:2.2rem; list-style:none;}
nav ul a{
  color:var(--ink-soft); font-size:13px;
  letter-spacing:0.18em; text-transform:uppercase;
  transition:color .3s;
}
nav ul a:hover{color:var(--copper);}
nav ul a.active{color:var(--copper-deep);}
nav .reserve-btn{
  padding:10px 22px; background:var(--ink); color:var(--cream);
  border:none; font-size:11px; letter-spacing:0.2em;
  cursor:pointer; text-transform:uppercase; font-family:inherit;
  transition:background .3s;
}
nav .reserve-btn:hover{background:var(--copper-deep);}
@media(max-width:768px){
  nav{padding:0.7rem 1.25rem;}
  nav .logo-mark{height:42px;}
  nav ul{display:none;}
}

/* ===== FLOATING KAKAO ===== */
.floating-kakao{
  position:fixed; right:1.5rem; bottom:1.5rem; z-index:99;
  display:flex; align-items:center; gap:0.6rem;
  padding:14px 22px;
  background:var(--kakao); color:var(--kakao-text);
  border-radius:100px; font-size:13px; font-weight:500;
  box-shadow:0 6px 20px rgba(0,0,0,0.14);
  transition:all .3s; cursor:pointer;
  text-decoration:none;
}
.floating-kakao:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 28px rgba(0,0,0,0.2);
  background:#FFD800;
}
.floating-kakao svg{width:24px; height:24px; fill:var(--kakao-text); flex-shrink:0;}
.floating-kakao .label{white-space:nowrap;}
@media(max-width:768px){
  .floating-kakao{
    right:1rem; bottom:1rem;
    padding:12px 18px; font-size:12.5px;
  }
  .floating-kakao svg{width:20px; height:20px;}
}

/* ===== PAGE HEADER (서브 페이지 상단) ===== */
.page-header{
  padding:9rem 2rem 5rem;
  background:
    radial-gradient(ellipse at top, rgba(199,123,92,0.06) 0%, transparent 60%),
    var(--cream);
  text-align:center;
}
.page-header .eyebrow{
  font-size:11px; letter-spacing:0.45em;
  color:var(--copper); margin-bottom:1.5rem;
  text-transform:uppercase;
}
.page-header h1{
  font-size:clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight:300; letter-spacing:-0.01em;
  line-height:1.4; margin-bottom:1.5rem;
}
.page-header h1 em{
  font-family:'Cormorant Garamond', serif;
  font-style:italic; color:var(--copper-deep); font-weight:400;
}
.page-header .lead{
  font-size:15px; line-height:2.1; color:var(--ink-soft);
  max-width:560px; margin:0 auto;
}

/* ===== COMMON SECTIONS ===== */
section{padding:6rem 2rem;}
.container{max-width:1100px; margin:0 auto;}
.container-narrow{max-width:780px; margin:0 auto;}

.section-eyebrow{
  font-size:11px; letter-spacing:0.4em; color:var(--copper);
  text-transform:uppercase; margin-bottom:1.25rem; text-align:center;
}
.section-title{
  font-size:clamp(1.7rem, 3vw, 2.4rem); font-weight:300;
  text-align:center; margin-bottom:1.5rem;
  letter-spacing:-0.01em; line-height:1.4;
}
.section-title em{
  font-family:'Cormorant Garamond', serif;
  font-style:italic; color:var(--copper-deep);
}
.section-lead{
  font-size:15px; line-height:2.1; color:var(--ink-soft);
  text-align:center; max-width:560px; margin:0 auto 4rem;
}

/* ===== BUTTONS ===== */
.btn-primary, .btn-ghost, .btn-kakao{
  padding:14px 32px; font-size:12px;
  letter-spacing:0.25em; text-transform:uppercase;
  cursor:pointer; transition:all .3s;
  display:inline-flex; align-items:center; gap:0.6rem;
  font-family:inherit; border:none;
}
.btn-primary{background:var(--copper); color:var(--cream);}
.btn-primary:hover{background:var(--copper-deep); color:var(--cream);}
.btn-ghost{background:transparent; color:var(--ink); border:0.5px solid var(--ink);}
.btn-ghost:hover{background:var(--ink); color:var(--cream);}
.btn-kakao{background:var(--kakao); color:var(--kakao-text);}
.btn-kakao:hover{background:#FFD800; color:var(--kakao-text);}

/* ===== FOOTER ===== */
footer{
  background:var(--ink); color:var(--cream);
  padding:4rem 2rem 2rem;
}
footer .footer-grid{
  max-width:1100px; margin:0 auto 3rem;
  display:grid; grid-template-columns:1.2fr 1fr 1fr;
  gap:3rem;
}
footer .footer-brand .logo-foot{
  height:90px; width:auto; margin-bottom:0.5rem;
}
footer .footer-brand .tagline{
  font-family:'Cormorant Garamond', serif; font-style:italic;
  font-size:14px; color:rgba(250,246,241,0.55); margin-top:0.3rem;
}
footer .footer-col h4{
  font-size:11px; letter-spacing:0.3em; text-transform:uppercase;
  color:var(--copper-soft); font-weight:500;
  margin-bottom:1.25rem;
}
footer .footer-col ul{list-style:none; display:flex; flex-direction:column; gap:0.6rem;}
footer .footer-col a, footer .footer-col li{
  color:rgba(250,246,241,0.7); font-size:13px; line-height:1.7;
  transition:color .3s;
}
footer .footer-col a:hover{color:var(--copper-soft);}
footer .legal{
  max-width:1100px; margin:0 auto;
  padding-top:2rem; border-top:0.5px solid rgba(250,246,241,0.1);
  display:flex; justify-content:space-between; gap:2rem;
  font-size:11px; color:rgba(250,246,241,0.4); flex-wrap:wrap;
  line-height:1.9;
}
footer .legal .copy{letter-spacing:0.2em; text-transform:uppercase;}
@media(max-width:768px){
  footer .footer-grid{grid-template-columns:1fr; gap:2.5rem;}
  footer .legal{flex-direction:column; gap:0.5rem;}
}

/* ===== ANIMATIONS ===== */
@keyframes fadeUp{from{opacity:0; transform:translateY(30px);}to{opacity:1; transform:translateY(0);}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}