/* 그리드벳 고객센터 · 실시간 상담 창 · 솔루션 공지/이벤트 · 사이트 팝업(cs.js · cs-consult.js · cs-board.js · cs-popup.js) — 2026-10-20.
   원본 CSS(common.css · layout_*.css · module.css · common_light.css)는 이 파일보다 뒤에 읽히므로, 원본과 겹치는 규칙은 선택자를 하나 더 붙여 이긴다.
   원본 틀(.tabTitle · .thead.qna · ul.freeboard.qna · .edit-form · .article · .article-answer · .comment · .faq-list · .paging · .memberLayer)을 그대로 쓰고
   원본에 없는 것(작성 칸 줄 · 대화 말풍선 · 상태 글자색 · 상담 창 대화칸)만 원본 색 변수로 더한다. 이 파일은 모든 쪽에 붙으므로 선택자는 모두 이 기능의 id · class 아래로 묶는다 */

/* 원본 틀이 display 를 정해 둔 요소(.paging · .btn-area · .article-info · .event-list)는 hidden 속성만으로 숨지 않는다 */
#trCs [hidden],#trCsTabs [hidden],.tr-sb-art [hidden],#trSbMore[hidden],.tr-chat [hidden]{display:none!important}

/* ---------- 고객센터 탭 ---------- */
#trCsTabs a{position:relative}
#trCsTabs .tr-cs-badge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;margin-left:5px;padding:0 4px;border-radius:8px;background:#ac3131;font-family:'p9';font-style:normal;font-size:10px;line-height:1;color:#fff;vertical-align:2px}

/* ---------- 1:1 문의: 위 줄 · 작성 칸 ---------- */
#trCs .tr-cs-top{justify-content:flex-start;margin-bottom:2px}
#trCs .tr-cs-sum{font-size:13px;color:var(--aeae)}
#trCs .tr-cs-sum b{font-family:'p7';font-weight:normal;color:var(--font-color)}
#trCs .btn-area a{cursor:pointer}
#trCs .btn-area a.is-off,.tr-chat .btnSubmit.is-off{opacity:.5;pointer-events:none}
#trCs .edit-form.tr-cs-write{display:flex;flex-direction:column;gap:8px}
#trCs .tr-cs-cat{display:flex;align-items:center;gap:10px;height:50px;padding:0 10px;border-radius:5px;background:var(--black)}
#trCs .tr-cs-cat label{flex:0 0 auto;font-size:13px;color:var(--aeae)}
#trCs .tr-cs-cat select{flex:1 1 auto;max-width:320px;height:34px;padding:0 34px 0 10px;border:1px solid var(--4246);border-radius:5px;background:var(--surface-2) var(--select-arrow) no-repeat right 11px center;background-size:14px;font-size:13px;color:var(--font-color);outline:none;-webkit-appearance:none;appearance:none;cursor:pointer}
#trCs .tr-cs-cat select:focus{border-color:var(--38ffa8)}
#trCs .edit-form.tr-cs-write textarea{height:220px;padding:15px 10px;border-radius:5px;background:var(--black);font-size:14px;line-height:1.6}
#trCs .tr-cs-foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
#trCs .tr-cs-foot .btn-area a.gray{background:var(--4246)}
#trCs .tr-cs-count{font-size:12px;color:var(--aeae)}
#trCs .tr-cs-count b{font-weight:normal;color:var(--font-color)}
#trCs .tr-cs-warn,#trCs .tr-cs-msg{margin:0;padding:10px 12px;border-radius:5px;background:var(--black);border-left:3px solid #f5a623;font-size:12px;line-height:1.6;color:var(--font-color);word-break:keep-all}
#trCs .tr-cs-msg{border-left-color:#ac3131}
#trCs .tr-cs-msg.is-ok{border-left-color:var(--38ffa8)}

/* ---------- 1:1 문의: 목록(원본 ul.freeboard.qna 5칸 · 줄을 누르면 그 줄 아래로 대화가 펼쳐진다) ---------- */
#trCs ul.freeboard.qna>li.tr-cs-tk{height:auto;grid-auto-rows:auto}
#trCs ul.freeboard.qna>li.tr-cs-tk>div:not(.tr-cs-view){height:40px}
#trCs ul.freeboard.qna li.tr-cs-tk a[data-tk]{cursor:pointer}
#trCs ul.freeboard.qna li.tr-cs-tk a[data-tk] b{overflow:hidden;font-weight:normal;text-overflow:ellipsis}
#trCs ul.freeboard.qna li.tr-cs-tk a[data-tk] span{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;width:29px;height:19px;margin-right:8px;border-radius:3px;background:var(--bababa);font-family:'p9';font-size:11px;color:var(--3838)}
#trCs ul.freeboard.qna li.tr-cs-tk a[data-tk] span.ing{background:var(--38ffa8);color:var(--body-bg)}
#trCs ul.freeboard.qna li.tr-cs-tk.is-open a[data-tk]{color:var(--theme-color)}
/* 원본 ul.freeboard li a(제목 칸: 한 줄 · 높이 40px · 올리면 커짐)가 펼친 대화 안의 링크에도 걸리므로 되돌린다 */
#trCs ul.freeboard.qna li.tr-cs-tk .tr-cs-view a,#trCs ul.freeboard.qna li.tr-cs-tk:hover .tr-cs-view a{display:inline;flex-grow:0;max-width:none;height:auto;margin:0;overflow:visible;white-space:normal;font-size:inherit;text-overflow:clip}
#trCs ul.freeboard.qna li.tr-cs-tk>div.qna-read-status{font-size:12px}
#trCs ul.freeboard.qna li.tr-cs-tk>div.qna-read-status.green{color:var(--38ffa8)}
#trCs ul.freeboard.qna li.tr-cs-tk>div.qna-read-status.is-wait{color:#f5c41a}
#trCs ul.freeboard.qna li.tr-cs-tk>div.qna-read-status.gray{color:var(--bababa)}
#trCs ul.freeboard li.no-data{display:block;height:auto;min-height:40px;padding:10px!important;line-height:20px;font-size:12px;color:var(--aeae)}
#trCs .tr-cs-retry{margin-left:6px;color:var(--theme-color);text-decoration:underline}

/* 펼친 대화(원본 .article 글 · .article-answer 답변 · .comment 댓글 칸) */
#trCs ul.freeboard.qna li.tr-cs-tk>.article.tr-cs-view{display:block;grid-column:1/-1;height:auto;margin:0 0 6px;padding:10px 10px 0!important;border-radius:5px;background:var(--black);text-align:left;cursor:default}
#trCs .tr-cs-thread{display:flex;flex-direction:column;gap:8px}
#trCs .tr-cs-m{padding:12px 14px;border-radius:5px;background:var(--3838);line-height:1.6}
#trCs .article .tr-cs-m.article-answer{padding:12px 14px;border-left:3px solid var(--38ffa8);background:var(--left-bg);line-height:1.6}
#trCs .tr-cs-who{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:12px;color:var(--aeae)}
#trCs .tr-cs-who b{font-family:'p7';font-weight:normal;color:var(--font-color)}
#trCs .tr-cs-m.is-staff .tr-cs-who b{color:var(--38ffa8)}
#trCs .tr-cs-new{display:inline-flex;align-items:center;justify-content:center;width:25px;height:13px;border-radius:3px;background:var(--38ffa8);font-family:'p9';font-style:normal;font-size:9px;color:var(--body-bg)}
#trCs .tr-cs-txt{font-size:13px;color:var(--font-color);white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere}
#trCs .tr-cs-txt a{color:var(--theme-color);text-decoration:underline}
#trCs ul.freeboard.qna li.tr-cs-tk .tr-cs-view a.tr-cs-act{display:inline-flex;align-items:center;height:30px;margin-top:8px;padding:0 12px;border-radius:5px;background:var(--126e51);font-size:12px;color:#fff}
#trCs ul.freeboard.qna li.tr-cs-tk .tr-cs-view a.tr-cs-older{display:block;padding:6px;text-align:center;font-size:12px;color:var(--theme-color)}
#trCs .tr-cs-state,#trCs .tr-cs-closed{margin:0;padding:12px 4px;font-size:12px;line-height:1.6;color:var(--aeae)}
#trCs .tr-cs-closed{padding-bottom:12px}
#trCs .tr-cs-closed a{margin-left:6px;color:var(--theme-color);text-decoration:underline}
#trCs .comment.tr-cs-reply{margin:8px -10px 0;padding:0 10px 10px!important;border-radius:0 0 5px 5px;background:transparent}
#trCs .comment.tr-cs-reply form{align-items:stretch}
#trCs .comment.tr-cs-reply form div{height:auto;min-height:35px}
#trCs .comment.tr-cs-reply form div span{align-self:flex-start;height:35px;font-size:12px;color:var(--aeae)}
#trCs .comment.tr-cs-reply form div textarea{height:70px!important;padding:9px 10px;color:var(--font-color);line-height:1.5;resize:vertical}
#trCs .comment.tr-cs-reply form button{height:auto;min-height:35px;cursor:pointer}
#trCs .comment.tr-cs-reply form button:disabled{opacity:.5;cursor:default}
#trCs .comment.tr-cs-reply .tr-cs-warn,#trCs .comment.tr-cs-reply .tr-cs-msg{margin-top:8px}
#trCs .paging a{cursor:pointer}

/* ---------- 자주 묻는 질문 · 실시간 상담 카드 ---------- */
#trCs .faq-list li p{white-space:pre-wrap;word-break:break-word}
#trCs .faq-list li p a{color:var(--theme-color);text-decoration:underline}
#trCs .faq-list li.tr-cs-none{cursor:default;font-size:13px;color:var(--aeae)}
#trCs .tr-cs-chat{padding:24px 20px!important;text-align:center}
#trCs .tr-cs-chat-st{margin:0 0 6px;font-size:14px;line-height:1.6;color:var(--font-color);word-break:keep-all}
#trCs .tr-cs-chat-note{margin:0 0 16px;font-size:12px;color:var(--aeae)}
#trCs .tr-cs-chat-note:empty{display:none}

/* ---------- 휴대폰: 문의 줄을 제목 한 줄 + 분류 · 작성일 · 상태 한 줄로 ---------- */
[device-mode=mobile] #trCs .thead.qna{display:none}
[device-mode=mobile] #trCs ul.freeboard.qna>li.tr-cs-tk{grid-template-columns:auto 1fr auto;gap:4px 10px;padding:12px}
[device-mode=mobile] #trCs ul.freeboard.qna>li.tr-cs-tk>div:not(.tr-cs-view){height:auto;font-size:11px}
[device-mode=mobile] #trCs ul.freeboard.qna>li.tr-cs-tk>div:nth-child(1){display:none}
[device-mode=mobile] #trCs ul.freeboard.qna>li.tr-cs-tk>div:nth-child(2){display:flex;grid-column:1/-1}
[device-mode=mobile] #trCs ul.freeboard.qna>li.tr-cs-tk>div:nth-child(5){justify-content:flex-end}
[device-mode=mobile] #trCs ul.freeboard.qna li.tr-cs-tk a[data-tk]{display:flex;width:100%;max-width:100%;height:auto;margin:0;font-size:13px}
[device-mode=mobile] #trCs ul.freeboard.qna>li.tr-cs-tk>.article.tr-cs-view{margin:6px 0 0;padding:8px 8px 0!important}
[device-mode=mobile] #trCs .comment.tr-cs-reply form{grid-template-columns:1fr 52px}
[device-mode=mobile] #trCs .edit-form.tr-cs-write textarea{height:180px;font-size:13px}
[device-mode=mobile] #trCs .tr-cs-cat{height:44px}
[device-mode=mobile] #trCs .tr-cs-foot{flex-direction:column;align-items:stretch}
[device-mode=mobile] #trCs .tr-cs-foot .btn-area{justify-content:flex-end}
[device-mode=mobile] #trCs .tr-cs-chat{padding:18px 12px!important}

/* ---------- 밝은 테마 ---------- */
[data-theme-mode=light] #trCs .tr-cs-cat,[data-theme-mode=light] #trCs .edit-form.tr-cs-write textarea{background:#f8fafc}
[data-theme-mode=light] #trCs .tr-cs-warn,[data-theme-mode=light] #trCs .tr-cs-msg{background:#f8fafc}
[data-theme-mode=light] #trCs ul.freeboard.qna>li.tr-cs-tk>.article.tr-cs-view{background:#f1f5fb}
[data-theme-mode=light] #trCs .tr-cs-m{background:#fff}
[data-theme-mode=light] #trCs .article .tr-cs-m.article-answer{background:#fff;border-left-color:var(--126e51)}
[data-theme-mode=light] #trCs .tr-cs-m.is-staff .tr-cs-who b,[data-theme-mode=light] #trCs ul.freeboard.qna li.tr-cs-tk>div.qna-read-status.green{color:var(--126e51)}
[data-theme-mode=light] #trCs ul.freeboard.qna li.tr-cs-tk a span.ing{background:var(--126e51);color:#fff}
[data-theme-mode=light] #trCs ul.freeboard.qna li.tr-cs-tk>div.qna-read-status.is-wait{color:#b7791f}
[data-theme-mode=light] #trCs .comment.tr-cs-reply form div{background:#fff}
[data-theme-mode=light] #trCs .tr-cs-foot .btn-area a.gray{background:#64748b;color:#fff}

/* ---------- 실시간 상담 창(원본 1:1 상담 창 #pop 과 같은 .memberLayer 틀) ---------- */
.memberLayer.tr-chat{z-index:1001}
.memberLayer.tr-chat .layerInner{width:440px;top:90px;margin-bottom:40px}
.memberLayer.tr-chat .selLoginType{margin-bottom:14px}
.memberLayer.tr-chat .tr-chat-note{margin:0 0 12px;font-size:12px;line-height:1.5;color:var(--login-help-color,#9ba3af);word-break:break-all}
.memberLayer.tr-chat .tr-chat-note:empty{display:none}
.memberLayer.tr-chat .layerInner .cont ul li .tr-chat-log{display:flex;flex-direction:column;gap:8px;height:300px;padding:14px;border:var(--login-input-border);border-radius:12px;background:var(--login-input-bg);overflow-y:auto;outline:0}
.memberLayer.tr-chat .layerInner .cont ul li textarea{min-height:0;height:86px;resize:none}
.memberLayer.tr-chat .tr-chat-hello{margin:0;font-size:12px;line-height:1.6;color:var(--login-help-color,#9ba3af)}
.memberLayer.tr-chat .tr-chat-state,.memberLayer.tr-chat .tr-chat-lock{margin:0;padding:10px 12px;border-radius:10px;background:var(--surface-2);font-size:13px;line-height:1.6;color:var(--login-input-color,#fff);word-break:keep-all}
.memberLayer.tr-chat .tr-chat-state a{margin-left:4px;color:var(--theme-color);text-decoration:underline}
.memberLayer.tr-chat .tr-chat-m{max-width:85%;padding:8px 12px;border-radius:12px;background:var(--surface-2)}
.memberLayer.tr-chat .tr-chat-m.is-me{align-self:flex-end;background:var(--126e51)}
.memberLayer.tr-chat .tr-chat-m.is-sys{align-self:center;background:transparent;border:1px dashed var(--login-divider-color,#2d3749)}
.memberLayer.tr-chat .tr-chat-m.is-del .tr-chat-txt{opacity:.6;font-style:italic}
.memberLayer.tr-chat .tr-chat-who{display:flex;align-items:center;gap:8px;margin:0 0 3px;font-size:11px;color:var(--login-help-color,#9ba3af)}
.memberLayer.tr-chat .tr-chat-m.is-me .tr-chat-who{color:rgba(255,255,255,.75)}
.memberLayer.tr-chat .tr-chat-who b{font-weight:normal;color:var(--login-input-color,#fff)}
.memberLayer.tr-chat .tr-chat-m.is-me .tr-chat-who b,.memberLayer.tr-chat .tr-chat-m.is-me .tr-chat-txt{color:#fff}
.memberLayer.tr-chat .tr-chat-txt{margin:0;font-size:13px;line-height:1.55;color:var(--login-input-color,#fff);white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere}
.memberLayer.tr-chat .tr-chat-err{margin:0 0 10px;font-size:12px;line-height:1.5;color:#ff6b6b;word-break:keep-all}
.memberLayer.tr-chat .btnSubmit{display:block;cursor:pointer}
.memberLayer.tr-chat .btnCancel{display:block;cursor:pointer}
@media (max-width:768px){
	.memberLayer.tr-chat .layerInner{top:20px;padding:20px}
	.memberLayer.tr-chat .layerInner .cont ul li .tr-chat-log{height:calc(100vh - 420px);min-height:160px}
}
[data-theme-mode=light] .memberLayer.tr-chat .tr-chat-state,[data-theme-mode=light] .memberLayer.tr-chat .tr-chat-lock,[data-theme-mode=light] .memberLayer.tr-chat .tr-chat-m{background:#edf3fb;color:#1e293b}
[data-theme-mode=light] .memberLayer.tr-chat .tr-chat-m.is-me{background:var(--126e51)}
[data-theme-mode=light] .memberLayer.tr-chat .tr-chat-txt,[data-theme-mode=light] .memberLayer.tr-chat .tr-chat-who b{color:#1e293b}
[data-theme-mode=light] .memberLayer.tr-chat .tr-chat-m.is-me .tr-chat-txt,[data-theme-mode=light] .memberLayer.tr-chat .tr-chat-m.is-me .tr-chat-who b{color:#fff}

/* ---------- 솔루션 공지 · 이벤트 ---------- */
.event-list a.tr-sb-card .img img{height:100%;object-fit:cover;object-position:50% 0}
.event-list a.tr-sb-card .img.tr-sb-noimg{display:flex;align-items:center;justify-content:center;padding:16px;text-align:center}
.event-list a.tr-sb-card .img.tr-sb-noimg b{position:relative;z-index:3;font-family:'p7';font-weight:normal;font-size:15px;line-height:1.4;color:var(--font-color);word-break:keep-all}
.tr-sb-art .article-content .tr-sb-msg{margin:0;font-size:13px;line-height:1.7;color:var(--aeae);text-align:left}
.tr-sb-art .article-content .tr-sb-msg a{color:var(--theme-color);text-decoration:underline}
.tr-sb-art .article-content .tr-sb-text{white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;line-height:1.7;text-align:left}
.tr-sb-art .article-content .tr-sb-text a{color:var(--theme-color);text-decoration:underline}
.tr-sb-art .article-content .tr-sb-pic{margin:12px 0 0;text-align:center}
.tr-sb-art .article-content .tr-sb-pic:first-child{margin-top:0}
.tr-sb-art .article-content .tr-sb-pic img{display:inline-block;max-width:100%;height:auto}
.tr-sb-art .article-content .tr-sb-body{max-width:900px;margin:20px auto 0;text-align:left}
.tr-sb-art .article-content .tr-sb-desc{margin:0 0 14px;font-size:15px;line-height:1.7;color:var(--font-color)}
.tr-sb-art .article-content .tr-sb-facts{display:grid;gap:6px;margin:0 0 16px}
.tr-sb-art .article-content .tr-sb-facts div{display:grid;grid-template-columns:110px 1fr;gap:10px;padding:10px 14px;border-radius:5px;background:var(--black);font-size:13px;line-height:1.6}
.tr-sb-art .article-content .tr-sb-facts dt{color:var(--aeae)}
.tr-sb-art .article-content .tr-sb-facts dd{margin:0;color:var(--font-color)}
.tr-sb-art .article-content .tr-sb-h{margin:18px 0 8px;font-family:'p7';font-weight:normal;font-size:15px;color:var(--38ffa8)}
.tr-sb-art .article-content .tr-sb-list{margin:0;padding-left:20px;font-size:13px;line-height:1.7}
.tr-sb-art .article-content ol.tr-sb-list{list-style:decimal}
.tr-sb-art .article-content ul.tr-sb-list{list-style:disc}
.tr-sb-art .article-content .tr-sb-act{justify-content:center;margin-top:20px}
.tr-sb-art #trSbPeriod b{margin-left:4px;font-weight:normal;color:var(--font-color)}
[device-mode=mobile] .tr-sb-art .article-content .tr-sb-facts div{grid-template-columns:84px 1fr;padding:8px 10px}
[data-theme-mode=light] .tr-sb-art .article-content .tr-sb-facts div{background:#f8fafc}
[data-theme-mode=light] .tr-sb-art .article-content .tr-sb-h{color:var(--126e51)}