/* 첫 화면(public/index.php) — 5구역 전체 화면. 넓고 키 큰 화면(960×680 이상, 움직임 줄이기 아님)에서는 app.js fullpage 가
   html.fp-on 을 붙이고 구역을 창 높이에 딱 맞춰 하나씩 넘긴다(머리말은 투명, 밝은 구역·메가 메뉴에서만 흰 바탕).
   휴대폰·짧은 화면·움직임 줄이기는 일반 스크롤. 오른쪽 점(.fp-dots)은 app.js 가 지금 구역을 표시. */

.fp-sec { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: center; overflow: hidden; }

/* 구역 맞춤 — 구역 = 창 높이. 아래는 떠 있는 「대리점 찾기」 단추 자리, 양옆은 오른쪽 점·이름표 자리를 비워 본문과 겹치지 않게 */
html.fp-on { overflow: hidden; --fp-safe-b: 104px; --fp-safe-x: 168px; }
.fp-on .fp-sec:not(.sec-pr) { height: 100vh; min-height: 0; }
.fp-on .fp .container { max-width: calc(var(--container) + var(--fp-safe-x) * 2); padding-inline: var(--fp-safe-x); }
.fp-on .sec-inner { padding-block: calc(var(--topbar-h) + var(--space-6)) var(--fp-safe-b); }
.fp-on .visual-copy { padding-bottom: max(var(--fp-safe-b), 18vh); }
.sec-photo { background: var(--dark); color: var(--on-dark); }
.sec-photo::before { content: ""; position: absolute; inset: 0; background-image: var(--bg-img); background-size: cover; background-position: center; transform: scale(1.04); transition: transform 2.4s var(--ease); }
.sec-photo::after { content: ""; position: absolute; inset: 0; background: var(--scrim); }
.sec-photo.is-active::before { transform: scale(1); }
.sec-inner { position: relative; z-index: 1; padding-block: calc(var(--topbar-h) + var(--space-8)) var(--space-9); }

/* 1. 비주얼 */
.sec-visual { background: var(--dark); color: var(--on-dark); align-items: end; }
.visual-media { position: absolute; inset: 0; }
.visual-media img { width: 100%; height: 100%; object-fit: cover; animation: hero-zoom 9s var(--ease) forwards; transform: scale(1.12); }
.visual-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 14, 28, .5) 0%, rgba(8, 14, 28, .15) 40%, rgba(8, 14, 28, .75) 100%); }
@keyframes hero-zoom { to { transform: scale(1); } }
.visual-copy { position: relative; z-index: 1; padding-bottom: clamp(120px, 18vh, 200px); }
.visual-sub { display: inline-block; padding: var(--space-1) var(--space-3); margin-bottom: var(--space-5); background: var(--brand); font-weight: var(--weight-bold); font-size: var(--text-sm); letter-spacing: .02em; }
.visual-title { font-size: var(--display); font-weight: var(--weight-heavy); line-height: 1.18; letter-spacing: -0.035em; max-width: 16ch; text-shadow: 0 2px 24px rgba(0, 0, 0, .3); }
.js .visual-sub, .js .visual-title { animation: rise-in 1s var(--ease) both; }
.js .visual-title { animation-delay: .15s; }
@keyframes rise-in { from { opacity: 0; transform: translateY(24px); } }
.scroll-down { position: absolute; z-index: 1; left: 50%; bottom: var(--space-6); transform: translateX(-50%); display: grid; justify-items: center; gap: var(--space-2); min-height: 44px; padding: var(--space-1) var(--space-3); color: var(--on-dark); text-decoration: none; font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: .14em; }
.scroll-down:hover { color: var(--on-dark); }
.scroll-down i { display: block; width: 22px; height: 36px; border: 2px solid rgba(255, 255, 255, .85); border-radius: 12px; position: relative; }
.scroll-down i::after { content: ""; position: absolute; left: 50%; top: 7px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--on-dark); animation: wheel 1.6s ease-in-out infinite; }
@keyframes wheel { 50% { transform: translateY(8px); opacity: .4; } }
@media (max-width: 959px) { .scroll-down { display: none; } }   /* 휴대폰은 손으로 내리고, 아래쪽은 「대리점 찾기」 단추 자리 */

/* 구역 머리 */
.sec-head { display: grid; justify-items: center; gap: var(--space-3); text-align: center; margin-bottom: var(--space-8); }
.sec-head.is-left { justify-items: start; text-align: left; margin-bottom: 0; max-width: 760px; }   /* 영문 머리말이 한 줄에 들도록 */
.sec-eyebrow { font-size: var(--display-en); font-weight: var(--weight-light); line-height: 1; letter-spacing: -0.02em; text-wrap: balance; }
.sec-title { color: var(--brand-on-dark); font-size: var(--text-2xl); font-weight: var(--weight-bold); }
.sec-title::after { content: ""; display: block; width: 40px; height: 3px; margin-top: var(--space-4); background: currentColor; }
.sec-head.is-right { justify-items: end; text-align: right; margin: 0 0 0 auto; max-width: 760px; }
.sec-head:not(.is-left):not(.is-right) .sec-title::after { margin-inline: auto; }
.sec-head.is-right .sec-title::after { margin-left: auto; }
.sec-text { color: var(--on-dark-2); font-size: var(--text-lg); line-height: 1.8; margin-bottom: var(--space-4); }
@media (min-width: 960px) { .sec-title { font-size: var(--text-3xl); } .sec-text { font-size: var(--text-xl); } }

/* 2. 기업정보 — 3갈래 카드 */
.company-cards { display: grid; gap: var(--space-6); }
@media (min-width: 768px) { .company-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-7); } }
.company-card { display: grid; gap: var(--space-4); color: var(--on-dark); text-decoration: none; }
.company-card:hover { color: var(--on-dark); }
.company-card-img { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.company-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.company-card-img::after { content: ""; position: absolute; inset: 0; background: rgba(8, 14, 28, .35); transition: background var(--dur) var(--ease); }
.company-card:hover .company-card-img img { transform: scale(1.05); }
.company-card:hover .company-card-img::after { background: rgba(10, 92, 255, .35); }
.company-card-ico { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; color: var(--on-dark); }
.company-card-ico svg { width: 56px; height: 56px; stroke-width: 1.2; }
.company-card-t { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-2xl); font-weight: var(--weight-bold); }
.company-card-t svg { width: 22px; height: 22px; transition: transform var(--dur) var(--ease); }
.company-card:hover .company-card-t svg { transform: translateX(4px); }
.company-card-d { color: var(--on-dark-2); line-height: 1.75; }

/* 3. 제품정보 — 구역 전체 큰 사진 + 오른쪽 문구(오른쪽을 어둡게) */
.sec-photo.is-right::after { background: var(--scrim-right); }

/* 5. 홍보센터 + 공지 및 소식 (밝은 구역) */
.sec-pr { background: var(--bg-soft); color: var(--text); align-items: start; }
.sec-pr-body { position: relative; z-index: 1; padding-block: calc(var(--topbar-h) + var(--space-8)) var(--space-9); }
.sec-head.is-dark .sec-title { color: var(--brand-ink); }
.home-media { display: grid; gap: var(--space-6); margin-bottom: var(--space-9); }
@media (min-width: 768px) { .home-media { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7); } }
.home-media-card { display: block; position: relative; color: var(--on-dark); text-decoration: none; }
.hm-thumb { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--dark); overflow: hidden; }
.hm-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.home-media-card:hover .hm-thumb img { transform: scale(1.04); }
.hm-t { position: absolute; left: var(--space-5); right: var(--space-5); bottom: var(--space-5); z-index: 1; font-size: var(--text-lg); font-weight: var(--weight-bold); text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.home-news { max-width: 1040px; margin: 0 auto; }
.home-news-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: var(--space-4); }
.home-news-t { font-size: var(--text-2xl); font-weight: var(--weight-heavy); }
.more-btn { display: grid; place-items: center; width: 52px; height: 52px; background: var(--brand); color: var(--on-dark); }
.more-btn:hover { background: var(--brand-hover); color: var(--on-dark); }
.more-btn svg { width: 26px; height: 26px; }
.home-news-list { border-top: 1px solid var(--text); }
.home-news-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-5); padding: var(--space-5) var(--space-1); border-bottom: 1px solid var(--line-strong); color: var(--text); text-decoration: none; }
.home-news-list a:hover .hn-t { color: var(--brand-ink); text-decoration: underline; }
.hn-t { font-size: var(--text-lg); font-weight: var(--weight-medium); }
.hn-d { grid-column: 1; color: var(--text-3); font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hn-date { grid-column: 2; grid-row: 1; color: var(--text-3); font-size: var(--text-sm); }

/* 오른쪽 점 — 넓은 화면만 */
.fp-dots { display: none; }
@media (min-width: 960px) {
  .fp-dots { position: fixed; right: var(--space-6); top: 50%; transform: translateY(-50%); z-index: 40; display: grid; gap: var(--space-1); }
  .fp-dots a { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); min-height: 40px; color: var(--on-dark); text-decoration: none; font-size: var(--text-sm); font-weight: var(--weight-medium); }
  .fp-dots i { display: block; width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, .7); box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); transition: transform var(--dur) var(--ease), background var(--dur) var(--ease); }
  .fp-dot-l { opacity: 0; transform: translateX(6px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); text-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
  .fp-dots a:hover .fp-dot-l, .fp-dots a:focus-visible .fp-dot-l, .fp-dots a[aria-current="true"] .fp-dot-l { opacity: 1; transform: none; }
  .fp-dots a[aria-current="true"] i { background: var(--brand-on-dark); box-shadow: 0 0 0 4px rgba(106, 168, 255, .3); }
  .fp-dots.on-light a { color: var(--text); }
  .fp-dots.on-light .fp-dot-l { text-shadow: none; }
  .fp-dots.on-light i { background: var(--line-strong); }
  .fp-dots.on-light a[aria-current="true"] i { background: var(--brand); }
}