/* ============================================================
   SAMJOO SM CO., LTD. — Stylesheet (Clean Build · v1.0)
   ============================================================ */

:root {
    /* Brand palette */
    --teal: #167B85;
    --teal-deep: #0D5965;
    --teal-light: #2EB8C7;
    --navy: #0F2B43;
    --ocean: #1E5F7E;
    --coral: #FF7438;
    --coral-soft: #FFA065;

    /* Neutral */
    --ink: #0F2429;
    --text: #1F2937;
    --gray: #475569;
    --gray-light: #94A3B8;
    --bg: #FAFBFC;
    --bg-alt: #F1F6F7;
    --border: rgba(22, 123, 133, 0.10);

    /* Type */
    --font-sans: 'Inter', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;

    /* Motion */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --t: 0.3s var(--ease);

    /* Layout */
    --page-pad: clamp(1.5rem, 3vw, 3rem);
    --nav-h: 76px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
    font-family: var(--font-sans);
    color: var(--text);
    background: var(--bg);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--t); }
button { font-family: inherit; cursor: pointer; }

/* ============================================================
   LAYOUT — Full width with sensible side padding
   ============================================================ */
.container {
    width: 100%;
    max-width: none;
    padding-left: var(--page-pad);
    padding-right: var(--page-pad);
}
.section { padding: clamp(4rem, 8vh, 7rem) 0; }
.section--alt { background: var(--bg-alt); }

.section__head {
    max-width: 1100px;
    margin: 0 auto 3.5rem;
    text-align: center;
}
.eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--coral);
    text-transform: uppercase;
    margin-bottom: 1rem;
}
.section__head h2 {
    font-size: clamp(2rem, 3.5vw, 3.4rem);
    font-weight: 800;
    letter-spacing: -0.028em;
    color: var(--ink);
    line-height: 1.1;
    margin-bottom: 1rem;
}
.lead {
    font-size: 1.08rem;
    color: var(--gray);
    max-width: 720px;
    margin: 0 auto;
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    height: var(--nav-h);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
}
.nav__inner {
    height: 100%;
    width: 100%;
    padding: 0 var(--page-pad);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}
.nav__logo img { height: 48px; width: auto; }
.nav__menu {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}
.nav__menu a {
    display: inline-block;
    padding: 0.55rem 1rem;
    min-width: 88px;
    text-align: center;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--text);
    border-radius: 8px;
    position: relative;
    white-space: nowrap;
    transition: color var(--t), background var(--t);
}
.nav__menu a::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: var(--coral);
    transition: width var(--t);
}
.nav__menu a:hover { color: var(--coral); }
.nav__menu a:hover::after { width: 28px; }

.nav__lang {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: transparent;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--teal);
    transition: all var(--t);
}
.nav__lang:hover { background: var(--teal); color: #fff; border-color: var(--teal); }
.lang-divider { opacity: 0.4; }
.lang-other { opacity: 0.5; }
body.lang-en .lang-current::after { content: ''; }
body.lang-en .nav__lang .lang-current { opacity: 0.5; }
body.lang-en .nav__lang .lang-other { opacity: 1; }

.nav__burger {
    display: none;
    background: transparent;
    border: none;
    width: 32px;
    height: 32px;
    flex-direction: column;
    justify-content: space-around;
    padding: 6px 4px;
}
.nav__burger span { display: block; height: 2px; background: var(--ink); border-radius: 2px; }

@media (max-width: 1024px) {
    .nav__menu { display: none; }
    .nav__burger { display: flex; }
    .nav.is-open .nav__menu {
        display: flex; flex-direction: column;
        position: absolute; top: 100%; left: 0; right: 0;
        background: #fff; padding: 1rem var(--page-pad);
        border-bottom: 1px solid var(--border);
    }
}

/* ============================================================
   HERO — Cinematic slideshow
   ============================================================ */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    padding-top: var(--nav-h);
}
.hero__slides { position: absolute; inset: 0; z-index: 0; }
.hero__slide {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: 0;
    animation: heroFade 30s infinite ease-in-out;
}
.hero__slide:nth-child(1) { animation-delay: 0s; }
.hero__slide:nth-child(2) { animation-delay: 6s; }
.hero__slide:nth-child(3) { animation-delay: 12s; }
.hero__slide:nth-child(4) { animation-delay: 18s; }
.hero__slide:nth-child(5) { animation-delay: 24s; }

@keyframes heroFade {
    0%   { opacity: 0; transform: scale(1.0); }
    4%   { opacity: 1; }
    20%  { opacity: 1; transform: scale(1.08); }
    24%  { opacity: 0; }
    100% { opacity: 0; transform: scale(1.0); }
}

.hero__veil {
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(6,30,38,0.55) 0%, rgba(6,30,38,0.35) 40%, rgba(6,30,38,0.82) 100%),
        linear-gradient(90deg, rgba(6,30,38,0.30), transparent 50%, rgba(6,30,38,0.30));
}

.hero__inner {
    position: relative;
    z-index: 2;
    max-width: 1400px;
    width: 100%;
    padding: 0 var(--page-pad);
    text-align: center;
}

.hero__eyebrow {
    font-family: var(--font-mono);
    font-size: clamp(0.85rem, 1vw, 1.05rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.85);
    margin-bottom: 1.5rem;
    padding: 0.5rem 1.2rem;
    display: inline-block;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 999px;
    backdrop-filter: blur(8px);
}
.hero__title {
    font-size: clamp(2.6rem, 6vw, 5.5rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.035em;
    margin-bottom: 1.5rem;
}
.hero__title span { display: block; }
.hero__title .accent {
    background: linear-gradient(90deg, #fff, var(--teal-light) 60%, var(--coral));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hero__lead {
    max-width: 820px;
    margin: 0 auto 2.5rem;
    font-size: clamp(1rem, 1.2vw, 1.18rem);
    line-height: 1.8;
    color: rgba(255,255,255,0.88);
    padding: 1.2rem 1.5rem;
    background: rgba(6,30,38,0.32);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
}

.hero__cta { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; }
.btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.95rem 2rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all var(--t);
    border: 1.5px solid transparent;
}
.btn--primary { background: var(--coral); color: #fff; box-shadow: 0 14px 30px -10px rgba(255,116,56,0.5); }
.btn--primary:hover { background: #E5602A; transform: translateY(-2px); }
.btn--ghost { border-color: rgba(255,255,255,0.5); color: #fff; backdrop-filter: blur(6px); }
.btn--ghost:hover { background: rgba(255,255,255,0.1); border-color: #fff; }

.hero__indicators {
    position: absolute;
    bottom: 3rem; left: 50%;
    transform: translateX(-50%);
    display: flex; gap: 0.7rem;
    z-index: 3;
}
.hero__indicators span {
    width: 32px; height: 3px;
    background: rgba(255,255,255,0.25);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}
.hero__indicators span::after {
    content: ''; position: absolute; inset: 0;
    background: var(--coral);
    transform: scaleX(0); transform-origin: left;
    animation: indFill 30s infinite linear;
}
.hero__indicators span:nth-child(1)::after { animation-delay: 0s; }
.hero__indicators span:nth-child(2)::after { animation-delay: 6s; }
.hero__indicators span:nth-child(3)::after { animation-delay: 12s; }
.hero__indicators span:nth-child(4)::after { animation-delay: 18s; }
.hero__indicators span:nth-child(5)::after { animation-delay: 24s; }
@keyframes indFill {
    0%  { transform: scaleX(0); }
    20% { transform: scaleX(1); }
    24% { transform: scaleX(1); opacity: 1; }
    25% { transform: scaleX(0); opacity: 0; }
    100%{ transform: scaleX(0); }
}

/* ============================================================
   KPI — 5 columns
   ============================================================ */
.kpi { padding: clamp(2rem, 4vh, 4rem) 0; }
.kpi__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.2rem;
}
.kpi__card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 2rem 1.2rem;
    text-align: center;
    transition: all var(--t);
}
.kpi__card:hover {
    transform: translateY(-4px);
    border-color: var(--coral);
    box-shadow: 0 20px 40px -16px rgba(6,30,38,0.12);
}
.kpi__icon {
    width: 48px; height: 48px;
    margin: 0 auto 0.8rem;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--teal), var(--teal-light));
    color: #fff; font-size: 1.2rem;
}
.kpi__card:nth-child(2) .kpi__icon { background: linear-gradient(135deg, var(--coral), var(--coral-soft)); }
.kpi__card:nth-child(3) .kpi__icon { background: linear-gradient(135deg, var(--navy), var(--ocean)); }
.kpi__card:nth-child(4) .kpi__icon { background: linear-gradient(135deg, var(--teal-deep), var(--teal)); }
.kpi__card:nth-child(5) .kpi__icon { background: linear-gradient(135deg, var(--ocean), var(--teal-light)); }

.kpi__num {
    font-size: clamp(2.2rem, 3.2vw, 3.4rem);
    font-weight: 800;
    line-height: 1;
    margin: 0.5rem 0 0.7rem;
    letter-spacing: -0.03em;
    color: var(--ink);
}
.kpi__label { font-size: 0.95rem; font-weight: 600; color: var(--ink); }
.kpi__desc { font-size: 0.8rem; color: var(--gray); margin-top: 0.3rem; }

@media (max-width: 1280px) { .kpi__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .kpi__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .kpi__grid { grid-template-columns: 1fr; } }

/* ============================================================
   CARD (generic)
   ============================================================ */
.card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 2rem;
    transition: all var(--t);
}
.card:hover {
    transform: translateY(-4px);
    border-color: var(--coral);
    box-shadow: 0 24px 48px -16px rgba(6,30,38,0.10);
}
.card__icon {
    width: 56px; height: 56px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--teal), var(--teal-light));
    color: #fff; font-size: 1.4rem;
    margin-bottom: 1.2rem;
}
.card h3 { font-size: 1.3rem; font-weight: 700; color: var(--ink); margin-bottom: 0.8rem; letter-spacing: -0.015em; }
.card p { color: var(--gray); line-height: 1.8; }
.card ul { list-style: none; padding: 0; }
.card ul li {
    padding: 0.5rem 0;
    border-bottom: 1px dashed var(--border);
    position: relative;
    padding-left: 1.5rem;
    color: var(--text);
}
.card ul li:last-child { border: none; }
.card ul li::before {
    content: '◆';
    position: absolute;
    left: 0;
    color: var(--coral);
    font-size: 0.7rem;
    top: 0.85rem;
}

/* About grid */
.about__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.8rem;
}
@media (max-width: 768px) { .about__grid { grid-template-columns: 1fr; } }

/* ============================================================
   CEO
   ============================================================ */
.ceo {
    display: grid;
    grid-template-columns: 0.85fr 1.4fr;
    gap: 3rem;
    align-items: start;
    background: #fff;
    padding: 3rem;
    border-radius: 20px;
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}
.ceo::before {
    content: '\201C';
    position: absolute;
    top: -2rem; right: 2rem;
    font-family: Georgia, serif;
    font-size: 16rem; line-height: 1;
    color: rgba(22,123,133,0.06);
    pointer-events: none;
}
.ceo__media img { width: 100%; height: 100%; max-height: 500px; object-fit: cover; border-radius: 14px; }
.ceo__quote {
    font-size: clamp(1.1rem, 1.4vw, 1.4rem);
    line-height: 1.55;
    color: var(--teal);
    font-weight: 500;
    padding: 1.2rem 1.5rem;
    border-left: 3px solid var(--coral);
    background: rgba(22,123,133,0.04);
    border-radius: 0 12px 12px 0;
    margin-bottom: 1.5rem;
}
.ceo__text p { color: var(--gray); margin-bottom: 1rem; line-height: 1.85; }
.ceo__text { display: none; }
.ceo__text.expanded { display: block; }

.link-btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: transparent;
    border: 1.5px solid var(--teal);
    color: var(--teal);
    padding: 0.6rem 1.3rem;
    border-radius: 999px;
    font-weight: 600;
    margin: 1rem 0;
    transition: all var(--t);
}
.link-btn:hover { background: var(--teal); color: #fff; }
.link-btn i { transition: transform var(--t); font-size: 0.8em; }
.link-btn[aria-expanded="true"] i { transform: rotate(180deg); }

.ceo__sign {
    margin-top: 1.5rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--border);
    color: var(--ink);
}
.ceo__sign strong { color: var(--teal); font-size: 1.05rem; }

@media (max-width: 992px) {
    .ceo { grid-template-columns: 1fr; padding: 2rem; gap: 2rem; }
    .ceo__media img { max-height: 350px; }
}

/* ============================================================
   FLEET
   ============================================================ */
.fleet__summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}
.fleet__sum-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.5rem;
    display: flex; align-items: center; gap: 1rem;
}
.fleet__sum-icon {
    width: 56px; height: 56px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.4rem;
    background: linear-gradient(135deg, var(--navy), var(--ocean));
}
.fleet__sum-card:nth-child(2) .fleet__sum-icon { background: linear-gradient(135deg, var(--teal), var(--teal-light)); }
.fleet__sum-card:nth-child(3) .fleet__sum-icon { background: linear-gradient(135deg, var(--coral), var(--coral-soft)); }
.fleet__sum-card strong { font-size: 2rem; font-weight: 800; color: var(--ink); line-height: 1; }
.fleet__sum-card span { display: block; font-size: 0.85rem; color: var(--gray); }

.fleet__cats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
}
.fleet__cat {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    transition: all var(--t);
}
.fleet__cat:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -16px rgba(6,30,38,0.10); }
.fleet__cat img { width: 100%; height: 220px; object-fit: cover; }
.fleet__cat-body { padding: 1.8rem; }
.fleet__cat h3 { font-size: 1.3rem; margin-bottom: 0.7rem; color: var(--ink); }
.fleet__cat ul { list-style: none; padding: 0; margin-top: 1rem; }
.fleet__cat li {
    padding: 0.4rem 0 0.4rem 1.5rem;
    position: relative;
    color: var(--text);
    font-size: 0.9rem;
}
.fleet__cat li::before {
    content: '◆';
    position: absolute; left: 0; top: 0.6rem;
    color: var(--coral); font-size: 0.65rem;
}

@media (max-width: 768px) {
    .fleet__summary { grid-template-columns: 1fr; }
    .fleet__cats { grid-template-columns: 1fr; }
}

/* Vessel table */
.fleet__table-wrap { margin-top: 3rem; overflow-x: auto; }
.fleet__table-wrap h3 { text-align: center; margin-bottom: 1.5rem; font-size: 1.4rem; color: var(--ink); }
.vessel-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border);
    font-size: 0.9rem;
}
.vessel-table th {
    background: var(--teal-deep);
    color: #fff;
    padding: 0.9rem 1rem;
    text-align: left;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}
.vessel-table td {
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--border);
}
.vessel-table tr:hover td { background: rgba(255,116,56,0.04); }
.type-badge {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.type-badge.PCC { background: rgba(22,123,133,0.12); color: var(--teal); }
.type-badge.PCTC { background: rgba(255,116,56,0.12); color: var(--coral); }
.type-badge.BULK { background: rgba(15,43,67,0.10); color: var(--navy); }

/* ============================================================
   SERVICES
   ============================================================ */
.services {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}
.service {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
    transition: all var(--t);
}
.service:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -16px rgba(6,30,38,0.10); }
.service__img { background-size: cover; background-position: center; min-height: 240px; }
.service__body { padding: 2rem; }
.service__body h3 { font-size: 1.25rem; margin-bottom: 0.8rem; color: var(--ink); }
.service__body p { color: var(--gray); font-size: 0.92rem; margin-bottom: 1rem; }
.service__body ul { list-style: none; }
.service__body li {
    padding: 0.3rem 0 0.3rem 1.3rem;
    position: relative;
    font-size: 0.88rem;
}
.service__body li::before {
    content: '◆'; position: absolute; left: 0; top: 0.5rem;
    color: var(--teal); font-size: 0.6rem;
}

@media (max-width: 992px) {
    .services { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .service { grid-template-columns: 1fr; }
}

/* ============================================================
   ESG
   ============================================================ */
.esg__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.8rem;
}
.esg-card[data-esg="e"] .card__icon { background: linear-gradient(135deg, #059669, #10B981); }
.esg-card[data-esg="s"] .card__icon { background: linear-gradient(135deg, var(--ocean), #4A9CB8); }
.esg-card[data-esg="g"] .card__icon { background: linear-gradient(135deg, #3D4F5C, #64748B); }
.esg__metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.7rem;
    margin-top: 1.4rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--border);
}
.esg__metrics div {
    text-align: center;
    padding: 0.7rem 0.4rem;
    background: rgba(22,123,133,0.04);
    border-radius: 10px;
}
.esg__metrics strong { display: block; font-size: 1.4rem; font-weight: 800; color: var(--teal); }
.esg__metrics span { display: block; font-size: 0.72rem; color: var(--gray); margin-top: 0.3rem; }
.esg-card[data-esg="e"] .esg__metrics strong { color: #059669; }
.esg-card[data-esg="s"] .esg__metrics strong { color: var(--ocean); }
.esg-card[data-esg="g"] .esg__metrics strong { color: #3D4F5C; }

@media (max-width: 992px) { .esg__grid { grid-template-columns: 1fr; } }

/* ============================================================
   ORG
   ============================================================ */
.org { display: flex; flex-direction: column; align-items: center; gap: 2.5rem; }
.org__row { display: flex; gap: 1.2rem; flex-wrap: wrap; justify-content: center; position: relative; }
.org__row:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: -2.5rem; left: 50%;
    transform: translateX(-50%);
    width: 2px; height: 2.5rem;
    background: linear-gradient(180deg, var(--coral), rgba(22,123,133,0.2));
}
.org__box {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.5rem 1.3rem;
    text-align: center;
    min-width: 200px;
    max-width: 240px;
    transition: all var(--t);
    position: relative;
    overflow: hidden;
}
.org__box::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--teal), var(--coral));
    opacity: 0;
    transition: opacity var(--t);
}
.org__box:hover { transform: translateY(-3px); border-color: var(--coral); }
.org__box:hover::before { opacity: 1; }
.org__box--ceo {
    background: var(--teal-deep);
    color: #fff;
    border: none;
    min-width: 260px;
    box-shadow: 0 12px 28px -12px rgba(13, 89, 101, 0.45);
}
.org__box--ceo h4 { color: rgba(255,255,255,0.8); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; }
.org__box--ceo p { color: #fff; font-size: 1.1rem; font-weight: 700; margin-top: 0.3rem; }
.org__box h4 {
    font-size: 0.72rem;
    color: var(--gray);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 500;
}
.org__box p { font-size: 1rem; font-weight: 700; color: var(--ink); margin-top: 0.3rem; }
.org__loc {
    display: inline-block;
    margin-top: 0.6rem;
    padding: 0.2rem 0.6rem;
    background: rgba(22,123,133,0.08);
    border-radius: 999px;
    font-size: 0.7rem;
    color: var(--teal);
    font-weight: 600;
}

/* ============================================================
   TIMELINE
   ============================================================ */
.timeline { position: relative; max-width: 1000px; margin: 0 auto; }
.timeline::before {
    content: '';
    position: absolute;
    left: 100px; top: 0; bottom: 0;
    width: 2px;
    background: var(--border);
}
.timeline__item {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
    position: relative;
}
.timeline__year {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--coral);
    text-align: right;
    padding-right: 1rem;
    position: relative;
}
.timeline__year::after {
    content: '';
    position: absolute;
    right: -7px; top: 6px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--coral);
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px var(--coral);
}
.timeline__item.is-highlight .timeline__year::after { background: var(--teal); box-shadow: 0 0 0 2px var(--teal); }
.timeline__content { background: #fff; padding: 1.5rem 1.8rem; border-radius: 14px; border: 1px solid var(--border); }
.timeline__content h3 { font-size: 1.1rem; color: var(--ink); margin-bottom: 0.5rem; }
.timeline__content p { color: var(--gray); font-size: 0.95rem; line-height: 1.7; }

@media (max-width: 600px) {
    .timeline::before { left: 30px; }
    .timeline__item { grid-template-columns: 60px 1fr; gap: 1rem; }
    .timeline__year { text-align: left; padding-right: 0; font-size: 0.8rem; }
}

/* ============================================================
   CERTIFICATIONS
   ============================================================ */
.cert-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.4rem;
}
.cert {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.8rem 1.5rem;
    text-align: center;
    transition: all var(--t);
}
.cert:hover { transform: translateY(-4px); border-color: var(--coral); }
.cert__icon {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--teal), var(--teal-light));
    color: #fff; font-size: 1.4rem;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1rem;
}
.cert h3 { font-size: 1.1rem; margin-bottom: 0.4rem; color: var(--ink); }
.cert p { font-size: 0.88rem; color: var(--gray); }

/* ============================================================
   NEWS
   ============================================================ */
.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.news-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.8rem;
    transition: all var(--t);
}
.news-card:hover { transform: translateY(-4px); border-color: var(--coral); }
.news-card__cat {
    display: inline-block;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(22,123,133,0.10);
    color: var(--teal);
    margin-bottom: 0.8rem;
}
.news-card__cat.press { background: rgba(255,116,56,0.10); color: var(--coral); }
.news-card__cat.psc { background: rgba(15,43,67,0.10); color: var(--navy); }
.news-card__cat.certification { background: rgba(5,150,105,0.10); color: #059669; }
.news-card h3 { font-size: 1.05rem; margin-bottom: 0.6rem; color: var(--ink); line-height: 1.4; }
.news-card p { color: var(--gray); font-size: 0.9rem; line-height: 1.7; margin-bottom: 1rem; }
.news-card__date { font-family: var(--font-mono); font-size: 0.78rem; color: var(--gray-light); }

@media (max-width: 992px) { .news-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .news-grid { grid-template-columns: 1fr; } }

/* ============================================================
   CAREERS
   ============================================================ */
.career-filters {
    display: flex;
    gap: 0.6rem;
    justify-content: center;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
}
.chip {
    padding: 0.55rem 1.3rem;
    border-radius: 999px;
    background: transparent;
    border: 1.5px solid var(--border);
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 500;
    transition: all var(--t);
}
.chip:hover { border-color: var(--coral); color: var(--coral); }
.chip.active { background: var(--coral); border-color: var(--coral); color: #fff; }

.career-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}
.career-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.8rem;
    transition: all var(--t);
}
.career-card:hover { transform: translateY(-4px); border-color: var(--coral); }
.career-card__head { display: flex; justify-content: space-between; align-items: start; margin-bottom: 1rem; }
.career-card h3 { font-size: 1.15rem; color: var(--ink); }
.career-card__type { font-size: 0.72rem; color: var(--teal); font-weight: 600; }
.career-card__meta { color: var(--gray); font-size: 0.88rem; margin-bottom: 0.4rem; }
.career-card__meta i { color: var(--coral); margin-right: 0.4rem; width: 14px; }
.career-card__desc { color: var(--text); font-size: 0.92rem; line-height: 1.7; margin-top: 1rem; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 2.5rem;
}
.contact__offices { display: grid; gap: 1.5rem; }
.office {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.8rem;
}
.office__icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--teal), var(--teal-light));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 1rem;
}
.office:nth-child(2) .office__icon { background: linear-gradient(135deg, var(--coral), var(--coral-soft)); }
.office h3 { font-size: 1.15rem; color: var(--ink); margin-bottom: 0.5rem; }
.office p { color: var(--gray); font-size: 0.92rem; margin-bottom: 0.3rem; line-height: 1.6; }
.office a { color: var(--teal); }

.contact__form {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 2rem;
    display: flex; flex-direction: column; gap: 0.8rem;
}
.contact__form h3 { font-size: 1.15rem; color: var(--ink); margin-bottom: 0.5rem; }
.contact__form input,
.contact__form textarea {
    padding: 0.85rem 1rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--text);
    background: var(--bg);
    transition: border-color var(--t);
}
.contact__form input:focus,
.contact__form textarea:focus {
    outline: none;
    border-color: var(--coral);
    background: #fff;
}
.contact__form textarea { resize: vertical; }
.form-msg { font-size: 0.85rem; margin: 0; }
.form-msg.ok { color: #059669; }
.form-msg.err { color: #DC2626; }

@media (max-width: 992px) { .contact { grid-template-columns: 1fr; } }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
    background: linear-gradient(135deg, var(--navy), var(--teal-deep) 60%, var(--teal));
    color: rgba(255,255,255,0.85);
    padding: 4rem 0 1.5rem;
    border-top: 3px solid var(--coral);
}
.footer__grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    gap: 3rem;
    margin-bottom: 3rem;
}
.footer__logo { height: 44px; margin-bottom: 1rem; filter: brightness(0) invert(1); }
.footer p { font-size: 0.92rem; line-height: 1.7; }
.footer h4 {
    font-size: 0.95rem;
    color: #fff;
    margin-bottom: 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(255,255,255,0.15);
}
.footer a { display: block; padding: 0.3rem 0; font-size: 0.9rem; color: rgba(255,255,255,0.75); }
.footer a:hover { color: var(--coral-soft); }
.footer__bottom {
    border-top: 1px solid rgba(255,255,255,0.12);
    padding-top: 1.5rem;
    text-align: center;
    color: rgba(255,255,255,0.55);
}

@media (max-width: 992px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .footer__grid { grid-template-columns: 1fr; } }

/* ============================================================
   BACK TO TOP
   ============================================================ */
.back-top {
    position: fixed;
    right: 2rem; bottom: 2rem;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--coral);
    color: #fff;
    border: none;
    box-shadow: 0 12px 28px -8px rgba(255,116,56,0.5);
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    transition: all var(--t);
    z-index: 50;
}
.back-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.back-top:hover { background: #E5602A; }

/* ============================================================
   ACCESSIBILITY / MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .hero__slide { animation: none; opacity: 1; }
    .hero__slide:nth-child(n+2) { opacity: 0; }
    .hero__indicators span::after { animation: none; }
}


/* ============================================================
   LOADING SCREEN
   ============================================================ */
.loading {
    position: fixed; inset: 0;
    z-index: 9999;
    background: linear-gradient(135deg, #0F2B43 0%, #0D5965 60%, #167B85 100%);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2rem;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}
.loading.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loading__logo img {
    height: 60px;
    filter: brightness(0) invert(1);
    animation: loadingPulse 1.6s ease-in-out infinite;
}
@keyframes loadingPulse {
    0%, 100% { opacity: 0.6; transform: scale(0.98); }
    50%      { opacity: 1; transform: scale(1.02); }
}
.loading__bar {
    width: 200px; height: 2px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 2px; overflow: hidden;
}
.loading__bar span {
    display: block; height: 100%; width: 100%;
    background: var(--coral);
    transform: scaleX(0); transform-origin: left;
    animation: loadingBar 1.8s ease-in-out infinite;
}
@keyframes loadingBar {
    0%   { transform: scaleX(0); transform-origin: left; }
    50%  { transform: scaleX(1); transform-origin: left; }
    51%  { transform: scaleX(1); transform-origin: right; }
    100% { transform: scaleX(0); transform-origin: right; }
}

/* ============================================================
   SCROLL PROGRESS BAR
   ============================================================ */
.scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px; width: 0;
    background: linear-gradient(90deg, var(--teal), var(--coral));
    z-index: 200;
    transition: width 0.1s ease-out;
}

/* Nav scrolled state */
.nav.is-scrolled {
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 4px 20px -8px rgba(15, 43, 67, 0.15);
}

/* ============================================================
   HERO — Multi-motion slideshow
   각 슬라이드별 다른 변신 효과
   ============================================================ */
.hero__slide {
    transform-origin: center center;
}

/* 기본 페이드 외 5가지 변형 */
.hero__slide--zoom-in   { animation: heroZoomIn   30s infinite ease-in-out; }
.hero__slide--pan-left  { animation: heroPanLeft  30s infinite ease-in-out; }
.hero__slide--zoom-out  { animation: heroZoomOut  30s infinite ease-in-out; }
.hero__slide--pan-up    { animation: heroPanUp    30s infinite ease-in-out; }
.hero__slide--tilt      { animation: heroTilt     30s infinite ease-in-out; }

@keyframes heroZoomIn {
    0%   { opacity: 0; transform: scale(1.0) translate(0, 0); }
    3%   { opacity: 1; }
    20%  { opacity: 1; transform: scale(1.12) translate(0, 0); }
    24%  { opacity: 0; }
    100% { opacity: 0; transform: scale(1.0); }
}
@keyframes heroPanLeft {
    0%   { opacity: 0; transform: scale(1.10) translateX(4%); }
    3%   { opacity: 1; }
    20%  { opacity: 1; transform: scale(1.10) translateX(-4%); }
    24%  { opacity: 0; }
    100% { opacity: 0; transform: scale(1.10) translateX(0); }
}
@keyframes heroZoomOut {
    0%   { opacity: 0; transform: scale(1.18); }
    3%   { opacity: 1; }
    20%  { opacity: 1; transform: scale(1.02); }
    24%  { opacity: 0; }
    100% { opacity: 0; transform: scale(1.18); }
}
@keyframes heroPanUp {
    0%   { opacity: 0; transform: scale(1.10) translateY(4%); }
    3%   { opacity: 1; }
    20%  { opacity: 1; transform: scale(1.10) translateY(-4%); }
    24%  { opacity: 0; }
    100% { opacity: 0; transform: scale(1.10) translateY(0); }
}
@keyframes heroTilt {
    0%   { opacity: 0; transform: scale(1.08) rotate(0.5deg); }
    3%   { opacity: 1; }
    20%  { opacity: 1; transform: scale(1.14) rotate(-0.5deg); }
    24%  { opacity: 0; }
    100% { opacity: 0; transform: scale(1.08) rotate(0.5deg); }
}

.hero__slide:nth-child(1) { animation-delay: 0s; }
.hero__slide:nth-child(2) { animation-delay: 6s; }
.hero__slide:nth-child(3) { animation-delay: 12s; }
.hero__slide:nth-child(4) { animation-delay: 18s; }
.hero__slide:nth-child(5) { animation-delay: 24s; }

/* Floating particles overlay */
.hero__particles { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.hero__particles span {
    position: absolute;
    width: 6px; height: 6px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    animation: floatUp 12s linear infinite;
}
.hero__particles span:nth-child(1) { left: 8%;  bottom: 0; animation-delay: 0s;   width: 4px; height: 4px; }
.hero__particles span:nth-child(2) { left: 22%; bottom: 0; animation-delay: 2.5s; width: 8px; height: 8px; }
.hero__particles span:nth-child(3) { left: 44%; bottom: 0; animation-delay: 5s;   width: 5px; height: 5px; }
.hero__particles span:nth-child(4) { left: 62%; bottom: 0; animation-delay: 7s;   width: 7px; height: 7px; }
.hero__particles span:nth-child(5) { left: 78%; bottom: 0; animation-delay: 4s;   width: 4px; height: 4px; }
.hero__particles span:nth-child(6) { left: 92%; bottom: 0; animation-delay: 9s;   width: 6px; height: 6px; }
@keyframes floatUp {
    0%   { transform: translateY(0) translateX(0); opacity: 0; }
    10%  { opacity: 0.6; }
    50%  { transform: translateY(-50vh) translateX(20px); }
    90%  { opacity: 0.4; }
    100% { transform: translateY(-100vh) translateX(-15px); opacity: 0; }
}

/* Hero scroll indicator */
.hero__scroll {
    position: absolute;
    bottom: 1.5rem;
    right: 3rem;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.75);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-decoration: none;
    transition: color var(--t);
}
.hero__scroll:hover { color: var(--coral); }
.hero__scroll i { animation: scrollBob 1.8s ease-in-out infinite; font-size: 1rem; }
@keyframes scrollBob {
    0%, 100% { transform: translateY(0); opacity: 0.6; }
    50%      { transform: translateY(6px); opacity: 1; }
}
@media (max-width: 768px) { .hero__scroll { right: 1.5rem; bottom: 5rem; } }

/* ============================================================
   COMMITMENT STATS (Dark)
   ============================================================ */
.stats-dark {
    background: linear-gradient(135deg, #0F2B43 0%, #0D5965 55%, var(--teal) 100%);
    color: #fff;
    padding: clamp(4rem, 8vh, 7rem) 0;
    position: relative;
    overflow: hidden;
}
.stats-dark::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(255, 116, 56, 0.12), transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(46, 184, 199, 0.18), transparent 45%);
    pointer-events: none;
}
.stats-dark .section__head h2,
.stats-dark .section__head .lead { color: #fff; }
.stats-dark .section__head .lead { color: rgba(255, 255, 255, 0.85); }
.stats-dark .eyebrow { color: var(--coral-soft); }
.stats-dark__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    position: relative;
}
.stats-dark__card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    padding: 2.5rem 1.8rem;
    text-align: center;
    backdrop-filter: blur(10px);
    transition: all var(--t);
}
.stats-dark__card:hover {
    transform: translateY(-6px);
    border-color: var(--coral);
    background: rgba(255, 255, 255, 0.09);
}
.stats-dark__num {
    font-size: clamp(3rem, 5vw, 4.6rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    background: linear-gradient(135deg, #fff 30%, var(--coral) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.8rem;
}
.stats-dark__label { font-size: 1.05rem; font-weight: 600; color: #fff; margin-bottom: 0.4rem; }
.stats-dark__desc { font-size: 0.88rem; color: rgba(255, 255, 255, 0.7); }

@media (max-width: 768px) { .stats-dark__grid { grid-template-columns: 1fr; } }

/* ============================================================
   OWNERS
   ============================================================ */
.owners {
    margin-top: 4rem;
    text-align: center;
    padding-top: 3rem;
    border-top: 1px solid var(--border);
}
.owners h3 { font-size: 1.4rem; color: var(--ink); margin-bottom: 0.5rem; }
.owners > p { color: var(--gray); margin-bottom: 2rem; }
.owners__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.2rem;
}
.owner {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.8rem 1.2rem;
    transition: all var(--t);
}
.owner:hover { transform: translateY(-3px); border-color: var(--coral); }
.owner__icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    margin: 0 auto 1rem;
    background: linear-gradient(135deg, var(--teal), var(--teal-light));
    color: #fff; font-size: 1.3rem;
    display: flex; align-items: center; justify-content: center;
}
.owners__grid .owner:nth-child(2) .owner__icon { background: linear-gradient(135deg, var(--coral), var(--coral-soft)); }
.owners__grid .owner:nth-child(3) .owner__icon { background: linear-gradient(135deg, var(--navy), var(--ocean)); }
.owner h4 { font-size: 1rem; color: var(--ink); font-weight: 700; }

/* ============================================================
   SAFETY MANAGEMENT
   ============================================================ */
.safety__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.8rem;
}
.safety-card[data-safety="ism"] .card__icon { background: linear-gradient(135deg, var(--teal), var(--teal-light)); }
.safety-card[data-safety="sapa"] .card__icon { background: linear-gradient(135deg, #B45309, #D97706); }
.safety-card[data-safety="training"] .card__icon { background: linear-gradient(135deg, #6B21A8, #9333EA); }
@media (max-width: 992px) { .safety__grid { grid-template-columns: 1fr; } }

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
.kpi__card,
.card,
.news-card,
.career-card,
.timeline__item,
.org__box,
.fleet__cat,
.service,
.stats-dark__card {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.kpi__card.in-view,
.card.in-view,
.news-card.in-view,
.career-card.in-view,
.timeline__item.in-view,
.org__box.in-view,
.fleet__cat.in-view,
.service.in-view,
.stats-dark__card.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger children */
.kpi__grid .kpi__card:nth-child(1) { transition-delay: 0.05s; }
.kpi__grid .kpi__card:nth-child(2) { transition-delay: 0.12s; }
.kpi__grid .kpi__card:nth-child(3) { transition-delay: 0.19s; }
.kpi__grid .kpi__card:nth-child(4) { transition-delay: 0.26s; }
.kpi__grid .kpi__card:nth-child(5) { transition-delay: 0.33s; }
.stats-dark__grid .stats-dark__card:nth-child(1) { transition-delay: 0.05s; }
.stats-dark__grid .stats-dark__card:nth-child(2) { transition-delay: 0.20s; }
.stats-dark__grid .stats-dark__card:nth-child(3) { transition-delay: 0.35s; }

/* ============================================================
   POLISH — Section head spacing, lead text
   ============================================================ */
.section__head h2 {
    background: linear-gradient(135deg, var(--ink) 0%, var(--teal) 70%, var(--coral) 110%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}
.stats-dark .section__head h2 {
    background: linear-gradient(135deg, #fff 0%, var(--teal-light) 60%, var(--coral) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Smoother fleet sum card */
.fleet__summary .fleet__sum-card {
    transition: all var(--t);
}
.fleet__summary .fleet__sum-card:hover {
    transform: translateY(-4px);
    border-color: var(--coral);
    box-shadow: 0 20px 40px -16px rgba(6, 30, 38, 0.10);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .hero__slide { animation: none; opacity: 1; }
    .hero__slide:nth-child(n+2) { opacity: 0; }
    .hero__particles { display: none; }
    .kpi__card, .card, .news-card, .career-card,
    .timeline__item, .org__box, .fleet__cat, .service,
    .stats-dark__card { opacity: 1; transform: none; }
    .loading__logo img { animation: none; }
}


/* ============================================================
   v2 — Container max-width 적절히 제한 (완전 풀폭 X)
   ============================================================ */
.container {
    max-width: 1600px !important;
    margin: 0 auto !important;
}
.nav__inner {
    max-width: 1600px;
    margin: 0 auto;
}
.hero__inner { max-width: 1400px; }

/* 작은 데스크탑/태블릿 자동 축소 */
@media (max-width: 1280px) {
    .container { max-width: 100% !important; }
}

/* ============================================================
   Why Us — 강점 4개 카드
   ============================================================ */
.why {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.4rem;
}
.why__item {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 2rem 1.5rem;
    transition: all var(--t);
    position: relative;
    overflow: hidden;
}
.why__item::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--teal), var(--coral));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.45s var(--ease);
}
.why__item:hover {
    transform: translateY(-5px);
    border-color: var(--coral);
    box-shadow: 0 20px 40px -14px rgba(6, 30, 38, 0.10);
}
.why__item:hover::before { transform: scaleX(1); }
.why__num {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--coral);
    font-weight: 600;
    letter-spacing: 0.15em;
    margin-bottom: 1rem;
}
.why__icon {
    font-size: 1.8rem;
    color: var(--teal);
    margin-bottom: 1rem;
}
.why__item h3 {
    font-size: 1.15rem;
    color: var(--ink);
    margin-bottom: 0.6rem;
    letter-spacing: -0.015em;
}
.why__item p {
    font-size: 0.92rem;
    color: var(--gray);
    line-height: 1.7;
}
@media (max-width: 992px) { .why { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .why { grid-template-columns: 1fr; } }


/* ============================================================
   v3 — Layout Refinement (asymmetric grid, depth, rhythm)
   ============================================================ */

/* === KPI - 큰 첫 카드 + 작은 4카드 비대칭 === */
.kpi__grid {
    grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
}
.kpi__card:first-child {
    background: linear-gradient(135deg, var(--teal) 0%, var(--teal-deep) 100%);
    color: #fff;
    border-color: transparent;
}
.kpi__card:first-child .kpi__icon {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
}
.kpi__card:first-child .kpi__num {
    color: #fff;
    font-size: clamp(3rem, 4.2vw, 4.6rem);
}
.kpi__card:first-child .kpi__label { color: rgba(255, 255, 255, 0.95); }
.kpi__card:first-child .kpi__desc { color: rgba(255, 255, 255, 0.75); }

@media (max-width: 1280px) {
    .kpi__grid { grid-template-columns: repeat(3, 1fr); }
}

/* === About - 이미지 + 텍스트 비대칭 === */
.about__grid {
    grid-template-columns: 1.2fr 1fr;
    align-items: stretch;
    gap: 2.5rem;
}
.about__visual {
    background: linear-gradient(135deg, var(--navy), var(--teal-deep) 70%, var(--teal));
    border-radius: 20px;
    padding: 3rem 2.5rem;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.about__visual::after {
    content: '';
    position: absolute;
    right: -60px; bottom: -60px;
    width: 280px; height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 116, 56, 0.18), transparent 70%);
}
.about__visual blockquote {
    font-size: clamp(1.3rem, 1.6vw, 1.8rem);
    line-height: 1.5;
    font-weight: 600;
    letter-spacing: -0.015em;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
}
.about__visual blockquote::before {
    content: '"';
    display: block;
    font-family: Georgia, serif;
    font-size: 5rem;
    line-height: 0.5;
    color: var(--coral);
    margin-bottom: 1rem;
}
.about__visual cite {
    font-style: normal;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    letter-spacing: 0.12em;
    color: var(--coral-soft);
}
@media (max-width: 992px) {
    .about__grid { grid-template-columns: 1fr; }
}

/* === Services - 좌우 교차 (홀수 left, 짝수 right) === */
.services { grid-template-columns: 1fr; gap: 2rem; }
.service {
    grid-template-columns: 280px 1fr;
    min-height: 280px;
    max-height: 320px;
}
.service:nth-child(even) {
    grid-template-columns: 1fr 280px;
    grid-template-areas: "body img";
}
.service:nth-child(even) .service__img { grid-area: img; }
.service:nth-child(even) .service__body { grid-area: body; }
.service__body { padding: 2rem 2.5rem; display: flex; flex-direction: column; justify-content: center; }
.service__body h3 { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }
.service__body p { font-size: 0.95rem; line-height: 1.7; }
.service__img { min-height: 280px; }
@media (max-width: 768px) {
    .service, .service:nth-child(even) { grid-template-columns: 1fr; grid-template-areas: none; max-height: none; }
    .service:nth-child(even) .service__img,
    .service:nth-child(even) .service__body { grid-area: auto; }
    .service__body { padding: 1.6rem; }
    .service__img { min-height: 200px; }
}

/* === Timeline - 좌우 교차 === */
@media (min-width: 768px) {
    .timeline { max-width: 1000px; }
    .timeline::before { left: 50%; transform: translateX(-50%); }
    .timeline__item {
        grid-template-columns: 1fr 100px 1fr;
        gap: 0;
        margin-bottom: 3rem;
    }
    .timeline__item .timeline__content { padding: 1.5rem 1.8rem; }
    .timeline__item:nth-child(odd) .timeline__content { grid-column: 1; text-align: right; margin-right: 1.5rem; }
    .timeline__item:nth-child(odd) .timeline__year   { grid-column: 2; text-align: center; padding: 0; }
    .timeline__item:nth-child(even) .timeline__year    { grid-column: 2; text-align: center; padding: 0; }
    .timeline__item:nth-child(even) .timeline__content { grid-column: 3; margin-left: 1.5rem; }
    .timeline__year::after { right: auto; left: 50%; top: 6px; transform: translateX(-50%); }
}

/* === Cert - 카테고리별 묶음 === */
.cert-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
}
.cert {
    padding: 2rem 1.2rem;
    border-radius: 18px;
}
.cert__icon { width: 64px; height: 64px; font-size: 1.6rem; }
.cert h3 { font-size: 1.05rem; }
.cert p { font-size: 0.82rem; }
@media (max-width: 1200px) { .cert-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .cert-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .cert-grid { grid-template-columns: 1fr; } }

/* === Fleet 카테고리 - 더 큰 비주얼 === */
.fleet__cat img { height: 280px; }
.fleet__cat-body { padding: 2.2rem; }
.fleet__cat h3 { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.015em; }

/* === Vessel table - 줄무늬 + 마지막 행 강조 === */
.vessel-table tbody tr:nth-child(even) td { background: rgba(22, 123, 133, 0.03); }
.vessel-table tbody tr:hover td { background: rgba(255, 116, 56, 0.06) !important; }
.vessel-table td { font-size: 0.92rem; }

/* === Contact - 좌측 큰 카드 + 우측 폼 === */
.contact { grid-template-columns: 1fr 1.1fr; gap: 2rem; }
.office { padding: 2rem; }
.office h3 { font-size: 1.2rem; font-weight: 800; }
.contact__form {
    padding: 2.5rem;
    background: linear-gradient(180deg, #fff 0%, rgba(22, 123, 133, 0.03) 100%);
}
.contact__form h3 {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 1.2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--coral);
    display: inline-block;
}

/* === Section padding tighter on heavy pages === */
.section { padding: clamp(5rem, 9vh, 8rem) 0; }
.section__head { margin-bottom: 4rem; }

/* === Subtle parallax-like depth === */
.card, .news-card, .career-card, .org__box, .fleet__cat,
.service, .cert, .office, .kpi__card, .why__item, .owner, .stats-dark__card {
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.3s var(--ease);
}
.card:hover, .news-card:hover, .career-card:hover,
.fleet__cat:hover, .service:hover, .cert:hover, .office:hover,
.kpi__card:hover, .why__item:hover, .owner:hover {
    box-shadow: 0 30px 60px -20px rgba(15, 43, 67, 0.18), 0 8px 16px -8px rgba(15, 43, 67, 0.08);
}

/* === Footer - more polished === */
.footer { padding: 5rem 0 1.5rem; }
.footer__logo { height: 50px; }
.footer__grid { gap: 4rem; }
.footer h4 { font-size: 1rem; letter-spacing: 0.04em; text-transform: uppercase; }

/* === Hero buttons stronger === */
.btn--primary {
    padding: 1.1rem 2.4rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: 0 16px 36px -10px rgba(255, 116, 56, 0.55), 0 4px 12px -4px rgba(255, 116, 56, 0.3);
}
.btn--ghost {
    padding: 1.1rem 2.4rem;
    font-size: 1rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.08);
}

/* === Eyebrow before line accent === */
.eyebrow::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 1px;
    background: var(--coral);
    vertical-align: middle;
    margin-right: 0.6rem;
}
.eyebrow {
    text-align: left;
}
.section__head .eyebrow::before { display: none; }

/* === Card hover lift more pronounced === */
.kpi__card:not(:first-child):hover { transform: translateY(-6px); }
.card:hover, .why__item:hover { transform: translateY(-6px); }
.fleet__cat:hover, .service:hover { transform: translateY(-5px); }
.news-card:hover, .career-card:hover { transform: translateY(-4px); }

/* === Section dividers (sublime) === */
.section + .section:not(.section--alt):not(.stats-dark)::before {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--teal), var(--coral));
    margin: 0 auto;
    border-radius: 2px;
    margin-top: -3.5rem;
    margin-bottom: 3rem;
}

/* === Nav active state on scroll === */
.nav.is-scrolled .nav__logo img { height: 44px; transition: height 0.25s var(--ease); }
.nav.is-scrolled { height: 68px; transition: all 0.25s var(--ease); }

/* === Print-friendly === */
@media print {
    .nav, .hero__indicators, .hero__scroll, .back-top, .loading, .scroll-progress { display: none !important; }
    .hero { min-height: auto; padding-top: 0; }
    .hero__slides, .hero__veil { display: none; }
    .hero__inner { color: var(--ink); }
}

/* About cards 컨테이너 (Mission + Vision 세로 배치) */
.about__cards { display: grid; grid-template-rows: 1fr 1fr; gap: 1.5rem; }
.about__cards .card { padding: 1.8rem 2rem; }
.about__cards .card h3 { font-size: 1.2rem; }
.about__cards .card ul li { padding: 0.4rem 0 0.4rem 1.3rem; font-size: 0.95rem; }
@media (max-width: 992px) { .about__cards { grid-template-rows: auto; } }


/* ============================================================
   v4 — Cleanup (sober + consistent)
   ============================================================ */

/* KPI - 균등 5컬럼으로 되돌림 */
.kpi__grid { grid-template-columns: repeat(5, 1fr) !important; }
.kpi__card:first-child {
    background: #fff !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
.kpi__card:first-child .kpi__icon {
    background: linear-gradient(135deg, var(--teal), var(--teal-light)) !important;
    border: none !important;
    color: #fff !important;
}
.kpi__card:first-child .kpi__num {
    color: var(--ink) !important;
    font-size: clamp(2.2rem, 3.2vw, 3.4rem) !important;
}
.kpi__card:first-child .kpi__label { color: var(--ink) !important; }
.kpi__card:first-child .kpi__desc { color: var(--gray) !important; }

@media (max-width: 1280px) { .kpi__grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 768px)  { .kpi__grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 480px)  { .kpi__grid { grid-template-columns: 1fr !important; } }

/* Eyebrow 가운데 정렬 + 헤딩과 분리 */
.section__head { text-align: center; }
.section__head .eyebrow {
    display: block;
    text-align: center;
    margin: 0 auto 1.2rem;
    width: fit-content;
}
.section__head .eyebrow::before { display: none !important; }
.section__head h2 {
    background: none !important;
    -webkit-text-fill-color: var(--ink) !important;
    color: var(--ink) !important;
    display: block !important;
    margin: 0 auto 1rem;
}
.stats-dark .section__head h2 {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* 섹션 디바이더 라인 제거 (과함) */
.section + .section:not(.section--alt):not(.stats-dark)::before {
    display: none !important;
}

/* Eyebrow의 ::before 라인 제거 (다른 곳에서 추가됐던 것) */
.eyebrow::before { display: none !important; }


/* ============================================================
   v5 — Image fit + color tuning
   ============================================================ */

/* === IMAGE FIT — 모든 사진 비율 일관성 === */

/* Fleet 카테고리 이미지 — 16:9 일관 */
.fleet__cat {
    display: flex;
    flex-direction: column;
}
.fleet__cat img {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto !important;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Services 카드 — 이미지 영역 (정사각 일러스트, 잘림 방지) */
.service {
    align-items: stretch;
}
.service__img {
    width: 100%;
    height: 100%;
    background-size: 85% auto;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #fbfdfd;
}
@media (max-width: 768px) {
    .service__img {
        min-height: 200px;
        background-size: 60% auto;
    }
}

/* CEO 사진 — 4:5 비율 고정 */
.ceo__media {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 14px;
}
.ceo__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
@media (max-width: 992px) {
    .ceo__media { aspect-ratio: 16 / 10; max-height: 380px; }
}

/* Hero 슬라이드 — center 포지셔닝 명확화 */
.hero__slide {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* Logo 이미지 — 비율 유지 */
.nav__logo img {
    height: 48px;
    width: auto;
    max-width: 280px;
    object-fit: contain;
}
.footer__logo {
    height: 50px;
    width: auto;
    max-width: 240px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

/* ============================================================
   v5 — Color tuning (더 부드럽고 차분하게)
   ============================================================ */

:root {
    /* 코랄을 살짝 따뜻하게 — 너무 형광 X */
    --coral: #E96B30 !important;
    --coral-soft: #F5946A !important;

    /* Teal은 그대로 유지, 보조 톤만 미세 조정 */
    --teal-light: #2BA8B5 !important;

    /* Neutral — 배경 톤 살짝 따뜻하게 */
    --bg: #FBFCFC !important;
    --bg-alt: #F2F6F7 !important;
    --border: rgba(15, 43, 67, 0.08) !important;
}

/* 카드 hover 색상 더 차분하게 (코랄 진하게 안 되도록) */
.card:hover,
.kpi__card:hover,
.cert:hover,
.news-card:hover,
.career-card:hover,
.fleet__cat:hover,
.service:hover,
.office:hover,
.owner:hover,
.why__item:hover {
    border-color: rgba(233, 107, 48, 0.45) !important;
}

/* eyebrow 색상 톤다운 */
.eyebrow {
    color: var(--coral);
    opacity: 0.95;
}

/* Section head h2 — 명확하게 검정 (그라데이션 X) */
.section__head h2 {
    background: none !important;
    -webkit-text-fill-color: var(--ink) !important;
    color: var(--ink) !important;
}

/* Type badge 더 차분하게 */
.type-badge.PCC {
    background: rgba(22, 123, 133, 0.10) !important;
    color: var(--teal-deep) !important;
}
.type-badge.PCTC {
    background: rgba(233, 107, 48, 0.10) !important;
    color: #C75A26 !important;
}
.type-badge.BULK {
    background: rgba(15, 43, 67, 0.08) !important;
    color: var(--navy) !important;
}

/* 버튼 — 약간 톤다운 */
.btn--primary {
    background: var(--coral) !important;
    box-shadow: 0 12px 28px -10px rgba(233, 107, 48, 0.45) !important;
}
.btn--primary:hover {
    background: #D55A20 !important;
    box-shadow: 0 16px 36px -10px rgba(213, 90, 32, 0.55) !important;
}

/* Hero accent gradient (3색) — 더 자연스럽게 */
.hero__title .accent {
    background: linear-gradient(90deg, #fff 0%, var(--teal-light) 55%, var(--coral-soft) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Footer 그라데이션 — 좀 더 자연스러운 ocean → teal */
.footer {
    background: linear-gradient(135deg, #0E2640 0%, #134D58 55%, #167B85 100%) !important;
}

/* Stats Dark — 그라데이션 차분하게 */
.stats-dark {
    background: linear-gradient(135deg, #0E2640 0%, #134D58 55%, #167B85 100%) !important;
}

/* About visual — 톤 조정 */
.about__visual {
    background: linear-gradient(135deg, #0E2640 0%, #134D58 60%, #167B85 100%) !important;
}

/* 카드 그림자 더 부드럽게 */
.card:hover, .news-card:hover, .career-card:hover,
.fleet__cat:hover, .service:hover, .cert:hover, .office:hover,
.kpi__card:hover, .why__item:hover {
    box-shadow:
        0 20px 50px -20px rgba(15, 43, 67, 0.14),
        0 6px 14px -6px rgba(15, 43, 67, 0.06) !important;
}

/* 표 줄무늬 미묘하게 */
.vessel-table tbody tr:nth-child(even) td {
    background: rgba(15, 43, 67, 0.025) !important;
}
.vessel-table tbody tr:hover td {
    background: rgba(233, 107, 48, 0.05) !important;
}


/* ============================================================
   v6 — About 레이아웃 균형
   ============================================================ */

/* About 그리드 — 좌우 1:1 비율 + 컴팩트 */
.about__grid {
    grid-template-columns: 1fr 1fr !important;
    align-items: stretch !important;
    gap: 2rem !important;
}

/* 다크 비주얼 박스 — 컴팩트하게 */
.about__visual {
    padding: 2.5rem !important;
    min-height: 380px;
    max-height: 480px;
    justify-content: center;
}
.about__visual blockquote {
    font-size: clamp(1.15rem, 1.4vw, 1.5rem) !important;
    line-height: 1.55 !important;
    margin-bottom: 1.2rem !important;
}
.about__visual blockquote::before {
    font-size: 3.5rem !important;
    margin-bottom: 0.5rem !important;
}
.about__visual cite {
    font-size: 0.78rem !important;
    letter-spacing: 0.15em !important;
}

/* 우측 카드 — 가로 2단으로 더 빽빽하게 */
.about__cards {
    display: grid !important;
    grid-template-rows: 1fr 1fr !important;
    gap: 1.2rem !important;
}
.about__cards .card {
    padding: 1.8rem 2rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}
.about__cards .card__icon {
    width: 48px !important;
    height: 48px !important;
    font-size: 1.1rem !important;
    margin-bottom: 0.8rem !important;
}
.about__cards .card h3 {
    font-size: 1.15rem !important;
    margin-bottom: 0.6rem !important;
}
.about__cards .card ul {
    margin: 0;
}
.about__cards .card ul li {
    padding: 0.35rem 0 0.35rem 1.2rem !important;
    font-size: 0.92rem !important;
    border-bottom: 1px solid rgba(15, 43, 67, 0.05) !important;
}
.about__cards .card ul li:last-child { border-bottom: none !important; }
.about__cards .card ul li::before {
    top: 0.5rem !important;
    font-size: 0.6rem !important;
}

@media (max-width: 992px) {
    .about__grid { grid-template-columns: 1fr !important; }
    .about__visual { min-height: auto; max-height: none; }
}

/* ============================================================
   v6 — Spacing & Rhythm 조정
   ============================================================ */

/* Section padding 살짝 줄여 더 컴팩트 */
.section { padding: clamp(4rem, 7vh, 6rem) 0 !important; }
.section__head { margin-bottom: 3rem !important; }
.section__head h2 { margin-bottom: 0.8rem !important; }
.section__head .lead { font-size: 1rem !important; }

/* Card 내부 간격 통일 */
.card { padding: 1.8rem 2rem; }

/* 모든 섹션 컨테이너 max-width 일관 */
.about__grid,
.fleet__cats,
.services,
.esg__grid,
.safety__grid,
.cert-grid,
.news-grid,
.contact,
.timeline,
.kpi__grid,
.stats-dark__grid,
.fleet__summary,
.why,
.org,
.owners__grid {
    max-width: 1500px;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 표 영역 max-width */
.fleet__table-wrap {
    max-width: none;
    margin: 3rem auto 0 !important;
}


/* ============================================================
   v7 — Hero 4-slide multi-motion (24s cycle, 6s each)
   ============================================================ */

/* 기존 5슬라이드 keyframes 무력화 */
.hero__slide {
    animation: none !important;
    opacity: 0;
}
.hero__slide:nth-child(1) { animation: hSZoomCenter 24s infinite ease-in-out !important; animation-delay: 0s !important; }
.hero__slide:nth-child(2) { animation: hSPanLeft    24s infinite ease-in-out !important; animation-delay: 6s !important; }
.hero__slide:nth-child(3) { animation: hSZoomOut    24s infinite ease-in-out !important; animation-delay: 12s !important; }
.hero__slide:nth-child(4) { animation: hSPanRight   24s infinite ease-in-out !important; animation-delay: 18s !important; }

@keyframes hSZoomCenter {
    0%   { opacity: 0; transform: scale(1.0); }
    4%   { opacity: 1; }
    21%  { opacity: 1; transform: scale(1.14); }
    25%  { opacity: 0; transform: scale(1.16); }
    100% { opacity: 0; transform: scale(1.0); }
}
@keyframes hSPanLeft {
    0%   { opacity: 0; transform: scale(1.10) translateX(5%); }
    4%   { opacity: 1; }
    21%  { opacity: 1; transform: scale(1.10) translateX(-5%); }
    25%  { opacity: 0; }
    100% { opacity: 0; transform: scale(1.10) translateX(5%); }
}
@keyframes hSZoomOut {
    0%   { opacity: 0; transform: scale(1.20); }
    4%   { opacity: 1; }
    21%  { opacity: 1; transform: scale(1.02); }
    25%  { opacity: 0; transform: scale(1.0); }
    100% { opacity: 0; transform: scale(1.20); }
}
@keyframes hSPanRight {
    0%   { opacity: 0; transform: scale(1.10) translateX(-5%); }
    4%   { opacity: 1; }
    21%  { opacity: 1; transform: scale(1.10) translateX(5%); }
    25%  { opacity: 0; }
    100% { opacity: 0; transform: scale(1.10) translateX(-5%); }
}

/* Indicator 4개로 재구성 */
.hero__indicators span:nth-child(1)::after,
.hero__indicators span:nth-child(2)::after,
.hero__indicators span:nth-child(3)::after,
.hero__indicators span:nth-child(4)::after {
    animation-duration: 24s !important;
}
.hero__indicators span:nth-child(1)::after { animation-delay: 0s !important; }
.hero__indicators span:nth-child(2)::after { animation-delay: 6s !important; }
.hero__indicators span:nth-child(3)::after { animation-delay: 12s !important; }
.hero__indicators span:nth-child(4)::after { animation-delay: 18s !important; }
@keyframes indFill {
    0%  { transform: scaleX(0); }
    25% { transform: scaleX(1); }
    29% { transform: scaleX(1); opacity: 1; }
    30% { transform: scaleX(0); opacity: 0; }
    100%{ transform: scaleX(0); }
}


/* ============================================================
   v8 — Cert 카테고리 컬러 분기 + 디자인 다양화
   ============================================================ */

.cert {
    position: relative;
    padding-top: 2.6rem !important;
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(180deg, #fff 0%, #fafcfc 100%) !important;
}

/* 상단 카테고리 라벨 */
.cert__cat {
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    white-space: nowrap;
}

/* 카드 상단 액센트 라인 */
.cert::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    transition: opacity 0.3s var(--ease);
}

/* 카테고리별 컬러 분기 */
.cert--maritime::before { background: linear-gradient(90deg, #0F2B43, #1E5F7E); }
.cert--maritime .cert__icon { background: linear-gradient(135deg, #0F2B43, #1E5F7E) !important; }
.cert--maritime .cert__cat { background: rgba(15, 43, 67, 0.10); color: #0F2B43; }

.cert--iso::before { background: linear-gradient(90deg, #167B85, #2BA8B5); }
.cert--iso .cert__icon { background: linear-gradient(135deg, #167B85, #2BA8B5) !important; }
.cert--iso .cert__cat { background: rgba(22, 123, 133, 0.10); color: #0D5965; }

.cert--vetting::before { background: linear-gradient(90deg, #E96B30, #F5946A); }
.cert--vetting .cert__icon { background: linear-gradient(135deg, #E96B30, #F5946A) !important; }
.cert--vetting .cert__cat { background: rgba(233, 107, 48, 0.10); color: #C75A26; }

/* 호버 — 카테고리 컬러 따라 보더 변경 */
.cert--maritime:hover { border-color: rgba(30, 95, 126, 0.4) !important; }
.cert--iso:hover { border-color: rgba(22, 123, 133, 0.4) !important; }
.cert--vetting:hover { border-color: rgba(233, 107, 48, 0.4) !important; }
.cert:hover::before { height: 6px; }

/* Cert 그리드 — 카테고리 별 시각 그룹 (gap 차별화) */
.cert-grid {
    gap: 1rem;
}

/* ============================================================
   v8 — 아이콘 색상 다양화 (이미 적용된 부분 외 보강)
   ============================================================ */

/* Mission/Vision 아이콘 차별화 */
.about__cards .card:nth-child(1) .card__icon {
    background: linear-gradient(135deg, #167B85, #2BA8B5) !important;
}
.about__cards .card:nth-child(2) .card__icon {
    background: linear-gradient(135deg, #1E5F7E, #4A9CB8) !important;
}

/* Why Us 4 카드 아이콘 컬러 차별화 */
.why__item:nth-child(1) .why__icon { color: #167B85; }
.why__item:nth-child(2) .why__icon { color: #1E5F7E; }
.why__item:nth-child(3) .why__icon { color: #E96B30; }
.why__item:nth-child(4) .why__icon { color: #6B21A8; }

.why__item:nth-child(1)::before { background: linear-gradient(90deg, #167B85, #2BA8B5); }
.why__item:nth-child(2)::before { background: linear-gradient(90deg, #1E5F7E, #4A9CB8); }
.why__item:nth-child(3)::before { background: linear-gradient(90deg, #E96B30, #F5946A); }
.why__item:nth-child(4)::before { background: linear-gradient(90deg, #6B21A8, #9333EA); }

/* Fleet 카드 아이콘 (배경 회색 사라지게) */
.fleet__sum-card .fleet__sum-icon { color: #fff !important; }

/* Owner 카드 4가지 색상 회전 */
.owners__grid .owner:nth-child(1) .owner__icon { background: linear-gradient(135deg, #167B85, #2BA8B5) !important; }
.owners__grid .owner:nth-child(2) .owner__icon { background: linear-gradient(135deg, #E96B30, #F5946A) !important; }
.owners__grid .owner:nth-child(3) .owner__icon { background: linear-gradient(135deg, #1E5F7E, #4A9CB8) !important; }
.owners__grid .owner:nth-child(4) .owner__icon { background: linear-gradient(135deg, #0F2B43, #3D4F5C) !important; }

/* News 카드 호버 — 카테고리별 보더 색 */
.news-card:has(.news-card__cat.press):hover { border-color: rgba(233, 107, 48, 0.4) !important; }
.news-card:has(.news-card__cat.psc):hover { border-color: rgba(15, 43, 67, 0.4) !important; }
.news-card:has(.news-card__cat.certification):hover { border-color: rgba(5, 150, 105, 0.4) !important; }

/* KPI 5개 카드 — 아이콘 컬러 5색 분기 */
.kpi__card:nth-child(1) .kpi__icon { background: linear-gradient(135deg, #167B85, #2BA8B5) !important; }
.kpi__card:nth-child(2) .kpi__icon { background: linear-gradient(135deg, #E96B30, #F5946A) !important; }
.kpi__card:nth-child(3) .kpi__icon { background: linear-gradient(135deg, #0F2B43, #1E5F7E) !important; }
.kpi__card:nth-child(4) .kpi__icon { background: linear-gradient(135deg, #059669, #10B981) !important; }
.kpi__card:nth-child(5) .kpi__icon { background: linear-gradient(135deg, #6B21A8, #9333EA) !important; }

/* Service 카드 호버 시 좌측 이미지 미세 줌 */
.service { overflow: hidden; }
.service__img { transition: transform 0.6s var(--ease); }
.service:hover .service__img { transform: scale(1.05); }

/* Fleet 카테고리 카드 호버 시 이미지 줌 */
.fleet__cat { overflow: hidden; }
.fleet__cat img { transition: transform 0.6s var(--ease); }
.fleet__cat:hover img { transform: scale(1.06); }

/* Section divider — 부드러운 라인 */
.section + .section--alt::before,
.section--alt + .section::before {
    content: '';
    display: block;
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, var(--teal), var(--coral));
    border-radius: 2px;
    margin: -1.5rem auto 0;
    position: relative;
    z-index: 1;
}


/* ============================================================
   v9 — Timeline dot 위치 + CEO 박스 가독성
   ============================================================ */

/* Timeline — dot이 year를 덮지 않도록 line 위에만 위치 */
.timeline__year { position: relative; z-index: 2; }
.timeline__year::after {
    content: '' !important;
    position: absolute !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    background: var(--coral) !important;
    border: 3px solid #fff !important;
    box-shadow: 0 0 0 2px var(--coral) !important;
    z-index: 3;
}

/* 데스크탑(좌우 교차) — dot은 가운데 라인 위에만 */
@media (min-width: 768px) {
    .timeline__item .timeline__year {
        background: #fff;
        padding: 0.3rem 0.6rem;
        border-radius: 999px;
        font-size: 0.85rem;
        z-index: 3;
    }
    .timeline__item .timeline__year::after {
        left: 50% !important;
        top: 50% !important;
        right: auto !important;
        transform: translate(-50%, -50%) !important;
        width: 14px !important;
        height: 14px !important;
        z-index: -1;
        opacity: 0;  /* 가운데 라인 위 dot 숨기고, year 라벨 자체가 마커 역할 */
    }
    .timeline::before {
        z-index: 0;
    }
}

/* 모바일(좌측 라인) — dot 우측에만 */
@media (max-width: 767px) {
    .timeline__year::after {
        right: -7px !important;
        top: 6px !important;
        left: auto !important;
    }
}

/* Hightlight (2026.04) — Teal dot */
.timeline__item.is-highlight .timeline__year {
    background: var(--teal) !important;
    color: #fff !important;
}

/* ============================================================
   v9 — Org CEO 박스 가독성
   ============================================================ */
.org__box--ceo h4 {
    color: rgba(255, 255, 255, 0.95) !important;
    font-weight: 700 !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    margin-bottom: 0.5rem !important;
}
.org__box--ceo p {
    color: #fff !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
}


/* ============================================================
   v10 — Cert 카드 가운데 정렬 + 뱃지·아이콘 겹침 해결
   ============================================================ */

/* 카드 개수 적을 때 가운데 정렬 */
.cert-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(220px, 300px)) !important;
    justify-content: center !important;
    gap: 1.4rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 1100px !important;
}

@media (max-width: 768px) {
    .cert-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
    .cert-grid { grid-template-columns: 1fr !important; }
}

/* 카드 내부 — flex column으로 자연스러운 흐름 */
.cert {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 1.8rem 1.5rem !important;
    gap: 0.6rem;
}

/* 뱃지 — absolute 제거, 카드 내부 첫 줄로 */
.cert__cat {
    position: static !important;
    transform: none !important;
    display: inline-block !important;
    margin: 0 0 0.5rem 0 !important;
    align-self: center;
}

/* 아이콘 — 뱃지 아래 공간 충분히 */
.cert .cert__icon {
    margin: 0.4rem auto 0.6rem !important;
    width: 64px !important;
    height: 64px !important;
}

.cert h3 { margin: 0.4rem 0 0.2rem; }
.cert p { margin: 0; }


/* Hero 보조 카피 (HMM "We Carry the Future" 차용) */
.hero__sub {
    font-family: var(--font-mono);
    font-size: clamp(0.9rem, 1.1vw, 1.1rem);
    letter-spacing: 0.1em;
    color: var(--coral-soft);
    font-weight: 500;
    margin-top: 1rem;
    margin-bottom: 1.2rem;
    text-transform: uppercase;
}

/* ============================================================
   v11 — Homepage overhaul: full-screen hero + tree navigation
   ============================================================ */

.nav {
    background: rgba(6, 24, 34, 0.68) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #fff;
}
.nav.is-scrolled,
.nav.is-open {
    background: rgba(255, 255, 255, 0.96) !important;
    color: var(--ink);
    box-shadow: 0 18px 45px -34px rgba(6, 30, 38, 0.55);
}
.nav:not(.is-scrolled):not(.is-open) .nav__lang {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
}
.nav:not(.is-scrolled):not(.is-open) .nav__burger span {
    background: #fff;
}
.nav__inner {
    max-width: none !important;
    padding-left: clamp(1.2rem, 3vw, 3.5rem) !important;
    padding-right: clamp(1.2rem, 3vw, 3.5rem) !important;
}
.brand-emblem {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: #fff;
    background: linear-gradient(135deg, var(--teal), var(--teal-light));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.nav__logo {
    display: inline-flex;
    align-items: center;
    gap: 0.72rem;
    color: inherit;
}
.nav__brand-text {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    line-height: 1;
}
.nav__brand-text strong {
    font-size: 1rem;
    font-weight: 850;
    letter-spacing: 0.08em;
}
.nav__brand-text small {
    font-family: var(--font-mono);
    font-size: 0.63rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.72;
}
.loading__brand,
.footer__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 850;
    letter-spacing: 0.12em;
}
.footer__brand {
    margin-bottom: 1.2rem;
}
.nav__menu--tree {
    gap: 0.35rem;
    align-items: center;
}
.nav__item {
    position: relative;
}
.nav__top {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-width: 104px;
    padding: 0.6rem 1.05rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    white-space: nowrap;
    transition: background var(--t), color var(--t);
}
.nav__item--has-menu .nav__top::after {
    content: '\f107';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.68rem;
    opacity: 0.7;
    transition: transform var(--t);
}
.nav__item:hover .nav__top,
.nav__item:focus-within .nav__top,
.nav__item.is-expanded .nav__top {
    background: rgba(255, 255, 255, 0.14);
    color: var(--coral-soft);
}
.nav.is-scrolled .nav__item:hover .nav__top,
.nav.is-scrolled .nav__item:focus-within .nav__top,
.nav.is-scrolled .nav__item.is-expanded .nav__top,
.nav.is-open .nav__item:hover .nav__top,
.nav.is-open .nav__item:focus-within .nav__top,
.nav.is-open .nav__item.is-expanded .nav__top {
    background: rgba(22, 123, 133, 0.08);
    color: var(--teal-deep);
}
.nav__item:hover .nav__top::after,
.nav__item:focus-within .nav__top::after,
.nav__item.is-expanded .nav__top::after {
    transform: rotate(180deg);
}
.nav__dropdown {
    width: min(920px, calc(100vw - 2rem));
    padding: 0.7rem;
    border: 1px solid rgba(15, 43, 67, 0.08);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 24px 70px -34px rgba(6, 30, 38, 0.48);
    backdrop-filter: blur(18px);
}
.nav__mega {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.55rem;
}
.nav__mega-col {
    display: grid;
    align-content: start;
    gap: 0.15rem;
    padding: 0.65rem;
    border-radius: 14px;
    transition: background var(--t), box-shadow var(--t);
}
.nav__mega-col strong {
    display: block;
    margin: 0 0 0.35rem;
    padding: 0 0.15rem 0.4rem;
    border-bottom: 1px solid rgba(15, 43, 67, 0.08);
    color: var(--teal-deep);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.nav__mega-col.is-focus {
    background: linear-gradient(180deg, rgba(22, 123, 133, 0.10), rgba(22, 123, 133, 0.035));
    box-shadow: inset 0 0 0 1px rgba(22, 123, 133, 0.10);
}
.nav__mega-col:hover {
    background: rgba(15, 43, 67, 0.045);
}
.nav__dropdown a,
.nav__menu .nav__dropdown a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    width: 100%;
    padding: 0.72rem 0.85rem;
    border-radius: 12px;
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 650;
    text-align: left;
}
.nav__dropdown a::after,
.nav__menu .nav__dropdown a::after {
    display: none;
}
.nav__dropdown a:hover {
    background: rgba(22, 123, 133, 0.08);
    color: var(--teal-deep);
}

@media (min-width: 1025px) {
    .nav__dropdown {
        position: fixed;
        top: calc(var(--nav-h) + 10px);
        left: 50%;
        transform: translate(-50%, 8px);
        display: grid;
        gap: 0.2rem;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity var(--t), transform var(--t), visibility var(--t);
    }
    .nav__item:hover .nav__dropdown,
    .nav__item:focus-within .nav__dropdown,
    .nav__item.is-expanded .nav__dropdown {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translate(-50%, 0);
    }
}

.hero {
    min-height: 100svh !important;
    padding-top: 0 !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
}
.hero__veil {
    background:
        linear-gradient(90deg, rgba(3, 18, 27, 0.88) 0%, rgba(3, 18, 27, 0.58) 36%, rgba(3, 18, 27, 0.14) 70%),
        linear-gradient(180deg, rgba(3, 18, 27, 0.48) 0%, rgba(3, 18, 27, 0.12) 42%, rgba(3, 18, 27, 0.82) 100%) !important;
}
.hero__inner {
    max-width: none !important;
    min-height: 100svh;
    padding: calc(var(--nav-h) + clamp(3rem, 7vh, 6rem)) clamp(1.2rem, 4vw, 4rem) clamp(2rem, 5vh, 4rem) !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: clamp(2rem, 5vh, 4rem);
    text-align: left !important;
}
.hero__content {
    max-width: min(760px, 100%);
}
.hero__eyebrow {
    margin-bottom: 1.05rem !important;
    color: rgba(255, 255, 255, 0.88) !important;
    background: rgba(255, 255, 255, 0.08);
    display: inline-flex !important;
    align-items: center;
    gap: 0.7rem;
    width: auto;
    letter-spacing: 0.12em !important;
}
.hero__eyebrow strong {
    display: inline-flex;
    align-items: center;
    padding-left: 0.75rem;
    border-left: 1px solid rgba(255, 255, 255, 0.28);
    color: var(--coral-soft);
    font-weight: 800;
    letter-spacing: 0.04em;
}
.hero__title {
    max-width: 860px;
    margin-bottom: 1.2rem !important;
    font-size: clamp(2.65rem, 5.35vw, 5.85rem) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.018em !important;
    word-break: keep-all;
    overflow-wrap: normal;
}
.hero__title span {
    white-space: nowrap;
}
.hero__lead {
    max-width: 700px !important;
    margin: 0 0 2rem 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.86) !important;
    font-size: clamp(1rem, 1.3vw, 1.22rem) !important;
    line-height: 1.78 !important;
    backdrop-filter: none !important;
}
.hero__cta {
    justify-content: flex-start !important;
}
.hero__dock {
    width: min(100%, 1320px);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 24px;
    overflow: hidden;
    background: rgba(6, 24, 34, 0.45);
    backdrop-filter: blur(16px);
    box-shadow: 0 24px 70px -42px rgba(0, 0, 0, 0.75);
}
.hero__dock a {
    min-height: 112px;
    padding: 1.25rem 1.4rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.35rem;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    transition: background var(--t), transform var(--t);
}
.hero__dock a:last-child {
    border-right: 0;
}
.hero__dock a:hover {
    background: rgba(255, 255, 255, 0.12);
}
.hero__dock strong {
    display: block;
    color: #fff;
    font-size: clamp(1.15rem, 2vw, 2rem);
    line-height: 1;
    letter-spacing: -0.03em;
}
.hero__dock span {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.88rem;
    font-weight: 650;
}
.hero__indicators {
    left: auto !important;
    right: clamp(1.2rem, 4vw, 4rem) !important;
    bottom: clamp(1.1rem, 2.4vh, 2rem) !important;
    transform: none !important;
}
.kpi {
    padding-top: clamp(2.5rem, 5vh, 4.5rem) !important;
}

@media (max-width: 1024px) {
    .nav__menu--tree {
        display: none;
    }
    .nav.is-open .nav__menu--tree {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        gap: 0.4rem;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        max-height: calc(100vh - var(--nav-h));
        overflow-y: auto;
        padding: 1rem var(--page-pad) 1.2rem;
        background: rgba(255, 255, 255, 0.98);
        border-bottom: 1px solid var(--border);
        box-shadow: 0 18px 45px -32px rgba(6, 30, 38, 0.45);
    }
    .nav__item {
        width: 100%;
    }
    .nav__top {
        width: 100%;
        justify-content: space-between;
        min-width: 0;
        padding: 0.85rem 1rem;
        color: var(--ink);
        background: rgba(22, 123, 133, 0.06);
    }
    .nav__dropdown {
        display: none;
        margin-top: 0.35rem;
        width: 100%;
        min-width: 0;
        box-shadow: none;
        border-radius: 14px;
        background: rgba(241, 246, 247, 0.94);
    }
    .nav__mega {
        grid-template-columns: 1fr;
    }
    .nav__item.is-expanded .nav__dropdown {
        display: grid;
        gap: 0.1rem;
    }
    .hero__inner {
        padding-top: calc(var(--nav-h) + 2.2rem) !important;
    }
    .hero__dock {
        grid-template-columns: repeat(2, 1fr);
    }
    .hero__dock a {
        border-right: 1px solid rgba(255, 255, 255, 0.12);
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }
    .hero__dock a:nth-child(2n) {
        border-right: 0;
    }
    .hero__dock a:last-child {
        border-bottom: 0;
    }
}

@media (max-width: 640px) {
    .hero__title {
        font-size: clamp(2.35rem, 11vw, 3.6rem) !important;
        letter-spacing: -0.015em !important;
    }
    .hero__title span {
        white-space: normal;
    }
    .hero__lead {
        font-size: 0.96rem !important;
    }
    .hero__dock {
        grid-template-columns: 1fr;
        border-radius: 18px;
    }
    .hero__dock a {
        min-height: 86px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }
    .hero__dock a:last-child {
        border-bottom: 0;
    }
    .hero__indicators {
        display: none !important;
    }
}

/* ============================================================
   v12 — Tone cleanup: unified cards, menu hover, EN hero fit
   ============================================================ */

body.lang-en .hero__content {
    max-width: min(980px, 100%) !important;
}
body.lang-en .hero__title {
    max-width: 980px !important;
    font-size: clamp(2.6rem, 4.55vw, 5.1rem) !important;
    line-height: 1.13 !important;
    letter-spacing: -0.012em !important;
    text-wrap: balance;
}
body.lang-en .hero__title span {
    white-space: normal !important;
}
body.lang-en .hero__lead {
    max-width: 780px !important;
}

.nav__mega-col.is-focus {
    background: transparent !important;
    box-shadow: none !important;
}
.nav__mega-col:hover,
.nav__mega-col:focus-within {
    background: linear-gradient(180deg, rgba(22, 123, 133, 0.10), rgba(22, 123, 133, 0.035)) !important;
    box-shadow: inset 0 0 0 1px rgba(22, 123, 133, 0.10) !important;
}
.nav__mega-col:hover strong,
.nav__mega-col:focus-within strong {
    color: var(--teal);
}
.nav__dropdown a {
    color: rgba(15, 36, 41, 0.82) !important;
    transition: background var(--t), color var(--t), transform var(--t);
}
.nav__dropdown a:hover,
.nav__dropdown a:focus-visible {
    background: var(--teal-deep) !important;
    color: #fff !important;
    transform: translateX(2px);
}

.kpi__card,
.card,
.news-card,
.career-card,
.office,
.owner,
.fleet__sum-card,
.fleet__cat,
.service,
.cert,
.why__item {
    border-radius: 22px !important;
    border: 1px solid rgba(15, 43, 67, 0.10) !important;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdfd 100%) !important;
    box-shadow: 0 18px 50px -42px rgba(6, 30, 38, 0.38) !important;
}
.kpi__card:hover,
.card:hover,
.news-card:hover,
.career-card:hover,
.office:hover,
.owner:hover,
.fleet__sum-card:hover,
.fleet__cat:hover,
.service:hover,
.cert:hover,
.why__item:hover {
    border-color: rgba(22, 123, 133, 0.26) !important;
    box-shadow: 0 26px 70px -42px rgba(6, 30, 38, 0.44) !important;
}

.kpi__icon,
.card__icon,
.office__icon,
.owner__icon,
.fleet__sum-icon {
    background: linear-gradient(135deg, var(--teal-deep), var(--teal)) !important;
    color: #fff !important;
    box-shadow: 0 14px 30px -20px rgba(13, 89, 101, 0.70);
}
.kpi__card:first-child,
.kpi__card:not(:first-child) {
    background: linear-gradient(180deg, #ffffff 0%, #fbfdfd 100%) !important;
}
.kpi__num,
.kpi__card:first-child .kpi__num {
    color: var(--ink) !important;
    font-size: clamp(2rem, 3vw, 3.1rem) !important;
    letter-spacing: -0.035em;
}
.kpi__label,
.kpi__card:first-child .kpi__label {
    color: var(--ink) !important;
    font-weight: 800 !important;
}
.kpi__desc,
.kpi__card:first-child .kpi__desc {
    color: var(--gray) !important;
}
.kpi__card:nth-child(n) .kpi__icon,
.about__cards .card:nth-child(n) .card__icon,
.safety-card[data-safety] .card__icon,
.office:nth-child(n) .office__icon,
.owners__grid .owner:nth-child(n) .owner__icon {
    background: linear-gradient(135deg, var(--teal-deep), var(--teal)) !important;
}

.card h3,
.service__body h3,
.news-card h3,
.career-card h3,
.office h3,
.owner h4,
.fleet__cat h3 {
    letter-spacing: -0.01em;
    color: var(--ink) !important;
}
.card p,
.service__body p,
.news-card p,
.career-card__desc,
.office p,
.fleet__cat p {
    color: var(--gray) !important;
}

@media (max-width: 768px) {
    body.lang-en .hero__title {
        font-size: clamp(2.1rem, 9vw, 3.2rem) !important;
    }
}

@media (min-width: 1101px) {
    .kpi__grid {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
    .kpi__card {
        padding: 1.75rem 1rem !important;
    }
}
@media (max-width: 1100px) {
    .kpi__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

html {
    scroll-padding-top: calc(var(--nav-h) + 16px);
}
.section,
.stats-dark,
.kpi {
    scroll-margin-top: calc(var(--nav-h) + 16px);
}

/* ============================================================
   v13 — Copy fit and final brand/service refinements
   ============================================================ */

body,
p,
h1,
h2,
h3,
h4,
li,
a,
span,
strong,
td,
th,
blockquote {
    word-break: keep-all;
    overflow-wrap: break-word;
    line-break: strict;
    hyphens: none;
}
body.lang-en,
body.lang-en p,
body.lang-en h1,
body.lang-en h2,
body.lang-en h3,
body.lang-en h4,
body.lang-en li,
body.lang-en a,
body.lang-en span,
body.lang-en strong {
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}
.hero__eyebrow {
    position: relative;
    padding-left: 2.65rem !important;
    white-space: nowrap;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.055)) !important;
}
.hero__eyebrow::before {
    content: '';
    position: absolute;
    left: 1rem;
    top: 50%;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    transform: translateY(-50%);
    background: var(--coral);
    box-shadow: 0 0 0 5px rgba(233, 107, 48, 0.16);
}
.about__grid {
    align-items: stretch !important;
}
.about__visual {
    min-height: 100% !important;
    height: 100% !important;
    max-height: none !important;
}
.about__cards {
    grid-template-rows: 1fr 1fr !important;
    height: 100% !important;
}
.about__cards .card {
    min-height: 0;
}
.service__body h3 {
    word-break: keep-all;
}
.service__body li,
.card ul li,
.why__item p,
.safety-card p,
.esg-card p {
    word-break: keep-all;
    overflow-wrap: break-word;
}
.ceo__sign strong {
    display: inline-block;
    line-height: 1.5;
}

/* ============================================================
   v14 — CEO, menu hover bridge, copy refinements
   ============================================================ */

.ceo {
    align-items: stretch !important;
}
.ceo__media {
    aspect-ratio: auto !important;
    min-height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, rgba(15, 43, 67, 0.06), rgba(22, 123, 133, 0.08)) !important;
}
.ceo__media img {
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
    padding: 0.6rem !important;
}
.ceo__body {
    align-self: center;
}

@media (min-width: 1025px) {
    .nav__dropdown {
        top: calc(var(--nav-h) - 1px) !important;
        transform: translate(-50%, 0) !important;
    }
    .nav__item:hover .nav__dropdown,
    .nav__item:focus-within .nav__dropdown,
    .nav__item.is-expanded .nav__dropdown {
        transform: translate(-50%, 0) !important;
    }
}

/* ============================================================
   v15 — Services 카드: 이미지 비율 정리 + 레이아웃 개선
   ============================================================ */
.services {
    grid-template-columns: 1fr !important;
    gap: 1.6rem !important;
}
.service {
    grid-template-columns: 320px 1fr !important;
    min-height: 0 !important;
    max-height: none !important;
    background: #fff !important;
    border: 1px solid var(--border) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    align-items: stretch !important;
}
.service:nth-child(even) {
    grid-template-columns: 1fr 320px !important;
}
.service__media {
    position: relative;
    aspect-ratio: 1 / 1;
    width: 100%;
    background: linear-gradient(160deg, #f4fafb 0%, #e9f4f6 60%, #ddeef1 100%);
    overflow: hidden;
}
.service__img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    background-size: 78% auto !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    transition: transform 0.6s var(--ease);
}
.service:hover .service__img { transform: scale(1.06); }

.service__num {
    position: absolute;
    top: 14px;
    left: 16px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: var(--teal);
    background: rgba(255, 255, 255, 0.92);
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(22, 123, 133, 0.18);
    z-index: 2;
    backdrop-filter: blur(4px);
}
.service__tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 0.6rem;
}
.service__body {
    padding: 2rem 2.4rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 0.4rem;
}
.service__body h3 {
    font-size: 1.45rem !important;
    font-weight: 800 !important;
    margin-bottom: 0.4rem !important;
    color: var(--ink) !important;
    line-height: 1.3 !important;
}
.service__body p {
    font-size: 0.94rem !important;
    line-height: 1.7 !important;
    color: var(--gray) !important;
    margin-bottom: 0.9rem !important;
}
.service__body ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.2rem;
    row-gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.service__body li {
    position: relative;
    padding: 0.28rem 0 0.28rem 1.1rem !important;
    font-size: 0.86rem !important;
    color: #374151;
    line-height: 1.5;
}
.service__body li::before {
    content: '' !important;
    position: absolute;
    left: 0;
    top: 0.72rem;
    width: 6px;
    height: 6px;
    border-radius: 2px;
    background: var(--teal);
    transform: rotate(45deg);
}

@media (max-width: 900px) {
    .service,
    .service:nth-child(even) {
        grid-template-columns: 1fr !important;
    }
    .service__media { aspect-ratio: 16 / 9; }
    .service__img { background-size: 42% auto !important; }
    .service__body { padding: 1.6rem 1.5rem !important; }
    .service__body ul { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .service__media { aspect-ratio: 4 / 3; }
    .service__img { background-size: 60% auto !important; }
    .service__body h3 { font-size: 1.2rem !important; }
}

/* ============================================================
   v16 — CEO 서명 우측 정렬 + 채용 빈 상태 + 메일 선택 + 오시는 길
   ============================================================ */

/* CEO 서명: 본문 우측 끝으로 정렬 */
.ceo__sign--right {
    margin-top: 2rem !important;
    padding-top: 1.4rem !important;
    border-top: 1px solid var(--border) !important;
    text-align: right !important;
    line-height: 1.7;
}
.ceo__sign--right strong {
    display: block;
    color: var(--ink) !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.02em;
    margin-bottom: 0.35rem;
}
.ceo__sign--right .ceo__sign-title {
    display: inline-block;
    color: var(--gray);
    font-size: 0.95rem;
    margin-right: 0.5rem;
}
.ceo__sign--right .ceo__sign-name {
    display: inline-block;
    color: var(--teal);
    font-weight: 800;
    font-size: 1.35rem;
    letter-spacing: 0.05em;
    font-family: 'Noto Sans KR', serif;
}

/* 채용정보 빈 상태 */
.careers-empty {
    background: #fff;
    border: 1px dashed var(--border);
    border-radius: 16px;
    padding: 4rem 2rem;
    text-align: center;
    color: var(--gray);
}
.careers-empty__icon {
    width: 64px; height: 64px;
    margin: 0 auto 1.2rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(22,123,133,0.08), rgba(22,123,133,0.02));
    color: var(--teal);
    font-size: 1.6rem;
}
.careers-empty h3 {
    color: var(--ink);
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.careers-empty p { font-size: 0.95rem; line-height: 1.7; }

/* 메일 선택 카드 */
.mailpick {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
    margin-bottom: 1.4rem;
}
.mailpick__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 2.2rem 1.5rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    text-align: center;
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
    cursor: pointer;
    text-decoration: none;
    color: var(--ink);
}
.mailpick__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px -16px rgba(6,30,38,0.18);
    border-color: var(--teal);
}
.mailpick__icon {
    width: 60px; height: 60px;
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem;
    color: #fff;
}
.mailpick__card--gmail   .mailpick__icon { background: linear-gradient(135deg, #EA4335, #FBBC05); }
.mailpick__card--outlook .mailpick__icon { background: linear-gradient(135deg, #0078D4, #50E6FF); }
.mailpick__card--naver   .mailpick__icon { background: #03C75A; }
.naver-n {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 1.7rem;
    color: #fff;
    line-height: 1;
}
.mailpick__card h3 {
    margin: 0.2rem 0 0.1rem;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--ink);
}
.mailpick__card p { margin: 0; font-size: 0.88rem; color: var(--gray); }

.mailpick__to {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    text-align: center;
    margin-top: 0.4rem;
    color: var(--gray);
    font-size: 0.95rem;
}
.mailpick__to i { color: var(--teal); }
.mailpick__to a {
    color: var(--teal);
    font-weight: 600;
    white-space: nowrap;
}
.mailpick__sep {
    color: var(--border);
    margin: 0 0.2rem;
    user-select: none;
}
@media (max-width: 480px) {
    .mailpick__to { flex-direction: column; gap: 0.2rem; }
    .mailpick__sep { display: none; }
}

@media (max-width: 768px) {
    .mailpick { grid-template-columns: 1fr; }
}

/* 오시는 길 — 지도 + 정보 */
.directions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
.direction {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.direction:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px -18px rgba(6,30,38,0.15);
}
.direction__map {
    position: relative;
    aspect-ratio: 16 / 10;
    background: #eef3f6;
}
.direction__map iframe {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border: 0;
    display: block;
}
.direction__info {
    padding: 2rem 2.2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.45rem;
}
.direction__info h3 {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 0.6rem;
}
.direction__info p {
    margin: 0;
    color: var(--gray);
    font-size: 0.93rem;
    line-height: 1.65;
}
/* 라벨 + 값 한 줄 정렬 (좁은 화면에서도 wrap 안나도록 flex 사용) */
.direction__row {
    display: flex !important;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: nowrap;
    min-width: 0;
}
.direction__row strong {
    flex: 0 0 auto;
    min-width: 44px;
    color: var(--ink);
    font-weight: 700;
}
.direction__row a,
.direction__row span {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--teal);
    word-break: break-all;
    overflow-wrap: anywhere;
}
.direction__row span { color: var(--gray); }
.direction__info p strong {
    color: var(--ink);
    font-weight: 700;
}
.direction__info p a { color: var(--teal); }
.direction__addr {
    color: var(--ink) !important;
    font-weight: 600 !important;
    margin-bottom: 0.6rem !important;
}
.direction__addr i {
    color: var(--coral);
    margin-right: 0.45rem;
}
.direction__hours {
    margin-top: 0.6rem !important;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--border);
    font-size: 0.85rem !important;
}
.direction__open {
    margin-top: 1rem;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.2rem;
    background: var(--teal);
    color: #fff;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.88rem;
    text-decoration: none;
    transition: background 0.25s var(--ease);
}
.direction__open:hover { background: var(--ink); }
.direction__open i { font-size: 0.78em; }

@media (max-width: 900px) {
    .direction { grid-template-columns: 1fr; }
    .direction__map { aspect-ratio: 16 / 9; }
    .direction__info { padding: 1.6rem; }
    .ceo__sign--right .ceo__sign-name { font-size: 1.2rem; }
}

/* ============================================================
   v17 — 인증 카테고리 'doc' 색상 + 메뉴 호버 브릿지
   ============================================================ */

/* 인증 카드 — DOC / ISO 모두 동일 스타일 (teal 통일) */
.cert--doc .cert__cat,
.cert--iso .cert__cat {
    background: rgba(22, 123, 133, 0.10) !important;
    color: var(--teal) !important;
    border-color: rgba(22, 123, 133, 0.20) !important;
}
.cert--doc .cert__icon,
.cert--iso .cert__icon {
    background: linear-gradient(135deg, var(--teal), var(--teal-light)) !important;
    color: #fff !important;
}

/* 인증 카드 레이아웃 — 위 2개(DOC) + 아래 3개(ISO) */
.cert-grid {
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 1.4rem !important;
    max-width: 1100px;
    margin: 0 auto;
}
.cert-grid .cert--doc { grid-column: span 3; }
.cert-grid .cert--iso { grid-column: span 2; }

@media (max-width: 900px) {
    .cert-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .cert-grid .cert--doc,
    .cert-grid .cert--iso { grid-column: span 1; }
}
@media (max-width: 480px) {
    .cert-grid { grid-template-columns: 1fr !important; }
}

/* 메뉴 호버 브릿지 — 버튼과 드롭다운 사이 빈 공간 hover 유지 */
@media (min-width: 1025px) {
    /* 1) 버튼 아래로 18px 투명 hit-area: cursor 진입 시 :hover 유지 */
    .nav__item--has-menu::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        width: 240px;
        height: 22px;
        transform: translateX(-50%);
        background: transparent;
        /* 항상 pointer-events 활성: 갭 보호. 드롭다운이 닫혀있을 땐 시각적 영향 0 */
    }
    /* 2) 드롭다운 위쪽으로도 22px 확장 (안전망) */
    .nav__dropdown::before {
        content: '';
        position: absolute;
        top: -22px;
        left: 0;
        right: 0;
        height: 22px;
        background: transparent;
    }
}

/* ============================================================
   v19 — 연혁 highlight 풀폭 카드 + 브랜드명 nowrap 유틸
   ============================================================ */

/* 브랜드명 줄바꿈 방지 (SAMJOO MARITIME / SAMJOO SM / DORIKO LIMITED) */
.nowrap { white-space: nowrap; }

/* "현재 / PRESENT" 뱃지 */
.timeline__badge {
    display: inline-block;
    margin-bottom: 0.9rem;
    padding: 0.3rem 0.85rem;
    background: var(--coral);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border-radius: 999px;
}

/* 모든 timeline 본문 한국어 단어 깨짐 방지 */
.timeline__content { word-break: keep-all; overflow-wrap: break-word; }

/* highlight 항목 — 좌우 교차 깨고 풀폭 중앙 카드로 강조 */
@media (min-width: 768px) {
    .timeline__item.is-highlight {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto;
        max-width: 760px;
        margin: 0 auto 3.5rem !important;
        text-align: center;
    }
    .timeline__item.is-highlight .timeline__year {
        grid-column: 1 !important;
        grid-row: 1;
        justify-self: center;
        margin: 0 auto 1.2rem !important;
        padding: 0.4rem 1.2rem !important;
        font-size: 0.95rem !important;
        font-weight: 800 !important;
        background: var(--teal) !important;
        color: #fff !important;
        border-radius: 999px !important;
        box-shadow: 0 6px 18px -6px rgba(22, 123, 133, 0.5);
    }
    .timeline__item.is-highlight .timeline__year::after {
        opacity: 0 !important;
    }
    .timeline__item.is-highlight .timeline__content {
        grid-column: 1 !important;
        grid-row: 2;
        margin: 0 !important;
        text-align: center !important;
        padding: 2.4rem 2.6rem !important;
        background: linear-gradient(135deg, #fff 0%, #f4fafb 100%) !important;
        border: 2px solid var(--teal) !important;
        border-radius: 20px !important;
        box-shadow: 0 18px 50px -22px rgba(22, 123, 133, 0.25);
    }
    .timeline__item.is-highlight .timeline__content h3 {
        font-size: 1.4rem !important;
        font-weight: 800 !important;
        color: var(--ink) !important;
        line-height: 1.4 !important;
        margin-bottom: 0.7rem !important;
    }
    .timeline__item.is-highlight .timeline__content p {
        font-size: 1rem !important;
        line-height: 1.75 !important;
        color: var(--gray) !important;
        max-width: 620px;
        margin: 0 auto;
    }
}

@media (max-width: 767px) {
    .timeline__item.is-highlight {
        margin-bottom: 2rem !important;
    }
    .timeline__badge {
        margin-bottom: 0.6rem;
    }
}

/* ============================================================
   v20 — About 인용구 라인 분리 + Mission/Vision 타이포 확대
   ============================================================ */

/* 인용구 — 두 문장을 명확히 분리, 회사명 라인은 강조 */
.about__quote {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.about__quote-line {
    display: block;
    word-break: keep-all;
    overflow-wrap: break-word;
}
.about__quote-line--brand {
    color: #fff;
    font-weight: 700;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    line-height: 1.55;
}
.about__quote-line--brand:lang(ko) {
    /* 한글 줄에서도 SAMJOO SM 등 영문 브랜드 보호 */
    text-wrap: pretty;
}

/* Mission / Vision — 박스 안 콘텐츠 시각 강화 */
.about__cards {
    gap: 1.6rem !important;
}
.about__cards .card {
    padding: 2.4rem 2.6rem !important;
    border-radius: 18px !important;
    justify-content: flex-start !important;
}
/* 아이콘 + 제목 가로 배치 (icon left, h3 right) */
.about__cards .card__head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.4rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid rgba(15, 43, 67, 0.08);
}
.about__cards .card__icon {
    width: 56px !important;
    height: 56px !important;
    font-size: 1.4rem !important;
    margin-bottom: 0 !important;
    border-radius: 14px !important;
    flex: 0 0 auto;
}
.about__cards .card h3 {
    font-size: 1.55rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 0 !important;
    color: var(--ink) !important;
    line-height: 1.2 !important;
}
.about__cards .card ul {
    margin: 0;
    padding: 0;
}
.about__cards .card ul li {
    padding: 0.65rem 0 0.65rem 1.6rem !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    color: var(--ink) !important;
    line-height: 1.55 !important;
    border-bottom: 1px solid rgba(15, 43, 67, 0.06) !important;
}
.about__cards .card ul li::before {
    top: 1rem !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 2px !important;
    background: var(--teal) !important;
    transform: rotate(45deg) !important;
    content: '' !important;
    font-size: 0 !important;
}

@media (max-width: 768px) {
    .about__cards .card { padding: 1.8rem 1.6rem !important; }
    .about__cards .card__head { gap: 0.8rem; margin-bottom: 1rem; padding-bottom: 0.8rem; }
    .about__cards .card__icon { width: 48px !important; height: 48px !important; font-size: 1.2rem !important; }
    .about__cards .card h3 { font-size: 1.3rem !important; }
    .about__cards .card ul li { font-size: 1rem !important; }
}

/* ============================================================
   v22 — 조직도 1-2-4 단순 3행 배치 (연결선 없음, 본부 라벨로 산하 표시)
   ============================================================ */

:root {
    --org-line: rgba(22, 123, 133, 0.45);
    --org-stub: 32px;
}

/* 모든 connection line / stub 제거 */
.org__row::before,
.org__row::after,
.org__row:not(:last-child)::after,
.org__branches::before,
.org__branch::before,
.org__teams::before,
.org__teams::after,
.org__teams[data-count="2"]::after,
.org__teams[data-count="3"]::after,
.org__teams[data-count="4"]::after,
.org__teams[data-count="1"] .org__box--team::before,
.org__teams[data-count="2"] .org__box--team::before,
.org__teams[data-count="3"] .org__box--team::before,
.org__teams[data-count="4"] .org__box--team::before,
.org__box--division::after,
.org__row--ceo::after { display: none !important; }

/* Row 레이아웃 */
.org { gap: 2rem; }
.org__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; width: 100%; padding: 0; }
.org__row--ceo { padding-bottom: 0; }
.org__row--divisions { gap: 3rem; margin: 0.5rem 0; }
.org__row--teams {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 220px));
    gap: 1rem;
    max-width: 980px;
    margin: 0 auto;
    justify-content: center;
}

/* 팀 박스 안 본부 라벨 (산하 표시) */
.org__division-tag {
    display: inline-block;
    margin-bottom: 0.5rem;
    padding: 0.2rem 0.65rem;
    background: rgba(15, 89, 101, 0.08);
    color: var(--teal-deep);
    border: 1px solid rgba(22, 123, 133, 0.25);
    border-radius: 999px;
    font-size: 0.66rem;
    letter-spacing: 0.05em;
    font-weight: 700;
}

@media (max-width: 768px) {
    .org__row--teams { grid-template-columns: repeat(2, 1fr); max-width: 420px; }
    .org__row--divisions { gap: 1rem; flex-direction: column; align-items: center; }
}

/* CEO row — 단독 + 아래 stub */
.org__row--ceo { position: relative; padding-bottom: var(--org-stub); }
.org__row--ceo::after {
    content: '';
    position: absolute;
    top: 100%; left: 50%;
    transform: translate(-50%, calc(var(--org-stub) * -1));
    width: 2px;
    height: var(--org-stub);
    background: linear-gradient(180deg, var(--coral), var(--org-line));
}

/* 부서 분기 컨테이너 — 대칭 1fr / 1fr */
.org__branches {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    padding-top: var(--org-stub);
    align-items: start;
}
/* 가로 연결선 — 두 컬럼의 정확한 중앙(25%↔75%) → 중점 50%가 CEO 라인과 일치 */
.org__branches::before {
    content: '';
    position: absolute;
    top: 0;
    left: 25%;
    right: 25%;
    height: 2px;
    background: var(--org-line);
}

/* 각 부서 분기 — 컬럼 가운데 정렬 + 위 stub (gap 0, 연결선은 stub으로 직접) */
.org__branch {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}
.org__branch::before {
    content: '';
    position: absolute;
    top: calc(var(--org-stub) * -1);
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: var(--org-stub);
    background: var(--org-line);
}

/* 부서 박스 — 흰 배경 + teal 보더 강조 */
.org__box--division {
    background: #fff !important;
    color: var(--teal-deep) !important;
    border: 2px solid var(--teal) !important;
    min-width: 220px;
    max-width: 260px;
    position: relative;
    box-shadow: 0 6px 18px -10px rgba(22, 123, 133, 0.25);
}
/* 본부 박스 → 팀 가로선 (또는 단일 팀)까지 단일 stub */
.org__box--division::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: calc(var(--org-stub) * 2);
    background: var(--org-line);
    z-index: 0;
}
.org__box--division h4 {
    color: var(--teal) !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
}
.org__box--division p {
    color: var(--teal-deep) !important;
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    margin-top: 0.4rem !important;
}

/* 팀 영역 — Grid로 컬럼 명시 → 정확한 중앙 계산 가능 */
.org__teams {
    position: relative;
    display: grid;
    gap: 1rem;
    width: 100%;
    padding-top: var(--org-stub);
    margin-top: var(--org-stub);
    justify-items: center;
}
/* 본부→가로선 stub은 .org__box--division::after로 처리됨 */
.org__teams::before {
    display: none;
}

/* 팀 개수별 컬럼 + 가로 연결선 위치 */
.org__teams[data-count="1"] { grid-template-columns: minmax(180px, 240px); justify-content: center; }
.org__teams[data-count="2"] { grid-template-columns: 1fr 1fr; }
.org__teams[data-count="3"] { grid-template-columns: 1fr 1fr 1fr; }
.org__teams[data-count="4"] { grid-template-columns: 1fr 1fr 1fr 1fr; }

/* count="1" — 가로선 없음, 본부→가로선 stub과 박스→가로선 stub만 직선 연결 */
.org__teams[data-count="1"] .org__box--team {
    position: relative;
}
.org__teams[data-count="1"] .org__box--team::before {
    content: '';
    position: absolute;
    top: calc(var(--org-stub) * -1 + 4px);
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: calc(var(--org-stub) - 4px);
    background: var(--org-line);
}

/* 가로 연결선 (복수 팀일 때) — 첫 컬럼 중앙 ↔ 마지막 컬럼 중앙 */
.org__teams[data-count="2"]::after { left: 25%; right: 25%; }
.org__teams[data-count="3"]::after { left: 16.667%; right: 16.667%; }
.org__teams[data-count="4"]::after { left: 12.5%;  right: 12.5%; }
.org__teams[data-count="2"]::after,
.org__teams[data-count="3"]::after,
.org__teams[data-count="4"]::after {
    content: '';
    position: absolute;
    top: var(--org-stub);
    height: 2px;
    background: var(--org-line);
}
/* 각 팀 박스 위 stub */
.org__teams[data-count="2"] .org__box--team::before,
.org__teams[data-count="3"] .org__box--team::before,
.org__teams[data-count="4"] .org__box--team::before {
    content: '';
    position: absolute;
    top: calc(var(--org-stub) * -1 + 4px);
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: calc(var(--org-stub) - 4px);
    background: var(--org-line);
}

/* 팀 박스 */
.org__box--team {
    width: 100%;
    min-width: 0;
    max-width: 220px;
    padding: 1.2rem 1rem !important;
    background: #fff;
    border: 1px solid var(--border);
    text-align: center;
    position: relative;
    margin: 0 !important;
}
.org__box--team .org__code {
    display: inline-block;
    margin-bottom: 0.5rem;
    padding: 0.18rem 0.7rem;
    background: rgba(22, 123, 133, 0.10);
    color: var(--teal);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}
.org__box--team p {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    color: var(--ink) !important;
    word-break: keep-all;
}
.org__box--team .org__loc {
    margin-top: 0.55rem !important;
    padding: 0.2rem 0.65rem !important;
    font-size: 0.7rem !important;
}

/* 모바일 — 좌우 분기 → 세로 스택, 모든 가로선 제거 */
@media (max-width: 900px) {
    .org__branches {
        grid-template-columns: 1fr;
        gap: 2rem;
        max-width: 360px;
    }
    .org__branches::before { display: none; }
    .org__branch:nth-child(2)::before {
        /* 두 번째 분기에서도 위쪽 stub 유지 */
    }
    .org__teams[data-count="2"],
    .org__teams[data-count="3"],
    .org__teams[data-count="4"] { grid-template-columns: 1fr; }
    .org__teams[data-count="2"]::after,
    .org__teams[data-count="3"]::after,
    .org__teams[data-count="4"]::after { display: none; }
    .org__teams[data-count="2"] .org__box--team::before,
    .org__teams[data-count="3"] .org__box--team::before,
    .org__teams[data-count="4"] .org__box--team::before {
        height: 1.5rem;
        top: -1.5rem;
    }
    .org__teams { gap: 1.5rem; }
    .org__box--team { max-width: 280px; }
}

/* ============================================================
   v22 — 모든 섹션 헤더에 통일된 그라데이션 라인 + 상단 여백 정리
   ============================================================ */

/* 1) 기존 조건부 디바이더 모두 제거 */
.section + .section--alt::before,
.section--alt + .section::before,
.section + .section:not(.section--alt):not(.stats-dark)::before {
    display: none !important;
    content: none !important;
}

/* 2) 모든 .section__head 위에 동일한 그라데이션 라인 (eyebrow 위쪽) */
.section__head {
    position: relative;
    padding-top: 0 !important;
    margin-bottom: 2.5rem !important;
}
.section__head::before {
    content: '';
    display: block;
    width: 64px;
    height: 3px;
    margin: 0 auto 1.4rem;
    background: linear-gradient(90deg, var(--teal), var(--coral));
    border-radius: 2px;
}

/* 3) 다크 섹션(stats-dark)에서도 동일 라인 — 라이트 톤으로 대비 확보 */
.stats-dark .section__head::before {
    background: linear-gradient(90deg, var(--teal-light), var(--coral-soft));
    opacity: 0.95;
}

/* 4) 섹션 상단 여백 살짝 줄여 제목이 위로 올라오게 */
.section,
.stats-dark {
    padding-top: clamp(3rem, 5.5vh, 4.5rem) !important;
    padding-bottom: clamp(3.5rem, 6vh, 5rem) !important;
}

/* 5) eyebrow 아래 여백도 살짝 타이트하게 */
.section__head .eyebrow {
    margin-bottom: 0.75rem !important;
}

/* ============================================================
   v23 — 오시는 길: 네이버 길찾기 단일 버튼
   ============================================================ */

.direction__route-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 1rem;
    padding: 0.75rem 1.15rem;
    background: #03C75A;
    color: #fff;
    border-radius: 10px;
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s var(--ease), transform 0.15s var(--ease), box-shadow 0.2s var(--ease);
    align-self: flex-start;
    box-shadow: 0 6px 14px -8px rgba(3, 199, 90, 0.6);
    white-space: nowrap;
}
.direction__route-btn:hover {
    background: #02b250;
    transform: translateY(-1px);
    box-shadow: 0 10px 20px -10px rgba(3, 199, 90, 0.7);
}
.direction__route-btn:active { transform: translateY(0); }
.direction__route-btn .naver-n {
    width: 22px;
    height: 22px;
    background: #fff;
    color: #03C75A;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 0.85rem;
    line-height: 1;
}
.direction__route-btn i {
    font-size: 0.78em;
    opacity: 0.85;
}

/* ============================================================
   v25 — 채용 플랫폼 카드 (Seanet · 선원복지고용센터)
   ============================================================ */

.careers-portals {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.6rem;
    max-width: 940px;
    margin: 0 auto;
}

.careers-portal {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 2rem 2rem 1.7rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    text-decoration: none;
    color: var(--ink);
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
    overflow: hidden;
}
.careers-portal::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--teal), var(--coral));
    opacity: 0;
    transition: opacity 0.25s var(--ease);
}
.careers-portal:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 48px -22px rgba(6, 30, 38, 0.18);
    border-color: var(--teal);
}
.careers-portal:hover::before { opacity: 1; }

.careers-portal__badge {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    padding: 0.25rem 0.7rem;
    background: var(--coral);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-radius: 999px;
}
.careers-portal__badge::before {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    margin-right: 0.4rem;
    border-radius: 50%;
    background: #fff;
    vertical-align: 1px;
    animation: pulse-dot 1.6s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(0.7); }
}

.careers-portal__icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    color: #fff;
    margin-bottom: 0.4rem;
}
.careers-portal--seanet .careers-portal__icon {
    background: linear-gradient(135deg, var(--teal), var(--teal-deep));
}
.careers-portal--koswec .careers-portal__icon {
    background: linear-gradient(135deg, var(--ocean, #1E5F7E), #4A9CB8);
}

.careers-portal h3 {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.015em;
    margin: 0;
}
.careers-portal p {
    font-size: 0.92rem;
    color: var(--gray);
    line-height: 1.6;
    margin: 0 0 0.6rem;
    word-break: keep-all;
}

.careers-portal__cta {
    margin-top: auto;
    padding-top: 1rem;
    width: 100%;
    border-top: 1px solid rgba(15, 43, 67, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--teal);
    transition: color 0.2s var(--ease), gap 0.2s var(--ease);
}
.careers-portal__cta i {
    font-size: 0.85em;
    opacity: 0.75;
    transition: transform 0.25s var(--ease);
}
.careers-portal:hover .careers-portal__cta {
    color: var(--coral);
    gap: 0.85rem;
}
.careers-portal:hover .careers-portal__cta i {
    transform: translate(2px, -2px);
    opacity: 1;
}

@media (max-width: 768px) {
    .careers-portals { grid-template-columns: 1fr; gap: 1.2rem; }
    .careers-portal { padding: 1.7rem 1.5rem 1.4rem; }
    .careers-portal h3 { font-size: 1.25rem; }
    .careers-portal__icon { width: 48px; height: 48px; font-size: 1.2rem; }
}

/* ============================================================
   v26 — 선대 카테고리 운영사 뱃지 (Bulk → SAMJOO SM, PCTC → DORIKO)
   ============================================================ */

.fleet__cat {
    overflow: hidden;
}
.fleet__cat-media {
    position: relative;
    overflow: hidden;
}
.fleet__cat-media img {
    display: block;
    width: 100%;
    height: 280px;
    object-fit: cover;
}

/* 운영사 뱃지 — 이미지 좌상단 */
.fleet__cat-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.42rem 0.95rem;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 6px 18px -8px rgba(6, 30, 38, 0.45);
}
.fleet__cat-badge::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}

/* SAMJOO SM — teal 톤 */
.fleet__cat-badge--bulk {
    background: linear-gradient(135deg, rgba(22, 123, 133, 0.95), rgba(15, 91, 99, 0.95));
}

/* DORIKO — coral 톤 */
.fleet__cat-badge--pctc {
    background: linear-gradient(135deg, rgba(233, 107, 48, 0.95), rgba(217, 84, 24, 0.95));
}

@media (max-width: 600px) {
    .fleet__cat-media img { height: 220px; }
    .fleet__cat-badge {
        top: 12px;
        left: 12px;
        padding: 0.32rem 0.75rem;
        font-size: 0.7rem;
    }
}

/* ============================================================
   v27 — 선박 목록표 컬럼 너비·정렬 통일
   ============================================================ */

.fleet__table-wrap { max-width: none !important; width: 100% !important; }

.vessel-table {
    table-layout: fixed !important;  /* 컬럼 폭을 명시값으로 강제 */
    width: 100% !important;
}

/* 컬럼 폭 (총합 100%) */
.vessel-table th:nth-child(1), .vessel-table td:nth-child(1) { width: 16%; }  /* 선박명 */
.vessel-table th:nth-child(2), .vessel-table td:nth-child(2) { width: 22%; }  /* 선주사 */
.vessel-table th:nth-child(3), .vessel-table td:nth-child(3) { width: 9%; }   /* 선종 */
.vessel-table th:nth-child(4), .vessel-table td:nth-child(4) { width: 11%; }  /* 국적 */
.vessel-table th:nth-child(5), .vessel-table td:nth-child(5) { width: 17%; }  /* DWT */
.vessel-table th:nth-child(6), .vessel-table td:nth-child(6) { width: 14%; }  /* 건조년월 */
.vessel-table th:nth-child(7), .vessel-table td:nth-child(7) { width: 11%; }  /* 선급 */

/* 정렬 — 모든 컬럼 가운데 정렬로 통일 */
.vessel-table th,
.vessel-table td {
    text-align: center !important;
}
.vessel-table th:nth-child(5), .vessel-table td:nth-child(5) {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}
/* 국기 + 국가명 셀 가운데 정렬 */
.flag-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
}
.flag-icon {
    width: 24px;
    height: 18px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(15, 36, 41, 0.08);
    display: inline-block;
    vertical-align: middle;
}

/* 셀 내부 패딩 일관성 */
.vessel-table th, .vessel-table td {
    padding-top: 0.95rem !important;
    padding-bottom: 0.95rem !important;
    vertical-align: middle !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 선박명·선주사 — 굵기 톤 분리 */
.vessel-table td:nth-child(1) strong {
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.005em;
}
.vessel-table td:nth-child(2) {
    color: var(--gray);
    font-weight: 500;
}

/* 선종 뱃지 셀 가운데 정렬 */
.vessel-table td:nth-child(3) .type-badge {
    margin: 0 auto;
}

/* 국적·선급 — 모노 폰트로 코드 강조 */
.vessel-table td:nth-child(4),
.vessel-table td:nth-child(7) {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--ink);
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* DWT — 모노 폰트 + 토글 색조 */
.vessel-table td:nth-child(5) {
    font-family: var(--font-mono);
    font-size: 0.88rem;
    color: var(--ink);
    font-weight: 600;
}

/* 건조년월 — 회색 톤 */
.vessel-table td:nth-child(6) {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--gray);
}

/* 모바일 — 폭 늘려 가로 스크롤 */
@media (max-width: 900px) {
    .vessel-table { min-width: 760px; }
    .vessel-table th, .vessel-table td {
        padding-left: 0.9rem !important;
        padding-right: 0.9rem !important;
    }
}