/* ======================================================================
   [천사수랏간] 본문(전체 레이아웃) CSS - index.html 시안에서 그대로 분리
   전역 리셋 + 홈 섹션 스타일 + 서브페이지 공용 컴포넌트(breadcrumb, tab, item-grid 등)
   ====================================================================== */

:root{
  --cream:#FFF8EF;
  --cream-2:#FFF1E1;
  --blossom:#F3B6C4;
  --blossom-deep:#E8899F;
  --sage:#7E9A6D;
  --sage-deep:#5C7A4F;
  --gold:#C99A46;
  --gold-deep:#A87C2E;
  --plum:#43241F;
  --plum-soft:#6B453B;
  --peach:#FBDFC4;
  --white:#FFFFFF;
  --radius-lg: 28px;
  --radius-md: 18px;
  --shadow: 0 14px 34px rgba(107,69,59,0.12);
}

/* -------- 전역 리셋 -------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html, body{ max-width:100%; overflow-x:hidden; }
html{ font-size: 18px; } /* 기준 크기 상향(기본 16px→18px) - 전체 텍스트가 비례해서 커짐 */

/* 테마 코어 JS가 #contents_wrap에 헤더높이만큼 padding-top을 자동으로 넣어주는데,
   저희 헤더는 position:sticky라 원래 콘텐츠를 가리지 않으므로 이 보정이 불필요하게
   중복 여백을 만듭니다. 강제로 0으로 무력화합니다. */
#contents_wrap{ padding-top: 0 !important; }
body{
  background: var(--cream);
  color: var(--plum);
  font-family: 'Gowun Dodum', sans-serif;
  line-height:1.6;
}
h1,h2,h3, .display{
  font-family:'Gowun Batang', serif;
  font-weight:700;
  color: var(--plum);
}
.eyebrow{
  font-family:'Gaegu', cursive;
  font-size:1.05rem;
  color: var(--gold-deep);
  letter-spacing:0.04em;
}
a{ text-decoration:none; color:inherit; }
img{ max-width:100%; display:block; }
.container{
  max-width:1180px;
  margin:0 auto;
  padding: 0 28px;
  width:100%;
}
section{ padding: 96px 0; position:relative; }

/* 공통 버튼(히어로/구독배너 등에서 사용) */
.btn{
  display:inline-block;
  padding: 12px 26px;
  border-radius: 999px;
  font-family:'Gowun Dodum', sans-serif;
  font-size:0.95rem;
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-primary{
  background: linear-gradient(135deg, var(--blossom-deep), var(--gold));
  color:var(--white);
  box-shadow: 0 10px 24px rgba(232,137,159,0.35);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow:0 14px 30px rgba(232,137,159,0.45); }
.btn-outline{
  border:1.5px solid var(--sage);
  color: var(--sage-deep);
}
.btn-outline:hover{ background: var(--sage); color:var(--white); }

/* -------- 인장(seal) 뱃지 -------- */
.seal{
  width:64px; height:64px;
  border-radius:50%;
  border:2px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-family:'Gowun Batang', serif;
  font-weight:700;
  font-size:1.1rem;
  color: var(--gold-deep);
  background: var(--white);
  box-shadow: var(--shadow);
  position:relative;
  flex-shrink:0;
}
.seal::after{
  content:"";
  position:absolute;
  inset:6px;
  border-radius:50%;
  border:1px dashed var(--gold);
  opacity:0.6;
}

/* -------- Hero -------- */
.hero{ padding-top: 20px; position:relative; }
.hero-inner{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items:center;
  gap: 40px;
  width:100%;
}
.hero-copy .eyebrow{ margin-bottom:18px; display:block; }
.hero h1{
  font-size: clamp(2.7rem, 4.4vw, 4rem);
  line-height:1.28;
  margin-bottom:22px;
}
.hero h1 em{
  font-style:normal;
  color: var(--blossom-deep);
  background: linear-gradient(180deg, transparent 62%, var(--peach) 62%);
}
.hero p.lead{
  font-size:1.18rem;
  color: var(--plum-soft);
  max-width: 480px;
  margin-bottom: 34px;
}
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; }

.hero-art{
  position:relative;
  min-height: clamp(240px, 46vw, 480px);
  display:flex; align-items:center; justify-content:center;
  padding: 20px 0;
}
.cup-scene{
  width: clamp(200px, 60vw, 300px);
  height: clamp(200px, 60vw, 300px);
  border-radius:50%;
  background: radial-gradient(circle at 35% 30%, var(--peach), var(--blossom) 70%);
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow);
  position:relative;
  max-width:100%;
}
.cup{ width:43%; position:relative; z-index:2; }
.cup svg{ width:100%; height:auto; display:block; }
.steam{
  position:absolute;
  bottom: 55%;
  left:50%;
  transform: translateX(-50%);
  width:40%; height:53%;
  z-index:1;
}
.petal{
  position:absolute;
  width:16px; height:22px;
  background: var(--white);
  border-radius: 70% 0 70% 0;
  opacity:0;
  animation: rise 6s ease-in infinite;
}
.petal:nth-child(1){ left:8%; animation-delay:0s; background:var(--gold);}
.petal:nth-child(2){ left:38%; animation-delay:1.4s; background:var(--blossom-deep);}
.petal:nth-child(3){ left:62%; animation-delay:2.7s; background:var(--white);}
.petal:nth-child(4){ left:25%; animation-delay:4s; background:var(--sage);}
@keyframes rise{
  0%{ transform: translateY(0) rotate(0deg) scale(0.6); opacity:0;}
  15%{ opacity:0.9;}
  70%{ opacity:0.8;}
  100%{ transform: translateY(-140px) rotate(180deg) scale(1); opacity:0;}
}
.orbit-seal{
  position:absolute;
  top: -10px; right: 10px;
  animation: float 5s ease-in-out infinite;
}
@keyframes float{
  0%,100%{ transform: translateY(0);}
  50%{ transform: translateY(-12px);}
}

/* -------- 섹션 헤딩 패턴 -------- */
.section-head{ display:flex; align-items:center; gap:20px; margin-bottom: 46px; }
.section-head .seal{ width:56px; height:56px; font-size:0.95rem;}
.section-head h2{ font-size: clamp(1.9rem, 2.8vw, 2.6rem); }
.section-head p{ color:var(--plum-soft); margin-top:6px; font-size:1.08rem;}

/* 스크롤 리빌 */
.reveal{ opacity:0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

/* -------- 브랜드 스토리 -------- */
.story{
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 60px;
  display:grid; grid-template-columns: 0.9fr 1.1fr; gap:50px; align-items:center;
}
.story-art{
  height: 260px; border-radius: var(--radius-md);
  background: linear-gradient(150deg, var(--peach), var(--blossom) 55%, var(--sage) 130%);
  position:relative; overflow:hidden;
}
.story-art::before{
  content:"천"; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Gowun Batang', serif; font-size:7rem; color:rgba(255,255,255,0.45);
}
.story-copy p{ color:var(--plum-soft); margin-top:16px; }
.story-copy .divider{ width:60px; height:2px; background:var(--gold); margin:20px 0; }

/* -------- 카페 칩 카드 -------- */
.cafe-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:26px; }
.chip-card{
  display:block; text-decoration:none; color:inherit;
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 34px 28px;
  box-shadow: var(--shadow);
  border-top: 4px solid var(--blossom);
  transition: transform .25s ease;
}
.chip-card:nth-child(2){ border-top-color: var(--sage); }
.chip-card:nth-child(3){ border-top-color: var(--gold); }
.chip-card:hover{ transform: translateY(-6px); }
.chip-card .tag{ font-family:'Gaegu', cursive; color: var(--gold-deep); font-size:1rem; margin-bottom:10px; display:inline-block; }
.chip-card h3{ font-size:1.4rem; margin-bottom:10px; }
.chip-card p{ color:var(--plum-soft); font-size:1.03rem; }

/* -------- 클래스 카드 -------- */
.class-section{ background: var(--cream-2); border-radius: var(--radius-lg); }
.class-grid{ display:grid; grid-template-columns: repeat(5, 1fr); gap:20px; }
.class-card{
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 26px 20px 30px;
  box-shadow: var(--shadow);
  text-align:left;
  display:flex; flex-direction:column; gap:12px;
  min-height: 230px;
}
.class-card .icon{
  width:46px; height:46px; border-radius:50%;
  background: var(--peach);
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem;
}
.class-card h3{ font-size:1.18rem; line-height:1.4; }
.class-card p{ font-size:0.98rem; color:var(--plum-soft); flex-grow:1; }
.class-card .go{ font-size:0.85rem; color:var(--blossom-deep); font-weight:700; }

/* -------- 스토어 -------- */
.store-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:22px; }
.store-card{ border-radius: var(--radius-md); overflow:hidden; background: var(--white); box-shadow: var(--shadow); }
.store-thumb{ height:150px; background: linear-gradient(135deg, var(--peach), var(--blossom)); }
.store-card:nth-child(2) .store-thumb{ background: linear-gradient(135deg, var(--sage), var(--cream-2)); }
.store-card:nth-child(3) .store-thumb{ background: linear-gradient(135deg, var(--gold), var(--peach)); }
.store-card:nth-child(4) .store-thumb{ background: linear-gradient(135deg, var(--blossom-deep), var(--sage)); }
.store-body{ padding: 20px 20px 26px; }
.store-body .tag{ font-family:'Gaegu', cursive; color:var(--gold-deep); font-size:0.9rem;}
.store-body h3{ font-size:1.18rem; margin: 6px 0 8px; }
.store-body p{ font-size:0.92rem; color:var(--plum-soft); }

/* -------- 구독 배너 -------- */
.subscribe{
  background: linear-gradient(120deg, var(--blossom-deep), var(--gold-deep));
  border-radius: var(--radius-lg);
  padding: 56px 60px;
  color: var(--white);
  display:flex; align-items:center; justify-content:space-between; gap:30px;
  flex-wrap:wrap;
}
.subscribe h2{ color:var(--white); font-size:1.9rem; margin-bottom:10px; }
.subscribe p{ opacity:0.92; max-width:480px; }
.subscribe .btn{ background:var(--white); color:var(--gold-deep); font-weight:700; }

/* -------- 후기 -------- */
.review-strip{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; }
.review-card{ background:var(--white); border-radius: var(--radius-md); padding: 28px; box-shadow: var(--shadow); }
.review-card .stars{ color:var(--gold); margin-bottom:12px; letter-spacing:2px;}
.review-card p{ color:var(--plum-soft); font-size:1.03rem; margin-bottom:14px;}
.review-card .who{ font-family:'Gaegu', cursive; color:var(--blossom-deep); }

/* ======================================================================
   서브페이지 공용 컴포넌트 (카테고리 상세페이지 등에서 재사용)
   ====================================================================== */

/* 브레드크럼 */
.breadcrumb{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:0.85rem; color:var(--plum-soft); margin-bottom:18px;
}
.breadcrumb a{ color:var(--plum-soft); }
.breadcrumb a:hover{ color:var(--blossom-deep); }
.breadcrumb .sep{ color:var(--gold); }
.breadcrumb .current{ color:var(--plum); font-weight:700; }

/* 서브페이지용 페이지 히어로 */
.page-hero{
  padding: 150px 0 60px;
  background: linear-gradient(160deg, var(--cream-2), var(--cream) 60%);
  position:relative; overflow:hidden;
}
.page-hero::after{
  content:"";
  position:absolute; top:-60px; right:-60px;
  width:220px; height:220px; border-radius:50%;
  background: radial-gradient(circle, var(--blossom) 0%, transparent 70%);
  opacity:0.5;
}
.page-hero h1{ font-size: clamp(2rem, 3.4vw, 2.8rem); margin: 6px 0 14px; }
.page-hero .lead{ color:var(--plum-soft); max-width:560px; font-size:1.02rem; position:relative; }

/* 탭 내비(카테고리 내 형제 페이지 이동) */
.tab-nav{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 50px; }
.tab{
  padding:10px 20px; border-radius:999px;
  border:1.5px solid rgba(200,154,70,0.4);
  font-size:0.92rem; color:var(--plum-soft);
  background:var(--white);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.tab:hover{ border-color:var(--blossom-deep); color:var(--blossom-deep); }
.tab.active{
  background: linear-gradient(135deg, var(--blossom-deep), var(--gold));
  color:var(--white); border-color:transparent;
}

/* 본문 블록 */
.content-block{ max-width:760px; margin-bottom:50px; }
.content-block p{ color:var(--plum-soft); margin-bottom:14px; }
.content-block .divider{ width:60px; height:2px; background:var(--gold); margin:18px 0; }

/* 아이템 그리드(메뉴/상품 카드) */
.item-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:22px; margin-bottom: 60px; }
.item-card{ background:var(--white); border-radius:var(--radius-md); box-shadow: var(--shadow); overflow:hidden; display:flex; flex-direction:column; }
.item-thumb{ height:130px; background: linear-gradient(135deg, var(--peach), var(--blossom)); }
.item-card:nth-child(3n+2) .item-thumb{ background: linear-gradient(135deg, var(--sage), var(--cream-2)); }
.item-card:nth-child(3n+3) .item-thumb{ background: linear-gradient(135deg, var(--gold), var(--peach)); }
.item-body{ padding:20px 20px 24px; flex-grow:1; display:flex; flex-direction:column; gap:8px; }
.item-body .tag{ font-family:'Gaegu', cursive; color:var(--gold-deep); font-size:0.9rem; }
.item-body h3{ font-size:1.18rem; }
.item-body p{ color:var(--plum-soft); font-size:0.98rem; flex-grow:1; }
.item-body .price{ font-size:0.85rem; color:var(--sage-deep); font-weight:700; }

/* 정보 그리드(클래스 상세 칩) */
.info-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; margin-bottom: 56px; }
.info-card{ background:var(--cream-2); border-radius:var(--radius-md); padding:22px; text-align:center; }
.info-card .label{ font-family:'Gaegu', cursive; color:var(--gold-deep); font-size:0.88rem; display:block; margin-bottom:6px; }
.info-card .value{ font-size:1.05rem; font-weight:700; }

/* 커리큘럼 리스트 */
.curri-list{ list-style:none; margin-bottom:56px; display:flex; flex-direction:column; gap:14px; max-width:640px; }
.curri-list li{ display:flex; gap:14px; align-items:flex-start; background:var(--white); border-radius:14px; padding:16px 20px; box-shadow:var(--shadow); }
.curri-list .num{
  width:30px; height:30px; border-radius:50%; background:var(--blossom); color:var(--white);
  display:flex; align-items:center; justify-content:center; font-size:0.85rem; font-weight:700; flex-shrink:0;
}
.curri-list span.txt{ color:var(--plum-soft); padding-top:4px; }

/* 추천 대상 리스트 */
.fit-list{ list-style:none; display:flex; flex-direction:column; gap:10px; max-width:520px; margin-bottom:56px; }
.fit-list li{ display:flex; gap:10px; color:var(--plum-soft); }
.fit-list li::before{ content:"🌷"; flex-shrink:0; }

/* ===== Tablet & below (≤980px) ===== */
@media (max-width: 980px){
  .hero-inner{ grid-template-columns:1fr; text-align:center; }
  .hero-copy .lead{ margin-left:auto; margin-right:auto; }
  .hero-ctas{ justify-content:center; }
  .story{ grid-template-columns:1fr; padding:36px; }
  .cafe-grid{ grid-template-columns:1fr; }
  .class-grid{ grid-template-columns: repeat(2,1fr); }
  .store-grid{ grid-template-columns: repeat(2,1fr); }
  .subscribe{ flex-direction:column; text-align:center; }
  .review-strip{ grid-template-columns:1fr; }
  .item-grid{ grid-template-columns: 1fr 1fr; }
  .info-grid{ grid-template-columns: 1fr; }
}

/* ===== Phone (≤640px) ===== */
@media (max-width: 640px){
  .container{ padding: 0 20px; }
  section{ padding: 56px 0; }
  .hero{ padding-top: 12px; }
  .page-hero{ padding: 120px 0 40px; }

  .hero h1{ line-height:1.34; }
  .hero-ctas{ flex-direction:column; align-items:stretch; }
  .hero-ctas .btn{ text-align:center; }

  .story{ padding:26px; border-radius:20px; }
  .story-art{ height:190px; }
  .story-art::before{ font-size:4.5rem; }

  .section-head{ align-items:flex-start; gap:14px; }
  .section-head .seal{ width:46px; height:46px; font-size:0.82rem; }

  .class-grid, .store-grid{ grid-template-columns: 1fr; }
  .item-grid{ grid-template-columns: 1fr; }
  .tab-nav{ gap:8px; }
  .tab{ padding:8px 14px; font-size:0.85rem; }
  .subscribe{ padding: 36px 26px; border-radius:20px; }
}

/* ===== Small phone (≤380px) ===== */
@media (max-width: 380px){
  .container{ padding: 0 16px; }
  .hero h1{ font-size: 1.9rem; }
  .cup-scene{ width: 68vw; height:68vw; }
}