/* =========================================================
   홈 (Views/Home/Index.cshtml)

   히어로 + 네 덩어리(로그인 · 상품 · 소식 · 파트너)입니다.
   배치만 둡니다. 카드·버튼·입력의 모양은 components.css 의 몫입니다.
   ========================================================= */

/*
   히어로를 본문 폭에 맞춘 라운드 박스로 둡니다.

   예전에는 화면 폭을 다 쓰는 띠였습니다. 투명한 고정 헤더가 그 위에
   겹쳐 있었기 때문입니다. 헤더가 흰 판이 되면서 그럴 이유가 없어졌고,
   시안대로 아래 콘텐츠와 같은 폭·같은 모서리를 갖게 합니다.

   폭이 1240px 인 이유
     .container 는 max-width 1280 에 좌우 padding 20 이라 글자가 놓이는
     자리는 1240 입니다. 히어로의 바깥선을 그 자리에 맞춰야 아래 섹션
     제목과 왼쪽 끝이 떨어집니다. 컨테이너 폭을 바꾸면 여기도 같이
     바꿔야 합니다 — 이 값은 컨테이너에서 나온 것입니다.
*/
section.hero {
  width: min(1240px, 100% - var(--pd-space-5) * 2);
  margin-inline: auto;
  margin-block-start: var(--pd-space-5);
  border-radius: var(--pd-radius-xl);
  /* 배경 이미지(.hero-bg)가 슬라이드를 꽉 채우므로 여기서 잘라 낸다. */
  overflow: hidden;
  /*
     높이를 3/4 로 줄입니다 — style.css 가 800px(≥961) / 600px(≤960)를 갖고
     있던 것을 600 / 450 으로. 첫 화면이 배너로 다 차서 그 아래(로그인 줄 ·
     상품)가 스크롤 밖에 있었습니다.

     배경 그림은 object-fit: cover 라 잘리는 자리만 달라지고 찌그러지지
     않습니다. 문구는 세로 가운데 정렬이라 따라 올라옵니다.

     여기서 다시 적는 것은 style.css 의 값을 이기기 위한 것입니다 —
     `.hero`(클래스 하나)보다 `section.hero`가 더 구체적입니다.
  */
  height: 600px;
}

/* 안쪽 컨테이너는 이미 히어로가 폭을 정했으니 상한을 풀고 여백만 남긴다.
   그대로 두면 컨테이너 상한(1280)이 한 번 더 걸려 글자가 왼쪽으로 쏠린다. */
section.hero > .swiper-container > .swiper-wrapper > .swiper-slide > .container {
  max-width: none;
}

/*
   글자를 화살표 뒤로 물립니다.

   style.css 는 이 줄에 좌우 60px 을 줬는데, 이전 화살표(.swiper-nav-prev)가
   히어로 왼쪽에서 20px 자리에 40px 폭으로 앉습니다 — **오른쪽 끝이 정확히
   60px**, 글자가 시작하는 자리와 같은 값입니다. 재 보면 어느 폭에서든 둘
   사이가 0px 이라 글자가 화살표에 붙어 보였습니다.

   화살표 뒤로 60px 을 더 둡니다. 슬로건·제목·설명·단추가 모두 이 줄의
   왼쪽 여백을 따라오므로 여기 한 곳만 바꾸면 됩니다.

   오른쪽은 그대로입니다. 다음 화살표까지 가장 긴 줄에서도 500px 넘게
   남아 있어 붙을 일이 없습니다.

   960px 이하에서는 걸지 않습니다 — 화살표가 숨고(style.css) 글자도 가운데
   정렬이라 왼쪽 여백이 자리를 정하지 않습니다.

   다만 **배경 그림이 허락하는 만큼만** 물립니다.

   배경 그림(1440×600)은 히어로 판 가운데에 놓이고(판이 그림보다 좁아 좌우가
   잘리지만 가운데는 그대로입니다), 그림 안에서 종이 뭉치가
   시작하는 자리는 그림 왼쪽에서 575px 입니다. 그래서 화면 폭 vw 에서 종이가
   시작하는 자리는 vw/2 - 145, 제목("필독 복약안내" 333px)이 종이에 닿지 않는
   최대 왼쪽 여백은 vw/2 - 498 입니다.

     · 1236px 이상 — 120px 이 다 들어갑니다(화살표와 60px).
     · 1116~1236px — 종이에 닿기 직전까지만 물러납니다.
     · 1116px 아래 — 60px, 지금과 같습니다.

   마지막 칸을 그냥 120px 로 두면 제목 끝 글자가 종이에 덮입니다. 그 폭에서는
   원래도 빠듯했던 자리라, 여백을 넓히자고 글자를 가릴 수는 없습니다.

   (498 은 제목 글자수에 매인 값입니다. 히어로 문구를 바꾸면 다시 재야 합니다.
    실제로 쓰는 값은 506 — vw 는 세로 스크롤바 폭까지 세므로 실제 배치 폭보다
    한 뼘 크게 잡힙니다. 그만큼(8px) 미리 뺍니다.)
*/
@media (min-width: 961px) {
  section.hero > .swiper-container > .swiper-wrapper > .swiper-slide > .container {
    padding-inline-start: clamp(60px, calc(50vw - 506px), 120px);
  }
}

/* ---------------------------------------------------------
   덩어리 사이 간격
   --------------------------------------------------------- */

.page-home__section { padding-block: var(--pd-space-10); }
.page-home__section:first-child { padding-top: var(--pd-space-12); }

/* 섹션 제목 줄. 제목 왼쪽, 더보기 오른쪽. */
.page-home__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pd-space-4);
  margin-bottom: var(--pd-space-5);
}

/* 제목도 목록으로 가는 길입니다. 제목처럼 보여야 하므로 색과 굵기는 그대로
   두고, 가리켰을 때만 링크임을 알립니다. */
.page-home__head-link { color: inherit; text-decoration: none; }
.page-home__head-link:hover { color: var(--pd-accent-on-subtle); text-decoration: none; }
.page-home__head-link:focus-visible { outline: none; box-shadow: var(--pd-focus-ring); border-radius: var(--pd-radius-sm); }

/* 더보기. 단추(.pd-btn--ghost)였을 때는 좌우 여백 12px 때문에 글자가 카드
   안쪽 끝(24px)보다 12px 더 안으로 들어가, 아래 목록의 날짜 열과 오른쪽 끝이
   어긋났습니다. 가리키면 뜨는 바탕도 카드 끝까지 12px 밖에 안 남아 빡빡했습니다.
   글자 단추로 바꿔 오른쪽 끝을 날짜 열과 맞춥니다 — 바탕이 없으니 여백을
   따로 지킬 것도 없습니다. */
.page-home__more {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: var(--pd-weight-medium);
  color: var(--pd-text-muted);
  text-decoration: none;
  transition: color var(--pd-dur) var(--pd-ease);
}
.page-home__more:hover { color: var(--pd-accent-on-subtle); text-decoration: none; }
.page-home__more:focus-visible { outline: none; box-shadow: var(--pd-focus-ring); border-radius: var(--pd-radius-sm); }
.page-home__more .pd-icon {
  width: var(--pd-icon-sm);
  height: var(--pd-icon-sm);
  /* 글자 오른쪽 끝은 화살표가 아니라 "더보기"의 마지막 글자로 읽힙니다.
     화살표의 좌우 여백만큼 밖으로 빼내 시각적 끝을 맞춥니다. */
  margin-inline-end: -3px;
}

/* ---------------------------------------------------------
   로그인 / 가입 안내
   --------------------------------------------------------- */

/* ---------------------------------------------------------
   로그인 줄

   한 줄에 다 들어갑니다(옛 style.css `.home-account` 의 배치).
   제목 · 이메일 · 비밀번호 · 로그인 · 찾기 링크 · 소셜 로고 · 가입 안내.

   한동안 세로 카드 두 장이었는데, 배너 바로 아래에서 화면 절반을 먹어
   그 아래 내용이 스크롤 밖으로 밀려났습니다. 이미 회원인 사람이 스쳐
   지나가는 자리라 자리를 많이 쓸 일이 아닙니다.
   --------------------------------------------------------- */

.page-home__account {
  display: flex;
  align-items: center;
  /* 좁아지면 뒤쪽(찾기 링크 · 소셜 · 가입 안내)부터 다음 줄로 접힙니다.
     한 줄에 억지로 밀어 넣어 입력칸이 줄어드는 것보다 낫습니다. */
  flex-wrap: wrap;
  gap: var(--pd-space-5);
  padding: var(--pd-space-5) var(--pd-space-6);
}

.page-home__account-title {
  flex: 0 0 auto;
  font-size: 16px;
  font-weight: var(--pd-weight-semibold);
  white-space: nowrap;
}

/* 자식 선택자여야 합니다. 이 줄에는 로그인 폼 말고 외부 로그인 버튼을 담은
   폼이 하나 더 있습니다. */
.page-home__account > .page-home__login {
  display: flex;
  align-items: center;
  gap: var(--pd-space-2);
}

/* 옛 판과 같은 220px. 이메일이 다 보이는 폭입니다. */
.page-home__field {
  position: relative;
  width: 220px;
}
/* 검사 안내가 뜨더라도 줄 높이를 밀지 않게 아래로 띄웁니다. 이 폼의 서버측
   안내는 /Account/Login 화면에 나오므로(컨트롤러가 실패 시 그 View 를
   돌려줍니다) 여기 뜨는 것은 클라이언트 검사뿐입니다. */
.page-home__field .pd-field__error {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  white-space: nowrap;
}

/* 찾기 링크는 두 줄로 쌓습니다(옛 판과 같게). 한 줄로 늘어놓으면 이 줄에서
   소셜 로고 자리를 잡아먹습니다. */
.page-home__links {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  line-height: 1.5;
}
.page-home__links a { color: var(--pd-text-muted); text-decoration: underline; white-space: nowrap; }
.page-home__links a:hover { color: var(--pd-text); }

/* 소셜은 **로고 그림만** 둡니다. 테두리 상자로 감싸면 옆의 [로그인]·
   [회원가입하기]와 같은 단추로 보여서, 한 줄에 단추가 다섯 개인 것처럼
   읽힙니다. 로고는 그 자체로 누를 것임을 알리는 그림입니다.

   컴포넌트(providers.css)는 로그인 화면과 함께 쓰는 것이라 건드리지 않고
   이 줄에서만 벗깁니다. 그래서 Home/Index 가 providers.css 를 먼저,
   page-home.css 를 나중에 싣습니다. */
.page-home__providers { flex: 0 0 auto; }
.page-home__account .providers,
.page-home__account .providers form {
  width: auto;
  align-items: center;
  gap: var(--pd-space-3);
}
.page-home__account .providers .provider {
  flex: 0 0 auto;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  transition: opacity var(--pd-dur) var(--pd-ease);
}
.page-home__account .providers .provider:hover { opacity: 0.7; background: none; }
/* 로고 스프라이트가 30px 격자입니다. 그 크기를 그대로 씁니다. */
.page-home__account .providers .provider i { width: 30px; height: 30px; }
.page-home__account .providers .provider p { display: none; }

/* 가입 안내는 줄의 오른쪽 끝으로 밀어 둡니다. */
.page-home__join {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--pd-space-3);
  margin-inline-start: auto;
}
.page-home__join-text { font-size: 14px; color: var(--pd-text-secondary); white-space: nowrap; }

.page-home__logged { padding: var(--pd-space-6) var(--pd-space-8); }
.page-home__logged form {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pd-space-4);
  flex-wrap: wrap;
}
.page-home__greeting { font-size: 16px; color: var(--pd-text-secondary); }
.page-home__greeting strong { color: var(--pd-text); font-weight: var(--pd-weight-bold); }
.page-home__logged-btns { display: flex; gap: var(--pd-space-2); flex-wrap: wrap; }

/* ---------------------------------------------------------
   상품
   --------------------------------------------------------- */

.page-home__products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--pd-space-4);
}

.page-home__product {
  display: flex;
  flex-direction: column;
  gap: var(--pd-space-2);
  height: 100%;
  padding: var(--pd-space-4);
  color: inherit;
  transition:
    border-color var(--pd-dur) var(--pd-ease),
    box-shadow var(--pd-dur) var(--pd-ease);
}
.page-home__product:hover {
  border-color: var(--pd-border-hover);
  box-shadow: var(--pd-shadow-md);
  color: inherit;
}
.page-home__product:focus-visible { outline: none; box-shadow: var(--pd-focus-ring); }

/* 상품 사진의 가로세로를 고정합니다. 등록된 이미지 비율이 제각각이라
   그대로 두면 카드 높이가 줄마다 달라집니다.

   비율과 바탕을 상품구매 목록(.pd-product__thumb)과 맞췄습니다. 홈에서 본
   상품을 목록에서 다시 만나는데 사진 크기와 여백이 달라 다른 상품처럼
   보였습니다. 4/3(1.33) → 1.2/1, 회색 바탕 대신 흰 바탕입니다 — 상품
   사진 대부분이 흰 배경이라 회색 판 위에 흰 네모가 뜬 것처럼 보였습니다. */
.page-home__thumb {
  display: block;
  aspect-ratio: 1.2 / 1;
  border-radius: var(--pd-radius-md);
  background-color: var(--pd-surface);
  overflow: hidden;
}
.page-home__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 이름·값 크기도 상품구매 목록(.pd-product__name / __price)과 맞춥니다.
   같은 상품이 두 화면에서 다른 크기로 보이던 것을 없앱니다. */
.page-home__product-name {
  font-size: 15px;
  font-weight: var(--pd-weight-medium);
  color: var(--pd-text);
  /* 이름이 길어도 카드 높이를 흔들지 않게 두 줄에서 끊습니다. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em;
}

.page-home__price {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.page-home__price b {
  font-size: 16px;
  font-weight: var(--pd-weight-bold);
  color: var(--pd-text);
}
.page-home__price em { font-style: normal; font-size: 13px; color: var(--pd-text-secondary); }

/* ---------------------------------------------------------
   공지 · 뉴스
   --------------------------------------------------------- */

.page-home__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--pd-space-6);
}

.page-home__list { padding: var(--pd-space-6); }
.page-home__list .page-home__head { margin-bottom: var(--pd-space-3); }
.page-home__list ul { display: flex; flex-direction: column; }
.page-home__list li {
  display: flex;
  align-items: baseline;
  gap: var(--pd-space-4);
  padding-block: var(--pd-space-3);
  border-top: 1px solid var(--pd-border);
}
.page-home__list li:first-child { border-top: none; padding-top: 0; }

.page-home__list li > a {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--pd-space-1);
  font-size: 14px;
  color: var(--pd-text-secondary);
  /* 제목이 길면 한 줄에서 끊습니다. 날짜가 밀려나지 않아야 합니다. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-home__list li > a:hover { color: var(--pd-accent); text-decoration: underline; }
.page-home__list li > a .pd-icon {
  flex: 0 0 auto;
  width: var(--pd-icon-sm);
  height: var(--pd-icon-sm);
  color: var(--pd-text-placeholder);
}
.page-home__list time {
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--pd-text-muted);
}

/* ---------------------------------------------------------
   파트너
   --------------------------------------------------------- */

/* 로고 아홉 개가 본문 폭을 나눠 가지니 한 칸이 145px 밖에 안 되고, 그 안에서
   안쪽 여백 12px 를 빼면 로고가 119x60 으로 남았습니다. 회사 이름을 읽기
   어려운 크기입니다. 칸을 190px 부터로 올리고 안쪽 여백도 한 급 키웁니다.
   칸 수는 본문 폭이 정합니다 — 1240px 이면 여섯 칸(약 206px)입니다. */
.page-home__partners {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--pd-space-4);
}
.page-home__partners a {
  display: grid;
  /*
     칸을 **한 줄 한 칸으로 못 박습니다.**

     이것이 없으면 세로로 긴 로고가 상자 밖으로 삐져나옵니다. 암묵 트랙은
     `auto` 라 항목의 max-content(= 그림의 원래 크기)까지 자라고, 상자 높이가
     104px 로 정해져 있어도 **트랙은 그 아래로 줄지 않습니다**(flex 와 다른
     점입니다). 그리고 그림의 `max-height: 100%` 는 그 자라 버린 트랙을
     기준으로 풀리므로 — 자기 키의 100% — 아무것도 막지 못합니다. 세로가
     길수록 많이 삐져나오고, 안쪽 높이가 24px 밖에 안 되는 좁은 화면에서는
     거의 모든 로고가 그렇게 됩니다.

     `minmax(0, 1fr)` 는 트랙을 상자 안쪽 크기로 고정하고(1fr), 내용보다
     작아지는 것도 허락합니다(min 0). 그러면 `max-width/height: 100%` 가
     비로소 **상자**를 기준으로 풀려 그림이 안에 담깁니다.
  */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  height: 104px;
  padding: var(--pd-space-5);
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius-md);
  background-color: var(--pd-surface);
  transition: border-color var(--pd-dur) var(--pd-ease);
}
.page-home__partners a:hover { border-color: var(--pd-border-hover); }
.page-home__partners a:focus-visible { outline: none; box-shadow: var(--pd-focus-ring); }
.page-home__partners img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* ---------------------------------------------------------
   좁은 화면
   --------------------------------------------------------- */

/*
   좁은 화면에서는 높이를 픽셀로 박지 않습니다 — 그림 비율을 씁니다.

   모바일 배경 그림은 720×1200(3:5)으로 그려져 있고, 위쪽 절반은 글자가 놓일
   빈 자리, 아래쪽은 약봉투·모니터 그림입니다. 높이를 픽셀로 정하면
   object-fit: cover 가 위아래를 잘라 내면서 **그림이 글자 쪽으로 올라옵니다.**
   3/4 로 줄였을 때(600 → 450) 제목과 설명 위로 약봉투가 덮였습니다.

   비율대로 두면 그림이 통째로 보이고, 디자이너가 그림 안에 잡아 둔 글자 자리도
   그대로 살아납니다. 화면이 좁아지면 높이도 같은 비율로 줄어들어 관계가
   유지됩니다.
*/
@media (max-width: 960px) {
  section.hero {
    /*
       높이는 "그림이 글 아래에서 시작하는 높이"로 계산합니다 (PILLDOC-2451).

       세로 그림(720×1200)은 판 **아래쪽에 붙어** 있고(style.css 의 top: auto),
       그림 속 화면·종이는 위에서 620px(원본 기준)부터 시작합니다. 판 높이가 H,
       그림 폭이 W 이면 화면·종이가 시작하는 자리는 H − W×(1200−620)/720 = H − 0.806W.
       글은 폭과 상관없이 위에서 297px 에서 끝나므로, 24px 를 띄우려면
       H = 0.806W + 321 이 필요합니다. 여유를 조금 더해 330 을 씁니다.

       예전에는 비율(3:5)에 상한 700px 을 두었는데, 상한에 걸리면 그림이 위로
       끌려 올라가 600px 넘는 폭부터 화면·종이가 글 뒤로 들어갔습니다(900px 에서 8px).

       그림 폭은 620px 까지만 키웁니다(아래 img 규칙). 태블릿 폭에서 그림을 판
       폭만큼 키우면 판이 1000px 넘게 자랍니다.
    */
    height: calc(min(100vw - var(--pd-space-5) * 2, 620px) * 0.806 + 330px);
    aspect-ratio: auto;
    max-height: none;
    min-height: 0;
  }
}

/* 판이 그림(620px)보다 넓은 태블릿 폭 — 그림을 가운데에 두고, 뒤에 같은 그림을
   크게 흐려 깔아 양옆을 잇습니다. 판 바탕색으로 두면 그림 바탕(슬라이드마다 밝기가
   다름)과의 경계가 띠로 보였습니다. 그림 주소는 뷰가 --hero-m 으로 넘깁니다. */
@media (min-width: 661px) and (max-width: 960px) {
  .hero .hero-bg::before {
    content: "";
    position: absolute;
    inset: -60px;
    /* 그림 윗부분(위 절반 남짓)은 화면·종이 없이 바탕 결만 있습니다. 그 부분만 판을 채우게
       키워, 흐린 그림에 화면·종이 잔상이 비치지 않게 합니다. */
    background: var(--hero-m) center top / auto 200% no-repeat;
    filter: blur(28px);
  }
  .hero .hero-bg img.onM {
    width: 620px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  }
}

/*
   961~1199px — PC 배치를 그대로 쓰되 그림을 오른쪽으로 밉니다.

   PC 그림(1440×600 로 보임)은 판 가운데에 놓여, 판이 좁아지면 그림 속 화면·종이의
   왼쪽 끝이 글 오른쪽 끝을 넘어옵니다(961px 에서 복약안내 종이 340px · 글 393px).
   두 그림 모두 "판 폭 절반 + 약 570px − 화면 폭 절반" 만큼 밀면 글에서 떨어집니다.
   1140px 이상에서는 0 이 되어 지금과 같습니다. 그만큼 그림 오른쪽 끝은 더 잘립니다.
*/
@media (min-width: 961px) and (max-width: 1199px) {
  .hero .hero-bg img.onP {
    transform: translateX(calc(-50% + max(0px, 570px - 50vw)));
  }
}

@media (max-width: 768px) {
  section.hero {
    width: min(1240px, 100% - var(--pd-space-4) * 2);
    height: calc(min(100vw - var(--pd-space-4) * 2, 620px) * 0.806 + 330px);
    margin-block-start: var(--pd-space-4);
    border-radius: var(--pd-radius-lg);
  }

  .page-home__section { padding-block: var(--pd-space-8); }
  .page-home__section:first-child { padding-top: var(--pd-space-8); }

  .page-home__cols { grid-template-columns: minmax(0, 1fr); gap: var(--pd-space-4); }

  .page-home__list { padding: var(--pd-space-5); }

  /* 로그인 줄 — 좁은 화면에서는 세로로 쌓습니다(옛 판도 960px 아래에서
     그랬습니다). 제목은 감춥니다. 아래에 입력칸이 바로 보여서 무엇을 하는
     자리인지 이미 드러납니다. */
  .page-home__account {
    flex-direction: column;
    align-items: stretch;
    gap: var(--pd-space-4);
    padding: var(--pd-space-5);
  }
  .page-home__account-title { display: none; }

  /* 입력칸은 220px 아래로는 줄이지 않습니다. 그 아래면 이메일이 잘려서, 무엇을
     넣었는지 보이지 않습니다(옛 판이 좁은 화면에서도 한 줄을 지키려다 그렇게
     됐습니다 — lde1234@gmail.co… 까지만 보였습니다). 자리가 없으면 줄을 바꿉니다. */
  .page-home__account > .page-home__login { flex-wrap: wrap; }
  .page-home__field { width: auto; flex: 1 1 220px; }
  /* 로그인 단추는 늘 제 줄을 갖습니다. 입력칸 사이에 끼면 폭이 들쭉날쭉해집니다. */
  .page-home__account > .page-home__login > .pd-btn { flex: 1 1 100%; }

  /* 찾기 링크는 두 줄로 세우던 것을 한 줄로 눕힙니다 — 세로로 쌓인 줄들 사이에서
     또 세로로 쌓이면 어디까지가 한 덩어리인지 흐려집니다. */
  .page-home__links { flex-direction: row; justify-content: center; gap: var(--pd-space-5); }
  .page-home__account .providers,
  .page-home__account .providers form { justify-content: center; gap: var(--pd-space-6); }
  .page-home__join {
    margin-inline-start: 0;
    justify-content: center;
    /* 가입 안내는 로그인과 하는 일이 달라 선으로 끊습니다. 좁은 화면에서는
       위아래로 붙어 있어서 선이 없으면 한 덩어리로 읽힙니다. */
    padding-top: var(--pd-space-4);
    border-top: 1px solid var(--pd-border);
  }

  .page-home__products { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .page-home__partners { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  /*
     여백을 한 급 줄입니다(20px → 12px).

     64px 상자에 20px 씩 넣으면 로고에 남는 높이가 24px 입니다. 삐져나오던
     것을 상자 안에 넣고 나면 세로로 긴 로고가 그 24px 에 맞춰 줄어드는데,
     그 크기로는 회사 이름을 읽을 수 없습니다. 12px 이면 40px 이 남습니다.
     좁은 화면에서는 칸도 110px 로 작아 좌우 여백도 같이 아깝습니다.
  */
  .page-home__partners a { height: 64px; padding: var(--pd-space-3); }

  .page-home__logged form { flex-direction: column; align-items: stretch; }
  .page-home__logged-btns .pd-btn { flex: 1 1 auto; }
}