.modujang-v2-aquarium {
    min-width: 0;
    /* 배경 fixed 는 모바일에서 재합성 부담만 크고, 안쪽 스크롤 영역을 쓰는 화면이라 효과도 없음 */
    background: #74d5f7 url('/assets/img/bg_aqua.png') center top / cover no-repeat;
    color: #222;
}

.modujang-v2-aquarium .home__products { min-height: 100dvh; padding-bottom: 0; }
.modujang-v2-aquarium .page__home { min-height: 100dvh; background: transparent; }
/* --v2-header-fade 는 홈 배경색(#8EDDF8) 을 기준으로 만든 값이다.
   도감은 배경이 bg_aqua.png 이고 위쪽이 #7FD2FA 라 색이 미묘하게 달랐고,
   그 차이가 헤더 자리에 띠로 보여 화면이 잘린 것처럼 읽혔다.
   여기서는 도감 배경색으로 같은 모양의 페이드를 다시 만든다 */
.aquarium-header {
    position: sticky; top: 0; z-index: 12; display: flex; align-items: flex-start;
    justify-content: space-between; width: min(100%, 576px); height: 68px; margin: 0 auto;
    padding: 8px clamp(14px, 4vw, 24px);
}
/* 보관함(.storage-v2-header) 과 같은 방식.
   헤더 뒤로 본문이 스크롤되며 반투명 페이드 밑으로 사라지게, 배경은 헤더보다 조금 더 아래까지 깔아준다 */
.aquarium-header::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: -1;
    height: calc(100% + clamp(12px, 3.59vw, 20px));
    background: linear-gradient(180deg, rgba(127, 210, 250, .98) 0%, rgba(127, 210, 250, .86) 52%, rgba(127, 210, 250, 0) 100%);
    pointer-events: none;
}
.aquarium-back { width: 32px; height: 40px; padding: 8px 7px; background: transparent; border: 0; }
.aquarium-back img { width: 11px; }
.aquarium-header-links { display: flex; gap: 12px; }
.aquarium-header-links button { min-width: 36px; padding: 0; border: 0; background: transparent; color: #174d73; text-align: center; }
.aquarium-header-links span { display: grid; place-items: center; height: 27px; }
.aquarium-header-links img { width: 25px; max-height: 25px; object-fit: contain; }
.aquarium-header-links em { display: block; margin-top: 2px; font-size: 10px; font-style: normal; font-weight: 700; }

/* 제목이 sticky 헤더(68px) 밑에 잘려 들어가던 문제.
   전역 .img-title-wrap 의 top:-23px 음수 당김이 원인이라 수족관에서만 top 을 0 으로 되돌리고,
   헤더 아래로 살짝(12px) 내려 제목이 온전히 보이게 함. */
.modujang-v2-aquarium .aquarium-title.img-title-wrap { top: 0; }
.aquarium-main { width: min(100%, 576px); margin: 12px auto 0; padding: 0 clamp(12px, 3.5vw, 22px); }
.modujang-v2-aquarium .aquarium-flow { min-height: calc(100dvh - 58px); height: auto; padding: 0 0 104px; }
.aquarium-title { margin: 0 auto 12px; text-align: center; }
.aquarium-title img { width: min(68vw, 270px); height: auto; }
.modujang-v2-aquarium .aquarium-flow__level { padding: 15px clamp(12px, 4vw, 18px); border-radius: 20px; }
.modujang-v2-aquarium .aquarium-flow__level-head { margin-bottom: 14px; }

.aquarium-empty-season {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 176px;
    padding: 22px 18px 20px;
    border: 1px solid rgba(32, 139, 190, .58);
    border-radius: 24px;
    background:
        radial-gradient(circle at 14% 22%, rgba(255, 255, 255, .92) 0 3px, transparent 4px),
        radial-gradient(circle at 88% 74%, rgba(67, 191, 233, .15) 0 7px, transparent 8px),
        linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(224, 249, 255, .94));
    box-shadow: 0 7px 18px rgba(13, 106, 158, .17), inset 0 1px 0 #fff;
    text-align: center;
}
.aquarium-empty-season::after {
    content: '';
    position: absolute;
    right: -26px;
    bottom: -38px;
    width: 106px;
    height: 72px;
    border: 11px solid rgba(39, 171, 221, .08);
    border-radius: 50%;
    pointer-events: none;
}
.aquarium-empty-season__icon {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    margin-bottom: 12px;
    border: 1px solid rgba(48, 162, 207, .42);
    border-radius: 50%;
    background: linear-gradient(145deg, #fff, #c9f3ff);
    box-shadow: 0 5px 12px rgba(12, 113, 164, .16), inset 0 1px 0 #fff;
}
.aquarium-empty-season__icon::before,
.aquarium-empty-season__icon::after {
    content: '';
    position: absolute;
    border: 1px solid rgba(39, 158, 207, .4);
    border-radius: 50%;
    background: rgba(255, 255, 255, .72);
}
.aquarium-empty-season__icon::before { top: 8px; right: 8px; width: 8px; height: 8px; }
.aquarium-empty-season__icon::after { top: 18px; right: 2px; width: 4px; height: 4px; }
.aquarium-empty-season__icon img { width: 54px; height: 54px; object-fit: contain; image-rendering: auto; }
.aquarium-empty-season strong,
.aquarium-empty-season p { position: relative; z-index: 1; }
.aquarium-empty-season strong { color: #174d73; font-size: clamp(16px, 4.5vw, 19px); font-weight: 800; letter-spacing: -.025em; }
.aquarium-empty-season p { margin: 5px 0 0; color: #658399; font-size: clamp(11px, 3.1vw, 13px); font-weight: 600; }

/* 등급별 상단 박스 배경 (스텝 태그 배색과 동일 계열) + 흰 문구 */
.modujang-v2-aquarium .aquarium-flow__level.level-bg-0,
.modujang-v2-aquarium .aquarium-flow__level.level-bg-1 { border-color: var(--main-600); background: var(--main-400); }
.modujang-v2-aquarium .aquarium-flow__level.level-bg-2 { border-color: var(--brown-800); background: var(--yellow-800); }
.modujang-v2-aquarium .aquarium-flow__level.level-bg-3 { border-color: var(--blue-600); background: var(--blue-400); }
.modujang-v2-aquarium .aquarium-flow__level.level-bg-4 { border-color: #FF2442; background: #FF667A; }
.modujang-v2-aquarium .aquarium-flow__status,
.modujang-v2-aquarium .aquarium-flow__status b { color: #fff; }

/* 배지는 흰 바탕 + 등급색 글씨로 반전 (배경색과 겹치지 않게) */
.modujang-v2-aquarium .aquarium-flow__badge.level-0,
.modujang-v2-aquarium .aquarium-flow__badge.level-1 { border-color: var(--main-600); background: #fff; color: var(--main-600); }
.modujang-v2-aquarium .aquarium-flow__badge.level-2 { border-color: var(--brown-800); background: #fff; color: var(--brown-800); }
.modujang-v2-aquarium .aquarium-flow__badge.level-3 { border-color: var(--blue-600); background: #fff; color: var(--blue-600); }
.modujang-v2-aquarium .aquarium-flow__badge.level-4 { border-color: #FF2442; background: #fff; color: #FF2442; }
.modujang-v2-aquarium .aquarium-flow__quest { margin-top: 14px; border-radius: 20px; }
.modujang-v2-aquarium .aquarium-flow__quest-inner { padding: 16px clamp(10px, 3.7vw, 18px); border-radius: 17px; }
.modujang-v2-aquarium .aquarium-flow__quest-title { font-size: clamp(12px, 3.7vw, 16px); white-space: nowrap; }
.modujang-v2-aquarium .aquarium-flow__quest-count { font-size: 13px; }
.modujang-v2-aquarium .aquarium-flow__steps { gap: clamp(5px, 3vw, 18px); }
.modujang-v2-aquarium .aquarium-flow__step { min-width: 0; width: 54px; flex: 1 1 0; }
.modujang-v2-aquarium .aquarium-flow__step-box { width: clamp(40px, 11vw, 48px); height: clamp(40px, 11vw, 48px); }
.modujang-v2-aquarium .aquarium-flow__step-box::after { left: calc(100% + 1px); width: clamp(20px, 7.5vw, 44px); }
.modujang-v2-aquarium .aquarium-flow__step-action { min-width: 42px; padding: 0 8px; }
.modujang-v2-aquarium .aquarium-flow__grid { gap: clamp(5px, 1.7vw, 9px); margin-top: 14px; }
.modujang-v2-aquarium .aquarium-flow__card { min-width: 0; min-height: clamp(64px, 19vw, 82px); padding: 8px 2px 4px; }
.modujang-v2-aquarium .aquarium-flow__card-fish { max-width: 62%; height: clamp(24px, 7vw, 34px); }
.modujang-v2-aquarium .aquarium-flow__card-check { top: 3px; right: 3px; width: clamp(13px, 4vw, 20px); height: auto; }
.modujang-v2-aquarium .aquarium-flow__card b { overflow: hidden; font-size: clamp(9px, 2.8vw, 12px); white-space: nowrap; text-overflow: ellipsis; }
.modujang-v2-aquarium .icon-fish-star { width: clamp(5px, 1.8vw, 8px); }

.aquarium-dialog { position: fixed; inset: 0; z-index: 40; display: none; align-items: center; justify-content: center; max-width: 576px; margin: 0 auto; padding: 20px; background: rgba(12,18,27,.62); }
.aquarium-dialog.is-open { display: flex; }
.aquarium-dialog[hidden].is-open { display: flex; }
.aquarium-dialog-open { overflow: hidden; }
.aquarium-dialog .aquarium-flow__popup { max-height: calc(100dvh - 40px); overflow-y: auto; }
.aquarium-dialog .aquarium-flow__popup.quest { position: absolute; bottom: 0; left: 0; max-width: 576px; max-height: calc(100dvh - 24px); border-radius: 22px 22px 0 0; }
.aquarium-dialog .aquarium-flow__popup.simple { width: min(100%, 320px); }
.aquarium-dialog .aquarium22-reward { position: absolute; bottom: 0; left: 0; min-height: 0; max-height: calc(100dvh - 44px); border-radius: 22px 22px 0 0; }
.aquarium-dialog .aquarium22-confirm { position: sticky; bottom: 0; }

@media (max-width: 359px) {
    .aquarium-main { padding-inline: 8px; }
    .aquarium-header { padding-inline: 10px; }
    .modujang-v2-aquarium .aquarium-flow__badge { width: 70px; font-size: 12px; }
    .modujang-v2-aquarium .aquarium-flow__status { font-size: 13px; }
    .modujang-v2-aquarium .aquarium-flow__step-tag { font-size: 8px; }
    .modujang-v2-aquarium .aquarium-flow__step-box::after { width: 19px; }
    .aquarium-dialog { padding: 12px; }
    .aquarium-dialog .aquarium-flow__guide-item { min-height: 50px; padding: 0 10px; }
    .aquarium-dialog .aquarium-flow__guide-item span { font-size: 12px; }
}

@media (min-width: 430px) {
    .aquarium-main { padding-inline: 24px; }
    .modujang-v2-aquarium .aquarium-flow__card { min-height: 82px; }
    .modujang-v2-aquarium .aquarium-flow__card-fish { height: 34px; }
}

/* 스크롤 영역이 헤더 뒤까지 올라오도록 헤더 자리를 비우고(음수 마진), 그만큼 본문 위 여백을 준다.
   헤더가 따로 flex 아이템으로 서 있으면 본문이 헤더 아랫선에서 딱 잘려 보였다 */
.modujang-v2-aquarium > .aquarium-header { margin-bottom: -68px; }
.modujang-v2-aquarium > .aquarium-main {
    flex: 1 1 0;
    height: auto;
    min-height: 0;
    margin-top: 0;
    margin-bottom: var(--modujang-v2-scroll-clip-bottom);
    padding-top: calc(68px + 12px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
    /* -webkit-overflow-scrolling 은 옛 iOS 전용 속성인데,
       안드로이드 브라우저가 이걸 레이어 힌트로 받아 스크롤 영역을 따로 합성함.
       그 여파로 위에 겹친 헤더/하단 메뉴 터치가 씹히는 일이 있어 뺌 (iOS 13+ 는 기본 동작) */
}
.modujang-v2-aquarium > .aquarium-main::-webkit-scrollbar { display: none; }

/* 수족관 안내 팝업의 마지막 안내문(시즌 초기화). 목록 아래 한 줄짜리 보조 문구 (QA #42) */
.aquarium-flow__popup .aquarium-flow__guide-note { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: #f1f7ff; color: #4a5a6d; font-size: clamp(12px, 3.33vw, 14px); line-height: 1.55; text-align: left; }
.aquarium-flow__popup .aquarium-flow__guide-note img { flex: none; width: 18px; height: 18px; margin-top: 1px; }