/* ============================================================
   WEBIS LOGIS (theme/34) — 보조 CSS
   해양·물류 업종 / 블루 톤 골격 흡수본
   본문은 Tailwind utility 중심. 여기는 예외 보조만.
   ============================================================ */

/* ---- 아이콘 정렬 고정 (밀림 방지) ---- */
.ic { display: inline-block; vertical-align: middle; flex: 0 0 auto; stroke-width: 2; }
.ic-14 { width: 14px; height: 14px; }
.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-24 { width: 24px; height: 24px; }
.ic-26 { width: 26px; height: 26px; }
.ic-34 { width: 34px; height: 34px; }
svg.lucide { display: block; }

/* ---- PC 내비 링크 ---- */
.nav-link {
    display: inline-flex; align-items: center; height: 100%;
    padding: 0 1.25rem; color: rgba(255,255,255,.92);
    font-size: 1.125rem; font-weight: 500; position: relative;
    transition: color .2s;
}
.nav-link::after {
    content: ""; position: absolute; left: 1.25rem; right: 1.25rem; bottom: 26px;
    height: 2px; background: #fff; transform: scaleX(0); transform-origin: left;
    transition: transform .25s;
}
.nav-link:hover { color: #fff; }
.nav-link:hover::after { transform: scaleX(1); }

/* ---- 서비스 카드 ---- */
.svc-card {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    background: #fff; border-radius: 14px; padding: 1.75rem 1rem 1.1rem;
    box-shadow: 0 20px 45px -22px rgba(8,28,60,.45);
    border: 1px solid rgba(255,255,255,.6);
    transition: transform .25s ease, box-shadow .25s ease;
}
.svc-card:hover { transform: translateY(-6px); box-shadow: 0 28px 55px -20px rgba(8,28,60,.55); }
.svc-ic {
    display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px;
    color: #2f6fd0; background: linear-gradient(180deg,#eaf3ff,#dceafd);
    margin-bottom: .9rem; transition: transform .25s;
}
.svc-card:hover .svc-ic { transform: scale(1.06); }
.svc-title { font-size: 1.3rem; font-weight: 700; color: #0462ab; line-height: 1.2; }
.svc-desc { margin-top: .7rem; font-size: .8rem; line-height: 1.45; color: #64748b; min-height: 2.3em; }
.svc-meta {
    margin-top: .9rem; padding-top: .9rem; width: 100%;
    border-top: 1px dashed #e2e8f0; display: grid; gap: .35rem;
}
.svc-meta div { display: flex; align-items: center; justify-content: center; gap: .4rem; font-size: .78rem; }
.svc-meta dt { color: #94a3b8; font-weight: 600; }
.svc-meta dd { color: #1f2937; font-weight: 700; }
.svc-foot {
    margin-top: 1rem; padding-top: .85rem; width: 100%;
    border-top: 1px solid #eef2f7; display: flex; align-items: center; justify-content: center; gap: .6rem;
    font-size: .78rem;
}
.svc-foot a { color: #64748b; transition: color .2s; white-space: nowrap; }
.svc-foot a:hover { color: #0462ab; font-weight: 600; }
.svc-div { width: 1px; height: 12px; background: #d8dee8; }

/* ---- CTA 버튼 ---- */
.btn-ghost {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 120px; height: 44px; padding: 0 1.4rem; border-radius: 999px;
    font-size: .9rem; font-weight: 700; color: #2f6fd0;
    background: #fff; border: 1px solid #cdd9ee;
    box-shadow: 0 8px 18px -10px rgba(47,111,208,.5);
    transition: all .2s;
}
.btn-ghost:hover { background: #f3f8ff; border-color: #2f6fd0; }
.btn-ghost:active { transform: scale(.97); }
.btn-fill {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 120px; height: 44px; padding: 0 1.4rem; border-radius: 999px;
    font-size: .9rem; font-weight: 700; color: #fff;
    background: linear-gradient(90deg,#3464c2,#2f6fd0);
    box-shadow: 0 10px 22px -10px rgba(47,111,208,.7);
    transition: all .2s;
}
.btn-fill:hover { filter: brightness(1.08); }
.btn-fill:active { transform: scale(.97); }

/* ---- 푸터 ---- */
.footer-h {
    font-size: .95rem; font-weight: 800; letter-spacing: .12em; color: #5b8be0;
    margin-bottom: 1rem;
}
.footer-select {
    appearance: none; -webkit-appearance: none;
    background: rgba(255,255,255,.06); color: rgba(255,255,255,.8);
    border: 1px solid rgba(255,255,255,.18); border-radius: 8px;
    padding: .5rem 2rem .5rem .8rem; font-size: .8rem; cursor: pointer;
    background-image: 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='%2390a4c8' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .6rem center;
    transition: border-color .2s;
}
.footer-select:hover { border-color: rgba(255,255,255,.4); }
.footer-select option { color: #1f2937; }
.sns-ic {
    display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px;
    background: rgba(255,255,255,.08); color: rgba(255,255,255,.75); transition: all .2s;
}
.sns-ic:hover { background: #2f6fd0; color: #fff; }

/* ---- 모바일 드로어 아코디언 ---- */
.m-acc { border-bottom: 1px solid #eef2f7; }
.m-acc-btn {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.25rem; font-size: 1rem; font-weight: 700; color: #1b2540;
}
.acc-chev { color: #94a3b8; transition: transform .25s; }
.m-acc.open .acc-chev { transform: rotate(180deg); }
.m-acc-panel {
    max-height: 0; overflow: hidden; transition: max-height .3s ease;
    background: #f7f9fc;
}
.m-acc.open .m-acc-panel { max-height: 320px; }
.m-acc-panel a {
    display: block; padding: .7rem 1.25rem .7rem 1.6rem;
    font-size: .9rem; color: #475569; border-top: 1px solid #eef2f7;
}
.m-acc-panel a:first-child { border-top: none; }
.m-acc-panel a:active { color: #0462ab; }

/* ---- 드로어/딤 오픈 상태 ----
   Tailwind4의 .translate-x-full 은 transform 이 아니라 'translate' 속성을 쓰므로
   transform 오버라이드가 먹지 않는다. translate 속성을 직접 0으로 덮는다. */
#navDrawer { transform: none; }
#navDrawer.open { translate: 0 0 !important; }
#navDim.open { opacity: 1; visibility: visible; }
body.no-scroll { overflow: hidden; }

/* ---- TOP 버튼 ---- */
#toTop.show { opacity: 1; visibility: visible; }

/* ---- 팝업 ---- */
#popup.show { display: flex; }

/* ---- AOS 비활성 환경 보정(등장 미발동 시) ---- */
[data-aos].aos-init.aos-animate { opacity: 1; }

/* ============================================================
   반응형 미세 보정
   ============================================================ */
@media (max-width: 767px) {
    .svc-card { padding: 1.4rem .75rem 1rem; border-radius: 12px; }
    .svc-ic { width: 56px; height: 56px; border-radius: 14px; }
    .svc-title { font-size: 1.1rem; }
    .svc-foot { flex-direction: column; gap: .4rem; }
    .svc-foot .svc-div { display: none; }
}
@media (max-width: 360px) {
    .svc-meta dd { font-size: .72rem; }
}

/* 초소형 280px overflow 차단 */
@media (max-width: 320px) {
    .nav-link { padding: 0 .75rem; }
    h1 { word-break: keep-all; }
}