/* Hallmark · checked: 2026-11-10 · genre: playful (inferred) · shape: app screen
 * fixed: 63 (가운뎃점 줄 → 칸), 4 (카드 안 카드), 30a (이모지 아이콘), 48 (새 색은 토큰), 26a (포커스)
 * waive 24b: 갈무리11 11px 비트맵 격자·2px 픽셀 깎기에 맞춘 촘촘한 게임 목록 간격(3·5·6·7px)이라 4px 단계로 안 맞춤
 * built: the project · redesign: full (app screen: 퀘스트) · v2.0.0
 * 오너 11-10 "가독성 떨어져, 칸도 각지기만": 구역은 테두리 대신 바탕색·간격으로, 모서리는 2단 픽셀 깎기,
 * 지금 할 일 한 줄을 맨 위에, 끝낸 건 흐리게, 받을 수 있는 것만 금색 버튼. DESIGN.md의 '모서리 0'은 이 화면에서 오너 말로 바꿈 */
:root{
  --q-sec:#18122a;          /* 구역 바탕: 판넬보다 한 단 어둡게 */
  --q-row:#241c38;          /* 줄 바탕 */
  --q-row-hover:#2d2446;
  --q-row-next:#30264c;     /* 지금 할 일 줄 */
  --q-chip:rgba(7,5,11,.38);
  --q-meta:#cfc3e8;         /* 보조 글자: 판넬 위 7:1 이상 */
  --q-gold-wash:rgba(242,193,78,.11);
  --q-check-ink:#10210c;
  --q-ink-on:#f6f1ff;       /* 자줏빛 바탕 위 글자 */
  --q-shade:#07050b;        /* 글자 그림자 먹선 */
  --q-tip-line:rgba(195,166,255,.18);
  --q-scrim:rgba(8,5,14,.78);   /* 그림 위 글자 깔림(DESIGN.md 먹색 깔림 규칙) */
  --q-step:polygon(0 4px,2px 4px,2px 2px,4px 2px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 2px,calc(100% - 2px) 2px,calc(100% - 2px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 2px) calc(100% - 4px),calc(100% - 2px) calc(100% - 2px),calc(100% - 4px) calc(100% - 2px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 2px),2px calc(100% - 2px),2px calc(100% - 4px),0 calc(100% - 4px));
}

/* ---------- 구역: 테두리 없이 바탕색 한 단 + 픽셀 둥근 모서리 ---------- */
#tab-quest .home-sec,#tab-quest>.panel{background:var(--q-sec)!important;border:0;box-shadow:none!important;clip-path:var(--q-step);padding:14px 14px 12px;margin:0 0 12px;color:var(--text)}
#tab-quest .home-h,#tab-quest>.panel>.panel-title{font-size:17px;line-height:1.3;color:var(--gold);margin:0 0 10px;text-shadow:1px 1px 0 var(--q-shade)}
#tab-quest .home-miss-label{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;width:auto;font-size:14px;color:var(--text);padding:14px 0 6px}
#tab-quest .home-miss-label .q-meta{margin:0}
.q-prog{flex:none;font-size:13px;color:var(--text);white-space:nowrap}

/* ---------- 지금 할 일 ---------- */
.q-now{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--q-row-next);clip-path:var(--q-step);box-shadow:inset 4px 0 0 var(--gold)}
.q-now-main{flex:1;min-width:0}
.q-now-label{display:block;font-size:12px;color:var(--gold)}
.q-now b{display:block;font-weight:400;font-size:18px;line-height:1.3;color:var(--text);margin:2px 0 4px}
.q-now .btn{width:auto;flex:none;padding:10px 16px;font-size:14px}
.q-now.is-done{box-shadow:none;opacity:.6}
.q-hot{color:var(--gold)!important}

/* ---------- 줄 하나 ---------- */
.q-item{display:flex;align-items:center;gap:12px;padding:10px 12px;margin:0 0 4px;background:var(--q-row);clip-path:var(--q-step);transition:background-color .12s ease-out,opacity .12s ease-out,transform .08s ease-out}
.q-item[onclick]{cursor:pointer}
.q-item[onclick]:hover{background:var(--q-row-hover)}
.q-item[onclick]:active{background:var(--q-row-next);transform:translateY(1px)}
.q-main{flex:1;min-width:0}
.q-name{font-size:14px;line-height:1.35;color:var(--text)}
.q-desc{font-size:12px;line-height:1.5;color:var(--q-meta);margin-top:2px}
.q-meta{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.q-meta span{font-size:12px;line-height:1.4;color:var(--q-meta);background:var(--q-chip);padding:2px 6px}
.q-gmeta{margin:0 0 8px}
.q-reward{flex:none;font-size:13px;color:var(--gold);white-space:nowrap}
.q-state{flex:none;font-size:12px;color:var(--text3);white-space:nowrap}
.q-item .btn{width:auto;flex:none;padding:7px 12px;font-size:12px}
.q-art{flex:none;width:44px;height:44px;object-fit:contain;image-rendering:pixelated}
.q-bar{height:6px;background:var(--q-chip);margin-top:7px}
.q-bar i{display:block;height:100%;background:var(--green)}

/* 상태: 지금 할 일 = 자줏빛 줄 / 받을 수 있음 = 금색 / 끝남 = 흐리게 / 잠김 = 더 흐리게 */
.q-item.is-next{background:var(--q-row-next);box-shadow:inset 3px 0 0 var(--accent2)}
.q-item.is-next .btn:not(.btn-gold){background:var(--accent)!important;color:var(--q-ink-on)!important}
.q-item.is-ready{background:var(--q-gold-wash);box-shadow:inset 3px 0 0 var(--gold)}
.q-item.is-ready .q-name{color:var(--gold2)}
.q-item.is-done{background:transparent;opacity:.5;padding-top:6px;padding-bottom:6px}
.q-item.is-done .q-desc,.q-item.is-done .q-meta{display:none}
.q-item.is-locked{opacity:.4}
.q-item.is-tip{background:transparent;box-shadow:inset 0 0 0 1px var(--q-tip-line)}
.q-item.is-tip .q-state{color:var(--accent2)}

/* 체크 칸 */
.q-check{flex:none;width:18px;height:18px;background:var(--q-chip);box-shadow:inset 0 0 0 2px var(--border)}
.q-check.on{background:var(--green);box-shadow:none;position:relative}
.q-check.on::after{content:'';position:absolute;left:6px;top:2px;width:4px;height:9px;border:solid var(--q-check-ink);border-width:0 3px 3px 0;transform:rotate(45deg)}

/* 묶음(로드맵·시험장 등): 제목 한 줄 + 줄 목록, 바깥 상자 없음 */
.q-group{margin:14px 0 0}
.q-ghead{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 0 6px}
.q-ghead span{font-size:14px;color:var(--text)}
.q-ghead em{font-style:normal;font-size:13px;color:var(--gold)}
.q-group:first-child{margin-top:0}
.q-choice{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.q-choice .btn{padding:11px 4px;font-size:13px}
#growth-route-list>.q-item{margin-top:8px}

/* ---------- 출석: 날짜 칸을 크게, 보상 날은 금색 숫자 ---------- */
#tab-quest .home-att{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;align-items:end;padding:12px 0 4px;border:0}
#tab-quest .home-att .home-row-label{grid-column:1/-1;width:auto;font-size:14px;color:var(--text)}
#tab-quest .att-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;margin:0}
#tab-quest .att-day{aspect-ratio:auto;height:28px;border:0;border-radius:0;background:var(--q-row);animation:none;clip-path:var(--q-step)}
#tab-quest .att-day .att-num{font-size:12px;font-weight:400;color:var(--text2)}
#tab-quest .att-day.gift .att-num{color:var(--gold)}
#tab-quest .att-day.done{background:var(--accent)}
#tab-quest .att-day.done .att-num{color:var(--q-ink-on)}
#tab-quest .att-day.today{background:var(--q-row-next);box-shadow:inset 0 0 0 2px var(--gold)}
#tab-quest .home-att .btn{width:auto;padding:9px 14px;font-size:13px}
#tab-quest #mission-claim-btn{margin-top:8px;padding:11px;font-size:13px}

/* ---------- 랭크 띠: 가운뎃점 대신 칸 ---------- */
.gs-chip{font-size:13px;color:var(--text);background:var(--q-chip);padding:3px 8px}
.goal-strip{clip-path:var(--q-step)}

/* 키보드 포커스 */
.q-item[onclick]:focus-visible,.q-item .btn:focus-visible,.q-now .btn:focus-visible{outline:2px solid var(--gold2);outline-offset:-2px}

@media (prefers-reduced-motion:reduce){.q-item{transition:none}}
@media (min-width:900px){
  #tab-quest .att-grid{grid-template-columns:repeat(14,minmax(0,1fr))}
  #tab-quest .att-day{height:24px}
  #tab-quest .home-sec,#tab-quest>.panel{padding:12px 14px 10px}
  #tab-quest .home-h,#tab-quest>.panel>.panel-title{margin-bottom:8px}
  #tab-quest .home-att{padding-top:10px}
  #tab-quest .home-miss-label{padding:10px 0 5px}
  #mission-list .q-item{padding:7px 12px;margin-bottom:3px}
  #mission-list .q-item.is-done{padding:4px 12px}
  #mission-list{max-height:none}
  #growth-route-list{max-height:calc(100vh - 470px)}
  .q-now{padding:8px 12px}
  .q-now b{font-size:16px;margin:0 0 3px}
  .q-now .btn{padding:8px 14px}
  #tab-quest .att-day{height:22px}
}

/* ========== 화면 전체로 넓힘(11-10 오너 "이 방향으로 넓혀") ==========
   판넬·칸의 2px 먹선 입체 테두리(index.html 1600줄 규칙)가 화면마다 상자를 겹겹이 만들던 것 →
   큰 판넬 = 한 단 어두운 바탕 + 픽셀 깎은 모서리, 안쪽 칸 = 한 단 밝은 바탕, 테두리 없음. 버튼 입체는 그대로 */
#app .panel{background:var(--q-sec)!important;box-shadow:none!important;clip-path:var(--q-step);padding:14px;color:var(--text)}
#app .panel-title{font-size:16px;margin-bottom:10px}
#app :is(.cooldown-card,.pet-training-card,.equipped-slot,.stat-row,.shop-item,.quest-card,.rate-item,.mission-item){background:var(--q-row)!important;box-shadow:none!important;clip-path:var(--q-step)}
#app :is(.cooldown-card,.equipped-slot,.shop-item,.pet-training-card)[onclick]:hover{background:var(--q-row-hover)!important}
/* 가방 칸: 모서리는 그대로(장착 표시·강화 수치가 잘리지 않게), 바깥 먹선만 걷고 장착은 안쪽 금선 */
#app .inv-item{background:var(--q-row)!important;box-shadow:none!important}
#app .inv-item.equipped{box-shadow:inset 0 0 0 2px var(--gold)!important}
#app .inv-item .item-name{color:var(--q-meta)}
/* 종류 탭(펫·무기·갑옷…): 상자 다섯 개 대신 한 판 위 탭, 고른 것만 금색 밑줄 */
#app .gacha-type-tabs{gap:2px;padding:3px;background:var(--q-sec);clip-path:var(--q-step)}
#app .gacha-tab{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;font-size:13px;font-weight:400;color:var(--text2);padding:9px 6px}
#app .gacha-tab:hover{color:var(--text)}
#app .gacha-tab.active{background:var(--q-row-next)!important;color:var(--gold)!important;box-shadow:inset 0 -3px 0 var(--gold)!important}
/* 상점·카드 글씨: 이름 14px, 설명 12px 밝게 */
#app .shop-item-name{font-size:14px;font-weight:400}
#app .shop-item-desc{font-size:12px;color:var(--q-meta)}
#app .shop-item-price{font-weight:400}
/* 상점 칸: 설명이 좁은 세로 줄에 끼던 것 → 이름·설명은 칸 너비 전부, 아래 한 줄에 값·개수·구매.
   구매 버튼이 아홉 개 다 금색이던 것 → 자줏빛(한 등불 규칙: 금색은 화면에 하나) */
#app .shop-item{display:grid!important;grid-template-columns:minmax(0,1fr);gap:8px;align-items:stretch}
#app .shop-item-icon:empty{display:none}
#app .shop-item>div:last-child{display:flex;align-items:center;gap:6px;text-align:left!important}
#app .shop-item>div:last-child .shop-item-price{flex:1}
#app .shop-item>div:last-child :is(input,.btn){margin-top:0!important}
#tab-shop .shop-item .btn-gold{background:var(--accent)!important;color:var(--q-ink-on)!important}

/* PC 한 창 규칙(오너 11-09 "스크롤 없이 한 창에", goals.css 끝의 칸 나눔): 위 공용 규칙이 늘린 높이를 PC에서만 되돌림.
   점검 = tools/qa/sim.mjs ONLY=tabs(1280×800)에서 '스크롤 생김' 0 */
@media (min-width:900px){
  #app .panel{padding:12px 13px}
  #app .panel-title{font-size:15px;margin-bottom:8px}
  #app .gacha-type-tabs{padding:2px}
  #app .gacha-tab{padding:6px}
  #tab-quest .home-sec,#tab-quest>.panel{padding:10px 13px 8px}
  #growth-route-list{max-height:calc(100vh - 520px)}
  #tab-quest .q-art{width:34px;height:34px}
  #weekday-boss-quest-link .q-item{padding:6px 10px}
  #weekday-boss-quest-link .q-meta{margin-top:3px}
}

/* ---------- 요일 보스 레이드(11-10 오너 "화면이 너무 남아돌아, 밑 칸 여백, 공중에 뜬 느낌, 캐릭터 위 데미지 잘림") ----------
   무대를 남은 화면 높이만큼 키우고, 배경 그림(바깥 img — 무대는 index.html 1898줄 규칙으로 투명)은 버튼 줄 위까지만 덮어
   바닥이 버튼에 가리지 않게, 무대 아래 여백을 줄여 발이 그림 바닥선에 닿게, 제목은 무대 위에 얹음 */
#weekday-boss-raid>div{height:calc(100dvh - 236px);min-height:330px;border:0!important;border-radius:0!important;background:var(--q-sec)!important;clip-path:var(--q-step)}
#weekday-boss-raid>div>img{height:calc(100% - 64px)!important;object-position:center bottom;opacity:.92!important}
#weekday-boss-raid>div>div{height:100%;min-height:0!important;padding:0!important;background:linear-gradient(180deg,var(--q-scrim),transparent 26%)!important}
#weekday-boss-raid>div>div>div:first-child{position:absolute;top:10px;left:0;right:0;z-index:3;pointer-events:none;text-shadow:1px 1px 0 var(--q-shade)}
#wd-duel{flex:1;display:flex;flex-direction:column;min-height:0}
.wd-duel .rr-stage.wd{flex:1;height:auto;min-height:250px}
.rr-stage.wd .rr-cam{padding:0 3% 2px}
.rr-stage.wd .rr-skip{left:auto;right:8px;transform:none}
#wd-claim-btn{flex:none;margin:10px 12px 12px;width:auto}
/* 데미지 숫자: 무대 맨 위에서 떠올라 잘리던 것 → 머리 높이에서 시작(모든 대결 무대) */
.rr-stage:not(.wd) .rr-dmg{top:40px}
@media (max-width:899px){
  /* 폰은 #app 전체가 zoom .92라 빼는 높이를 그만큼 줄임 */
  #weekday-boss-raid>div{height:calc(100dvh - 176px)}
}