/* 그누보드 게시판(공지·FAQ·1:1 문의) + 영카트(장바구니·주문서·주문 완료·주문 조회·쿠폰함)
   그누보드: theme/classpick/skin/board/notice·gallery, skin/faq/basic, skin/qa/basic(스킨이 cs_css()로 붙임) · skin/shop/basic
   게시글 본문(#bo_v_con·#ans_con·.prose)의 글머리·간격은 css/prose.css가 맡으므로 여기서는 본문 바깥(직계 자식)만 꾸밉니다
   접두사: cs(고객센터 셸) bl(게시판 목록) bv(게시판 보기·댓글) bw(게시판 쓰기) gl(갤러리) faq qa · sh(영카트 공통) cart of(주문서) pg(테스트 결제창) oc(주문 완료)
           oi(주문 조회) ov(주문 상세·환불) rf(환불 신청) cpn(쿠폰) rc(영수증) gx(데모 상태 전환) */

/* ── 데모 상태 전환 (공통 승격 후보: course.css .state-demo와 같은 역할) ── */
.gx-demo{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;padding:10px 12px;border:1px dashed var(--border-strong);border-radius:var(--r-md);font-size:12px;font-weight:600;color:var(--text-3)}
.gx-demo .seg button,.gx-demo .seg a{height:28px;padding:0 10px;font-size:12.5px}
.gx-demo .seg{max-width:100%;overflow-x:auto;scrollbar-width:none}
.gx-demo .seg::-webkit-scrollbar{display:none}
.gx-demo .seg > *{white-space:nowrap;flex:none}
.gx-mark{background:var(--lime);color:var(--ink-900);border-radius:2px;padding:0 1px}

/* ═════════════ 고객센터 셸 (공지·FAQ·1:1 문의) ═════════════ */
.cs-container{max-width:calc(960px + var(--gutter) * 2)}
.cs-hero{background:var(--bg-subtle);border-bottom:1px solid var(--border)}
.cs-hero .breadcrumb{padding-top:28px}
.cs-hero-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.cs-hero h1{font-size:32px;font-weight:800;letter-spacing:-.04em;line-height:1.3}
.cs-hero p{color:var(--text-2);margin-top:4px}
.cs-contact{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);font-size:13px;color:var(--text-2);flex:none}
.cs-contact .cs-ic{width:36px;height:36px;border-radius:10px;background:var(--ink-100);display:grid;place-items:center;flex:none}
.cs-contact b{display:block;font-size:14px;color:var(--text)}
.cs-tabs{margin-top:24px;border-bottom:0}
.cs-tabs .tab{height:52px;font-size:15.5px}
.cs-tabs .tab svg{width:17px;height:17px}
.cs-tabs .tab.is-active::after{bottom:0}
.cs-body{padding-top:32px;padding-bottom:72px}

/* 목록 툴바: 분류 칩 + 검색 */
.bl-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;margin-bottom:16px}
.bl-total{font-size:13.5px;color:var(--text-3);font-weight:500;margin-bottom:10px}
.bl-total b{color:var(--text);font-weight:700}
.bl-search{display:flex;gap:6px;align-items:center}
.bl-search .select{width:128px;height:40px;font-size:14px}
.bl-search .input-icon{width:240px}
.bl-search .input{height:40px;font-size:14px}
.bl-search .btn{height:40px}
.bl-result{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:-4px 0 16px;font-size:14px;color:var(--text-2)}
.bl-result b{color:var(--text)}
.bl-result a{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:var(--text-3)}
.bl-result a:hover{color:var(--text)}
.bl-result svg{width:14px;height:14px}
mark{background:var(--lime);color:var(--ink-900);border-radius:2px;padding:0 1px}

/* 목록 (데스크톱 표 → 모바일 카드) */
.bl-list{border-top:2px solid var(--ink-900)}
.bl-head,.bl-row{display:grid;grid-template-columns:76px 84px minmax(0,1fr) 104px 72px;align-items:center;column-gap:8px}
.bl-head{height:46px;font-size:13px;font-weight:600;color:var(--text-3);border-bottom:1px solid var(--border);text-align:center}
.bl-head span:nth-child(3){text-align:left;padding-left:4px}
.bl-row{min-height:62px;border-bottom:1px solid var(--border);font-size:14px;text-align:center;color:var(--text-2)}
.bl-row:hover{background:var(--ink-50)}
.bl-row.is-notice{background:var(--bg-subtle)}
.bl-row.is-notice:hover{background:var(--ink-100)}
.bl-row.is-current{box-shadow:inset 3px 0 0 var(--ink-900)}
.bl-no{font-size:13px;font-variant-numeric:tabular-nums;color:var(--text-3)}
.bl-cat{font-size:13px;font-weight:600;color:var(--text-2)}
.bl-tit{display:flex;align-items:center;gap:6px;min-width:0;text-align:left;padding:14px 4px}
.bl-tit a{min-width:0;font-size:15px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bl-tit a:hover{text-decoration:underline;text-underline-offset:3px}
.bl-row.is-notice .bl-tit a{font-weight:700}
.bl-tit svg{width:15px;height:15px;color:var(--text-3)}
.bl-new{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:4px;background:var(--lime);color:var(--ink-900);font-size:10px;font-weight:800;flex:none}
.bl-date,.bl-hit{font-size:13px;font-variant-numeric:tabular-nums;color:var(--text-3)}
.bl-mmeta{display:none}
.bl-empty{border-bottom:1px solid var(--border)}
.pagination a svg{width:16px;height:16px}
.pagination .pg-disabled{opacity:.35;pointer-events:none}

/* 게시판 보기 */
.bv-head{border-top:2px solid var(--ink-900);padding:24px 0 20px;border-bottom:1px solid var(--border)}
.bv-badges{display:flex;gap:6px;margin-bottom:10px}
.bv-title{font-size:26px;line-height:1.4;font-weight:800;letter-spacing:-.035em}
.bv-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:16px}
.bv-by{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--text-3);flex-wrap:wrap}
.bv-by b{color:var(--text);font-size:14px}
.bv-org{background:var(--lime)}
.bv-org svg{width:8px;height:9px;fill:var(--ink-900);margin-left:2px}
.bv-by .sep{width:1px;height:12px;background:var(--border-strong)}
.bv-by span{display:inline-flex;align-items:center;gap:4px}
.bv-by span svg{width:14px;height:14px}
.bv-tools{display:flex;gap:4px}
.bv-body{padding:32px 0 36px;font-size:15.5px;line-height:1.85;color:var(--ink-700);display:grid;gap:18px}
.bv-body b{color:var(--text)}
.bv-body > ul{display:grid;gap:6px;padding-left:2px}
.bv-body > ul > li{position:relative;padding-left:16px}
.bv-body > ul > li::before{content:"";position:absolute;left:3px;top:.8em;width:5px;height:5px;border-radius:50%;background:var(--ink-900)}
.bv-body > figure{display:grid;gap:8px;max-width:720px}
.bv-body > figure .ph{border-radius:var(--r-lg)}
.bv-body > figure figcaption{font-size:13px;color:var(--text-3);text-align:center}
.bv-table{border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.bv-table .table th{white-space:normal}
.bv-table .table td{font-size:14px;line-height:1.6;vertical-align:top}
.bv-table .table td:first-child{font-weight:700;color:var(--text);white-space:nowrap}
.bv-callout{padding:16px 18px;border-radius:var(--r-md);background:var(--bg-subtle);font-size:14.5px;line-height:1.7}
.bv-box{border:1px solid var(--border);border-radius:var(--r-lg);margin-top:4px}
.bv-box + .bv-box{margin-top:12px}
.bv-box h4{display:flex;align-items:center;gap:6px;padding:12px 16px;font-size:13.5px;font-weight:700;border-bottom:1px solid var(--border);background:var(--bg-subtle);border-radius:var(--r-lg) var(--r-lg) 0 0}
.bv-box h4 svg{width:16px;height:16px}
.bv-box h4 .count{color:var(--text-3);font-weight:600}
.bv-file{display:flex;align-items:center;gap:12px;padding:12px 16px;font-size:14px}
.bv-file + .bv-file{border-top:1px solid var(--ink-100)}
.bv-file .bv-fic{width:36px;height:36px;border-radius:8px;background:var(--ink-100);display:grid;place-items:center;flex:none;color:var(--text-2)}
.bv-file .grow{min-width:0}
.bv-file .grow b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bv-file .grow small{font-size:12.5px;color:var(--text-3)}
.bv-file a.grow:hover b{text-decoration:underline;text-underline-offset:3px}
.bv-nocmt{display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:wrap;margin-top:24px;padding:14px 16px;border-radius:var(--r-md);background:var(--bg-subtle);font-size:14px;color:var(--text-2)}
.bv-nocmt > span{display:inline-flex;align-items:center;gap:8px}
.bv-nav{margin-top:32px;border-top:1px solid var(--ink-900)}
.bv-nav a{display:grid;grid-template-columns:96px minmax(0,1fr) auto;align-items:center;gap:12px;padding:15px 8px;border-bottom:1px solid var(--border);font-size:14.5px}
.bv-nav a:hover{background:var(--ink-50)}
.bv-nav a:hover .bv-nav-t{text-decoration:underline;text-underline-offset:3px}
.bv-nav .bv-nav-k{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--text-3)}
.bv-nav .bv-nav-k svg{width:15px;height:15px}
.bv-nav .bv-nav-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.bv-nav .bv-nav-d{font-size:13px;color:var(--text-3);font-variant-numeric:tabular-nums}
.bv-nav .bv-nav-none{color:var(--text-3)}
.bv-actions{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:24px}
.bv-own{justify-content:flex-end;flex-wrap:wrap}
.cs-hero-board{padding-bottom:28px}
.bl-cmt{font-size:12px;font-weight:700;color:var(--text-3);font-variant-numeric:tabular-nums;flex:none}
.bl-cmt::before{content:"["}
.bl-cmt::after{content:"]"}

/* 게시판 댓글 (값은 강의 Q&A 댓글 .cv-cmt·.cv-write와 같음) */
.bv-cmt{margin-top:28px}
.bv-cmt-h{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:700}
.bv-cmt-h svg{width:16px;height:16px}
.bv-cmt-h .count{color:var(--text-3);font-weight:600}
.bv-cmts{display:grid;gap:12px;margin-top:16px;padding-top:14px;border-top:1px dashed var(--border-strong)}
.bv-cmt-item{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;font-size:14px;line-height:1.6;color:var(--text-2)}
.bv-cmt-main{min-width:0}
.bv-cmt-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.bv-cmt-top b{font-size:13px;font-weight:700;color:var(--text)}
.bv-cmt-top small{font-size:12px;color:var(--text-3)}
.bv-cmt-lock{display:inline-flex;align-items:center;gap:3px}
.bv-cmt-lock svg{width:12px;height:12px}
.bv-cmt-del{display:inline-flex;align-items:center;gap:3px;margin-left:auto;font-size:12px;font-weight:600;color:var(--text-3)}
.bv-cmt-del:hover{color:var(--danger)}
.bv-cmt-del svg{width:13px;height:13px}
.bv-cmt-txt{overflow-wrap:anywhere}
.bv-cmt-empty{margin-top:12px;font-size:14px;color:var(--text-3)}
.bv-cmt-write{padding:20px;margin-top:16px}
.bv-cmt-write .textarea{min-height:120px}
.bv-cmt-guest{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px}
.bv-cmt-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:10px;font-size:12.5px;color:var(--text-3)}
.bv-cmt-count b{color:var(--text);font-variant-numeric:tabular-nums}

/* 게시판 쓰기 (1:1 문의 쓰기 .qa-form을 함께 씀) */
.bw-opts{display:flex;gap:8px 18px;flex-wrap:wrap;margin-bottom:20px;padding:12px 14px;border-radius:var(--r-md);background:var(--bg-subtle)}
.bw-opts .check{font-size:14px}
.bw-tit-row{gap:8px}
.bw-autosave{position:relative}
.bw-autosave #autosave_pop{position:absolute;right:0;top:calc(100% + 6px);z-index:20;width:min(320px,calc(100vw - var(--gutter) * 2));padding:14px 16px;box-shadow:var(--sh-3);font-size:13.5px}
.bw-autosave #autosave_pop strong{display:block;font-weight:700;margin-bottom:8px}
.bw-autosave #autosave_pop ul{display:grid;gap:2px;max-height:220px;overflow-y:auto}
.bw-autosave #autosave_pop li{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--ink-100)}
.bw-autosave #autosave_pop li a{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.bw-autosave #autosave_pop li span{font-size:12px;color:var(--text-3);white-space:nowrap}
.bw-autosave #autosave_pop > div{display:flex;justify-content:flex-end;margin-top:8px}
.bw-editor{min-width:0}
.bw-editor textarea{width:100%;min-height:280px}
.bw-fdel{font-size:13px;margin-top:-2px}

/* 갤러리 (디자인 시스템 강의 카드 격자) */
.gl-grid{margin-bottom:8px}
.gl-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.gl-meta span{display:inline-flex;align-items:center;gap:3px}
.gl-meta svg{width:13px;height:13px}

/* FAQ */
.faq-hero{display:grid;justify-items:center;text-align:center;gap:14px;padding:36px 24px 30px;border-radius:var(--r-xl);background:var(--ink-900);color:#fff}
.faq-hero h2{font-size:24px;font-weight:800;letter-spacing:-.035em}
.faq-hero p{font-size:14px;color:rgba(255,255,255,.66);margin-top:-8px}
.faq-sch{display:flex;gap:8px;width:100%;max-width:560px}
.faq-sch .input-icon{flex:1}
.faq-sch .input{height:52px;font-size:16px;border-color:transparent}
.faq-sch .btn{height:52px}
.faq-keys{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;font-size:13px;color:rgba(255,255,255,.6)}
.faq-keys a{height:30px;padding:0 11px;border-radius:999px;background:rgba(255,255,255,.1);color:#fff;font-weight:600;display:inline-flex;align-items:center}
.faq-keys a:hover{background:rgba(255,255,255,.18)}
.faq-cats{margin:28px 0 16px}
.faq-cats .chip .count{font-size:12px;font-weight:700;opacity:.6}
.faq-acc summary{gap:14px;padding:18px 20px;font-weight:600;font-size:15.5px;line-height:1.5}
.faq-acc summary:hover{background:var(--ink-50)}
.faq-q,.faq-a-mark{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-size:13px;font-weight:800;flex:none}
.faq-q{background:var(--ink-900);color:#fff}
.faq-acc summary .faq-cat{font-size:12px;font-weight:600;color:var(--text-3);white-space:nowrap}
.faq-acc details[open] summary{font-weight:700}
.faq-acc .acc-body{display:flex;gap:14px;padding:4px 20px 22px;background:var(--bg)}
.faq-a-mark{background:var(--lime-soft);color:var(--lime-deep)}
.faq-a{flex:1;min-width:0;display:grid;gap:10px;font-size:15px;line-height:1.75;color:var(--ink-700);padding-top:2px}
.faq-a b{color:var(--text)}
.faq-a > ul{display:grid;gap:4px}
.faq-a > ul > li{position:relative;padding-left:14px}
.faq-a > ul > li::before{content:"";position:absolute;left:2px;top:.78em;width:4px;height:4px;border-radius:50%;background:var(--ink-700)}
.faq-a .faq-link{display:inline-flex;align-items:center;gap:4px;font-size:14px;font-weight:700;color:var(--text);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--border-strong)}
.faq-a .faq-link svg{width:15px;height:15px}
.faq-more{display:flex;align-items:center;gap:20px;margin-top:32px;padding:24px 28px;border:1px solid var(--border);border-radius:var(--r-xl)}
.faq-more .faq-more-ic{width:52px;height:52px;border-radius:14px;background:var(--ink-100);display:grid;place-items:center;flex:none}
.faq-more .faq-more-ic svg{width:24px;height:24px}
.faq-more h3{font-size:18px;font-weight:800;letter-spacing:-.03em}
.faq-more p{font-size:14px;color:var(--text-2);margin-top:2px}

/* 1:1 문의 목록 */
.qa-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:24px}
.qa-summary .stat{display:flex;align-items:center;gap:14px}
.qa-summary .stat .stat-value{margin:0;font-size:22px}
.qa-summary .qa-sic{width:40px;height:40px;border-radius:10px;background:var(--ink-100);display:grid;place-items:center;flex:none}
.qa-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.qa-toolbar .row{gap:8px}
.qa-toolbar .select{width:132px;height:40px;font-size:14px}
.qa-toolbar .qa-stx{width:200px}
.qa-toolbar .qa-stx .input,.qa-toolbar .btn{height:40px;font-size:14px}
.qa-row > .badge{justify-self:center}
.qa-list{border-top:2px solid var(--ink-900)}
.qa-head,.qa-row{display:grid;grid-template-columns:64px 104px minmax(0,1fr) 108px 108px;align-items:center;column-gap:8px}
.qa-head{height:46px;font-size:13px;font-weight:600;color:var(--text-3);border-bottom:1px solid var(--border);text-align:center}
.qa-head span:nth-child(3){text-align:left;padding-left:4px}
.qa-row{min-height:64px;border-bottom:1px solid var(--border);text-align:center;font-size:13.5px;color:var(--text-3)}
.qa-row:hover{background:var(--ink-50)}
.qa-row .qa-tit{display:flex;align-items:center;gap:6px;min-width:0;padding:14px 4px;text-align:left}
.qa-row .qa-tit a{font-size:15px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qa-row .qa-tit a:hover{text-decoration:underline;text-underline-offset:3px}
.qa-row .qa-tit svg{width:15px;height:15px;color:var(--text-3)}
.qa-row .qa-cat{font-weight:600;color:var(--text-2)}
.qa-row .num{font-variant-numeric:tabular-nums}
.qa-rel{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--text-3);white-space:nowrap}
.qa-rel svg{width:13px;height:13px}
.qa-mmeta{display:none}
.qa-note{margin-top:20px}
.qa-gate{max-width:440px;margin:24px auto 0;text-align:center;padding:40px 28px;border:1px solid var(--border);border-radius:var(--r-xl)}
.qa-gate .empty-ic{width:56px;height:56px;border-radius:50%;background:var(--ink-100);display:grid;place-items:center;margin:0 auto 14px}
.qa-gate h2{font-size:19px;font-weight:800;letter-spacing:-.03em}
.qa-gate p{font-size:14px;color:var(--text-2);margin:6px 0 20px}

/* 1:1 문의 쓰기 */
.qa-wlayout{display:grid;grid-template-columns:minmax(0,1fr) 288px;gap:32px;align-items:start}
.qa-form{border-top:2px solid var(--ink-900);padding-top:24px}
.qa-form .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.qa-form .field{min-width:0}
.qa-form .help{margin-top:2px}
.qa-parent{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:var(--r-md);background:var(--bg-subtle);font-size:14px;margin-bottom:22px}
.qa-parent b{font-weight:700}
.qa-parent .grow{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qa-counter{font-size:12.5px;color:var(--text-3);text-align:right;font-variant-numeric:tabular-nums}
.qa-recv{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;align-items:center}
.qa-recv .check{font-size:14px;white-space:nowrap}
.qa-files{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.qa-file{position:relative;min-width:0;display:flex;align-items:center;gap:10px;min-height:48px;padding:6px 6px 6px 14px;border:1px dashed var(--border-strong);border-radius:var(--r-md);font-size:14px;color:var(--text-3)}
.qa-file.has-file{border-style:solid;color:var(--text)}
.qa-file .qa-fno{font-size:12px;font-weight:700;color:var(--text-3);flex:none}
.qa-file .grow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qa-file input{position:absolute;width:1px;height:1px;opacity:0}
.qa-file .btn{flex:none}
.qa-wactions{display:flex;justify-content:flex-end;gap:8px;margin-top:28px;padding-top:20px;border-top:1px solid var(--border)}
.qa-aside{position:sticky;top:calc(var(--header-h) + 20px);display:grid;gap:12px}
.qa-aside .panel-body{padding:16px 18px}
.qa-aside h4{font-size:14px;font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.qa-aside h4 svg{width:16px;height:16px}
.qa-aside ul{display:grid;gap:2px}
.qa-aside ul a{display:flex;align-items:center;gap:6px;padding:7px 0;font-size:13.5px;color:var(--text-2)}
.qa-aside ul a:hover{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.qa-aside ul a svg{width:14px;height:14px;flex:none;color:var(--text-3)}
.qa-aside .kv{font-size:13px;gap:6px 12px}

/* 1:1 문의 보기 */
.qa-v-info{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.qa-v-info span{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border-radius:var(--r-sm);background:var(--bg-subtle);font-size:12.5px;font-weight:600;color:var(--text-2)}
.qa-v-info span svg{width:14px;height:14px}
.qa-v-info .on{color:var(--text)}
.qa-v-info .on svg{color:var(--lime-ink)}
.qa-v-link{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--r-md);font-size:14px}
.qa-v-link:hover{border-color:var(--ink-900)}
.qa-v-link .ph{width:64px;aspect-ratio:4/3;border-radius:6px;flex:none}
.qa-v-link .qa-v-fic{width:40px;height:40px;border-radius:8px;background:var(--ink-100);display:grid;place-items:center;flex:none;color:var(--text-2)}
.qa-v-link > span:not(.ph):not(.qa-v-fic){min-width:0}
.qa-locked{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;color:var(--text-3)}
.qa-locked svg{width:14px;height:14px}
.qa-v-link small{display:block;font-size:12.5px;color:var(--text-3)}
.qa-v-link b{display:block;font-weight:600}
.qa-shot{display:grid;grid-template-columns:minmax(0,320px);gap:8px}
.qa-shot .ph{border-radius:var(--r-md)}
.qa-answer{margin-top:28px;border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden}
.qa-answer-head{display:flex;align-items:center;gap:12px;padding:16px 20px;background:var(--bg-subtle);border-bottom:1px solid var(--border)}
.qa-answer-head b{display:block;font-size:15px}
.qa-answer-head small{font-size:12.5px;color:var(--text-3)}
.qa-answer-head .grow{min-width:0}
.qa-staff-av{background:var(--ink-900);color:var(--lime)}
.qa-staff-av svg{width:16px;height:16px}
.qa-ansform .qa-form{border-top:0;padding-top:20px}
.qa-ansform .qa-wactions{margin-top:4px}
.qa-answer-body{padding:20px 22px 24px;display:grid;gap:14px;font-size:15px;line-height:1.8;color:var(--ink-700)}
.qa-answer-body b{color:var(--text)}
.qa-answer-body > ol{display:grid;gap:6px;counter-reset:qn}
.qa-answer-body > ol > li{position:relative;padding-left:28px;counter-increment:qn}
.qa-answer-body > ol > li::before{content:counter(qn);position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:6px;background:var(--ink-900);color:#fff;font-size:11.5px;font-weight:800;display:grid;place-items:center;line-height:1}
.qa-answer-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 20px;border-top:1px solid var(--border);font-size:14px;color:var(--text-2)}
.qa-wait{display:flex;gap:14px;align-items:flex-start;margin-top:28px;padding:22px;border:1px dashed var(--border-strong);border-radius:var(--r-xl)}
.qa-wait .qa-wait-ic{width:44px;height:44px;border-radius:12px;background:var(--warn-bg);color:var(--warn);display:grid;place-items:center;flex:none}
.qa-wait b{display:block;font-size:16px}
.qa-wait p{font-size:14px;color:var(--text-2);margin-top:4px}
.qa-relq{margin-top:36px}
.qa-relq h3{font-size:16px;font-weight:800;letter-spacing:-.02em;margin-bottom:10px}

/* ═════════════ 영카트 공통 ═════════════ */
.sh-page{background:var(--bg-subtle)}
.sh-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;padding:36px 0 24px}
.sh-head h1{font-size:32px;font-weight:800;letter-spacing:-.04em;line-height:1.3}
.sh-head p{color:var(--text-2);margin-top:4px;font-size:14.5px}
.sh-head .steps{font-size:13.5px}
.sh-head .steps .sep{width:28px;flex:none}
.sh-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:28px;align-items:start;padding-bottom:64px}
.sh-main{min-width:0;display:grid;gap:16px}
.sh-aside{position:sticky;top:calc(var(--header-h) + 20px);display:grid;gap:12px}
.sh-sum{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--sh-2);padding:22px 24px 24px}
.sh-sum h3{font-size:17px;font-weight:800;letter-spacing:-.03em;margin-bottom:16px}
.sh-rows{display:grid;gap:10px;font-size:14.5px}
.sh-rows > div{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.sh-rows dt{color:var(--text-2)}
.sh-rows dd{font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.sh-rows .minus dd{color:var(--lime-ink)}
.sh-rows .sub{font-size:13px}
.sh-rows .sub dt{color:var(--text-3);padding-left:12px;position:relative}
.sh-rows .sub dt::before{content:"";position:absolute;left:2px;top:.1em;width:6px;height:.6em;border-left:1px solid var(--border-strong);border-bottom:1px solid var(--border-strong)}
.sh-rows .sub dd{font-weight:600;color:var(--text-3)}
.sh-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}
.sh-total dt{font-size:15px;font-weight:700}
.sh-total dd{font-size:26px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.sh-total dd small{font-size:15px;font-weight:700;margin-left:1px}
.sh-sum .btn-lg{margin-top:18px}
.sh-sum-note{font-size:12.5px;color:var(--text-3);margin-top:12px;line-height:1.6;display:flex;gap:6px}
.sh-sum-note svg{width:14px;height:14px;flex:none;margin-top:3px}
.sh-type{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:5px;font-size:11px;font-weight:700;background:var(--ink-100);color:var(--text-2)}
.sh-type.is-pkg{background:var(--ink-900);color:#fff}
.sh-type.is-plan{background:var(--lime);color:var(--ink-900)}
.sh-thumb{position:relative;width:120px;aspect-ratio:4/3;border-radius:var(--r-md);flex:none}
.sh-thumb.is-plan{background:var(--ink-900);display:grid;place-items:center;color:var(--lime);font-weight:800;font-size:14px;letter-spacing:-.02em}
.sh-thumb.is-plan b{font-size:22px;line-height:1}
.sh-thumb.is-plan span{display:grid;justify-items:center;gap:2px;color:#fff}
.sh-thumb.is-plan span small{font-size:11px;font-weight:600;color:rgba(255,255,255,.6)}
.sh-thumb.is-pkg .ph{position:absolute;width:70%;aspect-ratio:4/3;border-radius:7px;box-shadow:0 0 0 2px var(--bg)}
.sh-thumb.is-pkg .ph:nth-child(1){left:0;top:0}
.sh-thumb.is-pkg .ph:nth-child(2){left:15%;top:12%}
.sh-thumb.is-pkg .ph:nth-child(3){right:0;bottom:0}

/* 장바구니 */
.cart-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-bottom:1px solid var(--border)}
.cart-bar .check{font-weight:700}
.cart-bar .check span{color:var(--text-3);font-weight:600}
.cart-items > li{display:flex;gap:16px;padding:20px;align-items:flex-start}
.cart-items > li + li{border-top:1px solid var(--border)}
.cart-items .check{margin-top:2px}
.cart-items .sh-thumb{display:block}
.cart-info{flex:1;min-width:0}
.cart-info .cart-cat{font-size:12.5px;font-weight:600;color:var(--text-3);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cart-info .cart-tit{display:block;font-size:16px;font-weight:700;letter-spacing:-.02em;line-height:1.45;margin-top:3px}
.cart-info a.cart-tit:hover{text-decoration:underline;text-underline-offset:3px}
.cart-meta{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:6px;font-size:13px;color:var(--text-2)}
.cart-meta span{display:inline-flex;align-items:center;gap:4px}
.cart-meta svg{width:14px;height:14px;color:var(--text-3)}
.cart-warn{display:flex;gap:8px;align-items:flex-start;margin-top:12px;padding:10px 12px;border-radius:var(--r-md);font-size:13.5px;line-height:1.55}
.cart-warn svg{width:16px;height:16px;flex:none;margin-top:2px}
.cart-warn a{font-weight:700;text-decoration:underline;text-underline-offset:3px}
.cart-warn.is-member{background:var(--lime-soft);color:var(--lime-deep)}
.cart-warn.is-owned{background:var(--warn-bg);color:#78350F}
.cart-price{text-align:right;flex:none;min-width:120px}
.cart-price .price{justify-content:flex-end;font-size:17px}
.cart-price .cart-orig{display:block;font-size:13px;color:var(--text-3);text-decoration:line-through;font-variant-numeric:tabular-nums;margin-top:2px}
.cart-del{margin:-6px -8px 0 0}
.cart-items li.is-off .cart-info > :not(.cart-warn),.cart-items li.is-off .cart-price,.cart-items li.is-off .sh-thumb{opacity:.5}
.cart-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-top:1px solid var(--border);background:var(--bg-subtle);border-radius:0 0 var(--r-lg) var(--r-lg);font-size:13.5px;color:var(--text-2)}
.cart-foot a{font-weight:600;display:inline-flex;align-items:center;gap:4px}
.cart-foot a:hover{color:var(--text)}
.cart-foot svg{width:15px;height:15px}
.cart-coupon{display:flex;align-items:center;gap:10px;padding:12px 14px;margin-top:14px;border-radius:var(--r-md);background:var(--bg-subtle);font-size:13.5px;color:var(--text-2)}
.cart-coupon svg{width:18px;height:18px;flex:none}
.cart-coupon b{color:var(--text)}
.cart-coupon a{margin-left:auto;font-weight:700;color:var(--text);white-space:nowrap}
.cart-reco{padding:8px 0 72px}
.sh-layout + .sh-demo{margin-top:-36px;margin-bottom:48px}

/* 주문서 */
.of-test{display:flex;align-items:center;gap:16px;padding:16px 20px;border-radius:var(--r-lg);background:var(--ink-900);color:rgba(255,255,255,.78);font-size:13.5px}
.of-test .of-test-ic{width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.08);display:grid;place-items:center;color:var(--lime);flex:none}
.of-test b{color:#fff;font-size:15px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.of-test .grow > span{display:block;margin-top:2px;line-height:1.55}
.of-card-no{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 6px 0 14px;border-radius:var(--r-md);background:rgba(255,255,255,.08);font-family:var(--font-mono);font-size:14px;color:#fff;white-space:nowrap;flex:none}
.of-card-no button{height:30px;padding:0 10px;border-radius:6px;background:rgba(255,255,255,.12);color:#fff;font-family:var(--font);font-size:12.5px;font-weight:600}
.of-card-no button:hover{background:rgba(255,255,255,.2)}
.of-sec .panel-head h3{display:flex;align-items:center;gap:8px}
.of-sec .panel-head h3 .count{font-size:14px;color:var(--text-3);font-weight:700}
.of-sec .panel-head .help{font-weight:500}
.of-items > li{display:flex;gap:16px;align-items:flex-start}
.of-items > li + li{margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}
.of-items .sh-thumb{width:104px}
.of-items .cart-info .cart-tit{font-size:15.5px}
.of-period{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:6px 10px;border-radius:var(--r-sm);background:var(--bg-subtle);font-size:12.5px;font-weight:600;color:var(--text-2)}
.of-period svg{width:14px;height:14px}
.of-pkg-list{margin-top:10px;display:grid;gap:4px;font-size:13px;color:var(--text-2)}
.of-pkg-list li{display:flex;align-items:center;gap:6px}
.of-pkg-list svg{width:14px;height:14px;color:var(--text-3)}
.of-pkg-list .badge{margin-left:2px}
.of-pkg-list li.is-ex .clamp-1{color:var(--text-3);text-decoration:line-through;text-decoration-color:var(--ink-400)}
.of-ded{margin-top:12px;padding:10px 12px;border-radius:var(--r-md);background:var(--bg-subtle);border:1px solid var(--border)}
.of-ded-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;font-size:13.5px;font-weight:700}
.of-ded-row + .of-ded-row{margin-top:4px}
.of-ded-row > span{display:flex;gap:6px;min-width:0}
.of-ded-row svg{width:15px;height:15px;flex:none;margin-top:3px}
.of-ded-row b{color:var(--lime-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.of-ded p{margin-top:4px;font-size:12.5px;line-height:1.55;color:var(--text-3)}
.of-ext{display:flex;align-items:center;gap:10px;margin-top:10px;padding:10px 12px;border-radius:var(--r-md);border:1px solid var(--border)}
.of-ext > div{display:grid;gap:1px;min-width:0}
.of-ext small{font-size:11.5px;font-weight:600;color:var(--text-3)}
.of-ext b{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.of-ext > svg{width:16px;height:16px;color:var(--text-3);flex:none}
.of-ext .is-new b{color:var(--text);box-shadow:inset 0 -.4em 0 var(--lime-soft)}
.of-nodeliver{display:flex;gap:8px;align-items:center;margin-top:16px;font-size:13px;color:var(--text-3)}
.of-nodeliver svg{width:15px;height:15px}
.of-disc{display:grid;gap:18px}
.of-disc-row{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:start}
.of-disc-row > .label{padding-top:11px}
.of-coupon-box{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 6px 6px 14px;border:1px solid var(--border-strong);border-radius:var(--r-md);font-size:14.5px}
.of-coupon-box .grow{min-width:0}
.of-coupon-box .grow b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.of-coupon-box .grow small{display:block;font-size:12.5px;color:var(--text-3)}
.of-coupon-box .of-cp-amt{font-weight:800;color:var(--lime-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.of-coupon-box.is-empty{color:var(--text-3)}
.of-pay{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.of-pay-opt{position:relative;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:10px;height:64px;border:1px solid var(--border-strong);border-radius:var(--r-md);font-size:14px;font-weight:600;color:var(--text-2);cursor:pointer;transition:border-color .15s,background .15s;text-align:center}
.of-pay-opt input{position:absolute;opacity:0;pointer-events:none}
.of-pay-opt svg{width:24px;height:24px}
.of-pay-opt:hover{border-color:var(--ink-900);color:var(--text)}
.of-pay-opt.is-on{border-color:var(--ink-900);box-shadow:inset 0 0 0 1px var(--ink-900);color:var(--text);font-weight:700;background:var(--ink-50)}
.of-pay-opt.is-on::after{content:"";position:absolute;right:8px;top:8px;width:18px;height:18px;border-radius:50%;background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2318181B' stroke-width='3.2' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5 10 17l9-10'/%3E%3C/svg%3E") center/11px no-repeat}
.of-pay-opt:has(input:focus-visible){outline:2px solid var(--ink-900);outline-offset:2px}
.of-pay-detail{margin-top:14px;padding:16px;border-radius:var(--r-md);background:var(--bg-subtle);font-size:14px}
.of-pay-detail .form-grid{gap:12px}
.of-pay-detail .help{margin-top:10px;display:flex;gap:6px}
.of-pay-detail .help svg{width:14px;height:14px;flex:none;margin-top:3px}
.of-easy{display:flex;gap:8px;flex-wrap:wrap}
.of-easy .chip{height:40px;background:var(--bg)}
.of-easy .chip.is-active{background:var(--ink-900)}
.of-refund{display:grid;gap:14px}
.of-refund-list{display:grid;gap:8px;padding:16px 18px;border-radius:var(--r-md);background:var(--bg-subtle);font-size:14px;color:var(--text-2)}
.of-refund-list li{display:flex;gap:10px;align-items:flex-start}
.of-refund-list svg{width:16px;height:16px;flex:none;margin-top:3px;color:var(--text)}
.of-refund-list b{color:var(--text)}
.of-agree{display:grid;gap:10px}
.of-agree .check{font-size:14px;align-items:flex-start}
.of-agree .check input{margin-top:1px}
.of-agree .check a{font-weight:700;text-decoration:underline;text-underline-offset:3px;margin-left:4px}
.of-agree .of-agree-all{padding-bottom:10px;border-bottom:1px solid var(--border);font-weight:700;font-size:15px}
.of-agree .req{color:var(--danger);font-weight:700;font-size:12.5px;margin-left:4px}
.of-guest{display:flex;gap:10px;margin-bottom:16px}
.of-pay-err{margin-top:10px}
.mpay-bar{display:none}

/* 쿠폰 선택 모달 */
.cpm-group + .cpm-group{margin-top:20px}
.cpm-group h4{font-size:14px;font-weight:700;margin-bottom:8px}
.cpm-group h4 small{display:block;font-size:12.5px;font-weight:500;color:var(--text-3);margin-top:1px}
.cpm-opt{display:flex;align-items:center;gap:12px;padding:13px 14px;border:1px solid var(--border-strong);border-radius:var(--r-md);cursor:pointer;font-size:14px}
.cpm-opt + .cpm-opt{margin-top:8px}
.cpm-opt:hover{border-color:var(--ink-900)}
.cpm-opt.is-on{border-color:var(--ink-900);box-shadow:inset 0 0 0 1px var(--ink-900)}
.cpm-opt.is-disabled{opacity:.5;cursor:not-allowed;background:var(--bg-subtle)}
.cpm-opt.is-disabled:hover{border-color:var(--border-strong)}
.cpm-opt .radio{pointer-events:none}
.cpm-opt .grow b{display:block;font-weight:700}
.cpm-opt .grow small{display:block;font-size:12.5px;color:var(--text-3);margin-top:1px}
.cpm-opt .cpm-amt{font-weight:800;color:var(--lime-ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.cpm-opt.is-disabled .cpm-amt{color:var(--text-3);font-weight:600;font-size:12.5px}
.cpm-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:18px;padding:14px 16px;border-radius:var(--r-md);background:var(--bg-subtle);font-weight:700}
.cpm-total b{font-size:19px;color:var(--lime-ink);font-variant-numeric:tabular-nums}

/* 테스트 결제창 모달 */
.pg-modal{max-width:420px;overflow:hidden}
.pg-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 18px;background:var(--ink-900);color:#fff;font-size:13.5px;font-weight:600}
.pg-top .badge{font-size:11px}
.pg-body{padding:28px 24px 8px;text-align:center}
.pg-body .pg-merchant{font-size:13px;color:var(--text-3);font-weight:600}
.pg-body .pg-amt{font-size:32px;font-weight:800;letter-spacing:-.035em;font-variant-numeric:tabular-nums;margin-top:2px}
.pg-body .pg-method{font-size:14px;color:var(--text-2);margin-top:2px}
.pg-spin{width:56px;height:56px;margin:24px auto 12px;border-radius:50%;border:4px solid var(--ink-200);border-top-color:var(--ink-900);animation:pg-rot .8s linear infinite}
@keyframes pg-rot{to{transform:rotate(360deg)}}
.pg-msg{font-size:16px;font-weight:700}
.pg-steps{display:grid;gap:8px;margin:20px 0 4px;padding:14px 16px;border-radius:var(--r-md);background:var(--bg-subtle);text-align:left;font-size:13.5px;color:var(--text-3)}
.pg-steps li{display:flex;align-items:center;gap:8px}
.pg-steps li i,.pg-steps li svg{width:16px;height:16px}
.pg-steps li .pg-dot{width:16px;height:16px;border-radius:50%;border:2px solid var(--ink-300);flex:none}
.pg-steps li.is-now{color:var(--text);font-weight:700}
.pg-steps li.is-now .pg-dot{border-color:var(--ink-900);border-right-color:transparent;animation:pg-rot .7s linear infinite}
.pg-steps li.is-done{color:var(--text-2)}
.pg-steps li.is-done .pg-dot{border:0;background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2318181B' stroke-width='3.2' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5 10 17l9-10'/%3E%3C/svg%3E") center/10px no-repeat}
.pg-foot{padding:16px 24px 22px;text-align:center;font-size:12.5px;color:var(--text-3)}

/* 주문 완료 */
.oc-wrap{max-width:calc(760px + var(--gutter) * 2);padding-top:48px;padding-bottom:72px}
.oc-hero{text-align:center}
.oc-check{width:72px;height:72px;border-radius:50%;background:var(--lime);display:grid;place-items:center;margin:0 auto 20px}
.oc-check svg{width:34px;height:34px;stroke-width:2.5;color:var(--ink-900)}
.oc-hero h1{font-size:30px;font-weight:800;letter-spacing:-.04em;line-height:1.3}
.oc-hero p{color:var(--text-2);margin-top:6px}
.oc-steps{justify-content:center;margin-top:24px}
.oc-info{margin-top:32px;display:grid;grid-template-columns:minmax(0,1.35fr) repeat(3,minmax(0,1fr));border:1px solid var(--border);border-radius:var(--r-lg);background:var(--bg)}
.oc-info > div{padding:16px 18px;min-width:0}
.oc-info > div + div{border-left:1px solid var(--border)}
.oc-info dt{font-size:12.5px;font-weight:600;color:var(--text-3);display:flex;align-items:center;gap:4px}
.oc-info dd{font-size:15px;font-weight:700;margin-top:4px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.oc-info dd.oc-amt{font-size:19px;font-weight:800}
.oc-info .oc-copy{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:5px;color:var(--text-3);vertical-align:-4px}
.oc-info .oc-copy:hover{background:var(--ink-100);color:var(--text)}
.oc-info .oc-copy svg{width:14px;height:14px}
.oc-sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:36px 0 12px}
.oc-sec-h h2{font-size:19px;font-weight:800;letter-spacing:-.03em}
.oc-sec-h span{font-size:13px;color:var(--text-3)}
.oc-courses{display:grid;gap:12px}
.oc-course{display:flex;gap:18px;align-items:center;padding:18px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--bg)}
.oc-course .sh-thumb{width:136px}
.oc-ex{display:flex;gap:8px;align-items:flex-start;margin-top:12px;padding:10px 12px;border-radius:var(--r-md);background:var(--bg-subtle);font-size:13px;line-height:1.55;color:var(--text-2)}
.oc-ex svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--text-3)}
.oc-course .cart-info .cart-tit{font-size:16.5px}
.oc-course .progress{margin-top:12px;max-width:260px}
.oc-course .oc-prog{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--text-3);margin-top:10px}
.oc-course .oc-prog .progress{margin:0;flex:1;max-width:200px}
.oc-course-act{display:flex;flex-direction:column;gap:6px;flex:none}
.oc-plan{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:center;padding:22px;border-radius:var(--r-lg);background:var(--ink-900);color:#fff}
.oc-plan .oc-plan-badge{width:88px;height:88px;border-radius:16px;background:var(--lime);color:var(--ink-900);display:grid;place-items:center;text-align:center;font-weight:800;line-height:1.1}
.oc-plan .oc-plan-badge b{display:block;font-size:30px;letter-spacing:-.04em}
.oc-plan .oc-plan-badge small{font-size:12px}
.oc-plan h3{font-size:18px;font-weight:800;letter-spacing:-.03em}
.oc-plan p{font-size:14px;color:rgba(255,255,255,.7);margin-top:4px}
.oc-plan .oc-plan-period{display:flex;gap:20px;flex-wrap:wrap;margin-top:12px;font-size:13px;color:rgba(255,255,255,.6)}
.oc-plan .oc-plan-period b{display:block;font-size:15px;color:#fff;font-variant-numeric:tabular-nums}
.oc-plan .oc-plan-period b.lime{color:var(--lime)}
.oc-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:32px}
.oc-notes{margin-top:28px;display:grid;gap:8px;padding:18px 20px;border-radius:var(--r-lg);background:var(--bg);border:1px solid var(--border);font-size:13.5px;color:var(--text-2)}
.oc-notes li{display:flex;gap:10px;align-items:flex-start}
.oc-notes svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--text-3)}
.oc-notes a{font-weight:700;color:var(--text);text-decoration:underline;text-underline-offset:3px}

/* 영수증 모달 */
.rc-modal{max-width:400px}
.rc-paper{margin:4px 0 0;padding:20px 20px 16px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg);position:relative}
.rc-paper::before{content:"TEST";position:absolute;right:14px;top:14px;height:22px;padding:0 7px;border-radius:5px;background:var(--warn-bg);color:var(--warn);font-size:11px;font-weight:800;display:grid;place-items:center;letter-spacing:.04em}
.rc-title{font-size:16px;font-weight:800;letter-spacing:-.02em}
.rc-sub{font-size:12.5px;color:var(--text-3);margin-top:2px}
.rc-rows{display:grid;gap:7px;margin-top:14px;padding-top:14px;border-top:1px dashed var(--border-strong);font-size:13.5px}
.rc-rows > div{display:flex;justify-content:space-between;gap:12px}
.rc-rows dt{color:var(--text-3);flex:none}
.rc-rows dd{font-weight:600;text-align:right;font-variant-numeric:tabular-nums;min-width:0;overflow-wrap:anywhere}
.rc-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px;padding-top:14px;border-top:1px dashed var(--border-strong);font-weight:800}
.rc-total dd{font-size:21px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.rc-foot{font-size:12px;color:var(--text-3);margin-top:12px;line-height:1.55}

/* MY 셸 안 머리 (front-learn.css .lx-head와 같은 값 · 공통 승격 후보) */
.my-body > .page-head.sh-myhead{padding:0 0 20px}
.sh-myhead h1{font-size:28px}
.sh-myhead p{font-size:14.5px}

/* 주문·환불 내역 */
.oi-sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:20px}
.oi-sum .stat-value{font-size:22px}
.oi-sum .stat-value small{font-size:14px;font-weight:700;margin-left:2px}
.oi-card.is-new{border-color:var(--ink-900);box-shadow:0 0 0 1px var(--ink-900)}
.oi-filter{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.oi-filter .tabs{border-bottom:0}
.oi-filter .tab{height:40px}
.oi-filter .tab.is-active::after{bottom:0}
.oi-list{display:grid;gap:12px}
.oi-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg)}
.oi-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-bottom:1px solid var(--border)}
.oi-card-head .oi-date{font-size:15px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.oi-card-head .oi-no{font-size:12.5px;color:var(--text-3);font-variant-numeric:tabular-nums;margin-left:10px}
.oi-card-head a{font-size:13.5px;font-weight:600;color:var(--text-2);display:inline-flex;align-items:center;gap:2px;white-space:nowrap}
.oi-card-head a:hover{color:var(--text)}
.oi-card-head a svg{width:16px;height:16px}
.oi-card-body{display:flex;gap:16px;align-items:center;padding:18px 20px}
.oi-card-body .sh-thumb{width:112px}
.oi-card-body .cart-info .cart-tit{font-size:15.5px}
.oi-amt{text-align:right;flex:none}
.oi-amt b{display:block;font-size:17px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.oi-amt .badge{margin-top:6px}
.oi-amt s{display:block;font-size:12.5px;color:var(--text-3);font-variant-numeric:tabular-nums}
.oi-card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:12px 20px;border-top:1px solid var(--border);background:var(--bg-subtle);border-radius:0 0 var(--r-lg) var(--r-lg)}
.oi-hint{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text-2)}
.oi-hint svg{width:15px;height:15px}
.oi-hint b{color:var(--text)}
.oi-card-foot .row{gap:6px}
.oi-guest{max-width:460px;margin:0 auto;padding:48px 0 80px}
.oi-guest .panel-body{padding:28px}
.oi-guest h1{font-size:26px;font-weight:800;letter-spacing:-.04em;text-align:center}
.oi-guest > p{text-align:center;color:var(--text-2);margin:6px 0 24px;font-size:14.5px}
.oi-guest-foot{display:flex;justify-content:center;gap:16px;margin-top:16px;font-size:13.5px;color:var(--text-3)}
.oi-guest-foot a{font-weight:600;color:var(--text-2);text-decoration:underline;text-underline-offset:3px}

/* 주문 상세·환불 */
.ov-back{display:inline-flex;align-items:center;gap:4px;font-size:13.5px;font-weight:600;color:var(--text-3);margin-bottom:8px}
.ov-back:hover{color:var(--text)}
.ov-back svg{width:16px;height:16px}
.ov-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ov-title h1{font-size:28px;font-weight:800;letter-spacing:-.04em}
.ov-sub{font-size:14px;color:var(--text-3);margin-top:4px;font-variant-numeric:tabular-nums}
.ov-sub b{color:var(--text-2);font-weight:600}
.ov-steps{margin:0 0 4px;padding:18px 20px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);overflow-x:auto}
.ov-steps .step small{display:block;font-size:11.5px;font-weight:500;color:var(--text-3)}
.ov-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start;margin-top:16px}
.ov-col{display:grid;gap:16px;min-width:0}
.ov-items > li{display:flex;gap:16px;align-items:flex-start}
.ov-items > li + li{margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}
.ov-items .sh-thumb{width:112px}
.ov-learn{margin-top:12px;padding:12px 14px;border-radius:var(--r-md);background:var(--bg-subtle);font-size:13px;color:var(--text-2)}
.ov-learn .row{justify-content:space-between;gap:8px}
.ov-learn b{color:var(--text);font-variant-numeric:tabular-nums}
.ov-learn .progress{margin-top:8px}
.ov-learn .ov-learn-act{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.ov-items > li{flex-wrap:wrap}
.ov-items .ov-learn{flex:0 0 calc(100% - 128px);margin-left:128px;margin-top:0}
.ov-learn > svg{width:15px;height:15px;vertical-align:-3px}
.ov-learn p{font-size:13px}
.ov-pkg-row{display:grid;grid-template-columns:minmax(0,1fr) 140px 40px;gap:12px;align-items:center;padding:7px 0}
.ov-pkg-row + .ov-pkg-row{border-top:1px solid var(--border)}
.ov-learn .ov-pkg-row .progress{margin:0}
.ov-pkg-row b{text-align:right}
.ov-pkg-t{display:flex;align-items:center;gap:6px;min-width:0}
.ov-pkg-t .badge{flex:none}
.ov-steps .step > span:last-child{line-height:1.35}
body[data-role="guest"] .my-wrap{grid-template-columns:minmax(0,1fr)}
.ov-kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px 16px;font-size:14px}
.ov-kv dt{color:var(--text-3)}
.ov-kv dd{text-align:right;font-weight:600;font-variant-numeric:tabular-nums;min-width:0;overflow-wrap:anywhere}
.ov-kv .minus{color:var(--lime-ink)}
.ov-kv .total{font-size:18px;font-weight:800}
.ov-kv .hr{grid-column:1 / -1;height:1px;background:var(--border);margin:2px 0}
.ov-kv dd .btn{margin:-6px 0}
.ov-refund .panel-body{display:grid;gap:14px}
.ov-refund-now{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ov-refund-now > div{padding:12px 14px;border-radius:var(--r-md);background:var(--bg-subtle)}
.ov-refund-now dt{font-size:12px;font-weight:600;color:var(--text-3)}
.ov-refund-now dd{font-size:18px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-top:2px}
.ov-refund-now dd small{font-size:12px;font-weight:600;color:var(--text-3);margin-left:4px}
.ov-refund-now dd.is-ok{color:var(--success)}
.ov-refund-now dd.is-no{color:var(--danger)}
.ov-refund p{font-size:13.5px;color:var(--text-2)}
.ov-refund p a{font-weight:700;color:var(--text);text-decoration:underline;text-underline-offset:3px}
.ov-tl{display:grid;gap:0}
.ov-tl li{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;padding-bottom:18px}
.ov-tl li:last-child{padding-bottom:0}
.ov-tl li::before{content:"";position:absolute;left:13px;top:28px;bottom:2px;width:2px;background:var(--border)}
.ov-tl li:last-child::before{display:none}
.ov-tl li.is-done::before{background:var(--ink-900)}
.ov-tl .ov-tl-dot{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--ink-100);color:var(--text-3);position:relative;z-index:1}
.ov-tl .ov-tl-dot svg{width:15px;height:15px}
.ov-tl li.is-done .ov-tl-dot{background:var(--lime);color:var(--ink-900)}
.ov-tl li.is-now .ov-tl-dot{background:var(--ink-900);color:#fff}
.ov-tl b{display:block;font-size:14.5px;padding-top:3px}
.ov-tl li:not(.is-done):not(.is-now) b{color:var(--text-3)}
.ov-tl small{display:block;font-size:12.5px;color:var(--text-3);margin-top:2px;font-variant-numeric:tabular-nums}
.ov-tl p{font-size:13px;color:var(--text-2);margin-top:4px}
.ov-help{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:var(--r-lg);border:1px solid var(--border);background:var(--bg);font-size:13.5px;color:var(--text-2)}
.ov-help svg{width:20px;height:20px;flex:none}
.ov-help a{margin-left:auto;font-weight:700;color:var(--text);white-space:nowrap}

/* 환불 신청 모달 */
.rf-modal{max-width:520px}
.rf-item{padding:12px 14px;border-radius:var(--r-md);background:var(--bg-subtle);margin-bottom:12px}
.rf-item b{display:block;font-size:14.5px;line-height:1.45}
.rf-item span{display:block;font-size:12.5px;color:var(--text-3);margin-top:2px}
.rf-checks{display:grid;gap:8px}
.rf-check{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--border);border-radius:var(--r-md);font-size:14px}
.rf-check .rf-ic{width:28px;height:28px;border-radius:50%;display:grid;place-items:center}
.rf-check .rf-ic svg{width:16px;height:16px}
.rf-check.is-ok .rf-ic{background:var(--success-bg);color:var(--success)}
.rf-check.is-no .rf-ic{background:var(--danger-bg);color:var(--danger)}
.rf-check b{display:block}
.rf-check small{display:block;font-size:12.5px;color:var(--text-3)}
.rf-check .rf-val{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.rf-check.is-ok .rf-val{color:var(--success)}
.rf-check.is-no .rf-val{color:var(--danger)}
.rf-result{margin-top:12px;padding:14px 16px;border-radius:var(--r-md);font-size:14px;line-height:1.6}
.rf-result b{display:flex;align-items:center;gap:6px;font-size:15.5px;margin-bottom:2px}
.rf-result b svg{width:18px;height:18px}
.rf-result.is-ok{background:var(--success-bg);color:#14532D}
.rf-result.is-no{background:var(--warn-bg);color:#78350F}
.rf-result .rf-amt{font-variant-numeric:tabular-nums}
.rf-label{font-size:14px;font-weight:700;margin:20px 0 8px}
.rf-label .req{color:var(--danger);margin-left:2px}
.rf-reasons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.rf-reasons .radio{padding:10px 12px;border:1px solid var(--border-strong);border-radius:var(--r-md);font-size:14px}
.rf-reasons .radio:has(input:checked){border-color:var(--ink-900);box-shadow:inset 0 0 0 1px var(--ink-900)}
.rf-modal .textarea{min-height:88px;margin-top:8px}
.rf-modal .check{margin-top:14px;font-size:13.5px;align-items:flex-start}
.rf-modal .check input{margin-top:1px}

/* 쿠폰함 */
.cpn-reg{display:flex;align-items:center;gap:16px;padding:18px 20px}
.cpn-reg .cpn-reg-ic{width:44px;height:44px;border-radius:12px;background:var(--ink-100);display:grid;place-items:center;flex:none}
.cpn-reg h3{font-size:15.5px;font-weight:700}
.cpn-reg p{font-size:13px;color:var(--text-3)}
.cpn-reg form{display:flex;gap:8px;margin-left:auto;flex:0 1 380px}
.cpn-reg .input{text-transform:uppercase;font-family:var(--font-mono);letter-spacing:.04em}
.cpn-reg .input::placeholder{font-family:var(--font);text-transform:none;letter-spacing:0}
.cpn-reg-err{margin:-6px 20px 14px auto;text-align:right}
.cpn-tabs{margin:24px 0 16px}
.cpn-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cpn{position:relative;display:grid;grid-template-columns:132px minmax(0,1fr);min-height:172px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);isolation:isolate}
.cpn::before,.cpn::after{content:"";position:absolute;left:123px;width:18px;height:18px;border-radius:50%;background:var(--bg-subtle);border:1px solid var(--border);z-index:2}
.cpn::before{top:-10px;clip-path:inset(50% 0 0 0)}
.cpn::after{bottom:-10px;clip-path:inset(0 0 50% 0)}
.cpn-stub{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;padding:16px 8px;border-radius:var(--r-lg) 0 0 var(--r-lg);background:var(--ink-900);color:rgba(255,255,255,.7);text-align:center;border-right:2px dashed rgba(255,255,255,.22);margin:-1px 0 -1px -1px}
.cpn-stub b{font-size:30px;font-weight:800;letter-spacing:-.04em;line-height:1.1;color:var(--lime);font-variant-numeric:tabular-nums}
.cpn-stub b small{font-size:16px;margin-left:1px}
.cpn-stub span{font-size:12px;font-weight:600}
.cpn-stub b.is-won{font-size:24px}
.cpn-list > .empty{grid-column:1/-1}
.cpn-body{padding:16px 18px;display:flex;flex-direction:column;min-width:0}
.cpn-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.cpn-top h3{font-size:15.5px;font-weight:700;letter-spacing:-.02em;line-height:1.4}
.cpn-dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 10px;margin-top:10px;font-size:12.5px}
.cpn-dl dt{color:var(--text-3)}
.cpn-dl dd{color:var(--text-2);font-weight:500}
.cpn-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:12px}
.cpn-foot .cpn-code{font-family:var(--font-mono);font-size:12px;color:var(--text-3)}
.cpn-foot a.cpn-go{display:inline-flex;align-items:center;gap:2px;font-size:13.5px;font-weight:700;white-space:nowrap}
.cpn-foot a.cpn-go:hover{text-decoration:underline;text-underline-offset:3px}
.cpn-foot a.cpn-go svg{width:16px;height:16px}
.cpn.is-off .cpn-stub{background:var(--ink-300);color:var(--ink-600);border-right-color:rgba(255,255,255,.6)}
.cpn.is-off .cpn-stub b{color:var(--ink-700)}
.cpn.is-off .cpn-body{color:var(--text-3)}
.cpn.is-off h3{color:var(--text-2)}
.cpn.is-new{border-color:var(--ink-900);box-shadow:0 0 0 1px var(--ink-900)}
.cpn-guide{margin-top:24px}
.cpn-guide ul{display:grid;gap:6px;font-size:13.5px;color:var(--text-2)}
.cpn-guide li{position:relative;padding-left:14px}
.cpn-guide li::before{content:"";position:absolute;left:2px;top:.72em;width:4px;height:4px;border-radius:50%;background:var(--ink-500)}

/* ═════════════ 반응형 ═════════════ */
@media (max-width:1024px){
  .my-body > .page-head.sh-myhead{padding-top:20px}
  .sh-layout{grid-template-columns:minmax(0,1fr) 320px;gap:20px}
  .qa-wlayout{grid-template-columns:minmax(0,1fr) 240px;gap:24px}
  .ov-grid{grid-template-columns:minmax(0,1fr)}
  .cpn-list{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:768px){
  /* 고객센터 */
  .cs-hero .breadcrumb{display:none}
  .cs-hero-row{padding-top:20px}
  .cs-hero h1{font-size:24px}
  .cs-hero p{font-size:14px}
  .cs-contact{display:none}
  .cs-tabs{margin:12px calc(var(--gutter) * -1) 0;padding:0 6px}
  .cs-tabs .tab{height:48px;font-size:15px;padding:0 12px}
  .cs-body{padding-top:20px;padding-bottom:48px}
  .bl-toolbar{flex-direction:column;align-items:stretch}
  .bl-toolbar .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter)}
  .bl-toolbar .chips::-webkit-scrollbar{display:none}
  .bl-search .select{width:112px;flex:none;padding:0 28px 0 12px;background-position:right 8px center}
  .bl-search .input-icon{flex:1;width:auto;min-width:0}
  .bl-search .btn{padding:0 14px}
  .bl-list{border-top-width:1px;border-top-color:var(--border)}
  .bl-head{display:none}
  .bl-row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding:14px 4px;text-align:left}
  .bl-row > .bl-no,.bl-row > .bl-date,.bl-row > .bl-hit{display:none}
  .bl-row.is-notice > .bl-no{display:inline-flex;order:0}
  .bl-cat{order:1}
  .bl-tit{order:2;width:100%;padding:0}
  .bl-tit a{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:15px;line-height:1.5}
  .bl-mmeta{order:3;display:flex;gap:10px;width:100%;font-size:12.5px;color:var(--text-3);font-variant-numeric:tabular-nums}
  .bl-mmeta span{display:inline-flex;align-items:center;gap:3px}
  .bl-mmeta svg{width:13px;height:13px}
  .pagination a,.pagination strong{min-width:34px;height:34px}
  .bv-head{padding-top:18px}
  .bv-title{font-size:21px}
  .bv-body{padding:24px 0 28px;font-size:15px}
  .bv-table{overflow-x:auto}
  .bv-table .table{min-width:520px}
  .bv-nav a{grid-template-columns:72px minmax(0,1fr);padding:13px 4px}
  .bv-nav .bv-nav-d{display:none}
  .bv-actions .btn{padding:0 14px}
  .bv-cmt-guest{grid-template-columns:minmax(0,1fr)}
  .bv-cmt-write{padding:16px}
  .cs-hero-board{padding-bottom:20px}
  .bw-opts{padding:10px 12px}
  .faq-hero{padding:28px 16px 24px;margin:0 calc(var(--gutter) * -1);border-radius:0}
  .faq-hero h2{font-size:20px}
  .faq-sch .input,.faq-sch .btn{height:48px}
  .faq-sch .btn{padding:0 14px}
  .faq-cats{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:20px calc(var(--gutter) * -1) 14px;padding:0 var(--gutter)}
  .faq-cats::-webkit-scrollbar{display:none}
  .faq-acc summary{padding:16px 14px;gap:10px;font-size:15px}
  .faq-acc summary .faq-cat{display:none}
  .faq-acc .acc-body{padding:2px 14px 18px;gap:10px}
  .faq-q,.faq-a-mark{width:24px;height:24px;font-size:12px;border-radius:7px}
  .faq-more{flex-direction:column;align-items:flex-start;gap:12px;padding:20px}
  .faq-more .btn{width:100%}
  .qa-summary{gap:8px}
  .qa-summary .stat{flex-direction:column;align-items:flex-start;gap:6px;padding:12px}
  .qa-summary .qa-sic{display:none}
  .qa-summary .stat .stat-value{font-size:19px}
  .qa-toolbar{align-items:stretch}
  .qa-toolbar > .seg{width:100%}
  .qa-toolbar > .seg button,.qa-toolbar > .seg a{flex:1;justify-content:center}
  .qa-toolbar .row{width:100%}
  .qa-toolbar .select{flex:0 0 112px;width:112px;padding:0 28px 0 12px;background-position:right 8px center}
  .qa-toolbar .qa-stx{flex:1;width:auto;min-width:0}
  .qa-list{border-top-width:1px;border-top-color:var(--border)}
  .qa-head{display:none}
  .qa-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:14px 4px;text-align:left}
  .qa-row > .num,.qa-row > .qa-date{display:none}
  .qa-row > .badge{order:0}
  .qa-row .qa-cat{order:1;font-size:12.5px}
  .qa-row .qa-tit{order:2;width:100%;padding:0}
  .qa-row .qa-tit a{white-space:normal}
  .qa-mmeta{order:3;display:block;width:100%;font-size:12.5px;color:var(--text-3)}
  .qa-wlayout{grid-template-columns:minmax(0,1fr)}
  .qa-aside{position:static}
  .qa-recv{grid-template-columns:minmax(0,1fr)}
  .qa-form .form-grid{grid-template-columns:minmax(0,1fr)}
  .qa-wactions .btn{flex:1}
  .qa-answer-body{padding:16px 16px 20px}
  .qa-answer-head{padding:14px 16px}
  .qa-relq .bv-table .table{min-width:0}
  .qa-relq .bv-table .table td:first-child{white-space:normal}
  .qa-relq .bv-table .table th:last-child{width:96px !important}

  /* 영카트 */
  .sh-head{padding:20px 0 16px}
  .sh-head h1{font-size:24px}
  .sh-head .steps{display:none}
  .sh-layout{grid-template-columns:minmax(0,1fr);gap:16px;padding-bottom:40px}
  .sh-aside{position:static}
  .sh-sum{box-shadow:none;padding:20px}
  .sh-thumb{width:88px}
  .cart-bar{padding:12px 16px}
  /* 장바구니 항목: 체크 | 썸네일 | 정보 | 삭제 → 가격·안내는 아래 줄 전체 폭 */
  .cart-items > li{display:grid;grid-template-columns:20px 72px minmax(0,1fr) auto;gap:0 12px;padding:16px;align-items:start}
  .cart-items > li > .check{grid-column:1;grid-row:1}
  .cart-items > li > .sh-thumb{grid-column:2;grid-row:1 / span 3;width:72px}
  .cart-items .cart-info{display:contents}
  .cart-items .cart-cat{grid-column:3;grid-row:1;min-width:0}
  .cart-items .cart-tit{grid-column:3 / -1;grid-row:2;font-size:15px}
  .cart-items .cart-meta{grid-column:3 / -1;grid-row:3;gap:2px 10px;font-size:12.5px}
  .cart-items .cart-price{grid-column:2 / -1;grid-row:4;display:flex;justify-content:flex-end;align-items:baseline;gap:8px;min-width:0;margin-top:10px}
  .cart-items .cart-price .cart-orig{display:inline;margin:0}
  .cart-items .cart-warn{grid-column:2 / -1;grid-row:5;margin-top:10px;padding:9px 10px;font-size:13px}
  .cart-items .cart-del{grid-column:4;grid-row:1;margin:-8px -8px 0 0}
  .cart-items .of-ded{grid-column:2 / -1;grid-row:5;margin-top:10px}
  .cart-items .of-ded ~ .cart-warn{grid-row:6}
  .sh-layout + .sh-demo{margin-top:-16px}
  .cart-foot{padding:12px 16px;flex-direction:column;align-items:flex-start}
  .of-test{flex-wrap:wrap;padding:16px}
  .of-test .of-test-ic{display:none}
  .of-card-no{width:100%;justify-content:space-between}
  /* 주문서·주문 상세 상품: 썸네일 옆에는 분류·제목·요약만, 기간·안내·가격·수강 상태는 전체 폭 */
  .of-items > li,.ov-items > li{display:grid;grid-template-columns:72px minmax(0,1fr);gap:0 12px;align-items:start}
  .of-items > li > .sh-thumb,.ov-items > li > .sh-thumb{grid-column:1;grid-row:1 / span 3;width:72px}
  .of-items .cart-info,.ov-items .cart-info{display:contents}
  .of-items .cart-cat,.ov-items .cart-cat{grid-column:2;grid-row:1}
  .of-items .cart-tit,.ov-items .cart-tit{grid-column:2;grid-row:2;font-size:15px}
  .of-items .cart-meta,.of-items .of-pkg-list,.ov-items .cart-meta{grid-column:2;grid-row:3;font-size:12.5px}
  .of-items .of-period{grid-column:1 / -1;grid-row:4;justify-self:start;margin-top:10px}
  .of-items .cart-warn{grid-column:1 / -1;grid-row:5;margin-top:8px;padding:9px 10px;font-size:13px}
  .of-items .of-ded{grid-column:1 / -1;grid-row:5;margin-top:8px}
  .of-items .of-ext{grid-column:1 / -1;grid-row:4}
  .of-items .of-ext ~ .of-period{grid-row:5}
  .of-items .of-ext ~ .cart-warn{grid-row:6}
  .of-items > li:has(.of-ext) .cart-price{grid-row:7}
  .of-items .cart-price,.ov-items .cart-price{grid-column:1 / -1;grid-row:6;display:flex;justify-content:flex-end;align-items:baseline;gap:8px;min-width:0;margin-top:10px}
  .of-items .cart-price .cart-orig{display:inline;margin:0}
  .ov-items .ov-learn{grid-column:1 / -1;grid-row:7;margin:10px 0 0}
  .ov-pkg-row{grid-template-columns:minmax(0,1fr) 72px 36px;gap:8px}
  .of-disc-row{grid-template-columns:minmax(0,1fr);gap:6px}
  .of-disc-row > .label{padding-top:0}
  .of-pay{grid-template-columns:repeat(2,minmax(0,1fr))}
  .of-pay-opt{height:72px;flex-direction:row;gap:10px}
  .of-pay-opt svg{width:20px;height:20px}
  .of-aside .sh-sum .btn-accent,.of-aside .sh-sum-note.pay-note{display:none}
  .mpay-bar{display:flex;align-items:center;gap:12px;position:fixed;left:0;right:0;bottom:0;z-index:50;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--border);box-shadow:0 -6px 20px rgba(24,24,27,.06)}
  .mpay-bar .mpay-amt{flex:1;display:flex;flex-direction:column;line-height:1.3;min-width:0}
  .mpay-bar .mpay-amt small{font-size:12px;color:var(--text-3);font-weight:600}
  .mpay-bar .mpay-amt b{font-size:19px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
  .mpay-bar .btn{flex:0 0 56%}
  body.has-paybar{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  body.has-paybar .toast{bottom:calc(88px + env(safe-area-inset-bottom));width:max-content;max-width:calc(100vw - 32px)}
  .oc-wrap{padding-top:28px;padding-bottom:48px}
  .oc-check{width:60px;height:60px;margin-bottom:14px}
  .oc-check svg{width:28px;height:28px}
  .oc-hero h1{font-size:23px}
  .oc-hero p{font-size:14.5px}
  .oc-steps{display:none}
  .oc-sec-h{flex-direction:column;align-items:flex-start;gap:2px;margin:28px 0 10px}
  .oc-info{margin-top:24px;grid-template-columns:minmax(0,1fr);padding:6px 16px}
  .oc-info > div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0}
  .oc-info > div + div{border-left:0;border-top:1px solid var(--border)}
  .oc-info dt{font-size:13px;flex:none}
  .oc-info dd{font-size:14px;margin:0;text-align:right}
  .oc-info dd.oc-amt{font-size:17px}
  .oc-course{flex-wrap:wrap;gap:12px;padding:14px}
  .oc-course .sh-thumb{width:96px}
  .oc-course .cart-info{flex:1 1 calc(100% - 108px)}
  .oc-course-act{width:100%;flex-direction:row}
  .oc-course-act .btn{flex:1}
  .oc-plan{grid-template-columns:minmax(0,1fr);gap:14px;padding:18px}
  .oc-plan .oc-plan-badge{width:64px;height:64px;border-radius:12px}
  .oc-plan .oc-plan-badge b{font-size:22px}
  .oc-actions .btn{flex:1 1 40%}
  .my-body > .page-head.sh-myhead{padding:16px 0 14px}
  .sh-myhead h1{font-size:24px}
  .sh-myhead p{font-size:14px}
  .oi-sum{gap:8px}
  .oi-sum .stat{padding:12px}
  .oi-sum .stat .stat-value{font-size:18px}
  .oi-sum .stat .stat-label{font-size:12px}
  .oi-filter{flex-direction:column;align-items:stretch;gap:8px}
  .oi-filter .seg{width:100%}
  .oi-filter .seg button{flex:1;padding:0 6px}
  .oi-card-head{padding:12px 16px;flex-wrap:wrap}
  .oi-card-head .oi-no{display:block;margin:0}
  .oi-card-body{padding:14px 16px;gap:12px;flex-wrap:wrap}
  .oi-card-body .sh-thumb{width:80px;align-self:flex-start}
  .oi-card-body .cart-info{flex:1 1 calc(100% - 92px)}
  .oi-amt{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;padding-top:10px;border-top:1px dashed var(--border)}
  .oi-amt .badge{margin:0}
  .oi-amt s{display:none}
  .oi-card-foot{padding:10px 16px}
  .oi-card-foot .row{width:100%}
  .oi-card-foot .row .btn{flex:1}
  .oi-guest{padding:28px 0 48px}
  .oi-guest .panel-body{padding:20px}
  .ov-title h1{font-size:22px}
  .ov-steps{padding:14px}
  .ov-steps .step small{display:none}
  .rf-reasons{grid-template-columns:minmax(0,1fr)}
  .cpn-reg{flex-wrap:wrap;padding:16px}
  .cpn-reg > div:nth-child(2){flex:1 1 0;min-width:0}
  .cpn-reg form{flex:1 1 100%;margin:0}
  .cpn-reg-err{margin:-8px 16px 12px;text-align:left}
  .cpn{grid-template-columns:104px minmax(0,1fr);min-height:0}
  .cpn::before,.cpn::after{left:95px}
  .cpn-stub b{font-size:23px}
  .cpn-stub b small{font-size:13px}
  .cpn-stub b.is-won{font-size:18px}
  .cpn-body{padding:14px 14px 12px}
  .cpn-top{flex-direction:column;gap:6px}
  .cpn-top h3{font-size:15px}
}
@media (max-width:480px){
  .sh-thumb{width:80px}
  .of-pay-opt{height:60px;font-size:13.5px}
}