.wrapper .container .area-visual {   --visual-image: url(/_res/postech/rsac2027/img/pohang-gyeongju-diagonal-banner-1800x300.png);
  
  background-image: var(--visual-image);
  background-repeat: no-repeat;
  background-position: center;

  /* 자동 맞춤 */
  background-size: cover;   /* 영역을 꽉 채우되 잘릴 수 있음 */
  /* background-size: contain;  전체가 보이게 맞춤 (여백 생길 수 있음) */
/* 여기서 높이 지정 */
  height: 300px;   /* px, %, vh 단위 다 가능 */
  color: #ffffff;
  text-shadow: 3px 3px 3px rgba(1,1,1,0.6);
  font-family: Arial;
}

.title-arial {
  font-family: Arial;
}

.logo-ci {
  font-family: Arial;
}

/* Fix: dropdown submenu text was low-contrast gray (var(--color3)) over the banner photo,
   so it is solid white - but ONLY while the header is transparent (desktop, page not scrolled).
   After scrolling the header turns white (.sticky), and on tablet/mobile the menu panel is white,
   so there the template's default dark text color must apply (otherwise it is white-on-white). */
@media only screen and (min-width: 1025px) {
  .wrapper .header:not(.sticky) .gnb .submenu a {
    color: #fff !important;
  }
}

/* ==========================================================
   [2026-09-29] Site-wide consistency fixes
   ========================================================== */

/* 1. Arial on every page and component (header, menu, breadcrumb,
      page title, content, boards, forms, footer).
      The shared template uses Pretendard and some page contents reset
      the <body> font (Arial / system-ui), so fonts changed page to page.
      Icon fonts (.fa / Line Awesome) are excluded. */
html body,
html body *:not(.fa):not(.la):not(.las):not(.lar):not(.lab):not([class^="la-"]):not([class*=" la-"]) {
  font-family: Arial, Helvetica, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif !important;
}

/* 2. Same banner title / page title look on every page
      (some page contents override body color and line-height) */
.wrapper .container .area-visual h2,
.wrapper .container .page-tit h3 {
  line-height: 1.5;
}
.wrapper .container .page-tit h3 {
  color: #000;
}

/* 3. Contact page map: fill the whole map box (was only 150px tall) */
.wrapper .area-map .map > span {
  display: block;
  height: 100%;
}
.wrapper .area-map .map iframe {
  display: block;
  width: 100%;
  height: 100%;
}

/* 4. Keep the transparent header readable over the banner photo (desktop) */
@media only screen and (min-width: 1025px) {
  .wrapper .header:not(.sticky) {
    background-image: linear-gradient(to bottom, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 100%);
  }
  .wrapper .header:not(.sticky) .gnb a,
  .wrapper .header:not(.sticky) .logo .logo-lab .txt {
    text-shadow: 0 1px 3px rgba(0,0,0,.6);
  }
}

/* 5. Mobile banner title was cut off on both sides
     ("Transportation", "Accommodation" - any long single word).
     Cause: the shared template sets --visual-fontSize to 6rem for max-width:1024px,
     but below 750px it also makes 1rem = 2.6667vw, so 6rem = 16vw and a
     14-letter word at that size is wider than the phone screen (~112vw).
     Fix (phones only, <=749px): use the same 4rem as the desktop banner,
     keep the title inside the screen with side padding, and only break a
     word as a last resort. Tablet / desktop (>=750px) are not affected.
     Append this block to the end of:
     /_res/postech/rsac2027/css/cms-common.css */
@media only screen and (max-width: 749px) {
  html .wrapper .container .area-visual {
    --visual-fontSize: 4rem;
  }
  html .wrapper .container .area-visual > div {
    max-width: 100%;
    padding: 0 1.6rem;
    box-sizing: border-box;
  }
  html .wrapper .container .area-visual h2 {
    text-align: center;
    overflow-wrap: anywhere;
  }
}

/* Home hero brightness fix (RSAC 2027).
   The dark overlay on .iwri-hero::after (black at 48-60%) made the campus photo look
   about half as bright as the original image. The overlay is lowered to 4-10%, the photo
   gets +5% brightness / +10% saturation, and a soft local shade sits only behind the
   Date / Venue / Hosts block so the white text stays readable.
   Selectors are prefixed with "body" so they win over the inline <style> inside the hero widget.
   To roll back, delete this whole block. */
body .iwri-hero::before {
  filter: brightness(1.05) saturate(1.10);
}
body .iwri-hero::after {
  background: linear-gradient(to right, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.04) 36%, rgba(0,0,0,0.07) 100%);
}
body .iwri-hero__meta {
  position: relative;
}
body .iwri-hero__meta::before {
  content: "";
  position: absolute;
  inset: -20px -56px -18px -40px;
  z-index: -1;
  pointer-events: none;
  border-radius: 32px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.24), rgba(0,0,0,0.40));
  filter: blur(16px);
}
body .iwri-hero__metaLabel--big,
body .iwri-hero__metaValue {
  text-shadow: 0 1px 2px rgba(0,0,0,0.65), 0 0 8px rgba(0,0,0,0.45);
}

/* ① 사진: 밝기 +5%, 채도 +10% */
body .iwri-hero::before {
  filter: brightness(1.05) saturate(1.10);
}
 
/* ② 어두운 막: 0.60 / 0.48 / 0.55  →  0.10 / 0.04 / 0.07 */
body .iwri-hero::after {
  background: linear-gradient(to right, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.04) 36%, rgba(0,0,0,0.07) 100%);
}
 
/* ③ Date / Venue / Hosts 뒤에만 깔리는 아주 옅은 그림자 (사진 전체는 어둡게 하지 않음) */
body .iwri-hero__meta {
  position: relative;
}
body .iwri-hero__meta::before {
  content: "";
  position: absolute;
  inset: -20px -56px -18px -40px;
  z-index: -1;
  pointer-events: none;
  border-radius: 32px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.24), rgba(0,0,0,0.40));
  filter: blur(16px);
}
 
/* ④ 안내 글씨 그림자 — 밝은 배경 위에서도 흰 글씨가 또렷하도록 */
body .iwri-hero__metaLabel--big,
body .iwri-hero__metaValue {
  text-shadow: 0 1px 2px rgba(0,0,0,0.65), 0 0 8px rgba(0,0,0,0.45);
}
body .iwri-hero__title {
  color: #FF4D98;  /* 기존 #A61955 */
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
}
 
/* ⑤ 제목 주변의 흰색 번짐(후광)은 2026-10-16 요청으로 삭제함.
   되살리려면: body .iwri-hero__title { text-shadow: 0 0 2px rgba(255,255,255,0.85), 0 0 12px rgba(255,255,255,0.5); } */

/* Footer stays at the bottom of the page (RSAC 2027).
   Symptom: on the Home page (desktop, wider than 1024px) an empty white strip of about
   400-500px was left below the footer, so the footer looked like it was floating in the
   middle of the page instead of sitting at the bottom.
   Cause: the shared template draws the decorative background pattern with
   ".main-section.mes::after" (position: absolute; 144.2rem x 177.2rem; see
   ui.template.ctype.css). That box is taller than the short Home page, so it sticks out of
   main.wrapper and stretches the scrollable area of the document below the footer.
   Fix: clip the decoration at the edge of the page wrapper. "overflow: clip" does not turn
   the wrapper into a scroll container ("hidden" is only the fallback for very old browsers).
   Nothing else on any page sticks out of the wrapper, so no other layout changes.
   To roll back, delete this whole block. */
body > .wrapper {
  overflow: hidden;
  overflow: clip;
}

/* ==========================================================================
   [2026-10-01] GNB dropdown (submenu): same look before and after scrolling
   --------------------------------------------------------------------------
   Problem: over the banner photo the dropdown had a transparent background and
   thin white text (hard to read), and after scrolling (the header turns white,
   .sticky) it flipped to a white panel with gray text, so the two states looked
   like opposites.
   Fix (desktop only, wider than 1024px): in BOTH states the dropdown is an opaque
   black panel with bold white text, placed just below the header bar.
   The selector goes through ul.depth1 > li > .submenu so it out-ranks the template
   rules for both the transparent and the .sticky header.
   Tablet / mobile (1024px and below) keep the template menu panel.
   To roll back, delete this whole block.
   ========================================================================== */
@media only screen and (min-width: 1025px) {
  .wrapper .header nav.gnb ul.depth1 > li > .submenu {
    top: calc(100% + 4.5rem);
    left: 50%;
    transform: translateX(-50%);
    background-color: #000;
    border-radius: 1rem;
    box-shadow: 0 0.8rem 2.4rem rgba(0, 0, 0, 0.35);
  }
  .wrapper .header nav.gnb ul.depth1 > li > .submenu > ul {
    flex-direction: column;
    padding: 0.8rem;
  }
  .wrapper .header nav.gnb ul.depth1 > li > .submenu a {
    padding: 0.8rem 1.5rem;
    font-weight: 600;
    color: #fff !important;
    text-shadow: none;
    border-radius: 0.6rem;
  }
  .wrapper .header nav.gnb ul.depth1 > li > .submenu a:hover,
  .wrapper .header nav.gnb ul.depth1 > li > .submenu a:focus-visible {
    background-color: rgba(255, 255, 255, 0.22);
    color: #fff !important;
  }
  .wrapper .header nav.gnb ul.depth1 > li > .submenu a:hover::after {
    display: none;
  }
}

/*
   [2026-10-01] Font sizes aligned with ime2026.org (desktop only, wider than 1024px)
   --------------------------------------------------------------------------
   Feedback: the font size of ime2026.org (body 18px, menu 16px) was easy to read.
   Problem: the shared template sizes all text in rem and shrinks the root font size with
   the window width (html = 0.526vw at 1401-1900px, 0.714vw at 1025-1400px). On a normal
   laptop window (1440-1536px) the menu and body text were only 12-13px, and at 1401px the
   size even dropped by about 25% compared with 1400px.
   Fix:
   1) Override the template's font-size variables (--fontBase, --header-*, --footer-*, ...).
   2) Same for the 8 template rules that do not use a variable (footer address, board table,
      search box, contact info list).
   3) Raise the small fixed px sizes of the Home / About / Venue / Transportation pages.
   Template-based sizes are "max(old size, clamp(min, vw-based, max))": they reach the
   ime2026.org level (body 18px, menu 16px, site title 20px) from about 1500px up, shrink
   smoothly on narrower desktop windows and are never smaller than before, so the header
   never wraps. Tablet / mobile (1024px and below) are not touched.
   To roll back, delete this whole block. (되돌리려면 이 블록 전체를 삭제하세요.)
*/
@media only screen and (min-width: 1025px) {

  /* 1) Template font-size variables (desktop values) */
  :root { --fontBase: max(1.6rem, clamp(15px, 1.2vw, 18px)); }
  .wrapper .header {
    --header-logo-lab-fontSize: max(2.2rem, clamp(16px, 1.3333vw, 20px));
    --header-gnb-fontSize: max(1.6rem, clamp(13px, 1.0667vw, 16px));
    --header-btn-fontSize: max(1.2rem, clamp(12px, 0.8vw, 14px));
  }
  .wrapper .footer { --footer-btn-fontSize: max(1.4rem, clamp(12px, 0.9333vw, 14px)); }
  .wrapper .container { --linemap-fontSize: max(1.4rem, clamp(12px, 0.9333vw, 14px)); }
  [class*="btn-com"] { --btn-com-fontSize: max(1.6rem, clamp(14px, 1.0667vw, 16px)); }
  .btn-com2 { --btn-com-fontSize: max(1.4rem, clamp(13px, 0.9333vw, 14px)); }
  [class*="btn-sub"] { --btn-sub-fontSize: max(1.4rem, clamp(13px, 0.9333vw, 14px)); }

  /* 2) Template rules that do not use the variables */
  .wrapper .footer .area3 .copy { font-size: max(1.3rem, clamp(12px, 0.8667vw, 13px)); }
  input[type="text"], select { font-size: max(1.4rem, clamp(13px, 0.9333vw, 14px)); }
  .b-search-wrap input[type="text"] { width: max(24rem, 206px); }
  .board_list.table-wrap thead th { font-size: max(1.5rem, clamp(14px, 1vw, 15px)); }
  .board_list.table-wrap tbody td { font-size: max(1.4rem, clamp(15px, 1.0667vw, 16px)); }
  .b-search-wrap .flex_box .total-results,
  .b-search-wrap .flex_box .btn { font-size: max(1.4rem, clamp(13px, 0.9333vw, 14px)); }
  .info-data3 > dl > dt { font-size: max(1.4rem, clamp(14px, 1vw, 15px)); }

  /* 3) Home */
  body .iwri-welcome__text { font-size: 18px; }
  body .iwri-welcome__caption { font-size: 16px; }
  body .iwri-welcome__more { font-size: 17px; }
  body .iwri-welcome__more .arrow { font-size: 18px; }

  /* 4) About (hosts.do) */
  body[data-cur-uri$="/hosts.do"] .name { font-size: 20px; }
  body[data-cur-uri$="/hosts.do"] .affil,
  body[data-cur-uri$="/hosts.do"] .bio .label { font-size: 16px; }
  body[data-cur-uri$="/hosts.do"] .bio .text { font-size: 17px; }
  body[data-cur-uri$="/hosts.do"] .sponsor-card .name { font-size: 17px; }
  body[data-cur-uri$="/hosts.do"] .sponsor-tier h3 { font-size: 19px; }
  body[data-cur-uri$="/hosts.do"] .link { font-size: 15px; }
  body[data-cur-uri$="/hosts.do"] .cta-btn { font-size: 16px !important; }

  /* 5) Venue (venue001.do) */
  body .rsac-tg-hero-eyebrow, body .rsac-tg-credits, body .rsac-tg-tag { font-size: 14px; }
  body .rsac-tg-credits summary { font-size: 15px; }
  body .rsac-tg-credits summary::before { font-size: 13px; }
  body .rsac-tg-facts li, body .rsac-tg-quicknav a, body .rsac-tg-more, body .rsac-tg-note { font-size: 16px; }
  body .rsac-tg-card-body p, body .rsac-tg-hero-caption p, body .rsac-tg-divider { font-size: 17px; }
  body .rsac-tg-intro, body .rsac-tg-lead { font-size: 18px; }
  body .rsac-tg-card-body h4 { font-size: 20px; }
  body .rsac-tg-subhead { font-size: 21px; }

  /* 6) Transportation (venue.do) */
  body[data-cur-uri$="/venue.do"] .badge { font-size: 13px; }
  body[data-cur-uri$="/venue.do"] .quicknav button { font-size: 16px; }
  body[data-cur-uri$="/venue.do"] .info-table thead th { font-size: 16px; }
  body[data-cur-uri$="/venue.do"] .info-table th,
  body[data-cur-uri$="/venue.do"] .info-table td { font-size: 18px; }
  body[data-cur-uri$="/venue.do"] .mode-label { font-size: 19px; }
}

/* Home hero darkening (RSAC 2027) - added 2026-10-16.
   The campus photo behind the title was still too bright, so the photo is dimmed
   (brightness 1.05 -> 0.65) and the dark overlay is raised (4-10% -> 34-40%).
   This block is last in the file so it wins over the "Home hero brightness fix" blocks above.
   Korean: 홈 히어로 배경 어둡게 - 사진 밝기 1.05 -> 0.65, 어두운 막 4~10% -> 34~40%.
   To roll back to the previous look, delete this whole block. */
body .iwri-hero::before {
  filter: brightness(0.65) saturate(1.10);
}
body .iwri-hero::after {
  background: linear-gradient(to right, rgba(0,0,0,0.40) 0%, rgba(0,0,0,0.34) 36%, rgba(0,0,0,0.38) 100%);
}

/* Brand point color (RSAC 2027) - added 2026-10-16.
   The shared POSTECH template sets --point1 to #c8005f, so the menu hover/active state,
   the "Welcome Message" title, buttons, boards and paging did not use the brand color.
   Brand color: RGB(166, 25, 85) = #a61955.
   Korean: 포인트 컬러를 RGB(166, 25, 85) / #a61955 로 통일 (템플릿 기본값 #c8005f 덮어쓰기). */
:root {
  --point1: #a61955;
  --page-point: #a61955;
}
@media screen and (max-width: 760px) {
  .total-results .count { color: #a61955; }
}