@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap');
@import url('https://cdn.jsdelivr.net/npm/@qpokychuk/gilroy@1.0.2/index.min.css');

body {
    font-family: 'Gilroy', 'Noto Sans KR', sans-serif;
    background-color: #ffffff;
    color: #333;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
}

.container {
    width: 100%;
    max-width: 430px;
    background: #fff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
}

header {
    background-color: #D0F0F2;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* centered horizontally */
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
}

h1 {
    margin: 0 0 4px 0;
    color: #000;
    font-size: 33.8px;
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1.1;
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

h1 .brand-logo svg {
    display: block;
    width: 91px;
    height: 32px;
}

h1 sup,
.result-title sup {
    font-size: 0.5em;
    font-weight: 700;
    vertical-align: super;
}

.total-score-header {
    display: none;
    /* hidden until result */
    text-align: center;
    width: 100%;
    font-size: 1.27em;
    /* 65% of h1 */
    font-weight: 700;
    color: #333;
    margin: 0;
}

#status {
    display: none;
}

.step-section {
    display: none;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    justify-content: center;
}

.step-section.active {
    display: flex;
}

.instruction-box {
    background: white;
    padding: 30px 20px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 90%;
    max-width: 320px;
    border: none;
    margin-bottom: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 박스 안에 들어가는 액션 버튼(장치에 연결 / 확인)은 텍스트와 간격을 둔다 */
.instruction-box .action-button {
    margin-top: 24px;
    flex-shrink: 0;
}

.instruction-text {
    font-size: 1.65em;
    font-weight: 700;
    margin: 0 0 15px 0;
    color: #000;
    word-break: keep-all;
    align-self: stretch;
}

/* "이동 중..." 등 진행 상태 문구를 깜박이게 표시 */
.blinking-text {
    animation: blink-text 1.2s ease-in-out infinite;
}

@keyframes blink-text {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.25;
    }
}

.sub-text {
    font-size: 1.35em;
    color: #666;
    margin-top: 10px;
    line-height: 1.4;
}

.action-button {
    background-color: #D0F0F2;
    color: #000;
    border: none;
    padding: 17px 0;
    border-radius: 8px;
    font-size: 22px;
    font-weight: bold;
    cursor: pointer;
    width: 100%;
    max-width: 196px;
    transition: opacity 0.3s;
}

.action-button:hover {
    opacity: 0.9;
}

.action-button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

#color-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
}

.color-box {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    text-align: center;
    border: none;
    cursor: pointer;
    transition: box-shadow 0.2s, transform 0.15s;
}

.color-box:active {
    transform: scale(0.97);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.color-display {
    height: 60px;
    width: 100%;
    background-color: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
}

.color-info {
    height: 36px;
    /* increased to 150% */
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.patch-name-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 0;
}

.patch-name {
    font-weight: 700;
    margin: 0;
    font-size: 1em;
    color: #333;
}

.patch-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.patch-icon svg {
    width: 22px;
    height: 28px;
}

.wellness-score {
    color: #26C6DA;
    font-weight: 700;
    font-size: 0.82em;
    margin: 0;
    white-space: nowrap;
}

.debug-info {
    display: none;
}

/* ── 상세 페이지 ── */
#step-detail {
    display: none;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-height: 100vh;
}

#step-detail.active {
    display: flex;
}

.detail-header {
    width: 100%;
    background: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    box-sizing: border-box;
}

.detail-title {
    font-size: 1.9em;
    font-weight: 700;
    margin: 0;
    color: #000;
    text-align: center;
    flex: 1;
}

.detail-title-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.detail-nav-arrow {
    font-size: 0.95em;
    font-weight: 700;
    color: #000;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    flex-shrink: 0;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.detail-nav-arrow:active {
    opacity: 0.6;
}

.detail-nav-arrow:disabled {
    visibility: hidden;
}

.detail-color-bar {
    width: 100%;
    height: 80px;
    background-color: #eee;
    flex-shrink: 0;
}

.detail-body {
    width: 100%;
    padding: 20px 22px 30px;
    box-sizing: border-box;
    flex: 1;
}

.detail-score-line {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.detail-score-text {
    font-size: 1.36em;
    font-weight: 700;
    color: #26C6DA;
    margin: 0;
    flex: 1;
    text-align: left;
}

.detail-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.detail-icon svg {
    width: 36px;
    height: 46px;
}

.detail-summary {
    font-size: 1.05em;
    font-weight: 700;
    color: #222;
    line-height: 1.55;
    margin: 0 0 14px 0;
    word-break: keep-all;
}

.detail-description {
    font-size: 0.95em;
    color: #555;
    line-height: 1.7;
    margin: 0 0 30px 0;
    word-break: keep-all;
    white-space: pre-wrap;
}

.detail-back-bottom {
    display: block;
    width: 100%;
    margin-top: 4em;
    /* 설명글 끝나고 네 줄 정도의 여백 */
    padding: 15px 0;
    background-color: #D0F0F2;
    color: #000;
    border: none;
    border-radius: 10px;
    font-size: 1.1em;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Noto Sans KR', sans-serif;
    transition: opacity 0.2s;
}

.detail-back-bottom:active {
    opacity: 0.75;
}

/* 연결~대기 단계 화면의 뒤로가기 버튼: 상세페이지 버튼과 동일한 색상/모양이되
   카드형 레이아웃 폭에 맞춰 여백만 조정 */
.flow-back-btn {
    width: 90%;
    max-width: 320px;
    margin-top: 20px;
}

.detail-footer {
    text-align: center;
    font-size: 18px;
    color: #aaa;
    margin-top: 2em;
    /* 뒤로가기 버튼 아래 두 줄 정도의 여백 */
    width: 100%;
    padding-bottom: 20px;
}

#restartButton {
    margin-top: 10px;
}

footer {
    padding: 20px;
    text-align: center;
    font-size: 18px;
    color: #aaa;
    background: #fff;
    width: 100%;
    max-width: 430px;
    box-sizing: border-box;
}

/* ════════════════════════════
   결과 화면 대시보드 (신규)
════════════════════════════ */
.result-dashboard {
    background: linear-gradient(180deg, #cbf5f5 0%, #e3fafc 100%);
    padding: 27px 22px 40px;
    border-radius: 0 0 36px 36px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.result-title-row {
    width: 100%;
    text-align: center;
    margin-bottom: 18px;
}

.result-title {
    font-family: 'Gilroy', sans-serif;
    font-weight: 800;
    font-size: 33.8px;
    /* 26px * 1.3 */
    color: #111;
    margin: 0;
    letter-spacing: -0.5px;
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.result-title .brand-logo svg {
    display: block;
    width: 91px;
    height: 32px;
}

.result-dashboard-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 10px;
}

/* 엠블럼 */
.emblem-container {
    width: 124px;
    height: 133px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.emblem-svg-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 124px;
    height: 133px;
}

/* 우측: 이름 + 날짜 + 그래프 */
.result-dashboard-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-left: 10px;
}

.user-profile {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 700;
    font-size: 18px;
    /* 15px * 1.2 */
    color: #111;
    cursor: pointer;
    margin-bottom: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.result-date-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    transform: translateY(35px);
    /* 경계가 30px 아래로 이동한 만큼 글자도 함께 이동, 간격은 5px 유지 */
}

.result-date-text {
    font-family: 'Gilroy', 'Noto Sans KR', sans-serif;
    font-size: 13px;
    /* 시:분까지 표시되며 길어져서 축소 */
    font-weight: 600;
    color: #666;
    margin-right: 8px;
    white-space: nowrap;
}

.result-nav-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
}

.result-nav-arrow:disabled {
    cursor: not-allowed;
}

.result-nav-arrow+.result-nav-arrow {
    margin-left: 20px;
}

/* 하늘색 대시보드와 10종 그리드 사이에 작게 들어가는 "최근결과 보기" 버튼 */
.recent-result-btn-row {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding: 8px 22px 0;
    box-sizing: border-box;
}

.recent-result-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #EAFBFD;
    border: 1.5px solid #41D8E6;
    border-radius: 999px;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #0097A7;
    padding: 6px 14px;
    cursor: pointer;
    box-sizing: border-box;
    box-shadow: 0 1px 4px rgba(65, 216, 230, 0.25);
    transition: opacity 0.2s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
}

.recent-result-btn::after {
    content: '';
    width: 6px;
    height: 6px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    margin-left: 2px;
}

.recent-result-btn:active {
    opacity: 0.75;
    transform: scale(0.97);
}

.trend-graph-container {
    width: 100%;
    height: 60px;
    position: relative;
    transform: translateY(30px);
    /* 그래프 영역만 아래로 30px 이동 (하늘색 테두리, 이름, 날짜는 그대로) */
}

#trendGraphSvg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* ════════════════════════════
   결과 10종 그리드 목록 (신규)
════════════════════════════ */
.result-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    width: 100%;
    padding: 21.6px 22px 9px;
    box-sizing: border-box;
}

.result-grid-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7.776px 0;
    cursor: pointer;
    border-bottom: none;
    box-sizing: border-box;
    border-radius: 8px;
    transition: background-color 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.result-grid-item:active {
    background-color: #f2fbfc;
}

.result-grid-item:nth-child(odd) {
    padding-right: 10px;
    border-right: none;
}

.result-grid-item:nth-child(even) {
    padding-left: 10px;
    padding-right: 14px;
}

.result-grid-item:nth-last-child(-n+2) {
    border-bottom: none;
}

.result-grid-item-name {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 700;
    font-size: 16.8px;
    /* 14px * 1.2, bold */
    color: #222;
    width: 76px;
    flex-shrink: 0;
    white-space: nowrap;
    letter-spacing: -0.3px;
}

.patch-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
}

.patch-icon svg {
    width: 33px;
    /* 22px * 1.5 */
    height: 42px;
    /* 28px * 1.5 */
}

/* 스코어 박스 */
.home-grid-item-tag {
    font-family: 'Gilroy', sans-serif;
    font-weight: 700;
    font-size: 13px;
    padding: 3px 8px;
    border-radius: 6px;
    text-align: center;
    min-width: 44px;
    border: 1.5px solid #9A9A9A;
    color: #000000;
    box-sizing: border-box;
    background: transparent;
    flex-shrink: 0;
}

.tag-optimum,
.tag-appropriate {
    border: 1.5px solid #9A9A9A;
    color: #000000;
}

.tag-detected {
    border: 1.5px solid #9A9A9A;
    color: #000000;
}

.tag-warning {
    border: 1.5px solid #9A9A9A;
    color: #000000;
}

.tag-attention {
    border: 1.5px solid #9A9A9A;
    color: #000000;
}

.result-footer {
    font-family: 'Gilroy', sans-serif;
    text-align: center;
    font-size: 18px;
    color: #bbb;
    margin-top: 9px;
    margin-bottom: 21.6px;
    width: 100%;
}

.start-test-button {
    background-color: #41D8E6 !important;
    color: #FFFFFF !important;
    border-radius: 12px !important;
    max-width: 220px !important;
    padding: 14.45px 0 !important;
}

/* ════════════════════════════
   빈 화면(최초 실행 / 검사 이력 없음) 상태
════════════════════════════ */
.result-grid-item-name.dim-text {
    color: #c2c2c2;
}

.home-grid-item-tag.tag-empty {
    color: #c2c2c2 !important;
    border-color: #dcdcdc !important;
    background: transparent !important;
}

/* ════════════════════════════
   엠블럼(Total Score) 클릭 → 이동 가능 표시
════════════════════════════ */
.emblem-container {
    cursor: pointer;
}

/* ════════════════════════════
   Total Score 리스트 화면 (신규)
════════════════════════════ */
#step-total-list {
    width: 100%;
    box-sizing: border-box;
    padding: 20px 20px 0;
    align-items: stretch;
}

.total-list-title {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #222;
    text-align: center;
    margin: 4px 0 18px;
}

.total-list-items {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.total-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 12px;
    border-bottom: 1px solid #eef2f3;
    border-radius: 10px;
    transition: background-color 0.15s;
}

.total-list-row:hover {
    background-color: #f6fbfc;
}

.total-list-date {
    font-family: 'Gilroy', 'Noto Sans KR', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #444;
    white-space: nowrap;
    flex-shrink: 0;
}

.total-list-score {
    font-family: 'Gilroy', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #111;
    flex: 1;
    text-align: left;
    padding-left: 10px;
    white-space: nowrap;
}

.total-list-goto-btn {
    background-color: #41D8E6;
    color: #fff;
    border: none;
    padding: 8px 14px;
    border-radius: 8px;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(65, 216, 230, 0.35);
    transition: opacity 0.2s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
}

.total-list-goto-btn:active {
    opacity: 0.8;
    transform: scale(0.96);
}

.total-list-empty {
    text-align: center;
    color: #999;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 15px;
    padding: 40px 0;
}

.total-list-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 18px 0 8px;
    flex-wrap: wrap;
}

.total-list-page-arrow,
.total-list-page-num {
    background: none;
    border: none;
    font-family: 'Gilroy', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #666;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    line-height: 1;
}

.total-list-page-arrow:disabled {
    color: #ddd;
    cursor: not-allowed;
}

.total-list-page-num.active {
    background-color: #41D8E6;
    color: #fff;
}

#totalListBackBtn {
    margin: 12px auto 20px;
}

.total-list-footer {
    font-family: 'Gilroy', sans-serif;
    text-align: center;
    font-size: 18px;
    color: #bbb;
    margin-top: 9px;
    margin-bottom: 21.6px;
    width: 100%;
}

/* ════════════════════════════
   좁은 화면 대응 (390px 미만)

   이 레이아웃은 430px 기준으로 만들어졌고 가로 고정 px 이 많아,
   콘텐츠 최소 폭이 약 380px 이다. 그래서 390px 미만(갤럭시 360dp,
   iPhone SE/mini 375pt, SE1 320pt)에서는 대시보드 우측과 10종 그리드의
   점수 태그가 화면 밖으로 밀려났다.

   해결: 390px 를 기준(1.0배)으로 가로 치수를 vw 로 환산해, 그보다 좁은
   화면에서만 같은 비율로 함께 줄어들게 한다. 모든 치수가 동일한 비율로
   줄어들므로 390px 에서 들어맞는 배치는 어떤 폭에서도 그대로 들어맞는다.
   390px 이상에서는 이 블록이 적용되지 않아 기존 렌더링과 완전히 동일하다.

   환산식: (px 값 / 390) * 100 = vw 값
════════════════════════════ */
@media (max-width: 389.98px) {

    /* ── 상단 헤더 (검사 진행 화면) ── */
    header {
        padding-left: 5.128vw;   /* 20px */
        padding-right: 5.128vw;
    }

    h1,
    .result-title {
        font-size: 8.667vw;      /* 33.8px */
        gap: 1.538vw;            /* 6px */
    }

    h1 .brand-logo svg,
    .result-title .brand-logo svg {
        width: 23.333vw;         /* 91px */
        height: 8.205vw;         /* 32px */
    }

    /* ── 결과 화면 대시보드 ── */
    .result-dashboard {
        padding-left: 5.641vw;   /* 22px */
        padding-right: 5.641vw;
    }

    .result-dashboard-main {
        gap: 2.564vw;            /* 10px */
    }

    .emblem-container,
    .emblem-svg-wrapper {
        width: 31.795vw;         /* 124px */
        height: 34.103vw;        /* 133px */
    }

    .emblem-svg-wrapper svg {
        width: 100%;
        height: 100%;
    }

    .result-dashboard-right {
        padding-left: 2.564vw;   /* 10px */
    }

    .user-profile {
        font-size: 4.615vw;      /* 18px */
    }

    .result-date-row {
        gap: 1.538vw;            /* 6px */
    }

    .result-date-text {
        font-size: 3.333vw;      /* 13px */
        margin-right: 2.051vw;   /* 8px */
    }

    .result-nav-arrow+.result-nav-arrow {
        margin-left: 5.128vw;    /* 20px */
    }

    .recent-result-btn-row {
        padding-left: 5.641vw;   /* 22px */
        padding-right: 5.641vw;
    }

    /* ── 10종 그리드 (가장 크게 넘치던 부분) ── */
    .result-grid {
        padding-left: 5.641vw;   /* 22px */
        padding-right: 5.641vw;
    }

    .result-grid-item:nth-child(odd) {
        padding-right: 2.564vw;  /* 10px */
    }

    .result-grid-item:nth-child(even) {
        padding-left: 2.564vw;   /* 10px */
        padding-right: 3.590vw;  /* 14px */
    }

    .result-grid-item-name {
        width: 19.487vw;         /* 76px */
        font-size: 4.308vw;      /* 16.8px */
    }

    .result-grid .patch-icon {
        width: 10.769vw;         /* 42px */
        height: 10.769vw;
    }

    .result-grid .patch-icon svg {
        width: 8.462vw;          /* 33px */
        height: 10.769vw;        /* 42px */
    }

    .home-grid-item-tag {
        min-width: 11.282vw;     /* 44px */
        font-size: 3.333vw;      /* 13px */
        padding-left: 2.051vw;   /* 8px */
        padding-right: 2.051vw;
    }

    /* ── 상세 화면 ── */
    .detail-header {
        padding-left: 5.641vw;   /* 22px */
        padding-right: 5.641vw;
    }

    /* ── 지난 검사 결과 목록 (320px 에서 '바로가기' 버튼이 밀려났던 부분) ── */
    #step-total-list {
        padding-left: 5.128vw;   /* 20px */
        padding-right: 5.128vw;
    }

    .total-list-title {
        font-size: 5.128vw;      /* 20px */
    }

    .total-list-row {
        gap: 2.051vw;            /* 8px */
        padding-left: 1.026vw;   /* 4px */
        padding-right: 1.026vw;
    }

    .total-list-date {
        font-size: 3.590vw;      /* 14px */
    }

    .total-list-score {
        font-size: 3.846vw;      /* 15px */
        padding-left: 2.564vw;   /* 10px */
    }

    .total-list-goto-btn {
        font-size: 3.333vw;      /* 13px */
        padding-left: 3.590vw;   /* 14px */
        padding-right: 3.590vw;
    }
}