/* ============================================================
   FARMKO GLS — 리디자인 시안 (Sailing Board)
   컨셉: 브로슈어가 아니라 '운영 문서' — 출항 안내판 + 선적 서류
   ============================================================ */

:root{
  --harbor:#0F1E26;      /* 한밤 부두 먹색 — 출항 보드·문의 밴드 */
  --harbor-hi:#1D3A44;   /* 어두운 면 위의 괘선 */
  --paper:#EFF1EF;       /* 페이지 바탕 — 차가운 서류 종이 */
  --panel:#E2E6E3;       /* 스펙표·보조 영역 */
  --ink:#14201F;         /* 본문 */
  --steel:#5A6768;       /* 보조 텍스트·괘선 글자 */
  --line:#C9D1CC;        /* 1px 괘선 */
  --mark:#C82A31;        /* 로고 실측색 (farmko-mark.png 도미넌트) */
  --mark-dark:#8E1A20;
  --clear:#0F6E4F;       /* 부킹 가능 (기능색) */
  --clear-on-dark:#5FD3A8;
  --maxw:1180px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans KR','Pretendard','Apple SD Gothic Neo',system-ui,sans-serif;
  font-size:16.5px;
  line-height:1.75;
  font-weight:400;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  word-break:keep-all;      /* 한글이 단어 중간에서 끊기지 않게 */
  overflow-wrap:break-word;
}

p,li,figcaption{text-wrap:pretty}   /* 마지막 줄에 한 단어만 남지 않게 */

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

:focus-visible{outline:2px solid var(--mark);outline-offset:3px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}

/* 숫자 — 전화·사업자번호는 본문 서체의 tabular 숫자로. 고정폭 서체는 쓰지 않는다. */
.num{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1;letter-spacing:-.01em}
/* 고정폭은 자릿수가 세로로 맞아야 읽히는 곳에만 — 출항 보드 시각, 항로 T/T */
.mono{font-family:'IBM Plex Mono','SFMono-Regular',Menlo,monospace;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
/* 표시용 수치: 쉼표·마침표가 들어가는 큰 숫자는 모노의 고정폭이 벌어져 보이므로 본문 서체의 tabular 숫자를 쓴다 */
.fig{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1;letter-spacing:-.025em}

.band{border-top:1px solid var(--line)}
.band-pad{padding:86px 0}

.h-sec{font-size:clamp(1.55rem,2.6vw,2.05rem);line-height:1.3;font-weight:700;letter-spacing:-.025em;margin:0 0 14px}
.sec-note{max-width:60ch;color:var(--steel);margin:0 0 44px;font-size:15.5px}

/* ── 헤더 ───────────────────────────────────────────── */
.hd{position:sticky;top:0;z-index:50;background:rgba(239,241,239,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.hd-in{display:flex;align-items:center;gap:32px;height:74px}
.brand{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.brand img{width:31px;height:31px}
.brand-txt{display:flex;flex-direction:column;line-height:1.15}
.brand-en{font-weight:700;font-size:16.5px;letter-spacing:-.02em}
.brand-ko{font-size:11.5px;color:var(--steel);letter-spacing:.02em}
.hd-nav{display:flex;gap:26px;margin-left:8px;font-size:15px;font-weight:500}
.hd-nav a{padding:6px 0;border-bottom:2px solid transparent}
.hd-nav a:hover{border-bottom-color:var(--mark)}
/* E-Service 메뉴 — FES 마크 상시 노출 */
.nav-es{display:inline-flex;align-items:center;gap:6px}
.nav-fes{width:17px;height:17px;flex-shrink:0;transition:transform .2s ease}
.nav-es:hover .nav-fes{transform:translateY(-1px)}
.hd-act{margin-left:auto;display:flex;align-items:center;gap:16px}
.lang{display:flex;font-size:12.5px;font-weight:600;color:var(--steel)}
.lang button{background:none;border:0;padding:4px 7px;font:inherit;color:inherit;cursor:pointer}
.lang button.active{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.hd-tel{font-size:14.5px;font-weight:600}
.hd-tel span{color:var(--steel);font-weight:400;margin-right:6px}
/* 모바일 메뉴 — 1020px 이하에서만 노출 */
.mnav{display:none;position:relative}
.mnav summary{list-style:none;cursor:pointer;font-size:14px;font-weight:600;padding:9px 14px;border:1px solid var(--line);border-radius:2px}
.mnav summary::-webkit-details-marker{display:none}
.mnav[open] summary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.mnav-panel{position:absolute;right:0;top:calc(100% + 10px);min-width:208px;background:var(--paper);border:1px solid var(--line);border-radius:2px;display:flex;flex-direction:column;box-shadow:0 12px 28px rgba(15,30,38,.14)}
.mnav-panel a{padding:13px 18px;font-size:15px;font-weight:500;border-bottom:1px solid var(--line)}
.mnav-panel a:last-child{border-bottom:0}
.mnav-panel a:hover{background:var(--panel)}
.mnav-tel{color:var(--mark);font-weight:600}

/* ── 버튼 ───────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--mark);color:#fff;font-weight:600;font-size:15.5px;padding:15px 26px;border-radius:2px;border:1px solid var(--mark);transition:background .15s}
.btn:hover{background:var(--mark-dark);border-color:var(--mark-dark)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{background:var(--panel);border-color:var(--steel)}
.tlink{font-weight:600;font-size:15.5px;border-bottom:1px solid var(--line);padding-bottom:2px}
.tlink:hover{border-bottom-color:var(--mark);color:var(--mark)}

/* ── 히어로 ─────────────────────────────────────────── */
.hero{padding:76px 0 66px}
.hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:54px;align-items:start}
.hero h1{font-size:clamp(2.1rem,4.4vw,3.15rem);line-height:1.2;letter-spacing:-.04em;font-weight:700;margin:0 0 20px}
.hero-lead{max-width:46ch;color:#36423F;margin:0 0 34px;font-size:16.5px}
.hero-cta{display:flex;align-items:center;gap:22px;margin-top:30px;flex-wrap:wrap}

/* 출항 보드 — 이 페이지에서 유일하게 대담한 요소 */
/* 면은 각지게(0), 조작 요소만 2px — 라운딩이 위계를 나타내게 한다 */
.board{background:var(--harbor);color:#E7EDEA;overflow:hidden}
.board-hd{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:16px 22px;border-bottom:1px solid var(--harbor-hi)}
.board-ttl{font-size:14px;font-weight:600;letter-spacing:.01em}
.board-src{font-size:12px;color:#8FA3A0}
.board-row{display:grid;grid-template-columns:minmax(0,1fr) 112px 148px 66px;gap:14px;align-items:center;padding:17px 22px;border-bottom:1px solid var(--harbor-hi)}
.board-row:last-child{border-bottom:0}
.bv{font-size:15.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bvy{display:block;font-size:12px;color:#8FA3A0;font-weight:400;margin-top:1px}
.betd{font-size:19px;font-weight:600}
.betd small{display:block;font-size:11.5px;color:#8FA3A0;font-weight:400;letter-spacing:0}
.bdest{font-size:13.5px;color:#C2CFCB}
.bdest b{font-weight:600;color:#E7EDEA}
.bst{font-size:12.5px;font-weight:600;text-align:right}
.bst.ok{color:var(--clear-on-dark)}
.bst.no{color:#8FA3A0}
.board-ft{padding:13px 22px;font-size:12.5px;color:#8FA3A0;background:#0B1820}
.board-ft b{color:#C2CFCB;font-weight:600}

@media (prefers-reduced-motion:no-preference){
  .board-row{animation:rowin .5s cubic-bezier(.2,.75,.3,1) both}
  .board-row:nth-child(2){animation-delay:.08s}
  .board-row:nth-child(3){animation-delay:.16s}
  .board-row:nth-child(4){animation-delay:.24s}
}
@keyframes rowin{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}

.shot{border:1px solid var(--line);overflow:hidden;background:var(--panel)}
.shot img{width:100%;height:468px;object-fit:cover}
.shot figcaption{padding:12px 15px;font-size:12.5px;color:var(--steel);border-top:1px solid var(--line);background:var(--paper)}

/* ── 숫자 스트립 ─────────────────────────────────────── */
.facts{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fact{padding:26px 22px;border-left:1px solid var(--line)}
.fact:first-child{border-left:0;padding-left:0}
.fact-n{font-size:25px;font-weight:600;line-height:1.15;display:block}
.fact-n em{font-style:normal;font-size:15px;font-weight:500;margin-left:2px}
.fact-l{font-size:12.5px;color:var(--steel);margin-top:5px;display:block;line-height:1.5}

/* ── 2단 서술 ───────────────────────────────────────── */
.two{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:start}
.two p{max-width:58ch}
.vision{padding-top:4px}
.vision h3{font-size:14px;font-weight:600;margin:0 0 18px;letter-spacing:-.01em;color:var(--steel)}
.vision ul{list-style:none;margin:0;padding:0}
.vision li{position:relative;padding:0 0 15px 23px;font-size:15px;color:#36423F;line-height:1.7}
.vision li:last-child{padding-bottom:0}
/* 마커 = 로고(12갈래 별)의 꼭짓점 하나. 불릿이 어차피 필요한 자리에만 쓴다. */
.vision li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:12px;
  background:var(--mark);clip-path:polygon(50% 0%,100% 38%,50% 100%,0% 38%)}

/* ── 사업 범위 (정의형 목록) ─────────────────────────────
   서술이지 데이터가 아니므로 괘선을 쓰지 않는다. 2단 그리드의
   정렬과 수직 여백만으로 다섯 항목을 가른다. */
.defs{padding-top:4px}
.def{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:40px;padding:38px 0 0}
.def:first-child{padding-top:0}
.def-t{font-size:22px;font-weight:700;letter-spacing:-.03em;margin:0;line-height:1.3}
.def-t span{display:block;font-size:12.5px;font-weight:400;color:var(--steel);letter-spacing:0;margin-top:5px}
.def-d{margin:0;color:#36423F;max-width:56ch}
.tags{margin-top:11px;display:flex;flex-wrap:wrap;gap:7px}
.tag{font-size:12px;color:var(--steel);border:1px solid var(--line);border-radius:2px;padding:3px 9px;line-height:1.5}

/* ── 스펙표 ─────────────────────────────────────────────
   ★ 괘선 규칙: 2px 먹선 + 1px 괘선은 검증된 운영 데이터(실측 제원,
   PLISM 실데이터)에만 쓴다. 서술형 섹션에 쓰면 줄이 정보를 잃고
   장식이 된다. 아래 .spec / .lanes 둘만 해당. */
.spec{width:100%;border-collapse:collapse;border-top:2px solid var(--ink)}
.spec th,.spec td{text-align:left;padding:14px 0;border-bottom:1px solid var(--line);vertical-align:top}
.spec th{width:158px;font-weight:500;color:var(--steel);font-size:14.5px}
.spec td{font-size:15.5px}
.spec td b{font-weight:600}
.spec-d{color:#36423F;margin-left:.75em}

/* ── 항로 표 ────────────────────────────────────────── */
.lanes{width:100%;border-collapse:collapse;font-size:15px;border-top:2px solid var(--ink)}
.lanes thead th{text-align:left;font-size:12.5px;font-weight:600;color:var(--steel);padding:12px 16px 12px 0;border-bottom:1px solid var(--line);white-space:nowrap}
.lanes td{padding:18px 16px 18px 0;border-bottom:1px solid var(--line);vertical-align:top}
.lanes .lane-n{font-weight:700;white-space:nowrap}
.lanes .lane-n span{display:block;font-size:12.5px;font-weight:400;color:var(--steel)}
.lanes .lane-i{color:#36423F;font-size:14.5px;line-height:1.7}
.lanes .lane-d{white-space:nowrap;font-size:15px;font-weight:600}
.lanes .lane-d.none{color:var(--steel);font-weight:400}
.lane-note{margin-top:18px;font-size:13px;color:var(--steel)}

/* ── 소식 ───────────────────────────────────────────── */
.news{border-top:1px solid var(--line)}
.news-row{display:grid;grid-template-columns:104px 82px minmax(0,1fr);gap:26px;padding:22px 0;border-bottom:1px solid var(--line);align-items:baseline}
.news-d{font-size:13.5px;color:var(--steel)}
.news-k{font-size:12.5px;color:var(--mark);font-weight:600}
.news-t{font-size:17px;font-weight:600;letter-spacing:-.02em;margin:0}
.news-s{font-size:14.5px;color:var(--steel);margin:4px 0 0;max-width:62ch}

/* ── 문의 밴드 ──────────────────────────────────────── */
.contact{background:var(--harbor);color:#E7EDEA;padding:82px 0}
.contact h2{font-size:clamp(1.55rem,2.6vw,2.05rem);font-weight:700;letter-spacing:-.025em;margin:0 0 12px}
.contact .lead{color:#A9BAB6;max-width:52ch;margin:0 0 48px}
.c-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:start}
.sites{border-top:1px solid var(--harbor-hi)}
.site{padding:20px 0;border-bottom:1px solid var(--harbor-hi)}
.site-n{font-size:14.5px;font-weight:600;margin:0 0 4px}
.site-a{font-size:14px;color:#A9BAB6;margin:0}
.site-c{font-size:14px;color:#C2CFCB;margin:6px 0 0}
.site-c a{border-bottom:1px solid #2C4A52}
.site-c a:hover{border-bottom-color:var(--clear-on-dark);color:var(--clear-on-dark)}
.c-card{border:1px solid var(--harbor-hi);padding:26px}
.c-card h3{margin:0 0 8px;font-size:16px;font-weight:600}
.c-card p{margin:0 0 20px;font-size:14px;color:#A9BAB6}
.c-line{display:block;font-size:20px;font-weight:600;margin-bottom:6px}
.c-mail{font-size:15px;color:#C2CFCB;border-bottom:1px solid #2C4A52}
.c-hours{margin-top:20px;padding-top:16px;border-top:1px solid var(--harbor-hi);font-size:13.5px;color:#8FA3A0}
.c-card .btn{margin-top:22px;width:100%}

/* ── 푸터 ───────────────────────────────────────────── */
.ft{background:#0B1820;color:#8FA3A0;padding:52px 0 40px;font-size:13.5px}
.ft-grid{display:grid;grid-template-columns:minmax(0,5fr) repeat(3,minmax(0,2.3fr));gap:36px}
.ft h4{color:#C2CFCB;font-size:13px;font-weight:600;margin:0 0 12px}
.ft ul{list-style:none;margin:0;padding:0}
.ft li{margin-bottom:7px}
.ft a:hover{color:#E7EDEA}
.ft-corp{line-height:1.85}
.ft-corp strong{color:#C2CFCB;display:block;font-size:14.5px;margin-bottom:8px;font-weight:600}
.ft-bot{margin-top:40px;padding-top:20px;border-top:1px solid #1D3A44;display:flex;gap:20px;flex-wrap:wrap;justify-content:space-between;font-size:12.5px}
.ft-bot nav{display:flex;gap:18px}

/* ── 반응형 ─────────────────────────────────────────── */
@media (max-width:1020px){
  .hero-grid,.two,.c-grid{grid-template-columns:1fr;gap:40px}
  .shot img{height:280px}
  .facts{grid-template-columns:repeat(3,1fr)}
  .fact{border-left:1px solid var(--line);border-top:1px solid var(--line);padding-left:22px}
  .fact:nth-child(3n+1){border-left:0;padding-left:0}
  .fact:nth-child(-n+3){border-top:0}
  .hd-nav{display:none}
  .mnav{display:block}
  .ft-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  body{font-size:16px}
  .wrap{padding:0 18px}
  .band-pad{padding:58px 0}
  .hero{padding:48px 0 44px}
  .facts{grid-template-columns:repeat(2,1fr)}
  .fact:nth-child(3n+1){border-left:1px solid var(--line);padding-left:22px}
  .fact:nth-child(odd){border-left:0;padding-left:0}
  .fact:nth-child(-n+2){border-top:0}
  .fact:nth-child(3){border-top:1px solid var(--line)}
  .board-hd{flex-direction:column;align-items:flex-start;gap:3px}
  .board-row{grid-template-columns:minmax(0,1fr) 96px;row-gap:9px;padding:15px 16px}
  .board-hd,.board-ft{padding-left:16px;padding-right:16px}
  .bdest{grid-column:1;font-size:13px}
  .bst{grid-column:2;text-align:right}
  .def{grid-template-columns:1fr;gap:10px;padding:20px 0}
  .news-row{grid-template-columns:1fr;gap:4px;padding:18px 0}
  .news-k{order:-1}
  .spec th{width:112px;font-size:13.5px}
  .lanes{font-size:14px;display:block;overflow-x:auto}
  .hd-tel{display:none}
  .ft-grid{grid-template-columns:1fr}
  .hero-cta .btn{flex:1 1 100%}
}