/* =========================================================
   하위 페이지 공통 컴포넌트 — 토큰은 site.css 의 :root 사용
   ========================================================= */
.skip{position:absolute;left:var(--gutter);top:-60px;z-index:100;background:var(--c-ink);color:#fff;padding:var(--sp-3) var(--sp-5);border-radius:var(--r-pill);font-size:var(--fs-sm);font-weight:700}
.skip:focus{top:var(--sp-3)}
.hd__cta{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--sp-5);border-radius:var(--r-pill);background:#fff;color:var(--c-navy);font-size:var(--fs-sm);font-weight:700;margin-right:var(--sp-2);transition:background var(--dur-1),color var(--dur-1)}
.hd__cta:hover,.hd__cta.active{background:var(--c-blue);color:#fff}
.hd.solid .hd__cta{background:var(--c-navy);color:#fff}
.hd.solid .hd__cta:hover{background:var(--c-blue)}
.ft__cta{display:inline-flex;align-items:center;gap:var(--sp-3);align-self:flex-start;min-height:48px;padding:0 var(--sp-6);border-radius:var(--r-pill);background:#fff;color:var(--c-navy);font-size:var(--fs-sm);font-weight:700;transition:background var(--dur-1),color var(--dur-1)}
.ft__cta:hover{background:var(--c-blue);color:#fff}
.ft__cta i{font-style:normal}
.card__link{color:inherit}
.card__link:hover{color:var(--c-blue)}
.ct__side .link-arrow{align-self:flex-start}

/* 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:52px;padding:0 var(--sp-7);border-radius:var(--r-pill);background:var(--c-ink);color:#fff;font-size:var(--fs-body);font-weight:700;border:0;cursor:pointer;transition:background var(--dur-1),color var(--dur-1)}
.btn:hover{background:var(--c-blue)}
.btn[disabled]{opacity:.5;cursor:default}
.btn--line{background:none;color:var(--c-ink);border:1px solid var(--c-line-strong)}
.btn--line:hover{background:var(--c-ink);color:#fff}

/* 서브 히어로 */
.sub-hero{position:relative;overflow:hidden;background:var(--c-navy);color:#fff;min-height:clamp(420px,56svh,560px);display:flex;align-items:flex-end;padding-block:calc(var(--hd-h) + var(--sp-9)) var(--sp-12)}
.sub-hero__bg{position:absolute;inset:0;background:radial-gradient(90% 90% at 85% 10%,#5FA83B 0%,rgba(95,168,59,0) 60%),linear-gradient(160deg,#11502F,#0A2E1D);background-size:cover;background-position:center}
.motion .sub-hero__bg{animation:subZoom 1.6s var(--ease-out) both}
@keyframes subZoom{from{transform:scale(1.08)}}
.sub-hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,46,29,.92) 0%,rgba(10,46,29,.55) 50%,rgba(10,46,29,.35) 100%)}
.sub-hero .wrap{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:var(--head-inner)}
.sub-hero .eyebrow{color:rgba(255,255,255,.72)}
.sub-hero .t-body{color:rgba(255,255,255,.82);max-width:35em}
.crumb{display:flex;flex-wrap:wrap;gap:var(--sp-2);font-size:var(--fs-xs);color:rgba(255,255,255,.65)}
.crumb a{display:inline-block;padding:12px 8px;margin:-12px -8px}
.crumb a:hover{color:#fff;text-decoration:underline}
.crumb [aria-current]{color:#fff}

/* 페이지 안 탭 (앵커 이동) */
.tabs{position:sticky;top:0;z-index:30;background:var(--c-white);border-bottom:1px solid var(--c-line)}
.tabs ul{display:flex;gap:var(--sp-1);overflow-x:auto;scrollbar-width:none;list-style:none;margin:0;padding:0}
.tabs ul::-webkit-scrollbar{display:none}
.tabs a{display:flex;align-items:center;min-height:56px;padding:0 var(--sp-4);font-size:var(--fs-sm);font-weight:600;color:var(--c-sub);white-space:nowrap;border-bottom:2px solid transparent;transition:color var(--dur-1),border-color var(--dur-1)}
.tabs a:hover{color:var(--c-ink)}
.tabs a.active{color:var(--c-ink);border-color:var(--c-ink)}
main [id]{scroll-margin-top:72px}
.tabs ul.more{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
@media (min-width:768px){.tabs ul{margin-inline-start:calc(var(--sp-4) * -1)}}
@media (max-width:767px){
  .tabs .wrap{padding-inline:0}
  .tabs ul{gap:0;padding-inline:calc(var(--gutter) - 8px);scroll-padding-inline:var(--gutter)}
  .tabs a{padding-inline:8px}
}

/* 2단 (텍스트 + 이미지) */
.split{display:grid;grid-template-columns:5fr 7fr;gap:var(--sp-13);align-items:center}
.split--rev{grid-template-columns:7fr 5fr}
.split--rev .split__media{order:-1}
.split__text{display:flex;flex-direction:column;align-items:flex-start;gap:var(--head-inner)}
.media{position:relative;aspect-ratio:4/3;max-width:100%;border-radius:var(--r-panel);overflow:hidden;background:var(--c-soft) center/cover no-repeat}
.motion .media[data-reveal]{transform:translateY(40px) scale(.97)}
.motion .media[data-reveal].in{transform:none}
.stack{display:flex;flex-direction:column;gap:clamp(96px,11vw,160px)}
.bullets{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--sp-2)}
.bullets li{position:relative;padding-left:var(--sp-5);font-size:var(--fs-body);color:var(--c-sub)}
.bullets li::before{content:"";position:absolute;left:0;top:.75em;width:6px;height:6px;border-radius:50%;background:var(--c-blue)}

/* 박스 그리드 */
.grid{display:grid;gap:var(--sp-6)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.box{background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-card);padding:var(--sp-8) var(--sp-7);display:flex;flex-direction:column;gap:var(--sp-3)}
.sec--soft .box{border-color:transparent}
.box .card__ico{margin-bottom:var(--sp-3);background:var(--c-soft)}

/* 정보 표 */
.spec{margin:0;border-top:2px solid var(--c-ink);width:100%}
.spec div{display:grid;grid-template-columns:140px 1fr;gap:var(--sp-5);padding:var(--sp-4) 0;border-bottom:1px solid var(--c-line)}
.spec dt{font-size:var(--fs-sm);font-weight:700;color:var(--c-ink)}
.spec dd{margin:0;font-size:var(--fs-sm);color:var(--c-sub);line-height:1.7}

/* 처리 과정 (실제 순서) */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-4);counter-reset:step;list-style:none;padding:0;margin:0}
.steps li{position:relative;padding:var(--sp-7) var(--sp-5) var(--sp-6);border-radius:var(--r-card);background:var(--c-white);display:flex;flex-direction:column;gap:var(--sp-2);counter-increment:step}
.steps li::before{content:counter(step,decimal-leading-zero);font-size:var(--fs-2xs);font-weight:700;letter-spacing:.06em;color:var(--c-blue)}
.steps li:not(:last-child)::after{content:"→";position:absolute;right:0;top:50%;transform:translate(calc(50% + var(--sp-2)),-50%);color:var(--c-mute);font-size:var(--fs-sm)}
.steps b{font-size:var(--fs-h5);font-weight:800;letter-spacing:var(--ls-title)}
.sec-head + .steps,.sec-head + .jobs{margin-top:var(--head-gap)}

/* 연혁 */
.timeline{list-style:none;padding:0;margin:0;border-left:2px solid var(--c-line);display:flex;flex-direction:column;gap:var(--sp-9)}
.timeline > li{position:relative;padding-left:var(--sp-8);display:grid;grid-template-columns:120px 1fr;gap:var(--sp-6);align-items:baseline}
.timeline > li::before{content:"";position:absolute;left:-7px;top:10px;width:12px;height:12px;border-radius:50%;background:var(--c-white);border:2px solid var(--c-blue)}
.timeline time{font-size:var(--fs-h4);font-weight:800;letter-spacing:var(--ls-title);font-variant-numeric:tabular-nums}
.timeline ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--sp-2)}
.timeline ul li{font-size:var(--fs-body);color:var(--c-sub)}

/* 필터 줄 */
.filter-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--sp-4)}
.field-search{position:relative;flex:0 1 320px}
.field-search input{width:100%;height:48px;border-radius:var(--r-pill);border:1px solid var(--c-line-strong);padding:0 var(--sp-5) 0 var(--sp-9);font:inherit;font-size:16px;color:var(--c-ink);background:var(--c-white)}
.field-search input:focus{outline:2px solid var(--c-blue);outline-offset:1px;border-color:transparent}
.field-search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;width:18px;height:18px;cursor:pointer;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6A61' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center/14px no-repeat}
.field-search svg{position:absolute;left:var(--sp-5);top:50%;transform:translateY(-50%);color:var(--c-mute)}
.result-count{margin-top:var(--sp-6);font-size:var(--fs-sm);color:var(--c-sub)}
.result-count b{color:var(--c-ink)}

/* 품목 그리드 */
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-5);margin-top:var(--sp-5)}
.prod-grid .prod{flex:none;scroll-snap-align:none}
.prod-grid .prod .t-xs{margin-bottom:var(--sp-3)}
.prod__temp{display:inline-flex;align-self:flex-start;margin-top:var(--sp-3);font-size:var(--fs-2xs);font-weight:600;padding:2px var(--sp-2);border-radius:var(--r-pill);background:var(--c-soft);color:var(--c-sub)}
.prod-grid .prod__temp{margin-top:auto}
.empty{grid-column:1/-1;padding:var(--sp-12) var(--sp-5);text-align:center;border-radius:var(--r-card);background:var(--c-white);color:var(--c-sub)}

/* 페이지 번호 */
.pagination{display:flex;justify-content:center;align-items:center;gap:var(--sp-2);margin-top:var(--sp-11)}
.pagination a,.pagination span{display:grid;place-items:center;min-width:44px;height:44px;padding:0 var(--sp-2);border-radius:var(--r-pill);font-size:var(--fs-sm);font-weight:600;color:var(--c-sub);font-variant-numeric:tabular-nums;transition:background var(--dur-1),color var(--dur-1)}
.pagination a:hover{background:var(--c-soft);color:var(--c-ink)}
.pagination [aria-current="page"]{background:var(--c-ink);color:#fff}
.pagination .is-disabled{opacity:.35}
.pagination:empty{display:none}

/* 뉴스 목록 */
.news-list{list-style:none;padding:0;margin:var(--sp-7) 0 0;border-top:2px solid var(--c-ink)}
.news-list a{display:grid;grid-template-columns:140px 1fr 120px 24px;align-items:center;gap:var(--sp-6);padding:var(--sp-6) var(--sp-2);border-bottom:1px solid var(--c-line);transition:background var(--dur-1)}
.news-list a:hover{background:var(--c-soft)}
.news-list .t-h5{transition:color var(--dur-1)}
.news-list a:hover .t-h5{color:var(--c-blue)}
.news-list time{font-size:var(--fs-sm);color:var(--c-mute);font-variant-numeric:tabular-nums;text-align:right}
.news-list i{font-style:normal;color:var(--c-blue);transition:transform var(--dur-1)}
.news-list a:hover i{transform:translate(3px,-3px)}

/* 기사 */
.article{max-width:760px;margin-inline:auto}
.article__head{display:flex;flex-direction:column;gap:var(--sp-4);padding-bottom:var(--sp-8);border-bottom:1px solid var(--c-line)}
.article__img{margin-top:var(--sp-9);aspect-ratio:16/9;max-width:100%;border-radius:var(--r-panel);background:var(--c-soft) center/cover no-repeat}
.article__body{display:flex;flex-direction:column;gap:var(--sp-5);margin-top:var(--sp-9);font-size:var(--fs-body);line-height:1.9;color:var(--c-sub)}
.article__nav{margin-top:var(--sp-12);border-top:2px solid var(--c-ink)}
.article__nav a{display:grid;grid-template-columns:80px 1fr;gap:var(--sp-5);padding:var(--sp-5) var(--sp-2);border-bottom:1px solid var(--c-line);font-size:var(--fs-sm)}
.article__nav a:hover{background:var(--c-soft)}
.article__nav a > span{color:var(--c-mute)}
.article__list{display:flex;justify-content:center;margin-top:var(--sp-9)}

/* 사이트 페이지 이동 (이전/다음) */
.pager{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--c-line);padding-inline:max(0px,calc((100% - var(--wrap)) / 2 - var(--gutter)))}
.pager a{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-10) var(--gutter);transition:background var(--dur-1)}
.pager a:hover{background:var(--c-soft)}
.pager a + a{border-left:1px solid var(--c-line);text-align:right;align-items:flex-end}
.pager a:only-child{grid-column:1/-1}
.pager .t-h3{display:flex;align-items:center;gap:var(--sp-3)}
.pager a:hover .t-h3{color:var(--c-blue)}

/* 폼 */
.form-wrap{display:grid;grid-template-columns:7fr 4fr;gap:var(--sp-12);align-items:start}
.form{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6) var(--sp-5)}
.field{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0}
.field--full{grid-column:1/-1}
.field > label{font-size:var(--fs-sm);font-weight:700;color:var(--c-ink)}
.field label em{font-style:normal;color:var(--c-blue);margin-left:2px}
.field input,.field select,.field textarea{width:100%;min-height:52px;border:1px solid var(--c-line-strong);border-radius:var(--r-thumb);padding:var(--sp-3) var(--sp-4);font:inherit;font-size:16px;color:var(--c-ink);background:var(--c-white)}
.field textarea{min-height:180px;resize:vertical;line-height:1.7}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--c-blue);outline-offset:1px;border-color:transparent}
.field [aria-invalid="true"]{border-color:#D14343}
.field [aria-invalid="true"]:focus{outline-color:#D14343}
.field input,.field select,.field textarea,.agree input{scroll-margin-top:calc(var(--hd-h) + 48px)}
.field select{appearance:none;padding-right:44px;background:var(--c-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23555' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center/16px}
.field select:has(option[value=""]:checked){color:var(--c-mute)}
.field__err{font-size:var(--fs-xs);color:#B42318;min-height:1.2em}
.types{display:flex;flex-wrap:wrap;gap:var(--sp-2);border:0;padding:0;margin:0}
.types legend{font-size:var(--fs-sm);font-weight:700;color:var(--c-ink);margin-bottom:var(--sp-2);padding:0}
.types input{position:absolute;opacity:0;pointer-events:none}
.types label{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--sp-5);border-radius:var(--r-pill);border:1px solid var(--c-line-strong);font-size:var(--fs-sm);font-weight:600;color:var(--c-sub);cursor:pointer}
.types input:checked + label{background:var(--c-ink);border-color:var(--c-ink);color:#fff}
.types input:focus-visible + label{outline:2px solid var(--c-blue);outline-offset:2px}
.agree{display:flex;align-items:flex-start;gap:var(--sp-3);font-size:var(--fs-sm);color:var(--c-sub)}
.agree input{width:20px;height:20px;min-height:0;margin:2px 0 0;accent-color:var(--c-ink);flex:none}
.form__foot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-5)}
.form__status{font-size:var(--fs-sm);font-weight:600}
.form__status.ok{color:#1F7A4C}
.form__status.err{color:#B42318}
.aside{position:sticky;top:calc(var(--hd-h) + var(--sp-6));display:flex;flex-direction:column;gap:var(--sp-5);padding:var(--sp-8) var(--sp-7);border-radius:var(--r-card);background:var(--c-soft)}
.aside dl{margin:0;display:flex;flex-direction:column;gap:var(--sp-4)}
.aside dt{font-size:var(--fs-xs);font-weight:600;color:var(--c-mute);letter-spacing:.06em}
.aside dd{margin:2px 0 0;font-size:var(--fs-body);font-weight:700}

/* 예시 안내 */
.notice{padding:var(--sp-4) var(--sp-5);border-radius:var(--r-thumb);background:#FFF7E6;color:#7A4B00;font-size:var(--fs-sm);line-height:1.6}

/* 채용 공고 */
.jobs{list-style:none;padding:0;margin:0;border-top:2px solid var(--c-ink)}
.jobs li{display:grid;grid-template-columns:1fr 200px 90px;align-items:center;gap:var(--sp-5);padding:var(--sp-6) var(--sp-2);border-bottom:1px solid var(--c-line)}
.jobs .badge{justify-self:end;font-size:var(--fs-2xs);font-weight:700;padding:var(--sp-1) var(--sp-3);border-radius:var(--r-pill);background:var(--c-blue-tint);color:var(--c-blue)}
.jobs .badge--off{background:var(--c-white);color:var(--c-mute);box-shadow:inset 0 0 0 1px var(--c-line-strong)}

/* 404 */
.nf{min-height:70svh;display:flex;align-items:center;padding-top:var(--hd-h)}
.nf .wrap{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-6)}

@media (max-width:1023px){
  .split,.split--rev,.form-wrap{grid-template-columns:1fr;gap:var(--sp-9)}
  .split--rev .split__media{order:0}
  .grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}
  .prod-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr}
  .steps li::after{display:none}
  .aside{position:static}
}
/* 태블릿: 3개짜리 카드는 3열로 (2열이면 마지막 하나만 남음), 연락처 카드는 2열 */
@media (min-width:768px) and (max-width:1023px){
  .grid--3{grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}
  .grid--3 .box{padding:var(--sp-6) var(--sp-5)}
  .grid--3 .box .t-sm{text-wrap:balance}
  .aside dl{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5) var(--sp-7)}
}
/* 1024~1279: 정보 표 이름 칸을 줄여 값이 두 줄로 갈리지 않게 */
@media (min-width:1024px) and (max-width:1279px){
  .spec div{grid-template-columns:96px 1fr;gap:var(--sp-4)}
}
@media (max-width:767px){
  .hd__cta{display:none}
  .sub-hero{min-height:360px;padding-block:calc(var(--hd-h) + var(--sp-8)) var(--sp-9)}
  .grid--2,.grid--3,.grid--4,.form{grid-template-columns:1fr}
  .box{padding:var(--sp-6) var(--sp-5)}
  .prod-grid{grid-template-columns:repeat(2,1fr);gap:var(--sp-3)}
  .prod-grid .prod__pic{height:120px}
  .steps{grid-template-columns:1fr}
  .timeline > li{grid-template-columns:1fr;gap:var(--sp-2);padding-left:var(--sp-6)}
  .spec div{grid-template-columns:80px 1fr;gap:var(--sp-3)}
  .types{display:grid;grid-template-columns:1fr 1fr}
  .types label{justify-content:center}
  .news-list a{grid-template-columns:1fr;gap:var(--sp-2);padding:var(--sp-5) 0}
  .news-list time{text-align:left}
  .news-list i{display:none}
  .jobs li{grid-template-columns:1fr auto;gap:var(--sp-2)}
  .jobs li > span:nth-child(2){grid-row:2}
  .pager a{padding:var(--sp-7) var(--gutter)}
  .pager .t-h3{font-size:var(--fs-h5)}
  .field-search{flex-basis:100%}
  .stack{gap:var(--sp-12)}
}
@media (hover:none){
  .news-list a:hover,.pager a:hover,.article__nav a:hover{background:none}
  .article__nav a{padding-inline:0}
}

/* ===== 추가 인터랙션 ===== */
/* 카드 제목 링크가 카드 전체를 덮어 어디를 눌러도 이동 */
.card__link::after{content:"";position:absolute;inset:0;border-radius:inherit}
.card__link:focus-visible{outline:none}
.card:has(.card__link:focus-visible){outline:2px solid var(--c-blue);outline-offset:4px;border-radius:var(--r-thumb)}

/* 하위 페이지 사진: 가운데서 펼쳐지며 나타남 */
.motion .media[data-reveal]{clip-path:inset(12% 10% round var(--r-panel));transition:clip-path 1.1s var(--ease-out),opacity .6s var(--ease-out),transform 1.1s var(--ease-out)}
.motion .media[data-reveal].in{clip-path:inset(0 round var(--r-panel))}

/* 연혁: 스크롤에 따라 세로선이 채워짐 */
.timeline{position:relative}
.timeline::after{content:"";position:absolute;left:-2px;top:0;width:2px;height:100%;background:var(--c-blue);transform-origin:top;transform:scaleY(var(--tl,0))}
.timeline > li.passed::before{background:var(--c-blue)}

/* 옆으로 넘기는 목록의 진행 막대 (모바일) */
.swipe-bar{display:none}
@media (max-width:767px){
  .swipe-bar{display:block;position:relative;height:2px;margin-top:var(--sp-5);border-radius:2px;background:var(--c-line-strong);overflow:hidden}
  .swipe-bar i{position:absolute;top:0;bottom:0;left:0;width:var(--sw,30%);background:var(--c-ink);border-radius:2px;transform:translateX(var(--sx,0));transition:transform .15s linear}
}

/* ERP 바로가기 (헤더) */
.hd__erp{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 var(--sp-4);border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.45);color:inherit;font-size:var(--fs-sm);font-weight:700;letter-spacing:.02em;transition:background var(--dur-1),color var(--dur-1),border-color var(--dur-1)}
.hd__erp:hover{background:#fff;border-color:#fff;color:var(--c-navy)}
.hd.solid .hd__erp{border-color:var(--c-line-strong)}
.hd.solid .hd__erp:hover{background:var(--c-ink);border-color:var(--c-ink);color:#fff}
@media (max-width:767px){
  .hd__erp{padding:0 var(--sp-3)}
  .hd__erp svg{display:none}
}
@media (hover:none){
  .hd__erp:hover{background:none;border-color:rgba(255,255,255,.45);color:inherit}
  .hd.solid .hd__erp:hover{border-color:var(--c-line-strong);color:inherit}
}

/* 모바일 정리: 2단 블록은 항상 사진 → 글 순서 */
@media (max-width:1023px){
  .split .split__media{order:-1}
}
/* 헤더가 다시 나타나면 페이지 안 탭이 헤더 아래로 내려감 */
.tabs{transition:top 400ms var(--ease-out)}
.hd:not(.hide) ~ main .tabs{top:var(--hd-h)}
/* 오류가 없을 때는 오류 문구 자리를 비워 두지 않음 */
.field__err:empty{display:none}

/* 메인 배경 영상 */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--c-navy)}
.hero__pause .i-play{display:none}
.hero__pause[aria-pressed="true"] .i-pause{display:none}
.hero__pause[aria-pressed="true"] .i-play{display:block}

/* =========================================================
   전체 메뉴 — 데스크톱: 4단 펼침 / 모바일: 검색 + 접는 목록 + 하단 고정 버튼
   ========================================================= */
.menu{position:fixed;inset:0;z-index:45;background:var(--c-navy-deep);color:#fff;overflow:auto;overscroll-behavior:contain;padding-top:var(--hd-h)}
.menu__inner{max-width:calc(var(--wrap) + var(--gutter)*2);min-height:100%;margin-inline:auto;padding:var(--sp-9) var(--gutter) 0;display:flex;flex-direction:column}
.menu__search{display:none}
.menu__nav{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-8)}
.menu__head{display:flex;align-items:center;justify-content:space-between;margin:0 0 var(--sp-4)}
.menu__head a{color:#fff}
.menu__head a:hover{color:rgba(255,255,255,.75)}
.menu__toggle{display:none}
.menu__sub,.menu__links{display:flex;flex-direction:column}
.menu__sub a{display:flex;align-items:center;min-height:44px;font-size:var(--fs-body);line-height:1.4;color:rgba(255,255,255,.7);transition:color var(--dur-1),transform var(--dur-1)}
.menu__sub a:hover{color:#fff;transform:translateX(4px)}
.menu__sub a[aria-current="page"]{color:#fff;font-weight:700}
.menu__foot{margin-top:auto;padding-block:var(--sp-10) calc(var(--sp-8) + env(safe-area-inset-bottom,0px));display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-4);border-top:1px solid rgba(255,255,255,.12);margin-top:var(--sp-12)}
.menu__cta{display:flex;gap:var(--sp-2)}
.menu__btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:48px;padding:0 var(--sp-6);border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.35);color:#fff;font-size:var(--fs-sm);font-weight:700;transition:background var(--dur-1),color var(--dur-1),border-color var(--dur-1)}
.menu__btn:hover{background:#fff;border-color:#fff;color:var(--c-navy)}
.menu__btn--fill{background:#fff;border-color:#fff;color:var(--c-navy)}
.menu__btn--fill:hover{background:var(--c-blue);border-color:var(--c-blue);color:#fff}
.menu__info{font-size:var(--fs-xs);color:rgba(255,255,255,.5)}
.motion .menu:not([hidden]) .menu__group,.motion .menu:not([hidden]) .menu__search,.motion .menu:not([hidden]) .menu__foot{animation:menuIn var(--dur-2) var(--ease-out) both}
.motion .menu .menu__group:nth-child(2){animation-delay:50ms}
.motion .menu .menu__group:nth-child(3){animation-delay:100ms}
.motion .menu .menu__group:nth-child(4){animation-delay:150ms}
.motion .menu .menu__foot{animation-delay:200ms}

@media (max-width:1023px){
  .menu__nav{grid-template-columns:repeat(2,1fr)}
}

/* ---------- 모바일 ---------- */
@media (max-width:767px){
  /* 헤더에는 로고와 메뉴 버튼만 */
  .hd__btns .hd__erp,.hd__btns #searchOpen{display:none}

  .menu{display:flex;flex-direction:column;padding-top:var(--hd-h);overflow:hidden}
  .menu[hidden]{display:none}
  .menu__inner{flex:1;min-height:0;width:100%;padding:0;overflow:hidden}
  .menu__search{display:flex;align-items:center;gap:var(--sp-3);flex:none;margin:var(--sp-5) var(--gutter) var(--sp-2);min-height:52px;padding:0 var(--sp-5);border-radius:var(--r-thumb);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.6);font-size:var(--fs-body);text-align:left}
  .menu__search:active{background:rgba(255,255,255,.14)}
  .menu__nav{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:block;padding:0 var(--gutter)}
  .menu__group{border-bottom:1px solid rgba(255,255,255,.1)}
  .menu__head{margin:0;min-height:64px;font-size:var(--fs-h4);gap:var(--sp-3)}
  .menu__head a{flex:1;display:flex;align-items:center;min-height:64px}
  .menu__toggle{display:grid;place-items:center;flex:none;width:44px;height:44px;margin-right:calc(var(--sp-3) * -1);border-radius:50%;color:rgba(255,255,255,.7)}
  .menu__toggle svg{transition:transform var(--dur-1) var(--ease-out)}
  .menu__toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
  .menu__sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-1) var(--ease-out)}
  .menu__links{min-height:0;overflow:hidden}
  .menu__group.open .menu__sub{grid-template-rows:1fr}
  .menu__sub a{min-height:48px;padding-left:var(--sp-4);font-size:var(--fs-body)}
  .menu__sub a:last-child{margin-bottom:var(--sp-4)}
  .menu__sub a:hover{transform:none}
  .menu__toggle,.menu__head a,.menu__sub a{-webkit-tap-highlight-color:transparent}
  .menu__foot{flex:none;margin:0;padding:var(--sp-4) var(--gutter) calc(var(--sp-4) + env(safe-area-inset-bottom,0px));flex-direction:column;align-items:stretch;gap:var(--sp-3);background:var(--c-navy-deep)}
  .menu__cta{display:grid;grid-template-columns:1fr 1fr}
  .menu__btn{padding:0 var(--sp-3)}
  .menu__info{text-align:center}
}
@media (max-width:767px){.menu__nav{scrollbar-width:none}.menu__nav::-webkit-scrollbar{display:none}.menu__nav :focus-visible{outline-offset:-2px}}

/* 화면 크기별 문구: 휴대폰에서만 짧은 문구로 (보이지 않는 쪽은 화면 읽기에서도 빠짐) */
.copy-mob{display:none}
@media (max-width:767px){
  .copy-desk{display:none}
  .copy-mob{display:inline}
}
/* 뉴스 제목: 넓은 화면에서 마지막 단어 하나만 넘어가지 않도록 폭 제한 */
.article__head .t-h2{max-width:14em}

/* =========================================================
   온도 패널: 화면 고정 + 스크롤에 따라 냉동 → 냉장 → 상온 차례로 강조
   ========================================================= */
.tp-track{position:relative;height:240svh}
.tp-pin{position:sticky;top:0;height:100svh;display:flex;align-items:center;padding-block:var(--hd-h)}
.tp-pin > .temp{width:100%}
.tp-step{display:none}
.tp-track.scrub .tp-step{display:flex;align-items:center;gap:var(--sp-4);margin-top:var(--sp-3);font-size:var(--fs-sm);color:rgba(255,255,255,.7);font-variant-numeric:tabular-nums}
.tp-step__n b{color:#fff;font-weight:700}
.tp-step__name{font-weight:700;color:#fff;min-width:3em}
.tp-step__bar{position:relative;flex:1;max-width:160px;height:2px;border-radius:2px;background:rgba(255,255,255,.2);overflow:hidden}
.tp-step__bar i{position:absolute;inset:0;background:#fff;transform-origin:left;transform:scaleX(0)}
/* 스크롤 제어 중에는 CSS 등장 효과 대신 스크립트 값 사용 */
.tp-track.scrub .gauge b{transition:none}
.tp-track.scrub .zone{transition:opacity .35s var(--ease-out),background .35s,border-color .35s,transform .35s var(--ease-out)}
.tp-track.scrub .zone.dim{opacity:.4}
.tp-track.scrub .zone.on{background:rgba(255,255,255,.13);border-color:var(--z);transform:translateX(-6px)}
.tp-track.scrub .temp__route path{transition:none}
/* 고정하지 않는 경우 (휴대폰 · 낮은 화면 · 동작 줄이기) */
.tp-track.static{height:auto}
.tp-track.static .tp-pin{position:static;height:auto;padding:0}
@media (min-width:768px){
  .tp-track:not(.static){height:calc(var(--pin-h,100svh) + 140svh)}
  .tp-track:not(.static) .tp-pin{height:auto;padding-block:0;top:min(max(calc(var(--hd-h) + 24px),calc(50svh - var(--pin-h,0px) / 2)),calc(100svh - var(--pin-h,0px) - 16px))}
}
/* 태블릿 지표: 같은 방식으로 내용 높이만큼만 고정 (100svh 상자 가운데 정렬로 생기던 아래 빈칸 제거) */
@media (min-width:768px) and (max-width:1023px){
  .kf-track:not(.static){height:calc(var(--pin-h,100svh) + 130svh)}
  .kf-track:not(.static) .kf-pin{height:auto;padding-block:var(--sec-y);top:min(max(0px,calc(50svh - var(--pin-h,0px) / 2)),calc(100svh - var(--pin-h,0px)))}
}
@media (max-width:767px){
  .tp-track{height:auto}
  .tp-pin{position:static;height:auto;padding:0}
}

/* =========================================================
   처리 과정 5단계: 스크롤에 따라 연결선이 채워지고 지난 단계에 체크
   ========================================================= */
.steps{position:relative}
.steps li:not(:last-child)::after{display:none}
.steps li::before{position:relative;z-index:3;display:grid;place-items:center;width:32px;height:32px;margin-bottom:var(--sp-2);border-radius:50%;background:var(--c-white);border:2px solid var(--c-line-strong);color:var(--c-mute);font-size:var(--fs-2xs);font-weight:700;letter-spacing:0;transition:background .35s,border-color .35s,color .35s,transform .35s var(--ease-out)}
.steps li{border:1px solid transparent;transition:border-color .35s,box-shadow .35s}
.steps li.done::before{content:"✓";background:var(--c-blue);border-color:var(--c-blue);color:#fff;font-size:var(--fs-sm)}
.steps li.now{border-color:var(--c-blue);box-shadow:0 12px 32px rgba(42,125,58,.12)}
.steps li.now::before{border-color:var(--c-blue);color:var(--c-blue);transform:scale(1.1)}
.steps__line{position:absolute;z-index:2;background:var(--c-line-strong);border-radius:2px;pointer-events:none;overflow:hidden}
.steps__line i{position:absolute;inset:0;background:var(--c-blue);transform-origin:left top}
.steps__line.h{height:2px}
.steps__line.v{width:2px}
/* 휴대폰·태블릿: 번호 원을 왼쪽 칸에 두고 글은 오른쪽에서 시작 → 세로 연결선이 글자를 가리지 않음 */
@media (max-width:1023px){
  .steps li{padding:var(--sp-5) var(--sp-5) var(--sp-5) calc(var(--sp-5) + 32px + var(--sp-4));min-height:76px;justify-content:center}
  .steps li::before{position:absolute;left:var(--sp-5);top:var(--sp-5);margin:0}
}

/* =========================================================
   푸터 직전 문의 유도: 패널이 화면 가득 펼쳐지고 문구가 단어별로 또렷해짐
   ========================================================= */
.cta-band{background:var(--c-white)}
.cta-band__panel{--cx:0px;--cr:0px;background:var(--c-navy-deep);color:#fff;clip-path:inset(0 var(--cx) 0 var(--cx) round var(--cr) var(--cr) 0 0);padding-block:clamp(96px,11vw,176px) clamp(72px,8vw,120px)}
.cta-band__in{display:flex;flex-direction:column;align-items:flex-start;gap:var(--head-inner)}
.cta-band__title{margin:0;font-size:var(--fs-display);font-weight:800;letter-spacing:var(--ls-display);line-height:1.12;text-wrap:pretty;max-width:15em;transform-origin:left bottom;transform:scale(var(--ts,1))}
.cta-band__title .w{transition:color .3s var(--ease-out)}
.motion .cta-band__title .w{color:rgba(255,255,255,.22)}
.motion .cta-band__title .w.on{color:#fff}
.cta-band__lead{margin:0;max-width:34em;font-size:var(--fs-body);line-height:1.7;color:rgba(255,255,255,.72)}
.cta-band__btns{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4) var(--sp-7);margin-top:var(--sp-5)}
.cta-band__btn{display:inline-flex;align-items:center;gap:var(--sp-3);min-height:56px;padding:0 var(--sp-8);border-radius:var(--r-pill);font-size:var(--fs-body);font-weight:700;transition:background var(--dur-1),color var(--dur-1),transform var(--dur-1) var(--ease-out)}
.cta-band__btn i{font-style:normal;transition:transform var(--dur-1) var(--ease-out)}
.cta-band__btn--fill{background:#fff;color:var(--c-navy)}
.cta-band__btn--fill:hover{background:var(--c-blue);color:#fff}
.cta-band__btn--fill:hover i{transform:translate(3px,-3px)}
.cta-band__tel{font-size:var(--fs-sm);color:rgba(255,255,255,.6)}
.cta-band__tel b{color:#fff;font-weight:700;font-variant-numeric:tabular-nums}
.motion .cta-band__lead,.motion .cta-band__btns{opacity:0;transform:translateY(20px);transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
.motion .cta-band__btns{transition-delay:.12s}
.motion .cta-band.show .cta-band__lead,.motion .cta-band.show .cta-band__btns{opacity:1;transform:none}
/* 푸터: 문의 유도가 위에 있으므로 짧은 소개만 */
.ft__tag{margin:0;font-size:var(--fs-body);color:rgba(255,255,255,.7)}
.cta-band + .ft .marquee,.cta-band ~ .ft .marquee{border-top:1px solid rgba(255,255,255,.08)}
@media (max-width:767px){
  .cta-band__panel{padding-block:var(--sp-13) var(--sp-11)}
  .cta-band__title{font-size:var(--fs-h1);letter-spacing:var(--ls-title)}
  .cta-band__btns{flex-direction:column;align-items:stretch;gap:var(--sp-4);width:100%}
  .cta-band__btn{justify-content:center}
  .cta-band__tel{text-align:center}
}

/* =========================================================
   배송 권역 개념도: 스크롤에 따라 센터 핀에서 권역이 번지듯 칠해짐
   ========================================================= */
.cov{display:grid;grid-template-columns:6fr 5fr;gap:var(--sp-12);align-items:center}
.cov__map{margin:0;display:flex;flex-direction:column;align-items:center;gap:var(--sp-4)}
.cov__map svg{display:block;width:100%;max-width:520px;height:auto;overflow:visible}
.cov__map figcaption{text-align:center}
.cov__map .cell{transition:fill .25s ease,opacity .3s ease}
.cov__map .pin circle.dot{fill:#fff;stroke-width:3}
.cov__map .pin circle.ring{fill:none;stroke-width:2;opacity:0}
.motion .cov__map .pin.pulse circle.ring{animation:covPulse 1.6s ease-out infinite}
@keyframes covPulse{0%{opacity:.9;r:8}100%{opacity:0;r:26}}
.cov__map .pin text{font-family:var(--font);font-size:15px;font-weight:700;fill:var(--c-ink)}
.cov__map .pin text.sub{font-size:12px;font-weight:500;fill:var(--c-sub)}
.cov__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-4)}
.cov__item{display:grid;grid-template-columns:14px 1fr;column-gap:var(--sp-4);row-gap:var(--sp-1);padding:var(--sp-6) var(--sp-7);background:var(--c-white);border-radius:var(--r-card);border:1px solid transparent;transition:border-color .35s,box-shadow .35s,opacity .35s,transform .35s var(--ease-out)}
.cov__item > i{grid-row:1/4;width:14px;height:14px;margin-top:4px;border-radius:4px;background:var(--rc)}
.cov__item.on{border-color:var(--rc);box-shadow:0 14px 34px rgba(18,26,21,.08);transform:translateX(-6px)}
.cov__item.dim{opacity:.45}
@media (max-width:1023px){
  .cov{grid-template-columns:1fr;gap:var(--sp-9)}
  .cov__map svg{max-width:420px}
}
@media (max-width:767px){
  .cov__map svg{max-width:300px}
  .cov__item{padding:var(--sp-5)}
  .cov__item.on{transform:none}
}
/* 핀 이름표: 칠해진 칸 위에서도 읽히도록 배경색 테두리 */
.cov__map .pin text{paint-order:stroke;stroke:var(--c-soft);stroke-width:5px;stroke-linejoin:round}
@media (min-width:768px){
  .cov__map .pin text{font-size:19px;stroke-width:6px}
  .cov__map .pin text.sub{font-size:14px;transform:translateY(3px)}
}
/* 휴대폰: 이름표는 지역명만 크게, 지도는 조금 크게, 목록은 지도 아래 3칸 요약 */
@media (max-width:767px){
  .cov{gap:var(--sp-6)}
  .cov__map svg{max-width:340px}
  .cov__map .pin text{font-size:30px;stroke-width:9px}
  .cov__map .pin text.sub{display:none}
  .cov__list{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-2)}
  .cov__item{grid-template-columns:1fr;row-gap:var(--sp-1);padding:var(--sp-3) var(--sp-3) var(--sp-4);border-radius:var(--r-thumb)}
  .cov__item > i{grid-row:auto;width:10px;height:10px;margin:0 0 var(--sp-1);border-radius:3px}
  .cov__item .eyebrow{font-size:var(--fs-xs);letter-spacing:.04em}
  .cov__item .t-h4{font-size:var(--fs-sm);line-height:1.35}
  .cov__item .t-sm{display:none}
}

/* CEO 인사말: 글이 길어 글 칸을 넓히고 사진은 스크롤 동안 옆에 고정 */
.split--letter{grid-template-columns:7fr 5fr;align-items:start}
.split--letter .split__media{position:sticky;top:calc(var(--hd-h) + var(--sp-8))}
.split--letter .media{aspect-ratio:4/5}
.ceo__body{display:flex;flex-direction:column;gap:var(--sp-5);max-width:40em}
.ceo__body .t-body{line-height:1.9}
.ceo__pledge{margin:var(--sp-2) 0;padding-left:var(--sp-5);border-left:3px solid var(--c-blue);font-size:var(--fs-h5);font-weight:700;line-height:1.75;color:var(--c-ink)}
.ceo__sign{margin-top:var(--sp-4);font-size:var(--fs-h4);font-weight:800;letter-spacing:var(--ls-title)}
.ceo__sign span{margin-right:var(--sp-2);font-size:var(--fs-sm);font-weight:600;color:var(--c-sub);letter-spacing:0}
@media (max-width:1023px){
  .split--letter{grid-template-columns:1fr}
  .split--letter .split__media{position:static}
  .split--letter .media{aspect-ratio:16/10}
}
@media (max-width:767px){
  .ceo__pledge br{display:none}
}

/* 브랜드 심볼: 흰 둥근 상자 안에 초록 심볼 (어두운·밝은 헤더 모두 같은 모습) */
.logo__mark,.hd.solid .logo__mark,.ft .logo__mark{background:#fff;color:inherit}
.hd.solid .logo__mark{box-shadow:inset 0 0 0 1px var(--c-line)}
.logo__mark img{display:block;width:26px;height:26px;object-fit:contain}

/* 주요 거래처: 계약 순 로고 타일 (타일 바탕은 로고 고유 배경색 --pb) */
.partners{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-9) var(--sp-6)}
.partner{margin:0;display:flex;flex-direction:column;gap:var(--sp-4)}
.partner__logo{aspect-ratio:16/9;display:grid;grid-template:100%/100%;place-items:center;overflow:hidden;border-radius:var(--r-card);background:var(--pb,#fff);box-shadow:inset 0 0 0 1px rgba(18,26,21,.08);transition:transform var(--dur-1) var(--ease-out)}
.partner__logo img{max-width:62%;max-height:58%;width:auto;height:auto;object-fit:contain}
.partner__logo--cover img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}
.partner__logo img[src*="homies"]{max-height:80%}
/* 원본이 작은 로고는 이웃 타일과 비슷한 크기로 키움 (더 큰 원본을 받으면 교체) */
.partner__logo img[src*="camon"]{width:42%}
.partner figcaption{display:flex;flex-direction:column;gap:var(--sp-1)}
.partner figcaption b{font-size:var(--fs-h5);font-weight:800;letter-spacing:var(--ls-title);line-height:1.4}
.partner figcaption span{font-size:var(--fs-sm);color:var(--c-mute)}
@media (hover:hover){.partner:hover .partner__logo{transform:translateY(-4px)}}
@media (max-width:767px){
  .partners{gap:var(--sp-6) var(--sp-3)}
  .partner{gap:var(--sp-2)}
  .partner__logo{aspect-ratio:4/3;border-radius:12px}
  .partner__logo img{max-width:74%;max-height:56%}
  .partner__logo img[src*="homies"]{max-height:78%}
  .partner figcaption b{font-size:13px;line-height:1.35;word-break:keep-all}
  .partner figcaption span{font-size:11px}
}

/* 흰 바탕 섹션에 놓인 뉴스 카드 */
.sec:not(.sec--soft) .news a{background:var(--c-soft)}

/* 전화·메일 링크 */
.spec a:hover,.aside a:hover,.ft__info a:hover,.menu__info a:hover,.cta-band__tel a:hover{text-decoration:underline;text-underline-offset:3px}
.article__src{margin-top:var(--sp-7)}
.cta-band__tel a,.ft__info a,.aside dd a{display:inline-block;padding-block:12px;margin-block:-12px}
/* 본문 글: 마지막 줄에 한 단어만 남지 않게 */
.article__body p,.agree span,.cta-band__lead,.spec dd,.timeline ul li,.bullets li{text-wrap:pretty}

/* 하이픈에서 줄이 끊기지 않게 */
.nobr{white-space:nowrap}

/* 물류센터 블록: 짝수 번째는 사진 크기를 그대로 두고 좌우만 바꿈 */
@media (min-width:1024px){
  .split--flip{grid-template-columns:7fr 5fr}
  .split--flip .split__media{order:1}
}

/* 메인 뉴스 카드가 2건일 때는 2열로 채움 (767px 이하는 가로 스크롤) */
@media (min-width:768px){
  .news:has(> a:nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}
}

/* 회사소개 연혁: 긴 타임라인 옆 제목을 가운데가 아니라 위에 두고 따라오게 */
@media (min-width:1024px){
  #history .split{align-items:start}
  #history .split__text{position:sticky;top:calc(var(--hd-h) + 56px + var(--sp-6))}
}