@charset "utf-8";

/* =============================================================
 * welcome.css — /welcome (PASS 이용고객 안내) 전용 스타일
 *
 * 이 페이지는 styles.css를 통해 common / ico / modal / swiper까지
 * 5,188줄을 받아왔지만 실제로 매칭되는 규칙은 741개 중 29개(3.9%)뿐이었고,
 * ico.css는 존재하지 않는 이미지 52개를 요청했다.
 * 그래서 이 페이지에 실제로 적용되던 규칙만 원래 순서대로 옮겨 담았다.
 *
 * 출처: petpass/css/common.css, petpass/css/styles.css
 * Pretendard 웹폰트는 index.html과 동일하게 blade에서 <link>로 불러온다
 * (petpass/font/*.woff2 8개가 저장소에 없어 @font-face가 동작하지 않았다).
 * ============================================================= */


/* ── 디자인 토큰 (common.css) ─────────────────────────────── */
:root {
    --pass-red: #FA3A4A;
    --pass-light-pink: #FED8DA;
    --pass-violet: #6250F5;
    --pass-light-violet: #D0DBFC;
    --pass-black: #000000;
    --pass-black-02: #333333;
    --pass-darkgray: #666666;
    --pass-gray: #999999;
    --pass-disabled: #BBBBBB;
    --pass-write: #ffffff;
    --pass-line: #dddddd;
    --pass-main-bg: #ffffff;
    --pass-sub-bg: #F5F5F5;
    --dr-blue: #003595;
    --dr-navy: #062565;
    --dr-green: #00783F;
    --pass-body-font-size: 16px;
    --pass-body-font-weight: 400;
    --pass-font-sans-serif: "Pretendard", sans-serif;
    --pass-text-xxl: 1.25rem;
    --pass-text-xl: 1.125rem;
    --pass-text-lg: 1rem;
    --pass-text-md: 0.875rem;
    --pass-text-sm: 0.8125rem;
    --pass-text-mn: 0.75rem;
}


/* ── 리셋·기본값 (common.css) ─────────────────────────────── */
* {
    box-sizing: border-box;
}

:root,
html {
    font-size: var(--pass-body-font-size);
}

/* 원본 common.css에는 height: var(--app-height)가 있었으나 그 변수가
   어디에도 정의되어 있지 않아 선언이 무효였다. 옮기지 않는다. */
body {
    font-family: var(--pass-font-sans-serif);
    font-size: var(--pass-body-font-size);
    font-weight: var(--pass-body-font-weight);
    line-height: 1.5;
    margin: 0;
}

dl, dt, dd, p,
h1, h2, h3, h4, h5, h6 {
    margin: 0;
}

h1 {
    color: var(--pass-black);
    font-size: 1.25rem;
    line-height: 1.75rem;
}

button {
    align-items: center;
    cursor: pointer;
    display: flex;
    font-family: var(--pass-font-sans-serif);
    gap: .25rem;
    justify-content: center;
}


/* ── 레이아웃 (common.css) ────────────────────────────────── */
.container {
    margin: 0 auto;
    padding: 0 1.125rem;
    width: 100%;
}

.header {
    align-items: center;
    background: var(--pass-write);
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    height: 48px;
    justify-content: center;
    left: 0;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
}

.header .container {
    display: flex;
    justify-content: center;
    position: relative;
}

/* 배경을 명시하지 않으면 브라우저/OS 테마를 그대로 따라가
   다크 모드에서 본문 텍스트가 배경에 묻힌다. */
.wrap {
    background: var(--pass-main-bg);
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100dvh;
    position: relative;
}

main {
    flex: 1;
}


/* ── 헤더 ─────────────────────────────────────────────────── */

/* 헤더 바는 문서의 제목이 아니라 내비게이션 UI이므로 제목 태그를 쓰지 않는다.
   본문의 <h1>이 이 페이지의 유일한 제목이다. */
.header-title {
    color: var(--pass-black);
    font-size: var(--pass-text-lg);
    font-weight: 700;
    line-height: 1.5;
    margin: 0;
}

/* 아이콘은 인라인 SVG로 그린다. 원래 쓰이던 ico.css는 참조하는 PNG가
   저장소에 하나도 없어 빈 상자로만 렌더됐다. */
.btn-back {
    align-items: center;
    background: none;
    border: 0;
    color: var(--pass-black);
    cursor: pointer;
    display: flex;
    height: 2.5rem;
    justify-content: center;
    left: .5rem;
    padding: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.5rem;
}


/* ── 안내 카드 ────────────────────────────────────────────── */
.pass-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 0 40px;
}

.pass-area {
    align-items: center;
    background: var(--pass-sub-bg);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 40px;
}

.pass-area img {
    width: 80px;
}

.pass-area h1 {
    margin: 8px 0 0;
}

.pass-area p {
    color: var(--pass-darkgray);
    font-size: var(--pass-text-md);
    text-align: center;
}


/* ── 통신사 선택 리스트 ───────────────────────────────────── */

/* SKT·KT·LG U+는 서로 대체 가능한 동등한 선택지이므로
   primary 버튼 3개가 아니라 선택 리스트로 제시한다. */
.carrier-pick {
    color: var(--pass-black-02);
    font-size: var(--pass-text-md);
    font-weight: 600;
    margin: 24px 0 12px;
    text-align: left;
}

.carrier-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.carrier-item {
    align-items: center;
    background: var(--pass-main-bg);
    border: 1px solid var(--pass-line);
    border-radius: 16px;
    box-sizing: border-box;
    color: var(--pass-black-02);
    cursor: pointer;
    display: flex;
    font-family: var(--pass-font-sans-serif);
    font-size: var(--pass-text-lg);
    font-weight: 600;
    gap: 14px;
    height: 68px;
    padding: 0 18px;
    text-align: left;
    transition: background .2s ease;
    width: 100%;
}

.carrier-item:hover,
.carrier-item:focus,
.carrier-item:active {
    background: var(--pass-sub-bg);
}

/* 로고 프레임: 폭·높이를 고정해 통신사 로고의 크기가 달라도
   레이블이 항상 같은 지점에서 시작하도록 한다. */
.carrier-logo {
    align-items: center;
    display: flex;
    flex: 0 0 72px;
    height: 26px;
    justify-content: center;
}

.carrier-logo img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.carrier-label {
    flex: 1;
}

.carrier-arrow {
    color: var(--pass-disabled);
    flex: 0 0 auto;
    font-size: 20px;
    line-height: 1;
}