@charset "UTF-8";
/* 조합 목록: PC와 모바일에서 함께 사용하는 화면 스타일 */
#content.johab-renewal { color:#24324b; background:#f5f7fb; }
.johab-renewal *, .johab-renewal *::before, .johab-renewal *::after { box-sizing:border-box; }
.johab-renewal .bo_v_head { border:0; background:transparent; padding:24px 24px 6px; font-size:25px; line-height:1.4; color:#172b4d; letter-spacing:-1px; }
.johab-renewal .johab-summary { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 24px 24px; }
.johab-renewal .johab-summary p { margin:0; font-size:14px; color:#68768c; line-height:1.6; }
.johab-renewal .johab-total { flex-shrink:0; padding:9px 14px; border:1px solid #dbe5f6; border-radius:24px; background:#fff; font-size:13px; color:#55657d; }
.johab-renewal .johab-total strong { color:#315ec4; font-size:17px; margin-left:5px; }
.johab-renewal .lotto_save_box { padding:0 24px 24px; border:0; background:transparent; }
.johab-renewal .tapa_intro { margin:0 0 16px; padding:16px 18px; background:#fff; border:1px solid #e2e8f1; border-radius:12px; font-size:13px; line-height:1.8; color:#5b6a80; }
.johab-renewal .tapa_intro a { overflow-wrap:anywhere; }
.johab-renewal .tapa_intro a.johab-guide { display:inline-flex !important; width:auto !important; padding:9px 14px !important; margin-top:12px !important; border-radius:8px; box-shadow:none !important; background:#edf2ff !important; color:#315ec4 !important; font-size:13px !important; line-height:1.5; }
.johab-renewal .gpt-txtinfo { display:flex; gap:10px; align-items:flex-start; margin:0 0 20px; padding:14px 16px; border:1px solid #dce6f7; border-radius:10px; background:#edf3ff; font-size:13px; line-height:1.7; }
.johab-renewal .gpt-txtinfo::before { content:'i'; display:inline-flex; justify-content:center; align-items:center; flex:0 0 19px; height:19px; margin-top:2px; border-radius:50%; background:#315ec4; color:#fff; font:bold 13px Georgia,serif; }
.johab-renewal .gpt-txtinfo span { color:#506484 !important; font-weight:normal !important; }
.johab-renewal .johab-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px; font-size:13px; color:#68768c; }
.johab-renewal .johab-toolbar h2 { margin:0; color:#24324b; font-size:17px; font-weight:700; }
.johab-renewal .daebak-list-box, .johab-renewal .johab_list { margin:0; padding:0; border:1px solid #e2e8f1; border-radius:12px; overflow:hidden; background:#fff; }
.johab-renewal table { width:100%; table-layout:fixed; border-collapse:collapse; font-size:14px; }
.johab-renewal table th { padding:15px 6px; background:#eaf0f8; border:0; border-bottom:1px solid #d7e1ee; color:#435570; font-size:13px; font-weight:700; }
.johab-renewal table td { padding:20px 6px; border-right:0; border-bottom:1px solid #e2e8f1; text-align:center; vertical-align:middle; background:#fff; color:#435570; overflow-wrap:anywhere; }
.johab-renewal table .johab-entry:not(.johab-completed) td { border-bottom:0; }
.johab-renewal table .johab-date { font-size:14px; font-variant-numeric:tabular-nums; line-height:1.6; }
.johab-renewal table .johab-entry td:nth-child(2) { font-weight:700; color:#24324b; font-size:15px; }
.johab-renewal table tr:hover td { background:#fff; }
.johab-renewal table .johab-entry:hover td { background:#f9fbff; }
.johab-renewal input[type=checkbox] { width:18px; height:18px; margin:0; accent-color:#315ec4; cursor:pointer; vertical-align:middle; }
.johab-renewal a:focus-visible, .johab-renewal button:focus-visible, .johab-renewal input:focus-visible, .johab-renewal select:focus-visible { outline:3px solid #86a9f2; outline-offset:3px; }
.johab-renewal table td.johab-numbers { white-space:nowrap; }
.johab-renewal table td .ball { display:inline-block; width:34px; height:34px; line-height:34px; margin:3px 2px; border-radius:50%; font-size:15px; font-weight:700; font-family:Arial,sans-serif; text-align:center; color:#fff; text-shadow:none; box-shadow:inset 0 -2px 0 rgba(0,0,0,.08); }
.johab-renewal .ball.yellow_ball { background:#e5aa20; }
.johab-renewal .ball.blue_ball { background:#4387db; }
.johab-renewal .ball.red_ball { background:#e36666; }
.johab-renewal .ball.gray_ball { background:#8590a2; }
.johab-renewal .ball.green_ball { background:#55a779; }
.johab-renewal .ball.noball { background:#e9edf3; color:#58667a; box-shadow:none; }
.johab-renewal .dang-box { display:inline-block; width:auto; min-width:42px; height:26px; padding:0 10px; line-height:26px; border-radius:7px; font-size:12px; font-weight:700; color:#fff; }
.johab-renewal table .johab-report td { padding:0 16px 12px; border-bottom:0; background:#fff; }
.johab-renewal .report_open_bt { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 16px; border:1px solid #d8e3fa; border-radius:8px; background:#f3f6ff; color:#315ec4 !important; font-size:13px; line-height:1.5; text-decoration:none; }
.johab-renewal .report_open_bt::after { content:'→'; }
.johab-renewal .report_open_bt:hover { background:#e8efff; }
.johab-renewal table .johab-history td { padding:14px 16px 6px; border-bottom:0; background:#f8fafd !important; font-size:14px; line-height:1.9; color:#53627a; }
.johab-renewal table .johab-stats td { padding:6px 16px 16px; border-bottom:1px solid #dce4ef !important; background:#f8fafd !important; font-size:14px; line-height:1.9; color:#53627a; }
.johab-renewal .johab-pending { display:inline-block; padding:5px 9px; border-radius:7px; background:#edf2ff; color:#315ec4; font-size:12px; font-weight:700; line-height:1.5; white-space:nowrap; }
.johab-renewal .johab-detail-line { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; }
.johab-renewal .johab-detail-label { font-size:13px; font-weight:700; color:#435570; margin-right:4px; }
.johab-renewal .johab-detail-item { display:inline-flex; align-items:center; gap:7px; padding:5px 9px; border:1px solid #e1e7f0; border-radius:6px; background:#fff; font-size:13px; color:#627188; line-height:1.4; white-space:nowrap; }
.johab-renewal .johab-detail-item strong { color:#294d88; font-size:14px; font-weight:700; }
.johab-renewal table .johab-stats td { border-bottom:3px solid #dce4ef !important; }
.johab-renewal .span_weight { color:#315ec4; font-weight:700; }
.johab-renewal table .johab-empty td { padding:56px 20px; line-height:1.8; color:#8793a5; }
.johab-renewal .pefectBtwrap { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:8px; padding:16px 0; }
.johab-renewal .pefectBtwrap button { margin:0; height:auto; min-height:44px; line-height:1.5; padding:11px 16px; border:1px solid #315ec4; border-radius:8px; background:#315ec4; color:#fff; font-size:13px; font-weight:700; cursor:pointer; }
.johab-renewal .pefectBtwrap button:hover { background:#244da9; }
.johab-renewal .pefectBtwrap button.red { background:#fff; border-color:#efd7dc; color:#c75162; }
.johab-renewal .pefectBtwrap button.red:hover { background:#fff1f3; }
.johab-renewal .johabPagewrap { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:5px; margin:8px 0 24px; }
.johab-renewal .johabPagewrap .pg { display:inline-flex; align-items:center; justify-content:center; min-width:36px; min-height:36px; padding:0 9px; border:1px solid #dfe6f0; border-radius:8px; background:#fff; color:#65758b; }
.johab-renewal .johabPagewrap .currentpg { background:#315ec4; border-color:#315ec4; color:#fff; }
.johab-renewal .tapa_intro.johab-retention { margin-bottom:0; background:transparent; border:0 !important; padding:0; font-size:12px; color:#7b879b; }
.johab-renewal .tapa_img { margin:0 0 16px; border-radius:12px; overflow:hidden; }
.johab-renewal .johab_list .right_box { margin:0; padding:12px 14px; background:#fff; border-bottom:1px solid #e8edf4; }
.johab-renewal .right_box select { min-height:38px; padding:6px 10px; border:1px solid #dfe6f0; border-radius:8px; color:#53627a; font-size:13px; }
@media (max-width:767px) {
  #content.johab-renewal { padding:0 10px 16px; }
  .johab-renewal .bo_v_head { padding:20px 6px 8px; font-size:21px; }
  .johab-renewal .johab-summary { align-items:flex-start; padding:0 6px 20px; gap:10px; }
  .johab-renewal .johab-summary p { font-size:12px; }
  .johab-renewal .johab-total { padding:6px 10px; font-size:12px; }
  .johab-renewal .johab-total strong { font-size:15px; }
  .johab-renewal .lotto_save_box { padding:0; }
  .johab-renewal .tapa_intro { padding:13px; font-size:12px; }
  .johab-renewal .gpt-txtinfo { padding:12px; font-size:12px; margin-bottom:18px; }
  .johab-renewal .johab-toolbar { padding:0 2px; font-size:12px; margin-bottom:8px; }
  .johab-renewal .johab-toolbar h2 { font-size:16px; }
  .johab-renewal .daebak-list-box, .johab-renewal .johab_list { border:0; border-radius:0; background:transparent; overflow:visible; }
  .johab-renewal .johab-toolbar .right_box { margin:0; padding:0; }
  .johab-renewal .johab-toolbar select { min-height:40px; max-width:145px; background:#fff; font-size:12px; }
  .johab-renewal table, .johab-renewal table tbody { display:block; background:transparent; }
  .johab-renewal table colgroup { display:none; }
  .johab-renewal table tr.johab-table-head { display:flex; align-items:center; gap:8px; padding:4px 12px; min-height:40px; }
  .johab-renewal table th { display:none; border:0; background:transparent; }
  .johab-renewal table th:first-child { display:flex; align-items:center; gap:8px; padding:0; font-weight:normal; }
  .johab-renewal table th:first-child::after { content:'전체 선택'; font-size:12px; }
  .johab-renewal table tr.johab-entry { display:grid; grid-template-columns:24px minmax(0,1fr) auto; align-items:center; gap:6px 8px; padding:16px; margin-top:10px; border:1px solid #dce4ef; border-radius:14px 14px 0 0; background:#fff; }
  .johab-renewal table .johab-entry td { display:block; padding:0; border:0; text-align:left; font-size:12px; background:transparent; }
  .johab-renewal table .johab-entry td:first-child { grid-column:1; grid-row:1; }
  .johab-renewal table .johab-entry td:nth-child(2) { grid-column:2; grid-row:1; font-size:17px; letter-spacing:-.4px; }
  .johab-renewal table .johab-entry td:nth-child(2)::after { content:'회'; }
  .johab-renewal table .johab-entry td:last-child { grid-column:3; grid-row:1; text-align:right; color:#68768c; }
  .johab-renewal table .johab-entry td.johab-type { grid-column:2 / 4; grid-row:2; color:#7c889a; font-size:12px; line-height:1.5; }
  .johab-renewal .johab-issued { margin-left:8px; color:#6d7c91; font-size:11px; font-weight:normal; }
  .johab-renewal .johab-issued::before { content:'·'; margin-right:8px; color:#a8b3c3; }
  .johab-renewal table .johab-entry td.johab-type br { display:none; }
  .johab-renewal table .johab-entry td.johab-numbers { grid-column:1 / 4; grid-row:3; display:flex; justify-content:center; gap:10px; padding:10px 0 2px; }
  .johab-renewal table td .ball { width:38px; height:38px; line-height:38px; flex:0 0 38px; margin:0; font-size:16px; }
  .johab-renewal table tr.johab-report, .johab-renewal table tr.johab-history, .johab-renewal table tr.johab-stats { display:block; border-left:1px solid #e2e8f1; border-right:1px solid #e2e8f1; background:#fff; }
  .johab-renewal table .johab-report td, .johab-renewal table .johab-history td, .johab-renewal table .johab-stats td { display:block; width:100%; }
  .johab-renewal table .johab-report td { padding:0 16px 14px; }
  .johab-renewal table .johab-history td, .johab-renewal table .johab-stats td { font-size:13px; }
  .johab-renewal .report_open_bt { width:100%; min-height:44px; border-color:#dce5f8; font-size:13px; font-weight:700; }
  .johab-renewal table .johab-history td { padding:12px 16px 8px; border-top:1px solid #edf1f6; }
  .johab-renewal table .johab-stats td { padding:0 16px 12px; }
  .johab-renewal .johab-detail-line { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px 0; text-align:center; }
  .johab-renewal .johab-detail-label { grid-column:1 / -1; margin:0; text-align:left; font-size:12px; line-height:1.5; }
  .johab-renewal .johab-detail-item { flex-direction:column; justify-content:center; gap:4px; min-width:0; padding:2px; border:0; border-right:1px solid #e1e7f0; border-radius:0; background:transparent; color:#69788d; font-size:11px; line-height:1.4; }
  .johab-renewal .johab-detail-item:last-child { border-right:0; }
  .johab-renewal .johab-detail-item strong { color:#263e60; font-size:15px; font-variant-numeric:tabular-nums; }
  .johab-renewal .johab-stats .johab-detail-line { padding-top:10px; border-top:1px solid #e5ebf3; }
  .johab-renewal .johab-stats .johab-detail-line::before { content:'조합 통계'; grid-column:1 / -1; text-align:left; font-size:12px; line-height:1.5; font-weight:700; color:#435570; }
  .johab-renewal table tr.johab-stats { border-bottom:1px solid #dce4ef; border-radius:0 0 14px 14px; overflow:hidden; }
  .johab-renewal table .johab-stats td { border-bottom:0 !important; }
  .johab-renewal table tr.johab-completed { border-radius:14px; }
  .johab-renewal .johab-miss { color:#78869a; font-size:12px; }
  .johab-renewal table .johab-entry td.johab-date { grid-column:1 / 4; grid-row:4; padding-top:5px; text-align:center; color:#8a95a6; }
  .johab-renewal table tr.johab-empty { display:block; border:1px dashed #d5dfed; border-radius:12px; background:#fff; }
  .johab-renewal table .johab-empty td { display:block; }
  .johab-renewal .pefectBtwrap { padding:16px 0; }
  .johab-renewal .pefectBtwrap button { flex:1; padding:11px 8px; }
}
@media (max-width:359px) {
  .johab-renewal table .johab-entry td.johab-numbers { gap:7px; }
  .johab-renewal table td .ball { width:34px; height:34px; line-height:34px; flex-basis:34px; font-size:15px; }
  .johab-renewal .johab-summary { flex-wrap:wrap; }
}

/* 작은 안내문과 번호도 편하게 읽을 수 있도록 대비와 크기를 보강합니다. */
.johab-renewal .johab-summary p { font-size:16px; color:#46566e; }
.johab-renewal .tapa_intro { font-size:15px; color:#3e506a; }
.johab-renewal .gpt-txtinfo { font-size:15px; }
.johab-renewal .gpt-txtinfo span { color:#344d72 !important; }
.johab-renewal .johab-toolbar { color:#46566e; }
.johab-renewal .johab-toolbar h2 { font-size:20px; }
.johab-renewal .johab-legend { margin:0 0 14px; color:#46566e; font-size:14px; line-height:1.7; }
.johab-renewal table th { color:#30435f; font-size:14px; }
.johab-renewal table td { color:#34445d; }
.johab-renewal table td .ball { font-size:17px; }
.johab-renewal .ball.yellow_ball { background:#f5c342; color:#302300; }
.johab-renewal .ball.blue_ball { background:#2264b5; }
.johab-renewal .ball.red_ball { background:#bd3c47; }
.johab-renewal .ball.gray_ball { background:#566176; }
.johab-renewal .ball.green_ball { background:#237346; }
.johab-renewal .ball.noball { background:#edf0f5; color:#445168; box-shadow:inset 0 0 0 1px #cbd3df; }
.johab-renewal .johab-pending, .johab-renewal .dang-box { font-size:14px; }
.johab-renewal .johab-miss { color:#526078; font-size:14px; }
.johab-renewal .johab-detail-item { color:#46566e; font-size:14px; }
.johab-renewal .johab-detail-item strong { font-size:16px; }
.johab-renewal .report_open_bt, .johab-renewal .pefectBtwrap button { font-size:15px; }
.johab-renewal .right_box select { font-size:14px; color:#34445d; }
.johab-renewal table .johab-empty td { color:#526078; font-size:15px; }
.johab-renewal .tapa_intro.johab-retention { color:#526078; font-size:14px; line-height:1.7; }
.johab-renewal table .johab-entry:has(input:checked) td { background:#edf3ff; }
.johab-renewal table .johab-entry:has(input:checked) { outline:2px solid #315ec4; outline-offset:-2px; }
@media (max-width:767px) {
  .johab-renewal .johab-summary { flex-wrap:wrap; gap:12px; }
  .johab-renewal .johab-summary p { width:100%; font-size:14px; }
  .johab-renewal .tapa_intro, .johab-renewal .gpt-txtinfo { font-size:14px; }
  .johab-renewal .johab-toolbar h2 { font-size:18px; }
  .johab-renewal .johab-toolbar select { font-size:14px; min-height:44px; }
  .johab-renewal .johab-legend { padding:0 2px; font-size:13px; }
  .johab-renewal table th:first-child::after { font-size:14px; color:#34445d; }
  .johab-renewal table .johab-entry td.johab-type { font-size:14px; color:#46566e; }
  .johab-renewal .johab-issued { font-size:12px; color:#526078; }
  .johab-renewal table .johab-entry td.johab-numbers { gap:clamp(4px, 2vw, 10px); }
  .johab-renewal table td .ball { width:clamp(30px, 9vw, 38px); height:clamp(30px, 9vw, 38px); line-height:clamp(30px, 9vw, 38px); flex-basis:clamp(30px, 9vw, 38px); font-size:17px; }
  .johab-renewal .johab-detail-label, .johab-renewal .johab-stats .johab-detail-line::before { font-size:14px; color:#34445d; }
  .johab-renewal .johab-detail-item { font-size:12px; padding:4px 1px; }
  .johab-renewal .johab-detail-item strong { font-size:16px; }
  .johab-renewal table .johab-entry td.johab-date { color:#526078; font-size:13px; }
  .johab-renewal .report_open_bt { font-size:14px; }
}