@charset "utf-8";
/* =========================================================================
   mobile.css — 휴대폰 전용 메인 페이지
   -------------------------------------------------------------------------
   원본 정부24는 **화면 폭이 아니라 기기(User-Agent)를 보고** 휴대폰에는
   아예 다른 페이지(.mo-container.sch-mo-main)를 내보낸다.
   데스크톱을 좁게 흘려보낸 게 아니라 구성 자체가 다르다 — 원스톱서비스·
   마이 정부24·공지 목록·이벤트 배너·GNB 가 통째로 빠지고, 대신
   '공지 한 줄'과 '바로가기'가 생기며 혜택알리미가 위로 올라온다.

   서버가 없는 클론은 UA 로 다른 HTML 을 줄 수 없으니 **폭(767px)으로 가른다**.
   수치는 전부 원본을 375px 에서 실측한 값이다.

   다른 css 파일과 달리 이 파일은 통째로 미디어쿼리 안에 들어 있다.
   ========================================================================= */

/* 768px 이상 : 모바일 페이지는 아예 없는 셈 친다 */
.mo-container { display: none; }

/* =========================================================================
   0. 모바일 헤더 (원본 .header-in .mo-menu)
   -------------------------------------------------------------------------
   GNB 가 사라지는 1023px 부터 쓴다. 데스크톱 유틸(2줄)이 통째로 빠지고
   '아이콘 위 · 작은 글자 아래' 3칸이 오른쪽에 붙는다.
   ========================================================================= */
@media (max-width: 1023px) {
  /* 원본 실측 : 높이 64, 위에서 아래로 #f8fafc → #eef2f7 그라디언트.
     그라디언트가 32px 까지는 단색이라 상단 배너와 자연스럽게 이어진다. */
  .header {
    height: 64px;
    background: linear-gradient(#f8fafc 32px, var(--c-bg-banner) 100%);
  }
  .header-top { height: 64px; padding-top: 0; align-items: center; }
  .header .inner-wrap { padding: 0 16px; }   /* 원본 실측 : 로고가 x=16 */

  .logo { width: 95px; height: 32px; }       /* 원본 실측 : 데스크톱 142x48 */
  .logo a { width: 95px; height: 32px; }

  /* --- 로그인하면 로고 자리에 '이름님 ⚙' 이 들어선다 ---
     원본 : #iw_header.sch-main.has-user 가 h1.logo 를 감추고 .user-info 를 편다.
     이 바꿔치기는 **휴대폰에서만** 일어난다 (데스크톱은 로고가 그대로다). */
  html[data-login="in"] .logo { display: none; }
  .user-info.log-after.on {
    display: flex;
    align-items: center;
    gap: 0 2px;                       /* 원본 실측 */
    border-radius: 6px;
    text-decoration: none;
  }
  .user-info .name {
    display: flex;
    align-items: center;
    font-size: 22px;                  /* 원본 실측 */
    font-weight: 700;
    line-height: 1;
    color: #131416;                   /* 원본 --sc-header-mo-name-text-color */
  }
  /* 이름이 길면 96px 에서 자른다 — '님' 은 잘리지 않게 안쪽 span 만 줄인다 */
  .user-info .name > span {
    display: inline-block;
    max-width: 96px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1;
  }
  .user-info:hover { text-decoration: none; }

  .mo-menu {
    display: flex;
    align-items: center;
    gap: 0 24px;                             /* 원본 실측 */
  }
  .mo-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--c-text);
    white-space: nowrap;
  }
  /* 가운데 '로그인' 칸은 로그아웃 상태에서만 보인다 (로그인하면 칸이 둘로 줄어든다).
     base.css 의 `.log-before{display:none}` 과 명시도가 같으면 뒤에 실린 이 파일의
     `.mo-menu-item{display:flex}` 가 이겨 **늘 보인다.** 그래서 한 칸 더 구체적으로 쓴다. */
  .mo-menu .mo-menu-item.log-before { display: none; }
  .mo-menu .mo-menu-item.log-before.on { display: flex; }
  /* 글자를 4px 끌어올려 아이콘과 살짝 겹치게 둔다 (원본 실측 : 24 + 16.5 - 4 = 36.5) */
  .mo-menu-item .txt { margin-top: -4px; font-size: 11px; font-weight: 700; }
  .mo-menu-item:hover { color: var(--c-text); text-decoration: none; }
  .mo-menu-item > .ico { width: 24px; height: 24px; }
}

@media (max-width: 767px) {

  /* 데스크톱 본문과 GNB 를 감추고 모바일 페이지로 갈아 끼운다.
     바탕은 #eef2f7, 아래 여백 40px (원본 실측) */
  .main-page   { display: none; }
  .mo-container {
    display: block;
    padding-bottom: 40px;
    background: var(--c-bg-banner);     /* #eef2f7 */
  }

  /* 상단 '공식 누리집' 띠 — 데스크톱과 글·태극기는 같은데 **글자 자리가 4px 다르다.**
     원본은 휴대폰에서 이 줄을 flex 가 아니라 block 으로 두고
     `padding-left: 28px` + 태극기를 ::before 로 깐다 → 글자가 16+28 = 44 에서 시작한다.
     클론은 태극기를 <i> 요소로 두므로 24 + gap 으로 28 을 만들면 같은 자리가 된다.
     줄높이 32 는 글자를 띠(32px) 한가운데 놓기 위한 것이다 (22.5 면 0.25px 위로 뜬다). */
  .gov-banner .txt {
    gap: 0 4px;                         /* 24(태극기) + 4 = 28 → 글자 x=44 */
    line-height: 32px;                  /* 원본 실측 */
  }



  /* --- 1-1. 공지 한 줄 (원본 .mo-main-notice-always) --- */
  /* 흰 띠 하나에 종 아이콘 + 글자 + 화살표. 카드가 아니라 화면 폭 전체다. */
  /* display:flex 인 이유 — 안의 링크가 inline-flex 라서 block 부모에 두면
     글자 아래로 내려가는 자리(baseline descender)만큼 4px 이 더 붙는다.
     부모를 flex 로 만들면 그 자리가 사라져 원본과 같은 38.5px 가 된다. */
  .mo-notice-always {
    display: flex;
    align-items: center;
    padding: 8px 12px;                  /* 원본 실측 : 높이 38.5 */
    background: #fff;
    box-shadow: var(--shadow-card);     /* 0 2px 8px rgba(0,0,0,.04) */
  }
  .mo-notice-always .btn-txt {
    gap: 4px;
    padding: 0;
    font-size: var(--fs-sm);            /* 15px */
    font-weight: 400;
    color: var(--c-text);
  }
  /* 종·화살표도 `.btn-txt > .ico` 의 margin-bottom:2px 을 물려받아 1px 씩 뜬다.
     원본은 종에만 `margin: -1px 0 0` 을 주고 화살표는 그냥 가운데다 (원본 실측). */
  /* 선택자에 `.btn-txt >` 를 넣어야 한다 — 상대 규칙이 `.btn-txt:not(.tit-link) > .ico`
     (0,3,0) 라서, `.mo-notice-always .ico-bell` (0,2,0) 로는 margin-bottom 을 못 이긴다. */
  .mo-notice-always .btn-txt > .ico-bell { margin: -1px 0 0; }
  /* 크기는 icons.css 의 `.ico-arr-right { width:20px; height:20px }` 그대로다.
     여기서 다시 적어 봐야 같은 값이라 아무 일도 안 한다 — margin 만 되돌린다. */
  .mo-notice-always .btn-txt > .ico-arr-right { margin-bottom: 0; }

  /* --- 1-2. 검색 --- */
  /* 알약 모양·그라디언트는 데스크톱과 같고 폭만 화면에 맞춘다 (원본도 동일) */
  .mo-search-wrap { padding: 16px 24px; }


  .mo-search-wrap .search-area {
    width: 100%;
    height: 56px;                       /* 원본 실측 (데스크톱은 64) */
    box-shadow: none;
  }
  .mo-search-wrap .input-fn { height: 52px; padding: 8px 24px; }
  /* 마스코트는 모바일에도 있다. 데스크톱(72px)보다 작고 조금 더 왼쪽 위다 (원본 실측).
     데스크톱 규칙은 `.main-search-ai .input-fn::before` 라 여기엔 안 걸린다 —
     이 검색창에는 그 클래스가 없으므로 배경까지 새로 지정해야 한다. */
  .mo-search-wrap .input-fn::before {
    content: "";
    position: absolute;
    width: 60px; height: 60px;
    left: 10px; top: -6px;
    background: url("../assets/main/img-main-serach-ai.webp") no-repeat 50% 50% / contain;
    pointer-events: none;
  }
  .mo-search-wrap .input {
    height: 36px;
    padding-left: 44px;                 /* 원본 실측 : 마스코트 자리 */
    font-size: var(--fs-base);          /* 17px */
  }
  .mo-search-wrap .btn-send { width: 24px; height: 24px; }

  /* =======================================================================
     2. 본문 — 섹션 사이 16px, 좌우 여백 16px (원본 실측)
     ======================================================================= */
  .mo-main-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .mo-main-section { padding: 0 16px; }

  /* --- 2-1. 자주 찾는 서비스 (원본 .sch-mo-favorite-wrap) --- */
  /* 데스크톱과 같은 파란 카드지만 안쪽이 2열 그리드다 */
  .mo-favorite {
    padding: 20px;
    border-radius: var(--r-card);       /* 16px */
    border: 1px solid var(--c-border);  /* #d8e5fd */
    background: var(--c-bg-blue);       /* #e7f4fe */
  }
  .mo-favorite .title-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-top: 12px;                  /* 원본 실측 : 높이 37.5 */
  }
  .mo-favorite .tit { font-size: var(--fs-base); font-weight: 700; }
  /* 펼쳐보기는 글자가 아니라 + 아이콘 하나다 (데스크톱은 '펼쳐보기 ⊞') */
  .mo-favorite .btn-plus {
    width: 20px; height: 20px;          /* 원본 실측 */
    background: url("../assets/ico/ico-more-plus.svg") no-repeat 50% 50% / contain;
  }
  .mo-fav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  /* 2열 — 남는 자리를 정확히 반으로 가른다 (원본 실측 : 146.5px) */
  .mo-fav-list > li { width: calc((100% - 8px) / 2); }
  .mo-fav-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    height: 56px;
    padding: 0 12px;
    border-radius: var(--r-inner);      /* 12px */
    border: 1px solid var(--c-border);
    background: #fff;
    box-shadow: var(--shadow-card);
    font-size: var(--fs-base);
  }
  .mo-fav-list a:hover { color: var(--c-text); text-decoration: none; }   /* 원본 실측 : 변화 없음 */
  /* 글자만 15px 이다 (칸 자체는 17px 기준으로 잡혀 있다).
     여기를 17px 로 두면 '토지(임야)대장' 처럼 딱 들어가야 할 이름까지 말줄임이 된다 —
     같은 칸에서 **잘리는 정도**가 원본과 달라지는 원인이 이것뿐이었다.
     원본 실측 : 15px/700, 줄높이 22.5 → 글상자 높이 23 (17px 이면 26) */
  .mo-fav-list .txt {
    font-size: var(--fs-sm);            /* 15px */
    font-weight: 700;
  }
  .mo-fav-list .ellipsis { min-width: 0; }

  /* --- 2-2. 폴더 카드 공통 (혜택알리미 · 생활가이드) --- */
  /* 데스크톱 좌측 3카드와 같은 '서류철' 모양인데, 모바일은 꼭지가 더 짧다.
     제목줄에 border-image 로 꼭지를 그리고, 본문은 왼쪽 위만 각진 흰 상자다. */
  .mo-fld-cont .title-wrap {
    padding: 12px 20px 0;               /* 원본 실측 : 높이 37.5 */
    border-image: url("../assets/main/bg-sc-main-mo-folder-header.svg")
                  36 0 0 160 fill / 48px 0 0 242px stretch;
  }
  .mo-fld-cont .title-wrap .btn-txt { gap: 4px 2px; padding: 0; }
  .mo-fld-cont .tit { font-size: var(--fs-base); font-weight: 700; }
  /* components.css 의 `.btn-txt:not(.tit-link) > .ico { margin-bottom: 2px }` 는
     데스크톱 제목줄에 맞춘 값이다. 여기서는 그 2px 때문에 화살표가 **1px 위로** 뜬다
     (margin 을 포함한 22px 상자가 25.5px 줄 안에서 가운데 정렬되기 때문).
     원본 모바일은 보정이 없어 정확히 가운데다 — 되돌린다. */
  .mo-fld-cont .title-wrap .ico-arr-right {
    width: 20px; height: 20px;
    margin-bottom: 0;
  }
  .mo-fld-cont .cont-wrap {
    padding: 20px;
    /* 왼쪽 위는 꼭지가 이어지는 자리라 각져 있다 (원본 실측 0 16 16) */
    border-radius: 0 var(--r-card) var(--r-card);
    background: #fff;
  }

  /* --- 2-3. 혜택알리미 : 색깔 카드 2×2 --- */
  /* 혜택알리미만 아래 여백이 12px 다 (원본 실측). 생활가이드는 사방 20 이고,
     거기서는 '더보기' 바의 음수 마진(-8)이 그 자리를 대신 줄인다. */
  .mo-fld-cont .cont-wrap.benefit { padding: 20px 20px 12px; }
  .mo-bn-wrap {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .mo-bn-wrap .bn-card {
    display: flex;
    align-items: center;
    height: 56px;
    padding: 0 12px;
    border-radius: var(--r-inner);
  }
  /* 원본은 line-clamp 가 아니라 nowrap + ellipsis 다. 한 줄만 보이는 결과는 같지만
     line-clamp 는 **줄바꿈이 가능한 자리**에서 먼저 끊어 말줄임이 조금 일찍 붙는다. */
  .mo-bn-wrap .bn-card .tit {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;                 /* 원본 실측 (짧은 제목이면 가운데로 온다) */
    font-size: var(--fs-sm);            /* 15px */
    font-weight: 700;
    line-height: 1.5;
    color: var(--c-text);
  }
  .mo-bn-wrap .bn-card:hover { color: var(--c-text); text-decoration: none; }
  /* 네 가지 배경색 (원본 실측) */
  .bg-pink  { background: #fbeff0; }
  .bg-green { background: #eaf6ec; }
  .bg-gray  { background: var(--c-bg-banner); }   /* #eef2f7 */
  .bg-blue  { background: var(--c-bg-blue); }     /* #e7f4fe */

  /* --- 2-4. 생활·가족가이드 --- */
  /* 탭은 가로로 넘치면 스크롤된다. 선택 링이 잘리지 않도록 6px 을 밀어 두고
     같은 만큼 바깥으로 당긴다 (원본도 padding 6 / margin -6). */
  .mo-fld-cont .hor-scroll-wrap {
    margin: -6px;
    padding: 6px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .mo-fld-cont .hor-scroll-wrap::-webkit-scrollbar { display: none; }
  /* max-content 가 있어야 ul 이 **내용 폭(416px)** 을 갖는다.
     없으면 ul 폭이 스크롤 상자 폭(303px)에 맞춰져, 넘친 탭은 보이긴 해도
     스크롤 가능 범위가 잘못 계산된다 (원본 실측 : 416px). */
  .mo-tab-list { display: flex; gap: 4px; width: max-content; }
  .mo-tab-list .btn-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 56px;                        /* 원본 실측 : 56 x 79.5 */
    white-space: nowrap;
  }
  /* 아이콘 접시 — 선택되면 그라디언트 링이 생긴다 (데스크톱과 같은 방식) */
  .mo-tab-list .img-wrap {
    position: relative;
    display: grid;
    place-items: center;
    width: 56px; height: 56px;
    border-radius: 20px;                /* 원본 실측 : 데스크톱(100%)과 다르다 */
    background: var(--c-bg-gray);
  }
  .mo-tab-list .btn-tab[aria-selected="true"] .img-wrap {
    background: linear-gradient(to top, var(--c-primary), var(--c-green));
  }
  /* 링 안쪽을 흰색으로 덮어 '테두리 2px' 로 보이게 한다 */
  .mo-tab-list .btn-tab[aria-selected="true"] .img-wrap::before {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 18px;
    background: #fff;
  }
  .mo-tab-list .ico-main-life { position: relative; z-index: 1; }
  /* 굵기는 **선택된 탭만** 700 이다 (원본 실측 : 나머지는 400) */
  .mo-tab-list .txt {
    font-size: var(--fs-xs);            /* 13px */
    font-weight: 400;
    color: var(--c-text-sub);
  }
  .mo-tab-list .btn-tab[aria-selected="true"] .txt {
    font-weight: 700;
    color: var(--c-primary-strong);
  }

  /* 목록 — 스크롤이 아니라 **앞의 2개만 보여 주고 '더보기'로 펼친다** (원본 동작).
     그래서 높이를 고정하지 않는다. 항목이 2개뿐인 탭은 바가 없어 카드가 더 짧아진다. */
  .mo-tab-cont { margin-top: 8px; }
  .mo-tab-cont .list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  /* 접혀 있을 때는 3번째부터 감춘다 */
  .mo-tab-cont .cont-list:not(.is-open) .card:nth-child(n+3) { display: none; }

  .mo-tab-cont .card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 46.5px;                     /* 원본 실측 : min-height 로 두면 긴 글이 두 줄이 되어 늘어난다 */
    padding: 12px 16px;
    /* 왼쪽 위만 각져 있다 (원본 실측 0 16 16) — 폴더 카드 안쪽이라 모양을 맞춘 것 */
    border-radius: 0 var(--r-card) var(--r-card);
    /* components.css 의 공통 `.card` 가 테두리와 그림자를 달아 준다.
       모바일 가이드 카드에는 둘 다 없다(원본 실측 : border 0 / box-shadow none).
       테두리 1px 이 남아 있으면 안쪽 폭이 2px 줄어 **말줄임 시점까지 달라진다.** */
    border: 0;
    box-shadow: none;
    background: var(--c-bg-banner);
    font-size: var(--fs-sm);
  }
  /* 한 줄로 자르고 말줄임 (원본 실측 : nowrap + ellipsis + line-height 22.5) */
  .mo-tab-cont .card .txt {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 22.5px;
  }
  /* 오른쪽 화살표. 원본은 아이콘을 배경이 아니라 **mask** 로 얹어 색을 CSS 로 정한다
     (그래서 회색 #8a949e 한 벌로 밝은 곳·어두운 곳 모두 쓸 수 있다) */
  .mo-tab-cont .card::after {
    content: "";
    flex: 0 0 auto;
    width: 20px; height: 20px;
    margin-left: 8px;                              /* 원본 실측 : 글상자 243 + 8 + 20 = 271 */
    background-color: var(--c-text-placeholder);   /* #8a949e */
    -webkit-mask: url("../assets/ico/ico-arr-right.svg") no-repeat 50% 50% / contain;
            mask: url("../assets/ico/ico-arr-right.svg") no-repeat 50% 50% / contain;
  }
  .mo-tab-cont .card:hover { color: var(--c-text); text-decoration: none; }

  /* --- 더보기 / 접기 바 --- */
  /* margin 아래가 음수인 이유 : 카드 안쪽 여백(12px)과 겹쳐 원본과 같은 높이가 된다 */
  .btn-more-area {
    display: flex;
    justify-content: center;
    margin: 10px 0 -8px;                /* 원본 실측 */
  }
  .btn-more {
    display: flex;
    align-items: center;
    height: 32px;
    padding: 0 10px;
    font-size: var(--fs-base);          /* 17px */
    font-weight: 400;
  }
  .btn-more .txt { display: flex; align-items: center; gap: 4px; }   /* 원본 실측 */
  .btn-more .txt::after {
    content: "";
    width: 16px; height: 16px;
    background-color: #33363d;          /* 원본 실측 : gray-80 */
    -webkit-mask: url("../assets/ico/ico-arr-bottom.svg") no-repeat 50% 50% / contain;
            mask: url("../assets/ico/ico-arr-bottom.svg") no-repeat 50% 50% / contain;
    transition: transform .2s;
  }
  .btn-more[aria-expanded="true"] .txt::after { transform: rotate(180deg); }

  /* --- 2-5. 바로가기 --- */
  .mo-shortcut {
    padding: 6px 20px;
    border-radius: var(--r-card);
    background: #fff;
  }
  .mo-shortcut .shortcut-link {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 48px;
    border-radius: var(--r-inner);      /* 12px — 평소엔 안 보이고 누를 때 드러난다 */
    font-size: var(--fs-base);
  }
  .mo-shortcut .shortcut-link:hover { color: var(--c-text); text-decoration: none; }
  /* 지금 들어 있는 이름은 짧아서 티가 안 나지만, 원본은 남는 폭을 다 쓰고 넘치면 자른다 */
  .mo-shortcut .shortcut-link .txt {
    color: var(--c-text-sub);           /* #464c53 — 본문색(#1e2124)이 아니다 (원본 실측) */
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  /* 오른쪽 끝의 > 화살표. 원본에도 요소가 아니라 가상요소이고,
     gap(12) 과 별개로 margin-left 8 을 더 갖는다 (원본 실측 : 글상자가 227 로 줄어든다) */
  .mo-shortcut .shortcut-link::after {
    content: "";
    flex: 0 0 auto;
    width: 20px; height: 20px;
    margin-left: 8px;
    background-color: var(--c-text-placeholder);   /* #8a949e */
    -webkit-mask: url("../assets/ico/ico-arr-right.svg") no-repeat 50% 50% / contain;
            mask: url("../assets/ico/ico-arr-right.svg") no-repeat 50% 50% / contain;
  }
  .ico-shortcut01 {
    width: 24px; height: 24px;
    background-image: url("../assets/main/ico-sc-mo-shortcut01.svg");
  }

  /* =======================================================================
     3. 푸터 — 모바일에서는 구성이 줄고 세로로 쌓인다 (원본 실측)
     ======================================================================= */

  /* --- 3-1. 관련서비스 : 가로 3칸 → 세로 1칸, 그것도 '국민소통채널' 하나만 --- */
  /* 원본 모바일에는 디지털증명·부가서비스가 아예 나오지 않는다. */
  .footer-related .inner-wrap { padding: 0; }
  .footer-related-list { flex-direction: column; }
  .footer-related-list > li:nth-child(n+2) { display: none; }
  .footer-related-list > li {
    /* 세로로 쌓으면 주축이 **세로**로 바뀐다. 그래서 데스크톱의 `flex: 0 1 300px`
       (가로 폭 300) 이 여기서는 **높이 300** 으로 해석돼, 보이지도 않는 246px 짜리
       상자가 아래 기관정보 영역을 덮고 로고·SNS·전화번호 클릭을 가로막고 있었다.
       배경이 없어서 눈으로는 절대 안 보이는 종류의 버그다. */
    flex: 0 0 auto;
    width: 100%;
    border-width: 1px 0 0;              /* 좌우 세로선 대신 위쪽 가로선 */
  }
  .footer-related-list > li:first-child { border-top: 0; }
  .btn-related {
    height: 54px;                       /* 원본 실측 */
    padding: 0 52px 0 24px;
    text-align: left;
    background-position: calc(100% - 24px) 50%;
    font-size: var(--fs-base);          /* 17px */
  }

  /* --- 3-2. 기관 정보 --- */
  .info-footer { padding: 24px 16px; }  /* 원본 실측 */

  /* 로고 줄 : 데스크톱(142x48)보다 작다. 머리글 로고와 같은 95x32 이고
     '정부24 안내' 화살표도 32 → 24 로 준다 (원본 실측).
     줄 높이는 SNS 단추(40)가 정하므로 48 → 40 이 된다. */
  .info-toggle {
    height: 40px;
    margin-bottom: 24px;                /* 원본 실측 (데스크톱 16) */
  }
  .footer .logo { width: 95px; height: 32px; }
  .btn-footer-toggle {
    width: 24px; height: 24px;
    background-size: 24px auto;
  }

  /* 콜센터 : 한 줄로 이어 붙이던 것을 줄마다 끊어 세로로 쌓는다.
     칸 사이 세로 구분선도 없앤다 (줄이 바뀌면 선이 엉뚱한 자리에 남는다). */
  /* flex-wrap 을 꺼야 한다 — 데스크톱에서 가로로 감싸려고 켜 둔 wrap 이 남아 있으면
     세로 방향에서는 '높이가 모자라면 옆 열로 넘기는' 동작이 되어 칸이 좁아지고,
     그 좁은 폭 때문에 전화번호 줄이 한 번 더 접힌다(원본 4줄 → 6줄). */
  /* align-items 를 flex-start 로 두면 칸이 글자 폭만큼만 차지한다 (원본과 같다).
     stretch(기본값)면 343px 를 다 차지하는데, 글이 왼쪽 정렬이라 보이는 건 같지만
     상자 크기가 달라진다. */
  .info-tel .list { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 8px; }
  /* li 를 flex 로 만들면 안 된다.
     flex 컨테이너는 **글자만 있는 조각도 익명 항목으로 떼어 내** 제 줄을 차지하게 한다.
     여기서는 <a>1588-2188</a> 뒤의 ", " 가 혼자 한 줄이 되어 4줄이 5줄로 늘어났다.
     block 으로 두면 b·span 만 줄을 나누고 쉼표는 앞 번호에 붙어 원본과 같아진다. */
  /* padding-right 8 은 원본에도 그대로 있다 (세로 구분선 ::after 자리).
     선 자체는 아래에서 감추지만, 상자 폭은 원본과 같게 8px 을 남겨 둔다. */
  .info-tel .list > li { display: block; }
  .info-tel .list > li::after { display: none; }
  .info-tel .list > li b,
  .info-tel .list > li span { display: block; }

  /* --- 3-3. 맨 아래 줄 --- */
  /* 원본 모바일은 '보안센터'와 '웹 접근성 …' 두 개를 내보내지 않는다
     (보안센터는 DOM 에서 빠지고, 웹 접근성은 들어 있지만 높이 0 이다). */
  /* 세로로 쌓이므로 가로 정렬(space-between)은 의미가 없고, 대신 위 여백이 8px 줄어든다.
     이 8px 이 문서 전체 높이 1706 ↔ 1698 의 차이였다 (원본 실측 : margin-top 24). */
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    margin-top: 24px;
    padding-top: 16px;
  }
  .fnb .list > li:nth-child(n+3) { display: none; }

  /* =======================================================================
     4. 하단 퀵메뉴 바 (로그인 상태에서만)
     -----------------------------------------------------------------------
     원본에는 이 바의 CSS 가 없다. 대신 아래 두 규칙이 "화면 맨 아래 9rem 은
     이미 차지돼 있다"고 말해 준다 — 그 9rem 이 이 바다.
        .mo-allmenu-area.mo-footer                 { padding-bottom: 9rem }
        .sch-mo-main .mo-main-search-wrap.has-user { bottom: 9rem }
     그래서 높이를 90px 로 잡았다.

     .log-after 라서 base.css 가 기본값으로 감춰 두고, js/main.js 가 로그인
     상태일 때만 .on 을 붙인다. display 를 켜 주는 규칙을 이 미디어쿼리 안에만
     두었기 때문에 768px 이상에서는 .on 이 붙어도 그대로 숨어 있다.
     ======================================================================= */
  .mo-quickbar.log-after.on {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 80;                        /* 검색창(90)·전체메뉴보다 아래 */
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    border-radius: 16px 16px 0 0;
    background: #fff;
    /* 위쪽으로만 번지는 그림자 — 바가 본문 위에 떠 있는 걸 보여 준다 */
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .08);
  }
  .mo-quick-list {
    display: flex;
    align-items: stretch;               /* 칸 하나하나가 바 높이를 다 쓰게 */
    height: 74px;                       /* 74 + 위아래 8 = 90 */
  }
  /* li 도 flex 로 둔다. 안 그러면 li 에 정해진 높이가 없어서
     .mo-quick-item 의 height:100% 가 계산되지 않고 글자 높이(45px)로 줄어든다. */
  .mo-quick-list > li { display: flex; flex: 1 1 0; min-width: 0; }
  .mo-quick-item {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 100%;
    border-radius: 12px;
    color: var(--c-text);
    font-size: 12px;
    /* 400 이다. 예전엔 500 이었는데, 그 한 줄 때문에 Medium 한 벌(37.6KB)을
       휴대폰에서 통째로 더 받고 있었다 — 라벨 넉 줄을 위해서.
       원본도 메인 페이지에서는 500 을 한 번도 쓰지 않는다(Medium face 를
       선언만 해 두고 `unloaded` 상태로 둔다). 그래서 굵기를 400 으로 맞추고
       Medium 은 아예 내려받지 않는다. */
    font-weight: 400;
    line-height: 1.4;
    white-space: nowrap;
  }
  .mo-quick-item:hover,
  .mo-quick-item:focus-visible { color: var(--c-text); text-decoration: none; }
  .mo-quick-item:active { background: var(--c-bg-banner); }
  .mo-quick-item > .ico { width: 24px; height: 24px; }

  /* 바가 가리는 만큼 문서 끝을 더 밀어 준다.
     layout.css 의 `.footer{padding-bottom:110px}` 에 바 높이 90 을 더한 값이다
     (덮어쓰는 규칙이라 110 을 다시 적어 줘야 한다 — 빼먹으면 푸터 맨 아랫줄이
     바에 가려진다). */
  .mo-quickbar.log-after.on ~ .footer { padding-bottom: 200px; }  /* 110 + 90 */
  /* 맨 위로 버튼은 따로 손대지 않는다 — responsive.css 의 1023px 규칙이 이미
     `bottom: 106px` 으로 이 바(90) 위 16px 에 올려 두고 있다 (원본과 같은 값). */

}