/* 공통 타이틀 */
.head-tit { font-size: 120px; color: #fff; display: inline-block; } 
.head-char { display: inline-block; transform: translateY(120%); opacity: 0; will-change: transform, opacity; letter-spacing: 11px; font-family: "BBH Hegarty", sans-serif; } 
.head-stit { color: #fff; font-size: 30px; font-weight: 600; } 
.head-stit .point { color: #fe21a4; font-weight: bold; } 

@media screen and (max-width: 900px){
 .head-tit { font-size: 76px; letter-spacing: 6px; } 
 }
@media screen and (max-width: 640px){
 .head-tit { font-size: 44px; } 
 .head-stit { font-size: 20px; } 
 }

@media screen and (max-width: 430px){
 .head-tit { font-size: 28px; } 

 }

/*=========== HEADER ===========*/
/* header base */
.header { position:fixed; left:0; top:0; width:100%; z-index:9999; transform:translateY(-100%); transition:transform .35s ease; } 
.header.is-loaded { transform:translateY(0) } 
.header-inner { height:110px; padding:0 28px; display:flex; align-items:center; justify-content:space-between; gap:16px; } 

/* logo */
.logo { margin:0 } 
.logo-link { display:block; width:98px; height:39px; text-indent:-9999px; overflow:hidden; background:center/contain url("/images/common/logo.png") no-repeat; } 

/* ===== PC PILL NAV (screenshot style) ===== */
.gnb-pc { display:none } 

.pc-pill { display:flex; align-items:center; gap:14px; background:#fff; border-radius:999px; padding:10px 12px; box-shadow:0 10px 30px rgba(0,0,0,.08); } 

.pc-nav { display:block } 
.pc-list { display:flex; align-items:center; gap:26px; list-style:none; margin:0; padding:0 6px 0 10px; } 

.pc-item { position:relative } 
.pc-link { display:inline-flex; align-items:center; gap:8px; font-size:20px; font-weight:600; color:#111; padding:8px 6px; white-space:nowrap; } 
.pc-link:hover { color:#fe21a4 } 



/* CTA pill on right */
.pc-cta { display:inline-flex; align-items:center; justify-content:center; height:44px; font-size: 20px; padding:0 22px; border-radius:999px; background:#fe21a4; color:#fff !important; font-weight:600; white-space:nowrap; } 
.util-cta { display:inline-flex; align-items:center; justify-content:center; height:44px; font-size: 20px; padding:0 22px; border-radius:999px; background:#fe6b21; color:#fff !important; font-weight:600; white-space:nowrap; } 
.util-cta i { padding-top: 2px; padding-right: 8px; /* font-size: 16px; */ } 
/* ===== Mobile ===== */
.gnb-mo { display:inline-flex } 
.menu-btn { width:44px; height:44px; border-radius:999px; display:inline-flex; flex-direction:column; justify-content:center; align-items:center; gap:8px; background:#fff; box-shadow:0 10px 30px rgba(0,0,0,.08); } 
.menu-btn-line { width:22px; height:2px; background:#111; transition:transform .25s ease, opacity .25s ease; } 

/* drawer */
.mobile-menu { position:fixed; right:0; top:0; height:100vh; width:min(420px, 88vw); background:#fff; transform:translateX(100%); transition:transform .45s cubic-bezier(0.22,1,0.36,1); z-index:10001; } 
.mobile-top { height:70px; padding:0 18px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(0,0,0,.08); } 
.mobile-title { font-weight:800; font-size:16px; color:#111 } 
.mobile-close { width:42px; height:42px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-size:28px; line-height:1; color:#111; background:#f2f3f5; } 

.mobile-menu-inner { height:calc(100% - 70px); padding:18px } 
.mobile-menu-list { list-style:none; margin:0; padding:0; display:grid; gap:12px } 
.mobile-menu-link { display:flex; align-items:center; height:52px; border-radius:14px; padding:0 16px; background:#f6f7f8; font-size:16px; font-weight:700; color:#111 } 
.mobile-menu-link-primary { background:#fe21a4; color: #fff !important; } 
.mobile-menu-link-call { background:#fe21a4; color:#fff } 


.util-list { display: flex; gap: 10px; margin-top: 20px; } 
.util-list li a { display:flex; align-items:center; height:52px; border-radius:14px; padding:0 16px; background:#f6f7f8; font-size:16px; font-weight:700; color:#111 } 



/* dim */
/* .menu-dim { position:fixed; inset:0; background:rgba(0,0,0,.45); opacity:0; pointer-events:none; transition:opacity .35s ease; z-index:10000; } 
 */
/* open state */
.header.is-open .mobile-menu { transform:translateX(0) } 
.header.is-open .menu-dim { opacity:1; pointer-events:auto } 

/* (선택) 햄버거를 X로도 바꾸고 싶으면 유지 */
.header.is-open .menu-btn-line:nth-child(1) { transform:translateY(5px) rotate(45deg) } 
.header.is-open .menu-btn-line:nth-child(2) { transform:translateY(-5px) rotate(-45deg) } 


@media screen and (min-width:1024px){
 .gnb-pc { display:flex } 
 .gnb-mo { display:none } 
 .header-inner { padding:0 80px } 
 }

@media screen and (max-width:1024px){
 .gnb-pc { display:none } 
 }


/*=========== FOOTER ===========*/
.footer { background:#fe21a4; color:#0b0b0d; border-top-left-radius: 28px; border-top-right-radius: 28px; overflow:hidden; } 

 /* 큰 롤링 텍스트 영역 */
 .footer-marquee { padding: clamp(26px, 4vw, 52px) 0 clamp(14px, 3vw, 28px); } 
 .footer-track { display:flex; align-items:center; gap: clamp(26px, 3.2vw, 54px); white-space: nowrap; will-change: transform; animation: footer-marquee 14s linear infinite; } 
 .footer-word { font-weight: 500; font-size: clamp(64px, 10vw, 170px); line-height: 1; text-transform: uppercase; font-family: "BBH Hegarty", sans-serif; } 
 @keyframes footer-marquee { 
 from { transform: translateX(0); } 
 to { transform: translateX(-50%); } 
 }

 /* 하단 바 */
 .footer-bottom { display:flex; align-items:flex-end; justify-content:space-between; gap: 18px; padding: clamp(18px, 2.2vw, 28px) clamp(18px, 4vw, 40px) clamp(20px, 3vw, 34px); } 

 .footer-time { font-size: 16px; font-family: 'Paperozi', sans-serif; font-weight: 600; margin-bottom: 14px; } 

 .footer-info { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; } 
 .footer-info li { font-family: 'Paperozi', sans-serif; font-weight: 600; } 

 .footer-left { min-width: 260px; } 
 .footer-copy { margin:0 0 10px; font-size: 14px; font-weight: 700; opacity: .95; } 
 .footer-links { display:flex; flex-wrap:wrap; gap: 14px; margin-bottom: 14px; } 
 .footer-link { color: inherit; text-decoration:none; font-size: 14px; font-weight: 700; opacity: .9; } 
 .footer-link:hover { text-decoration: underline; } 

 /* Family Site */
 .family-site { position:relative; right: 85px; } 
 .family-btn { display:flex; align-items:center; gap: 10px; padding: 12px 18px; border-radius: 999px; border: 1.5px solid rgba(0,0,0,.65); background: rgba(255,255,255,.12); color: #0b0b0d; font-weight: 900; letter-spacing: .02em; cursor:pointer; user-select:none; } 
 .family-btn:focus { outline: 2px solid rgba(0,0,0,.75); outline-offset: 2px; } 
 .family-arrow { display:inline-block; transform: translateY(-1px); } 

 .family-menu { position:absolute; right:0; bottom: calc(100% + 10px); width: 220px; padding: 10px; border-radius: 16px; border: 1px solid rgba(0,0,0,.2); background: rgba(255,255,255,.92); box-shadow: 0 18px 40px rgba(0,0,0,.22); display:none; } 
 .family-site.is-open .family-menu { display:block; } 
 .family-item { display:block; padding: 10px 12px; border-radius: 12px; text-decoration:none; color:#0b0b0d; font-weight: 800; font-size: 14px; } 
 .family-item:hover { background: rgba(0,0,0,.06); } 


@media screen and (max-width: 820px){
 .footer-bottom { flex-direction:column; align-items:flex-start; } 
.footer-right { width:100%; } 
.family-btn { width: 100%; justify-content:space-between; } 
.family-menu { left:0; right:auto; width:100%; } 
 .family-site { right: auto; } 
 }

@media screen and (max-width: 640px){
 .footer-info { gap: 8px; } 
.footer-info li { font-size: 14px; line-height: 1.5; } 
.footer-time { font-size: 14px; } 
 }

@media screen and (max-width: 500px){
 .footer-info { margin-bottom: 4px; } 
 .footer-time { margin-bottom: 4px; } 
 }


@media screen and (prefers-reduced-motion: reduce){
 .footer-track { animation: none; } 
 }


/*========== 퀵메뉴 ==========*/

/* 위치는 너가 원하는 곳으로 조절 */
#quick { position: fixed; right: 50px; bottom: 80px; z-index: 9999; } 

#quick .quick_wrap { position: relative; width: 92px; /* 버튼 기준폭 */ } 

/* 버튼 */
#quick .quick_btn { position: relative; width: 92px; height: 92px; border: 0; background: transparent; padding: 0; cursor: pointer; } 

#quick .tiger,
#quick .glasses { position: absolute; inset: 0; display: block; width: 100%; height: 100%; } 
#quick .glasses { width: 80%; height: inherit; z-index: 2; top: -10%; left: 10%; } 

#quick .tiger img,
#quick .glasses img { width: 100%; height: 100%; object-fit: contain; display: block; } 

#quick .tiger img { } 

/* 선글라스: 기본은 보이고, 열릴 때 위로 사라짐 */
#quick .glasses { transform: translateY(0); opacity: 1; transition: transform .35s ease, opacity .25s ease; will-change: transform, opacity; } 

/* 메뉴: 처음엔 아래에 숨겨둠 */
#quick .quick_menu { position: absolute; left: 50%; bottom: 92px; /* 버튼 바로 위에서 시작 */
 transform: translate(-50%, 12px); opacity: 0; pointer-events: none; display: flex; flex-direction: column; gap: 10px; transition: transform .35s ease, opacity .25s ease; } 

/* 메뉴 아이템 스타일 */
#quick .quick_item { width: 160px; background: #fff; color: #111; text-decoration: none; border-radius: 999px; padding: 12px 14px; font-size: 14px; font-weight: 700; box-shadow: 0 10px 28px rgba(0,0,0,.18); transform: translateY(10px); opacity: 0; transition: transform .35s ease, opacity .25s ease, background .2s ease; } 

#quick .quick_item:hover { background: #fe21a4; color: #fff; } 

/* ===== OPEN 상태(호버/클릭 시) ===== */
#quick .quick_wrap.open .glasses { transform: translateY(-120%); opacity: 0; } 

#quick .quick_wrap.open .quick_menu { transform: translate(-50%, 0); /* 위로 쭉 올라온 느낌 */
 opacity: 1; pointer-events: auto; } 

/* 메뉴들 순차 등장(스르륵) */
#quick .quick_wrap.open .quick_item { transform: translateY(0); opacity: 1; } 

#quick .quick_wrap.open .quick_item:nth-child(1) { transition-delay: .05s; } 
#quick .quick_wrap.open .quick_item:nth-child(2) { transition-delay: .10s; } 
#quick .quick_wrap.open .quick_item:nth-child(3) { transition-delay: .15s; } 
#quick .quick_wrap.open .quick_item:nth-child(4) { transition-delay: .20s; } 

/* 버튼 살짝 띄우는 느낌(선택) */
#quick .quick_wrap.open .quick_btn { transform: translateY(-2px); transition: transform .2s ease; } 


@media screen and (max-width:640px){
 #quick { right: 16px; bottom: 50px; } 
 #quick .quick_menu { left: 14%; } 
 }

/*=========== 개인정보처리방침 ===========*/
.modal { position: fixed; inset: 0; z-index: 9999; display: none; } 
.modal.is-open { display: block; } 
.modal-backdrop { position: absolute; inset: 0; background: rgba(12, 15, 20, 0.72); backdrop-filter: blur(6px); opacity: 0; transition: opacity 280ms ease; } 
.modal-dialog { position: relative; width: min(980px, calc(100% - 32px)); max-height: min(78vh, 720px); margin: 10vh auto 0; border-radius: 18px; background: rgba(15, 18, 26, 0.92); border: 1px solid rgba(255,255,255,0.10); box-shadow: 0 24px 80px rgba(0,0,0,0.55); opacity: 0; transform: translateY(16px) scale(0.98); transition: opacity 280ms ease, transform 280ms ease; outline: none; display: flex; flex-direction: column; overflow: hidden; } 
.modal.is-open .modal-backdrop { opacity: 1; } 
.modal.is-open .modal-dialog { opacity: 1; transform: translateY(0) scale(1); } 

.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 18px 10px; flex: 0 0 auto; } 
.modal-body { flex: 1 1 auto; overflow: auto; padding: 14px 18px 18px; border-top: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } 
.modal-foot { display: flex; justify-content: flex-end; padding: 14px 18px 18px; flex: 0 0 auto; } .modal-title { margin: 0; font-size: 18px; letter-spacing: 0.02em; color: #fff; } 
.modal-x { width: 38px; height: 38px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.06); color: #fff; cursor: pointer; transition: transform 160ms ease, background 160ms ease; } 
.modal-x:hover { transform: translateY(-1px); background: rgba(255,255,255,0.10); } 

.modal-foot { display: flex; justify-content: flex-end; padding: 14px 18px 18px; } 
.modal-btn { height: 40px; padding: 0 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.08); color: #fff; cursor: pointer; transition: transform 160ms ease, background 160ms ease; } 
.modal-btn:hover { transform: translateY(-1px); background: rgba(255,255,255,0.12); } 

.modal .desc { margin: 0; padding: 0 18px 14px; color: rgba(255,255,255,0.72); font-size: 15px; line-height: 1.55; } 
.modal h4 { margin: 16px 0 8px; font-size: 14px; color: rgba(255,255,255,0.92); } 
.modal p, .modal li { color: rgba(255,255,255,0.74); font-size: 15px; line-height: 1.7; word-break: keep-all; } 
.modal ul { margin: 8px 0 0 18px; } 

.modal .date { margin-top: 14px; color: rgba(255,255,255,0.55); font-size: 12px; } 

body.is-modal-open { overflow: hidden; } 

@media (prefers-reduced-motion: reduce){
 .backdrop, .dialog { transition: none; } 
 }

 @media screen and (max-width:480px){
 .modal-title { font-size: 16px; } 
 .modal h4 { font-size: 13px; } 
 .modal .desc { font-size: 13px; } 
 .modal p, .modal li { font-size: 13px; } 
 }



 /*=========== 간편결제 ===========*/
.quick-wrap { position: fixed; right: 0; bottom: 200px; /* 기존 버튼 아래쪽 위치 */z-index: 1000; } 
.quick-wrap .quick-link { display: flex; align-items: center; justify-content: center; width: 180px; height: 52px; font-weight: 800; border-radius: 30px 0 0 30px; text-decoration: none; box-shadow: 0 6px 16px rgba(0,0,0,.25); transition: transform .2s ease, box-shadow .2s ease; font-family: 'Paperozi', sans-serif; font-size: 18px; }
.quick-wrap .quick-link + .quick-link { margin-top: 12px; }
.quick-wrap .quick-link  i { padding-right: 4px; } 
.quick-wrap .quick-link:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0,0,0,.35); } 
.quick-wrap .quick-pay-link { background: #ffe600; color: #000;} 
.quick-wrap .shop-pay-link { background: #fe6b21; color: #fff;}

@media screen and (max-width:1024px){
  .quick-wrap {position: fixed; right: 0;  bottom: 126px; } 
  .quick-wrap .quick-link { width: 140px; height: 42px; font-size: 16px;} 
 }
 @media screen and (max-width:480px){
  .quick-wrap .quick-link { width: 120px; }
.quick-wrap .quick-link + .quick-link { margin-top: 6px; }

 }