/* P12 주문서. 원본: PLUGIN_education/css/goods.css 177~263행(#pymntPage)·297~ 쿠폰 창, 디자인 기준 reference-html/design-ref/P12-order.
   상품 표·바탕은 cart.css를 같이 쓴다. 1280px: 왼쪽 835 + 20 + 오른쪽 345. 모바일은 원본 ?pc=m 템플릿 배치(흰 바탕·한 줄·주황 결제 버튼). */
.order { max-width:1240px; margin:0 auto; padding:30px 20px; }
.order .cart-list { margin-bottom:30px; }
.order-error-summary { margin-bottom:16px; padding:14px 20px; border-radius:12px; background:#fff; color:#ff4949; font-size:14px; }
.order-cols { display:flex; align-items:flex-start; gap:20px; }
.order-main { flex:1; min-width:0; }
.order-side { position:sticky; top:20px; z-index:5; flex:0 0 345px; background:#fff; }
.order-box { margin-bottom:20px; padding:30px; border-radius:12px; background:#fff; }
.order-tit { display:flex; justify-content:space-between; align-items:flex-end; gap:10px; padding:0 0 15px 3px; border-bottom:1px solid #8a8a8a; }
.order-tit h2 { color:#000; font-size:17px; font-weight:600; }
.order-tit__note { color:#999; font-size:13px; }
.order-notice { margin-bottom:10px; color:#545454; font-size:13px; }
.order-precaution { margin-bottom:10px; color:#ff4949; font-size:12px; }

/* 신청자·수강자 입력: 원본처럼 라벨 없이 placeholder, 한 줄 배치 */
.order-person { display:flex; flex-wrap:wrap; align-items:flex-start; gap:10px 8px; padding-top:20px; font-size:14px; }
.order-person > span { position:relative; }
.order-person input, .order-person select, .order-learner__request, .order-discount input[type=text] { height:36px; padding:5px 10px; border:1px solid #e0e0e0; border-radius:0; background:#fff; font:inherit; font-size:12px; }
.order-person__name input { width:122px; }
.order-person__phone input { width:152px; }
.order-person__email { display:flex; flex-wrap:wrap; align-items:center; gap:0 6px; }
.order-person__email input { width:152px; }
.order-person__email select { width:130px; padding:5px 3px; font-size:11px; cursor:pointer; }
.order-person input[readonly] { background:#f8f8f8; }
.order-person input[aria-invalid="true"] { border-color:#ff4949; background:#fff8f8; }
/* 오류 문구는 줄이 밀리지 않게 화면에서 감추고(화면낭독기는 aria-describedby로 읽음) 붉은 테두리로만 표시 */
.order-error { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.order-learner { padding-bottom:4px; }
.order-learner__request { display:block; width:100%; margin-top:10px; resize:none; line-height:24px; }
.order-learners > .order-tit { border-bottom:0; padding-bottom:0; }
.order-item { margin-top:12px; }
.order-item + .order-item { margin-top:30px; }
.order-item__tit { padding:0 0 15px 3px; border-bottom:1px solid #8a8a8a; }
.order-copy { display:block; text-align:right; color:#454545; font-size:13px; cursor:pointer; }
.order-item__tit p { margin-top:6px; font-size:14px; }
.order-item__tit p span:first-child { margin-right:3px; font-size:12px; font-weight:600; }
.order-item__tit strong { color:#545454; font-size:15px; font-weight:600; }
.order-item__info { margin-left:5px; color:#999; font-size:14px; }
.order-expand { display:none; }
.order-page input[type=checkbox], .order-page input[type=radio] { margin-right:5px; vertical-align:middle; }

/* SMS 수신 동의 */
.order-sms { margin-bottom:20px; padding:0 10px; }
.order-sms label { color:#666; font-size:13.5px; font-weight:600; cursor:pointer; }
.order-sms__desc { display:inline-block; padding:5px 10px; color:#999; font-size:13px; text-indent:-9px; }
.order-sms details { display:inline-block; color:#333; font-size:13px; }
.order-sms summary { cursor:pointer; list-style:none; }
.order-sms summary::-webkit-details-marker { display:none; }
.order-sms details p { margin-top:8px; padding:10px; border:1px solid #e0e0e0; background:#fff; color:#666; }

/* 적립금/쿠폰 */
.order-discount { padding-top:5px; font-size:13px; }
.order-discount > div { padding:10px 30px 5px 7px; }
.order-discount label { display:inline-block; min-width:96px; cursor:pointer; }
.order-discount input[type=text] { width:120px; height:30px; margin-right:4px; }
.order-discount input:disabled, .order-discount input[readonly] { background:#f8f8f8; }
.order-discount__enable { margin-left:5px; color:#688bb7; }
.order-coupon-open { margin-left:5px; padding:5px 10px; border:0; background:#fc6d35; color:#fff; font:inherit; font-size:13px; cursor:pointer; }
.order-help { margin-top:6px; color:#ff4949; font-size:12px; }

/* 오른쪽: 주문금액·결제 정보 */
.order-calc { margin:0; padding-top:20px; }
.order-calc > div { display:flex; justify-content:space-between; align-items:baseline; height:35px; margin-bottom:15px; font-size:14px; }
.order-calc dd { margin:0; }
.order-calc strong { margin-right:3px; color:#000; font-size:30px; font-weight:500; }
.order-calc em { font-size:14px; font-style:normal; }
.order-calc .order-calc__total { margin-bottom:0; color:#000; font-weight:600; }
.order-calc .order-calc__total strong { color:#ff4949; }
.order-tit--pay { margin-top:60px; }
.order-pay { display:flex; flex-wrap:wrap; gap:6px 14px; padding:20px 0; margin-left:10px; font-size:14px; }
.order-pay label { cursor:pointer; }
.order-pay__desc { padding:14px; background:#f8f8f8; }
.order-pay__desc p { color:#545454; font-size:13px; line-height:22px; }
.order-pay__desc strong { color:#ff4949; font-weight:600; }
.order-pay__heading { margin-bottom:10px; font-size:15px !important; }
.order-pay__blue { color:#0070c0 !important; }
.order-submit { display:block; width:100%; border:0; border-radius:12px; background:#ff4949; color:#fff; font:inherit; font-size:19px; font-weight:600; line-height:60px; cursor:pointer; }
.order-submit:hover { background:#ef3b3b; }
.order-submit:disabled { background:#ccc; cursor:progress; }
.order-review-note { margin-top:10px; color:#767676; font-size:13px; text-align:center; }

/* 쿠폰 선택 창(원본 jQuery UI 다이얼로그 .coupon_dialog) */
.order-coupon { width:min(450px, calc(100% - 24px)); padding:1em 1.2em 1.8em; border:1px solid #ccc; }
.order-coupon::backdrop { background:rgba(0,0,0,.4); }
.order-coupon h2 { padding-bottom:6px; font-size:15px; font-weight:600; }
.order-coupon__note { padding-bottom:12px; color:#797979; font-size:12px; }
.order-coupon ul { list-style:none; margin:0 0 16px; padding:0; }
.order-coupon li label { display:block; padding:9px 10px; border:1px solid #e0e0e0; border-top:0; background:#f5f5f5; color:#555; font-size:12.5px; cursor:pointer; }
.order-coupon li:first-child label { border-top:1px solid #e0e0e0; }
.order-coupon li label.is-disabled { color:#aaa; cursor:no-drop; }
.order-coupon__buttons { display:flex; justify-content:center; gap:8px; }
.order-coupon__buttons button { width:150px; border:1px solid #333; background:#333; color:#fff; font:inherit; font-size:15px; line-height:38px; cursor:pointer; }
.order-coupon__buttons button:first-child { border-color:#ccc; background:#fff; color:#333; }

@media(max-width:1199px) {
    .order-cols { flex-direction:column; align-items:stretch; gap:0; }
    .order-side { position:static; flex:none; background:none; }
    .order-tit--pay { margin-top:40px; }
}
/* 모바일: 원본 ?pc=m — 흰 바탕, 칸을 한 줄씩, 첫 수강자만 보이고 펼치기, 주황 결제 버튼 */
@media(max-width:767px) {
    .order { padding:0 0 30px; }
    .order .cart-list { margin-bottom:0; }
    .order-error-summary { margin:12px 20px; background:#fff5f5; }
    .order-precaution, .order-notice { padding:0 20px; }
    .order-box { margin-bottom:0; padding:20px; border-radius:0; }
    .order-person { display:grid; grid-template-columns:1fr; gap:10px; }
    .order-person__name input, .order-person__phone input { width:100%; }
    .order-person__email { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) 30%; gap:6px; }
    .order-person__email input, .order-person__email select { width:100%; }
    .order-person input, .order-person select { height:40px; font-size:14px; }
    .order-learner__request { height:80px; }
    .order-item__tit strong { font-size:15px; }
    .order-item__info { display:block; margin:2px 0 0; font-size:11px; }
    .order-expand { display:block; width:calc(100% + 40px); margin:16px -20px -20px; padding:0; border:0; background:#fd6e36; color:#fff; font:inherit; font-size:15px; font-weight:700; line-height:44px; cursor:pointer; }
    .order-expand[hidden] { display:none; }
    .order-expand::before { content:'⌄ '; }
    .order-learners.is-collapsed .is-extra { display:none; }
    .order-sms { margin:20px 0; padding:0 10px; }
    .order-discount > div { padding:10px 0 5px; }
    .order-discount input[type=text] { width:calc(100% - 140px); }
    .order-coupon-open { margin:8px 0 0; }
    .order-side .order-box > .order-tit:first-child { justify-content:center; }
    .order-calc > div { margin-bottom:6px; }
    .order-submit { width:calc(100% - 40px); margin:0 20px; border-radius:6px; background:#fc6d35; font-size:16px; line-height:52px; }
    .order-submit:hover { background:#ea5216; }
}