/* ============================================================================
   악보바다 리디자인 — mypage 도메인 공용 (WEB-INF/views/mypage/ 아래 화면들만 쓴다)

   여러 mypage 화면에 똑같이 들어 있던 규칙을 모았다. 다른 폴더 화면과도 같이 쓰는 규칙은
   rd-common.css 로 간다. 아래 구역은 옮겨 온 원래 파일 단위 그대로다.
   ============================================================================ */

/* ============================================================================
   악보바다 리디자인 — 마이페이지 조옮김 화면들 — 신청안내 · 곡 선택 · 신청내역(사용자/관리자) · 신청 상세(사용자/관리자) (.kt-)

   아래 화면들의 <style> 에 똑같이 들어 있던 규칙을 그대로 옮겼다.
   (CUS-02-01-Redesign.jsp · CUS-02-02-Redesign.jsp · MYP-04-01-Redesign.jsp · MYP-04-01-A-Redesign.jsp · MYP-04-02-Redesign.jsp · MYP-04-02-A-Redesign.jsp · MYP-04-03-A-Redesign.jsp)
   ============================================================================ */


/* ---- 여러 화면에 똑같이 흩어져 있던 규칙 (규칙 단위로 모음) ---- */
.kt-wrap { width:1110px; margin:0 auto; padding:22px 0 70px; color:var(--c-text);
           font-size:13px; line-height:normal; box-sizing:border-box; }
.kt-wrap *, .kt-wrap *:before, .kt-wrap *:after { box-sizing:border-box; }
.kt-wrap a { text-decoration:none; color:inherit; }
.kt-wrap button { font-family:inherit; }
.kt-wrap a:focus-visible, .kt-wrap button:focus-visible { outline:2px solid var(--c-brand); outline-offset:2px; }
.kt-banner { position:relative; isolation:isolate; display:flex; align-items:center; gap:12px; margin:0 0 16px; padding:20px 24px;
             border-radius:var(--r-card); overflow:hidden; box-shadow:var(--e-card);
             background:linear-gradient(120deg, var(--c-brand) 0%, var(--c-brand-deep) 58%, #243f93 100%); }
.kt-bn-fx { position:absolute; inset:0; z-index:-1; pointer-events:none; }
.kt-bn-fx .bl { position:absolute; border-radius:50%; filter:blur(42px); }
.kt-bn-fx .b1 { width:300px; height:300px; right:-60px; top:-190px; background:#5ea3ff; opacity:.5; }
.kt-bn-fx .b2 { width:240px; height:240px; left:40%; bottom:-200px; background:#7c6cff; opacity:.4; }
.kt-bn-fx .staff { position:absolute; left:0; right:0; top:4px; width:100%; height:80px; opacity:.14;
                   -webkit-mask-image:linear-gradient(90deg, transparent 0%, transparent 34%, #000 66%, #000 100%);
                           mask-image:linear-gradient(90deg, transparent 0%, transparent 34%, #000 66%, #000 100%); }
.kt-hd { min-width:0; }
.kt-crumb { display:inline-flex; align-items:center; gap:4px; margin:0 0 6px; font-size:12.5px; font-weight:700; line-height:1;
            color:rgba(255,255,255,.72); letter-spacing:.02em; }
.kt-wrap .kt-crumb a { color:rgba(255,255,255,.72); }
.kt-wrap .kt-crumb a:hover { color:#fff; }
.kt-crumb svg { display:block; }
.kt-tit { margin:0; font-size:22px; font-weight:700; line-height:1.3; color:#fff; letter-spacing:-.01em; white-space:nowrap; }
.kt-steps { display:flex; align-items:center; gap:6px; margin:0 0 0 auto; padding:0; list-style:none; }
.kt-steps li { list-style:none; }
.kt-steps .st { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 13px; border-radius:var(--r-pill);
                border:1px solid rgba(255,255,255,.2); background:rgba(10,28,84,.22);
                font-size:13px; font-weight:700; color:rgba(255,255,255,.62); white-space:nowrap;
                transition:background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.kt-steps .st .n { font-size:12px; font-weight:700; color:rgba(255,255,255,.42); }
.kt-wrap .kt-steps a.st:hover { border-color:rgba(255,255,255,.5); background:rgba(10,28,84,.36); color:#fff; }
.kt-steps li.on .st { border-color:#fff; background:#fff; color:var(--c-brand); }
.kt-steps li.on .st .n { color:var(--c-brand-border); }
.kt-steps .sep { display:block; color:rgba(255,255,255,.45); }
.kt-steps.is-menu { gap:4px; }
.kt-steps.is-menu .st { padding:0 15px; }
.kt-grid { display:grid; grid-template-columns:169px minmax(0,1fr); gap:16px; align-items:start; }
/* 목차 · 아래 단추가 붙어 있도록 판에는 overflow 를 걸지 않는다 */
.kt-main { display:flex; flex-direction:column; min-width:0; background:#fff; border:1px solid var(--c-border);
           border-radius:var(--r-card); box-shadow:var(--e-card); }
/* 판 위 도구 줄 : 제목 · 개수 ··· 검색 — 구입목록 거르기 줄(.by-tool)과 같은 자리 */
.kt-tool { display:flex; align-items:center; gap:10px; padding:18px 22px; border-bottom:1px solid var(--c-border); }
.kt-tool .t { margin:0; font-size:18px; font-weight:700; color:var(--c-text); letter-spacing:-.01em; }
.kt-tool .cnt { font-size:13px; font-weight:700; color:var(--c-brand); font-variant-numeric:tabular-nums; }
.kt-tool .sp { flex:1 1 auto; }
.kt-search { position:relative; display:flex; align-items:center; }
.kt-search input::placeholder { color:var(--c-text-ghost); }
.kt-search input:focus { outline:0; border-color:var(--c-brand); box-shadow:0 0 0 3px rgba(31,97,193,.14); }
.kt-search svg { position:absolute; right:10px; top:9px; display:block; color:var(--c-text-sub); pointer-events:none; }
.kt-song { padding:16px 18px; border:1px solid var(--c-border); border-radius:var(--r-card); background:#fff; box-shadow:var(--e1); }
.kt-song-top { display:flex; align-items:center; gap:14px; min-width:0; }
.kt-song .bd { flex:1 1 auto; min-width:0; }
.kt-head { padding:22px 28px 24px; border-bottom:1px solid var(--c-border); background:#fff; }
.kt-head-top { display:flex; align-items:center; gap:14px; }
.kt-th img { width:100%; height:100%; object-fit:cover; display:block; }
.kt-head .bd { flex:1 1 auto; min-width:0; }
.kt-side .l { font-size:11px; font-weight:700; color:var(--c-text-muted); }
.kt-head .nm { display:block; font-size:19px; font-weight:700; color:var(--c-text); letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kt-name { display:block; min-width:0; font-size:14.5px; font-weight:700; color:var(--c-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kt-head .ar { display:block; margin-top:3px; font-size:13px; color:var(--c-text-sub); }
.kt-meta { margin:3px 0 0; font-size:12.5px; color:var(--c-text-sub); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kt-head .ar b { margin-left:8px; font-weight:700; color:var(--c-text); }
/* 파트 줄 : [MR] 파트 · Key/설명 ··· 조옮김 가격 · 단추 */
/* 파트 줄 : 파트 · 신청 Key ··· 결과 */
.kt-parts { margin:12px 0 0; padding:0 12px; border:1px solid var(--c-border-soft); border-radius:var(--r-md); background:var(--c-sunken); overflow:hidden; }
.kt-st.is-ing { background:var(--c-brand-100); color:var(--c-brand); }
/* 진행 단계 : 결제 → 작업중 → 작업완료. 지난 단계는 채운 점, 지금 단계는 링 */
.kt-track { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); margin:22px 0 0; padding:0; list-style:none; }
.kt-track li { position:relative; padding-top:26px; text-align:center; }
.kt-st.is-done { background:var(--c-lv1-bg); color:var(--c-free); }
.kt-part { display:flex; align-items:center; gap:8px; min-height:42px; padding:6px 0; }
.kt-part + .kt-part { border-top:1px dashed var(--c-divider2); }
.kt-st.is-delay { background:var(--c-lv5-bg); color:var(--c-lv5-fg); }
.kt-track li:before { content:""; position:absolute; top:8px; left:0; right:0; height:3px; background:var(--c-border); }
.kt-track li:first-child:before { left:50%; }
.kt-part .nm { flex:0 1 auto; min-width:0; font-size:13px; font-weight:700; color:var(--c-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kt-sel:focus { outline:0; border-color:var(--c-brand); }
.kt-track li:last-child:before { right:50%; }
.kt-wrap a.kt-back:hover { border-color:var(--c-brand-border); color:var(--c-brand); }
.kt-track li.done:before, .kt-track li.now:before { background:var(--c-brand); }
.kt-back svg { display:block; }
/* 불러오는 중 · 빈 목록 · 오류 */
.kt-state { padding:56px 18px; text-align:center; font-size:13px; color:var(--c-text-muted); }
/* 지금 단계 → 다음 단계 구간(지연이면 비운다) : 신청부터 예상 완료(오후 6시)까지 지난 비율(--p 0 ~ 1)만큼 채운다. 작업중 칸 오른쪽 절반 + 작업완료 칸 왼쪽 절반이 한 구간 */
.kt-track li.now:not(:last-child):before { background:linear-gradient(90deg, var(--c-brand) 0 calc(50% + var(--p, .5) * 100%), var(--c-border) 0); }
.kt-track li.now + li:before { background:linear-gradient(90deg, var(--c-brand) 0 calc((var(--p, .5) * 2 - 1) * 100%), var(--c-border) 0); }
.kt-act.is-red:hover { background:var(--c-lv5-bg); }
.kt-state b { display:block; margin:0 0 6px; font-size:14px; color:var(--c-text-sub); }
.kt-track li:last-child.now:before { background:var(--c-brand); }
.kt-pages { display:flex; justify-content:center; gap:4px; margin:0; padding:18px 18px 22px; list-style:none; background:var(--c-sunken2);
            border-radius:0 0 var(--r-card) var(--r-card); }
.kt-track .dot { position:absolute; top:0; left:50%; width:19px; height:19px; margin-left:-9.5px; border-radius:50%; background:#fff; border:3px solid var(--c-border); }
.kt-track li.done .dot { background:var(--c-brand); border-color:var(--c-brand); }
.kt-pages li { list-style:none; }
/* 옛 .btn_n.btn_txt(클래스 둘)보다 이기도록 .kt-wrap … li 로 시작한다 */
.kt-wrap .kt-pages li a, .kt-wrap .kt-pages li strong { display:inline-flex; align-items:center; justify-content:center; min-width:32px; height:32px; padding:0 6px;
                                border:1px solid var(--c-border-ctl2); border-radius:var(--r-md); background:#fff; font-size:13px; font-weight:700; line-height:1;
                                color:var(--c-text-sub); font-variant-numeric:tabular-nums; }
.kt-wrap .kt-pages li a:hover { border-color:var(--c-brand-border); color:var(--c-brand); }
.kt-track li.now .dot { border-color:var(--c-brand); box-shadow:0 0 0 5px rgba(31,97,193,.15); }
.kt-track .t { display:block; font-size:13px; font-weight:700; color:var(--c-text-muted); }
.kt-wrap .kt-pages li strong { border-color:var(--c-brand); background:var(--c-brand); color:#fff; }
.kt-wrap .kt-pages li a.disabled { opacity:.4; pointer-events:none; }
.kt-track .d { display:block; margin-top:3px; font-size:12px; color:var(--c-text-muted); font-variant-numeric:tabular-nums; }
.kt-pages a i { display:none; }
.kt-track li.done .t, .kt-track li.now .t { color:var(--c-text); }
.kt-track li.now .t { color:var(--c-brand); }
.kt-pages a.btn_first:before { content:"«"; }
.kt-pages a.btn_pre:before { content:"‹"; }
.kt-track.is-delay li.now .t { color:var(--c-lv5-fg); }
.kt-pages a.btn_next:before { content:"›"; }
.kt-track.is-delay li.now .dot { border-color:var(--c-lv5-fg); box-shadow:0 0 0 5px rgba(192,57,43,.15); }
.kt-track.is-done li .dot, .kt-track.is-done li:before { }
.kt-pages a.btn_last:before { content:"»"; }
.kt-cancel { display:flex; align-items:center; gap:8px; margin:20px 0 0; padding:12px 16px; border-radius:var(--r-md); background:var(--c-fill);
             font-size:13px; font-weight:700; color:var(--c-text-sub); }
.kt-cols { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:0; }
.kt-cols > .l { min-width:0; padding:24px 28px 28px; }
.kt-cols > .r { padding:24px 24px 28px; border-left:1px solid var(--c-border); background:var(--c-sunken); }
.kt-h { display:flex; align-items:center; gap:8px; margin:0 0 12px; font-size:15px; font-weight:700; color:var(--c-text); }
.kt-h .tag { display:inline-flex; align-items:center; height:22px; padding:0 9px; border-radius:var(--r-pill); background:var(--c-brand-100);
             color:var(--c-brand); font-size:12px; font-weight:700; }
.kt-h + * { }
.kt-block + .kt-block { margin-top:26px; }
/* 조옮김 결과 : 악보 둘(VexFlow — 신청서 · 장바구니 모달 미리보기와 같은 값) + 옛 결과 문구 */
/* 조옮김 정보 오선 : 신청 페이지 결과 판과 같은 짧은 오선 카드(폭 226 고정) — 원키 → 조옮김 */
.kt-vex { display:flex; align-items:stretch; gap:12px; }
.kt-vex .pv { flex:0 0 226px; min-width:0; padding:10px 12px 2px; background:#fff; border:1px solid var(--c-border); border-radius:var(--r-lg); }
.kt-vex .pv:only-child { flex:0 0 226px; }
.kt-vex .pv .l { display:flex; align-items:baseline; gap:6px; font-size:12px; color:var(--c-text-muted); }
.kt-vex .pv .l b { font-size:15px; color:var(--c-text); }
.kt-vex .pv.is-to { border-color:var(--c-key-line); background:#fffdf8; }
.kt-vex .pv.is-to .l b { color:var(--c-key-fg); }
.kt-vex .s { overflow:hidden; }
.kt-vex .s svg { display:block; width:100%; height:auto; }
.kt-vex .ar { flex:0 0 auto; align-self:center; display:block; color:var(--c-text-muted); }
.kt-vex-msg { margin:0; padding:40px 0; text-align:center; font-size:12px; color:var(--c-text-muted); }
.kt-result { margin:12px 0 0; padding:12px 16px; border-radius:var(--r-md); background:var(--c-brand-100); font-size:13.5px; line-height:1.8; color:var(--c-text-body); word-break:keep-all; }
.kt-result:empty { display:none; }
.kt-capo { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:12px 0 0; padding:14px 18px; border:1px solid var(--c-key-line); border-radius:var(--r-md); background:var(--c-key-bg); font-size:14.5px; font-weight:700; color:var(--c-text); }
.kt-capo b { font-size:16px; font-weight:700; color:var(--c-key-fg); }
.kt-result .txt_result_box { color:var(--c-brand); font-weight:700; }
.kt-result .txt_result_box2 { color:var(--c-key-fg); font-weight:700; }
.kt-legacy-img { display:none; }
/* ---------- [임시] 요청사항 대화 : 아이메시지처럼 — 흰 바탕, 나는 오른쪽 파란 말풍선 · 악보바다(관리자)는 왼쪽 회색 말풍선.
   잇따라 보낸 말풍선은 한 묶음 — 묶음 첫 개 위에 이름(악보바다), 마지막 개에만 아래 모서리 꼬리와 시간. 날짜가 바뀌면 가운데 날짜 ---------- */
.kt-chat { --kt-me:var(--c-brand); --kt-op:#e9e9eb; --kt-bg:#fff;   /* 내 말풍선 = 사이트 브랜드 파랑 */
           border:1px solid var(--c-border); border-radius:var(--r-lg); background:var(--kt-bg); overflow:hidden; }
.kt-thread { display:flex; flex-direction:column; gap:2px; height:320px; overflow-y:auto; padding:14px 18px 16px; }
.kt-day { align-self:center; margin:12px 0 8px; font-size:11.5px; font-weight:700; color:#8a8f98; font-variant-numeric:tabular-nums; }
.kt-day:first-child { margin-top:2px; }
.kt-day b { font-weight:400; margin-left:6px; }
.kt-who { margin:10px 0 2px 14px; font-size:11.5px; line-height:1.3; color:#8a8f98; }
.kt-thread .kt-who + .kt-msg.is-head { margin-top:0; }
.kt-msg { display:flex; flex-direction:column; max-width:72%; }
.kt-msg.is-me { align-self:flex-end; align-items:flex-end; }
.kt-msg.is-op { align-self:flex-start; align-items:flex-start; }
.kt-msg.is-head:not(:first-child) { margin-top:8px; }
.kt-msg .bub { position:relative; padding:8px 13px; border-radius:18px; font-size:13.5px; line-height:1.45; white-space:pre-wrap; word-break:break-word; }
.kt-msg.is-me .bub { background:var(--kt-me); color:#fff; }
.kt-msg.is-op .bub { background:var(--kt-op); color:#111; }
/* 꼬리 : 묶음 마지막 말풍선의 아래 모서리 — 말풍선 색 둥근 조각(:before) 위에 바탕색 조각(:after)을 얹어 휘어진 꼬리를 낸다 */
.kt-msg.is-tail .bub:before, .kt-msg.is-tail .bub:after { content:""; position:absolute; bottom:0; height:18px; }
.kt-msg.is-me.is-tail .bub:before { right:-7px; width:20px; background:var(--kt-me); border-bottom-left-radius:16px 14px; }
.kt-msg.is-me.is-tail .bub:after { right:-26px; width:26px; background:var(--kt-bg); border-bottom-left-radius:10px; }
.kt-msg.is-op.is-tail .bub:before { left:-7px; width:20px; background:var(--kt-op); border-bottom-right-radius:16px 14px; }
.kt-msg.is-op.is-tail .bub:after { left:-26px; width:26px; background:var(--kt-bg); border-bottom-right-radius:10px; }
.kt-msg .tm { margin:3px 6px 0; font-size:10.5px; color:#8a8f98; font-variant-numeric:tabular-nums; }
.kt-thread { overflow-x:hidden; }
.kt-chat-empty { margin:0; padding:20px 0; text-align:center; color:var(--c-text-ghost); }
/* 특이사항 : 대화 맨 위 안내(메신저 공지처럼 가운데 연한 상자 — 신청서 입력칸 안내와 같은 문구) · 입력칸 아래 '실시간 채팅 아님' */
.kt-notice { align-self:stretch; display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:8px; row-gap:4px;   /* 대화창 안쪽 폭을 꽉 채운다 */
             margin:2px 0 10px; padding:11px 14px; border-radius:12px; background:var(--c-sunken); color:var(--c-text-sub); }
.kt-notice svg { grid-row:1 / span 2; margin-top:2px; color:var(--c-text-muted); }
.kt-notice p { margin:0; font-size:12px; line-height:1.6; word-break:keep-all; }
.kt-notice p + p { margin-top:calc(1.6em - 4px); }
.kt-notice b { font-weight:700; color:var(--c-text); }
.kt-notice .nw { white-space:nowrap; }   /* '[주문제작]으로' 가 줄바꿈에서 갈라지지 않게 */
.kt-notice ~ .kt-chat-empty { display:none; }   /* 안내가 있으면 빈 대화 표시(-)는 감춘다 */
.kt-send-note { margin:6px 4px 0; font-size:11.5px; line-height:1.5; color:var(--c-text-muted); word-break:keep-all; }
.kt-send-note b { color:var(--c-text-sub); }
/* 서버 대화(feat/core-pages-renewal) : 알림 문자 발송 · 미발송 줄 · 막힌 입력칸 · 대화 아래 안내 */
.kt-sys { align-self:center; margin:4px 0; font-size:11px; color:#8a8f98; }   /* 알림 문자 발송 · 미발송 — 내용은 그리지 않는다 */
.kt-sys.is-fail { color:#d93025; font-weight:700; }
.kt-send textarea:disabled { cursor:not-allowed; color:var(--c-text-muted); }
.kt-chat-note { margin:0; padding:11px 16px; border-top:1px solid var(--c-border); background:var(--c-bg-soft, #f7f8fa);
                font-size:12.5px; line-height:1.6; color:var(--c-text-muted); word-break:keep-all; }
/* 입력 : 아이메시지처럼 둥근 입력칸 안 오른쪽에 보내기(위 화살표 동그라미). 글이 없으면 회색 · 있으면 브랜드 파랑 */
.kt-send { margin:0; padding:10px 12px; border-top:1px solid var(--c-border); background:#fff; }
.kt-field { position:relative; display:flex; align-items:flex-end; border:1px solid var(--c-border-ctl2); border-radius:20px; background:#fff;
            transition:border-color var(--t-base); }
.kt-field:focus-within { border-color:var(--c-brand); }
.kt-send textarea { flex:1 1 auto; min-height:38px; max-height:120px; padding:9px 46px 9px 14px; border:0; border-radius:20px; resize:none; background:transparent;
                    font-family:inherit; font-size:13px; line-height:1.5; color:var(--c-text); }
.kt-send textarea:focus { outline:0; }
.kt-send button { position:absolute; right:5px; bottom:5px; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px;
                  border:0; border-radius:50%; background:var(--c-brand); color:#fff; cursor:pointer;
                  transition:background-color var(--t-base), transform var(--t-fast); }
.kt-send button:hover { background:var(--c-brand-hover); }
.kt-send button:active { transform:scale(.92); }
.kt-send button:disabled { background:var(--c-border-ctl); cursor:default; transform:none; }
.kt-send button svg { display:block; }
.kt-nth { margin:14px 0 0; padding:9px 14px; border-radius:var(--r-md); background:var(--c-brand-panel); font-size:13px; color:var(--c-text-sub); }
.kt-nth b { color:var(--c-text); }
.kt-nth strong { color:var(--c-brand); font-weight:700; }
.kt-sum dd.is-red { color:var(--c-lv5-fg); }
.kt-sum dd.is-id { color:#7c3aed; font-weight:700; }
.kt-wrap a.kt-link { color:var(--c-brand); }
.kt-wrap a.kt-link:hover { text-decoration:underline; }
.kt-foot.is-admin { justify-content:flex-start; gap:8px; }
.kt-act.is-dark { border-color:var(--c-inverse); background:var(--c-inverse); color:#fff; }
.kt-act.is-dark:hover { opacity:.88; color:#fff; }
.kt-act.is-pri { min-width:140px; border-color:var(--c-brand); background:var(--c-brand); color:#fff; }
.kt-act.is-pri:hover { background:var(--c-brand-hover); border-color:var(--c-brand-hover); color:#fff; }

/* 상태 : 신청내역과 같다 — 작업중 파랑 · 작업완료 초록 · 취소 회색 · 지연 빨강 */
.kt-st { display:inline-flex; align-items:center; height:26px; padding:0 11px; border-radius:var(--r-pill); font-size:12.5px; font-weight:700; white-space:nowrap;
         background:var(--c-fill); color:var(--c-text-sub); }
.kt-search input { width:260px; height:34px; padding:0 36px 0 12px; border:1px solid var(--c-border-ctl); border-radius:var(--r-md);
                   background:#fff; font-family:inherit; font-size:13px; color:var(--c-text); }
.kt-foot .sp { flex:1 1 auto; }

/* ============================================================================
   악보바다 리디자인 — 조옮김 신청 모달 — 구입목록 MYP-02-01 · 조옮김 곡 선택 CUS-02-02 (.tm-)

   아래 화면들의 <style> 에 똑같이 들어 있던 규칙을 그대로 옮겼다.
   (MYP-02-01-Redesign.jsp · CUS-02-02-Redesign.jsp)
   ============================================================================ */

/* =================== 조옮김 신청 모달 (.tm-) ===================
   장바구니 리디자인(cart/MYP-01-01-Redesign)의 조옮김 모달 CSS 를 접두사만 .wl- → .tm- 로 바꿔 그대로 옮겼다.
   값을 고칠 때는 두 화면을 함께 고친다 */
.tm-host { font-size:13px; line-height:normal; color:var(--c-text); }
.tm-host *, .tm-host *:before, .tm-host *:after { box-sizing:border-box; }
.tm-host button, .tm-host select, .tm-host textarea { font-family:inherit; }
.tm-host button:focus-visible, .tm-host select:focus-visible { outline:2px solid var(--c-brand); outline-offset:2px; }

.tm-c-tit   { flex:1 1 0;  min-width:1px; }
.tm-th { display:block; width:46px; height:46px; border:1px solid var(--c-border); border-radius:var(--r-md); overflow:hidden; background:var(--c-fill); }
.tm-th img { width:100%; height:100%; object-fit:cover; display:block; }



/* ---- 여러 화면에 똑같이 흩어져 있던 규칙 (규칙 단위로 모음) ---- */
/* 이조악기 안내 — [이조악기로] 를 고르면 선택 방법 탭 아래에 늘 보인다(예전에는 ⓘ 말풍선이라 놓치기 쉬웠다).
   예시 줄은 고른 악기 · 실음 키를 따라 바뀌고, 그 값만 칩으로 띄운다 */
/* 이조악기 안내 — [이조악기로] 를 고르면 선택 방법 탭 아래에 늘 보인다(예전에는 ⓘ 말풍선이라 놓치기 쉬웠다). 신청 페이지(CUS-02-02)와 같다.
   예시 줄은 고른 악기 · 실음 키를 따라 바뀌고, 그 값만 칩으로 띄운다 */
/* 예시 줄 : 판으로 묶지 않고 글씨로만 세운다 — 굵고 진하게 */
.tm-tseg button { height:30px; padding:0 13px; border:0; background:#fff; font-size:12.5px; font-weight:700; color:var(--c-text-muted); cursor:pointer; transition:background-color var(--t-base), color var(--t-base); }

/* ============================================================================
   악보바다 리디자인 — 조옮김 신청 상세 — 사용자 MYP-04-02 · 관리자 MYP-04-02-A (.kt-)

   아래 화면들의 <style> 에 똑같이 들어 있던 규칙을 그대로 옮겼다.
   (MYP-04-02-Redesign.jsp · MYP-04-02-A-Redesign.jsp)
   ============================================================================ */

/* 오른쪽 요약 : 이름 · 값 줄 */
.kt-sum + .kt-sum { margin-top:22px; padding-top:20px; border-top:1px solid var(--c-border); }
.kt-sum .h { margin:0 0 10px; font-size:13px; font-weight:700; color:var(--c-text); }
.kt-sum dl { margin:0; }
.kt-sum dl div { display:flex; justify-content:space-between; gap:10px; padding:6px 0; font-size:12.5px; }
.kt-sum dt { flex:0 0 auto; color:var(--c-text-muted); }
.kt-sum dd { margin:0; min-width:0; font-weight:700; color:var(--c-text); text-align:right; word-break:keep-all; font-variant-numeric:tabular-nums; }
.kt-sum dd .key { display:inline-flex; align-items:center; height:22px; padding:0 8px; border-radius:var(--r-pill); background:var(--c-key-bg); color:var(--c-key-fg); }
.kt-sum .price dd { font-size:16px; color:var(--c-brand); }

.kt-foot { display:flex; justify-content:center; padding:20px 28px 26px; border-top:1px solid var(--c-border); }
.kt-wrap a.kt-list { display:inline-flex; align-items:center; justify-content:center; min-width:160px; height:46px; padding:0 20px; border:1px solid var(--c-border-ctl2);
                     border-radius:var(--r-md); background:#fff; font-size:14px; font-weight:700; color:var(--c-text); }
.kt-wrap a.kt-list:hover { border-color:var(--c-brand-border); color:var(--c-brand); }


/* ---- 여러 화면에 똑같이 흩어져 있던 규칙 (규칙 단위로 모음) ---- */
.kt-th { flex:0 0 auto; display:block; width:56px; height:56px; border:1px solid var(--c-border); border-radius:var(--r-md); overflow:hidden; background:var(--c-fill); }

/* ============================================================================
   악보바다 리디자인 — 주문 완료 — MYP-01-03 · MYP-01-03-01 · transKcpFinish (.oc-)

   아래 화면들의 <style> 에 똑같이 들어 있던 규칙을 그대로 옮겼다.
   (MYP-01-03-Redesign.jsp · MYP-01-03-01-Redesign.jsp · transKcpFinish-Redesign.jsp)
   ============================================================================ */

.oc-wrap a:focus-visible, .oc-wrap button:focus-visible { outline:2px solid var(--c-brand); outline-offset:2px; }

/* ---------- 머리 : 구입목록(MYP-02-01-Redesign .by-banner)과 같은 얇은 파란 머리 ----------
   왼쪽 마이페이지 › 제목 · 설명, 오른쪽 주문 단계. 단계 알약은 파란 바탕 위라 유리 모양으로 뒤집는다(지금 단계만 흰 알약) */
.oc-hero { position:relative; isolation:isolate; display:flex; align-items:center; gap:12px; margin:0 0 16px; padding:20px 24px;
            border-radius:var(--r-card); overflow:hidden; box-shadow:var(--e-card);
            background:linear-gradient(120deg, var(--c-brand) 0%, var(--c-brand-deep) 58%, #243f93 100%); }
.oc-bn-fx { position:absolute; inset:0; z-index:-1; pointer-events:none; }
.oc-bn-fx .bl { position:absolute; border-radius:50%; filter:blur(42px); }
.oc-bn-fx .b1 { width:300px; height:300px; right:-60px; top:-190px; background:#5ea3ff; opacity:.5; }
.oc-bn-fx .b2 { width:240px; height:240px; left:40%; bottom:-200px; background:#7c6cff; opacity:.4; }
.oc-bn-fx .staff { position:absolute; left:0; right:0; top:4px; width:100%; height:80px; opacity:.14;
                   -webkit-mask-image:linear-gradient(90deg, transparent 0%, transparent 34%, #000 66%, #000 100%);
                           mask-image:linear-gradient(90deg, transparent 0%, transparent 34%, #000 66%, #000 100%); }
.oc-hd { min-width:0; }
.oc-crumb { display:inline-flex; align-items:center; gap:4px; margin:0 0 6px; font-size:12.5px; font-weight:700; line-height:1;
            color:rgba(255,255,255,.72); letter-spacing:.02em; }
.oc-wrap .oc-crumb a { color:rgba(255,255,255,.72); }
.oc-wrap .oc-crumb a:hover { color:#fff; }
.oc-crumb svg { display:block; }
.oc-tit { margin:0; font-size:22px; font-weight:700; line-height:1.3; color:#fff; letter-spacing:-.01em; white-space:nowrap; }
.oc-tit .sub { margin-left:10px; font-size:13px; font-weight:400; letter-spacing:0; color:rgba(255,255,255,.7); }
.oc-steps { display:flex; align-items:center; gap:6px; margin:0 0 0 auto; padding:0; list-style:none; }
.oc-steps li { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 14px; border-radius:var(--r-pill);
               border:1px solid rgba(255,255,255,.2); background:rgba(10,28,84,.22);
               font-size:13px; font-weight:700; color:rgba(255,255,255,.62); white-space:nowrap; list-style:none; }
.oc-steps li .n { font-size:12px; font-weight:700; color:rgba(255,255,255,.42); }
.oc-steps li.on { border-color:#fff; background:#fff; color:var(--c-brand); }
.oc-steps li.on .n { color:var(--c-brand-border); }
.oc-steps .sep { display:block; color:rgba(255,255,255,.45); }

/* ---------- 공통 조각 ---------- */
.oc-card { background:#fff; border:1px solid var(--c-border); border-radius:var(--r-card); box-shadow:var(--e-card); overflow:hidden; }
.oc-check { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:64px; height:64px;
            border-radius:50%; background:var(--c-brand-100); color:var(--c-brand); }
.oc-check span { display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%;
                 background:var(--c-brand); color:#fff; }
.oc-check svg { display:block; }
.oc-note { margin:0; padding:0; list-style:none; }
.oc-note li { position:relative; margin:0 0 3px; padding-left:11px; font-size:12px; line-height:1.6; color:var(--c-text-muted); }
.oc-note li:before { content:"·"; position:absolute; left:1px; top:0; font-weight:700; }
.oc-note li:last-child { margin-bottom:0; }

/* 단추 : 주문/결제 [결제하기](채움) · [장바구니로 돌아가기](테두리)와 같은 톤 */
.oc-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:48px; padding:0 24px;
          border:1px solid var(--c-border-ctl); border-radius:var(--r-md); background:#fff;
          font-size:15px; font-weight:700; color:var(--c-text-sub); white-space:nowrap;
          transition:border-color var(--t-base), color var(--t-base), background-color var(--t-base); }
.oc-wrap .oc-btn:hover { border-color:var(--c-brand); color:var(--c-brand); background:var(--c-brand-50); }
.oc-wrap .oc-btn.is-pri { border-color:var(--c-brand); background:var(--c-brand); color:#fff; }
.oc-wrap .oc-btn.is-pri:hover { border-color:var(--c-brand-hover); background:var(--c-brand-hover); color:#fff; }


/* ---- 여러 화면에 똑같이 흩어져 있던 규칙 (규칙 단위로 모음) ---- */
.oc-wrap { width:1110px; margin:0 auto; padding:22px 0 70px; color:var(--c-text);
           font-size:13px; line-height:normal; box-sizing:border-box; }
.oc-wrap *, .oc-wrap *:before, .oc-wrap *:after { box-sizing:border-box; }
.oc-wrap a { text-decoration:none; color:inherit; }
.oc-a { width:100%; }
.oc-rcpt-top { padding:36px 32px 26px; text-align:center; }
.oc-rcpt-top .oc-check { margin:0 0 16px; }
.oc-rcpt-top h2 { margin:0 0 8px; font-size:22px; font-weight:700; line-height:1.35; color:var(--c-text); }
.oc-rcpt-top p { margin:0; font-size:14px; line-height:1.6; color:var(--c-text-sub); }
.oc-rcpt-top p b { color:var(--c-text); }
/* 영수증 칸 나눔 : 점선 */
.oc-rsec { margin:0 28px; padding:16px 0; border-top:1px dashed var(--c-divider2); }
.oc-strip div { min-width:0; padding:4px 20px; border-left:1px solid var(--c-divider); }
.oc-strip div:first-child { padding-left:0; border-left:0; }
.oc-strip dt { margin:0 0 6px; font-size:12px; color:var(--c-text-muted); }
.oc-strip dd { margin:0; font-size:14px; font-weight:700; color:var(--c-text); overflow-wrap:anywhere; }
.oc-strip dd.is-pay { color:var(--c-brand); }
.oc-strip .is-item dd { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.oc-strip .is-item .etc { margin-left:4px; font-weight:400; color:var(--c-text-sub); }
.oc-strip .is-tot { text-align:right; padding-right:0; }
.oc-strip .is-tot dt { font-weight:700; letter-spacing:.02em; }
.oc-strip .is-tot .num { font-size:24px; font-weight:700; color:var(--c-brand); font-variant-numeric:tabular-nums; line-height:1; }
.oc-strip .is-tot .won { margin-left:2px; font-size:15px; }
/* 취소 · 환불 불가 — 띠 바로 아래 연한 바닥 한 줄. 판 · 테두리 없이, 핵심 말만 붉은 글씨로 */
.oc-warn { display:flex; align-items:center; justify-content:center; gap:6px; margin:0 28px 18px; padding:10px 14px;
           border-radius:var(--r-md); background:var(--c-sunken2); color:var(--c-text-sub); }
.oc-warn svg { flex:0 0 auto; display:block; color:var(--c-lv5-fg); opacity:.8; }
.oc-warn p { margin:0; font-size:13px; line-height:1.5; }
.oc-warn p b { font-weight:700; color:var(--c-lv5-fg); }
.oc-rfoot { padding:12px 28px 14px; border-top:1px solid var(--c-divider); background:var(--c-sunken2); }
.oc-a .oc-acts { display:flex; justify-content:center; gap:10px; margin:22px 0 0; }
.oc-a .oc-btn { min-width:220px; }

.oc-strip { display:grid; grid-template-columns:1.6fr 1fr 1.2fr 1fr; margin:0; }
.by-wrap { width:1110px; margin:0 auto; padding:22px 0 70px; color:var(--c-text);
           font-size:13px; line-height:normal; box-sizing:border-box; }
.by-wrap *, .by-wrap *:before, .by-wrap *:after { box-sizing:border-box; }
.by-wrap a { text-decoration:none; color:inherit; }
.by-pill svg { display:block; }
/* 카드 오른쪽 : 구입일(작은 라벨 + 날짜), 남은 날이 30일 이내면 그 아래 'n일 남음' */
.by-side { flex:0 0 auto; margin-left:auto; padding-left:12px; display:flex; flex-direction:column; align-items:flex-end; gap:2px; line-height:1.35; }
.by-side .l { font-size:11px; font-weight:700; color:var(--c-text-muted); }
.by-side b { font-size:13.5px; font-weight:700; color:var(--c-text); font-variant-numeric:tabular-nums; white-space:nowrap; }
.by-side .by-dleft { margin-left:0; padding-left:0; }
.by-songs { display:flex; flex-direction:column; gap:12px; padding:16px 18px 18px; background:var(--c-sunken2); }
.by-song { padding:16px 18px; border:1px solid var(--c-border); border-radius:var(--r-card); background:#fff; box-shadow:var(--e1); }
.by-song.is-custom { border-color:var(--c-brand-edge); }
.by-song-top { display:flex; align-items:center; gap:14px; min-width:0; }
.by-song .bd { flex:1 1 auto; min-width:0; }
.by-song-h { display:flex; align-items:center; gap:8px; min-width:0; }
.by-name { min-width:0; font-size:14.5px; font-weight:700; color:var(--c-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.by-song.is-custom .by-name { color:var(--c-brand-deep); }
.by-meta .art { color:var(--c-text-sub); }
.by-meta .art.is-one { color:var(--c-lv3-fg); font-weight:700; }
/* overflow : 주문제작 줄이 판 양옆까지 칠해지므로 둥근 모서리 밖으로 나가지 않게 자른다 */
.by-parts { margin:12px 0 0; padding:0 12px; border:1px solid var(--c-border-soft); border-radius:var(--r-md); background:var(--c-sunken); overflow:hidden; }
.by-part { display:flex; align-items:center; gap:8px; min-height:42px; padding:6px 0; }
.by-part + .by-part { border-top:1px dashed var(--c-divider2); }
.by-part .nm { flex:0 1 auto; min-width:0; font-size:13px; font-weight:700; color:var(--c-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.by-part .ds { flex:1 1 0; min-width:0; font-size:12.5px; color:var(--c-text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.by-part .ex { flex:0 0 auto; font-size:12px; color:var(--c-text-sub); font-variant-numeric:tabular-nums; white-space:nowrap; }
.by-part .ac { flex:0 0 auto; display:flex; gap:4px; }
.by-part .by-act { height:28px; padding:0 10px; }
/* 번들 안 곡 : 한 단 낮춰 */
.by-part.is-bundle { min-height:34px; padding-left:16px; }
.by-part.is-bundle .nm { font-weight:400; color:var(--c-text-sub); }
/* 기간만료 : 흐리게 */
.by-part.is-off .nm, .by-part.is-off .ds { color:var(--c-text-disabled); }
.by-part.is-off .by-bdg { opacity:.5; }
/* 주문제작 파트 : 판 왼쪽 진한 선 */
.by-part.is-custom { margin:0 -12px; padding-left:9px; padding-right:12px; border-left:3px solid var(--c-brand-deep); background:var(--c-brand-50); }
.by-sub { color:var(--c-text-ghost); font-weight:400; }
/* 파트 배지 : 파트 목록 리디자인(PAR-01-Redesign) 보유 타입 .pl-t.on 과 같은 값 — 22px 알약, MR 은 30px, 동영상은 재생 세모.
   주문제작은 그 목록의 '지금 분류'(.is-cur)처럼 꽉 채운다 */
.by-bdg { flex:0 0 22px; display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; padding:0;
          border:1px solid var(--c-brand-border); border-radius:var(--r-pill); background:var(--c-brand-100);
          font-size:11px; font-weight:700; line-height:1; color:var(--c-brand); }
.by-bdg.is-mr { width:30px; flex-basis:30px; font-size:10px; }
.by-bdg svg { display:block; }
.by-bdg.is-custom { border-color:var(--c-brand); background:var(--c-brand); color:#fff; }
.by-ctag { display:inline-flex; align-items:center; gap:3px; height:20px; padding:0 7px; border-radius:var(--r-xs);
           background:var(--c-brand-deep); color:#fff; font-size:11px; font-weight:700; white-space:nowrap; }
.by-ctag i { font-style:normal; color:var(--c-star-soft); }
/* 남은 날 : 30일 이내면 줄에 D-n(7일 이하 빨강, 그 밖 주황), 카드 오른쪽 'n일 남음' */
.by-dday { display:inline-flex; align-items:center; height:20px; margin-right:6px; padding:0 7px; border-radius:var(--r-pill);
           background:var(--c-key-bg); color:var(--c-key-fg); font-size:11px; font-weight:700; font-variant-numeric:tabular-nums; vertical-align:1px; }
.by-dday.is-hot { background:var(--c-lv5-bg); color:var(--c-lv5-fg); }
.by-dleft { flex:0 0 auto; margin-left:auto; padding-left:12px; font-size:13px; font-weight:700; color:var(--c-key-fg); white-space:nowrap; }
.by-dleft.is-hot { color:var(--c-lv5-fg); }
.by-exp-off { display:inline-flex; align-items:center; height:22px; padding:0 8px; border-radius:var(--r-pill);
              background:var(--c-lv5-bg); color:var(--c-lv5-fg); font-size:11.5px; font-weight:700; }
.by-act { display:inline-flex; align-items:center; gap:4px; height:30px; padding:0 11px; border:1px solid var(--c-brand);
          border-radius:var(--r-md); background:#fff; font-size:12.5px; font-weight:700; color:var(--c-brand); cursor:pointer; white-space:nowrap;
          transition:background-color var(--t-base); }
.by-wrap .by-act { color:var(--c-brand); }
.by-act:hover { background:var(--c-brand-50); }
.by-act svg { display:block; }
.by-empty b { display:block; margin:0 0 6px; font-size:14px; color:var(--c-text-sub); }
.by-empty .by-act { margin-top:12px; }
.by-load { display:flex; flex-direction:column; gap:10px; padding:18px; }
.by-load i:nth-child(2) { width:82%; }
.by-load i:nth-child(3) { width:64%; }