/* 일본어 메인 2차 시안 (fable). after.css 위에 덧씌운다.
 * 색: 브랜드 4색(#05060D, #7FA8FF, #A46BFF, #F45FC8)과 var(--grad), global.css 무채색, 흰색·rgba만 쓴다.
 * 브랜드 보라(#A46BFF)는 큰 글자(구역 번호 20px 굵게)에만 쓴다. 작은 강조 글자는 global.css의 --c-accent(#7a45e6, 흰 바탕 5.5:1)를 그대로 쓴다. */

.f-main { --c-accent-soft: rgba(122, 69, 230, .08); padding-top: var(--header-h); }
.f-main .p-hero { padding-top: 36px; }
/* 구역 바(40px)와 헤더 높이만큼 앵커 위치를 내린다 */
.f-main .p-zone { scroll-margin-top: calc(var(--header-h) + 56px); }
.f-main .p-hero h1 { font-size: clamp(28px, 3.4vw, 42px); }

/* 05 運用 관제 화면: 표와 같은 폭 */
.f-shot { margin-top: 24px; }

/* 공통 보조 */
.f-mt { margin-top: 16px; }
.f-mt-s { margin-top: 8px; }
.f-no { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--c-accent); }

/* 구역 라벨: 글자는 잉크색, 앞에 짧은 그라데이션 점 */
.f-k { display: block; position: relative; padding-left: 14px; margin-bottom: 4px; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--c-ink); }
.f-k::before { content: ""; position: absolute; left: 0; top: .35em; width: 6px; height: 6px; border-radius: 2px; background: var(--grad); }

/* 번호는 크게 (큰 글씨 기준 대비 3:1을 넘는 브랜드 보라) */
.f-main .p-num { font-size: 20px; line-height: 1.2; color: #A46BFF; }

/* 1. 첫 화면: 문구 / 실적 / 사진 / 바로가기 / 구역 목차를 한 격자에 둔다. 좁은 화면에서는 바로가기가 실적·사진보다 먼저 와서 첫 화면에 들어온다 */
.f-main .p-hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); grid-template-areas: "copy img" "proof img" "jumps jumps" "map map"; gap: 24px clamp(28px, 4vw, 56px); align-items: start; }
.f-main .p-hero-copy { grid-area: copy; }
.f-main .p-hero-proof { grid-area: proof; }
.f-main .p-hero-img { grid-area: img; align-self: center; }
.f-main .p-jumps { grid-area: jumps; margin-top: 8px; }
.f-main .f-map { grid-area: map; }
.f-main .p-hero-proof .p-badges { margin-top: 0; }
.f-map { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 13px; }
.f-map-k { font-weight: 700; color: var(--c-muted); }
.f-map-list { display: flex; flex-wrap: wrap; gap: 6px 14px; list-style: none; padding: 0; margin: 0; }
.f-map-list a { color: var(--c-ink); text-decoration: none; white-space: nowrap; }
.f-map-list a:hover { text-decoration: underline; }
.f-map-list b { margin-right: 4px; color: var(--c-accent); font-weight: 700; font-variant-numeric: tabular-nums; }

/* 헤더 아래 구역 바로가기 줄 (sticky). 좁은 화면에서는 가로로 밀어 보는 띠가 된다 */
.f-zonebar { position: sticky; top: var(--header-h); z-index: 20; background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px); border-bottom: 1px solid var(--c-line); transition: top .3s var(--ease); }
body.header-hidden .f-zonebar { top: 0; }
.f-zonebar-list { display: flex; gap: 2px; list-style: none; padding: 0 var(--gutter); margin: 0 auto; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; max-width: calc(var(--wrap) + var(--gutter) * 2); }
.f-zonebar-list::-webkit-scrollbar { display: none; }
.f-zonebar-list a { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; font-size: 13px; color: var(--c-muted); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; }
.f-zonebar-list a b { font-size: 12px; font-weight: 700; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.f-zonebar-list a:hover { color: var(--c-ink); }
/* 현재 구역: 아래 선을 그라데이션으로 */
.f-zonebar-list a[aria-current="true"] { color: var(--c-ink); font-weight: 700; border-bottom: 2px solid transparent; background: linear-gradient(var(--gray-0), var(--gray-0)) padding-box, var(--grad) border-box; }
.f-zonebar-list a[aria-current="true"] b { color: var(--c-accent); }

/* 2. 구역 공통 틀: 머리 3요소 (번호 / 제목 / 이 구역에서 알 수 있는 것) */
.f-main .p-grid { align-items: start; }
.f-main .p-head { position: relative; }

/* 3. 표 공통: 항목 / 내용 / 조건·비고 */
.f-table { table-layout: auto; }
.f-table thead th { width: auto; font-size: 12px; font-weight: 700; color: var(--c-muted); background: var(--gray-0); border-bottom: 1px solid var(--c-line-strong); padding: 10px 14px; text-align: left; }
.f-table tbody th { width: auto; min-width: 9em; }
.f-table td, .f-table tbody th { padding: 12px 14px; }
.f-table td { color: var(--c-muted); }
.f-table td:nth-child(2) { color: var(--c-ink); }
.f-table .link-arrow { white-space: nowrap; }
.p-table-wrap { background: var(--gray-0); }
/* 항목 열은 짧게, 조건 열은 넓게. 2열 표는 항목 열 28% */
.f-table th[scope="row"] { width: 28%; }
.f-table-3 th[scope="row"] { width: 22%; }
.f-table td:nth-child(3) { width: 38%; font-size: 13px; line-height: 1.7; }

/* 4. 기능 구역: 표와 사진을 같은 구역에 */
.f-main #function .p-split { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); }

/* 5. 본문 링크 색은 잉크색, 밑줄로 구분 */
.f-main .link-arrow { color: var(--c-ink); text-decoration: underline; text-underline-offset: 3px; }
.f-main .p-note a, .f-main .p-body > p a, .f-main .p-ans a { color: var(--c-ink); text-decoration: underline; text-underline-offset: 3px; }

/* 6. 라벨·태그: 브랜드 색 대신 무채색 */
.f-main .p-tag { color: var(--c-ink); background: var(--c-bg-alt); border: 1px solid var(--c-line); }
.f-main .p-badges b, .f-main .p-row dd b, .f-main .p-badge-list b { color: var(--c-ink); }
.f-main .p-badge-list li { border-color: var(--c-line-strong); }
.f-main .p-eyebrow { color: var(--c-ink); }
.f-main .p-eyebrow::before { content: ""; display: inline-block; width: 18px; height: 3px; margin-right: 8px; vertical-align: middle; background: var(--grad); }
.f-main .p-jump::after { color: var(--c-ink); }
.f-main .p-jump:hover { background: var(--c-bg-alt); }
.f-main .p-jump:hover strong { color: var(--c-ink); text-decoration: underline; }

/* 7. 사례 수치 강조 */
.f-main .p-row dd b { font-size: 20px; }

/* 8. FAQ 기호는 잉크색 */
.f-main .p-faq summary::after { color: var(--c-ink); }

/* 9. 버튼: 흰 글씨 + 그라데이션 위에 남색 35% (대비 4.5:1 이상) */
.f-main .btn-primary { color: var(--gray-0); background: linear-gradient(rgba(5,6,13,.35), rgba(5,6,13,.35)), var(--grad); }

/* 10. 좁은 화면 */
@media (max-width: 900px) {
  .f-main .p-hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "jumps" "proof" "img" "map"; gap: 20px; }
  .f-main .p-jumps { margin-top: 0; }
  .f-main #function .p-split { grid-template-columns: minmax(0, 1fr); }
  .f-map { font-size: 12px; }
}
@media (max-width: 600px) {
  .f-main .p-hero { padding-top: 24px; }
  .f-zonebar-list a { height: 38px; padding: 0 9px; font-size: 12px; }
  .f-main .p-zone { scroll-margin-top: calc(var(--header-h) + 50px); }
  /* 표는 행마다 세로로 쌓는다: 항목명 → 내용 → 조건·비고(열 이름을 앞에 붙인다). 가로 스크롤은 만들지 않는다 */
  .f-table, .f-table tbody, .f-table tr, .f-table th, .f-table td { display: block; }
  .f-table thead { display: none; }
  .f-table tr { padding: 12px 14px; border-bottom: 1px solid var(--c-line); }
  .f-table tr:last-child { border-bottom: 0; }
  .f-table th[scope="row"], .f-table-3 th[scope="row"] { width: auto; min-width: 0; padding: 0 0 4px; background: none; }
  .f-table td, .f-table td:nth-child(3) { width: auto; padding: 0; border: 0; font-size: 14px; line-height: 1.7; }
  .f-table td + td { margin-top: 6px; font-size: 13px; }
  .f-table td[data-label]::before { content: attr(data-label) "："; font-weight: 700; color: var(--c-muted); }
  .f-map-list { gap: 4px 10px; }
}

/* 11. 하위 페이지 (main.f-sub): 첫 화면은 문구와 구역 목차만 두고, 구역 틀·표·구역 바는 메인과 같다 */
.f-sub .p-hero { padding-top: 36px; padding-bottom: 32px; }
.f-sub .p-hero .p-lead { max-width: 680px; }
.f-sub .p-hero .f-map { margin-top: 24px; }
.f-sub .p-hero .btn-row { margin-top: 20px; }
/* 구역 바가 다른 페이지로 가는 링크(お知らせ·ニュース·CI)일 때의 현재 표시도 같은 모양 */
.f-sub .p-body > .p-fig + .p-note { margin-top: 12px; }
/* 어두운 바탕의 제품 사진 (携帯型超音波カメラ) */
.f-dark { background: var(--c-bg-dark); padding: clamp(24px, 4vw, 48px); }
.f-dark img { display: block; width: 100%; height: auto; }
/* 표 안의 이름(팀 표): 이름은 굵게, 경력은 아래 줄 */
.f-table .f-name { display: block; font-weight: 700; color: var(--c-ink); }
.f-table .f-sub-line { display: block; margin-top: 2px; font-size: 13px; color: var(--c-muted); }
/* 양식: 구역 본문 안에서 2열 그대로. 안내문과 양식 사이 간격 */
.f-sub .p-body > .form { margin-top: 20px; }
/* 사례 표(p-row)에서 수치 뒤의 조건 */
.f-sub .p-row dd .p-src { color: var(--c-muted); }
/* 게시판: 구역 본문 안에서 그대로 쓴다. 목록 윗선은 구역 틀의 선과 겹치지 않게 1px */
.f-sub .b-list { border-top-width: 1px; }

/* 07 導入事例 아래 도입·연계 기관 로고 격자. 흰 타일에 원본 로고, 아래에 기관명·구분 */
.pt-h { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--c-line); }
.pt-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 12px; }
.pt-tile { display: flex; align-items: center; justify-content: center; height: 72px; padding: 0 16px; border: 1px solid var(--c-line); border-radius: 10px; background: var(--gray-0); }
.pt-tile img { display: block; width: auto; max-width: 100%; height: var(--h); object-fit: contain; }
.pt-txt { font-size: 14px; font-weight: 700; line-height: 1.4; text-align: center; color: var(--gray-70); word-break: keep-all; }
.pt-name { margin: 8px 0 0; font-size: 14px; font-weight: 700; line-height: 1.5; color: var(--c-ink); }
.pt-type { margin: 0; font-size: 13px; line-height: 1.5; color: var(--c-muted); }
@media (max-width: 600px) {
  .pt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pt-tile { height: 64px; padding: 0 12px; }
  .pt-tile img { height: calc(var(--h) * .82); }
}