@charset "utf-8";

/* news.html */
.news {padding-bottom: 60px;}
.news-list {display: flex; flex-direction: column; gap: 40px;}
.news-list .news-thumb {position: relative; width: 100%; aspect-ratio: 350 / 180; border-radius: 12px; overflow: hidden; margin-bottom: 16px;}
.news-list .news-thumb img {width: 100%; height: 100%; object-fit: cover;}
.news-list .news-thumb .news-pin {position: absolute; top: 12px; right: 12px; z-index: 2;}
.news-list .news-title {font-size: 18px; font-weight: 700; line-height: 1.3; color: #1E1E1E; margin-bottom: 4px;}
.news-list .news-date {display: block; font-size: 14px; font-weight: 500; line-height: 1.3; color: #787878;}

.pagination {display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 50px;}
.page-numbers {display: flex; align-items: center; gap: 6px;}
.page-num,
.page-btn {font-size: 14px; font-weight: 600; line-height: 1.3; color: #444;}
.page-btn.is-disabled {color: #ccc; pointer-events: none;}
.page-num {display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 32px; height: 32px; padding: 0 4px; border-radius: 8px; border: 1px solid #F1F1F1; background: #fff;}
.page-num.is-active {background: #00AEEF; color: #fff; border-color: #00AEEF;}
.page-dot {padding: 0 10px; font-size: 13px; font-weight: 600; color: #444;}

/* news-view.html */
.news-view {padding-top: 0; padding-bottom: 60px;}
.news-view .news-hero {margin-bottom: 30px;}
.news-view .news-hero .inner {padding: 0;}
.news-view .news-hero img {width: 100%;}
.news-view .news-body {padding-bottom: 60px; border-bottom: 1px solid #eee;}
.news-view .news-title {font-size: 24px; font-weight: 700; line-height: 1.3; color: #1E1E1E; margin-bottom: 10px;}
.news-view .news-date {display: block; font-size: 14px; font-weight: 500; line-height: 1.3; color: #787878; margin-bottom: 30px;}
.news-view .news-content {font-size: 16px; line-height: 1.5; letter-spacing: -0.32px; color: #1B1C1E;}

/* 본문(에디터 HTML) 서식 되살리기 — reset.css 가 문단 여백·목록 마커·링크 밑줄·제목 크기를
   전부 지워서, 이 규칙이 없으면 <b>모든 문단이 한 덩어리로 붙는다.</b>
   이벤트 탭은 본문이 통이미지라 우연히 멀쩡해 보였지만, 공지사항은 정확히 반대다
   (안내문이라 문단·목록·링크를 많이 쓴다). 커뮤니티 3탭이 되면서 실제 문제가 됐다. */
.news-view .news-content p + p {margin-top: 12px;}
.news-view .news-content h1,
.news-view .news-content h2 {font-size: 20px; font-weight: 700; line-height: 1.3; margin: 24px 0 10px;}
.news-view .news-content h3,
.news-view .news-content h4 {font-size: 18px; font-weight: 700; line-height: 1.3; margin: 20px 0 8px;}
.news-view .news-content ul,
.news-view .news-content ol {margin: 12px 0; padding-left: 22px;}
.news-view .news-content ul {list-style: disc;}
.news-view .news-content ol {list-style: decimal;}
.news-view .news-content li + li {margin-top: 4px;}
.news-view .news-content a {color: #4986E8; text-decoration: underline; text-underline-offset: 2px;}
.news-view .news-content strong,
.news-view .news-content b {font-weight: 700;}
.news-view .news-content img {max-width: 100%; height: auto;}
.news-view .news-content table {width: 100%; border-collapse: collapse; margin: 12px 0;}
.news-view .news-content th,
.news-view .news-content td {border: 1px solid #eee; padding: 8px;}
.news-view .news-content hr {margin: 20px 0; border: 0; border-top: 1px solid #eee;}

/* community — 게시판 탭 (SB v1.9 p.23 ②)
   .achievement-tabs 를 재사용하지 않는다: ①활성색이 #4986E8 인데 커뮤니티 계열은 #00AEEF 라
   클래스를 공유하고 색만 덮으면 특이도 경쟁이 시작된다 ②.achievement-tab 은 <button> 전제인데
   여기는 서버 라우팅이라 <a> 다 ③그쪽은 JS 가 .is-active 를 토글하는 패널 구조인데
   서버 라우팅엔 패널 개념이 아예 없다. */
.board-tabs {position: sticky; top: 60px; z-index: 20; display: flex; background: #fff; border-bottom: 1px solid #eee;}
.board-tab {position: relative; flex: 1; padding: 0 4px; color: #999; font-size: 16px; line-height: 46px;
    text-align: center; text-decoration: none; white-space: nowrap;}
.board-tab::after {content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: transparent;}
.board-tab.is-active {color: #00AEEF; font-weight: 700;}
.board-tab.is-active::after {background: #00AEEF;}

/* community — 문의 Q&A (SB v1.9 p.25 / figma 839:3766 · 841:4509 · 840:4283)
   .news-list 를 재사용하지 않는다: 저쪽은 썸네일 카드(aspect-ratio 350/180)가 뼈대인데
   문의는 이미지가 아예 없는 텍스트 행이고, 행 사이 구분선·우측 화살표·3줄 말줄임이 전부 다르다. */
.inquiry {padding-bottom: 60px;}
.inquiry-actions {display: flex; gap: 8px; margin-bottom: 24px;}
.inquiry-action {display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 8px;
    border: 1px solid #ccc; background: #fff; font-size: 14px; font-weight: 600; line-height: 1.3; color: #666;}

.inquiry-list {display: flex; flex-direction: column;}
.inquiry-empty {padding: 40px 0; text-align: center; font-size: 14px; color: #999;}
.inquiry-item + .inquiry-item {border-top: 1px solid #eee;}

/* 링크(열람 가능)와 버튼(가려진 글)이 같은 클래스를 쓴다 — 버튼 기본 스타일을 여기서 지운다.
   text-align:left 가 없으면 <button> 안의 텍스트만 가운데로 몰린다. */
.inquiry-row {display: flex; align-items: center; gap: 10px; width: 100%; padding: 20px 0;
    border: none; background: none; text-align: left; cursor: pointer;}
.inquiry-texts {flex: 1; min-width: 0;}
.inquiry-arrow {flex-shrink: 0; line-height: 0;}

/* Q/A 말머리는 텍스트 첫 줄에 붙는다(가운데 정렬 아님) — 내용이 여러 줄이라 위쪽에 걸려야 한다. */
.inquiry-mark {float: left; width: 18px; font-size: 15px; font-weight: 700; line-height: 1.45; color: #1B1C1E;}
.inquiry-mark--a {color: #00AEEF;}

/* 목록은 3줄 말줄임(SB 명시). 상세(.inquiry-detail)는 이 규칙을 덮어 전문을 보여준다. */
.inquiry-q,
.inquiry-a {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
    font-size: 15px; line-height: 1.45; letter-spacing: -0.3px; word-break: break-word;}
.inquiry-q {font-weight: 700; color: #1B1C1E;}
.inquiry-a {margin-top: 8px; font-weight: 400; color: #444;}
.inquiry-meta {margin-top: 10px; font-size: 13px; font-weight: 500; line-height: 1.3; color: #999;}
.inquiry-meta-sep {margin: 0 6px; color: #ddd;}

/* 상세 — 줄임 없이 전문. 사용자가 친 평문이라 개행은 pre-line 이 살린다(본문은 th:text 로 이스케이프). */
.inquiry-view {padding-bottom: 60px;}
.inquiry-detail {padding: 20px 0; border-bottom: 1px solid #eee;}
.inquiry-detail .inquiry-q,
.inquiry-detail .inquiry-a {display: block; -webkit-line-clamp: none; overflow: visible; white-space: pre-line;}
.inquiry-detail-foot {display: flex; align-items: center; justify-content: space-between; gap: 12px;}
.inquiry-detail-foot .inquiry-meta {margin-top: 12px;}

/* 작성 화면 */
.inquiry-write {padding-bottom: 60px;}
.inquiry-secret {display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-bottom: 12px; cursor: pointer; user-select: none;}
.inquiry-secret input {display: none;}
/* 시안이 원형이 아니라 <b>사각 체크박스</b>다 — 약관 동의(.checkbox-circle)와 모양이 다르다. */
.inquiry-secret-box {position: relative; flex-shrink: 0; width: 20px; height: 20px; border: 1px solid #DADADA; border-radius: 4px; background: #fff; transition: all .2s ease;}
.inquiry-secret input:checked + .inquiry-secret-box {background: #00AEEF; border-color: #00AEEF;}
.inquiry-secret input:checked + .inquiry-secret-box::after {content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 12px; height: 12px; background: url('/assets/images/icon/icon-check-ab9ea9f6f93446ec9f37d9ff51486bb8.svg') no-repeat 50% 50%; background-size: contain;}
.inquiry-secret-text {font-size: 15px; line-height: 1.3; color: #1B1C1E;}

.inquiry-textarea {display: block; box-sizing: border-box; width: 100%; height: 165px; padding: 16px;
    border: 1px solid #E5E5E5; border-radius: 12px; background: #fff; resize: none;
    font-size: 15px; line-height: 1.5; letter-spacing: -0.3px; color: #1B1C1E;}
.inquiry-textarea::placeholder {color: #BDBDBD;}
.inquiry-caution {margin-top: 10px; font-size: 13px; line-height: 1.5; letter-spacing: -0.26px; color: #666;}
.inquiry-caution-mark {color: #FF4D4F;}
.inquiry-submit {margin-top: 40px;}

/* 안내 팝업 문구는 JS 가 줄바꿈을 포함해 넣는다(시안 840:3956 의 3줄 구성). */
.modal--inquiry-alert .modal-desc {white-space: pre-line;}

.news-nav {display: flex; justify-content: space-between; align-items: center; padding-top: 20px;}
.news-nav-left {display: flex; gap: 4px;}
.news-nav a {font-size: 14px; font-weight: 600; line-height: 1.3; color: #666; border-radius: 8px; border: 1px solid #ccc; padding: 6px 12px;}
.news-nav-left a.is-disabled {color: #ccc; pointer-events: none;}
.news-nav-right a {display: flex; align-items: center; gap: 6px;}

/* mypage.html */
.wrap--mypage {background: rgba(235, 248, 255, 1);}
.wrap--mypage .app-header {background: rgba(235, 248, 255, 1);}
.mypage {padding-top: 0;}
.mypage-point {margin: 65px 0 36px;}
.mypage-point .point-card {position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px; border-radius: 100px; background: #fff; box-shadow: 0 0 10px 0 rgba(9, 146, 223, 0.10);}
.mypage-point .point-card::after {content: ""; position: absolute; top: -69px; right: 22px; width: 101px; height: 70px; background: url("/assets/images/sub/mypage-point-character-2af7a37fb599c47f51a973436dbce6db.png") no-repeat 50% 100%;}
.mypage-point .point-info-wrap {display: flex; min-width: 0; align-items: center; flex-wrap: wrap; gap: 6px;}
.mypage-point .point-label {display: flex; flex-shrink: 0; align-items: center; gap: 6px; font-size: 16px; font-weight: 700; color: #222;}
.mypage-point .point-value {display: flex; flex-shrink: 0; align-items: baseline; gap: 4px; font-size: 14px; font-weight: 400; color: #222;}
.mypage-point .point-value strong {font-size: 16px; font-weight: 700; color: #00AEEF;}
.btn-roulette-entry {position: relative; z-index: 1; display: flex; flex: 0 0 65px; align-items: center; justify-content: center; height: 32px; border: 1px solid rgba(50, 166, 235, 0.20); border-radius: 8px; background: rgba(50, 166, 235, 0.10); color: #00AEEF; font-size: 12px; font-weight: 600; line-height: 1.5; letter-spacing: -0.24px;}

.mypage-history {margin-bottom: 40px;}
.mypage-history .history-list {border-radius: 12px; background: #FFF; box-shadow: 0 0 10px 0 rgba(9, 146, 223, 0.10); padding: 6px 0;}
.mypage-history .history-item {display: flex; justify-content: space-between; align-items: center; padding: 14px 16px;}
.mypage-history .history-item:not(:last-child) {border-bottom: 1px solid #eee;}
.mypage-history .history-empty {font-size: 16px; font-weight: 600; line-height: 1.3; color: #222; padding: 30px 16px; text-align: center;}
.mypage-history .history-title {font-size: 16px; font-weight: 600; line-height: 1.3; color: #222; margin-bottom: 2px;}
.mypage-history .history-date {display: block; font-size: 12px; font-weight: 500; line-height: 1.3; color: #999 ;}
.mypage-history .history-point {font-size: 16px; font-weight: 600; line-height: 1.3; color: #00AEEF; text-align: right;}

.mypage-info {margin-bottom: 40px;}
.mypage-info .info-list {border-radius: 12px; background: #FFF; box-shadow: 0 0 10px 0 rgba(9, 146, 223, 0.10); padding: 6px 0;}
.mypage-info .info-item {position: relative; padding: 15px 70px 15px 16px;}
.mypage-info .info-item:not(:last-child) {border-bottom: 1px solid #eee;}
.mypage-info .info-content {display: flex; align-items: center;}
.mypage-info .info-label {max-width: 80px; width: 100%; font-size: 14px; font-weight: 500; line-height: 1.3; color: #999;}
.mypage-info .info-value {width: 1%; flex: 1 1 auto; font-size: 16px; font-weight: 400; line-height: 1.3; color: #222; word-break: break-all;}
.mypage-info .info-item a {position: absolute; top: 50%; right: 14px; transform: translateY(-50%);}

.mypage-settings {padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid #D6E3E9;}
.mypage-settings .setting-list {display: flex; flex-direction: column; gap: 24px;}
.mypage-settings .setting-item {display: flex; justify-content: space-between; align-items: center;}
.mypage-settings .setting-title {font-size: 16px; font-weight: 600; line-height: 1.3; color: #000;}
.mypage-settings a.setting-title {width: 100%; display: flex; justify-content: space-between; align-items: center;}
.mypage-settings .setting-item-cs {flex-direction: column; align-items: flex-start; gap: 4px;}
.mypage-settings .setting-desc {font-size: 12px; font-weight: 400; line-height: 1.5; color: #666;}
.sr-only {position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0);}
.switch {position: relative; display: block; width: 52px; height: 32px;  border-radius: 999px; background: #ccc; cursor: pointer; transition: .3s;}
.switch::after {content: ''; position: absolute; top: 2px; left: 2px; width: 28px; height: 28px; border-radius: 50%; background: #fff; filter: drop-shadow(0 3px 1px rgba(0, 0, 0, 0.06)) drop-shadow(0 3px 8px rgba(0, 0, 0, 0.15)); transition: .3s;}
#alarm:checked + .switch {background: linear-gradient(130deg, #00ADEE 0%, #00ADEE 18%, #AED230 100%);}
#alarm:checked + .switch::after {transform: translateX(20px);}

.mypage-account {display: flex; flex-direction: column; gap: 24px;}
.mypage-account button {display: block; font-size: 16px; font-weight: 600; line-height: 1.3; color: #000; text-align: left;}
.mypage-account .btn-withdraw {color: #F2564B;}

/* .check-wrap / .check-icon / .check-text 는 common.css 로 옮겼다.
   홈(팝업)이 sub.css 를 로드하지 않는데 같은 체크박스가 필요해서다.
   sub.css 를 쓰는 화면은 모두 common.css 도 로드하므로 마이페이지 동작은 그대로다. */

/* point-history.html */
.point-history {position: relative; padding-top: 0;}
.filter-tab {position: sticky; padding: 20px 0 10px; top: 60px; background: #fff; z-index: 10; display: flex; flex-wrap: wrap; gap: 4px;}
.filter-tab button, .filter-tab a {font-size: 14px; line-height: 1.3; color: #999; padding: 6px 12px; border-radius: 100px; border: 1px solid #999; background: #fff; text-decoration: none;}
.filter-tab button.is-active, .filter-tab a.is-active {border: 1px solid #000; background: #222; color: #fff;}

.point-history .history-item {display: flex; justify-content: space-between; align-items: center; padding: 20px 0; border-bottom: 1px solid #eee;}
.point-history .history-empty {font-size: 16px; font-weight: 600; line-height: 1.3; color: #222; text-align: center; padding: 30px 0;}
.point-history .history-title {font-size: 16px; font-weight: 600; line-height: 1.3; color: #222; margin-bottom: 2px;}
.point-history .history-date {display: block; font-size: 12px; font-weight: 500; line-height: 1.3; color: #999 ;}
.point-history .history-point {font-size: 16px; font-weight: 600; line-height: 1.3; color: #00AEEF; text-align: right;}
.point-history .btn-more--expand {margin-top: 20px;}
.point-history .history-result {display: flex; flex-shrink: 0; align-items: center; gap: 16px;}
.point-history .btn-history-reject {display: inline-flex; align-items: center; justify-content: center; min-width: 45px; height: 32px; padding: 0 10px; border: 1px solid #F2564B; border-radius: 8px; background: rgba(206, 220, 228, 0.10); color: #F2564B; font-size: 12px;}
.point-history .history-item.is-rejected .history-point {color: #999;}

/* achievement.html */
.achievement-tabs {position:sticky; top:60px; z-index:20; display:flex; background:#fff; border-bottom:1px solid #eee;}
.achievement-tab {position:relative; flex:1; border:0; background:#fff; color:#999; font-size:18px; line-height:46px; text-align:center; cursor:pointer;}
.achievement-tab::after {content:""; position:absolute; right:0; bottom:-1px; left:0; height:2px; background:transparent;}
.achievement-tab.is-active {color:#4986E8; font-weight:700;}
.achievement-tab.is-active::after {background:#4986E8;}

.achievement-panel {padding:28px 0;}
.achievement-panel[hidden] {display:none;}
.achievement-list {display:flex; flex-wrap: wrap; gap: 10px;}
.achievement-item {width: calc(50% - 5px);}
.achievement-card {position:relative; display:flex; align-items:center; gap: 10px; width:100%; min-height:72px; height: 100%; padding:14px 16px; border:1px solid #eee; border-radius:8px; background:rgba(248, 248, 248, 0.97); text-align:left; cursor:pointer;}
.achievement-card.is-locked {color:#999; cursor:default;}
.achievement-card.is-claimable {color: #222; border:2px solid #00AEEF;}
.achievement-card.is-completed {color:#222; cursor:default; border:1px solid #ccc;}
.achievement-icon {position: relative; display:flex; flex:0 0 28px; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:#ccc;}
.is-locked .achievement-icon {opacity:0;}
.is-claimable .achievement-icon,
.is-completed .achievement-icon {background-color:#00AEEF;}
.achievement-icon:after {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; background-image: url('/assets/images/sub/icon-achievement-attendance-97082afc88627da731f0445781333492.svg'); background-position: 50% 50%; background-repeat: no-repeat;}
.achievement-info {display:flex; min-width:0; flex:1; flex-direction:column; gap: 2px;}
.achievement-title {font-size:14px; font-weight:500; line-height:1.3;}
.achievement-point {display:flex; align-items:center; flex-wrap: wrap; gap: 3px; font-size:14px; font-weight:600; line-height:1.3;}
.achievement-point svg {max-width: 12px; width: 100%;}
.achievement-point circle {fill: #999}
.is-claimable .achievement-point circle,
.is-completed .achievement-point circle {fill:#00AEEF;}
.achievement-stamp {display: none; position:absolute; top:50%; right: 14px; transform: translateY(-50%) rotate(-16deg); z-index:2; font-family: 'Swagger'; font-size: 18px; line-height: 1.3;color: #F2564B; text-align: center; padding: 4px 7px 2px; border-top: 3px solid #F2564B; border-bottom: 3px solid #F2564B; background: rgba(248, 248, 248, 0.80);}
.is-completed .achievement-stamp {display: block}

/* challenge.html */
.challenge {padding-bottom: 60px;}
.challenge-list {display: flex; flex-direction: column; gap: 40px;}
.challenge-card {position: relative; display: block; border-radius: 16px; overflow: hidden;}
/* 딤 처리 — 시안 확정(2026-08-10): 참여완료·참여종료는 딤, 진행예정은 딤 없음(아직 참여할 수 있으므로) */
.challenge-item.is-completed .challenge-card:after,
.challenge-item.is-ended .challenge-card:after {content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; background: rgba(0, 0, 0, 0.30);}
.challenge-thumb {position: relative; width: 100%; aspect-ratio: 350/190;}
.challenge-thumb img {width: 100%; height: 100%; object-fit: cover;}
.challenge-point {position: absolute; top: 8px; right: 8px; z-index: 1; display: flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: rgba(34, 34, 34, 0.90); font-size: 14px; font-weight: 600; line-height: 1.3; color: #fff;}
.challenge-content {position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 1;}
.challenge-title {display: block; font-size: 14px; font-weight: 600; line-height: 1.3; color: #fff;}
/* 상태 뱃지 — 서버가 조건에 맞는 것 하나만 렌더한다(참여완료 > 참여종료 > 진행예정).
   시안 기준(2026-08-10): 113x36, radius 16px 0 16px 0, Bold 20/1.3 흰색.
   min-width 로 113px 를 잡는다 — 세 문구가 모두 4글자라 시안의 고정폭과 일치하고, 길어지면 늘어난다. */
.challenge-status {position: absolute; top: 0; left: 0; z-index:2; display:inline-flex; align-items:center; justify-content:center; min-width: 113px; padding: 5px 23px 5px 20px; border-radius: 16px 0; background: linear-gradient(126.87deg, #00AEEF 18.54%, #AED230 96.79%); color: #fff; font-size: 20px; font-weight: 700; line-height: 1.3;}
.challenge-status--upcoming {background: #004665;}
.challenge-status--ended {background: #434343;}

/* challenge-view.html */
.challenge-hero {margin-bottom: 30px;}
.challenge-media {position: relative; width: 100%; overflow: hidden; background:#C4C4C4;}
.challenge-media--img {aspect-ratio: auto;}
.challenge-media img {display: block; width: 100%; height: 100%; object-fit: contain;}
/* 표시 영역 비율은 시안값 350x528(2026-08-10 확정, 이전 9:16 에서 변경).
   ⚠️ 상자(0.663)가 쇼츠 원본(9:16=0.5625)보다 가로로 넓다 → 유튜브가 높이에 맞춰 그리고
   좌우에 검은 여백(필러박스)이 생긴다. 영상이 잘리는 것은 아니다. 이건 시안을 따른 결과다.
   높이 상한(100vh - 240px)은 그대로 둔다. 상한이 걸릴 때도 상자 비율이 유지되도록 계수를 350/528 로 맞춘다. */
.challenge-media--video {aspect-ratio: 350/528; width: min(100%, calc((100vh - 240px) * 350 / 528)); margin: 0 auto;}
.challenge-media iframe {display: block; width: 100%; height: 100%; border: 0;}

/* --- 쇼츠 자체 컨트롤(자막/확대/전체화면) — ⚠️ 임시 마크업, 퍼블리싱 산출물로 교체 예정 ---
   유튜브 기본 컨트롤(controls=1)을 켜면 진행바로 시청완료를 우회할 수 있어, 컨트롤은 끈 채
   화면이 직접 붙인다. 전체화면도 Fullscreen API 가 아니라 클래스 토글(의사 전체화면)이다 —
   iframe 을 재부착하지 않아 재생과 ENDED 수신이 유지되고, iOS WKWebView 제약도 피한다. */
.shorts-zoom {width: 100%; height: 100%; transform-origin: center center; transition: transform .12s ease-out;}
/* 오버레이는 재생 중일 때만 터치를 받는다(.is-active). 정지 상태에선 통과시켜 유튜브 자체 재생 탭을 살린다 —
   programmatic playVideo() 는 Android WebView 의 사용자 제스처 요구에 막힌다. 사유는 challenge-detail.js 주석. */
.shorts-touch {position: absolute; inset: 0; z-index: 2; pointer-events: none;}
.shorts-touch.is-active {pointer-events: auto;}
/* 컨트롤 — 시안 기준(2026-08-10): 40x40, radius 8, 배경 rgba(153,153,153,.4).
   배경은 여기서 공통으로 그린다(전체화면 아이콘 export 에 들어 있던 배경 rect 는 제거했다 —
   자막 아이콘은 글리프만 export 되므로 SVG 에 배경을 두면 두 버튼이 서로 다르게 그려진다). */
/* 시안 좌표: 플레이어(350x528) 기준 자막 = right 12 / top 12, 전체화면 = right 12 / bottom 12.
   즉 두 버튼은 같은 줄이 아니라 위아래로 나뉜다 → 컨테이너를 둘로 둔다. */
.shorts-controls {position: absolute; right: 12px; bottom: 12px; z-index: 3; display: flex; align-items: center; gap: 6px;}
.shorts-controls--top {top: 12px; bottom: auto;}
.shorts-controls button {display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 8px; background: rgba(153, 153, 153, 0.4); color: #fff; font-size: 12px; font-weight: 600; line-height: 1.2;}
/* 글리프 크기는 시안값을 그대로 박는다 — 자막 32x24, 전체화면 40x40(안쪽 8px 여백이 export 에 포함). */
.shorts-controls button img {display: block; pointer-events: none;}
.shorts-controls button img.ico-cc {width: 32px; height: 24px;}
.shorts-controls button img.ico-fs {width: 40px; height: 40px;}
/* 자막 OFF 상태를 배경으로 구분한다(시안엔 OFF 시안이 없어 톤만 낮춘다). */
.shorts-controls button[aria-pressed="false"] img.ico-cc {opacity: .45;}
/* 전체화면 열기/닫기 아이콘은 두 장을 넣어두고 상태로 고른다(JS 가 src 를 만지지 않게 하려는 것). */
.shorts-controls button[aria-pressed="false"] .ico-fs--close,
.shorts-controls button[aria-pressed="true"] .ico-fs--open {display: none;}
/* 확대 초기화는 시안에 대응 아이콘이 없어 텍스트를 유지한다(확대했을 때만 잠깐 노출되는 버튼). */
.shorts-controls button.shorts-btn--text {width: auto; min-width: 44px; padding: 6px 8px; border-radius: 8px;}
.shorts-controls button[hidden] {display: none;}
/* 전체화면에선 폰 하단 시스템 바(제스처 바·3버튼 내비)에 하단 요소가 가린다.
   --shorts-fs-safe = 시스템 바 회피 하한(컨트롤이 놓이는 높이). FO viewport 에 viewport-fit=cover 가 없어
   env(safe-area-inset-*) 가 0 으로 잡힐 수 있으므로 max() 로 하한을 둔다(실기기 확인값 64px).
   ⚠️ 자막은 유튜브가 크로스 오리진 iframe 안에서 렌더해 직접 스타일링할 수 없다 → 대신 검은 배경은 화면 끝까지
   유지한 채 padding-bottom 으로 iframe(=플레이어) 자체를 줄여 자막을 시스템 바 위로 끌어올린다.
   여백은 컨트롤 높이(+여유) 만큼 더 준다 — 안 그러면 자막이 컨트롤 뒤로 들어간다. */
.challenge-media--video.is-fullscreen {--shorts-fs-safe: max(64px, calc(env(safe-area-inset-bottom) + 24px)); position: fixed; inset: 0; z-index: 9999; width: 100%; max-width: none; height: 100%; margin: 0; padding-bottom: calc(var(--shorts-fs-safe) + 40px); aspect-ratio: auto; background: #000;}
.challenge-media--video.is-fullscreen .shorts-controls {right: max(12px, env(safe-area-inset-right)); bottom: var(--shorts-fs-safe);}
/* 자막은 전체화면에서도 위에 남는다 — 상단 노치·상태바를 피해 하한을 둔다(하단과 같은 방식). */
.challenge-media--video.is-fullscreen .shorts-controls--top {top: max(12px, env(safe-area-inset-top)); bottom: auto;}
.challenge-body {padding-bottom: 60px; border-bottom: 1px solid #eee;}
.challenge-info-item {display: flex; flex-direction: column; gap: 2px 5px;}
.challenge-info-item:not(:last-child) {margin-bottom: 24px;}
.challenge-info-item-grid {flex-direction: row;}
.challenge-info-title {position: relative; font-size: 16px; font-weight: 600; line-height: 1.5; color: #1B1C1E; padding-left: 14px;}
.challenge-info-title:before {content: ''; position: absolute; top: 6px; left: 0; width: 8px; height: 8px; border-radius: 50%; background:#1B1C1E;}
.challenge-info-content {flex: 1; min-width: 0; font-size: 16px; line-height: 1.5; color:#1B1C1E; white-space: pre-line;}
.btn-challenge-join {margin-top: 50px;}

/* challenge-photo.html */
.challenge-participate {position: relative; padding-top: 30px;}
.challenge-participate:before {content: ''; width: 100%; height: 10px; position: absolute; top: 0; left: 0; background: #F5F6F8; border-top: 1px solid #eee; border-bottom: 1px solid #eee;}
.participate-label {display:block; margin-bottom:16px; color:#666; font-size:16px; line-height:1.5; letter-spacing: -0.32px;}
.btn-photo-capture {display:flex; align-items:center; justify-content:center; width:100%; min-height:40px; border:1px solid rgba(50, 166, 235, 0.20); border-radius:8px; background:rgba(50, 166, 235, 0.10); color:#32a6eb; font-size:12px; font-weight:600; line-height:1.5; letter-spacing: -0.24px; padding: 4px 12px; margin-bottom: 16px;}
.participate-photo-input {position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.participate-photo-preview {position:relative; width:106px; aspect-ratio:1/1; border:1px dashed #ccc; border-radius:12px;}
/* ⚠️ 이미지를 흐름에서 빼는 것(position:absolute)이 핵심이다. height:100% 만으로는
   부모 높이가 aspect-ratio 로 계산된 값이라 퍼센트가 auto 로 풀리고, 그러면 이미지가
   원본 높이를 그대로 써서 <b>세로 사진일 때 칸이 늘어난다</b>(가로 사진은 106 보다 낮아
   aspect-ratio 가 이겨서 멀쩡해 보인다 — 그래서 세로 사진에서만 드러났다).
   ⚠️ 대신 박스에 overflow:hidden 을 걸면 안 된다 — X 버튼이 박스 밖(top/right -9px)에 있어 잘린다. */
.participate-photo-image {display:none; position:absolute; inset:0; width:100%; height:100%; border-radius:12px; object-fit:cover;}
.btn-photo-remove {display:none; position:absolute; top:-9px; right:-9px; width:28px; height:28px; border:0; border-radius:50%; background:#444; text-align: center;}
.btn-photo-remove img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

.participate-photo-preview.has-photo {border: 1px solid #ccc;}
.participate-photo-preview.has-photo .participate-photo-image {display:block;}
.participate-photo-preview.has-photo .btn-photo-remove {display:block;}

/* challenge/entry-album.html (SB v1.9 p.14)
   3열 고정 — 시안 기준 106px + 간격 16px 이 콘텐츠 폭 350px 에 정확히 맞는다(106*3 + 16*2 = 350).
   칸 제목이 두 줄이 되면 그 행만 높아진다(그리드가 행 높이를 맞춘다). */
.album-slots {display:grid; grid-template-columns:repeat(3, 1fr); gap:12px 16px;}
.album-slot {display:flex; flex-direction:column; align-items:center; gap:4px;}
.album-slot-box {width:100%;}
/* 칸 제목 — 15자 제한이라 최대 2줄. 넘치면 말줄임(시안: 2줄까지 표현) */
.album-slot-title {font-size:16px; font-weight:500; line-height:24px; letter-spacing:-0.32px; color:#222; text-align:center;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
/* 박스 안 '사진선택' — 사진이 들어오면 .has-photo 가 감춘다(퍼블 CSS 와 같은 방식) */
.btn-slot-pick {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); height:32px; padding:4px 12px; border:0; border-radius:8px; background:rgba(50, 166, 235, 0.10); color:#00AEEF; font-size:12px; font-weight:600; line-height:18px; letter-spacing:-0.24px; white-space:nowrap;}
.btn-slot-pick:disabled {color:#ccc; background:rgba(248, 248, 248, 0.97);}
.participate-photo-preview.has-photo .btn-slot-pick {display:none;}

/* challenge-link.html */
.participate-link-input {margin-bottom:8px;}
.participate-notice {font-size:14px; font-weight:500; line-height:1.3; color:#1B1C1E;}
.participate-notice .red {font-weight: 600; color:#F75640;}
.participate-notice .blue {color:#4986E8;}
.btn-participate-submit {margin-top: 60px;}

/* challenge/entry-quiz.html (SB v1.9 p.15 OX · p.16 객관식)
   비활성 제출 버튼(rgba(248,248,248,0.97)/#ccc)은 common.css 의 .btn:disabled 가 이미 시안과 같다. */
.participate-quiz {display:flex; flex-direction:column; align-items:center; text-align:center;}
.quiz-character {width:86px; height:86px; margin-bottom:16px;}
.quiz-type-label {margin-bottom:10px; font-size:18px; font-weight:700; line-height:1.3; color:#00AEEF;}
.quiz-question {max-width:310px; font-size:22px; font-weight:700; line-height:1.3; color:#222;}

/* OX — 두 칸이 화면 폭을 정확히 반씩 나눈다(시안 170+10+170=350). */
.quiz-ox {display:flex; gap:10px; width:100%; margin-top:30px;}
.quiz-ox-btn {display:flex; flex:1; align-items:center; justify-content:center; gap:6px; height:68px; padding:16px; border:0; border-radius:8px; font-size:16px; font-weight:600; line-height:1.3;}
.quiz-ox-icon {flex-shrink:0;}
.quiz-ox-btn--o {background:#D8E3F5; color:#4986E8;}
.quiz-ox-btn--x {background:#F3DDD9; color:#F2564B;}
/* 선택 시 배경이 해당 색으로 차고 아이콘·글자가 흰색이 된다(아이콘은 currentColor). */
.quiz-ox-btn--o.is-selected {background:#4986E8; color:#fff;}
.quiz-ox-btn--x.is-selected {background:#F2564B; color:#fff;}

/* 객관식 — 오른쪽 52px 은 선택 시 나타나는 체크(28px + 여백) 자리라 항상 비워둔다. */
.quiz-options {display:flex; flex-direction:column; gap:10px; width:100%; margin-top:30px;}
.quiz-option-btn {display:flex; align-items:flex-start; width:100%; padding:17px 52px 17px 16px; border:1px solid #eee; border-radius:8px; background:rgba(248,248,248,0.97); font-size:16px; font-weight:600; line-height:1.3; color:#999; text-align:left;}
.quiz-option-no {flex-shrink:0; width:24px;}
.quiz-option-text {flex:1; min-width:0;}
.quiz-option-btn.is-selected {position:relative; border-color:transparent; background:#00AEEF; color:#fff;}
.quiz-option-btn.is-selected:after {content:''; position:absolute; top:14px; right:16px; width:28px; height:28px; background:url('/assets/images/sub/icon-quiz-check-d977368ea0ff93c167935f1ba82442e4.svg') no-repeat 50% 50%/28px 28px;}
/* 서버가 알려준 정답 보기 — 오답일 때는 값 자체가 내려오지 않는다. */
.quiz-option-btn.is-correct {border-color:transparent; background:#00AEEF; color:#fff;}

/* 퀴즈 결과 팝업 — 본문이 BO 자유 입력이라 줄바꿈이 들어온다(기본 문구부터 2줄이다). */
.modal-desc--multiline {white-space: pre-line;}

/* 결과 문구 — 아이콘은 정답일 때만 붙는다. */
.quiz-result {display:flex; align-items:center; justify-content:center; gap:4px; margin-top:30px; font-size:16px; font-weight:700; line-height:1.3; color:#222;}
.quiz-result-icon {display:none; width:34px; height:34px;}
.quiz-result.is-correct .quiz-result-icon {display:block;}

.quiz-explanation {width:100%; margin-top:30px; padding:20px; border:1px solid #F3F3F3; border-radius:12px; background:#FAFAFA; text-align:left;}
.quiz-explanation-title {margin-bottom:4px; font-size:14px; font-weight:500; line-height:1.5; color:#222;}
.quiz-explanation-body {font-size:14px; line-height:1.5; color:#666;}
/* 해설은 BO 웹에디터 HTML 이다. reset.css 가 문단 여백·목록 마커·링크 밑줄을 전부 지워
   여기서 되살리지 않으면 여러 문단이 한 덩어리로 붙어 보인다. */
.quiz-explanation-body p + p {margin-top:8px;}
.quiz-explanation-body ul, .quiz-explanation-body ol {margin:8px 0; padding-left:20px;}
.quiz-explanation-body ul {list-style:disc;}
.quiz-explanation-body ol {list-style:decimal;}
.quiz-explanation-body a {color:#4986E8; text-decoration:underline;}
.quiz-explanation-body strong, .quiz-explanation-body b {font-weight:700;}
.quiz-explanation-body img {max-width:100%; height:auto;}

/* roulette.html */
.roulette {padding-bottom: 0;}
.roulette-hero {padding:40px 0 35px; background:#F4F4F4;}
.roulette-heading {margin-bottom:20px; text-align:center;}
.roulette-subtitle {font-size:14px; font-weight:500; line-height:1.5; color: #444; margin-bottom: 7px;}
.roulette-title {margin: 0 auto;}
.roulette-machine {display:flex; justify-content:center;}
.roulette-wheel-wrap {position:relative; width:min(100%,320px); aspect-ratio:1/1;}
.roulette-wheel {display:block; width:100%; height:100%; transition:transform 4s cubic-bezier(.12,.55,.08,1);}
.roulette-pointer {position:absolute; top:-6px; left:50%; z-index:2; width:28px; transform:translateX(-50%) rotate(0); transform-origin:50% 0; transition:transform .2s ease;}
.roulette-wheel-wrap.is-spinning .roulette-pointer {transform:translateX(-50%) rotate(-10deg);}

.roulette-my-point {display:flex; justify-content: center; align-items:center; gap:8px; font-size:16px; font-weight:700; line-height:1.2; margin: 37px 0 26px;}
.roulette-my-point .point-label {display:flex; align-items:center; gap:4px; display:flex; align-items:center; color:#222;}
.roulette-my-point .point-value {color:#00AEEF;}
.btn-roulette-spin {position:relative; width: calc(100% - 40px); margin: 0 auto;}
.btn-roulette-spin.is-spinning {pointer-events:none;}
.btn-roulette-spin:after {content: ''; width: 114px; height: 61px; position: absolute; top: -61px; right: -15px; z-index: 1; background: url('/assets/images/main/modal-quiz-explanation-character-3684c5849f9716fa23305caef2387f8d.png') no-repeat 50% 50%/auto 61px;}

.roulette-information {padding:35px 0 20px; background:#E9EFF5;}
.roulette-guide {display:flex;}
.roulette-guide + .roulette-guide {margin-top:30px;}
.roulette-guide-title {max-width:80px; width: 100%; margin-bottom:6px; color:#00aeef; font-size:12px; font-weight:700;}
.roulette-list {min-width: 0; flex: 1; }
.roulette-list li {font-size:12px; line-height:1.7; color: #222;}
.roulette-notice-list .roulette-notice-sub {padding-left:7px; color:#666;}

.roulette-history {padding-bottom: 30px; background:#E9EFF5;}
.roulette-history-title {font-size:14px; font-weight:500; line-height:1.3; color: #000; margin-bottom: 10px;}
.roulette-history-panel {border-radius: 12px; background: #FFF;}
.roulette-history-list {overflow:hidden; padding: 0 20px;}
.roulette-history-item {display:flex; align-items:center; min-height:86px; padding:20px 0; border-bottom:1px solid #eee;}
.roulette-history-icon {display:flex; flex:0 0 32px; align-items:center; justify-content:center; width:32px; height:32px; margin-right:12px; border-radius:50%; background:#ccc;}
.roulette-history-icon img {width:18px; height:18px;}
.roulette-history-info {display:flex; min-width:0; flex:1; flex-direction:column; gap: 2px;}
.roulette-history-prize {font-size:14px; font-weight:500; line-height:1.3; color: #222;}
.roulette-history-date {font-size:12px; line-height:1.3; color: #999;}
.roulette-status-wrap {display:flex; flex-direction:column; align-items:center; gap:6px;}
.roulette-status {display:flex; justify-content:center; align-items:center; gap: 2px; min-width:80px; min-height:24px; padding:4px 8px; border-radius:999px; font-size:12px; line-height:1; text-align:center;}
.roulette-status--complete {background:#8BDA44; color:#222;}
.roulette-status--waiting {background:#eee; color:#444;}
.roulette-status--address {background:#444; color:#fff;}
.roulette-address-view {font-size:12px; line-height:1.3; color:#666; text-decoration:underline; text-underline-offset: 2px;}
.btn-roulette-more {display:flex; justify-content:center; align-items:center; gap: 4px; width:100%; height:42px; background:#fff; border-radius: 0 0 12px 12px; font-size:14px; font-weight:500; line-height:1.3; color:#222;}
.roulette-history-item[hidden] {display:none;}
.btn-roulette-more[hidden] {display:none;}

.roulette-modal-rank {font-size:20px; font-weight:700; line-height:1.3; color:#000;}
.roulette-modal-prize {font-size:20px; font-weight:700; line-height:1.3; color:#00AEEF; margin-bottom: 10px;}
.roulette-address-heading {display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;}
.roulette-address-label {font-size:14px; font-weight:600; line-height:1.3; color:#1B1C1E;}
.btn-address-search {font-size:14px; font-weight:600; line-height:1.3; color: #4986E8; text-decoration:underline; text-underline-offset: 2px;}
.roulette-address-detail {margin-top:8px; margin-bottom: 26px;}