:root{
  /* 본사(weddia.co.kr) 브랜드 컬러 #44797b 기준의 틸그린 팔레트 */
  --bg:#ffffff; --bg-soft:#f0f4f2; --ink:#17201f; --ink-soft:#57635f;
  --line:#dce5e2; --accent:#44797b; --accent-deep:#2f5f61; --accent-text:#3a6a6c;
  --serif:'Noto Serif KR',serif; --serif-en:'Playfair Display',serif; --sans:'Noto Sans KR',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* keep-all = 한글을 음절이 아닌 어절(띄어쓰기) 단위로만 줄바꿈 — 어색하게 단어 중간에서 끊기는 것 방지.
   break-word는 URL 등 긴 영문 토큰이 화면 밖으로 넘치지 않게 하는 안전장치. */
body{font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.7;font-weight:300;word-break:keep-all;overflow-wrap:break-word}
p{text-wrap:pretty}
h1,h2,h3,.section-title,.section-sub{text-wrap:balance}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.label{font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-text);font-weight:500}
.section-title{text-align:center;font-family:var(--serif-en);font-size:clamp(2rem,4.5vw,3.2rem);font-weight:600;letter-spacing:.01em;text-transform:uppercase;color:var(--ink);margin-bottom:16px;line-height:1.1}
.section-sub{text-align:center;font-family:var(--serif);font-size:1rem;letter-spacing:.02em;margin-bottom:48px;font-weight:400;color:var(--ink-soft)}
.section-sub::before{content:"";display:inline-block;width:26px;height:1px;background:var(--accent);margin-right:10px;vertical-align:middle}
.gallery-head{text-align:left;max-width:640px;margin-bottom:40px}
.gallery-head .section-title,.gallery-head .section-sub{text-align:left;margin-bottom:10px}
.gallery-head .section-sub{margin-bottom:0}
.rule{border:none;border-top:1px solid var(--line);margin:0}
section{padding:96px 0}
.btn{display:inline-block;padding:14px 30px;font-size:.85rem;letter-spacing:.1em;border:1px solid var(--ink);transition:.25s}
.btn-solid{background:var(--ink);color:#fff}
.btn-solid:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.btn-line{background:transparent;color:#fff;border-color:rgba(255,255,255,.8)}
.btn-line:hover{background:#fff;color:var(--ink)}
.btn-dark{border-color:var(--ink)}
.btn-dark:hover{background:var(--ink);color:#fff}

/* header */
header{position:fixed;top:0;left:0;right:0;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);z-index:100}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:76px}
.brand{font-family:var(--serif-en);font-size:1.35rem;font-weight:700;letter-spacing:.03em}
.brand span{color:var(--accent-text);font-family:var(--serif);font-size:.68em;font-weight:400;margin-left:5px;letter-spacing:.02em}
nav.main-nav{display:flex;gap:34px}
nav.main-nav a{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
nav.main-nav a:hover{color:var(--ink)}
.header-actions{display:flex;align-items:center;gap:16px}
.header-actions .btn{padding:10px 20px;font-size:.78rem}
.menu-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
.menu-toggle span{width:22px;height:1px;background:var(--ink)}

/* hero */
/* padding:0 — 범용 section{padding:96px 0} 때문에 flex-end인데도 글자가 바닥에서 96px 떠 있었음 */
.hero{position:relative;height:94vh;min-height:560px;display:flex;align-items:flex-end;background:#111;overflow:hidden;padding:0}
.hero-video{position:absolute;inset:0;overflow:hidden;z-index:0}
.hero-video iframe{position:absolute;top:50%;left:50%;width:100vw;height:56.25vw;min-height:100vh;min-width:177.78vh;transform:translate(-50%,-50%);pointer-events:none;border:0}
/* 오버레이는 위쪽을 거의 투명하게 둬서 영상/사진이 잘 보이게 하고, 글자가 놓인 아래쪽만 어둡게.
   영상은 프레임마다 밝기가 달라지므로 글자엔 text-shadow로 가독성을 따로 보장한다. */
.hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.06) 20%,rgba(0,0,0,.38) 40%,rgba(0,0,0,.62) 60%,rgba(0,0,0,.8) 100%)}
.hero-inner{position:relative;z-index:2;color:#fff;padding-bottom:88px;width:100%;text-shadow:0 2px 18px rgba(0,0,0,.7)}
/* 사진 위 작은 라벨이라 브랜드 틴트보다 흰색이 확실히 잘 읽힌다(틴트는 흰 배경 섹션 라벨에서 살아있음) */
.hero .label{color:#fff}
/* 브랜드 워드마크 — 문장이 아니라 로고타입이라 크게 갈 이유가 없다.
   작게 두면 텍스트 블록이 통째로 아래(어두운 구간)로 내려가 가독성도 같이 좋아진다. */
.hero .en-line{display:block;font-family:var(--serif-en);font-size:clamp(2rem,4vw,3.2rem);font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1.05;margin:14px 0 12px}
.hero-inner .btn{text-shadow:none}
.hero h1.kr-line{display:block;font-family:var(--serif);font-size:clamp(1.15rem,2.4vw,1.5rem);font-weight:400;color:#e8f0ee;margin:0 0 22px;letter-spacing:.1em}
.hero p{max-width:560px;font-size:1rem;color:#eee;margin-bottom:34px;font-weight:300}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}

/* shorter static-image hero used on keyword subpages */
.hero-sub{height:62vh;min-height:440px;background-size:cover;background-position:center}
.hero-sub .hero-inner{padding-bottom:64px}

/* story */
.story{background:var(--bg-soft);text-align:center}
.story .wrap{max-width:760px}
.story h1,.story h2{font-family:var(--serif);font-size:clamp(1.9rem,4.2vw,2.8rem);font-weight:600;line-height:1.5;margin-bottom:30px}
.story p{color:var(--ink-soft);font-size:.98rem;margin-bottom:26px}
.story .closing{font-family:var(--serif);font-size:1.5rem;color:var(--accent)}
.story h3{font-family:var(--serif);font-size:1.25rem;font-weight:600;margin:40px 0 16px;color:var(--ink)}
.story ul.reason-list{text-align:left;max-width:520px;margin:0 auto 26px;color:var(--ink-soft);font-size:.95rem;line-height:2}

/* mini way-finding block on subpages */
.mini-way{max-width:440px;margin:8px auto 30px;text-align:left;background:#fff;border:1px solid var(--line);padding:22px 26px;font-size:.85rem;color:var(--ink-soft);line-height:2}
.mini-way strong{color:var(--ink);font-weight:500;margin-right:8px}

/* thera coach */
.coach .wrap{max-width:820px;text-align:center}
.coach h3{font-family:var(--serif-en);font-size:clamp(1.9rem,4vw,2.6rem);font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-bottom:22px}
.coach p{color:var(--ink-soft);font-size:.92rem;margin-bottom:56px}
.coach-grid{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:20px;align-items:center}
.coach-grid .op{font-family:var(--serif-en);font-size:1.6rem;color:var(--accent)}
.coach-item strong{display:block;font-family:var(--serif-en);font-size:1.15rem;font-weight:700;letter-spacing:.01em;text-transform:uppercase;margin-bottom:10px}
.coach-item span{font-size:.85rem;color:var(--ink-soft)}

/* programs */
.programs{background:var(--bg-soft)}
.program-card{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-bottom:90px}
.program-card:last-child{margin-bottom:0}
.program-card:nth-child(odd) .p-text{order:2}
.program-card img{width:100%;height:auto}
.p-eng{font-family:var(--serif-en);font-size:clamp(1.6rem,3vw,2.1rem);font-weight:700;letter-spacing:.01em;text-transform:uppercase;color:var(--ink);margin-bottom:10px;line-height:1.15}
.p-text h4{font-family:var(--serif);font-size:1.05rem;font-weight:500;color:var(--ink-soft);margin-bottom:16px}
.p-text .sub{color:var(--accent-text);font-size:.85rem;margin-bottom:18px}
.p-text p{color:var(--ink-soft);font-size:.92rem;margin-bottom:24px}
.effects{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.effects li{list-style:none;border-top:1px solid var(--line);padding-top:12px}
.effects strong{display:block;font-size:.88rem;margin-bottom:4px}
.effects span{font-size:.8rem;color:var(--ink-soft)}

/* review quotes */
.quote-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.quote-grid.cols-2{max-width:820px;margin:0 auto;grid-template-columns:repeat(2,1fr)}
.review-badge{display:inline-flex;align-items:center;gap:8px;background:var(--bg-soft);border:1px solid var(--line);padding:8px 16px;font-size:.82rem;color:var(--ink-soft);margin-bottom:32px}
.review-badge strong{color:var(--ink);font-weight:600}
.review-badge .star{color:var(--accent-text)}
.quote-card{background:var(--bg-soft);padding:34px 30px;border:none;width:100%;text-align:left;font:inherit;cursor:pointer;display:block;transition:background .2s}
.quote-card:hover{background:#e7eeeb}
.quote-card .mark{font-family:var(--serif-en);font-size:2.6rem;color:var(--accent);line-height:1;display:block;margin-bottom:8px}
.quote-card p{font-family:var(--serif);font-size:.98rem;color:var(--ink);line-height:1.75;margin-bottom:22px}
.quote-card .who{display:flex;align-items:center;gap:10px;font-size:.78rem;color:var(--ink-soft)}
.quote-card .who strong{color:var(--ink);font-weight:500}
.quote-card .visit{background:var(--accent-deep);color:#fff;font-size:.68rem;padding:3px 9px;border-radius:20px;letter-spacing:.02em;white-space:nowrap}

/* galleries — masonry columns keep each photo's native crop (no forced squares) */
.gallery{column-count:4;column-gap:10px}
.gallery button{display:block;width:100%;border:none;background:none;padding:0;margin:0 0 10px;cursor:pointer;overflow:hidden;break-inside:avoid}
.gallery img{width:100%;height:auto;display:block;transition:transform .5s}
.gallery button:hover img{transform:scale(1.04)}
.gallery button:nth-child(n+13){display:none}
.gallery.expanded button:nth-child(n+13){display:block}
.more-wrap{text-align:center;margin-top:36px}
.sub-heading{font-family:var(--serif);font-size:1.1rem;margin:0 0 20px;padding-top:8px}
.sub-heading:first-of-type{padding-top:0}

/* uniform space-photo grid (subpages) — evenly cropped, unlike the masonry .gallery */
.grid-photos{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.grid-photos button{display:block;width:100%;border:none;background:none;padding:0;cursor:pointer;overflow:hidden}
/* height:auto 필수 — img의 height 속성(CLS 방지용)이 presentational hint로 남으면
   width/height가 둘 다 확정돼 aspect-ratio가 무시되고 사진이 길쭉하게 늘어난다 */
.grid-photos img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block;transition:transform .5s}
.grid-photos button:hover img{transform:scale(1.05)}

/* guide link grid */
.link-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.link-card{background:var(--bg-soft);border:1px solid var(--line);padding:26px 20px;text-align:left;transition:.2s;display:block}
.link-card:hover{background:#e7eeeb;border-color:var(--accent)}
.link-card h3{font-family:var(--serif);font-size:1.02rem;font-weight:600;margin-bottom:8px;color:var(--ink)}
.link-card p{font-size:.78rem;color:var(--ink-soft);margin-bottom:0;line-height:1.6}
.link-card .arrow{color:var(--accent-text);font-size:.78rem;margin-top:16px;display:block}

/* location */
.location{background:var(--bg-soft)}
.loc-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.loc-grid h4{font-family:var(--serif);font-size:1.5rem;margin-bottom:26px}
.loc-list{border-top:1px solid var(--line)}
.loc-list div{display:flex;padding:16px 0;border-bottom:1px solid var(--line);font-size:.9rem}
.loc-list dt{width:120px;color:var(--ink-soft);flex-shrink:0}
.loc-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.map-frame{aspect-ratio:4/3;background-color:#111;background-size:cover;background-position:center}

/* footer */
footer{background:#121a19;color:#bdc9c6;padding:80px 0 0}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;padding-bottom:60px;border-bottom:1px solid #2b3634}
.foot-grid .brand{color:#fff}
.foot-grid p{font-size:.85rem;margin-top:14px;color:#8a9995}
.foot-links{display:flex;gap:26px;flex-wrap:wrap}
.foot-links a{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid #4a5955;padding-bottom:4px}
.foot-bottom{padding:22px 0;font-size:.75rem;color:#7a8884;display:flex;flex-wrap:wrap;gap:6px 16px}

/* lightbox */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;z-index:1000;padding:30px}
.lightbox.open{display:flex}
.lightbox img{max-width:90vw;max-height:88vh;object-fit:contain}
.lightbox-close{position:absolute;top:26px;right:34px;color:#fff;font-size:2rem;background:none;border:none;cursor:pointer;line-height:1}

/* call fab */
.call-fab{position:fixed;right:22px;bottom:22px;width:56px;height:56px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.4rem;z-index:90;box-shadow:0 6px 18px rgba(0,0,0,.25)}

/* consult page */
.consult-hero{padding-top:180px}
.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:760px;margin:0 auto}
.choice-card{background:var(--bg-soft);border:1px solid var(--line);padding:48px 32px;text-align:center;transition:.2s;display:block}
.choice-card:hover{background:#e7eeeb;border-color:var(--accent)}
.choice-card .icon{font-size:2.4rem;color:var(--accent-text);margin-bottom:18px;display:block}
.choice-card h3{font-family:var(--serif-en);font-size:1.4rem;font-weight:700;margin-bottom:10px;text-transform:uppercase}
.choice-card p{color:var(--ink-soft);font-size:.85rem;margin-bottom:18px}
.choice-card .num{font-family:var(--serif-en);font-size:1.15rem;color:var(--ink);font-weight:600}

@media(max-width:1100px){
  .gallery{column-count:3}
  .quote-grid{grid-template-columns:repeat(2,1fr)}
  .link-grid{grid-template-columns:repeat(3,1fr)}
  .grid-photos{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:860px){
  nav.main-nav{display:none}
  .menu-toggle{display:flex}
  .header-actions .btn-text{display:none}
  .program-card{grid-template-columns:1fr;gap:26px}
  .program-card:nth-child(odd) .p-text{order:0}
  .effects{grid-template-columns:1fr;gap:14px}
  .coach-grid{grid-template-columns:1fr;gap:34px}
  .coach-grid .op{display:none}
  .loc-grid{grid-template-columns:1fr;gap:40px}
  .foot-grid{grid-template-columns:1fr}
  section{padding:64px 0}
  /* 제목의 <br>은 절 경계에 찍혀 있음 — 모바일에서도 그 절이 한 줄에 들어가도록 크기를 줄여
     "타고나는 / 게" 처럼 절 중간에서 끊기는 걸 방지 (320px 폭까지 확인함) */
  .story h1,.story h2{font-size:clamp(1.1rem,5.6vw,1.6rem)}
  .gallery{column-count:2}
  .quote-grid{grid-template-columns:1fr}
  .quote-grid.cols-2{grid-template-columns:1fr}
  .link-grid{grid-template-columns:1fr}
  .grid-photos{grid-template-columns:repeat(2,1fr)}
  .choice-grid{grid-template-columns:1fr}
  .consult-hero{padding-top:140px}
}