/* ===== Mobile attachments (<=768px) ===== */
@media (max-width:768px){
  #post_attachments_area #attachment_previews{display:flex!important;flex-wrap:wrap;justify-content:flex-start}
  .attachments{display:flex;flex-wrap:wrap;gap:8px}
  .attached{flex:1 1 160px;align-items:flex-start;padding:4px 0;max-width:100%}
  .attachments img,#attachment_previews .attach-preview img{display:block!important;max-width:100%!important;height:auto!important;object-fit:contain}
  .attachments_bot,.attachments_info{max-width:100%;overflow:visible;text-overflow:clip}
  .attachments_bot a,.attachments_bot .name,.attachments_info .name{white-space:normal!important;word-break:break-word}
  .post-attachments,#attachment_previews{overflow:visible!important;height:auto!important}
}

/* ===== Board icon: thick hyphen ===== */
#boardindex_table .board_icon.hyphen{position:relative;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;font-size:0;line-height:0}
#boardindex_table .board_icon.hyphen::after{content:"";display:block;width:14px;height:4px;background:#9aa2a9;border-radius:2px}
#boardindex_table .board_icon.hyphen.is-new::after{background:#1484d7}
#boardindex_table td.icon{width:40px;padding-right:10px}
#boardindex_table .up_contain .board_icon.hyphen{margin-right:8px}
@media (max-width:700px){#boardindex_table td.icon{width:34px;padding-right:8px}}

/* ===== Base & variables ===== */
:root{
  --hhj-max:1120px;
  --hhj-text:#333;
  --hhj-btn-bg:#f5f6f7; --hhj-btn-hover:#e6e6e6; --hhj-btn-outline:#ccc; --hhj-green-line:#2e8e3a;
  --hhj-pill-text:#0073bc; --hhj-pill-text-hover:#004390;
  --hhj-green:#3bb54a; --hhj-green-b:#2e8e3a;
}
html,body{margin:0;padding:0;background:#fff}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,"Noto Sans","Malgun Gothic",sans-serif;color:var(--hhj-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.icon{display:inline-block;width:14px;height:14px;margin-right:4px;vertical-align:-2px;fill:currentColor;line-height:1}

/* ===== Single centered rail (no side gutters) ===== */
#hhj-header,
#top_section>.inner_wrap,
#main_menu,
#wrapper,#upper_section,#content_section,#main_content_section,#footer{
  max-width:var(--hhj-max); margin:0 auto; padding-left:0!important; padding-right:0!important; box-sizing:border-box;
}
#upper_section .inner_wrap,#content_section>.frame,#main_content_section>.frame,#footer .inner_wrap,
.main_container,.frame,.roundframe,.navigate_section{
  padding-left:0!important; padding-right:0!important; background:#fff!important; border:0!important; box-shadow:none!important;
}

/* ===== HHJ header (two rows) ===== */
#header{padding:0 0 6px}
.hhj-row{display:grid;grid-template-columns:1fr auto;align-items:center}
.hhj-row.row1{min-height:38px;align-items:start}
#site-logo{display:inline-block!important;width:200px!important;height:59px!important;line-height:0;vertical-align:top}
#site-logo img{width:200px!important;height:59px!important;object-fit:contain;display:block}
.head-links{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-self:end;align-self:start;padding-top:2px;font-size:14px}
.userbar a,.userbar>.open-lang>strong{color:var(--hhj-pill-text)!important;text-decoration:none}
.userbar a:hover,.userbar>.open-lang>strong:hover{color:var(--hhj-pill-text-hover)!important;text-decoration:underline}
.top-dot{opacity:.5}

/* Language dropdown */
.open-lang{position:relative}
.open-lang>strong{cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.open-lang ul{position:absolute;top:120%;right:0;min-width:160px;padding:6px;margin:0;list-style:none;background:#fff;border:1px solid #e5e7eb;border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.08);display:none;z-index:30}
.open-lang:hover ul{display:block}
.open-lang a{display:block;padding:7px 10px;border-radius:4px}
.open-lang a:hover{background:#f3f4f6}

/* Pillbar */
.hhj-row.row2{margin-top:2px;padding-bottom:4px}
.pillbar{display:flex;align-items:center;flex-wrap:wrap;gap:0}
.pillbar a.but{background:var(--hhj-btn-bg);color:var(--hhj-pill-text);font-size:14px;font-weight:600;line-height:1.3;text-decoration:none;padding:8px 14px;border-top:1px solid var(--hhj-btn-outline);border-bottom:3px solid var(--hhj-green-line);border-left:1px solid var(--hhj-btn-outline);border-right:0;border-radius:0}
.pillbar a.but:last-child{border-right:1px solid var(--hhj-btn-outline)}
.pillbar a.but:hover{background:var(--hhj-btn-hover);color:var(--hhj-pill-text-hover)}
.publish_button{justify-self:end;align-self:start;position:relative;top:-4px}
.publish_button a{display:inline-block;padding:9px 14px;border-radius:6px;background:var(--hhj-green);color:#fff;text-decoration:none;font-weight:600;border:1px solid var(--hhj-green-b);line-height:1}
.publish_button a:hover{filter:brightness(.98)}
@media (max-width:768px){
  #header{padding:0 0 8px}
  .hhj-row{grid-template-columns:1fr}
  .head-links{justify-self:start;margin-top:6px}
  .publish_button{justify-self:start;margin-top:8px;top:0}
  #site-logo{width:180px!important;height:53px!important}
  #site-logo img{width:180px!important;height:53px!important}
}

/* ===== Hide big masthead bits only (keep login/search) ===== */
#forumtitle,#smflogo,#news,#newsfader{display:none!important}

/* ===== Login / alerts / search strip (compact) ===== */
#top_section{background:#fff!important;border:0!important;box-shadow:none!important}
#top_section>.inner_wrap{display:flex;align-items:center;gap:12px;padding:2px 0;min-height:32px;border-bottom:1px solid #e5e7eb}
#top_info{margin:0;padding:0;list-style:none;display:flex;align-items:center;gap:10px}
#top_info img.avatar{width:20px;height:20px;border-radius:50%}
#languages_form{margin-left:auto}
#search_form{margin:0}
#search_form input[type="search"]{height:26px;padding:0 10px;font-size:14px;border:1px solid #d1d5db;border-radius:6px}
#search_form select,#languages_form select{height:26px;padding:0 8px;font-size:14px;border:1px solid #d1d5db;border-radius:6px}
#search_form .button,#search_form input[type="submit"]{height:26px;padding:0 10px;border-radius:6px}
@media (max-width:680px){
  #top_section>.inner_wrap{flex-wrap:wrap;gap:8px}
  #top_info .textmenu{display:none}
  #search_form input[type="search"]{min-width:140px}
}

/* ===== Menu bar (same rails, tidy) ===== */
#main_menu{padding:6px 0;background:#fff!important;border:0!important;box-shadow:none!important}
#main_menu .menu_nav{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
#main_menu .menu_nav>li>a{display:inline-block;padding:6px 10px;font-size:14px;text-decoration:none}
#main_menu .menu_nav>li>a:hover{text-decoration:underline}

/* ===== Dropdown: keep icon clear of separators ===== */
#main_menu .menu_nav>li{position:relative}
#main_menu .menu_nav>li>ul{
  position:absolute;z-index:1000;background:#fff;border:1px solid #d1d5db;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:6px 0
}
#main_menu .menu_nav>li>ul>li{position:relative;padding-left:36px;border:0!important}
#main_menu .menu_nav>li>ul>li+li::before{content:"";position:absolute;left:36px;right:0;top:0;height:1px;background:#e5e7eb}
#main_menu .menu_nav>li>ul>li .main_icons{position:absolute;left:10px;top:50%;transform:translateY(-50%)}
#main_menu .menu_nav>li>ul>li>a{display:block;padding:8px 12px;white-space:nowrap}
.top_menu{z-index:1000!important} /* profile/alerts popups */

/* ===== Boards/content align to edges ===== */
#boardindex_table,#messageindex .topic_table,#forumposts{margin:0!important;max-width:100%}


/* Keep layout width stable when the vertical scrollbar appears/disappears */
html { scrollbar-gutter: stable; }          /* modern browsers */

/* Fallback for older browsers */
@supports not (scrollbar-gutter: stable) {
  html { overflow-y: scroll; }              /* always reserve the gutter */
}
/* TinyPortal 카테고리 메뉴: 세로 한 줄씩 강제 */
.tp_catmenu { 
  display: block !important;      /* flex 해제 */
  padding-left: 0; 
  margin: 0;
}
.tp_catmenu li { 
  list-style: none; 
  display: block !important;      /* 가로로 붙지 않게 */
  margin: 6px 0;
}

/* 이름은 살짝 굵게 */
.tp_catmenu li > a { 
  font-weight: 600;
  line-height: 1.45;
  display: inline-block;
}

/* 구분 이미지 정렬 */
.tp_catmenu img { 
  vertical-align: middle; 
  margin: 0 6px 0 0;
  opacity: .8;
}

/* Mobile: stack; shorter height for small screens */
@media (max-width:768px){
  .hhj-hero-bg{ height:220px; }
  .hhj-hero-grid{ grid-template-columns:1fr; gap:8px; padding:16px; }
  .hero-kicker{ font-size:18px; }
  .hero-line{  font-size:14px; }
}
/* === Global font: Gowun Dodum 1st, Pretendard 2nd === */
html, body, input, select, textarea, button {
  font-family: 'Gowun Dodum', 'Pretendard', system-ui, -apple-system, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  font-weight: 400;
  font-size: 15px;       /* 필요시 14~16px로 조정 */
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 제목/카테고리바—살짝만 강조 (500) */
h1, h2, h3,
.cat_bar .catbg,
.title_bar .titlebg,
h4.titlebg, .forumtitle, .category_header {
  font-weight: 500;
}

/* 메인 메뉴/버튼—가독만 살짝 (500) */
#main_menu .linklevel1 > a,
.button, .button_submit,
.quickbuttons li a,
.pagesection .button,
.top_menu .button,
.dropmenu a.linklevel1 {
  font-weight: 500;
}

/* 본문 링크/글제목—과한 Bold 방지 */
.topic_name h4 a,
.poster h4,
.keyinfo .subject_title,
.inner .subject .subject_title,
.inline_mod_check {
  font-weight: 500;
}

/* 굵게 태그 톤다운 */
b, strong { font-weight: 500; }

/* 코드/프리포맷은 모노스페이스 유지 */
code, pre, kbd, samp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  font-weight: 400;
}

/* 작은 UI 텍스트(푸터/보조) */
.smalltext, .information, .description, .note {
  font-weight: 400;
  opacity: .95;
}

/* 폼 플레이스홀더 가독성 */
::placeholder { opacity: .7; }

/* 모바일 메뉴/툴바도 동일 톤 적용 */
#mobile_action a, #mobile_user_menu a { font-weight: 500; }

/* 필요 시 아주 조심스럽게 자간 조정 (기본 0 권장) */
/* body { letter-spacing: 0.003em; } */
/* UI 영역에 Pretendard 우선 적용 */
#main_menu, .pagesection, .button, .quickbuttons, .cat_bar, .title_bar, .top_menu {
  font-family: 'Pretendard', 'Gowun Dodum', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans KR', sans-serif;
}
/* 본문/글 영역에 고운돋움 유지 */
.postarea, .post, .inner, .content, .messageContent {
  font-family: 'Gowun Dodum', 'Pretendard', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans KR', sans-serif;
}