ChatGPT Plus
붙여넣은 텍스트 (1).txt
문서
메인페이지에 전화번호 입력하면 조회 되는것도 저 파일로 연결되게 해줘
application(1).html
파일
apply-complete(2).html
파일
player-lookup(1).html
파일
player-menu(1).html
파일
index(1).html
파일
자 일단 여기서 css파일 분리 해줘 index.html에 있는 모든 페이지에 공통적으로 적용되는 요소(헤더,푸터,폰트,세팅값 등등)은 common.css에 넣어주고 메인페이지에만 들어가는 css는 main.css 서브페이지에 들어가는 모든 css는 sub.css에 주석으로 구분해서 분리해줘
26.06.24-6.zip
ZIP 아카이브
지금 이렇게만 가지고 있음
이거 왜자꾸 이래 뜸 heidisql 쓴ㄴ 중
heidisql에서 이번엔 또 이렇게 뜸
1번 참가신청 테이블 넣고 실행하니까 이렇게 뜸
생각 중단됨
sub.css 수정 안된것 같은데?
기존에 있던 페이지들이 css가 body.클래스 이런식으로 되어있어서 적용이 안되는것 같음.
수정해서 수정한 파일만 다시 줘
47s 동안 처리함
맞아. 원인 그거였어.
기존 sub.css가 전부 이런 식이었음.
body.page-application .wrap { ... }
body.page-gallery .gallery-wrap { ... }
근데 지금 HTML은 이렇게 바뀌었잖아.
...
그래서 body.page-application이 안 맞아서 CSS가 안 먹은 거야.
수정해서 sub.css 파일만 다시 줌.
다운로드: 수정된 sub.css만 포함한 ZIP
직접 파일만 받을 수도 있어.
sub.css
수정 내용
전부 이렇게 바꿨어.
body.page-application
→
.page.page-application
예시:
.page.page-application .wrap { ... }
.page.page-gallery .gallery-wrap { ... }
.page.page-player-lookup .main { ... }
검사 결과 body.page-는 이제 0개야.
서버에는 이것만 덮어쓰면 됨.
/css/sub.css
신청자 조회 페이지 레이아웃이 좀 깨졌는데 다시한번 봐봐
38s 동안 처리함
맞아. 신청자 조회 페이지는 기존 CSS가 header가 페이지 안에 있는 구조 기준이라서 깨진 거였어.
수정 파일만 다시 줌.
다운로드: 수정된 sub.css ZIP
직접 파일만 받을 거면 이거.
sub_player_lookup_layout_fixed.css
수정한 부분
sub.css 맨 아래에 신청자 조회 페이지 전용 보정 넣었어.
.page.page-player-lookup {
display: block;
min-height: 100vh;
}
.page.page-player-lookup .main {
min-height: 100vh;
padding: 150px 22px 90px;
display: grid;
place-items: center;
box-sizing: border-box;
}
서버에는 이것만 덮어쓰면 됨.
/css/sub.css
sub_player_lookup_layout_fixed.css
/* =========================================================
TBC 여자골프대회 - sub.css
모든 서브페이지 CSS
각 페이지 CSS는 .page.page-페이지명 클래스로 스코프 처리해서 서로 레이아웃이 섞이지 않도록 분리
========================================================= */
/* =========================================================
참가신청 페이지 - application.html
========================================================= */
.page.page-application * {box-sizing: border-box; margin: 0; padding: 0;}
:root {--black:#05070a; --navy:#08111f; --navy-2:#101820; --orange:#F05F22;
--orange-dark:#d94f18; --orange-light:#ff8a4f; --white:#fff;
--gray-50:#f7f8fa; --gray-100:#eef1f5; --gray-200:#dce2e8;
--gray-400:#aab4bf; --gray-500:#74808c; --red:#e64040;
--line:rgba(255,255,255,.14); --shadow:0 24px 70px rgba(0,0,0,.28);}
.page.page-application {scroll-behavior:smooth;}
.page.page-application {font-family:"Pretendard","Noto Sans KR",Arial,sans-serif; color:var(--white); background:var(--black); line-height:1.55; letter-spacing:-.035em;}
.page.page-application a {color:inherit; text-decoration:none;}
.page.page-application button, .page.page-application input, .page.page-application select, .page.page-application textarea {font:inherit;}
.page.page-application {min-height:100vh; background:radial-gradient(circle at 72% 6%,rgba(240,95,34,.26),transparent 32%),linear-gradient(180deg,#05070a 0%,#08111f 42%,#f5f7fa 42%,#f5f7fa 100%);}
.page.page-application .topbar {position:fixed; top:0; left:0; z-index:100; width:100%; background:rgba(5,7,10,.78); backdrop-filter:blur(18px); border-bottom:1px solid rgba(255,255,255,.1);}
.page.page-application .topbar-inner {max-width:1280px; margin:0 auto; padding:18px 32px; display:flex; align-items:center; justify-content:space-between; gap:28px;}
.page.page-application .brand {display:flex; align-items:center; gap:12px; font-weight:900; letter-spacing:-.045em; white-space:nowrap;}
.page.page-application .brand-logo {width:auto; height:42px; display:block; object-fit:contain;}
.page.page-application .brand small {display:block; color:var(--gray-400); font-size:11px; font-weight:800; letter-spacing:.12em; margin-bottom:-2px;}
.page.page-application .brand span:last-child {display:block; font-size:18px;}
.page.page-application .nav {display:flex; align-items:center; gap:30px; color:rgba(255,255,255,.72); font-size:14px; font-weight:800;}
.page.page-application .nav a {position:relative; padding:6px 0;}
.page.page-application .nav a::after {content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--orange); transition:width .22s ease;}
.page.page-application .nav a:hover {color:var(--white);}
.page.page-application .nav a:hover::after {width:100%;}
.page.page-application .header-btn {padding:12px 20px; background:var(--orange); color:var(--white); font-size:14px; font-weight:900; border-radius:2px; transition:.2s; white-space:nowrap;}
.page.page-application .header-btn:hover {background:var(--orange-dark);}
.page.page-application .mobile-menu {display:none; border:none; color:var(--white); background:transparent; font-size:26px; cursor:pointer;}
.page.page-application .hero {position:relative; min-height:480px; padding:132px 32px 74px; display:flex; align-items:end; overflow:hidden;}
.page.page-application .hero::before {content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,7,10,.95) 0%,rgba(5,7,10,.7) 46%,rgba(5,7,10,.22) 100%),url("https://images.unsplash.com/photo-1592919505780-303950717480?auto=format&fit=crop&w=2200&q=85") center/cover no-repeat; opacity:.88;}
.page.page-application .hero::after {content:""; position:absolute; left:0; right:0; bottom:-1px; height:160px; background:linear-gradient(180deg,transparent,#f5f7fa 92%);}
.page.page-application .hero-inner {position:relative; z-index:2; max-width:1280px; width:100%; margin:0 auto;}
.page.page-application .kicker {display:inline-flex; align-items:center; gap:12px; color:rgba(255,255,255,.76); font-size:13px; font-weight:900; letter-spacing:.18em; text-transform:uppercase; margin-bottom:26px;}
.page.page-application .kicker::before {content:""; width:44px; height:2px; background:var(--orange);}
.page.page-application .hero h1 {font-size:clamp(42px,7vw,84px); line-height:.98; letter-spacing:-.085em; font-weight:950; margin-bottom:22px;}
.page.page-application .hero p {max-width:760px; color:rgba(255,255,255,.74); font-size:19px; line-height:1.72;}
.page.page-application .content {position:relative; z-index:5; color:#101820; background:var(--gray-50);}
.page.page-application .wrap {max-width:1280px; margin:0 auto; padding:58px 32px 120px; display:grid; grid-template-columns:320px minmax(0,1fr); gap:28px; align-items:start;}
.page.page-application .side-card {position:sticky; top:96px; background:var(--navy); color:var(--white); border:1px solid rgba(255,255,255,.12); box-shadow:var(--shadow);}
.page.page-application .side-top {padding:30px; border-bottom:1px solid rgba(255,255,255,.12);}
.page.page-application .side-top .label {color:var(--orange-light); font-size:12px; font-weight:950; letter-spacing:.16em; text-transform:uppercase; margin-bottom:16px;}
.page.page-application .side-top h2 {font-size:30px; line-height:1.12; letter-spacing:-.07em; margin-bottom:14px;}
.page.page-application .side-top p {color:rgba(255,255,255,.62); font-size:15px;}
.page.page-application .step-list {padding:10px;}
.page.page-application .step {display:flex; gap:12px; padding:16px 14px; border-bottom:1px solid rgba(255,255,255,.08); color:rgba(255,255,255,.68); font-weight:800; font-size:14px;}
.page.page-application .step:last-child {border-bottom:none;}
.page.page-application .step-num {width:24px; height:24px; flex:0 0 24px; display:grid; place-items:center; background:rgba(240,95,34,.14); color:var(--orange-light); font-size:12px; font-weight:950;}
.page.page-application .form-card {background:var(--white); border:1px solid var(--gray-200); box-shadow:0 20px 50px rgba(8,17,31,.08);}
.page.page-application .form-section {padding:38px; border-bottom:1px solid var(--gray-200);}
.page.page-application .form-section:last-child {border-bottom:none;}
.page.page-application .section-title {display:flex; align-items:start; justify-content:space-between; gap:20px; margin-bottom:24px;}
.page.page-application .section-title h2 {font-size:28px; letter-spacing:-.065em; line-height:1.2; color:#101820;}
.page.page-application .section-title p {max-width:530px; color:var(--gray-500); font-size:15px; text-align:right;}
.page.page-application .all-agree {display:flex; align-items:center; gap:12px; padding:20px; border:2px solid var(--orange); background:rgba(240,95,34,.06); font-size:18px; font-weight:950; margin-bottom:22px; cursor:pointer; user-select:none;}
.page.page-application .all-agree input, .page.page-application .check-row input {accent-color:var(--orange);}
.page.page-application .all-agree input {width:21px; height:21px;}
.page.page-application .agree-box {border:1px solid var(--gray-200); background:var(--gray-50); margin-bottom:16px;}
.page.page-application .agree-head {display:flex; justify-content:space-between; gap:16px; align-items:center; padding:18px 20px; background:#fff; border-bottom:1px solid var(--gray-200);}
.page.page-application .agree-head strong {font-size:18px; letter-spacing:-.04em;}
.page.page-application .required {display:inline-flex; align-items:center; padding:4px 8px; background:rgba(240,95,34,.1); color:var(--orange-dark); font-size:12px; font-weight:950;}
.page.page-application .agree-content {max-height:160px; overflow-y:auto; padding:20px; color:#5e6974; font-size:14px; line-height:1.75;}
.page.page-application .agree-content ul {margin-left:18px;}
.page.page-application .check-row {display:flex; align-items:center; gap:10px; padding:16px 20px; border-top:1px solid var(--gray-200); background:#fff; font-weight:850; cursor:pointer; user-select:none;}
.page.page-application .check-row input {width:19px; height:19px;}
.page.page-application .grid {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px;}
.page.page-application .field {display:grid; gap:9px;}
.page.page-application .field.full {grid-column:1/-1;}
.page.page-application .field label {font-size:15px; font-weight:950; color:#202a34;}
.page.page-application .field label .mark {color:var(--orange); margin-left:3px;}
.page.page-application .control {width:100%; min-height:54px; padding:0 16px; border:1px solid var(--gray-200); background:#fff; color:#101820; outline:none; transition:.18s ease; border-radius:0; font-weight:750;}
.page.page-application textarea.control {min-height:132px; padding:16px; resize:vertical; line-height:1.6;}
.page.page-application .control:focus {border-color:var(--orange); box-shadow:0 0 0 4px rgba(240,95,34,.12);}
.page.page-application .help {color:var(--gray-500); font-size:13px; letter-spacing:-.02em;}
.page.page-application .radio-group {display:grid; grid-template-columns:repeat(2,1fr); gap:10px;}
.page.page-application .radio-card {min-height:54px; display:flex; align-items:center; gap:10px; padding:0 16px; border:1px solid var(--gray-200); background:#fff; cursor:pointer; font-weight:900; transition:.18s ease; user-select:none;}
.page.page-application .radio-card input {width:18px; height:18px; accent-color:var(--orange);}
.page.page-application .radio-card:has(input:checked) {border-color:var(--orange); background:rgba(240,95,34,.06); box-shadow:0 0 0 3px rgba(240,95,34,.1);}
.page.page-application .confirm-card {display:flex; align-items:start; gap:12px; padding:20px; border:1px solid var(--gray-200); background:var(--gray-50); cursor:pointer; user-select:none; font-weight:850; line-height:1.55;}
.page.page-application .confirm-card input {margin-top:2px; width:20px; height:20px; accent-color:var(--orange); flex:0 0 auto;}
.page.page-application .submit-area {display:flex; justify-content:space-between; align-items:center; gap:18px; padding:30px 38px; background:#101820; color:var(--white);}
.page.page-application .submit-text strong {display:block; font-size:20px; letter-spacing:-.05em; margin-bottom:4px;}
.page.page-application .submit-text span {color:rgba(255,255,255,.58); font-size:14px;}
.page.page-application .submit-btn {min-width:190px; min-height:58px; padding:0 26px; border:none; background:var(--orange); color:var(--white); font-weight:950; cursor:pointer; transition:.2s ease; border-radius:0;}
.page.page-application .submit-btn:hover {background:var(--orange-dark); transform:translateY(-2px);}
.page.page-application .submit-btn:disabled {background:#7a838c; cursor:not-allowed; transform:none;}
.page.page-application .error {display:none; color:var(--red); font-size:13px; font-weight:800;}
.page.page-application .field.invalid .control, .page.page-application .field.invalid .radio-card, .page.page-application .agree-box.invalid, .page.page-application .confirm-card.invalid {border-color:var(--red); box-shadow:0 0 0 3px rgba(230,64,64,.08);}
.page.page-application .field.invalid .error, .page.page-application .agree-box.invalid .error, .page.page-application .confirm-card.invalid .error {display:block;}
.page.page-application .toast {position:fixed; left:50%; bottom:28px; z-index:200; transform:translateX(-50%) translateY(18px); opacity:0; pointer-events:none; min-width:min(92vw,460px); padding:18px 20px; background:#101820; color:#fff; border-left:4px solid var(--orange); box-shadow:var(--shadow); transition:.24s ease; font-weight:800;}
.page.page-application .toast.show {opacity:1; transform:translateX(-50%) translateY(0);}
@media (max-width:1060px) {
.page.page-application .nav, .page.page-application .header-btn {display:none}
.page.page-application .mobile-menu {display:block}
.page.page-application .wrap {grid-template-columns:1fr}
.page.page-application .side-card {position:static}
.page.page-application .step-list {display:grid;grid-template-columns:repeat(4,1fr)}
.page.page-application .step {border-bottom:none;border-right:1px solid rgba(255,255,255,.08)}
.page.page-application .step:last-child {border-right:none}
}
@media (max-width:760px) {
.page.page-application .topbar-inner {padding:14px 18px}
.page.page-application .brand-logo {height:34px}
.page.page-application .brand span:last-child {font-size:16px}
.page.page-application .hero {min-height:410px;padding:108px 18px 58px}
.page.page-application .hero h1 {font-size:46px}
.page.page-application .hero p {font-size:16px}
.page.page-application .wrap {padding:36px 18px 80px}
.page.page-application .form-section {padding:28px 20px}
.page.page-application .section-title {display:block}
.page.page-application .section-title p {text-align:left;margin-top:8px}
.page.page-application .grid {grid-template-columns:1fr}
.page.page-application .radio-group {grid-template-columns:1fr}
.page.page-application .step-list {grid-template-columns:1fr 1fr}
.page.page-application .step {border-right:none}
.page.page-application .submit-area {display:block;padding:28px 20px}
.page.page-application .submit-btn {width:100%;margin-top:18px}
}
@media (max-width:460px) {
.page.page-application .brand small {display:none}
.page.page-application .brand span:last-child {font-size:14px}
.page.page-application .brand-logo {height:30px}
.page.page-application .step-list {grid-template-columns:1fr}
.page.page-application .agree-head {display:block}
.page.page-application .agree-head .required {margin-top:8px}
}
/* =========================================================
참가 신청 조회 결과 페이지 - apply-complete.html
========================================================= */
.page.page-apply-complete * {box-sizing: border-box;
margin: 0;
padding: 0;}
:root {--black: #05070a;
--navy: #08111f;
--navy-2: #101820;
--orange: #F05F22;
--orange-dark: #d94f18;
--orange-light: #ff8a4f;
--white: #ffffff;
--gray-50: #f7f8fa;
--gray-100: #eef1f5;
--gray-200: #dce2e8;
--gray-400: #aab4bf;
--gray-500: #74808c;
--green: #1f9d63;
--red: #e64040;
--yellow: #b7791f;
--shadow: 0 24px 70px rgba(0, 0, 0, 0.26);}
.page.page-apply-complete {font-family: "Pretendard", "Noto Sans KR", Arial, sans-serif;
color: #101820;
background:
radial-gradient(circle at 72% 6%, rgba(240, 95, 34, 0.26), transparent 32%),
linear-gradient(180deg, #05070a 0%, #08111f 42%, #f5f7fa 42%, #f5f7fa 100%);
line-height: 1.55;
letter-spacing: -0.035em;
min-height: 100vh;}
.page.page-apply-complete a {color: inherit;
text-decoration: none;}
.page.page-apply-complete .topbar {position: fixed;
top: 0;
left: 0;
z-index: 100;
width: 100%;
background: rgba(5, 7, 10, 0.78);
backdrop-filter: blur(18px);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);}
.page.page-apply-complete .topbar-inner {max-width: 1280px;
margin: 0 auto;
padding: 18px 32px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;}
.page.page-apply-complete .brand {display: flex;
align-items: center;
gap: 12px;
font-weight: 900;
letter-spacing: -0.045em;
white-space: nowrap;
color: #fff;}
.page.page-apply-complete .brand-logo {width: auto;
height: 42px;
display: block;
object-fit: contain;}
.page.page-apply-complete .brand small {display: block;
color: var(--gray-400);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.12em;
margin-bottom: -2px;}
.page.page-apply-complete .brand span:last-child {display: block;
font-size: 18px;}
.page.page-apply-complete .header-btn {padding: 12px 20px;
background: var(--orange);
color: var(--white);
font-size: 14px;
font-weight: 900;
transition: 0.2s;
white-space: nowrap;}
.page.page-apply-complete .header-btn:hover {background: var(--orange-dark);}
.page.page-apply-complete .hero {position: relative;
min-height: 420px;
padding: 132px 32px 74px;
display: flex;
align-items: end;
overflow: hidden;
color: #fff;}
.page.page-apply-complete .hero::before {content: "";
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(5,7,10,0.95) 0%, rgba(5,7,10,0.7) 46%, rgba(5,7,10,0.22) 100%),
url("https://images.unsplash.com/photo-1592919505780-303950717480?auto=format&fit=crop&w=2200&q=85") center/cover no-repeat;
opacity: 0.88;}
.page.page-apply-complete .hero::after {content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 160px;
background: linear-gradient(180deg, transparent, #f5f7fa 92%);}
.page.page-apply-complete .hero-inner {position: relative;
z-index: 2;
max-width: 1280px;
width: 100%;
margin: 0 auto;}
.page.page-apply-complete .kicker {display: inline-flex;
align-items: center;
gap: 12px;
color: rgba(255,255,255,0.76);
font-size: 13px;
font-weight: 900;
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 26px;}
.page.page-apply-complete .kicker::before {content: "";
width: 44px;
height: 2px;
background: var(--orange);}
.page.page-apply-complete .hero h1 {font-size: clamp(42px, 7vw, 84px);
line-height: 0.98;
letter-spacing: -0.085em;
font-weight: 950;
margin-bottom: 22px;}
.page.page-apply-complete .hero p {max-width: 760px;
color: rgba(255,255,255,0.74);
font-size: 19px;
line-height: 1.72;}
.page.page-apply-complete .content {position: relative;
z-index: 5;
max-width: 1180px;
margin: 0 auto;
padding: 48px 32px 120px;}
.page.page-apply-complete .complete-card, .page.page-apply-complete .message-card {background: #fff;
border: 1px solid var(--gray-200);
box-shadow: 0 20px 50px rgba(8, 17, 31, 0.08);
overflow: hidden;}
.page.page-apply-complete .complete-head {padding: 44px;
background: var(--navy-2);
color: #fff;
display: grid;
grid-template-columns: auto 1fr;
gap: 22px;
align-items: start;}
.page.page-apply-complete .check-icon {width: 58px;
height: 58px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--green);
color: #fff;
font-size: 30px;
font-weight: 950;
flex: 0 0 auto;}
.page.page-apply-complete .complete-head h2 {font-size: clamp(30px, 4vw, 48px);
letter-spacing: -0.075em;
line-height: 1.1;
margin-bottom: 12px;}
.page.page-apply-complete .complete-head p {color: rgba(255,255,255,0.66);
font-size: 17px;
line-height: 1.7;}
.page.page-apply-complete .application-no {display: inline-flex;
margin-top: 18px;
padding: 8px 12px;
background: rgba(240,95,34,0.12);
color: var(--orange-light);
font-size: 14px;
font-weight: 900;}
.page.page-apply-complete .status-summary {display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-bottom: 26px;}
.page.page-apply-complete .status-card {padding: 20px;
border: 1px solid var(--gray-200);
background: var(--gray-50);}
.page.page-apply-complete .status-card small {display: block;
color: var(--gray-500);
font-size: 13px;
font-weight: 950;
margin-bottom: 8px;}
.page.page-apply-complete .status-card strong {font-size: 24px;
letter-spacing: -0.06em;}
.page.page-apply-complete .status-card.selected {border-color: rgba(31,157,99,0.32);
background: rgba(31,157,99,0.08);}
.page.page-apply-complete .status-card.pending {border-color: rgba(183,121,31,0.28);
background: rgba(183,121,31,0.08);}
.page.page-apply-complete .status-card.unselected {border-color: rgba(116,128,140,0.28);
background: #f4f6f8;}
.page.page-apply-complete .info-wrap {padding: 40px 44px 44px;}
.page.page-apply-complete .section-title {display: flex;
align-items: end;
justify-content: space-between;
gap: 20px;
margin-bottom: 22px;}
.page.page-apply-complete .section-title h3 {font-size: 28px;
letter-spacing: -0.065em;
color: #101820;}
.page.page-apply-complete .section-title p {color: var(--gray-500);
font-size: 14px;
text-align: right;}
.page.page-apply-complete .info-grid {display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
border-top: 1px solid var(--gray-200);
border-left: 1px solid var(--gray-200);
margin-bottom: 28px;}
.page.page-apply-complete .info-grid:last-child {margin-bottom: 0;}
.page.page-apply-complete .info-item {display: grid;
grid-template-columns: 160px 1fr;
min-height: 62px;
border-right: 1px solid var(--gray-200);
border-bottom: 1px solid var(--gray-200);}
.page.page-apply-complete .info-item.full {grid-column: 1 / -1;}
.page.page-apply-complete .info-label {display: flex;
align-items: center;
padding: 16px 18px;
background: var(--gray-50);
color: #44505c;
font-size: 14px;
font-weight: 950;}
.page.page-apply-complete .info-value {display: flex;
align-items: center;
padding: 16px 18px;
color: #101820;
font-size: 15px;
font-weight: 800;
word-break: break-word;
white-space: pre-line;}
.page.page-apply-complete .selected-section {display: none;
margin-bottom: 28px;
border: 2px solid rgba(240,95,34,0.24);
background: rgba(240,95,34,0.04);
padding: 26px;}
.page.page-apply-complete .selected-section.show {display: block;}
.page.page-apply-complete .selected-section .section-title {margin-bottom: 18px;}
.page.page-apply-complete .selected-section h3 {color: var(--orange-dark);}
.page.page-apply-complete .pending-box {display: none;
margin-bottom: 28px;
padding: 22px;
border-left: 4px solid var(--yellow);
background: rgba(183,121,31,0.08);
color: #5f4a1d;
line-height: 1.72;
font-weight: 800;}
.page.page-apply-complete .pending-box.show {display: block;}
.page.page-apply-complete .notice-box {margin-top: 26px;
padding: 22px;
border-left: 4px solid var(--orange);
background: rgba(240,95,34,0.06);
color: #4b5560;
line-height: 1.72;}
.page.page-apply-complete .notice-box strong {display: block;
color: #101820;
font-size: 17px;
margin-bottom: 6px;}
.page.page-apply-complete .actions {display: flex;
justify-content: flex-end;
gap: 10px;
padding: 0 44px 44px;
flex-wrap: wrap;}
.page.page-apply-complete .btn {min-height: 52px;
padding: 0 22px;
border: 1px solid transparent;
background: #fff;
color: #101820;
font-weight: 950;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;}
.page.page-apply-complete .btn-primary {background: var(--orange);
color: #fff;}
.page.page-apply-complete .btn-primary:hover {background: var(--orange-dark);}
.page.page-apply-complete .btn-outline {border-color: var(--gray-200);}
.page.page-apply-complete .btn-outline:hover {border-color: var(--orange);
color: var(--orange-dark);}
.page.page-apply-complete .message-card {display: none;
padding: 44px;}
.page.page-apply-complete .message-card h2 {font-size: 32px;
letter-spacing: -0.07em;
margin-bottom: 12px;}
.page.page-apply-complete .message-card p {color: var(--gray-500);
margin-bottom: 24px;}
.page.page-apply-complete .message-card.error h2 {color: var(--red);}
@media print {
.page.page-apply-complete .topbar, .page.page-apply-complete .hero, .page.page-apply-complete .actions {display: none;}
.page.page-apply-complete {background: #fff;}
.page.page-apply-complete .content {padding: 0;}
.page.page-apply-complete .complete-card {box-shadow: none;
border: none;}
.page.page-apply-complete .complete-head {color: #101820;
background: #fff;
border-bottom: 2px solid #101820;}
.page.page-apply-complete .complete-head p {color: #555;}
.page.page-apply-complete .check-icon {background: #101820;}
}
@media (max-width: 860px) {
.page.page-apply-complete .content {padding: 36px 18px 80px;}
.page.page-apply-complete .topbar-inner {padding: 14px 18px;}
.page.page-apply-complete .brand-logo {height: 34px;}
.page.page-apply-complete .brand span:last-child {font-size: 16px;}
.page.page-apply-complete .hero {min-height: 380px;
padding: 108px 18px 58px;}
.page.page-apply-complete .complete-head {grid-template-columns: 1fr;
padding: 34px 24px;}
.page.page-apply-complete .info-wrap {padding: 30px 24px;}
.page.page-apply-complete .section-title {display: block;}
.page.page-apply-complete .section-title p {text-align: left;
margin-top: 8px;}
.page.page-apply-complete .status-summary, .page.page-apply-complete .info-grid {grid-template-columns: 1fr;}
.page.page-apply-complete .info-item {grid-template-columns: 120px 1fr;}
.page.page-apply-complete .actions {padding: 0 24px 34px;}
.page.page-apply-complete .btn {width: 100%;}
}
@media (max-width: 460px) {
.page.page-apply-complete .brand small {display: none;}
.page.page-apply-complete .brand span:last-child {font-size: 14px;}
.page.page-apply-complete .brand-logo {height: 30px;}
.page.page-apply-complete .info-item {grid-template-columns: 1fr;}
.page.page-apply-complete .info-label {padding-bottom: 6px;}
.page.page-apply-complete .info-value {padding-top: 6px;}
}
/* =========================================================
참가정보 조회 페이지 - player-lookup.html
========================================================= */
.page.page-player-lookup * {box-sizing: border-box;
margin: 0;
padding: 0;}
:root {--black: #05070a;
--navy: #08111f;
--navy2: #101820;
--orange: #F05F22;
--orange-dark: #d94f18;
--orange-light: #ff8a4f;
--white: #ffffff;
--gray-50: #f7f8fa;
--gray-100: #eef1f5;
--gray-200: #dce2e8;
--gray-400: #aab4bf;
--gray-500: #74808c;
--red: #e64040;
--green: #1f9d63;
--shadow: 0 24px 70px rgba(0, 0, 0, 0.28);}
.page.page-player-lookup {min-height: 100vh;
font-family: "Pretendard", "Noto Sans KR", Arial, sans-serif;
color: var(--white);
background:
radial-gradient(circle at 72% 8%, rgba(240,95,34,0.26), transparent 34%),
linear-gradient(135deg, #05070a 0%, #08111f 100%);
line-height: 1.55;
letter-spacing: -0.035em;}
.page.page-player-lookup a {color: inherit;
text-decoration: none;}
.page.page-player-lookup button, .page.page-player-lookup input {font: inherit;}
.page.page-player-lookup {min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr;}
.page.page-player-lookup .topbar {padding: 18px 28px;
border-bottom: 1px solid rgba(255,255,255,0.1);
background: rgba(5,7,10,0.58);
backdrop-filter: blur(18px);}
.page.page-player-lookup .topbar-inner {max-width: 1180px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;}
.page.page-player-lookup .brand {display: flex;
align-items: center;
gap: 12px;
font-weight: 950;
white-space: nowrap;}
.page.page-player-lookup .brand-logo {height: 42px;
width: auto;
object-fit: contain;}
.page.page-player-lookup .brand small {display: block;
color: var(--gray-400);
font-size: 11px;
font-weight: 900;
letter-spacing: 0.14em;
margin-bottom: -2px;}
.page.page-player-lookup .brand span:last-child {display: block;
font-size: 17px;
letter-spacing: -0.05em;}
.page.page-player-lookup .home-link {padding: 11px 16px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.16);
color: rgba(255,255,255,0.82);
font-size: 14px;
font-weight: 900;}
.page.page-player-lookup .main {position: relative;
display: grid;
place-items: center;
padding: 54px 22px 80px;
overflow: hidden;}
.page.page-player-lookup .main::before {content: "";
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(5,7,10,0.9), rgba(5,7,10,0.55)),
url("https://images.unsplash.com/photo-1592919505780-303950717480?auto=format&fit=crop&w=2200&q=85") center/cover no-repeat;
opacity: 0.22;}
.page.page-player-lookup .card {position: relative;
z-index: 2;
width: min(100%, 560px);
background: rgba(16,24,32,0.88);
border: 1px solid rgba(255,255,255,0.14);
box-shadow: var(--shadow);
backdrop-filter: blur(18px);
overflow: hidden;}
.page.page-player-lookup .card-head {padding: 38px 36px 28px;
border-bottom: 1px solid rgba(255,255,255,0.1);}
.page.page-player-lookup .label {display: inline-flex;
align-items: center;
gap: 10px;
color: var(--orange-light);
font-size: 12px;
font-weight: 950;
letter-spacing: 0.16em;
text-transform: uppercase;
margin-bottom: 20px;}
.page.page-player-lookup .label::before {content: "";
width: 36px;
height: 2px;
background: var(--orange);}
.page.page-player-lookup h1 {font-size: clamp(34px, 6vw, 54px);
line-height: 1.02;
letter-spacing: -0.085em;
margin-bottom: 16px;}
.page.page-player-lookup .desc {color: rgba(255,255,255,0.66);
font-size: 16px;
line-height: 1.72;}
.page.page-player-lookup .card-body {padding: 32px 36px 36px;}
.page.page-player-lookup .lookup-form {display: grid;
grid-template-columns: 1fr auto;
border: 1px solid rgba(255,255,255,0.2);
background: rgba(255,255,255,0.06);
margin-bottom: 14px;}
.page.page-player-lookup .lookup-form input {min-width: 0;
min-height: 58px;
padding: 0 16px;
border: none;
outline: none;
background: transparent;
color: #fff;
font-weight: 900;}
.page.page-player-lookup .lookup-form input::placeholder {color: rgba(255,255,255,0.38);}
.page.page-player-lookup .lookup-form button {min-height: 58px;
padding: 0 22px;
border: none;
background: var(--orange);
color: #fff;
font-weight: 950;
cursor: pointer;}
.page.page-player-lookup .lookup-form button:disabled {background: #727a83;
cursor: not-allowed;}
.page.page-player-lookup .message {min-height: 48px;
padding: 14px 16px;
background: rgba(255,255,255,0.06);
border-left: 3px solid var(--orange-light);
color: rgba(255,255,255,0.72);
font-size: 14px;
font-weight: 800;
white-space: pre-line;}
.page.page-player-lookup .message.error {border-left-color: var(--red);
background: rgba(230,64,64,0.1);
color: #ffd8d8;}
.page.page-player-lookup .message.success {border-left-color: var(--green);
background: rgba(31,157,99,0.12);
color: #d8ffea;}
.page.page-player-lookup .quick-grid {display: grid;
gap: 12px;}
.page.page-player-lookup .quick-btn {min-height: 68px;
padding: 0 22px;
background: #fff;
color: var(--navy2);
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 950;
border: 1px solid rgba(255,255,255,0.1);
transition: 0.2s ease;}
.page.page-player-lookup .quick-btn:hover {transform: translateY(-2px);
box-shadow: 0 16px 32px rgba(0,0,0,0.2);}
.page.page-player-lookup .quick-btn.primary {background: var(--orange);
color: #fff;}
.page.page-player-lookup .quick-btn span:first-child {display: grid;
gap: 2px;}
.page.page-player-lookup .quick-btn small {color: rgba(16,24,32,0.58);
font-size: 13px;
font-weight: 800;}
.page.page-player-lookup .quick-btn.primary small {color: rgba(255,255,255,0.68);}
.page.page-player-lookup .code-box {margin-bottom: 18px;
padding: 14px 16px;
background: rgba(240,95,34,0.1);
border-left: 3px solid var(--orange);
color: rgba(255,255,255,0.76);
font-size: 14px;
font-weight: 800;
word-break: break-all;}
@media (max-width: 620px) {
.page.page-player-lookup .topbar {padding: 14px 18px;}
.page.page-player-lookup .brand-logo {height: 32px;}
.page.page-player-lookup .brand small {display: none;}
.page.page-player-lookup .brand span:last-child {font-size: 14px;}
.page.page-player-lookup .home-link {display: none;}
.page.page-player-lookup .card-head, .page.page-player-lookup .card-body {padding-left: 24px;
padding-right: 24px;}
.page.page-player-lookup .lookup-form {grid-template-columns: 1fr;}
.page.page-player-lookup .lookup-form button {width: 100%;}
}
/* =========================================================
신청자 퀵메뉴 페이지 - player-menu.html
========================================================= */
.page.page-player-menu * {box-sizing: border-box;
margin: 0;
padding: 0;}
:root {--black: #05070a;
--navy: #08111f;
--navy2: #101820;
--orange: #F05F22;
--orange-dark: #d94f18;
--orange-light: #ff8a4f;
--white: #ffffff;
--gray-50: #f7f8fa;
--gray-100: #eef1f5;
--gray-200: #dce2e8;
--gray-400: #aab4bf;
--gray-500: #74808c;
--red: #e64040;
--green: #1f9d63;
--shadow: 0 24px 70px rgba(0, 0, 0, 0.28);}
.page.page-player-menu {min-height: 100vh;
font-family: "Pretendard", "Noto Sans KR", Arial, sans-serif;
color: var(--white);
background:
radial-gradient(circle at 72% 8%, rgba(240,95,34,0.26), transparent 34%),
linear-gradient(135deg, #05070a 0%, #08111f 100%);
line-height: 1.55;
letter-spacing: -0.035em;}
.page.page-player-menu a {color: inherit;
text-decoration: none;}
.page.page-player-menu button, .page.page-player-menu input {font: inherit;}
.page.page-player-menu {min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr;}
.page.page-player-menu .topbar {padding: 18px 28px;
border-bottom: 1px solid rgba(255,255,255,0.1);
background: rgba(5,7,10,0.58);
backdrop-filter: blur(18px);}
.page.page-player-menu .topbar-inner {max-width: 1180px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;}
.page.page-player-menu .brand {display: flex;
align-items: center;
gap: 12px;
font-weight: 950;
white-space: nowrap;}
.page.page-player-menu .brand-logo {height: 42px;
width: auto;
object-fit: contain;}
.page.page-player-menu .brand small {display: block;
color: var(--gray-400);
font-size: 11px;
font-weight: 900;
letter-spacing: 0.14em;
margin-bottom: -2px;}
.page.page-player-menu .brand span:last-child {display: block;
font-size: 17px;
letter-spacing: -0.05em;}
.page.page-player-menu .home-link {padding: 11px 16px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.16);
color: rgba(255,255,255,0.82);
font-size: 14px;
font-weight: 900;}
.page.page-player-menu .main {position: relative;
display: grid;
place-items: center;
padding: 54px 22px 80px;
overflow: hidden;}
.page.page-player-menu .main::before {content: "";
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(5,7,10,0.9), rgba(5,7,10,0.55)),
url("https://images.unsplash.com/photo-1592919505780-303950717480?auto=format&fit=crop&w=2200&q=85") center/cover no-repeat;
opacity: 0.22;}
.page.page-player-menu .card {position: relative;
z-index: 2;
width: min(100%, 560px);
background: rgba(16,24,32,0.88);
border: 1px solid rgba(255,255,255,0.14);
box-shadow: var(--shadow);
backdrop-filter: blur(18px);
overflow: hidden;}
.page.page-player-menu .card-head {padding: 38px 36px 28px;
border-bottom: 1px solid rgba(255,255,255,0.1);}
.page.page-player-menu .label {display: inline-flex;
align-items: center;
gap: 10px;
color: var(--orange-light);
font-size: 12px;
font-weight: 950;
letter-spacing: 0.16em;
text-transform: uppercase;
margin-bottom: 20px;}
.page.page-player-menu .label::before {content: "";
width: 36px;
height: 2px;
background: var(--orange);}
.page.page-player-menu h1 {font-size: clamp(34px, 6vw, 54px);
line-height: 1.02;
letter-spacing: -0.085em;
margin-bottom: 16px;}
.page.page-player-menu .desc {color: rgba(255,255,255,0.66);
font-size: 16px;
line-height: 1.72;}
.page.page-player-menu .card-body {padding: 32px 36px 36px;}
.page.page-player-menu .lookup-form {display: grid;
grid-template-columns: 1fr auto;
border: 1px solid rgba(255,255,255,0.2);
background: rgba(255,255,255,0.06);
margin-bottom: 14px;}
.page.page-player-menu .lookup-form input {min-width: 0;
min-height: 58px;
padding: 0 16px;
border: none;
outline: none;
background: transparent;
color: #fff;
font-weight: 900;}
.page.page-player-menu .lookup-form input::placeholder {color: rgba(255,255,255,0.38);}
.page.page-player-menu .lookup-form button {min-height: 58px;
padding: 0 22px;
border: none;
background: var(--orange);
color: #fff;
font-weight: 950;
cursor: pointer;}
.page.page-player-menu .lookup-form button:disabled {background: #727a83;
cursor: not-allowed;}
.page.page-player-menu .message {min-height: 48px;
padding: 14px 16px;
background: rgba(255,255,255,0.06);
border-left: 3px solid var(--orange-light);
color: rgba(255,255,255,0.72);
font-size: 14px;
font-weight: 800;
white-space: pre-line;}
.page.page-player-menu .message.error {border-left-color: var(--red);
background: rgba(230,64,64,0.1);
color: #ffd8d8;}
.page.page-player-menu .message.success {border-left-color: var(--green);
background: rgba(31,157,99,0.12);
color: #d8ffea;}
.page.page-player-menu .quick-grid {display: grid;
gap: 12px;}
.page.page-player-menu .quick-btn {min-height: 68px;
padding: 0 22px;
background: #fff;
color: var(--navy2);
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 950;
border: 1px solid rgba(255,255,255,0.1);
transition: 0.2s ease;}
.page.page-player-menu .quick-btn:hover {transform: translateY(-2px);
box-shadow: 0 16px 32px rgba(0,0,0,0.2);}
.page.page-player-menu .quick-btn.primary {background: var(--orange);
color: #fff;}
.page.page-player-menu .quick-btn span:first-child {display: grid;
gap: 2px;}
.page.page-player-menu .quick-btn small {color: rgba(16,24,32,0.58);
font-size: 13px;
font-weight: 800;}
.page.page-player-menu .quick-btn.primary small {color: rgba(255,255,255,0.68);}
.page.page-player-menu .code-box {margin-bottom: 18px;
padding: 14px 16px;
background: rgba(240,95,34,0.1);
border-left: 3px solid var(--orange);
color: rgba(255,255,255,0.76);
font-size: 14px;
font-weight: 800;
word-break: break-all;}
/* =========================================================
대회갤러리 페이지 - gallery.html
========================================================= */
.page-gallery {
color: #101820;
background:
radial-gradient(circle at 72% 6%, rgba(240,95,34,.26), transparent 32%),
linear-gradient(180deg,#05070a 0%,#08111f 42%,#f5f7fa 42%,#f5f7fa 100%);
}
.page-gallery .gallery-hero {
position: relative;
min-height: 420px;
padding: 132px 32px 74px;
display: flex;
align-items: end;
overflow: hidden;
color: #fff;
}
.page-gallery .gallery-hero::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(90deg,rgba(5,7,10,.95) 0%,rgba(5,7,10,.7) 46%,rgba(5,7,10,.22) 100%),
url("https://images.unsplash.com/photo-1592919505780-303950717480?auto=format&fit=crop&w=2200&q=85") center/cover no-repeat;
opacity: .88;
}
.page-gallery .gallery-hero::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 160px;
background: linear-gradient(180deg,transparent,#f5f7fa 92%);
}
.page-gallery .gallery-hero-inner {
position: relative;
z-index: 2;
max-width: 1280px;
width: 100%;
margin: 0 auto;
}
.page-gallery .gallery-hero h1 {
font-size: clamp(42px,7vw,84px);
line-height: .98;
letter-spacing: -.085em;
font-weight: 950;
margin-bottom: 22px;
}
.page-gallery .gallery-hero p {
max-width: 760px;
color: rgba(255,255,255,.74);
font-size: 19px;
line-height: 1.72;
}
.page-gallery .gallery-content {
position: relative;
z-index: 5;
background: #f5f7fa;
}
.page-gallery .gallery-wrap {
max-width: 1280px;
margin: 0 auto;
padding: 58px 32px 120px;
}
.page-gallery .gallery-head {
display: flex;
align-items: end;
justify-content: space-between;
gap: 28px;
margin-bottom: 34px;
}
.page-gallery .gallery-head h2 {
font-size: clamp(34px,5vw,62px);
line-height: 1.03;
letter-spacing: -.08em;
font-weight: 950;
color: #101820;
}
.page-gallery .gallery-head p {
max-width: 560px;
color: #74808c;
font-size: 16px;
line-height: 1.72;
text-align: right;
}
.page-gallery .gallery-slider {
background: #fff;
border: 1px solid #dce2e8;
box-shadow: 0 20px 50px rgba(8,17,31,.08);
overflow: hidden;
}
.page-gallery .gallery-stage {
height: min(62vw, 640px);
min-height: 360px;
background: #101820;
display: grid;
place-items: center;
}
.page-gallery .gallery-loading,
.page-gallery .gallery-empty {
color: rgba(255,255,255,.72);
text-align: center;
padding: 30px;
}
.page-gallery .gallery-empty strong {
display: block;
color: #fff;
font-size: 24px;
letter-spacing: -.06em;
margin-bottom: 8px;
}
.page-gallery .gallery-main-photo {
width: 100%;
height: 100%;
border: 0;
background: transparent;
cursor: zoom-in;
}
.page-gallery .gallery-main-photo img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.page-gallery .gallery-control {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 16px;
background: #fff;
border-top: 1px solid #dce2e8;
}
.page-gallery .gallery-nav-btn {
min-width: 92px;
min-height: 46px;
border: 1px solid #dce2e8;
background: #fff;
color: #101820;
font-weight: 950;
cursor: pointer;
}
.page-gallery .gallery-nav-btn.primary {
background: #F05F22;
border-color: #F05F22;
color: #fff;
}
.page-gallery .gallery-nav-btn:disabled {
opacity: .45;
cursor: not-allowed;
}
.page-gallery .gallery-count {
color: #74808c;
font-size: 14px;
font-weight: 900;
text-align: center;
}
.page-gallery .gallery-grid {
display: grid;
grid-template-columns: repeat(4,minmax(0,1fr));
gap: 16px;
margin-top: 22px;
}
.page-gallery .gallery-thumb {
border: 1px solid #dce2e8;
background: #fff;
cursor: pointer;
text-align: left;
transition: .18s ease;
overflow: hidden;
}
.page-gallery .gallery-thumb:hover,
.page-gallery .gallery-thumb.active {
border-color: #F05F22;
box-shadow: 0 16px 36px rgba(8,17,31,.1);
transform: translateY(-3px);
}
.page-gallery .gallery-thumb img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
display: block;
background: #101820;
}
.page-gallery .gallery-thumb span {
display: block;
padding: 13px 14px;
color: #101820;
font-size: 14px;
font-weight: 900;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.page-gallery .gallery-modal {
position: fixed;
inset: 0;
z-index: 300;
display: none;
place-items: center;
padding: 60px 24px;
background: rgba(5,7,10,.88);
}
.page-gallery .gallery-modal.show {
display: grid;
}
.page-gallery .gallery-modal img {
max-width: min(100%, 1180px);
max-height: 78vh;
object-fit: contain;
box-shadow: 0 24px 70px rgba(0,0,0,.46);
}
.page-gallery .gallery-modal-close {
position: absolute;
top: 22px;
right: 24px;
width: 44px;
height: 44px;
border: 1px solid rgba(255,255,255,.24);
background: rgba(255,255,255,.08);
color: #fff;
font-size: 30px;
line-height: 1;
cursor: pointer;
}
.page-gallery .gallery-modal-title {
margin-top: 16px;
color: rgba(255,255,255,.8);
font-weight: 900;
}
@media (max-width: 980px) {
.page-gallery .gallery-head {
display: block;
}
.page-gallery .gallery-head p {
text-align: left;
margin-top: 10px;
}
.page-gallery .gallery-grid {
grid-template-columns: repeat(2,minmax(0,1fr));
}
}
@media (max-width: 620px) {
.page.page-player-menu .topbar {padding: 14px 18px;}
.page.page-player-menu .brand-logo {height: 32px;}
.page.page-player-menu .brand small {display: none;}
.page.page-player-menu .brand span:last-child {font-size: 14px;}
.page.page-player-menu .home-link {display: none;}
.page.page-player-menu .card-head, .page.page-player-menu .card-body {padding-left: 24px;
padding-right: 24px;}
.page.page-player-menu .lookup-form {grid-template-columns: 1fr;}
.page.page-player-menu .lookup-form button {width: 100%;}
.page-gallery .gallery-hero {
min-height: 380px;
padding: 108px 18px 58px;
}
.page-gallery .gallery-hero h1 {
font-size: 46px;
}
.page-gallery .gallery-hero p {
font-size: 16px;
}
.page-gallery .gallery-wrap {
padding: 36px 18px 80px;
}
.page-gallery .gallery-stage {
min-height: 260px;
}
.page-gallery .gallery-control {
display: grid;
}
.page-gallery .gallery-nav-btn {
width: 100%;
}
.page-gallery .gallery-grid {
grid-template-columns: 1fr;
}
}
/* =========================================================
대회갤러리 페이지 - gallery.html
헤더/푸터 보정 CSS
현재 index.html 첫 버전 헤더 디자인과 동일하게 맞춤
========================================================= */
.page.page-gallery .topbar {
position: fixed;
top: 0;
left: 0;
z-index: 100;
width: 100%;
background: rgba(5, 7, 10, 0.72);
backdrop-filter: blur(18px);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.page.page-gallery .topbar-inner {
max-width: 1280px;
margin: 0 auto;
padding: 18px 32px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
}
.page.page-gallery .brand {
display: flex;
align-items: center;
gap: 12px;
font-weight: 900;
letter-spacing: -0.045em;
white-space: nowrap;
color: #ffffff;
}
.page.page-gallery .brand-logo {
width: auto;
height: 42px;
display: block;
object-fit: contain;
}
.page.page-gallery .brand small {
display: block;
color: var(--gray-500);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.12em;
margin-bottom: -2px;
}
.page.page-gallery .brand span:last-child {
display: block;
font-size: 18px;
}
.page.page-gallery .nav {
display: flex;
align-items: center;
gap: 32px;
color: rgba(255,255,255,0.72);
font-size: 14px;
font-weight: 800;
}
.page.page-gallery .nav a {
position: relative;
padding: 6px 0;
color: inherit;
text-decoration: none;
}
.page.page-gallery .nav a::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 2px;
background: var(--blue-light);
transition: width 0.22s ease;
}
.page.page-gallery .nav a:hover {
color: var(--white);
}
.page.page-gallery .nav a:hover::after {
width: 100%;
}
.page.page-gallery .header-btn {
padding: 12px 20px;
background: var(--blue);
color: var(--white);
font-size: 14px;
font-weight: 900;
border-radius: 2px;
transition: 0.2s;
white-space: nowrap;
display: inline-flex;
align-items: center;
justify-content: center;
}
.page.page-gallery .header-btn:hover {
background: #d94f18;
}
.page.page-gallery .mobile-menu {
display: none;
border: none;
color: var(--white);
background: transparent;
font-size: 26px;
cursor: pointer;
}
.page.page-gallery .kicker {
display: inline-flex;
align-items: center;
gap: 12px;
color: rgba(255,255,255,.76);
font-size: 13px;
font-weight: 900;
letter-spacing: .18em;
text-transform: uppercase;
margin-bottom: 26px;
}
.page.page-gallery .kicker::before {
content: "";
width: 44px;
height: 2px;
background: var(--blue-light);
}
.page.page-gallery .footer {
background: #05070a;
color: rgba(255,255,255,0.58);
padding: 44px 32px 58px;
border-top: 1px solid rgba(255,255,255,0.12);
}
.page.page-gallery .footer-inner {
max-width: 1280px;
margin: 0 auto;
display: flex;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
}
.page.page-gallery .footer-inner strong {
color: #fff;
font-size: 19px;
}
.page.page-gallery .footer-inner p {
font-size: 14px;
margin-top: 8px;
}
@media (max-width: 1060px) {
.page.page-gallery .nav,
.page.page-gallery .header-btn {
display: none;
}
.page.page-gallery .mobile-menu {
display: block;
}
}
@media (max-width: 760px) {
.page.page-gallery .topbar-inner {
padding: 14px 18px;
}
.page.page-gallery .brand-logo {
height: 34px;
}
.page.page-gallery .brand span:last-child {
font-size: 16px;
}
}
@media (max-width: 460px) {
.page.page-gallery .brand small {
display: none;
}
.page.page-gallery .brand span:last-child {
font-size: 14px;
}
.page.page-gallery .brand-logo {
height: 30px;
}
}
/* =========================================================
body class → div.page class 구조 변경 보정
현재 HTML 구조:
========================================================= */
.page.page-application,
.page.page-apply-complete,
.page.page-player-lookup,
.page.page-player-menu,
.page.page-gallery {
min-height: 100vh;
}
/* =========================================================
신청자 조회 페이지 레이아웃 재보정
- 기존 CSS는 header가 .page-player-lookup 안에 있는 구조 기준이었음
- 현재 구조는 body 직계: header / div.page.page-player-lookup / footer
- 그래서 page 안의 main이 화면 높이를 잡도록 수정
========================================================= */
.page.page-player-lookup {
display: block;
min-height: 100vh;
}
.page.page-player-lookup .main {
min-height: 100vh;
padding: 150px 22px 90px;
display: grid;
place-items: center;
box-sizing: border-box;
}
.page.page-player-lookup .card {
width: min(100%, 560px);
margin: 0 auto;
}
@media (max-width: 620px) {
.page.page-player-lookup .main {
min-height: auto;
padding: 118px 18px 70px;
align-items: start;
}
.page.page-player-lookup .card {
width: 100%;
}
}