/* ============================================================
 * 학술행사 반응형 (2026 fall 테스트베드)
 *
 * - 이 파일은 layout/basic.jsp 에서 media="screen and (max-width:1024px)" 로 로드된다.
 * - 모든 규칙은 body 의 .abs-2026-fall 스코프 안에 둔다.
 *   (tiles.xml 의 bodyClass 로 abs-{연도}-{시즌} 이 붙는다)
 *   -> 다른 연도 학술행사 페이지는 영향받지 않는다.
 * - 검증이 끝나면 스코프를 넓혀 다른 연도로 확장한다.
 *
 * [범위] 폭/여백 등 기본 프레임은 abstract.less 의 기존 미디어쿼리(999 / 767)가
 *   이미 처리하고 있다. 이 파일에는 "기존 반응형이 커버하지 못하는 것"만 넣는다.
 *   - 1000px 고정폭 해제, .abstractCon / .txRec 여백  -> abstract.less (999 / 767)
 *   - box-sizing 통일                                 -> abstract.less (.abs-2026-fall 스코프)
 *   중복해서 쓰면 이 파일이 나중에 로드되고 특성도 높아 기존 모바일 디자인을 덮어버린다.
 *   (예: 767 에서 .abstractCon 의 좌우 패딩 0 은 의도된 값이다. 안쪽 섹션이 각자 패딩을 갖는다.)
 *
 * [브레이크포인트] abstract.less 와 동일하게 999 / 767 을 쓴다. 새 값을 만들지 않는다.
 * ============================================================ */
/* 모바일 상단 바 높이. 메뉴 목록·딤이 바로 아래 붙어야 해서 여러 곳에서 같이 쓴다. */
/* 메뉴 열림/닫힘 전환 시간 */
/* 본문 좌우 여백. 컨테이너(.abstractCon)에서 한 번에 주고, 화면 끝까지 늘려야 하는
   블록만 아래 .fullBleed() 로 예외 처리한다. */
/* 본문 목록 불릿 크기와 글자까지의 간격 */
/* 배경이 있는 블록을 화면 끝까지 늘리는 패턴.
   컨테이너의 좌우 패딩을 음수 마진으로 상쇄하고, 같은 값을 자기 패딩으로 돌려받는다.
   -> 배경은 화면 끝까지, 글자는 본문 텍스트와 같은 선에 정렬된다.
   (음수 마진이 컨테이너 패딩과 정확히 같아서 가로 넘침은 생기지 않는다) */
.abs-2026-fall {
  /* 이미지가 컨테이너를 넘지 않도록 (행사장 지도 등) */
  /* iOS 사파리는 16px 미만 input 에 포커스하면 화면을 자동 확대한다.
	   폼 컨트롤을 16px 로 올려 확대를 막는다(사용자 수동 확대는 그대로 허용).
	   개별 폼 규칙(0.95rem 등)보다 확실히 이기도록 !important. */
  /* ── 태블릿 이하 ───────────────────────────────────────────────
	   1000px 고정폭 해제. 화면이 그보다 좁아지는 지점부터 필요하다. */
}
.abs-2026-fall img {
  max-width: 100%;
  height: auto;
}
.abs-2026-fall .abstractCon input,
.abs-2026-fall .abstractCon select,
.abs-2026-fall .abstractCon textarea {
  font-size: 16px !important;
}
@media screen and (max-width: 999px) {
  .abs-2026-fall #header .abstractVisualRec .txRec {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }
  .abs-2026-fall .abstractCon {
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .abs-2026-fall {
    /* ── 모바일 헤더 ───────────────────────────────────────────
		   비주얼 영역(연도 / 학회명 / 연수강좌)은 세로 공간만 차지하므로 숨기고,
		   대신 "행사명 + 현재 화면명 + 햄버거" 로 된 바를 상단에 고정한다.
		   nav 는 abstract.less 767 에서 숨겨져 있는데, 햄버거로 열리는 목록으로 되살린다. */
    /* 행사명(작게) + 화면명(굵게) 두 줄 */
    /* flex:1 + min-width:0 이라야 사전등록 버튼/햄버거가 자리를 먼저 차지하고
		   남는 폭에서 긴 화면명이 말줄임(...)으로 잘린다. */
    /* 사전등록 버튼 + 햄버거를 오른쪽에 묶는다 (연수강좌는 사전등록이 핵심 동선) */
    /* 햄버거로 여는 메뉴 --------------------------------------
		   바(z-index 61)를 메뉴(60)보다 위에 둬서, 메뉴가 바 뒤에서 미끄러져
		   내려오는 것처럼 보이게 한다. 닫힐 때는 다시 바 뒤로 올라간다.
		   display 로 껐다 켜면 전환이 안 되므로 visibility + transform 을 쓴다. */
    /* 메뉴 아래(본문)를 덮는 딤. 메뉴 목록(z-index 60)보다는 아래에 둔다. */
    /* 모션 최소화를 켠 사용자에게는 애니메이션 없이 바로 표시한다 */
    /* ── 본문 ──────────────────────────────────────────────────
		   좌우 여백은 컨테이너에서 한 번에 주고, 화면 끝까지 채워야 하는 블록만
		   .fullBleed() 로 예외 처리한다. */
    /* 화면명은 상단 바에 표시하므로 본문 제목은 숨긴다 */
    /* 일시/장소 안내 --------------------------------------------
		   데스크톱은 테두리 있는 박스에 장소를 오른쪽 절반(left:50%)에 절대배치한다.
		   좁은 화면에서는 배경만 화면 끝까지 깔고 위아래로 쌓는다. */
    /* ── 프로그램 ──────────────────────────────────────────────
		   시간 / 강연명 / 강연자 3열을 가로로 두면 강연명이 좁아 여러 줄로 깨진다.
		   시간을 윗줄에 작게 두고 강연명이 본문 폭을 다 쓰도록 세로로 쌓는다. */
    /* 행사명 / 일시·장소. 데스크톱은 line-height 가 1 이라 줄바꿈되면 글자가 붙는다. */
    /* 시간 블록 박스 (abstract-mobile.js 가 휴식 시간을 경계로 묶는다) --------
		   묶이지 않았을 때(스크립트 실패)도 행 목록은 그대로 보인다. */
    /* 세션 머리는 박스의 첫 행이자 제목이 된다 */
    /* 휴식은 그 블록의 마지막 행이다. 시간과 내용을 한 줄로 붙여 가볍게 둔다. */
    /* 세션 끝 진한 구분선은 박스 구성에서는 불필요 */
    /* 세션 머리(Session 1 · 좌장)는 시간 칸이 비어 있는 행이다.
		   배경을 깔면 구분선(좌우 여백 안쪽)과 어긋나 보이므로, 배경 없이
		   본문 헤딩과 같은 언어(파란 세로바 + 굵은 제목)로 구분한다.
		   :has() 를 못 쓰는 구형 브라우저에서는 여백만 덜 붙고 내용은 그대로 보인다. */
    /* 박스 머리에 배경이 깔리므로 제목 앞 불릿은 두지 않는다 */
    /* 휴식은 강연과 같은 흰 배경으로 두고 글자만 흐리게 */
    /* 목록 불릿 ------------------------------------------------
		   기본 마커(::marker)는 글자와의 간격을 지정할 수 없어(색/글꼴/내용만 가능)
		   마커를 끄고 직접 그린다. 간격은 @liGap 으로 조절.
		   덤으로 list-style-position:inside 와 달리 줄바꿈된 줄이 글자에 맞춰 정렬된다. */
    /* 제목 앞 파란 불릿은 요소 전체 기준 세로 중앙이라, 제목이 두 줄이 되면
		   가운데로 내려간다. 첫 줄 높이 기준으로 맞춘다.
		   1.6em = abstract.less 767 의 .conTx line-height, 14px = 불릿 높이 */
    /* ── 모시는 글 ─────────────────────────────────────────────
		   데스크톱은 사진을 왼쪽에 절대배치하고 글을 오른쪽에 붙이는 2단이다.
		   좁은 화면에서는 사진을 위, 글을 아래로 쌓는다. */
    /* 표 안전망 - 카드 변환이 안 된 표는 잘리지 않고 가로 스크롤되게.
		   .tableSec 이 width:100% 라 최소폭을 함께 주지 않으면 스크롤이 생기지 않고
		   셀만 찌그러진다. */
    /* ── 표 재구성 ─────────────────────────────────────────────
		   abstract-table-card.js 가 "안내 열을 뺀 표 + 안내 카드"를 만들고
		   .tableRec 에 hasCards 를 붙인다.
		   스크립트가 실패하면 hasCards 가 없어 원본 표가 그대로 남는다(내용 유실 방지). */
    /* 안내 열을 뺀 표는 좁은 화면에 그대로 들어가므로 최소폭을 풀어준다 */
    /* 표 전체에 걸리던 안내(계좌이체 / 부분등록 안내 등)는 카드로 */
    /* ── 사전등록 폼 ─────────────────────────────────────────────
		   개인정보/결제선택 표는 라벨(th) 위 · 입력(td) 아래로 세로로 쌓는다.
		   금액 요약(.payTable)만 "항목 — 금액" 한 줄로 유지한다.
		   입력 폭 클래스(wid50 등)는 데스크톱 값이라 모바일에선 100% 로 덮는다. */
    /* 결제 선택(연장자우대/입회비/연회비/결제방식)은 안드로이드 설정 목록처럼
		   항목마다 구분선 + 패딩으로 나눈다. (개인정보 폼은 구분선 없이 유지) */
    /* 금액 요약 - 라벨 왼쪽 · 금액 오른쪽 (영수증 형태) */
    /* 등록/취소 버튼 - 가로 꽉 채워 나란히 (등록을 오른쪽 주동작으로) */
    /* 팝업이 화면보다 넓어 가로 스크롤 생기는 것 방지 */
  }
  .abs-2026-fall #header {
    position: sticky;
    top: 0;
  }
  .abs-2026-fall #header .abstractVisualRec {
    display: none;
  }
  .abs-2026-fall #header .mobileBar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 64px;
    padding: 0 16px;
    background-color: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  }
  .abs-2026-fall #header .mobileBarTx {
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }
  .abs-2026-fall #header .mobileBarActions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 10px;
  }
  .abs-2026-fall #header .mobileBarEnroll {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 6px;
    background-color: #0072ff;
    color: #fff;
    font-size: 0.85rem;
    font-weight: bold;
    line-height: 1;
    white-space: nowrap;
  }
  .abs-2026-fall #header .mobileBarEnroll:hover,
  .abs-2026-fall #header .mobileBarEnroll:active {
    background-color: #0060db;
    color: #fff;
  }
  .abs-2026-fall #header .mobileBarEvent {
    overflow: hidden;
    color: #888;
    font-size: 0.75rem;
    line-height: 1.3;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .abs-2026-fall #header .mobileBarTitle {
    overflow: hidden;
    color: #222;
    font-size: 1.05rem;
    font-weight: bold;
    line-height: 1.35;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .abs-2026-fall #header .mobileBarToggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
    gap: 5px;
    width: 40px;
    height: 40px;
    margin-right: -8px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
  }
  .abs-2026-fall #header .mobileBarToggle > span {
    display: block;
    width: 22px;
    height: 2px;
    margin: 0 auto;
    border-radius: 2px;
    background-color: #333;
    transition: transform 200ms ease, opacity 200ms ease;
  }
  .abs-2026-fall #header .mobileBarToggle.open > span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .abs-2026-fall #header .mobileBarToggle.open > span:nth-child(2) {
    opacity: 0;
  }
  .abs-2026-fall #header .mobileBarToggle.open > span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
  .abs-2026-fall #header .mobileBar {
    position: relative;
    z-index: 61;
  }
  .abs-2026-fall #header .nav {
    display: block;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    height: auto;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    z-index: 60;
    visibility: hidden;
    transform: translateY(-100%);
    transition: transform 200ms ease, visibility 0s linear 200ms;
  }
  .abs-2026-fall #header.navOpen .nav {
    visibility: visible;
    transform: translateY(0);
    transition: transform 200ms ease, visibility 0s;
  }
  .abs-2026-fall #header .navDim {
    display: block;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 55;
    visibility: hidden;
    opacity: 0;
    transition: opacity 200ms ease, visibility 0s linear 200ms;
  }
  .abs-2026-fall #header.navOpen .navDim {
    visibility: visible;
    opacity: 1;
    transition: opacity 200ms ease, visibility 0s;
  }
  .abs-2026-fall #header .nav > ul {
    display: block;
    max-width: none;
    height: auto;
  }
  .abs-2026-fall #header .nav > ul > li {
    height: auto;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    /* 하위 메뉴가 있는 항목 -----------------------------------
			   글자는 링크 그대로 두고(눌러서 이동), 오른쪽 화살표만 펼치기 버튼으로 쓴다.
			   탭 의도가 이동인지 펼치기인지 헷갈리지 않도록 히트 영역을 나눈 것. */
    /* 펼쳐진 하위 목록은 한 단 들여쓰고, 1depth(흰색)보다 살짝 어둡게 둔다 */
  }
  .abs-2026-fall #header .nav > ul > li > a {
    /* padding + line-height 합이 아래 .subToggle 높이(48px)와 같아야 한다 */
    height: auto;
    padding: 14px 16px;
    text-align: left;
    line-height: 20px;
  }
  .abs-2026-fall #header .nav > ul > li > a:hover {
    background: none;
    border: 0;
  }
  .abs-2026-fall #header .nav > ul > li.hasSub > a {
    padding-right: 56px;
  }
  .abs-2026-fall #header .nav > ul > li.hasSub > .subToggle {
    display: block;
    position: absolute;
    /* li 가 position:relative (abstract.less) */
    top: 0;
    right: 0;
    width: 56px;
    height: 48px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
  }
  .abs-2026-fall #header .nav > ul > li.hasSub > .subToggle::after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    margin: -3px auto 0;
    border-right: 2px solid #888;
    border-bottom: 2px solid #888;
    transform: rotate(45deg);
    transition: transform 200ms ease, margin 200ms ease;
  }
  .abs-2026-fall #header .nav > ul > li.hasSub.subOpen > .subToggle::after {
    margin-top: 3px;
    transform: rotate(-135deg);
  }
  .abs-2026-fall #header .nav > ul > li.hasSub > ul {
    display: none;
  }
  .abs-2026-fall #header .nav > ul > li.hasSub.subOpen > ul {
    display: block;
  }
  .abs-2026-fall #header .nav > ul > li > ul {
    position: static;
    background-color: #f2f4f6;
  }
  .abs-2026-fall #header .nav > ul > li > ul > li {
    width: auto;
    max-height: none;
    overflow: visible;
  }
  .abs-2026-fall #header .nav > ul > li > ul > li > a {
    height: auto;
    padding: 12px 16px 12px 32px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    color: #666;
    font-size: 0.9rem;
    line-height: 1.4;
  }
  .abs-2026-fall #header .nav > ul > li > ul > li > a:hover {
    background: none;
    color: #333;
  }
  .abs-2026-fall .abstractCon {
    padding: 20px 20px 40px;
  }
  .abs-2026-fall .abstractCon.info-con {
    padding-top: 0;
  }
  .abs-2026-fall .abstractCon .headerRec > h1 {
    display: none;
  }
  .abs-2026-fall .abstractCon .abstractSec {
    margin: 0;
  }
  .abs-2026-fall .abstractCon .abstractSec .topInfoRec {
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
    height: auto;
    padding-top: 20px;
    padding-bottom: 20px;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  }
  .abs-2026-fall .abstractCon .abstractSec .topInfoRec .date > span,
  .abs-2026-fall .abstractCon .abstractSec .topInfoRec .place > span {
    font-size: 0.8rem;
  }
  .abs-2026-fall .abstractCon .abstractSec .topInfoRec .date .tx,
  .abs-2026-fall .abstractCon .abstractSec .topInfoRec .place .tx {
    margin-top: 8px;
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.5;
  }
  .abs-2026-fall .abstractCon .abstractSec .topInfoRec .date .tx:last-child,
  .abs-2026-fall .abstractCon .abstractSec .topInfoRec .place .tx:last-child {
    margin-top: 4px;
  }
  .abs-2026-fall .abstractCon .abstractSec .topInfoRec .place {
    position: relative;
    top: auto;
    left: auto;
    margin-top: 24px;
  }
  .abs-2026-fall .abstractCon .abstractSec .conTxRec {
    margin: 0;
    padding: 20px 0 0;
  }
  .abs-2026-fall .abstractCon .abstractSec .conTxRec .conTx {
    margin-top: 40px;
    font-size: 1rem;
    line-height: 1.6;
    /* 본문 안에서 크기를 키워둔 문구들(txLarge 등)을 모바일에서는 하나로 맞춘다 */
  }
  .abs-2026-fall .abstractCon .abstractSec .conTxRec .conTx > * {
    font-size: 1rem !important;
    color: #333;
  }
  .abs-2026-fall .abstractCon .abstractSec .conTxRec .conTx .paragraphRec {
    padding: 10px 0 0 0;
  }
  .abs-2026-fall .abstractCon .abstractSec .conTxRec .conTx .paragraphRec > .paragraphTx > span {
    font-size: 1rem !important;
  }
  .abs-2026-fall .abstractCon .abstractSec .conTxRec .conTx .paragraphRec > li {
    color: #333;
    font-size: 1rem;
  }
  .abs-2026-fall .abstractCon .abstractSec .conTxRec .conTx .tableRec {
    padding: 10px 0 0 0;
  }
  .abs-2026-fall .abstractProgram .abstractProgramTitle > h2 {
    font-size: 1.2rem;
    font-weight: bold;
    color: #222;
    line-height: 1.4;
  }
  .abs-2026-fall .abstractProgram .abstractProgramTitle .tx {
    padding-bottom: 10px;
    font-size: 0.9rem;
    line-height: 1.5;
  }
  .abs-2026-fall .abstractProgram .abstractProgramTitle .person {
    font-size: 0.85rem;
    line-height: 1.5;
  }
  .abs-2026-fall .abstractProgram .ProgramInfo {
    border-top: 0;
  }
  .abs-2026-fall .abstractProgram .ProgramInfo .programGroup {
    margin-top: 10px;
    background-color: #fff;
    border: 1px solid #e0e4ea;
    border-radius: 8px;
    overflow: hidden;
  }
  .abs-2026-fall .abstractProgram .ProgramInfo .programGroup:first-child {
    margin: 0;
  }
  .abs-2026-fall .abstractProgram .ProgramInfo .programGroup > ul > .ProgramInfoItem {
    padding: 0 14px;
    border-bottom: 1px solid #eef0f3;
  }
  .abs-2026-fall .abstractProgram .ProgramInfo .programGroup > ul > .ProgramInfoItem:last-child {
    border-bottom: 0;
  }
  .abs-2026-fall .abstractProgram .ProgramInfo .programGroup > ul > .ProgramInfoItem:first-child:has(> ul > li.time:empty) {
    background-color: #f1f3f7;
    border-bottom: 1px solid #e0e4ea;
  }
  .abs-2026-fall .abstractProgram .ProgramInfo .ProgramInfoItem.breakTime {
    background-color: #fafbfc;
  }
  .abs-2026-fall .abstractProgram .ProgramInfo .ProgramInfoItem.breakTime > ul {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 0;
  }
  .abs-2026-fall .abstractProgram .ProgramInfo .ProgramInfoItem.breakTime > ul > li.time {
    margin-bottom: 0;
  }
  .abs-2026-fall .abstractProgram .ProgramInfo .ProgramInfoItem.sessionEnd {
    border-bottom-color: #eef0f3;
  }
  .abs-2026-fall .abstractProgram .ProgramInfo .ProgramInfoItem > ul {
    display: block;
    padding: 12px 0;
  }
  .abs-2026-fall .abstractProgram .ProgramInfo .ProgramInfoItem > ul > li {
    width: auto;
    padding: 0;
    line-height: 1.45;
    /* 강연자가 없는 행(등록 / 휴식)에서 빈 칸이 여백을 만들지 않도록 */
  }
  .abs-2026-fall .abstractProgram .ProgramInfo .ProgramInfoItem > ul > li:empty {
    display: none;
  }
  .abs-2026-fall .abstractProgram .ProgramInfo .ProgramInfoItem > ul > li p {
    padding-top: 0;
    font-size: inherit;
    line-height: inherit;
  }
  .abs-2026-fall .abstractProgram .ProgramInfo .ProgramInfoItem > ul > li.time {
    margin-bottom: 3px;
    font-size: 0.8rem;
    font-weight: 500;
    color: #07f;
  }
  .abs-2026-fall .abstractProgram .ProgramInfo .ProgramInfoItem > ul > li.mainTxRec {
    font-size: 1rem;
    font-weight: 500;
    color: #222;
  }
  .abs-2026-fall .abstractProgram .ProgramInfo .ProgramInfoItem > ul > li.nameRec {
    margin-top: 3px;
    font-size: 0.9rem;
    color: #777;
  }
  .abs-2026-fall .abstractProgram .ProgramInfo .ProgramInfoItem:has(> ul > li.time:empty) > ul {
    padding: 16px 0 14px;
  }
  .abs-2026-fall .abstractProgram .ProgramInfo .ProgramInfoItem .subTitleTx.mainTx {
    font-size: 1.05rem;
    font-weight: bold;
    color: #222;
  }
  .abs-2026-fall .abstractProgram .ProgramInfo .ProgramInfoItem.breakTime {
    background-color: transparent;
  }
  .abs-2026-fall .abstractProgram .ProgramInfo .ProgramInfoItem.breakTime > ul > li.mainTxRec {
    font-size: 0.9rem;
    font-weight: 400;
    color: #555;
  }
  .abs-2026-fall .abstractCon .abstractSec .conTxRec .conTx .paragraphRec > li {
    list-style: none;
    position: relative;
    padding-left: 12px;
  }
  .abs-2026-fall .abstractCon .abstractSec .conTxRec .conTx .paragraphRec > li::before {
    content: '';
    position: absolute;
    left: 0;
    top: calc((1.6em - 4px) / 2);
    /* 첫 줄 세로 중앙 */
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #333;
  }
  .abs-2026-fall .abstractCon .abstractSec .conTxRec .conTx .labelTx.bullet::before {
    top: calc((1.6em - 14px) / 2);
    transform: none;
  }
  .abs-2026-fall .abstractIntro .introImgRec {
    position: static;
    width: 100%;
    max-width: 200px;
    height: auto;
    margin: 0 auto;
    background: none;
  }
  .abs-2026-fall .abstractIntro .introImgRec > img {
    width: 100%;
    height: auto;
  }
  .abs-2026-fall .abstractIntro .introTxRec {
    margin-top: 24px;
    padding-left: 0;
  }
  .abs-2026-fall .tableRec {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .abs-2026-fall .tableRec .tableSec {
    min-width: 540px;
  }
  .abs-2026-fall .tableRec.hasCards {
    overflow: visible;
  }
  .abs-2026-fall .tableRec.hasCards > table {
    display: none;
  }
  .abs-2026-fall .tableCards {
    display: block;
  }
  .abs-2026-fall .tableCards .tableSec {
    min-width: 0;
  }
  .abs-2026-fall .tableNotes {
    margin-top: 12px;
  }
  .abs-2026-fall .tableNote {
    border: 1px solid #e0e4ea;
    border-radius: 6px;
    overflow: hidden;
  }
  .abs-2026-fall .tableNote + .tableNote {
    margin-top: 10px;
  }
  .abs-2026-fall .tableNoteLabel {
    padding: 9px 12px;
    background-color: #f2f4f6;
    font-size: 0.9rem;
    font-weight: bold;
    color: #333;
  }
  .abs-2026-fall .tableNoteTx {
    padding: 10px 12px;
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
  }
  .abs-2026-fall .infoTableRec .infoTable {
    /* 표 요소 자체도 block 으로 바꿔야 한다. table 로 두면 컨테이너 폭이 아니라
			   내용(입력창 기본폭 등)의 최소폭까지 늘어나 오른쪽으로 넘친다. */
    display: block;
    width: 100%;
    max-width: 100%;
    margin-bottom: 24px;
    border-top: 0;
    border-bottom: 0;
  }
  .abs-2026-fall .infoTableRec .infoTable:not(.payTable) {
    /* 회원/비회원 안내 (colspan 한 줄) */
    /* 입력창 - 폭 클래스 무시하고 꽉 채움 */
    /* 라디오는 안드로이드 설정처럼 항목당 한 줄씩 세로 정렬 (라디오 왼쪽 · 텍스트).
			   체크박스(토글)는 아래 :has(checkbox) 규칙에서 따로 처리한다.
			   :has 미지원 브라우저는 base 의 인라인 칩으로 떨어진다(동작엔 지장 없음). */
    /* 휴대폰/연락처 - select + 번호 + 번호 한 줄 유지 */
    /* 체크박스(65세 이상·연회비) -> 안드로이드 설정 토글 스위치.
			   iOS 사파리는 input 의 ::before 를 안 그리므로 가상요소 대신 background 로 썸을 그린다. */
    /* 토글은 라벨 한 줄을 꽉 채워 텍스트 왼쪽 · 스위치 오른쪽 (설정 화면 스타일).
			   :has 미지원 브라우저는 인라인으로 떨어지지만 스위치 자체는 동작한다. */
    /* 라디오(구분·근무처·결제방식) -> 모던 커스텀 라디오. 선택 시 파란 테두리 + 파란 점.
			   토글과 마찬가지로 background 로 점을 그려 iOS 까지 안전하게 한다. */
    /* 회원 여부에 따른 입회비/연회비 노출은 PC 와 동일하게 유지한다.
			   abstract.less: .dues 는 컨트롤(라벨) 숨김 + 안내문구만, .active 만 컨트롤 노출.
			   위 토글 규칙(:has)이 특정성이 높아 비active 연회비까지 강제 노출시키므로 다시 숨긴다.
			   (비회원=입회비 active, 회원=연회비 active — JS 가 .active 를 옮긴다) */
  }
  .abs-2026-fall .infoTableRec .infoTable:not(.payTable) > tbody,
  .abs-2026-fall .infoTableRec .infoTable:not(.payTable) > tbody > tr,
  .abs-2026-fall .infoTableRec .infoTable:not(.payTable) > tbody > tr > th,
  .abs-2026-fall .infoTableRec .infoTable:not(.payTable) > tbody > tr > td {
    display: block;
    width: auto;
  }
  .abs-2026-fall .infoTableRec .infoTable:not(.payTable) > tbody > tr {
    /* 구분선 제거, 그룹 사이 간격만으로 라벨 가독성 확보 */
    padding: 0 0 18px;
    border-bottom: 0;
    /* 한 행에 라벨+입력 쌍이 둘(의사면허번호+전문의번호, 휴대폰+연락처)인 경우
				   두 번째 라벨 위에 간격을 줘 앞 입력창과 붙지 않게 한다 */
  }
  .abs-2026-fall .infoTableRec .infoTable:not(.payTable) > tbody > tr > th,
  .abs-2026-fall .infoTableRec .infoTable:not(.payTable) > tbody > tr > td {
    padding: 0;
    border: 0;
    font-size: 0.95rem;
    line-height: 1.5;
  }
  .abs-2026-fall .infoTableRec .infoTable:not(.payTable) > tbody > tr > th {
    margin-bottom: 8px;
    background: none;
    font-weight: 600;
    color: #333;
  }
  .abs-2026-fall .infoTableRec .infoTable:not(.payTable) > tbody > tr > th .req {
    color: #f03;
  }
  .abs-2026-fall .infoTableRec .infoTable:not(.payTable) > tbody > tr > td + th {
    margin-top: 18px;
  }
  .abs-2026-fall .infoTableRec .infoTable:not(.payTable) .memberInfo {
    padding: 12px 14px;
    background-color: #f2f4f6;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #555;
  }
  .abs-2026-fall .infoTableRec .infoTable:not(.payTable) td input[type="text"],
  .abs-2026-fall .infoTableRec .infoTable:not(.payTable) td input[type="password"] {
    width: 100% !important;
    height: 48px;
    box-sizing: border-box;
    padding: 0 14px;
    background-color: #f9fafb;
    border: 1px solid #e5e8eb;
    border-radius: 10px;
    font-size: 0.95rem;
    color: #191f28;
  }
  .abs-2026-fall .infoTableRec .infoTable:not(.payTable) td input[type="text"]:focus,
  .abs-2026-fall .infoTableRec .infoTable:not(.payTable) td input[type="password"]:focus {
    outline: 0;
    background-color: #fff;
    border-color: #0072ff;
    box-shadow: 0 0 0 3px rgba(0, 114, 255, 0.14);
  }
  .abs-2026-fall .infoTableRec .infoTable:not(.payTable) td > label:has(> input[type="radio"]) {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 10px 2px;
    font-weight: 400;
  }
  .abs-2026-fall .infoTableRec .infoTable:not(.payTable) td.phoneNumRec {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .abs-2026-fall .infoTableRec .infoTable:not(.payTable) td.phoneNumRec > select.phoneNum {
    flex: 0 0 auto;
    width: auto;
    min-width: 76px;
    height: 48px;
    border-radius: 10px;
  }
  .abs-2026-fall .infoTableRec .infoTable:not(.payTable) td.phoneNumRec > input.phoneNum {
    flex: 1;
    width: auto !important;
    min-width: 0;
    height: 48px;
    padding: 0;
    text-align: center;
  }
  .abs-2026-fall .infoTableRec .infoTable:not(.payTable) td.phoneNumRec > span {
    flex: 0 0 auto;
    height: auto;
    padding: 0;
    line-height: normal;
  }
  .abs-2026-fall .infoTableRec .infoTable:not(.payTable) td input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 46px;
    height: 26px;
    margin: 0;
    border: 0;
    border-radius: 13px;
    background-color: #d1d5db;
    background-image: radial-gradient(circle, #fff 45%, transparent 47%);
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: 3px center;
    transition: background-color 0.2s, background-position 0.2s;
    cursor: pointer;
  }
  .abs-2026-fall .infoTableRec .infoTable:not(.payTable) td input[type="checkbox"]:checked {
    background-color: #0072ff;
    background-position: calc(100% - 3px) center;
  }
  .abs-2026-fall .infoTableRec .infoTable:not(.payTable) td label:has(> input[type="checkbox"]) {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 4px 0;
    font-weight: 500;
  }
  .abs-2026-fall .infoTableRec .infoTable:not(.payTable) td input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin: 0;
    border: 2px solid #c5ccd6;
    border-radius: 50%;
    background-color: #fff;
    background-image: radial-gradient(circle, #0072ff 45%, transparent 47%);
    background-size: 0 0;
    background-repeat: no-repeat;
    background-position: center;
    transition: border-color 0.15s, background-size 0.15s;
    cursor: pointer;
  }
  .abs-2026-fall .infoTableRec .infoTable:not(.payTable) td input[type="radio"]:checked {
    border-color: #0072ff;
    background-size: 12px 12px;
  }
  .abs-2026-fall .infoTableRec .infoTable:not(.payTable) td.dues:not(.active) > label {
    display: none;
  }
  .abs-2026-fall .infoTableRec .infoTable.payCheckTable > tbody > tr {
    padding: 16px 2px;
    border-bottom: 1px solid #e8ebee;
  }
  .abs-2026-fall .infoTableRec .infoTable.payCheckTable > tbody > tr:last-child {
    border-bottom: 0;
    padding-bottom: 4px;
  }
  .abs-2026-fall .infoTableRec .payTable {
    /* 결제금액은 위 항목들과 떼어 단독 박스로. 좌우 패딩 + 라운드 */
  }
  .abs-2026-fall .infoTableRec .payTable > tbody,
  .abs-2026-fall .infoTableRec .payTable > tbody > tr,
  .abs-2026-fall .infoTableRec .payTable > tbody > tr > th,
  .abs-2026-fall .infoTableRec .payTable > tbody > tr > td {
    display: block;
  }
  .abs-2026-fall .infoTableRec .payTable > tbody > tr {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 12px 2px;
    border-bottom: 1px solid #eef0f3;
  }
  .abs-2026-fall .infoTableRec .payTable > tbody > tr > th,
  .abs-2026-fall .infoTableRec .payTable > tbody > tr > td {
    padding: 0;
    border: 0;
    background: none;
  }
  .abs-2026-fall .infoTableRec .payTable > tbody > tr > th {
    font-weight: 600;
    color: #555;
  }
  .abs-2026-fall .infoTableRec .payTable > tbody > tr > td {
    text-align: right;
  }
  .abs-2026-fall .infoTableRec .payTable .payRec {
    margin-top: 10px;
    padding: 14px 16px;
    border-bottom: none;
    border-radius: 10px;
    /* 결제금액 강조색은 원래(PC)와 동일하게 노란색 유지 */
  }
  .abs-2026-fall .infoTableRec .payTable .payRec > th {
    color: #fff;
    background: none !important;
  }
  .abs-2026-fall .infoTableRec .payTable .payRec .txXLarge {
    font-size: 1.4rem;
    color: yellow;
  }
  .abs-2026-fall .bottomBtnRec {
    margin-top: 28px;
  }
  .abs-2026-fall .bottomBtnRec .bottomBtnLayer {
    display: flex;
    gap: 10px;
  }
  .abs-2026-fall .bottomBtnRec .bottomBtnLayer .btn {
    flex: 1;
    margin: 0;
    padding: 14px 0;
    font-size: 1rem;
  }
  .abs-2026-fall .bottomBtnRec .bottomBtnLayer .btn.confirm {
    order: 2;
    background-color: #0072ff;
    border-color: #0072ff;
  }
  .abs-2026-fall .abstractPopup .abstractPopupLayer,
  .abs-2026-fall .abstractPopup .abstractReceiptLayer,
  .abs-2026-fall .duesAlert .duesAlertLayer {
    min-width: 0;
    width: calc(100vw - 32px);
    max-width: 400px;
  }
}
@media screen and (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .abs-2026-fall #header .nav,
  .abs-2026-fall #header .navDim {
    transition: none;
  }
}