@import url(common.css?ver=1.1);

html,body{ width:100%;}
body{ background-color:var(--color-text-white);}
body.noScroll{ overflow: hidden;}
header { display:block; width:100%; background-color: var(--color-bg-dark); position:fixed;top:0; z-index: 9000;}
button { cursor:pointer;}

.btn01 { background: var(--color-border-light); color: var(--color-border-medium)}
.btn01_1 { background: var(--color-border-light); color: var(--color-text-dark)}
.btn02 { background: var(--color-text-white); color: var(--color-text-dark)}
.btn03 { background: var(--color-primary); color: var(--color-text-dark) ; font-weight: 700;}
.btn04 { background: none; color: var(--color-text-white) ; font-weight: 700; border: 1px solid var(--color-bg-medium);}


header .header_wrap { width:100%; height:5.4rem; display:flex; flex-flow: row wrap; justify-content: center; }
header .header_wrap .logos { width:100%; height:100%; display:flex; justify-content:space-between; align-items: center;  padding: 0 1.6rem; }
header .header_wrap .logos .logo { display:flex; align-items: center;}
header .header_wrap .logos .logo span { font-size: 1.8rem; font-weight: 900; line-height: 2.2rem; color:var(--color-text-white)}
header .header_wrap .logos a { cursor:pointer}
header .header_wrap .logos .menuclose, header .header_wrap .logos .menuBtn { justify-self:end ;}

.header_wrap .menu {  width:100%; padding:4rem 1.6rem ; height: 100vh;  background: var(--color-bg-dark);}
.header_wrap .menu .menuList {  display:flex; flex-flow: column; width:100%; gap:2.4rem;}
.header_wrap .menu .menuList li { border-bottom: .1rem solid var(--color-bg-medium);}
.header_wrap .menu .menuList li a { display:inline-block; padding-bottom: 1.6rem; width:100%; font-size: 2.4rem; font-style: normal; font-weight: 900; line-height: 2.8rem; color:var(--color-text-white); }

.header_blank{ height:5.4rem; width:100%;}

.wrap{ width:100%;  }

section.bg_dark { background: var(--color-bg-dark);}
section.bg_gray { background: #F7F8F9;}

.heroSection { width:100%; height:max-content; }
.heroSection article { margin:0 auto;}
.heroSection article .view-all-btn { padding: .7rem 1.2rem; border: 1px solid #454C53; border-radius: 2.4rem; background: transparent; font-size: 1.2rem; font-weight: 400; line-height: 1.4rem; color: #FFFFFF; letter-spacing: -0.012rem; cursor: pointer; }

.heroSection article .register_area { width:100%; padding:2.4rem 1.6rem; background: #1B1D1F; display: flex; flex-direction: column; gap: .8rem;}
.heroSection article .register_area .hot-badge { display: inline-block; width: max-content; background: #FA2C52; padding: .3rem .6rem; font-size: 1rem; font-weight: 900; line-height: 1.2rem; color: #FFFFFF; }
.heroSection article .register_area h1 { font-size: 2.8rem; font-weight: 900; line-height: 3.4rem; font-style: normal; color: #FFFFFF; margin: 0; }
.heroSection article .register_area .info-row { display: flex; align-items: center; gap: .4rem; }
.heroSection article .register_area .info-row img { width: 1.8rem; height: 1.8rem; }
.heroSection article .register_area .info-row span { font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; letter-spacing: -0.014rem; color: #9EA4AA; }
.heroSection article .register_area a { display: block; width: 100%; padding: .9rem 2.4rem; background: #00E8AA; border-radius: 4rem; text-align: center; font-weight: 700; font-size: 1.4rem; line-height: 1.8rem; color: #1B1D1F; margin-top: 1.6rem; }

.heroSection article .matches { width:100%; background: #1B1D1F; padding: 4rem 1.6rem 0; display: flex; flex-direction: column; gap: 2.4rem; }
.heroSection article .matches .matches-header { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.heroSection article .matches .matches-header h2 { font-size: 2.4rem; font-weight: 400; line-height: 2.8rem; color: #FFFFFF; letter-spacing: -0.048rem; margin: 0; }
.heroSection article .matches .matches-desc { font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; color: #9EA4AA; letter-spacing: -0.014rem; margin: 0; }
.heroSection article .matches .match-cards { display: flex; flex-flow: row wrap; gap: 1.6rem; padding: 0 0 2.4rem; }
.heroSection article .matches .match-card { position: relative; width: 100%; height: 14.8rem; border-radius: .4rem; overflow: hidden; background-position: center; background-size: cover; }
.heroSection article .matches .match-card.golf { background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(/public_html/images/common/img_golf.png); }
.heroSection article .matches .match-card.taekwondo { background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(/public_html/images/common/taekwondo.png); }
.heroSection article .matches .match-card.basket { background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(/public_html/images/common/basketball.png); height: 18rem; }
.heroSection article .matches .match-card .match-info { position: absolute; left: 1.6rem; bottom: 1.6rem; display: flex; flex-direction: column; gap: .4rem; }
.heroSection article .matches .match-card .badges { display: flex; gap: .4rem; }
.heroSection article .matches .match-card .badge { padding: .3rem .6rem; font-size: 1rem; font-weight: 900; line-height: 1.2rem; }
.heroSection article .matches .match-card .badge-sport { background: #FFFFFF; color: #1B1D1F; }
.heroSection article .matches .match-card .badge-live { background: #FA2C52; color: #FFFFFF; }
.heroSection article .matches .match-card .badge-scheduled { background: #F9BA3E; color: #1B1D1F; }
.heroSection article .matches .match-card .badge-ended { background: #393C41; color: #FFFFFF; }
.heroSection article .matches .match-card .match-title { font-size: 1.4rem; font-weight: 700; line-height: 1.8rem; color: #FFFFFF; letter-spacing: -0.014rem; margin: 0; }
.heroSection article .matches .match-card .match-details { display: flex; align-items: center; gap: .4rem; }
.heroSection article .matches .match-card .match-details img { width: 1.2rem; height: 1.2rem; }
.heroSection article .matches .match-card .match-details .venue, .heroSection article .matches .match-card .match-details .time { font-size: 1.2rem; font-weight: 400; line-height: 1.4rem; color: #FFFFFF; letter-spacing: -0.012rem; }
.heroSection article .matches .match-card .match-details .divider { width: .1rem; height: 1.2rem; background: #9EA4AA; margin: 0 .4rem; }
.heroSection article .videoList { display:flex; padding: 4rem 1.6rem; flex-flow: row wrap; justify-content: flex-start; align-items: center; row-gap:2.4rem; column-gap: 1.6rem; background: var(--color-bg-dark);}
.heroSection article .videoList h1 { width:100%; color:white; font-size: 2.4rem; font-weight: 900; line-height: 2.8rem; font-style: normal;}

.heroSection article .videoList .videos { width: 100%;  height: 19.2rem;}
.heroSection article .videoList .videoList-header { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.heroSection article .videoList .videoList-header h2 { font-size: 2.4rem; font-weight: 400; line-height: 2.8rem; color: #FFFFFF; letter-spacing: -0.048rem; margin: 0; }
.heroSection article .videoList .videos .thumnail { position:relative; width: 100%; height:14.8rem; background-size: cover; background-position: center; border-radius: .4rem;}
.heroSection article .videoList .videos .thumnail .videoTime { position:absolute; display: flex; align-items: center; gap:.4rem; bottom:0; left:0; width:6rem; height: 2.4rem; padding: .6rem 1.2rem .6rem .8rem; color: var(--color-text-white); text-align: center; font-size: 1rem; font-style: normal; font-weight: 900; line-height: 12px; /* 120% */ background: rgba(0, 0, 0, 0.70);}
.heroSection article .videoList .videos .thumnail .videoTime::before { content:''; display:inline-block;width:.8rem; height:1rem; background: no-repeat url(/public_html/images/icons/play.svg); } 
.heroSection article .videoList .videos .titles { display:flex; flex-flow: column; gap:.4rem; margin-top:.8rem;}
.heroSection article .videoList .videos .titles h3 { color: var(--color-text-white); font-size: 1.4rem; font-style: normal; font-weight: 700; line-height: 1.8rem; /* 128.571% */ letter-spacing: -0.14px; }
.heroSection article .videoList .videos .titles .etc { display: flex; align-items: center; }
.heroSection article .videoList .videos .titles .etc span{ color: var(--color-text-white); text-align: center; font-size: 1.2rem; font-style: normal; font-weight: 400; line-height: 1.4rem; /* 116.667% */ letter-spacing: -0.12px; }
.heroSection article .videoList .videos .titles .etc .views::after { content:''; display:inline-block; width:.1rem; height:1.2rem; background: var(--color-text-gray); margin: 0 .8rem; vertical-align: middle;}

.boardSection article { padding: 4rem 1.6rem}

.boardSection article div.title{ display:flex; justify-content: space-between;}
.boardSection article div.title h2 { font-size: 2.4rem;font-weight: 400; line-height: 2.8rem;font-style: normal;}
.boardSection article div.title a {  padding: .7rem 1.2rem; background: none; color: #454C53; font-size: 1.2rem;font-style: normal;font-weight: 400;line-height: 1.4rem; /* 116.667% */letter-spacing: -0.12px; border-radius: 2.4rem; border: 1px solid var(--gray-200, #C9CDD2); margin-bottom: 2.4rem;}

.boardSection .rankArea { border-bottom: .1rem solid var(--color-border-light);}
.boardSection .rankArea .tabMenus { display:flex; justify-content: flex-start; border-bottom: .1rem solid var(--color-bg-dark);  padding-bottom: .8rem; gap:2.4rem; }
.boardSection .rankArea .tabMenus li { font-size: 1.8rem; font-style: normal; font-weight: 700; line-height: 2.2rem; /* 122.222% */ letter-spacing: -0.36px; color: var(--color-text-gray); cursor:pointer}
.boardSection .rankArea .tabMenus li.on { color:var(--color-bg-dark);}

.boardSection .rankArea .ranking { display:flex; flex-flow: row wrap; gap:1.6rem; margin-top: 1.6rem; width:100%;}
.boardSection .rankArea .ranking .list { display:flex; gap:1.6rem; width:100%; align-items: center; }
.boardSection .rankArea .ranking .list img { width: 4.8rem; height:4.8rem}
.boardSection .rankArea .ranking .list .p_info{ display: flex; flex-flow: column; width: calc( 100% - 8rem); gap:.4rem;}
.boardSection .rankArea .ranking .list .p_info .p_name { font-size: 1.4rem; font-style: normal; font-weight: 700; line-height: 1.8rem; /* 128.571% */ letter-spacing: -0.14px;}
.boardSection .rankArea .ranking .list .p_info .p_etc { display: flex; justify-content: flex-start; align-items: center; gap:.8rem;}
.boardSection .rankArea .ranking .list .p_info .p_etc li{ font-size: 1.2rem; font-style: normal; font-weight: 400; line-height: 1.4rem; /* 116.667% */ letter-spacing: -0.12px;}
.boardSection .rankArea .ranking .list .p_info .p_etc li span { font-weight: 700;}
.boardSection .rankArea .ranking .list .p_info .p_etc li:first-child { width: 9rem; white-space: pre; overflow-x: hidden; text-overflow:ellipsis}
.boardSection .rankArea .ranking .list .p_info .p_etc li:last-child::before{ content:''; display:inline-block; width:.1rem; height:1.2rem; line-height: 1.4rem; background-color: var(--color-text-gray); margin-right: .8rem; vertical-align: middle;}

.boardSection .rankArea .ranking .list .rank { font-size: 2.8rem; font-style: normal; font-weight: 900; line-height: 3.4rem; padding-right: 1.6rem;}
.boardSection .rankArea .ranking .top3 .rank { color:var(--color-red)}

.boardSection .boards ul { width:100%; display: flex; flex-flow: column; gap:1.6rem }
.boardSection .boards ul li a { display:flex; flex-flow: column; gap:.4rem; padding-bottom: 1.6rem; border-bottom:.1rem solid var(--color-border-light)}
.boardSection .boards ul li:last-child a{ border:none; padding:0}
.boardSection .boards ul li a h3 { font-size: 1.4rem; font-style: normal; font-weight: 400; line-height: 1.8rem; /* 128.571% */ letter-spacing: -0.14px; color:var(--color-text-medium)}

.boardSection .boards ul li a div { display: flex; align-items: center;}
.boardSection .boards ul li a div .boardType { color:var(--color-red);font-size: 1.2rem; font-style: normal; font-weight: 700; line-height: 1.4rem; /* 116.667% */ letter-spacing: -0.12px; }
.boardSection .boards ul li a div .boardType::after { content:''; display:inline-block; width:.1rem; height:.8rem;  background-color: var(--color-text-gray); margin: 0 .8rem;}
.boardSection .boards ul li a div .regTime { color:var(--color-text-gray)}


section .box { display:flex; flex-flow:column; padding: 2.4rem 1.6rem; gap:2.4rem; }
section .box h1 { font-size: 1.8rem; font-weight: 700; line-height: 2.2rem; color:var(--color-text-white); letter-spacing: -0.36px;}
section .box h2 { color: var(--gray-400, var(--color-text-gray)); font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; /* 128.571% */ letter-spacing: -0.14px; }
section .box p { color: var(--color-text-light); font-size: 1.4rem; font-style: normal; font-weight: 400; line-height: 1.8rem; /* 128.571% */ letter-spacing: -0.14px; }
section .box p.tip { color:var(--color-primary-light)}
section .box p.sportsTag{ width:max-content; padding:.3rem .6rem; color: var(--color-text-white); text-align: center; font-size: 1rem; font-style: normal; font-weight: 900; line-height: 12px; background:  #000;}

section .box .scrollBox { width:100%; padding-bottom: 1.6rem;}
section .box .scrollBox::-webkit-scrollbar { display:none;width:0; height:0;}


/* Record Page Styles */
.recordHeader { background: #FFFFFF; padding: 2.4rem 1.6rem; display: flex; flex-direction: column; gap: 2.4rem;}
.recordHeaderContent { display: flex; flex-direction: column; gap: .8rem;}
.recordHeaderTitle { color: #1B1D1F; font-size: 2.4rem; font-weight: 700; line-height: 2.8rem; letter-spacing: -0.48px; margin: 0;}
.recordHeaderDesc { color: #72787F; font-size: 1.6rem; font-weight: 400; line-height: 2rem; letter-spacing: -0.32px; margin: 0;}

/* Record Stats Grid */
.recordStats { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: .4rem; overflow: hidden;}
.recordStatItem { background: #1B1D1F; padding: 1.6rem; display: flex; flex-direction: column; gap: .8rem; border: 1px solid #393C41;}
.recordStatItem:nth-child(1) { border-radius: .4rem 0 0 0; border-right: none; border-bottom: none;}
.recordStatItem:nth-child(2) { border-radius: 0 .4rem 0 0; border-bottom: none;}
.recordStatItem:nth-child(3) { border-radius: 0 0 0 .4rem; border-right: none;}
.recordStatItem:nth-child(4) { border-radius: 0 0 .4rem 0;}
.recordStatLabel { display: flex; gap: .4rem; align-items: center;}
.recordStatIcon { font-size: 1.6rem; line-height: 1.6rem;}
.recordStatLabel p { color: #C9CDD2; font-size: 1.2rem; font-weight: 400; line-height: 1.4rem; letter-spacing: -0.12px; margin: 0;}
.recordStatValue { color: #FFFFFF; font-size: 2.8rem; font-weight: 900; line-height: 3.4rem; margin: 0;}
.recordStatValueRed { color: #FA2C52;}

/* Record Cards Section */
.recordCards { background: #FFFFFF; padding: 2.4rem 1.6rem; display: flex; flex-direction: column; gap: 1.6rem;}
.recordCard { background: #FFFFFF; border: 1px solid #E8EBED; border-radius: .4rem; padding: 1.6rem; display: flex; flex-direction: column; gap: 1.6rem;}
.recordCardHeader { display: flex; gap: .8rem; align-items: center;}
.recordCardIcon { font-size: 1.6rem; line-height: 1.6rem; flex-shrink: 0;}
.recordCardTitle { color: #1B1D1F; font-size: 1.8rem; font-weight: 700; line-height: 2.2rem; letter-spacing: -0.36px; margin: 0; flex: 1;}
.recordCardArrow { width: 1.8rem; height: 1.8rem; flex-shrink: 0;}
.recordCardSubtitle { color: #454C53; font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; letter-spacing: -0.14px; margin: 0;}
.recordCardDetails { display: flex; flex-direction: column; gap: .8rem;}
.recordCardRow { display: flex; gap: .4rem; align-items: flex-start;}
.recordCardLabel { color: #454C53; font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; letter-spacing: -0.14px; margin: 0; flex: 1;}
.recordCardValue { color: #1B1D1F; font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; letter-spacing: -0.14px; margin: 0; white-space: pre;}
.recordCardValueRed { color: #C00023;}

/* Record Activity Section */
.recordActivity { background: #FFFFFF; padding: 2.4rem 1.6rem; display: flex; flex-direction: column; gap: 1.6rem;}
.recordActivityTitle { color: #1B1D1F; font-size: 1.8rem; font-weight: 700; line-height: 2.2rem; letter-spacing: -0.36px; margin: 0;}
.recordActivityList { display: flex; gap: .8rem; overflow-x: auto;}
.recordActivityList::-webkit-scrollbar { display: none;}
.recordActivityCard { background: #1B1D1F; padding: 1.6rem; border-radius: .4rem; flex-shrink: 0; width: 24.1rem; display: flex; flex-direction: column; gap: .8rem;}
.recordActivityHeader { display: flex; gap: .8rem; align-items: center;}
.recordActivityIcon { font-size: 1.6rem; line-height: 1.6rem; flex-shrink: 0;}
.recordActivityName { color: #FFFFFF; font-size: 1.4rem; font-weight: 700; line-height: 1.8rem; letter-spacing: -0.14px; margin: 0; flex: 1;}
.recordActivityScore { color: #00E8AA; font-size: 1.4rem; font-weight: 700; line-height: 1.8rem; letter-spacing: -0.14px; margin: 0;}
.recordActivityBadge { background: #00E8AA; color: #1B1D1F; font-size: 1rem; font-weight: 900; line-height: 1.2rem; padding: .3rem .6rem; border-radius: 2.4rem; white-space: pre;}
.recordActivityDate { color: #9EA4AA; font-size: 1.2rem; font-weight: 400; line-height: 1.4rem; letter-spacing: -0.12px; margin: 0;}

/* Record Quick Access Section */
.recordQuickAccess { padding: 2.4rem 1.6rem 12rem 1.6rem; display: flex; flex-direction: column; gap: 2.4rem;}
.recordQuickTitle { color: #1B1D1F; font-size: 1.8rem; font-weight: 700; line-height: 2.2rem; letter-spacing: -0.36px; margin: 0;}
.recordQuickButtons { display: flex; gap: .8rem;}
.recordQuickButton { flex: 1; border: 1px solid #E8EBED; border-radius: .4rem; padding: 1.6rem; display: flex; flex-direction: column; gap: .4rem; align-items: center; justify-content: center; background: #FFFFFF; cursor: pointer;}
.recordQuickIcon { font-size: 1.6rem; line-height: 1.6rem;}
.recordQuickButton p { color: #1B1D1F; font-size: 1.6rem; font-weight: 700; line-height: 2rem; letter-spacing: -0.32px; margin: 0;}
.btnRecordPrimary { background: #00E8AA; color: #1B1D1F; font-size: 1.6rem; font-weight: 700; line-height: 2rem; letter-spacing: -0.32px; padding: 1.2rem 2.4rem; border: none; border-radius: 4rem; cursor: pointer; text-align: center; margin: 0; width: 100%;}
.btnRecordLarge { width: 100%;}

.analysis .top { gap:.8rem;}
.analysis .overall { padding:0 1.6rem; display:flex; flex-flow: column; gap: 4rem; }
.analysis .overall .overallCard { display: flex; flex-flow: column; padding: 1.6rem; gap:1.6rem; border-radius: .4rem; background: #00E8AA;}
.analysis .overall .overallCard.gray{ background: #393C41;}
.analysis .overall .overallCard h2 { color:#454C53; font-size: 1.8rem; font-weight: 400; line-height: 2.2rem; letter-spacing: -0.36px; margin: 0;}
.analysis .overall .overallCard.gray h2{ color:#FFF}
.analysis .overall .overallCard #total {color: var(--White, #FFF);font-size: 4.8rem;font-weight: 900;letter-spacing: -0.96px;}
.analysis .overall .overallCard #total span {color: var(--White, #FFF);font-size: 4.8rem;font-weight: 100;letter-spacing: -0.96px;}
.analysis .overall .overallCard .bold { color: var(--gray-400, #9EA4AA); font-size: 1.4rem; font-weight: 700; line-height: 1.8rem; /* 128.571% */ letter-spacing: -0.14px; }
.analysis .overall .overallCard .bold span { color: var(--gray-400, #9EA4AA); font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; /* 128.571% */ letter-spacing: -0.14px;}

.overallCardContent { display: flex; flex-direction: column; gap: .8rem;}
.overallCardContent h1 { color: #1B1D1F; font-size: 6rem; font-weight: 900; line-height: normal; letter-spacing: -1.2px; margin: 0;}

.overallCardRow { display: flex; gap: .8rem; align-items: flex-start;}
.overallCardRow p { color: #454C53; font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; letter-spacing: -0.14px; margin: 0; flex: 1;}
.overallCardRow p:last-child { font-weight: 700; text-align: right;}
.overallCardValueRed { color: #C00023 !important;}

.analysis .overall .fitIndex { display:flex; flex-flow: column;}
.analysis .overall .fitIndex h2  { display: flex; justify-content: space-between; align-items: center; color: var(--color-text-white); font-size: 1.8rem; font-style: normal; font-weight: 400; line-height: 2.2rem; /* 128.571% */ letter-spacing: -0.36px; }
.analysis .overall .fitIndex h2 span { color: var(--color-text-white); font-size: 1.8rem; font-style: normal; font-weight: 900; line-height: 2.2rem; }
.analysis .overall .fitIndex p { color: var(--color-text-gray); font-size: 1.4rem; font-style: normal; font-weight: 400; line-height: 1.8rem; letter-spacing: -0.14px;padding-top:.8rem}

.analysis .overall .fitIndex .stats{padding-top:2.4rem}
.analysis .overall .fitIndex .stats label{ color:var(--color-text-white); font-size: 1.6rem; font-style: normal; line-height: 2rem; /* 116.667% */ letter-spacing: -0.32px; margin-top: 2.4rem;}
.analysis .overall .fitIndex .stats .ranges { margin-top:.8rem; margin-bottom: 2.8rem;}

/* Recommendation Section */
.analysis .recomm { padding: 2.4rem 1.6rem 12rem 1.6rem; display: flex; flex-direction: column; gap: 2.4rem;}

/* Recommendation Top Section */
.analysis .recomm .recommTop { display: flex; flex-direction: column; gap: .8rem; align-items: center; justify-content: center;}
.analysis .recomm .recommTop h1 { color: #FFFFFF !important; font-size: 2.4rem !important; font-weight: 700 !important; line-height: 2.8rem !important; letter-spacing: -0.48px !important; margin: 0 !important; width: 100%;}
.analysis .recomm .recommTop p { color: #C9CDD2 !important; font-size: 1.6rem !important; font-weight: 400 !important; line-height: 2rem !important; letter-spacing: -0.32px !important; margin: 0 !important; width: 100%;}

/* Recommendation Cards */
.analysis .recomm .recommCard { background: #393C41; padding: 1.6rem; border-radius: .4rem; box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.08); display: flex; flex-direction: column; gap: 2.4rem;}

.analysis .recomm .recommCard .recommCardHeader { display: flex; gap: .8rem; align-items: center;}
.analysis .recomm .recommCard .recommCardHeader .recommIcon { font-size: 1.6rem; line-height: 1.6rem; width: 1.6rem; height: 1.6rem;}
.analysis .recomm .recommCard .recommCardHeader h2 { color: #FFFFFF !important; font-size: 1.8rem !important; font-weight: 700 !important; line-height: 2.2rem !important; letter-spacing: -0.36px !important; margin: 0 !important; flex: 1;}

.analysis .recomm .recommCard .recommCardContent { display: flex; flex-direction: column; gap: .8rem;}
.analysis .recomm .recommCard .recommCardContent p { color: #C9CDD2 !important; font-size: 1.4rem !important; font-weight: 400 !important; line-height: 1.8rem !important; letter-spacing: -0.14px !important; margin: 0 !important;}

/* Recommendation Items with Badges */
.analysis .recomm .recommCard .recommCardContent .recommItem { display: flex; gap: .4rem; align-items: center;}
.analysis .recomm .recommCard .recommCardContent .recommItem p { color: #C9CDD2 !important; font-size: 1.4rem !important; font-weight: 400 !important; line-height: 1.8rem !important; letter-spacing: -0.14px !important; margin: 0 !important; flex: 1;}

.analysis .recomm .recommCard .recommCardContent .recommBadge { font-size: 1.2rem !important; font-weight: 700 !important; line-height: 1.4rem !important; letter-spacing: -0.12px !important; padding: .5rem 1.2rem; border-radius: 2.4rem; white-space: nowrap;}
.analysis .recomm .recommCard .recommCardContent .recommBadgeFit { background: #00E8AA; color: #1B1D1F !important;}
.analysis .recomm .recommCard .recommCardContent .recommBadgeChallenge { background: #FFC800; color: #1B1D1F !important;}

.analysis .predict #settingWeek { font-size: 1.8rem; font-weight: 700; line-height: 2.2rem; color: var(--color-text-white); letter-spacing: -0.36px;}

.box .card { display: flex; flex-flow: column; justify-content: space-between; align-items: center; row-gap:1.6rem; padding: 1.6rem; border-radius: .4rem; background: var(--color-bg-medium);}
.box .card .info { width:100%; display:flex; flex-flow: row wrap; justify-content: space-between; align-items: center; row-gap: .8rem;}
.box .card .info div { display:flex; gap:.4rem; align-items: center; }
.box .card .info img { height: 2rem;}
.box .card .info span { color:var(--color-text-white); font-size: 1.6rem; font-style: normal; font-weight: 700;  /* 125% */ letter-spacing: -0.32px;}
.box .card p { width:100%; padding: 8px 0;color: var(--gray-400, var(--color-text-gray));border-radius: 4px;border: 1px solid var(--gray-600, var(--color-text-medium));text-align: center;/* Body 01/400 */font-size: 14px;font-style: normal;font-weight: 400;line-height: 18px; /* 128.571% */letter-spacing: -0.14px;}
.box .card p span { color: var(--gray-400, var(--color-text-gray)); font-size: 14px;font-style: normal;font-weight: 400;line-height: 18px; /* 128.571% */letter-spacing: -0.14px;}
.box .card .btns { width:100%;display: flex; align-items: center; gap:.8rem;}
.box .card .btns a { display: block; width:calc(100% - 11rem);padding: 8px 0; text-align: center; border-radius: 3rem; font-size: 1.4rem; font-weight: 700; line-height: 1.8rem; /* 128.571% */ letter-spacing: -0.14px;}
.box .card .btns .grade { width: 10.2rem; padding: .8rem 0; text-align: center; font-size: 1.4rem; /* 128.571% */ letter-spacing: -0.14px; border-radius: 3rem; }
.box .card .btns .grade.high { color: var(--color-red-light); border: 1px solid var(--primary-red-01, var(--color-red-light));}
.box .card .btns .grade.middle { color: var(--color-orange-light); border: 1px solid var(--primary-red-01, var(--color-orange-light));}
.box .card .btns .grade.low { color: var(--color-green); border: 1px solid var(--primary-red-01, var(--color-green));}


.box.predict { flex-flow: row wrap; column-gap: .8rem; }

.box.predict h1 { width: 100%; }
.box.predict .card { width:calc(33% - .5rem); background: none; align-items: flex-start; padding:0; gap:.8rem;}
.box.predict .card span{color: var(--gray-400, #9EA4AA); font-size: 1.8rem; font-weight: 400; line-height: 22px; /* 122.222% */ letter-spacing: -0.36px; text-align: left;}
.box.predict .card .info{border-radius: 4px; background-color: var(--color-bg-medium);gap:.4rem; }
.box.predict .card .info h1{color: var(--White, #FFF); font-size: 28px; font-weight: 900; line-height: 34px; /* 121.429% */padding:1.2rem 1.2rem 0}
.box.predict .card .info p {border:none; padding: 0 1.2rem 1.2rem; text-align: left;}
.box.predict .card .info p span{font-size: 1.4rem;}

.correlation { margin-top: 1.6rem;}
.correlation .list { display: flex; flex-flow: column; gap:1.6rem; }

.select.dark { padding:1.6rem; background: var(--color-bg-medium); border:none;}
.select.dark label { padding:0; margin:0; color:var(--color-bg-light); font-size: 1.6rem; font-style: normal; font-weight: 700; line-height: 2rem; /* 125% */ letter-spacing: -0.32px }
.select.dark label::after { background:url(/public_html/images/icons/drop.svg) no-repeat center; }
.select.dark ul { top:5.2rem}

.growth { margin-top: 1.6rem;}
.growth .models { display:flex; flex-flow: row wrap; gap:2.4rem;}
.growth .models div{ width:100%;}
.growth .models label{ display:flex; color:var(--color-text-gray); font-size: 1.8rem; font-style: normal; line-height: 2.2rem; /* 116.667% */ letter-spacing: -0.32px; margin-bottom: .8rem;}
.growth .models .select label { color:var(--color-bg-dark); padding:1.2rem;border-radius: 4px; border: 1px solid var(--gray-100, var(--color-border-light)); background: var(--gray-50, var(--color-bg-light)); margin:0; font-size: 1.4rem;line-height: 1.8rem;} 

footer  { width: 100% ; background: var(--color-bg-light);}
footer ul { width:100%; display:flex; flex-flow: column; gap:2.4rem;  padding: 2.4rem 1.6rem 4rem 1.6rem;}
footer ul .footer_terms { display:flex; }
footer ul .footer_terms a { font-size: 1.2rem; font-style: normal; font-weight: 400; line-height: 1.4rem; /* 116.667% */ letter-spacing: -0.12px;}
footer ul .footer_terms a::after { content:''; display:inline-block; width:.1rem; height:.8rem;  background-color: var(--color-text-gray); margin: 0 .8rem;}
footer ul .footer_terms a:last-child::after { display:none}
footer ul .reserved span { color: var(--color-text-gray)}

.signuptab { width:100%; display: flex; justify-content: center; align-items: center; gap:6rem; background: var(--color-bg-dark); padding:1.6rem;}
.signuptab li { color: var(--color-text-gray); font-size: 1.4rem; line-height: 1.8rem; letter-spacing: -0.14px; font-weight: 400; text-align: center;}
.signuptab li.on { font-weight: 700; color:var(--color-text-white)}

.member.box { padding-top:0; max-width: 48rem;margin:auto; line-height: 2rem; letter-spacing: -0.32px;}

.member.box .checkform li.element {display:flex; justify-content: space-between; position:relative; padding-bottom: 2.4rem;  }
.member.box .checkform li.element:first-child { margin-bottom: 1.6rem;padding-top:4rem; padding-bottom: 1.6rem; border-bottom: 1px solid var(--gray-200, var(--color-border-medium));}

.member.box .checkform li.element label { font-size: 1.4rem; font-style: normal; font-weight: 400; line-height: 1.8rem; /* 125% */ letter-spacing: -0.14px; color:var(--color-bg-dark) } 
.member.box .checkform li.element label span { padding-right:.4rem; font-size: 1.4rem; font-style: normal; font-weight: 700; line-height: 1.8rem; /* 125% */ letter-spacing: -0.14px; color:var(--color-bg-dark) }
.member.box .checkform li.element:first-child label { font-size: 1.6rem; font-weight: 700;}

.member.box .checkform li.element a {width:1.8rem; height:1.8rem; background: url(/public_html/images/icons/drop_black.svg) no-repeat center; transform: rotate(90deg);}

.member.box .buttons { display:flex; flex-flow: column; gap:.8rem; padding-top:4.8rem; }
.member.box .buttons input { display: inline-block; padding: 1.2rem 1.6rem; font-size: 1.6rem; line-height: 2rem; /* 125% */ letter-spacing: -0.32px; border-radius: .4rem;}

.member.box .logo { padding-top: 6rem; text-align: center;}
.member.box .logo p{ margin-top:.8rem; color: var(--gray-200, var(--color-text-light)); text-align: center; /* Head 02/400 */ font-size: 1.6rem; font-style: normal; font-weight: 400; line-height: 2rem; /* 125% */ letter-spacing: -0.32px }

.member.box h2 { color: var(--gray-600, var(--color-text-medium)); text-align: center; font-size: 1.6rem; font-style: normal; font-weight: 400; line-height: 2rem; /* 125% */ letter-spacing: -0.32px;}
.member.box .inputform li.message{  display:none;  padding: 0 0 16px 12px; color: var(--color-red-dark); font-size: 14px; font-weight: 400; line-height: 18px; letter-spacing: -.14px;}
.member.box .inputform { display:flex; flex-flow: column;}
.member.box .inputform li { font-size: 1.6rem; font-weight: 700; font-size: 1.6rem; line-height: 2rem; /* 125% */ letter-spacing: -0.32px; color:var(--color-bg-dark); padding-top:4rem;}
.member.box .inputform li.error { height:1.4rem; padding: .8rem; padding-bottom: 0 ;color: var(--primary-red-02, var(--color-red)); font-size: 1.2rem; font-style: normal; font-weight: 400; line-height: 1.4rem; /* 116.667% */ letter-spacing: -0.12px;}
.member.box .inputform li.element { position:relative;display: flex; flex-flow: column; gap:1.6rem; padding-top:.8rem;}
.member.box .inputform li.element.wrap { flex-flow: row wrap; padding-top:1.6rem; gap:6rem; row-gap: 2.4rem; padding-bottom:2.4rem}
.member.box .inputform li.element.wrap input[type="checkbox"] + label { font-size:1.6rem; font-style: normal; font-weight: 400; line-height: 20px}
.member.box .inputform li.element.wrap input[type="checkbox"] + label::before { padding-right: .8rem;}
.member.box .inputform li.buttons{ padding-top:4.8rem;}

.member.box .inputform li.element .select label{ display: flex; height:4.4rem; padding:0 1.2rem; font-size: 1.4rem; font-style: normal; font-weight: 400; line-height: 1.8rem; /* 128.571% */ letter-spacing: -0.14px;}

.member.box .inputform li #m_id { padding-right: 9.6rem;}
.member.box .inputform li #m_mobile { padding-right: 12.4rem;}
.member.box .inputform li .mBtn { position: absolute; top:1.6rem; right:.8rem; display:inline-block;width:max-content;  padding:.5rem 1.2rem; background: var(--color-bg-dark); font-size:1.4rem; font-weight: 400; line-height: 1.8rem; color:var(--color-text-white); border-radius: .4rem; letter-spacing: -0.14px; text-align: center;}
.member.box .inputform li .mBtn.off { background: var(--color-border-medium) ; color:var(--color-text-gray)}
.member.box .inputform li .mBtn.r { background : var(--color-red)}
.member.box .inputform li .mBtn.b2{ top:7.8rem}
.member.box .inputform li .mBtn#btn_citationCheck { display: none; top:13.8rem;}

.member.box .inputform li .citation_time { display:none; position: absolute; right: 9.2rem; color: var(--color-red-dark); top: 14.2rem; font-size: 1.2rem;}
.member.box .select ul li { padding-top:0}


.member.box .result p { margin-top:2.4rem;text-align: center; color: var(--color-text-medium) }
.member.box .result h2 { font-weight: 700; margin-bottom: .8rem;}
.member.box .result .resultbox{ display: flex; flex-flow: column; width: 100%;height: 80px;padding: 0 10px 0 12px;justify-content: center;align-items: center;gap: 16px;border-radius: 4px;border: 1px solid var(--gray-100, var(--color-border-light));background: var(--gray-50, var(--color-bg-light)); color: var(--gray-900, var(--color-bg-dark));text-align: center;/* Body 01/700 */font-size: 1.4rem;font-weight: 700;line-height: 1.8rem; /* 128.571% */letter-spacing: -0.14px;}
.member.box .result .resultbox span {  color: var(--gray-900, var(--color-text-medium));text-align: center;/* Body 01/700 */font-size: 1.4rem;font-weight: 400;line-height: 1.8rem; /* 128.571% */letter-spacing: -0.14px;}


.complete.box { padding-top:18rem; max-width: 48rem;margin:auto; gap:0; line-height: 2rem; letter-spacing: -0.32px; text-align: center;}
.complete.box img { height:2rem;}
.complete.box h1 { margin-top:2.4rem;color: var(--gray-900, var(--color-bg-dark)); text-align: center; font-size: 2.8rem; font-style: normal; font-weight: 400; line-height: 3.4rem; /* 121.429% */ letter-spacing: -0.56px;}
.complete.box .text { margin-top:.8rem; margin-bottom:4.8rem; color: var(--gray-600, var(--color-text-medium)); text-align: center; font-size: 1.6rem; font-style: normal; font-weight: 400; line-height: 2rem; /* 125% */ letter-spacing: -0.32px;}
.complete.box input { display: inline-block; padding: 1.2rem 1.6rem; font-size: 1.6rem; line-height: 2rem; /* 125% */ letter-spacing: -0.32px; border-radius: .4rem;}


.signBox {  width:100%; position:absolute; bottom:8rem; text-align: center; color: var(--gray-400, var(--color-text-gray)); /* caption 01/400 */ font-size: 1.2rem; font-style: normal; font-weight: 400; line-height: 1.4rem; /* 116.667% */ letter-spacing: -0.12px; }
.signBox span{ padding-left:1rem; color: var(--color-text-white);  font-size: 1.2rem; font-style: normal; font-weight: 400; line-height: 1.4rem; /* 116.667% */ letter-spacing: -0.12px;}
.signBox a{ padding-left:1rem; color: var(--color-text-white); text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: auto; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font;}
.signBox.b a { color: var(--color-text-medium)}

.login.box { padding-top:8rem; max-width: 48rem;margin:auto; line-height: 2rem; letter-spacing: -0.32px; text-align: center;}
.login.box .logo p{ margin-top:.8rem; color: var(--gray-200, var(--color-border-medium)); text-align: center; /* Head 02/400 */ font-size: 1.6rem; font-style: normal; font-weight: 400; line-height: 2rem; /* 125% */ letter-spacing: -0.32px }
.login.box form { display:flex; flex-flow: column; gap:1.6rem;}
.login.box form input { width:100%; padding:1.2rem; font-size: 1.6rem; line-height: 2rem; /* 125% */ letter-spacing: -0.32px; border-radius: .4rem;}
.login.box form .loginBtn{ display: inline-block; margin-top:.8rem; padding: 1.2rem 1.6rem; font-size: 1.6rem; line-height: 2rem; /* 125% */ letter-spacing: -0.32px; border-radius: .4rem;}
.login.box form div { display: flex; justify-content: space-between;}
.login.box form div input[type="checkbox"] + label { font-size:1.2rem; font-style: normal; font-weight: 400; line-height: 1.4rem; color:var(--color-text-white)}
.login.box form div input[type="checkbox"] + label::before { padding-right: .8rem;}
.login.box form div .findBtns { display:flex; color:var(--color-text-white);}
.login.box form div .findBtns a { color:var(--color-text-white);  text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: auto; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font;}
.login.box form div .findBtns a:last-child::before{ content:''; margin:0 1rem; display:inline-block;width:.1rem; height:.8rem; background: var(--color-text-medium);}

.profileCard.box { gap:1.6rem;}
.profileCard.box .info{ display:flex; gap:1.6rem;}
.profileCard.box .info img { width: 4.8rem;height: 4.8rem; border-radius: .4rem;}
.profileCard.box .info .profile { width:100%; display: flex; flex-flow: column; gap:.4rem; justify-content: center;}
.profileCard.box .info .profile div { width:100%; display: flex; justify-content: space-between; align-items: center;}
.profileCard.box .info .profile div h1 { color: var(--White, var(--color-text-white)); font-size: 1.8rem; font-style: normal; font-weight: 700; line-height: 2.2rem; /* 122.222% */ letter-spacing: -0.36px; } 
.profileCard.box .info .profile div a { color: var(--color-text-white); text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: auto; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font;} 
.profileCard.box .info .profile p { color: var(--gray-400, var(--color-text-gray)); font-size: 1.2rem; font-style: normal; font-weight: 400; line-height: 1.4rem; /* 116.667% */ letter-spacing: -0.12px; }

.profileCard.box .level { display: flex; justify-content: space-between; align-items: center;}
.profileCard.box .level h1{ color: var(--White, var(--color-text-white)); font-size: 1.6rem; font-style: normal; font-weight: 700; line-height: 2rem; /* 121.429% */ }
.profileCard.box .level h1 span{ color: var(--White, var(--color-text-white)); font-size: 1.6rem; font-style: normal; font-weight: 700; line-height: 2rem; /* 121.429% */ }
.profileCard.box .level .point{ display: flex; padding: 6px 12px; align-items: center; gap: 4px;  border-radius: 24px; background: #000;  color: var(--White, var(--color-text-white)); font-size: 1.4rem; font-style: normal; font-weight: 700; line-height: 1.8rem; /* 128.571% */ letter-spacing: -0.14px; }
.profileCard.box .level .point span { color: var(--gray-400, var(--color-text-gray)); font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; /* 128.571% */ letter-spacing: -0.14px; }

.profileNav { background: var(--color-bg-dark); overflow-x: scroll; scrollbar-width: none; -ms-overflow-style: none;}
.profileNav::-webkit-scrollbar { height: 0;  display: none;}
.profileNav ul { width: max-content; min-width: 48rem; padding: 0 .8rem;  display: flex; align-items: center;}
.profileNav ul li { width: max-content; padding: .9rem 1.6rem; border-bottom: 1px solid var(--color-bg-medium);}
.profileNav ul li a{ display: block; color: var(--White, var(--color-text-white)); text-align: center; /* Body 01/400 */ font-family: Pretendard; font-size: 1.4rem; font-style: normal; font-weight: 400; line-height: 1.8rem; /* 128.571% */ letter-spacing: -0.14px;}
.profileNav ul li.on { border-bottom: .2rem solid var(--color-primary);}
.profileNav ul li.on a { color:var(--color-primary) }

.profile.box .topBox{ display: flex; flex-flow: column; gap:.8rem}
.profile.box .topBox.row{ flex-flow: row; justify-content: space-between; align-items: center;}
.profile.box .inputform { display: flex ; flex-flow: row wrap; column-gap: .8rem; row-gap:2.4rem}
.profile.box .inputform li { display: flex; flex-flow: column; gap:.8rem; width: 100%;}
.profile.box .inputform li h2 { color: var(--gray-400, var(--color-text-gray)); font-size: 1.8rem; font-style: normal; font-weight: 400; line-height: 2.2rem; /* 122.222% */ letter-spacing: -0.36px; }
.profile.box .inputform .bmiBox { display: flex; padding: 1.6rem; justify-content: space-between; align-items: center; gap: 2.4rem; align-self: stretch; border-radius: 4px; background: var(--primary-blue, var(--color-blue)); } 
.profile.box .inputform .bmiBox span { color: var(--White, var(--color-text-white)); font-size: 1.6rem; font-weight: 700; line-height: 2rem; /* 125% */ letter-spacing: -0.32px; }
.profile.box .inputform .bmiBox span.bmiState {display: block; padding: 5px 12px;text-align: center; font-size: 1.4rem; line-height: 1.8rem; border-radius: 2.4rem; background: var(--color-blue-dark); }

.profile.box .inputform .bmiBox.underweight { background: var(--color-orange-light);}
.profile.box .inputform .bmiBox.overweight{ background: var(--color-orange-light);}
.profile.box .inputform .bmiBox.obesity{ background: var(--color-red-light);}
.profile.box .inputform .bmiBox.underweight span.bmiState{ background: var(--color-blue-orange);}
.profile.box .inputform .bmiBox.overweight span.bmiState{ background: var(--color-orange);}
.profile.box .inputform .bmiBox.obesity span.bmiState{ background: var(--color-red-dark);}

.profile.box .inputform li .select label{ display: flex; height:4.2rem; padding:0 1.2rem; font-size: 1.4rem; font-style: normal; font-weight: 400; line-height: 1.8rem; /* 128.571% */ letter-spacing: -0.14px;}

.profile.box .inputform li.small{ width: calc(33.33% - .55rem)} 

.profile.box .inputform li .levelTitle {display:flex; justify-content: space-between; align-items: center;}
.profile.box .inputform li .levelTitle .golf_grade {color: var(--White, #FFF);font-size: 1.4rem;font-weight: 400;line-height: 1.8rem; /* 128.571% */letter-spacing: -0.14px;}
.profile.box .inputform li .golf_level_gage {width:100%; height: 8px; flex-shrink: 0; background: var(--gray-600, #454C53);}
.profile.box .inputform li .golf_level_gage .gageBar{ height: 8px; flex-shrink: 0; background:#0FB;}

.profile.box .buttons { display:flex; flex-flow: column; gap:.8rem; padding-top:2.4rem}
.profile.box .buttons input { display: inline-block; padding: 1.2rem 1.6rem; font-size: 1.6rem; line-height: 2rem; /* 125% */ letter-spacing: -0.32px; border-radius: .4rem;}

.profile.box:last-child { padding-bottom: 12rem;}

.profile.box .guide {padding:1.6rem; background: var(--color-bg-medium); display: flex; flex-flow: column; gap: 1.6rem;}
.profile.box .guide h2{ color: var(--White, var(--color-text-white)); font-size: 1.8rem; font-weight: 400; line-height: 22px; /* 122.222% */ letter-spacing: -0.36px; }
.profile.box .guide ul {background: var(--color-bg-medium); display: flex; flex-flow: column; gap: .8rem;}
.profile.box .guide ul li{ color:var(--color-text-gray); display: flex; align-items: center; gap:.6rem}
.profile.box .guide ul li::before{content: ''; display: inline-block; width: .2rem; height: .2rem; border-radius: .2rem; background: var(--color-text-gray);}

.freind.box { gap:0}

.alarm.box { gap:0; padding-bottom: 12rem;}
.alarm.box > h1 { font-size: 1.8rem; font-weight: 700; line-height: 2.2rem; color: var(--color-text-white); letter-spacing: -0.36px; padding-bottom: 2.4rem;}
.alarm.box .alarm-category { padding: 0; margin-top: 3.2rem;}
.alarm.box .alarm-category:first-of-type { margin-top: 0;}
.alarm.box .alarm-category h2 { color: var(--color-text-gray); font-size: 1.8rem; font-weight: 400; line-height: 2.2rem; letter-spacing: -0.36px; margin-bottom: 1.2rem;}
.alarm.box .alarm-item { display: flex; flex-flow:row wrap; justify-content: space-between; row-gap:1.6rem;  padding: 2rem 1.6rem; background: var(--color-bg-medium); border-radius: .8rem; margin-bottom: .8rem;}
.alarm.box .alarm-item:last-child { margin-bottom: 0;}
.alarm.box .alarm-info { flex: 1; padding-right: 1.6rem;}
.alarm.box .alarm-info h3 { display: flex; align-items: center; gap:.8rem;  color: var(--color-text-white); font-size: 1.8rem; font-weight: 400; line-height: 2.2rem; letter-spacing: -0.36px; padding:.3rem 0 ; margin-bottom: .8rem;}
.alarm.box .alarm-info h3.mark01::after { content:'중요'; display: inline-flex;justify-content: center; align-items: center; width: 36px;height: 18px;border-radius: 24px; background: var( --color-red-light); color: var(--gray-900, #1B1D1F); text-align: center; font-size: 12px; font-weight: 700; line-height: 14px; /* 116.667% */ letter-spacing: -0.12px;}
.alarm.box .alarm-info h3.mark02::after { content:'혜택'; display: inline-flex;justify-content: center; align-items: center; width: 36px;height: 18px;border-radius: 24px; background: #D23EFF; color: var(--gray-900, #1B1D1F); text-align: center; font-size: 12px; font-weight: 700; line-height: 14px; /* 116.667% */ letter-spacing: -0.12px;}
.alarm.box .alarm-info p { color: var(--color-text-gray); font-size: 1.2rem; font-weight: 400; line-height: 1.4rem; letter-spacing: -0.12px;}

.alarm.box .alarm-times {width:100%; display:flex;gap: .8rem; padding-top:1.6rem; border-top: 1px solid var(--gray-600, #454C53); }
.alarm.box .alarm-times .alarm-ban {width: calc( 50% - .4rem) ;display: flex; flex-flow: column; gap:.8rem}
.alarm.box .alarm-times h3 { color: var(--color-text-gray); font-size: 1.8rem; font-weight: 400; line-height: 2.2rem; letter-spacing: -0.36px; padding:.3rem 0 ; margin-bottom: .8rem;}
.alarm.box .alarm-times .alarm-ban .select label { display: flex; height:4.2rem; padding:0 1.2rem; font-size: 1.4rem; font-style: normal; font-weight: 400; line-height: 1.8rem; /* 128.571% */ letter-spacing: -0.14px;}
.alarm.box .alarm-times .alarm-ban .select ul {height:10rem;}



/* === mypay.html 스타일 === */
/* 공통 article 스타일 */
.mypay.box { gap: 2.4rem;}
.mypay.box:last-child { padding-bottom: 12rem;}
.mypay.box > h1 { font-size: 1.8rem; font-weight: 700; line-height: 2.2rem; color: var(--color-text-white); letter-spacing: -0.36px;}

/* === 1. 결제 수단 섹션 === */
/* .mypay.payment-method { } */

/* 결제 수단 리스트 */
.mypay.box .payment-list { display: flex; flex-flow: column; gap: 1.6rem;}

/* 결제 수단 아이템 */
.mypay.box .payment-item { display: flex; justify-content: space-between; align-items: center; gap: .4rem;}
.mypay.box .payment-item label { display: flex; justify-content: space-between; align-items: center; width: 100%; cursor: pointer; border-bottom: 1px solid var(--color-text-medium); padding-bottom: 1.6rem;}

/* 라디오 버튼 (숨김) */
.mypay.box .payment-radio { display: none;}

/* 커스텀 라디오 아이콘 */
.mypay.box .radio-icon { display: inline-block; position: unset; transform: translateY(0%); width: 2.4rem; height: 2.4rem; background: url(/public_html/images/icons/radio_off.svg) no-repeat center; background-size: 2.4rem; flex-shrink: 0;}
.mypay.box .payment-radio:checked + label .radio-icon { background-image: url(/public_html/images/icons/radio_on.svg);}

/* 결제 정보 */
.mypay.box .payment-info { flex: 1; display: flex; flex-flow: column; gap: .4rem;}
.mypay.box .payment-info h3 { color: var(--color-text-white); font-size: 1.8rem; font-weight: 700; line-height: 2.2rem; letter-spacing: -0.36px;}
.mypay.box .payment-info p { color: var(--color-text-gray); font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; letter-spacing: -0.14px;}

/* 카드 번호 (dots) */
.mypay.box .card-number { display: flex; align-items: center; gap: 1rem;}
.mypay.box .card-number img { height: .4rem; width: 2.8rem;}
.mypay.box .card-number p { color: var(--color-text-gray); font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; letter-spacing: -0.14px;}

/* 편집 버튼 */
.mypay.box .btn-edit { padding: .5rem 1.2rem; background: var(--color-border-light); color: var(--color-bg-dark); border-radius: 2.4rem; font-size: 1.2rem; font-weight: 700; line-height: 1.4rem; letter-spacing: -0.12px; border: none; cursor: pointer;}

/* 새 결제 수단 추가 버튼 */
.mypay.box .payment-add { display: flex; align-items: center; justify-content: center; gap: .8rem; width: 100%; padding: 1.2rem 1.6rem; background: transparent; border: 1px dashed var(--color-text-gray); border-radius: .4rem; cursor: pointer;}
.mypay.box .payment-add img { width: 1.2rem; height: 1.2rem;}
.mypay.box .payment-add span { color: var(--color-text-white); font-size: 1.4rem; font-weight: 700; line-height: 1.8rem; letter-spacing: -0.14px; font-family: 'Pretendard', sans-serif;}

/* === 2. 구독 정보 섹션 === */
/* .mypay.subscription-section { } */

/* 구독 카드 */
.mypay.box .subscription-card { display: flex; flex-flow: column; gap: 1.6rem; padding: 1.6rem; background: linear-gradient(90deg, #0E74DA 0%, #610ECD 100%); border-radius: .4rem;}

.mypay.box .subscription-header { display: flex; justify-content: space-between; align-items: flex-start; gap: .4rem;}
.mypay.box .subscription-header h3 { color: var(--color-text-white); font-size: 1.8rem; font-weight: 700; line-height: 2.2rem; letter-spacing: -0.36px;}

.mypay.box .subscription-price { color: var(--color-text-white); font-size: 1.8rem; font-weight: 700; line-height: 2.2rem; letter-spacing: -0.36px; white-space: nowrap;}
.mypay.box .subscription-price .price-won { color: var(--color-text-white); font-size: 1.8rem; font-weight: 700; line-height: 2.2rem; letter-spacing: -0.36px; font-family: 'Pretendard', sans-serif;}
.mypay.box .subscription-price .price-period { color: var(--color-text-gray); font-size: 1.8rem; font-weight: 400; line-height: 2.2rem; letter-spacing: -0.36px; font-family: 'Pretendard', sans-serif;}

.mypay.box .subscription-next { color: var(--color-text-gray); font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; letter-spacing: -0.14px;}
.mypay.box .subscription-next .next-label { color: var(--color-text-gray); font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; letter-spacing: -0.14px; font-family: 'Pretendard', sans-serif;}

.mypay.box .btn-manage { width: max-content; padding: .5rem 1.2rem; background: rgba(255, 255, 255, 0.5); color: var(--color-bg-dark); border-radius: 2.4rem; font-size: 1.2rem; font-weight: 700; line-height: 1.4rem; letter-spacing: -0.12px; border: none; cursor: pointer;}

/* === 3. 결제 내역 섹션 === */
/* .mypay.payment-history-section { } */

/* 결제 내역 헤더 */
.mypay.box .payment-history-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.6rem;}
.mypay.box .payment-history-header h1 { color: var(--color-text-white); font-size: 1.8rem; font-weight: 700; line-height: 2.2rem; letter-spacing: -0.36px;}

.mypay.box .btn-view-all { padding: .7rem 1.2rem; background: transparent; border: 1px solid var(--color-text-gray); border-radius: 2.4rem; color: var(--color-text-gray); font-size: 1.2rem; font-weight: 400; line-height: 1.4rem; letter-spacing: -0.12px; cursor: pointer;}

/* 결제 내역 */
.mypay.box .payment-history { display: flex; flex-flow: column; gap: 1.6rem;}

.mypay.box .history-item { border-bottom: 1px solid var(--color-text-medium); padding-bottom: 1.6rem;}
.mypay.box .history-item:last-child { border-bottom: none;}

.mypay.box .history-content { display: flex; flex-flow: column; gap: .4rem;}

.mypay.box .history-title { display: flex; justify-content: space-between; align-items: flex-start; gap: .4rem;}
.mypay.box .history-name { color: var(--color-text-white); font-size: 1.8rem; font-weight: 400; line-height: 2.2rem; letter-spacing: -0.36px; flex: 1;}
.mypay.box .history-amount { color: var(--color-text-white); font-size: 1.8rem; font-weight: 700; line-height: 2.2rem; letter-spacing: -0.36px; white-space: nowrap;}
.mypay.box .history-amount .amount-won { color: var(--color-text-white); font-size: 1.8rem; font-weight: 700; line-height: 2.2rem; letter-spacing: -0.36px; font-family: 'Pretendard', sans-serif;}

.mypay.box .history-meta { display: flex; justify-content: space-between; align-items: center; gap: .4rem;}
.mypay.box .history-date { color: var(--color-text-gray); font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; letter-spacing: -0.14px; flex: 1;}
.mypay.box .history-status { color: var(--color-primary); font-size: 1.2rem; font-weight: 700; line-height: 1.4rem; letter-spacing: -0.12px; text-align: center; white-space: nowrap; font-family: 'Pretendard', sans-serif;}

.friends.box { gap:0; padding-bottom: 12rem;}
.friends.box > h1 { font-size: 1.8rem; font-weight: 700; line-height: 2.2rem; color: var(--color-text-white); letter-spacing: -0.36px; padding-bottom: .8rem;}

/* Friend Search */
.friends.box .friend-search { display: flex; gap: 1.6rem; align-items: center; margin-bottom: 2.4rem; border-bottom: 1px solid #E8EBED;}
.friends.box .friend-search input { flex: 1; padding: 1rem 0; background: transparent; border: none; border-bottom: 0; border-radius: 0; color: var(--color-text-white); font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; letter-spacing: -0.14px;}
.friends.box .friend-search input::placeholder { color: var(--color-text-gray);}
.friends.box .btn-search { padding: .5rem 1.2rem; background: #454C53; color: var(--color-text-white); border-radius: .4rem; font-size: 1.4rem; font-weight: 700; line-height: 1.8rem; letter-spacing: -0.14px; border: none; white-space: nowrap; cursor: pointer;}

/* Friend Tabs */
.friends.box .friend-tabs { display: flex; gap: .8rem; margin-top: 2.4rem; margin-bottom: 2.4rem;}
.friends.box .tab-btn { position: relative; padding: .8rem 1.2rem; background: transparent; border: .1rem solid #C9CDD2; border-radius: 2.4rem; color: var(--color-text-white); font-size: 1.2rem; font-weight: 700; line-height: 1.4rem; letter-spacing: -0.12px; cursor: pointer; white-space: nowrap; display: flex; align-items: center; gap: .4rem;}
.friends.box .tab-btn span { color: var(--color-text-white); font-size: 1.2rem; font-weight: 700; line-height: 1.4rem; letter-spacing: -0.12px; }
.friends.box .tab-btn.active { background: var(--color-text-white); border-color: var(--color-text-white); color: var(--color-bg-dark);}
.friends.box .tab-btn.active span { color: var(--color-text-dark); font-size: 1.2rem; font-weight: 700; line-height: 1.4rem; letter-spacing: -0.12px; }
.friends.box .tab-btn .badge { display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; background: #FA2C52; border-radius: 50%; color: var(--color-text-white); font-size: 1rem; font-weight: 700; line-height: 1;}

/* Tab Content Lists */
.friends.box .friend-list, .friends.box .group-list, .friends.box .request-list { display: flex; flex-direction: column; gap: 0;}

/* Friend Item */
.friends.box .friend-item { display: flex; align-items: center; justify-content: space-between; padding: 0 0 1.6rem 0; border-bottom: 1px solid #454C53; margin-bottom: 1.6rem; background: transparent; border-radius: 0; gap: 1.6rem;}
.friends.box .friend-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0;}
.friends.box .friend-info { flex: 1; display: flex; flex-direction: column; gap: .4rem;}
.friends.box .friend-info .name-row { display: flex; align-items: center; gap: .8rem;}
.friends.box .friend-info h3 { color: var(--color-text-white); font-size: 1.4rem; font-weight: 700; line-height: 1.8rem; letter-spacing: -0.14px; margin: 0;}
.friends.box .friend-info .status-indicator { display: flex; align-items: center; gap: .2rem;}
.friends.box .friend-info .status-indicator .status-dot { width: .4rem; height: .4rem; border-radius: 50%;}
.friends.box .friend-info .status-indicator.online .status-dot { background: #00E8AA;}
.friends.box .friend-info .status-indicator.offline .status-dot { background: #C9CDD2;}
.friends.box .friend-info .status-indicator.online .status-text { color: #00E8AA;}
.friends.box .friend-info .status-indicator.offline .status-text { color: #C9CDD2;}
.friends.box .friend-info .status-indicator .status-text { font-size: 1.2rem; font-weight: 400; line-height: 1.4rem; letter-spacing: -0.12px;}
.friends.box .friend-info p.sport-info { display: flex; align-items: center; gap: .4rem; color: #9EA4AA; font-size: 1.2rem; font-weight: 400; line-height: 1.4rem; letter-spacing: -0.12px; margin: 0;}
.friends.box .friend-info p.sport-info span { color: #9EA4AA;}
.friends.box .friend-info p.sport-info strong { font-weight: 700; color: var(--color-text-white);}
.friends.box .friend-info p.sport-info .divider { display: inline-block; width: .1rem; height: .8rem; background: #454C53; margin: 0;}
.friends.box .friend-actions { display: flex; gap: .8rem; align-items: center;}
.friends.box .btn-message { width: 3.6rem; height: 3.6rem; background: none; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;}
.friends.box .btn-message img { width: 100%; height: 100%;}
.friends.box .btn-more { width: 3.6rem; height: 3.6rem; background: none; border: none; color: var(--color-text-white); font-size: 2.4rem; line-height: 1; cursor: pointer; padding: 0; font-weight: 300; display: flex; align-items: center; justify-content: center;}

/* Group Item */
.friends.box .group-item { display: flex; flex-direction: column; gap: .8rem; padding: 0 0 1.6rem 0; border-bottom: 1px solid #454C53; margin-bottom: 1.6rem; background: transparent; border-radius: 0;}
.friends.box .group-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0;}
.friends.box .group-main { display: flex; align-items: flex-start; gap: 1.6rem; width: 100%;}
.friends.box .group-avatar { width: 4.8rem; height: 4.8rem; border-radius: .4rem; object-fit: cover; flex-shrink: 0;}
.friends.box .group-info { flex: 1; display: flex; flex-direction: column; gap: .4rem;}
.friends.box .group-info h3 { color: var(--color-text-white); font-size: 1.4rem; font-weight: 700; line-height: 1.8rem; letter-spacing: -0.14px; margin: 0;}
.friends.box .group-info .group-meta { display: flex; align-items: center; gap: .4rem; color: #9EA4AA; font-size: 1.2rem; font-weight: 400; line-height: 1.4rem; letter-spacing: -0.12px;}
.friends.box .group-info .group-meta span { color: #9EA4AA;}
.friends.box .group-info .group-meta strong { font-weight: 700; color: var(--color-text-white);}
.friends.box .group-info .group-meta .divider { display: inline-block; width: .1rem; height: 1.2rem; background: #9EA4AA; margin: 0;}
.friends.box .group-item .next-meeting { color: #FA2C52; font-size: 1.2rem; font-weight: 400; line-height: 1.4rem; letter-spacing: -0.12px; margin: 0;}

/* Request Item - Figma Design */
.friends.box .request-item { display: flex; align-items: center; justify-content: space-between; padding: 0 0 1.6rem 0; border-bottom: 1px solid #454C53; margin-bottom: 1.6rem; background: transparent; border-radius: 0; gap: 1.6rem;}
.friends.box .request-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0;}
.friends.box .request-info { flex: 1; display: flex; flex-direction: column; gap: .4rem;}
.friends.box .request-info h3 { color: var(--color-text-white); font-size: 1.4rem; font-weight: 700; line-height: 1.8rem; letter-spacing: -0.14px; margin: 0;}
.friends.box .request-info p.sport-info { display: flex; align-items: center; gap: .4rem; color: #9EA4AA; font-size: 1.2rem; font-weight: 400; line-height: 1.4rem; letter-spacing: -0.12px; margin: 0;}
.friends.box .request-info p.sport-info span { color: #9EA4AA;}
.friends.box .request-info p.sport-info strong { font-weight: 700; color: var(--color-text-white);}
.friends.box .request-info p.sport-info .divider { display: inline-block; width: .1rem; height: .8rem; background: #454C53; margin: 0;}
.friends.box .request-actions { display: flex; gap: .8rem; align-items: center;}
.friends.box .btn-reject { width: 3.6rem; height: 3.6rem; background: #393C41; color: var(--color-text-white); border-radius: 50%; font-size: 1.2rem; font-weight: 700; line-height: 1.4rem; letter-spacing: -0.12px; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;}
.friends.box .btn-accept { width: 3.6rem; height: 3.6rem; background: #0062C3; color: var(--color-text-white); border-radius: 50%; font-size: 1.2rem; font-weight: 700; line-height: 1.4rem; letter-spacing: -0.12px; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;}

/* LiveCheck - Figma Design */
.livecheck.box { display: flex; flex-direction: column;}
.livecheck.box:last-child { padding-bottom: 12rem;}

/* Info Section - 현장 인증 안내 */
.livecheck.box.info-section { padding: 0 1.6rem; gap: 0;}
.livecheck.box.info-section .info-card { padding: 1.6rem; background: #393C41; border-radius: .4rem; display: flex; flex-direction: column; gap: 1.6rem;}
.livecheck.box.info-section .info-card h1 { font-family: 'Pretendard', sans-serif; font-size: 1.8rem; font-weight: 400; line-height: 2.2rem; letter-spacing: -0.36px; color: #FFFFFF; margin: 0;}
.livecheck.box.info-section .info-description { font-family: 'Pretendard', sans-serif; font-size: 1.2rem; font-weight: 400; line-height: 1.4rem; letter-spacing: -0.12px; color: #9EA4AA; margin: 0;}

/* Competition Section - 참가 대회 목록 */
.livecheck.box.competition-section { padding: 2.4rem 1.6rem; gap: 2.4rem;}
.livecheck.box.competition-section > h1 { font-family: 'Pretendard', sans-serif; font-size: 1.8rem; font-weight: 700; line-height: 2.2rem; letter-spacing: -0.36px; color: #FFFFFF; margin: 0;}
.livecheck.box.competition-section .competition-list { display: flex; flex-direction: column; gap: 1.6rem;}

/* Competition Item */
.livecheck.box.competition-section .competition-item { border-bottom: .1rem solid #454C53; padding-bottom: 1.6rem; display: flex; flex-direction: column; gap: .4rem;}
.livecheck.box.competition-section .competition-item .item-header { display: flex; gap: .4rem; align-items: flex-start;}
.livecheck.box.competition-section .competition-item .item-title { font-family: 'Pretendard', sans-serif; font-size: 1.8rem; font-weight: 400; line-height: 2.2rem; letter-spacing: -0.36px; color: #FFFFFF; margin: 0; flex: 1;}
.livecheck.box.competition-section .competition-item .badge-confirmed { font-family: 'Pretendard', sans-serif; font-size: 1.2rem; font-weight: 700; line-height: 1.4rem; letter-spacing: -0.12px; color: #1B1D1F; background: #00E8AA; padding: .5rem 1.2rem; border-radius: 2.4rem; white-space: nowrap;}
.livecheck.box.competition-section .competition-item .badge-verifying { font-family: 'Pretendard', sans-serif; font-size: 1.2rem; font-weight: 700; line-height: 1.4rem; letter-spacing: -0.12px; color: #1B1D1F; background: #FFB800; padding: .5rem 1.2rem; border-radius: 2.4rem; white-space: nowrap;}
.livecheck.box.competition-section .competition-item .badge-paid { font-family: 'Pretendard', sans-serif; font-size: 1.2rem; font-weight: 700; line-height: 1.4rem; letter-spacing: -0.12px; color: #FFFFFF; background: #0E74DA; padding: .5rem 1.2rem; border-radius: 2.4rem; white-space: nowrap;}
.livecheck.box.competition-section .competition-item .badge-cancelled { font-family: 'Pretendard', sans-serif; font-size: 1.2rem; font-weight: 700; line-height: 1.4rem; letter-spacing: -0.12px; color: #FFFFFF; background: #9EA4AA; padding: .5rem 1.2rem; border-radius: 2.4rem; white-space: nowrap;}
.livecheck.box.competition-section .competition-item .badge-pending { font-family: 'Pretendard', sans-serif; font-size: 1.2rem; font-weight: 700; line-height: 1.4rem; letter-spacing: -0.12px; color: #FFFFFF; background: #757B82; padding: .5rem 1.2rem; border-radius: 2.4rem; white-space: nowrap;}

/* Competition Item Info */
.livecheck.box.competition-section .competition-item .item-info { display: flex; gap: .4rem; align-items: center;}
.livecheck.box.competition-section .competition-item .item-date { font-family: 'Pretendard', sans-serif; font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; letter-spacing: -0.14px; color: #C9CDD2; margin: 0; white-space: nowrap;}
.livecheck.box.competition-section .competition-item .divider { width: .1rem; height: .8rem; background: #454C53; flex-shrink: 0;}
.livecheck.box.competition-section .competition-item .item-status { font-family: 'Pretendard', sans-serif; font-size: 1.4rem; font-weight: 700; line-height: 1.8rem; letter-spacing: -0.14px; white-space: nowrap;}
.livecheck.box.competition-section .competition-item .item-status.paid { color: #FA2C52;}

/* Kiosk Section - 키오스크 인증번호 확인 */
.livecheck.box.kiosk-section { padding: 2.4rem 1.6rem 12rem; gap: 2.4rem;}
.livecheck.box.kiosk-section > h1 { font-family: 'Pretendard', sans-serif; font-size: 1.8rem; font-weight: 700; line-height: 2.2rem; letter-spacing: -0.36px; color: #FFFFFF; margin: 0;}
.livecheck.box.kiosk-section .kiosk-content { display: flex; flex-direction: column; gap: .8rem;}

/* Kiosk Card with Gradient */
.livecheck.box.kiosk-section .kiosk-card {width:100%; max-width: 36rem; margin: auto; padding: 1.6rem; background: linear-gradient(90deg, #0E74DA 0%, #610ECD 100%); border-radius: .4rem; display: flex; flex-direction: column; gap: 2.4rem;}
.livecheck.box.kiosk-section .kiosk-card .card-header { display: flex; flex-direction: column; gap: .4rem;}
.livecheck.box.kiosk-section .kiosk-card .card-title { font-family: 'Pretendard', sans-serif; font-size: 1.8rem; font-weight: 700; line-height: 2.2rem; letter-spacing: -0.36px; color: #FFFFFF; margin: 0; text-align: center;}
.livecheck.box.kiosk-section .kiosk-card .card-description { font-family: 'Pretendard', sans-serif; font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; letter-spacing: -0.14px; color: #C9CDD2; margin: 0; text-align: center;}

/* Digit Inputs */
.livecheck.box.kiosk-section .kiosk-card .digit-inputs { display: flex; gap: .8rem;}
.livecheck.box.kiosk-section .kiosk-card .digit-input { flex: 1; min-width: 0; height: 4.2rem; background: rgba(255, 255, 255, 0.5); border: none; border-radius: .4rem; font-family: 'Pretendard', sans-serif; font-size: 3.6rem; font-weight: 700; line-height: 4.4rem; letter-spacing: -0.72px; color: #FFFFFF; text-align: center; outline: none; padding: 0;}
.livecheck.box.kiosk-section .kiosk-card .digit-input::placeholder { color: rgba(255, 255, 255, 0.1);}

/* Confirm Button */
.livecheck.box.kiosk-section .kiosk-card .btn-confirm { width: 100%; padding: 1.2rem 1.6rem; background: #FFFFFF; color: #1B1D1F; border: none; border-radius: 4rem; font-family: 'Pretendard', sans-serif; font-size: 1.6rem; font-weight: 700; line-height: 2rem; letter-spacing: -0.32px; cursor: pointer; text-align: center; white-space: nowrap;}

/* Warning Message */
.livecheck.box.kiosk-section .warning-message { font-family: 'Pretendard', sans-serif; font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; letter-spacing: -0.14px; color: #FA2C52; margin: 0;}

/* Setting Page - New Design */
.setting.box { display: flex; flex-direction: column; gap: 2.4rem;}
.setting.box > h1 { font-size: 1.8rem; font-weight: 700; line-height: 2.2rem; color: var(--color-text-white); letter-spacing: -0.036rem; margin-bottom: 0;}
.setting.box.privacy-setting { padding-bottom: 12rem;}
/* Setting Item */
.setting.box .setting-item { display: flex; gap: .4rem; align-items: center; justify-content: space-between; padding-bottom: 1.6rem; border-bottom: .1rem solid #454C53;}
.setting.box .setting-item:last-child { border-bottom: none; padding-bottom: 0;}

/* Setting Info */
.setting.box .setting-info { display: flex; flex-direction: column; gap: .4rem; flex: 1;}
.setting.box .setting-info h3 { font-size: 1.8rem; font-weight: 700; line-height: 2.2rem; color: var(--color-text-white); letter-spacing: -0.036rem; margin: 0;}
.setting.box .setting-info p { font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; color: #C9CDD2; letter-spacing: -0.014rem; margin: 0;}

/* Language Select */
.setting.box .language-select { width: 11.2rem; height: 4.2rem; padding: 1.4rem 0 1.4rem 1.6rem; background: #F7F8F9; border: none; border-radius: .4rem; position: relative;}
.setting.box .language-select label { padding: 0; margin: 0; color: #1B1D1F; font-size: 1.6rem; font-weight: 700; line-height: 2rem; letter-spacing: -0.032rem; display: flex; align-items: center; height: 100%;}
.setting.box .language-select label::after { content: ''; width: 3.6rem; height: 3.6rem; background: url(/public_html/images/icons/drop_black.svg) no-repeat center; background-size: contain;}
.setting.box .language-select ul { top: 4.6rem; background: #F7F8F9; border: none; border-radius: .4rem; box-shadow: 0 .4rem .8rem rgba(0, 0, 0, 0.1);}
.setting.box .language-select ul li { color: #1B1D1F; font-size: 1.6rem; font-weight: 400; line-height: 2rem;}
.setting.box .language-select ul li:hover { background: #E8EAED;}

/* Toggle Wrapper */
.setting.box .toggle-wrapper { display: flex; align-items: center; justify-content: center; width: 6rem; height: 2.8rem;}

/* Account Management Buttons */
.setting.box .button-group { display: flex; gap: .8rem; width: 100%; }
.setting.box .btn-account { flex: 1; padding: .9rem 2.4rem; background: #393C41; color: #9EA4AA; border: none; border-radius: 4rem; font-size: 1.4rem; font-weight: 700; line-height: 1.8rem; letter-spacing: -0.014rem; cursor: pointer; text-align: center; white-space: nowrap;}
.setting.box .btn-account.btn-deactivate { font-weight: 700;}
.setting.box .btn-account.btn-delete { font-weight: 400;}
.setting.box .btn-account:hover { opacity: 0.8;}
.setting.box .btn-account:active { opacity: 0.6;}

/* Competitions Page */
.competitions.box { padding: 2.4rem 1.6rem 12rem; background: var(--color-text-white); gap:0;}
.competitions.box .topBox { display: flex; flex-direction: column; gap: 2.4rem; margin-bottom: 2.4rem;}
.competitions.box .topBox h1 { color: #1B1D1F; font-size: 2.4rem; font-weight: 700; line-height: 2.8rem; letter-spacing: -0.48px;}
.competitions.box .topBox .infoBox { padding: 1.6rem; background: #E3F1FF; border-radius: .8rem; display: flex; flex-direction: column; gap: .4rem;}
.competitions.box .topBox .infoBox .infoTitle { color: #1B1D1F; font-size: 1.6rem; font-weight: 700; line-height: 2rem; letter-spacing: -0.32px;}
.competitions.box .topBox .infoBox .infoDesc { color: #72787F; font-size: 1.6rem; font-weight: 400; line-height: 2rem; letter-spacing: -0.32px;}

/* Search Area */
.competitions.box .searchArea { display: flex; flex-direction: column; gap: .8rem; margin-bottom: 1.6rem;}
.competitions.box .searchArea h2 { color: #1B1D1F; font-size: 1.4rem; font-weight: 700; line-height: 1.8rem; letter-spacing: -0.14px;}
.competitions.box .searchArea .searchInputWrapper { position: relative; width: 100%;}
.competitions.box .searchArea .searchInput { width: 100%; padding: 1.2rem; padding-right: 4rem; background: var(--color-text-white); border-radius: .4rem; border: 1px solid #1B1D1F; color: #1B1D1F; font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; letter-spacing: -0.14px;}
.competitions.box .searchArea .searchInput::placeholder { color: #72787F;}
.competitions.box .searchArea .searchIcon { position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%); width: 2.4rem; height: 2.4rem; pointer-events: none;}

/* Filter Row */
.competitions.box .searchArea .filterRow { display: flex; gap: .8rem; padding: 1.6rem 0;}
.competitions.box .searchArea .filterRow .select { position: relative; width: calc(50% - .4rem); padding: 1.2rem; padding-right:0; background: #F7F8F9; border: 1px solid #E8EBED; border-radius: .4rem; height: 4.4rem; display: flex; align-items: center;}
.competitions.box .searchArea .filterRow .select label { padding: 0; margin: 0; color: #1B1D1F; font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; letter-spacing: -0.14px; display: flex; justify-content: space-between; align-items: center; width: 100%; cursor: pointer;}
.competitions.box .searchArea .filterRow .select label::after { content: ''; display: inline-block; width: 3.6rem; height: 3.6rem; background: url(/public_html/images/icons/drop_black.svg) no-repeat center; background-size: 3.6rem;}
.competitions.box .searchArea .filterRow .select ul { position: absolute; top: 4.8rem; left: 0; width: 100%; background: var(--color-text-white); border: 1px solid #E8EBED; border-radius: .4rem; display: none; z-index: 10; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);}
.competitions.box .searchArea .filterRow .select.active ul{display: block; top:4.2rem;}
.competitions.box .searchArea .filterRow .select ul li { padding: 1.2rem; color: #1B1D1F; font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; cursor: pointer;}
.competitions.box .searchArea .filterRow .select ul li:hover { background: #F3F4F6;}

/* Competition List */
.competitions.box .competitionList { display: flex; flex-direction: column;  padding-top: 2.4rem;}
.competitions.box .competitionList .listHeader { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2.4rem;}
.competitions.box .competitionList .listHeader h2 { color: #1B1D1F; font-size: 1.8rem; font-weight: 700; line-height: 2.2rem; letter-spacing: -0.36px;}
.competitions.box .competitionList .listHeader .filterBtn { width: 2.4rem; height: 2.4rem; background: none; border: none; padding: 0; cursor: pointer;}
.competitions.box .competitionList .listHeader .filterBtn img { width: 100%; height: 100%;}

/* Competition Cards */
.competitions.box .compCards { display: flex; flex-direction: column; gap: 1.6rem;}
.competitions.box .compCard { padding: 1.6rem; background: var(--color-text-white); border: 1px solid #E8EBED; border-radius: .4rem; display: flex; flex-direction: column; gap: 2.4rem;}

/* Competition Card Header */
.competitions.box .compCard .compHeader { display: flex; align-items: center; gap: 1rem; position: relative;}
.competitions.box .compCard .compHeader .sportBadge { padding: .5rem 0em; font-size: 1.2rem; font-weight: 700; line-height: 1.4rem; border-radius: 2.4rem; color: #1B1D1F; width: 4.8rem; text-align: center;}
.competitions.box .compCard .compHeader .sportBadge.golf { background: #00E8AA; color: #1B1D1F;}
.competitions.box .compCard .compHeader .sportBadge.taekwondo { background: #A83EFF; color: var(--color-text-white);}
.competitions.box .compCard .compHeader .sportBadge.basketball { background: #CB6B16; color: var(--color-text-white);}
.competitions.box .compCard .compHeader .compDate { flex: 1; color: #454C53; font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; letter-spacing: -0.14px;}
.competitions.box .compCard .compHeader .starBtn { width: 2.4rem; height: 2.4rem; background: url(/public_html/images/icons/bookMark_off.svg) no-repeat center; border: none; padding: 0; cursor: pointer;}
.competitions.box .compCard .compHeader .starBtn.active{ background: url(/public_html/images/icons/bookMark_on.svg) no-repeat center;  }

/* Competition Card Title & Venue */
.competitions.box .compCard .compTitle { color: #1B1D1F; font-size: 1.8rem; font-weight: 700; line-height: 2.2rem; letter-spacing: -0.36px; margin: 0 0 .8rem 0;}
.competitions.box .compCard .compVenue { color: #454C53; font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; letter-spacing: -0.14px; margin: 0; display: flex; align-items: center;}
.competitions.box .compCard .compVenue::before { content: ''; display: inline-block; width: 1.8rem; height: 1.8rem; background: url(/public_html/images/icons/map_pin.svg) no-repeat center; background-size: contain; margin-right: .4rem;}

/* Competition Info List */
.competitions.box .compCard .compInfo { display: flex; flex-direction: column; gap: .8rem; margin: 0; padding: 0; list-style: none;}
.competitions.box .compCard .compInfo li { display: flex; justify-content: space-between; align-items: flex-start; gap: .4rem;}
.competitions.box .compCard .compInfo .infoLabel { color: #454C53; font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; letter-spacing: -0.14px; flex-shrink: 0;}
.competitions.box .compCard .compInfo .infoValue { color: #1B1D1F; font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; letter-spacing: -0.14px; text-align: right;}

/* Competition Detail Page */
.competition-detail.box { padding: 0; background: var(--color-text-white); gap:0; margin-bottom: 0;}


/* Competition Detail Header */
.competition-detail.box .compDetailHeader { display: flex; flex-direction: column; gap: .8rem;  padding: 2.4rem 1.6rem}
.competition-detail.box .compDetailHeader .hotBadge { display: inline-block; padding: .3rem .6rem; background: #FA2C52; color: var(--color-text-white); font-size: 1rem; font-weight: 900; line-height: 1.2rem; border-radius: 0; width: fit-content;}
.competition-detail.box .compDetailHeader .compDetailTitle { color: #1B1D1F; font-size: 2.8rem; font-weight: 900; line-height: 3.4rem; letter-spacing: 0; margin: 0; min-width: 100%;}
.competition-detail.box .compDetailHeader .compDetailMeta { display: flex; flex-direction: column; gap: .4rem;}
.competition-detail.box .compDetailHeader .metaItem { display: flex; align-items: center; gap: .4rem; color: #454C53; font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; letter-spacing: -0.14px;}
.competition-detail.box .compDetailHeader .metaItem img { width: 1.8rem; height: 1.8rem;}

/* Application Status Card */
.competition-detail.box .applicationStatus { margin:0 1.6rem; padding: 1.6rem; background: var(--color-text-white); border: 1px solid #E8EBED; border-radius: .4rem;}
.competition-detail.box .applicationStatus h2 { color: #1B1D1F; font-size: 1.8rem; font-weight: 700; line-height: 2.2rem; letter-spacing: -0.36px; margin-bottom: 1.6rem;}
.competition-detail.box .applicationStatus .statusInfo { display: flex; flex-direction: column; gap: .8rem; margin-bottom: 2.4rem;}
.competition-detail.box .applicationStatus .statusRow { display: flex; justify-content: space-between; align-items: flex-start; gap: .4rem;}
.competition-detail.box .applicationStatus .statusLabel { color: #454C53; font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; letter-spacing: -0.14px; flex: 0 0 auto;}
.competition-detail.box .applicationStatus .statusValue { color: #1B1D1F; font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; letter-spacing: -0.14px; text-align: right;}
.competition-detail.box .applicationStatus .statusValue span { color: #1B1D1F; font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; letter-spacing: -0.14px; text-align: right;}
.competition-detail.box .applicationStatus .progressBar { width: 100%; height: .8rem; background: #E8EBED; border-radius: 2.4rem; overflow: hidden; margin-bottom: .8rem; position: relative;}
.competition-detail.box .applicationStatus .progressFill { height: 100%; background: #C00023; border-radius: 2.4rem;}
.competition-detail.box .applicationStatus .progressText { color: #1B1D1F; font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; letter-spacing: -0.14px;}
.competition-detail.box .applicationStatus .progressText span { color: #1B1D1F; font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; letter-spacing: -0.14px;}
.competition-detail.box .applicationStatus .progressText .progressCount { color: #9EA4AA; font-weight: 400; float:right;}

/* Competition Tabs */
.competition-detail.box .compTabs { display: flex; gap: .8rem; padding:0 1.6rem; padding-top: 4rem; margin-bottom: 0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;}
.competition-detail.box .compTabs::-webkit-scrollbar { display: none;}
.competition-detail.box .compTabs .compTab { padding: .9rem 1.6rem; background: var(--color-text-white); border: 1px solid #C9CDD2; border-radius: 2.4rem; color: #1B1D1F; font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; letter-spacing: -0.14px; white-space: nowrap; cursor: pointer;}
.competition-detail.box .compTabs .compTab.active { background: #1B1D1F; color: var(--color-text-white); border-color: #1B1D1F; font-weight: 700;}

/* Competition Section */
.competition-detail.box .compSection { padding: 2.4rem 1.6rem; margin-bottom: 0;}
.competition-detail.box .compSection .sectionTitle { color: #1B1D1F; font-size: 1.8rem; font-weight: 700; line-height: 2.2rem; letter-spacing: -0.36px; margin-bottom: 2.4rem;}

/* Info Grid */
.competition-detail.box .infoGrid { display: flex; flex-direction: column; gap: 2.4rem;}
.competition-detail.box .infoGrid .infoRow { display: flex; justify-content: space-between; align-items: flex-start; gap: .4rem;}
.competition-detail.box .infoGrid .infoRow:last-child { border-bottom: none; padding-bottom: 0;}
.competition-detail.box .infoGrid .infoLabel { color: #72787F; font-size: 1.6rem; font-weight: 400; line-height: 2rem; letter-spacing: -0.32px; flex: 0 0 auto;}
.competition-detail.box .infoGrid .infoValue { color: #1B1D1F; font-size: 1.6rem; font-weight: 400; line-height: 2rem; letter-spacing: -0.32px; text-align: right;}
.competition-detail.box .infoGrid .infoValue span  { color: #1B1D1F; font-size: 1.6rem; font-weight: 400; line-height: 2rem; letter-spacing: -0.32px; text-align: right;}
.competition-detail.box .infoGrid .infoValue.prize { color: #C00023; font-weight: 700;}
.competition-detail.box .infoGrid .infoValue.prize span { color: #C00023; font-weight: 700;}

/* Section Content */
.competition-detail.box .sectionContent { display: flex; flex-direction: column; gap: 2.4rem;}
.competition-detail.box .sectionContent p { color: #72787F; font-size: 1.6rem; font-weight: 400; line-height: 2rem; letter-spacing: -0.32px; margin-bottom: 0;}

/* Schedule Section */
.competition-detail.box .scheduleList { display: flex; flex-direction: column; gap: 2.4rem;}
.competition-detail.box .scheduleDay { display: flex; flex-direction: column; gap: .8rem; padding-bottom: 1.6rem; border-bottom: 1px solid #E8EBED;}
.competition-detail.box .scheduleDay:last-child { border-bottom: none; padding-bottom: 0;}
.competition-detail.box .scheduleDate { color: #0062C3; font-size: 1.4rem; font-weight: 700; line-height: 1.8rem; letter-spacing: -0.14px; margin-bottom: .8rem;}
.competition-detail.box .scheduleItem { display: flex; gap: .4rem;}
.competition-detail.box .scheduleTime { color: #454C53; font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; letter-spacing: -0.14px; flex: 1 0 auto; margin-bottom: 0;}
.competition-detail.box .scheduleEvent { color: #1B1D1F; font-size: 1.4rem; font-weight: 700; line-height: 1.8rem; letter-spacing: -0.14px; white-space: pre; margin-bottom: 0;}

/* Venue Section */
.competition-detail.box .venueMap { width: 100%; height: 18rem; background: #F7F8F9; border-radius: .4rem; margin-bottom: 2.4rem;}
.competition-detail.box .venueDetails { display: flex; flex-direction: column; gap: 1.6rem;}
.competition-detail.box .venueName { color: #1B1D1F; font-size: 1.6rem; font-weight: 700; line-height: 2rem; letter-spacing: -0.32px; margin-bottom: 0;}
.competition-detail.box .venueInfoList { display: flex; flex-direction: column; gap: .8rem;}
.competition-detail.box .venueInfoItem { display: flex; gap: .8rem; align-items: center;}
.competition-detail.box .venueInfoItem img { width: 1.6rem; height: 1.6rem; flex-shrink: 0;}
.competition-detail.box .venueInfoItem p { color: #1B1D1F; font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; letter-spacing: -0.14px; margin-bottom: 0; flex: 1;}

/* ========== Custom Extensions ========== */
/* Venue Info - Link Style */
.competition-detail.box .venueInfoItem a { color: #007bff; text-decoration: underline;}

/* Venue Courses Section */
.competition-detail.box .venueCourses { margin-top: 3rem;}
.competition-detail.box .venueCourses h3 { font-size: 2rem; font-weight: 700; margin-bottom: 1.5rem; color: #333;}
.competition-detail.box .courseList { display: grid; gap: 2rem;}
.competition-detail.box .courseItem { border: 1px solid #e0e0e0; border-radius: .8rem; padding: 2rem; background: #fafafa;}
.competition-detail.box .courseItem .courseContent { display: flex; flex-flow: row wrap; align-items: flex-start; gap: 2rem;}
.competition-detail.box .courseItem .courseImageWrap {width: 100%;}
.competition-detail.box .courseItem .courseImageWrap img { width: 100%; object-fit: cover; border-radius: .6rem;}
.competition-detail.box .courseItem .courseInfo { width: 100%;}
.competition-detail.box .courseItem .courseName { font-size: 1.8rem; font-weight: 700; margin-bottom: 1rem; color: #0066cc;}
.competition-detail.box .courseItem .courseNameEN { font-size: 1.4rem; color: #666; font-weight: 400; margin-left: .8rem;}
.competition-detail.box .courseItem .courseExplain {width:100%;  line-height: 1.6; color: #555; white-space: pre-line; margin-bottom: 0;}

/* Empty Message */
.competition-detail.box .emptyMessage { text-align: center; padding: 4rem; color: #999;}

/* Application Section - Text Variants */
.competition-detail.box .applicationSection .noticeText.textError { color: #EF4444;}

/* Record Status - Message Variants */
.competition-detail.box .myRecordStatus .statusCardMessage.textGray { color: #666;}
.competition-detail.box .myRecordStatus .statusCardMessage.textLightGray { color: #999;}
/* ========== End Custom Extensions ========== */

/* Participants Section */
.competition-detail.box .participantsStats { display: flex; gap: .8rem; margin-bottom: 2.4rem;}
.competition-detail.box .statBox { border-radius: .4rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;}
.competition-detail.box .statTotal { width: 16rem; height: 16rem; background: #E1F0FF;}
.competition-detail.box .statBoxColumn { display: flex; flex-direction: column; gap: .8rem;}
.competition-detail.box .statTeam { width: 16rem; height: 7.6rem; background: #E1FFF2; flex-direction: row; padding: 0 1.6rem; justify-content: space-between;}
.competition-detail.box .statRemaining { width: 16rem; height: 7.6rem; background: #FFE1E1; flex-direction: row; padding: 0 1.6rem; justify-content: space-between;}
.competition-detail.box .statNumber { color: #1B1D1F; font-size: 2.8rem; font-weight: 900; line-height: 3.4rem; margin-bottom: 0;}
.competition-detail.box .statTotal .statLabel { color: #1B1D1F; font-size: 1.6rem; font-weight: 400; line-height: 2rem; letter-spacing: -0.32px; margin-bottom: 0;}
.competition-detail.box .statTeam .statLabel, .competition-detail.box .statRemaining .statLabel { color: #1B1D1F; font-size: 1.6rem; font-weight: 400; line-height: 2rem; letter-spacing: -0.32px; margin-bottom: 0;}
.competition-detail.box .participantsRegion { display: flex; flex-direction: column; gap: 1.6rem;}
.competition-detail.box .regionTitle { color: #1B1D1F; font-size: 1.4rem; font-weight: 700; line-height: 1.8rem; letter-spacing: -0.14px; margin-bottom: 0;}
.competition-detail.box .regionList { display: flex; flex-direction: column; gap: .8rem;}
.competition-detail.box .regionItem { display: flex; gap: .4rem;}
.competition-detail.box .regionLabel { color: #454C53; font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; letter-spacing: -0.14px; flex: 1; margin-bottom: 0;}
.competition-detail.box .regionValue { color: #1B1D1F; font-size: 1.4rem; font-weight: 700; line-height: 1.8rem; letter-spacing: -0.14px; white-space: pre; margin-bottom: 0;}

/* Rules Section */
.competition-detail.box .rulesContent { display: flex; flex-direction: column; gap: 2.4rem;}
.competition-detail.box .ruleSection { display: flex; flex-direction: column; gap: 1.6rem; padding-bottom: 1.6rem; border-bottom: 1px solid #E8EBED;}
.competition-detail.box .ruleSection:last-child { border-bottom: none; padding-bottom: 0;}
.competition-detail.box .ruleTitle { color: #1B1D1F; font-size: 1.6rem; font-weight: 700; line-height: 2rem; letter-spacing: -0.32px; margin-bottom: 0;}
.competition-detail.box .ruleList { display: flex; flex-direction: column; gap: .8rem;}
.competition-detail.box .ruleItem { display: flex; gap: .4rem; align-items: center;}
.competition-detail.box .ruleItem img { width: 1.6rem; height: 1.6rem; flex-shrink: 0;}
.competition-detail.box .ruleItem p { color: #1B1D1F; font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; letter-spacing: -0.14px; margin-bottom: 0; flex: 1;}

/* Application Section */
/* .competition-detail.box .applicationSection {} */
.competition-detail.box .applicationSection .deadlineNotice { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.6rem; border: 1px solid #E8EBED; border-radius: .4rem; margin-bottom: 2.4rem; text-align: center;}
.competition-detail.box .applicationSection .deadlineNotice img { width: 4.8rem; height: 4.8rem; margin-bottom: 1.6rem;}
.competition-detail.box .applicationSection .noticeText { color: #0062C3; font-size: 1.6rem; font-weight: 400; line-height: 2rem; letter-spacing: -0.32px; margin-bottom: .4rem;}
.competition-detail.box .applicationSection .noticeHighlight { color: #1B1D1F; font-size: 1.6rem; font-weight: 700; line-height: 2rem; letter-spacing: -0.32px;}

/* Application Buttons */
.competition-detail.box .applicationButtons { display: flex; flex-direction: column; gap: .8rem;}
.competition-detail.box .btn { margin:0; padding: 1.2rem 2.4rem; border: none; border-radius: 4rem; font-size: 1.6rem; font-weight: 700; line-height: 2rem; letter-spacing: -0.32px; cursor: pointer; text-align: center;}
.competition-detail.box .btnLarge { width: 100%;}
.competition-detail.box .btnPrimary { background: #00E8AA; color: #1B1D1F;}
.competition-detail.box .btnSecondary { background: #E8EBED; color: #1B1D1F; font-weight: 400;}

/* Tag List */
.competition-detail.box .tagList { display: flex; flex-wrap: wrap; gap: .8rem;}
.competition-detail.box .infoTag { padding: .9rem 1.6rem; background: var(--color-text-white); border: 1px solid #C9CDD2; border-radius: 2.4rem; color: #1B1D1F; font-size: 1.4rem; font-weight: 700; line-height: 1.8rem; letter-spacing: -0.14px;}

/* Divider (outside article) */
.divider { width: 100%; height: .8rem; background: #F7F8F9; margin: 0;}

/* Competition Footer (outside article) */
.competition-footer { padding: 2.4rem 1.6rem 4rem; background: #F7F8F9; border-top: 1px solid #E8EBED; margin: 0; width: 100%;}
.competition-footer .footerLinks { display: flex; align-items: center; gap: .8rem; margin-bottom: 2.4rem;}
.competition-footer .footerLinks a { color: #454C53; font-size: 1.2rem; font-weight: 400; line-height: 1.4rem; letter-spacing: -0.12px;}
.competition-footer .footerLinks .dividerLine { width: 1px; height: 1rem; background: #9EA4AA;}
.competition-footer .footerCopyright { color: #9EA4AA; font-size: 1.2rem; font-weight: 400; line-height: 1.4rem; letter-spacing: -0.12px;}

/* Certification Page Styles */
.certHeader { background: #1B1D1F; padding: 2.4rem 1.6rem; display: flex; flex-direction: column; gap: 2.4rem; margin-bottom: 0;}
.certHeaderContent { display: flex; flex-direction: column; gap: .8rem; align-items: center; justify-content: center;}
.certHeader .certHeaderTitle { color: #FFFFFF; font-size: 2.4rem; font-weight: 700; line-height: 2.8rem; letter-spacing: -0.48px; margin: 0; width: 100%;}
.certHeader .certHeaderDesc { color: #C9CDD2; font-size: 1.6rem; font-weight: 400; line-height: 2rem; letter-spacing: -0.32px; margin: 0; width: 100%;}

/* Certification Competition Card */
.certCompCard { background: #393C41; padding: 1.6rem; margin: 0; border-radius: .8rem; display: flex; flex-direction: column; gap: .8rem;}
.certCompBadges { display: flex; gap: .4rem; align-items: center;}
.certBadgeSport { background: #FA2C52; color: #FFFFFF; font-size: 1rem; font-weight: 900; line-height: 1.2rem; padding: .3rem .6rem; text-align: center;}
.certBadgeStatus { background: #000000; color: #FFFFFF; font-size: 1rem; font-weight: 900; line-height: 1.2rem; padding: .3rem .6rem; text-align: center;}
.certCompTitle { color: #FFFFFF; font-size: 2.8rem; font-weight: 900; line-height: 3.4rem; margin: 0;}
.certCompInfo { display: flex; flex-direction: column; gap: .4rem;}
.certCompInfoItem { display: flex; gap: .4rem; align-items: flex-start;}
.certCompInfoItem img { width: 1.8rem; height: 1.8rem; flex-shrink: 0;}
.certCompInfoItem p { color: #C9CDD2; font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; letter-spacing: -0.14px; margin: 0;}

/* Certification Info Section */
.certInfoHeader { display: flex; gap: 1rem; align-items: center; justify-content: center; margin-bottom: 2.4rem;}
.certMedalIcon { font-size: 2.4rem; line-height: 2.4rem; width: 2.4rem; height: 2.4rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
.certInfoTitle { color: #1B1D1F; font-size: 1.8rem; font-weight: 700; line-height: 2.2rem; letter-spacing: -0.36px; margin: 0; flex: 1;}
.certInfoList { display: flex; flex-direction: column; gap: 1.6rem;}
.certInfoList p { color: #454C53; font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; letter-spacing: -0.14px; margin: 0;}

/* Certification Category Selection */
.certCategoryHeader { display: flex;  flex-flow:column; justify-content: center; margin-bottom: 2.4rem;}
.certCategoryList { display: flex; flex-direction: column; gap: .8rem; margin-bottom: .8rem;}
.certCategoryList input[type="radio"] { display: none;}
.certCategoryList input[type="radio"] + label.certCategoryItem { display: flex; align-items: center; gap: .8rem; padding: 1.6rem 1.2rem 1.6rem 1.2rem; border: 1px solid #E8EBED; border-radius: .4rem; cursor: pointer; min-height: 4.8rem;}
.certCategoryList input[type="radio"] + label.certCategoryItem span { width: 2.4rem; height: 2.4rem; background: url(/public_html/images/icons/radio_off.svg) no-repeat center; background-size: 2.4rem; flex-shrink: 0;}
.certCategoryList input[type="radio"]:checked + label.certCategoryItem span { background: url(/public_html/images/icons/radio_on.svg) no-repeat center; background-size: 2.4rem;}
.certCategoryList .certCategoryLabel { color: #1B1D1F; font-size: 1.8rem; font-weight: 700; line-height: 2.2rem; letter-spacing: -0.36px; margin: 0; flex-shrink: 0;}
.certCategoryList .certCategoryDesc { color: #1B1D1F; font-size: 1.6rem; font-weight: 400; line-height: 2rem; letter-spacing: -0.32px; margin: 0; flex: 1; text-align: right;}
.certCategoryNotice { color: #FA2C52; font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; letter-spacing: -0.14px; margin: 0;}

/* Certification Action Section */
.certActionSection { padding-bottom: 12rem;}
.certActionSection .compSection { display: flex; flex-direction: column; gap: .8rem;}
.btnCertPrimary { background: #00E8AA; color: #1B1D1F; font-size: 1.6rem; font-weight: 700; line-height: 2rem; letter-spacing: -0.32px; padding: 1.2rem 2.4rem; border: none; border-radius: 4rem; cursor: pointer; text-align: center; margin: 0; width: 100%;}
.btnCertSecondary { background: #E8EBED; color: #1B1D1F; font-size: 1.6rem; font-weight: 400; line-height: 2rem; letter-spacing: -0.32px; padding: 1.2rem 2.4rem; border: none; border-radius: 4rem; cursor: pointer; text-align: center; margin: 0; width: 100%;}
.btnCertLarge { width: 100%;}
.certSpacer { height: 1.6rem; width: 100%;}

/* Competition Join Page */
.competition-join.box { padding-bottom: 12rem; background: var(--color-text-white); gap:0}

/* Join Header */
.competition-join.box .joinHeader { padding: 3.2rem 0 2.4rem 0; background: var(--color-bg-dark); margin: -2.4rem -1.6rem 2.4rem -1.6rem; padding-left: 1.6rem; padding-right: 1.6rem;}
.competition-join.box .joinHeader .joinTitle { color: var(--color-text-white); font-size: 2.4rem; font-weight: 700; line-height: 2.8rem; letter-spacing: -0.48px; margin-bottom: .8rem;}
.competition-join.box .joinHeader .joinDescription { color: #D1D5DB; font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; letter-spacing: -0.14px;}

/* Join Section */
.competition-join.box .joinSection { margin-bottom: 3.2rem;}
.competition-join.box .joinSectionTitle { color: var(--color-bg-dark); font-size: 1.8rem; font-weight: 700; line-height: 2.2rem; letter-spacing: -0.36px; margin-bottom: 1.6rem;}

/* Info List */
.competition-join.box .infoList { display: flex; flex-direction: column; gap: 1.6rem;}
.competition-join.box .infoItem { display: flex; justify-content: space-between; align-items: center; padding-bottom: 1.6rem; border-bottom: 1px solid #F3F4F6;}
.competition-join.box .infoItem:last-child { border-bottom: none; padding-bottom: 0;}
.competition-join.box .infoItemLabel { color: #6B7280; font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; letter-spacing: -0.14px;}
.competition-join.box .infoItemValue { color: var(--color-bg-dark); font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; letter-spacing: -0.14px; text-align: right;}

/* Total Amount */
.competition-join.box .totalAmount { display: flex; justify-content: space-between; align-items: center; padding-top: 1.6rem; margin-top: 1.6rem; border-top: 2px solid var(--color-bg-dark);}
.competition-join.box .totalAmount .totalLabel { color: var(--color-bg-dark); font-size: 1.6rem; font-weight: 700; line-height: 2rem; letter-spacing: -0.32px;}
.competition-join.box .totalAmount .totalValue { color: #EF4444; font-size: 2rem; font-weight: 700; line-height: 2.4rem; letter-spacing: -0.4px;}

/* Payment Methods */
.competition-join.box .paymentMethods { display: flex; flex-direction: column; gap: 1.2rem;}
.competition-join.box .paymentOption { display: flex; align-items: center; padding: 1.6rem; background: var(--color-text-white); border: 2px solid #E5E7EB; border-radius: .8rem; cursor: pointer; position: relative;}
.competition-join.box .paymentOption input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0;}
.competition-join.box .paymentOption .radioCustom { width: 2rem; height: 2rem; border: 2px solid #D1D5DB; border-radius: 50%; margin-right: 1.2rem; position: relative; flex-shrink: 0;}
.competition-join.box .paymentOption .radioCustom::after { content: ''; position: absolute; width: 1rem; height: 1rem; background: #3B82F6; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0;}
.competition-join.box .paymentOption input[type="radio"]:checked + .radioCustom { border-color: #3B82F6;}
.competition-join.box .paymentOption input[type="radio"]:checked + .radioCustom::after { opacity: 1;}
.competition-join.box .paymentOption .paymentLabel { color: var(--color-bg-dark); font-size: 1.6rem; font-weight: 700; line-height: 2rem; letter-spacing: -0.32px;}

/* Join Buttons */
.competition-join.box .joinButtons { display: flex; flex-direction: column; gap: 1.2rem; margin-bottom: 2.4rem;}
.competition-join.box .btn { margin:0; padding: 1.6rem 2.4rem; border: none; border-radius: 2.4rem; font-size: 1.6rem; font-weight: 700; line-height: 2rem; letter-spacing: -0.32px; cursor: pointer; text-align: center;}
.competition-join.box .btnJoinLarge { width: 100%;}
.competition-join.box .btnJoinPrimary { background: var(--color-primary); color: var(--color-text-black);}
.competition-join.box .btnJoinSecondary { background: #E5E7EB; color: var(--color-bg-dark);}

/* Terms Notice */
.competition-join.box .termsNotice { padding: 0 1.6rem;}
.competition-join.box .termsNotice p { color: #6B7280; font-size: 1.2rem; font-weight: 400; line-height: 1.6rem; letter-spacing: -0.12px;}
.competition-join.box .termsLink { color: #3B82F6; text-decoration: underline;}

/* Competition Record Page */
.competition-record.box { padding-bottom: 12rem; background: #FAFAFA;}

/* Record Section */
.competition-detail.box .recordSection { padding:2.4rem 1.6rem}
.competition-detail.box .recordSectionTitle { color: #1F2937; font-size: 1.8rem; font-weight: 700; line-height: 2.2rem; letter-spacing: -0.36px; margin-bottom: 2.4rem;}

/* My Record Status Card */
.competition-detail.box .myRecordStatus { padding: 1.6rem; background: var(--color-text-white); border: 1px solid #E5E7EB; border-radius: .8rem; margin-bottom: 2.4rem; box-shadow: none;}
.competition-detail.box .myRecordStatus .statusCardTitle { color: #1F2937; font-size: 1.6rem; font-weight: 700; line-height: 2rem; letter-spacing: -0.32px; margin-bottom: 1.2rem;}
.competition-detail.box .myRecordStatus .statusCardMessage { color: #9CA3AF; font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; letter-spacing: -0.14px;}

/* Record Buttons */
.competition-detail.box .recordButtons { display: flex; flex-direction: column; gap: 1.2rem; margin-bottom: 2.4rem;}
.competition-detail.box .recordButtons .recordButtonRow { display: flex; gap: 1.2rem;}
.competition-detail.box .btn { padding: 1.6rem 2.4rem; border: none; border-radius: 3.2rem; font-size: 1.6rem; font-weight: 700; line-height: 2rem; letter-spacing: -0.32px; cursor: pointer; text-align: center;}
.competition-detail.box .btnRecordLarge { width: 100%;}
.competition-detail.box .btnRecordHalf { flex: 1;}
.competition-detail.box .btnRecordPrimary { background: #00D9A3; color: var(--color-text-white);}
.competition-detail.box .btnRecordSecondary { background: #E5E7EB; color: #1F2937;}

/* Record History */
.competition-detail.box .recordHistory { padding:2.4rem 1.6rem;}
.competition-detail.box .recordHistory .historySectionTitle { color: #1F2937; font-size: 1.6rem; font-weight: 700; line-height: 2rem; letter-spacing: -0.32px; margin-bottom: 1.6rem;}
.competition-detail.box .recordHistory .historyCard { padding: 1.6rem; background: var(--color-text-white); border: 1px solid #E5E7EB; border-radius: .8rem; box-shadow: none;}
.competition-detail.box .recordHistory .historyCompName { color: #6B7280; font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; letter-spacing: -0.14px; margin-bottom: .8rem;}
.competition-detail.box .recordHistory .historyRecord { color: #1F2937; font-size: 1.6rem; font-weight: 700; line-height: 2rem; letter-spacing: -0.32px;}

/* Join Page Styles */
.joinHeader { background: #1B1D1F; padding: 2.4rem 1.6rem; display: flex; flex-direction: column; gap: .8rem; align-items: flex-start; margin-bottom: 0;}
.joinHeader .joinHeaderTitle { color: #FFFFFF; font-size: 2.4rem; font-weight: 700; line-height: 2.8rem; letter-spacing: -0.048rem; margin: 0; width: 100%;}
.joinHeader .joinHeaderDesc { color: #C9CDD2; font-size: 1.6rem; font-weight: 400; line-height: 2rem; letter-spacing: -0.032rem; margin: 0; width: 100%;}

/* Join Info List */
.joinInfoList { display: flex; flex-direction: column; gap: 2.4rem;}
.joinInfoRow { display: flex; align-items: flex-start; gap: .4rem; font-weight: 400; line-height: 2rem; letter-spacing: -0.032rem;}
.joinInfoLabel { color: #72787F; flex: 1; min-width: 0; font-size: 1.6rem;}
.joinInfoValue { color: #1B1D1F; white-space: pre; flex-shrink: 0; font-size: 1.6rem;}

/* Payment Info List */
.paymentInfoList { display: flex; flex-direction: column; gap: 2.4rem;}
.paymentInfoRow { display: flex; align-items: flex-start; gap: .4rem; font-weight: 400; line-height: 2rem; letter-spacing: -0.032rem;}
.paymentInfoLabel { color: #72787F; flex: 1; min-width: 0; font-size: 1.6rem;}
.paymentInfoValue { color: #1B1D1F; white-space: pre; flex-shrink: 0; font-size: 1.6rem;}
.paymentInfoRowBorder { border-bottom: 1px solid #1B1D1F; padding-bottom: 2.4rem;}
.paymentInfoTotal { font-weight: 700;}
.paymentInfoTotal .paymentInfoLabel { color: #1B1D1F; font-weight: 700;}
.paymentInfoTotalValue { color: #C00023; font-weight: 700;}

/* Payment Method List */
.joinPaymentSection { padding-bottom: 12rem;}
.paymentMethodList { display: flex; flex-direction: column; gap: .8rem; margin-bottom: 2.4rem;}
.paymentMethodList input[type="radio"] { display: none;}
.paymentMethodItem { display: flex; align-items: center; gap:.8rem; height: 4.8rem; padding:1.2rem ; border: 1px solid #E8EBED; border-radius: .4rem; cursor: pointer; position: relative; background: #FFFFFF; color: #454C53; font-size: 1.8rem; font-weight: 400; line-height: 1.6rem; letter-spacing: -0.036rem;}

.paymentMethodItem .string { color: #454C53; font-size: 1.8rem; font-weight: 400; line-height: 1.6rem; letter-spacing: -0.036rem; }
/*.paymentMethodList input[type="radio"]:checked + .paymentMethodItem { color: #1B1D1F; font-weight: 700;}
.paymentMethodList input[type="radio"]:checked + .paymentMethodItem span { background: url(/public_html/images/icons/radio_on_fill.svg) no-repeat center center, url(/public_html/images/icons/radio_on_center.svg) no-repeat center center, url(/public_html/images/icons/radio_circle.svg) no-repeat center center; background-size: 2.4rem;} */

/* Join Action Buttons */
.joinActionButtons { display: flex; flex-direction: column; gap: .8rem;}
.joinActionButtons .btn { margin: 0; width: 100%;}
.joinTermsNotice { color: #72787F; font-size: 1.3rem; font-weight: 400; line-height: 1.6rem; letter-spacing: -0.013rem; margin-top: 0;}
.joinTermsLink { color: #0062C3; text-decoration: none;}

/* Rank Page */
.rankSection { width: 100%; background: var(--color-text-white);}
.tapmenu01.box {padding:0;  gap: 0;}

/* Rank Header */
.tapmenu01.box .header { display: flex; flex-direction: column; gap: .8rem; padding: 2.4rem 1.6rem 0; background: var(--color-text-white);}
.tapmenu01.box .title { color: #1B1D1F; font-size: 2.4rem; font-weight: 700; line-height: 2.8rem; letter-spacing: -0.48px; margin: 0;}

/* Rank Tabs */
.tapmenu01.box .tabs { display: flex; gap: 1.6rem; padding: .8rem 0 1.6rem 0;}
.tapmenu01.box .tab { cursor: pointer;}
.tapmenu01.box .tab p { color: #9EA4AA; font-size: 2.4rem; font-weight: 400; line-height: 2.8rem; letter-spacing: -0.48px; margin: 0;}
.tapmenu01.box .tab.active p { color: #1B1D1F; font-weight: 400;}


/* Section Header (통합) */

.box .sectionHeader { display: flex; flex-direction: column; gap: 0.8rem; padding: 2.4rem  1.6rem 0 ; background: #fff;}
.box .sectionTitle { font-size: 1.8rem; font-weight: 700; line-height: 2.2rem; letter-spacing: -0.36px; color: #1B1D1F; width: 100%;}
.box .sectionDesc { font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; letter-spacing: -0.14px; color: #72787F; width: 100%;}

/* Tab Buttons (통합) */

.box .tabButtons { display: flex; gap: 0.8rem;padding: 1.6rem; overflow-x: auto; background: #fff;}
.box .tabButtons::-webkit-scrollbar { display: none;}
.box .tabBtn { padding: 0.9rem 1.6rem; border-radius: 2.4rem; background: transparent; border: 1px solid #C9CDD2; color: #1B1D1F; font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; letter-spacing: -0.14px; cursor: pointer; transition: all 0.3s ease; white-space: nowrap;}
.box .tabBtn:hover { border-color: #1B1D1F;}
.box .tabBtn.active { background: #1B1D1F; color: #FFFFFF; border-color: #1B1D1F; font-weight: 700;}

/* Sub Tab Buttons */
.box .subTabButtons { display: flex; gap: 0; padding: 0 0.8rem 0; background: #F7F8F9; border-bottom: 1px solid #E8EBED; overflow-x: auto;}
.box .subTabButtons::-webkit-scrollbar { display: none;}
.box .subTabBtn { display: flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.9rem 1.6rem; background: #F7F8F9; border: none; border-bottom: 1px solid #E8EBED; color: #1B1D1F; font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; letter-spacing: -0.14px; cursor: pointer; transition: all 0.3s ease; white-space: nowrap;}
.box .subTabBtn img { width: 0.6rem; height: 0.6rem;}
.box .subTabBtn.active { border-bottom: 2px solid #1B1D1F; font-weight: 700;}

/* Filter Area */
.rank.box .filterArea { display: flex; flex-direction: column; gap: .8rem; padding: 2.4rem 0; background: #fff;}
.rank.box .filterArea .select { width: 100%; padding: 1.2rem; padding-right: .4rem; background: #F7F8F9; border: 1px solid #E8EBED; border-radius: .4rem; height: 4.4rem; display: flex; align-items: center;}
.rank.box .filterArea .select label {display:flex; padding: 0; margin: 0; color: #72787F; font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; letter-spacing: -0.14px;}
.rank.box .filterArea .select label::after { content: ''; display: inline-block; width: 3.6rem; height: 3.6rem; background: url(/public_html/images/icons/drop_black.svg) no-repeat center; background-size: 3.6rem; }

/* Rank Table Wrapper - 하나의 테이블로 스크롤 처리 */
.rank.box .rankTableWrapper { width: 100%; overflow-x: auto; border: 1px solid #E8EBED; border-radius: .4rem; position: relative; scrollbar-width: none; -ms-overflow-style: none;}
.rank.box .rankTableWrapper::-webkit-scrollbar { display: none;}

/* Rank Table */
.rank.box .rankTable { border-collapse: separate; width: 100%; min-width: max-content; }
.rank.box .rankTable thead { background: linear-gradient(180deg, #1f6ebd 0%, #0e569e 100%);}
.rank.box .rankTable thead th { border: 1px solid #07488a; border-left: none; border-top: none; padding: 1.2rem .4rem; text-align: center; vertical-align: middle; color: var(--color-text-white); font-size: 1rem; font-weight: 700; line-height: 1.2rem; white-space: nowrap;}
.rank.box .rankTable thead th:first-child { border-left: 1px solid #07488a;}
.rank.box .rankTable tbody td { border-right: 1px solid #E8EBED; border-bottom: 1px solid #E8EBED; padding: 1.2rem .4rem; text-align: center; vertical-align: middle; color: #1B1D1F; font-size: 1rem; font-weight: 700; line-height: 1.2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.rank.box .rankTable tbody tr:last-child td { border-bottom: none;}

/* 고정 컬럼 - 순위 */
.rank.box .rankTable th.rank-col,
.rank.box .rankTable td.rank-col { width: 4rem; min-width: 4rem; max-width: 4rem; position: sticky; left: 0; z-index: 2; background: #1f6ebd;}
.rank.box .rankTable tbody td.rank-col { background: var(--color-text-white); border-left: 1px solid #E8EBED;}

/* 고정 컬럼 - 선수명 */
.rank.box .rankTable th.name-col,
.rank.box .rankTable td.name-col { width: 6rem; min-width: 6rem; max-width: 6rem; position: sticky; left: 4rem; z-index: 2; background: #1f6ebd;}
.rank.box .rankTable tbody td.name-col { background: var(--color-text-white); color: #454C53;}

/* 스크롤 가능한 중간 컬럼 */
.rank.box .rankTable th.scroll-col { width: 6rem; min-width: 6rem; max-width: 6rem; background: #0e569e; position: relative; z-index: 1;}
.rank.box .rankTable td.scroll-col { width: 6rem; min-width: 6rem; max-width: 6rem; background: #F7F8F9; color: #454C53; font-weight: 400; position: relative; z-index: 1;}
/* 소속 컬럼 (첫 번째 scroll-col) */
.rank.box .rankTable tr th.scroll-col:first-of-type,
.rank.box .rankTable tr td.scroll-col:first-of-type { width: 8rem; min-width: 8rem; max-width: 8rem;}

/* 고정 컬럼 - 포인트 */
.rank.box .rankTable th.point-col,
.rank.box .rankTable td.point-col { width: 6rem; min-width: 6rem; max-width: 6rem; position: sticky; right: 0; z-index: 2; background: #1f6ebd; border-right: none;}
.rank.box .rankTable tbody td.point-col { background: var(--color-text-white);}

/* Top 3 Rank Styling */
.rank.box .rankTable tbody tr.top3 td.rank-col { color: #C00023;}

/* Rank Pagination */
.rank.box .rankPagination { display: flex; align-items: center; justify-content: center; gap: 2.4rem; padding: 1.6rem 1.6rem 12rem ; background: #fff;}
.rank.box .rankPagination .pageBtn { background: none; border: none; padding: 0; cursor: pointer; width: 1.8rem; height: 1.8rem; display: flex; align-items: center; justify-content: center;}
.rank.box .rankPagination .pageBtn .pageArrow { width: 100%; height: 100%; }
.rank.box .rankPagination .pageBtn .prevArrow { transform: rotate(180deg);}

.rank.box .rankPagination .pageNumbers { display: flex; gap: 2.4rem; align-items: center; width:29.2rem; justify-content: center;}
.rank.box .rankPagination .pageNum { color: #72787F; font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; letter-spacing: -0.14px; cursor: pointer;}
.rank.box .rankPagination .pageNum.active { color: #1B1D1F; font-weight: 700;}
.rank.box .rankPagination .pageBtn:disabled { opacity: 0.3; cursor: not-allowed;}

/* ===== Total Ranking Page ===== */


/* Total Ranking List */
.rank.box .totalRankingList { display: flex; flex-direction: column; gap: 1.6rem; padding: 2.4rem 0 0 0;}

/* Ranking Item */
.rank.box .rankingItem { display: flex; align-items: center; gap: 0.8rem; padding-bottom: 1.6rem; border-bottom: 1px solid #E8EBED;}
.rank.box .rankingItem:last-child { border-bottom: none;}
.rank.box .rankingItem .rankNumber { width: 2.4rem; min-width: 2.4rem; font-size: 1.8rem; font-weight: 700; line-height: 2.2rem; color: #454C53; text-align: left;}
.rank.box .rankingItem .playerName { flex: 1; font-size: 1.8rem; font-weight: 400; line-height: 2.2rem; color: #1B1D1F;}
.rank.box .rankingItem .trendBadge { display: flex; align-items: center; justify-content: center; width: 2.8rem; height: 1.8rem; border-radius: 2.4rem; font-size: 1rem; font-weight: 700; line-height: 1.2rem; padding: 0.6rem 0.8rem;}
.rank.box .rankingItem .trendBadge.neutral { background: #E8EBED; color: #1B1D1F;}
.rank.box .rankingItem .trendBadge.up { background: #FA2C52; color: #FFFFFF;}
.rank.box .rankingItem .trendBadge.down { background: #0062C3; color: #FFFFFF;}

/* Top 3 Ranking Items */
.rank.box .rankingItem.top3 { flex-direction: column; align-items: flex-start; gap: 0.4rem;}
.rank.box .rankingItem.top3 .rankNumber { color: #C00023;}
.rank.box .rankingItem.top3 .rankingTop { display: flex; align-items: center; gap: 0.8rem; width: 100%;}
.rank.box .rankingItem.top3 .rankingPoints { display: flex; align-items: center; gap: 0.8rem;}

/* Point Info */
.rank.box .rankingItem .pointInfo { display: flex; align-items: center; gap: 0.4rem;}
.rank.box .rankingItem .pointInfo.simple { display: flex; align-items: center; gap: 0.4rem;}
.rank.box .rankingItem .pointLabel { font-size: 1rem; font-weight: 400; line-height: 1.2rem; color: #1B1D1F;}
.rank.box .rankingItem .pointValue { font-size: 1.2rem; font-weight: 700; line-height: 1.4rem; color: #1B1D1F;}
.rank.box .rankingItem .pointValue.total { color: #C00023;}
.rank.box .rankingItem .pointDivider { width: 1px; height: 0.8rem; background: #E8EBED;}

/* Leaderboard 스타일 (sectionHeader와 tabButtons로 통합됨) */

/* 특별 선수 카드 영역 */
.rank.box .specialPlayers { display: flex; flex-direction: column; gap: 1.6rem; padding: 2.4rem 0}

/* 특별 선수 카드 */
.rank.box .specialCard { display: flex; flex-direction: column; gap: 0.4rem; padding: 0 0 1.6rem 0; border-bottom: 1px solid #E8EBED;}

.rank.box .specialCard .playerName { font-size: 1.8rem; font-weight: 400; line-height: 2.2rem; letter-spacing: -0.36px; color: #1B1D1F;}

.rank.box .specialCard .cardInfo { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap;}

.rank.box .specialCard .cardLabel { font-size: 1.2rem; font-weight: 700; line-height: 1.4rem; letter-spacing: -0.12px; color: #C00023; white-space: nowrap;}

.rank.box .specialCard .divider { width: 1px; height: 0.8rem; background: #E8EBED;}

.rank.box .specialCard .statItem { display: flex; align-items: center; gap: 0.4rem; font-size: 1.2rem; font-weight: 700; line-height: 1.4rem; letter-spacing: -0.12px; color: #1B1D1F;}

.rank.box .specialCard .statItem .statLabel { font-size: 1.0rem; font-weight: 400; line-height: 1.2rem; color: #1B1D1F;}

/* 리더보드 테이블 - 순위 열에 변동 배지 포함 */
.rank.box .leaderboardTable .rank-col { width: 7rem; min-width: 7rem; max-width: 7rem;}

.rank.box .leaderboardTable .name-col { left: 7rem;}

.rank.box .leaderboardTable .rankWithChange { display: flex; align-items: center; gap: 0.4rem; justify-content: center;}

.rank.box .leaderboardTable .rankNum { font-size: 1rem; font-weight: 700; line-height: 1.2rem;}
.rank.box .leaderboardTable .top3 .rankNum { color: #C00023}


/* 변동 배지 (원형) */
.rank.box .leaderboardTable .changeBadge { display: inline-flex; align-items: center; justify-content: center; width: 2.8rem; height: 2rem; border-radius:2.4rem; font-size: 0.8rem; font-weight: 700; line-height: 1rem;}

.rank.box .leaderboardTable .changeBadge.up { background: #FA2C52; color: #FFFFFF;}
.rank.box .leaderboardTable .changeBadge.down { background: #0062C3; color: #FFFFFF;}
.rank.box .leaderboardTable .changeBadge.neutral { background: #E8EBED; color: #1B1D1F;}


/* ===== Live Video Page ===== */

/* 현재 라이브 Section */
.video.box.live .liveNow { padding: 2.4rem 1.6rem 3.2rem 1.6rem; background: var(--gray-50, #F7F8F9);}
.video.box.live .sectionTitle { font-size: 1.8rem; font-weight: 700; line-height: 2.2rem; letter-spacing: -0.36px; color: #1B1D1F; margin-bottom: 1.6rem;}

/* Live Stream List */
.video.box.live .liveStreamList { display: flex; flex-direction: column; gap: 1.6rem;}

/* Live Card - 가로 레이아웃 */
.video.box.live .liveCard { display: flex; flex-direction: column; gap: 1.6rem; background: #FFFFFF; border-radius: 0.8rem; box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.12); overflow: hidden; }

/* Live Thumbnail */
.video.box.live .liveThumbnail { position: relative;  border-radius: 0.8rem 0.8rem 0 0; overflow: hidden;}
.video.box.live .liveThumbnail img { width: 100%; height: 100%; object-fit: cover;}

/* LIVE Badge - 하단 왼쪽 */
.video.box.live .liveBadge { position: absolute; bottom: 0; left: 0; background: rgba(255, 0, 0, 0.7); color: #FFFFFF; font-size: 1rem; font-weight: 900; line-height: 1.2rem; padding: 0.6rem 0.8rem 0.6rem 1.2rem; display: flex; align-items: center; gap: 0.4rem;}

/* Live Info */
.video.box.live .liveInfo { display: flex; flex-direction: column; gap: 0.8rem; flex: 1; justify-content: center; padding: 1.6rem}

/* Live Title */
.video.box.live .liveTitle { font-size: 1.6rem; font-weight: 700; line-height: 2rem; letter-spacing: -0.32px; color: #1B1D1F;}

/* Live Stats - 한 줄 배치 */
.video.box.live .liveStats { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;}
.video.box.live .statsGroup { display: flex; align-items: center; gap: 0.8rem;}
.video.box.live .liveStats .statItem { display: flex; align-items: center; gap: 0.2rem; font-size: 1.2rem; font-weight: 400; line-height: 1.4rem; letter-spacing: -0.12px; color: #72787F;}
.video.box.live .liveStats .statItem.viewers { gap: 0;}
.video.box.live .liveStats .statItem img { width: 1.4rem; height: 1.4rem;}
.video.box.live .liveStats .divider { width: 0.1rem; height: 0.8rem; background: #E8EBED;}

/* Share Button - 회색 배지 */
.video.box.live .shareBtn { background: #E8EBED; border: none; padding: 0.5rem 1.2rem; border-radius: 2.4rem; font-size: 1.2rem; font-weight: 700; line-height: 1.4rem; letter-spacing: -0.12px; color: #1B1D1F; cursor: pointer; white-space: nowrap;}

/* 예정된 방송 Section */
.video.box.live .liveScheduled { padding: 3.2rem 1.6rem 12rem 1.6rem; background: var(--gray-50, #F7F8F9);}

/* Scheduled List */
.video.box.live .scheduledList { display: flex; flex-direction: column; gap: 1.6rem;}

/* Scheduled Card */
.video.box.live .scheduledCard { background: #1B1D1F; border-radius: 0.8rem; padding: 1.6rem; display: flex; flex-direction: column; gap: 0;}

/* Scheduled Top */
.video.box.live .scheduledTop { display: flex; flex-direction: column; gap: 0.8rem; padding-bottom: 1.6rem; border-bottom: 1px solid #454C53;}

/* Scheduled Header */
.video.box.live .scheduledHeader { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; width: 100%;}

/* Scheduled Title */
.video.box.live .scheduledTitle { font-size: 1.6rem; font-weight: 700; line-height: 2rem; letter-spacing: -0.32px; color: #FFFFFF; flex: 1;}

/* Status Badge - border 스타일 */
.video.box.live .statusBadge { padding: 0.5rem 1.2rem; border-radius: 2.4rem; font-size: 1.2rem; font-weight: 700; line-height: 1.4rem; letter-spacing: -0.12px; white-space: nowrap; background: transparent;}
.video.box.live .statusBadge.soon { border: 1px solid #F69C00; color: #F69C00;}
.video.box.live .statusBadge.scheduled { border: 1px solid #9EA4AA; color: #C9CDD2;}

/* Scheduled Sub Info */
.video.box.live .scheduledSubInfo { display: flex; align-items: center; gap: 0.4rem;}
.video.box.live .scheduledSubInfo .subInfoItem { font-size: 1.2rem; font-weight: 400; line-height: 1.4rem; letter-spacing: -0.12px; color: #72787F;}
.video.box.live .scheduledSubInfo .divider { width: 0.1rem; height: 0.8rem; background: #454C53;}

/* Scheduled Bottom */
.video.box.live .scheduledBottom { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding-top: 1.6rem;}

/* Scheduled Time */
.video.box.live .scheduledTime { font-size: 1.6rem; font-weight: 400; line-height: 2rem; letter-spacing: -0.32px; color: #FFFFFF;}

/* Notification Button */
.video.box.live .notifyBtn { background: transparent; border: 1px solid #9EA4AA; border-radius: 2.4rem; padding: 0.5rem 1.2rem; cursor: pointer; display: flex; align-items: center; gap: 0.4rem; font-size: 1.2rem; font-weight: 700; line-height: 1.4rem; letter-spacing: -0.12px; color: #C9CDD2; white-space: nowrap;}
.video.box.live .notifyBtn.active { background: #00E8AA; border-color: #00E8AA; color: #1B1D1F;}
.video.box.live .notifyBtn.active::before { content: ''; display: inline-block; width: 1.6rem; height: 1.6rem; background-image: url("/public_html/images/icons/Bell_Ring.svg"); background-size: contain; background-repeat: no-repeat; background-position: center;}


/* ===== VOD Video Page ===== */

/* VOD Section */
.video.box.vod { background: #F7F8F9; padding-bottom: 12rem;}

/* VOD Article */
.video.box.vod article { padding: 2.4rem 1.6rem 0 ;}
.video.box.vod article:first-child { padding-top: 2.4rem;}
.video.box.vod article.vodEducation {padding-bottom:12rem;}
/* VOD Header */
.video.box.vod .vodHeader { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.6rem;}

/* Section Title */
.video.box.vod .sectionTitle { font-size: 1.8rem; font-weight: 700; line-height: 2.2rem; letter-spacing: -0.36px; color: #1B1D1F;}

/* View All Button */
.video.box.vod .viewAllBtn { background: transparent; border: 1px solid #C9CDD2; border-radius: 2.4rem; padding: 0.7rem 1.2rem; font-size: 1.2rem; font-weight: 400; line-height: 1.4rem; letter-spacing: -0.12px; color: #454C53; cursor: pointer; white-space: nowrap;}

/* VOD List */
.video.box.vod .vodList { display: flex; flex-direction: column; gap: 1.6rem;}

/* VOD Card */
.video.box.vod .vodCard { background: #FFFFFF; border-radius: 0.8rem; box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.12); overflow: hidden;}

/* VOD Thumbnail */
.video.box.vod .vodThumbnail { position: relative; width: 100%; height: 14.8rem; overflow: hidden; border-radius: 0.8rem 0.8rem 0 0;}
.video.box.vod .vodThumbnail img { width: 100%; height: 100%; object-fit: cover;}

/* Play Badge */
.video.box.vod .playBadge { position: absolute; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.7); display: flex; align-items: center; gap: 0.4rem; padding: 0.6rem 1.2rem 0.6rem 0.8rem;}
.video.box.vod .playBadge img { width: 0.8rem; height: 1rem;}
.video.box.vod .playBadge .duration { font-size: 1rem; font-weight: 900; line-height: 1.2rem; color: #FFFFFF;}

/* VOD Info */
.video.box.vod .vodInfo { padding: 1.6rem; display: flex; flex-direction: column; gap: 0.8rem;}

/* VOD Category */
.video.box.vod .vodCategory { font-size: 1.2rem; font-weight: 700; line-height: 1.4rem; letter-spacing: -0.12px; display: inline-block;}
.video.box.vod .vodCategory.match { color: #FF8229;}
.video.box.vod .vodCategory.bestPlay { color: #C00023;}
.video.box.vod .vodCategory.education { color: #0062C3;}

/* VOD Title */
.video.box.vod .vodTitle { font-size: 1.6rem; font-weight: 700; line-height: 2rem; letter-spacing: -0.32px; color: #1B1D1F;}

/* VOD Meta */
.video.box.vod .vodMeta { display: flex; align-items: center; gap: 0.8rem;}
.video.box.vod .vodMeta .metaItem { font-size: 1.2rem; font-weight: 400; line-height: 1.4rem; letter-spacing: -0.12px; color: #72787F;}
.video.box.vod .vodMeta .divider { width: 0.1rem; height: 0.8rem; background: #E8EBED;}

/* ===== Video Content Page (My Videos) ===== */

/* Video List Section */
.video.box.content { background: #F7F8F9; padding-bottom: 12rem;}
.video.box.content .videoList { display: flex; flex-direction: column; gap: 1.6rem; padding: 2.4rem 1.6rem 0}

/* Video Card */
.video.box.content .videoCard { background: #FFFFFF; border-radius: 0.8rem; box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.12); overflow: hidden;}

/* Video Thumbnail */
.video.box.content .videoThumbnail { position: relative; width: 100%; height: 14.8rem; overflow: hidden; border-radius: 0.8rem 0.8rem 0 0;}
.video.box.content .videoThumbnail img { width: 100%; height: 100%; object-fit: cover;}

/* Video Time Badge */
.video.box.content .videoTime { position: absolute; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.7); color: #FFFFFF; font-size: 1rem; font-weight: 900; line-height: 1.2rem; padding: 0.6rem 1.2rem 0.6rem 0.8rem; display: flex; align-items: center; gap: 0.4rem;}
.video.box.content .videoTime::before { content: ''; display: inline-block; width: 0.8rem; height: 1rem; background: no-repeat url(/public_html/images/icons/play.svg); background-size: contain;}

/* Video Content */
.video.box.content .videoContent { padding: 1.6rem; display: flex; flex-direction: column; gap: 1.6rem;}

/* Video Title Group */
.video.box.content .videoTitleGroup { display: flex; flex-direction: column; gap: 0.8rem;}
.video.box.content .videoTitleInfo { display: flex; flex-direction: column; gap: 0.4rem;}

/* Video Badge */
.video.box.content .videoBadge { font-size: 1.2rem; font-weight: 700; line-height: 1.4rem; letter-spacing: -0.12px; white-space: nowrap;}
.video.box.content .videoBadge.best { color: #0062C3;}
.video.box.content .videoBadge.hot { color: #C00023;}
.video.box.content .videoBadge.premium { background: linear-gradient(90deg, #0077EE 0%, #9848FF 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;}

/* Video Title */
.video.box.content .videoTitle { font-size: 1.6rem; font-weight: 700; line-height: 2rem; letter-spacing: -0.32px; color: #1B1D1F;}

/* Video Meta */
.video.box.content .videoMeta { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem;}
.video.box.content .metaLeft { display: flex; align-items: center; gap: 0.8rem; flex: 1;}
.video.box.content .metaItem { display: flex; align-items: center; gap: 0.2rem; font-size: 1.2rem; font-weight: 400; line-height: 1.4rem; letter-spacing: -0.12px; color: #72787F;}
.video.box.content .metaItem.views { gap: 0;}
.video.box.content .metaItem img { width: 1.4rem; height: 1.4rem;}
.video.box.content .videoMeta .divider { width: 0.1rem; height: 0.8rem; background: #E8EBED;}

/* Meta Buttons */
.video.box.content .metaRight { display: flex; align-items: center; gap: 0.8rem;}
.video.box.content .metaBtn { background: #E8EBED; border: none; padding: 0.5rem 1.2rem; border-radius: 2.4rem; font-size: 1.2rem; font-weight: 700; line-height: 1.4rem; letter-spacing: -0.12px; color: #1B1D1F; cursor: pointer; white-space: nowrap;}

/* Video Upload Section */

.video.box.content .uploadBox { border: 1px dashed #C9CDD2; border-radius: 0.4rem; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.8rem; padding: 1.6rem; cursor: pointer; transition: all 0.3s ease;}
.video.box.content .uploadBox:hover { border-color: #1B1D1F; background: #FFFFFF;}
.video.box.content .uploadBox img { width: 3.6rem; height: 3.6rem;}
.video.box.content .uploadText { display: flex; flex-direction: column; gap: 0.4rem; align-items: center; text-align: center; width: 100%;}
.video.box.content .uploadTitle { font-size: 1.4rem; font-weight: 700; line-height: 1.8rem; letter-spacing: -0.14px; color: #1B1D1F;}
.video.box.content .uploadDesc { font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; letter-spacing: -0.14px; color: #1B1D1F;}

/* ===== Shorts Section ===== */

/* Shorts Manager Header */
.video.box.content .shortsManager { padding: 2.4rem 1.6rem ; display: flex; flex-direction: column; gap: 2.4rem;}
.video.box.content .shortsManagerHeader { display: flex; flex-direction: column; gap: 0.8rem;}
.video.box.content .shortsManagerInfo { display: flex; flex-direction: column; gap: 0.8rem;}
.video.box.content .shortsManagerTitle { font-size: 1.8rem; font-weight: 700; line-height: 2.2rem; letter-spacing: -0.36px; color: #1B1D1F; margin: 0;}
.video.box.content .shortsManagerDesc { font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; letter-spacing: -0.14px; color: #72787F; margin: 0;}

/* Shorts Manager Actions */
.video.box.content .shortsManagerActions { display: flex; flex-direction: column; gap: 2.4rem;}
.video.box.content .shortsActionButtons { display: flex; gap: 0.8rem; overflow-x: auto;}
.video.box.content .shortsActionButtons::-webkit-scrollbar{display: none;}
.video.box.content .shortsActionBtn { background: #E8EBED; border: none; padding: 0.9rem 2.4rem; border-radius: 4rem; font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; letter-spacing: -0.14px; color: #1B1D1F; cursor: pointer; white-space: nowrap;}
.video.box.content .shortsActionBtn.primary { background: #00E8AA; font-weight: 700; flex: 0 0 12.8rem;}
.video.box.content .shortsActionBtn:hover { opacity: 0.8;}

/* Shorts Live Header */
.video.box.content .shortsLiveHeader { display: flex; align-items: center; justify-content: space-between; gap: 1rem;}
.video.box.content .shortsLiveTitle { font-size: 1.8rem; font-weight: 700; line-height: 2.2rem; letter-spacing: -0.36px; color: #1B1D1F; margin: 0; flex: 1;}
.video.box.content .shortsLiveHeader img { width: 2.4rem; height: 2.4rem;}

/* Shorts Grid Layout */
.video.box.content .videoList.shortsGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8rem; padding: 0 1.6rem;}

/* Shorts Card */
.video.box.content .shortsCard { position: relative; background: #FFFFFF; border-radius: 0.8rem; box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.12); overflow: hidden; height: 28.4rem;}
.video.box.content .shortsCard .shortsImage { position: relative; width: 100%; height: 100%; overflow: hidden;}
.video.box.content .shortsCard .shortsImage img { width: 100%; height: 100%; object-fit: cover;}
.video.box.content .shortsCard .shortsGradient { position: absolute; bottom: 0; left: 0; right: 0; height: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 49.12%, #000000 100%);}

/* Shorts Card Info */
.video.box.content .shortsCard .shortsInfo { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.2rem; display: flex; flex-direction: column; gap: 0.7rem;}
.video.box.content .shortsCard .shortsTitle { font-size: 1.4rem; font-weight: 700; line-height: 1.8rem; letter-spacing: -0.14px; color: #FFFFFF; margin: 0;}
.video.box.content .shortsCard .shortsMetaRow { display: flex; align-items: center; justify-content: space-between; gap: 1rem;}
.video.box.content .shortsCard .shortsTime { display: flex; align-items: center; gap: 0.4rem; flex: 1;}
.video.box.content .shortsCard .shortsTime::before { content: ''; display: inline-block; width: 0.8rem; height: 1rem; background: no-repeat url(/public_html/images/icons/play.svg); background-size: contain;}
.video.box.content .shortsCard .shortsTime span { font-size: 1rem; font-weight: 900; line-height: 1.2rem; color: #FFFFFF;}
.video.box.content .shortsCard .shortsMore { width: 1.6rem; height: 1.6rem; cursor: pointer;}
.video.box.content .shortsCard .shortsMore img { width: 100%; height: 100%;}

/* Shorts Add Box */
.video.box.content .shortsAddBox { border: 1px dashed #C9CDD2; border-radius: 0.4rem; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.8rem; padding: 1.6rem; cursor: pointer; height: 28.4rem;}
.video.box.content .shortsAddBox:hover { border-color: #1B1D1F; background: #FFFFFF;}
.video.box.content .shortsAddBox img { width: 3.6rem; height: 3.6rem;}
.video.box.content .shortsAddBox .shortsAddText { display: flex; flex-direction: column; gap: 0.4rem; align-items: center; text-align: center;}
.video.box.content .shortsAddBox .shortsAddTitle { font-size: 1.4rem; font-weight: 700; line-height: 1.8rem; letter-spacing: -0.14px; color: #1B1D1F;}
.video.box.content .shortsAddBox .shortsAddDesc { font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; letter-spacing: -0.14px; color: #1B1D1F;}

/* ===== Record Detail Page Styles ===== */

/* Record Detail Header Section */
.recordDetailHeader { background: #1B1D1F; padding: 2.4rem 1.6rem 4rem 1.6rem; display: flex; flex-direction: column; gap: 4rem;}
.recordDetailHeaderContent { display: flex; flex-direction: column; gap: .8rem; align-items: center; justify-content: center;}
.recordDetailHeaderContent h1 { color: #FFFFFF !important; font-size: 2.4rem !important; font-weight: 700 !important; line-height: 2.8rem !important; letter-spacing: -0.48px !important; margin: 0 !important; width: 100%;}
.recordDetailHeaderContent p { color: #C9CDD2 !important; font-size: 1.6rem !important; font-weight: 400 !important; line-height: 2rem !important; letter-spacing: -0.32px !important; margin: 0 !important; width: 100%;}

/* Record Detail Section */
.recordDetailSection { display: flex; flex-direction: column; gap: 1.6rem;}
.recordDetailSection h2 { color: #FFFFFF !important; font-size: 1.8rem !important; font-weight: 700 !important; line-height: 2.2rem !important; letter-spacing: -0.36px !important; margin: 0 !important; width: 100%;}

/* Record Stats Grid (2x2) */
.recordStatsGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0;}
.recordStatBox { background: #1B1D1F; border: 1px solid #393C41; padding: 1.6rem; display: flex; flex-direction: column; gap: .8rem;}
.recordStatBox:nth-child(1) { border-radius: .4rem 0 0 0; border-right: none; border-bottom: none;}
.recordStatBox:nth-child(2) { border-radius: 0 .4rem 0 0; border-bottom: none;}
.recordStatBox:nth-child(3) { border-radius: 0 0 0 .4rem; border-right: none;}
.recordStatBox:nth-child(4) { border-radius: 0 0 .4rem 0;}

.recordStatHeader { display: flex; gap: .4rem; align-items: center;}
.recordStatHeader p { color: #C9CDD2 !important; font-size: 1.2rem !important; font-weight: 400 !important; line-height: 1.4rem !important; letter-spacing: -0.12px !important; margin: 0 !important; flex: 1;}

.recordStatValue { color: #FFFFFF !important; font-size: 2.8rem !important; font-weight: 900 !important; line-height: 3.4rem !important; margin: 0 !important;}

/* Record Course Stats */
.recordCourseStats { display: flex; flex-direction: column;}
.recordCourseStatBox { background: #1B1D1F; border: 1px solid #393C41; border-bottom: none; padding: 1.6rem; display: flex; flex-direction: column; gap: .8rem;}
.recordCourseStatBox:first-child { border-radius: .4rem .4rem 0 0; border-top: 1px solid #393C41;}
.recordCourseStatBox:last-child { border-radius: 0 0 .4rem .4rem; border-bottom: 1px solid #393C41;}
.recordCourseStatBoxMiddle { border-left: 1px solid #393C41; border-right: 1px solid #393C41;}

.recordStatValueRow { display: flex; gap: .4rem; align-items: center; justify-content: center;}

/* Record Badges */
.recordBadge { font-size: 1rem !important; font-weight: 700 !important; line-height: 1.2rem !important; padding: .6rem .8rem; border-radius: 2.4rem; white-space: nowrap; height: 1.8rem; display: inline-flex; align-items: center; justify-content: center;}
.recordBadgeBlue { background: #0062C3; color: #FFFFFF !important;}
.recordBadgeGreen { background: #00E8AA; color: #1B1D1F !important;}
.recordBadgeRed { background: #C00023; color: #FFFFFF !important;}
.recordBadgeGreenOutline { background: transparent; border: 1px solid #00E8AA; color: #00E8AA !important;}
.recordBadgeYellowOutline { background: transparent; border: 1px solid #FFC041; color: #FFC041 !important;}

/* Record Detail Rounds Section */
.recordDetailRounds { background: #1B1D1F; border-top: 1px solid #393C41; padding: 2.4rem 1.6rem 12rem 1.6rem; display: flex; flex-direction: column; gap: 2.4rem;}

.recordDetailRoundsHeader { display: flex; gap: 1rem; align-items: center; justify-content: center;}
.recordDetailRoundsHeader h1 { color: #FFFFFF !important; font-size: 2.4rem !important; font-weight: 700 !important; line-height: 2.8rem !important; letter-spacing: -0.48px !important; margin: 0 !important; flex: 1;}

.recordViewAllBtn { border: 1px solid #72787F; border-radius: 2.4rem; padding: .7rem 1.2rem; background: transparent; color: #C9CDD2; font-size: 1.2rem; font-weight: 400; line-height: 1.4rem; letter-spacing: -0.12px; cursor: pointer;}

.recordDetailRoundsContent { display: flex; flex-direction: column; gap: 4rem;}

/* Record Rounds List */
.recordRoundsList { display: flex; flex-direction: column; gap: 1.6rem;}

/* Record Round Card */
.recordRoundCard { background: #393C41; padding: 1.6rem; border-radius: .4rem; box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.08); display: flex; flex-direction: column; gap: 1.6rem;}

.recordRoundCardContent { display: flex; flex-direction: column; gap: 2.4rem;}

.recordRoundCardHeader { display: flex; flex-direction: column; gap: .8rem;}

.recordRoundCardTitle { display: flex; gap: .8rem; align-items: center;}
.recordRoundCardTitle h3 { color: #FFFFFF !important; font-size: 1.8rem !important; font-weight: 700 !important; line-height: 2.2rem !important; letter-spacing: -0.36px !important; margin: 0 !important; flex: 1;}
.recordRoundCardTitle p { color: #9EA4AA !important; font-size: 1.4rem !important; font-weight: 400 !important; line-height: 1.8rem !important; letter-spacing: -0.14px !important; margin: 0 !important; text-align: right;}

.recordRoundCardCourse { display: flex; flex-direction: column; gap: .4rem;}
.recordRoundCardCourse p { color: #9EA4AA !important; font-size: 1.4rem !important; font-weight: 400 !important; line-height: 1.8rem !important; letter-spacing: -0.14px !important; margin: 0 !important;}

.recordRoundCardBadges { display: flex; gap: .8rem;}

.recordRoundCardScore { display: flex; gap: .4rem; align-items: center;}
.recordScoreValue { color: #FFFFFF !important; font-size: 2.8rem !important; font-weight: 900 !important; line-height: 3.4rem !important; margin: 0 !important;}

.recordRoundCardStats { display: flex; flex-direction: column; gap: .8rem;}
.recordRoundStat { display: flex; gap: .4rem; align-items: flex-start;}
.recordRoundStat p:first-child { color: #9EA4AA !important; font-size: 1.4rem !important; font-weight: 400 !important; line-height: 1.8rem !important; letter-spacing: -0.14px !important; margin: 0 !important; flex: 1;}
.recordRoundStat p:last-child { color: #FFFFFF !important; font-size: 1.4rem !important; font-weight: 400 !important; line-height: 1.8rem !important; letter-spacing: -0.14px !important; margin: 0 !important; white-space: nowrap;}

.recordScoreCardBtn { background: #0062C3; color: #FFFFFF; font-size: 1.4rem; font-weight: 700; line-height: 1.8rem; letter-spacing: -0.14px; padding: .9rem 2.4rem; border-radius: 4rem; border: none; cursor: pointer; width: 100%;}

/* Record Trend Section */
.recordTrendSection { display: flex; flex-direction: column; gap: 1.6rem;}

.recordTrendHeader { display: flex; gap: .8rem; align-items: center;}
.recordTrendHeader h3 { color: #FFFFFF !important; font-size: 1.8rem !important; font-weight: 700 !important; line-height: 2.2rem !important; letter-spacing: -0.36px !important; margin: 0 !important; flex: 1;}
.recordTrendHeader p { color: #9EA4AA !important; font-size: 1.4rem !important; font-weight: 400 !important; line-height: 1.8rem !important; letter-spacing: -0.14px !important; margin: 0 !important; white-space: nowrap;}

.recordTrendChart { display: flex; flex-direction: column;}
.recordChartPlaceholder { background: #393C41; padding: 6rem 1.6rem; border-radius: .4rem; display: flex; align-items: center; justify-content: center;}
.recordChartPlaceholder p { color: #9EA4AA !important; font-size: 1.4rem !important; font-weight: 400 !important; line-height: 1.8rem !important; letter-spacing: -0.14px !important; margin: 0 !important;}

/* Record Detail Actions */
.recordDetailActions { display: flex; flex-direction: column; gap: .8rem;}

.recordActionBtnPrimary { background: #00E8AA; color: #1B1D1F; font-size: 1.6rem; font-weight: 700; line-height: 2rem; letter-spacing: -0.32px; padding: 1.2rem 2.4rem; border-radius: 4rem; border: none; cursor: pointer; width: 100%;}

.recordActionBtnsSecondary { display: flex; gap: .8rem;}
.recordActionBtnSecondary { background: #E8EBED; color: #1B1D1F; font-size: 1.6rem; font-weight: 400; line-height: 2rem; letter-spacing: -0.32px; padding: 1.2rem 2.4rem; border-radius: 4rem; border: none; cursor: pointer; flex: 1;}

/* Record Input Page */
.recordInputHeader { background: #1B1D1F; padding: 2.4rem 1.6rem; display: flex; flex-direction: column; gap: 1.6rem;}
.recordInputHeaderContent { display: flex; flex-direction: column; gap: .8rem;}
.recordInputHeaderContent h1 { color: #FFFFFF !important; font-size: 2.4rem !important; font-weight: 700 !important; line-height: 2.8rem !important; letter-spacing: -0.48px !important; margin: 0 !important;}
.recordInputHeaderContent p { color: #72787F !important; font-size: 1.4rem !important; font-weight: 400 !important; line-height: 1.8rem !important; letter-spacing: -0.14px !important; margin: 0 !important;}

.recordInputSports { display: flex; gap: .8rem;}
.recordInputSportBtn { flex: 1; background: transparent; border: 1px solid #393C41; border-radius: 4rem; padding: .8rem 1.2rem; color: #C9CDD2; font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; letter-spacing: -0.14px; cursor: pointer; transition: all 0.2s;}
.recordInputSportBtn.active { background: #00E8AA; color: #1B1D1F; font-weight: 700; border-color: #00E8AA;}

.recordInputSection { background: #1B1D1F; padding: 2.4rem 1.6rem; display: flex; flex-direction: column; gap: 2.4rem;}
.recordInputSection h2 { color: #FFFFFF !important; font-size: 1.8rem !important; font-weight: 700 !important; line-height: 2.2rem !important; letter-spacing: -0.36px !important; margin: 0 !important;}

.recordInputGroup { display: flex; flex-direction: column; gap: .8rem;}
.recordInputGroup label { color: #C9CDD2 !important; font-size: 1.2rem !important; font-weight: 400 !important; line-height: 1.4rem !important; letter-spacing: -0.12px !important;}
.recordInputGroup input.txt04,
.recordInputGroup textarea.txt04 { background: #FFFFFF !important; border: 1px solid #E8EBED !important; color: #1B1D1F !important;}
.recordInputGroup input.txt04::placeholder,
.recordInputGroup textarea.txt04::placeholder { color: #9EA4AA !important;}
.recordInputGroup .select.l { background: #FFFFFF !important; border: 1px solid #E8EBED !important;}
.recordInputGroup .select.l label { color: #9EA4AA !important; font-size: 1.6rem !important;}
.recordInputGroup .select.l ul { background: #FFFFFF !important; border: 1px solid #E8EBED !important;}
.recordInputGroup .select.l ul li { color: #1B1D1F !important;}
.recordInputGroup .select.l ul li:hover { background: #F7F8F9 !important;}

.recordInputRow { display: flex; gap: .8rem;}
.recordInputRow .recordInputGroup { flex: 1;}

.recordInputTextarea { height: 12.8rem; resize: none; padding: 1.2rem; line-height: 1.8rem;}

/* Scorecard */
.recordScorecard { display: flex; flex-direction: column; gap: 1.6rem;}

.recordScorecardTable { display: flex; flex-direction: column; gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: .4rem;}
.recordScorecardTable::-webkit-scrollbar { height: 0; display: none;}

.recordScorecardRow { display: flex; gap: 0; min-width: min-content;}

/* 홀 번호 행 - 파란색 배경 */
.recordScorecardRow.recordScorecardHeader .recordScorecardCell { background: #2894FF; color: #FFFFFF; font-size: 1.2rem; font-weight: 700; border: none;}
.recordScorecardRow.recordScorecardHeader .recordScorecardCell.recordScorecardLabel { background: #393C41;}

/* 기본 셀 스타일 */
.recordScorecardCell { background: #E8EBED; border-right: 1px solid #FFFFFF; padding: .8rem; min-width: 4.2rem; width: 4.2rem; height: 3.6rem; display: flex; align-items: center; justify-content: center; color: #1B1D1F; font-size: 1.2rem; font-weight: 400; line-height: 1.4rem; letter-spacing: -0.12px;}
.recordScorecardCell:last-child { border-right: none;}

/* 레이블 셀 (IN, OUT, PAR, SCORE) */
.recordScorecardCell.recordScorecardLabel { min-width: 4.8rem; width: 4.8rem; background: #393C41; font-weight: 700; color: #FFFFFF; position: sticky; left: 0; z-index: 1; border-right: 1px solid #1B1D1F;}

/* SCORE 행 - 흰색 배경 입력 필드 */
.recordScorecardRow.recordScorecardScore .recordScorecardCell { background: #FFFFFF; padding: .6rem; border-right: 1px solid #E8EBED;}
.recordScorecardRow.recordScorecardScore .recordScorecardCell.recordScorecardLabel { background: #393C41; border-right: 1px solid #1B1D1F;}

.scorecardInput { background: #FFFFFF; border: 1px solid #C9CDD2; border-radius: .4rem; color: #1B1D1F; font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; text-align: center; padding: .4rem .2rem; width: 3.4rem; height: 2.4rem; outline: none;}
.scorecardInput:focus { border-color: #00E8AA; font-weight: 700;}
.scorecardInput::placeholder { color: #9EA4AA;}

/* 통계 박스 */
.recordScorecardStats { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: .8rem;}
.recordScorecardStatBox { background: #393C41; border-radius: .4rem; padding: 1.6rem; display: flex; flex-direction: column; gap: .8rem; align-items: center; justify-content: center;}
.recordScorecardStatBox p { color: #9EA4AA !important; font-size: 1.2rem !important; font-weight: 400 !important; line-height: 1.4rem !important; letter-spacing: -0.12px !important; margin: 0 !important; text-align: center;}
.recordScorecardStatValue { color: #FFFFFF !important; font-size: 2.8rem !important; font-weight: 900 !important; line-height: 3.4rem !important;}

.recordInputActions { background: #1B1D1F; padding: 2.4rem 1.6rem 12rem 1.6rem; border-top: 1px solid #393C41; display: flex; flex-direction: column; gap: .8rem;}

/* Record Input Page */
.record-input { display: flex; flex-direction: column; width: 100%; }

.record-header {  padding: 2.4rem 1.6rem; display: flex; flex-direction: column; gap: .8rem; }
.record-header h1 { font-size: 2.4rem; font-weight: 700; line-height: 2.8rem; color: #FFFFFF; letter-spacing: -0.048rem; }
.record-header p { font-size: 1.6rem; font-weight: 400; line-height: 2rem; color: #C9CDD2; letter-spacing: -0.032rem; }

.sport-tabs {  padding: 1.6rem 1.2rem 0 1.2rem; display: flex; gap: .8rem; }
.tab-btn { padding: .9rem 1.6rem; border-radius: 2.4rem; font-size: 1.4rem; line-height: 1.8rem; letter-spacing: -0.014rem; font-weight: 400; color: #FFFFFF; background: transparent; border: .1rem solid #9EA4AA; cursor: pointer; white-space: nowrap; }
.tab-btn.active { background: #00E8AA; color: #1B1D1F; font-weight: 700; border: none; }

/* Competition Card */
.competition-card { margin: 0 1.6rem; padding: 1.6rem; background: #393C41; border-radius: .8rem; display: flex; flex-direction: column; gap: .8rem; }
.competition-date { font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; color: #9EA4AA; letter-spacing: -0.014rem; }
.competition-title { font-size: 1.8rem; font-weight: 700; line-height: 2.2rem; color: #FFFFFF; letter-spacing: -0.036rem; }

article.record-form-section { padding: 2.4rem 1.6rem 0; display: flex; flex-direction: column;}
article.record-form-section h2 { font-size: 1.8rem; font-weight: 700; line-height: 2.2rem; color: #FFFFFF; letter-spacing: -0.036rem; margin-bottom: 1.6rem; }

.form-field { display: flex; flex-direction: column; gap: .8rem; padding-bottom: 2.4rem; }
.form-field > label { font-size: 1.4rem; font-weight: 700; line-height: 1.8rem; color: #FFFFFF; letter-spacing: -0.014rem; }
.form-field input.txt01 { background: #F7F8F9; border: .1rem solid #E8EBED; height: 4.4rem; padding: 0 1.2rem; font-size: 1.4rem; line-height: 1.8rem; letter-spacing: -0.014rem; color: #72787F; }
.form-field input.txt01::placeholder { color: #72787F; }
.form-field .select { height: 4.4rem; }
.form-field .select label { height: 4.4rem; line-height: 4.4rem; padding: 0 1.2rem .4rem; font-size: 1.4rem; font-weight: 400; color: #72787F; }
.form-field .select label::after { background-size: 3.6rem; }

.form-field-row { display: flex; gap: .8rem; padding-top: .8rem; }
.form-field-row:first-child { padding-top: 0rem; }
.form-field-row .form-field { flex: 1; padding-bottom: 0; }

/* Scorecard Section */
article.scorecard-section { padding: 2.4rem 1.6rem 4rem; display: flex; flex-direction: column; gap: 1.6rem; }
article.scorecard-section h2 { font-size: 1.8rem; font-weight: 700; line-height: 2.2rem; color: #FFFFFF; letter-spacing: -0.036rem; }

.scorecard-wrapper { overflow-x: auto; margin-bottom: .8rem;  border-radius: .4rem; }
.scorecard-wrapper::-webkit-scrollbar { display: none; }
.scorecard-wrapper::-webkit-scrollbar-track { background: transparent; }
.scorecard-wrapper::-webkit-scrollbar-thumb { background: #454C53; border-radius: 3px; }

.scorecard-table { width: 100%; border-collapse: separate; border-spacing: 0;}
.scorecard-table tr td, .scorecard-table tr th { vertical-align: middle;}

.scorecard-label { background: #393C41; width: 4.8rem; min-width: 4.8rem; height: 3.6rem; font-size: 1rem; font-weight: 700; line-height: 1.2rem; color: #FFFFFF; text-align: center; vertical-align: middle; position: sticky; left: 0; z-index: 2; }
.scorecard-par .scorecard-label, .scorecard-score .scorecard-label { background: #454C53; font-size: 1rem; font-weight: 700; line-height: 1.2rem; }

.hole-num { background: #2D8CEC; width: 4.2rem; min-width: 4.2rem; height: 3.6rem; font-size: 1.2rem; font-weight: 700; line-height: 1.4rem; color: #FFFFFF; text-align: center; letter-spacing: -0.012rem; }
.hole-num.blue2 { background: #227EDA; }

.par-value { background: #F7F8F9; border: .1rem solid #E8EBED; border-left: none; width: 4.2rem; min-width: 4.2rem; height: 3.6rem; font-size: 1.2rem; font-weight: 700; line-height: 1.4rem; color: #C00023; text-align: center; letter-spacing: -0.012rem; }

.score-input { background: #F7F8F9; border-bottom: .1rem solid #E8EBED; border-right: .1rem solid #E8EBED; width: 4.2rem; min-width: 4.2rem; height: 3.6rem; padding: 0; text-align: center; }
.score-input input { width: 3.4rem; height: 2.4rem; background: #FFFFFF; border: .1rem solid #E8EBED; border-radius: .4rem; text-align: center; font-size: 1.2rem; font-weight: 700; line-height: 1.4rem; color: #C00023; letter-spacing: -0.012rem; outline: none; }
.score-input input::-webkit-inner-spin-button, .score-input input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* 요약 그리드 */
.score-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: .8rem; }
.summary-box { background: #1B1D1F; border: .1rem solid #393C41; padding: 1.6rem; display: flex; align-items: center; gap: .4rem; height: 6rem; }
.summary-box:nth-child(1) { border-radius: .4rem 0 0 0; border-right: none; }
.summary-box:nth-child(2) { border-radius: 0 .4rem 0 0; }
.summary-box:nth-child(3) { border-radius: 0 0 0 .4rem; border-top: none; border-right: none; }
.summary-box:nth-child(4) { border-radius: 0 0 .4rem 0; border-top: none; }
.summary-label { font-size: 1.2rem; font-weight: 400; line-height: 1.4rem; color: #C9CDD2; letter-spacing: -0.012rem; flex: 1; }
.summary-value { font-size: 2.8rem; font-weight: 900; line-height: 3.4rem; color: #FFFFFF; }

/* Additional Info Section */
article.additional-info-section { padding: 2.4rem 1.6rem 12rem; display: flex; flex-direction: column; gap: 1.6rem; }
article.additional-info-section h2 { font-size: 1.8rem; font-weight: 700; line-height: 2.2rem; color: #FFFFFF; letter-spacing: -0.036rem; margin-bottom: 0; }
article.additional-info-section .form-field { display: flex; flex-direction: column; gap: .8rem; padding-bottom: 2.4rem; }
article.additional-info-section .form-field > label { font-size: 1.4rem; font-weight: 700; line-height: 1.8rem; color: #FFFFFF; letter-spacing: -0.014rem; }
article.additional-info-section .form-field input.txt01 { background: #F7F8F9; border: .1rem solid #E8EBED; height: 4.4rem; padding: 0 1.2rem; font-size: 1.4rem; line-height: 1.8rem; letter-spacing: -0.014rem; color: #1B1D1F; border-radius: .4rem; }
article.additional-info-section .form-field input.txt01::placeholder { color: #72787F; }
article.additional-info-section .form-field textarea.txt01 { background: #F7F8F9; border: .1rem solid #E8EBED; height: 12.8rem; padding: 1.6rem 1.2rem; font-size: 1.4rem; line-height: 1.8rem; letter-spacing: -0.014rem; color: #1B1D1F; border-radius: .4rem; resize: none; }
article.additional-info-section .form-field textarea.txt01::placeholder { color: #9EA4AA; }
article.additional-info-section .action-buttons { display: flex; flex-direction: column; gap: .8rem; width: 100%; }
article.additional-info-section .btn-save { width: 100%; padding: 1.2rem 2.4rem; background: #00E8AA; color: #1B1D1F; font-size: 1.6rem; font-weight: 700; line-height: 2rem; letter-spacing: -0.032rem; border: none; border-radius: 4rem; cursor: pointer; text-align: center; }
article.additional-info-section .btn-cancel { width: 100%; padding: 1.2rem 2.4rem; background: #E8EBED; color: #1B1D1F; font-size: 1.6rem; font-weight: 400; line-height: 2rem; letter-spacing: -0.032rem; border: none; border-radius: 4rem; cursor: pointer; text-align: center; }




.policyBg {display:none; position:fixed; width:100%; height:100%; background: rgba(0,0,0,.8); z-index: 9990;}
.policyBg .policyBox {display:block; width: 100%; height: 80%;  max-width:72rem; padding:1.6rem; border-radius: .8rem; background: #fff; position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%);}

.policyBg .policyBox h1 {display:flex; justify-content: space-between; align-items: center;  font-size: 2.2rem; font-weight: 700; line-height: 36px; letter-spacing: -.18px; color: #000; padding-bottom: 12px;  }
.policyBg .policyBox a { display:inline-block; background:url(/public_html/images/icons/close_black.svg) no-repeat ;  background-size:3.6rem; width:3.6rem; height:3.6rem;}

.policyBg .policyBox .policys { margin-top:1.6rem; height:calc(100% - 11.6rem); overflow: auto;}
.policyBg .policyBox .policys h1 {font-size: 2rem; font-weight: 700; line-height: 3rem; letter-spacing: -.18px; color: #000; padding-bottom: 1.2rem;  }
.policyBg .policyBox .policys h2 {font-size: 1.8rem; font-weight: 700; line-height: 2.4rem; letter-spacing: -.18px; color: #000; padding: .8rem 0; }
.policyBg .policyBox .policys h3 {font-size: 1.6rem; font-weight: 700; line-height: 2rem; letter-spacing: -.18px; color: #000; padding: .8rem 0; }
.policyBg .policyBox .policys h4 {font-size: 1.4rem; font-weight: 700; line-height: 2rem; letter-spacing: -.18px; color: #000; padding: .4rem 0; }
.policyBg .policyBox .policys p {font-size: 1.2rem; font-weight: 400; line-height: 1.8rem; letter-spacing: -.18px; color: #000; padding-bottom: .4rem; }
.policyBg .policyBox .policys ol li {list-style:circle ; font-size: 1.2rem; font-weight: 400; line-height: 1.8rem; letter-spacing: -.18px; color: #000; margin-left: 2rem; padding-bottom: .2rem;}
.policyBg .policyBox .policys ul li {list-style:decimal; font-size: 1.2rem; font-weight: 400; line-height: 1.8rem; letter-spacing: -.18px; color: #000; margin-left: 2rem; padding-bottom: .2rem; }
.policyBg .policyBox .policys strong {font-weight: 700;}

/* Video View Page */
.video-view-container { max-width: 1400px; margin: 0 auto; padding: 2rem 1.6rem; }
.video-content-wrapper { display: flex; flex-direction: column; gap: 2rem; }
.video-player-wrapper { position: relative; width: 100%; background: #000; border-radius: 1.2rem; overflow: hidden; flex: 1; }
.video-player-wrapper video { width: 100%; height: auto; max-height: 80vh; display: block; border-radius: 1.2rem; }
.video-placeholder { position: relative; width: 100%; padding-top: 56.25%; background: #000; border-radius: 1.2rem; }
.video-placeholder img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.placeholder-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.5); }
.placeholder-text { color: #fff; font-size: 1.8rem; font-weight: 500; }
.video-badges { position: absolute; top: 1.6rem; left: 1.6rem; display: flex; gap: 0.8rem; z-index: 10; }
.badge-live { background: #FF4444; color: #fff; padding: 0.6rem 1.2rem; border-radius: 0.4rem; font-weight: 700; font-size: 1.4rem; animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
.badge-sport { background: rgba(0, 0, 0, 0.7); color: #fff; padding: 0.6rem 1.2rem; border-radius: 0.4rem; font-size: 1.4rem; }
.viewers-count { background: rgba(0, 0, 0, 0.8); color: #fff; padding: 0.6rem 1.2rem; border-radius: 0.4rem; font-size: 1.4rem; font-weight: 500; display: inline-flex; align-items: center; gap: 0.5rem; }
.viewers-count::before { content: '👁️'; font-size: 1.2rem; }
.video-info-side { background: #fff; border-radius: 1.2rem; padding: 2.4rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }
.video-title { font-size: 2.4rem; font-weight: 700; color: #1a1a1a; margin-bottom: 1.6rem; line-height: 1.3; }
.video-meta { display: flex; flex-direction: column; gap: 1.2rem; }
.video-meta-item { display: flex; align-items: center; gap: 1rem; color: #666; font-size: 1.5rem; }
.video-meta-item svg { stroke: #666; flex-shrink: 0; }
.video-meta-item.live-viewers-meta { color: #FF4444; font-weight: 500; }
.video-meta-item.live-viewers-meta svg { stroke: #FF4444; }
.video-meta-item .live-count { color: #FF4444; font-size: 1.8rem; font-weight: 700; }
.back-button { display: inline-flex; align-items: center; gap: 0.8rem; padding: 1rem 2rem; background: #f5f5f5; border: none; border-radius: 0.8rem; color: #333; font-size: 1.5rem; font-weight: 500; cursor: pointer; margin-bottom: 2rem; text-decoration: none; transition: background 0.2s; }
.back-button:hover { background: #e8e8e8; }

/* Related Videos Section */
.related-videos-section { margin-top: 4rem; padding-top: 3rem; border-top: 1px solid #E8EBED; }
.related-videos-title { font-size: 2.2rem; font-weight: 700; color: #1B1D1F; margin-bottom: 2rem; }
.related-videos-grid { display: flex; flex-wrap: wrap; gap: 2rem; }
.related-videos-grid .vodCard { flex: 0 0 100%; background: #FFFFFF; border-radius: 0.8rem; box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.12); overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; }
.related-videos-grid .vodCard:hover { transform: translateY(-4px); box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15); }
.related-videos-section .vodThumbnail { position: relative; width: 100%; height: 14.8rem; overflow: hidden; border-radius: 0.8rem 0.8rem 0 0; }
.related-videos-section .vodThumbnail img { width: 100%; height: 100%; object-fit: cover; }
.related-videos-section .playBadge { position: absolute; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.7); display: flex; align-items: center; gap: 0.4rem; padding: 0.6rem 1.2rem 0.6rem 0.8rem; }
.related-videos-section .playBadge img { width: 0.8rem; height: 1rem; }
.related-videos-section .playBadge .duration { font-size: 1rem; font-weight: 900; line-height: 1.2rem; color: #FFFFFF; }
.related-videos-section .vodInfo { padding: 1.6rem; display: flex; flex-direction: column; gap: 0.8rem; }
.related-videos-section .vodCategory { font-size: 1.2rem; font-weight: 700; line-height: 1.4rem; letter-spacing: -0.12px; display: inline-block; }
.related-videos-section .vodCategory.replay { color: #FF8229; }
.related-videos-section .vodTitle { font-size: 1.6rem; font-weight: 700; line-height: 2rem; letter-spacing: -0.32px; color: #1B1D1F; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.related-videos-section .vodMeta { display: flex; align-items: center; gap: 0.8rem; }
.related-videos-section .vodMeta .metaItem { font-size: 1.2rem; font-weight: 400; line-height: 1.4rem; letter-spacing: -0.12px; color: #72787F; }
.related-videos-section .vodMeta .divider { width: 0.1rem; height: 0.8rem; background: #E8EBED; }

/* VOD List Search */
.video .searchArea { margin-bottom: 2rem; }
#searchForm { display: flex; gap: 0.8rem; max-width: 50rem; }
#searchInput { flex: 1; padding: 1.2rem 1.6rem; border: 1px solid #E8EBED; border-radius: 0.8rem; font-size: 1.4rem; color: #1B1D1F; background: #FFFFFF; }
#searchForm button[type="submit"] { padding: 1.2rem 2.4rem; background: #00E8AA; color: #1B1D1F; border: none; border-radius: 0.8rem; font-size: 1.4rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.searchResetBtn { padding: 1.2rem 2.4rem; background: #72787F; color: #FFFFFF; border: none; border-radius: 0.8rem; font-size: 1.4rem; font-weight: 700; cursor: pointer; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; }

/* VOD List Loading States */
.loading-indicator, .no-more-data, .no-data { display: none; text-align: center; padding: 2rem; }
.loading-indicator p, .no-more-data p { color: #9EA4AA; }


@media screen and (min-width: 767px) { 

    .heroSection article .videoList .videos { width: calc(33.33% - 1.2rem);  height: 19.2rem; }
    .heroSection article .matches .match-cards .match-card { width: calc(33.33% - 1.2rem);  height: 14.8rem;}
    /* .boardSection .rankArea .ranking .list { width: calc(50% - .8rem)} */

    .competitions.box .compCards { flex-direction: row !important;  flex-wrap:  wrap; }
    .competitions.box .compCard { width: calc(33.33% - 1.2rem); }

    .competition-detail.header ,
    .competition-detail.location .compSection ,
    .competition-detail.participants .compSection,
    .competition-detail.records,
    .competition-detail.compinfo,
    .recordDetailRounds .recordRoundsList 
    { display: flex; flex-flow: row wrap; column-gap: 2.4rem;}
    .competition-detail.location .venueMap,
    .competition-detail.location .venueDetails ,
    .competition-detail.box .recordSection,
    .competition-detail.box .recordHistory,
    .competition-detail.compinfo .compSection
    { width: calc(50% - 1.2rem); }

    .competition-detail.participants .participantsStats { width :50% }
    .competition-detail.participants .participantsRegion { width : calc(50% - 2.4rem) }
    .competition-detail.participants .statBoxColumn,  .competition-detail.participants .statTotal  { width :calc( 50% - .4rem )}
    .competition-detail.participants .statBoxColumn div{width: 100%}
    

    .competition-detail.box .compDetailHeader { width: calc( 100% - 33.6rem)}
    .competition-detail.box .applicationStatus { width:28rem; margin:1.6rem;}
    .competition-detail.box .compTabs {width: 100%; padding-top:0}
    .competition-detail.records .divider, .competition-detail.compinfo .divider {display:none;}


    .recordRoundsList .recordRoundCard{ width: calc(33.33% - 1.6rem);}
    .recordCourseStats {flex-direction: row;}
    .recordDetailSection .recordCourseStatBox {width:100%;border-bottom: 1px solid #393C41; border-radius: 0;}

    .video.box.content .videoList, .video.box.live .liveStreamList, .video.box.vod .vodList {flex-direction: row !important;  flex-wrap:  wrap;}
    .video.box.content .videoCard { width: calc(33.33% - 1.2rem); }
    .video.box.content .videoUpload {width: calc(33.33% - 1.2rem);}
    .video.box.content .uploadBox { width:100%; height:100%;}
    .video.box.content .videoList.shortsGrid { grid-template-columns: repeat(6, 1fr) !important;}
    .video.box.live .liveCard, .video.box.vod .vodCard {  width: calc(33.33% - 1.2rem); }

    .related-videos-grid .vodCard { flex: 0 0 calc(33.333% - 1.4rem); }

    .box.correlation .list,.box.predict, .box.training ,.box.stat { flex-flow: row wrap;}
    
    .box.predict h1:first-child,
    .box.training h1:first-child,
    .box.stat div:first-child,
    .analysis .overallCard 
    { width:100%;}
    .box.correlation .card,
    .box.predict .card ,
    .box.training .card ,
    .box.stat .card,
    .box.predict .card,
    .fitIndex
    {width: calc(33.33% - 1.6rem);}

    .analysis .overall { flex-flow: row wrap; column-gap: 1.6rem;}
    .box.predict { gap:2.4rem }


   
    .competition-detail.box .courseItem .courseImageWrap {max-width:30rem;}
    .competition-detail.box .courseItem .courseInfo { max-width: calc(100% - 32rem)}
}

@media screen and (min-width: 1080px) { 
    
    .header_wrap { position: relative;}
    .header_wrap .menu { position:absolute; top: 5.4rem; right:0;  width:36rem; padding:4rem 1.6rem ; height: max-content;  background: var(--color-bg-dark); box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.20);}
    .header_wrap .menu .menuList {  display:flex; flex-flow: column; width:100%; gap:2.4rem;}
    .header_wrap .menu .menuList li { border-bottom: .1rem solid var(--color-bg-medium);}
    .header_wrap .menu .menuList li a { display:inline-block; padding-bottom: 1.6rem; width:100%; font-size: 2.4rem; font-style: normal; font-weight: 900; line-height: 2.8rem;  }
    .header_wrap { max-width: 108rem; height:100%; margin:0 auto;}

    .wrap section article { max-width: 108rem;margin:0 auto}

    .wrap section.medium article { max-width: 72rem;}

    .heroSection { height:max-content ;background: var(--color-bg-dark); }
    .heroSection article { width:100%; max-width: 108rem; margin:0;  display:flex;  flex-flow: row wrap; justify-content: center; width:100%; margin:auto; }
    .heroSection article .register_area { width:100%;}
    .heroSection article .videoList { width:100%; max-width: 108rem; justify-content: space-between; padding: 4rem 0}
    .heroSection article .videoList .videos { width: 32.3%}

    .heroSection article .matches {padding :0;}
    .heroSection article .matches .match-cards { justify-content: space-between; padding: 0}
    .heroSection article .matches .match-cards .match-card { width:32.3%;  height: 14.8rem;}

    
    .certHeaderContent {width: 100%; max-width: 108rem; margin: auto;}
    .boardSection { max-width: 108rem; margin: auto;}
    /* .boardSection .rankArea .ranking .list { width: calc(50% - .8rem) } */
    
    .profileNav ul { width:100%; max-width: 108rem; margin: auto}

    footer ul { width:100%; max-width:108rem; margin:0 auto; }

    .video-content-wrapper { flex-direction: row; gap: 2.4rem; }
    .video-player-wrapper { flex: 0 0 65%; }
    .video-info-side { flex: 0 0 35%; position: sticky; top: 2rem; align-self: flex-start; max-height: calc(100vh - 4rem); }

    
    .rank.box .filterArea { padding: 1.6rem; }
    .rank.box .rankTableWrapper{ padding: 1.6rem; border:none; background: #fff;}
    
    
}

/* Training Detail */
.analysis .box.trainingDetail { display: flex; flex-direction: column; gap: 1.6rem; padding: 2.4rem 1.6rem;}
.trainingHeader { display: flex; justify-content: space-between; align-items: flex-start;}
.trainingHeader h1 { font-family: 'Pretendard', sans-serif; font-size: 2.4rem; font-weight: 700; line-height: 2.8rem; letter-spacing: -0.048rem; color: #FFFFFF; margin: 0;}
.trainingHeader img { width: 2.4rem; height: 2.4rem;}
.trainingMeta { display: flex; align-items: center; gap: 0.8rem;}
.trainingMeta .priority { font-family: 'Pretendard', sans-serif; font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; letter-spacing: -0.014rem; margin: 0;}
.trainingMeta .priority.high { color: #FA2C52;}
.trainingMeta .priority.middle { color: #F9BA3E;}
.trainingMeta .priority.low { color: #4CAF50;}
.trainingMeta .divider { width: 0.1rem; height: 0.8rem; background: #454C53;}
.trainingMeta .programInfo { font-family: 'Pretendard', sans-serif; font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; letter-spacing: -0.014rem; color: #9EA4AA; margin: 0;}
.progressWrap { display: flex; flex-direction: column; gap: 0.8rem;}
.progressHeader { display: flex; justify-content: space-between; align-items: center;}
.progressHeader p { font-family: 'Pretendard', sans-serif; font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; letter-spacing: -0.014rem; color: #9EA4AA; margin: 0;}
.progressHeader span { font-family: 'Pretendard', sans-serif; font-size: 1.4rem; font-weight: 700; line-height: 1.8rem; letter-spacing: -0.014rem; color: #FFFFFF;}
.progressBar { width: 100%; height: 0.8rem; background: #454C53; border-radius: 0.4rem; overflow: hidden;}
.progressFill { height: 100%; background: linear-gradient(90deg, #4A90E2 0%, #50C878 100%); border-radius: 0.4rem; transition: width 0.3s ease;}

/* Week Program Cards */
.analysis .box.weekProgram { padding: 2.4rem 1.6rem 0;}
.weekCard { background: #1B1D1F; border: 0 solid #454C53; border-bottom-width: 0.1rem; border-radius: 0.4rem; padding: 0 0 2.4rem 0; display: flex; flex-direction: column; gap: 2.4rem;}
.weekCard.last { border-bottom: none;}
.weekHeader { display: flex; justify-content: space-between; align-items: center; gap: 0.4rem;}
.weekHeader h2 { font-family: 'Pretendard', sans-serif; font-size: 1.8rem; font-weight: 700; line-height: 2.2rem; letter-spacing: -0.036rem; color: #FFFFFF; margin: 0; flex: 1;}
.weekHeader .weekRange { font-family: 'Pretendard', sans-serif; font-size: 1.8rem; font-weight: 400; line-height: 2.2rem; letter-spacing: -0.036rem; color: #00E8AA; margin: 0; text-align: right; flex: 1;}
.exerciseSection { display: flex; flex-direction: column; gap: 1.6rem;}
.exerciseSection h3 { font-family: 'Pretendard', sans-serif; font-size: 1.6rem; font-weight: 700; line-height: 2rem; letter-spacing: -0.032rem; color: #FFFFFF; margin: 0;}
.exerciseList { display: flex; flex-direction: column; gap: 0.8rem; list-style: none; padding: 0; margin: 0;}
.exerciseList li { display: flex; align-items: center; gap: 0.4rem;}
.exerciseList li img { width: 1.6rem; height: 1.6rem; flex-shrink: 0;}
.exerciseList li p { font-family: 'Pretendard', sans-serif; font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; letter-spacing: -0.014rem; color: #FFFFFF; margin: 0; flex: 1;}
.intensitySection { display: flex; flex-direction: column; gap: 1.6rem;}
.intensitySection h3 { font-family: 'Pretendard', sans-serif; font-size: 1.6rem; font-weight: 700; line-height: 2rem; letter-spacing: -0.032rem; color: #FFFFFF; margin: 0;}
.intensitySection > p { font-family: 'Pretendard', sans-serif; font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; letter-spacing: -0.014rem; color: #FFFFFF; margin: 0;}
.intensityBar { position: relative; width: 100%; height: 0.8rem; background: #454C53; overflow: hidden;}
.intensityFill { position: absolute; top: 0; left: 0; height: 100%; display: block;}
.intensityFill.green { background: #00E8AA;}
.intensityFill.orange { background: #FF9F2A;}
.intensityFill.red { background: #FA2C52;}
.intensityFill.gradient { background: linear-gradient(90deg, #00E8AA 0%, #FA2C52 100%);}

/* Notice Section */
.analysis .box.noticeSection { padding: 2.4rem 1.6rem; display: flex; flex-direction: column; gap: 0.4rem;}
.noticeSection h2 { font-family: 'Pretendard', sans-serif; font-size: 1.8rem; font-weight: 700; line-height: 2.2rem; letter-spacing: -0.036rem; color: #FFFFFF; margin: 0;}
.noticeList { list-style: none; padding: 2.4rem 0; margin: 0; display: flex; flex-direction: column; gap: 1.6rem;}
.noticeList li { font-family: 'Pretendard', sans-serif; font-size: 1.6rem; font-weight: 400; line-height: 2rem; letter-spacing: -0.032rem; color: #FA2C52;}

/* Action Buttons */
.analysis .box.actionButtons { padding: 2.4rem 1.6rem; display: flex; flex-direction: column; gap: 0.8rem;}
.actionButtons .btnStart { width: 100%; padding: 1.2rem 2.4rem; background: #00E8AA; border: none; border-radius: 4rem; font-family: 'Pretendard', sans-serif; font-size: 1.6rem; font-weight: 700; line-height: 2rem; letter-spacing: -0.032rem; color: #1B1D1F; text-align: center; cursor: pointer;}
.actionButtons .btnLater { width: 100%; padding: 1.2rem 2.4rem; background: #E8EBED; border: none; border-radius: 4rem; font-family: 'Pretendard', sans-serif; font-size: 1.6rem; font-weight: 400; line-height: 2rem; letter-spacing: -0.032rem; color: #1B1D1F; text-align: center; cursor: pointer;}

/* Related Programs */
.analysis .box.relatedPrograms { padding: 2.4rem 0 12rem; display: flex; flex-direction: column; gap: 2.4rem;}
.relatedPrograms h2 { font-family: 'Pretendard', sans-serif; font-size: 1.8rem; font-weight: 700; line-height: 2.2rem; letter-spacing: -0.036rem; color: #FFFFFF; margin: 0; padding: 0 1.6rem;}
.programList { list-style: none; padding: 0 1.6rem; margin: 0; display: flex; flex-direction: column; gap: 1.6rem;}
.programList li { display: flex; align-items: center; gap: 0.8rem; background: #393C41; border-radius: 0.4rem; padding: 1.6rem;}
.programList li .programInfo { flex: 1; display: flex; flex-direction: column; gap: 0.8rem;}
.programList li .programInfo h3 { font-family: 'Pretendard', sans-serif; font-size: 1.6rem; font-weight: 700; line-height: 2rem; letter-spacing: -0.032rem; color: #FFFFFF; margin: 0;}
.programList li .programInfo p { font-family: 'Pretendard', sans-serif; font-size: 1.4rem; font-weight: 400; line-height: 1.8rem; letter-spacing: -0.014rem; color: #9EA4AA; margin: 0;}
.programList li img { width: 1.6rem; height: 1.6rem; flex-shrink: 0;}

/* No Video Message */
.noVideo { font-size: 1.8rem; margin: auto; text-align: center; padding: 4rem; color: #9EA4AA; }


/* ================================================
   Payment Complete Page Styles
   ================================================ */
.payment-complete-section{padding:4rem 2rem;background:#F9FAFB;min-height:calc(100vh - 200px);}
.payment-complete-container{max-width:800px;margin:0 auto;background:white;padding:4rem 3rem;border-radius:12px;box-shadow:0 4px 6px rgba(0,0,0,0.1);}
.payment-complete-icon{text-align:center;margin-bottom:2rem;}
.payment-complete-title{font-size:2.8rem;font-weight:700;text-align:center;color:#1F2937;margin-bottom:1rem;}
.payment-complete-subtitle{font-size:1.6rem;text-align:center;color:#6B7280;margin-bottom:3rem;}
.payment-receipt-box{background:#F9FAFB;border-radius:8px;padding:2.4rem;margin-bottom:3rem;}
.payment-receipt-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:2rem;border-bottom:2px solid #E5E7EB;margin-bottom:2rem;}
.payment-receipt-header h2{font-size:2rem;font-weight:700;color:#1F2937;margin:0;}
.payment-order-code{font-size:1.4rem;color:#6B7280;font-weight:500;}
.payment-receipt-section{margin-bottom:2.4rem;}
.payment-receipt-section:last-child{margin-bottom:0;}
.payment-receipt-section-title{font-size:1.6rem;font-weight:600;color:#374151;margin-bottom:1.2rem;padding-bottom:0.8rem;border-bottom:1px solid #E5E7EB;}
.payment-receipt-item{display:flex;justify-content:space-between;padding:1rem 0;border-bottom:1px solid #F3F4F6;}
.payment-receipt-item:last-child{border-bottom:none;}
.payment-receipt-label{font-size:1.4rem;color:#6B7280;font-weight:500;}
.payment-receipt-value{font-size:1.4rem;color:#1F2937;font-weight:600;text-align:right;}
.payment-receipt-total{padding-top:1.6rem;border-top:2px solid #E5E7EB !important;margin-top:0.8rem;}
.payment-receipt-total .payment-receipt-label{font-size:1.6rem;font-weight:700;color:#1F2937;}
.payment-receipt-total .payment-receipt-price{font-size:2.4rem;font-weight:700;color:#10B981;}
.payment-complete-actions{display:flex;gap:1.2rem;margin-bottom:3rem;flex-wrap:wrap;}
.btn-payment-primary{width:calc( 50% - 0.6rem); padding:1.4rem 2.4rem;background:#F7F8F9;color:#1B1D1F;border:none;border-radius:8px;font-size:1.6rem;font-weight:600;cursor:pointer;}

.btn-payment-secondary{width:calc( 50% - 0.6rem); padding:1.4rem 2.4rem;background:#00FFBB;color:#1B1D1F;border:none;border-radius:8px;font-size:1.6rem;font-weight:600;cursor:pointer;transition:background 0.2s;}
.btn-payment-secondary:hover{background:#00E8AA;}
.btn-payment-outline{min-width:150px;padding:1.4rem 2.4rem;background:white;color:#6B7280;border:2px solid #E5E7EB;border-radius:8px;font-size:1.6rem;font-weight:600;cursor:pointer;transition:all 0.2s;}
.btn-payment-outline:hover{border-color:#9CA3AF;color:#374151;}
.payment-complete-notice{background:#FEF3C7;border-left:4px solid #F59E0B;padding:1.6rem;border-radius:4px;}
.payment-complete-notice p{font-size:1.4rem;color:#92400E;margin:0.8rem 0;line-height:1.8;}
.payment-complete-notice p:first-child{margin-top:0;}
.payment-complete-notice p:last-child{margin-bottom:0;}
@media (max-width: 768px){
.payment-complete-container{padding:2.4rem 2rem;}
.payment-complete-title{font-size:2.4rem;}
.payment-complete-subtitle{font-size:1.4rem;}
.payment-receipt-box{padding:1.6rem;}
.payment-complete-actions{flex-direction:column;}
.btn-payment-primary,.btn-payment-secondary,.btn-payment-outline{width:100%;min-width:auto;}
}