@charset "UTF-8";
/* 호텔크라페 홈페이지 고급 테마 시안 (2026-10-30)
   색 3가지: 딥 포레스트 그린 #183428 / 웜 아이보리 #F4EEE2 / 샴페인 골드 #B4915A
   글꼴: 제목 Gowun Batang(명조), 영문 장식 Cormorant Garamond, 본문 Pretendard */
:root{
  /* 팔레트 변수: 이 블록만 바꾸면 색 전체가 바뀜 */
  --g:#183428;--g-hi:#21453a;--g-lo:#122a20;--deep-rgb:16,36,27;--shadow-rgb:24,52,40;
  --ink:#183428;--ink-rgb:24,52,40;
  --iv:#F4EEE2;--iv2:#EDE5D4;--iv-rgb:244,238,226;--white:#FBF8F1;
  --au:#B4915A;--au-rgb:180,145,90;--au-light:#D9BE8C;
  --ink-70:rgba(var(--ink-rgb),.72);--ink-55:rgba(var(--ink-rgb),.58);
  --g-70:var(--ink-70);--g-55:var(--ink-55);
  --au-40:rgba(var(--au-rgb),.42);--au-20:rgba(var(--au-rgb),.2);
  --iv-80:rgba(var(--iv-rgb),.84);--iv-60:rgba(var(--iv-rgb),.66);
  --paper:var(--iv);--muted:var(--ink-70);--green:var(--g);--line:var(--au-40);--sand:var(--iv2);
  --serif:"Gowun Batang","Nanum Myeongjo",serif;
  --latin:"Cormorant Garamond","Gowun Batang",serif;
  --font:"Pretendard Variable",Pretendard,"Malgun Gothic","Apple SD Gothic Neo",system-ui,sans-serif;
  --shadow-1:0 1px 2px rgba(var(--shadow-rgb),.06),0 8px 24px rgba(var(--shadow-rgb),.08);
  --shadow-2:0 2px 6px rgba(var(--shadow-rgb),.06),0 24px 60px rgba(var(--shadow-rgb),.16);
}
body{font-family:var(--font);color:var(--ink);background:var(--iv);letter-spacing:-.01em;font-variant-numeric:lining-nums}
.story-intro>p:not(.eyebrow):not(.story-lead){font-size:17px}
.story-intro h2+p{font-family:var(--serif);font-size:21px!important;color:var(--ink)!important;margin-bottom:10px}
h1,h2,h3{font-family:var(--serif);font-weight:700;letter-spacing:-.035em;color:var(--ink)}
h2{font-size:clamp(32px,3.4vw,48px);line-height:1.32}
h3{line-height:1.45}
::selection{background:var(--au-40)}

/* eyebrow: gold small caps line */
.eyebrow{font-family:var(--latin);font-style:normal;font-weight:600;font-size:16px;letter-spacing:.08em;color:var(--au);display:flex;align-items:center;gap:14px;margin-bottom:16px}
.eyebrow::before{content:"";width:38px;height:1px;background:var(--au)}

/* header */
.site-header{background:rgba(var(--iv-rgb),.9);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--au-40)}
.wordmark{font-family:var(--latin);font-weight:600;font-style:italic;letter-spacing:-.02em;color:var(--ink)}
.brand-sub{font-family:var(--font);font-size:10px;letter-spacing:.24em;color:var(--au);border-left-color:var(--au-40)}
.site-nav{font-size:14px;font-weight:500;letter-spacing:.01em}
.site-nav a{position:relative;padding:4px 0}
.site-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--au);transform:scaleX(0);transition:transform .25s}
.site-nav a:hover::after,.site-nav a[aria-current=page]::after{transform:scaleX(1)}
.site-nav a[aria-current=page]{border-bottom:0;font-weight:700}

/* buttons: green with gold edge, lifted */
.button{border-radius:2px;letter-spacing:.04em;font-weight:600;transition:transform .2s,box-shadow .2s,background .2s,color .2s}
.button.solid{background:linear-gradient(180deg,var(--g-hi) 0%,var(--g) 100%);border-color:var(--g);color:var(--iv);box-shadow:inset 0 0 0 1px var(--au-40),0 10px 24px rgba(var(--shadow-rgb),.22)}
.button.solid:hover{background:var(--g);transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--au),0 16px 32px rgba(var(--shadow-rgb),.28)}
.button.light{background:var(--iv);color:var(--ink);border-color:var(--iv);box-shadow:0 12px 30px rgba(0,0,0,.25)}
.button.light:hover{background:#fff;transform:translateY(-2px)}
.button.ghost{border-color:var(--au);color:var(--iv)}
.button.ghost:hover{background:rgba(var(--au-rgb),.18)}
.button.outline{border-color:var(--g)}
.header-reserve{padding:11px 22px}

/* HERO */
.hero-v2{background:var(--g)}
.hero-v2::after{background:linear-gradient(180deg,rgba(var(--deep-rgb),.38) 0%,rgba(var(--deep-rgb),.22) 30%,rgba(var(--deep-rgb),.6) 64%,rgba(var(--deep-rgb),.94) 100%),linear-gradient(90deg,rgba(var(--deep-rgb),.62) 0%,rgba(var(--deep-rgb),0) 65%)}
.hero-v2-inner{padding-bottom:56px}
.hero-v2 h1,.hero-v2 h1.hero-h1-long{color:var(--iv);font-family:var(--serif);font-weight:700;letter-spacing:-.04em;text-shadow:0 4px 30px rgba(0,0,0,.35)}
.hero-v2 h1.hero-h1-long{font-size:clamp(34px,3.9vw,58px);line-height:1.3}
.hero-lead{font-family:var(--serif);font-size:21px;color:var(--iv);opacity:1}
.hero-kicker{font-family:var(--latin);font-style:normal;font-weight:600;font-size:17px;letter-spacing:.2em;color:var(--au-light);text-shadow:0 1px 10px rgba(0,0,0,.45);opacity:1}
.hero-badge{border-color:var(--au);background:rgba(var(--shadow-rgb),.35);color:var(--iv)}
.badge-dot{background:var(--au);box-shadow:0 0 0 3px var(--au-20)}
.hero-doors{gap:18px}
.hero-door{position:relative;border:1px solid var(--au-40);border-top:2px solid var(--au);background:linear-gradient(160deg,rgba(var(--iv-rgb),.16),rgba(var(--iv-rgb),.05));box-shadow:0 18px 40px rgba(0,0,0,.28);border-radius:4px;transition:transform .25s,background .25s}
.hero-door:hover{transform:translateY(-4px);background:linear-gradient(160deg,rgba(var(--iv-rgb),.24),rgba(var(--iv-rgb),.08))}
.door-name{font-family:var(--serif);font-size:24px;color:var(--iv)}
.door-desc{color:var(--iv-80);opacity:1}
.door-go{color:var(--au)}
.hero-call{background:var(--iv);color:var(--ink);box-shadow:0 10px 24px rgba(0,0,0,.25)}
.hero-call strong{font-family:var(--font);color:var(--ink)}
.hero-call .call-ico{color:var(--au)}
.hero-meta{color:var(--iv-80);opacity:1;letter-spacing:.03em}

/* STORY: ivory with layered cards */
.story{background:linear-gradient(180deg,var(--iv) 0%,var(--iv2) 100%)}
.story-lead{font-family:var(--serif);font-size:24px;line-height:1.65;color:var(--ink)}
.story-intro p{font-size:16px}
.story-values{gap:26px}
.story-values>div{position:relative;background:var(--white);border:0;border-radius:4px;padding:30px 28px;box-shadow:var(--shadow-1)}
.story-values>div::before{content:"";position:absolute;left:28px;top:0;width:40px;height:3px;background:var(--au)}
.story-values h3{font-size:22px}
.story-values .number{display:block;font-family:var(--latin);font-weight:600;font-size:40px;line-height:1;color:var(--au);margin-bottom:6px}
.story-intro h2{font-size:clamp(34px,3.6vw,50px)}
.story-grid{gap:30px}
.story-card{position:relative;background:var(--g);border:0;border-radius:4px;padding:44px 40px;box-shadow:var(--shadow-2);color:var(--iv)}
.story-card::after{content:"";position:absolute;inset:12px;border:1px solid var(--au-40);pointer-events:none;border-radius:2px}
.story-card h3{color:var(--iv);font-size:27px}
.story-card p{color:var(--iv-80)}
.story-place{font-family:var(--latin);font-style:normal;font-size:16px;letter-spacing:.12em;color:var(--au)}
.story-card .story-meaning{color:var(--iv);border-left-color:var(--au);font-family:var(--serif)}
.story-close{font-family:var(--serif);font-size:23px;color:var(--ink)}

/* BRANCH CARDS: gold offset frame = depth */
.section-head>p{font-size:16px;color:var(--ink-70)}
.branch-grid{gap:44px}
.branch-card{position:relative;background:var(--white);padding:18px 18px 30px;box-shadow:var(--shadow-2);border-radius:4px;transition:transform .3s}
.branch-card:hover{transform:translateY(-6px)}
.branch-photo{border-radius:2px}
.branch-photo::after{content:"";position:absolute;inset:10px;border:1px solid rgba(var(--iv-rgb),.7);pointer-events:none}
.branch-code{background:var(--g);color:var(--iv);font-family:var(--latin);font-style:normal;font-size:14px;letter-spacing:.1em;padding:6px 14px}
.branch-card h3{font-size:32px;margin-top:22px;padding:0 8px}
.branch-card .sub{font-family:var(--serif);font-size:17px;color:var(--ink-70);padding:0 8px}
.branch-card .address{padding:0 8px;color:var(--ink-55)}
.tags,.card-actions{padding:0 8px}
.tag{border-color:var(--au-40);color:var(--ink);background:rgba(var(--au-rgb),.08);font-size:12px;padding:5px 12px}
.text-link{border-bottom-color:var(--au);font-weight:600}
.text-link:hover{color:var(--au)}

/* PURPOSE: deep green band */
.purpose{background:radial-gradient(120% 140% at 0% 0%,var(--g-hi) 0%,var(--g) 55%,var(--g-lo) 100%);color:var(--iv)}
.purpose h2,.purpose h3{color:var(--iv)}
.purpose .section-head>p{color:var(--iv-60)}
.purpose .eyebrow{color:var(--au)}
.purpose-grid article{border-top:1px solid var(--au-40);padding-top:26px}
.purpose-grid .number{font-family:var(--latin);font-size:44px;font-style:italic;color:var(--au);margin-bottom:10px;line-height:1}
.purpose-grid h3{font-size:25px}
.purpose-grid p{color:var(--iv-80);font-size:15px}

/* booking banner: floating card */
.quiet-banner{position:relative;margin-top:-1px;padding:56px 56px;background:var(--white);box-shadow:var(--shadow-2);border-top:3px solid var(--au);transform:translateY(-40px);border-radius:4px}
.quiet-banner h2{font-size:32px}

/* FOOTER: dark */
.footer{background:var(--g);color:var(--iv);border-top:0}
.footer .wordmark{color:var(--iv)}
.footer h3{color:var(--au);font-family:var(--serif);font-size:17px}
.footer p,.footer a{color:var(--iv-80);font-size:13px}
.footer a:hover{color:var(--au)}
.footer-bottom{border-top-color:var(--au-40);color:var(--iv-60);font-size:11px}

/* BRANCH PAGES */
.subnav{background:var(--white);border-color:var(--au-40);font-weight:500;box-shadow:var(--shadow-1)}
.subnav a:hover{color:var(--au)}
.branch-story{background:linear-gradient(180deg,var(--iv2),var(--iv))}
.branch-story-sub{font-family:var(--serif);font-size:20px}
.branch-story-body>p{font-size:16.5px;color:var(--ink-70)}
.branch-story-body h3{font-size:22px}
.branch-story-body h3::before{background:var(--au);width:26px}
.branch-story-close{background:var(--g);color:var(--iv)!important;border-left:3px solid var(--au);font-family:var(--serif);box-shadow:var(--shadow-2)}
.gallery-open{position:relative}
.gallery-open img{border-radius:3px;box-shadow:var(--shadow-1);transition:transform .3s,box-shadow .3s}
.gallery-open:hover img{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.gallery-open span{font-family:var(--serif);font-size:14px}
.rooms{background:var(--g);color:var(--iv)}
.rooms h2,.rooms h3{color:var(--iv)}
.rooms .eyebrow{color:var(--au)}
.rooms .section-head>p,.rooms .fineprint{color:var(--iv-60)}
.room-item{background:rgba(var(--iv-rgb),.05);border:1px solid var(--au-40);border-top:3px solid var(--au);padding:28px 26px;border-radius:4px;transition:transform .25s,background .25s}
.room-item:hover{transform:translateY(-4px);background:rgba(var(--iv-rgb),.09)}
.room-item .room-no{font-family:var(--latin);font-style:normal;letter-spacing:.14em;font-size:15px;color:var(--au)}
.room-item h3{font-size:25px}
.room-item p{color:var(--iv-80)}
.room-item .capacity{color:var(--au)}
.rooms .text-link{color:var(--iv)}
.callout{border-color:var(--au-40);color:var(--ink);background:var(--white)}
.rooms .callout{background:rgba(var(--iv-rgb),.06);color:var(--iv-80)}
.amenity{border-top-color:var(--au-40)}
.amenity h3{font-family:var(--serif);font-size:19px}
.location-section{background:var(--iv2)}
.address-card{background:var(--white);box-shadow:var(--shadow-2);border-top:3px solid var(--au);border-radius:4px}
.address-card address{font-family:var(--serif);font-size:24px}
.faqs details{border-color:var(--au-40)}
.faqs summary{font-family:var(--serif);font-size:18px}
.faqs summary:after{color:var(--au)}
.branch-end{background:var(--g);color:var(--iv);border-top:0;padding-top:72px;padding-bottom:80px}
.branch-end h2{color:var(--iv);font-size:36px}
.branch-end p{color:var(--iv-60)}
.branch-end .button.solid{background:var(--iv);color:var(--ink);border-color:var(--au)}
.mobile-bar{background:var(--g);border-top:2px solid var(--au)}
.mobile-bar a+a{border-left-color:var(--au-40)}
dialog{background:var(--iv);border:1px solid var(--au-40);box-shadow:var(--shadow-2)}
.booking-options a{background:var(--white);border-color:var(--au-40);transition:transform .2s,box-shadow .2s}
.booking-options a:hover{transform:translateY(-2px);box-shadow:var(--shadow-1)}
.booking-options strong{font-family:var(--serif);font-size:21px}

@media (max-width:860px){
  .hero-lead{font-size:17px}
  .story-lead{font-size:20px}
  .story-card{padding:34px 26px}
  .quiet-banner{padding:36px 26px;transform:translateY(-24px)}
  .branch-card{padding:12px 12px 24px}
  .purpose-grid .number{font-size:34px}
}
@container(max-width:760px){
  .eyebrow{font-size:15px}
  h2{font-size:30px}
  .hero-v2 h1.hero-h1-long{font-size:28px}
  .branch-card h3{font-size:27px}
  .quiet-banner{display:block}
}