/* ============================================================
   common_allergen.css  (원본 chipotle.com/allergens 디자인 매칭)
   ============================================================ */

/* Pretendard 한글 웹폰트 — 로컬 파일 사용 (CDN 의존 제거) */
@font-face { font-family:"Pretendard"; src:url("/assets/font/static/Pretendard-Light.otf") format("opentype");    font-weight:300; font-display:swap; }
@font-face { font-family:"Pretendard"; src:url("/assets/font/static/Pretendard-Regular.otf") format("opentype");  font-weight:400; font-display:swap; }
@font-face { font-family:"Pretendard"; src:url("/assets/font/static/Pretendard-Medium.otf") format("opentype");   font-weight:500; font-display:swap; }
@font-face { font-family:"Pretendard"; src:url("/assets/font/static/Pretendard-SemiBold.otf") format("opentype"); font-weight:600; font-display:swap; }
@font-face { font-family:"Pretendard"; src:url("/assets/font/static/Pretendard-Bold.otf") format("opentype");     font-weight:700; font-display:swap; }
@font-face { font-family:"Pretendard"; src:url("/assets/font/static/Pretendard-ExtraBold.otf") format("opentype");font-weight:800; font-display:swap; }

:root {
    --brown:       #451400;
    --brown-light: #786259;
    --grey:        #e5e0dc;
    --grey-line:   #d4cbc7;
    --grey-bg:     #f1f0ee;
    --text-dark:   #2b1810;

    /* 알러지/식이 컬러 (SVG와 동일) */
    --c-dairy:      #3a9fd6;
    --c-soy:        #d49b1c;
    --c-gluten:     #7e1d3a;
    --c-sulphites:  #8a8580;
    --c-vegetarian: #3a9fd6;
    --c-vegan:      #6e8e1c;
    --c-paleo:      #b0c842;
    --c-keto:       #3a9fd6;

    /* 폰트: 한글 Pretendard 우선, 영문 폴백 */
    --font-pretendard: "Pretendard",
                       -apple-system, BlinkMacSystemFont,
                       "Apple SD Gothic Neo", "Noto Sans KR",
                       "Helvetica Neue", "Segoe UI", Arial, sans-serif;
}

/* ── 페이지 래퍼 ── */
.allergen-page {
    color: var(--text-dark);
    font-family: var(--font-pretendard);
    background: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 페이지 안 모든 요소는 Pretendard 상속 */
.allergen-page button {
    font-family: var(--font-pretendard);
}

/* ── Hero ── */
.allergen-hero {
    padding: 56px 24px 24px;
    text-align: left;
    max-width: 1100px;
    margin: 0 auto;
}

.allergen-hero__title {
    font-family: var(--font-pretendard);
    font-size: 32px;
    font-weight: 800;
    color: var(--brown);
    margin: 0 0 14px;
    letter-spacing: -0.8px;
    line-height: 1.25;
}

.allergen-hero__desc {
    font-size: 16px;
    line-height: 1.65;
    color: var(--brown);
    letter-spacing: -0.2px;
    margin: 0;
}

/* ── 본문 래퍼 ── */
.allergen-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 24px 60px;
}

/* ============================================================
   탭 토글 — pill 컨테이너 안에 두 버튼이 박힌 형태 (원본 chipotle.com 매칭)
   ============================================================ */
.allergen-toggle {
    display: inline-flex;
    margin: 32px auto 28px;
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.10);
    padding: 0;
    /* 가운데 정렬 */
    align-self: center;
}

/* 부모를 flex로 만들어 가운데 정렬 */
.allergen-wrap > .allergen-toggle {
    display: flex;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.allergen-toggle__btn {
    min-width: 200px;
    padding: 14px 32px;
    font-family: var(--font-pretendard);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.2px;
    background: transparent;
    color: var(--brown);
    border: none;
    cursor: pointer;
    border-radius: 999px;
    transition: background 0.2s, color 0.2s;
    position: relative;
    z-index: 1;
}

.allergen-toggle__btn.is-active {
    background: var(--brown);
    color: #fff;
    z-index: 2;
}

.allergen-toggle__btn:not(.is-active):hover {
    color: var(--brown-light);
}

/* ============================================================
   테이블
   ============================================================ */
/* 표 위 안내문 — 현재 스킨에서는 사용하지 않음 (안내문은 첫 헤더 셀로 이동)
   레거시 호환을 위해 셀렉터만 남김 */
.allergen-table-wrap__note {
    display: none;
}

/* 첫 헤더 셀 안의 안내문 (원본 chipotle.com 데스크탑 매칭) */
.allergen-table__name-col-note {
    display: block;
    font-size: 13px;
    line-height: 1.6;
    color: var(--brown-light);
    font-weight: 400;
    letter-spacing: -0.2px;
    text-align: left;
}

.allergen-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid var(--grey-line);
}

/* 테이블 — 5컬럼 균등 너비 (table-layout: fixed) */
.allergen-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 700px;
    background: #fff;
    table-layout: fixed;
}

/* itemName 컬럼은 더 넓게, 나머지 4컬럼은 균등 */
.allergen-table__name-col {
    width: 28%;
}
.allergen-table__header {
    width: 18%;
}

/* 헤더 행 (흰 배경, 컬러 라벨) */
.allergen-table thead tr {
    background: #fff;
    border-bottom: 1px solid var(--grey-line);
}

.allergen-table__name-col {
    padding: 22px 16px;
    background: #fff;
}

.allergen-table__header {
    padding: 16px 8px 18px;
    text-align: center;
    vertical-align: bottom;
    background: #fff;
}

.allergen-table__header-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.allergen-table__header-icon img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: block;
}

.allergen-table__header-label {
    font-family: var(--font-pretendard);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.2px;
    line-height: 1.2;
    white-space: nowrap;
}

/* 컬럼별 라벨 컬러 - ALLERGENS 탭 */
#tab-allergens .allergen-table thead th:nth-child(2) .allergen-table__header-label { color: var(--c-dairy); }
#tab-allergens .allergen-table thead th:nth-child(3) .allergen-table__header-label { color: var(--c-soy); }
#tab-allergens .allergen-table thead th:nth-child(4) .allergen-table__header-label { color: var(--c-gluten); }
#tab-allergens .allergen-table thead th:nth-child(5) .allergen-table__header-label { color: var(--c-sulphites); }

/* SPECIAL DIETS 탭 */
#tab-special .allergen-table thead th:nth-child(2) .allergen-table__header-label { color: var(--c-vegetarian); }
#tab-special .allergen-table thead th:nth-child(3) .allergen-table__header-label { color: var(--c-vegan); }
#tab-special .allergen-table thead th:nth-child(4) .allergen-table__header-label { color: var(--c-paleo); }
#tab-special .allergen-table thead th:nth-child(5) .allergen-table__header-label { color: var(--c-keto); }

/* ── 데이터 행 (가로 zebra 제거 - 모든 행 흰 배경) ── */
.allergen-table__row {
    background: #fff;
}

/* 세로 zebra: 2번째(Dairy), 4번째(Gluten) 컬럼만 회색 배경
   ★ 헤더 행은 제외, 데이터 행(tbody)에만 적용 */
.allergen-table tbody td:nth-child(2),
.allergen-table tbody td:nth-child(4) {
    background: var(--grey-bg);
}

.allergen-table__cell {
    padding: 18px 8px;
    border-bottom: 1px solid var(--grey-line);
    text-align: center;
    vertical-align: middle;
    /* 뱃지(28px) 유무에 따라 행 높이 달라지지 않도록 고정 */
    height: 65px;
    box-sizing: border-box;
}

.allergen-table__cell--name {
    text-align: left;
    padding-left: 24px;
    padding-right: 16px;
    font-size: 15px;
    color: var(--text-dark);
    font-weight: 600;
    letter-spacing: -0.2px;
    font-family: var(--font-pretendard);
}

/* 체크 아이콘 (해당 시 표시) */
.allergen-table__check img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* ============================================================
   각주 / 안내문 — 가독성 우선 (한글 Pretendard)
   ============================================================ */
.allergen-footnote {
    margin-top: 28px;
    font-size: 14px;
    color: var(--brown-light);
    line-height: 1.75;
    letter-spacing: -0.2px;
}

.allergen-footnote p {
    margin: 0 0 10px;
}

.allergen-footnote p:last-child {
    margin-bottom: 0;
}

.allergen-divider {
    border: none;
    border-top: 1px solid var(--grey-line);
    margin: 32px 0;
}

.allergen-notice {
    font-size: 15px;
    color: var(--brown-light);
    line-height: 1.8;
    letter-spacing: -0.2px;
}

.allergen-notice p {
    margin: 0 0 14px;
}

.allergen-notice p:last-child {
    margin-bottom: 0;
}

.allergen-notice a {
    color: var(--brown);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 600;
}

.allergen-notice a:hover {
    color: var(--brown-light);
}

.allergen-notice__heading {
    font-family: var(--font-pretendard);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: var(--brown);
    margin: 0 0 10px;
}

.allergen-notice__heading + p {
    margin-bottom: 22px;
}

/* ============================================================
   반응형
   ============================================================ */
@media (max-width: 720px) {
    .allergen-hero {
        padding: 32px 16px 20px;
    }

    .allergen-hero__title {
        font-size: 26px;
    }

    .allergen-hero__desc {
        font-size: 14px;
    }

    .allergen-wrap {
        padding: 16px 12px 48px;
    }

    .allergen-toggle__btn {
        min-width: 140px;
        padding: 11px 18px;
        font-size: 13px;
        letter-spacing: 0.5px;
    }

    .allergen-table {
        min-width: 520px;
    }

    .allergen-table__cell--name {
        font-size: 13px;
        padding-left: 16px;
    }

    .allergen-table__header-label {
        font-size: 11px;
        letter-spacing: 0.5px;
    }

    .allergen-table__header-icon img {
        width: 24px;
        height: 24px;
    }

    .allergen-table__check img {
        width: 24px;
        height: 24px;
    }
}