/* 하위 페이지 (홈·신청 서비스 제외): 공통 머리 영역과 본문 부품을 홈·메뉴와 같은 결로 맞춘다.
   style.css(옛 디자인) 위에 덮어쓴다. 본문 규칙은 #contents-home을 앞에 붙여 옛 규칙보다 우선한다. */

.blind { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 머리 영역 ---------- */
.sub-head { position: relative; overflow: hidden; background: linear-gradient(180deg, #eaf6f1 0%, #f5faf8 64%, #fff 100%); font-family: var(--ot-font); }
.sub-head::before { content: ""; position: absolute; right: -6%; top: -60%; width: 680px; height: 680px; border-radius: 50%; background: radial-gradient(closest-side, rgba(44, 181, 155, .2), rgba(44, 181, 155, 0)); pointer-events: none; }
.sub-head-inner { position: relative; max-width: 1048px; min-height: 232px; margin: 0 auto; padding: 34px 24px 42px; }
.sub-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; line-height: 1.4; color: #6b7672; }
.sub-crumb > * + *::before { content: "›"; margin-right: 6px; color: #a9b5b0; }
.sub-crumb a:hover, .sub-crumb a:focus-visible { color: var(--ot-primary-dark); }
.sub-crumb [aria-current] { color: #2b3330; font-weight: 600; }
.sub-eyebrow { margin-top: 34px; font-size: 14px; font-weight: 700; letter-spacing: .02em; color: var(--ot-primary-dark); }
.sub-title { margin: 6px 0 0; font-family: var(--ot-font-display); font-size: 46px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; color: #111a18; text-wrap: balance; word-break: keep-all; }
.sub-desc { max-width: 560px; margin-top: 14px; font-size: 17px; line-height: 1.6; color: #4d5955; word-break: keep-all; }
.sub-eyebrow, .sub-title, .sub-desc { animation: sub-rise .8s var(--ot-ease) both; }
.sub-title { animation-delay: .06s; }
.sub-desc { animation-delay: .12s; }
@keyframes sub-rise { from { opacity: 0; transform: translateY(14px); } }

/* 꿈돌이: 눈은 mascot.js가 마우스 쪽으로 움직인다 */
.mascot { position: relative; display: block; height: auto !important; aspect-ratio: 740 / 819; }
.mascot.is-merchant { aspect-ratio: 740 / 818; }
.mascot img { display: block; width: 100%; height: 100%; }
.sub-mascot { position: absolute !important; right: 30px; bottom: -30px; width: 196px; animation: sub-pop 1s var(--ot-ease-back) .15s both; }
@keyframes sub-pop { from { opacity: 0; transform: translateY(30px) rotate(-6deg); } }

/* 같은 구역 페이지 탭: 머리글 바로 아래에 붙는다 */
.sub-tabs { position: sticky; top: 100px; z-index: 20; border-top: 1px solid #e1ebe7; border-bottom: 1px solid var(--ot-line); background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px); font-family: var(--ot-font); }
.sub-tabs-inner { display: flex; gap: 4px; max-width: 1048px; margin: 0 auto; padding: 0 14px; overflow-x: auto; scrollbar-width: none; }
.sub-tabs-inner::-webkit-scrollbar { display: none; }
.sub-tabs a { position: relative; flex: 0 0 auto; padding: 18px 10px; font-size: 16px; font-weight: 600; line-height: 1.3; color: #6b7672; white-space: nowrap; transition: color .2s ease; }
.sub-tabs a::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--ot-primary); transform: scaleX(0); transition: transform .35s var(--ot-ease); }
.sub-tabs a:hover, .sub-tabs a:focus-visible { color: #111a18; }
.sub-tabs a:hover::after { transform: scaleX(.4); }
.sub-tabs a.is-current { color: #111a18; }
.sub-tabs a.is-current::after { transform: scaleX(1); }
.sub-tabs .sub-ext { margin-left: 4px; font-size: 13px; color: #9aa6a1; }
/* 지금 탭 밑줄 하나가 탭 사이를 미끄러진다 (layout.js가 .sub-tabs-ink를 넣고 has-ink를 붙인다) */
.sub-tabs-inner { position: relative; }
.sub-tabs-ink { position: absolute; left: 0; bottom: 0; width: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--ot-primary); pointer-events: none; transition: transform .45s var(--ot-ease), width .45s var(--ot-ease); }
.sub-tabs-ink.no-anim { transition: none; }
.sub-tabs.has-ink a.is-current::after { transform: scaleX(0); }
/* 같은 구역 탭으로 옮길 때는 초록 막대 없이 본문만 바꾼다 (layout.js).
   떠날 때: 본문·푸터가 가라앉고, 제목·설명 글자는 그 자리에서 반짝이는 스켈레톤 막대(줄마다)로 바뀐다.
   새 페이지에서는 같은 자리의 스켈레톤이 잠깐 반짝인 뒤 새 글자가 떠오른다 (글자 섞임 효과는 눈이 피로해 쓰지 않는다).
   도착하면: 본문과 푸터는 목록 받아 오기(ajax)까지 끝나 높이가 정해진 뒤 한 번에 나타난다(pt-settled). 그래서 푸터가 오르내리지 않는다.
   pt-soft·pt-settled는 떼지 않는다 (떼면 머리 영역 등장 애니메이션이 다시 돈다). 스크립트가 멈춰도 3초 뒤에는 보인다. */
html.sub-leaving #contents-home { opacity: 0; transform: translateY(10px); transition: opacity .2s ease, transform .3s var(--ot-ease); }
html.sub-leaving footer.site-footer { opacity: 0; transition: opacity .2s ease; }
html.pt-soft .sub-eyebrow, html.pt-soft .sub-mascot, html.pt-soft .sub-title, html.pt-soft .sub-desc { animation: none; }
/* 스켈레톤: 글자를 감싼 .sk의 배경 막대 진하기(--sk-a)와 글자색을 함께 바꾼다. 줄마다 막대가 생기도록 box-decoration-break: clone. */
@property --sk-a { syntax: "<number>"; inherits: false; initial-value: 0; }
.sub-title .sk, .sub-desc .sk { --sk-a: 0; border-radius: 10px; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: linear-gradient(90deg, rgba(211, 227, 221, var(--sk-a)) 0%, rgba(238, 245, 242, var(--sk-a)) 45%, rgba(211, 227, 221, var(--sk-a)) 90%); background-size: 300% 100%; background-position: 100% 0; transition: color .18s ease, --sk-a .18s ease; }
.sub-desc .sk { border-radius: 6px; }
html.sub-leaving .sub-title .sk, html.sub-leaving .sub-desc .sk { color: transparent; --sk-a: 1; animation: sk-shimmer .9s linear infinite; }
html.pt-soft .sub-title .sk, html.pt-soft .sub-desc .sk { animation: sk-reveal .7s ease both, sk-shimmer .7s linear 1; }
html.pt-soft .sub-desc .sk { animation-delay: .06s, 0s; }
@keyframes sk-shimmer { from { background-position: 100% 0; } to { background-position: -50% 0; } }
@keyframes sk-reveal { 0%, 45% { color: transparent; --sk-a: 1; } }
html.pt-soft:not(.pt-settled) #contents-home, html.pt-soft:not(.pt-settled) footer.site-footer { opacity: 0; animation: pt-unhide .3s ease 3s forwards; }
html.pt-soft.pt-settled #contents-home { animation: sub-soft-in .45s var(--ot-ease) backwards; }
html.pt-soft.pt-settled footer.site-footer { animation: sub-soft-fade .4s ease .12s backwards; }
@keyframes sub-soft-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes sub-soft-fade { from { opacity: 0; } }
@keyframes pt-unhide { to { opacity: 1; } }

/* ---------- 본문 틀 ---------- */
.sub-tabs ~ #contents-home { max-width: 1048px; padding: 56px 24px 120px; font-family: var(--ot-font); color: #1e1e1e; }
.sub-tabs ~ #contents-home > h2:first-of-type { display: none; }
#contents-home h3 { display: flex; align-items: center; gap: 10px; margin: 64px 0 18px; font-size: 22px; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; color: #111a18; }
#contents-home h3::before { content: ""; flex: 0 0 6px; width: 6px; height: 22px; border-radius: 3px; background: var(--ot-primary); }

/* 페이지 맨 위 안내 문구 */
#contents-home .con-top-wrap { margin: 0 0 40px; padding: 22px 26px; border: 1px solid #e1efe9; border-radius: 18px; background: #f3f9f7; text-align: left; }
#contents-home .con-top-wrap .key { font-size: 20px; font-weight: 700; line-height: 1.45; color: #111a18; word-break: keep-all; }
#contents-home .con-top-wrap .value { margin-top: 6px; font-size: 16.5px; line-height: 1.7; color: #3a4441; word-break: keep-all; }
#contents-home .con-top-wrap .key + .value { margin-top: 6px; }
#contents-home .con-top-wrap .point { margin-top: 10px; font-size: 15px; font-weight: 700; line-height: 1.55; color: #d9480f; word-break: keep-all; }

/* 단계 안내: 카드 + 단계 표시 + 다음 단계 화살표 */
#contents-home .flex-4-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); align-items: stretch; gap: 22px; margin-top: 8px; }
#contents-home .flex-4-col > div { position: relative; width: auto; margin: 0; padding: 30px 22px 28px; border: 1px solid #e3ece8; border-radius: 22px; background: #fff; text-align: center; box-shadow: var(--ot-shadow-xs); transition: box-shadow .3s ease, transform .4s var(--ot-ease); }
#contents-home .flex-4-col > div:hover { box-shadow: var(--ot-shadow-md); transform: translateY(-4px); }
#contents-home .flex-4-col > div img { display: block; width: 128px; max-width: 100%; height: auto; margin: 0 auto; }
/* 새 단계 아이콘(투명 배경 3D)은 옅은 민트 원 위에 올린다 */
#contents-home .flex-4-col > div img[src*="/main2026/step/"] { width: 148px; border-radius: 50%; background: radial-gradient(circle at 50% 56%, #e4f5ef 0 47%, rgba(228, 245, 239, 0) 48%); transition: transform .45s var(--ot-ease-back); }
#contents-home .flex-4-col > div:hover img[src*="/main2026/step/"] { transform: translateY(-4px) rotate(-3deg); }
#contents-home .flex-4-col > div .key { display: inline-flex; align-items: center; height: 26px; margin-top: 18px; padding: 0 12px; border-radius: 13px; background: #e3f5ef; font-size: 13px; font-weight: 800; letter-spacing: .04em; color: var(--ot-primary-dark); text-transform: uppercase; }
#contents-home .flex-4-col > div .text { margin-top: 10px; font-size: 16px; line-height: 1.6; color: #3a4441; word-break: keep-all; }
/* 같은 카드의 두 번째 문단은 각주처럼 작게 (예: 발급방법 오프라인 STEP 1의 판매대행점 안내) */
#contents-home .flex-4-col > div .text ~ .text { margin-top: 6px; font-size: 13.5px; line-height: 1.55; color: #6b7672; }
#contents-home .flex-4-col:not(.phone) > div:not(:last-child)::after { content: ""; position: absolute; right: -16px; top: 50%; z-index: 1; width: 10px; height: 10px; border-top: 2px solid #9fd2c3; border-right: 2px solid #9fd2c3; transform: translateY(-50%) rotate(45deg); }
/* 앱 화면 단계 (휴대폰 캡처) */
#contents-home .flex-4-col.phone { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
#contents-home .flex-4-col.phone > div { padding: 18px 14px 22px; border: 0; background: #f1f7f5; box-shadow: none; }
#contents-home .flex-4-col.phone > div img { width: 100%; filter: drop-shadow(0 10px 18px rgba(16, 48, 42, .12)); }
#contents-home .flex-4-col.phone > div .text { font-size: 15px; }

/* 보조 안내 (※) */
#contents-home .ju-text-wrap { margin-top: 32px; padding: 18px 22px; border-radius: 14px; background: #f6f7f7; text-align: left; }
#contents-home .ju { margin: 0; font-size: 14.5px; line-height: 1.65; color: #5d6763; word-break: keep-all; }
#contents-home .ju + .ju { margin-top: 6px; }

/* 본문 단락 */
#contents-home .text-content { margin-top: 0; font-size: 16px; line-height: 1.75; color: #3a4441; word-break: keep-all; }
#contents-home .text-content .point { display: block; margin-top: 12px; padding: 12px 16px; border-left: 3px solid var(--ot-primary); border-radius: 0 12px 12px 0; background: #f3f9f7; color: #1f5f53; }

/* 고객센터 상자 */
#contents-home .customer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 0; padding: 0; background: none; color: inherit; text-align: left; }
#contents-home .customer > div { width: auto; padding: 26px 26px 28px; border: 1px solid #e3ece8; border-radius: 20px; background: #fff; box-shadow: var(--ot-shadow-xs); }
#contents-home .customer > div .title { font-size: 16px; font-weight: 700; color: #111a18; }
#contents-home .customer > div .text { margin-top: 4px; font-size: 14px; color: #6b7672; }
#contents-home .customer > div .number { margin-top: 8px; font-family: var(--ot-font-display); font-size: 30px; font-weight: 700; line-height: 1.3; color: var(--ot-primary-dark); }
#contents-home .customer > div .text + .number { margin-top: 16px; }

/* 앱 내려받기 버튼 */
#contents-home .app_download { display: flex; justify-content: center; gap: 12px; margin: 40px 0 64px; }
#contents-home .app_download a { width: 220px; margin: 0; overflow: hidden; border-radius: 12px; transition: transform .3s var(--ot-ease), box-shadow .3s ease; }
#contents-home .app_download a:hover { transform: translateY(-3px); box-shadow: var(--ot-shadow-md); }
#contents-home .app_download img { display: block; width: 100%; border-radius: 12px; }

/* 소개 */
#contents-home .ontong { margin-top: 0; text-align: center; }
#contents-home .ontong img { max-width: 100%; height: auto; border-radius: 20px; }
#contents-home .ontong .title { font-size: 24px; font-weight: 700; color: #111a18; }
#contents-home .ontong .text { margin-top: 12px; font-size: 17px; line-height: 1.7; color: #3a4441; word-break: keep-all; }
#contents-home .ontong .text strong { color: var(--ot-primary-dark); }

/* 사용처 넘김 사진 */
#contents-home .swiper-container { margin-top: 8px; padding: 34px 0 6px; }
#contents-home .swiper-container .swiper-wrapper .swiper-slide { opacity: .72; transform: scale(.86); transition: transform .6s var(--ot-ease), opacity .6s ease; }
#contents-home .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active { opacity: 1; transform: scale(1.1); }
#contents-home .swiper-container .swiper-slide img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 7; object-fit: cover; border-radius: 22px; background: #eef7f3; }
#contents-home .swiper-container .swiper-slide p { margin-top: 14px; font-size: 18px; font-weight: 600; line-height: 1.4; text-align: center; color: #2b3330; }
#contents-home .swiper-container .ui { align-items: center; gap: 12px; height: auto; margin-top: 44px; background: none; }
#contents-home .swiper-container .ui div { width: 46px; height: 46px; line-height: 46px; border-radius: 50%; font-size: 15px; }
#contents-home .swiper-container .ui div.swiper-button-next, #contents-home .swiper-container .ui div.swiper-button-prev { border: 1px solid #dfe7e4; background-size: 20px; background-color: #fff; transition: border-color .2s ease, box-shadow .2s ease; }
#contents-home .swiper-container .ui div.swiper-button-next:hover, #contents-home .swiper-container .ui div.swiper-button-prev:hover { border-color: var(--ot-primary); box-shadow: var(--ot-shadow-sm); }
#contents-home .swiper-container .ui .swiper-pagination { width: auto; min-width: 64px; padding: 0 12px; border-radius: 23px; background: #f1f5f3; font-variant-numeric: tabular-nums; color: #3a4441; }

/* ---------- 입력 ---------- */
#contents-home input[type="text"], #contents-home input[type="tel"], #contents-home input[type="number"], #contents-home input[type="email"], #contents-home input[type="password"], #contents-home textarea, #contents-home .select-wrap select {
  height: 50px; padding: 0 16px; border: 1px solid #d5dbd8; border-radius: 12px; background: #fff; font-family: inherit; font-size: 16px; line-height: normal; text-indent: 0; color: #1e1e1e; transition: border-color .2s ease, box-shadow .2s ease; }
#contents-home textarea { height: auto; padding: 12px 16px; }
/* style.css의 .select-wrap은 40px인데 select는 50px이라 아래로 넘쳤다. 칸 높이를 select에 맞춘다. */
#contents-home .select-wrap { height: auto; }
#contents-home input:focus, #contents-home textarea:focus, #contents-home select:focus { outline: none; border-color: var(--ot-primary); box-shadow: 0 0 0 4px rgba(44, 181, 155, .16); }
#contents-home input::placeholder, #contents-home textarea::placeholder { color: #a3aca9; }
#contents-home input[type="checkbox"] + label, #contents-home input[type="radio"] + label { padding-left: 32px; line-height: 22px; color: #2b3330; }
#contents-home input[type="checkbox"] + label:before, #contents-home input[type="radio"] + label:before { width: 22px; height: 22px; border: 1.5px solid #c9d3cf; border-radius: 7px; background-color: #fff; }
#contents-home input[type="radio"] + label:before { border-radius: 50%; }
#contents-home input[type="checkbox"]:checked + label:before, #contents-home input[type="radio"]:checked + label:before { border-color: var(--ot-primary); background-color: var(--ot-primary); }
#contents-home input[type="checkbox"]:focus-visible + label:before, #contents-home input[type="radio"]:focus-visible + label:before { box-shadow: 0 0 0 4px rgba(44, 181, 155, .2); }

/* 가맹점 신청: 안내 카드 */
#contents-home .franchise .fran-wrap { padding: 0; border: 0; text-align: left; }
#contents-home .franchise .fran-wrap .title { font-size: 24px; font-weight: 700; color: #111a18; }
#contents-home .franchise .fran-wrap .text-item { margin-top: 10px; font-size: 16px; line-height: 1.7; color: #3a4441; }
#contents-home .franchise .fran-wrap .detail-wrap { max-width: none; margin: 24px 0 0; padding: 6px 26px; border: 1px solid #e3ece8; border-radius: 20px; background: #f6faf8; }
#contents-home .franchise .fran-wrap .detail-wrap ul { margin: 0; padding: 16px 0; border-bottom: 1px dashed #d8e4df; }
#contents-home .franchise .fran-wrap .detail-wrap ul:last-child { border-bottom: 0; }
#contents-home .franchise .fran-wrap .detail-wrap .flex { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: start; }
#contents-home .franchise .fran-wrap .detail-wrap ul li { line-height: 1.6; }
#contents-home .franchise .fran-wrap .detail-wrap ul li.sub-title { margin: 0; font-size: 15px; font-weight: 700; color: var(--ot-primary-dark); }
#contents-home .franchise .fran-wrap .detail-wrap ul li.sub-text { font-size: 15px; color: #2b3330; word-break: keep-all; }
#contents-home .franchise .fran-wrap .detail-wrap ul li p { margin-top: 2px; font-size: 13.5px; color: #7b8682; }

/* 탭 (가맹점 신청 / 신청 취소): 둥근 선택 막대 */
#contents-home .tab { height: auto; margin: 44px 0 0; }
#contents-home .tab:after { display: none; }
#contents-home .tab ul { position: static; display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: #eef3f1; }
#contents-home .tab ul li { width: auto; min-width: 140px; height: auto; padding: 0 22px; border: 0; border-radius: 999px; background: transparent; font-size: 16px; font-weight: 600; line-height: 44px; color: #5d6763; text-align: center; transition: background .25s ease, color .25s ease, box-shadow .25s ease; }
#contents-home .tab ul li.on { background: #fff; color: var(--ot-primary-dark); font-weight: 700; box-shadow: var(--ot-shadow-sm); }
#contents-home .tab-wrapper .tab-title { margin: 32px 0 12px; font-size: 20px; }
#contents-home .tab-wrapper .tab-con { margin-top: 18px; border-top: 0; }
#contents-home .tab-wrapper .tab-con .form-wrapper { padding: 6px 26px; border: 1px solid #e3ece8; border-radius: 20px; background: #fff; box-shadow: var(--ot-shadow-xs); }
#contents-home .tab-wrapper .tab-con .form-wrapper .item { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid #f0f4f2; }
#contents-home .tab-wrapper .tab-con .form-wrapper .item:last-child { border-bottom: 0; }
#contents-home .tab-wrapper .tab-con .form-wrapper .item .key { width: auto; text-indent: 0; font-size: 15.5px; font-weight: 700; color: #2b3330; }
#contents-home .tab-wrapper .tab-con .form-wrapper .item .key em { margin-left: 2px; color: #e03131; }
#contents-home .tab-wrapper .tab-con .form-wrapper .item .value input { width: 100%; max-width: 420px; }
#contents-home .tab-wrapper .tab-con .form-wrapper .item .value.flex { display: flex; gap: 8px; }
#contents-home .tab-wrapper .tab-con .form-wrapper .item .value { min-width: 0; }
#contents-home .tab-wrapper .tab-con .form-wrapper .item .value.flex input { flex: 1 1 0; width: 0; min-width: 0; max-width: 132px; margin: 0; text-align: center; }
#contents-home .tab-wrapper .tab-con .form-wrapper .item .value .btn-address { height: 50px; border-radius: 12px; background: #111a18; line-height: 50px; }

/* 동의 펼침 */
#contents-home .acodion-wrap { margin-top: 28px; }
#contents-home .acodion-wrap .acodion { margin-top: 12px; overflow: hidden; border: 1px solid #e3ece8; border-radius: 16px; background: #fff; }
#contents-home .acodion-wrap .acodion .btn-aco { padding: 16px 56px 16px 18px; border-bottom: 0; font-size: 15.5px; font-weight: 600; line-height: 1.5; color: #2b3330; }
#contents-home .acodion-wrap .acodion .btn-aco:after { right: 12px; transition: transform .3s var(--ot-ease); }
#contents-home .acodion-wrap .acodion.on .btn-aco { border-bottom: 1px solid #edf1ef; }
#contents-home .acodion-wrap .acodion .aco-con.gray { max-height: 320px; padding: 22px 24px; overflow: auto; background: #f7faf9; font-size: 14px; line-height: 1.75; }
/* 약관 끝 동의 문장도 class="sub-title"이라 페이지 제목(46px) 규칙을 되돌린다 */
#contents-home .acodion-wrap .acodion .aco-con.gray .sub-title { margin: 14px 0 0; padding: 0; font-family: inherit; font-size: inherit; font-weight: 700; line-height: 1.75; letter-spacing: normal; color: #2b3330; text-wrap: wrap; animation: none; }

/* ---------- 버튼 ---------- */
#contents-home .btn-wrap { gap: 10px; margin-top: 32px; }
#contents-home .btn-wrap button, #contents-home .search-btn { height: 54px; min-width: 120px; margin: 0; padding: 0 30px; border-radius: 27px; background: var(--ot-primary); font-family: inherit; font-size: 16px; font-weight: 700; line-height: 54px; color: #fff; box-shadow: var(--ot-shadow-sm); transition: background .2s ease, transform .3s var(--ot-ease), box-shadow .3s ease; }
#contents-home .btn-wrap button:hover, #contents-home .search-btn:hover { background: var(--ot-primary-dark); transform: translateY(-2px); box-shadow: var(--ot-shadow-md); }
#contents-home .btn-wrap button.init { background: #eef1f0; color: #3a4441; box-shadow: none; }
/* 옛 디자인의 주 버튼(.sec, 파랑)은 초록, 기본 버튼(남색)은 짙은 색으로 */
#contents-home .btn-wrap button:not(.sec):not(.init) { background: #2b3330; }
#contents-home .btn-wrap button:not(.sec):not(.init):hover { background: #111a18; }
#contents-home .btn-wrap button.sec { background: var(--ot-primary); }
#contents-home .btn-wrap.sumit button, #contents-home .search-btn { width: 320px; max-width: 100%; }
#contents-home .search-btn { display: block; margin: 0 auto; text-align: center; }

/* ---------- 게시판 (공지사항) ---------- */
#contents-home .board { border-top: 2px solid #1e2b27; }
#contents-home .board > ul, #contents-home .board #dataList > ul { display: flex; align-items: center; gap: 14px; min-height: 66px; padding: 0 12px; border-bottom: 1px solid #edf1ef; transition: background .2s ease; }
#contents-home .board > ul:hover { background: #f7fbfa; }
#contents-home .board ul li { height: auto; font-size: 16px; color: #2b3330; }
#contents-home .board ul li.number { flex: 0 0 auto; width: 44px; justify-content: center; font-size: 14px; color: #8a9591; font-variant-numeric: tabular-nums; }
#contents-home .board ul li.noti { width: 44px; background: none; }
#contents-home .board ul li.noti::before { content: "공지"; display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 12px; background: #e3f5ef; font-size: 12px; font-weight: 800; color: var(--ot-primary-dark); }
#contents-home .board ul li.subject { flex: 1 1 auto; width: auto; min-width: 0; color: #111a18; }
#contents-home .board ul li.subject a { display: block; overflow: hidden; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; transition: color .2s ease; }
#contents-home .board ul li.subject a:hover { color: var(--ot-primary-dark); }
#contents-home .board ul li.date { flex: 0 0 auto; width: auto; font-size: 14px; color: #8a9591; font-variant-numeric: tabular-nums; }
#contents-home .board .noData { height: auto; padding: 56px 0; border-bottom: 1px solid #edf1ef; font-size: 15px; line-height: 1.6; color: #7b8682; }
/* 공지 상세 */
#contents-home .board .view-wrap { padding: 30px 12px 24px; border-bottom: 1px solid #e3ece8; text-align: left; }
#contents-home .board .view-wrap .title { font-size: 26px; font-weight: 700; line-height: 1.4; text-align: left; color: #111a18; }
#contents-home .board .view-wrap .date { padding-top: 8px; font-size: 14px; text-align: left; color: #8a9591; }
#contents-home .board .detail { padding: 36px 12px 48px; border-bottom: 1px solid #e3ece8; }
#contents-home .board .detail .text { font-size: 16px; line-height: 1.85; color: #2b3330; word-break: keep-all; }
#contents-home .board .detail img { max-width: 100%; height: auto; border-radius: 12px; }
/* 이전글·다음글 */
#contents-home .board .col-wrap { border-top: 0; border-bottom: 1px solid #e3ece8; }
#contents-home .board .col-wrap ul { align-items: center; gap: 12px; min-height: 58px; padding: 0 12px; border-bottom: 1px solid #edf1ef; }
#contents-home .board .col-wrap ul:last-child { border-bottom: 0; }
#contents-home .board .col-wrap ul li { height: auto; }
#contents-home .board .col-wrap ul li.fir-col { flex: 0 0 20px; width: 20px; height: 20px; background-size: 16px; opacity: .55; }
#contents-home .board .col-wrap ul li.sec-col { flex: 0 0 auto; width: auto; font-size: 14px; font-weight: 700; color: #6b7672; }
#contents-home .board .col-wrap ul li.thi-col { flex: 1 1 auto; width: auto; min-width: 0; font-size: 15.5px; color: #111a18; }
#contents-home .board .col-wrap ul li.thi-col a { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: color .2s ease; }
#contents-home .board .col-wrap ul li.thi-col a:hover { color: var(--ot-primary-dark); }

/* 쪽 번호 */
#contents-home #paging { margin-top: 36px; }
#contents-home #paging a { width: 38px; height: 38px; margin: 0 2px; border-radius: 50%; font-size: 15px; line-height: 38px; color: #4d5955; transition: background .2s ease, color .2s ease; }
#contents-home #paging a:hover { background: #f0f5f3; }
#contents-home #paging a.on { background: var(--ot-primary); font-weight: 700; color: #fff; }
#contents-home #paging a.l, #contents-home #paging a.r { width: 38px; height: 38px; margin: 0 10px; border: 1px solid #dfe7e4; background-size: 18px; }

/* 검색 */
#contents-home .board-search { margin-top: 32px; }
#contents-home .board-search .input-wrap { position: relative; width: min(100%, 480px); }
#contents-home .board-search .input-wrap input[type="text"] { width: 100%; height: 54px; padding: 0 112px 0 22px; border-radius: 27px; }
#contents-home .board-search .input-wrap .btn-search { position: absolute; right: 6px; top: 6px; min-width: 88px; height: 42px; margin: 0; border-radius: 21px; background: var(--ot-primary); font-family: inherit; font-size: 15px; transition: background .2s ease; }
#contents-home .board-search .input-wrap .btn-search:hover { background: var(--ot-primary-dark); }
/* 검색어 표시 (common.highlight): 형광펜처럼 글자 아래쪽 절반만 칠한다 */
#contents-home mark.kw-mark { padding: 0 1px; border-radius: 2px; background: linear-gradient(transparent 52%, #bfeedd 52%); font-weight: 700; color: inherit; }

/* ---------- 자주 묻는 질문 ---------- */
#contents-home .tab-wrap { gap: 8px; margin: 0 0 24px; }
#contents-home .tab-wrap .tab-round { width: auto; margin: 0; border: 1px solid #dfe7e4; border-radius: 999px; background: #fff; font-size: 15px; line-height: 1; color: #3a4441; transition: background .2s ease, border-color .2s ease, color .2s ease; }
#contents-home .tab-wrap .tab-round a { padding: 12px 18px; }
#contents-home .tab-wrap .tab-round:hover { border-color: var(--ot-primary); color: var(--ot-primary-dark); }
#contents-home .tab-wrap .tab-round.on { border-color: var(--ot-primary); background: var(--ot-primary); font-weight: 700; color: #fff; }
#contents-home .faq { border-top: 2px solid #1e2b27; }
#contents-home .faq ul.btn-aco { display: flex; align-items: center; gap: 14px; min-height: 66px; padding: 0 12px; border-bottom: 1px solid #edf1ef; cursor: pointer; transition: background .2s ease; }
#contents-home .faq ul.btn-aco:hover { background: #f7fbfa; }
#contents-home .faq ul li { line-height: 1.5; }
#contents-home .faq ul li.franchise-col { flex: 0 0 auto; width: auto; min-width: 74px; padding: 4px 10px; border-radius: 12px; background: #e3f5ef; font-size: 12.5px; font-weight: 800; text-align: center; color: var(--ot-primary-dark); }
#contents-home .faq ul li.detail { flex: 1 1 auto; width: auto; min-width: 0; font-size: 16px; font-weight: 500; color: #111a18; }
#contents-home .faq ul li.detail a { display: block; font-size: inherit; line-height: 1.5; }
#contents-home .faq ul li.detail a::before { content: "Q."; margin-right: 6px; font-weight: 800; color: var(--ot-primary); }
#contents-home .faq ul li.icon-col { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; background-color: #f0f5f3; background-size: 18px; }
#contents-home .faq .aco-con { position: relative; padding: 22px 26px 26px 104px; border-bottom: 1px solid #e3ece8; background: #f6faf8; font-size: 15.5px; line-height: 1.8; color: #2b3330; word-break: keep-all; }
/* 답변은 관리자 편집기에서 붙여 넣은 HTML이라 font-size:26px·9pt, GmarketSans 같은 인라인 스타일이 섞여 있다. 본문 기준으로 맞춘다. */
#contents-home .faq .aco-con * { font-family: inherit !important; font-size: inherit !important; letter-spacing: inherit !important; line-height: inherit !important; }
#contents-home .faq .aco-con img { max-width: 100%; height: auto; }
#contents-home .faq .aco-con::before { content: "A"; position: absolute; left: 38px; top: 20px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ot-primary); font-size: 14px; font-weight: 800; line-height: 1; color: #fff; }

/* ---------- 가맹점 스티커: 왼쪽 스티커 미리보기(점무늬 판 위에 살짝 기울여 붙인 모양) + 오른쪽 저장·인쇄·붙이기 ---------- */
#contents-home .sticker { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 64px; }
#contents-home .sticker p { margin: 0; }
#contents-home .sticker-stage { position: relative; display: grid; place-items: center; margin: 0; padding: 11%; overflow: hidden; aspect-ratio: 1; border-radius: 32px; background: radial-gradient(circle at 50% 42%, #fff 0%, rgba(255, 255, 255, 0) 62%), radial-gradient(#d3e9e1 1.2px, transparent 1.4px) 0 0 / 18px 18px, #eef7f3; }
#contents-home .sticker-img { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 26px rgba(16, 72, 62, .22)) drop-shadow(0 2px 3px rgba(16, 72, 62, .16)); transform: rotate(-4deg); transition: transform .6s var(--ot-ease-back); }
#contents-home .sticker-stage:hover .sticker-img { transform: rotate(0) scale(1.03); }
#contents-home .sticker-kicker { font-size: 14px; font-weight: 700; color: var(--ot-primary-dark); }
#contents-home .sticker-lead { margin-top: 10px !important; font-family: var(--ot-font-display); font-size: 30px; font-weight: 700; line-height: 1.35; letter-spacing: -.02em; color: #111a18; word-break: keep-all; }
#contents-home .sticker-steps { margin: 30px 0 0; padding: 0; list-style: none; counter-reset: sticker-step; }
#contents-home .sticker-steps li { position: relative; display: grid; gap: 4px; padding: 0 0 20px 46px; list-style: none; counter-increment: sticker-step; }
#contents-home .sticker-steps li::before { content: counter(sticker-step); position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #e3f5ef; font-size: 14px; font-weight: 800; color: var(--ot-primary-dark); }
#contents-home .sticker-steps li:not(:last-child)::after { content: ""; position: absolute; left: 14px; top: 34px; bottom: 4px; width: 2px; border-radius: 1px; background: #e3ece8; }
#contents-home .sticker-steps strong { font-size: 17px; font-weight: 700; color: #111a18; }
#contents-home .sticker-steps span { font-size: 15.5px; line-height: 1.6; color: #4d5955; word-break: keep-all; }
#contents-home .sticker-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 8px; }
#contents-home .sticker-save { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 56px; padding: 0 28px; border-radius: 16px; background: var(--ot-primary); font-size: 17px; font-weight: 700; color: #fff; box-shadow: var(--ot-shadow-sm); transition: background-color .2s ease, transform .3s var(--ot-ease), box-shadow .3s ease; }
#contents-home .sticker-save::before { content: ""; flex: 0 0 18px; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11'/%3E%3Cpath d='M7 10.5l5 5 5-5'/%3E%3Cpath d='M5 20h14'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11'/%3E%3Cpath d='M7 10.5l5 5 5-5'/%3E%3Cpath d='M5 20h14'/%3E%3C/svg%3E") center / contain no-repeat; }
#contents-home .sticker-save:hover, #contents-home .sticker-save:focus-visible { background: var(--ot-primary-dark); transform: translateY(-2px); box-shadow: var(--ot-shadow-md); }
#contents-home .sticker-meta { font-size: 14px; color: #7a8682; }
#contents-home .sticker-apply { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 34px; padding: 18px 20px; border: 1px solid #e1efe9; border-radius: 18px; background: #f3f9f7; transition: border-color .2s ease, background-color .2s ease; }
#contents-home .sticker-apply:hover, #contents-home .sticker-apply:focus-visible { border-color: #bfe3d7; background: #eaf6f1; }
#contents-home .sticker-apply-text { display: grid; gap: 2px; font-size: 14.5px; line-height: 1.5; color: #4d5955; word-break: keep-all; }
#contents-home .sticker-apply-text strong { font-size: 16px; color: #111a18; }
#contents-home .sticker-apply-go { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 4px; font-size: 15px; font-weight: 700; color: var(--ot-primary-dark); }
#contents-home .sticker-apply-go::after { content: "›"; font-size: 20px; line-height: 1; }

/* ---------- 카드 조회 (잔액조회·가상계좌번호 확인): 왼쪽 카드 미리보기 + 오른쪽 입력 판 ---------- */
#contents-home .lookup { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 500px); justify-content: center; align-items: start; gap: 72px; }
#contents-home .lookup p { margin: 0; }
#contents-home .lookup-visual { position: sticky; top: 196px; }
#contents-home .lookup-card { position: relative; aspect-ratio: 1.586; overflow: hidden; border-radius: 22px; background: radial-gradient(120% 130% at 0% 0%, #5ad6bb 0%, #2cb59b 42%, #187f6c 100%); box-shadow: 0 36px 60px -28px rgba(13, 78, 66, .6), 0 2px 6px rgba(13, 78, 66, .16), inset 0 1px 0 rgba(255, 255, 255, .35); color: #fff; transform: perspective(1200px) rotateY(-12deg) rotateX(6deg); transition: transform .8s var(--ot-ease), box-shadow .8s var(--ot-ease); }
#contents-home .lookup-card::before { content: ""; position: absolute; right: -34%; bottom: -80%; width: 100%; aspect-ratio: 1; border: 30px solid rgba(255, 255, 255, .09); border-radius: 50%; box-shadow: 0 0 0 42px rgba(255, 255, 255, .05); }
#contents-home .lookup-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .24) 50%, rgba(255, 255, 255, 0) 62%); transform: translateX(-75%); animation: lookup-sheen 6s var(--ot-ease) 1s infinite; pointer-events: none; }
@keyframes lookup-sheen { 0%, 55% { transform: translateX(-75%); } 100% { transform: translateX(75%); } }
#contents-home .lookup-card.is-typing { transform: perspective(1200px) translateY(-4px); box-shadow: 0 42px 70px -30px rgba(13, 78, 66, .65), 0 2px 6px rgba(13, 78, 66, .16), inset 0 1px 0 rgba(255, 255, 255, .35); }
#contents-home .lookup-card-logo { position: absolute; left: 7.5%; top: 10%; width: 17%; height: auto; }
#contents-home .lookup-card-chip { position: absolute; left: 7.5%; top: 43%; width: 13%; aspect-ratio: 1.32; border-radius: 7px; background: linear-gradient(135deg, #fbe7a6 0%, #e3bd5f 55%, #c99a3a 100%); box-shadow: inset 0 0 0 1px rgba(120, 84, 18, .25); }
#contents-home .lookup-card-chip::before { content: ""; position: absolute; inset: 24% 30%; border: 1px solid rgba(120, 84, 18, .35); border-radius: 3px; }
#contents-home .lookup-card-wave { position: absolute; right: 7.5%; top: 11%; width: 26px; height: 26px; opacity: .85; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 8a5.5 5.5 0 0 1 0 8'/%3E%3Cpath d='M11 5.5a9 9 0 0 1 0 13'/%3E%3Cpath d='M15 3a12.5 12.5 0 0 1 0 18'/%3E%3C/svg%3E") center / contain no-repeat; }
#contents-home .lookup-card-no { position: absolute; left: 7.5%; right: 7.5%; bottom: 25%; display: flex; justify-content: space-between; font-size: 21px; font-weight: 600; line-height: 1; letter-spacing: .02em; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px rgba(0, 0, 0, .18); }
#contents-home .lookup-card-no span { position: relative; display: flex; padding-bottom: 6px; }
#contents-home .lookup-card-no span::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 1px; background: rgba(255, 255, 255, .9); transform: scaleX(0); transition: transform .35s var(--ot-ease); }
#contents-home .lookup-card-no span.is-active::after { transform: scaleX(1); }
#contents-home .lookup-card-no i { display: inline-block; width: .7em; font-style: normal; text-align: center; opacity: .42; }
#contents-home .lookup-card-no i.is-on { opacity: 1; animation: lookup-digit .3s var(--ot-ease-back); }
@keyframes lookup-digit { from { opacity: 0; transform: translateY(6px); } }
#contents-home .lookup-card-foot { position: absolute; left: 7.5%; bottom: 9.5%; font-size: 11px; font-weight: 600; letter-spacing: .22em; color: rgba(255, 255, 255, .78); }
#contents-home .lookup-notes { margin-top: 34px; padding: 0 4px; }
#contents-home .lookup-notes li { position: relative; padding-left: 26px; font-size: 14.5px; line-height: 1.6; color: #5f6b67; word-break: keep-all; }
#contents-home .lookup-notes li + li { margin-top: 6px; }
#contents-home .lookup-notes li::before { content: ""; position: absolute; left: 0; top: .2em; width: 18px; height: 18px; border-radius: 50%; background: #e3f5ef url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f8f7a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 11px no-repeat; }

#contents-home .lookup-form { padding: 36px 36px 32px; border: 1px solid #e3ece8; border-radius: 26px; background: #fff; box-shadow: var(--ot-shadow-md); }
#contents-home .lookup-step + .lookup-step { margin-top: 28px; padding-top: 28px; border-top: 1px dashed #dde8e4; }
#contents-home .lookup-label { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; line-height: 1.4; color: #111a18; }
#contents-home .lookup-num { display: inline-grid; flex: 0 0 26px; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ot-primary); font-size: 13px; font-weight: 800; line-height: 1; color: #fff; }
#contents-home .lookup-number { display: flex; align-items: center; gap: 6px; margin-top: 16px; }
#contents-home .lookup-number em { flex: 0 0 6px; height: 2px; border-radius: 1px; background: #cfdad6; }
#contents-home .lookup input[type="text"] { height: 56px; padding: 0 16px; border: 1.5px solid #dbe5e1; border-radius: 14px; background-color: #f8fbfa; font-family: var(--ot-font); font-size: 18px; font-weight: 600; color: #111a18; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; }
#contents-home .lookup input[type="text"]:focus { border-color: var(--ot-primary); outline: none; background-color: #fff; box-shadow: 0 0 0 4px rgba(44, 181, 155, .14); }
#contents-home .lookup input[type="text"]::placeholder { font-weight: 500; letter-spacing: 0; color: #a3aeaa; }
#contents-home .lookup-number input[type="text"] { flex: 1 1 0; width: 0; min-width: 0; padding: 0; text-align: center; letter-spacing: .14em; font-variant-numeric: tabular-nums; }
#contents-home .lookup-number input.is-secure { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f8f7a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); background-position: right 8px top 7px; background-size: 13px; background-repeat: no-repeat; }
#contents-home .lookup-hint { margin-top: 10px !important; font-size: 14px; line-height: 1.5; color: #6b7672; }
#contents-home .lookup-captcha { display: flex; gap: 10px; margin-top: 16px; }
#contents-home .lookup-captcha img { display: block; flex: 1 1 auto; min-width: 0; width: 100%; height: 96px; object-fit: cover; object-position: left center; border: 1.5px solid #dbe5e1; border-radius: 14px; background: #eef8f4; transition: opacity .25s ease, filter .25s ease; }
#contents-home .lookup-captcha img.is-loading { opacity: .35; filter: blur(2px); }
#contents-home .lookup-captcha .btns { display: flex; flex: 0 0 116px; flex-direction: column; gap: 8px; }
#contents-home .lookup-icon-btn { display: flex; flex: 1 1 0; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 12px; background: #f1f6f4; font-family: var(--ot-font); font-size: 14px; font-weight: 600; color: #34403c; transition: background-color .2s ease, color .2s ease; }
#contents-home .lookup-icon-btn:hover, #contents-home .lookup-icon-btn:focus-visible { background: #e3f5ef; color: var(--ot-primary-dark); }
#contents-home .lookup-icon-btn::before { content: ""; flex: 0 0 16px; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
#contents-home .lookup-icon-btn.is-refresh { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.34-5.66'/%3E%3Cpath d='M20 4v5h-5'/%3E%3C/svg%3E"); }
#contents-home .lookup-icon-btn.is-audio { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5v5h3.5L12 18.5v-13L7.5 9.5z' fill='black'/%3E%3Cpath d='M15.5 9a4 4 0 0 1 0 6'/%3E%3Cpath d='M18 6.5a7.5 7.5 0 0 1 0 11'/%3E%3C/svg%3E"); }
#contents-home .lookup-icon-btn.is-spin::before { animation: lookup-spin .6s var(--ot-ease); }
@keyframes lookup-spin { to { transform: rotate(360deg); } }
#contents-home .lookup #dum_captchaNo { width: 100%; margin-top: 10px; letter-spacing: .3em; font-variant-numeric: tabular-nums; }
#contents-home .lookup .lookup-submit { width: 100%; height: 58px; margin-top: 30px; border-radius: 16px; font-size: 17px; line-height: 58px; }

/* 조회 결과 창 */
#modal-wrap .modal-con { border: 0; border-radius: 22px; box-shadow: 0 24px 60px rgba(16, 48, 42, .25); }
#modal-wrap.search-modal { background: rgba(13, 33, 29, .5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
#modal-wrap .modal-con.lookup-result { max-width: 400px; padding: 26px 24px 24px; border-radius: 24px; font-family: var(--ot-font); animation: lookup-pop .45s var(--ot-ease) both; }
@keyframes lookup-pop { from { opacity: 0; transform: translate(-50%, -46%) scale(.97); } }
#modal-wrap .lookup-result p { margin: 0; }
#modal-wrap .lookup-result .title { font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: #111a18; }
#modal-wrap .lookup-result .btn-close { top: 26px; right: 22px; border: 0; background-color: transparent; }
#modal-wrap .lookup-result-card { position: relative; overflow: hidden; padding: 22px 22px 24px; border-radius: 18px; background: radial-gradient(120% 130% at 0% 0%, #5ad6bb 0%, #2cb59b 42%, #187f6c 100%); color: #fff; }
#modal-wrap .lookup-result-card::before { content: ""; position: absolute; right: -30%; bottom: -90%; width: 90%; aspect-ratio: 1; border: 24px solid rgba(255, 255, 255, .09); border-radius: 50%; }
#modal-wrap .lookup-result-card > * { position: relative; }
#modal-wrap .lookup-result-name { font-size: 14px; font-weight: 600; opacity: .92; }
#modal-wrap .lookup-result-no { margin-top: 2px !important; font-size: 13px; letter-spacing: .08em; font-variant-numeric: tabular-nums; opacity: .78; }
#modal-wrap .lookup-result-label { margin-top: 18px !important; font-size: 13px; opacity: .85; }
#modal-wrap .lookup-result-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; margin-top: 2px !important; }
#modal-wrap .lookup-result-total strong { font-family: var(--ot-font-display); font-size: 34px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
#modal-wrap .lookup-result-total span { font-size: 17px; font-weight: 600; }
#modal-wrap .lookup-result-total.is-account strong { font-family: var(--ot-font); font-size: 24px; letter-spacing: .04em; word-break: break-all; }
#modal-wrap .lookup-result-list { margin: 10px 0 0; }
#modal-wrap .lookup-result-list div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 4px; border-bottom: 1px solid #eef2f1; }
#modal-wrap .lookup-result-list dt { font-size: 15px; color: #6b7672; }
#modal-wrap .lookup-result-list dd { margin: 0; font-size: 16px; font-weight: 700; color: #111a18; text-align: right; font-variant-numeric: tabular-nums; }
#modal-wrap .lookup-result-ok { display: block; width: 100%; height: 52px; margin-top: 20px; border-radius: 14px; background: var(--ot-primary); font-family: var(--ot-font); font-size: 16px; font-weight: 700; color: #fff; transition: background-color .2s ease; }
#modal-wrap .lookup-result-ok:hover, #modal-wrap .lookup-result-ok:focus-visible { background: var(--ot-primary-dark); }

/* ---------- 스크롤 등장 (layout.js가 .sub-reveal을 붙인다. 스크립트가 없으면 그대로 보인다) ---------- */
html.sub-reveal-on .sub-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .8s var(--ot-ease); transition-delay: calc(var(--ri, 0) * 70ms); }
html.sub-reveal-on .sub-reveal.is-in { opacity: 1; transform: none; }

/* ---------- 좁은 화면 ---------- */
@media screen and (max-width: 960px) {
  .sub-head-inner { min-height: 0; padding: 18px 16px 30px; }
  .sub-eyebrow { margin-top: 22px; font-size: 13px; }
  .sub-title { padding-right: 92px; font-size: 30px; }
  .sub-desc { padding-right: 92px; margin-top: 10px; font-size: 15px; }
  #contents-home .acodion-wrap .acodion .aco-con.gray .sub-title { font-size: 12px; }
  .sub-mascot { right: 12px; top: 40px; bottom: auto; width: 84px; }
  .sub-tabs { top: 60px; }
  .sub-tabs-inner { padding: 0 6px; }
  .sub-tabs a { padding: 15px 10px; font-size: 15px; }
  .sub-tabs ~ #contents-home { padding: 32px 16px 80px; }
  #contents-home h3 { margin: 44px 0 14px; font-size: 19px; }
  #contents-home .con-top-wrap { margin-bottom: 28px; padding: 18px 18px; }
  #contents-home .con-top-wrap .value { font-size: 15px; }
  /* 단계: 그림 왼쪽, 글 오른쪽 가로 카드로 쌓는다 */
  #contents-home .flex-4-col { grid-template-columns: 1fr; gap: 32px; }
  #contents-home .flex-4-col:not(.phone) > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 16px; align-items: center; padding: 16px 18px; text-align: left; }
  #contents-home .flex-4-col:not(.phone) > div img { grid-row: span 2; width: 84px; }
  #contents-home .flex-4-col:not(.phone) > div .key { justify-self: start; align-self: end; margin-top: 0; }
  #contents-home .flex-4-col:not(.phone) > div .text { align-self: start; margin-top: 6px; font-size: 15px; }
  /* 아이콘 말고는 모두 오른쪽 칸에 (문단이 하나 더 있으면 아이콘 아래 좁은 칸으로 떨어져 카드가 길어졌다) */
  #contents-home .flex-4-col:not(.phone) > div > :not(img) { grid-column: 2; }
  #contents-home .flex-4-col:not(.phone) > div .text ~ .text { margin-top: 4px; font-size: 13px; }
  #contents-home .flex-4-col:not(.phone) > div:not(:last-child)::after { right: auto; left: 54px; top: auto; bottom: -18px; transform: rotate(135deg); }
  #contents-home .flex-4-col.phone { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #contents-home .flex-4-col.phone > div { padding: 12px 10px 16px; border-radius: 18px; }
  #contents-home .flex-4-col.phone > div .text { font-size: 13.5px; }
  #contents-home .customer { grid-template-columns: 1fr; }
  #contents-home .customer > div .number { font-size: 26px; }
  #contents-home .app_download { gap: 8px; }
  #contents-home .app_download a { flex: 1 1 0; width: auto; max-width: 180px; }
  #contents-home .franchise .fran-wrap .detail-wrap { padding: 4px 18px; }
  #contents-home .franchise .fran-wrap .detail-wrap .flex { grid-template-columns: 1fr; gap: 2px; }
  #contents-home .tab ul { display: flex; width: 100%; }
  #contents-home .tab ul li { flex: 1 1 0; min-width: 0; }
  #contents-home .tab-wrapper .tab-con .form-wrapper { padding: 4px 18px; }
  #contents-home .tab-wrapper .tab-con .form-wrapper .item { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 14px 0; }
  #contents-home .tab-wrapper .tab-con .form-wrapper .item .value input { max-width: none; }
  #contents-home .tab-wrapper .tab-con .form-wrapper .item .value.flex input { max-width: none; }
  #contents-home .board > ul, #contents-home .board #dataList > ul { gap: 10px; min-height: 58px; padding: 0 6px; }
  #contents-home .board ul li { font-size: 15px; }
  #contents-home .board ul li.number { width: 36px; font-size: 13px; }
  #contents-home .board .view-wrap .title { font-size: 21px; }
  #contents-home .board .detail .text { font-size: 15px; }
  #contents-home .board-search .input-wrap input[type="text"] { width: 100%; }
  #contents-home .faq ul.btn-aco { gap: 10px; min-height: 60px; padding: 10px 6px; }
  #contents-home .faq ul li.franchise-col { min-width: 0; font-size: 11.5px; }
  #contents-home .faq ul li.detail { font-size: 15px; }
  #contents-home .faq ul li.detail a { white-space: normal; }
  #contents-home .faq .aco-con { padding: 18px 16px 20px 56px; font-size: 14.5px; }
  #contents-home .faq .aco-con::before { left: 16px; top: 16px; width: 26px; height: 26px; font-size: 13px; }
  #contents-home .sticker { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  #contents-home .sticker-stage { border-radius: 24px; }
  #contents-home .sticker-lead { font-size: 23px; }
  #contents-home .sticker-save { width: 100%; }
  #contents-home .sticker-apply { flex-direction: column; align-items: flex-start; gap: 10px; }
  #contents-home .lookup { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  #contents-home .lookup-visual { position: static; }
  #contents-home .lookup-card { width: 100%; max-width: 280px; margin: 0 auto; border-radius: 16px; transform: none; }
  #contents-home .lookup-card.is-typing { transform: translateY(-2px); }
  #contents-home .lookup-card-no { font-size: 16px; }
  #contents-home .lookup-card-wave { width: 20px; height: 20px; }
  #contents-home .lookup-card-foot { font-size: 9px; }
  #contents-home .lookup-notes { display: none; }
  #contents-home .lookup-form { padding: 24px 18px 22px; border-radius: 22px; }
  #contents-home .lookup-number { gap: 4px; }
  #contents-home .lookup-number em { flex-basis: 4px; }
  #contents-home .lookup-number input[type="text"] { height: 52px; font-size: 17px; letter-spacing: .06em; }
  #contents-home .lookup-captcha { flex-wrap: wrap; }
  #contents-home .lookup-captcha img { height: auto; object-fit: contain; }
  #contents-home .lookup-captcha .btns { flex: 1 1 100%; flex-direction: row; }
  #contents-home .swiper-container { padding: 6px 0 0; }
  #contents-home .swiper-container .swiper-wrapper .swiper-slide, #contents-home .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active { opacity: 1; transform: none; }
  #contents-home .swiper-container .ui { margin-top: 20px; }
  #contents-home .search-btn { width: 100%; }
}
@media screen and (max-width: 420px) {
  .sub-title { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .sub-eyebrow, .sub-title, .sub-desc, .sub-mascot { animation: none; }
  html.sub-reveal-on .sub-reveal { opacity: 1; transform: none; }
  html.sub-leaving #contents-home, html.sub-leaving footer.site-footer { opacity: 1; transform: none; }
  html.sub-leaving .sub-title .sk, html.sub-leaving .sub-desc .sk { color: inherit; --sk-a: 0; animation: none; }
  #contents-home .lookup-card, #contents-home .lookup-card.is-typing { transform: none; }
  #contents-home .lookup-card::after { animation: none; display: none; }
}