/* 안쪽 화면 새 모양 (2026-10-21) — 강의 상세·장바구니·주문·게시판·회원·검색·내 강의실. 디자인 보완 작업 결과에서 첫 화면 부분(큰 사진·이용권 띠 색·제목 크기)은 소장 결정 전이라 뺐다(낱말 끊김 고침 한 줄만 넣음). ucp2.css 다음에 읽는다(header.php). 되돌리려면 header.php 의 ucp2-inner.css 한 줄을 지우면 된다. */ /* ---------- 0. 여러 영역이 함께 쓰는 것 ---------- */ /* 0-1. 옛 1200px 틀을 머리(1180px, 좌우 20px)와 같은 선에 맞춤 (게시판·회원·검색·강의 상세·장바구니·주문서·주문 상세) */ #container_wr:has(#bo_list, #bo_v, #bo_w, #fregister, #fregisterform, #faq_wrap, #ssch, #sch_result, #sit_ov_from, #sod_bsk, #sod_frm, #sod_fin) > .container { width: auto; max-width: var(--u2-wrap); padding-left: 20px; padding-right: 20px; box-sizing: border-box; } #container_wr:has(#bo_list, #bo_v, #bo_w, #fregister, #fregisterform, #faq_wrap, #ssch, #sch_result, #sit_ov_from, #sod_bsk, #sod_frm, #sod_fin) > .container .container { width: auto; max-width: none; padding-left: 0; padding-right: 0; } @media (max-width: 560px) { #container_wr:has(#bo_list, #bo_v, #bo_w, #fregister, #fregisterform, #faq_wrap, #ssch, #sch_result, #sit_ov_from, #sod_bsk, #sod_frm, #sod_fin) > .container { padding-left: 16px; padding-right: 16px; } } /* 0-2. 쪽 번호: 게시판·강의 검색·전체검색·주문 내역·내 강의실 모두 같은 모양(44px 네모, 지금 쪽은 남색) */ :is(#bo_list, #ssch, #sch_result, #sod_v) .pg_wrap, #bo_list ~ .pg_wrap { margin: 28px 0 8px; } :is(#bo_list, #ssch, #sch_result, #sod_v) .pg, #bo_list ~ .pg_wrap .pg { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; } :is(#bo_list, #ssch, #sch_result, #sod_v) :is(.pg_page, .pg_current), #bo_list ~ .pg_wrap :is(.pg_page, .pg_current) { display: block; min-width: 44px; height: 44px; margin: 0; padding: 0 12px; border: 1px solid var(--u2-line); border-radius: var(--u2-radius); background-color: #fff; color: var(--u2-ink-2); font: 500 15px/42px var(--u2-sans); text-align: center; box-sizing: border-box; } :is(#bo_list, #ssch, #sch_result, #sod_v) .pg_page:hover, #bo_list ~ .pg_wrap .pg_page:hover { background-color: var(--u2-mist); border-color: var(--u2-ink-3); color: var(--u2-ink); } :is(#bo_list, #ssch, #sch_result, #sod_v) .pg_current, #bo_list ~ .pg_wrap .pg_current { background-color: var(--u2-ink); border-color: var(--u2-ink); color: #fff; font-weight: 700; } :is(#bo_list, #ssch, #sch_result, #sod_v) :is(.pg_start, .pg_prev, .pg_next, .pg_end), #bo_list ~ .pg_wrap :is(.pg_start, .pg_prev, .pg_next, .pg_end) { width: 44px; padding: 0; } :is(#bo_list, #ssch, #sch_result, #sod_v) .pg a:focus-visible, #bo_list ~ .pg_wrap .pg a:focus-visible { outline: 3px solid var(--u2-celadon); outline-offset: 2px; } /* 0-3. 결제·수강 상태 꼬리표: 주문 내역과 내 강의실이 같은 색(입금 전은 따뜻한 노랑, 입금 완료는 청자, 그 밖·취소는 회색) */ :is(#sod_v, #common form[name="frm_class"] > .tbl_head03) :is(.status_01, .status_02, .status_03, .status_04, .status_05, .status_06) { display: inline-block; padding: 3px 10px; border: 0; border-radius: 999px; font-size: 13.5px; font-weight: 600; line-height: 1.5; white-space: nowrap; } :is(#sod_v, #common form[name="frm_class"] > .tbl_head03) .status_01 { background: #FBF1DE; color: #7A4E0E; } :is(#sod_v, #common form[name="frm_class"] > .tbl_head03) .status_02 { background: var(--u2-celadon-soft); color: var(--u2-celadon-deep); } :is(#sod_v, #common form[name="frm_class"] > .tbl_head03) :is(.status_03, .status_04, .status_05, .status_06) { background: var(--u2-mist); color: var(--u2-ink-2); } /* 0-4. 휴대폰 안쪽 화면의 '뒤로' 단추: 보이는 네모는 32px 그대로, 누르는 칸은 44px (ucp2.css 의 32px 규칙을 덮음) */ #container > .btn_back { top: 10px !important; left: 4px !important; width: 44px; height: 44px; border: 6px solid transparent; border-radius: 12px; background: #fff padding-box; box-shadow: inset 0 0 0 1px var(--u2-line); box-sizing: border-box; } #container > .btn_back:focus-visible { outline: 3px solid var(--u2-celadon); outline-offset: 0; } /* 0-5. 휴대폰 옛 옆메뉴(#sidr)와 옛 로그인 상자(#my_info, 오늘 본 상품 포함)는 새 머리의 '메뉴'(로그인·주문 내역·장바구니 등)와 겹치고, 여는 단추가 없어져 모든 휴대폰 화면 맨 아래에 꾸밈 없이 펼쳐져 보였다. 화면에서만 감춘다(마크업·스크립트는 그대로) */ #sidr, #my_info { display: none; } /* 첫 화면: 옛 CSS 의 p { word-break: break-all } 때문에 낱말이 중간에서 끊기던 것만 고침 */ .u2-home p { word-break: keep-all; overflow-wrap: break-word; } /* ====================================================================== 2. 강의 상세(구매) 화면 (#sit_ov_from, #sit > form[name=fitem]) ====================================================================== */ /* ===== 강의 상세(구매) 화면 /shop/item.php (2026-10-21) ===== 옛 마크업은 그대로 두고 덮어쓰기만 한다. 컴퓨터: #sit_ov_from(요약·구매), #sit_ov_from ~ #sit_info(탭) 안에서만. 휴대폰: #sit > form[name="fitem"] 안에서만(컴퓨터 화면의 같은 이름 폼은 #sit_ov_from 안에 있어 겹치지 않음). 내 강의실(#class_from, form frm_classview)과 겹치지 않게 범위를 좁혔다. */ /* ---------- 컴퓨터: 위쪽 ---------- */ /* 분류 띠(예: 정신분석/대상관계)는 바로 위 분류 단추와 겹쳐서 화면에서만 감춘다. 제목 태그는 읽기 프로그램용으로 남김 */ #common:has(#sit_ov_from) > .common_title { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; box-shadow: none; } /* 맨 아래 저작권 안내(본문 밖 글자)를 작고 차분하게 */ #common:has(#sit_ov_from) { color: var(--u2-ink-3); font-size: 14px; line-height: 1.7; } /* 현재 위치(집 > 강의안내 > 분류) */ #sct_location.view_location { padding: 14px 0 0; font-family: var(--u2-sans); } #sct_location.view_location .go_home { padding: 0 10px 0 0; font-size: 16px; color: var(--u2-ink-3); } #sct_location.view_location i.dividing-line { color: #9AA5AF; } #sct_location.view_location .category_title { font-size: 14px; color: var(--u2-ink-2); } #sct_location.view_location .category_title i { color: var(--u2-ink-3); } #sct_location.view_location .shop_select_to_html:hover .category_title, #sct_location.view_location .shop_select_to_html:hover .category_title i, #sct_location.view_location .option.selected a { color: var(--u2-celadon-deep); } #sct_location.view_location .menulist { border-radius: var(--u2-radius); box-shadow: 0 0 0 1px var(--u2-line); } #sct_location.view_location .option { font-size: 14px; } /* ---------- 컴퓨터: 요약·구매 ---------- */ #sit_ov_from { border-bottom: 0; background: transparent; color: var(--u2-ink); font: 15px/1.6 var(--u2-sans); } #sit_ov_from :is(h2, h3, button, input, select, textarea) { font-family: var(--u2-sans); } #sit_ov_from :is(a, button, input, select):focus-visible { outline: 3px solid var(--u2-celadon); outline-offset: 2px; } #sit_ov_from #sit_ov_wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 56px; align-items: start; width: auto; padding: 26px 0 40px; border-top: 0; } #sit_ov_from #sit_ov_wrap::after { content: none; } #sit_ov_from #sit_pvi, #sit_ov_from #sit_ov { float: none; width: auto; min-width: 0; min-height: 0; padding: 0; } /* 강의 그림: 가는 테두리와 둥근 모서리 (그림마다 여백이 달라도 같은 틀로 보이게) */ #sit_ov_from #sit_pvi_big { float: none; } #sit_ov_from #sit_pvi_big img { display: block; width: 100% !important; height: auto; border: 1px solid var(--u2-line); border-radius: 10px; background: #fff; } #sit_ov_from #sit_pvi_thumb { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } #sit_ov_from #sit_pvi_thumb li { margin: 0; } #sit_ov_from #sit_pvi_thumb img { border: 1px solid var(--u2-line); border-radius: 4px; } /* 제목·소개 */ #sit_ov_from #sit_title { margin: 0 0 12px; font: 700 clamp(24px, 2.4vw, 31px)/1.38 var(--u2-serif); letter-spacing: -0.015em; color: var(--u2-ink); word-break: keep-all; } #sit_ov_from #sit_desc { margin: 0 0 14px; font-size: 16px; line-height: 1.75; color: var(--u2-ink-2); word-break: keep-all; overflow-wrap: anywhere; } /* 후기 수 · 찜 수 · 나누기 */ #sit_ov_from #sit_star_sns { display: flex; align-items: center; gap: 8px; min-height: 40px; margin: 0 0 8px; } #sit_ov_from #sit_star_sns > span:not(.sound_only) { margin: 0; font-size: 14px; color: var(--u2-ink-3); } #sit_ov_from #sit_btn_opt { position: relative; right: auto; bottom: auto; display: flex; align-items: center; gap: 2px; margin-left: auto; } #sit_ov_from #btn_wish { float: none; display: inline-flex; align-items: center; gap: 5px; width: auto; height: 40px; margin: 0; padding: 0 8px; font-size: 14px; font-weight: 400; color: var(--u2-ink-3); } #sit_ov_from #btn_wish i { font-size: 17px; font-weight: 400; color: var(--u2-ink-2); } #sit_ov_from #btn_wish .btn_wish_num { position: static; height: auto; margin: 0; padding: 0; background: none; font-size: 14px; line-height: 1; color: var(--u2-ink-3); } #sit_ov_from #sit_star_sns .btn_sns_share { float: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--u2-radius); font-size: 17px; font-weight: 400; color: var(--u2-ink-2); } #sit_ov_from #sit_star_sns .btn_sns_share:hover { background: var(--u2-mist); color: var(--u2-ink); } #sit_ov_from #sit_star_sns .sns_area { top: 46px; max-width: none; padding: 10px; border: 1px solid var(--u2-line); border-radius: 10px; white-space: nowrap; } #sit_ov_from #sit_star_sns .sns_area::before, #sit_ov_from #sit_star_sns .sns_area::after { content: none; } #sit_ov_from #sit_star_sns .sns_area a { width: 40px; height: 40px; line-height: 40px; margin: 0 2px; } #sit_ov_from #sit_star_sns .sns_area .share-googleplus { display: none; } /* 서비스 종료된 구글플러스 */ /* 수강료·강사·기간·강의 수 표 */ #sit_ov_from .sit_info { margin: 0; padding: 0; border-top: 1px solid var(--u2-ink); border-bottom: 0; } #sit_ov_from .sit_ov_tbl { font-size: 15px; color: var(--u2-ink); } #sit_ov_from .sit_ov_tbl col.grid_3 { width: 128px; } #sit_ov_from .sit_ov_tbl th, #sit_ov_from .sit_ov_tbl td { padding: 10px 0; border-bottom: 1px solid var(--u2-line); line-height: 1.55; text-align: left; vertical-align: top; } #sit_ov_from .sit_ov_tbl th { padding-right: 16px; font-size: 14px; font-weight: 400; color: var(--u2-ink-3); } #sit_ov_from .sit_ov_tbl .tr_price th, #sit_ov_from .sit_ov_tbl .tr_price td { padding: 18px 0 16px; vertical-align: baseline; } #sit_ov_from .sit_ov_tbl .tr_price th { padding-right: 16px; } #sit_ov_from .sit_ov_tbl .tr_price td strong { font: 800 28px/1.2 var(--u2-sans); letter-spacing: -0.01em; color: var(--u2-ink); vertical-align: baseline; } #sit_ov_from .sit_ov_tbl .tr_price td strong span[style] { margin-left: 8px; padding: 3px 9px !important; border-radius: 999px !important; background: #A0362B !important; font-size: 14px !important; font-weight: 600 !important; vertical-align: 5px; } #sit_ov_from .sit_ov_tbl td[style*="line-through"] { color: var(--u2-ink-3); } /* 강의 자료(PDF) 상자 */ #sit_ov_from .sit_ov_tbl td[colspan="2"] { padding: 16px 0 0; border-bottom: 0; } #sit_ov_from .sit_ov_tbl td[colspan="2"] > div[style] { padding: 14px 18px !important; border: 0 !important; border-radius: 10px !important; background: var(--u2-mist); } #sit_ov_from .sit_ov_tbl td[colspan="2"] .mb-10[style] { margin: 0 0 6px; font-size: 14px; color: var(--u2-ink-2) !important; } #sit_ov_from .sit_ov_tbl td[colspan="2"] p.mt-10 { margin: 0; font-size: 15px; line-height: 1.5; color: var(--u2-ink); word-break: keep-all; overflow-wrap: anywhere; } #sit_ov_from .sit_ov_tbl td[colspan="2"] p.mt-10:has(*) { padding: 3px 0; } #sit_ov_from .sit_ov_tbl td[colspan="2"] .fa-download { margin-right: 6px; color: var(--u2-celadon-deep); } #sit_ov_from .sit_ov_tbl td[colspan="2"] a { color: var(--u2-celadon-deep); text-decoration: underline; text-underline-offset: 3px; } /* 총 금액 */ #sit_ov_from #sit_tot_price { display: flex; align-items: baseline; gap: 6px; margin: 20px 0 12px; font-size: 15px; font-weight: 400; line-height: 1.4; color: var(--u2-ink); } #sit_ov_from #sit_tot_price::after { content: none; } #sit_ov_from #sit_tot_price span { float: none; margin-right: auto; font-size: 14px; color: var(--u2-ink-2); } #sit_ov_from #sit_tot_price strong { margin-left: 0; font-size: 22px; font-weight: 800; } /* 강의는 수량·선택 사항이 없어 총 금액이 바로 위 수강료와 같다. 겹치므로 감추고, 선택 사항이 있는 상품(#sit_opt_added)에서만 보인다 */ #sit_ov_from #sit_sel_option:not(:has(#sit_opt_added)) + #sit_tot_price { display: none; } #sit_ov_from #sit_ov_soldout { margin: 16px 0; padding: 14px 16px; border-radius: var(--u2-radius); background: var(--u2-mist); font-size: 15px; color: #A0362B; } /* 장바구니 · 바로구매 · 찜 단추 */ #sit_ov_from #sit_ov_btn { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; } #sit_ov_from #sit_ov_btn::after { content: none; } #sit_ov_from #sit_ov_btn button { float: none; flex: 1 1 0; width: auto; height: auto; min-height: 54px; margin: 0; padding: 0 16px; font-size: 16px; font-weight: 700; } #sit_ov_from #sit_ov_btn .sit_btn_buy { flex-grow: 1.6; } #sit_ov_from #sit_ov_btn .sit_btn_wish { float: none; display: grid; place-items: center; flex: 0 0 54px; width: 54px; height: 54px; margin: 0; border: 1px solid #B9C2C9; border-radius: var(--u2-radius); font-size: 19px; font-weight: 400; line-height: 1; color: var(--u2-ink-2); } #sit_ov_from #sit_ov_btn .sit_btn_wish:hover { border-color: #A0362B; color: #A0362B; } /* 환불 불가 안내(초록 글씨는 대비가 낮아 본문색으로) */ #sit_ov_from #sit_ov_btn > div[style*="4caf50"] { flex: 1 1 100%; margin-top: 8px; font-size: 13.5px; line-height: 1.65; color: var(--u2-ink-2) !important; word-break: keep-all; } /* 이전·다음 강의: 숨어 있던 강의 이름을 보여 준다 */ #sit_ov_from #sit_siblings { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; border-top: 1px solid var(--u2-line); text-align: left; } #sit_ov_from #sit_siblings::after { content: none; } #sit_ov_from #sit_siblings a { float: none; margin: 0; padding: 18px 0 20px; font-size: 14px; line-height: 1.5; color: var(--u2-ink-3); } #sit_ov_from #sit_siblings a::after { content: none; } #sit_ov_from #sit_siblings a#siblings_prev { grid-column: 1; padding-left: 0; } #sit_ov_from #sit_siblings a#siblings_next { grid-column: 2; padding-right: 0; text-align: right; } #sit_ov_from #sit_siblings a .sound_only { display: block !important; position: static; margin-top: 3px !important; text-indent: 0; font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--u2-ink); } #sit_ov_from #sit_siblings a:hover .sound_only { color: var(--u2-celadon-deep); text-decoration: underline; text-underline-offset: 3px; } /* ---------- 컴퓨터: 강의정보 · 후기 · 문의 · 취소/환불 탭 ---------- */ #sit_ov_from ~ #sit_info { display: block; min-height: 0; margin: 12px 0 56px; border: 0; background: transparent; color: var(--u2-ink); font: 15px/1.7 var(--u2-sans); } #sit_ov_from ~ #sit_info :is(h1, h2, h3, h4, button) { font-family: var(--u2-sans); } #sit_ov_from ~ #sit_info :is(a, button):focus-visible { outline: 3px solid var(--u2-celadon); outline-offset: 2px; } #sit_ov_from ~ #sit_info #sit_tab { display: block; width: auto; } #sit_ov_from ~ #sit_info #sit_tab .tab_tit { display: flex; gap: 4px; padding: 0; border-bottom: 1px solid var(--u2-line); background: transparent; } #sit_ov_from ~ #sit_info #sit_tab .tab_tit::after { content: none; } #sit_ov_from ~ #sit_info #sit_tab .tab_tit li { float: none; } #sit_ov_from ~ #sit_info #sit_tab .tab_tit li button { display: flex; align-items: center; gap: 7px; min-height: 54px; padding: 0 18px; border: 0; background: transparent; font-size: 16px; font-weight: 600; line-height: 1; color: var(--u2-ink-2); } #sit_ov_from ~ #sit_info #sit_tab .tab_tit li button:hover { color: var(--u2-ink); } #sit_ov_from ~ #sit_info #sit_tab .tab_tit li .selected { font-weight: 700; color: var(--u2-ink); } #sit_ov_from ~ #sit_info #sit_tab .tab_tit li .selected::after { bottom: -1px; height: 3px; background: var(--u2-celadon); } #sit_ov_from ~ #sit_info #sit_tab .item_use_count, #sit_ov_from ~ #sit_info #sit_tab .item_qa_count { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--u2-mist); font-size: 13.5px; font-weight: 600; line-height: 24px; color: var(--u2-ink-2); } #sit_ov_from ~ #sit_info #sit_tab .selected .item_use_count, #sit_ov_from ~ #sit_info #sit_tab .selected .item_qa_count { background: var(--u2-celadon-soft); color: var(--u2-celadon-deep); } #sit_ov_from ~ #sit_info #sit_tab .tab_con { padding: 36px 0 0; background: transparent; } #sit_ov_from ~ #sit_info #sit_inf, #sit_ov_from ~ #sit_info #sit_use, #sit_ov_from ~ #sit_info #sit_qa, #sit_ov_from ~ #sit_info #sit_dex, #sit_ov_from ~ #sit_info #sit_ex { margin: 0; } /* 취소/환불 탭 안의 같은 이름 제목은 화면에서만 감춤(다른 탭과 같게) */ #sit_ov_from ~ #sit_info #sit_dex > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* 강의정보: 읽기 좋은 폭과 줄 간격 */ #sit_ov_from ~ #sit_info #sit_inf_sample { margin: 0 0 40px; text-align: left; } #sit_ov_from ~ #sit_info #sit_inf_sample h1 { margin: 0 0 14px; font: 700 21px/1.4 var(--u2-serif); color: var(--u2-ink); } #sit_ov_from ~ #sit_info #sit_inf_sample #video-wrap { max-width: 760px; border-radius: 10px; overflow: hidden; } #sit_ov_from ~ #sit_info #sit_inf_explan { max-width: 760px; margin: 0; font-size: 17px; line-height: 1.85; color: var(--u2-ink); word-break: keep-all; overflow-wrap: anywhere; } #sit_ov_from ~ #sit_info #sit_inf_explan p { word-break: keep-all; } /* 옛 편집기로 넣은 작은 글자(10pt, 13~14px)와 맑은 고딕 같은 글꼴은 본문 크기·글꼴로 맞춘다. 18px 이상 강조 글자는 그대로 */ #sit_ov_from ~ #sit_info #sit_inf_explan [style*="font-family"] { font-family: inherit !important; } /* 옛 글은 단어 사이가 붙은 공백( )이라 낱말 단위로 줄을 바꾸면 줄 끝이 들쭉날쭉해진다. 꾸밈이 들어간 옛 글만 글자 단위로 */ #sit_ov_from ~ #sit_info #sit_inf_explan [style] { word-break: normal; } #sit_ov_from ~ #sit_info #sit_inf_explan :is([style*="font-size:10pt"], [style*="font-size: 10pt"], [style*="font-size:11pt"], [style*="font-size: 11pt"], [style*="font-size:12px"], [style*="font-size:13px"], [style*="font-size:13.3333px"], [style*="font-size:14px"], [style*="font-size: 14px"], [style*="font-size:14.6667px"]) { font-size: inherit !important; } #sit_ov_from ~ #sit_info #sit_inf_report { margin: 36px 0 0; padding: 20px 24px; border-radius: 10px; background: var(--u2-mist); font-size: 15px; line-height: 1.8; color: var(--u2-ink-2); } /* 강의후기 */ #sit_ov_from ~ #sit_info .sit_use_top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; min-height: 0; margin: 0 0 4px; padding: 0 0 18px; border: 0; border-bottom: 1px solid var(--u2-ink); background: transparent; } #sit_ov_from ~ #sit_info .sit_use_top h4 { margin: 0; font-size: 17px; font-weight: 700; color: var(--u2-ink); } #sit_ov_from ~ #sit_info .sit_use_top h4 span { font-size: 14px; color: var(--u2-ink-3); } #sit_ov_from ~ #sit_info .sit_use_top h4 span strong { color: var(--u2-ink-2); } #sit_ov_from ~ #sit_info #sit_use_wbtn, #sit_ov_from ~ #sit_info #sit_qa_wbtn { position: static; display: flex; gap: 8px; margin-left: auto; } #sit_ov_from ~ #sit_info #sit_qa_wbtn { justify-content: flex-end; margin: 0 0 4px; padding: 0 0 18px; border-bottom: 1px solid var(--u2-ink); } #sit_ov_from ~ #sit_info #sit_use_wbtn a, #sit_ov_from ~ #sit_info #sit_qa_wbtn a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--u2-radius); font-size: 15px; font-weight: 600; line-height: 1; text-decoration: none; } #sit_ov_from ~ #sit_info #sit_use_wbtn a.btn02, #sit_ov_from ~ #sit_info #sit_qa_wbtn a.btn02 { border: 1px solid var(--u2-ink); background: #fff; color: var(--u2-ink); } #sit_ov_from ~ #sit_info #sit_use_wbtn a.btn01, #sit_ov_from ~ #sit_info #sit_qa_wbtn a.btn01 { border: 1px solid #B9C2C9; background: #fff; color: var(--u2-ink-2); } #sit_ov_from ~ #sit_info #sit_use_wbtn a:hover, #sit_ov_from ~ #sit_info #sit_qa_wbtn a:hover { background: var(--u2-mist); } #sit_ov_from ~ #sit_info .sit_empty { margin-top: 20px; padding: 44px 20px; border-radius: 10px; background: var(--u2-mist); font-size: 15px; color: var(--u2-ink-2); } #sit_ov_from ~ #sit_info #sit_use_ol, #sit_ov_from ~ #sit_info #sit_qa_ol { margin: 0; border-top: 0; } #sit_ov_from ~ #sit_info .sit_use_li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 20px; align-items: center; min-height: 0; padding: 20px 0; border-bottom: 1px solid var(--u2-line); } #sit_ov_from ~ #sit_info .sit_use_li::after { content: none; } #sit_ov_from ~ #sit_info .sit_use_li .sit_thum { display: none; } /* 후기마다 같은 강의 그림이 반복되어 뺌 */ #sit_ov_from ~ #sit_info .sit_use_dl dd { font-size: 13.5px; line-height: 1.6; color: var(--u2-ink-3); } #sit_ov_from ~ #sit_info .sit_use_dl .sit_use_star { margin: 0 0 4px; } #sit_ov_from ~ #sit_info .sit_use_dl .sit_use_star img { width: 80px; } #sit_ov_from ~ #sit_info .sit_use_dl .sit_use_tit { margin: 0 0 2px; font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--u2-ink) !important; } #sit_ov_from ~ #sit_info .sit_use_li_title { position: static; min-height: 44px; padding: 0 16px; border: 1px solid #B9C2C9; border-radius: var(--u2-radius); background: #fff; font-size: 14px; color: var(--u2-ink-2); } #sit_ov_from ~ #sit_info .sit_use_li_title:hover { border-color: var(--u2-celadon); background: #fff; color: var(--u2-celadon-deep); } #sit_ov_from ~ #sit_info .sit_use_li_title i.fa-caret-down { display: none; } #sit_ov_from ~ #sit_info .sit_use_con { grid-column: 1 / -1; margin: 6px 0 0; } #sit_ov_from ~ #sit_info .sit_use_p { margin: 0; padding: 16px 20px; border-radius: var(--u2-radius); background: var(--u2-mist); font-size: 15px; line-height: 1.8; color: var(--u2-ink-2); } #sit_ov_from ~ #sit_info .st_bg { background: var(--u2-line); } /* 강의문의 */ #sit_ov_from ~ #sit_info .sit_qa_li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 20px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--u2-line); } #sit_ov_from ~ #sit_info .sit_qa_li::after { content: none; } #sit_ov_from ~ #sit_info .sit_qa_li_title { float: none; width: auto; min-height: 44px; padding: 0; font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--u2-ink); } #sit_ov_from ~ #sit_info .sit_qa_li_title:hover { color: var(--u2-celadon-deep); } #sit_ov_from ~ #sit_info .sit_qa_li_title img { margin-left: 4px; vertical-align: -1px; } #sit_ov_from ~ #sit_info .sit_qaa_done { height: 24px; margin-right: 10px; padding: 0 9px; border-radius: 999px; background: var(--u2-celadon-soft); font-size: 13.5px; font-weight: 600; line-height: 24px; color: var(--u2-celadon-deep); vertical-align: 1px; } #sit_ov_from ~ #sit_info .sit_qa_dl { float: none; width: auto; font-size: 13.5px; line-height: 1.6; color: var(--u2-ink-3); } #sit_ov_from ~ #sit_info .sit_qa_dl dd { margin-left: 0; } #sit_ov_from ~ #sit_info .sit_qa_con { grid-column: 1 / -1; } #sit_ov_from ~ #sit_info .sit_qa_p { margin: 6px 0 0; border-radius: var(--u2-radius); background: var(--u2-mist); font-size: 15px; line-height: 1.75; color: var(--u2-ink-2); } #sit_ov_from ~ #sit_info .sit_qa_p .qa_alp { font: 700 20px/1 var(--u2-serif); color: var(--u2-celadon-deep); } /* 취소/환불 */ #sit_ov_from ~ #sit_info #sit_ex { max-width: 760px; margin: 0; font-size: 15px; color: var(--u2-ink); } #sit_ov_from ~ #sit_info #sit_ex li[style] { margin: 0 0 10px; padding-left: 4px; line-height: 1.75 !important; } #sit_ov_from ~ #sit_info #sit_ex li::marker { color: var(--u2-ink-3); } #sit_ov_from ~ #sit_info #sit_ex span[style] { background: none !important; font-family: inherit !important; font-weight: 600; color: #A0362B !important; } /* 컴퓨터 창이 좁을 때 한 줄로 */ @media (max-width: 900px) { #sit_ov_from #sit_ov_wrap { grid-template-columns: minmax(0, 1fr); padding-top: 18px; } #sit_ov_from #sit_pvi { max-width: 560px; } #sit_ov_from ~ #sit_info #sit_tab .tab_tit { overflow-x: auto; } #sit_ov_from ~ #sit_info #sit_tab .tab_tit li button { padding: 0 12px; white-space: nowrap; } } /* ---------- 휴대폰 (mobile/skin/shop/basic) ---------- */ #sit > form[name="fitem"] { color: var(--u2-ink); font: 15px/1.6 var(--u2-sans); } #sit > form[name="fitem"] :is(h1, h2, h3, h4, strong, button, input, select, textarea) { font-family: var(--u2-sans); } #sit > form[name="fitem"] :is(a, button, input, select):focus-visible { outline: 3px solid var(--u2-celadon); outline-offset: 2px; } /* 강의 그림: 화면 폭에 맞게, 모서리 둥글게 */ #sit > form[name="fitem"] #sit_pvi { margin: 8px 6px 0; background: transparent; } #sit > form[name="fitem"] #sit_pvi > ul:not(#sit_pvi_slide) { width: auto !important; height: auto !important; max-width: 420px; margin: 0 auto !important; } #sit > form[name="fitem"] #sit_pvi > ul:not(#sit_pvi_slide) a, #sit > form[name="fitem"] #sit_pvi > ul:not(#sit_pvi_slide) img { display: block; width: 100%; height: auto; } #sit > form[name="fitem"] #sit_pvi img { border-radius: 10px; } /* 휴대폰 그림(280x280)은 위아래 빈 여백이 커서 테두리 없이 */ /* 제목·소개·수강료 */ #sit > form[name="fitem"] #sit_ov { padding: 20px 6px 4px; background: transparent; } #sit > form[name="fitem"] #sit_title { margin: 0 0 10px; font: 700 23px/1.4 var(--u2-serif); letter-spacing: -0.015em; color: var(--u2-ink); word-break: keep-all; } #sit > form[name="fitem"] #sit_desc { margin: 0 0 6px; font-size: 15.5px; line-height: 1.7; color: var(--u2-ink-2); word-break: keep-all; overflow-wrap: anywhere; } #sit > form[name="fitem"] .sit_price { margin: 14px 0 12px; padding: 0; } #sit > form[name="fitem"] .sit_price .price_wr { display: flex; align-items: baseline; gap: 12px; margin: 4px 0; } #sit > form[name="fitem"] .sit_price strong { width: auto; min-width: 72px; font-size: 14px; font-weight: 400; color: var(--u2-ink-3); } #sit > form[name="fitem"] .sit_price .price strong { color: var(--u2-ink-3); } #sit > form[name="fitem"] .sit_price .price span { font-size: 26px; font-weight: 800; letter-spacing: -0.01em; color: var(--u2-ink); } #sit > form[name="fitem"] .sit_price .price_og span { color: var(--u2-ink-3); } /* 강사·기간·강의 수 표: 처음부터 펼쳐 보이고, 영어 대문자 'INSTRUCTION' 펼침 단추는 감춘다 */ #sit > form[name="fitem"] .sit_ov_tbl { padding: 0; border-top: 1px solid var(--u2-ink); border-bottom: 0; } #sit > form[name="fitem"] .sit_ov_tbl .btn_ist { display: none; } #sit > form[name="fitem"] .sit_ov_tbl table { display: table; margin: 0; font-size: 15px; } #sit > form[name="fitem"] .sit_ov_tbl col.grid_2 { width: 104px; } #sit > form[name="fitem"] .sit_ov_tbl th, #sit > form[name="fitem"] .sit_ov_tbl td { padding: 11px 0; border-bottom: 1px solid var(--u2-line); line-height: 1.5; vertical-align: top; } #sit > form[name="fitem"] .sit_ov_tbl th { padding-right: 12px; font-size: 14px; color: var(--u2-ink-3); } #sit > form[name="fitem"] .sit_ov_tbl td { color: var(--u2-ink); } #sit > form[name="fitem"] .sit_ov_tbl td[colspan="2"] { padding: 14px 0 0; border-bottom: 0; } #sit > form[name="fitem"] .sit_ov_tbl td[colspan="2"] > div[style] { padding: 14px 16px !important; border: 0 !important; border-radius: 10px !important; background: var(--u2-mist); } #sit > form[name="fitem"] .sit_ov_tbl td[colspan="2"] .mb-10[style] { margin: 0 0 6px; font-size: 14px; color: var(--u2-ink-2) !important; } #sit > form[name="fitem"] .sit_ov_tbl td[colspan="2"] p.mt-10 { margin: 0; font-size: 15px; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere; } #sit > form[name="fitem"] .sit_ov_tbl td[colspan="2"] p.mt-10:has(*) { padding: 4px 0; } #sit > form[name="fitem"] .sit_ov_tbl td[colspan="2"] .fa-download { margin-right: 6px; color: var(--u2-celadon-deep); } #sit > form[name="fitem"] .sit_ov_tbl td[colspan="2"] a { display: inline-block; min-height: 44px; padding: 10px 0; color: var(--u2-celadon-deep); text-decoration: underline; text-underline-offset: 3px; } /* 찜 · 나누기 */ #sit > form[name="fitem"] #sit_star_sns { display: flex; align-items: center; justify-content: flex-end; gap: 4px; height: auto; padding: 6px 0; border-bottom: 0; font-weight: 400; color: var(--u2-ink-2); } #sit > form[name="fitem"] #sit_star_sns .score { margin: 0 auto 0 4px; font-size: 14px; color: var(--u2-ink); } #sit > form[name="fitem"] #sit_btn_wish, #sit > form[name="fitem"] #sit_star_sns .btn_sns_share { position: static; display: grid; place-items: center; width: 44px; height: 44px; line-height: 1; border-radius: var(--u2-radius); font-size: 19px; color: var(--u2-ink-2); } #sit > form[name="fitem"] #sit_star_sns .sns_area { top: 52px; padding: 10px; border: 1px solid var(--u2-line); border-radius: 10px; white-space: nowrap; } #sit > form[name="fitem"] #sit_star_sns .sns_area::before, #sit > form[name="fitem"] #sit_star_sns .sns_area::after { content: none; } #sit > form[name="fitem"] #sit_star_sns .sns_area a { width: 44px; height: 44px; line-height: 34px; margin: 0 2px; border-radius: 50%; } #sit > form[name="fitem"] #sit_star_sns .sns_area .share-googleplus { display: none; } /* 이전·다음 강의 */ #sit > form[name="fitem"] #sit_siblings { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 6px; border-top: 1px solid var(--u2-line); text-align: left; } #sit > form[name="fitem"] #sit_siblings::after { content: none; } #sit > form[name="fitem"] #sit_siblings a { display: block; padding: 14px 0 16px; font-size: 14px; line-height: 1.5; color: var(--u2-ink-3); } #sit > form[name="fitem"] #sit_siblings a#siblings_prev { grid-column: 1; } #sit > form[name="fitem"] #sit_siblings a#siblings_next { grid-column: 2; text-align: right; } #sit > form[name="fitem"] #sit_siblings a span { display: -webkit-box; position: static; margin-top: 3px; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 14px; font-weight: 600; line-height: 1.45; text-indent: 0; color: var(--u2-ink); } /* 아래에 붙은 '구매하기' 띠 */ #sit > form[name="fitem"] #sit_buy_op { padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--u2-line); background: rgba(255, 255, 255, .97); } #sit > form[name="fitem"] #sit_buy_op #buy_op_btn { min-height: 52px; padding: 0; border-radius: var(--u2-radius); background: var(--u2-celadon); font-size: 16px; font-weight: 700; color: #fff; } #sit > form[name="fitem"] #sit_buy_op #buy_op_btn:active { background: var(--u2-celadon-deep); } /* 펼쳐지는 구매 판 */ #sit > form[name="fitem"] #sit_buy { filter: drop-shadow(0 -6px 14px rgba(27, 42, 58, .14)); } #sit > form[name="fitem"] #sit_buy .btn_close { display: block; width: 100%; height: 44px; margin: 0 0 -1px; border: 0; border-radius: 14px 14px 0 0; background-color: #fff; } #sit > form[name="fitem"] .buy_wr { max-height: 70vh; padding: 0 16px calc(16px + env(safe-area-inset-bottom)); border-top: 0; background: #fff; text-align: left; } #sit > form[name="fitem"] #sit_sel_option { margin: 0; } #sit > form[name="fitem"] #sit_opt_added li { padding: 4px 0 12px; border-bottom: 1px solid var(--u2-line); } #sit > form[name="fitem"] #sit_opt_added li .opt_name { padding: 0; font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--u2-ink); } #sit > form[name="fitem"] #sit_tot_price { display: flex; align-items: baseline; gap: 6px; margin: 12px 0 14px; font-size: 14px; line-height: 1.4; color: var(--u2-ink-2); } #sit > form[name="fitem"] #sit_tot_price::after { content: none; } #sit > form[name="fitem"] #sit_tot_price span { float: none; margin-right: auto; } #sit > form[name="fitem"] #sit_tot_price strong { font-size: 22px; font-weight: 800; color: var(--u2-ink); } #sit > form[name="fitem"] #sit_ov_soldout { padding: 12px; border-radius: var(--u2-radius); background: var(--u2-mist); font-size: 15px; color: #A0362B; } #sit > form[name="fitem"] #sit_ov_btn { display: flex; gap: 8px; } #sit > form[name="fitem"] #sit_ov_btn::after { content: none; } #sit > form[name="fitem"] #sit_btn_cart, #sit > form[name="fitem"] #sit_btn_buy { float: none; flex: 1 1 0; width: auto; height: 52px; margin: 0; border-radius: var(--u2-radius); box-shadow: none; -webkit-appearance: none; appearance: none; font-size: 16px; font-weight: 700; } #sit > form[name="fitem"] #sit_btn_cart { border: 1px solid var(--u2-ink); background: #fff; color: var(--u2-ink); } #sit > form[name="fitem"] #sit_btn_buy { flex-grow: 1.4; border: 1px solid var(--u2-celadon-deep); background: var(--u2-celadon); color: #fff; } /* 탭: 네 칸 한 줄, 고른 칸은 밑줄 */ #sit > form[name="fitem"] #sit_tab { margin: 18px 0 0; } #sit > form[name="fitem"] #sit_tab .tab_tit { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--u2-line); } #sit > form[name="fitem"] #sit_tab .tab_tit::after { content: none; } #sit > form[name="fitem"] #sit_tab .tab_tit li { float: none; width: auto; margin: 0; } #sit > form[name="fitem"] #sit_tab .tab_tit li button { height: 50px; padding: 0 2px; border: 0; background: #fff; font-size: 15px; font-weight: 600; line-height: 1.2; color: var(--u2-ink-2); white-space: nowrap; } #sit > form[name="fitem"] #sit_tab .tab_tit li .selected { border: 0; background: #fff; font-weight: 700; color: var(--u2-ink); box-shadow: inset 0 -3px 0 var(--u2-celadon); } #sit > form[name="fitem"] #sit_tab .tab_con { padding: 24px 6px 36px; border-bottom: 0; background: transparent; } #sit > form[name="fitem"] #sit_inf_sample { margin: 0 0 28px; text-align: left; } #sit > form[name="fitem"] #sit_inf_sample h1 { margin: 0 0 12px; font: 700 19px/1.4 var(--u2-serif); color: var(--u2-ink); } #sit > form[name="fitem"] #sit_inf_explan { font-size: 16px; line-height: 1.8; color: var(--u2-ink); word-break: keep-all; overflow-wrap: anywhere; } #sit > form[name="fitem"] #sit_inf_explan [style*="font-family"] { font-family: inherit !important; } #sit > form[name="fitem"] #sit_inf_explan p { word-break: keep-all; } #sit > form[name="fitem"] #sit_inf_explan [style] { word-break: normal; } #sit > form[name="fitem"] #sit_inf_explan :is([style*="font-size:10pt"], [style*="font-size: 10pt"], [style*="font-size:11pt"], [style*="font-size: 11pt"], [style*="font-size:12px"], [style*="font-size:13px"], [style*="font-size:13.3333px"], [style*="font-size:14px"], [style*="font-size: 14px"], [style*="font-size:14.6667px"]) { font-size: inherit !important; } #sit > form[name="fitem"] #sit_inf_sample #video-wrap { border-radius: 10px; overflow: hidden; } /* 후기 · 문의 목록 */ #sit > form[name="fitem"] .sit_empty { padding: 36px 16px; border-radius: 10px; background: var(--u2-mist); font-size: 15px; color: var(--u2-ink-2); } #sit > form[name="fitem"] #sit_use_wbtn, #sit > form[name="fitem"] #sit_qa_wbtn { display: flex; gap: 8px; margin: 16px 0 0; } #sit > form[name="fitem"] #sit_use_wbtn::after, #sit > form[name="fitem"] #sit_qa_wbtn::after { content: none; } #sit > form[name="fitem"] #sit_use_wbtn a, #sit > form[name="fitem"] #sit_qa_wbtn a { float: none; display: grid; place-items: center; flex: 1 1 0; width: auto; height: 46px; padding: 0 8px; border-radius: var(--u2-radius); font-size: 15px; font-weight: 600; line-height: 1.2; } #sit > form[name="fitem"] #sit_use_wbtn .qa_wr, #sit > form[name="fitem"] #sit_qa_wbtn .qa_wr { border: 1px solid var(--u2-ink); background: #fff; color: var(--u2-ink); } #sit > form[name="fitem"] #sit_use_wbtn .btn01, #sit > form[name="fitem"] #sit_qa_wbtn .btn01 { border: 1px solid #B9C2C9; background: #fff; color: var(--u2-ink-2); } #sit > form[name="fitem"] #sit_use_ol, #sit > form[name="fitem"] #sit_qa_ol { border-top: 1px solid var(--u2-ink); } #sit > form[name="fitem"] .sit_use_li, #sit > form[name="fitem"] .sit_qa_li { padding: 0 0 14px; border-bottom: 1px solid var(--u2-line); } #sit > form[name="fitem"] .sit_use_li_title, #sit > form[name="fitem"] .sit_qa_li_title { min-height: 44px; padding: 14px 0 4px; font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--u2-ink); } #sit > form[name="fitem"] .sit_use_dl, #sit > form[name="fitem"] .sit_qa_dl { padding: 0; } #sit > form[name="fitem"] .sit_use_dl dd, #sit > form[name="fitem"] .sit_qa_dl dd { font-size: 14px; line-height: 1.6; color: var(--u2-ink-3); } #sit > form[name="fitem"] .sit_use_star { right: 0; } #sit > form[name="fitem"] .sit_qa_dl dd.sit_qaa_done { padding: 3px 9px; border-radius: 999px; background: var(--u2-celadon-soft); font-size: 13.5px; font-weight: 600; color: var(--u2-celadon-deep); } #sit > form[name="fitem"] .sit_use_p, #sit > form[name="fitem"] .sit_qa_p { border: 0; border-radius: var(--u2-radius); background: var(--u2-mist); font-size: 15px; line-height: 1.75; color: var(--u2-ink-2); } #sit > form[name="fitem"] .sit_use_p { padding: 14px 16px; } #sit > form[name="fitem"] .sit_qa_p span.sit_alp { font: 700 18px/25px var(--u2-serif); color: var(--u2-celadon-deep); } /* 취소/환불 */ #sit > form[name="fitem"] #sit_ex { font-size: 15px; color: var(--u2-ink); } #sit > form[name="fitem"] #sit_ex li[style] { margin: 0 0 10px; line-height: 1.7 !important; } #sit > form[name="fitem"] #sit_ex li::marker { color: var(--u2-ink-3); } #sit > form[name="fitem"] #sit_ex span[style] { background: none !important; font-family: inherit !important; font-weight: 600; color: #A0362B !important; } /* 관련 강의가 없을 때 빈 상자를 숨기고, 꼬리말이 아래 '구매하기' 띠에 가리지 않게 */ #sit > form[name="fitem"] ~ #sit_rel:has(.sct_noitem) { display: none; } body:has(#sit_buy_op) .u2-foot { padding-bottom: calc(36px + 74px + env(safe-area-inset-bottom)); } @media (max-width: 360px) { #sit > form[name="fitem"] #sit_tab .tab_tit li button { font-size: 14px; } #sit > form[name="fitem"] #sit_title { font-size: 21px; } } /* ====================================================================== 3. 장바구니·주문서·주문 내역·주문 상세 (#sod_bsk, #sod_frm, #sod_v, #sod_fin) ====================================================================== */ /* ===== 장바구니, 주문서, 주문 내역 새 모양 (2026-10-21) ===== PHP, 폼 이름, id, 자바스크립트가 잡는 class 는 그대로 두고 CSS 로만 덮는다. 범위: #sod_bsk 장바구니 / #sod_frm 주문서 / #sod_v 주문 내역 / #sod_fin 주문 상세. 자바스크립트가 직접 보이고 숨기는 칸(#settle_bank, #display_pay_process, #show_progress, #show_req_btn, #show_pay_btn, #sod_cancel_pop, #sod_fin_cancelfrm, #sod_sts_explan)은 display 를 정하지 않는다. */ /* ---------- 공통 바탕 ---------- */ #sod_bsk, #sod_frm, #sod_v, #sod_fin { font-family: var(--u2-sans); font-size: 15px; line-height: 1.6; color: var(--u2-ink); word-break: keep-all; overflow-wrap: anywhere; } #sod_bsk :is(input, button, select, textarea), #sod_frm :is(input, button, select, textarea), #sod_v :is(input, button, select, textarea), #sod_fin :is(input, button, select, textarea) { font-family: inherit; } #sod_bsk :is(a, button, input, select, textarea):focus-visible, #sod_frm :is(a, button, input, select, textarea):focus-visible, #sod_v :is(a, button):focus-visible, #sod_fin :is(a, button, input):focus-visible { outline: 3px solid var(--u2-celadon); outline-offset: 2px; } /* 글 입력칸: 옛 파란 테두리(!important) 대신 청자색 */ #sod_frm :is(input[type=text], input[type=password], input[type=email], select, textarea):focus, #sod_fin #sod_fin_cancelfrm input[type=text]:focus { border-color: var(--u2-celadon) !important; box-shadow: none; outline: 2px solid var(--u2-celadon); outline-offset: 0; } /* ---------- 상품 표 (컴퓨터: 장바구니, 주문서, 주문 내역, 주문 상세) ---------- */ #sod_bsk.od_prd_list .tbl_head03, #sod_frm.sod_frm_pc .od_prd_list, #sod_v .tbl_head03, #sod_fin_list .tbl_head03 { margin: 0; } #sod_bsk.od_prd_list .tbl_head03 table, #sod_frm.sod_frm_pc .od_prd_list table, #sod_v .tbl_head03 table, #sod_fin_list .tbl_head03 table { border-collapse: collapse; border-bottom: 1px solid var(--u2-line); } #sod_bsk.od_prd_list .tbl_head03 thead th, #sod_frm.sod_frm_pc .od_prd_list thead th, #sod_v .tbl_head03 thead th, #sod_fin_list .tbl_head03 thead th { padding: 13px 12px; border-top: 2px solid var(--u2-ink); border-bottom: 1px solid var(--u2-line); background: transparent; color: var(--u2-ink-2); font-size: 14px; font-weight: 600; letter-spacing: 0; text-align: center; white-space: nowrap; } #sod_bsk.od_prd_list .tbl_head03 td, #sod_frm.sod_frm_pc .od_prd_list td, #sod_v .tbl_head03 td, #sod_fin_list .tbl_head03 td { padding: 18px 12px; border-top: 1px solid var(--u2-line); border-left: 0; background: transparent; color: var(--u2-ink); font-size: 15px; line-height: 1.55; vertical-align: middle; word-break: keep-all; } #sod_bsk.od_prd_list .tbl_head03 thead th:nth-child(2), #sod_frm.sod_frm_pc .od_prd_list thead th:first-child { padding-left: 116px; text-align: left; } #sod_fin_list .tbl_head03 thead th#th_itname { padding-left: 91px; text-align: left; } #sod_bsk.od_prd_list :is(.td_num, .td_numbig), #sod_frm.sod_frm_pc .od_prd_list :is(.td_num, .td_numbig), #sod_v .td_numbig, #sod_fin_list :is(.td_numbig, .td_mngsmall) { font-variant-numeric: tabular-nums; white-space: nowrap; } /* 숫자 칸은 머리글과 같이 가운데 (옛 .text_right 가 !important 라 같은 방법으로 덮는다) */ #sod_bsk.od_prd_list .tbl_head03 td.text_right, #sod_frm.sod_frm_pc .od_prd_list td.text_right, #sod_v .tbl_head03 td.text_right, #sod_fin_list .tbl_head03 td.text_right { text-align: center !important; } #sod_bsk.od_prd_list .td_dvr, #sod_frm.sod_frm_pc .od_prd_list .td_dvr, #sod_fin_list .td_dvr { color: var(--u2-ink-2); font-size: 14px; } /* 강의 사진 + 이름 */ #sod_bsk.od_prd_list .tbl_head03 td.td_prd, #sod_frm.sod_frm_pc .od_prd_list td.td_prd { position: relative; padding: 16px 12px 16px 116px; text-align: left; } #sod_fin_list .tbl_head03 td.td_prd { position: relative; padding: 14px 12px 14px 91px; text-align: left; } #sod_bsk.od_prd_list .td_prd .sod_img, #sod_frm.sod_frm_pc .od_prd_list .td_prd .sod_img, #sod_fin_list .sod_img { position: absolute; top: 50%; left: 12px; transform: translateY(-50%); } #sod_bsk.od_prd_list .sod_img img, #sod_frm.sod_frm_pc .od_prd_list .sod_img img, #sod_fin_list .sod_img img { display: block; border-radius: 6px; object-fit: cover; background: var(--u2-mist); } #sod_bsk.od_prd_list .sod_img img, #sod_frm.sod_frm_pc .od_prd_list .sod_img img { width: 80px; height: 80px; max-width: none; } #sod_fin_list .sod_img img { width: 55px; height: 55px; max-width: none; } #sod_bsk.od_prd_list .td_prd .sod_name, #sod_frm.sod_frm_pc .od_prd_list .td_prd .sod_name { min-height: 80px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 6px; } #sod_fin_list .td_prd .sod_name { min-height: 55px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; } #sod_bsk.od_prd_list .td_prd .prd_name, #sod_frm.sod_frm_pc .od_prd_list .sod_name > b, #sod_fin_list .sod_name > a { font-size: 16px; font-weight: 600; line-height: 1.45; color: var(--u2-ink); text-decoration: none; } #sod_bsk.od_prd_list .td_prd .prd_name b { font-weight: 600; } #sod_bsk.od_prd_list .td_prd .prd_name:hover, #sod_fin_list .sod_name > a:hover { text-decoration: underline; text-underline-offset: 3px; } #sod_bsk.od_prd_list .total_prc, #sod_frm.sod_frm_pc .od_prd_list .total_price { font-size: 16px; font-weight: 700; color: var(--u2-ink); } #sod_frm.sod_frm_pc .od_prd_list .cp_btn, #sod_frm.sod_frm_mobile .sod_list .cp_btn, #sod_frm .cp_btn1, #sod_frm .cp_cancel, #sod_frm .cp_cancel1, #sod_frm #sod_frm_pay .btn_frmline { min-height: 34px; height: auto; margin: 0; padding: 0 12px; border: 1px solid var(--u2-celadon); border-radius: 6px; background: #fff; color: var(--u2-celadon-deep); font-size: 14px; font-weight: 600; line-height: 1; } /* ---------- 장바구니 (컴퓨터) ---------- */ #sod_bsk.od_prd_list { width: auto; margin: 8px 0 72px; } #sod_bsk.od_prd_list .tbl_head03 th.chk_box, #sod_bsk.od_prd_list .tbl_head03 td.td_chk { width: 56px; padding-left: 16px; padding-right: 0; text-align: left; } #sod_bsk.od_prd_list .chk_box input[type="checkbox"] + label { display: inline-block; position: relative; width: 24px; height: 24px; padding: 0; vertical-align: middle; cursor: pointer; } #sod_bsk.od_prd_list .chk_box input[type="checkbox"] + label span { top: 1px; left: 1px; width: 22px; height: 22px; border: 1.5px solid #7D8A95; border-radius: 4px; background-color: #fff; } #sod_bsk.od_prd_list .chk_box input[type="checkbox"]:checked + label span { background-color: var(--u2-celadon); border-color: var(--u2-celadon); } #sod_bsk.od_prd_list .chk_box input[type="checkbox"]:focus-visible + label span { outline: 3px solid var(--u2-celadon); outline-offset: 2px; } #sod_bsk.od_prd_list .tbl_head03 td.empty_table { padding: 64px 16px !important; border-top: 0; border-radius: 10px; background: var(--u2-mist); color: var(--u2-ink-2) !important; font-size: 16px; } #sod_bsk.od_prd_list .tbl_head03:has(.empty_table) thead { display: none; } #sod_bsk.od_prd_list .tbl_head03:has(.empty_table) table { border-bottom: 0; } #sod_bsk.od_prd_list .btn_cart_del { display: flex; gap: 8px; padding: 14px 0 0; border-bottom: 0; } #sod_bsk.od_prd_list .btn_cart_del button { height: 38px; padding: 0 14px; border: 1px solid var(--u2-line); border-radius: 6px; background: #fff; color: var(--u2-ink-2); font-size: 14px; font-weight: 600; } #sod_bsk.od_prd_list .btn_cart_del button:hover { border-color: var(--u2-ink-3); color: var(--u2-ink); } #sod_bsk.od_prd_list .tbl_wrap:has(.empty_table) .btn_cart_del { display: none; } /* 합계 줄: 배송비, 포인트는 작게, 총계는 크게 */ #sod_bsk.od_prd_list #sod_bsk_tot { margin: 28px 0 0; border: 0; border-radius: 10px; background: var(--u2-mist); } #sod_bsk.od_prd_list #sod_bsk_tot ul { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 28px; margin: 0; padding: 20px 24px; list-style: none; } #sod_bsk.od_prd_list #sod_bsk_tot ul::after { content: none; } #sod_bsk.od_prd_list #sod_bsk_tot li { float: none; width: auto; padding: 0; border: 0; background: transparent; color: var(--u2-ink); font-size: 15px; text-align: left; } #sod_bsk.od_prd_list #sod_bsk_tot li span { display: inline; float: none; margin-right: 8px; color: var(--u2-ink-2); } #sod_bsk.od_prd_list #sod_bsk_tot li strong { font-weight: 600; } #sod_bsk.od_prd_list #sod_bsk_tot .sod_bsk_cnt { width: auto; margin-left: auto; background: transparent; font-size: 17px; font-weight: 700; } #sod_bsk.od_prd_list #sod_bsk_tot .sod_bsk_cnt span { color: var(--u2-ink); font-size: 16px; font-weight: 700; } #sod_bsk.od_prd_list #sod_bsk_tot .sod_bsk_cnt strong { font-size: 26px; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } /* 버튼: 계속 둘러보기(테두리) + 주문하기(청자색) */ #sod_bsk.od_prd_list #sod_bsk_act { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin: 20px 0 0; text-align: right; } #sod_bsk.od_prd_list #sod_bsk_act :is(.btn01, .btn_submit) { display: inline-flex; align-items: center; justify-content: center; min-width: 200px; width: auto; height: 56px; padding: 0 28px; border-radius: 6px; font-size: 17px; font-weight: 700; line-height: 1; } #sod_bsk.od_prd_list #sod_bsk_act .btn01 { border: 1px solid var(--u2-ink); background: #fff; color: var(--u2-ink); font-weight: 600; } #sod_bsk.od_prd_list #sod_bsk_act .btn01:hover { background: var(--u2-mist); } #sod_bsk.od_prd_list .tbl_wrap:has(.empty_table) ~ #sod_bsk_act { justify-content: center; } /* ---------- 주문서 (컴퓨터): 위 강의 표, 아래 왼쪽 주문하시는 분 / 오른쪽 결제 ---------- */ #sod_frm.sod_frm_pc { width: auto; margin: 8px 0 72px; display: grid; grid-template-columns: minmax(0, 1fr) 400px; grid-template-areas: "list list" "left right"; gap: 32px 40px; align-items: start; } #sod_frm.sod_frm_pc::after { content: none; } #sod_frm.sod_frm_pc > .od_prd_list { grid-area: list; } #sod_frm.sod_frm_pc > .sod_left { grid-area: left; float: none; width: auto; margin: 0; } #sod_frm.sod_frm_pc > .sod_right { grid-area: right; float: none; width: auto; height: auto; } #sod_frm.sod_frm_pc p { word-break: keep-all; } /* 주문하시는 분 */ #sod_frm.sod_frm_pc #sod_frm_orderer { margin: 0; padding: 4px 14px 18px; border: 1px solid var(--u2-line); border-radius: 10px; background: #fff; } #sod_frm.sod_frm_pc #sod_frm_orderer h2 { margin: 0 10px 6px; padding: 18px 0 14px; border-bottom: 1px solid var(--u2-line); font-family: var(--u2-serif); font-size: 20px; font-weight: 700; color: var(--u2-ink); } #sod_frm.sod_frm_pc #sod_frm_orderer .tbl_frm01 { margin: 0; } #sod_frm.sod_frm_pc #sod_frm_orderer .tbl_frm01 th { width: 104px; padding: 10px 0; line-height: 1.4; text-align: left; vertical-align: middle; font-size: 15px; font-weight: 600; color: var(--u2-ink-2); } #sod_frm.sod_frm_pc #sod_frm_orderer .tbl_frm01 td { padding: 8px 0; line-height: 1.4; vertical-align: middle; } #sod_frm.sod_frm_pc #sod_frm_orderer .frm_input { width: 100%; max-width: 380px; height: 46px; padding: 0 12px; border: 1px solid #7D8A95; border-radius: 6px; background: #fff; color: var(--u2-ink); font-size: 16px; } #sod_frm.sod_frm_pc #sod_frm_orderer .frm_info { display: block; padding: 0 0 6px; font-size: 14px; color: var(--u2-ink-2); line-height: 1.5; } /* 결제 금액 상자: 위 내역 + 쿠폰 칸 + 총 주문금액을 한 상자로 잇는다 */ #sod_frm.sod_frm_pc #sod_bsk_tot { padding: 14px 20px 8px; border: 1px solid var(--u2-line); border-bottom: 0; border-radius: 10px 10px 0 0; background: #fff; } #sod_frm.sod_frm_pc #sod_bsk_tot ul { margin: 0; padding: 0; list-style: none; } #sod_frm.sod_frm_pc #sod_bsk_tot li { position: static; float: none; display: flex; align-items: baseline; gap: 2px; width: auto; height: auto; padding: 6px 0; border: 0; background: transparent; color: var(--u2-ink); font-size: 15px; line-height: 1.5; text-align: right; } #sod_frm.sod_frm_pc #sod_bsk_tot li::before { content: none; } #sod_frm.sod_frm_pc #sod_bsk_tot li span { display: inline; float: none; margin: 0 auto 0 0; color: var(--u2-ink-2); font-weight: 400; } #sod_frm.sod_frm_pc #sod_bsk_tot li strong { color: var(--u2-ink); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; } /* 총계는 바로 아래 '총 주문금액'과 같은 숫자라 한 번만 보인다 */ #sod_frm.sod_frm_pc #sod_bsk_tot .sod_bsk_cnt { display: none; } #sod_frm.sod_frm_pc #sod_frm_pay { margin: 0; } #sod_frm.sod_frm_pc #sod_frm_pay > h2 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } #sod_frm.sod_frm_pc .pay_tbl { padding: 0 20px; border: 1px solid var(--u2-line); border-top: 0; border-bottom: 0; background: #fff; } #sod_frm.sod_frm_pc .pay_tbl :is(th, td) { padding: 8px 0; border: 0; border-top: 1px solid var(--u2-line); background: transparent; font-size: 15px; color: var(--u2-ink-2); font-weight: 400; vertical-align: middle; } #sod_frm.sod_frm_pc .pay_tbl td { color: var(--u2-ink); } #sod_frm.sod_frm_pc #od_tot_price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px; margin: 0; padding: 16px 20px 18px; border: 1px solid var(--u2-line); border-radius: 0 0 10px 10px; background: var(--u2-celadon-soft); color: var(--u2-ink); font-size: 17px; font-weight: 700; line-height: 1.3; text-align: right; } #sod_frm.sod_frm_pc #od_tot_price span { float: none; margin-right: auto; font-size: 16px; font-weight: 700; color: var(--u2-ink); } #sod_frm.sod_frm_pc #od_tot_price strong { font-size: 28px; font-weight: 800; color: var(--u2-ink); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } /* 결제수단 */ #sod_frm.sod_frm_pc #od_pay_sl { margin: 28px 0 0; } #sod_frm.sod_frm_pc .od_pay_buttons_el { margin: 0; padding: 0; border: 0; background: transparent; } #sod_frm.sod_frm_pc .od_pay_buttons_el::after { content: none; } #sod_frm.sod_frm_pc #od_pay_sl h3 { margin: 0 0 12px; font-family: var(--u2-serif); font-size: 20px; font-weight: 700; color: var(--u2-ink); } #sod_frm.sod_frm_pc #sod_frm_paysel { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; } #sod_frm.sod_frm_pc #sod_frm_paysel > legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } #sod_frm p#sod_frm_pt_alert, #sod_frm.sod_frm_mobile p#sod_frm_pt_alert { margin: 0 0 10px; padding: 0; background: transparent; color: var(--u2-ink-2); font-size: 14px; line-height: 1.55; text-align: left; } #sod_frm p#sod_frm_pt_alert::before { content: none; } #sod_frm p#sod_frm_pt_alert strong { font-weight: 600; color: var(--u2-ink); } /* 결제수단 칸: 동그라미 표시 + 테두리로 고른 것을 알린다. 단추(radio)는 눈에만 숨기고 키보드로는 고를 수 있게 */ #sod_frm #od_pay_sl input[type="radio"], #sod_frm #m_sod_frm_paysel input[type="radio"] { position: absolute; left: 0; width: 1px; height: 1px; margin: 0; padding: 0; opacity: 0; visibility: visible; overflow: hidden; z-index: 0; } #sod_frm #od_pay_sl .lb_icon, #sod_frm #m_sod_frm_paysel li > label { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; float: none; width: auto; height: auto; min-height: 64px; margin: 0; padding: 10px 56px 10px 64px; border: 1px solid #B9C2C9; border-radius: 10px; background-color: #fff; color: var(--u2-ink); font-size: 16px; font-weight: 600; line-height: 1.35; text-align: left; cursor: pointer; z-index: auto; } #sod_frm #m_sod_frm_paysel li > label:not(.bank_icon):not(.card_icon):not(.vbank_icon):not(.iche_icon):not(.hp_icon) { padding-left: 18px; } #sod_frm #od_pay_sl .lb_icon::before, #sod_frm #m_sod_frm_paysel li > label::before { content: ""; position: absolute; top: 50%; right: 18px; width: 22px; height: 22px; margin-top: -11px; border: 1.5px solid #7D8A95; border-radius: 50%; background: #fff; } #sod_frm #od_pay_sl .lb_icon:hover, #sod_frm #m_sod_frm_paysel li > label:hover { border-color: var(--u2-ink-3); } #sod_frm #od_pay_sl input[type="radio"]:checked + .lb_icon, #sod_frm #m_sod_frm_paysel input[type="radio"]:checked + label { border-color: var(--u2-celadon); box-shadow: inset 0 0 0 1px var(--u2-celadon); color: var(--u2-celadon-deep); } #sod_frm #od_pay_sl input[type="radio"]:checked + .lb_icon::before, #sod_frm #m_sod_frm_paysel input[type="radio"]:checked + label::before { border: 7px solid var(--u2-celadon); } #sod_frm #od_pay_sl input[type="radio"]:focus-visible + .lb_icon, #sod_frm #m_sod_frm_paysel input[type="radio"]:focus-visible + label { outline: 3px solid var(--u2-celadon); outline-offset: 2px; } /* 결제수단마다 언제 볼 수 있는지 한 줄 (수강방법 안내 ucp2/steps.php 와 같은 내용). 이름 뒤(::after)에 두어 화면낭독기도 이름부터 읽는다 */ #sod_frm #od_pay_sl .bank_icon::after, #sod_frm #m_sod_frm_paysel .bank_icon::after { content: "입금을 확인한 뒤 수강할 수 있어요"; margin-top: 3px; font-size: 14px; font-weight: 400; color: var(--u2-ink-2); } #sod_frm #od_pay_sl .card_icon::after, #sod_frm #m_sod_frm_paysel .card_icon::after { content: "결제하면 바로 수강할 수 있어요"; margin-top: 3px; font-size: 14px; font-weight: 400; color: var(--u2-ink-2); } #sod_frm #m_sod_frm_paysel .bank_icon { background: url('../../../img/pay_icon1.png') no-repeat 16px 50% #fff; } #sod_frm #m_sod_frm_paysel .card_icon { background: url('../../../img/pay_icon4.png') no-repeat 19px 50% #fff; } /* 입금 계좌 */ #sod_frm #settle_bank { clear: both; margin: 4px 0 0; padding: 16px 18px; border: 0; border-radius: 10px; background: var(--u2-mist); color: var(--u2-ink); font-size: 16px; font-weight: 700; line-height: 1.5; text-align: left; grid-column: 1 / -1; } #sod_frm #settle_bank::before { content: "입금할 계좌"; display: block; margin: 0 0 2px; font-size: 14px; font-weight: 600; color: var(--u2-ink-2); } #sod_frm #settle_bank::after { content: none; } #sod_frm #settle_bank br { display: none; } #sod_frm #settle_bank label[for="od_deposit_name"] { display: block; float: none; width: auto; margin: 14px 0 6px; font-size: 14px; font-weight: 600; color: var(--u2-ink-2); line-height: 1.4; } #sod_frm #settle_bank select, #sod_frm #settle_bank #od_deposit_name { display: block; float: none; width: 100%; height: 46px; margin: 0; padding: 0 12px; border: 1px solid #7D8A95; border-radius: 6px; background-color: #fff; box-shadow: none; color: var(--u2-ink); font-size: 16px; font-weight: 400; text-align: left; } #sod_frm #settle_bank select { margin-top: 6px; } /* 포인트 사용(회원, 포인트 사용 때만 나온다) */ #sod_frm.sod_frm_pc .sod_frm_point { margin: 12px 0 0; border: 1px solid var(--u2-line); border-radius: 10px; background: #fff; overflow: hidden; } #sod_frm .sod_frm_point div { padding: 12px 16px; background: transparent; font-size: 14px; color: var(--u2-ink); } #sod_frm .sod_frm_point div label { font-weight: 600; } #sod_frm .sod_frm_point div strong { color: var(--u2-ink-2); font-weight: 400; } #sod_frm .sod_frm_point #od_temp_point { width: 120px; height: 40px; padding: 0 10px; border: 1px solid #7D8A95; border-radius: 6px; font-size: 16px; } #sod_frm.sod_frm_pc #sod_frm_pt { border-top: 1px solid var(--u2-line); } /* 주문하기 단추 */ #sod_frm.sod_frm_pc #display_pay_button { margin: 20px 0 0; padding: 0; border: 0; background: transparent; } #sod_frm.sod_frm_pc #display_pay_button .btn_submit { display: block; width: 100%; height: 58px; padding: 0; font-size: 18px; font-weight: 700; letter-spacing: 0; } #sod_frm.sod_frm_pc #display_pay_button .btn01 { display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; margin: 8px 0 0; padding: 0; border: 1px solid var(--u2-line); border-radius: 6px; background: #fff; color: var(--u2-ink-2); font-size: 15px; font-weight: 600; line-height: 1; } #sod_frm.sod_frm_pc #display_pay_button .btn01:hover { border-color: var(--u2-ink-3); color: var(--u2-ink); } #sod_frm #display_pay_process, #sod_frm #show_progress { padding: 18px 0; text-align: center; font-size: 15px; color: var(--u2-ink-2); } #sod_frm #sod_frm_escrow { margin: 20px 0 0; font-size: 14px; color: var(--u2-ink-2); } /* ---------- 강의 목록 (휴대폰: 장바구니, 주문서, 주문 상세) ---------- */ #sod_bsk .sod_list, #sod_frm.sod_frm_mobile .sod_list, #sod_fin .sod_list { margin: 4px 0 12px; padding: 0; list-style: none; } #sod_bsk .sod_list > .sod_li, #sod_frm.sod_frm_mobile .sod_list > .sod_li, #sod_fin .sod_list > .sod_li { position: relative; margin: 0 0 12px; padding: 16px; border: 1px solid var(--u2-line); border-radius: 10px; background: #fff; } #sod_bsk .sod_list .li_op_wr, #sod_frm.sod_frm_mobile .sod_list .li_op_wr, #sod_fin .sod_list .li_op_wr { position: static; margin: 0; padding: 0; min-height: 0; } #sod_bsk .sod_list .total_img, #sod_frm.sod_frm_mobile .sod_list .total_img, #sod_fin .sod_list .total_img { position: absolute; top: 16px; } #sod_bsk .sod_list .total_img img, #sod_frm.sod_frm_mobile .sod_list .total_img img, #sod_fin .sod_list .total_img img { display: block; width: 64px; height: 64px; max-width: none; border-radius: 6px; object-fit: cover; background: var(--u2-mist); } #sod_bsk .sod_list .li_name, #sod_frm.sod_frm_mobile .sod_list .li_name, #sod_fin .sod_list .li_name { display: flex; align-items: center; min-height: 64px; padding: 0; border: 0; font-size: 16px; font-weight: 600; line-height: 1.45; } #sod_bsk .sod_list .li_name a, #sod_fin .sod_list .li_name a { color: var(--u2-ink); text-decoration: none; } #sod_bsk .sod_list .li_name strong, #sod_frm.sod_frm_mobile .sod_list .li_name strong, #sod_fin .sod_list .li_name strong { font-weight: 600; color: var(--u2-ink); } #sod_bsk .sod_list .sod_opt:empty, #sod_frm.sod_frm_mobile .sod_list .sod_opt:empty, #sod_bsk .sod_list .li_mod:empty, #sod_frm.sod_frm_mobile .sod_list .li_mod:empty { display: none; } /* 장바구니: 고르기칸 | 사진 | 이름 */ #sod_bsk .sod_list .total_img { left: 60px; } #sod_bsk .sod_list .li_op_wr { padding-left: 122px; min-height: 64px; } #sod_bsk .sod_list .li_chk { position: absolute; top: 26px; left: 6px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; } #sod_bsk .sod_list .li_chk label { position: absolute; inset: 0; margin: 0; padding: 0; cursor: pointer; } #sod_bsk :is(#sod_chk, .li_chk) input[type="checkbox"] { position: static; width: 22px; height: 22px; margin: 0; opacity: 1; z-index: auto; accent-color: var(--u2-celadon); cursor: pointer; } #sod_bsk :is(#sod_chk, .li_chk) label span { display: none; } #sod_bsk #sod_chk { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0 0 6px; padding: 0 0 0 17px; } #sod_bsk #sod_chk label { padding: 10px 0; font-size: 15px; font-weight: 600; color: var(--u2-ink); cursor: pointer; } /* 주문서, 주문 상세: 사진 | 이름 */ #sod_frm.sod_frm_mobile .sod_list .total_img, #sod_fin .sod_list .total_img { left: 16px; } #sod_frm.sod_frm_mobile .sod_list .li_name { padding-left: 78px; } #sod_fin .sod_list .li_op_wr { padding-left: 78px; min-height: 64px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; } #sod_fin .sod_list .li_name { min-height: 0; } #sod_fin .sod_list .prqty_stat { position: static; padding: 2px 10px; border-radius: 999px; background: var(--u2-mist); color: var(--u2-ink-2); font-size: 14px; font-weight: 600; } /* 판매가, 수량 등 */ #sod_bsk .sod_list .li_prqty, #sod_frm.sod_frm_mobile .sod_list .li_prqty, #sod_fin .sod_list .li_prqty { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; margin: 14px 0 0; padding: 12px 0 0; border: 0; border-top: 1px solid var(--u2-line); } #sod_bsk .sod_list .li_prqty::after, #sod_frm.sod_frm_mobile .sod_list .li_prqty::after, #sod_fin .sod_list .li_prqty::after { content: none; } #sod_bsk .sod_list .li_prqty_sp, #sod_frm.sod_frm_mobile .sod_list .li_prqty_sp, #sod_fin .sod_list .li_prqty_sp { display: flex; justify-content: space-between; gap: 8px; float: none; width: auto; padding: 0; border: 0; color: var(--u2-ink); font-size: 14px; line-height: 1.6; text-align: right; font-variant-numeric: tabular-nums; } #sod_bsk .sod_list .li_prqty_sp > span, #sod_frm.sod_frm_mobile .sod_list .li_prqty_sp > span, #sod_fin .sod_list .li_prqty_sp > span { float: none; color: var(--u2-ink-2); } #sod_bsk .sod_list .li_prqty_sp strong, #sod_frm.sod_frm_mobile .sod_list .li_prqty_sp strong { font-weight: 400; } #sod_fin .sod_list .li_total { margin: 0; } #sod_bsk .sod_list .total_price, #sod_frm.sod_frm_mobile .sod_list .total_price, #sod_fin .sod_list .total_price { display: flex; align-items: baseline; gap: 2px; margin: 12px 0 0; padding: 10px 12px; border: 0; border-radius: 6px; background: var(--u2-mist); color: var(--u2-ink); font-size: 16px; font-weight: 700; line-height: 1.4; text-align: right; font-variant-numeric: tabular-nums; } #sod_bsk .sod_list .total_price span, #sod_frm.sod_frm_mobile .sod_list .total_price span, #sod_fin .sod_list .total_price span { float: none; margin-right: auto; color: var(--u2-ink-2); font-size: 14px; font-weight: 400; } #sod_bsk .sod_list .total_price strong, #sod_frm.sod_frm_mobile .sod_list .total_price strong { color: var(--u2-ink); font-size: 18px; font-weight: 700; } /* 합계 상자 */ #sod_bsk #m_sod_bsk_tot, #sod_frm #m_sod_bsk_tot, #sod_fin #m_sod_bsk_tot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 0; margin: 0; padding: 16px 18px; border: 0; border-radius: 10px; background: var(--u2-mist); color: var(--u2-ink); font-size: 15px; line-height: 1.5; } #sod_bsk #m_sod_bsk_tot::after, #sod_frm #m_sod_bsk_tot::after, #sod_fin #m_sod_bsk_tot::after { content: none; } #sod_bsk #m_sod_bsk_tot :is(dt, dd), #sod_frm #m_sod_bsk_tot :is(dt, dd), #sod_fin #m_sod_bsk_tot :is(dt, dd) { float: none; clear: none; width: auto; margin: 0; padding: 0; background: transparent; color: inherit; line-height: 1.5; } #sod_bsk #m_sod_bsk_tot dt, #sod_frm #m_sod_bsk_tot dt, #sod_fin #m_sod_bsk_tot dt { color: var(--u2-ink-2); font-weight: 400; } #sod_bsk #m_sod_bsk_tot dd, #sod_frm #m_sod_bsk_tot dd, #sod_fin #m_sod_bsk_tot dd { padding-left: 12px; text-align: right; font-variant-numeric: tabular-nums; } #sod_bsk #m_sod_bsk_tot dd strong, #sod_frm #m_sod_bsk_tot dd strong, #sod_fin #m_sod_bsk_tot dd strong { color: var(--u2-ink); font-size: 15px; font-weight: 600; } #sod_bsk #m_sod_bsk_tot .sod_bsk_cnt, #sod_frm #m_sod_bsk_tot .sod_bsk_cnt, #sod_fin #m_sod_bsk_tot .sod_bsk_cnt { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--u2-line); background: transparent; color: var(--u2-ink); font-weight: 700; line-height: 1.3; } #sod_bsk #m_sod_bsk_tot dt.sod_bsk_cnt, #sod_frm #m_sod_bsk_tot dt.sod_bsk_cnt, #sod_fin #m_sod_bsk_tot dt.sod_bsk_cnt { display: flex; align-items: center; align-self: stretch; font-size: 16px; } #sod_bsk #m_sod_bsk_tot dd.sod_bsk_cnt strong, #sod_frm #m_sod_bsk_tot dd.sod_bsk_cnt strong, #sod_fin #m_sod_bsk_tot dd.sod_bsk_cnt strong { font-size: 22px; font-weight: 800; } #sod_frm.sod_frm_mobile .sod_list .cp_btn { min-height: 44px; } /* 휴대폰 쿠폰 단추 44px */ /* ---------- 장바구니 (휴대폰) ---------- */ #sod_bsk .sod_list .empty_list { margin: 8px 0 16px; border-radius: 10px; background: var(--u2-mist); font-size: 16px; } #sod_bsk .btn_del_wr { display: flex; gap: 8px; margin: 0 0 16px; } #sod_bsk .btn_del_wr .btn01 { flex: 1 1 0; min-height: 44px; padding: 0 12px; border: 1px solid var(--u2-line); border-radius: 6px; background: #fff; color: var(--u2-ink-2); font-size: 15px; font-weight: 600; } #sod_bsk:has(.empty_list) .btn_del_wr { display: none; } #sod_bsk .go_shopping { margin: 0 0 28px; } #sod_bsk .go_shopping .btn01 { display: flex; align-items: center; justify-content: center; width: 100%; height: 52px; padding: 0; border: 1px solid var(--u2-ink); border-radius: 6px; background: #fff; color: var(--u2-ink); font-size: 16px; font-weight: 600; line-height: 1; } #sod_bsk .sod_ta_wr { margin: 0; padding: 0; background: transparent; } #sod_bsk:not(.od_prd_list) #sod_bsk_act { margin: 16px 0 28px; text-align: center; } #sod_bsk:not(.od_prd_list) #sod_bsk_act .total { display: none; } /* 바로 위 합계 상자와 같은 숫자 */ #sod_bsk:not(.od_prd_list) #sod_bsk_act .btn_submit { display: block; width: 100%; height: 56px; margin: 0; font-size: 17px; font-weight: 700; } /* ---------- 주문서 (휴대폰) ---------- */ #sod_frm.sod_frm_mobile { padding: 4px 0 8px; } #sod_frm.sod_frm_mobile .sod_ta_wr { margin: 0; padding: 0; background: transparent; } #sod_frm.sod_frm_mobile :is(#sod_frm_orderer, #sod_frm_pay) { margin: 28px 0 0; padding: 0; border: 0; background: transparent; } #sod_frm.sod_frm_mobile :is(#sod_frm_orderer, #sod_frm_pay) > h2 { position: static; margin: 0; padding: 0 0 10px; border-bottom: 1px solid var(--u2-line); font-family: var(--u2-serif); font-size: 20px; font-weight: 700; color: var(--u2-ink); } #sod_frm.sod_frm_mobile .odf_list ul { margin: 0; padding: 0; list-style: none; } #sod_frm.sod_frm_mobile .odf_list li { padding: 14px 0 0; font-size: 14px; color: var(--u2-ink-2); line-height: 1.5; } #sod_frm.sod_frm_mobile .odf_list label:not(.sound_only) { display: block; margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--u2-ink); } #sod_frm.sod_frm_mobile .odf_list .frm_input { width: 100%; height: 48px; margin: 0 0 6px; padding: 0 12px; border: 1px solid #7D8A95; border-radius: 6px; background: #fff; color: var(--u2-ink); font-size: 16px; } #sod_frm.sod_frm_mobile .odf_tbl table { width: 100%; border-collapse: separate; border-spacing: 0; border: 0; background: transparent; } #sod_frm.sod_frm_mobile .odf_tbl :is(th, td) { width: auto; padding: 12px 0; border: 0; border-bottom: 1px solid var(--u2-line); background: transparent; font-size: 15px; vertical-align: middle; line-height: 1.4; } #sod_frm.sod_frm_mobile .odf_tbl th { text-align: left; font-weight: 400; color: var(--u2-ink-2); } #sod_frm.sod_frm_mobile .odf_tbl td { text-align: right; color: var(--u2-ink); } #sod_frm.sod_frm_mobile .odf_tbl tr:has(#od_tot_price) > * { padding: 16px; border: 0; background: var(--u2-celadon-soft); color: var(--u2-ink); font-size: 16px; font-weight: 700; } #sod_frm.sod_frm_mobile .odf_tbl tr:has(#od_tot_price) > th { border-radius: 10px 0 0 10px; box-shadow: 2px 0 0 var(--u2-celadon-soft); } /* 두 칸 사이 가는 틈 메우기 */ #sod_frm.sod_frm_mobile .odf_tbl tr:has(#od_tot_price) > td { border-radius: 0 10px 10px 0; } #sod_frm.sod_frm_mobile #od_tot_price { display: inline; margin: 0; padding: 0; border: 0; background: transparent; line-height: 1.2; text-align: right; font-size: 24px; font-weight: 800; color: var(--u2-ink); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } #sod_frm.sod_frm_mobile .odf_tbl { margin: 14px 0 0; } #sod_frm.sod_frm_mobile p#sod_frm_pt_alert { margin: 14px 0 0; } #sod_frm.sod_frm_mobile #m_sod_frm_paysel { margin: 16px 0 0; } #sod_frm.sod_frm_mobile #m_sod_frm_paysel ul { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; background: transparent; list-style: none; } #sod_frm.sod_frm_mobile #m_sod_frm_paysel ul::after { content: none; } #sod_frm.sod_frm_mobile #m_sod_frm_paysel li { position: relative; float: none; width: auto; height: auto; margin: 0; padding: 0; } #sod_frm.sod_frm_mobile #m_sod_frm_paysel li > label { margin-left: 0; } #sod_frm.sod_frm_mobile #m_sod_frm_paysel #settle_bank { margin-top: 8px; } #sod_frm.sod_frm_mobile .sod_frm_point { margin: 12px 0 0; padding: 0; border: 1px solid var(--u2-line); border-radius: 10px; overflow: hidden; } #sod_frm.sod_frm_mobile .sod_frm_point div { border: 0; } #sod_frm.sod_frm_mobile #sod_frm_pt_info { border-top: 1px solid var(--u2-line); } #sod_frm.sod_frm_mobile #display_pay_button { margin: 20px 0 8px; padding: 0; text-align: center; } #sod_frm.sod_frm_mobile #display_pay_button .btn_submit { display: block; width: 100%; height: 56px; margin: 0; padding: 0; font-size: 17px; font-weight: 700; } #sod_frm.sod_frm_mobile #display_pay_button .btn_cancel { display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; margin: 8px 0 0; padding: 0; border: 1px solid var(--u2-line); border-radius: 6px; background: #fff; color: var(--u2-ink-2); font-size: 15px; font-weight: 600; line-height: 1; } /* ---------- 주문 내역 목록 ---------- */ #sod_v { margin: 8px 0 72px; color: var(--u2-ink-2); } #sod_v #sod_v_info { margin: 0 0 14px; padding: 12px 14px; border: 0; border-radius: 6px; background: var(--u2-mist); color: var(--u2-ink-2); font-size: 14px; text-align: left; } #sod_v .tbl_head03 { margin-top: 10px; } #sod_v .tbl_head03 td { text-align: center; } #sod_v .tbl_head03 td a { color: var(--u2-celadon-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; font-variant-numeric: tabular-nums; } #sod_v .tbl_head03 td a:hover { color: var(--u2-ink); } #sod_v .tbl_head03 .empty_table, #sod_v .empty_list { padding: 56px 16px !important; background: var(--u2-mist); color: var(--u2-ink-2) !important; font-size: 16px; border-radius: 10px; } /* 상태 꼬리표는 맨 위 0-3 공통 규칙으로 옮김 */ /* 휴대폰 주문 내역 카드 */ #sod_v #sod_inquiry ul { margin: 6px 0 0; padding: 0; list-style: none; } #sod_v #sod_inquiry li:not(.empty_list) { position: relative; margin: 0 0 12px; padding: 14px 16px 16px; border: 1px solid var(--u2-line); border-radius: 10px; background: #fff; color: var(--u2-ink); } #sod_v #sod_inquiry .inquiry_idtime { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 12px; } #sod_v #sod_inquiry .idtime_link { display: inline-block; padding: 11px 0; color: var(--u2-celadon-deep); font-size: 15px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; font-variant-numeric: tabular-nums; } #sod_v #sod_inquiry .idtime_time { position: static; color: var(--u2-ink-2); font-size: 14px; } #sod_v #sod_inquiry .inquiry_name { margin: 2px 0 12px; color: var(--u2-ink); font-size: 15px; line-height: 1.5; } #sod_v #sod_inquiry .inq_wr { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--u2-line); } #sod_v #sod_inquiry .inquiry_price { color: var(--u2-ink); font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; } #sod_v #sod_inquiry .inv_status { margin: 0; } #sod_v #sod_inquiry .inv_inv { margin: 10px 0 0; padding: 8px 10px; border: 0; border-radius: 6px; background: var(--u2-mist); color: var(--u2-ink-2); font-size: 14px; } /* 쪽 번호는 맨 위 0-2 공통 규칙으로 옮김 */ /* ---------- 주문 상세 ---------- */ #sod_fin { margin: 8px 0 72px; } #sod_fin::after { content: ""; display: block; clear: both; } #sod_fin #sod_fin_no { margin: 0 0 20px; padding: 14px 18px; border: 0; border-radius: 10px; background: var(--u2-mist); color: var(--u2-ink-2); font-size: 15px; text-align: left; } #sod_fin #sod_fin_no strong { margin-left: 6px; color: var(--u2-ink); font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; } #sod_fin #sod_sts_wrap { margin: 12px 0 0; text-align: right; } #sod_fin #sod_sts_wrap .btn_wr { border: 0; text-align: right; } #sod_fin #sod_sts_wrap button { min-height: 44px; margin: 0; padding: 0 14px; border: 1px solid var(--u2-line); border-radius: 6px; background: #fff; color: var(--u2-ink-2); font-size: 14px; font-weight: 600; } #sod_fin #sod_fin_legend { margin: 10px 0 0; padding: 14px 18px; border: 0; border-radius: 10px; background: var(--u2-mist); color: var(--u2-ink-2); font-size: 14px; line-height: 1.6; text-align: left; } #sod_fin #sod_fin_legend dt { color: var(--u2-ink); font-weight: 600; } /* 컴퓨터: 왼쪽 주문자 정보 / 오른쪽 결제 정보 */ #sod_fin > .sod_left { float: left; width: calc(100% - 440px); margin: 28px 40px 0 0; } #sod_fin > .sod_right { float: left; width: 400px; height: auto; margin: 28px 0 0; } #sod_fin .sod_left section { margin: 0 0 20px; border: 1px solid var(--u2-line); border-radius: 10px; background: #fff; overflow: hidden; } #sod_fin .sod_left h3, #sod_fin #sod_fin_pay h3 { margin: 0; padding: 16px 20px 10px; border: 0; background: transparent; font-family: var(--u2-serif); font-size: 18px; font-weight: 700; color: var(--u2-ink); } #sod_fin .sod_left .tbl_head01 { margin: 0; padding: 0 20px 10px; border: 0; background: transparent; } #sod_fin .sod_left .tbl_head01 :is(th, td) { padding: 10px 0; border: 0; border-top: 1px solid var(--u2-line); background: transparent; font-size: 15px; line-height: 1.5; text-align: left; vertical-align: top; } #sod_fin .sod_left .tbl_head01 th { width: 110px; color: var(--u2-ink-2); font-weight: 400; } #sod_fin .sod_left .tbl_head01 td { color: var(--u2-ink); } #sod_fin .sod_left .empty_table { padding: 16px 0 !important; color: var(--u2-ink-2) !important; } #sod_fin #sod_fin_dvr .dvr_link { color: var(--u2-celadon-deep); } /* 온라인 강의 주문은 받는 분, 배송 정보가 비어 있다. 비어 있을 때만 숨긴다(값이 있으면 그대로 보인다) */ #sod_fin #sod_fin_receiver:has(tbody > tr:first-child > td:empty) { display: none; } #sod_fin #sod_fin_dvr:has(.empty_table) { display: none; } /* 옵션 줄: 파란 '옵션' 꼬리표 없이 작은 글씨로 */ #sod_fin_list .sod_name .sod_opt { margin: 0; color: var(--u2-ink-2); font-size: 14px; line-height: 1.5; } #sod_fin_list .sod_name .sod_opt::before { content: none; } #sod_fin .sod_list .sod_opt { margin: 10px 0 0; padding: 0; color: var(--u2-ink-2); font-size: 14px; line-height: 1.5; } #sod_fin .sod_list .sod_opt .opt_name::before { content: none; } /* 금액 상자 */ #sod_fin #sod_bsk_tot2 { margin: 0 0 20px; padding: 0; border: 1px solid var(--u2-line); border-radius: 10px; background: #fff; overflow: hidden; list-style: none; } #sod_fin #sod_bsk_tot2 li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 9px 20px; background: transparent; color: var(--u2-ink); font-size: 15px; line-height: 1.5; text-align: right; } #sod_fin #sod_bsk_tot2 li:first-child { padding-top: 16px; } #sod_fin #sod_bsk_tot2 li span { float: none; margin-right: auto; color: var(--u2-ink-2); font-size: 15px; } #sod_fin #sod_bsk_tot2 li strong { color: var(--u2-ink); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; } #sod_fin #sod_bsk_tot2 li.sod_bsk_cnt { margin-top: 4px; border-top: 1px solid var(--u2-line); padding-top: 12px; } #sod_fin #sod_bsk_tot2 li.sod_bsk_cnt span { color: var(--u2-ink); font-weight: 600; } #sod_fin #sod_bsk_tot2 li.sod_fin_tot { border-top: 1px solid #C9DAD3; background: var(--u2-celadon-soft); padding-top: 12px; padding-bottom: 12px; } #sod_fin #sod_bsk_tot2 li.sod_fin_tot span { color: var(--u2-ink); font-weight: 700; } #sod_fin #sod_bsk_tot2 li.sod_fin_tot strong { font-size: 20px; font-weight: 800; } /* 미결제액(총 구매액 바로 다음 줄)은 입금확인중과 같은 따뜻한 색으로 */ #sod_fin #sod_bsk_tot2 li.sod_fin_tot + li.sod_fin_tot:not(#alrdy) { border-top-color: #EBDDC2; background: #FBF1DE; } #sod_fin #sod_bsk_tot2 li.sod_fin_tot + li.sod_fin_tot:not(#alrdy) :is(span, strong) { color: #7A4E0E; } #sod_fin #sod_bsk_tot2 li#alrdy div { flex-basis: 100%; padding: 4px 0 0; text-align: right; } #sod_fin #sod_bsk_tot2 li#alrdy div p { margin: 2px 0 0; padding: 0; background: transparent; color: var(--u2-ink-2); font-size: 14px; } #sod_fin #sod_bsk_tot2 li#alrdy div p .title { float: none; margin-right: 8px; font-size: 14px; } /* 결제 정보(입금 계좌 포함) */ #sod_fin #sod_fin_pay { margin: 0 0 20px; border: 1px solid var(--u2-line); border-radius: 10px; background: #fff; overflow: hidden; } #sod_fin #sod_fin_pay ul { margin: 0; padding: 0 20px 10px; list-style: none; } #sod_fin #sod_fin_pay li { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--u2-line); line-height: 1.5; } #sod_fin #sod_fin_pay li::after { content: none; } #sod_fin #sod_fin_pay li > strong { float: none; width: auto; margin: 0; color: var(--u2-ink-2); font-size: 14px; font-weight: 400; letter-spacing: 0; } #sod_fin #sod_fin_pay li > span { float: none; width: auto; color: var(--u2-ink); font-size: 15px; font-weight: 600; } #sod_fin #sod_fin_pay li a { color: var(--u2-celadon-deep); text-decoration: underline; text-underline-offset: 3px; } #sod_fin #sod_fin_pay .btn_frmline { display: inline-block; margin: 0; padding: 6px 12px; border: 1px solid var(--u2-celadon); border-radius: 6px; background: #fff; color: var(--u2-celadon-deep); font-size: 14px; text-decoration: none; } /* 주문 취소 */ #sod_fin #sod_fin_cancel { margin: 0 0 20px; text-align: center; } #sod_fin #sod_fin_cancel > button { display: block; width: 100%; height: 48px; margin: 0; padding: 0; border: 1px solid var(--u2-line); border-radius: 6px; background: #fff; color: var(--u2-ink-2); font-size: 15px; font-weight: 600; } #sod_fin #sod_fin_cancel > button:hover { border-color: var(--u2-ink-3); color: var(--u2-ink); } #sod_fin #sod_fin_cancel > p { margin: 0; padding: 12px 16px; border: 0; border-radius: 6px; background: #FBEDEB; color: #A0362B; font-size: 15px; font-weight: 600; text-align: left; } #sod_fin #sod_fin_cancelfrm { border-radius: 10px; } #sod_fin #sod_fin_cancelfrm h2 { font-size: 17px; } #sod_fin #sod_fin_cancelfrm .frm_input { height: 46px; padding: 0 12px; border: 1px solid #7D8A95; border-radius: 6px; font-size: 16px; } #sod_fin #sod_fin_cancelfrm .btn_frmline { height: 46px; border-radius: 6px; background: var(--u2-ink); color: #fff; font-size: 15px; font-weight: 600; } /* 휴대폰 주문 상세 */ #sod_fin .sod_fin_list .sod_ta_wr { margin: 12px 0 0; padding: 0; background: transparent; } #sod_fin #sod_sts_explan_open { min-height: 44px; } #sod_fin #sod_fin_view { margin: 24px 0 0; } #sod_fin #sod_fin_view section { margin: 0 0 16px; padding: 0 16px 6px; border: 1px solid var(--u2-line); border-radius: 10px; background: #fff; } #sod_fin #sod_fin_view h3 { margin: 0; padding: 14px 0 8px; font-family: var(--u2-serif); font-size: 18px; font-weight: 700; color: var(--u2-ink); } #sod_fin #sod_fin_view .odf_tbl table { width: 100%; border-collapse: collapse; border: 0; background: transparent; } #sod_fin #sod_fin_view .odf_tbl :is(th, td) { padding: 10px 0; border: 0; border-top: 1px solid var(--u2-line); background: transparent; font-size: 15px; line-height: 1.5; vertical-align: top; } #sod_fin #sod_fin_view .odf_tbl th { width: 96px; color: var(--u2-ink-2); font-weight: 400; text-align: left; } #sod_fin #sod_fin_view .odf_tbl td { color: var(--u2-ink); font-weight: 600; text-align: left; } #sod_fin #sod_fin_view .btn_frmline { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; } /* 휴대폰 영수증 등 단추 44px */ #sod_fin #sod_fin_tot { margin: 0 0 16px; } #sod_fin #sod_fin_tot h2 { margin: 0 0 8px; font-family: var(--u2-serif); font-size: 18px; font-weight: 700; color: var(--u2-ink); } #sod_fin #sod_fin_tot ul { margin: 0; padding: 0; border-radius: 10px; overflow: hidden; list-style: none; } #sod_fin #sod_fin_tot li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 8px; padding: 12px 16px; border: 0; border-top: 1px solid #C9DAD3; background: var(--u2-celadon-soft); color: var(--u2-ink); font-size: 15px; font-weight: 600; } #sod_fin #sod_fin_tot li:first-child { border-top: 0; } #sod_fin #sod_fin_tot li::after { content: none; } #sod_fin #sod_fin_tot strong { float: none; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; } #sod_fin #sod_fin_tot li:nth-child(2):not(#alrdy) { border-top-color: #EBDDC2; background: #FBF1DE; color: #7A4E0E; } /* 미결제액 */ #sod_fin #sod_fin_tot li .right { flex-basis: 100%; text-align: right; color: var(--u2-ink-2); font-size: 14px; font-weight: 400; } #sod_fin #sod_fin_cancelfrm .frm_input, #sod_fin #sod_fin_cancelfrm .btn_frmline { width: 100%; } /* ---------- 좁은 화면 ---------- */ @media (max-width: 1000px) { #sod_frm.sod_frm_pc { grid-template-columns: minmax(0, 1fr); grid-template-areas: "list" "left" "right"; } #sod_fin > .sod_left, #sod_fin > .sod_right { float: none; width: auto; margin-right: 0; } } @media (max-width: 760px) { #sod_bsk.od_prd_list .tbl_wrap, #sod_frm.sod_frm_pc .od_prd_list, #sod_v .tbl_wrap, #sod_fin_list .tbl_wrap { overflow-x: auto; } #sod_bsk.od_prd_list .tbl_wrap table, #sod_frm.sod_frm_pc .od_prd_list table, #sod_fin_list .tbl_wrap table { min-width: 680px; } #sod_bsk.od_prd_list #sod_bsk_act :is(.btn01, .btn_submit) { flex: 1 1 200px; } } @media (max-width: 360px) { #sod_bsk .sod_list .li_prqty, #sod_frm.sod_frm_mobile .sod_list .li_prqty, #sod_fin .sod_list .li_prqty { grid-template-columns: 1fr; } } /* ====================================================================== 4. 게시판·로그인·회원가입·자주 묻는 질문·검색 ====================================================================== */ /* ===== 게시판·로그인·회원가입·자주 묻는 질문·검색 (2026-10-21) ===== 옛 화면 위에 덮어쓴다. 범위는 화면마다 고유한 틀(#bo_list, #bo_v, #bo_w, #login_new, #fregister, #fregisterform, #faq_sch, #faq_wrap, #ssch, #sch_result 등)로만 좁힌다. 글자 크기는 px 로 정한다(옛 화면 기준 글자 12px). 입력칸 테두리는 #7D8A95(흰 바탕 대비 3.5:1, 주문서와 같은 값). */ /* --- 0. 1200px 틀 맞춤은 맨 위 0-1 공통 규칙으로 옮김 --- */ /* --- 0-1. 게시판 머리: '학생센터' 띠와 탭 아래 게시판 이름은 띠 없이 제목으로 --- */ .container.mt-80:has(> #common > #bo_list, > #common > #bo_v, > #common > #bo_w) { margin-top: 28px; } #common:has(> #bo_list, > #bo_v, > #bo_w) > .common_title { background: none; box-shadow: none; clip-path: none; padding: 0; margin: 0 0 22px; } #common:has(> #bo_list, > #bo_v, > #bo_w) > .common_title h1 { font-size: 28px !important; line-height: 1.35; margin: 0 !important; } #common:has(> #bo_list, > #bo_v, > #bo_w) > .common_title p.content { margin: 6px 0 0; font-size: 15px; line-height: 1.6; font-weight: 400; letter-spacing: 0; color: var(--u2-ink-2); } /* '학생센터' 띠의 설명(샘플 강의 안내)은 게시판과 맞지 않아 게시판 화면에서만 숨김 */ #wrapper:has(#bo_list, #bo_v, #bo_w) #subanner .ft-16 { display: none; } /* 휴대폰: 위 '학생센터'는 작은 머리말, 게시판 이름이 큰 제목 */ #container:has(#bo_list, #bo_v, #bo_w) > #container_title { font-family: var(--u2-sans); font-size: 15px; font-weight: 600; color: var(--u2-ink-2); line-height: 32px; padding: 16px 6px 0 50px; } #container > .container.mt-80:has(> #common > #bo_list, > #common > #bo_v, > #common > #bo_w) { margin-top: 10px; } #container #common:has(> #bo_list, > #bo_v, > #bo_w) > .common_title { margin-bottom: 14px; } #container #common:has(> #bo_list, > #bo_w) > .common_title h1 { font-size: 26px !important; } /* 글 보기에서는 게시판 이름을 작은 머리말로 낮추고, 글 제목이 가장 크게 */ #common:has(> #bo_v) > .common_title { margin-bottom: 12px; } #common:has(> #bo_v) > .common_title h1 { font-family: var(--u2-sans) !important; font-size: 17px !important; font-weight: 600 !important; color: var(--u2-ink-2) !important; } #common:has(> #bo_v) > .common_title p.content { display: none; } /* --- 0-2. 네모 체크칸 공통: 고른 칸은 청자색 바탕에 흰 체크 (옛 파란 그림 대신) --- */ :is(#bo_w, #bo_vc_w, .register #fregister .fregister_agree, #fregisterform li.chk_box, #ssch_frm .ssch_option) input[type="checkbox"]:checked + label span { background-image: none; background-color: var(--u2-celadon); border-color: var(--u2-celadon-deep); } :is(#bo_w, #bo_vc_w, .register #fregister .fregister_agree, #fregisterform li.chk_box, #ssch_frm .ssch_option) input[type="checkbox"]:checked + label span::after { content: ""; position: absolute; top: 50%; left: 50%; width: 6px; height: 11px; margin: -7px 0 0 -3px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } /* --- 1. 게시판 공통: 글꼴·초점·단추 --- */ #bo_list, #bo_v, #bo_w { font-family: var(--u2-sans); color: var(--u2-ink); } #bo_list :is(input, select, textarea, button), #bo_v :is(input, select, textarea, button), #bo_w :is(input, select, textarea, button), #bo_list ~ #bo_sch :is(input, select, button), #bo_v h2, #bo_w h2 { font-family: var(--u2-sans); } #bo_list :is(a, button, select):focus-visible, #bo_v :is(a, button):focus-visible, #bo_w :is(a, button):focus-visible, #bo_list ~ .pg_wrap a:focus-visible { outline: 3px solid var(--u2-celadon); outline-offset: 2px; } #bo_v textarea:focus, #bo_w :is(.frm_input, select, textarea):focus { border-color: var(--u2-celadon-deep) !important; box-shadow: none; outline: 2px solid var(--u2-celadon); outline-offset: 0; } /* 아이콘만 있던 단추(검색·글쓰기·목록·답변)에 글자를 붙인다 */ #bo_list .btn_bo_user, #bo_v .btn_bo_user { float: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; } #bo_list .btn_bo_user > li, #bo_v .btn_bo_user > li { float: none; width: auto; margin: 0; background: none; } #bo_list .btn_bo_user .btn, #bo_v .btn_bo_user .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; min-width: 44px; padding: 0 16px; font: 600 15px/1 var(--u2-sans); color: var(--u2-ink); background: #fff; border: 1px solid var(--u2-line); border-radius: var(--u2-radius); text-decoration: none; } #bo_list .btn_bo_user .btn:hover, #bo_v .btn_bo_user .btn:hover { background: var(--u2-mist); color: var(--u2-ink); border-color: var(--u2-ink-3); } #bo_list .btn_bo_user .btn i, #bo_v .btn_bo_user .btn i { font-size: 15px; color: var(--u2-ink-2); } #bo_list .btn_bo_user .btn_more_opt, #bo_v .btn_bo_user .btn_more_opt { padding: 0; width: 44px; } #bo_list .btn_bo_sch::after { content: "검색"; } #bo_list .btn_bo_user a[title="글쓰기"]::after, #bo_v .btn_bo_user a[title="글쓰기"]::after { content: "글쓰기"; } #bo_v .btn_bo_user a[title="목록"]::after { content: "목록"; } #bo_v .btn_bo_user a[title="답변"]::after { content: "답변"; } #bo_list .btn_bo_user a[title="글쓰기"], #bo_v .btn_bo_user a[title="글쓰기"] { background: var(--u2-celadon); border-color: var(--u2-celadon-deep); color: #fff; } #bo_list .btn_bo_user a[title="글쓰기"] i, #bo_v .btn_bo_user a[title="글쓰기"] i { color: #fff; } #bo_list .btn_bo_user a[title="글쓰기"]:hover, #bo_v .btn_bo_user a[title="글쓰기"]:hover { background: var(--u2-celadon-deep); color: #fff; } #bo_list .btn_admin .fa-spin { animation: none; } #bo_list .more_opt, #bo_v .more_opt { top: 50px; border: 1px solid var(--u2-line); border-radius: var(--u2-radius); } #bo_list .more_opt::before, #bo_list .more_opt::after, #bo_v .more_opt::before, #bo_v .more_opt::after { display: none; } #bo_list .more_opt li, #bo_v .more_opt li { width: 120px; padding: 0; border-bottom: 1px solid var(--u2-line); } #bo_list .more_opt li :is(a, button), #bo_v .more_opt li :is(a, button) { display: block; padding: 12px 14px; font-size: 14px; color: var(--u2-ink); text-align: left; } /* --- 2. 게시판 목록 (컴퓨터) : 첫 화면 공지 목록(u2-list)과 같은 결 --- */ #bo_list #bo_btn_top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; } #bo_list #bo_btn_top::after { display: none; } #bo_list #bo_btn_top #bo_list_total { float: none; font-size: 14px; line-height: 1.5; color: var(--u2-ink-3); } #bo_list #bo_btn_top #bo_list_total span { margin-right: 6px; font-weight: 600; color: var(--u2-ink-2); } #bo_list .tbl_head01 { margin: 0; } #bo_list .tbl_head01 table { border-top: 1px solid var(--u2-ink); } #bo_list .tbl_head01 thead th { padding: 12px 8px; border-top: 0; border-bottom: 1px solid var(--u2-line); background: none; color: var(--u2-ink-3); font: 600 14px/1.4 var(--u2-sans); letter-spacing: 0; } #bo_list .tbl_head01 thead th a { color: var(--u2-ink-3); } #bo_list .tbl_head01 thead th:nth-child(2 of :not(.all_chk)) { text-align: left; } #bo_list .tbl_head01 tbody tr, #bo_list .tbl_head01 tbody tr:hover { border-left: 0; } #bo_list .tbl_head01 tbody td { padding-top: 15px; padding-bottom: 15px; border: 0; border-bottom: 1px solid var(--u2-line); background: transparent !important; font-size: 14px; line-height: 1.5; color: var(--u2-ink-3); } #bo_list .tbl_head01 tbody td:not(.td_subject) { padding-left: 8px; padding-right: 8px; } #bo_list .tbl_head01 .td_num2 { width: 64px; } #bo_list .tbl_head01 .td_num { width: 64px; } #bo_list .tbl_head01 .td_datetime { width: 76px; } #bo_list .tbl_head01 .td_name { width: 140px; max-width: 140px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--u2-ink-2); } #bo_list .tbl_head01 .td_subject { padding-right: 12px; font-size: 15px; color: var(--u2-ink); word-break: keep-all; overflow-wrap: anywhere; } #bo_list .bo_tit { color: var(--u2-ink); font-weight: 500; } #bo_list .bo_tit a { color: var(--u2-ink); font-weight: 500; } #bo_list .bo_notice .bo_tit a { font-weight: 600; } #bo_list .bo_tit a:hover { color: var(--u2-celadon-deep); text-decoration: underline; text-underline-offset: 3px; } #bo_list .notice_icon { display: inline-block; padding: 0 9px; line-height: 24px; border-radius: 999px; background: var(--u2-celadon-soft); color: var(--u2-celadon-deep); font-size: 13.5px; font-weight: 700; } #bo_list .notice_icon i { display: none; } #bo_list .bo_current { font-size: 14px; font-weight: 700; color: var(--u2-celadon-deep); } /* 거의 모든 글에 붙던 빨간 하트(인기글 표시)는 정보가 되지 않아 뺀다. 첨부·링크·비밀글 표시는 회색 작은 아이콘으로 */ #bo_list .bo_tit .fa-heart, #bo_list .bo_subject .fa-heart { display: none; } #bo_list .bo_tit :is(.fa-download, .fa-link), #bo_list .bo_subject :is(.fa-download, .fa-link) { width: auto; height: auto; margin-left: 6px; background: none; border: 0; color: var(--u2-ink-3); font-size: 14px; line-height: 1; } #bo_list .bo_tit .fa-lock, #bo_list .bo_subject .fa-lock { width: auto; margin-right: 4px; background: none; border: 0; color: var(--u2-ink-3); font-size: 14px; } #bo_list .new_icon { width: auto; margin-left: 6px; padding: 0 6px; border-radius: 4px; background: var(--u2-celadon-deep); color: #fff; font-size: 13.5px; font-weight: 700; line-height: 20px; } #bo_list .cnt_cmt { margin-left: 6px; padding: 0 7px; height: auto; border-radius: 999px; background: var(--u2-mist); color: var(--u2-ink-2); font-size: 13.5px; font-weight: 600; line-height: 20px; } #bo_list .bo_cate_link { float: none; display: inline-block; height: auto; margin: 0 8px 0 0; padding: 2px 8px; border-radius: 4px; background: var(--u2-mist); color: var(--u2-ink-2) !important; font-size: 13.5px; line-height: 1.4; } #bo_list .empty_table { padding: 60px 0 !important; color: var(--u2-ink-2) !important; font-size: 15px; } #bo_list .td_chk { border: 0; } #bo_list .bo_fx { float: none; display: flex; justify-content: flex-end; margin: 16px 0 0; } #bo_list .bo_fx::after { display: none; } /* 게시판 분류(있는 게시판만) */ #bo_list #bo_cate { margin: 0 0 18px; } #bo_list #bo_cate ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; } #bo_list #bo_cate ul::after { display: none; } #bo_list #bo_cate li { float: none; display: block; margin: 0; padding: 0; } #bo_list #bo_cate a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 15px; border: 1px solid var(--u2-line); border-radius: 999px; background: #fff; color: var(--u2-ink); font-size: 15px; line-height: 1.3; box-shadow: none; } #bo_list #bo_cate a:hover { border-color: var(--u2-celadon); background: #fff; color: var(--u2-ink); } #bo_list #bo_cate #bo_cate_on { background: var(--u2-ink); border-color: var(--u2-ink); color: #fff; font-weight: 600; box-shadow: none; } /* 게시판 검색 창(컴퓨터, 돋보기 단추를 누르면 뜨는 창) */ #bo_list .bo_sch_wrap { z-index: 1000; } #bo_list .bo_sch { top: 50%; left: 50%; width: min(400px, calc(100vw - 32px)); max-height: none; margin: 0; transform: translate(-50%, -50%); border: 1px solid var(--u2-line); border-radius: 10px; box-shadow: 0 12px 32px rgba(27, 42, 58, .18); overflow: visible; } #bo_list .bo_sch h3 { padding: 18px 20px; border-bottom: 1px solid var(--u2-line); font: 700 18px/1.3 var(--u2-serif); color: var(--u2-ink); } #bo_list .bo_sch form { display: grid; gap: 10px; padding: 18px 20px 22px; } #bo_list .bo_sch select { height: 46px; padding: 0 10px; border: 1px solid #7D8A95; border-radius: var(--u2-radius); box-shadow: none; font-size: 15px; color: var(--u2-ink); background-color: #fff; } #bo_list .bo_sch .sch_bar { display: flex; margin: 0; border: 1px solid #7D8A95; border-radius: var(--u2-radius); box-shadow: none; overflow: hidden; } #bo_list .bo_sch .sch_bar:focus-within { outline: 2px solid var(--u2-celadon); outline-offset: 1px; } #bo_list .bo_sch .sch_input { float: none; flex: 1; min-width: 0; width: auto; height: 46px; padding: 0 12px; font-size: 16px; color: var(--u2-ink); } #bo_list .bo_sch .sch_input:focus { border: 0 !important; box-shadow: none; outline: 0; } #bo_list .bo_sch .sch_btn { float: none; width: 52px; height: 46px; background: var(--u2-ink); color: #fff; font-size: 16px; } #bo_list .bo_sch .bo_sch_cls { top: 7px; right: 7px; width: 44px; height: 44px; padding: 0; background: none; color: var(--u2-ink-3); } #bo_list .bo_sch_bg { background: rgba(27, 42, 58, .4); } /* 쪽 번호는 맨 위 0-2 공통 규칙으로 옮김 */ /* --- 3. 게시판 목록 (휴대폰) --- */ #bo_list .list_01 { padding: 0; } #bo_list .list_01 > ul { border-top: 1px solid var(--u2-ink); } #bo_list .list_01 li { margin: 0; padding: 2px 2px 12px; border-radius: 0; border-bottom: 1px solid var(--u2-line); background: none; box-shadow: none; } #bo_list .list_01 div.bo_subject { margin: 0; font-size: 16px; font-weight: 600; } #bo_list .list_01 a.bo_subject { display: block; margin: 0; padding: 12px 0 8px; font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--u2-ink); } #bo_list .list_01 .bo_info { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; margin: 0; padding: 0; border-top: 0; font-size: 14px; line-height: 1.5; color: var(--u2-ink-3); } #bo_list .list_01 .bo_info .bo_date { position: static; font-style: normal; } #bo_list .list_01 .bo_info .sv_member { color: var(--u2-ink-2); } #bo_list .list_01 .bo_info i { margin-right: 3px; } #bo_list .btn_top { display: flex; justify-content: flex-end; gap: 8px; margin: 0 0 12px; } #bo_list .btn_top a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: var(--u2-radius); font: 600 15px/1 var(--u2-sans); } #bo_list .btn_top .btn_b01 { border: 1px solid var(--u2-line); background: #fff; color: var(--u2-ink); } #bo_list .btn_top .btn_b02 { background: var(--u2-celadon); color: #fff; } /* 휴대폰 게시판 검색칸 */ #bo_list ~ #bo_sch { margin: 20px 0 0; border: 1px solid #7D8A95; border-radius: var(--u2-radius); background: #fff; overflow: hidden; } #bo_list ~ #bo_sch:focus-within { outline: 2px solid var(--u2-celadon); outline-offset: 1px; } #bo_list ~ #bo_sch form { display: flex; align-items: center; } #bo_list ~ #bo_sch select { float: none; flex: none; width: 34%; height: 46px; margin: 0; padding: 0 8px; border: 0; border-right: 1px solid var(--u2-line); border-radius: 0; background: #fff; font-size: 15px; color: var(--u2-ink); } #bo_list ~ #bo_sch .sch_input { float: none; flex: 1; min-width: 0; width: auto; height: 46px; padding: 0 8px 0 12px; font-size: 16px; color: var(--u2-ink); } #bo_list ~ #bo_sch .sch_input:focus { border: 0 !important; box-shadow: none; outline: 0; } #bo_list ~ #bo_sch select:focus { border: 0 !important; border-right: 1px solid var(--u2-line) !important; box-shadow: none; outline: 0; } #bo_list ~ #bo_sch .sch_btn { position: static; flex: none; width: 48px; height: 46px; font-size: 17px; color: var(--u2-ink); } /* --- 4. 글 보기 (컴퓨터·휴대폰) --- */ #bo_v { padding: 0; background: none; box-shadow: none; } #bo_v #bo_v_title { margin: 0; } #bo_v #bo_v_title .bo_v_tit { display: block; margin: 0; font-family: var(--u2-serif); font-weight: 700; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.4; letter-spacing: -0.01em; color: var(--u2-ink); word-break: keep-all; overflow-wrap: anywhere; } #bo_v .bo_v_cate { display: inline-block; margin: 0 0 8px; padding: 0 10px; border-radius: 999px; background: var(--u2-celadon-soft); color: var(--u2-celadon-deep); font: 600 14px/26px var(--u2-sans); } #bo_v > header > p { margin: 8px 0 0; font-size: 14px; font-style: normal; color: var(--u2-ink-3); } #bo_v #bo_v_info { margin: 0; padding: 12px 0 16px; border-bottom: 1px solid var(--u2-line); font-size: 14px; line-height: 1.7; color: var(--u2-ink-3); } #bo_v #bo_v_info:has(> .profile_info) { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; } #bo_v #bo_v_info::after { display: none; } #bo_v #bo_v_info .profile_info { float: none; display: block; margin: 0; } #bo_v #bo_v_info .pf_img { display: none; } #bo_v #bo_v_info .profile_info_ct { float: none; padding: 0; line-height: 1.8; } #bo_v #bo_v_info strong { margin: 0 14px 0 0; } #bo_v #bo_v_info .sv_member { font-size: 15px; font-weight: 600; color: var(--u2-ink); } #bo_v #bo_v_info .profile_info :is(a, .if_date), #bo_v #bo_v_info > strong { color: var(--u2-ink-3); } #bo_v #bo_v_info i { margin-right: 4px; } #bo_v #bo_v_info .bo_v_com { float: none; margin: 0; } #bo_v #bo_v_atc { min-height: 0; padding-top: 4px; } #bo_v #bo_v_share { padding: 8px 0 0; margin: 0; } #bo_v #bo_v_con { max-width: 800px; min-height: 120px; margin: 24px 0 40px; font-size: 17px; line-height: 1.85; color: var(--u2-ink); word-break: keep-all; overflow-wrap: anywhere; } #bo_v #bo_v_con a { color: var(--u2-celadon-deep); } #bo_v #bo_v_con .content_move { margin-top: 28px; font-size: 14px; line-height: 1.6; color: var(--u2-ink-3); } #bo_v #bo_v_img img { border-radius: var(--u2-radius); } /* 첨부파일·관련링크 */ #bo_v :is(#bo_v_file, #bo_v_link) h2 { background: none; color: var(--u2-ink); padding: 0; font-weight: 700; } #bo_v :is(#bo_v_file, #bo_v_link) li { margin: 8px 0; padding: 14px 16px; border: 1px solid var(--u2-line); border-radius: var(--u2-radius); background: #fff; box-shadow: none; color: var(--u2-ink-3); } #bo_v :is(#bo_v_file, #bo_v_link) li:hover { border-color: var(--u2-celadon); color: var(--u2-ink-3); } #bo_v :is(#bo_v_file, #bo_v_link) li i { color: var(--u2-ink-3); } #bo_v :is(#bo_v_file, #bo_v_link) li:hover i { color: var(--u2-celadon-deep); } #bo_v :is(#bo_v_file, #bo_v_link) a { color: var(--u2-ink); font-size: 15px; } #bo_v :is(#bo_v_file, #bo_v_link) li > i { margin-right: 14px; font-size: 22px; line-height: 40px; } #bo_v :is(#bo_v_file, #bo_v_link) li:hover a, #bo_v :is(#bo_v_file, #bo_v_link) a:focus { color: var(--u2-celadon-deep); } #bo_v :is(#bo_v_file, #bo_v_link) a strong { color: inherit; } #bo_v :is(.bo_v_file_cnt, .bo_v_link_cnt), #bo_v li:hover :is(.bo_v_file_cnt, .bo_v_link_cnt) { color: var(--u2-ink-3); font-size: 14px; } /* 추천 */ #bo_v #bo_v_act :is(.bo_v_good, .bo_v_nogood) { border-color: var(--u2-line); color: var(--u2-ink-2); font-style: normal; } #bo_v #bo_v_act a:hover { color: var(--u2-celadon-deep); border-color: var(--u2-celadon); background: #fff; } /* 이전글·다음글 (컴퓨터) */ #bo_v .bo_v_nb { margin: 32px 0 0; border-top: 1px solid var(--u2-ink); } #bo_v .bo_v_nb li:is(.btn_prv, .btn_next) { display: flex; align-items: center; gap: 16px; padding: 14px 4px; border-top: 0; border-bottom: 1px solid var(--u2-line); font-size: 15px; } #bo_v .bo_v_nb li:is(.btn_prv, .btn_next) .nb_tit { flex: none; width: 64px; padding: 0; font-size: 14px; color: var(--u2-ink-3); } #bo_v .bo_v_nb .nb_tit i { display: none; } #bo_v .bo_v_nb li:is(.btn_prv, .btn_next) > a { flex: 1; min-width: 0; color: var(--u2-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #bo_v .bo_v_nb li:is(.btn_prv, .btn_next) > a:hover { color: var(--u2-celadon-deep); text-decoration: underline; text-underline-offset: 3px; } #bo_v .bo_v_nb .nb_date { float: none; flex: none; font-size: 14px; color: var(--u2-ink-3); } /* 이전글·목록·다음글 (휴대폰) */ #bo_v .bo_v_nb:has(.btn_list) { border-bottom: 1px solid var(--u2-line); } #bo_v .bo_v_nb :is(.bo_v_prev, .bo_v_next) > a, #bo_v .bo_v_nb .btn_list { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 12px; font-size: 15px; color: var(--u2-ink-2); } #bo_v .bo_v_nb .btn_list { font-weight: 600; color: var(--u2-ink); } #bo_v .bo_v_nb :is(.fa-caret-left, .fa-caret-right) { display: none; } /* 휴대폰 글 위 단추(수정·삭제·답변·글쓰기) */ #bo_v > #bo_v_top { margin: 12px 0 0; } #bo_v #bo_v_top :is(.bo_v_left, .btn_top) { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; } #bo_v #bo_v_top :is(.bo_v_left, .btn_top) a { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 0 14px; border-radius: var(--u2-radius); font: 600 14px/1 var(--u2-sans); border: 1px solid var(--u2-line); background: #fff; color: var(--u2-ink); } #bo_v #bo_v_top .btn_b02 { background: var(--u2-celadon); border-color: var(--u2-celadon-deep); color: #fff; } /* 댓글 */ #bo_v .cmt_btn { min-height: 44px; margin: 36px 0 0; padding: 0 0 12px; border: 0; border-bottom: 1px solid var(--u2-ink); background-color: transparent; background-image: none; font: 700 16px/1.4 var(--u2-sans); color: var(--u2-ink); cursor: pointer; } #bo_v .cmt_btn span.total { font-size: 16px; color: var(--u2-celadon-deep); } #bo_v .cmt_btn span.total b { font-size: 16px; color: var(--u2-ink); } #bo_v .cmt_btn span.total::after { display: none; } #bo_v #bo_vc article { margin: 0; padding: 18px 0; border-bottom: 1px solid var(--u2-line); } #bo_v #bo_vc .pf_img img { width: 40px; height: 40px; } #bo_v #bo_vc .cm_wrap .cmt_contents { padding: 6px 0 0; font-size: 15px; line-height: 1.75; color: var(--u2-ink); } #bo_v #bo_vc .cmt_contents { border-radius: var(--u2-radius); } #bo_v #bo_vc > article > .cmt_contents { background: var(--u2-mist); color: var(--u2-ink); } #bo_v #bo_vc .cmt_contents p { font-size: 15px; line-height: 1.75; } #bo_v .bo_vc_hdinfo { font-size: 14px; font-style: normal; color: var(--u2-ink-3); } #bo_v #bo_vc_empty { padding: 40px 0 !important; font-size: 15px; color: var(--u2-ink-2); } #bo_v .bo_vc_w textarea { min-height: 120px; padding: 12px 14px; border: 1px solid #7D8A95; border-radius: var(--u2-radius); box-shadow: none; font: 15px/1.7 var(--u2-sans); color: var(--u2-ink); } #bo_v .bo_vc_w_info .frm_input { height: 44px; border: 1px solid #7D8A95; border-radius: var(--u2-radius); box-shadow: none; font-size: 15px; } #bo_v .bo_vc_w .btn_submit { height: 46px; padding: 0 22px; font: 600 15px/1 var(--u2-sans); } #bo_v #bo_vc_w .btn_confirm { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; } #bo_v #bo_vc_w .secret_cm { float: none; } #bo_v #bo_vc_w .chk_box input[type="checkbox"] + label { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding-left: 28px; font-size: 14px !important; color: var(--u2-ink-2); } #bo_v #bo_vc_w .chk_box input[type="checkbox"] + label span { position: absolute; top: 50%; left: 0; width: 20px; height: 20px; margin-top: -10px; border: 1px solid #7D8A95; border-radius: 4px; } #bo_v #bo_vc_w .chk_box input:focus-visible + label span { outline: 3px solid var(--u2-celadon); outline-offset: 2px; } #bo_v #bo_vc header .sv_member { font-size: 14px; font-weight: 600; color: var(--u2-ink); } #bo_v .bo_vc_act { border-color: var(--u2-line); border-radius: var(--u2-radius); } /* --- 5. 글쓰기 (컴퓨터·휴대폰) --- */ #bo_w { max-width: 900px; } #bo_w .form_01 { margin: 0; } #bo_w .write_div, #bo_w .form_01 > div { margin: 0 0 14px; } #bo_w .frm_input, #bo_w select { height: 48px; padding: 0 14px; border: 1px solid #7D8A95; border-radius: var(--u2-radius); box-shadow: none; background-color: #fff; font-size: 16px; color: var(--u2-ink); } #bo_w .bo_w_select select { width: 100%; border: 1px solid #7D8A95; } #bo_w .wr_content textarea { min-height: 320px; padding: 12px 14px; border: 1px solid #7D8A95; border-radius: var(--u2-radius); box-shadow: none; font: 16px/1.75 var(--u2-sans); color: var(--u2-ink); } #bo_w .wr_content.smarteditor2 iframe { border-radius: var(--u2-radius); } #bo_w .bo_w_tit .frm_input { padding-right: 180px; } #bo_w .bo_w_tit #btn_autosave { top: 7px; right: 7px; width: auto; height: 34px; padding: 0 12px; border: 1px solid var(--u2-line); border-radius: 4px; background: #fff; color: var(--u2-ink-2); font-size: 14px; line-height: 32px; } #bo_w #autosave_pop { border-color: var(--u2-line); border-radius: var(--u2-radius); } #bo_w .bo_w_link label, #bo_w .bo_w_flie .lb_icon { height: 46px; line-height: 46px; color: var(--u2-ink-2); background: var(--u2-mist); } #bo_w .bo_w_link .frm_input, #bo_w .bo_w_flie .frm_file { padding-left: 54px; } #bo_w .bo_w_flie .file_wr { height: 48px; padding: 6px; border: 1px solid #7D8A95; border-radius: var(--u2-radius); } #bo_w .bo_w_flie .file_del { color: var(--u2-ink-2); } #bo_w #char_count_desc, #bo_w #char_count_wrap { font-size: 14px; color: var(--u2-ink-2); } /* 선택 칸(공지·비밀글·답변메일) */ #bo_w .bo_v_option li { margin: 0 18px 0 0; } #bo_w .chk_box input[type="checkbox"] + label { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding-left: 28px; font-size: 15px; color: var(--u2-ink); } #bo_w .chk_box input[type="checkbox"] + label span { position: absolute; top: 50%; left: 0; float: none; width: 20px; height: 20px; margin: -10px 0 0; border: 1px solid #7D8A95; border-radius: 4px; } #bo_w .chk_box input:focus-visible + label span { outline: 3px solid var(--u2-celadon); outline-offset: 2px; } #bo_w input[type="checkbox"]:not(.selec_chk) { width: 20px; height: 20px; accent-color: var(--u2-celadon); vertical-align: -4px; } #bo_w .form_01 input[type="checkbox"]:not(.selec_chk) + label { display: inline-block; min-height: 44px; line-height: 44px; margin: 0 16px 0 4px; font-size: 15px; } /* 취소·작성완료 */ #bo_w :is(.btn_confirm, .btn_top) { display: flex; justify-content: center; gap: 10px; margin: 24px 0 0; text-align: center; } #bo_w :is(.btn_confirm, .btn_top) :is(.btn_cancel, .btn_submit) { display: inline-flex; align-items: center; justify-content: center; height: 50px; min-width: 140px; padding: 0 28px; border-radius: var(--u2-radius); font: 600 16px/1 var(--u2-sans); } #bo_w :is(.btn_confirm, .btn_top) .btn_cancel { border: 1px solid var(--u2-ink); background: #fff; color: var(--u2-ink); } #bo_w :is(.btn_confirm, .btn_top) .btn_cancel:hover { background: var(--u2-mist); } /* --- 6. 로그인 (컴퓨터·휴대폰 같은 마크업, 머리·꼬리 없는 화면) --- ※ 지금 /bbs/login.php 는 ucp2.css 를 읽지 않아(2026-10-21 확인) 이 부분은 아직 화면에 나오지 않는다. login.skin.php 에 ucp2.css 링크가 생기면 그대로 적용된다 */ #login_new { display: flex; align-items: center; justify-content: center; min-height: 100vh; min-height: 100dvh; padding: 40px 16px; box-sizing: border-box; background: var(--u2-mist); font-family: var(--u2-sans); color: var(--u2-ink); } #login_new .sub_div { width: 100%; max-width: 420px; padding: 0; } #login_new .sub_div::before { content: "현대정신분석교육원"; display: block; margin: 0 0 18px; text-align: center; font: 700 22px/1.3 var(--u2-serif); color: var(--u2-ink); } #login_new .login_div { width: 100%; margin: 0; border: 1px solid var(--u2-line); border-radius: 10px; box-shadow: none; background: #fff; } #login_new .login_wrap { padding: 32px 32px 26px; text-align: left; } #login_new .login_wrap > .font-18 { display: block; font: 700 24px/1.3 var(--u2-serif); color: var(--u2-ink); } #login_new :is(input, button) { font-family: var(--u2-sans); } #login_new .login_input_id { margin-top: 22px; } #login_new .login_input_pw { margin-top: 10px; } #login_new .login_input { width: 100%; height: 50px; padding: 0 46px 0 14px; text-indent: 0; border: 1px solid #7D8A95; border-radius: var(--u2-radius); background: #fff; font-size: 16px; color: var(--u2-ink); letter-spacing: 0; box-sizing: border-box; } #login_new .login_input::placeholder { color: var(--u2-ink-3); } #login_new .login_wrap .login_input:focus { border: 1px solid var(--u2-celadon-deep) !important; box-shadow: 0 0 0 3px rgba(79, 127, 113, .35) !important; outline: 0; } #login_new :is(.login_input_id, .login_input_pw) svg { top: 13px; right: 13px; color: var(--u2-ink-3); pointer-events: none; } #login_new .login_b { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; } #login_new .login_b > .cb { display: none; } #login_new .login_b > li { float: none; margin: 0; } #login_new #login_password_lost { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; border-radius: 0; font-size: 14px; line-height: 1.4; color: var(--u2-ink-2); text-decoration: underline; text-underline-offset: 3px; } #login_new .login_b_li2 { position: relative; } /* 자동로그인 칸: 숨겨져 있던 칸을 키보드로도 고를 수 있게 */ #login_new .magic-checkbox { display: block; position: absolute; top: 12px; left: 0; width: 20px; height: 20px; margin: 0; opacity: 0; } #login_new .magic-checkbox + label { display: inline-flex; align-items: center; min-height: 44px; padding-left: 28px; font-size: 14px; color: var(--u2-ink-2); } #login_new .magic-checkbox + label::before { top: 12px; width: 20px; height: 20px; box-sizing: border-box; border: 1px solid #7D8A95; border-radius: 4px; background: #fff; } #login_new .magic-checkbox + label:hover::before { animation: none; background: var(--u2-mist); } #login_new .magic-checkbox:checked + label::before { background: var(--u2-celadon); border: 1px solid var(--u2-celadon-deep); } #login_new .magic-checkbox + label::after { top: 15px; left: 7px; border-color: #fff; } #login_new .magic-checkbox:focus-visible + label::before { outline: 3px solid var(--u2-celadon); outline-offset: 2px; } #login_new .login_btn_d { margin-top: 16px; } #login_new .login_btns { height: 52px; border: 0; border-radius: var(--u2-radius); background: var(--u2-celadon); color: #fff; font-size: 17px; font-weight: 700; cursor: pointer; } #login_new .login_btns:hover { background: var(--u2-celadon-deep); } #login_new :is(a, button):focus-visible { outline: 3px solid var(--u2-celadon); outline-offset: 2px; } #login_new .login_join_t { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--u2-line); } #login_new .login_join_t > .cb { display: none; } #login_new .login_join_btn { float: none; display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--u2-ink-2); } #login_new .login_join_btn .color-000 { margin-left: 4px; color: var(--u2-celadon-deep); text-decoration: underline; text-underline-offset: 3px; } #login_new .login_join_btn.fr { font-weight: 600; color: var(--u2-ink); } #login_new .color-999 { color: var(--u2-ink-2); } @media (max-width: 480px) { #login_new { align-items: flex-start; padding-top: 28px; } #login_new .login_wrap { padding: 26px 20px 20px; } } /* --- 7. 회원가입 약관 (컴퓨터) --- */ .register > #fregister { max-width: 820px; font-family: var(--u2-sans); color: var(--u2-ink); } .register > #fregister :is(h2, textarea, button) { font-family: var(--u2-sans); } /* 위 안내: 분홍 띠와 왼쪽 빨간 선을 없애고 평범한 안내문으로 */ .register > #fregister > p { height: auto; margin: 0 0 20px; padding: 0; border-radius: 0; background: none; text-align: left; font-size: 15px; font-weight: 400; line-height: 1.6; color: var(--u2-ink-2); } .register > #fregister > p::before { display: none; } .register > #fregister > p i { margin-right: 4px; font-size: 17px; color: var(--u2-celadon-deep); vertical-align: -1px; } .register > #fregister section { margin: 0 0 16px; border: 1px solid var(--u2-line); border-radius: 10px; overflow: hidden; } .register > #fregister h2 { margin: 0; padding: 16px 20px; border-bottom: 1px solid var(--u2-line); font: 700 18px/1.4 var(--u2-serif); color: var(--u2-ink); text-align: left; } .register > #fregister textarea { height: 200px; padding: 16px 20px; font-size: 14px; line-height: 1.75; color: var(--u2-ink-2); resize: vertical; } .register > #fregister textarea:focus { outline: 2px solid var(--u2-celadon); outline-offset: -2px; box-shadow: none; } #fregister_private > div { padding: 18px 20px; } #fregister_private table { font-size: 14px; line-height: 1.55; } #fregister_private table th { padding: 10px 12px; border: 1px solid var(--u2-line); background: var(--u2-mist); color: var(--u2-ink); font-weight: 600; } #fregister_private table td { padding: 10px 12px; border: 1px solid var(--u2-line); border-top: 0; color: var(--u2-ink-2); } /* 동의 칸: 오른쪽 위 빈 네모 대신 '동의합니다' 글과 함께 아래에 */ .register > #fregister .fregister_agree { position: static; margin: 0; padding: 4px 20px; border: 0; border-top: 1px solid var(--u2-line); background: var(--u2-mist); } .register > #fregister .fregister_agree label { position: relative; display: flex; align-items: center; gap: 10px; min-height: 48px; font-size: 15px; color: var(--u2-ink); cursor: pointer; } .register > #fregister .fregister_agree label .sound_only { position: static; font-size: 15px; line-height: 1.5; font-weight: 600; } .register > #fregister .fregister_agree input[type="checkbox"] + label span { position: relative; top: 0; right: auto; left: 0; flex: none; width: 22px; height: 22px; border: 1px solid #7D8A95; border-radius: 4px; background-color: #fff; } .register > #fregister .fregister_agree input[type="checkbox"]:hover + label, .register > #fregister .fregister_agree input[type="checkbox"]:checked + label { color: var(--u2-ink); } .register > #fregister .fregister_agree input:focus-visible + label span { outline: 3px solid var(--u2-celadon); outline-offset: 2px; } .register > #fregister #fregister_chkall { margin: 0 0 20px; padding: 4px 20px; border: 1px solid var(--u2-celadon); border-radius: 10px; background: var(--u2-celadon-soft); line-height: 1.5; text-align: left; } .register > #fregister #fregister_chkall label { font-size: 16px; font-weight: 700; } /* 취소·회원가입 단추 (가입 입력 화면도 같은 모양) */ .register :is(#fregister, #fregisterform) .btn_confirm { display: flex; gap: 10px; max-width: 820px; text-align: left; } .register :is(#fregister, #fregisterform) .btn_confirm :is(.btn_close, .btn_submit) { float: none; flex: 1; display: inline-flex; align-items: center; justify-content: center; width: auto; margin: 0; border-radius: var(--u2-radius); font: 600 16px/1 var(--u2-sans); } .register :is(#fregister, #fregisterform) .btn_confirm .btn_close { border: 1px solid var(--u2-ink); background: #fff; color: var(--u2-ink); } .register :is(#fregister, #fregisterform) .btn_confirm .btn_close:hover { background: var(--u2-mist); } .register :is(#fregister, #fregisterform) :is(a, button):focus-visible { outline: 3px solid var(--u2-celadon); outline-offset: 2px; } /* --- 8. 회원가입 입력 (컴퓨터) --- */ .register.mt-80:has(> #fregisterform) { margin-top: 0; } #fregisterform #register_form { max-width: 820px; margin: 0 0 24px; background: none; font-family: var(--u2-sans); color: var(--u2-ink); } #fregisterform :is(input, select, textarea, button, h2) { font-family: var(--u2-sans); } #fregisterform .register_form_inner { margin: 0 0 16px; border: 1px solid var(--u2-line); border-radius: 10px; background: #fff; } #fregisterform .register_form_inner h2 { margin: 0; padding: 16px 22px; border-bottom: 1px solid var(--u2-line); font: 700 18px/1.4 var(--u2-serif); color: var(--u2-ink); } #fregisterform .register_form_inner ul { padding: 20px 22px 6px; } #fregisterform .register_form_inner ul::after { content: ""; display: block; clear: both; } #fregisterform .register_form_inner li { margin: 0 0 18px; } #fregisterform .register_form_inner label:not(.sound_only):not(.inline) { margin-bottom: 6px; font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--u2-ink); } #fregisterform .register_form_inner li:empty { display: none; } #fregisterform .register_form_inner li.half_input { float: left; width: calc(50% - 8px); } #fregisterform .register_form_inner li.margin_input { margin-right: 16px; } #fregisterform .register_form_inner li.half_input + li:not(.half_input) { clear: both; } #fregisterform .frm_input { height: 48px; padding: 0 14px; border: 1px solid #7D8A95; border-radius: var(--u2-radius); box-shadow: none; background-color: #fff; font-size: 16px; color: var(--u2-ink); } #fregisterform textarea { min-height: 100px; padding: 12px 14px; border: 1px solid #7D8A95; border-radius: var(--u2-radius); box-shadow: none; font-size: 15px; line-height: 1.7; } #fregisterform :is(.frm_input, textarea):focus { border-color: var(--u2-celadon-deep) !important; box-shadow: none; outline: 2px solid var(--u2-celadon); outline-offset: 0; } #fregisterform #reg_mb_zip { width: 140px; } #fregisterform .btn_frmline { width: auto; height: 48px; padding: 0 18px; border-radius: var(--u2-radius); background: var(--u2-ink); color: #fff; font-size: 15px; font-weight: 600; line-height: 48px; } #fregisterform .btn_frmline:hover { background: var(--u2-ink-2); } #fregisterform .frm_address { margin-top: 8px; } #fregisterform :is(#msg_mb_id, #msg_mb_nick) { display: block; margin-top: 6px; font-size: 14px; color: var(--u2-ink-2); } #fregisterform .cert_desc, #fregisterform .cert_req { font-size: 14px; color: var(--u2-celadon-deep); } #fregisterform #msg_certify { border-color: var(--u2-celadon); border-radius: var(--u2-radius); background: var(--u2-celadon-soft); color: var(--u2-ink); } #fregisterform .tooltip_icon { color: var(--u2-ink-3); } #fregisterform .tooltip { background: var(--u2-ink); border-radius: 4px; } #fregisterform .tooltip::before { border-right-color: var(--u2-ink); } #fregisterform .is_captcha_use { font-size: 14px; font-weight: 600; } #fregisterform #captcha #captcha_key { height: 44px; border-color: #7D8A95; border-radius: var(--u2-radius); } #fregisterform #ucp_math { height: 48px !important; border-color: #7D8A95 !important; border-radius: var(--u2-radius) !important; font-size: 16px; } /* 메일·문자 수신 칸: 글자를 눌러도 체크되게 칸 전체를 누르는 곳으로 */ #fregisterform li.chk_box { position: relative; display: flex; align-items: center; min-height: 44px; margin-bottom: 8px; } #fregisterform li.chk_box > label { position: absolute; inset: 0; z-index: 1; margin: 0; cursor: pointer; } #fregisterform li.chk_box > input[type="checkbox"] + label span { position: absolute; top: 50%; left: 0; width: 22px; height: 22px; margin-top: -11px; border: 1px solid #7D8A95; border-radius: 4px; background-color: #fff; } #fregisterform li.chk_box > input:focus-visible + label span { outline: 3px solid var(--u2-celadon); outline-offset: 2px; } #fregisterform li.chk_box > input.selec_chk { position: absolute; top: 50%; left: 0; z-index: 0; width: 22px; height: 22px; margin: -11px 0 0; opacity: 0; } #fregisterform li.chk_box .chk_li { padding-left: 34px; font-size: 15px; color: var(--u2-ink); } @media (max-width: 640px) { #fregisterform .register_form_inner li.half_input { float: none; width: auto; } #fregisterform .register_form_inner li.margin_input { margin-right: 0; } } /* --- 9. 회원가입 약관·입력 (휴대폰) --- */ .mbskin:has(> #fregister) { padding: 0; text-align: left; } .mbskin > #fregister { font-family: var(--u2-sans); color: var(--u2-ink); } .mbskin > #fregister :is(h2, textarea, input) { font-family: var(--u2-sans); } .mbskin > #fregister .chk_all { display: flex; align-items: center; gap: 10px; min-height: 54px; margin: 14px 0 12px; padding: 0 16px; border: 1px solid var(--u2-celadon); border-radius: 10px; background: var(--u2-celadon-soft); font-size: 16px; font-weight: 700; } .mbskin > #fregister input[type="checkbox"] { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--u2-celadon); } .mbskin > #fregister .chk_all label, .mbskin > #fregister .fregister_agree label { flex: 1; display: flex; align-items: center; min-height: 48px; cursor: pointer; } .mbskin > #fregister section { margin: 0 0 12px; border: 1px solid var(--u2-line); border-radius: 10px; box-shadow: none; overflow: hidden; } .mbskin > #fregister h2 { padding: 14px 16px; border-bottom: 1px solid var(--u2-line); font: 700 17px/1.4 var(--u2-serif); color: var(--u2-ink); } .mbskin > #fregister textarea { height: 170px; padding: 14px 16px; font-size: 14px; line-height: 1.7; color: var(--u2-ink-2); } .mbskin > #fregister .fregister_agree { display: flex; align-items: center; gap: 10px; padding: 2px 16px; border-top: 1px solid var(--u2-line); background: var(--u2-mist); font-size: 15px; font-weight: 600; color: var(--u2-ink); } .mbskin > #fregister #fregister_private .tbl_head01 { padding: 14px 16px; } .mbskin > #fregister #fregister_private :is(th, td) { padding: 8px 6px; font-size: 14px; color: var(--u2-ink-2); border-color: var(--u2-line); } .mbskin > #fregister #fregister_private thead th { border-top: 1px solid var(--u2-ink); color: var(--u2-ink); font-weight: 600; letter-spacing: 0; } .mbskin > #fregister .btn_top { margin: 18px 0 0; text-align: center; } .mbskin > #fregister .btn_top .btn_submit { width: 100%; height: 52px; padding: 0; border-radius: var(--u2-radius); font-size: 17px; font-weight: 700; letter-spacing: 0; } .mbskin > #fregister :is(input, a):focus-visible { outline: 3px solid var(--u2-celadon); outline-offset: 2px; } /* 휴대폰 가입 입력: 이름표가 숨어 있어 안내 글(placeholder)을 또렷하게 */ .register > #fregisterform { margin: 0; } .register > #fregisterform > .form_01:not(#register_form) { margin: 0 0 24px; } .register > #fregisterform > .form_01:not(#register_form) h2 { margin: 6px 0 10px; font: 700 18px/1.4 var(--u2-serif); color: var(--u2-ink); } .register > #fregisterform > .form_01:not(#register_form) li { margin: 0 0 10px; } .register > #fregisterform .frm_input::placeholder, .register > #fregisterform textarea::placeholder { color: var(--u2-ink-3); } .register > #fregisterform > .form_01:not(#register_form) .frm_info { margin: 6px 0 4px; font-size: 14px; line-height: 1.5; color: var(--u2-ink-2); } .register > #fregisterform > .form_01:not(#register_form) .frm_label { font-size: 14px; font-weight: 600; color: var(--u2-ink); } .register > #fregisterform .btn_confirm .btn_cancel { float: none; flex: 1; display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0; border: 1px solid var(--u2-ink); border-radius: var(--u2-radius); background: #fff; color: var(--u2-ink); font: 600 16px/1 var(--u2-sans); } .register > #fregisterform .btn_confirm .btn_submit { flex: 1; height: 52px; padding: 0; font-size: 16px; font-weight: 600; letter-spacing: 0; } /* --- 10. 자주 묻는 질문 (컴퓨터·휴대폰) --- */ #faq_sch { position: relative; margin: 0 0 20px; padding: 20px; border-radius: 10px; background: var(--u2-mist); text-align: left; } #faq_sch form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 620px; } #faq_sch .sch_tit { position: static; flex: none; margin: 0 6px 0 0; overflow: visible; text-indent: 0; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--u2-ink); } #faq_sch .frm_input { flex: 1; min-width: 0; width: auto; height: 48px; padding: 0 14px; border: 1px solid #7D8A95; border-radius: var(--u2-radius); box-shadow: none; background: #fff; font: 16px var(--u2-sans); color: var(--u2-ink); } #faq_sch .frm_input:focus { border-color: var(--u2-celadon-deep) !important; box-shadow: none; outline: 2px solid var(--u2-celadon); outline-offset: 0; } #faq_sch .btn_submit { position: static; flex: none; width: auto; min-width: 48px; height: 48px; padding: 0 20px; font: 600 15px/1 var(--u2-sans); } #faq_sch .btn_submit:focus-visible { outline: 3px solid var(--u2-celadon); outline-offset: 2px; } #faq_sch ~ #bo_cate { width: auto; margin: 0 0 24px; } #faq_sch ~ #bo_cate ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; background: none; } #faq_sch ~ #bo_cate ul::after { display: none; } #faq_sch ~ #bo_cate li { float: none; display: block; margin: 0; padding: 0; } #faq_sch ~ #bo_cate a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--u2-line); border-radius: 999px; background: #fff; color: var(--u2-ink); font: 15px/1.3 var(--u2-sans); box-shadow: none; } #faq_sch ~ #bo_cate a:hover { border-color: var(--u2-celadon); background: #fff; color: var(--u2-ink); } #faq_sch ~ #bo_cate a:focus-visible { outline: 3px solid var(--u2-celadon); outline-offset: 2px; } #faq_sch ~ #bo_cate #bo_cate_on { background: var(--u2-ink); border-color: var(--u2-ink); color: #fff; font-weight: 600; box-shadow: none; } #faq_sch ~ #bo_cate #bo_cate_on::after { display: none; } #faq_wrap { width: auto; font-family: var(--u2-sans); color: var(--u2-ink); } #faq_wrap ol { border-top: 1px solid var(--u2-ink); } #faq_wrap li { border-bottom: 1px solid var(--u2-line); background: none; } #faq_wrap li:first-child { border-top: 0; } #faq_wrap li h3 { min-height: 0; margin: 0; padding: 16px 60px 16px 44px; font: 600 16px/1.55 var(--u2-sans); } #faq_wrap li h3 a { font-size: 16px; color: var(--u2-ink); } #faq_wrap li h3 a:hover { color: var(--u2-celadon-deep); text-decoration: underline; text-underline-offset: 3px; } #faq_wrap li h3 .tit_bg { top: 14px; left: 8px; font: 700 20px/1.3 var(--u2-serif); color: var(--u2-celadon-deep); } #faq_wrap li h3 .tit_btn { top: 8px; right: 4px; width: 44px; height: 44px; background: none; color: var(--u2-ink-3); } #faq_wrap li h3.faq_li_open a { color: var(--u2-celadon-deep); } #faq_wrap :is(a, button):focus-visible { outline: 3px solid var(--u2-celadon); outline-offset: 2px; } #faq_con .con_inner { position: relative; padding: 2px 56px 24px 44px; font-size: 15px; line-height: 1.8; color: var(--u2-ink-2); } #faq_con .con_inner .tit_bg { top: 0; left: 6px; width: 28px; height: 28px; line-height: 28px; background: var(--u2-celadon-soft); color: var(--u2-celadon-deep); font: 700 15px/28px var(--u2-serif); } #faq_con .con_inner .closer_btn { top: -6px; right: 4px; width: 44px; height: 44px; background: none; color: var(--u2-ink-3); } #faq_wrap :is(.empty_list, .empty_table) { padding: 56px 20px !important; border-radius: 10px; background: var(--u2-mist); color: var(--u2-ink-2) !important; font-size: 15px; } /* --- 11. 강의 검색 결과 /shop/search.php (컴퓨터) --- */ #ssch { font-family: var(--u2-sans); color: var(--u2-ink); } #ssch :is(input, button, h2) { font-family: var(--u2-sans); } #container_wr:has(#ssch) .mid-menu:not(:has(*)) { display: none; } #ssch :is(a, button):focus-visible { outline: 3px solid var(--u2-celadon); outline-offset: 2px; } #ssch > h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 10px; font: 700 24px/1.4 var(--u2-serif); color: var(--u2-ink); } #ssch > h2 strong { color: var(--u2-celadon-deep); } #ssch > h2 .ssch_result_total { float: none; margin-left: auto; font: 400 15px var(--u2-sans); color: var(--u2-ink-2); } #ssch p.ssch_xlink { margin: 0 0 18px; font-size: 14px; } #ssch p.ssch_xlink a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--u2-line); border-radius: 999px; background: #fff; color: var(--u2-celadon-deep); font-size: 14px; text-decoration: none; } #ssch p.ssch_xlink a:hover { border-color: var(--u2-celadon); background: var(--u2-celadon-soft); color: var(--u2-celadon-deep); } #ssch p.ssch_xlink a .fa-angle-right { display: none; } #ssch_frm { border: 1px solid var(--u2-line); border-radius: 10px; background: #fff; overflow: hidden; } #ssch_frm .ssch_scharea { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 18px 20px; border-bottom: 1px solid var(--u2-line); } #ssch_frm .ssch_scharea::after { display: none; } #ssch_frm .ssch_scharea .ssch_input { flex: 0 1 420px; min-width: 0; height: 48px; margin: 0; padding: 0 14px; border: 1px solid #7D8A95; border-radius: var(--u2-radius); box-shadow: none; font-size: 16px; color: var(--u2-ink); } #ssch_frm .ssch_input:focus, #ssch_frm .frm_input:focus { border-color: var(--u2-celadon-deep) !important; box-shadow: none; outline: 2px solid var(--u2-celadon); outline-offset: 0; } #ssch_frm .ssch_scharea .btn_submit { width: auto; height: 48px; margin: 0; padding: 0 22px; font-size: 15px; font-weight: 600; } #ssch_frm .ssch_scharea .tooltip_icon { width: 44px; height: 44px; color: var(--u2-ink-3); } #ssch_frm .ssch_scharea .tooltip { background: var(--u2-ink); border-radius: 4px; font-size: 14px; } #ssch_frm .ssch_option { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 12px 20px; border-bottom: 1px solid var(--u2-line); font-size: 14px; color: var(--u2-ink-2); } #ssch_frm .ssch_option .chk_box, #ssch_frm .ssch_option label { margin: 0; } #ssch_frm .ssch_option input[type="checkbox"] + label { display: inline-flex; align-items: center; min-height: 36px; padding-left: 26px; font-size: 14px; color: var(--u2-ink); } #ssch_frm .ssch_option input[type="checkbox"] + label span { top: 50%; width: 18px; height: 18px; margin-top: -9px; border: 1px solid #7D8A95; border-radius: 4px; } #ssch_frm .ssch_option input[type="checkbox"]:focus-visible + label span { outline: 3px solid var(--u2-celadon); outline-offset: 2px; } #ssch_frm .ssch_option .ssch_input { width: 110px; height: 36px; margin: 0 4px 0 0; border: 1px solid #7D8A95; border-radius: var(--u2-radius); box-shadow: none; font-size: 14px; } /* 분류·정렬: 강의 목록 화면의 칩과 같은 모양 */ #ssch_cate { padding: 14px 20px; border-bottom: 1px solid var(--u2-line); background: #fff; } #ssch_cate ul { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; } #ssch_cate ul::after { display: none; } #ssch_frm #ssch_cate ul::before, #ssch_sort_all::before { flex: none; min-width: 52px; font-size: 14px; color: var(--u2-ink-3); } #ssch_frm #ssch_cate ul::before { content: "분류"; } #ssch_sort_all::before { content: "정렬"; } #ssch_cate li { float: none; width: auto; border: 0; background: none; } #ssch_cate a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 14px; border: 1px solid var(--u2-line); border-radius: 999px; background: #fff; color: var(--u2-ink); font-size: 14px; line-height: 1.3; } #ssch_cate a:hover { border-color: var(--u2-celadon); color: var(--u2-ink); } #ssch_cate a span { position: static; padding: 0; background: none; font-weight: 400; font-size: 14px; color: var(--u2-ink-3); } #ssch_sort_all { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; padding: 8px 20px 10px; } #ssch_sort_all::after { display: none; } #ssch_sort_all li { float: none; height: auto; margin: 0; padding: 0; line-height: 1.3; } #ssch_sort_all li:hover::after { display: none; } #ssch_sort_all li a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; font-size: 14px; color: var(--u2-ink-2); border-radius: var(--u2-radius); } #ssch_sort_all li a:hover { color: var(--u2-ink); background: var(--u2-mist); } /* 결과 칸: 강의 목록 화면의 카드(u2-card)와 같은 모양 */ #ssch .sct_10 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; margin: 28px 0 0; } #ssch .sct_10::after, #ssch .sct_10::before { display: none; } #ssch .sct_10 .sct_li { float: none; width: auto; margin: 0; padding: 0; } #ssch .sct_10 .sct_img { aspect-ratio: 16 / 9; border-radius: var(--u2-radius); overflow: hidden; background: var(--u2-mist); } #ssch .sct_10 .sct_img a { display: block; height: 100%; } #ssch .sct_10 .sct_img img { display: block; width: 100%; height: 100%; object-fit: cover; } #ssch .sct_10 .sct_cart { padding: 12px 0; background: rgba(27, 42, 58, .82); font: 600 14px var(--u2-sans); } #ssch .sct_10 .sct_txt { margin: 14px 0 6px; padding: 0; border: 0; font-size: 17px; } #ssch .sct_10 .sct_txt a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 700; line-height: 1.45; color: var(--u2-ink); } #ssch .sct_10 .sct_txt a:hover { text-decoration: underline; text-underline-offset: 3px; } #ssch .sct_10 .sct_basic { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0 0 6px; font-size: 14px; line-height: 1.6; color: var(--u2-ink-2); } #ssch .sct_10 .sct_bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 0; } #ssch .sct_10 .sct_cost { margin: 4px 0; font-size: 18px; font-weight: 800; color: var(--u2-ink); } #ssch .sct_10 .sct_op_btn { position: static; margin-left: auto; display: flex; gap: 2px; } #ssch .sct_10 .sct_op_btn > button { width: 44px; height: 44px; color: var(--u2-ink-3); font-size: 17px; } #ssch .sct_10 .sct_op_btn > button:hover { color: var(--u2-celadon-deep); } #ssch .shop_icon { margin: 0 4px 0 0; padding: 0 8px; border-radius: 999px; background: var(--u2-celadon-soft); color: var(--u2-celadon-deep); font-size: 13.5px; font-weight: 600; line-height: 22px; } @media (max-width: 1024px) { #ssch .sct_10 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { #ssch .sct_10 { grid-template-columns: 1fr; } #ssch_frm .ssch_scharea .ssch_input { flex-basis: 100%; } } /* --- 12. 강의 검색 결과 (휴대폰) --- */ #ssch:has(> #ssch_frm > form > div) { margin: 0; } #ssch_frm:has(> form > div) { margin: 12px 0; padding: 4px 0; } #ssch_frm > form > div { margin: 12px 16px; font-size: 15px; color: var(--u2-ink); line-height: 2.2; } #ssch_frm > form > div strong, #ssch_frm .ssch_lbl { margin: 0 0 2px; font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--u2-ink-2); } /* 검색범위 칸: 네모와 글자가 줄바꿈에 떨어지지 않게 글자 앞에 네모를 그린다 */ #ssch_frm > form > div:has(> input[type="checkbox"]) { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; line-height: 1.5; } #ssch_frm > form > div:has(> input[type="checkbox"]) > strong { flex-basis: 100%; margin-bottom: 2px; } #ssch_frm > form input[type="checkbox"] { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; } #ssch_frm > form input[type="checkbox"] + label { position: relative; display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding-left: 28px; font-size: 15px; cursor: pointer; } #ssch_frm > form input[type="checkbox"] + label::before { content: ""; position: absolute; top: 50%; left: 0; width: 20px; height: 20px; margin-top: -10px; box-sizing: border-box; border: 1px solid #7D8A95; border-radius: 4px; background: #fff; } #ssch_frm > form input[type="checkbox"]:checked + label::before { background: var(--u2-celadon); border-color: var(--u2-celadon-deep); } #ssch_frm > form input[type="checkbox"]:checked + label::after { content: ""; position: absolute; top: 50%; left: 7px; width: 6px; height: 11px; margin-top: -8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } #ssch_frm > form input[type="checkbox"]:focus-visible + label::before { outline: 3px solid var(--u2-celadon); outline-offset: 2px; } #ssch_frm > form .frm_input { height: 46px; padding: 0 12px; border: 1px solid #7D8A95; border-radius: var(--u2-radius); box-shadow: none; font-size: 16px; color: var(--u2-ink); } #ssch_frm > form #ssch_q { width: calc(100% - 84px); } #ssch_frm > form .btn_submit { width: 76px; height: 46px; padding: 0; border-radius: var(--u2-radius); font-size: 15px; font-weight: 600; letter-spacing: 0; vertical-align: middle; } #ssch_frm > form > p { padding: 12px 16px; border-color: var(--u2-line); font-size: 14px; line-height: 1.6; color: var(--u2-ink-2); } #ssch_frm #ssch_ov { margin: 12px 16px 4px; font-size: 15px; color: var(--u2-ink-2); } #ssch_frm #ssch_ov b { color: var(--u2-celadon-deep); } #ssch_frm p.ssch_xlink { margin: 8px 16px 10px; } #ssch #sct_sort { margin: 0 0 10px; } #ssch #sct_sort button { height: 44px; padding: 0 44px 0 14px; border: 1px solid var(--u2-line); border-radius: var(--u2-radius); background: #fff; color: var(--u2-ink); font: 600 14px var(--u2-sans); } #ssch #sct_sort button .fa-caret-down { line-height: 42px; color: var(--u2-ink-3); } #ssch #sct_sort ul { border: 1px solid var(--u2-line); border-radius: var(--u2-radius); overflow: hidden; background: #fff; } #ssch #sct_sort ul::before, #ssch #sct_sort ul::after { display: none; } #ssch #sct_sort li { width: 140px; border-top: 1px solid var(--u2-line); } #ssch #sct_sort li:first-child { border-top: 0; } #ssch #sct_sort li a { padding: 12px 14px; font-size: 14px; color: var(--u2-ink); text-align: left; } #ssch #ssch_cate ul { margin: 0 0 6px; } #ssch .list_10 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; margin: 14px 0 0; } #ssch .list_10::before, #ssch .list_10::after { display: none; } #ssch .list_10 .sct_li { float: none; width: auto; height: auto; min-height: 0; margin: 0; padding: 0; background: none; box-shadow: none; text-align: left; } #ssch .list_10 .sct_img { position: relative; width: auto; margin: 0; aspect-ratio: 1 / 1; border-radius: var(--u2-radius); overflow: hidden; background: var(--u2-mist); } #ssch .list_10 .sct_img a { display: block; height: 100%; } #ssch .list_10 .sct_img img { width: 100%; height: 100%; object-fit: cover; } /* 찜 단추: 보이는 동그라미는 36px, 누르는 칸은 44px */ #ssch .list_10 .btn_wish { right: 2px; bottom: 2px; width: 44px; height: 44px; border: 4px solid transparent; border-radius: 50%; background: #fff; background-clip: padding-box; box-shadow: inset 0 0 0 1px var(--u2-line); color: var(--u2-ink-3); } #ssch .list_10 .sct_txt { margin: 10px 0 4px; } #ssch .list_10 .sct_txt a { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--u2-ink); } #ssch .list_10 .sct_cost { font-size: 15px; font-weight: 800; color: var(--u2-ink); } /* --- 13. 전체검색 결과 /bbs/search.php (컴퓨터·휴대폰) --- */ #sch_res_detail { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 24px; padding: 20px; border: 0; border-radius: 10px; background: var(--u2-mist); text-align: left; font-family: var(--u2-sans); } #sch_res_detail :is(select, .frm_input) { height: 48px; padding: 0 12px; border: 1px solid #7D8A95; border-radius: var(--u2-radius); box-shadow: none; background-color: #fff; font: 16px var(--u2-sans); color: var(--u2-ink); } #sch_res_detail select { padding: 0 8px; font-size: 15px; } #sch_res_detail :is(select, .frm_input):focus { border-color: var(--u2-celadon-deep) !important; box-shadow: none; outline: 2px solid var(--u2-celadon); outline-offset: 0; } #sch_res_detail span.sch_wr { display: flex; flex: 1 1 320px; gap: 8px; } #sch_res_detail span.sch_wr .frm_input { flex: 1; min-width: 0; width: auto; } #sch_res_detail .btn_submit { height: 48px; padding: 0 20px; width: auto; font: 600 15px/1 var(--u2-sans); } #sch_res_detail :is(a, button):focus-visible { outline: 3px solid var(--u2-celadon); outline-offset: 2px; } #sch_res_detail .switch_field:not(.chk_box) { padding: 0; display: flex; } #sch_res_detail .switch_field:not(.chk_box) label { width: auto; min-width: 60px; padding: 0 14px; border: 1px solid #7D8A95; background: #fff; box-shadow: none; color: var(--u2-ink-2); font: 600 14px/46px var(--u2-sans); } #sch_res_detail .switch_field:not(.chk_box) input:checked + label { background: var(--u2-ink); border-color: var(--u2-ink); color: #fff; } #sch_res_detail .switch_field input:focus-visible + label { position: relative; z-index: 1; outline: 3px solid var(--u2-celadon); outline-offset: 2px; } /* 휴대폰 상세검색 칸 */ #sch_res_detail div.sch_wr { position: relative; flex: 1 1 100%; margin: 0; background: none; } #sch_res_detail div.sch_wr::after { content: ""; display: block; clear: both; } #sch_res_detail div.sch_wr select { width: calc(50% - 4px); } #sch_res_detail div.sch_wr select#gr_id { margin-right: 8px; } #sch_res_detail div.sch_wr .frm_input { width: 100%; margin-top: 8px; padding-right: 56px; } #sch_res_detail div.sch_wr .btn_submit { bottom: 0; right: 0; width: 48px; padding: 0; border-radius: 0 var(--u2-radius) var(--u2-radius) 0; font-size: 17px; } #sch_res_detail .switch_field.chk_box { padding: 0; } #sch_res_detail .switch_field.chk_box input[type="radio"] + label { min-height: 44px; line-height: 44px; margin-right: 18px; padding-left: 28px; font-size: 15px; color: var(--u2-ink); } #sch_res_detail .switch_field.chk_box input[type="radio"] + label span { top: 12px; width: 20px; height: 20px; border-color: #7D8A95; } #sch_res_detail .switch_field.chk_box input[type="radio"]:checked + label { color: var(--u2-celadon-deep); } #sch_res_detail .switch_field.chk_box input[type="radio"]:checked + label span { border-color: var(--u2-celadon-deep); } #sch_res_detail .switch_field.chk_box input[type="radio"]:checked + label span::before { top: 4px; left: 4px; width: 10px; height: 10px; background: var(--u2-celadon-deep); } /* 결과 요약 */ #sch_res_ov { height: auto; margin: 0 0 20px; padding: 0 0 12px; border: 0; border-bottom: 1px solid var(--u2-line); border-radius: 0; background: none; text-align: left; line-height: 1.5; color: var(--u2-ink-2); font-family: var(--u2-sans); } #sch_res_ov::after { display: none; } #sch_res_ov ul { display: flex; flex-wrap: wrap; gap: 4px 16px; float: none; margin: 0; line-height: 1.5; font-size: 14px; color: var(--u2-ink-3); } #sch_res_ov li { float: none; margin: 0; padding: 0; border: 0; line-height: 1.5; color: var(--u2-ink-3); } #sch_res_ov li strong { margin-left: 4px; color: var(--u2-ink); } #sch_result > #sch_res_ov { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; padding-bottom: 14px; } #sch_result > #sch_res_ov h2 { float: none; margin: 0; font: 700 22px/1.4 var(--u2-serif); color: var(--u2-ink); } #sch_result > #sch_res_ov h2 strong { color: var(--u2-celadon-deep); } /* 전체검색 안의 강의 결과(페이지 안