@charset "UTF-8";
/* ============================================================
   ETF DNA LAB - 팝업 / 페이지 공통
   - MO(~1023px) : 화면 전체를 덮는 페이지 형태
   - PC(1024px~) : 딤 위에 중앙 정렬된 팝업 형태
   - 내부 수치는 시안(720px 기준) 1px = var(--u) 로 환산해서 사용
   ============================================================ */

.pop {
    display: none;
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1100;
    font-family: 'Spoqa Han Sans', 'Apple SD Gothic Neo', sans-serif;
    letter-spacing: -.02em;
}
.pop.open { display: block; }
.pop .pop-dim { display: none; }

.pop-panel {
    --u: .13889vw;              /* 시안 720px == 100vw */
    --red: #F23C36;
    --gray: #9B9B9B;
    --bg: #F3F5F7;
    --line: #EDEDED;
    position: absolute; top: 0; left: 0;
    display: flex; flex-direction: column;
    width: 100%; height: 100%;
    background-color: #fff;
    overflow: hidden;
}

/* ---------- 헤더 ---------- */
.pop-head {
    position: relative; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    height: calc(var(--u) * 96);
    padding: 0 calc(var(--u) * 30);
}
.pop-head h2 { font-size: calc(var(--u) * 26); font-weight: 700; color: #111; }
.pop-head .pop-back,
.pop-head .pop-close {
    position: absolute; top: 50%; width: calc(var(--u) * 56); height: calc(var(--u) * 56);
    margin-top: calc(var(--u) * -28); cursor: pointer;
}
.pop-head .pop-back { left: calc(var(--u) * 26); }
.pop-head .pop-close { right: calc(var(--u) * 26); }
.pop-head .pop-back svg,
.pop-head .pop-close svg { display: block; width: 100%; height: 100%; fill: none; stroke: #111; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pop-head.on-color { background-color: transparent; }
.pop-head.on-color h2 { color: #fff; }
.pop-head.on-color .pop-back svg,
.pop-head.on-color .pop-close svg { stroke: #fff; }

/* ---------- 본문 / 하단 ---------- */
.pop-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.pop-body::-webkit-scrollbar { width: 5px; }
.pop-body::-webkit-scrollbar-thumb { background-color: #dbdbdb; border-radius: 5px; }
.pop-inner { padding: 0 calc(var(--u) * 40) calc(var(--u) * 50); }
.pop-foot { position: relative; flex: 0 0 auto; padding: calc(var(--u) * 20) calc(var(--u) * 40) calc(var(--u) * 40); background-color: #fff; }
/* 본문이 잘려 있을 때 아래에 내용이 더 있다는 힌트 */
.pop-panel.can-scroll .pop-foot:before {
    content: ''; position: absolute; left: 0; right: 0; top: calc(var(--u) * -44);
    height: calc(var(--u) * 44); pointer-events: none;
    background: linear-gradient(rgba(255, 255, 255, 0), #fff);
}

/* 결과 팝업의 두 버튼 (여백을 인라인이 아닌 여기서 관리한다) */
.res-share { margin-top: calc(var(--u) * 24); }
.res-save  { margin-top: calc(var(--u) * 24); }
.res-share + .res-save { margin-top: calc(var(--u) * 16); }

/* 동의서 이미지 : 문서 스캔이라 좌우 여백 없이 꽉 채운다 */
.pop-doc { padding-bottom: calc(var(--u) * 30); font-size: 0; line-height: 0; }
.pop-doc img { display: block; width: 100%; height: auto; }

/* ---------- 공통 버튼 ---------- */
.pop-btn {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: calc(var(--u) * 88);
    border: 0 none; border-radius: calc(var(--u) * 44);
    background-color: var(--red); color: #fff;
    font-family: inherit; font-size: calc(var(--u) * 30); font-weight: 700; letter-spacing: -.02em;
    cursor: pointer;
}
.pop-btn[disabled],
.pop-btn.disabled { background-color: var(--gray); cursor: default; }
/* 추적 규칙(모든 주요 버튼은 <a>)에 맞추느라 button -> a 로 바꿨습니다.
   a 는 기본이 inline 이라 width/height/가운데 정렬이 먹지 않으므로 여기서 되살립니다. */
.pop-btn, .pop-sidebtn, .pop-linkbtn, .prize-btn {
    box-sizing: border-box; text-decoration: none;
    cursor: pointer; -webkit-user-select: none; user-select: none;
}
.pop-btn, .pop-sidebtn {
    display: flex; align-items: center; justify-content: center; text-align: center;
}
.pop-btn.disabled, .pop-sidebtn.disabled { cursor: default; }
.pop-btn.line { border: calc(var(--u) * 2) solid #111; background-color: #fff; color: #111; }
.pop-btn-row { display: flex; gap: calc(var(--u) * 20); }
.pop-btn-row .pop-btn { flex: 1 1 0; width: auto; }

/* 아이콘형 리스트 버튼 */
.pop-linkbtn {
    display: flex; align-items: center; width: 100%;
    height: calc(var(--u) * 84); padding: 0 calc(var(--u) * 24);
    border: calc(var(--u) * 2) solid var(--line); border-radius: calc(var(--u) * 12);
    background-color: #fff; color: #111;
    font-family: inherit; font-size: calc(var(--u) * 27); font-weight: 700; text-align: left;
    cursor: pointer;
}
.pop-linkbtn .ico { flex: 0 0 auto; width: calc(var(--u) * 34); margin-right: calc(var(--u) * 12); }
.pop-linkbtn .txt { flex: 1 1 auto; }
.pop-linkbtn .arw { flex: 0 0 auto; width: calc(var(--u) * 20); height: calc(var(--u) * 20); border-top: calc(var(--u) * 3) solid #555; border-right: calc(var(--u) * 3) solid #555; transform: rotate(45deg); }

/* ---------- 폼 ---------- */
.pop-field { margin-top: calc(var(--u) * 34); }
.pop-field > label { display: block; margin-bottom: calc(var(--u) * 14); font-size: calc(var(--u) * 26); font-weight: 700; color: #111; }
/* 체크박스형 label 은 위 규칙(block)에 덮이지 않도록 명시 */
.pop-field > label.pop-check { display: flex; align-items: center; margin-bottom: 0; }
.pop-field .row { display: flex; gap: calc(var(--u) * 14); }
.pop-input {
    width: 100%; height: calc(var(--u) * 84); padding: 0 calc(var(--u) * 24);
    border: calc(var(--u) * 2) solid #DDD; border-radius: calc(var(--u) * 12);
    background-color: #fff; color: #111;
    font-family: inherit; font-size: calc(var(--u) * 28); letter-spacing: -.02em;
}
.pop-input::placeholder { color: #BBB; }
.pop-input:focus { border-color: #111; }
.pop-input.err { border-color: var(--red); }
.pop-sidebtn {
    flex: 0 0 auto; width: calc(var(--u) * 200); height: calc(var(--u) * 84);
    border: calc(var(--u) * 2) solid transparent; border-radius: calc(var(--u) * 12);
    background-color: var(--gray); color: #fff;
    font-family: inherit; font-size: calc(var(--u) * 25); font-weight: 700; letter-spacing: -.02em;
    cursor: pointer;
}
.pop-sidebtn.on { border-color: #111; background-color: #fff; color: #111; }
/* 인증이 끝나 더 누를 필요가 없는 상태 (.on 보다 뒤에 와야 덮어쓴다) */
.pop-sidebtn.disabled {
    border-color: transparent; background-color: #E9ECEF; color: #ADB5BD;
}

/* 체크박스 */
.pop-check { display: flex; align-items: center; cursor: pointer; }
.pop-check input { position: absolute; width: 0; height: 0; opacity: 0; }
/* 체크는 회전 사각형 대신 SVG 로 그린다 (회전 시 중심이 틀어져 정렬이 안 맞던 문제) */
.pop-check .box {
    display: block; flex: 0 0 auto; position: relative;
    width: calc(var(--u) * 40); height: calc(var(--u) * 40); margin-right: calc(var(--u) * 16);
    border-radius: calc(var(--u) * 8); background-color: #CDCDCD;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.4l4.9 4.9L19 7.4' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 70% 70%;
}
.pop-check input:checked + .box { background-color: var(--red); }
.pop-check .label { font-size: calc(var(--u) * 27); font-weight: 700; color: #111; }

/* 약관 아코디언 */
.pop-terms { margin-top: calc(var(--u) * 30); border: calc(var(--u) * 2) solid var(--line); border-radius: calc(var(--u) * 12); }
.pop-terms .head { display: flex; align-items: center; height: calc(var(--u) * 88); padding: 0 calc(var(--u) * 24); }
.pop-terms .head .toggle { margin-left: auto; width: calc(var(--u) * 24); height: calc(var(--u) * 24); border-left: calc(var(--u) * 3) solid #555; border-bottom: calc(var(--u) * 3) solid #555; transform: rotate(-45deg) translate(25%, -25%); cursor: pointer; }
.pop-terms.open .head .toggle { transform: rotate(135deg) translate(-25%, 25%); }
.pop-terms .list { display: none; padding: 0 calc(var(--u) * 24) calc(var(--u) * 16); }
.pop-terms.open .list { display: block; }
.pop-terms .list li { display: flex; align-items: center; height: calc(var(--u) * 72); }
.pop-terms .list li .pop-check { flex: 1 1 auto; }
.pop-terms .list li .pop-check .label { font-size: calc(var(--u) * 25); font-weight: 400; }
.pop-terms .list li .more { flex: 0 0 auto; width: calc(var(--u) * 20); height: calc(var(--u) * 20); border-top: calc(var(--u) * 3) solid #999; border-right: calc(var(--u) * 3) solid #999; transform: rotate(45deg); cursor: pointer; }

/* ---------- 약관 텍스트 ---------- */
.pop-title { margin: calc(var(--u) * 20) 0 calc(var(--u) * 44); font-size: calc(var(--u) * 38); font-weight: 700; color: #111; }
.pop-olist { counter-reset: t; }
.pop-olist li { position: relative; padding-left: calc(var(--u) * 40); margin-bottom: calc(var(--u) * 16); font-size: calc(var(--u) * 27); line-height: 1.55; color: #333; word-break: keep-all; }
.pop-olist li:before { counter-increment: t; content: counter(t) '.'; position: absolute; left: 0; }
.pop-note { margin-top: calc(var(--u) * 34); font-size: calc(var(--u) * 27); line-height: 1.55; color: #333; word-break: keep-all; }
.pop-caption { margin-top: calc(var(--u) * 20); font-size: calc(var(--u) * 23); line-height: 1.5; color: #999; word-break: keep-all; }

/* ============================================================
   투자성향 테스트
   ============================================================ */
.pop-progress { flex: 0 0 auto; height: calc(var(--u) * 8); background-color: var(--line); }
.pop-progress span { display: block; height: 100%; background-color: var(--red); transition: width .3s ease; }
.quiz-step { display: none; }
.quiz-step.on { display: block; }
.quiz-no { margin: calc(var(--u) * 34) 0 calc(var(--u) * 18); font-size: calc(var(--u) * 26); font-weight: 700; color: #111; }
.quiz-q { margin-bottom: calc(var(--u) * 40); font-size: calc(var(--u) * 36); font-weight: 700; line-height: 1.35; color: #111; word-break: keep-all; }
.quiz-opt { display: block; margin-bottom: calc(var(--u) * 20); cursor: pointer; }
.quiz-opt input { position: absolute; width: 0; height: 0; opacity: 0; }
.quiz-opt .in {
    display: flex; align-items: center; min-height: calc(var(--u) * 128);
    padding: calc(var(--u) * 24) calc(var(--u) * 30);
    border: calc(var(--u) * 2) solid transparent; border-radius: calc(var(--u) * 14);
    background-color: var(--bg);
}
.quiz-opt .in .t { flex: 1 1 auto; font-size: calc(var(--u) * 27); line-height: 1.45; color: #111; word-break: keep-all; }
.quiz-opt .in .c { flex: 0 0 auto; width: calc(var(--u) * 34); height: calc(var(--u) * 34); margin-left: calc(var(--u) * 20); }
.quiz-opt .in .c svg { display: block; width: 100%; height: 100%; fill: none; stroke: #C4C4C4; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.quiz-opt input:checked + .in { border-color: var(--red); background-color: #fff; }
.quiz-opt input:checked + .in .c svg { stroke: var(--red); }

/* ============================================================
   테스트 결과
   ============================================================ */
.res-title { margin: calc(var(--u) * 40) 0 calc(var(--u) * 26); font-size: calc(var(--u) * 36); font-weight: 700; color: #111; }
.res-card { padding: calc(var(--u) * 40) calc(var(--u) * 30) calc(var(--u) * 46); border-radius: calc(var(--u) * 24); text-align: center; }
.res-card .avatar { width: calc(var(--u) * 252); margin: 0 auto; }
.res-card .name { display: inline-block; margin-top: calc(var(--u) * 10); padding: calc(var(--u) * 10) calc(var(--u) * 34); border-radius: calc(var(--u) * 40); color: #fff; font-size: calc(var(--u) * 32); font-weight: 700; }
.res-card .type { margin-top: calc(var(--u) * 16); font-size: calc(var(--u) * 26); font-weight: 700; color: #333; }
.res-card .tags { display: flex; justify-content: center; flex-wrap: wrap; gap: calc(var(--u) * 12); margin-top: calc(var(--u) * 20); }
.res-card .tags span { padding: calc(var(--u) * 8) calc(var(--u) * 20); border-radius: calc(var(--u) * 30); background-color: #fff; font-size: calc(var(--u) * 24); font-weight: 700; }
.res-card .desc { position: relative; margin-top: calc(var(--u) * 34); padding-top: calc(var(--u) * 32); font-size: calc(var(--u) * 24); line-height: 1.6; color: #444; word-break: keep-all; }
.res-card .desc:before { content: ''; position: absolute; top: 0; left: 50%; width: calc(var(--u) * 60); height: calc(var(--u) * 2); margin-left: calc(var(--u) * -30); background-color: rgba(0, 0, 0, .15); }

.res-sep { height: calc(var(--u) * 20); margin: calc(var(--u) * 44) calc(var(--u) * -40); background-color: var(--bg); }
.res-sub { margin-bottom: calc(var(--u) * 30); font-size: calc(var(--u) * 32); font-weight: 700; color: #111; }
.res-score li { display: flex; align-items: center; margin-bottom: calc(var(--u) * 22); font-size: calc(var(--u) * 25); }
.res-score li .nm { flex: 0 0 auto; width: calc(var(--u) * 130); font-weight: 700; color: #333; }
.res-score li .bar { flex: 1 1 auto; height: calc(var(--u) * 20); border-radius: calc(var(--u) * 10); background-color: var(--line); overflow: hidden; }
.res-score li .bar i { display: block; height: 100%; border-radius: calc(var(--u) * 10); }
/* 클래스명을 pc 로 두면 공통 CSS 의 반응형 유틸(.pc{display:none})에 걸려
   모바일에서 수치가 통째로 사라집니다. pct 로 분리했습니다. */
.res-score li .pct { flex: 0 0 auto; width: calc(var(--u) * 80); text-align: right; font-weight: 700; }

.etf-list li { margin-bottom: calc(var(--u) * 16); }
.etf-row {
    display: flex; align-items: center; width: 100%;
    min-height: calc(var(--u) * 88); padding: calc(var(--u) * 16) calc(var(--u) * 24);
    border: calc(var(--u) * 2) solid var(--line); border-radius: calc(var(--u) * 12);
    background-color: #fff; text-align: left; cursor: pointer;
}
.etf-row .kodex { flex: 0 0 auto; margin-right: calc(var(--u) * 12); padding: calc(var(--u) * 5) calc(var(--u) * 12); border-radius: calc(var(--u) * 6); background-color: #1B54D6; color: #fff; font-size: calc(var(--u) * 21); font-weight: 700; }
/* 종목명이 길면 2줄로 흘린다.
   min-width:0 이 없으면 flex 아이템이 내용 폭 밑으로 줄지 않아 화살표가 밀려난다.
   keep-all 로 한글 단어는 유지하되, 끊을 곳이 없는 긴 이름은 anywhere 로 강제로 넘긴다. */
.etf-row .nm {
    flex: 1 1 auto; min-width: 0;
    font-size: calc(var(--u) * 27); font-weight: 700; line-height: 1.35; color: #111;
    word-break: keep-all;
    overflow-wrap: break-word;   /* 구형 브라우저 대비 */
    overflow-wrap: anywhere;
}
.etf-row .nm .code { color: #9B9B9B; font-weight: 400; }
.etf-row .arw { flex: 0 0 auto; width: calc(var(--u) * 20); height: calc(var(--u) * 20); margin-left: calc(var(--u) * 14); border-top: calc(var(--u) * 3) solid #555; border-right: calc(var(--u) * 3) solid #555; transform: rotate(45deg); }

.pop-banner { display: block; margin-top: calc(var(--u) * 20); border-radius: calc(var(--u) * 20); overflow: hidden; }
.pop-banner img { display: block; width: 100%; }

/* ============================================================
   수익률 1위 ETF 맞히기 (금주 테마 ETF)
   ============================================================ */
.pop-panel.theme { background-color: var(--bg); }
.theme-top { position: relative; padding: 0 calc(var(--u) * 40) calc(var(--u) * 40); }
.theme-top .tit { padding-top: calc(var(--u) * 20); font-size: calc(var(--u) * 40); font-weight: 700; line-height: 1.35; color: #fff; text-align: center; }
.theme-top .avatar { width: calc(var(--u) * 220); margin: calc(var(--u) * 20) auto calc(var(--u) * -60); }
.theme-card { position: relative; padding: calc(var(--u) * 70) calc(var(--u) * 30) calc(var(--u) * 36); border-radius: calc(var(--u) * 24); background-color: #fff; text-align: center; }
.theme-card .lead { font-size: calc(var(--u) * 27); line-height: 1.6; color: #111; word-break: keep-all; }
.theme-card .lead .b { color: #1B54D6; font-weight: 700; }
.theme-card .lead .r { color: var(--red); font-weight: 700; }
.theme-card .round { display: inline-block; margin-top: calc(var(--u) * 24); padding: calc(var(--u) * 10) calc(var(--u) * 28); border-radius: calc(var(--u) * 30); background-color: #DEEAFE; color: #1B54D6; font-size: calc(var(--u) * 25); font-weight: 700; }
.theme-card .noti { margin-top: calc(var(--u) * 22); font-size: calc(var(--u) * 26); font-weight: 700; color: #111; }

.theme-body { padding: calc(var(--u) * 40); }
.theme-body .sub { margin-bottom: calc(var(--u) * 24); font-size: calc(var(--u) * 28); font-weight: 700; color: #111; text-align: right; }
.pick-opt { display: block; margin-bottom: calc(var(--u) * 20); cursor: pointer; }
.pick-opt input { position: absolute; width: 0; height: 0; opacity: 0; }
.pick-opt .in { display: flex; align-items: center; padding: calc(var(--u) * 26) calc(var(--u) * 30); border: calc(var(--u) * 2) solid transparent; border-radius: calc(var(--u) * 16); background-color: #fff; }
.pick-opt .in .info { flex: 1 1 auto; }
.pick-opt .in .info .t { display: block; font-size: calc(var(--u) * 28); font-weight: 700; color: #111; }
.pick-opt .in .info .code { display: block; margin-top: calc(var(--u) * 6); font-size: calc(var(--u) * 26); color: #9B9B9B; }
.pick-opt .in .info .rate { display: block; margin-top: calc(var(--u) * 14); font-size: calc(var(--u) * 24); color: #9B9B9B; }
.pick-opt .in .info .rate b { font-size: calc(var(--u) * 28); color: var(--red); }
.pick-opt .in .info .rate b.down { color: #1B54D6; }   /* 하락은 파란색 */
.pick-opt .in .c { flex: 0 0 auto; width: calc(var(--u) * 34); height: calc(var(--u) * 34); margin-left: calc(var(--u) * 20); }
.pick-opt .in .c svg { display: block; width: 100%; height: 100%; fill: none; stroke: #C4C4C4; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pick-opt input:checked + .in { border-color: var(--red); }
.pick-opt input:checked + .in .c svg { stroke: var(--red); }

.pop-accordion { border-top: calc(var(--u) * 2) solid #DDD; background-color: #fff; }
.pop-accordion .head { display: flex; align-items: center; height: calc(var(--u) * 100); padding: 0 calc(var(--u) * 40); font-size: calc(var(--u) * 27); font-weight: 700; color: #111; cursor: pointer; }
.pop-accordion .head .toggle { margin-left: auto; width: calc(var(--u) * 24); height: calc(var(--u) * 24); border-left: calc(var(--u) * 3) solid #555; border-bottom: calc(var(--u) * 3) solid #555; transform: rotate(-45deg) translate(25%, -25%); }
.pop-accordion.open .head .toggle { transform: rotate(135deg) translate(-25%, 25%); }
.pop-accordion .body { display: none; padding: 0 calc(var(--u) * 40) calc(var(--u) * 40); }
.pop-accordion.open .body { display: block; }

/* 이벤트 유의사항 (시안 Sub_03_01 하단) --------------------- */
/* 결과 화면 법적 고지 문구 (심의본) */
.res-note { position: relative; margin-top: calc(var(--u) * 20); padding-left: calc(var(--u) * 18);
            font-size: calc(var(--u) * 22); line-height: 1.55; color: #9B9B9B; word-break: keep-all; }
.res-note:before { content: "\B7"; position: absolute; left: calc(var(--u) * 4); top: 0; }

.pop-accordion .body.noti { padding-top: calc(var(--u) * 4); }
.noti-sec { margin-bottom: calc(var(--u) * 46); }
.noti-sec:last-child { margin-bottom: 0; }
.noti-tit { display: flex; align-items: flex-start; margin-bottom: calc(var(--u) * 24); font-size: calc(var(--u) * 27); font-weight: 700; line-height: 1.35; color: #111; }
.noti-tit .ico { flex: 0 0 auto; width: calc(var(--u) * 34); height: calc(var(--u) * 34); margin: calc(var(--u) * 2) calc(var(--u) * 12) 0 0; fill: none; stroke: #111; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.noti-list li { position: relative; padding-left: calc(var(--u) * 20); margin-bottom: calc(var(--u) * 10); font-size: calc(var(--u) * 24); line-height: 1.6; color: #767676; word-break: keep-all; }
.noti-list li:last-child { margin-bottom: 0; }
.noti-list li:before { content: ""; position: absolute; top: calc(var(--u) * 16); left: 0; width: calc(var(--u) * 6); height: calc(var(--u) * 6); border-radius: 50%; background-color: #767676; }

/* 주차 안내표 */
.noti-table { margin: calc(var(--u) * 24) 0; }
.noti-table .row { display: flex; margin-bottom: calc(var(--u) * 14); border: calc(var(--u) * 2) solid #EDEDED; border-radius: calc(var(--u) * 16); background-color: #fff; overflow: hidden; }
.noti-table .row:last-child { margin-bottom: 0; }
.noti-table .no { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: calc(var(--u) * 83); padding: 0 calc(var(--u) * 8); background-color: #EDEDED; font-size: calc(var(--u) * 26); font-weight: 700; line-height: 1.2; color: #111; text-align: center; }
.noti-table dl { flex: 1 1 auto; padding: calc(var(--u) * 22) calc(var(--u) * 20); }
.noti-table dl > div { display: flex; align-items: flex-start; margin-bottom: calc(var(--u) * 8); }
.noti-table dl > div:last-child { margin-bottom: 0; }
.noti-table dt { flex: 0 0 auto; width: calc(var(--u) * 190); font-size: calc(var(--u) * 24); line-height: 1.5; color: #767676; }
.noti-table dt span { display: block; font-size: calc(var(--u) * 20); color: #9B9B9B; }
.noti-table dd { flex: 1 1 auto; font-size: calc(var(--u) * 24); line-height: 1.5; color: #555; white-space: nowrap; }


/* ============================================================
   탭 (이벤트 대상 ETF / 보수정보 / 내 응모 현황)
   ============================================================ */
.pop-tabs {
    flex: 0 0 auto; display: flex;
    border-bottom: calc(var(--u) * 2) solid var(--line);
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none;
    /* 좌우로 더 있을 때만 보이는 그림자 힌트 (local/scroll 레이어 조합) */
    background:
        linear-gradient(90deg,  #fff, rgba(255,255,255,0)) left  center / calc(var(--u) * 40) 100% no-repeat local,
        linear-gradient(270deg, #fff, rgba(255,255,255,0)) right center / calc(var(--u) * 40) 100% no-repeat local,
        radial-gradient(farthest-side at 0    50%, rgba(0,0,0,.12), rgba(0,0,0,0)) left  center / calc(var(--u) * 18) 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.12), rgba(0,0,0,0)) right center / calc(var(--u) * 18) 100% no-repeat scroll;
}
.pop-tabs::-webkit-scrollbar { display: none; }
.pop-tabs.dragging { cursor: grabbing; }
.pop-tabs.dragging a { cursor: grabbing; }
.pop-tabs a {
    flex: 0 0 auto; position: relative;
    padding: calc(var(--u) * 28) calc(var(--u) * 26) calc(var(--u) * 24);
    font-size: calc(var(--u) * 28); font-weight: 700; line-height: 1.2; color: #9B9B9B; white-space: nowrap;
}
.pop-tabs a.on { color: #111; }
.pop-tabs a.on:after { content: ''; position: absolute; left: calc(var(--u) * 20); right: calc(var(--u) * 20); bottom: 0; height: calc(var(--u) * 5); background-color: var(--red); }
.pop-tabpanel { display: none; }
.pop-tabpanel.on { display: block; }

/* 보수정보 */
.fee-head { margin: calc(var(--u) * 36) 0 calc(var(--u) * 24); font-size: calc(var(--u) * 32); font-weight: 700; color: #111; }
.fee-card { margin-bottom: calc(var(--u) * 26); border: calc(var(--u) * 2) solid var(--line); border-radius: calc(var(--u) * 16); overflow: hidden; }
.fee-card .top { padding: calc(var(--u) * 26) calc(var(--u) * 26) calc(var(--u) * 22); }
.fee-card .top .nm { display: flex; align-items: center; font-size: calc(var(--u) * 28); font-weight: 700; color: #111; }
.fee-card .top .code { margin-top: calc(var(--u) * 6); font-size: calc(var(--u) * 26); color: #9B9B9B; }
.fee-card .top .meta { display: flex; align-items: flex-end; margin-top: calc(var(--u) * 16); }
.fee-card .top .risk { padding: calc(var(--u) * 8) calc(var(--u) * 18); border-radius: calc(var(--u) * 30); background-color: #FDEBEF; color: #E4326A; font-size: calc(var(--u) * 22); font-weight: 700; }
.fee-card .top .total { margin-left: auto; text-align: right; }
.fee-card .top .total span { display: block; font-size: calc(var(--u) * 22); color: #9B9B9B; }
.fee-card .top .total b { font-size: calc(var(--u) * 32); color: var(--red); }
.fee-card .detail { padding: calc(var(--u) * 24) calc(var(--u) * 26) calc(var(--u) * 20); background-color: #FAFAFA; }
.fee-card .detail li { display: flex; padding: calc(var(--u) * 10) 0; border-bottom: calc(var(--u) * 2) dotted #DDD; font-size: calc(var(--u) * 25); color: #333; }
.fee-card .detail li:last-child { border-bottom: 0 none; }
.fee-card .detail li span { flex: 1 1 auto; }
.fee-card .detail li b { font-weight: 400; }
.fee-card .detail .memo { padding-top: calc(var(--u) * 14); font-size: calc(var(--u) * 22); color: #9B9B9B; }

/* ============================================================
   내 응모 현황
   ============================================================ */
.pop-panel.status { background-color: var(--bg); }
.status-head { position: relative; padding: 0 calc(var(--u) * 40) calc(var(--u) * 44); color: #fff; }
.status-head .who { font-size: calc(var(--u) * 36); font-weight: 700; }
/* 본문(.pop-body)이 overflow:auto 라 위로 삐져나온 만큼은 잘린다.
   캐릭터 이미지는 안테나가 상단 끝에 붙어 있어서 음수 top 을 주면 안테나가 잘렸다. */
.status-head .avatar { position: absolute; top: 0; right: calc(var(--u) * 40); width: calc(var(--u) * 220); }
.status-head .avatar.none { display: flex; align-items: center; justify-content: center; height: calc(var(--u) * 220); border-radius: 50%; background-color: rgba(0, 0, 0, .18); font-size: calc(var(--u) * 80); font-weight: 700; color: rgba(255, 255, 255, .45); }
.status-head .lb { margin-top: calc(var(--u) * 90); font-size: calc(var(--u) * 32); font-weight: 700; }
.status-head .val { margin-top: calc(var(--u) * 8); font-size: calc(var(--u) * 26); }
/* 배지는 캐릭터 원(오른쪽 40, 지름 220) 하단 중앙에 걸친다 (아바타 top 만큼 함께 내려감) */
.status-head .badge { position: absolute; top: calc(var(--u) * 203); right: calc(var(--u) * 150); transform: translateX(50%); white-space: nowrap; padding: calc(var(--u) * 8) calc(var(--u) * 22); border-radius: calc(var(--u) * 30); background-color: #111; font-size: calc(var(--u) * 24); font-weight: 700; }
.status-head .pop-linkbtn { margin-top: calc(var(--u) * 26); }

.status-sec { margin-top: calc(var(--u) * 20); padding: calc(var(--u) * 36) calc(var(--u) * 40) calc(var(--u) * 40); background-color: #fff; }
.status-sec:first-of-type { margin-top: 0; border-radius: calc(var(--u) * 24) calc(var(--u) * 24) 0 0; }
.status-sec h3 { margin-bottom: calc(var(--u) * 24); font-size: calc(var(--u) * 32); font-weight: 700; color: #111; }
.status-count { display: flex; margin-bottom: calc(var(--u) * 24); border: calc(var(--u) * 2) solid var(--line); border-radius: calc(var(--u) * 14); }
.status-count li { flex: 1 1 0; padding: calc(var(--u) * 22) 0; text-align: center; }
.status-count li + li { border-left: calc(var(--u) * 2) solid var(--line); }
/* 라벨 span 만 대상. (b 안의 숫자 span 까지 block 이 되어 '0/5' 가 두 줄로 갈라졌었음) */
.status-count li > span { display: block; font-size: calc(var(--u) * 25); color: #666; }
.status-count li b { display: block; margin-top: calc(var(--u) * 8); font-size: calc(var(--u) * 32); color: #111; white-space: nowrap; }
/* '0/5' 처럼 총 회차를 덧붙이는 부분 : 기울임 없이 한 줄로 */
.status-count li b i { font-style: normal; color: #9B9B9B; }

.round-nav { display: flex; align-items: center; margin: calc(var(--u) * 24) 0; }
/* 화살표 : 보이는 크기는 그대로 두고 손가락이 닿는 영역만 넓힌다.
   요소 자체를 키우면 가운데 회차 문구가 좁아져 줄바꿈이 생기므로,
   화살표는 :after 로 그리고 :before 로 눌리는 영역만 바깥으로 넓혔다.
   (20 + 32*2 = 84u ≒ 44px. 모바일 최소 터치 크기 기준) */
.round-nav .arw { position: relative; flex: 0 0 auto; width: calc(var(--u) * 20); height: calc(var(--u) * 20); cursor: pointer; }
.round-nav .arw:after {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    border-top: calc(var(--u) * 3) solid #999; border-right: calc(var(--u) * 3) solid #999;
}
.round-nav .arw:before {
    content: ''; position: absolute;
    top: calc(var(--u) * -32); bottom: calc(var(--u) * -32);
    left: calc(var(--u) * -32); right: calc(var(--u) * -32);
}
.round-nav .arw.prev:after { transform: rotate(-135deg); }
.round-nav .arw.next:after { transform: rotate(45deg); }
.round-nav .arw.off:after { border-color: #DDD; }              /* 첫/마지막 회차 */
.round-nav .arw.off { cursor: default; }
.round-nav .mid { flex: 1 1 auto; text-align: center; }
/* 회차명 / 발표예정 을 각각 한 줄씩, 총 2줄로 */
.round-nav .mid .t { display: block; font-size: calc(var(--u) * 28); font-weight: 700; line-height: 1.3; color: #111; }
.round-nav .mid .d { display: block; margin-top: calc(var(--u) * 8); font-size: calc(var(--u) * 24); line-height: 1.3; color: #9B9B9B; }

.mini-tabs { display: flex; border: calc(var(--u) * 2) solid var(--line); border-radius: calc(var(--u) * 12); overflow: hidden; }
.mini-tabs a { flex: 1 1 0; padding: calc(var(--u) * 22) 0; background-color: var(--bg); color: #9B9B9B; font-size: calc(var(--u) * 26); font-weight: 700; text-align: center; }
.mini-tabs a.on { background-color: #fff; color: #111; }

/* 두 탭의 높이를 맞춰 둔다. 높이가 달라지면 탭 전환 시 스크롤 위치가 밀린다 */
.status-sec .pop-tabpanel { min-height: calc(var(--u) * 322); }
.status-box { margin-top: calc(var(--u) * 20); padding: calc(var(--u) * 34) calc(var(--u) * 26); border: calc(var(--u) * 2) solid var(--line); border-radius: calc(var(--u) * 14); text-align: center; }
.status-box .empty-img { width: calc(var(--u) * 200); margin: 0 auto calc(var(--u) * 16); }
.status-box .empty-txt { font-size: calc(var(--u) * 25); line-height: 1.55; color: #666; }
.status-box .rt { font-size: calc(var(--u) * 25); color: #666; }
.status-box .rn { margin-top: calc(var(--u) * 8); font-size: calc(var(--u) * 32); font-weight: 700; color: #111; }
.status-box dl { display: flex; padding-top: calc(var(--u) * 20); margin-top: calc(var(--u) * 20); border-top: calc(var(--u) * 2) dashed #DDD; font-size: calc(var(--u) * 25); }
.status-box dl dt { color: #666; }
.status-box dl dd { margin-left: auto; font-weight: 700; color: #111; }
.status-box dl.tight { padding-top: 0; margin-top: calc(var(--u) * 8); border-top: 0; }

/* 전체 당첨 결과 : 발표된 회차가 2개 이상이면 영역 안에서 스크롤 */
.st-all-list.scroll {
    max-height: calc(var(--u) * 760); overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding-right: calc(var(--u) * 6);
}
.st-all-list.scroll::-webkit-scrollbar { width: calc(var(--u) * 8); }
.st-all-list.scroll::-webkit-scrollbar-thumb { border-radius: calc(var(--u) * 4); background-color: #D9D9D9; }
.st-all-list.scroll::-webkit-scrollbar-track { background-color: transparent; }
.st-all-list .status-box:first-child { margin-top: calc(var(--u) * 20); }

/* 당첨금 수령 정보 등록 버튼 */
.prize-btn {
    display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 10);
    width: 100%; height: calc(var(--u) * 78); margin-top: calc(var(--u) * 24);
    border: calc(var(--u) * 2) solid #111; border-radius: calc(var(--u) * 12);
    background-color: #fff; font-size: calc(var(--u) * 27); font-weight: 700; color: #111; cursor: pointer;
}
.prize-btn .ico {
    display: flex; align-items: center; justify-content: center;
    width: calc(var(--u) * 34); height: calc(var(--u) * 34); border-radius: 50%;
    background-color: #F5B301; color: #fff; font-size: calc(var(--u) * 20); font-weight: 700;
}
.status-sec .pop-linkbtn { margin-top: calc(var(--u) * 20); }

/* ============================================================
   PC : 딤 위 팝업
   ============================================================ */
@media all and (min-width: 1024px) {
    .pop .pop-dim { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .6); }
    .pop-panel {
        --u: .6px;      /* 시안 1px. 팝업 폭 = 720 * .6 = 432px */
        top: 50%; left: 50%;
        width: calc(var(--u) * 720); height: auto; max-height: 88vh;
        border-radius: calc(var(--u) * 24);
        transform: translate(-50%, -50%);
        box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
    }
    .pop-body { min-height: calc(var(--u) * 300); }
    /* 동의서 팝업은 글씨가 작아 PC 에서만 한 단계 키운다 (--u 만 올리면 전체가 같은 비율로 커짐)
       폭 = 720 * .82 = 590px, 높이도 화면을 더 쓰도록 여유를 준다. */
    #pop-credit .pop-panel { --u: .82px; max-height: 92vh; }
    .pop-head .pop-back { display: none; }
    .pop-panel.has-back .pop-head .pop-back { display: block; }
}