/* 영문 서브페이지 전용 스타일 — 사이트와 관리자 TinyMCE 편집기가 함께 읽는 단일 원본.
   수정은 이 파일만 고치면 양쪽에 반영된다.
   (원래 resources/views/eng/_page-styles.blade.php 안에 인라인이었다) */

/* ── about/history ───────────────────────────────
   국문 주요연혁(intro/history.blade.php)의 .history-timeline 과 동일한 값으로 맞춘다.
   국문 쪽을 고치면 여기도 같이 고칠 것. */
.eng-timeline { position: relative; padding-left: 30px; margin-top: 24px; }
.eng-timeline::before {
    content: ''; position: absolute; left: 8px; top: 8px; bottom: 8px;
    width: 2px; background: linear-gradient(to bottom, #0061c2, #e8ecf1);
}
.eng-timeline-item { position: relative; margin-bottom: 30px; padding-left: 24px; }
.eng-timeline-item::before {
    content: ''; position: absolute; left: -26px; top: 5px;
    width: 14px; height: 14px; border-radius: 50%;
    background: #0061c2; border: 3px solid #fff; box-shadow: 0 0 0 2px #0061c2;
}
.eng-timeline-year { font-size: 19px; font-weight: 800; color: #0a3d7c; margin-bottom: 8px; }
.eng-timeline-text { padding-left: 2px; line-height: 1.9; color: #333; font-size: 14.5px; }
.eng-timeline-text ul { padding-left: 2px; line-height: 1.9; list-style: none; margin: 0; }
.eng-timeline-text li { position: relative; padding-left: 14px; color: #333; font-size: 14.5px; }
.eng-timeline-text li::before {
    content: ''; position: absolute; left: 0; top: 13px;
    width: 4px; height: 4px; background: #0061c2; border-radius: 50%;
}

/* ── about/organization ─────────────────────────────── */
.eng-org-chart { display: flex; flex-direction: column; align-items: center; padding: 30px 0 10px; }
.eng-org-box { background: linear-gradient(135deg, #0a3d7c, #0061c2); color: #fff; padding: 16px 32px; border-radius: 10px; font-weight: 700; font-size: 16px; box-shadow: 0 8px 20px rgba(10,61,124,0.18); min-width: 200px; text-align:center; }
.eng-org-box.sub { background: #fff; color:#0a3d7c; border: 2px solid #0061c2; min-width: 180px; padding: 13px 22px; font-size: 14px; }
.eng-org-line { width: 2px; height: 28px; background: #0061c2; }
.eng-org-row { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; }
.eng-org-bracket { width: 80%; max-width: 720px; height: 2px; background: #0061c2; margin: 0 auto; }
/* 하단 본부 행: 상단 브래킷 + 각 박스 수직 연결선
   5칸을 등폭(flex:1 1 0)으로 고정해야 브래킷 양끝을 첫/마지막 박스 중앙에 맞출 수 있다.
   등폭일 때 한 칸 폭 = (100% - 4*gap)/5 이므로 첫 칸 중앙 = (100% - 4*gap)/10. */
.eng-org-divisions { display: flex; flex-wrap: nowrap; gap: 14px; justify-content: center; position: relative; padding-top: 20px; width: 100%; }
/* 버스 끝을 낙하선(2px) 바깥 모서리까지 1px 더 뻗는다.
   중앙 좌표에 딱 맞추면 calc 소수점 반올림 때문에 양 끝에 실틈이 생긴다. */
.eng-org-divisions::before { content: ''; position: absolute; top: 0; left: calc((100% - 56px) / 10 - 1px); right: calc((100% - 56px) / 10 - 1px); height: 2px; background: #0061c2; }
.eng-org-divisions .eng-org-box { position: relative; box-sizing: border-box; flex: 1 1 0; min-width: 0; padding: 13px 10px; font-size: 13px; }
.eng-org-divisions .eng-org-box::before { content: ''; position: absolute; top: -20px; left: calc(50% - 1px); width: 2px; height: 20px; background: #0061c2; }
/* 상단 회장 행: 본부 행과 같은 방식(가로 버스 + 낙하선)으로 연결한다.
   4칸 등폭이면 첫/마지막 칸 중앙 = (100% - 3*18px)/8 이고,
   행의 정중앙이 Chairman-Auditor 사이 18px 간격 한가운데에 정확히 떨어지므로
   그 자리로 세로선을 통과시켜 위(General Assembly)·아래(Standing Director)와 이을 수 있다. */
.eng-org-siderow { display: flex; flex-wrap: nowrap; gap: 18px; justify-content: center; position: relative; padding-top: 20px; width: 100%; }
.eng-org-siderow::before { content: ''; position: absolute; top: 0; left: calc((100% - 54px) / 8 - 1px); right: calc((100% - 54px) / 8 - 1px); height: 2px; background: #0061c2; }
.eng-org-siderow::after { content: ''; position: absolute; top: 0; bottom: 0; left: calc(50% - 1px); width: 2px; background: #0061c2; }
/* Chairman 만 테두리가 없어(나머지 3개는 border 2px) content-box 기준으로는 칸 폭이
   4px 어긋난다. border-box 로 고정해야 4칸이 진짜 등폭이 되고 버스 끝 계산이 맞는다. */
.eng-org-siderow > .eng-org-box { position: relative; box-sizing: border-box; flex: 1 1 0; min-width: 0; padding: 13px 10px; font-size: 13.5px; }
/* Chairman 에도 같은 두께의 (투명) 테두리를 줘서 4개 박스의 박스모델을 완전히 동일하게 만든다.
   테두리가 없으면 낙하선의 기준(패딩 박스)이 2px 어긋나 끝단이 맞지 않는다. */
.eng-org-siderow > .eng-org-box:not(.sub) { border: 2px solid transparent; }
.eng-org-siderow > .eng-org-box::before { content: ''; position: absolute; top: -20px; left: calc(50% - 1px); width: 2px; height: 20px; background: #0061c2; }
/* National Chapters 한 줄 배치 */
.eng-org-chapters { flex-wrap: nowrap; justify-content: center; overflow-x: auto; padding-bottom: 6px; }
.eng-org-chapters .eng-org-box { min-width: 0; flex: 1 1 0; padding: 12px 10px; font-size: 13px; white-space: nowrap; }
.eng-dept-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 24px; }
.eng-dept { background: #f8f9fb; border: 1px solid #e8ecf1; border-radius: 12px; padding: 24px 26px; }
.eng-dept h4 { font-size: 16px; font-weight: 700; color: #0061c2; margin: 0 0 8px; }
.eng-dept p { font-size: 14px; color: #555; line-height: 1.7; margin: 0; }
@media (max-width: 700px) { .eng-dept-grid { grid-template-columns: 1fr; } }
/* 좁은 화면: 5칸 등폭이 뭉개지므로 줄바꿈을 허용하고, 이때는 연결선을 숨긴다
   (줄바꿈되면 브래킷/낙하선이 엉뚱한 위치를 가리켜 오히려 지저분해진다) */
@media (max-width: 860px) {
    .eng-org-divisions,
    .eng-org-siderow { flex-wrap: wrap; padding-top: 0; }
    .eng-org-divisions .eng-org-box,
    .eng-org-siderow > .eng-org-box { flex: 0 1 auto; min-width: 150px; }
    .eng-org-divisions::before,
    .eng-org-divisions .eng-org-box::before,
    .eng-org-siderow::before,
    .eng-org-siderow::after,
    .eng-org-siderow > .eng-org-box::before { display: none; }
}

/* ── about/scheme ─────────────────────────────── */
.eng-scheme-list { columns: 2; column-gap: 40px; margin-top: 18px; }
.eng-scheme-list li { break-inside: avoid; margin-bottom: 11px; font-size: 14.5px; color: #444; line-height: 1.7; padding-left: 4px; }
@media (max-width: 700px) { .eng-scheme-list { columns: 1; } }

/* ── about/contact ─────────────────────────────── */
.eng-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 18px; }
.eng-map { width: 100%; height: 380px; border-radius: 12px; overflow: hidden; border: 1px solid #e8ecf1; background:#f0f4fa; display:flex; align-items:center; justify-content:center; color:#888; font-size:13px; }
.eng-map iframe { width: 100%; height: 100%; border: 0; }
@media (max-width: 800px) { .eng-contact-grid { grid-template-columns: 1fr; } }

/* ── cmday/members ─────────────────────────────── */
.eng-assoc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 20px; }
/* 로고를 우측 상단에 얹으므로 기준점을 잡고, 제목/설명이 로고 밑으로 들어가지 않게 오른쪽을 비워 둔다 */
.eng-assoc-card { position: relative; background: #f8f9fb; border: 1px solid #e8ecf1; border-radius: 14px; padding: 24px 26px; }
.eng-assoc-card h4 { font-size: 17px; font-weight: 800; color: #0061c2; margin: 0 0 4px; padding-right: 124px; }
.eng-assoc-card .full { font-size: 13px; color: #888; margin: 0 0 14px; padding-right: 124px; }
/* 260820 수정요청: Establishment 와 연도가 붙어 보이던 문제.
   라벨 열이 92px 였는데 "Establishment" 글자폭이 92.5px 라 0.5px 모자라 여백이 사라졌다.
   열을 106px 로 넓히고 column-gap 을 명시해 어떤 라벨이든 최소 간격을 갖게 한다.
   (기존에는 row-gap 만 있어 가로 간격은 짧은 라벨의 남는 공간에 의존하고 있었다) */
.eng-assoc-card dl { display: grid; grid-template-columns: 106px 1fr; column-gap: 14px; row-gap: 7px; margin: 0; font-size: 13.5px; }
.eng-assoc-card dt { color: #999; font-weight: 600; }
.eng-assoc-card dd { margin: 0; color: #444; word-break: break-word; overflow-wrap: anywhere; }
/* 각 단체 로고 — 카드 오른쪽 남는 공간. 높이를 고정하고 가로는 비율대로 둔다.
   파일이 없으면 뷰의 onerror 가 숨기므로 로고 없는 단체도 레이아웃이 깨지지 않는다. */
.eng-assoc-logo {
    position: absolute; top: 22px; right: 26px;
    max-height: 34px; max-width: 112px;
    width: auto; height: auto;
    object-fit: contain; object-position: right top;
}
@media (max-width: 700px) {
    .eng-assoc-grid { grid-template-columns: 1fr; }
    .eng-assoc-card h4, .eng-assoc-card .full { padding-right: 96px; }
    .eng-assoc-logo { max-width: 88px; max-height: 28px; }
}

/* ── cmday/registration ─────────────────────────────── */
.eng-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.eng-form .full { grid-column: 1 / -1; }
.eng-form label { display: block; font-size: 13px; font-weight: 700; color: #1a1a1a; margin-bottom: 6px; }
.eng-form input, .eng-form select, .eng-form textarea {
    width: 100%; padding: 12px 14px; font-size: 14px;
    border: 1px solid #dde3ed; border-radius: 8px;
    background: #fff; color: #1a1a1a;
    transition: all 0.2s;
    font-family: inherit;
}
.eng-form input:focus, .eng-form select:focus, .eng-form textarea:focus {
    outline: none; border-color: #0061c2; box-shadow: 0 0 0 3px rgba(0,97,194,0.12);
}
.eng-form textarea { resize: vertical; min-height: 100px; }
.eng-form-submit {
    margin-top: 24px;
    padding: 14px 36px;
    background: linear-gradient(135deg, #0a3d7c, #0061c2);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.5px;
    transition: all 0.25s;
}
.eng-form-submit:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(10,61,124,0.25); }
@media (max-width: 700px) { .eng-form { grid-template-columns: 1fr; } }

/* ── ipma/certification ─────────────────────────────── */
.eng-cert-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 18px; }
.eng-cert { background: #fff; border: 1px solid #e8ecf1; border-radius: 14px; padding: 28px 30px; transition: all 0.25s; }
.eng-cert:hover { border-color: #0061c2; transform: translateY(-3px); box-shadow: 0 14px 28px rgba(10,61,124,0.10); }
.eng-cert-level { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; background: linear-gradient(135deg, #0a3d7c, #0061c2); color:#fff; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: 1.5px; margin-bottom: 14px; }
.eng-cert h4 { font-size: 18px; font-weight: 800; color: #1a1a1a; margin: 0 0 8px; }
.eng-cert .sub { font-size: 13px; color: #888; margin-bottom: 14px; }
.eng-cert p { font-size: 14px; color: #555; line-height: 1.7; margin: 0; }
@media (max-width: 700px) { .eng-cert-grid { grid-template-columns: 1fr; } }

/* ── ipma/resources ─────────────────────────────── */
.eng-res-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 18px; }
.eng-res { display:flex; gap: 18px; padding: 22px 24px; background: #f8f9fb; border: 1px solid #e8ecf1; border-radius: 12px; text-decoration:none; color: inherit; transition: all 0.25s; }
.eng-res:hover { background:#fff; border-color: #0061c2; transform: translateY(-3px); box-shadow: 0 12px 24px rgba(10,61,124,0.10); }
.eng-res-icon { flex-shrink:0; width:48px; height:48px; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg, #e8f0fb, #d4e4f7); color:#0061c2; border-radius: 12px; }
.eng-res h4 { font-size: 15px; font-weight: 700; color: #1a1a1a; margin: 0 0 4px; }
.eng-res p { font-size: 13px; color: #666; line-height: 1.6; margin: 0; }
@media (max-width: 700px) { .eng-res-grid { grid-template-columns: 1fr; } }

/* 연혁 모바일 — 국문 layouts/sub.blade.php 의 768px 오버라이드와 동일 기준
   (word-break:keep-all 은 한글 전용이라 영문에는 적용하지 않음) */
@media (max-width: 768px) {
    .eng-timeline-text ul { padding-left: 16px; }
    .eng-timeline-text li { font-size: 13px; overflow-wrap: break-word; }
}