/* eiso 색 톤 한 벌 — 2026-10-28 대표 기준(선내 도면의 초록)에 맞춰 머리·메뉴·왼쪽 메뉴·단추·메인 아래·바닥글을 한 계열로.
 * 워커가 모든 쪽 머리에 이 파일을 붙인다(src/guide.ts TONE_LINK). 원래 CSS 는 그대로 두고 여기서만 덮는다 — 되돌리려면 TONE_LINK 만 빼면 된다.
 * 색 약속: 주색 짙은 초록 #1d6b45 · 보조 초록 #2f7a64 · 짙은 글자 #185a3b · 옅은 바탕 #e4f3ea · 경계 #cfe5d8 · 바탕 민트 #f3f8f5 ·
 *         포인트는 차분한 산호색 #cc5a4d(글자는 #a8443a) — 쨍한 빨강은 쓰지 않는다. 파랑은 갈래 표지 정도로만 남긴다. */

/* ── 머리와 첫 화면 띠 ── */
html body #header, html body #mainimg, html body #mainimg .mainEf li, html body #sv1, html body #sv2, html body #sv3, html body #sv4 {background-color:#f3f8f5;}
html body #menu-box .tMenu.on {background:#f3f8f5; box-shadow:0 0 0 100vmax #f3f8f5;}
html body #menu-box .tMenu {border-top-color:transparent;}

/* 머리 다섯 묶음 단추(파랑·장미·초록·보라·주황)는 갈래를 구분하는 색이라 그대로 둔다(대표 10/28 "상단 아이콘 5개는 색깔 유지") */

/* 머리 오른쪽 단추 한 벌(2026-10-28) — 그림 단추(회원가입·언어)와 글자 단추(로그아웃·관리자·EN)의 색·크기·모서리를 같게 한다.
   초록 #2f7a64(주 단추), 회색(로그인·로그아웃), 현재 언어는 흰 바탕 초록 테두리. 그림은 글자 읽기용으로 남기고(투명) 같은 자리에 글자를 그린다. */
html body #header #top_ar li > a:has(> img[alt="회원가입"]), html body #header #top_ar li > a:has(> img[alt="Đăng ký thành viên"]),
html body #header #top_ar li > a:has(> img[alt="베트남어"]), html body #header #top_ar li > a:has(> img[alt="Tiếng Hàn"]) {position:relative; display:inline-block; box-sizing:border-box; width:85px; height:30px; border:1px solid #2f7a64; border-radius:3px; background:#2f7a64; overflow:hidden; vertical-align:middle; text-decoration:none;}
html body #header #top_ar li > a:has(> img[alt="회원가입"]) img, html body #header #top_ar li > a:has(> img[alt="Đăng ký thành viên"]) img,
html body #header #top_ar li > a:has(> img[alt="베트남어"]) img, html body #header #top_ar li > a:has(> img[alt="Tiếng Hàn"]) img {opacity:0; width:100%; height:100%; display:block;}
html body #header #top_ar li > a:has(> img[alt="회원가입"])::after, html body #header #top_ar li > a:has(> img[alt="Đăng ký thành viên"])::after,
html body #header #top_ar li > a:has(> img[alt="베트남어"])::after, html body #header #top_ar li > a:has(> img[alt="Tiếng Hàn"])::after {position:absolute; left:0; right:0; top:0; line-height:28px; text-align:center; color:#fff; font-size:12px; font-weight:bold; white-space:nowrap;}
html body #header #top_ar li > a:has(> img[alt="회원가입"])::after {content:"회원가입";}
html body #header #top_ar li > a:has(> img[alt="Đăng ký thành viên"])::after {content:"Đăng ký";}
html body #header #top_ar li > a:has(> img[alt="베트남어"])::after {content:"베트남어";}
html body #header #top_ar li > a:has(> img[alt="Tiếng Hàn"])::after {content:"Tiếng Hàn";}
html body #header #top_ar li > a:has(> img[alt="회원가입"]):hover, html body #header #top_ar li > a:has(> img[alt="Đăng ký thành viên"]):hover,
html body #header #top_ar li > a:has(> img[alt="베트남어"]):hover, html body #header #top_ar li > a:has(> img[alt="Tiếng Hàn"]):hover {background:#1d5a47; border-color:#1d5a47;}
/* 영어 쪽의 KO | VI | EN 글자 — 같은 모양의 작은 단추로 */
html body #header #top_ar li.en-lang {font-size:0;}
html body #header #top_ar li.en-lang a, html body #header #top_ar li.en-lang strong {display:inline-block; box-sizing:border-box; width:85px; height:30px; line-height:28px; margin-left:4px; border:1px solid #2f7a64; border-radius:3px; text-align:center; font-size:12px; font-weight:bold; text-decoration:none; vertical-align:middle;}
html body #header #top_ar li.en-lang a {background:#2f7a64; color:#fff;}
html body #header #top_ar li.en-lang a:hover {background:#1d5a47; border-color:#1d5a47;}
html body #header #top_ar li.en-lang strong {background:#fff; color:#2f7a64;}

/* 큰 그림 점 단추 */
html body #mainimg #thumbNav a.mvbtn {background-image:none; background-color:#c5d8cc; border-radius:50%; display:inline-block; width:12px; height:12px; margin:0 5px; vertical-align:middle;}
html body #mainimg #thumbNav a.mvbtn.cur {background-color:#1d6b45;}

/* ── 안쪽 쪽 왼쪽 메뉴 — 머리 다섯 묶음의 색을 그대로 이어 묶음마다 색이 있게(대표 10/28 "모든 메뉴를 한 색으로 하면 묶음별 통일·가시성이 떨어진다").
   쪽이 어느 묶음인지는 왼쪽 제목 링크로 안다. 변수: --sc 진한 색 · --st 짙은 글자 · --sb 옅은 바탕 */
html body #left_ar {--sc:#2f7a64; --st:#1d5a47; --sb:#e4f3ea;}
html body #left_ar:has(h2 a[href*="/sub01_0"]) {--sc:#3373c0; --st:#1f4f8f; --sb:#e8f0fa;}
html body #left_ar:has(h2 a[href*="/sub02_71"]) {--sc:#a8404f; --st:#7d2f3b; --sb:#f9ecee;}
html body #left_ar:has(h2 a[href*="/sub02_3."]) {--sc:#2f7a64; --st:#1d5a47; --sb:#e4f3ea;}
html body #left_ar:has(h2 a[href*="/sub05_0"]) {--sc:#7a4da7; --st:#553482; --sb:#f0eaf7;}
html body #left_ar:has(h2 a[href*="/sub03_0"]) {--sc:#b45f06; --st:#8a4905; --sb:#fdf1e2;}
html body #left_ar h2 {background:var(--sc); color:#fff;}
html body #leftmenu2 li {background:none; border-bottom:1px solid #e6e9ee;}
html body #leftmenu2 > li > a {position:relative; color:#33404a;}
html body #leftmenu2 > li > a:after {content:"\203A"; position:absolute; right:12px; top:50%; margin-top:-12px; font-size:18px; line-height:24px; color:var(--sc); opacity:.55;}
html body #leftmenu2 > li > a:hover {background:var(--sb); color:var(--st);}
html body #leftmenu2 #leftOver {background:var(--sc); color:#fff; font-weight:bold;}
html body #leftmenu2 #leftOver:after {color:#fff; opacity:1;}
html body #leftmenu2 .leftmenu-sub ul {background:#f8f9fb;}
html body #leftmenu2 .leftmenu-sub ul li {background:none;}
html body #leftmenu2 .leftmenu-sub ul li a {border-bottom:1px dashed #d5dbe2;}
html body #leftmenu2 .leftmenu-sub ul li a.sub-over {background:var(--sb); color:var(--st); font-weight:bold;}
html body #leftmenu2 .leftmenu-sub li.lm-fn > ul {background:#f1f4f8;}
html body.eiso-mobile #left_ar h2 {background:var(--sc); color:#fff;}
html body.eiso-mobile #leftmenu2 #leftOver {background:var(--sb); color:var(--st);}
html body.eiso-mobile #leftmenu2 > li > a:after {display:none;}
html body.eiso-mobile #leftmenu2 .leftmenu-sub ul {background:#f8fafc;}

/* ── 메인 첫 화면 ── */
/* 큰 그림은 위아래를 자르지 않고 통째로 보이게(높이 340 → 420, 그림은 0.76배로 가운데) — 잘려서 그림 아래쪽이 사라지던 것(대표 10/28) */
@media (min-width:1200px) {
	html body #mainimg, html body #mainimg .mainEf, html body #mainimg .wrapper, html body #mainimg .mainEf li, html body #mainimg .mvimg {height:420px;}
	html body #mainimg .mainEf li {background-size:auto 420px; background-position:50% 0;}
}
html body #hub-ar {border-bottom-color:#2f9461;}

/* 선실 바로 가기 줄 — 네 칸을 같은 폭·같은 높이로, 제목은 칸 위에 한 줄, 단추는 그 아래(언어가 길어져도 칸 비율이 그대로)(2026-10-28) */
html body #hub-ar .sh-alt {display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; align-items:stretch;}
html body #hub-ar .sh-alt li {min-width:0; display:flex; flex-wrap:wrap; align-content:flex-start; align-items:flex-start; justify-content:flex-start; gap:8px 6px; padding:10px 12px 12px;}
html body #hub-ar .sh-alt b {flex:0 0 100%; margin:0 0 2px; padding:0 0 6px; border-bottom:1px solid color-mix(in srgb, var(--c) 38%, #fff); font-size:15px;}
html body #hub-ar .sh-alt a {white-space:normal; line-height:1.3; padding:4px 10px; font-size:13.5px; text-align:left;}
@media (max-width:1199px) {
	html body #hub-ar .sh-alt {grid-template-columns:repeat(2, minmax(0, 1fr));}
}
@media (max-width:560px) {
	html body #hub-ar .sh-alt {grid-template-columns:minmax(0, 1fr);}
}

/* ── 메인 아래 세 칸(공지·온라인 문의·문의 및 안내) — 2026-10-27 첫 화면 단순화 때 꾸밈이 빠진 것을 초록 한 계열로 되살림 ── */
html body #main_bot {background:#f3f8f5; padding:36px 0;}
html body #main_bot #mb_ar {gap:20px; align-items:stretch;}
html body #mb_ar #main_not, html body #mb_ar #main_bn {min-height:0; box-sizing:border-box; padding:24px 28px; background:#fff; border:1px solid #cfe5d8; border-top:4px solid #2f9461; border-radius:6px;}
html body #mb_ar #main_not {flex:1.2 1 0;}
html body #mb_ar #main_not h2 {margin:0; padding:0 0 12px 0; font-size:20px; font-weight:bold; color:#185a3b; line-height:1.3;}
html body #mb_ar #main_not h2 a {color:inherit; text-decoration:none;}
html body #mb_ar #main_not li {padding-bottom:9px; font-size:15px; line-height:1.5;}
html body #mb_ar #main_not li a {color:#2c3a32;}
html body #mb_ar #main_not li a:hover {color:#1d6b45; text-decoration:underline !important;}
html body #mb_ar #main_bn ul, html body #mb_ar #main_bn li {display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; width:100%; text-align:center;}
html body #mb_ar #main_bn li > a.mbn-ttl {display:flex; align-items:center; justify-content:center; gap:8px; font-size:20px; font-weight:bold; color:#185a3b !important; text-decoration:none;}
html body #mb_ar #main_bn li > a.mbn-ttl span {color:#185a3b !important;}
html body #mb_ar #main_bn .mbn-ttl svg path {stroke:#2f9461;}
html body #main_bn .mbn-desc {margin:0; font-size:14px; line-height:1.6; color:#4a5a50; text-align:center;}
html body #main_bn .mbn-cta {display:flex; flex-direction:column; align-items:center; gap:10px; padding:0;}
html body #main_bn .mbn-cta a.mbn-btn {display:inline-block; min-width:170px; padding:10px 22px; background:#1d6b45; color:#fff; text-align:center; font-size:15px; font-weight:bold; border-radius:4px; text-decoration:none;}
html body #main_bn .mbn-cta a.mbn-btn:hover {background:#185a3b;}
html body #main_bn .mbn-sub {font-size:13px; color:#55655b; line-height:1.6; white-space:normal; text-align:center;}
html body #main_bn .mbn-sub a {color:#1d6b45; text-decoration:underline;}
html body #mb_ar #mc_ar {flex:1 1 0; width:auto; min-height:0; display:flex;}
html body #mc_ar .mc-card {box-sizing:border-box; width:100%; padding:24px 28px; background:linear-gradient(135deg,#1d6b45,#2a8559); color:#fff; border-radius:6px; display:flex; flex-direction:column; justify-content:center; gap:6px;}
html body #mc_ar .mc-card h2 {margin:0; font-size:20px; font-weight:bold; color:#fff; line-height:1.3;}
html body #mc_ar .mc-card a {color:#fff; font-size:17px; font-weight:bold; text-decoration:none; word-break:break-all;}
html body #mc_ar .mc-card p {margin:0; font-size:14px; line-height:1.6; color:#e4f3ea;}
@media (max-width:1199px) {
	html body #mb_ar {display:block; padding:0 16px;}
	html body #mb_ar #main_not, html body #mb_ar #main_bn, html body #mb_ar #mc_ar {margin:0 0 12px 0;}
}

/* ── 바닥글 — 위아래 여백이 지나치게 넓던 것을 줄인다 ── */
html body #footer {padding:26px 0; border-top:1px solid #cfe5d8; background:#fff;}
html body #footer ul {height:auto; min-height:0;}

/* ── 폰에서 긴 이름(영어·베트남어)이 칸 밖으로 나가지 않게 — 알약 단추·단계 상자의 글은 줄을 바꾼다(2026-10-28 점검) ── */
@media (max-width:640px) {
	html body #contents .sp-pick.sp-pick.sp-pick {white-space:normal; max-width:100%; box-sizing:border-box; line-height:1.4; text-align:center;}
	html body #contents .op-flow a, html body #contents .op-steps8 li a {white-space:normal; overflow-wrap:anywhere;}
}

/* 머리 오른쪽 줄 — 로그인(회색 그림 단추)도 같은 모양의 글자 단추로, 영어 쪽 줄도 한 줄에 */
html body #header #top_ar li > a:has(> img[alt="로그인"]), html body #header #top_ar li > a:has(> img[alt="Đăng nhập"]) {position:relative; display:inline-block; box-sizing:border-box; width:85px; height:30px; border:1px solid #d1d2d2; border-radius:3px; background:#efefef; overflow:hidden; vertical-align:middle; text-decoration:none;}
html body #header #top_ar li > a:has(> img[alt="로그인"]) img, html body #header #top_ar li > a:has(> img[alt="Đăng nhập"]) img {opacity:0; width:100%; height:100%; display:block;}
html body #header #top_ar li > a:has(> img[alt="로그인"])::after, html body #header #top_ar li > a:has(> img[alt="Đăng nhập"])::after {position:absolute; left:0; right:0; top:0; line-height:28px; text-align:center; color:#555; font-size:12px; font-weight:bold; white-space:nowrap;}
html body #header #top_ar li > a:has(> img[alt="로그인"])::after {content:"로그인";}
html body #header #top_ar li > a:has(> img[alt="Đăng nhập"])::after {content:"Đăng nhập";}
html body #header #top_ar li > a:has(> img[alt="로그인"]):hover, html body #header #top_ar li > a:has(> img[alt="Đăng nhập"]):hover {background:#e3e3e3;}
html body #header #top_ar {width:auto; max-width:440px;}
html body #header #top_ar ul {display:flex; align-items:center; justify-content:flex-end; white-space:nowrap;}
html body #header #top_ar li {float:none; display:block;}

/* ── 바닥글 균형(2026-10-28) — 베트남어·영어는 글이 길어 왼쪽 칸이 좁게 눌리고 오른쪽 링크가 한 줄로 길게 늘어졌다. 두 칸을 같은 비율로 나누고 링크는 항목 단위로 줄을 바꾼다 ── */
html body #footer ul {display:flex; align-items:flex-start; justify-content:space-between; gap:36px; width:100%; max-width:1200px; margin:0 auto; padding:0; box-sizing:border-box;}
html body #footer ul > li {float:none; box-sizing:border-box; font-size:13px; line-height:1.85;}
html body #footer ul > li:first-child {flex:1 1 56%; width:auto !important; max-width:660px; color:#6b6b6b;}
html body #footer ul > li:last-child {flex:1 1 44%; width:auto !important; max-width:520px; text-align:right; color:#555; line-height:2;}
html body #footer ul > li:last-child a {white-space:nowrap; color:#333;}
html body #footer ul > li a {font-size:inherit;}
html body #footer ul > li:first-child a[href*="9393114"] {font-size:12px;}
@media (max-width:1199px) {
	html body #footer ul {flex-direction:column; gap:10px; padding:0 16px;}
	html body #footer ul > li:first-child, html body #footer ul > li:last-child {flex:none; max-width:none; width:100% !important; text-align:left;}
}
html body #footer ul > li {white-space:normal !important; overflow-wrap:break-word;}

/* ── 쪽 본문의 하늘색·남색 바탕 색(링크·소제목·표 줄·안내 상자) — 그 쪽이 속한 묶음의 색으로(2026-10-28 팀장 "하단의 쪽들은 아직 하늘색").
   묶음 색은 왼쪽 제목 링크로 안다(위 --sc·--st·--sb 와 같은 값). 갈래(경제적 번영 등)를 구분하는 색 칩·띠는 그대로 둔다. ── */
html body #contents {--sc:#2f7a64; --st:#1d5a47; --sb:#e4f3ea;}
html body:has(#left_ar h2 a[href*="/sub01_0"]) #contents {--sc:#3373c0; --st:#1f4f8f; --sb:#e8f0fa;}
html body:has(#left_ar h2 a[href*="/sub02_71"]) #contents {--sc:#a8404f; --st:#7d2f3b; --sb:#f9ecee;}
html body:has(#left_ar h2 a[href*="/sub02_3."]) #contents {--sc:#2f7a64; --st:#1d5a47; --sb:#e4f3ea;}
html body:has(#left_ar h2 a[href*="/sub05_0"]) #contents {--sc:#7a4da7; --st:#553482; --sb:#f0eaf7;}
html body:has(#left_ar h2 a[href*="/sub03_0"]) #contents {--sc:#b45f06; --st:#8a4905; --sb:#fdf1e2;}
html body #contents a:not([class]):not([style]):not([class*="-go"] > a):not([class*="jump"] > a):not([class*="-dl"] > a) {color:var(--st);}
html body #contents :is(h3, h4, h5, h6) {color:var(--st);}
html body #contents b.kl-h {color:var(--st); border-left-color:var(--sc);}
html body #contents :is(tr, td, th) {border-color:#dde7e1;}
html body #contents :is(.op-lead, details) {border-color:var(--sc) !important;}
html body #contents .op-lead {background:var(--sb) !important;}
html body #contents details {border-color:color-mix(in srgb, var(--sc) 55%, #fff) !important;}
html body #contents details > summary {color:var(--st);}

/* ── 갈색·하늘색 단추 정리(2026-10-28 팀장 "갈색 버튼류 고쳐") ──
   커뮤니티 묶음 색은 어두운 갈색(#aa5b0a)에서 선명한 주황(#b45f06, 흰 글자 대비 4.5)으로, 왼쪽 아래 문의 상자 셋은 파랑·초록·갈색이 제각각이던 것을 초록 둘 + 산호(주 행동)로 */
html body #menu-box .tMenu > ul > li.s5 > a.mm {background:#b45f06;}
html body #left_ar #left_ban ul.lb3 li.c1 {background:#2f7a64;}
html body #left_ar #left_ban ul.lb3 li.c2 {background:#1d5a47;}
html body #left_ar #left_ban ul.lb3 li.c3 {background:#b84a3e;}

/* ── 회원 쪽(로그인·가입 등) 쨍한 빨강·검정 단추를 주 단추 초록으로(2026-10-28 점검) ── */
html body #contents input.ipt_btn33, html body #contents input.ipt_btn33[type="submit"] {background-color:#2f7a64; border-color:#2f7a64; color:#fff;}
html body #contents input.ipt_btn33:hover {background-color:#1d5a47;}
html body #contents input.ipt_btn, html body #contents button.ipt_btn {background-color:#1d5a47;}

/* 안내 쪽 첫머리 상자(…-lead: 남색 줄 + 하늘색 바탕)도 그 쪽 묶음 색으로 */
html body #contents :is([class$="-lead"], [class*="-lead "]):not(.op-lead) {background:var(--sb); border-color:var(--sc);}

/* 정보 수집 묶음은 왼쪽 제목이 링크가 아니라(글자만) 묶음 색을 못 찾았다 — 왼쪽 목록에 정보 수집 안내(sub01_0)가 있으면 파랑 묶음 */
html body #left_ar:has(#leftmenu2 a[href*="/sub01_0"]) {--sc:#3373c0; --st:#1f4f8f; --sb:#e8f0fa;}
html body:has(#left_ar #leftmenu2 a[href*="/sub01_0"]) #contents {--sc:#3373c0; --st:#1f4f8f; --sb:#e8f0fa;}

/* 영어처럼 글이 긴 파일 올리기 단추는 높이를 글에 맞춘다(2줄 글이 칸 밖으로 넘치던 것) */
html body #contents label.kf-folder-btn {height:auto; min-height:34px; line-height:1.4; padding-top:6px; padding-bottom:6px; box-sizing:border-box; white-space:normal;}

/* 눌러 고르는 것(탭·단계 고르기·체크 칸)의 하늘색 #5b7fae 도 그 쪽 묶음 색으로 */
html body #contents #tab_btn li.on {background:var(--sc) !important; border-color:var(--sc) !important;}
html body #contents :is(select.pick-sel, select.kf-step-sel) {background-color:var(--sc) !important; border-color:var(--st) !important;}
html body #contents :is(input[type=checkbox], input[type=radio]) {accent-color:var(--sc);}
html body #contents label:has(> input[type=checkbox]:checked), html body #contents label:has(> input[type=radio]:checked) {background:var(--sc); border-color:var(--st); color:#fff;}

/* 베트남어 쪽 왼쪽 목록의 현재 쪽 표시(파랑 !important)도 묶음 색으로 */
html:lang(vi) body #leftmenu2 > li > #leftOver {background:var(--sb) !important; color:var(--st); font-weight:bold;}

/* 왼쪽 목록 오른쪽 화살표(›)는 베트남어 쪽에만 보였다 — ko·en 과 같게 뺀다(2026-10-28) */
html:lang(vi) body #leftmenu2 > li > a:after {display:none;}

/* ── 머리 메뉴를 포시 그림(굵은 짙은 초록 테두리 + 어긋난 그림자)과 어울리게(2026-10-28 팀장 "대표님 포시에 어울리도록") ──
   다섯 단추 색은 그대로, 테두리·그림자·글자만 맞춘다 */
html body #menu-box .tMenu > ul > li > a.mm {box-sizing:border-box; height:40px; border:2px solid #12331f; box-shadow:2px 2px 0 rgba(18,51,31,.42); font-weight:800; letter-spacing:-.2px;}
html body #menu-box .tMenu > ul > li > a.mm:hover, html body #menu-box .tMenu > ul > li > a.mm:focus {filter:none; transform:translate(1px,1px); box-shadow:2px 2px 0 rgba(18,51,31,.42);}
html body #menu-box .tMenu > ul > li.sel > a.mm {box-shadow:2px 2px 0 #12331f;}
html body #left_ar h2 {border:2px solid #12331f; border-radius:10px; box-shadow:2px 2px 0 rgba(18,51,31,.42);}
html body #left_ar #left_ban ul.lb3 li {border:2px solid #12331f; box-shadow:2px 2px 0 rgba(18,51,31,.42); box-sizing:border-box;}
/* 굵은 선 두께 정리(10/28): 머리 알약·왼쪽 제목·문의 상자·링크 줄 상자 2px, 그림자 2px */
html body #hub-ar .sh-alt li {border-width:2px;}
html body #mainimg #thumbNav a.mvbtn {padding:0; min-width:0; min-height:0;}
/* 첫 화면: 배(허브)를 먼저, 큰 그림 띠는 그 아래(10/28 팀장 "배를 위로 올리고 이미지를 아래로") */
html body #wrap:has(> #hub-ar) {display:flex; flex-direction:column;}
html body #wrap:has(> #hub-ar) > #mainimg {order:1;}
html body #wrap:has(> #hub-ar) > #hub-ar ~ * {order:2;}
/* 첫 화면 PC: 배 도면까지 스크롤 없이 한 화면에(10/28 팀장) — 머리글 줄이고 도면 폭을 화면 높이에 맞춤 */
@media (min-width:1200px) {
  html body #hub-ar .hb-in {padding-top:12px; padding-bottom:14px;}
  html body #hub-ar .hb-kick {margin-bottom:6px;}
  html body #hub-ar .hb-h {font-size:28px; margin-bottom:2px;}
  html body #hub-ar .hb-sub {font-size:14.5px; line-height:1.5; margin-bottom:2px;}
  html body #hub-ar #ship-ar {max-width:max(760px, calc((100vh - 290px) * 1.739)); margin-left:auto; margin-right:auto;}
}
/* 첫 화면 PC: 맨 위 머리 띠를 낮춰 위로 붙이고 배를 키운다. 링크 줄은 스크롤하면 보인다 */
@media (min-width:1200px) {
  html body #hub-ar .sh-alt {margin-top:max(16px, calc(100vh - 100px - 120px - min(690px, 100vh - 241px)));}
  html body #hub-ar .hb-in {padding-top:8px; padding-bottom:10px;}
  html body #hub-ar #ship-ar {max-width:max(760px, calc((100vh - 241px) * 1.739));}
}
/* 링크 줄 상자 안 단추: 두 칸 격자로 같은 폭·같은 높이, 하나뿐이면 가득(10/28 팀장 "배치 밸런싱") */
html body #hub-ar .sh-alt li {display:grid; grid-template-columns:1fr 1fr; gap:6px; align-content:start;}
html body #hub-ar .sh-alt li > b {grid-column:1 / -1;}
html body #hub-ar .sh-alt li > a {justify-content:center; text-align:center; white-space:normal; line-height:1.25; padding-top:4px; padding-bottom:4px;}
html body #hub-ar .sh-alt li > a:last-child:nth-child(even) {grid-column:1 / -1;}
/* 폰 머리 단추 줄: 넷(영어판은 다섯)이 폭에 맞게 같은 칸으로 나뉘어 옆으로 넘치지 않게(10/28 팀장 "모바일은 모바일 고유의 레이아웃") */
@media (max-width:699px) {
  html body #header #top_ar {width:100% !important; flex:1 1 100% !important; max-width:none !important; box-sizing:border-box; margin-left:0 !important; padding:6px 12px 0 12px !important;}
  html body #header #top_ar ul {display:flex !important; flex-wrap:nowrap; gap:5px; width:100%; margin:0; padding:0;}
  html body #header #top_ar li {flex:1 1 0; min-width:0; float:none; margin:0 !important; padding:0 !important;}
  html body #header #top_ar li > a, html body #header #top_ar li > strong, html body #header #top_ar li a.en-hb {width:100% !important; padding:0 !important; font-size:12px !important; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
  html body #header #top_ar li.en-lang {display:flex !important; gap:5px; flex:3 1 0;}
  html body #header #top_ar li.en-lang a, html body #header #top_ar li.en-lang strong {flex:1 1 0; width:auto !important; margin:0 !important;}
}
@media (max-width:699px) { html body #header #top_ar li.en-lang a, html body #header #top_ar li.en-lang strong {font-size:11px !important;} html body #header #top_ar li.en-lang {flex:3.4 1 0;} }
@media (max-width:699px) { html body #header #top_ar li.en-lang a, html body #header #top_ar li.en-lang strong {flex:1 1 auto; padding:0 3px !important; letter-spacing:-.2px;} html body #header #top_ar li.en-lang {flex:3.6 1 0;} }
/* 영어·베트남어 링크 줄: 이름이 길어 두 칸에서 3~4줄로 늘어지므로, 링크가 셋 이하인 상자는 한 칸으로 쌓는다(넷이면 2x2). 한 줄 높이는 같게(10/28 팀장) */
html:lang(en) body #hub-ar .sh-alt li:not(:has(> a:nth-of-type(4))), html:lang(vi) body #hub-ar .sh-alt li:not(:has(> a:nth-of-type(4))) {grid-template-columns:1fr;}
html:lang(en) body #hub-ar .sh-alt li > a, html:lang(vi) body #hub-ar .sh-alt li > a {min-height:34px;}
html:lang(en) body #hub-ar .sh-alt li > a:last-child:nth-child(even), html:lang(vi) body #hub-ar .sh-alt li > a:last-child:nth-child(even) {grid-column:auto;}
html:lang(en) body #hub-ar .sh-alt li:has(> a:nth-of-type(4)) > a:last-child:nth-child(even) {grid-column:auto;}
html body #hub-ar .sh-alt li > a {align-self:stretch;}
/* 머리 띠(로고·언어·로그인 단추) 위아래 가운데(10/28 팀장): 띠 높이 100 안에서 로고(50)는 25, 단추(30)는 35 에 둔다. 첫 화면 띠도 100 으로 같게 */
@media (min-width:1200px) {
  html body #header #hd_ar h1 {top:25px !important;}
  html body #hd_ar #top_ar {top:35px; overflow:visible; height:30px;}
  html body:has(#hub-ar) #header, html body:has(#hub-ar) #hd_ar {height:100px;}
}
/* 로그인(회색) 단추 — 옅은 테두리가 배경에 묻혀 잘려 보이던 것을 또렷하게 */
html body #header #top_ar .en-gray, html body #header #top_ar li > a:has(> img[alt="로그인"]), html body #header #top_ar li > a:has(> img[alt="Đăng nhập"]) {border:1px solid #b9bec4 !important; background:#eceeef;}