/* hometable_int_2 · app.css
   BIO 사전등록 공통 스타일. 페이지에 인라인 style 을 쓰지 않는다. */

:root{
  --navy:#2c3676; --navy-dk:#232b61; --line:#dfe2ef; --line2:#e8eaf3;
  --bg:#f6f7fc; --txt:#333; --muted:#777; --err:#c0392b; --ok:#1e7e46;
  color-scheme: light;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);
  font-family:'Malgun Gothic','맑은 고딕',-apple-system,sans-serif;font-size:15px;line-height:1.6}
a{color:var(--navy)}
.wrap{max-width:1000px;margin:0 auto;padding:0 16px}

/* 머리/꼬리 */
.site_head{background:#fff;border-bottom:1px solid var(--line)}
.site_head .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.site_head .logo{font-weight:700;color:var(--navy);text-decoration:none;font-size:17px}
.site_head .gnb a{margin-left:16px;font-size:14px;text-decoration:none;color:#555}
.site_head .gnb a.lang{padding:4px 10px;border:1px solid var(--line);border-radius:4px}
.site_main{padding:32px 0 64px}
.site_foot{border-top:1px solid var(--line);background:#fff;padding:24px 0;font-size:13px;color:var(--muted)}
.site_foot p{margin:2px 0}

/* 단계 */
.steps{display:flex;gap:10px;list-style:none;margin:0 0 32px;padding:0}
.steps .step{flex:1 1 0;text-align:center;border:1px solid var(--line);border-radius:10px;
  padding:0;background:#fff;color:#999}
.steps .step>a,.steps .step>span{display:block;padding:14px 8px;color:inherit;text-decoration:none}
.steps .step em{display:block;font-style:normal;font-size:12px;letter-spacing:.5px}
.steps .step strong{display:block;font-size:15px;margin-top:3px}
.steps .step.done{border-color:#b9c0e2;color:#7a83b8}
.steps .step.on{border-color:var(--navy);background:var(--navy);color:#fff}
.steps .step.go{cursor:pointer}
.steps .step.go:hover,.steps .step.go:focus-within{border-color:var(--navy);box-shadow:0 0 0 2px rgba(44,54,118,.12)}
.steps .step.go>a:focus{outline:2px solid var(--navy);outline-offset:-4px}

/* 제목 */
.page_tit{font-size:26px;margin:0 0 24px;color:#222}
.sec_tit{font-size:18px;margin:36px 0 12px;padding-left:12px;border-left:4px solid var(--navy);color:#222}
/* 한 섹션 안에서 표를 나눌 때 쓰는 작은 제목 (등록내역의 "관심 분야") */
.sub_tit{font-size:15px;margin:24px 0 10px;color:#333}

/* 알림 */
.alert{margin:0 0 20px;padding:14px 16px;border-radius:8px;font-size:14px}
.alert_err{background:#fdecea;border:1px solid #f5c2bd;color:var(--err)}
.alert_ok{background:#e8f5ee;border:1px solid #bde0cb;color:var(--ok)}

/* 폼 */
.form_tbl{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line)}
.form_tbl th,.form_tbl td{border:1px solid var(--line2);padding:12px 14px;text-align:left;vertical-align:middle}
.form_tbl th{background:#f7f8fc;width:190px;font-weight:600;font-size:14px}
.form_tbl .ess{color:var(--err);font-style:normal}
.form_tbl input[type=text],.form_tbl input[type=email],
.form_tbl input[type=password],.form_tbl input[type=tel]{
  padding:9px 10px;border:1px solid #ccd0e0;border-radius:6px;font-size:14px;max-width:260px;width:100%}
.form_tbl input[readonly]{background:#f3f4f8}
.form_tbl .w_s{max-width:90px}
.form_tbl .w_full{max-width:100%;margin-top:6px}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.dash{color:#aaa}
.hint{margin:6px 0 0;font-size:13px;color:var(--muted)}
.hint.is_err{color:var(--err)}
.hint.is_ok{color:var(--ok)}

/* 선택지 */
.opt_list{list-style:none;margin:0;padding:0}
.opt_list li{margin:4px 0}
.opt_col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 16px}
.rd{display:inline-flex;align-items:center;gap:6px;font-size:14px;cursor:pointer}

/* 관심품목 2단 : ▶ 묶음 제목 > 대분류 > (열리는) 세부항목 */
.ind_tree{margin-top:10px}
.ind_group{margin:16px 0 6px;font-size:14px;font-weight:700;color:var(--fg)}
.ind_group:first-child{margin-top:0}
.ind_item{padding:4px 0}
.ind_item .ind_top{font-weight:600}
.ind_sub{margin:6px 0 10px;padding:12px 14px;background:#f4f6fb;border-radius:6px}
.ind_sub li{margin:3px 0}
.ind_sub .rd{font-weight:400;font-size:13px}
/* ★ 이 줄이 없으면 세부목록이 접히지 않는다.
   브라우저 기본 규칙 [hidden]{display:none} 은 선택자 점수가 .opt_col 과 같은데,
   저자 스타일시트가 기본 규칙을 이기므로 위의 .opt_col{display:grid} 가 남는다.
   즉 hidden 을 붙여도 계속 보인다. 점수를 한 단계 올려 확실히 접는다. */
.ind_sub[hidden]{display:none}
.mt5{margin-top:6px}

@media (max-width:640px){
  .opt_col{grid-template-columns:1fr}
}

/* 약관 */
.agree_box{background:#fff;border:1px solid var(--line);border-radius:8px;padding:18px 20px}
.agree_box p{margin:8px 0}
.agree_box .agree_all{padding-bottom:10px;border-bottom:1px solid var(--line2)}

/* 버튼 */
.btns{text-align:center;margin:32px 0 0}
.btn{display:inline-block;padding:10px 18px;border:0;border-radius:6px;font-size:14px;
  cursor:pointer;text-decoration:none;text-align:center}
.btn_main{background:var(--navy);color:#fff;min-width:220px;padding:14px 22px;font-size:16px;font-weight:700}
.btn_main:hover{background:var(--navy-dk)}
.btn_main[disabled]{background:#9aa0c0;cursor:default}
.btn_sub{background:#eef0f7;color:#444;border:1px solid #ccd0e0}
.btn_sub:hover{background:#e3e6f2}

@media (max-width:767px){
  .steps{flex-wrap:wrap}
  .steps .step{flex:1 1 30%}
  .form_tbl,.form_tbl tbody,.form_tbl tr,.form_tbl th,.form_tbl td{display:block;width:auto}
  .form_tbl th{border-bottom:0;background:#fff;padding-bottom:0}
  .form_tbl td{border-top:0}
  .opt_col{grid-template-columns:1fr}
  .page_tit{font-size:22px}
}

/* STEP2 패스 표 */
.vat{font-size:13px;font-weight:400;color:var(--muted);margin-left:8px}
.tbl_scroll{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:8px}
.pass_tbl{width:100%;min-width:640px;border-collapse:collapse;font-size:14px}
.pass_tbl th,.pass_tbl td{border:1px solid var(--line2);padding:11px 10px;text-align:center}
.pass_tbl thead th{background:var(--navy);color:#fff;font-size:13.5px}
.pass_tbl thead th.h_tier{background:#1d2450}
.pass_tbl .tier_row th{background:#f7f8fc;text-align:left;width:190px;font-size:13.5px}
.pass_tbl .tier_row td{color:#222}
.pass_tbl .pick_row td{background:#fcfcfe;padding:8px}
.pass_tbl input[type=radio]{width:18px;height:18px;cursor:pointer}
.pass_tbl input[type=radio]:disabled{cursor:not-allowed;opacity:.35}
.pass_tbl .total_row th{background:#eef0f7;text-align:left}
.pass_tbl .total_row td{text-align:right;padding-right:18px;font-size:16px}
.pass_tbl .total_row strong{font-size:22px;color:var(--err)}
.hide{display:none}

/* 결제 대기 / 결과 */
.pay_wait{max-width:520px;margin:60px auto;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:48px 30px;text-align:center}
.pay_wait h1{font-size:20px;color:var(--navy);margin:0 0 12px}
.pay_wait p{margin:0 0 8px;font-size:14px;color:var(--muted)}
.pay_wait .pay_amt{margin-top:18px;font-size:15px;color:#333}
.pay_wait .pay_amt strong{font-size:20px;color:var(--err)}
.spin{width:36px;height:36px;margin:0 auto 22px;border:4px solid var(--line);
  border-top-color:var(--navy);border-radius:50%;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.result_box{margin:40px 0 20px;border:2px solid var(--navy);border-radius:12px;
  background:#fff;padding:36px 20px;text-align:center}
.result_box.warn{border-color:var(--err)}
.result_tit{font-size:24px;font-weight:700;color:var(--navy);margin:0 0 10px}
.result_box.warn .result_tit{color:var(--err)}
.result_msg{font-size:15px;color:#555;line-height:1.9;margin:0}
.result_amt{display:inline-block;margin-top:16px;padding:10px 26px;border-radius:8px;
  background:var(--bg);border:1px solid var(--line);font-size:15px}
.result_amt strong{font-size:19px;color:var(--err)}

/* 로그인 / 마이페이지 */
.login_box{max-width:420px;margin:0 auto;background:#fff;border:1px solid var(--line);
  border-radius:10px;padding:32px 28px}
.login_box p{margin:0 0 16px}
.login_box label{display:block;margin-bottom:6px;font-size:14px;font-weight:600}
.login_box input{width:100%;padding:11px 12px;border:1px solid #ccd0e0;border-radius:6px;font-size:15px}
.login_box .btns{margin:24px 0 0}
.login_box .btn_main{width:100%}
.login_links{display:flex;justify-content:space-between;margin-top:18px;font-size:13.5px}
.masked{font-family:monospace;font-size:15px;letter-spacing:.5px}
.note{font-size:13px;color:var(--muted);line-height:1.9}
.due{color:var(--err);font-size:17px}

/* 패스표 · 혜택 행 */
.pass_tbl .bene_row th{background:#fbfbfe;text-align:left;font-weight:500;font-size:13.5px;color:#444}
.pass_tbl .bene_row td{font-size:14px;color:#555}
.pass_tbl .bene_row td.on{color:var(--navy);font-weight:700}
.pass_tbl .bene_row td.off{color:#bbb}
.pass_tbl .sec_row th{background:#eef0f7;text-align:center;font-size:13.5px;color:#333;letter-spacing:.02em}
.pass_tbl .tier_row td{font-weight:600}
.tbl_note{margin:10px 0 0;font-size:13px;color:var(--muted);line-height:1.8}
.tbl_note strong{color:var(--err);font-weight:600}

/* 할인(쿠폰) 영역 */
.cp_box{margin-top:14px;border-left:3px solid var(--navy);padding-left:14px}
.cp_box .cp_tit{margin:0 0 8px;font-size:14px;font-weight:700;color:var(--navy)}
.form_tbl select{padding:9px 10px;border:1px solid #ccd0e0;border-radius:6px;font-size:14px;max-width:100%}
.form_tbl select.w_wide{min-width:320px}
.pay_final{font-size:15px}
.pay_final strong{font-size:20px;color:var(--err)}

/* 결제금액 요약 — 여기 "최종 결제금액" 이 결제창에 넘어갈 금액과 같다 */
.pay_sum{margin:22px 0 0;background:#fff;border:1px solid var(--line);border-radius:8px;padding:6px 20px}
.pay_sum dl{margin:0}
.pay_sum dl>div{display:flex;justify-content:space-between;align-items:baseline;
  padding:12px 0;border-bottom:1px solid var(--line2)}
.pay_sum dl>div:last-child{border-bottom:0}
.pay_sum dt{margin:0;font-size:14px;color:#555}
.pay_sum dd{margin:0;font-size:15px;color:#333}
.pay_sum .fin dt{font-weight:700;color:#222;font-size:15px}
.pay_sum .hint{margin:0 0 12px}
.info_box{background:#f7f8fc;border:1px solid var(--line2);border-radius:6px;
  padding:12px 14px;font-size:13.5px;line-height:1.9;color:#555}
.info_box strong{color:#333}

/* 환불규정 */
.policy_box{margin:28px 0 0;background:#fff;border:1px solid var(--line);border-radius:8px;padding:18px 20px;
  font-size:13.5px;line-height:1.9;color:#555}
.policy_box .policy_tit{margin:0 0 8px;font-size:14px;font-weight:700;color:var(--err)}
.policy_box .policy_em{display:block;margin-top:8px;color:var(--err)}

/* 패스별 색 구분
   색은 BIO-conference/_common/css/contents.css 의 패스 팔레트를 그대로 쓴다.
     01 올인클루시브 bg_purp  #7030a0 / bg_purp02  #f1edfa
     02 프라임       bg_sky   #4a86e8 / bg_sky02   #e8f1f8
     03 EE           bg_green #92d050 / bg_green02 #f2f9ed
     04 스탠다드     bg_red   #ff6464 / bg_red02   #fbefef
     05 엔트리       bg_org   #ffc000 / bg_org02   #fef9ec
   글자색만 다르다 — 원본은 다섯 칸 모두 흰 글자인데 연두·노랑 위에서는 읽히지 않아
   그 두 칸만 진한 색으로 뒀다. */
.pass_tbl thead th.p01{background:#7030a0;color:#fff}
.pass_tbl thead th.p02{background:#4a86e8;color:#fff}
.pass_tbl thead th.p03{background:#92d050;color:#2c4708}
.pass_tbl thead th.p04{background:#ff6464;color:#fff}
.pass_tbl thead th.p05{background:#ffc000;color:#4a3200}

/* 제공(○) 칸만 연한색을 깔아 세로로 어느 패스인지 따라가게 한다 */
.pass_tbl .bene_row td.on.p01{background:#f1edfa;color:#7030a0}
.pass_tbl .bene_row td.on.p02{background:#e8f1f8;color:#2f6cd0}
.pass_tbl .bene_row td.on.p03{background:#f2f9ed;color:#4e8a1f}
.pass_tbl .bene_row td.on.p04{background:#fbefef;color:#d13b3b}
.pass_tbl .bene_row td.on.p05{background:#fef9ec;color:#a87800}

/* 가격은 패스 색 글자로 (원본 ft_violet~ft_orange 가 노렸던 것) */
.pass_tbl .tier_row td.p01{color:#7030a0}
.pass_tbl .tier_row td.p02{color:#2f6cd0}
.pass_tbl .tier_row td.p03{color:#4e8a1f}
.pass_tbl .tier_row td.p04{color:#d13b3b}
.pass_tbl .tier_row td.p05{color:#a87800}
/* "무료" 는 패스 색보다 우선한다. 위 규칙 뒤에 둬야 이긴다 */
.pass_tbl .tier_row td.free{color:var(--ok)}

.pass_tbl .pick_row td.p01{background:#faf8fe}
.pass_tbl .pick_row td.p02{background:#f6fafd}
.pass_tbl .pick_row td.p03{background:#f9fcf6}
.pass_tbl .pick_row td.p04{background:#fdf7f7}
.pass_tbl .pick_row td.p05{background:#fffcf5}
.pass_tbl .pick_row td.p01 input[type=radio]{accent-color:#7030a0}
.pass_tbl .pick_row td.p02 input[type=radio]{accent-color:#4a86e8}
.pass_tbl .pick_row td.p03 input[type=radio]{accent-color:#6aa832}
.pass_tbl .pick_row td.p04 input[type=radio]{accent-color:#ff6464}
.pass_tbl .pick_row td.p05 input[type=radio]{accent-color:#e0a800}

/* 헤더 로그아웃 (POST 폼을 링크처럼 보이게) */
.gnb .logout-form{display:inline;margin:0}
.gnb .logout-btn{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}