@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css');

:root{
  --ink:#3C3733;
  --ink-2:#6B635C;
  --ink-3:rgba(60,55,51,.5);
  --paper:#FFFFFF;
  --line:#E6E1DA;
  --sand:#F6F3EE;          --black:#000000;

  --face:'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
         'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;

  --wrap:min(1280px, calc(100vw - 160px));
  --gut:20px;

  --head-h:64px;           }

*{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--face);
  font-size:15px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  word-break:keep-all;
  overflow-wrap:break-word;
}
img{ max-width:100%; display:block }
a{ color:inherit }
h1,h2,h3{ margin:0; font-weight:700; letter-spacing:-.02em }
p{ margin:0 }
ul{ margin:0; padding:0; list-style:none }

.wrap{
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gut);
}

[data-fill]{
  position:relative;
  min-height:1.2em;
  outline:1px dashed rgba(60,55,51,.25);
  outline-offset:4px;
}
[data-fill]::after{
  content:attr(data-fill);
  display:block;
  font-size:11px; font-weight:400; line-height:1.5; letter-spacing:0;
  color:rgba(60,55,51,.45);
  white-space:pre-wrap;
}
.ph{
  background:var(--sand);
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  outline:0;
}
.ph::after{ padding:12px; max-width:80% }

:root{ --brand-h:96px }
.head{
  position:sticky; top:calc(-1 * var(--brand-h)); z-index:50;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.head__brand{
  display:flex; align-items:center; justify-content:center;
  height:var(--brand-h);
  overflow:hidden;
}
.head__nav{ background:var(--paper) }
.brand{ text-decoration:none; display:block }
.brand__mark{ height:30px; width:auto }
.head__nav ul{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(24px, 5vw, 72px);
  height:var(--head-h);
}
.head__nav a{
  font-size:16px; font-weight:700; letter-spacing:-.01em;
  text-decoration:none;
  transition:color .2s ease;
}
.head__nav a:hover,
.head__nav a[aria-current="page"]{ color:var(--ink-2) }

.hero{ position:relative }
.hero__img{
  width:100%; height:clamp(360px, calc(100svh - 160px), 720px);
  object-fit:cover; object-position:center;
  display:block;
}
.hero::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:rgba(0,0,0,.45);
}
.ph--hero{ height:clamp(360px, calc(100svh - 160px), 720px); background:#2A2724 }
.ph--hero::after{ color:rgba(255,255,255,.45) }
.hero__over{
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
}
.hero__box{
  width:100%;
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
}
.hero__mark{ width:clamp(200px, 20vw, 340px); height:auto; margin-bottom:5px }
.hero [data-fill]{ outline-color:rgba(255,255,255,.45) }
.hero [data-fill]::after{ color:rgba(255,255,255,.75) }

main > section{ padding-block:clamp(72px, 9vw, 132px) }
main > .hero{ padding-block:0 }
main > .band{ padding-block:0 }

.say{ text-align:center }
.say__head{
  font-size:clamp(24px, 2.6vw, 36px); line-height:1.35;
}
.say__body{
  margin-top:22px;
  color:var(--ink-2);
  font-size:16px; line-height:1.9;
}

.proof{ text-align:center }
.proof__head{ font-size:clamp(24px, 3vw, 36px); line-height:1.35 }
.proof__list{ margin-top:clamp(48px, 7vw, 92px); display:grid; gap:clamp(56px, 10vw, 195px) }
.proof__item{ display:grid; justify-items:center; gap:22px }
.proof__icon{ width:44px; height:44px; fill:var(--ink); color:var(--ink) }
.proof__txt{
  font-size:18px; font-weight:400; color:var(--ink);
  text-decoration:none;
}
.proof__txt b{
  font-size:clamp(28px, 3.2vw, 40px); font-weight:700; letter-spacing:-.02em;
  margin-inline:6px;
}
a.proof__txt b{ border-bottom:2px solid var(--line) }
a.proof__txt:hover b{ border-bottom-color:var(--ink) }
.proof__asof{
  margin-top:clamp(40px, 5vw, 72px);
  font-size:13px; color:var(--ink-3);
}

.lead{ text-align:center }
.lead__head{
  font-size:clamp(19px, 2vw, 22px); font-weight:700; line-height:1.5;
}
.lead__body{
  margin-top:20px;
  font-size:17px; line-height:1.9; color:var(--ink-2);
  max-width:40em; margin-inline:auto;
}
.lead__go{ margin-top:30px }

.band{ position:relative }
.ph--band{ height:clamp(320px, 42vw, 520px); background:#2A2724 }
.ph--band::after{ color:rgba(255,255,255,.45) }
.band__shot{ height:clamp(320px, 42vw, 520px); overflow:hidden; background:#2A2724 }
.band__shot img{ width:100%; height:100%; object-fit:cover; display:block }
.band::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:rgba(0,0,0,.45);
}
.band__over{ z-index:2 }
.band__over{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; text-align:center; color:#fff;
}
.band__over h2{ font-size:clamp(30px, 3.6vw, 48px) }
.band__over p{ font-size:15px; color:rgba(255,255,255,.82) }

.rows{ display:grid; gap:clamp(56px, 8vw, 104px) }
.row{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(32px, 5vw, 72px); align-items:center;
}
.ph--row{ aspect-ratio:4 / 3 }
.row__shot{ aspect-ratio:4 / 3; overflow:hidden; background:var(--sand) }
.row__shot img{ width:100%; height:100%; object-fit:cover; display:block }
.row__txt h3{ font-size:22px }
.row__txt p{ margin-top:16px; color:var(--ink-2) }
.row__txt .btn{ margin-top:26px }

.btn{
  display:inline-block;
  padding:11px 26px; border-radius:5px;
  background:var(--black); color:#fff;
  font-size:13px; font-weight:500; letter-spacing:.06em;
  text-decoration:none;
  transition:opacity .2s ease;
}
.btn:hover{ opacity:.82 }
.btn--line{
  background:none; color:var(--ink);
  border:1px solid var(--ink); border-radius:0;
  padding:9px 21px;
  font-size:12px; letter-spacing:.12em;
  transition:background-color .2s ease, color .2s ease;
}
.btn--line:hover{ background:var(--ink); color:#fff; opacity:1 }
.btn--more{
  background:#363636; border:1px solid #363636;
  padding:10px 22px; border-radius:0;
  font-size:12px; font-weight:400; letter-spacing:0;
}

.sect{
  text-align:center;
  font-size:18px; font-weight:700; letter-spacing:.3em;
  margin-bottom:clamp(32px, 4vw, 56px);
}
.sect--rule{
  display:flex; align-items:center; gap:24px;
}
.sect--rule::before,
.sect--rule::after{
  content:''; flex:1 1 auto; height:1px; background:var(--line);
}
.sect--rule span{ flex:none }

.team__grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:clamp(24px, 3vw, 40px) 24px;
}
.card{ text-align:center }
.card__shot{ aspect-ratio:1 / 1; overflow:hidden; background:var(--sand) }
.card__shot img{ width:100%; height:100%; object-fit:cover; display:block }
.card h3{
  margin-top:18px;
  font-size:17px; font-weight:700; letter-spacing:-.01em;
}
.card__role{
  margin-top:4px;
  font-size:12px; letter-spacing:.1em; color:var(--ink-2);
}
.card .btn{ margin-top:16px }

.gal__grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;
}
.ph--gal{ aspect-ratio:3 / 4 }
.gal__cell{
  margin:0; aspect-ratio:3 / 4; overflow:hidden; background:var(--sand);
}
.gal__cell img{ width:100%; height:100%; object-fit:cover; display:block }
.gal__more{ margin-top:40px; text-align:center }
.way__row{
  display:grid; grid-template-columns:1.4fr 1fr;
  gap:clamp(28px, 4vw, 56px); align-items:start;
}
.ph--map{ aspect-ratio:16 / 10 }
.way__mapbox{
  aspect-ratio:16 / 10; background:var(--sand);
  border:1px solid var(--line);
}
.way__mapbox.is-off{ display:flex; align-items:center; justify-content:center }
.way__mapbox.is-off::after{
  content:'지도를 불러오지 못했습니다. 아래 링크로 열어 주세요.';
  font-size:13px; color:var(--ink-3); text-align:center; padding:16px;
}
.way__maplink{ margin-top:12px; display:flex; gap:18px; flex-wrap:wrap }
.way__maplink a{
  font-size:13px; color:var(--ink-2);
  text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:2px;
}
.way__maplink a:hover{ color:var(--ink); border-bottom-color:var(--ink) }
.way__list{ margin:0; display:grid; grid-template-columns:76px 1fr; gap:14px 16px }
.way__list dt{ font-weight:700 }
.way__list dd{ margin:0; color:var(--ink-2) }

.quick{
  position:fixed; right:18px; top:50%; transform:translateY(-50%);
  z-index:40;
  display:flex; flex-direction:column; gap:8px;
}
.quick__btn{
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--ink); color:#fff;
  border:0; padding:0;
  font-family:inherit; font-size:11px; font-weight:700; letter-spacing:-.02em;
  text-decoration:none; cursor:pointer;
  transition:opacity .2s ease;
}
.quick__btn:hover{ opacity:.82 }
.quick__btn[data-fill]{ outline:0 }
.quick__btn[data-fill]::after{ content:none }   .page{ padding-block:36px 0 }
.crumb{
  text-align:right;
  font-size:13px; color:var(--ink-3);
}
.crumb b{ font-weight:400; color:var(--ink-2) }
.page__head{ margin-top:28px; text-align:center }
.page__title{
  font-size:20px; font-weight:400; letter-spacing:-.01em;
}
.page__title::after{
  content:''; display:block; width:28px; height:1px;
  background:var(--ink); margin:14px auto 0;
}
.page__desc{
  margin-top:18px; font-size:16px; color:var(--ink-2);
  max-width:46em; margin-inline:auto;
}

.gal-page{ padding-block:52px 96px }
.gal-page__grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:11px;
}
.gal-page__grid .gal__cell{ aspect-ratio:3 / 4 }
.dz-list{ display:grid; gap:clamp(56px, 7vw, 96px) }
.dz{
  scroll-margin-top:calc(var(--head-h) + 52px);
  display:grid; grid-template-columns:minmax(0,0.86fr) minmax(0,1.14fr);
  gap:clamp(28px, 4vw, 56px); align-items:start;
}
.dz__shot{ aspect-ratio:3 / 4; max-width:420px; overflow:hidden; background:var(--sand) }
.dz__shot img{ width:100%; height:100%; object-fit:cover; display:block }
.dz__name{ font-size:24px; font-weight:700 }
.dz__role{
  margin-left:10px;
  font-size:13px; font-weight:400; letter-spacing:.1em; color:var(--ink-2);
}
.dz__lead{
  margin-top:18px;
  font-size:18px; font-weight:700; letter-spacing:-.02em;
  color:var(--ink); line-height:1.65;
}
.dz__intro{
  margin-top:16px;
  font-size:16px; line-height:1.9;
  color:var(--ink-2);
}
.dz__lead + .dz__intro{ margin-top:14px }
.dz__sub{
  margin-top:34px;
  font-size:16px; font-weight:700; letter-spacing:-.01em;
}
.dz__list{
  margin-top:14px; display:grid; gap:9px;
  color:var(--ink-2); font-size:15px; line-height:1.7;
}
.book{ text-align:center; padding-block:clamp(44px,5vw,64px) clamp(80px,10vw,132px) }
.ph--book{ aspect-ratio:1.95 / 1; max-width:660px; margin-inline:auto }
.book__shot{ aspect-ratio:1.95 / 1; max-width:660px; margin-inline:auto; overflow:hidden; background:var(--sand) }
.book__shot img{ width:100%; height:100%; object-fit:cover; display:block }
.book__shop{
  margin-top:clamp(34px,4vw,52px);
  font-size:15px; letter-spacing:.08em; color:var(--ink-2);
}
.book__tel{ margin-top:6px }
.book__tel a{
  display:inline-block;
  padding-bottom:12px; border-bottom:1px solid var(--line);
  font-size:clamp(28px,3.4vw,42px); font-weight:400; letter-spacing:.02em;
  text-decoration:none;
}
.book__hours{ margin-top:26px; font-size:16px; line-height:1.9; color:var(--ink-2) }
.book__btns{ margin-top:clamp(34px,4vw,48px); display:flex; gap:5px; justify-content:center; flex-wrap:wrap }
.btn--wide{ min-width:250px; padding:15px 24px; font-size:15px; font-weight:700; letter-spacing:0 }
.btn[data-fill]{ outline-offset:3px }
.btn[data-fill]::after{ content:none }
.btn--line2{
  background:#fff; color:var(--ink); border:1px solid var(--line);
}
.btn--line2:hover{ background:var(--sand); opacity:1 }

.menu{ padding-block:clamp(44px,5vw,64px) clamp(72px,9vw,120px) }
.menu__cat + .menu__cat{ margin-top:clamp(48px,6vw,80px) }
.menu__catname{
  font-size:20px; font-weight:700; letter-spacing:-.01em;
  padding-bottom:14px; border-bottom:2px solid var(--ink);
}
.menu__list{ display:grid }
.menu__row{
  display:grid; grid-template-columns:1fr auto; align-items:baseline;
  column-gap:24px;
  padding:18px 2px; border-bottom:1px solid var(--line);
}
.menu__name{ font-size:16px; line-height:1.5 }
.menu__note{
  grid-column:1; margin-top:5px;
  font-size:13px; line-height:1.5; color:var(--ink-3);
}
.menu__price{
  grid-column:2; grid-row:1 / span 2;
  font-size:17px; font-weight:700; letter-spacing:-.01em; white-space:nowrap;
}
.menu__asof{
  margin-top:clamp(36px,4vw,56px); text-align:center;
  font-size:13px; line-height:1.9; color:var(--ink-3);
}
.menu__go{ margin-top:clamp(28px,3vw,40px); text-align:center }

.foot{
  border-top:1px solid var(--line);
  padding-block:48px 64px;
  font-size:13px; color:var(--ink-2);
}
.foot__mark{ height:22px; width:auto }
.foot__addr{ margin-top:14px }
.foot__biz{ margin-top:8px }

.rise{
  opacity:0; transform:translateY(24px);
  transition:opacity .7s ease-out, transform .7s cubic-bezier(.165,.84,.44,1);
}
.rise.is-in{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){
  .rise{ opacity:1; transform:none; transition:none }
}

@media (max-width:1023px){
  .row, .way__row{ grid-template-columns:1fr }
  :root{ --wrap:calc(100vw - 40px); --gut:16px }
  .gal-page__grid{ grid-template-columns:repeat(2, 1fr) }
  .dz{ grid-template-columns:1fr }
  .dz__shot{ max-width:420px }
  .team__grid{ grid-template-columns:repeat(2, 1fr) }
  .quick{ right:12px }
}

@media (max-width:767px){
  .ph--hero,
  .hero__img{ height:min(52vh, 440px) }

  .head__brand{ height:72px }
  :root{ --brand-h:72px }
  .head__nav{ position:relative }
  .head__nav ul{
    flex-wrap:nowrap; height:auto; justify-content:flex-start;
    gap:16px; padding-block:15px;
    overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
    -webkit-overflow-scrolling:touch;
    scroll-padding-inline:var(--gut);
  }
  .head__nav ul::-webkit-scrollbar{ display:none }
  .head__nav a{ font-size:15px; white-space:nowrap }
  .head__nav::after{
    content:''; position:absolute; right:0; top:0; bottom:0; width:30px;
    background:linear-gradient(to left, var(--paper) 40%, rgba(255,255,255,0));
    pointer-events:none;
  }

  .quick{
    right:0; left:0; top:auto; bottom:0; transform:none; translate:none;
    flex-direction:row; justify-content:center; gap:10px;
    padding:8px 12px calc(8px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.94);
    border-top:1px solid var(--line);
    backdrop-filter:saturate(1.2) blur(6px);
  }
  .quick__btn{ width:50px; height:50px; font-size:11px }
  .foot{ padding-bottom:calc(86px + env(safe-area-inset-bottom)) }

  .gal__grid{ grid-template-columns:repeat(2, 1fr) }
  .gal-page__grid{ gap:8px }
  .dz__shot{ max-width:none }
  .menu__catname{ font-size:18px }
}

.way__near{ margin:22px 0 0; color:var(--ink-2); line-height:1.9 }

.maptag{ padding:6px 12px; font-size:13px; font-weight:700; white-space:nowrap; text-align:center }

/* sect 줄바꿈 방지 — 자간을 벌린 제목이 글자 단위로 쪼개지는 것을 막는다 */
.sect{ white-space:nowrap }
.sect--rule span{ white-space:nowrap }
@media (max-width:767px){
  .sect{ font-size:15px; letter-spacing:.22em }
}

/* 문단 줄바꿈 — PC에서 잡은 줄바꿈을 모바일에서는 풀고 자연스럽게 흐르게 둔다 */
@media (max-width:767px){
  br.pc{ display:none }
  .say__body, .lead__body, .band__over p, .row__txt p, .dz__intro{
    text-wrap:pretty; word-break:keep-all;
  }
}

/* 모바일 전용 줄바꿈 — PC에서는 숨긴다 */
br.mo{ display:none }
@media (max-width:767px){
  br.mo{ display:inline }
  /* 소개 문단은 줄이 두 번 접히지 않도록 글자를 조금 줄인다 */
  .say__body{ font-size:15px; line-height:1.95 }
}