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

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

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

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

   폭이 1400px 인 이유
     .container 는 max-width 1440 에 좌우 padding 20 이라 글자가 놓이는
     자리는 1400 입니다. 히어로의 바깥선을 그 자리에 맞춰야 아래 섹션
     제목과 왼쪽 끝이 떨어집니다.
*/
section.hero {
  width: min(1400px, 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;
}

/* 안쪽 컨테이너는 이미 히어로가 폭을 정했으니 상한을 풀고 여백만 남긴다.
   그대로 두면 1440 상한이 한 번 더 걸려 글자가 왼쪽으로 쏠린다. */
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);
}

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

/* 로고 아홉 개가 1400px 를 나눠 가지니 한 칸이 145px 밖에 안 되고, 그 안에서
   안쪽 여백 12px 를 빼면 로고가 119x60 으로 남았습니다. 회사 이름을 읽기
   어려운 크기입니다. 칸을 190px 부터로 올리고 안쪽 여백도 한 급 키웁니다.
   1400px 에서 일곱 칸(196px)이 되고 로고가 들어갈 자리는 156x84 가 됩니다. */
.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;
  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 {
    height: auto;
    aspect-ratio: 720 / 1200;
    /*
       3:5 는 손에 쥐는 화면(≈400px)에 맞춘 비율입니다. 600~960px 에서 그대로
       두면 히어로가 1200px 넘게 자라 화면을 통째로 먹습니다. 상한을 둡니다.

       상한에 걸리면 위아래가 잘리는데, 잘림은 그림을 **위로** 끌어올립니다
       (가운데 기준으로 반씩 잘리므로 그림 시작점 = 0.05×원래높이 + 0.5×실제높이).
       700px 이면 어느 폭에서도 그림이 320px 아래에서 시작하고, 글자는 297px 에서
       끝납니다 — 50~130px 이 남습니다.
    */
    max-height: 700px;
    /* 비율을 못 읽는 브라우저에서는 옛 값(600px)으로 떨어집니다. */
    min-height: 600px;
  }
}

@media (max-width: 768px) {
  section.hero {
    width: min(1400px, 100% - var(--pd-space-4) * 2);
    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)); }
  .page-home__partners a { height: 64px; }

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