/* ===== 아늑 ANOOK 울산 삼산점 — styles.css =====
   브랜드 메인 = 진한 녹색.
   디자인 언어: 정적인 공간(객실·휴식) = 고동색 / 동적인 공간(라운지·회의실) = 녹색.
   톤: 미니멀·세련·아늑(warm). 모바일 우선. */

:root{
    --bg:        #faf8f4;   /* 크림 배경 */
    --bg-soft:   #f1ece3;   /* 섹션 구분용 */
    --ink:       #26221d;   /* 본문 텍스트 */
    --ink-soft:  #6b6259;   /* 서브 텍스트 */

    /* 브랜드 메인 — 진한 녹색 (동적 공간) */
    --green:     #1f4d38;
    --green-dk:  #143425;
    --green-lt:  #e4ede7;   /* 녹색 톤 라이트 배경 */

    /* 고동색 — 정적인 공간(객실·휴식) */
    --brown:     #5e3b28;
    --brown-dk:  #43271a;
    --brown-lt:  #efe4da;

    --line:      #e6ddd2;
    --white:     #ffffff;
    --radius:    16px;
    --maxw:      1080px;
    --shadow:    0 10px 30px rgba(38,34,29,.08);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
    font-family:'Pretendard', system-ui, -apple-system, 'Apple SD Gothic Neo', sans-serif;
    color:var(--ink);
    background:var(--bg);
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
    word-break:keep-all;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 20px; }
.container-narrow{ max-width:760px; }
.pc-only{ display:none; }

/* ===== Buttons ===== */
.btn{
    display:inline-flex; align-items:center; justify-content:center;
    gap:6px; font-weight:700; font-size:1rem;
    padding:14px 26px; border-radius:999px;
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
    cursor:pointer; border:none; text-align:center;
}
.btn-sm{ padding:9px 18px; font-size:.9rem; }
.btn-primary{ background:var(--green); color:#fff; box-shadow:0 6px 18px rgba(31,77,56,.3); }
.btn-primary:hover{ background:var(--green-dk); transform:translateY(-2px); }
.btn-brown{ background:var(--brown); color:#fff; box-shadow:0 6px 18px rgba(94,59,40,.28); }
.btn-brown:hover{ background:var(--brown-dk); transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--ink); border:1.5px solid var(--line); }
.btn-ghost:hover{ border-color:var(--green); color:var(--green); }
.section-dark .btn-ghost,
.section-brown .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.35); }
.section-brown .btn-ghost:hover{ border-color:#fff; color:#fff; }

/* ===== Header ===== */
.site-header{
    position:sticky; top:0; z-index:50;
    background:rgba(250,248,244,.88); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
}
.header-inner{ display:flex; align-items:center; gap:14px; height:72px; }
.brand{ display:flex; flex-direction:column; line-height:1.12; margin-right:auto; }
.brand-mark{ font-weight:900; letter-spacing:.1em; font-size:1.5rem; color:var(--green); }
.brand-mark .brand-rounge{ color:var(--brown); }
.brand-mark .brand-dot{ color:var(--line); font-weight:400; margin:0 4px; }
.brand-sub{ font-size:.74rem; color:var(--ink-soft); letter-spacing:.01em; margin-top:1px; }
.nav{ display:none; gap:22px; font-size:.95rem; font-weight:600; }
.nav a:hover{ color:var(--green); }
.nav-cta{ flex-shrink:0; }
.lang-switch{
    flex-shrink:0; font-weight:800; font-size:.82rem; letter-spacing:.04em;
    color:var(--green); border:1.5px solid var(--line); border-radius:999px;
    padding:7px 12px; transition:border-color .15s, color .15s;
}
.lang-switch:hover{ border-color:var(--green); color:var(--green-dk); }

/* ===== Hero (세로 사진 + 텍스트 분할) ===== */
.hero{
    background:
        radial-gradient(110% 80% at 92% 0%, var(--green-lt) 0%, rgba(228,237,231,0) 52%),
        var(--bg);
    padding:38px 0 54px;
}
.hero-inner{ display:grid; gap:28px; align-items:center; }
.hero-media{ order:-1; }
.hero-media img{
    width:100%; aspect-ratio:3/4; max-height:440px;
    object-fit:cover; object-position:center top;
    border-radius:20px; box-shadow:0 18px 42px rgba(38,34,29,.16); display:block;
    background:linear-gradient(135deg,#1f4d38,#43271a);
}
.hero-copy{ text-align:center; }
.hero-eyebrow{
    display:inline-block; font-weight:700; font-size:.85rem; letter-spacing:.04em;
    color:var(--green-dk); background:var(--green-lt); padding:6px 14px; border-radius:999px;
    margin-bottom:18px;
}
.hero-title{ font-size:2.05rem; font-weight:900; line-height:1.26; letter-spacing:-.01em; color:var(--ink); }
.accent{ color:var(--green); }
.hero-slogan{ margin-top:12px; font-size:.8rem; font-weight:700; letter-spacing:.24em; color:var(--green-dk); text-transform:uppercase; }
.hero-lead{ margin:18px auto 14px; color:var(--ink-soft); font-size:1.02rem; max-width:560px; }
.hero-tagline{ margin:0 auto 22px; font-size:.9rem; font-weight:600; color:var(--ink-soft); }
.sw-brown{ color:var(--brown); }
.sw-green{ color:var(--green); }
/* 층별 컨셉 (5F·6F 한옥 / 3F·4F 모던) */
.hero-concept{ display:flex; flex-direction:column; gap:9px; margin:0 auto 24px; max-width:540px; }
.hero-concept p{
    display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px;
    font-size:.92rem; font-weight:600; color:var(--ink-soft);
}
.hero-concept .floor{ font-weight:800; font-size:.78rem; padding:3px 10px; border-radius:7px; letter-spacing:.02em; }
.hero-concept .floor.brown{ background:var(--brown-lt); color:var(--brown); }
.hero-concept .floor.green{ background:var(--green-lt); color:var(--green-dk); }
.hero-concept .cname{ font-weight:800; }
.hero-chips{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:0 auto 24px; max-width:520px; }
.hero-chips li{
    background:var(--white); border:1px solid var(--line); border-radius:999px;
    padding:6px 14px; font-size:.84rem; font-weight:600; color:var(--ink-soft);
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.hero-address{ margin-top:22px; font-weight:600; color:var(--ink-soft); font-size:.95rem; }

/* ===== Sections ===== */
.section{ padding:72px 0; }
.section-soft{ background:var(--bg-soft); }
.section-green-soft{ background:var(--green-lt); }
.section-dark{ background:var(--green-dk); color:#e7efea; }   /* 동적 = 녹색 다크 */
.section-brown{ background:var(--brown-dk); color:#f0e6dd; }  /* 정적 = 고동색 다크 */
.section-dark .section-desc{ color:#bcd0c5; }
.section-brown .section-desc{ color:#d6c6ba; }

.section-eyebrow{
    font-weight:800; font-size:.8rem; letter-spacing:.18em; color:var(--green-dk);
    margin-bottom:12px;
}
.section-eyebrow.green{ color:var(--green); }
.section-eyebrow.brown{ color:var(--brown); }
.section-brown .section-eyebrow{ color:#e3b48f; }
.section-dark .section-eyebrow{ color:#9ccab2; }
.section-title{ font-size:1.7rem; font-weight:800; line-height:1.3; letter-spacing:-.01em; }
.section-desc{ margin-top:16px; color:var(--ink-soft); font-size:1.02rem; max-width:680px; }
.note{ margin-top:20px; font-size:.86rem; color:var(--ink-soft); }
.note.light{ color:#b6c6bc; }

/* ===== Grid cards ===== */
.grid{ display:grid; gap:18px; margin-top:34px; }
.grid-3{ grid-template-columns:1fr; }
.card{
    background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
    padding:26px 24px; box-shadow:var(--shadow);
}
.card-icon{ font-size:1.8rem; margin-bottom:12px; }
.card h3{ font-size:1.12rem; font-weight:800; margin-bottom:8px; }
.card p{ color:var(--ink-soft); font-size:.96rem; }

/* 객실 = 정적 = 고동색 */
.card-room{ padding:0; overflow:hidden; }
/* 룸 카드 표지 사진 (없으면 고동색 배경 + alt 텍스트) */
.room-photo{
    width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
    background:linear-gradient(135deg, var(--brown-lt), #e0cdba); color:var(--brown);
    font-size:.9rem; font-weight:700;
}
.sig-photo{
    width:100%; aspect-ratio:16/10; object-fit:cover; display:block;
    background:linear-gradient(135deg,#6b4631,#42261a); color:#e3b48f;
    font-size:.9rem; font-weight:700;
}
.card-room h3{ margin:18px 24px 6px; color:var(--brown); }
.card-room p{ margin:0 24px 24px; }
.room-thumb{
    aspect-ratio:4/3;
    background:linear-gradient(135deg, var(--brown-lt), #e0cdba);
    color:var(--brown); font-weight:700; font-size:.95rem;
    display:flex; align-items:center; justify-content:center; text-align:center;
}

/* ===== 시그니처 객실 = 정적/감성 = 고동색 다크 ===== */
.sig-grid{ display:grid; gap:20px; margin-top:34px; }
.sig-card{
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.14);
    border-radius:var(--radius); overflow:hidden;
    display:flex; flex-direction:column;
}
/* TODO: OTA 실사진으로 교체 */
.sig-thumb{
    aspect-ratio:16/10;
    background:linear-gradient(135deg,#6b4631,#42261a);
    color:#e3b48f; font-weight:700; font-size:.95rem;
    display:flex; align-items:center; justify-content:center; text-align:center;
}
.sig-body{ padding:22px 22px 24px; display:flex; flex-direction:column; flex:1; }
.sig-tag{ font-size:.74rem; font-weight:800; letter-spacing:.06em; color:#e3b48f; margin-bottom:8px; }
.sig-card h3{ color:#fff; font-size:1.18rem; font-weight:800; }
.sig-spec{ list-style:none; margin:12px 0 16px; }
.sig-spec li{ position:relative; padding-left:18px; margin-bottom:6px; color:#e7d9cc; font-size:.92rem; }
.sig-spec li::before{ content:"·"; position:absolute; left:5px; top:-1px; color:#e3b48f; font-weight:900; }
.sig-use{ margin-top:auto; font-size:.86rem; color:#d6c6ba; line-height:1.55; }
.sig-use strong{ color:#fff; }
.center-cta{ text-align:center; margin-top:32px; }

/* 전 객실 공통 시설 스트립 (정적 = 고동색) */
.common-strip{ margin-top:30px; padding:22px 24px; background:var(--brown-lt); border-radius:var(--radius); }
.common-strip h4{ font-size:.78rem; letter-spacing:.1em; color:var(--brown); font-weight:800; margin-bottom:12px; }
.common-strip ul{ list-style:none; display:flex; flex-wrap:wrap; gap:10px; }
.common-strip li{ background:#fff; border:1px solid #e6d6c6; border-radius:999px; padding:8px 16px; font-size:.88rem; font-weight:600; color:var(--brown); }

/* ===== 2층 라운지 = 동적 = 녹색 ===== */
.lounge-grid{ list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:30px; }
.lounge-grid li{
    display:flex; align-items:center; gap:12px;
    background:var(--white); border:1px solid #d3e2d8; border-left:4px solid var(--green);
    border-radius:12px; padding:16px 18px; font-weight:600; font-size:.96rem;
}
.lounge-ico{ font-size:1.3rem; }
.facility-chips{
    list-style:none; display:flex; flex-wrap:wrap; gap:10px; margin-top:24px;
}
.facility-chips li{
    background:var(--white); border:1px solid var(--line); border-radius:999px;
    padding:8px 16px; font-size:.88rem; font-weight:600; color:var(--ink-soft);
}

/* ROUNGE 317 가격표 */
.guest-free{
    display:inline-flex; align-items:center; gap:8px; margin-top:18px;
    background:var(--green); color:#fff; font-weight:700; font-size:.92rem;
    padding:9px 18px; border-radius:999px; box-shadow:0 6px 16px rgba(31,77,56,.25);
}
.price-grid{ display:grid; gap:18px; margin-top:30px; grid-template-columns:1fr; }
.price-card{
    background:#fff; border:1px solid #d3e2d8; border-radius:var(--radius);
    padding:24px; box-shadow:var(--shadow);
}
.price-card.price-special{ background:var(--green-lt); border-color:#bfd6c6; }
.price-card h4{ font-size:1.05rem; font-weight:800; color:var(--green-dk); margin-bottom:14px; }
.price-list{ list-style:none; }
.price-list li{
    display:flex; justify-content:space-between; align-items:baseline; gap:12px;
    padding:9px 0; border-bottom:1px dashed var(--line); font-size:.96rem; font-weight:600;
}
.price-list li:last-child{ border-bottom:none; }
.price-list .amt{ font-weight:800; color:var(--green); white-space:nowrap; }
.price-note{ margin-top:12px; font-size:.84rem; color:var(--ink-soft); }

/* 가족 행사 패키지 콜아웃 */
.event-package{ margin-top:26px; background:var(--green-dk); color:#eaf2ec; border-radius:var(--radius); padding:26px 24px; box-shadow:var(--shadow); }
.event-package h4{ color:#fff; font-size:1.14rem; font-weight:800; margin-bottom:10px; }
.event-package p{ color:#cbe0d3; font-size:.97rem; }
.event-package .ep-tiers{ list-style:none; margin:16px 0 4px; }
.event-package .ep-tiers li{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:11px 0; border-bottom:1px solid rgba(255,255,255,.15); font-weight:600; }
.event-package .ep-tiers li:last-child{ border-bottom:none; }
.event-package .ep-tiers .amt{ font-weight:800; color:#bfe6cf; white-space:nowrap; }
.event-package .ep-note{ margin-top:12px; font-size:.85rem; color:#9ec3ad; }

/* ===== 주변 안내 (가볼만한 곳 · 맛집) ===== */
.nearby-sub{ margin-top:38px; margin-bottom:2px; font-size:1.08rem; font-weight:800; color:var(--green-dk); }
.eat-list{ list-style:none; display:grid; grid-template-columns:1fr; gap:10px; margin-top:16px; }
.eat-list li{
    background:var(--white); border:1px solid var(--line); border-left:4px solid var(--green);
    border-radius:10px; padding:14px 16px; font-size:.96rem; font-weight:600; color:var(--ink-soft);
}
.eat-list strong{ font-weight:800; color:var(--ink); }
.course-grid{ display:grid; grid-template-columns:1fr; gap:18px; margin-top:18px; }
.course-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); }
.course-head{ display:flex; align-items:center; gap:12px; margin-bottom:8px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.course-badge{ flex-shrink:0; background:var(--green); color:#fff; font-weight:800; font-size:.85rem; padding:6px 13px; border-radius:999px; white-space:nowrap; box-shadow:0 4px 12px rgba(31,77,56,.25); }
.course-head h4{ font-size:1.1rem; font-weight:800; color:var(--ink); }
.course-day{ display:flex; gap:12px; align-items:flex-start; padding:11px 0; }
.course-day + .course-day{ border-top:1px dashed var(--line); }
.day-chip{ flex-shrink:0; margin-top:1px; background:var(--green-lt); color:var(--green-dk); font-weight:800; font-size:.72rem; letter-spacing:.02em; padding:5px 9px; border-radius:7px; }
.course-day p{ font-size:.93rem; color:var(--ink); font-weight:600; line-height:1.6; }
.course-day em{ color:var(--brown); font-style:normal; font-weight:800; font-size:.82rem; }
.course-opt{ margin-top:6px; }
.course-opt .day-chip{ background:var(--brown-lt); color:var(--brown); }

/* ===== Map ===== */
.map-layout{ display:grid; gap:24px; margin-top:30px; }
.map-frame{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--line); }
.map-frame iframe{ width:100%; height:300px; border:0; display:block; }
.map-info h3{ font-size:1.2rem; font-weight:800; color:var(--green); }
.map-addr{ color:var(--ink-soft); margin:6px 0 16px; }
.dist-list{ list-style:none; margin-bottom:20px; }
.dist-list li{ padding:8px 0; border-bottom:1px dashed var(--line); }
.map-links{ display:flex; gap:10px; flex-wrap:wrap; }

/* ===== Reserve ===== */
.reserve-inner{ text-align:center; }
.reserve-inner .section-desc{ margin-left:auto; margin-right:auto; }
.reserve-buttons{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:30px; }
.btn-ota{ min-width:160px; color:#fff; }
.btn-yeogi{ background:#ff3478; }
.btn-yanolja{ background:#3d5afe; }
.btn-booking{ background:#00224f; }
.btn-ota:hover{ transform:translateY(-2px); filter:brightness(1.06); }

/* ===== FAQ ===== */
.faq-item{
    background:var(--white); border:1px solid var(--line); border-radius:12px;
    padding:0; margin-top:14px; overflow:hidden;
}
.faq-item summary{
    cursor:pointer; list-style:none; padding:20px 22px;
    font-weight:700; font-size:1.02rem; position:relative; padding-right:48px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
    content:"+"; position:absolute; right:22px; top:50%; transform:translateY(-50%);
    font-size:1.4rem; color:var(--green); font-weight:400; transition:transform .2s;
}
.faq-item[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.faq-item p{ padding:0 22px 22px; color:var(--ink-soft); font-size:.97rem; }

/* ===== Footer ===== */
.site-footer{ background:var(--green-dk); color:#bdd0c5; padding:50px 0 30px; }
.footer-inner{ display:flex; flex-direction:column; gap:24px; justify-content:space-between; }
.footer-brand .brand-mark{ color:#fff; }
.footer-brand p{ margin-top:10px; font-size:.9rem; line-height:1.6; }
.footer-links{ display:flex; gap:20px; flex-wrap:wrap; font-weight:600; font-size:.92rem; }
.footer-links a:hover{ color:#fff; }
.copyright{ text-align:center; margin-top:34px; font-size:.8rem; color:#6f8478; }

/* ===== Desktop ===== */
@media (min-width:760px){
    .grid-3{ grid-template-columns:repeat(3,1fr); }
    .lounge-grid{ grid-template-columns:repeat(3,1fr); }
    .price-grid{ grid-template-columns:repeat(3,1fr); }
    .eat-list{ grid-template-columns:repeat(2,1fr); }
    .map-layout{ grid-template-columns:1.3fr 1fr; align-items:start; }
    .map-frame iframe{ height:360px; }
}
@media (min-width:900px){
    .pc-only{ display:inline; }
    .nav{ display:flex; }
    .hero{ padding:54px 0 62px; }
    .hero-inner{ grid-template-columns:minmax(0,0.8fr) 1.2fr; gap:48px; }
    .hero-media{ order:0; }                 /* 왼쪽 세로 사진 */
    .hero-media img{ aspect-ratio:3/4; max-height:none; }
    .hero-copy{ text-align:left; }          /* 오른쪽 글씨 */
    .hero-lead, .hero-tagline, .hero-chips, .hero-concept{ margin-left:0; margin-right:0; }
    .hero-chips{ justify-content:flex-start; }
    .hero-concept p{ justify-content:flex-start; }
    .hero-actions{ justify-content:flex-start; }
    .hero-title{ font-size:2.7rem; }
    .section-title{ font-size:2.1rem; }
    .sig-grid{ grid-template-columns:repeat(3,1fr); }
    .footer-inner{ flex-direction:row; align-items:center; }
}

/* ===== 갤러리 썸네일 + 라이트박스(모달) ===== */
.gallery-thumb{ position:relative; cursor:pointer; overflow:hidden; display:block; }
.gallery-thumb img{ transition:transform .45s ease; }
.gallery-thumb:hover img{ transform:scale(1.05); }
.gallery-badge{
    position:absolute; right:10px; bottom:10px;
    background:rgba(20,18,16,.6); color:#fff; font-size:.74rem; font-weight:700;
    padding:5px 11px; border-radius:999px; backdrop-filter:blur(4px);
    pointer-events:none; letter-spacing:.02em;
}

.lightbox{ position:fixed; inset:0; z-index:200; background:rgba(15,12,10,.93); display:none; align-items:center; justify-content:center; }
.lightbox.open{ display:flex; }
.lb-stage{ margin:0; max-width:92vw; text-align:center; }
.lb-stage img{ max-width:92vw; max-height:78vh; object-fit:contain; border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.lb-cap{ color:#f0e6dd; font-size:.95rem; font-weight:600; margin-top:14px; }
.lb-close,.lb-prev,.lb-next{ position:absolute; background:rgba(255,255,255,.13); color:#fff; border:none; cursor:pointer; border-radius:999px; backdrop-filter:blur(4px); line-height:1; }
.lb-close{ top:18px; right:18px; width:44px; height:44px; font-size:1.7rem; }
.lb-prev,.lb-next{ top:50%; transform:translateY(-50%); width:50px; height:50px; font-size:1.3rem; }
.lb-prev{ left:14px; } .lb-next{ right:14px; }
.lb-close:hover,.lb-prev:hover,.lb-next:hover{ background:rgba(255,255,255,.26); }
.lb-count{ position:absolute; bottom:20px; left:50%; transform:translateX(-50%); color:#d8ccc0; font-size:.85rem; font-weight:600; background:rgba(0,0,0,.42); padding:5px 14px; border-radius:999px; }