@charset "utf-8";

/* =========================================================
   세계줄넘기총연맹 — 2026 서브 페이지
   (1) 페이지 머리 + 하위메뉴 : 새로 그린 것
   (2) 게시판/콘텐츠 스킨 : 기존 마크업 위에 얹는 표현 층

   기존 스킨의 HTML 은 건드리지 않는다. 대회 신청·기록 입력처럼
   동작이 얽힌 화면이 많아, 마크업을 바꾸면 위험이 커지기 때문이다.
   ========================================================= */

/* =========================================================
   페이지 머리
   ========================================================= */
.wsrf-sub .page-hero {
  position: relative;
  padding: 34px 0 38px;
  background:
    radial-gradient(110% 130% at 88% -20%, rgba(81, 178, 54, .26) 0%, rgba(81, 178, 54, 0) 60%),
    linear-gradient(168deg, var(--navy) 0%, var(--navy-deep) 70%, var(--navy-dark) 100%);
  color: var(--on-navy);
  overflow: hidden;
}
.wsrf-sub .page-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--teal) 0%, var(--green) 45%, #A8E05A 74%, var(--lime) 100%);
}
.wsrf-sub .page-hero__inner { display: grid; gap: 12px; }

.wsrf-sub .crumb {
  display: flex; align-items: center; gap: 6px;
  font-size: .8125rem; color: var(--on-navy-2);
  min-width: 0;
}
.wsrf-sub .crumb a { display: inline-flex; align-items: center; transition: color .16s; }
.wsrf-sub .crumb a:hover { color: var(--lime); }
.wsrf-sub .crumb a svg { width: 17px; height: 17px; }
.wsrf-sub .crumb .crumb__sep { width: 14px; height: 14px; flex: none; opacity: .55; }
.wsrf-sub .crumb strong {
  color: #fff; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.wsrf-sub .page-hero__title {
  font-size: 2.375rem; font-weight: 900; line-height: 1.2;
  letter-spacing: -.05em; color: #fff;
  margin: 0;
  text-wrap: balance;
}

/* =========================================================
   하위메뉴 (LNB)
   ========================================================= */
.wsrf-sub .lnb { background: var(--paper); border-bottom: 1px solid var(--line); }
.wsrf-sub .lnb__inner { position: relative; }
.wsrf-sub .lnb__toggle { display: none; }

.wsrf-sub .lnb__list { display: flex; flex-wrap: wrap; }
.wsrf-sub .lnb__list a {
  position: relative; display: flex; align-items: center;
  min-height: 56px; padding: 0 20px;
  font-size: .9375rem; font-weight: 600; letter-spacing: -.03em;
  color: var(--ink-2);
  transition: color .16s;
}
.wsrf-sub .lnb__list a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 0;
  height: 3px; background: var(--navy);
  transform: scaleX(0); transform-origin: center;
  transition: transform .3s var(--ease);
}
.wsrf-sub .lnb__list a:hover { color: var(--navy); }
.wsrf-sub .lnb__list a:hover::after { transform: scaleX(1); }
.wsrf-sub .lnb__list a.is-current { color: var(--navy-deep); font-weight: 800; }
.wsrf-sub .lnb__list a.is-current::after { transform: scaleX(1); background: var(--green); }

/* 머리를 걷어낸 화면 (2026-09-20)
   선수 신청처럼 단계가 길어 세로를 아껴야 하는 쪽. 파란 제목 띠를 지우고
   하위메뉴만 얇게 남긴다. 대략 210px 을 돌려받는다. */
.wsrf-sub--slim { border-top: 1px solid var(--line); }
.wsrf-sub--slim .lnb { background: #fff; }
.wsrf-sub--slim .lnb__list a { min-height: 42px; padding: 0 14px; font-size: .875rem; }
.wsrf-body--slim { padding: 18px 0 56px; }
@media (max-width: 767px) {
  .wsrf-sub--slim .lnb__list a { min-height: 38px; padding: 0 12px; }
  .wsrf-body--slim { padding: 14px 0 44px; }
}

/* =========================================================
   본문 상자
   ========================================================= */
.wsrf-body { padding: 20px 0 72px; background: var(--paper); }   /* [2026-09-20] 위 여백 44 → 20 */
.wsrf-body > .shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* 페이지 머리가 제목을 들고 있으므로 스킨이 찍는 제목은 숨긴다 */
.wsrf-body #container_title { display: none; }

/* 기존 테마가 강제하던 고정폭 해제 */
.wsrf-body #bo_list, .wsrf-body #bo_v, .wsrf-body #bo_w { width: auto !important; }

/* =========================================================
   게시판 — 표현 층
   기존 스킨 클래스 위에 얹는다. 마크업은 그대로 둔다.
   ========================================================= */
.wsrf-body { font-family: var(--font-sans); color: var(--ink); }

/* ── 목록 머리줄 (총건수 / 검색) ─────────────────────────── */
.wsrf-body #bo_btn_top {
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
  padding: 0 0 16px;
  border-bottom: 2px solid var(--navy-deep);
  margin-bottom: 0;
}
.wsrf-body #bo_list_total {
  font-size: .9375rem; color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.wsrf-body #bo_list_total span { color: var(--navy); font-weight: 800; }

.wsrf-body #bo_sch { margin-left: auto; padding: 0; border: 0; }
.wsrf-body #bo_sch form { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wsrf-body #bo_sch select,
.wsrf-body #bo_sch input[type="text"] {
  height: 42px; padding: 0 12px;
  font-family: inherit; font-size: .875rem; color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  transition: border-color .16s;
}
.wsrf-body #bo_sch input[type="text"] { min-width: 180px; }
.wsrf-body #bo_sch select:focus,
.wsrf-body #bo_sch input[type="text"]:focus { border-color: var(--navy); outline: none; }
/* 일부 스킨은 text-indent:-999px 로 "검색" 글자를 숨기고 배경 아이콘을 쓴다.
   그 배경을 우리 색으로 덮으면 라벨도 아이콘도 없는 빈 네모가 남는다.
   글자를 도로 꺼낸다. */
.wsrf-body #bo_sch .sch_btn,
.wsrf-body #bo_sch button[type="submit"],
.wsrf-body #bo_sch input[type="submit"] {
  width: auto; min-width: 74px; height: 42px; padding: 0 18px;
  text-indent: 0; overflow: visible;
  font-family: inherit; font-size: .875rem; font-weight: 700; color: #fff;
  background: var(--navy); border: 1px solid var(--navy); border-radius: var(--r-sm);
  cursor: pointer;
  transition: background .18s;
}
.wsrf-body #bo_sch .sch_btn:hover { background: var(--navy-deep); }

/* ── 카테고리 ───────────────────────────────────────────── */
/* 스킨이 회색 띠를 깔아 두는 경우가 있다. 새 세계에서는 면이 아니라
   알약 자체가 분류를 말한다. 띠는 걷어 낸다. */
.wsrf-body #bo_cate { margin-bottom: 22px; padding: 0; background: none; border: 0; }
.wsrf-body #bo_cate h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.wsrf-body #bo_cate_ul { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; list-style: none; }
.wsrf-body #bo_cate_ul li { float: none; margin: 0; }
.wsrf-body #bo_cate_ul a {
  display: flex; align-items: center;
  min-height: 40px; padding: 0 16px;
  font-size: .875rem; font-weight: 600; color: var(--ink-2);
  background: var(--tint); border: 1px solid var(--line);
  border-radius: 20px;
  transition: background .16s, color .16s, border-color .16s;
}
.wsrf-body #bo_cate_ul a:hover { border-color: var(--navy); color: var(--navy); }
.wsrf-body #bo_cate_ul #bo_cate_on,
.wsrf-body #bo_cate_ul a.bo_cate_on {
  background: var(--navy-dark); border-color: var(--navy-dark); color: #fff; font-weight: 700;
}

/* ── 표 ─────────────────────────────────────────────────── */
/* 좁은 화면에서 표만 따로 가로로 흐르게 한다. 페이지 전체가 밀리지 않는다 */
.wsrf-body .tbl_head01, .wsrf-body .tbl_head02 { width: 100%; }
.wsrf-body .tbl_wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.wsrf-body .tbl_head01 table, .wsrf-body .tbl_head02 table { width: 100%; min-width: 680px; border-collapse: collapse; }
/* 연도·번호처럼 짧은 칸이 "202 / 6" 으로 쪼개지지 않게 한다 */
.wsrf-body .td_ca_name { white-space: nowrap; }
.wsrf-body .tbl_head01 caption, .wsrf-body .tbl_head02 caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.wsrf-body .tbl_head01 thead th,
.wsrf-body .tbl_head02 thead th {
  padding: 15px 10px;
  font-size: .875rem; font-weight: 700; letter-spacing: -.03em; color: var(--navy-deep);
  background: var(--tint);
  border: 0; border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
.wsrf-body .tbl_head01 thead th a, .wsrf-body .tbl_head02 thead th a { color: inherit; }
.wsrf-body .tbl_head01 tbody td,
.wsrf-body .tbl_head02 tbody td {
  padding: 15px 10px;
  font-size: .9375rem; color: var(--ink-2);
  border: 0; border-bottom: 1px solid var(--line);
  background: var(--paper);
  transition: background .14s;
}
.wsrf-body .tbl_head01 tbody tr:hover td,
.wsrf-body .tbl_head02 tbody tr:hover td { background: var(--tint); }
.wsrf-body .tbl_head01 tbody td a { color: var(--ink); }
.wsrf-body .tbl_head01 .td_subject a { font-weight: 500; }
.wsrf-body .tbl_head01 tbody tr:hover .td_subject a { color: var(--navy); }
/* 스킨이 날짜 칸을 기울여 놓았다. 숫자는 기울이면 자릿수 비교가 어려워진다. */
.wsrf-body .td_num, .wsrf-body .td_num2, .wsrf-body .td_numbig,
.wsrf-body .td_date, .wsrf-body .td_datetime, .wsrf-body .td_num_hit,
.wsrf-body .td_datetime *, .wsrf-body .td_date * {
  font-style: normal;
  font-variant-numeric: tabular-nums; color: var(--ink-3); white-space: nowrap;
}
.wsrf-body .td_subject { text-align: left; }
.wsrf-body .tbl_head01 thead th.td_subject, .wsrf-body .tbl_head01 thead th:nth-child(3) { text-align: left; }
.wsrf-body .bo_notice td, .wsrf-body tr.bo_notice td { background: #FAFCE8; }
.wsrf-body .bo_notice .td_subject a { font-weight: 800; color: var(--navy-deep); }
.wsrf-body .empty_table, .wsrf-body .empty_list {
  padding: 64px 20px !important;
  text-align: center; color: var(--ink-3); font-size: .9375rem;
}
/* 갤러리의 빈 상태는 그리드 칸 하나가 아니라 한 줄 전체를 차지해야 한다 */
.wsrf-body #gall_ul .empty_list { grid-column: 1 / -1; list-style: none; }

/* 스킨이 총건수에 회색 알약을 깔아 두는 경우가 있다. 바탕은 지운다 */
.wsrf-body #bo_list_total, .wsrf-body .bo_list_total {
  background: none; border: 0; padding: 0;
}

/* 새 글 / 인기 표시 */
.wsrf-body .new_icon, .wsrf-body .hot_icon, .wsrf-body .secret_icon {
  display: inline-block; vertical-align: middle;
  margin-left: 6px; padding: 2px 7px;
  font-size: .6875rem; font-weight: 800; line-height: 1.5;
  color: #fff; background: var(--green-deep);
  border-radius: var(--r-sm);
}
.wsrf-body .hot_icon { background: #B4340E; }
.wsrf-body .secret_icon { background: var(--ink-3); }
.wsrf-body .cnt_cmt {
  display: inline-block; margin-left: 6px;
  font-size: .8125rem; font-weight: 700; color: var(--teal-deep);
}

/* ── 페이지 번호 ────────────────────────────────────────── */
.wsrf-body .pg_wrap { display: flex; justify-content: center; margin: 28px 0 0; }
.wsrf-body .pg { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: center; }
.wsrf-body .pg_page, .wsrf-body .pg_current, .wsrf-body .pg_start, .wsrf-body .pg_prev, .wsrf-body .pg_next, .wsrf-body .pg_end {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 10px;
  font-size: .875rem; font-weight: 600; color: var(--ink-2);
  background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  font-variant-numeric: tabular-nums;
  transition: border-color .16s, color .16s, background .16s;
}
.wsrf-body .pg_page:hover, .wsrf-body .pg_start:hover, .wsrf-body .pg_prev:hover,
.wsrf-body .pg_next:hover, .wsrf-body .pg_end:hover { border-color: var(--navy); color: var(--navy); }
.wsrf-body .pg_current {
  background: var(--navy-dark); border-color: var(--navy-dark); color: #fff; font-weight: 800;
}

/* ── 버튼 ───────────────────────────────────────────────── */
.wsrf-body .btn_b01, .wsrf-body .btn_b02, .wsrf-body .btn_b03, .wsrf-body .btn_b04,
.wsrf-body .btn_submit, .wsrf-body .btn_cancel, .wsrf-body .btn_confirm .btn_submit,
.wsrf-body input[type="submit"].btn_submit, .wsrf-body button.btn_submit {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 22px;
  font-family: inherit; font-size: .9375rem; font-weight: 700; letter-spacing: -.02em;
  border-radius: var(--r); border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: background .18s, color .18s, border-color .18s;
}
.wsrf-body .btn_b01 { background: var(--navy); color: #fff; }
.wsrf-body .btn_b01:hover { background: var(--navy-deep); color: #fff; }
.wsrf-body .btn_b02 { background: var(--green-deep); color: #fff; }
.wsrf-body .btn_b02:hover { background: #17660A; color: #fff; }
.wsrf-body .btn_b03, .wsrf-body .btn_b04 { background: var(--paper); border-color: var(--line-strong); color: var(--ink-2); }
.wsrf-body .btn_b03:hover, .wsrf-body .btn_b04:hover { border-color: var(--navy); color: var(--navy); }
.wsrf-body .btn_submit { background: var(--navy); color: #fff; }
.wsrf-body .btn_submit:hover { background: var(--navy-deep); }
.wsrf-body .btn_cancel { background: var(--paper); border-color: var(--line-strong); color: var(--ink-2); }
.wsrf-body .btn_cancel:hover { border-color: var(--navy); color: var(--navy); }
/* input 요소를 flex 컨테이너로 만들면 크롬이 value 라벨을 그리지 않는다.
   "검색" 글자가 사라지고 파란 네모만 남는 원인이었다. input 은 inline-block 으로. */
.wsrf-body input.btn_submit, .wsrf-body input.btn_cancel,
.wsrf-body input[type="submit"], .wsrf-body input[type="button"], .wsrf-body input[type="reset"],
.wsrf-body #bo_sch input.sch_btn {
  display: inline-block;
  text-align: center;
  line-height: 1;
}

/* 우편번호 검색·인증 요청처럼 입력칸 옆에 붙는 작은 버튼.
   default.css 가 검정(#3c3c3c)으로 칠해 두어 새 세계에서 혼자 튄다. */
.wsrf-body .btn_frmline,
.wsrf-body a.btn_frmline,
.wsrf-body button.btn_frmline {
  display: inline-flex; align-items: center; justify-content: center;
  height: auto; min-height: 44px; padding: 0 16px;
  font-family: inherit; font-size: .875rem; font-weight: 700; line-height: 1.4;
  color: #fff; background: var(--navy);
  border: 1px solid var(--navy); border-radius: var(--r-sm);
  vertical-align: middle;
  transition: background .18s;
}
.wsrf-body .btn_frmline:hover,
.wsrf-body a.btn_frmline:hover,
.wsrf-body button.btn_frmline:hover { background: var(--navy-deep); color: #fff; }

/* 주소·인증 줄은 입력칸과 버튼이 한 줄에 놓인다 */
.wsrf-body #fregisterform .frm_address { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.wsrf-body #fregisterform .frm_address .frm_input { flex: 1; min-width: 0; }

.wsrf-body .btn_bo_user, .wsrf-body .btn_bo_adm { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
.wsrf-body .btn_bo_user li, .wsrf-body .btn_bo_adm li { float: none; margin: 0; }
.wsrf-body #bo_list_write, .wsrf-body #bo_btn { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 20px; }

/* ── 글 보기 ────────────────────────────────────────────── */
.wsrf-body #bo_v { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.wsrf-body #bo_v_title { padding: 26px 26px 0; }
.wsrf-body #bo_v_title .bo_v_tit {
  font-size: 1.625rem; font-weight: 800; letter-spacing: -.045em; line-height: 1.35;
  color: var(--navy-deep);
}
.wsrf-body #bo_v_info {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
  padding: 14px 26px 18px;
  font-size: .8125rem; color: var(--ink-3);
  border-bottom: 1px solid var(--line);
}
.wsrf-body #bo_v_info strong { color: var(--ink-2); font-weight: 600; }
.wsrf-body #bo_v_file { padding: 16px 26px; background: var(--tint); border-bottom: 1px solid var(--line); }
.wsrf-body #bo_v_file ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.wsrf-body #bo_v_file a { display: inline-flex; align-items: center; gap: 8px; font-size: .875rem; color: var(--navy); font-weight: 600; }
.wsrf-body #bo_v_file a:hover { text-decoration: underline; }
.wsrf-body #bo_v_atc { padding: 30px 26px; min-height: 200px; }
.wsrf-body #bo_v_con { font-size: 1rem; line-height: 1.85; color: var(--ink); word-break: keep-all; }
.wsrf-body #bo_v_con img { max-width: 100%; height: auto; }
.wsrf-body #bo_v_con table { max-width: 100%; }
.wsrf-body #bo_v_top, .wsrf-body #bo_v_bot { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.wsrf-body #bo_v_top ul, .wsrf-body #bo_v_bot ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.wsrf-body #bo_v_nb { border-top: 1px solid var(--line); }
.wsrf-body #bo_v_nb li { border-bottom: 1px solid var(--line); }
.wsrf-body #bo_v_nb a { display: block; padding: 14px 26px; font-size: .9375rem; color: var(--ink-2); }
.wsrf-body #bo_v_nb a:hover { background: var(--tint); color: var(--navy); }

/* ── 댓글 ───────────────────────────────────────────────── */
.wsrf-body #bo_vc { margin-top: 28px; }
.wsrf-body #bo_vc h2 { font-size: 1.125rem; font-weight: 800; color: var(--navy-deep); margin-bottom: 12px; }
.wsrf-body #bo_vc article { padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 10px; }
.wsrf-body #bo_vc header { font-size: .8125rem; color: var(--ink-3); margin-bottom: 8px; }
.wsrf-body #bo_vc p { font-size: .9375rem; line-height: 1.75; color: var(--ink); }

/* ── 입력 폼 ────────────────────────────────────────────── */
.wsrf-body .tbl_frm01 table { width: 100%; border-collapse: collapse; }
.wsrf-body .tbl_frm01 th {
  width: 150px; padding: 14px 16px;
  font-size: .875rem; font-weight: 700; color: var(--navy-deep); text-align: left;
  background: var(--tint);
  border: 0; border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.wsrf-body .tbl_frm01 td {
  padding: 12px 16px;
  font-size: .9375rem; color: var(--ink-2);
  border: 0; border-bottom: 1px solid var(--line);
}
.wsrf-body .frm_input, .wsrf-body input[type="text"], .wsrf-body input[type="password"],
.wsrf-body input[type="email"], .wsrf-body input[type="tel"], .wsrf-body input[type="number"],
.wsrf-body input[type="date"], .wsrf-body select, .wsrf-body textarea {
  max-width: 100%;
  min-height: 44px; padding: 8px 12px;
  font-family: inherit; font-size: .9375rem; color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  transition: border-color .16s, box-shadow .16s;
}
.wsrf-body textarea { min-height: 140px; line-height: 1.7; }
.wsrf-body .frm_input:focus, .wsrf-body input:focus, .wsrf-body select:focus, .wsrf-body textarea:focus {
  border-color: var(--navy); outline: none;
  box-shadow: 0 0 0 3px rgba(0, 63, 140, .12);
}
.wsrf-body .frm_input::placeholder, .wsrf-body textarea::placeholder { color: #8A97A8; }
.wsrf-body .required, .wsrf-body input.required, .wsrf-body select.required, .wsrf-body textarea.required {
  background-image: none; border-color: var(--line-strong);
}
.wsrf-body .frm_info { display: block; margin-top: 5px; font-size: .8125rem; color: var(--ink-3); }

/* ── 콘텐츠 페이지 ──────────────────────────────────────── */
.wsrf-body #ctt, .wsrf-body .ctt_admin { font-size: 1rem; line-height: 1.85; color: var(--ink); }

/* default.css 가 #ctt_con 전체를 가운데 정렬로 묶어 두었다.
   본문이 한 줄씩 가운데로 모여 읽는 눈이 매 줄 시작점을 다시 찾아야 했다.
   글은 왼쪽으로 돌리고, 이미지만 가운데에 둔다. */
.wsrf-body #ctt_con { font-size: 1rem; line-height: 1.85; text-align: left; }
.wsrf-body #ctt_con img {
  max-width: 100%; height: auto;
  display: block; margin-left: auto; margin-right: auto;
}
/* 본문에 인라인으로 가운데 정렬을 지정한 문단은 그 뜻을 지킨다 */
.wsrf-body #ctt_con [style*="text-align:center"],
.wsrf-body #ctt_con [style*="text-align: center"],
.wsrf-body #ctt_con [align="center"] { text-align: center; }
.wsrf-body #ctt > h1, .wsrf-body #ctt_con > h1 { font-size: 1.75rem; font-weight: 800; letter-spacing: -.045em; color: var(--navy-deep); }
.wsrf-body #ctt > h2, .wsrf-body #ctt_con > h2 { font-size: 1.375rem; font-weight: 800; letter-spacing: -.04em; color: var(--navy-deep); margin-top: 1.6em; }
/* 직계 자식으로 좁힌다. 자손까지 잡으면 ID 특이도 때문에 아코디언 머리글
   (.demo-show2 h3) 의 여백·크기까지 덮어써 버린다. */
.wsrf-body #ctt > h3, .wsrf-body #ctt_con > h3 { font-size: 1.125rem; font-weight: 700; color: var(--ink); margin-top: 1.4em; }

/* ── 아코디언 (자격증 안내 등) ──────────────────────────── */
/* 등급별 색은 장식이 아니라 정보다. 그대로 두되, 마우스를 올리면 색이 통째로
   회색으로 바뀌어 등급을 알 수 없게 되던 것만 막는다.
   배경을 변수로 받아 !important 로 고정하고, 강조는 밝기로만 준다. */
.wsrf-body .demo-show2 {
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  /* 태그 사이의 줄바꿈·들여쓰기가 텍스트 노드로 남아 상자 안에 빈 줄을 만든다.
     여기서 줄 높이를 0 으로 죽이고 자식에서 되살린다. */
  line-height: 0;
}
.wsrf-body .demo-show2 h3 {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 20px;
  font-family: var(--font-sans);
  font-size: 1.0625rem; font-weight: 700; letter-spacing: -.035em;
  line-height: 1.45;
  margin: 0;
  color: #fff !important;
  background: var(--acc-bg, var(--navy)) !important;
  border: 0;
  cursor: pointer;
  transition: filter .18s;
}
.wsrf-body .demo-show2 h3 + .demo-content + h3 { border-top: 1px solid rgba(255, 255, 255, .2); }
.wsrf-body .demo-show2 h3:hover { filter: brightness(1.14); }
.wsrf-body .demo-show2 h3:focus-visible { outline: 3px solid var(--lime); outline-offset: -3px; }

.wsrf-body .demo-show2 h3.type01 { --acc-bg: #00408B; }
.wsrf-body .demo-show2 h3.type02 { --acc-bg: #11577A; }
.wsrf-body .demo-show2 h3.type03 { --acc-bg: #287861; }
.wsrf-body .demo-show2 h3.type04 { --acc-bg: #3D964B; }
.wsrf-body .demo-show2 h3.type05 { --acc-bg: #50B137; }
.wsrf-body .demo-show2 h3.type06 { --acc-bg: #C05E00; }
.wsrf-body .demo-show2 h3.type07 { --acc-bg: #6D5A26; }
.wsrf-body .demo-show2 h3.type08 { --acc-bg: #6F42C1; }
.wsrf-body .demo-show2 h3.type09 { --acc-bg: #8E44AD; }
.wsrf-body .demo-show2 h3.type10 { --acc-bg: #B4340E; }
.wsrf-body .demo-show2 h3.type11 { --acc-bg: #8D6E63; }
.wsrf-body .demo-show2 h3.type12 { --acc-bg: #546E7A; }
.wsrf-body .demo-show2 h3.type13 { --acc-bg: #5C7F19; }
.wsrf-body .demo-show2 h3.type14 { --acc-bg: #547000; }
.wsrf-body .demo-show2 h3.type15 { --acc-bg: #7D6700; }

/* 여는 방향을 화살표가 말한다 (닫힘 ∨ / 열림 ∧) */
.wsrf-body .demo-show2 h3::after {
  content: "\276F";
  flex: none;
  width: 1em; height: 1em;
  font-size: .9em; line-height: 1;
  text-align: center;
  transform: rotate(90deg);
  transition: transform .3s var(--ease);
}
.wsrf-body .demo-show2 h3[aria-expanded="true"]::after { transform: rotate(-90deg); }

.wsrf-body .demo-content {
  padding: 26px 24px;
  background: var(--paper);
  color: var(--ink);
  text-align: left;
  line-height: 1.8;
}
.wsrf-body .demo-content[hidden] { display: none; }
.wsrf-body .demo-content strong {
  display: block;
  font-family: var(--font-sans);
  font-size: 1.0625rem; font-weight: 800; letter-spacing: -.035em;
  color: var(--navy-deep);
}
.wsrf-body .demo-content strong.mt { margin-top: 28px; }
.wsrf-body .demo-content p {
  font-family: var(--font-sans);
  font-size: .9375rem; line-height: 1.8; color: var(--ink-2);
  margin: 6px 0 0;
}
.wsrf-body .demo-content p span {
  display: block;
  margin: 10px 0;
  padding: 16px 20px;
  background: var(--tint);
  border-radius: var(--r-sm);
  color: var(--ink);
}
.wsrf-body .demo-content table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.wsrf-body .demo-content table th {
  padding: 12px 8px;
  font-size: .875rem; font-weight: 700; color: var(--navy-deep);
  background: var(--tint);
  border: 0; border-bottom: 1px solid var(--line-strong);
}
.wsrf-body .demo-content table td {
  padding: 12px 8px;
  font-size: .9375rem; color: var(--ink-2);
  border: 0; border-bottom: 1px solid var(--line);
  text-align: center;
}

@media (max-width: 640px) {
  .wsrf-body .demo-show2 h3 { padding: 14px 16px; font-size: 1rem; }
  .wsrf-body .demo-content { padding: 20px 16px; }
}

/* ── 오시는길 ───────────────────────────────────────────── */
/* 본문이 주소·전화를 이미 적고 있어 아래 블록과 겹친다. 본문 쪽을 접는다.
   (본문은 관리자가 고치는 내용이라 지우지 않고 화면에서만 감춘다) */
.wsrf-body .ctt_about_map #ctt_con .mapW { display: none; }
.wsrf-body .ctt_about_map #ctt_con p { margin: 0; text-align: center; }
.wsrf-body .ctt_about_map #ctt_con img {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: var(--r);
}

.wayto { margin-top: 22px; }
.wayto__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) auto;
  gap: 28px;
  align-items: start;
  padding: 26px 28px;
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.wayto__label {
  display: flex; align-items: center; gap: 7px;
  font-size: .8125rem; font-weight: 700; letter-spacing: -.02em;
  color: var(--ink-3);
}
.wayto__label svg { width: 17px; height: 17px; flex: none; color: var(--green-deep); }
.wayto__addr {
  margin-top: 8px;
  font-size: 1.0625rem; font-weight: 700; letter-spacing: -.035em; color: var(--navy-deep);
  line-height: 1.5;
}
.wayto__addr-old { margin-top: 5px; font-size: .8125rem; color: var(--ink-3); }
.wayto__tel {
  display: inline-block; margin-top: 8px;
  font-size: 1.375rem; font-weight: 900; letter-spacing: -.04em; color: var(--green-deep);
  font-variant-numeric: tabular-nums;
}
.wayto__tel:hover { text-decoration: underline; }

.wayto__copy {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 12px; padding: 7px 12px;
  font-size: .8125rem; font-weight: 700; color: var(--ink-2);
  background: var(--paper);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  transition: border-color .16s, color .16s;
}
.wayto__copy svg { width: 15px; height: 15px; }
.wayto__copy:hover { border-color: var(--navy); color: var(--navy); }
.wayto__copy.is-done { border-color: var(--green-deep); color: var(--green-deep); }

.wayto__go { display: grid; gap: 8px; min-width: 210px; }
.wayto__btn { width: 100%; }
.wayto__btn svg { width: 18px; height: 18px; flex: none; }

@media (max-width: 860px) {
  .wayto__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 22px 20px; }
  .wayto__go { min-width: 0; }
}

/* ── 갤러리 ─────────────────────────────────────────────── */
.wsrf-body #gall_ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; list-style: none; padding: 0; }
.wsrf-body #gall_ul li { float: none !important; width: auto !important; margin: 0 !important; }
.wsrf-body .gall_href img { width: 100%; height: auto; border-radius: var(--r); }
.wsrf-body .gall_text_href { display: block; margin-top: 10px; font-size: .9375rem; font-weight: 600; color: var(--ink); }

/* =========================================================
   회원 (로그인 · 가입 · 확인 · 찾기)
   회원 스킨(skin/member/basic/style.css)이 1200px 고정폭을 쓴다.
   그 파일은 건드리지 않고 여기서 푼다. 우리 CSS 가 뒤에 실린다.
   ========================================================= */
.wsrf-body #mb_login, .wsrf-body #mb_confirm, .wsrf-body #find_info {
  width: auto; max-width: 460px; margin: 0 auto;
}
.wsrf-body #mb_login h1, .wsrf-body #mb_confirm h1, .wsrf-body #find_info h1 {
  font-size: 1.5rem; font-weight: 800; color: var(--navy-deep); margin-bottom: 20px;
}

/* 폼은 넓다고 읽기 쉬워지지 않는다. 한 줄 길이를 잡아 준다. */
.wsrf-body #fregister_container,
.wsrf-body #register_form,
.wsrf-body #fregisterform,
.wsrf-body #reg_result {
  width: auto; max-width: 860px;
  margin-left: auto; margin-right: auto;
  margin-bottom: 40px;
}

/* 안내 문구 — 분홍 경고 상자를 새 세계의 알림으로 */
.wsrf-body #fregister > p {
  padding: 14px 18px;
  font-size: .875rem; line-height: 1.7; text-align: left;
  color: var(--navy-deep);
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: var(--r);
  margin: 0 0 16px;
}

.wsrf-body #fregister_chkall {
  display: flex; justify-content: flex-end; align-items: center; gap: 7px;
  padding: 0 4px 12px;
}
.wsrf-body #fregister_chkall label { font-size: .875rem; font-weight: 600; color: var(--ink-2); }

.wsrf-body #fregister section {
  position: relative;
  margin: 0 0 18px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: none;
  overflow: hidden;
}
.wsrf-body #fregister h2 {
  /* 오른쪽은 동의 체크가 절대배치로 앉는 자리다. 제목이 길어도 겹치지 않게 비워 둔다 */
  padding: 15px 130px 15px 18px;
  font-size: 1rem; font-weight: 800; letter-spacing: -.03em; text-align: left;
  color: var(--navy-deep);
  background: var(--tint);
  border-bottom: 1px solid var(--line);
  margin: 0;
}
.wsrf-body #fregister textarea {
  display: block; width: 100%; height: 190px;
  padding: 18px;
  font-family: var(--font-sans); font-size: .875rem; line-height: 1.75;
  color: var(--ink-2);
  background: var(--paper);
  border: 0; border-radius: 0;
  resize: vertical;
}
.wsrf-body #fregister textarea:focus { box-shadow: none; outline: 2px solid var(--focus); outline-offset: -2px; }

/* 동의 체크는 제목 줄 오른쪽에 붙어 있다. 손가락이 닿을 크기로 키운다. */
.wsrf-body #fregister .fregister_agree {
  position: absolute; top: 0; right: 0;
  display: flex; align-items: center;
  height: 52px; padding: 0 16px;
  margin: 0; border: 0;
}
.wsrf-body #fregister .fregister_agree label { font-size: .875rem; font-weight: 700; color: var(--ink); }

/* 회원 구분 — 아이콘 카드 셋 (2026-10-05).
   label 이 input 과 카드를 함께 감싸 짝이 어긋나지 않는다. 진짜 라디오는 눈에만 감추고(키보드 · 화면낭독 그대로),
   고른 표시는 바로 뒤 카드(.fml-card)가 받는다. */
.wsrf-body #fregister_member_level { text-align: left; }
.wsrf-body #fregister_member_level .fml-opts {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  padding: 16px 18px; line-height: 1.4;
  background: var(--paper);
}
.wsrf-body #fregister_member_level .fml-opt { position: relative; display: block; margin: 0; }
.wsrf-body #fregister_member_level .fml-opt input[type="radio"] {
  position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0;
}
.wsrf-body #fregister_member_level .fml-card {
  display: flex; align-items: center; gap: 12px;
  min-height: 72px; padding: 14px 16px;
  background: var(--paper);
  border: 1.5px solid var(--line-strong); border-radius: 10px;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
@media (hover: hover) { .wsrf-body #fregister_member_level .fml-opt:hover .fml-card { border-color: var(--navy); } }
.wsrf-body #fregister_member_level .fml-ico {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  font-size: 18px; color: var(--navy); background: var(--tint);
  transition: background .15s, color .15s;
}
.wsrf-body #fregister_member_level .fml-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wsrf-body #fregister_member_level .fml-t b { font-size: 1rem; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.wsrf-body #fregister_member_level .fml-t small { font-size: .8125rem; font-weight: 500; color: var(--ink-3); word-break: keep-all; }
/* 동그라미 — 고르면 안이 찬다 */
.wsrf-body #fregister_member_level .fml-chk {
  flex: none; position: relative; width: 22px; height: 22px;
  border: 2px solid var(--line-strong); border-radius: 50%; background: #fff;
  transition: border-color .15s;
}
.wsrf-body #fregister_member_level .fml-chk::after {
  content: ""; position: absolute; inset: 4px; border-radius: 50%;
  background: var(--navy); transform: scale(0); transition: transform .15s;
}
.wsrf-body #fregister_member_level input:checked + .fml-card {
  border-color: var(--navy); background: var(--tint);
  box-shadow: 0 0 0 1px var(--navy) inset;
}
.wsrf-body #fregister_member_level input:checked + .fml-card .fml-ico { background: var(--navy); color: #fff; }
.wsrf-body #fregister_member_level input:checked + .fml-card .fml-chk { border-color: var(--navy); }
.wsrf-body #fregister_member_level input:checked + .fml-card .fml-chk::after { transform: scale(1); }
.wsrf-body #fregister_member_level input:focus-visible + .fml-card { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 640px) {
  .wsrf-body #fregister_member_level .fml-opts { grid-template-columns: 1fr; padding: 14px; }
  .wsrf-body #fregister_member_level .fml-card { min-height: 64px; }
}

/* 회원가입 단추 — 폼 폭 그대로 넓고 크게 (2026-10-05) */
.wsrf-body #fregister .btn_confirm { margin: 8px 0 0; text-align: center; }
.wsrf-body #fregister .btn_confirm input.btn_submit {
  display: block; width: 100%; min-height: 58px; padding: 0 24px;
  font-size: 1.125rem; font-weight: 800; letter-spacing: -.01em;
  border-radius: 10px;
}

.wsrf-body #fregister_private div { padding: 18px; background: var(--paper); }
.wsrf-body #fregister_private table { width: 100%; border-collapse: collapse; }
.wsrf-body #fregister_private table th {
  width: auto; padding: 12px 10px;
  font-size: .875rem; font-weight: 700; color: var(--navy-deep);
  background: var(--tint);
  border: 0; border-bottom: 1px solid var(--line-strong);
}
.wsrf-body #fregister_private table td {
  padding: 12px 10px;
  font-size: .9375rem; line-height: 1.6; color: var(--ink-2);
  border: 0; border-bottom: 1px solid var(--line);
}

/* 체크박스·라디오 — 터치 타깃 확보 */
.wsrf-body #fregister input[type="checkbox"],
.wsrf-body #fregister input[type="radio"],
.wsrf-body #fregisterform input[type="checkbox"],
.wsrf-body #fregisterform input[type="radio"] {
  width: 19px; height: 19px;
  margin-right: 7px;
  vertical-align: -4px;
  accent-color: var(--navy);
  cursor: pointer;
}
.wsrf-body #fregister label, .wsrf-body #fregisterform label { cursor: pointer; }

.wsrf-body #fregister .btn_confirm,
.wsrf-body #fregisterform .btn_confirm {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 10px;
  margin-top: 26px;
}
.wsrf-body #fregister .btn_confirm .btn_submit,
.wsrf-body #fregisterform .btn_confirm .btn_submit,
.wsrf-body #fregisterform .btn_confirm .btn_cancel,
.wsrf-body #fregisterform .btn_confirm .btn_member_leave {
  height: auto; min-height: 52px; padding: 0 34px;
  font-size: 1rem; font-weight: 700; line-height: 1.4;
}

/* 입력 폼 */
.wsrf-body #register_form { background: var(--paper); padding: 0; }
.wsrf-body #fregisterform .form_01 div { margin: 0 0 22px; }
.wsrf-body #fregisterform .form_01 .member_level { margin: 0 0 22px; font-size: .9375rem; }
.wsrf-body #fregisterform #msg_certify {
  margin: 6px 0 0; padding: 10px 14px;
  font-size: .8125rem; text-align: left;
  color: var(--navy-deep); background: var(--tint);
  border: 1px solid var(--line); border-radius: var(--r-sm);
}
.wsrf-body #fregisterform .frm_info { display: block; margin-top: 5px; font-size: .8125rem; color: var(--ink-3); }

/* 라벨을 옆에 두면 뒤따르는 설명이 라벨을 감싸 흐르면서
   "정보공개 / 합니다." 처럼 문장이 두 동강 난다. 라벨을 윗줄로 올린다. */
.wsrf-body #fregisterform .frm_label {
  display: block; float: none; width: auto;
  margin-bottom: 5px;
  font-size: .8125rem; font-weight: 700; letter-spacing: -.02em;
  color: var(--ink-3);
}
.wsrf-body #fregisterform li { list-style: none; }
.wsrf-body #fregisterform .captcha { display: block; margin: 8px 0 0; }
.wsrf-body #fregisterform .captcha img { max-width: 100%; height: auto; }

/* 가입 · 정보수정 폼 (2026-10-05)
   칸 이름을 칸 위에 늘 보이게 둔다 — 회색 안내글만 있으면 적고 나서 무슨 칸이었는지 알 수 없었다.
   묶음(로그인 · 개인 · 단체 · 심판 · 알림)마다 카드로 나누고, 글자는 16px 를 기준으로 키웠다. */
.wsrf-body #register_form.rf { background: none; padding: 0; }
.wsrf-body #fregisterform .rf-head { margin: 0 0 20px; }
.wsrf-body #fregisterform .rf-head__type {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: 999px;
  font-size: .9375rem; font-weight: 800; color: var(--navy);
  background: var(--tint); border: 1px solid var(--line);
}
.wsrf-body #fregisterform .rf-head__t {
  margin: 12px 0 6px; padding: 0;
  font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; color: var(--navy-deep);
}
.wsrf-body #fregisterform .rf-head__d { margin: 0; font-size: 1rem; color: var(--ink-2); }
.wsrf-body #fregisterform .rf-req {
  display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 4px;
  font-style: normal; font-size: .75rem; font-weight: 700; line-height: 1.5; vertical-align: 2px;
  color: #B4232A; background: #FDECEC;
}
.wsrf-body #fregisterform .rf-sec {
  margin: 0 0 18px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden;
}
.wsrf-body #fregisterform .rf-sec__h {
  margin: 0; padding: 15px 22px;
  font-size: 1.125rem; font-weight: 800; letter-spacing: -.03em; color: var(--navy-deep);
  background: var(--tint); border-bottom: 1px solid var(--line);
}
.wsrf-body #fregisterform .rf-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px 20px;
  margin: 0; padding: 22px;
}
.wsrf-body #fregisterform .rf-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; }
.wsrf-body #fregisterform .rf-field--full { grid-column: 1 / -1; }
.wsrf-body #fregisterform .rf-label {
  display: block; margin: 0;
  font-size: 1rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink);
}
.wsrf-body #fregisterform .rf-field .frm_input,
.wsrf-body #fregisterform .rf-field select,
.wsrf-body #fregisterform .rf-field textarea {
  width: 100%; min-height: 50px; padding: 10px 14px;
  font-size: 1rem; border-radius: 8px;
}
.wsrf-body #fregisterform .rf-field textarea { min-height: 110px; }
.wsrf-body #fregisterform .rf-field .frm_input[readonly] { background: var(--tint); color: var(--ink-2); }
.wsrf-body #fregisterform .rf .frm_info {
  display: block; margin: 0;
  font-size: .875rem; line-height: 1.6; color: var(--ink-3); word-break: keep-all;
}
.wsrf-body #fregisterform #msg_mb_id:empty, .wsrf-body #fregisterform #msg_mb_nick:empty { display: none; }

/* 우편번호 + 주소 검색 한 줄 */
.wsrf-body #fregisterform .rf-zip { display: flex; gap: 8px; }
.wsrf-body #fregisterform .rf-zip .frm_input { flex: none; width: 150px; }
.wsrf-body #fregisterform .rf-zip .btn_frmline,
.wsrf-body #fregisterform .rf-cert .btn_frmline {
  gap: 6px; min-height: 50px; padding: 0 20px;
  font-size: 1rem; border-radius: 8px;
}
.wsrf-body #fregisterform .rf-cert { display: flex; flex-wrap: wrap; gap: 8px; }

/* [2026-10-10] 원장 · 심판 가입 승인 — 승인 안내 · 소속 학원 찾기 목록 */
.wsrf-body #fregisterform .rf-wait {
  margin: 0; padding: 14px 16px; border-radius: 10px; background: #fff8e6; border: 1px solid #f0c674;
  font-size: .95rem; line-height: 1.65; color: #5c4300; word-break: keep-all;
}
.wsrf-body #fregisterform .rf-wait b { color: #3d2c00; }
.wsrf-body #fregisterform .rf-org { position: relative; }
.wsrf-body #fregisterform .rf-org__list {
  position: absolute; left: 0; right: 0; top: 84px; z-index: 20; max-height: 280px; overflow-y: auto;
  margin: 0; padding: 6px 0; list-style: none; background: #fff; border: 1px solid var(--line-strong);
  border-radius: 10px; box-shadow: 0 12px 28px -12px rgba(11,42,91,.35);
}
.wsrf-body #fregisterform .rf-org__list li { display: flex; align-items: baseline; gap: 8px; padding: 10px 14px; cursor: pointer; font-size: 1rem; }
.wsrf-body #fregisterform .rf-org__list li:hover { background: var(--tint); }
.wsrf-body #fregisterform .rf-org__list li small { color: var(--ink-3); font-size: .85rem; }
.wsrf-body #fregisterform .rf-org__list li.none { cursor: default; color: var(--ink-3); font-size: .9rem; }

/* 심판 급수 — 누르기 쉬운 알약 단추 */
.wsrf-body #fregisterform .rf-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.wsrf-body #fregisterform .rf-chip { position: relative; margin: 0; }
.wsrf-body #fregisterform .rf-chip input[type="radio"] {
  position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0;
}
.wsrf-body #fregisterform .rf-chip span {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-width: 104px; min-height: 50px; padding: 0 22px;
  font-size: 1.0625rem; font-weight: 700; color: var(--ink-2);
  background: var(--paper); border: 1.5px solid var(--line-strong); border-radius: 999px;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.wsrf-body #fregisterform .rf-chip span::before {
  content: ""; box-sizing: border-box; width: 18px; height: 18px;
  border: 2px solid var(--line-strong); border-radius: 50%; background: #fff;
}
@media (hover: hover) { .wsrf-body #fregisterform .rf-chip:hover span { border-color: var(--navy); } }
.wsrf-body #fregisterform .rf-chip input:checked + span {
  color: var(--navy); background: var(--tint);
  border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy);
}
.wsrf-body #fregisterform .rf-chip input:checked + span::before { border: 5px solid var(--navy); }
.wsrf-body #fregisterform .rf-chip input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

/* 메일 · 문자 받기 */
.wsrf-body #fregisterform .rf-checks { gap: 10px; }
.wsrf-body #fregisterform .rf-check {
  display: flex; align-items: flex-start; gap: 10px; margin: 0;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px;
  font-size: 1rem; line-height: 1.5; color: var(--ink-2); word-break: keep-all;
}
.wsrf-body #fregisterform .rf-check input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin: 2px 0 0; vertical-align: 0; }
.wsrf-body #fregisterform .rf-check b { margin-right: 6px; color: var(--ink); }
.wsrf-body #fregisterform .rf-file-now { display: flex; align-items: center; gap: 12px; }

/* 시·도 고르기(select2) — 다른 칸과 같은 모양으로 */
.wsrf-body #fregisterform .select2-container { width: 100% !important; }
.wsrf-body #fregisterform .select2-container .select2-selection--single {
  height: 50px; border: 1px solid var(--line-strong); border-radius: 8px;
}
.wsrf-body #fregisterform .select2-container .select2-selection__rendered {
  padding-left: 14px; line-height: 48px; font-size: 1rem; color: var(--ink);
}
.wsrf-body #fregisterform .select2-container .select2-selection__placeholder { color: var(--ink-3); }
.wsrf-body #fregisterform .select2-container .select2-selection__arrow { width: 38px; height: 48px; }
.wsrf-body #fregisterform .select2-container--open .select2-selection--single,
.wsrf-body #fregisterform .select2-container--focus .select2-selection--single { border-color: var(--navy); }
.select2-dropdown .select2-results__option { padding: 10px 14px; font-size: 1rem; }
.select2-dropdown .select2-search__field { min-height: 42px; font-size: 1rem; }

/* 칸 이름 옆에 '필수' 를 적었으니 칸 오른쪽 위 빨간 별(default.css · mobile.css 의 !important)은 뺀다 */
.wsrf-body #fregisterform .rf .required { background-image: none !important; }

/* 자동등록방지 — 그림 · 입력칸 · 단추를 한 줄에 크게 */
.wsrf-body #fregisterform .is_captcha_use #captcha {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0; padding: 0; border: 0;
}
.wsrf-body #fregisterform .is_captcha_use #captcha audio { flex: 1 1 100%; width: 100%; max-width: 360px; margin: 0; }
.wsrf-body #fregisterform .is_captcha_use #captcha #captcha_img {
  display: block; width: auto; height: 50px; margin: 0;
  border: 1px solid var(--line-strong); border-radius: 8px;
}
.wsrf-body #fregisterform .is_captcha_use #captcha #captcha_key {
  width: 140px; height: 50px; min-height: 50px; margin: 0; padding: 0 12px;
  font-size: 1.25rem; font-weight: 700; text-align: center; letter-spacing: .1em;
  border: 1px solid var(--line-strong); border-radius: 8px;
}
.wsrf-body #fregisterform .is_captcha_use #captcha #captcha_mp3,
.wsrf-body #fregisterform .is_captcha_use #captcha #captcha_reload { flex: none; margin: 0; }
.wsrf-body #fregisterform .is_captcha_use #captcha_info {
  flex: 1 1 100%; display: block; margin: 0;
  font-size: .875rem; letter-spacing: 0; color: var(--ink-3);
}

/* 아래 단추 — 회원가입을 넓게 */
.wsrf-body #fregisterform .btn_confirm { margin-top: 8px; }
.wsrf-body #fregisterform .btn_confirm .btn_submit { flex: 1 1 320px; min-height: 58px; font-size: 1.125rem; font-weight: 800; border-radius: 10px; }
.wsrf-body #fregisterform .btn_confirm .btn_cancel,
.wsrf-body #fregisterform .btn_confirm .btn_member_leave { min-width: 140px; min-height: 58px; font-size: 1.0625rem; border-radius: 10px; }

/* 좁은 화면은 단추가 세로로 쌓인다(아래 860px 규칙) — 그때 flex 기준값이 높이가 되지 않게 */
@media (max-width: 860px) {
  .wsrf-body #fregisterform .btn_confirm .btn_submit { flex: none; }
}
@media (max-width: 720px) {
  .wsrf-body #fregisterform .rf-grid { grid-template-columns: 1fr; gap: 20px; padding: 18px 16px; }
  .wsrf-body #fregisterform .rf-sec__h { padding: 14px 16px; }
  .wsrf-body #fregisterform .rf-head__t { font-size: 1.3125rem; }
  .wsrf-body #fregisterform .rf-zip .frm_input { flex: 1 1 auto; width: auto; min-width: 0; }
  .wsrf-body #fregisterform .rf-chip { flex: 1 1 0; }
  .wsrf-body #fregisterform .rf-chip span { width: 100%; min-width: 0; padding: 0 12px; }
  .wsrf-body #fregisterform .is_captcha_use #captcha #captcha_key { flex: 1 1 80px; width: auto; min-width: 0; }
}

/* 가입 완료 */
.wsrf-body #reg_result { padding: 60px 20px 40px; text-align: center; background: var(--paper); }
.wsrf-body #reg_result h2 { font-size: 1.625rem; font-weight: 800; color: var(--navy-deep); margin: 0 0 18px; }
.wsrf-body #reg_result #result_email {
  margin: 20px 0; padding: 16px 20px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  line-height: 1.8; font-size: .9375rem; color: var(--ink-2);
}

/* =========================================================
   반응형
   ========================================================= */
@media (max-width: 1080px) {
  .wsrf-body #gall_ul { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
  .wsrf-sub .page-hero { padding: 26px 0 30px; }
  .wsrf-sub .page-hero__title { font-size: 1.875rem; }

  /* 하위메뉴는 접어 둔다. 항목이 일곱 개까지 있어 가로로 흘리면 잘린다 */
  .wsrf-sub .lnb__toggle {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    min-height: 52px; padding: 0 2px;
    font-size: .9375rem; font-weight: 700; color: var(--navy-deep);
  }
  /* 접혀 있을 때는 아래를(펼침), 펼쳤을 때는 위를(접음) 가리킨다 */
  .wsrf-sub .lnb__toggle svg {
    width: 20px; height: 20px; color: var(--ink-3);
    transform: rotate(180deg);
    transition: transform .3s var(--ease);
  }
  .wsrf-sub .lnb__toggle[aria-expanded="true"] svg { transform: rotate(0deg); }
  .wsrf-sub .lnb__list { display: grid; gap: 2px; padding: 0 0 14px; }
  .wsrf-sub .lnb__list[hidden] { display: none; }
  .wsrf-sub .lnb__list a {
    min-height: 46px; padding: 0 14px;
    background: var(--tint); border-radius: var(--r-sm);
  }
  .wsrf-sub .lnb__list a::after { display: none; }
  .wsrf-sub .lnb__list a.is-current { background: var(--navy-dark); color: #fff; }

  .wsrf-body { padding: 28px 0 56px; }
  .wsrf-body #bo_sch { margin-left: 0; width: 100%; }
  .wsrf-body #bo_sch input[type="text"] { flex: 1; min-width: 0; }
  /* 표가 화면보다 넓다는 것을 그림자로 알린다. 끝까지 밀면 그림자가 사라진다.
     안내 문구를 덧붙이지 않고 표 자신이 말하게 하는 방법이다. */
  .wsrf-body .tbl_wrap {
    background:
      linear-gradient(90deg, var(--paper) 30%, rgba(255, 255, 255, 0)) left center,
      linear-gradient(90deg, rgba(255, 255, 255, 0), var(--paper) 70%) right center,
      radial-gradient(farthest-side at 0 50%, rgba(22, 32, 46, .16), rgba(22, 32, 46, 0)) left center,
      radial-gradient(farthest-side at 100% 50%, rgba(22, 32, 46, .16), rgba(22, 32, 46, 0)) right center;
    background-repeat: no-repeat;
    background-size: 36px 100%, 36px 100%, 13px 100%, 13px 100%;
    background-attachment: local, local, scroll, scroll;
  }
  .wsrf-body .tbl_head01 thead th, .wsrf-body .tbl_head02 thead th,
  .wsrf-body .tbl_head01 tbody td, .wsrf-body .tbl_head02 tbody td { padding: 13px 8px; }

  .wsrf-body #gall_ul { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .wsrf-body .tbl_frm01 th { width: auto; display: block; border-bottom: 0; padding-bottom: 6px; }
  .wsrf-body .tbl_frm01 td { display: block; }
  .wsrf-body #bo_v_title, .wsrf-body #bo_v_info, .wsrf-body #bo_v_atc, .wsrf-body #bo_v_file { padding-left: 18px; padding-right: 18px; }
  .wsrf-body #bo_v_title .bo_v_tit { font-size: 1.3125rem; }

  /* 회원 — 좁은 화면에서는 동의 문구가 제목 옆에 들어가지 않는다.
     약관 아래 제 줄로 내린다. "읽고 → 동의" 순서라 오히려 자연스럽다. */
  .wsrf-body #fregister h2 { padding: 14px 16px; font-size: .9375rem; }
  .wsrf-body #fregister .fregister_agree {
    position: static;
    display: flex; align-items: center; justify-content: flex-end; gap: 6px;
    width: 100%; height: auto;
    padding: 13px 16px;
    background: var(--tint);
    border-top: 1px solid var(--line);
  }
  .wsrf-body #fregister .fregister_agree label { font-size: .8125rem; }
  .wsrf-body #fregister textarea { height: 160px; padding: 16px; }
  .wsrf-body #fregister_member_level div,
  .wsrf-body #fregister_private div { padding: 16px; }
  .wsrf-body #fregister_private table th,
  .wsrf-body #fregister_private table td { padding: 10px 8px; font-size: .875rem; }
  .wsrf-body #fregister .btn_confirm .btn_submit,
  .wsrf-body #fregisterform .btn_confirm .btn_submit,
  .wsrf-body #fregisterform .btn_confirm .btn_cancel,
  .wsrf-body #fregisterform .btn_confirm .btn_member_leave { width: 100%; padding: 0 20px; }
  .wsrf-body #fregisterform .form_01 div { margin: 0 0 18px; }
  /* 좁은 화면에서는 하려던 일(회원가입)을 위에 둔다 */
  .wsrf-body #fregisterform .btn_confirm { flex-direction: column; }
  .wsrf-body #fregisterform .btn_confirm .btn_submit { order: -1; }
}

@media (max-width: 640px) {
  .wsrf-sub .page-hero__title { font-size: 1.625rem; }
  .wsrf-body #gall_ul { grid-template-columns: 1fr; }
  .wsrf-body #bo_list_write, .wsrf-body #bo_btn { justify-content: stretch; }
  .wsrf-body #bo_list_write a, .wsrf-body #bo_btn a { flex: 1; }
}

@media print {
  .wsrf-sub .lnb, .wsrf-body #bo_sch, .wsrf-body #bo_list_write, .wsrf-body .pg_wrap { display: none; }
  .wsrf-sub .page-hero { background: none; color: var(--ink); }
  .wsrf-sub .page-hero__title { color: var(--ink); }
}

/* =========================================================
   로그인 (2026-10-06) — 사이트 톤(남색 · 연두)에 맞춘 카드.
   마크업은 skin/member/basic/login.skin.php (휴대폰 스킨도 같다)
   ========================================================= */
.wsrf-body #mb_login.wsl-login { max-width: 460px; margin: 10px auto 64px; padding: 0; border: 0; background: none; }
.wsl-login__card {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 26px 50px -32px rgba(0, 28, 66, .5);
}
.wsl-login__card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px;
  background: linear-gradient(90deg, var(--navy) 0 64%, var(--lime) 64% 100%);
}
.wsl-login__head { padding: 36px 34px 4px; text-align: center; }
/* 옛 회원 스킨이 #mb_login 안을 가운데 맞춤 · 필수 칸 빨간 별(배경 그림)로 그린다 — 여기서 푼다 */
.wsrf-body #mb_login.wsl-login #login_fs { text-align: left; }
.wsrf-body #mb_login.wsl-login .frm_input.required { background-image: none !important; }   /* 그누보드 기본 css 가 !important 로 박아 둔 빨간 별 */
.wsl-login__eyebrow {
  display: inline-block; padding: 4px 11px; border-radius: 100px;
  background: var(--lime-soft); color: var(--navy-deep);
  font-size: .8125rem; font-weight: 800; letter-spacing: -.01em;
}
.wsrf-body #mb_login .wsl-login__head h1 {
  margin: 12px 0 6px; font-size: 2rem; font-weight: 900; line-height: 1.2;
  color: var(--navy-deep); letter-spacing: -.035em; text-align: center;
}
.wsl-login__head p { margin: 0; font-size: 1rem; color: var(--ink-2); }
.wsrf-body #mb_login.wsl-login p { padding: 0; border: 0; }   /* 휴대폰 회원 스킨 style.css 의 '.mbskin p' 밑줄 · 여백 걷어냄 */

.wsrf-body #mb_login #login_fs { margin: 0; padding: 20px 34px 4px; border: 0; background: none; }
.wsl-login__lb { display: block; margin: 16px 0 8px; font-size: .9375rem; font-weight: 800; color: var(--ink); }
.wsrf-body #mb_login .frm_input {
  display: block; width: 100%; height: 56px; margin: 0; padding: 0 16px;
  border: 1.5px solid var(--line-strong); border-radius: 12px; background: #fff;
  font-size: 1.0625rem; color: var(--ink); box-shadow: none;
  transition: border-color .15s, box-shadow .15s;
}
.wsrf-body #mb_login .frm_input::placeholder { color: #9aa6b8; }
.wsrf-body #mb_login .frm_input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 4px rgba(0, 63, 140, .14); }
.wsrf-body #mb_login .frm_input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #f3f7fd inset; -webkit-text-fill-color: var(--ink); }
.wsl-login__pw { position: relative; }
.wsrf-body #mb_login .wsl-login__pw .frm_input { padding-right: 84px; }
.wsl-login__eye {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  height: 40px; min-width: 64px; padding: 0 12px; border: 0; border-radius: 9px;
  background: #eef3fa; color: var(--navy); font-family: inherit; font-size: .875rem; font-weight: 800; cursor: pointer;
}
.wsl-login__eye:hover { background: #e2eaf6; }
.wsl-login__auto { display: inline-flex; align-items: center; gap: 9px; margin: 18px 0 0; font-size: .9375rem; color: var(--ink-2); cursor: pointer; }
.wsl-login__auto input { width: 20px; height: 20px; margin: 0; accent-color: var(--navy); }
.wsl-login__note { margin: 8px 0 0; font-size: .875rem; color: #b45309; }
.wsl-login__go {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 58px; margin: 22px 0 0; border: 0; border-radius: 12px;
  background: var(--navy); color: #fff; font-family: inherit; font-size: 1.125rem; font-weight: 800; letter-spacing: -.02em;
  cursor: pointer; box-shadow: 0 12px 24px -14px rgba(0, 44, 99, .85);
  transition: background .15s, transform .15s, box-shadow .15s;
}
.wsl-login__go svg { width: 20px; height: 20px; transition: transform .2s; }
.wsl-login__go:hover { background: var(--navy-deep); transform: translateY(-1px); }
.wsl-login__go:hover svg { transform: translateX(3px); }
.wsl-login__go:focus-visible, .wsl-login__eye:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }

.wsl-login__foot {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  margin-top: 26px; padding: 20px 34px 22px; border-top: 1px solid var(--line); background: #f6f8fb; text-align: center;
}
.wsrf-body .wsl-login__foot a.wsl-login__find { order: 2; padding: 0; border: 0; font-size: .9375rem; font-weight: 600; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.wsrf-body .wsl-login__foot a.wsl-login__find:hover { color: var(--navy); }
.wsl-login__foot p { order: 1; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 0; font-size: .9375rem; color: var(--ink-2); }
.wsrf-body .wsl-login__foot a.wsl-login__join {
  display: inline-flex; align-items: center; height: 42px; padding: 0 16px;
  border: 1.5px solid var(--navy); border-radius: 10px; background: #fff;
  color: var(--navy); font-weight: 800; text-decoration: none;
}
.wsrf-body .wsl-login__foot a.wsl-login__join:hover { background: var(--navy); color: #fff; }
/* 소셜 로그인을 켰을 때 — 카드 안 여백만 맞춘다 */
.wsrf-body #mb_login .wsl-login__card #sns_login { margin: 18px 34px 0; }

@media (max-width: 560px) {
  .wsrf-body #mb_login.wsl-login { margin: 0 auto 40px; }
  .wsl-login__head { padding: 30px 22px 2px; }
  .wsrf-body #mb_login .wsl-login__head h1 { font-size: 1.75rem; }
  .wsrf-body #mb_login #login_fs { padding: 16px 22px 2px; }
  .wsl-login__foot { padding: 18px 22px 22px; }
  .wsrf-body #mb_login .wsl-login__card #sns_login { margin: 16px 22px 0; }
}

/* =========================================================
   회원가입 완료 (2026-10-06) — 로그인 카드(.wsl-login__card · __eyebrow · __go)를 그대로 쓴다.
   마크업은 skin/member/basic/register_result.skin.php (휴대폰 스킨도 같다)
   ========================================================= */
.wsl-reg { max-width: 500px; margin: 10px auto 64px; word-break: keep-all; overflow-wrap: break-word; }
.wsl-reg__head { padding: 40px 34px 0; text-align: center; }
.wsl-reg__check {
  display: flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%;
  background: var(--lime-soft); color: var(--navy);
}
.wsl-reg__check svg { width: 34px; height: 34px; }
.wsrf-body .wsl-reg__head h1 {
  margin: 12px 0 8px; font-size: 2rem; font-weight: 900; line-height: 1.25;
  color: var(--navy-deep); letter-spacing: -.035em;
}
/* default.css · mobile.css 의 'p { word-break: break-all }' 이 '것/을' 처럼 어절을 가른다 — 여기서 푼다 */
.wsrf-body .wsl-reg__head p { margin: 0; padding: 0; border: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--ink-2); word-break: keep-all; }
.wsl-reg__head p strong { font-weight: 800; color: var(--ink); }

.wsl-reg__info { margin: 26px 34px 0; padding: 4px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--tint); }
.wsl-reg__info div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 13px 0; }
.wsl-reg__info div + div { border-top: 1px solid var(--line); }
.wsl-reg__info dt { flex: none; margin: 0; font-size: .9375rem; font-weight: 700; color: var(--ink-2); }
.wsl-reg__info dd { min-width: 0; margin: 0; font-size: 1.125rem; font-weight: 800; color: var(--ink); text-align: right; overflow-wrap: break-word; }

/* 이메일 인증을 켰을 때만 — 인증 전에는 로그인이 안 되니 눈에 띄게 */
.wsl-reg__notice {
  margin: 16px 34px 0; padding: 14px 16px; border: 1px solid #f3d38a; border-radius: 12px;
  background: #fff8e6; font-size: .9375rem; line-height: 1.6; color: #6b4a00;
}
.wsl-reg__notice strong { display: block; margin-bottom: 4px; font-size: 1rem; font-weight: 800; color: #8a5a00; }

.wsrf-body .wsl-reg a.wsl-login__go { width: auto; margin: 24px 34px 0; color: #fff; text-decoration: none; }

.wsl-reg__foot { margin-top: 28px; padding: 18px 34px 22px; border-top: 1px solid var(--line); background: #f6f8fb; }
.wsl-reg__foot ul { margin: 0; padding: 0; list-style: none; }
.wsl-reg__foot li { position: relative; padding-left: 14px; font-size: .9375rem; line-height: 1.6; color: var(--ink-2); }
.wsl-reg__foot li + li { margin-top: 6px; }
.wsl-reg__foot li::before { content: ""; position: absolute; left: 0; top: .72em; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); }

@media (max-width: 560px) {
  .wsl-reg { margin: 0 auto 40px; }
  .wsl-reg__head { padding: 32px 22px 0; }
  .wsrf-body .wsl-reg__head h1 { font-size: 1.75rem; }
  .wsl-reg__info { margin: 22px 22px 0; padding: 2px 16px; }
  .wsl-reg__info div { display: block; padding: 11px 0; }   /* 좁은 화면 — 긴 이메일이 중간에서 잘리지 않게 이름 아래에 값 */
  .wsl-reg__info dt { font-size: .875rem; }
  .wsl-reg__info dd { margin-top: 2px; text-align: left; }
  .wsl-reg__notice { margin: 14px 22px 0; }
  .wsrf-body .wsl-reg a.wsl-login__go { margin: 22px 22px 0; }
  .wsl-reg__foot { padding: 18px 22px 22px; }
}