/* HOTELIAN — 홈(index) 공통 스타일 · 국문 / 영문(/en/) 홈이 함께 사용합니다 */
/* ==========================================================================
   02  TOKENS — 색상 · 서체 · 간격
   ========================================================================== */
:root{
  /* color */
  --ink:#14211c;          /* 본문 텍스트 · 다크 배경 */
  --forest:#1e3a2f;       /* 브랜드 그린 */
  --paper:#f7f5f0;        /* 밝은 섹션 배경 */
  --white:#ffffff;
  --brass:#b08d3e;        /* 포인트 골드 */
  --brass-lt:#c9a961;
  --stone:#6f756e;        /* 보조 텍스트 */
  --line:#e4e0d6;         /* 구분선 */

  /* type */
  --serif-en:'Cormorant Garamond', serif;
  --serif-kr:'Noto Serif KR', serif;
  --sans:'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;

  /* spacing */
  --sec-pad:96px;
  --wrap:1200px;
}
@media(max-width:768px){ :root{ --sec-pad:64px; } }

/* ==========================================================================
   03  BASE
   ========================================================================== */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  font-family:var(--sans);color:var(--ink);background:var(--white);
  line-height:1.7;font-weight:400;overflow-x:hidden;max-width:100%;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.section{padding:var(--sec-pad) 0}
.section--paper{background:var(--paper)}
.section--forest{background:var(--forest);color:#fff}
.section--ink{background:var(--ink);color:#fff;text-align:center}

.eyebrow{font-family:var(--serif-en);font-size:14px;letter-spacing:.35em;text-transform:uppercase;color:var(--brass);margin-bottom:14px}
.section--forest .eyebrow{color:var(--brass-lt)}
.title{font-family:var(--serif-kr);font-size:clamp(26px,3.4vw,40px);font-weight:500;line-height:1.35;letter-spacing:-.01em}
.section--forest .title,.section--ink .title{color:#fff}
.subtitle{color:var(--stone);margin-top:14px;font-size:15.5px;max-width:660px}
.section--forest .subtitle{color:#b6c2b9}
.section--ink .subtitle{color:#a9b3ab;margin-left:auto;margin-right:auto}

.btn{display:inline-block;padding:14px 34px;font-size:14px;letter-spacing:.08em;border:1px solid var(--brass);transition:all .25s}
.btn--solid{background:var(--brass);color:#fff}
.btn--solid:hover{background:var(--brass-lt);border-color:var(--brass-lt)}
.btn--ghost{color:#fff}
.btn--ghost:hover{background:rgba(255,255,255,.1)}

/* 500ml 강조 배지 — 규제 대응 포지션의 시각 신호 */
.vol{display:inline-flex;align-items:center;gap:6px;font-family:var(--serif-en);font-size:12.5px;letter-spacing:.14em;
     padding:5px 12px;border:1px solid var(--brass);color:var(--brass);text-transform:uppercase}
.vol--fill{background:var(--brass);color:#fff;border-color:var(--brass)}

/* 스크롤 리빌 */
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ==========================================================================
   04  BLOCKS
   ========================================================================== */

/* --- 04.1 공지 티커 --------------------------------------------------- */
.ticker{background:var(--ink);color:#c9cec9;font-size:12.5px;overflow:hidden;white-space:nowrap}
.ticker__inner{display:inline-block;padding:9px 0;animation:tick 38s linear infinite}
.ticker__inner span{margin:0 34px}
.ticker__inner b{color:var(--brass-lt);font-weight:500}
@keyframes tick{from{transform:translateX(100vw)}to{transform:translateX(-100%)}}
@media(prefers-reduced-motion:reduce){.ticker__inner{animation:none;padding-left:24px}}

/* --- 04.2 헤더 -------------------------------------------------------- */
.header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.logo{font-family:var(--serif-en);font-size:26px;font-weight:600;letter-spacing:.14em}
.logo em{font-style:normal;color:var(--brass)}
.logo small{display:block;font-family:var(--sans);font-size:10px;letter-spacing:.28em;color:var(--stone);font-weight:400;margin-top:-2px}
.menu{display:flex;gap:6px;align-items:center}
.menu>li{position:relative}
.menu>li>a{display:block;padding:26px 15px;font-size:14.5px;font-weight:500;transition:color .2s}
.menu>li>a:hover{color:var(--brass)}
.menu__drop{position:absolute;top:100%;left:8px;min-width:200px;background:#fff;border:1px solid var(--line);
  box-shadow:0 14px 34px rgba(20,33,28,.1);opacity:0;visibility:hidden;transform:translateY(8px);transition:all .22s;padding:8px 0}
.menu>li:hover .menu__drop{opacity:1;visibility:visible;transform:translateY(0)}
.menu__drop a{display:block;padding:10px 20px;font-size:13.5px;color:var(--stone);transition:all .15s}
.menu__drop a:hover{color:var(--ink);background:var(--paper);padding-left:24px}
.nav__cta{background:var(--forest);color:#fff;padding:11px 24px;font-size:13.5px;letter-spacing:.06em;transition:background .2s}
.nav__cta:hover{background:var(--brass)}
.burger{display:none;background:none;border:none;cursor:pointer;padding:8px}
.burger span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0}
@media(max-width:1024px){
  .menu{display:none;position:absolute;top:74px;left:0;right:0;background:#fff;flex-direction:column;gap:0;
        border-bottom:1px solid var(--line);padding:8px 0;align-items:stretch}
  .menu.is-open{display:flex}
  .menu>li>a{padding:14px 28px}
  .menu__drop{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;padding:0 0 8px 16px;display:none}
  .menu>li:hover .menu__drop{display:block}
  .nav__cta{margin:10px 28px}
  .burger{display:block}
}

/* --- 04.3 히어로 ------------------------------------------------------ */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.slide{display:none;min-height:600px;position:relative}
.slide.is-active{display:block}
.slide__bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.38}
.slide__bg--mark{opacity:1;display:flex;align-items:center;justify-content:flex-end;padding-right:4vw;
  background:radial-gradient(circle at 78% 50%,rgba(176,141,62,.22),transparent 55%),var(--forest)}
.slide__bg--mark span{font-family:var(--serif-en);font-size:clamp(90px,15vw,220px);font-weight:500;line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(201,169,97,.45);letter-spacing:-.01em;white-space:nowrap}
@media(max-width:768px){.slide__bg--mark span{opacity:.5}}
.slide__veil{position:absolute;inset:0;background:linear-gradient(100deg,rgba(20,33,28,.95) 32%,rgba(20,33,28,.35) 75%,rgba(20,33,28,.15))}
.slide .wrap{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;min-height:600px;padding-top:70px;padding-bottom:90px}
.slide__kicker{font-family:var(--serif-en);letter-spacing:.4em;text-transform:uppercase;font-size:13px;color:var(--brass-lt);margin-bottom:22px}
.slide h1,.slide h2{font-family:var(--serif-kr);font-size:clamp(30px,4.6vw,54px);font-weight:500;line-height:1.32;max-width:760px;letter-spacing:-.01em}
.slide em{font-style:normal;color:var(--brass-lt)}
.slide p{margin-top:22px;max-width:580px;color:#c8cdc7;font-size:16px;font-weight:300}
.slide__btns{margin-top:36px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero__nav{position:absolute;bottom:34px;left:0;right:0;z-index:5}
.hero__nav .wrap{display:flex;gap:10px;align-items:center}
.dot{width:34px;height:2px;background:rgba(255,255,255,.3);border:none;cursor:pointer;transition:.3s;padding:0}
.dot.is-on{background:var(--brass-lt);width:52px}

/* --- 04.4 회사소개 + 연혁 --------------------------------------------- */
.about{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center}
.about>*{min-width:0}
.about p{margin-top:20px;color:#3d453f;font-size:15.5px;overflow-wrap:break-word}
.about .lead{font-family:var(--serif-kr);font-size:19px;color:var(--ink);line-height:1.75}
.about__link{display:inline-block;margin-top:30px;font-size:14px;letter-spacing:.1em;color:var(--brass);border-bottom:1px solid var(--brass);padding-bottom:4px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.stat{background:#fff;padding:40px 30px}
.stat__n{font-family:var(--serif-en);font-size:clamp(72px,7.5vw,104px);font-weight:600;color:var(--forest);
  line-height:1;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;letter-spacing:-.01em}
.stat__n .cnt{font-size:inherit;font-variant-numeric:lining-nums}
.stat__n i{font-style:normal;font-family:var(--serif-kr);font-size:clamp(24px,2.4vw,32px);color:var(--brass);font-weight:500}
.stat__label{display:block;margin-top:16px;font-size:13.5px;color:var(--stone);line-height:1.6}
@media(max-width:900px){.about{grid-template-columns:1fr;gap:44px}}

/* --- 04.5 새 출발 인사 ------------------------------------------------ */
.news .title{max-width:820px}
.letter{margin-top:48px;max-width:820px;padding:44px 48px;background:var(--paper);border-left:2px solid var(--brass);
  font-family:var(--serif-kr);font-size:16.5px;line-height:1.95;color:#2f3832;word-break:keep-all}
.letter p+p{margin-top:18px}
.letter__sign{margin-top:30px!important;text-align:right;font-size:15px;color:var(--stone)}
.letter__sign b{color:var(--ink);font-weight:600;margin-left:4px}
.promises{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:44px}
.promise{background:#fff;padding:32px 28px}
.promise__n{font-family:var(--serif-en);font-variant-numeric:lining-nums;font-size:28px;color:var(--brass);font-weight:500;line-height:1}
.promise h3{font-family:var(--serif-kr);font-size:18px;font-weight:600;margin-top:14px}
.promise p{margin-top:10px;font-size:14px;color:var(--stone);line-height:1.7}
@media(max-width:860px){.promises{grid-template-columns:1fr}}
@media(max-width:560px){.letter{padding:30px 22px;font-size:15.5px}}

/* --- 04.6 규제 대응 솔루션 -------------------------------------------- */
.solutions{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12);margin-top:56px}
.solution{background:var(--forest);padding:34px 26px}
.solution__tag{font-family:var(--serif-en);font-size:15px;letter-spacing:.2em;color:var(--brass-lt)}
.solution h3{font-size:17px;font-weight:500;margin-top:14px;color:#fff}
.solution p{margin-top:10px;font-size:13.5px;color:#a9b8ad;line-height:1.65}
.pullquote{margin-top:44px;padding:28px 32px;border-left:2px solid var(--brass);background:rgba(255,255,255,.05);
  font-family:var(--serif-kr);font-size:17px;line-height:1.8;color:#dfe6e0}
@media(max-width:960px){.solutions{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.solutions{grid-template-columns:1fr}}

/* --- 04.7 Why Hotelian ------------------------------------------------ */
.reasons{margin-top:56px;border-top:1px solid var(--line)}
.reason{display:grid;grid-template-columns:110px 320px 1fr;gap:30px;padding:34px 0;border-bottom:1px solid var(--line);align-items:baseline}
.reason__n{font-family:var(--serif-en);font-size:34px;color:var(--brass);font-weight:500}
.reason h3{font-family:var(--serif-kr);font-size:19px;font-weight:600;line-height:1.5}
.reason p{font-size:14.5px;color:var(--stone)}
@media(max-width:900px){.reason{grid-template-columns:60px 1fr;gap:14px}.reason p{grid-column:2}}

/* --- 04.8 제품 탭 ----------------------------------------------------- */
.tabs{display:flex;margin-top:48px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.tab{font-family:var(--sans);font-size:14.5px;font-weight:500;padding:14px 26px;cursor:pointer;
  color:var(--stone);background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;transition:.2s}
.tab.is-on{color:var(--ink);border-color:var(--brass)}
.panel{display:none;margin-top:44px}
.panel.is-on{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.panel__img{aspect-ratio:4/3;overflow:hidden;border:1px solid var(--line);background:#fff}
.panel__img img{width:100%;height:100%;object-fit:cover}
.panel__art{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:radial-gradient(circle at 30% 25%,rgba(201,169,97,.25),transparent 60%),var(--forest);border-color:var(--forest);color:#fff}
.panel__art b{font-family:var(--serif-en);font-size:clamp(64px,8vw,104px);font-weight:500;line-height:1;color:var(--brass-lt)}
.panel__art b i{font-style:normal;font-size:.4em;margin-left:4px;color:#fff}
.panel__art span{font-family:var(--serif-en);font-size:13px;letter-spacing:.35em;text-transform:uppercase;color:#b6c2b9}
.panel__art--kraft{background:radial-gradient(circle at 70% 30%,rgba(255,255,255,.25),transparent 60%),#b89a6e;border-color:#b89a6e}
.panel__art--kraft b{color:#fff}
.panel__art--kraft span{color:#f3eadb}
.panel__art--ink{background:radial-gradient(circle at 50% 80%,rgba(201,169,97,.2),transparent 60%),var(--ink);border-color:var(--ink)}
.panel h3{font-family:var(--serif-kr);font-size:24px;font-weight:500}
.panel p{margin-top:16px;color:#3d453f;font-size:15px}
.panel ul{margin-top:20px}
.panel li{padding:9px 0;border-bottom:1px solid var(--line);font-size:14px;color:#4a524c}
.panel li::before{content:"—";color:var(--brass);margin-right:12px}
@media(max-width:860px){.panel.is-on{grid-template-columns:1fr;gap:30px}}

/* --- 04.9b 규제 요약 박스 ------------------------------------------------ */
.regbox{margin-top:44px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12)}
.regbox>div{background:rgba(20,33,28,.35);padding:24px 22px}
.regbox b{display:block;font-family:var(--serif-kr);font-size:20px;font-weight:500;color:#fff}
.regbox span{display:block;margin-top:6px;font-size:13.5px;color:#a9b8ad;line-height:1.65}
.regbox__more{margin-top:18px;font-size:14px;color:#b6c2b9}
.regbox__more a{color:var(--brass-lt);border-bottom:1px solid var(--brass-lt)}
@media(max-width:760px){.regbox{grid-template-columns:1fr}}

/* --- 04.9c 호텔용품 도매 · 납품 / OEM 사례 / FAQ ----------------------------- */
.supply{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:44px}
.supply__item{border:1px solid var(--line);background:#fff;padding:24px}
.supply__item h3{font-size:16.5px;font-weight:600}
.supply__item p{margin-top:8px;font-size:14px;color:var(--stone)}
.supply__item a{display:inline-block;margin-top:10px;font-size:13px;color:var(--brass);border-bottom:1px solid var(--brass)}
.flow{list-style:none;margin-top:40px;display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line);counter-reset:f}
.flow li{background:var(--paper);padding:20px 18px;font-size:13.5px;color:#4a524c;counter-increment:f}
.flow li::before{content:counter(f,decimal-leading-zero);display:block;font-family:var(--serif-en);font-size:22px;color:var(--brass)}
.flow b{display:block;color:var(--ink);font-weight:500;margin-bottom:4px}
@media(max-width:900px){.flow{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.flow{grid-template-columns:1fr}}
.more{margin-top:22px;font-size:14px;color:var(--stone)}
.more a{color:var(--brass);border-bottom:1px solid var(--brass);margin-right:12px}
.cases{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:44px}
.case{border:1px solid var(--line);background:#fff}
.case img{aspect-ratio:4/3;width:100%;object-fit:contain;background:#fff}
.case figcaption{padding:16px 20px;font-size:14px;color:var(--stone);border-top:1px solid var(--line)}
.case figcaption b{display:block;color:var(--ink);font-weight:500}
@media(max-width:700px){.cases{grid-template-columns:1fr}}
.faq{margin-top:40px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:18px 4px}
.faq summary{cursor:pointer;font-weight:500;font-size:15.5px;list-style:none;position:relative;padding-right:30px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:-2px;font-size:20px;color:var(--brass)}
.faq details[open] summary::after{content:"−"}
.faq details p{margin-top:10px;font-size:14.5px;color:#3d453f}

/* --- 04.10 문의 · 푸터 ------------------------------------------------- */
.qform{margin:40px auto 0;max-width:720px;display:grid;grid-template-columns:1fr 1fr;gap:12px;text-align:left}
.qform label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:#a9b3ab}
.qform .full{grid-column:1/-1}
.qform input,.qform select,.qform textarea{font-family:var(--sans);font-size:15px;padding:12px 14px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);color:#fff;outline:none}
.qform input:focus,.qform select:focus,.qform textarea:focus{border-color:var(--brass-lt)}
.qform select option{color:var(--ink)}
.qform textarea{min-height:110px;resize:vertical}
.qform button{grid-column:1/-1;justify-self:center;cursor:pointer;font-family:var(--sans)}
.qform__note{grid-column:1/-1;text-align:center;font-size:12.5px;color:#8b968e}
@media(max-width:600px){.qform{grid-template-columns:1fr}}
.cta-row{margin-top:40px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.footer{background:#0e1714;color:#8b968e;font-size:13.5px}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:44px;padding:64px 0 48px}
.footer__grid h4{color:#fff;font-size:14px;font-weight:500;letter-spacing:.08em;margin-bottom:18px}
.footer__grid li{margin-bottom:10px}
.footer__grid a:hover{color:var(--brass-lt)}
.footer__logo{font-family:var(--serif-en);font-size:24px;letter-spacing:.14em;color:#fff;font-weight:600}
.footer__desc{margin-top:16px;line-height:1.8}
.footer__bottom{border-top:1px solid rgba(255,255,255,.08);padding:22px 0;font-size:12.5px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
@media(max-width:900px){.footer__grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer__grid{grid-template-columns:1fr}}

/* --- 04.11 언어 전환 (KO / EN) ------------------------------------------ */
.lang-switch{display:flex;border:1px solid var(--line);margin-left:10px}
.menu>li.lang-switch>a{padding:6px 11px;font-size:12px;letter-spacing:.1em;color:var(--stone)}
.menu>li.lang-switch>a:hover{color:var(--ink)}
.menu>li.lang-switch>a[aria-current]{background:var(--ink);color:#fff}
@media(max-width:1024px){.lang-switch{align-self:flex-start;margin:6px 28px 10px}}