/* method.css - 사용방법 페이지 */

/* =====================================================
 상단 배너
===================================================== */
.method-wrap { width: 100%; }

.image-title {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
padding: 4rem 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.image-title.bg-subtle { background: #F9F9F9; }

.image-title h2 {
position: relative;
color: var(--ink);
font-size: clamp(1.75rem, 3vw, 2.5rem);
font-weight: 500;
line-height: 56px;
text-align: center;
word-break: keep-all;
letter-spacing: -3px;
order: -1;
}

.image-title p {
color: var(--gray-50);
font-size: 1.25rem;
font-weight: 500;
text-align: center;
line-height: 40px;
word-break: keep-all;
margin-top: 0.625rem;
}

/* =====================================================
 탭 전체 레이아웃 (사이드바 + 컨텐츠)
===================================================== */
.method-tab-wrap {
display: flex;
width: 100%;
padding: 3.75rem 0 7.5rem;
gap: 1.875rem;
}

.method-tab-wrap button {
border: none;
background-color: transparent;
font-size: 1rem;
font-weight: 500;
color: var(--ink);
font-family: 'Noto Sans KR', sans-serif;
cursor: pointer;
}

/* =====================================================
 사이드바 탭 메뉴
===================================================== */
.method-tab-wrap .method-tab-menu {
width: 15%;
max-width: 180px;
position: relative;
}

.method-tab-wrap .method-tab-menu .method-tab-menu-list {
position: sticky;
top: 150px;
border-radius: 10px;
padding: 0.625rem;
background-color: #f6f7f9;
}

.method-tab-menu-list .method-tab-menu-item {
margin-bottom: 0.3125rem;
}
.method-tab-menu-list .method-tab-menu-item:last-child { margin-bottom: 0; }

.method-tab-menu-list .method-tab-menu-item button {
width: 100%;
height: 100%;
padding: 0.5rem 0.625rem;
text-align: left;
transition: all 0.2s ease;
border-radius: 8px;
}

.method-tab-menu-list .method-tab-menu-item.active button {
background-color: var(--red);
color: #fff;
}
.method-tab-menu-list .method-tab-menu-item button:hover { color: var(--red); }
.method-tab-menu-list .method-tab-menu-item.active button:hover { color: #fff; }

.method-tab-menu-item:nth-child(2) {
border-bottom: 1px solid #d9d9d9;
padding-bottom: 1.25rem;
}
.method-tab-menu-item:nth-child(3) { margin-top: 20px; }

/* =====================================================
 탭 컨텐츠 영역
===================================================== */
.method-tab-content-wrap {
width: calc(85% - 30px);
position: relative;
}

.method-tab-content-wrap .method-tab-content { display: none; }
.method-tab-content-wrap .method-tab-content.active { display: block; }

/* =====================================================
 이미지 박스
===================================================== */
.method-tab-content-wrap .method-tab-img {
border-radius: 10px;
width: 100%;
background-color: #f6f7f8;
overflow: hidden;
margin-bottom: 3.125rem;
}

.method-tab-content-wrap .method-tab-img img {
width: 100%;
height: auto;
display: block;
}

/* =====================================================
 가이드 텍스트 영역
===================================================== */
.method-tab-content-wrap .method-tab-text {
padding: 0;
margin-bottom: 3.75rem;
}

.method-tab-text .guide-box {
display: flex;
align-items: flex-start;
gap: 1.25rem;
margin-bottom: 2.5rem;
}

.method-tab-text .guide-box .guide-num {
width: 30px;
height: 30px;
background-color: var(--red);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1.125rem;
flex-shrink: 0;
}

.method-tab-text .guide-box .guide-desc {
width: calc(100% - 50px);
}

.method-tab-text .guide-box .guide-desc h4 {
font-size: 1.25rem;
font-weight: 500;
line-height: 28px;
margin-bottom: 0.625rem;
}

.method-tab-text .guide-box .guide-desc-text {
font-size: 1rem;
color: var(--gray-50);
display: flex;
align-items: flex-start;
gap: 0.625rem;
}

.method-tab-text .guide-box .guide-desc i {
position: relative;
top: 4px;
color: var(--gray-50);
}

.method-tab-text .guide-box .guide-desc p {
font-size: 1rem;
line-height: 26px;
color: var(--gray-50);
font-weight: 400;
}

.method-tab-text .guide-box .guide-desc p strong { color: var(--red); }

/* =====================================================
 타이틀 박스
===================================================== */
.method-tab-text .title-box { margin-bottom: 30px; }

.method-tab-text .title-box h3 {
font-size: 1.625rem;
font-weight: 600;
margin: 3.125rem 0 3.125rem;
}

.method-tab-text .title-box h4 {
font-size: 1.125rem;
color: var(--ink);
margin-bottom: 0.625rem;
}

.method-tab-text .title-box p {
font-size: 1rem;
color: var(--gray-50);
}

.method-tab-text .title-box p i { margin-right: 5px; }
.method-tab-text .title-box p b { color: var(--red); }
.method-tab-text .title-box p strong { color: var(--red); font-weight: 600; }

/* =====================================================
 결제 방법 박스
===================================================== */
.method-tab-content .payment-method-box h3 {
font-size: 1.625rem;
margin-bottom: 1.875rem;
font-weight: 600;
}

.pay-text {
font-size: 0.95rem;
line-height: 1.7;
color: var(--gray-50);
padding: 0.875rem 1.125rem;
background: #fff5f5;
border-radius: 8px;
border-left: 3px solid var(--red);
margin-top: 0.625rem;
}
.pay-text strong { color: var(--red); }
.pay-text b { font-weight: 700; }

/* =====================================================
 반응형 — 태블릿/모바일 (≤880px) : 상단 pill 탭
===================================================== */
@media screen and (max-width: 880px) {
.method-tab-wrap {
  display: block;
  width: 100%;
  padding: 1.875rem 0 3.75rem;
}

.method-tab-wrap .method-tab-menu {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  position: sticky;
  top: 65px;
  z-index: 9;
  background-color: #fff;
  padding: 0.3125rem 0;
}

.method-tab-wrap .method-tab-menu .method-tab-menu-list {
  width: 100%;
  max-width: 600px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  margin-bottom: 1.875rem;
  gap: 1.25rem;
  padding: 0.625rem;
  position: static;
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
}

.method-tab-menu-list .method-tab-menu-item {
  margin-bottom: 0 !important;
  width: 25%;
}

.method-tab-menu-item:nth-child(2) {
  border-bottom: none;
  padding-bottom: 0;
}
.method-tab-menu-item:nth-child(3) { margin-top: 0; }

.method-tab-menu-list .method-tab-menu-item button {
  border-radius: 999px;
  text-align: center;
}

.method-tab-content-wrap { width: 100%; }
}

/* =====================================================
 반응형 — 모바일 (≤767px)
===================================================== */
@media screen and (max-width: 767px) {
.image-title { padding: 30px 24px; }
.image-title h2 { font-size: 1.75rem; letter-spacing: -1px; line-height: 38px; }
.image-title p { font-size: 0.95rem; line-height: 24px; }

.method-tab-wrap { padding: 20px 0 30px; }

.method-tab-wrap .method-tab-menu .method-tab-menu-list { margin-bottom: 20px; }

.method-tab-content-wrap .method-tab-img { margin-bottom: 30px; }
.method-tab-content-wrap .method-tab-text { margin-bottom: 30px; }

.method-tab-text .guide-box { margin-bottom: 20px; }
.method-tab-text .guide-box .guide-num { width: 25px; height: 25px; font-size: 1rem; }
.method-tab-text .guide-box .guide-desc { width: calc(100% - 35px); }
.method-tab-text .guide-box .guide-desc h4 { font-size: 1.125rem; line-height: 26px; }
.method-tab-text .guide-box .guide-desc p { font-size: 0.95rem; line-height: 25px; }
.method-tab-text .title-box h3 { font-size: 1.375rem; margin: 50px 0 30px; }
.method-tab-text .title-box h4 { font-size: 1rem; }
.method-tab-text .title-box p { font-size: 0.95rem; }
.method-tab-content .payment-method-box h3 { font-size: 1.375rem; }
}

/* =====================================================
 반응형 — 소형 모바일 (≤550px)
===================================================== */
@media screen and (max-width: 550px) {
.method-tab-text .guide-box { gap: 10px; }
.method-tab-text .guide-box .guide-num { width: 20px; height: 20px; font-size: 0.8rem; margin-top: 2px; }
.method-tab-text .guide-box .guide-desc { width: calc(100% - 30px); }
.method-tab-wrap .method-tab-menu .method-tab-menu-list { padding: 5px; gap: 0; }
.method-tab-menu-list .method-tab-menu-item button { font-size: 0.875rem; padding: 4px 5px; }
.method-tab-text .guide-box .guide-desc h4 { font-size: 1.0625rem; line-height: 25px; }
.method-tab-text .guide-box .guide-desc p { font-size: 0.95rem; line-height: 25px; word-break: keep-all; }
}

@media screen and (max-width: 390px) {
.method-tab-wrap .method-tab-menu .method-tab-menu-list { padding: 5px; }
.method-tab-menu-list .method-tab-menu-item button { font-size: 0.875rem; padding: 2px 4px; }
}

@media screen and (max-width: 340px) {
.method-tab-wrap .method-tab-menu .method-tab-menu-list { padding: 3px; }
.method-tab-menu-list .method-tab-menu-item button { font-size: 0.75rem; padding: 2px 0; }
}