/* ============================================================
   한울빛 (theme/33) - 보조 CSS
   Tailwind utility 우선, 여기는 예외 보정만(아이콘/풀블리드/슬라이더/그리드)
   ============================================================ */

:root { --maxw: 1380px; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { word-break: keep-all; }
img { display: block; }
a { -webkit-tap-highlight-color: transparent; }

/* ---- 아이콘 정렬 고정 (밀림 방지) ---- */
.ic {
  display: inline-block;
  vertical-align: -0.125em;
  flex: 0 0 auto;
  stroke-width: 2;
}
svg.ic { stroke-width: 2; }
.ic-14 { width: 14px; height: 14px; }
.ic-15 { width: 15px; height: 15px; }
.ic-16 { width: 16px; height: 16px; }
.ic-18 { width: 18px; height: 18px; }
.ic-20 { width: 20px; height: 20px; }
.ic-22 { width: 22px; height: 22px; }
.ic-26 { width: 26px; height: 26px; }
.ic-30 { width: 30px; height: 30px; }
/* FontAwesome 폭 고정 */
.fa-solid, .fa-regular, .fa-brands { line-height: 1; }

/* ---- GNB underline ---- */
.gnb-link { position: relative; padding: 6px 0; transition: color .2s; }
.gnb-link::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--color-primary, #2F7BD6); transition: width .25s;
}
.gnb-link:hover { color: var(--color-ink, #211C17); }
.gnb-link:hover::after { width: 100%; }

/* ---- HERO ---- */
.hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transform: scale(1.06); transition: transform 6s ease;
}
.swiper-slide-active .hero-bg { transform: scale(1); }
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(20,16,12,.55) 0%, rgba(20,16,12,.18) 45%, rgba(20,16,12,.35) 100%),
    linear-gradient(0deg, rgba(20,16,12,.45) 0%, rgba(20,16,12,0) 40%);
}
.hero-inner { display: flex; }

/* 세로 캘리그래피 블록: 우측 정렬 */
.hero-vert {
  position: absolute; right: 4.5rem; top: 50%; transform: translateY(-50%);
  display: flex; align-items: flex-start; gap: 1.6rem; color: #fff;
}
@media (max-width: 1023px){ .hero-vert { right: 3.2rem; } }
@media (max-width: 767px){ .hero-vert { right: 2rem; gap: 1rem; } }

.hero-vsub {
  writing-mode: vertical-rl; text-orientation: upright;
  font-size: 1.15rem; line-height: 2.1; letter-spacing: .12em;
  color: rgba(255,255,255,.92); text-shadow: 0 2px 12px rgba(0,0,0,.45);
}
@media (max-width: 767px){ .hero-vsub { font-size: .95rem; } }

.hero-vtitle {
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  font-weight: 800; line-height: 1; text-shadow: 0 4px 20px rgba(0,0,0,.4);
}
.hero-vtitle span {
  font-size: 4.6rem; padding: .35rem .55rem; border: 2px solid rgba(255,255,255,.55);
  width: 1.55em; height: 1.4em; display: flex; align-items: center; justify-content: center;
  margin-bottom: -2px;
}
@media (max-width: 1023px){ .hero-vtitle span { font-size: 3.4rem; } }
@media (max-width: 767px){ .hero-vtitle span { font-size: 2.5rem; } }
@media (max-width: 360px){ .hero-vtitle span { font-size: 2.1rem; } }

.hero-brand {
  position: absolute; left: 1.5rem; bottom: 4.5rem;
  writing-mode: vertical-rl; color: rgba(255,255,255,.8);
  font-size: .95rem; letter-spacing: .25em; padding-left: 1.5rem;
}
.hero-tag {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 5.2rem;
  color: rgba(255,255,255,.55); font-size: .72rem; letter-spacing: .35em;
  border-top: 1px solid rgba(255,255,255,.3); padding-top: .5rem;
}
@media (max-width: 767px){ .hero-tag { display:none; } .hero-brand{ bottom: 3.5rem; font-size:.8rem;} }

/* hero dots */
.hero-dots .swiper-pagination-bullet {
  width: 8px; height: 8px; background: rgba(255,255,255,.45); opacity: 1;
  border-radius: 9999px; transition: all .3s; margin: 0 !important;
}
.hero-dots .swiper-pagination-bullet-active { background: #fff; height: 22px; }

/* ---- BUSINESS 세로 카드 슬라이드 ---- */
.business-line { position: relative; }
.biz-slide { overflow: hidden; }
.biz-slide .swiper-slide { width: 120px; height: auto; }
@media (max-width: 1279px){ .biz-slide .swiper-slide { width: 110px; } }
@media (max-width: 767px){ .biz-slide .swiper-slide { width: 130px; } }
.vcard {
  position: relative; display: block; border-radius: 14px; overflow: hidden;
  height: 100%; min-height: 300px;
}
@media (max-width: 1279px){ .vcard { min-height: 260px; } }
@media (max-width: 767px){ .vcard { min-height: 240px; } }
.vcard img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.vcard:hover img { transform: scale(1.08); }
.vcard::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,0) 55%); }
.vcard-cap {
  position: absolute; left: 0; right: 0; bottom: 12px; z-index: 2; text-align: center;
  color: #fff; font-size: .8rem; font-weight: 600;
  writing-mode: vertical-rl; margin: 0 auto; height: auto; bottom: 14px; left: 10px; right: auto;
  letter-spacing: .1em; text-shadow: 0 2px 8px rgba(0,0,0,.5);
}

/* ---- MEDIA ---- */
.media-card {
  display: block; background: #fff; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(0,0,0,.05); transition: box-shadow .25s, transform .25s;
}
.media-card:hover { box-shadow: 0 18px 40px -18px rgba(0,0,0,.25); transform: translateY(-4px); }
.media-thumb { aspect-ratio: 16/10; overflow: hidden; background:#eee; }
.media-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.media-card:hover .media-thumb img { transform: scale(1.06); }
.media-badge { display:inline-block; font-size:.72rem; font-weight:700; color:var(--color-primary,#2F7BD6); margin-bottom:.5rem; }
.media-title { font-size: 1.0rem; font-weight: 700; color: var(--color-ink,#211C17); line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.media-desc { margin-top:.5rem; font-size:.83rem; color: rgba(33,28,23,.5); line-height:1.6;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.media-date { display:block; margin-top:.9rem; font-size:.78rem; color: rgba(33,28,23,.35); font-family:Inter; }
.media-feature { min-height: 100%; }
.media-feat-slide { border-radius: 16px; }

/* quick menu */
.quick-card {
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background:#fff; border:1px solid rgba(0,0,0,.05); border-radius:16px;
  padding: 1.4rem 1.6rem; transition: box-shadow .25s, transform .2s;
}
.quick-card:hover { box-shadow: 0 14px 30px -16px rgba(0,0,0,.22); transform: translateY(-3px); }
.quick-title { display:block; font-size:1.15rem; font-weight:800; color:var(--color-ink,#211C17); }
.quick-desc { display:block; font-size:.8rem; color:rgba(33,28,23,.45); margin-top:.25rem; }

/* ---- RECRUIT ---- */
.recruit-btn {
  display:inline-flex; align-items:center; justify-content:space-between; gap:1.5rem;
  min-width: 220px; height: 54px; padding: 0 1.5rem; border-radius: 9999px;
  font-weight: 700; font-size:.95rem; transition: transform .15s, opacity .2s, box-shadow .2s;
  box-shadow: 0 8px 20px -10px rgba(0,0,0,.4);
}
.recruit-btn:hover { transform: translateY(-2px); opacity:.94; }
.recruit-btn:active { transform: scale(.97); }

/* ---- FOOTER ---- */
.footer-btn {
  display:flex; align-items:center; justify-content:space-between;
  height:48px; padding:0 1.2rem; border:1px solid rgba(0,0,0,.1); border-radius:10px;
  font-size:.9rem; font-weight:600; color:rgba(33,28,23,.8); transition: background .2s, border-color .2s;
}
.footer-btn:hover { border-color: var(--color-primary,#2F7BD6); color: var(--color-primary,#2F7BD6); }
.footer-select {
  width:100%; height:48px; padding:0 1rem; border:1px solid rgba(0,0,0,.1); border-radius:10px;
  font-size:.9rem; color:rgba(33,28,23,.75); background:#fff; cursor:pointer;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat; background-position: right 1rem center;
}
.footer-select:focus { outline:none; border-color: var(--color-primary,#2F7BD6); }

/* ---- POPUP ---- */
.popup-card {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: calc(100% - 2.5rem); max-width: 380px; background:#fff; border-radius: 18px;
  overflow: hidden; box-shadow: 0 30px 80px -20px rgba(0,0,0,.55);
}
@media (max-width: 767px){
  .popup-card { top: auto; bottom: 0; transform: translateX(-50%);
    width: 100%; max-width: 100%; border-radius: 18px 18px 0 0; }
}

/* ---- Swiper bullet (media feature) 숨김 기본 ---- */
.media-feat-slide .swiper-pagination-bullet { background: rgba(255,255,255,.5); opacity:1; }
.media-feat-slide .swiper-pagination-bullet-active { background:#fff; }

/* ---- 공통: grid 자식 min-width 0 (CDN 그리드 폭발 방지) ---- */
.grid > * { min-width: 0; }

/* AOS 미발동 대비: IO fallback에서 .aos-animate 부여 */
[data-aos].aos-init { will-change: transform, opacity; }