/* ===== Sub Visual ===== */
.sub-visual { position: relative; width: 100%; background-position: center; background-size: cover; background-repeat: no-repeat; display: flex; align-items: center; min-height: 540px; color: #fff; }
.sv-inner { width: 90%; max-width: 1200px; margin: 0 auto; }
.sv-title { display: block; margin: 0; padding-bottom: 15px; font-weight: 300; line-height: 1.1; letter-spacing: .5px; font-size: clamp(28px, 5.2vw, 55px); }
.sv-desc { margin: 0; font-weight: 200; line-height: 1.5; color: #fff; font-size: clamp(14px, 1.8vw, 20px); }
.sub-visual { background-image: url('/images/banner.jpg'); }

/* ===== 공통 ===== */
.color {color:#44cc00;}
.li_none {list-style:none !important;}
.ctt-div { width: 90%; max-width: 1200px; margin: 100px auto; }
.ctt-title { text-align: center; color: #222; font-weight: 700; margin-bottom: 20px; line-height: 1.4; font-size: clamp(24px, 3.2vw, 32px); }
.ctt-title .ctt-sub { margin-top: 15px; color: #555; font-weight: 400; font-size: clamp(15px, 1.8vw, 18px); }

@media (min-width:1024px) {
    .ctt-title { font-size: 38px; margin-bottom: 80px; }
    .ctt-title .ctt-sub { font-size: 20px; }
    .tmpl-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .talk_banner_div { display: none; }
}

/* ===== 템플릿 ===== */

.tmpl-grid { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tmpl-grid .tmpl-box { background: #fff; transition: transform .2s ease, box-shadow .2s ease; padding-bottom: clamp(30px, 4vw, 60px); }
.tmpl-grid .tmpl-box:hover { transform: translateY(-4px); }
.tmpl-grid .tmpl-box .tmpl-thum { border-radius: 10px; overflow: hidden; width: 100%; }
.tmpl-grid .tmpl-box .tmpl-thum img { width: 100%; max-width: 100%; height: auto; display: block; object-fit: cover; }
.tmpl-grid .tmpl-box .tmpl-title.split { display: flex; flex-direction: column; gap: clamp(8px, 1.2vw, 12px); margin: clamp(10px, 2vw, 18px) clamp(8px, 1.5vw, 12px); }
.tmpl-grid .tmpl-box .tmpl-title.split .row.top-line { display: flex; justify-content: space-between; align-items: flex-start; gap: clamp(10px, 2vw, 18px); width: 100%; }
.tmpl-grid .tmpl-box .tmpl-title.split .name { margin: 0; font-size: clamp(18px, 2.5vw, 31px); font-weight: 700; color: #111; white-space: nowrap; text-overflow: ellipsis; padding-top: 3px; }
.tmpl-grid .tmpl-box .tmpl-title.split .benefit { margin: 0; color: #777; line-height: 1.5; font-size: clamp(11px, 1.6vw, 14px); text-align: right; padding-top: 1px; }
.tmpl-grid .tmpl-box .tmpl-title.split .original-inline { text-decoration: line-through; text-decoration-color: #ef4444; text-decoration-thickness: 2px; position: relative; top: -1px; /* 살짝 위 */ color: #777; white-space: nowrap; font-size: clamp(11px, 1.5vw, 14px); }
.tmpl-grid .tmpl-box .tmpl-title.split .deal-line { display: flex; justify-content: flex-end; align-items: center; gap: clamp(6px, 1vw, 10px); width: 100%; white-space: nowrap; }
.tmpl-grid .tmpl-box .tmpl-title.split .deal-badge { display: inline-flex; align-items: center; justify-content: center; height: clamp(20px, 2.8vw, 30px); padding: 0 clamp(8px, 1.5vw, 14px); border-radius: 50px; font-size: clamp(11px, 1.7vw, 14px); font-weight: 800; color: #ef4444; background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.35); }
.tmpl-grid .tmpl-box .tmpl-title.split .amount { color: #44cc00; font-weight: 700; font-size: clamp(20px, 3.2vw, 29px); line-height: 1; }
.tmpl-grid .tmpl-box .tmpl-title.split .won { font-size: clamp(11px, 1.8vw, 16px); color: #666; line-height: 1; padding-top: 5px; }
.tmpl-grid .tmpl-box .tmpl-btn { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 2vw, 20px); border-top: 1px solid #eee; padding-top: clamp(14px, 2vw, 20px); }
.tmpl-grid .tmpl-box .tmpl-btn .btn { display: inline-flex; align-items: center; justify-content: center; height: clamp(38px, 5vw, 44px); min-width: clamp(120px, 20vw, 160px); padding: 0 clamp(14px, 3vw, 20px); border-radius: 30px; font-weight: 700; font-size: clamp(13px, 2vw, 16px); text-decoration: none; transition: transform .15s ease, background .2s ease, color .2s ease, box-shadow .2s ease; }
.tmpl-grid .tmpl-box .tmpl-btn .btn:active { transform: translateY(1px); }
.tmpl-grid .tmpl-box .tmpl-btn .btn-primary { background: #44cc00; color: #fff; box-shadow: 0 8px 18px rgba(68,204,0,.25); }
.tmpl-grid .tmpl-box .tmpl-btn .btn-primary:hover { filter: brightness(.96); }
.tmpl-grid .tmpl-box .tmpl-btn .btn-ghost { background: #fff; color: #44cc00; border: 2px solid #44cc00; }
.tmpl-grid .tmpl-box .tmpl-btn .btn-ghost:hover { background: rgba(68,204,0,.06); }

.tmpl-detail .detail-grid { display: grid; gap: clamp(20px, 3vw, 28px); grid-template-columns: 1fr; /* 모바일 기본 1열 */ align-items: start; border-bottom: 3px solid #333; padding-bottom: clamp(40px, 6vw, 100px); margin-bottom: clamp(30px, 6vw, 80px); }
.tmpl-detail .detail-grid .detail-thumb { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.08); border-radius: 12px; }
.tmpl-detail .detail-grid .detail-thumb img { width: 100%; height: auto; display: block; object-fit: cover; }
.tmpl-detail .detail-grid .detail-info { padding-left: 0; }
.tmpl-detail .detail-grid .detail-info h1.d-title { margin: 0 0 clamp(14px, 2vw, 20px); font-weight: 700; color: #222; line-height: 1.25; font-size: clamp(24px, 3.4vw, 40px); border-bottom: 1px solid #eee; padding-bottom: clamp(12px, 1.6vw, 15px); }
.tmpl-detail .detail-grid .detail-info p.d-tags { padding-bottom: clamp(16px, 2.6vw, 25px); margin-bottom: clamp(14px, 2vw, 20px); border-bottom: 1px solid #eee; color: #9aa0a6; font-weight: 300; font-size: clamp(12px, 1.6vw, 16px); }
.tmpl-detail .detail-grid .detail-info p.d-tags span { margin-right: 10px; white-space: nowrap; }
.tmpl-detail .detail-grid .detail-info .d-spec { margin: 0 0 clamp(14px, 2.6vw, 20px); border-bottom: 1px solid #eee; padding-bottom: clamp(14px, 2.6vw, 20px); }
.tmpl-detail .detail-grid .detail-info .d-spec .row { display: grid; grid-template-columns: minmax(90px, 140px) 1fr; gap: clamp(6px, 1.4vw, 12px); align-items: start; padding: clamp(6px, 1.8vw, 10px) 0; }
.tmpl-detail .detail-grid .detail-info .d-spec .row .label { font-weight: 700; color: #222; white-space: nowrap; font-size: clamp(13px, 1.8vw, 16px); }
.tmpl-detail .detail-grid .detail-info .d-spec .value .price-strike { text-decoration: line-through; text-decoration-color: #ef4444; text-decoration-thickness: 2px; white-space: nowrap; position: relative; }
.tmpl-detail .detail-grid .detail-info .d-price { display: flex; align-items: center; justify-content: flex-end; gap: clamp(6px, 1.2vw, 10px); text-align: right; flex-wrap: wrap; white-space: nowrap; }
.tmpl-detail .detail-grid .detail-info .d-price b { line-height: 1; font-weight: 800; font-size: clamp(22px, 3.2vw, 33px); color: #44cc00; letter-spacing: -.3px; transition: transform .18s ease, filter .18s ease; }
.tmpl-detail .detail-grid .detail-info .d-price > span:not(.deal-badge) { margin-left: 2px; font-size: clamp(14px, 1.8vw, 18px); color: #555; line-height: 1; padding-top: 4px; }
.tmpl-detail .detail-grid .detail-info .d-price .deal-badge { display: inline-flex; align-items: center; padding: 2px clamp(7px, 1.6vw, 15px); margin-right: 8px; font-size: clamp(14px, 1.6vw, 14px); font-weight: 800; letter-spacing: .2px; color: #ef4444; background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.35); border-radius: 999px; vertical-align: baseline; }
.tmpl-detail .detail-grid .detail-info .d-btns { display: flex; gap: clamp(12px, 2vw, 20px); flex-wrap: wrap; justify-content: center; padding-top: clamp(20px, 3vw, 30px); }
.tmpl-detail .detail-grid .detail-info .btn { display: inline-flex; align-items: center; justify-content: center; height: clamp(40px, 5vw, 46px); padding: 0 clamp(16px, 3vw, 22px); min-width: clamp(140px, 24vw, 200px); border-radius: 30px; font-weight: 800; font-size: clamp(14px, 2vw, 16px); text-decoration: none; transition: transform .15s ease, filter .2s ease, background .2s ease, color .2s ease; }
.tmpl-detail .detail-grid .detail-info .btn:active { transform: translateY(1px); }
.tmpl-detail .detail-grid .detail-info .btn.btn-primary { background: #44cc00; color: #fff; box-shadow: 0 5px 8px rgba(68,204,0,.22); }
.tmpl-detail .detail-grid .detail-info .btn.btn-primary:hover { filter: brightness(.93); }
.tmpl-detail .detail-grid .detail-info .btn.btn-ghost { background: #fff; color: #44cc00; border: 2px solid #44cc00; }
.tmpl-detail .detail-grid .detail-info .btn.btn-ghost:hover { background: rgba(68,204,0,.06); }

.prd-div .prd-title { margin: 0 0 30px; font-weight: 700; color: #222; line-height: 1.25; font-size: clamp(20px, 3.6vw, 32px); }
.prd-notice { background: #f4f6f8; border-radius: 5px; padding: 30px 20px; margin-bottom: 50px; }
.prd-notice ul { margin: 0; padding-left: 18px; }
.prd-notice li { list-style: inside; color: #555; line-height: 2; font-size: clamp(13px, 1.6vw, 15px); }
.prd-notice a { color: #e53935; text-decoration: none; }
.prd-notice strong { font-weight: 700; color: #333; }
.prd-div .prd-grid { display: grid; grid-template-columns: repeat(2, 1fr); /* 모바일 2열 */ gap: 0; border: 1px solid #eee; overflow: hidden; background: #fff; }
.prd-div .prd-grid .prd-card { text-align: center; padding: 28px 22px; border-right: 1px solid #eee; border-bottom: 1px solid #eee; background: #fff; }
.prd-div .prd-grid .prd-card .prd-badge { display: inline-block; padding: 5px 20px; border-radius: 50px; background: #44cc00; color: #fff; font-weight: 700; font-size: 15px; letter-spacing: .2px; margin-bottom: 17px; }
.prd-div .prd-grid .prd-card .prd-icon { width: 84px; height: 84px; margin: 0 auto 20px; border-radius: 50px; background: #f2f3f5; display: flex; align-items: center; justify-content: center; }
.prd-div .prd-grid .prd-card .prd-icon img { width: 46px; height: 46px; object-fit: contain; }
.prd-div .prd-grid .prd-card .prd-name { margin: 0; font-size: clamp(16px, 2.5vw, 18px); font-weight: 700; color: #222; line-height: 1.4; }
.prd-div .prd-grid .prd-card .prd-desc { margin: 8px 0 0; color: #777; font-size: clamp(14px, 2vw, 16px); line-height: 1.5; }

.tmp-detail-banner { position: relative; width: 100%; min-height: 280px; /* 기본 높이 */ display: flex; align-items: center; background: url('/images/sub_bg1.jpg') center no-repeat; color: #222; }
.tmp-detail-banner .tdb-inner { width: 90%; max-width: 1200px; margin: 0 auto; text-align: center; padding: clamp(36px, 10vh, 90px) 0; }
.tmp-detail-banner .tdb-title { margin: 0 0 20px; line-height: 1.35; font-weight: 700; font-size: clamp(22px, 3.4vw, 34px); letter-spacing: -.2px; }
.tmp-detail-banner .tdb-desc { margin: 0; color: #555; line-height: 1.6; font-size: clamp(16px, 1.9vw, 21px); }


/* ===== 고객지원 ===== */

.support-tabs ul { display: flex; gap: clamp(16px, 4vw, 30px); padding: 0; margin-bottom: 80px; list-style: none; }
.support-tabs li { margin: 0; }
.support-tabs a { position: relative; display: inline-block; padding: 10px 2px; font-weight: 700; font-size: clamp(18px, 2.2vw, 24px); color: #7a7f87; text-decoration: none; outline: none; transition: color .2s ease; }
.support-tabs a:hover { color: #222; }
.support-tabs a.spt-active { color: #222; }
.support-tabs a.spt-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 3px; background: #44cc00; }

.faq-div .faq-list { margin: 0; padding: 0; list-style: none; }
.faq-div .faq-list li { margin: 0; }
.faq-div .faq-q { width: 100%; background: none; border: 0; text-align: left; padding: clamp(14px, 2.2vw, 20px) clamp(10px, 2vw, 14px); font-size: clamp(15px, 1.8vw, 18px); font-weight: 600; color: #111; cursor: pointer; display: flex; align-items: center; gap: 15px; border-top: 1px solid #eee; }
.faq-div .faq-list li:first-child .faq-q { border-top: 2px solid #eee; }
.faq-div .faq-icon { display: inline-block; background: #44cc00; color: #fff; font-weight: 700; font-size: clamp(15px, 1.8vw, 18px); line-height: 1; padding: 8px 10px; border-radius: 5px; }
.faq-div .faq-a { max-height: 0; overflow: hidden; background: #f6f8fa; border-top: 1px solid #eee; color: #444; font-size: clamp(14px, 1.8vw, 16px); line-height: 1.6; padding: 0 16px; transition: max-height .28s ease, padding .2s ease; }
.faq-div .faq-a.open { max-height: 600px; padding: clamp(15px, 3vw, 25px) clamp(10px, 2vw, 20px); }
.faq-div .faq-q.active { color: #44cc00; }

.notice-wrap .notice-total { margin: 6px 0 16px; font-weight: 700; color: #6b7280; /* 회색 */ letter-spacing: .2px; }
.notice-wrap .notice-total b { color: #111; }
.notice-wrap .notice-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; text-align:left;}
.notice-wrap .notice-item a { display: grid; grid-template-columns: 72px 1fr 120px; /* 번호 / 제목 / 날짜 */ align-items: center; gap: 10px; padding: 28px 45px; background: #f4f7f9; border-radius: 16px; text-decoration: none; color: #111; transition: transform .12s ease, box-shadow .18s ease, background .2s ease; }
.notice-wrap .notice-item a:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.1); background: #f1f4f6; }
.notice-wrap .notice-item .no { text-align: left; color: #8b939d; font-weight: 700; }
.notice-wrap .notice-item .title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notice-wrap .notice-item .date { color: #777; text-align: right; }
.notice-wrap .notice-pager { display: flex; justify-content: center; gap: 8px; margin: 28px 0 0; }
.notice-wrap .notice-pager .page { font-size:13px; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #333; color: #fff; font-weight: 700; text-decoration: none; opacity: .9; transition: opacity .2s ease, transform .12s ease; }
.notice-wrap .notice-pager .page:hover { opacity: .85; transform: translateY(-1px); }
.notice-wrap .notice-pager .page.is-current { opacity: 1; }

.noti-detail { width: 90%; max-width: 1200px; margin: 100px auto; }
.noti-detail .date { font-size: clamp(15px, 1.8vw, 18px); color: #777; font-weight: 300; padding: 15px 0 30px; border-bottom: 1px solid #eee; }
.noti-detail .ctt-div {min-height:300px; margin:20px 10px 60px;}
.noti-detail .post-nav { margin-top: clamp(20px, 3vw, 30px); padding-top: clamp(16px, 2.6vw, 30px); border-top: 1px solid #333; }
.noti-detail .post-nav .prev-post,
.noti-detail .post-nav .next-post { display: flex; align-items: center; gap: 8px; padding: clamp(14px, 2.2vw, 20px) clamp(8px, 1.6vw, 10px); color: #888; }
.noti-detail .post-nav .prev-post span:first-child,
.noti-detail .post-nav .next-post span:first-child { margin-right: 10px; min-width: clamp(60px, 10vw, 80px); color: #8e8e8e; font-weight: 700; padding: 0 25px; white-space: nowrap; }
.noti-detail .post-nav .prev-post span:last-child,
.noti-detail .post-nav .next-post span:last-child { color: #b3b3b3; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.noti-detail .post-nav .next-post { border-top: 1px solid #d4d4d4; }
.noti-detail .post-nav .prev-post::before,
.noti-detail .post-nav .next-post::before { content: ""; width: clamp(10px, 1.5vw, 12px); height: clamp(10px, 1.5vw, 12px); display: inline-block; border-left: 2px solid #9aa0a6; border-top: 2px solid #9aa0a6; transform: rotate(45deg); /* 기본: ∧ 형태 */ margin-left: 12px; /* 왼쪽 여백 */ flex: 0 0 auto; }
.noti-detail .post-nav .next-post::before { transform: rotate(-135deg); }
.noti-detail .post-nav .btn-list { text-align: center; margin-top: 20px; }
.noti-detail .post-nav .btn-list a { display: inline-block; padding: clamp(9px, 2.2vw, 10px) clamp(22px, 5vw, 30px); border-radius: 30px; text-decoration: none; background: #fff; color: #44cc00; border: 1px solid #44cc00; transition: background .3s ease, color .2s ease; font-size: clamp(14px, 1.9vw, 16px); }
.noti-detail .post-nav .btn-list a:hover { background: #44cc00; color: #fff; }


/* ===== 비용안내 ===== */
.price-head { display: flex; justify-content: space-between; margin-bottom: 20px; }
.price-title { margin: 0; font-size: clamp(18px, 4vw, 30px); font-weight: 700; }
.price-note { font-size: clamp(13px, 1.6vw, 15px); color: #666; }
.price-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 15px; color: #111; margin-bottom:20px;}
.price-table thead th { text-align: center; font-size: 20px; padding: 18px 15px; font-weight: 700; border-bottom: 2px solid #222; border-top: 2px solid #44cc00; }
.price-table tbody th { text-align: left; padding: 14px 12px; font-weight: 700; color: #222; border-bottom: 1px solid #eee; font-size:18px;}
.price-table td { padding: 17px 12px; color: #333; border-bottom: 1px solid #eee; font-size:17px; text-align:center;}
.price-table .col-item { width: 26%; text-align:left; }
.price-table .hl-start td, .price-table .hl-start th { border-top: 3px solid #44cc00; }
.price-table .hl-end td, .price-table .hl-end th { border-bottom: 3px solid #44cc00; }
.price-table .hl-start th, .price-table .hl-mid th, .price-table .hl-end th { border-left: 3px solid #44cc00; }
.price-table .hl-start td:last-child, .price-table .hl-mid td:last-child, .price-table .hl-end td:last-child { border-right: 3px solid #44cc00; }
.price-table .minus { color: #e53935; font-weight: 800; }
.price-table .total td { font-size: 22px; font-weight: 800; }
.price-cards { display: none; }

.maint-div { margin-top: 40px; }
.maint-div .maint-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-bottom: 20px; }
.maint-div .maint-head { background: #44cc00; color: #fff; text-align: center; font-weight: 600; padding: clamp(14px, 2.2vw, 18px) clamp(8px, 2vw, 12px); font-size: clamp(18px, 2.2vw, 22px); }
.maint-div .maint-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.maint-div .maint-table thead th { text-align: center; font-weight: 700; padding: 0 8px; height: clamp(48px, 7vw, 60px); border-bottom: 2px solid #222; vertical-align: middle; font-size: clamp(16px, 1.9vw, 20px); white-space: normal; word-break: keep-all; overflow-wrap: break-word; }
.maint-div .maint-table tbody td { text-align: center; padding: 0 8px; height: clamp(48px, 8vw, 62px); vertical-align: middle; border-bottom: 1px solid #eee; color: #111; font-size: clamp(14px, 1.8vw, 18px); font-weight: 700; white-space: normal; word-break: keep-all; overflow-wrap: break-word; }
.maint-div .maint-table tbody td:last-child { font-size: clamp(12px, 1.7vw, 17px); font-weight: 300; }
.maint-div .maint-table tr > td:nth-child(2),
.maint-div .maint-table thead th:nth-child(2) { border-left: 1px solid #eee; }
.maint-div .maint-table small { display: block; font-size: clamp(12px, 1.6vw, 13px); color: #555; line-height: 1.1; font-weight: 400; }


/* 태블릿 이상 */
@media (min-width:768px) {
    .tmpl-detail .detail-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
    .tmpl-detail .detail-grid .detail-info { padding-left: 20px; }
    .prd-div .prd-grid { grid-template-columns: repeat(3,1fr); }
    .prd-div .prd-grid .prd-card { padding: 32px 28px; }
    .prd-div .prd-grid .prd-card { border-right: 1px solid #eee; border-bottom: 1px solid #eee; }
    .prd-div .prd-grid .prd-card:nth-child(3n) { border-right: 0; }
    .prd-div .prd-grid .prd-card:nth-last-child(-n+3) { border-bottom: 0; }
}

/* 모바일 (≤767px) */
@media (max-width:767px) {
    .sub-visual { min-height: 320px; background-position: center; padding: 48px 0; }
    .sv-inner { width: 92%; text-align: center;}
    .sv-title { padding-bottom: 10px; font-weight: 400; line-height: 1.15; }
    .sv-desc { font-weight: 300; line-height: 1.6; }
    .ctt-div { width: 90%; max-width: 1200px; margin: 60px auto; }
    .tmpl-grid { grid-template-columns: 1fr; gap: 14px; }
    .tmpl-grid .tmpl-box .tmpl-btn { flex-direction: column; gap: 10px; }
    .tmpl-grid .tmpl-box .tmpl-btn .btn { width: 100%; min-width: 0; height: clamp(40px, 6vw, 46px); font-size: clamp(14px, 2vw, 16px); }
    .tmpl-grid .tmpl-box .tmpl-title.split .row.top-line { flex-direction: column; align-items: flex-start; gap: 8px; }
    .tmpl-grid .tmpl-box .tmpl-title.split .name { white-space: normal; /* 줄바꿈 허용 */ text-overflow: initial; overflow: visible; width: 100%; font-size: clamp(20px, 5.2vw, 28px); }
    .tmpl-grid .tmpl-box .tmpl-title.split .benefit { text-align: left; width: 100%; font-size: clamp(13px, 3.3vw, 16px); }
    .tmpl-grid .tmpl-box .tmpl-title.split .original-inline { font-size: clamp(12px, 3.2vw, 15px);}
    .tmpl-grid .tmpl-box .tmpl-title.split .deal-line { justify-content: flex-end; /* 우측 정렬 유지 */ gap: clamp(8px, 2.2vw, 12px); width: 100%; }
    .tmpl-grid .tmpl-box .tmpl-title.split .deal-badge { height: clamp(24px, 7vw, 32px); padding: 0 clamp(10px, 4vw, 16px); font-size: clamp(12px, 3.5vw, 14px); }
    .tmpl-grid .tmpl-box .tmpl-title.split .amount { font-size: clamp(24px, 6vw, 30px);  }
    .tmpl-grid .tmpl-box .tmpl-title.split .won { font-size: clamp(13px, 3.8vw, 16px);  }
    .tmpl-detail { margin: 48px auto; }
    .tmpl-detail .detail-grid .detail-info .d-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; }
    .tmpl-detail .detail-grid .detail-info .d-btns .btn { flex: 0 1 calc(50% - 5px); width: calc(50% - 5px); min-width: 0; height: clamp(40px,6vw,46px); padding: 0 clamp(12px,3vw,18px); font-size: clamp(13px,2vw,16px); }
    .tmpl-detail .detail-grid .detail-info .d-spec { padding-bottom: 16px; margin-bottom: 16px; }
    .tmpl-detail .detail-grid .detail-info .d-spec .row { grid-template-columns: 1fr; gap: 3px; }
    .tmpl-detail .detail-grid .detail-info .d-spec .row .label { opacity: .9; font-size: 14px; color:#000;}
    .tmpl-detail .detail-grid .detail-info .d-price { white-space: nowrap; }
    .prd-div .prd-grid .prd-card:nth-child(2n) { border-right: 0; }
    .prd-div .prd-grid .prd-card:nth-last-child(-n+2) { border-bottom: 0; }
    .tmp-detail-banner { min-height: 220px; }
    .support-tabs ul {margin-bottom:30px;}
    .support-tabs ul li a { padding-bottom: 5px; }
    .notice-wrap .notice-item a { grid-template-columns: 1fr 5fr 2fr; padding: 20px; border-radius: 12px; }
    .notice-wrap .notice-item .title { font-size: 15px; }
    .notice-wrap .notice-item .date { font-size: 14px; }
    .noti-detail { width: 90%; margin: 60px auto; }
    .noti-detail .date {padding:15px 0 20px;}
    .noti-detail .ctt-div { margin: 10px auto; width: 94%; }
    .noti-detail .post-nav .prev-post,
    .noti-detail .post-nav .next-post { padding: 12px 6px; gap: 8px; }
    .noti-detail .post-nav .prev-post span:first-child,
    .noti-detail .post-nav .next-post span:first-child { min-width: 64px; padding: 0 12px; font-size:15px; }
    .noti-detail .post-nav .prev-post span:last-child,
    .noti-detail .post-nav .next-post span:last-child { font-size:13px; }
    .noti-detail .post-nav .prev-post::before,
    .noti-detail .post-nav .next-post::before { width: 10px; height: 10px; margin-left: 8px; }
    .noti-detail .post-nav .btn-list a { display: block; width: 100%; max-width: 420px; margin: 0 auto; }
    .price-head { padding-top: 10px; }
    .price-table { display: none; }
    .price-cards { display: grid; gap: 20px; }
    .price-card { border: 1px solid #eee; border-radius: 12px; background: #fff; overflow: hidden; }
    .price-card .card-title { margin: 0; padding: 14px 16px; font-size: 18px; font-weight: 800; background: #f7f8f9; border-bottom: 1px solid #eee; }
    .price-card .card-list { list-style: none; margin: 0; padding: 0; }
    .price-card .row { display: grid; grid-template-columns: 1fr 2fr; gap: 15px; padding: 12px 16px; border-bottom: 1px solid #f0f0f0; }
    .price-card .row:last-child { border-bottom: 0; }
    .price-card .row-name { font-weight: 700; color: #222; }
    .price-card .row-txt { color: #333; }
    .price-card .row-txt.minus { color: #e50000; font-weight: 800; }
    .price-card .hl-group { border: 2px solid #44cc00; border-left: 0; border-right: 0; padding: 0; }
    .price-card .hl-group .row { border-bottom: 1px solid #f0f0f0; }
    .price-card .hl-group .row:last-child { border-bottom: 0; }
    .price-card .row.total { background: #fafafa; font-weight: 800; }
    .prd-notice { margin-top: 20px; padding:20px 10px; }
    .maint-div .maint-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* 태블릿 (768~1023) */
@media (min-width:768px) and (max-width:1023px) {
    .sub-visual { min-height: 420px; /* 높이 살짝 축소 */ background-position: center top; }
    .sv-title { padding-bottom: 12px; letter-spacing: .2px;}
    .sv-desc { opacity: .95; }
    .tmpl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .tmpl-detail .detail-grid { grid-template-columns: 1fr 1fr; align-items: start; }
    .tmpl-detail .detail-grid .detail-info { padding-left: 10px; }
    .tmpl-detail .detail-grid .detail-info .d-btns { display: flex; flex-wrap: wrap; gap: 12px; /* 버튼 사이 간격 */ justify-content: space-between; }
    .tmpl-detail .detail-grid .detail-info .d-btns .btn { flex: 0 1 calc(50% - 6px); /* = 50% - gap/2 */ width: calc(50% - 6px); min-width: 0; /* 고정폭 해제 */ }
    .tmp-detail-banner { min-height: 280px; }
    .maint-div .maint-grid { gap: 20px; }
    .noti-detail .post-nav .prev-post,
    .noti-detail .post-nav .next-post { gap: 6px; }
    .noti-detail .post-nav .prev-post span:first-child,
    .noti-detail .post-nav .next-post span:first-child { padding: 0 18px; /* 라벨 여백 축소 */ }
}

/* PC (1024~1399) */
@media (min-width:1024px) and (max-width:1399px) {
    .tmpl-grid { gap: 36px; }
    .tmpl-detail .detail-grid { grid-template-columns: 7fr 5fr; gap: 44px; }
    .tmpl-detail .detail-grid .detail-info .d-spec .row { grid-template-columns: 120px 1fr; }
    .prd-div .prd-grid .prd-card .prd-name { font-size: 20px; }
    .tmp-detail-banner { min-height: 320px; }
}

/* ≥1400 */
@media (min-width:1400px) {
    .tmpl-grid { gap: 40px; }
    .tmpl-detail { max-width: 1280px; }
    .tmpl-detail .detail-grid { grid-template-columns: 6fr 4fr; gap: 90px; }
    .tmpl-detail .detail-grid .detail-info .d-spec .row { grid-template-columns: 140px 1fr; }
    .prd-div { max-width: 1280px; }
    .prd-div .prd-grid .prd-card { padding: 36px 32px; }
    .prd-div .prd-grid .prd-card .prd-name { font-size: 22px; }
}