/* 제주 산방산 어반아르떼 — 첫 화면 (2026-10-27 원본과 다른 고급형으로 새로 짬)
   짙은 남색 · 아이보리 · 금선, 넓은 여백, 영문 Marcellus + 한글 Pretendard 가는 굵기 */
.hh { --ink:#0f1620; --navy:#17222f; --navy2:#1f2d3d; --ivory:#f5f2ec; --paper:#fbfaf7; --gold:#b8975a; --gold-t:#d9c39a; --gold-d:#7d6435;
  --mute:#5c636d; --line:rgba(184,151,90,.45);
  font-family:'Pretendard Variable',Pretendard,sans-serif; color:var(--ink); word-break:keep-all; overflow-wrap:anywhere; background:var(--paper); }
.hh p, .hh h1, .hh h2, .hh h3, .hh dd { white-space:normal; }
.hh *, .hh *::before, .hh *::after { box-sizing:border-box; }
.hh img { display:block; max-width:100%; }
.hh a { text-decoration:none; }

.hh-eyebrow { font-family:'Marcellus',serif; font-size:13px; letter-spacing:.38em; color:var(--gold-t); margin:0 0 22px; }
.hh-eyebrow--dark { color:var(--gold-d); }
.hh-h2 { font-size:clamp(30px,3.4vw,50px); font-weight:250; line-height:1.3; letter-spacing:-.02em; margin:0 0 24px; color:var(--ink); }
.hh-h2--light { color:#fff; }
.hh-lead { font-size:16px; color:rgba(255,255,255,.78); margin:0; letter-spacing:.02em; }
.hh-lead--dark { color:var(--mute); }
.hh-head { max-width:1240px; margin:0 auto 56px; }
.hh-head--center { text-align:center; }
.hh-center { text-align:center; margin-top:56px; }
.hh-note { font-size:12px; color:rgba(255,255,255,.62); text-align:center; margin:28px 0 0; }

.hh-btn { display:inline-flex; align-items:center; justify-content:center; height:54px; padding:0 34px; font-size:15px; letter-spacing:.08em;
  border:1px solid var(--gold); transition:background .35s, color .35s, border-color .35s; }
.hh-btn--gold { background:var(--gold); color:#111; }
.hh-btn--gold:hover { background:#fff; border-color:#fff; }
.hh-btn--line { color:#fff; border-color:rgba(255,255,255,.6); }
.hh-btn--line:hover { background:#fff; color:#111; }
.hh-more { display:inline-flex; align-items:center; gap:14px; font-size:14px; letter-spacing:.12em; color:var(--ink); padding-bottom:6px; border-bottom:1px solid var(--gold); }
.hh-more::after { content:''; width:28px; height:1px; background:currentColor; transition:width .35s; }
.hh-more:hover::after { width:46px; }
.hh-more--light { color:#fff; }

/* 1. 첫 화면 */
.hh-hero { position:relative; height:100vh; min-height:640px; overflow:hidden; background:var(--ink); color:#fff; }
.hh-hero__bg, .hh-hero__bg img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hh-hero__bg img { transform:scale(1.12); animation:hhKen 9s cubic-bezier(.22,.61,.36,1) forwards; }
.hh-hero::after { content:''; position:absolute; inset:0; background:
  linear-gradient(90deg, rgba(10,16,24,.82) 0%, rgba(10,16,24,.5) 38%, rgba(10,16,24,0) 70%),
  linear-gradient(0deg, rgba(10,16,24,.55) 0%, rgba(10,16,24,0) 35%); }
.hh-hero__in { position:absolute; z-index:2; left:max(6vw, calc((100vw - 1240px)/2)); bottom:15vh; max-width:640px; }
.hh-hero__title { margin:0 0 26px; font-size:clamp(40px,5.2vw,82px); font-weight:200; line-height:1.18; letter-spacing:-.03em; }
.hh-hero__title span { display:block; overflow:hidden; }
.hh-hero__title span:last-child { font-weight:500; }
.hh-hero__sub { margin:0 0 40px; font-size:16px; color:rgba(255,255,255,.82); letter-spacing:.03em; padding-left:18px; border-left:1px solid var(--gold); }
.hh-hero__btns { display:flex; gap:12px; flex-wrap:wrap; }
.hh-hero__scroll { position:absolute; z-index:2; right:max(5vw, calc((100vw - 1240px)/2)); bottom:7vh; display:flex; flex-direction:column; align-items:center; gap:14px;
  font-family:'Marcellus',serif; font-size:11px; letter-spacing:.3em; color:rgba(255,255,255,.75); }
.hh-hero__scroll span { writing-mode:vertical-rl; }
.hh-hero__scroll i { width:1px; height:70px; background:rgba(255,255,255,.25); position:relative; overflow:hidden; }
.hh-hero__scroll i::after { content:''; position:absolute; left:0; top:-40%; width:1px; height:40%; background:var(--gold-t); animation:hhDrop 2.2s ease-in-out infinite; }
/* 첫 화면 글씨는 한 줄씩 올라옴 */
.hh-hero__in > * { opacity:0; transform:translateY(28px); animation:hhUp 1.1s cubic-bezier(.16,1,.3,1) forwards; }
.hh-hero__in > :nth-child(1) { animation-delay:.3s; } .hh-hero__in > :nth-child(2) { animation-delay:.55s; }
.hh-hero__in > :nth-child(3) { animation-delay:.85s; } .hh-hero__in > :nth-child(4) { animation-delay:1.1s; }
@keyframes hhKen { to { transform:scale(1); } }
@keyframes hhUp { to { opacity:1; transform:none; } }
@keyframes hhDrop { 0% { top:-40%; } 100% { top:100%; } }

/* 2. 숫자 띠 */
.hh-facts { background:var(--navy); color:#fff; }
.hh-facts ul { list-style:none; margin:0 auto; padding:0 24px; max-width:1240px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.hh-facts li { padding:54px 10px 50px; text-align:center; border-left:1px solid var(--line); }
.hh-facts li:first-child { border-left:0; }
.hh-facts b { display:block; font-family:'Marcellus',serif; font-weight:400; font-size:clamp(34px,3.6vw,54px); color:var(--gold-t); line-height:1; margin-bottom:14px; }
.hh-facts span { font-size:14px; color:rgba(255,255,255,.78); letter-spacing:.04em; }

/* 3. 콘셉트 */
.hh-concept { max-width:1240px; margin:0 auto; padding:150px 24px; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:90px; align-items:center; }
.hh-concept__img { margin:0; position:relative; }
.hh-concept__img::before { content:''; position:absolute; inset:-22px 22px 22px -22px; border:1px solid var(--line); z-index:0; }
.hh-concept__img img { position:relative; z-index:1; width:100%; aspect-ratio:16/10; object-fit:cover; }
.hh-concept__txt > p { font-size:16px; line-height:1.95; color:var(--mute); margin:0 0 34px; }
.hh-spec { margin:0 0 40px; border-top:1px solid #e3ddd2; }
.hh-spec div { display:flex; gap:24px; padding:16px 0; border-bottom:1px solid #e3ddd2; font-size:15px; }
.hh-spec dt { width:56px; flex:none; color:var(--gold-d); letter-spacing:.1em; }
.hh-spec dd { margin:0; color:var(--ink); }

/* 4. 입지 */
.hh-loc { position:relative; padding:150px 24px; color:#fff; overflow:hidden; background:var(--ink); }
.hh-loc__bg { position:absolute; inset:0; }
.hh-loc__bg img { width:100%; height:100%; object-fit:cover; opacity:.6; }
.hh-loc::before { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,22,32,.45), rgba(15,22,32,.88)); z-index:1; }
.hh-loc__in { position:relative; z-index:2; max-width:1240px; margin:0 auto; }
.hh-loc__list { list-style:none; margin:0 0 56px; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border-top:1px solid var(--line); }
.hh-loc__list li { padding:34px 26px 10px 0; border-right:1px solid rgba(255,255,255,.12); padding-left:22px; }
.hh-loc__list li:first-child { padding-left:0; }
.hh-loc__list li:last-child { border-right:0; }
.hh-loc__list em { display:block; font-style:normal; font-family:'Marcellus',serif; font-size:15px; color:var(--gold-t); margin-bottom:18px; letter-spacing:.1em; }
.hh-loc__list h3 { font-size:19px; font-weight:500; margin:0 0 12px; }
.hh-loc__list p { font-size:14px; line-height:1.75; color:rgba(255,255,255,.75); margin:0; }

/* 5. 층별 평면 */
.hh-units { background:var(--ivory); padding:150px 24px; }
.hh-units__grid { max-width:1240px; margin:0 auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.hh-card { background:#fff; padding:0 0 34px; transition:transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s; }
.hh-card:hover { transform:translateY(-8px); box-shadow:0 24px 50px rgba(15,22,32,.12); }
.hh-card__img { background:#f0ede6; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; padding:22px; overflow:hidden; }
.hh-card__img img { max-height:100%; object-fit:contain; transition:transform .8s cubic-bezier(.16,1,.3,1); }
.hh-card:hover .hh-card__img img { transform:scale(1.05); }
.hh-card__tag { margin:28px 30px 8px; font-family:'Marcellus',serif; font-size:13px; letter-spacing:.2em; color:var(--gold-d); }
.hh-card h3 { margin:0 30px 14px; font-size:24px; font-weight:400; }
.hh-card > p:last-child { margin:0 30px; font-size:15px; line-height:1.8; color:var(--mute); }

/* 6. 실내 */
.hh-inte { background:var(--navy); padding:140px 24px 110px; color:#fff; }
.hh-inte__row { max-width:1240px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr); gap:18px; }
.hh-inte__row figure { margin:0; overflow:hidden; position:relative; }
.hh-inte__row img { width:100%; height:440px; object-fit:cover; transition:transform 1.2s cubic-bezier(.16,1,.3,1); }
.hh-inte__row figure:hover img { transform:scale(1.06); }
.hh-inte__row figcaption { position:absolute; left:0; bottom:0; padding:16px 20px; font-family:'Marcellus',serif; font-size:12px; letter-spacing:.2em;
  background:linear-gradient(0deg, rgba(10,16,24,.75), rgba(10,16,24,0)); width:100%; }

/* 7. 방문예약 */
.hh-visit { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); background:var(--ink); color:#fff; }
.hh-visit__txt { padding:130px max(6vw, calc((100vw - 1240px)/2)) 130px max(6vw, calc((100vw - 1240px)/2)); padding-right:70px; }
.hh-visit__txt > p { color:rgba(255,255,255,.76); line-height:1.9; font-size:16px; margin:0 0 36px; max-width:460px; }
.hh-visit__tel { display:inline-block; font-family:'Marcellus',serif; font-size:clamp(32px,3vw,46px); color:var(--gold-t); letter-spacing:.04em;
  padding-bottom:10px; border-bottom:1px solid var(--line); margin-bottom:18px; }
.hh-visit__addr { font-size:14px !important; color:rgba(255,255,255,.66) !important; margin:0 0 30px !important; }
.hh-visit__links { list-style:none; padding:0; margin:0; display:flex; gap:26px; flex-wrap:wrap; }
.hh-visit__links a { color:#fff; font-size:14px; letter-spacing:.06em; border-bottom:1px solid rgba(255,255,255,.35); padding-bottom:4px; }
.hh-visit__form { background:var(--ivory); padding:90px 6vw; display:flex; align-items:center; justify-content:center; }
.hh-visit__form .hb-form { margin:0; width:100%; max-width:520px; border:0; border-radius:0; box-shadow:0 30px 60px rgba(15,22,32,.08); padding:40px 36px; }
.hh-visit__form .hb-form__title { font-weight:400; font-size:26px; color:var(--ink); }
.hh-visit__form .hb-form button[type=submit] { background:var(--ink); border-radius:0; letter-spacing:.1em; }
.hh-visit__form .hb-form input, .hh-visit__form .hb-form select, .hh-visit__form .hb-form textarea { border-radius:0; border-color:#d6d0c4; }

/* 화면에 들어오면 나타나기 (js 가 켜질 때만) */
html.hh-js .hh [data-hh] { opacity:0; transform:translateY(40px); transition:opacity 1.1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1); }
html.hh-js .hh [data-hh].is-in { opacity:1; transform:none; }
html.hh-js .hh .hh-concept__img[data-hh] { transform:none; transition:opacity .6s; }
html.hh-js .hh .hh-concept__img[data-hh] img { clip-path:inset(0 0 0 100%); transition:clip-path 1.4s cubic-bezier(.77,0,.18,1); }
html.hh-js .hh .hh-concept__img[data-hh].is-in img { clip-path:inset(0 0 0 0); }
.hh-concept__img { overflow:hidden; padding:22px 0 0 22px; }
.hh-concept__img::before { inset:0 22px 22px 0 !important; }
.hh-loc__list li:nth-child(2), .hh-units__grid > :nth-child(2), .hh-inte__row > :nth-child(2), .hh-facts li:nth-child(2) { transition-delay:.12s !important; }
.hh-loc__list li:nth-child(3), .hh-units__grid > :nth-child(3), .hh-inte__row > :nth-child(3), .hh-facts li:nth-child(3) { transition-delay:.24s !important; }
.hh-loc__list li:nth-child(4), .hh-facts li:nth-child(4) { transition-delay:.36s !important; }
.hh-loc__list li:nth-child(5) { transition-delay:.48s !important; }

/* 휴대폰 */
@media (max-width: 990px) {
  .hh-hero { height:88svh; min-height:560px; }
  .hh-hero::after { background:linear-gradient(0deg, rgba(10,16,24,.88) 0%, rgba(10,16,24,.35) 55%, rgba(10,16,24,.15) 100%); }
  .hh-hero__in { left:22px; right:22px; bottom:9vh; }
  .hh-hero__sub { font-size:14px; margin-bottom:30px; }
  .hh-hero__scroll { display:none; }
  .hh-btn { height:50px; padding:0 24px; font-size:14px; }
  .hh-facts ul { grid-template-columns:repeat(2,1fr); padding:0; }
  .hh-facts li { padding:34px 8px; border-left:0; border-bottom:1px solid rgba(184,151,90,.25); }
  .hh-facts li:nth-child(odd) { border-right:1px solid rgba(184,151,90,.25); }
  .hh-concept { grid-template-columns:1fr; gap:56px; padding:90px 22px; }
  .hh-concept__img::before { inset:-12px 12px 12px -12px; }
  .hh-loc, .hh-units { padding:90px 22px; }
  .hh-loc__list { grid-template-columns:1fr; }
  .hh-loc__list li, .hh-loc__list li:first-child { padding:24px 0; border-right:0; border-bottom:1px solid rgba(255,255,255,.12); }
  .hh-units__grid { grid-template-columns:1fr; gap:22px; }
  .hh-inte { padding:90px 22px 70px; }
  .hh-inte__row { grid-template-columns:1fr; }
  .hh-inte__row img { height:300px; }
  .hh-visit { grid-template-columns:1fr; }
  .hh-visit__txt { padding:90px 22px 60px; }
  .hh-visit__form { padding:0 0 110px; background:var(--ink); }
  .hh-visit__form .hb-form { margin:0 16px; padding:30px 22px; }
  .hh-head { margin-bottom:38px; }
}
@media (prefers-reduced-motion: reduce) {
  .hh-hero__bg img, .hh-hero__in > * { animation:none !important; opacity:1; transform:none; }
  html.hh-js .hh [data-hh] { opacity:1 !important; transform:none !important; clip-path:none !important; }
}

/* ═════ 내릴 때 효과 (2026-10-27 사장님 「메인 페이지 내릴 때도 좀 다르게」) ═════
   원본: 한 화면씩 툭툭 넘김(fullpage) → 우리: 부드럽게 내려가며 사진은 시차로, 제목은 아래에서 밀려 올라옴 */
.hh-progress { position:fixed; top:0; left:0; right:0; height:2px; z-index:10000; pointer-events:none; }
.hh-progress i { display:block; height:100%; width:100%; background:linear-gradient(90deg, var(--gold-d), var(--gold-t)); transform-origin:0 50%; transform:scaleX(0); }
.hh-index { position:fixed; right:28px; top:50%; transform:translateY(-50%); z-index:50; display:flex; flex-direction:column; gap:16px;
  opacity:0; pointer-events:none; transition:opacity .5s; }
.hh-index.is-on { opacity:1; pointer-events:auto; }
.hh-index a { display:flex; align-items:center; justify-content:flex-end; gap:10px; font-family:'Marcellus',serif; color:var(--gold-d); font-size:11px; letter-spacing:.2em; }
.hh-index a span { opacity:0; transform:translateX(8px); transition:.4s; }
.hh-index a em { font-style:normal; text-align:right; position:relative; padding-right:34px; }
.hh-index a em::after { content:''; position:absolute; right:0; top:50%; width:22px; height:1px; background:currentColor; opacity:.5; transition:width .4s, opacity .4s; }
.hh-index a.is-now em::after { width:30px; opacity:1; }
.hh-index a.is-now span, .hh-index a:hover span { opacity:1; transform:none; }
.hh-index.is-dark a { color:var(--gold-t); }
.hh-hero__bg img, .hh-concept__img img, .hh-loc__bg img, .hh-inte__row { will-change:transform; }
.hh-hero__in, .hh-hero__scroll { will-change:transform, opacity; }
.hh-loc__bg { inset:-12% 0; }
/* 제목: 아래에서 밀려 올라오기 */
html.hh-js .hh .hh-head[data-hh], html.hh-js .hh .hh-concept__txt[data-hh] { transform:none; opacity:1; }
html.hh-js .hh .hh-h2 { clip-path:inset(0 0 100% 0); transform:translateY(46px); transition:clip-path 1.2s cubic-bezier(.77,0,.18,1), transform 1.2s cubic-bezier(.16,1,.3,1); }
html.hh-js .hh .is-in .hh-h2 { clip-path:inset(0 0 -10% 0); transform:none; }
html.hh-js .hh .hh-head .hh-eyebrow, html.hh-js .hh .hh-head .hh-lead, html.hh-js .hh .hh-concept__txt > *:not(.hh-h2) { opacity:0; transition:opacity 1s .45s; }
html.hh-js .hh .is-in .hh-eyebrow, html.hh-js .hh .is-in .hh-lead, html.hh-js .hh .hh-concept__txt.is-in > * { opacity:1; }
/* 카드: 살짝 기울었다 바로 섬 */
html.hh-js .hh .hh-card[data-hh] { transform:translateY(70px) rotate(1.2deg); }
html.hh-js .hh .hh-card[data-hh].is-in { transform:none; }
@media (max-width: 1499px) { .hh-index { display:none; } }
@media (prefers-reduced-motion: reduce) {
  html.hh-js .hh .hh-h2 { clip-path:none !important; transform:none !important; }
  html.hh-js .hh .hh-head .hh-eyebrow, html.hh-js .hh .hh-head .hh-lead, html.hh-js .hh .hh-concept__txt > * { opacity:1 !important; }
}

/* 예약 폼 — 칸이 옆으로 밀리지 않게 */
.hh .hb-form__row label { display:block; font-size:13px; letter-spacing:.04em; color:var(--mute); }
.hh .hb-form__row label > input, .hh .hb-form__row label > select, .hh .hb-form__row label > textarea { display:block; width:100%; max-width:100%; margin-top:6px; }