/* ============================================================
   연어마켓 (theme/39) — 보조 스타일
   Tailwind utility 보완: full-bleed/배경/슬라이더/아이콘 정렬/CDN 한계 보정
   ============================================================ */

:root{
  --navy:#1d3b5e; --navy2:#16304d; --salmon:#d4694a; --coral:#e07a52;
  --teal:#2f7d8a; --indigo:#51589f; --ink:#14171a; --sand:#f4f2ee;
}

html{ scroll-behavior:smooth; overflow-x:hidden; }
body{ -webkit-font-smoothing:antialiased; }

/* grid 안전장치 (Tailwind4 CDN 한계 보정) */
[class*="grid-cols"] > *{ min-width:0; }

/* ---------- 아이콘 정렬 고정 (밀림 방지) ---------- */
.lic{ display:inline-block; vertical-align:middle; flex:0 0 auto; stroke-width:2; }
svg.lucide{ display:inline-block; vertical-align:middle; }

/* ---------- HEADER ---------- */
#header{ background:transparent; }
#header.scrolled{
  background:rgba(255,255,255,.97);
  color:var(--ink);
  box-shadow:0 4px 24px rgba(0,0,0,.08);
  backdrop-filter:saturate(1.1) blur(4px);
}
#header.scrolled .logo-mark{ background:var(--salmon); }
.nav-link{ position:relative; transition:color .2s; }
.nav-link::after{
  content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px;
  background:var(--salmon); transition:width .25s;
}
.nav-link:hover::after{ width:100%; }
.nav-link:hover{ color:var(--salmon); }

/* ---------- MOBILE DRAWER ----------
   Tailwind4의 translate-x-full(=CSS translate 속성)이 transform을
   덮는 함정을 피하기 위해 transform만으로 제어한다. */
.drawer-panel{ transform:translateX(100%); transition:transform .3s ease; }
#mobileMenu.open{ display:block; }
#mobileMenu.open .drawer-overlay{ opacity:1; }
#mobileMenu.open .drawer-panel{ transform:translateX(0); }
.drawer-link{
  padding:.85rem .25rem; border-bottom:1px solid rgba(255,255,255,.08);
  transition:color .2s, padding-left .2s;
}
.drawer-link:hover{ color:var(--salmon); padding-left:.6rem; }

/* ---------- HERO ---------- */
.hero-bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  transform:scale(1.08); transition:transform 6s ease-out;
}
.heroSwiper .swiper-slide-active .hero-bg{ transform:scale(1); }
.hero-ctrl{
  width:42px; height:42px; border-radius:9999px;
  border:1px solid rgba(255,255,255,.45); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08); transition:all .2s;
}
.hero-ctrl:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.hero-pagination .swiper-pagination-bullet{
  width:28px; height:3px; border-radius:0; background:rgba(255,255,255,.4); opacity:1; transition:background .3s;
}
.hero-pagination .swiper-pagination-bullet-active{ background:var(--salmon); width:44px; }

/* 버튼 */
.btn-outline-white{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.85rem 1.9rem; border:1px solid rgba(255,255,255,.7);
  font-size:.9rem; font-weight:600; letter-spacing:.05em; color:#fff;
  border-radius:2px; transition:all .25s;
}
.btn-outline-white:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.btn-solid-navy{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.9rem 1.9rem; background:var(--navy); color:#fff;
  font-size:.92rem; font-weight:600; border-radius:4px; transition:all .25s;
}
.btn-solid-navy:hover{ background:var(--salmon); transform:translateY(-2px); box-shadow:0 10px 24px rgba(212,105,74,.3); }

/* ---------- QUICK CONSULT ---------- */
.consult-input{
  height:46px; padding:0 1rem; border-radius:4px; border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.1); color:#fff; font-size:.92rem; outline:none; transition:border-color .2s, background .2s;
}
.consult-input::placeholder{ color:rgba(255,255,255,.6); }
.consult-input:focus{ border-color:#fff; background:rgba(255,255,255,.18); }
.btn-consult{
  height:46px; padding:0 1.5rem; border-radius:4px; background:var(--salmon); color:#fff;
  font-size:.92rem; font-weight:700; display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  transition:all .2s;
}
.btn-consult:hover{ background:var(--coral); }
.btn-consult:active{ transform:translateY(1px); }

/* ---------- MENU CARDS ---------- */
.menu-card{
  position:relative; height:380px; border-radius:8px; overflow:hidden; cursor:pointer;
}
.menu-card-img{
  position:absolute; inset:0; background-size:cover; background-position:center;
  transition:transform .6s ease;
}
.menu-card:hover .menu-card-img{ transform:scale(1.08); }
.menu-card-overlay{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,12,15,.92) 0%, rgba(10,12,15,.55) 45%, rgba(10,12,15,.15) 100%);
}
.menu-card-body{
  position:absolute; left:0; right:0; bottom:0; padding:1.8rem; color:#fff;
}
.menu-card-more{
  display:inline-flex; align-items:center; gap:.35rem; margin-top:1rem;
  font-size:.85rem; font-weight:600; color:var(--coral);
  opacity:0; transform:translateY(8px); transition:all .3s;
}
.menu-card:hover .menu-card-more{ opacity:1; transform:translateY(0); }

/* ---------- NOTICE ---------- */
.noticeSwiper .swiper-slide{ height:60px; }
.notice-item{ font-size:.93rem; color:#333; transition:color .2s; }
.notice-item:hover{ color:var(--salmon); }
.notice-ctrl{
  width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(0,0,0,.15); border-radius:3px; color:#555; transition:all .2s;
}
.notice-ctrl:hover{ background:var(--navy); color:#fff; border-color:var(--navy); }

/* ---------- BRAND ---------- */
.brand-bg{ background-size:cover; background-position:center; }

/* ---------- NEWS ---------- */
.newsSwiper{ padding-bottom:.25rem; }
.news-card{
  display:flex; align-items:stretch; height:170px; background:#fff; border:1px solid rgba(0,0,0,.07);
  border-radius:6px; overflow:hidden; transition:box-shadow .25s, transform .25s;
}
.news-card:hover{ box-shadow:0 14px 34px rgba(0,0,0,.1); transform:translateY(-3px); }
.news-text{ flex:1; min-width:0; padding:1.5rem 1.6rem; display:flex; flex-direction:column; justify-content:center; }
.news-title{
  font-size:1.05rem; font-weight:700; color:var(--ink); margin-bottom:.6rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.news-card:hover .news-title{ color:var(--indigo); }
.news-desc{
  font-size:.86rem; color:#777; line-height:1.6;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.news-thumb{
  position:relative; width:210px; flex:0 0 210px; background-size:cover; background-position:center;
}
.news-date{
  position:absolute; bottom:0; left:0; right:0; padding:.45rem .8rem;
  background:rgba(0,0,0,.55); color:#fff; font-size:.78rem;
}
.news-pagination{ height:4px; }
.news-pagination .swiper-pagination-progressbar-fill{ background:var(--navy); }
.swiper-pagination-progressbar{ background:rgba(0,0,0,.12); border-radius:9999px; }
.news-nav{
  width:44px; height:44px; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(0,0,0,.15); border-radius:4px; color:#444; background:#fff; transition:all .2s;
}
.news-nav:hover{ background:var(--navy); color:#fff; border-color:var(--navy); }
.news-nav.swiper-button-disabled{ opacity:.4; cursor:default; }
.news-nav.swiper-button-disabled:hover{ background:#fff; color:#444; border-color:rgba(0,0,0,.15); }

/* ---------- PARTNER ---------- */
.partner-logo{
  height:96px; display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(0,0,0,.1); border-radius:8px; background:#fafafa;
  color:#555; font-weight:700; font-size:.98rem; text-align:center; padding:0 .8rem;
  transition:all .25s;
}
.partner-logo:hover{ border-color:var(--teal); color:var(--teal); background:#fff; box-shadow:0 8px 20px rgba(0,0,0,.06); }

/* ---------- CONTACT ---------- */
.contact-tag{
  display:inline-flex; align-items:center; justify-content:center; min-width:48px;
  padding:.2rem .55rem; background:#fff; color:var(--ink); font-size:.78rem; font-weight:700; border-radius:2px;
}
.contact-box{ background:#000; border:1px solid rgba(255,255,255,.08); border-radius:8px; padding:1.4rem 1.5rem; }

/* ---------- FOOTER ---------- */
.footer-select{
  width:100%; height:46px; padding:0 1rem; border-radius:4px; cursor:pointer;
  background:#262626 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 1rem center;
  border:1px solid rgba(255,255,255,.15); color:#ddd; font-size:.9rem;
  -webkit-appearance:none; appearance:none;
}
.footer-select:focus{ outline:none; border-color:var(--salmon); }
.footer-link-btn{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  width:100%; padding:.75rem 1.1rem; border:1px solid rgba(255,255,255,.15); border-radius:4px;
  color:#ddd; font-size:.9rem; transition:all .2s;
}
.footer-link-btn:hover{ border-color:var(--salmon); color:#fff; }

/* ---------- 반응형 보정 ---------- */
@media (max-width:1023px){
  .news-thumb{ width:140px; flex:0 0 140px; }
}
@media (max-width:767px){
  .news-card{ height:150px; }
  .news-thumb{ width:118px; flex:0 0 118px; }
  .news-text{ padding:1.1rem 1.2rem; }
}
@media (max-width:479px){
  .news-card{ flex-direction:column; height:auto; }
  .news-thumb{ width:100%; flex:0 0 auto; height:130px; order:-1; }
  .news-desc{ -webkit-line-clamp:2; }
}

/* very small */
@media (max-width:320px){
  .menu-card{ height:320px; }
}