/* ============================================================
   UAE 한인회 uaekorean.com — 반응형 스타일시트
   컨셉: 화이트 배경, 모던 커뮤니티, 태극 레드/블루 포인트
   ============================================================ */
:root{
  --blue:#1B4FA0; --blue-d:#12386F; --blue-l:#EAF1FB;
  --red:#C8102E; --gold:#C9A227; --green:#0B6E4F;
  --ink:#1B2430; --mute:#6B7686; --line:#E4E9F0; --bg:#F6F8FB;
  --radius:14px; --shadow:0 4px 18px rgba(20,40,80,.07);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:'Pretendard','Apple SD Gothic Neo','Noto Sans KR','Malgun Gothic',sans-serif;
  color:var(--ink);background:#fff;font-size:15px;line-height:1.6}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mt32{margin-top:32px}
.muted{color:var(--mute)}.small{font-size:12.5px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;cursor:pointer;
  border-radius:10px;font-size:14.5px;font-weight:700;padding:11px 20px;transition:.15s;white-space:nowrap}
.btn-primary{background:var(--blue);color:#fff}.btn-primary:hover{background:var(--blue-d)}
.btn-outline{background:#fff;color:var(--blue);border:1.5px solid var(--blue)}
.btn-outline:hover{background:var(--blue-l)}
.btn-red{background:var(--red);color:#fff}
.btn-ghost{background:var(--bg);color:var(--ink)}
.btn-sm{padding:7px 13px;font-size:13px;border-radius:8px}
.badge{display:inline-block;font-size:11.5px;font-weight:700;border-radius:6px;padding:2px 8px}
.badge-blue{background:var(--blue-l);color:var(--blue)}
.badge-red{background:#FDECEF;color:var(--red)}
.badge-gold{background:#FBF3DC;color:#8C6F14}
.badge-green{background:#E8F4EF;color:var(--green)}
.badge-gray{background:#EEF1F5;color:var(--mute)}

/* ---------- 헤더 ---------- */
.topbar{border-bottom:1px solid var(--line);background:#fff;font-size:13px}
.topbar .wrap{display:flex;justify-content:flex-end;gap:18px;padding-top:8px;padding-bottom:8px}
.topbar a:hover{color:var(--blue)}
header.site{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
.hd{display:flex;align-items:center;gap:28px;height:70px}
.hd .logo{flex:0 0 auto}
.hd .logo img{height:44px;width:auto;max-width:none;flex:0 0 auto}
nav.gnb{display:flex;gap:4px;margin-left:auto}
.gnb-item{position:relative}
.gnb-item>a{display:flex;align-items:center;gap:3px;padding:10px 14px;font-weight:700;font-size:15px;border-radius:10px;white-space:nowrap}
.gnb-item>a:hover,.gnb-item>a.on{background:var(--blue-l);color:var(--blue)}
.gnb-item .caret{font-style:normal;font-size:10px;opacity:.6;transition:transform .2s}
.gnb-item:hover>a .caret{transform:rotate(180deg);opacity:1}
/* 서브메뉴 드롭다운 */
.gnb-sub{position:absolute;top:100%;left:0;min-width:170px;background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:0 10px 30px rgba(15,23,38,.14);padding:7px;z-index:1200;
  opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s,transform .18s,visibility .18s}
.gnb-item:hover .gnb-sub{opacity:1;visibility:visible;transform:translateY(0)}
.gnb-sub::before{content:'';position:absolute;top:-8px;left:0;right:0;height:8px}
.gnb-sub a{display:block;padding:9px 14px;font-size:13.5px;font-weight:600;color:var(--ink);border-radius:8px;white-space:nowrap}
.gnb-sub a:hover{background:var(--blue-l);color:var(--blue)}
[dir="rtl"] .gnb-sub{left:auto;right:0}
.hd-actions{display:flex;align-items:center;gap:8px}
.hamburger{display:none;background:none;border:0;cursor:pointer;padding:8px}
.hamburger span{display:block;width:22px;height:2.5px;background:var(--ink);margin:5px 0;border-radius:2px;transition:.2s}

/* 모바일 메뉴 */
.mnav{display:none;position:fixed;inset:0;z-index:200;background:rgba(15,25,45,.45)}
.mnav.open{display:block}
.mnav-panel{position:absolute;right:0;top:0;bottom:0;width:min(320px,85vw);background:#fff;
  padding:22px;overflow-y:auto;box-shadow:-8px 0 30px rgba(0,0,0,.15)}
.mnav-panel .close{float:right;font-size:26px;background:none;border:0;cursor:pointer;color:var(--mute)}
.mnav-panel h4{margin:18px 0 8px;font-size:13px;color:var(--mute);font-weight:700}
.mnav-panel a.mlink{display:block;padding:11px 12px;border-radius:10px;font-weight:600}
.mnav-panel a.mlink:hover{background:var(--blue-l);color:var(--blue)}
.mnav-auth{display:flex;gap:8px;margin-top:14px}
.mnav-auth .btn{flex:1}

/* ---------- 히어로 ---------- */
.hero{background:linear-gradient(115deg,#EAF1FB 0%,#F6FAFF 45%,#FDF3F4 100%);
  border-bottom:1px solid var(--line)}
.hero .wrap{display:grid;grid-template-columns:1.25fr .9fr;gap:34px;padding:46px 16px;align-items:stretch}
.hero .hero-left{display:flex;flex-direction:column}
.hero .hero-left .hero-ai{margin-top:auto;transform:translateY(12px)}  /* 공지사항 하단선 기준 12px 더 아래 */
.hero h1{font-size:34px;line-height:1.32;font-weight:800;letter-spacing:-.5px}
.hero h1 .b{color:var(--blue)}.hero h1 .r{color:var(--red)}
.hero p.sub{margin-top:12px;color:var(--mute);font-size:16px}
.quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:26px}
/* ===== UAE·한국 시계 =====
   inline : index 히어로 안 — 좁은 화면에서만
   fixed  : 브라우저 고정 세로 패널 — 본문(1180px) 옆에 자리가 나는 넓은 화면에서만 */
.clocks{display:flex;gap:10px;flex-wrap:wrap}
.clocks-inline{margin-top:14px}
.clk{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);
     border-radius:var(--radius);padding:9px 14px;min-width:0}
.clk-flag{width:24px;height:16px;border-radius:2.5px;flex:none;object-fit:cover;
         box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.clk-name{font-size:13px;color:var(--mute);white-space:nowrap}
.clk-time{font-size:15px;font-weight:800;letter-spacing:.3px;
          font-variant-numeric:tabular-nums;font-feature-settings:"tnum";white-space:nowrap}
.clk-day{font-size:11px;color:var(--blue);font-weight:700;white-space:nowrap}

/* 고정 패널은 기본으로 숨기고, 자리가 확보되는 화면에서만 켠다 */
.clocks-fixed{display:none}

@media (max-width:420px){ .clocks-inline{flex-direction:column} }

/* 본문 1180 + 좌우 여백에 패널(130)이 넉넉히 들어가는 폭부터 고정 패널 사용 */
@media (min-width:1500px){
  .clocks-inline{display:none}
  .clocks-fixed{
    display:flex;flex-direction:column;gap:0;
    position:fixed;top:82px;left:calc(50% + 596px);
    width:130px;z-index:150;
    background:#fff;border:1px solid var(--line);border-radius:var(--radius);
    box-shadow:0 6px 20px rgba(15,25,45,.08);overflow:hidden}
  .clocks-fixed .clk{flex:1;flex-direction:column;justify-content:center;gap:5px;
    border:0;border-radius:0;background:transparent;padding:14px 8px;text-align:center}
  .clocks-fixed .clk + .clk{border-top:1px solid var(--line)}
  .clocks-fixed .clk-flag{width:34px;height:23px}
  .clocks-fixed .clk-name{font-size:12px}
  .clocks-fixed .clk-time{font-size:17px}
  [dir="rtl"] .clocks-fixed{left:auto;right:calc(50% + 596px)}
}
/* 세로가 짧은 화면에서는 패널이 화면을 벗어나므로 접는다 */
@media (max-height:520px){ .clocks-fixed{display:none !important} }
.quick-10{grid-template-columns:repeat(10,minmax(0,1fr))}
.quick a{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 8px;
  text-align:center;font-size:13px;font-weight:700;box-shadow:var(--shadow);transition:.15s}
.quick a:hover{transform:translateY(-3px);border-color:var(--blue);color:var(--blue)}
.quick .ico{font-size:24px;display:block;margin-bottom:7px}
.hero-notice{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:20px 22px;align-self:start}
.card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.card-head h3{font-size:17px;font-weight:800}
.card-head a.more{font-size:12.5px;color:var(--mute)}
ul.plain{list-style:none}
ul.plain li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed var(--line);font-size:14px}
ul.plain li:last-child{border-bottom:0}
ul.plain li a{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
ul.plain li a:hover{color:var(--blue)}
ul.plain li .d{color:var(--mute);font-size:12.5px;flex-shrink:0}

/* ---------- 방문자 카운터 ---------- */
.counter-strip{background:var(--blue-d);color:#fff}
.counter-strip .wrap{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:14px 16px;text-align:center}
.counter-strip .c .n{font-size:20px;font-weight:800;color:#FFD97A}
.counter-strip .c .l{font-size:11.5px;opacity:.8}

/* ---------- 섹션 공통 ---------- */
section.sec{padding:34px 0}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px}
.sec-head h2{font-size:21px;font-weight:800;letter-spacing:-.3px}
.sec-head h2 .dot{color:var(--red)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 22px}
.card h3.ct{font-size:16.5px;font-weight:800;margin-bottom:10px}

/* 배너 */
.banner-top{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.banner-top img{width:100%;height:auto}
.banner-top .ph{background:linear-gradient(100deg,var(--blue),var(--blue-d));color:#fff;padding:26px;display:flex;
  justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.banner-top .ph b{font-size:19px}
.partner-row{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.partner-row a{border:1px solid var(--line);border-radius:12px;padding:14px 10px;text-align:center;
  font-size:12.5px;font-weight:700;color:var(--mute);background:#fff;display:flex;align-items:center;justify-content:center;min-height:64px}
.partner-row a:hover{border-color:var(--blue);color:var(--blue)}
.partner-row img{max-height:40px;margin:0 auto}
.strip-banners{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.strip-banners a{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;
  min-height:56px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--mute)}
.strip-banners img{width:100%;height:56px;object-fit:cover}

/* 커뮤니티 최신글 */
.board-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

/* 업체 디렉토리 */
.dir-item{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px dashed var(--line)}
.dir-item:last-child{border-bottom:0}
.dir-item .thumb{width:44px;height:44px;border-radius:10px;background:var(--blue-l);display:flex;align-items:center;
  justify-content:center;font-size:19px;flex-shrink:0;overflow:hidden}
.dir-item .thumb img{width:100%;height:100%;object-fit:cover}
.dir-item .nm{font-weight:700;font-size:14px}
.dir-item .cat{font-size:12px;color:var(--mute)}

/* CTA */
.cta{background:linear-gradient(115deg,var(--blue) 0%,var(--blue-d) 70%);color:#fff;border-radius:var(--radius);
  padding:30px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.cta h3{font-size:21px;font-weight:800}
.cta p{opacity:.85;margin-top:4px}
.cta .btn{background:#fff;color:var(--blue)}

/* ---------- 게시판 ---------- */
.page-title{padding:30px 0 8px}
.page-title h1{font-size:24px;font-weight:800}
.page-title p{color:var(--mute);margin-top:4px;font-size:14px}
.board-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:14px 0;flex-wrap:wrap}
.board-toolbar form{display:flex;gap:8px}
.list-table{width:100%;border-collapse:collapse;background:#fff;border-top:2px solid var(--ink)}
.list-table th{background:var(--bg);font-size:13px;padding:11px 10px;border-bottom:1px solid var(--line)}
.list-table td{padding:12px 10px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:middle}
.list-table td.tt a:hover{color:var(--blue);text-decoration:underline}
.list-table .c{text-align:center}
.list-table tr.notice{background:#FBFCFE}
.paging{display:flex;justify-content:center;gap:6px;margin:22px 0}
.paging a,.paging b{min-width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:8px;font-size:13.5px}
.paging b{background:var(--blue);color:#fff;border-color:var(--blue)}
.paging a:hover{border-color:var(--blue);color:var(--blue)}

/* 글보기 */
.view-head{border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:18px}
.view-head h1{font-size:21px;font-weight:800;line-height:1.4}
.view-meta{display:flex;gap:14px;color:var(--mute);font-size:13px;margin-top:8px;flex-wrap:wrap}
.view-body{min-height:180px;font-size:15.5px;line-height:1.8;word-break:break-word}
.view-body img{border-radius:8px}
.cmt{border-top:2px solid var(--ink);margin-top:26px;padding-top:16px}
.cmt-item{padding:12px 0;border-bottom:1px solid var(--line)}
.cmt-item .who{font-weight:700;font-size:13.5px}
.cmt-item .txt{margin-top:4px;font-size:14px}
textarea.inp{min-height:110px;resize:vertical}

/* ---------- 폼 ---------- */
.form-card{max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:30px}
.form-card h1{font-size:22px;font-weight:800;margin-bottom:6px}
.form-row{margin-top:16px}
.form-row label.lb{display:block;font-size:13.5px;font-weight:700;margin-bottom:6px}
.form-row label.lb .req{color:var(--red)}
.inp{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:11px 13px;font-size:14.5px;background:#fff}
.inp:focus{outline:none;border-color:var(--blue)}
.inp-row{display:flex;gap:8px}
.inp-row .inp{flex:1}
.sel-country{max-width:230px}
.radio-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.radio-cards label{border:1.5px solid var(--line);border-radius:12px;padding:15px;cursor:pointer;display:block}
.radio-cards input{margin-right:6px}
.radio-cards label.on{border-color:var(--blue);background:var(--blue-l)}
.radio-cards .t{font-weight:800}
.radio-cards .s{font-size:12.5px;color:var(--mute);margin-top:3px}
.assoc-box{border:1.5px dashed var(--blue);border-radius:12px;padding:18px;margin-top:16px;background:#FBFDFF}
.assoc-box h4{font-size:14.5px;color:var(--blue);margin-bottom:4px}
.terms-box{max-height:180px;overflow-y:auto;border:1px solid var(--line);border-radius:10px;padding:14px;
  font-size:12.5px;color:var(--mute);background:var(--bg);margin-top:8px;white-space:pre-line}
.alert{border-radius:10px;padding:12px 15px;font-size:14px;margin-top:14px}
.alert-err{background:#FDECEF;color:var(--red);border:1px solid #F3C2CB}
.alert-ok{background:#E8F4EF;color:var(--green);border:1px solid #BFE0D2}

/* ---------- 푸터 ---------- */
footer.site{margin-top:40px;border-top:1px solid var(--line);background:var(--bg)}
footer.site .wrap{padding:30px 16px;display:flex;gap:26px;justify-content:space-between;flex-wrap:wrap}
footer.site .f-logo img{height:40px;width:auto;margin-bottom:10px}
footer.site .f-info{font-size:13px;color:var(--mute);line-height:1.8}
footer.site .f-links{display:flex;gap:16px;font-size:13px;font-weight:600}
footer.site .copy{font-size:12px;color:#9AA3B0;margin-top:8px}

/* ---------- 반응형 ---------- */
/* 헤더: 로고 크기는 고정이므로, 메뉴가 들어갈 자리가 부족해지는 960px 이하에서는
   상단 메뉴 대신 햄버거 메뉴로 전환한다 (로고가 찌그러지는 것을 막기 위함) */
@media (max-width:960px){
  nav.gnb{display:none}
  .hamburger{display:block}
  .hd{gap:16px}
  .hd-actions .hd-search input{width:120px}
}
@media (max-width:1024px){
  .quick-10{grid-template-columns:repeat(5,minmax(0,1fr))}
  .hero .wrap{grid-template-columns:1fr;gap:22px}
  .grid-3,.board-cols{grid-template-columns:1fr 1fr}
  .partner-row{grid-template-columns:repeat(3,1fr)}
  .strip-banners{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  body{font-size:14.5px}
  nav.gnb{display:none}
  .hamburger{display:block}
  .hd{height:60px;gap:14px}
  .hd .logo img{height:36px;max-width:none}
  .topbar{display:none}
  .hero .wrap{padding:30px 16px}
  .hero h1{font-size:25px}
  .quick,.quick-10{grid-template-columns:repeat(3,minmax(0,1fr))}
  .counter-strip .wrap{grid-template-columns:repeat(5,1fr);padding:10px 8px}
  .counter-strip .c .n{font-size:15px}
  .counter-strip .c .l{font-size:10px}
  .grid-2,.grid-3,.board-cols{grid-template-columns:1fr}
  .radio-cards{grid-template-columns:1fr}
  .form-card{padding:20px 16px}
  .list-table .hide-m{display:none}
  .list-table th,.list-table td{padding:10px 6px;font-size:13.5px}
  .partner-row{grid-template-columns:repeat(2,1fr)}
  .cta{padding:22px;text-align:center;justify-content:center}
  section.sec{padding:24px 0}
}

/* ---------- 언어 전환 ---------- */
.lang-switch{display:inline-flex;gap:2px;margin-inline-end:auto;background:var(--bg);border:1px solid var(--line);
  border-radius:9px;padding:2px}
.lang-switch a{padding:3px 10px;border-radius:7px;font-size:12px;font-weight:700;color:var(--mute)}
.lang-switch a.on{background:var(--blue);color:#fff}
.lang-switch a:hover:not(.on){color:var(--blue)}
.mnav-lang{margin-top:14px;width:fit-content}
.topbar .wrap{align-items:center}

/* ---------- 아랍어(RTL) 지원 ---------- */
[dir="rtl"] body,body.lang-ar{font-family:'Segoe UI','Tahoma','Noto Sans Arabic','Noto Kufi Arabic','Dubai',
  'Pretendard','Apple SD Gothic Neo',sans-serif}
[dir="rtl"] nav.gnb{margin-left:0;margin-right:auto}
[dir="rtl"] .list-table th,[dir="rtl"] .list-table td{text-align:right}
[dir="rtl"] .list-table .c{text-align:center}
[dir="rtl"] .adm-table th,[dir="rtl"] .adm-table td{text-align:right}
[dir="rtl"] ul.plain li a{text-align:right}
[dir="rtl"] p{text-align:right}
[dir="rtl"] .view-body{text-align:right}
[dir="rtl"] .mnav-panel{right:auto;left:0;box-shadow:8px 0 30px rgba(0,0,0,.15)}
[dir="rtl"] .mnav-panel .close{float:left}
[dir="rtl"] .hero h1{letter-spacing:0}
[dir="rtl"] .sec-head h2{letter-spacing:0}
body.lang-ar .hero h1{font-size:31px;line-height:1.5}
@media (max-width:760px){ body.lang-ar .hero h1{font-size:23px} }

/* GNB 메뉴 확장(9개) 대응 */
@media (max-width:1260px){ .gnb-item>a{padding:10px 9px;font-size:14px} }
@media (max-width:1080px) and (min-width:761px){ .gnb-item>a{padding:9px 7px;font-size:13px} }
.gnb-item>a.nav-map{color:var(--blue)}

/* ---------- UAE 뉴스 리스트 ---------- */
.news-item{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line)}
.news-item:last-child{border-bottom:0}
.news-item:hover .news-tt{color:var(--blue);text-decoration:underline}
.news-tt{font-weight:700;font-size:15px;line-height:1.5}
.news-ext{color:var(--mute);font-size:12px}
.news-sm{font-size:13px;color:#4A5568;margin-top:3px;line-height:1.6}
.news-orig{font-size:12px;color:#9AA3B0;margin-top:3px}
.news-meta{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex-shrink:0;padding-top:2px}
@media (max-width:760px){
  .news-item{flex-direction:column;gap:6px}
  .news-meta{flex-direction:row;align-items:center}
}

/* ---------- 상단바 빠른 링크 (뉴스/지도) ---------- */
.top-quick{display:inline-flex;gap:14px;margin-inline-end:auto;padding-inline-start:14px}
.top-quick a{font-weight:700;color:var(--blue)}
.top-quick a:hover{text-decoration:underline}

/* ---------- UAE 뉴스 롤링 티커 ---------- */
.ticker{background:var(--blue-d);color:#fff}
.ticker .wrap{display:flex;align-items:center;gap:16px;padding:13px 16px;min-height:78px}
.tk-label{font-weight:800;color:#FFD97A;flex-shrink:0;font-size:14.5px}
.tk-body{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}
.tk-row{display:none;align-items:center;gap:10px;font-size:14px;animation:tkfade .5s}
.tk-row.show{display:flex}
.tk-row a{color:#fff;font-weight:600;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.tk-row a:hover{color:#FFD97A;text-decoration:underline}
.tk-src{background:rgba(255,255,255,.14);border-radius:6px;padding:2px 9px;font-size:11.5px;font-weight:700;color:#FFD97A;flex-shrink:0;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-time{font-size:12px;opacity:.72;flex-shrink:0}
.tk-more{color:#B9CCE8;font-size:12.5px;flex-shrink:0;font-weight:700}
.tk-more:hover{color:#fff}
@keyframes tkfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (max-width:760px){
  .tk-label{display:none}
  .ticker .wrap{padding:11px 14px;min-height:70px}
  .tk-row{font-size:13px}
  .tk-src{max-width:86px}
}

/* ---------- 회비·후원금 계좌 카드 ---------- */
.bank-card{position:relative;overflow:hidden;border-radius:18px;margin:14px 0 22px;padding:26px 28px;color:#fff;
  background:linear-gradient(135deg,#12386F 0%,#1B4FA0 55%,#2A5FB8 100%);
  box-shadow:0 10px 30px rgba(18,56,111,.28)}
.bk-deco{position:absolute;inset-inline-end:-70px;top:-70px;width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,217,122,.22),transparent 65%);pointer-events:none}
.bk-deco::after{content:'';position:absolute;inset-inline-start:-160px;top:150px;width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.10),transparent 60%)}
.bk-head{display:flex;gap:14px;align-items:center;margin-bottom:18px;position:relative}
.bk-ico{width:52px;height:52px;border-radius:14px;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0;border:1px solid rgba(255,255,255,.18)}
.bk-title{font-size:18px;font-weight:800;letter-spacing:-.2px}
.bk-sub{font-size:12.5px;color:#C9D9F0;margin-top:3px;line-height:1.5}
.bk-rows{position:relative;display:flex;flex-direction:column;gap:1px;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.16)}
.bk-row{display:flex;align-items:center;gap:12px;padding:12px 16px;background:rgba(255,255,255,.07)}
.bk-row:nth-child(even){background:rgba(255,255,255,.045)}
.bk-lb{width:96px;flex-shrink:0;font-size:11.5px;font-weight:800;color:#FFD97A;text-transform:uppercase;letter-spacing:.6px}
.bk-val{flex:1;font-size:15px;font-weight:700;word-break:break-all}
.bk-num{font-family:ui-monospace,'SF Mono',Consolas,monospace;letter-spacing:1.2px;font-size:15.5px}
.bk-copy{flex-shrink:0;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);color:#fff;
  border-radius:8px;padding:5px 13px;font-size:12px;font-weight:700;cursor:pointer;transition:.15s}
.bk-copy:hover{background:rgba(255,255,255,.24)}
.bk-copy.ok{background:#1F9D55;border-color:#1F9D55}
.bk-note{position:relative;margin-top:14px;font-size:12.5px;color:#C9D9F0}
@media (max-width:760px){
  .bank-card{padding:20px 18px}
  .bk-title{font-size:16px}
  .bk-row{flex-wrap:wrap;gap:6px;padding:11px 13px}
  .bk-lb{width:100%}
  .bk-val{font-size:14px}
  .bk-num{font-size:14px;letter-spacing:.8px}
}

/* ---------- 헤더 검색창 ---------- */
.hd-search{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:99px;overflow:hidden;background:#fff}
.hd-search input{border:0;outline:0;padding:8px 6px 8px 16px;font-size:13.5px;width:150px;min-width:0}
.hd-search button{border:0;background:none;cursor:pointer;font-size:15px;padding:7px 12px 7px 4px}
.hd-search:focus-within{border-color:var(--blue)}
.m-search{margin:14px 0 4px}
.m-search input{flex:1;width:auto}
@media (max-width:900px) and (min-width:761px){ .hd-search input{width:104px} }
@media (max-width:760px){ .hd-actions .hd-search{display:none} }

/* ---------- 통합검색 결과 ---------- */
.sx-form{display:flex;gap:8px;padding:16px 18px;flex-wrap:wrap}
.sx-form input[name=q]{flex:1;min-width:180px}
.sx-form select{width:auto}
.sx-item{padding:15px 0;border-bottom:1px solid var(--line)}
.sx-item:last-child{border-bottom:0}
.sx-head{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.sx-title{font-weight:700;font-size:15px}
.sx-title:hover{color:var(--blue);text-decoration:underline}
.sx-snip{font-size:13px;color:#4A5568;margin-top:5px;line-height:1.65}
.sx-cm{font-size:12.5px;color:#5A6B7A;margin-top:5px;background:var(--bg);border-radius:8px;padding:7px 11px}
.sx-meta{font-size:12px;color:var(--mute);margin-top:6px}
mark{background:#FFE9A8;color:inherit;padding:0 2px;border-radius:3px}

/* ---------- 댓글 수 ---------- */
.ccnt{color:var(--red);font-size:12px;font-weight:800}

/* ---------- 공지 카테고리 미니 뱃지 ---------- */
.cat-mini{display:inline-block;background:var(--blue-l);color:var(--blue);font-size:11px;font-weight:800;
  border-radius:5px;padding:1px 7px;margin-inline-end:7px;vertical-align:1px;flex-shrink:0}

/* ---------- UAE 국기 ---------- */
.tk-flag{width:26px;height:17px;border-radius:2.5px;object-fit:cover;vertical-align:-3px;box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.uae-flag{width:30px;height:20px;border-radius:3px;object-fit:cover;vertical-align:-2px;box-shadow:0 1px 3px rgba(0,0,0,.2)}

/* ---------- 홈 위젯 말줄임 (레이어 크기 고정) ---------- */
ul.plain li{display:flex;align-items:center;gap:10px}
ul.plain li a{flex:1;min-width:0;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.6}
ul.plain li a .badge,ul.plain li a .cat-mini,ul.plain li a .rank{margin-inline-end:7px;vertical-align:1px}
ul.plain li .d{flex-shrink:0}

/* ---------- 지도 상세 복사 버튼 ---------- */
.mp-copy{display:none;flex-shrink:0;border:1px solid var(--line);background:#fff;color:var(--mute);
  border-radius:7px;padding:3px 10px;font-size:11.5px;font-weight:700;cursor:pointer;align-items:center}
.mp-copy:hover{border-color:var(--blue);color:var(--blue)}
.mp-copy.ok{background:#1F9D55;border-color:#1F9D55;color:#fff}

/* ---------- 인기 게시글 TOP10 ---------- */
.pop-hint{margin-inline-start:auto;font-size:11.5px;color:var(--mute);font-weight:600}
.rank{display:inline-flex;width:20px;height:20px;border-radius:6px;align-items:center;justify-content:center;
  font-size:11.5px;font-weight:800;background:var(--bg);color:var(--mute);vertical-align:-4px !important}
.rank.r1{background:var(--red);color:#fff}
.rank.r2{background:var(--blue);color:#fff}
.rank.r3{background:#3E7CB1;color:#fff}


/* ---------- 그리드 레이어 돌출 방지 ---------- */
.board-cols>.card,.grid-2>.card,.grid-2>div{min-width:0}
.board-cols{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:1024px){ .board-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
@media (max-width:760px){ .board-cols,.grid-2{grid-template-columns:minmax(0,1fr)} }
.card{min-width:0}

/* ---------- 관리자 회원 관리 ---------- */
.mem-tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:2px solid var(--line);padding-bottom:0}
.mem-tab{padding:8px 16px;font-size:13.5px;font-weight:700;color:var(--mute);border:2px solid transparent;border-bottom:0;border-radius:9px 9px 0 0;margin-bottom:-2px}
.mem-tab.on{color:var(--blue);border-color:var(--line);border-bottom:2px solid #fff;background:#fff}
.mem-tab:hover{color:var(--blue)}
.em-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.em-chip{border:1.5px solid var(--line);border-radius:99px;padding:4px 12px;font-size:12.5px;font-weight:700;color:var(--mute)}
.em-chip.on{border-color:var(--blue);background:var(--blue-l);color:var(--blue)}
.em-chip span{opacity:.65;font-size:11px;margin-inline-start:2px}
.th-sort{color:inherit;display:inline-flex;align-items:center;white-space:nowrap}
.th-sort:hover{color:var(--blue)}
.mem-table th{white-space:nowrap}
.mem-table td{vertical-align:top}
.rcv{display:inline-block;font-size:10.5px;font-weight:700;border-radius:4px;padding:1px 5px;margin:1px 1px 0 0}
.rcv.y{background:#E3F5EA;color:#0B6E4F}
.rcv.n{background:#F1F1F3;color:#98A3B3}

/* ---------- CKEditor 영역 ---------- */
.ck-editor__editable_inline{min-height:340px !important}
.ck.ck-editor{max-width:100%}
.ck-editor__editable{color:#1a1a1a}

/* ---------- 글보기: HTML 본문(에디터 작성글) 렌더링 ---------- */
.view-body{font-size:15.5px;line-height:1.8;color:#222;word-break:break-word}
.view-body p{margin:0 0 14px}
.view-body h1,.view-body h2,.view-body h3,.view-body h4{font-weight:800;line-height:1.35;margin:22px 0 12px}
.view-body h1{font-size:24px} .view-body h2{font-size:21px} .view-body h3{font-size:18px} .view-body h4{font-size:16px}
.view-body ul,.view-body ol{margin:0 0 14px;padding-inline-start:26px}
.view-body li{margin:4px 0}
.view-body a{color:var(--blue);text-decoration:underline;word-break:break-all}
.view-body img{max-width:100%;height:auto;border-radius:8px;margin:6px 0}
.view-body figure{margin:14px 0;max-width:100%}
.view-body figure.image{display:table}
.view-body figure.image>figcaption{display:table-caption;caption-side:bottom;font-size:13px;color:var(--mute);padding-top:6px;text-align:center}
.view-body figure.image-style-side{float:inline-end;max-width:50%;margin-inline-start:18px}
.view-body blockquote{border-inline-start:4px solid var(--blue);background:var(--blue-l);margin:14px 0;padding:10px 16px;color:#333;border-radius:0 8px 8px 0}
.view-body pre{background:#0f1720;color:#e6edf3;padding:14px 16px;border-radius:8px;overflow-x:auto;font-size:13.5px;line-height:1.6;margin:14px 0}
.view-body code{background:var(--bg);padding:2px 6px;border-radius:5px;font-size:.92em}
.view-body pre code{background:none;padding:0}
.view-body table{border-collapse:collapse;margin:14px 0;max-width:100%;overflow-x:auto;display:block}
.view-body table td,.view-body table th{border:1px solid var(--line);padding:8px 12px;font-size:14px}
.view-body table th{background:var(--blue-l);font-weight:700}
.view-body hr{border:0;border-top:1px solid var(--line);margin:22px 0}
.view-body mark{background:#FFE9A8;padding:0 3px;border-radius:3px}
.view-body .text-tiny{font-size:.7em} .view-body .text-small{font-size:.85em}
.view-body .text-big{font-size:1.4em} .view-body .text-huge{font-size:1.8em}

/* ---------- 게시판 관리자 일괄삭제 ---------- */
.bulk-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--bg);border:1px solid var(--line);
  border-radius:10px;padding:9px 14px;margin:10px 0}
.bulk-bar label{font-weight:700;cursor:pointer}
.list-table .chkRow,.bulk-bar input[type=checkbox]{width:16px;height:16px;cursor:pointer;vertical-align:middle}

/* ---------- 뉴스: 한국 관련 24시간 섹션 ---------- */
.news-korea{border:2px solid var(--blue);border-radius:14px;overflow:hidden;background:linear-gradient(180deg,rgba(27,79,160,.05),transparent 60%)}
.nk-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:14px 22px 10px;background:linear-gradient(135deg,#12386F,#1B4FA0);color:#fff}
.nk-head h2{font-size:17px;font-weight:800;letter-spacing:-.2px}
.nk-hint{font-size:12px;color:#C9D9F0;font-weight:600}
.nk-list{padding:2px 22px}
.nk-item:last-child{border-bottom:0}
.news-sec-title{font-size:15px;font-weight:800;color:#333;margin:22px 2px 8px;display:flex;align-items:center;gap:6px}
.kr-tag{font-size:.9em}
.news-item.is-korea{background:linear-gradient(90deg,rgba(27,79,160,.045),transparent 40%)}

/* ---------- 게시판 하단 파트너 배너 ---------- */
.board-banners{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
.board-banners a{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;
  display:flex;align-items:center;justify-content:center;min-height:52px;padding:6px;transition:border-color .15s}
.board-banners a:hover{border-color:var(--blue)}
.board-banners img{max-width:100%;max-height:44px;object-fit:contain}
.board-banners span{font-size:12px;font-weight:700;color:var(--mute);text-align:center}
@media(max-width:820px){
  .board-banners{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:480px){
  .board-banners{grid-template-columns:repeat(2,1fr)}
  .partner-row{grid-template-columns:repeat(3,1fr) !important}
  .strip-banners{grid-template-columns:repeat(2,1fr) !important}
}

/* ---------- 흐르는 배너 마퀴 (협력기관+한인업체) ---------- */
/* 협력기관·후원사 섹션 (제목 → 대형 배너 → 흐르는 배너) */
.sponsor-sec{background:#fff;padding:18px 0 20px;margin-bottom:2px}
.topbn-list{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.mq-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.mq-cta{padding:4px 12px;font-size:12px;font-weight:700;border-radius:14px;line-height:1.6;white-space:nowrap}
.mq-head h2{font-size:17px;font-weight:800;color:var(--ink)}
.mq-viewport{overflow:hidden;position:relative;width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.mq-track{display:flex;align-items:center;gap:14px;width:max-content;animation:mqScroll 60s linear infinite}
.mq-viewport:hover .mq-track{animation-play-state:paused}
.mq-item{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  height:56px;padding:6px 10px;border:1px solid var(--line);border-radius:10px;background:#fff;transition:border-color .15s,box-shadow .15s}
.mq-item:hover{border-color:var(--blue);box-shadow:0 3px 10px rgba(0,0,0,.08)}
.mq-item img{height:44px;width:auto;max-width:200px;object-fit:contain;display:block}
.mq-item span{font-size:12.5px;font-weight:700;color:var(--mute);white-space:nowrap;padding:0 8px}
@keyframes mqScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- 한인업체 디렉토리: 배너 2열 (온전한 배너) ---------- */
.dir-banners{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:4px}
.dir-banner{display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:10px;
  background:#fff;padding:8px;min-height:54px;transition:border-color .15s,box-shadow .15s;overflow:hidden}
.dir-banner:hover{border-color:var(--blue);box-shadow:0 3px 10px rgba(0,0,0,.06)}
.dir-banner img{max-width:100%;max-height:46px;width:auto;object-fit:contain;display:block}
.dir-banner span{font-size:12px;font-weight:700;color:var(--mute);text-align:center}
@media(max-width:480px){.dir-banners{grid-template-columns:repeat(2,1fr)}}

/* 하단 협력기관 배너 (카운터 위) 여백 */
.partners-bottom{padding-top:8px;padding-bottom:24px;border-top:1px solid var(--line);margin-top:8px}

/* 가입 목적 체크박스 그리드 */
.purpose-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:4px}
.purpose-grid .pchk{display:flex;align-items:center;gap:7px;font-size:13.5px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;cursor:pointer;background:#fff}
.purpose-grid .pchk:hover{border-color:var(--blue);background:var(--blue-l)}
.purpose-grid .pchk input{margin:0}
@media(max-width:640px){.purpose-grid{grid-template-columns:repeat(2,1fr)}}


/* 게시판 필터 줄 (카테고리 좌 · 인기글 우) */
.board-filters{display:flex;align-items:center;justify-content:space-between;
  gap:10px;flex-wrap:wrap;margin-top:10px}
.cat-chips{display:flex;gap:8px;flex-wrap:wrap}

/* 게시판 인기글 */
.pop-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-inline-start:auto}
.pop-select{display:none}
.pop-label{font-size:13px;font-weight:800;color:#C8102E;margin-inline-end:4px}
.pop-btn{display:inline-block;padding:4px 11px;font-size:12.5px;font-weight:700;
  border:1px solid var(--line);border-radius:14px;color:#5a6a80;background:#fff;text-decoration:none}
.pop-btn:hover{border-color:#C8102E;color:#C8102E}
.pop-btn.on{background:#C8102E;border-color:#C8102E;color:#fff}
/* 인기글 행 강조 */
.list-table tr.pop-row{background:#FFF6F2}
.list-table tr.pop-row:hover{background:#FFEDE6}
.list-table tr.pop-row td{border-bottom:1px solid #F6D9CE}
.list-table tr.pop-row .tt a{font-weight:700;color:#8C2A16}
.pop-rank{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;
  border-radius:50%;background:#C8102E;color:#fff;font-size:11px;font-weight:800}
.pop-tag{display:inline-block;font-size:11px;font-weight:800;color:#C8102E;margin-inline-end:4px}
@media(max-width:760px){
  .pop-tag{display:none}
  /* 모바일: 인기글 버튼 대신 펼침메뉴 */
  .pop-bar .pop-btn{display:none}
  .pop-select{display:inline-block;padding:5px 26px 5px 10px;font-size:12.5px;font-weight:700;
    color:#C8102E;background:#fff;border:1px solid #C8102E;border-radius:14px;
    appearance:none;-webkit-appearance:none;cursor:pointer;
    background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%23C8102E' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 9px center}
  [dir="rtl"] .pop-select{padding:5px 10px 5px 26px;background-position:left 9px center}
  .board-filters{gap:8px}
  .pop-label{font-size:12.5px}
}

/* 메인 상단 대형 배너 */
.topbn{display:block;line-height:0;border-radius:12px;overflow:hidden;
  box-shadow:0 3px 12px rgba(15,23,38,.10);transition:box-shadow .2s,transform .2s}
a.topbn:hover{box-shadow:0 6px 20px rgba(15,23,38,.16);transform:translateY(-1px)}
.topbn img{width:100%;height:auto;display:block}
@media(max-width:760px){
  .sponsor-sec{padding:14px 0 16px}
  .mq-head{gap:8px;margin-bottom:10px}
  .mq-head h2{font-size:15.5px;line-height:1.45}
  .mq-cta{padding:3px 10px;font-size:11.5px}
  .topbn{border-radius:10px}
}

/* 회원가입 - 기존 회원 전환 카드 (가입유형 카드와 색을 달리해 구분) */
.legacy-card{position:relative;display:flex;flex-direction:column;justify-content:center;
  border:1.5px dashed #C8102E;border-radius:12px;padding:15px;text-decoration:none;
  background:linear-gradient(135deg,#FFF6F2 0%,#FFEFE8 100%);
  transition:border-color .15s,box-shadow .15s,transform .15s}
.legacy-card:hover{border-style:solid;border-color:#A50D25;
  box-shadow:0 6px 18px rgba(200,16,46,.16);transform:translateY(-1px)}
.legacy-card .t{font-weight:800;color:#C8102E;font-size:15.5px;letter-spacing:-.2px}
.legacy-card .s{font-size:12.5px;color:#9C5A46;margin-top:6px;line-height:1.6}
.legacy-card .lc-go{margin-top:9px;font-size:12.5px;font-weight:800;color:#C8102E}
.legacy-card:hover .lc-go{text-decoration:underline}
@media(max-width:760px){ .legacy-card{padding:14px} }

/* ===== 게시글 하단 — 좌: 주변 글 목록 / 우: 댓글 (반반) ===== */
.view-bottom{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;margin-top:20px}
.near{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:6px 16px}
.near-list{list-style:none;margin:0;padding:0}
.near-list li{display:flex;align-items:center;gap:12px;padding:12px 0;
              border-bottom:1px solid #eef2f8}
.near-list li:last-child{border-bottom:0}
.near-t{flex:1;min-width:0;font-size:14px;color:var(--ink);text-decoration:none;
        white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
a.near-t:hover{color:var(--blue);text-decoration:underline}
.near-list li.on{background:#f4f7fb;margin:0 -16px;padding:12px 16px}
.near-list li.on .near-t{font-weight:800;color:var(--blue)}
.near-d{flex:none;font-size:12.5px;color:var(--mute)}
@media (max-width:900px){
  .view-bottom{grid-template-columns:1fr}
  .near{order:2}          /* 모바일에서는 댓글을 먼저, 목록을 아래에 */
  .cmt{order:1}
}

/* ===== 비밀번호 보기 버튼 ===== */
.pw-wrap{position:relative;display:block;width:100%}
.pw-wrap > input{width:100%;padding-inline-end:44px !important}
.pw-eye{position:absolute;top:50%;inset-inline-end:6px;transform:translateY(-50%);
        width:34px;height:34px;display:flex;align-items:center;justify-content:center;
        padding:0;margin:0;border:0;background:transparent;cursor:pointer;
        color:#8b97a8;border-radius:7px;line-height:0}
.pw-eye:hover{color:var(--blue);background:#eef3fa}
.pw-eye:active{background:#e2eaf5}
.pw-eye svg{display:block;pointer-events:none}
/* 브라우저가 자체로 넣는 눈 아이콘과 겹치지 않게 */
.pw-wrap > input::-ms-reveal,
.pw-wrap > input::-ms-clear{display:none}

/* ===== 한인회 매거진 배너 (기존 파란 CTA 자리) ===== */
.mag-cta{display:flex;align-items:stretch;gap:18px;text-decoration:none;overflow:hidden;
         background:linear-gradient(115deg,#1d3557 0%,#2a4f7c 60%,#3d6a99 100%);
         color:#fff;border-radius:var(--radius);padding:20px 22px;position:relative;
         transition:transform .18s ease, box-shadow .18s ease}
.mag-cta:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(20,40,70,.28)}
/* 표지는 잘리지 않게 원본 비율 그대로. 높이만 글 블록에 맞추고 폭은 비율대로 따라옵니다 */
.mag-cta img{align-self:stretch;height:auto;width:auto;flex:none;max-width:34%;
             aspect-ratio:500/620;object-fit:contain;
             border-radius:8px;box-shadow:0 6px 16px rgba(0,0,0,.3);background:#e9e2d4}
.mag-txt{display:flex;flex-direction:column;justify-content:flex-start;min-width:0}
.mag-badge{display:inline-block;align-self:flex-start;font-size:11.5px;font-weight:800;letter-spacing:.4px;
           background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);
           padding:3px 9px;border-radius:20px;margin-bottom:8px}
.mag-cta h3{font-size:21px;font-weight:800;margin:0;line-height:1.3}
.mag-cta p{opacity:.85;margin:6px 0 0;font-size:14px;line-height:1.6}
.mag-btn{display:inline-block;align-self:flex-start;margin-top:12px;background:#fff;color:#1d3557;
         font-size:13.5px;font-weight:800;padding:8px 16px;border-radius:8px}
@media (max-width:760px){
  .mag-cta{flex-direction:column;align-items:center;text-align:center;padding:22px;gap:14px}
  .mag-cta img{width:132px;height:auto;align-self:center;max-width:60%}
  .mag-badge,.mag-btn{align-self:center}
  .mag-cta h3{font-size:19px}
}

/* ===== 메인 히어로의 AI 질문창 ===== */
.hero-ai{background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.6);
         border-radius:14px;padding:16px 18px;box-shadow:0 6px 24px rgba(10,30,60,.14);margin-bottom:14px}
.hero-ai-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:11px}
.hero-ai-badge{background:linear-gradient(135deg,#12386F,#2E6FB8);color:#fff;font-size:12.5px;
               font-weight:800;border-radius:999px;padding:5px 13px;white-space:nowrap}
.hero-ai-sub{font-size:12.5px;color:var(--mute);line-height:1.5}
.hero-ai-row{display:flex;gap:8px}
.hero-ai-row input{flex:1;min-width:0;border:1px solid var(--line);border-radius:10px;
                   padding:12px 14px;font-size:14.5px;font-family:inherit}
.hero-ai-row input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(46,111,184,.14)}
.hero-ai-row button{flex:none;background:var(--blue);color:#fff;border:0;border-radius:10px;
                    padding:12px 20px;font-size:14.5px;font-weight:700;cursor:pointer}
.hero-ai-row button:hover{background:#0e2d59}
@media (max-width:560px){
  .hero-ai{padding:14px}
  .hero-ai-row button{padding:12px 15px}
}

/* ===== 우측 고정 패널 안의 AI 버튼 (시계와 한 상자) ===== */
.rail-ai{display:none}
@media (min-width:1500px){
  .rail-ai{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
           width:100%;background:#fff;border:0;border-top:1px solid var(--line);
           padding:13px 8px;cursor:pointer;font-family:inherit;color:var(--blue);
           transition:background .15s}
  .rail-ai:hover{background:#eef3fa}
  .rail-ai .i{font-size:21px;line-height:1}
  .rail-ai .t{font-size:12px;font-weight:800;line-height:1.35;text-align:center;color:var(--ink)}
  .rail-ai:hover .t{color:var(--blue)}
}

/* 모바일 — 카카오 버튼 위에 붙는다 */
.ai-fab-m{position:fixed;inset-inline-end:16px;bottom:86px;z-index:60;display:flex;
          align-items:center;gap:7px;background:linear-gradient(135deg,#12386F,#2E6FB8);
          color:#fff;border:0;border-radius:999px;padding:12px 17px;cursor:pointer;
          font-family:inherit;font-size:13.5px;font-weight:800;
          box-shadow:0 4px 16px rgba(10,30,60,.28)}
@media (min-width:1500px){ .ai-fab-m{display:none} }

/* ===== 전체화면 질문 오버레이 ===== */
.ai-ov{position:fixed;inset:0;z-index:9000;background:rgba(8,16,30,.68);
       backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;padding:20px}
.ai-ov.on{display:flex}
.ai-ov-card{background:#fff;border-radius:18px;width:100%;max-width:600px;
            padding:26px 24px;box-shadow:0 24px 70px rgba(0,0,0,.4);
            animation:aiovin .18s ease-out}
@keyframes aiovin{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.ai-ov-card h3{font-size:19px;font-weight:800;margin:0 0 6px;color:var(--ink)}
.ai-ov-card p{font-size:13.5px;color:var(--mute);margin:0 0 16px;line-height:1.65}
.ai-ov-row{display:flex;gap:8px}
.ai-ov-row textarea{flex:1;border:1px solid var(--line);border-radius:11px;padding:13px 15px;
                    font-size:15px;font-family:inherit;resize:none;min-height:52px;max-height:150px}
.ai-ov-row textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(46,111,184,.14)}
.ai-ov-row button{flex:none;background:var(--blue);color:#fff;border:0;border-radius:11px;
                  padding:0 22px;font-size:15px;font-weight:700;cursor:pointer}
.ai-ov-foot{display:flex;justify-content:space-between;align-items:center;margin-top:14px;
            font-size:12.5px;color:var(--mute)}
.ai-ov-foot a{color:var(--blue);font-weight:700;text-decoration:none}
.ai-ov-x{position:absolute;top:18px;inset-inline-end:20px;background:transparent;border:0;
         color:#fff;font-size:30px;cursor:pointer;line-height:1;opacity:.8}
.ai-ov-x:hover{opacity:1}
@media (max-width:560px){ .ai-ov-card{padding:22px 18px} .ai-ov-row{flex-direction:column} .ai-ov-row button{padding:13px} }

/* ===== AI 답변 안의 표 · 목록 · 지도 링크 ===== */
.ai-tw{overflow-x:auto;margin:12px 0}
.ai-tb{width:100%;border-collapse:collapse;font-size:13.5px;background:#fff;
       border-radius:8px;overflow:hidden}
.ai-tb th{background:#12386F;color:#fff;font-weight:700;text-align:start;
          padding:9px 11px;white-space:nowrap}
.ai-tb td{padding:9px 11px;border-bottom:1px solid #e6ecf5;line-height:1.6;vertical-align:top}
.ai-tb tbody tr:last-child td{border-bottom:0}
.ai-tb tbody tr:nth-child(even) td{background:#f8fbfe}
.ai-ul{margin:9px 0;padding-inline-start:20px;line-height:1.9}
.ai-ul li{margin:2px 0}
.ai-map{display:inline-flex;align-items:center;gap:5px;background:#eef3fa;border:1px solid #cfdcec;
        border-radius:999px;padding:2px 9px 2px 7px;margin:0 2px;font-size:13.5px;
        font-weight:700;color:#12386F;text-decoration:none;line-height:1.7}
.ai-map:hover{background:#dfe9f6;border-color:var(--blue)}
.ai-map .pin{font-size:12px}
.ai-map .go{font-size:11px;font-weight:800;background:var(--blue);color:#fff;
            border-radius:999px;padding:1px 6px;margin-inline-start:2px}
.ai-caret{display:inline-block;width:2px;height:15px;background:#12386F;
          vertical-align:-2px;margin-inline-start:2px;animation:aicaret .9s steps(2) infinite}
@keyframes aicaret{0%,100%{opacity:1}50%{opacity:0}}
.ai-msg .ai-bubble{white-space:normal}   /* 렌더러가 줄바꿈을 <br> 로 처리한다 */
.ai-msg.me .ai-bubble{white-space:pre-wrap}

/* 표 칸 안에서 줄이 나뉠 때 간격 */
.ai-tb td br{content:"";display:block;margin-bottom:3px}
.ai-tb td{min-width:90px}