@charset "utf-8";
/* g5sol community refine — Pretendard · accent #3B82F6 · no shop chrome */

:root {
  --g5-gutter: 10px;
  --g5-bg: #f4f5f7;
  --g5-surface: #ffffff;
  --g5-ink: #1a1d21;
  --g5-muted: #6b7280;
  --g5-line: #e5e7eb;
  --g5-line-strong: #d1d5db;
  --g5-accent: #3b82f6;
  --g5-accent-soft: #eff6ff;
  --g5-header: #1c1f24;
  --g5-header-muted: #9ca3af;
  --g5-radius: 10px;
  --g5-shadow: 0 1px 2px rgba(16,24,40,.06), 0 4px 12px rgba(16,24,40,.04);
  --g5-font: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', system-ui, sans-serif;
}

html { overflow-x: hidden; }
body {
  font-family: var(--g5-font) !important;
  font-size: 15px;
  color: var(--g5-ink);
  background: var(--g5-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
input, button, textarea, select, h1, h2, h3, h4, h5, h6 {
  font-family: var(--g5-font) !important;
}

/* —— Header —— */
#hd { background: var(--g5-header); }
#tnb { border-bottom-color: #2a2e35; }
#hd_define li { border-right-color: #3a3f48; }
#hd_define li a { color: var(--g5-header-muted); }
#hd_define li.active a {
  color: #fff;
  background: #2a2e35;
  border-radius: 999px;
  padding: 4px 10px;
}
#hd_qnb li { border-right-color: #3a3f48; }
#hd_qnb li a { color: var(--g5-header-muted); }
#hd_qnb .visit .visit-num {
  background: var(--g5-accent) !important;
  border-radius: 999px;
  margin-left: 4px;
}

@media (min-width: 769px) {
  #hd_wrapper { height: auto; min-height: 88px; padding: 18px 0; }
  #logo { padding: 8px 0 0; }
  #logo img { max-height: 40px; width: auto; }
  .hd_sch_wr { padding: 8px 0; width: 445px; }
  /* keep search as one-row pill; border was wrapping float 385+60 inside 445 */
  #hd_sch {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    border: 1px solid #3a3f48;
    background: #2a2e35;
    border-radius: 999px;
    overflow: hidden;
  }
  #hd_sch form {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    margin: 0;
  }
  #hd_sch #sch_stx {
    float: none;
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    height: 100% !important;
    padding: 0 16px;
    font-size: 14px;
    line-height: 1;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none;
  }
  #hd_sch #sch_stx:focus {
    border: 0 !important;
    box-shadow: none !important;
    outline: none;
  }
  #hd_sch #sch_submit {
    float: none;
    flex: 0 0 44px;
    width: 44px !important;
    height: 100% !important;
    padding: 0;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    line-height: 1;
  }

  .hd_login { top: 50%; transform: translateY(-50%); }
  .hd_login li {
    border-left: 0;
    margin: 0 4px;
    padding-left: 0;
    line-height: 1;
  }
  .hd_login a {
    display: inline-block;
    color: #fff;
    font-size: 13px;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid #3a3f48;
  }
  .hd_login a.primary {
    background: var(--g5-accent);
    border-color: var(--g5-accent);
    font-weight: 600;
  }
}

/* —— GNB —— */
#gnb {
  background: var(--g5-surface);
  border-bottom: 1px solid var(--g5-line);
}
@media (min-width: 769px) {
  #gnb {
    position: sticky;
    top: 0;
    z-index: 50;
  }
}
#gnb #gnb_1dul { border-bottom: 0; font-size: 15px; }
#gnb .gnb_1dli { line-height: 1.2; }
.gnb_1da {
  font-weight: 600;
  color: var(--g5-ink);
}
@media (min-width: 769px) {
  .gnb_1da {
    padding: 16px 18px;
    border-bottom: 2px solid transparent;
  }
}
#gnb .gnb_1dli:hover > a,
#gnb .gnb_1dli_over > a,
#gnb .gnb_1dli_over2 > a {
  color: var(--g5-accent) !important;
  border-bottom-color: var(--g5-accent);
}
.gnb_1dli .bg { top: 20px; }
.gnb_2dul { top: 100%; padding-top: 0; }
.gnb_2dul .gnb_2dul_box {
  border-radius: 0 0 10px 10px;
  border-color: var(--g5-line);
  box-shadow: var(--g5-shadow);
  overflow: hidden;
}
.gnb_2da { padding: 10px 16px; line-height: 1.4; font-size: 14px; color: #374151; }
a.gnb_2da:hover {
  background: var(--g5-accent-soft) !important;
  color: var(--g5-accent) !important;
}
#gnb .gnb_menu_btn { background: var(--g5-accent); }

/* —— Layout —— */
#container { margin-top: 24px; }
#container_title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
#container_title span { line-height: 1.3; }

/* —— Latest (main) —— */
.latest_top_wr {
  margin: 0 0 16px;
}
.latest_top_wr:after { display:block; visibility:hidden; clear:both; content:""; }
.latest_top_wr .pic_li_lt {
  box-sizing: border-box;
}
.pic_li_lt .lat_title {
  margin: 0;
  padding: 0 16px;
  line-height: 48px;
  font-size: 15px;
  font-weight: 700;
  color: var(--g5-ink);
  border-bottom: 1px solid var(--g5-line);
  background: var(--g5-surface);
}
.pic_li_lt .lat_title a { color: var(--g5-ink); }
.pic_li_lt .lt_more {
  top: 12px;
  right: 12px;
  width: auto;
  padding: 0 4px;
  color: var(--g5-muted) !important;
  font-size: 12px;
  font-weight: 500;
}
.pic_li_lt ul { padding: 8px 14px 4px; margin: 0; }
.pic_li_lt li {
  border-bottom: 1px solid var(--g5-line);
  margin-bottom: 0;
  padding: 10px 0;
}
.pic_li_lt li:last-child { border-bottom: 0; }
.pic_li_lt li .pic_li_tit {
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
.pic_li_lt .lt_info { padding: 4px 0 0; font-size: 12px; color: var(--g5-muted); }
.pic_li_lt .lt_info .lt_date { color: var(--g5-muted); }
.pic_li_lt .empty_li { line-height: 100px; }

/* gallery block card */
.latest_wr .pic_lt,
.pic_lt {
  border: 1px solid var(--g5-line);
  border-radius: var(--g5-radius);
  box-shadow: var(--g5-shadow);
  background: var(--g5-surface);
  overflow: hidden;
  padding-bottom: 8px;
}
.pic_lt .lat_title {
  margin: 0;
  padding: 0 16px;
  line-height: 48px;
  font-size: 15px;
  font-weight: 700;
  border-bottom: 1px solid var(--g5-line);
}
.pic_lt .lat_title a { color: var(--g5-ink); }
.pic_lt .lt_more { color: var(--g5-muted) !important; font-size: 12px; }

/* basic latest (charchat) */
.latest_charchat_wr .lt_wr_full { width: 100%; float: none; }
.latest_charchat_wr .lat {
  border: 1px solid var(--g5-line);
  border-radius: var(--g5-radius);
  box-shadow: var(--g5-shadow);
  background: var(--g5-surface);
  overflow: hidden;
  margin-bottom: 0;
}
.latest_charchat_wr .lat .lat_title {
  margin: 0;
  padding: 0 16px;
  line-height: 48px;
  font-size: 15px;
  font-weight: 700;
  border-bottom: 1px solid var(--g5-line);
  background: linear-gradient(90deg, #eff6ff, #fff);
}
.latest_charchat_wr .lat .lat_title a { color: var(--g5-ink); }
.latest_charchat_wr .lat .lt_more {
  color: var(--g5-muted) !important;
  font-size: 12px;
  top: 12px;
  right: 12px;
}
.latest_charchat_wr .lat ul { padding: 8px 0; }
.latest_charchat_wr .lat li {
  border-bottom: 1px solid var(--g5-line);
  margin: 0;
  padding: 10px 16px;
  line-height: 1.4;
}
.latest_charchat_wr .lat li:last-child { border-bottom: 0; }
.latest_charchat_wr .lat li a {
  font-size: 14px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  display: inline-block;
  vertical-align: middle;
}
.latest_charchat_wr .lat li a:hover { color: var(--g5-accent); }
.latest_charchat_wr .lt_info { padding: 4px 0 0; font-size: 12px; color: var(--g5-muted); }

.latest_wr { margin-bottom: 16px; }

/* —— Aside / outlogin soften —— */
#aside .ol,
#aside .ft_cnt { border-radius: var(--g5-radius); }

/* —— Footer —— */
#ft { background: #111827; }
#ft_copy { border-top-color: #1f2937; color: #6b7280; }

/* —— Shared board list accents (PC skin overrides) —— */
#bo_cate a {
  border-color: var(--g5-line);
  color: var(--g5-muted);
  background: #f3f4f6;
}
#bo_cate a:focus,
#bo_cate a:hover,
#bo_cate a:active,
#bo_cate #bo_cate_on {
  background: var(--g5-accent) !important;
  border-color: var(--g5-accent) !important;
  color: #fff !important;
  box-shadow: none !important;
}
#bo_list {
  background: var(--g5-surface);
  border: 1px solid var(--g5-line);
  border-radius: var(--g5-radius);
  box-shadow: var(--g5-shadow);
  padding: 0;
  overflow: hidden;
}
#bo_list .tbl_head01 { margin: 0; }
#bo_list .tbl_head01 table { border: 0; }
#bo_list .tbl_head01 th {
  background: #f9fafb;
  color: var(--g5-muted);
  font-weight: 600;
  border-bottom: 1px solid var(--g5-line);
  padding: 12px 10px;
}
#bo_list .tbl_head01 td {
  border-bottom: 1px solid var(--g5-line);
  padding: 14px 10px;
}
#bo_list tbody tr { border-left: 0 !important; }
#bo_list tbody tr:hover { border-left: 0 !important; background: #fafbfc; }
#bo_list tbody tr:hover td { background: #fafbfc; }
#bo_list .bo_notice td { background: #fffbeb !important; }
#bo_list .bo_notice .notice_icon {
  background: #fef3c7;
  color: #b45309;
  border-radius: 6px;
  padding: 2px 7px;
  font-size: 11px;
  line-height: 1.4;
}
#bo_list .cnt_cmt {
  background: transparent;
  color: var(--g5-accent);
  font-weight: 600;
}
#bo_list .bo_tit { font-weight: 500; }
#bo_btn_top { padding: 12px 16px 8px; margin: 0; }
.btn_bo_user .btn_b01,
.btn_bo_user a.btn {
  border-radius: 8px;
}
.btn_b02,
a.btn_b02 {
  background: var(--g5-accent) !important;
  border-color: var(--g5-accent) !important;
  border-radius: 8px;
}
.pg_wrap .pg_current {
  background: var(--g5-accent) !important;
  border-color: var(--g5-accent) !important;
}
.pg_page, .pg_current {
  border-radius: 8px !important;
  min-width: 32px;
  height: 32px;
  line-height: 30px !important;
}

/* prevent popular keywords from blowing width under search */
.hd_sch_wr .popular { max-width: 100%; overflow: hidden; }

/* —— Mobile header / main —— */
#hd { background: var(--g5-header); }
#logo { height: auto; min-height: 56px; padding: 10px 14px; }
#logo img { max-height: 32px; margin-top: 0; }
#gnb_open, #user_btn.hd_opener {
  color: #fff;
  border-radius: 8px;
}
#gnb.hd_div, #gnb {
  /* mobile panel: keep theme mobile.css position:fixed */
  background: #fff;
}
@media (max-width: 768px) {
  #gnb {
    position: fixed !important;
    top: 0;
    left: 0;
    z-index: 99999;
    max-width: 320px;
    height: 100%;
    overflow-y: auto;
    box-shadow: 4px 0 24px rgba(0,0,0,.12);
    border-bottom: 0;
  }
}
#gnb_1dul { background: #fff; }
.gnb_1da {
  padding: 14px 18px !important;
  font-weight: 600;
  font-size: 15px;
  border-bottom: 1px solid var(--g5-line);
}
.gnb_2da { padding: 10px 18px 10px 28px; color: #374151; }
#hd_nb { border-bottom: 0; margin-top: 8px; }
#hd_nb li a { color: var(--g5-muted); }
#hd_sch { background: var(--g5-header); }
#hd_sch #sch_stx,
#hd_sch #sch_submit { background: #2a2e35; border-radius: 8px; }
#container { background: transparent; }
#container_title {
  font-size: 20px;
  font-weight: 700;
  padding: 8px 12px 4px;
}
.latest_top_wr .lt,
.latest_wr .lt { /* margins handled in mobile latest skin */ }
.latest_charchat_wr .lt .lt_title {
  background: linear-gradient(90deg, #eff6ff, #fff);
}

/* charchat board must not be affected — selectors above are theme chrome only */

/* —— Mobile gutters —— */
@media (max-width: 768px) {
  #bo_list {
    margin-left: var(--g5-gutter) !important;
    margin-right: var(--g5-gutter) !important;
    width: auto !important;
    max-width: calc(100% - (var(--g5-gutter) * 2));
    box-sizing: border-box;
  }
  /* theme-level inset for gallery list wrapper (do not edit character_gallery skin) */
  #bo_gall {
    margin-left: var(--g5-gutter) !important;
    margin-right: var(--g5-gutter) !important;
    width: auto !important;
    max-width: calc(100% - (var(--g5-gutter) * 2));
    box-sizing: border-box;
  }
}

/* —— Task 3-1: text logo —— */
#logo .g5sol_logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff !important;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  height: 40px;
}
#logo .g5sol_logo .mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  display: inline-grid;
  place-items: center;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}
#logo .g5sol_logo .wordmark { color: #fff; }
#logo .g5sol_logo:hover { opacity: 0.92; color: #fff !important; }
@media (min-width: 769px) {
  #logo { padding-top: 0; display: flex; align-items: center; height: 100%; min-height: 0; }
  #hd_wrapper { display: flex; align-items: center; }
  #logo .g5sol_logo { height: 40px; }
  .hd_sch_wr { float: none; margin-left: 40px; }
  .hd_login { position: static; transform: none; margin-left: auto; }
}
/* mobile header logo — #gnb_open only exists on mobile theme head */
body:has(#gnb_open) #logo {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 10px 56px; /* clear side buttons */
  box-sizing: border-box;
}
body:has(#gnb_open) #logo .g5sol_logo {
  justify-content: center;
  font-size: 18px;
  height: 36px;
  gap: 8px;
}
body:has(#gnb_open) #logo .g5sol_logo .mark {
  width: 30px;
  height: 30px;
  font-size: 12px;
  border-radius: 8px;
}

/* —— Task 3-1: mobile bottom tab bar —— */
:root {
  --mob-bar-h: 60px;
}
#mob_bar.mob_bar {
  display: block;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  background: #fff;
  border-top: 1px solid var(--g5-line, #e5e7eb);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -4px 16px rgba(16,24,40,.06);
}
#mob_bar ul {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
  font-size: 11px;
  color: var(--g5-muted, #6b7280);
}
#mob_bar li a {
  display: block;
  padding: 4px 2px;
  color: inherit;
  text-decoration: none;
  font-weight: 500;
  line-height: 1.2;
}
#mob_bar li a span[aria-hidden] {
  display: block;
  font-size: 18px;
  margin-bottom: 2px;
  line-height: 1.2;
}
#mob_bar li.on a {
  color: var(--g5-accent, #3b82f6);
  font-weight: 700;
}
/* tab bar line icons (헤라 v1 set: 24 grid, stroke 1.75, round) */
#mob_bar .mob_ico {
  display: block;
  width: 22px;
  height: 22px;
  margin: 0 auto 3px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#mob_bar li.on .mob_ico .i-fill {
  fill: currentColor;
  fill-opacity: .14;
}

/* reserve space so footer/content aren't under the bar */
body:has(#mob_bar) {
  padding-bottom: calc(var(--mob-bar-h) + env(safe-area-inset-bottom, 0px)) !important;
}
body:has(#mob_bar) #ft {
  margin-bottom: 0;
  padding-bottom: 8px;
}

/* lift theme FABs above tab bar */
body:has(#mob_bar) #top_btn {
  bottom: calc(var(--mob-bar-h) + env(safe-area-inset-bottom, 0px) + 12px) !important;
}
body:has(#mob_bar) .fix_btn {
  bottom: calc(var(--mob-bar-h) + env(safe-area-inset-bottom, 0px) + 12px) !important;
}

/* keep charchat sticky 대화하기 above tab bar (theme CSS only) */
body:has(#mob_bar) .cg-root .cg-actions {
  bottom: calc(var(--mob-bar-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: 12px;
}
/* chat overlay stays on top of tab bar */
.cg-chat-overlay { z-index: 10000; }

/* —— Footer without company column —— */
#ft.ft_no_company #ft_wr {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  text-align: left;
}
#ft.ft_no_company #ft_wr .ft_cnt,
#ft.ft_no_company #ft_wr .lat,
#ft.ft_no_company #ft_wr #visit {
  float: none;
  width: 32%;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  #ft.ft_no_company #ft_wr .ft_cnt,
  #ft.ft_no_company #ft_wr .lat,
  #ft.ft_no_company #ft_wr #visit {
    width: 100%;
  }
}