/* =========================================================
   home.css (HOME 전용)
   - PC: 1560px 메인 폭(요청), hero 좌(650px) 우(여행/건강)
   - feeds: 4카드(공지/게시글/추억/날씨)
   - 손주 바로가기: 게시글 카드 하단
   ========================================================= */

.page-home .home3{
  padding-top: 10px;
  padding-bottom: 10px;
}

/* HERO */
.page-home .home3-hero{
  display:grid;
  grid-template-columns: 1fr 560px;
  gap: 16px;
  align-items: start;
}

/* LEFT card */
.page-home .left-card{
  overflow:hidden;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 18px 40px rgba(15,23,42,.10);
  background:#fff;
}
.page-home .left-main{
  position: relative;
  height: 650px;                 /* ✅ 요청 */
  background:#0b1220;
  background-size: cover;
  background-position: center;
}
.page-home .left-empty-text{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(255,255,255,.82);
  font-weight: 900;
}

.page-home .today-badge{
  position:absolute;
  top: 14px;
  left: 14px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.18);
  color:#fff;
  font-weight: 900;
  font-size: 12px;
  backdrop-filter: blur(8px);
}

/* 사진 속 CTA: 투명 + hover 시 고급스럽게 */
.page-home .left-cta{
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
}
.page-home .chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 999px;
  text-decoration:none;
  font-weight: 900;
  font-size: 13px;
  color: #fff;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.page-home .chip:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.18);
  border-color: rgba(37,99,235,.70);
}
.page-home .chip-admin{
  background: rgba(37,99,235,.18);
  border-color: rgba(37,99,235,.40);
}


/* RIGHT column */
.page-home .right-col{
  display:flex;
  flex-direction: column;
  gap: 14px;
}

/* 행사·여행 카드 */
.page-home .side-card{
  padding: 6px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 18px 40px rgba(15,23,42,.10);
  background:#fff;
  overflow:hidden;
}
.page-home .side-head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 8px 12px;
}
.page-home .side-title{
  font-weight: 1000;
  font-size: 15px;
  color:#0f172a;
}
.page-home .side-meta{
  font-weight: 900;
  font-size: 12px;
  color: rgba(15,23,42,.55);
}

/* 슬라이더: 요청 폭/높이(560x420) */
.page-home .slider{
  position: relative;
  width: 100%;
  height: 400px;                 /* ✅ 요청 */
  background:#0b1220;
  overflow:hidden;
}
.page-home .slide{
  position:absolute;
  inset:0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity .55s ease;
}
.page-home .slide.is-on{ opacity: 1; }

/* 건강 라운지 박스 */
.page-home .health-box{
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 18px 40px rgba(15,23,42,.10);
  background:#fff;
  padding: 12px 14px 14px;
}
.page-home .health-head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.page-home .health-box-title{
  font-weight: 1000;
  font-size: 15px;
  color:#0f172a;
}
.page-home .health-badge{
  font-weight: 1000;
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(37,99,235,.08);
  border: 1px solid rgba(37,99,235,.18);
  color:#1d4ed8;
}

.page-home .health-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap: 8px;
}
.page-home .health-pick{
  display:block;
  text-decoration:none;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.70);
  padding: 10px 12px;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.page-home .health-pick:hover{
  transform: translateY(-1px);
  border-color: rgba(37,99,235,.45);
  background: rgba(37,99,235,.05);
}
.page-home .health-pick-title{
  font-weight: 1000;
  font-size: 13px;
  color:#0f172a;
}
.page-home .health-meta{
  margin-top: 2px;
  font-weight: 800;
  font-size: 12px;
  color: rgba(15,23,42,.60);
}
.page-home .health-go{
  margin-top: 6px;
  font-weight: 1000;
  font-size: 12px;
  color: #2563eb;
}

.page-home .health-cta{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.page-home .hbtn{
  text-decoration:none;
  text-align:center;
  font-weight: 1000;
  font-size: 12px;
  padding: 10px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.70);
  color:#0f172a;
}
.page-home .hbtn:hover{
  border-color: rgba(37,99,235,.45);
  background: rgba(37,99,235,.05);
}

/* FEEDS 4카드 */
.page-home .home3-feeds{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 14px;
}

/* 카드 헤더 */
.page-home .fhead{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px 10px;
}
.page-home .ftitle{
  font-weight: 1000;
  font-size: 16px;
  color:#0f172a;
}
.page-home .fmore{
  font-weight: 900;
  font-size: 12px;
  text-decoration:none;
  color:#2563eb;
}
.page-home .fempty{
  padding: 12px 14px 14px;
  color: rgba(15,23,42,.60);
  font-weight: 800;
  font-size: 12px;
}

/* 리스트(공지/게시글): 높이 줄이기 */
.page-home .flist{
  list-style:none;
  margin: 0;
  padding: 0 14px 14px;
  display:grid;
  gap: 8px;
}
.page-home .fitem{
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255,255,255,.75);
}
.page-home .flink{
  text-decoration:none;
  font-weight: 1000;
  font-size: 13px;
  color:#0f172a;
  display:block;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.page-home .fmeta{
  margin-top: 2px;
  font-weight: 800;
  font-size: 11px;
  color: rgba(15,23,42,.58);
}

/* memory card */
.page-home .memory-card .memory-body{
  padding: 0 14px 14px;
}
.page-home .memory-thumb{
  display:block;
  width: 100%;
  height: 180px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.10);
  background-size: cover;
  background-position: center;
}
.page-home .memory-thumb--empty{
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(15,23,42,.60);
  font-weight: 900;
  font-size: 12px;
  background: rgba(15,23,42,.04);
}
.page-home .memory-title{
  margin-top: 10px;
  font-weight: 1000;
  font-size: 13px;
  color:#0f172a;
}
.page-home .memory-sub{
  margin-top: 2px;
  font-weight: 800;
  font-size: 12px;
  color: rgba(15,23,42,.60);
}
.page-home .memory-actions{
  display:flex;
  gap: 8px;
  margin-top: 10px;
}
.page-home .mbtn{
  flex:1;
  text-align:center;
  text-decoration:none;
  padding: 10px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.70);
  font-weight: 1000;
  font-size: 12px;
  color:#0f172a;
}
.page-home .mbtn:hover{
  border-color: rgba(37,99,235,.45);
  background: rgba(37,99,235,.05);
}

/* 날씨 카드 */
.page-home .weather-card h3{
  margin: 12px 14px 10px;
  font-weight: 1000;
  font-size: 15px;
  color:#0f172a;
}
.page-home .weather-box{
  display:grid;
  gap: 10px;
  padding: 0 14px 14px;
}
.page-home .weather-mini-card{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.75);
  padding: 10px 12px;
}
.page-home .weather-mini-title{
  font-weight: 1000;
  font-size: 13px;
  color:#0f172a;
  margin-bottom: 8px;
}
.page-home .weather-mini-row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid rgba(15,23,42,.06);
}
.page-home .weather-mini-row:first-of-type{ border-top: none; }
.page-home .wday{ font-weight: 900; font-size: 12px; color:#0f172a; }
.page-home .wdate{ margin-left: 6px; font-weight: 800; font-size: 11px; color: rgba(15,23,42,.55); }
.page-home .wtemp{ font-weight: 1000; font-size: 12px; color:#0f172a; }
.page-home .wsvg{ width: 22px; height: 22px; }
.page-home .wsvg.is-good{ color:#2563eb; }
.page-home .wsvg.is-muted{ color: rgba(15,23,42,.55); }

/* ===================================================================================== patch */

/* ---------------------------------------------------------
   (G) 캡션 시인성 극대화 버전 (상단 좌측)
--------------------------------------------------------- */
.home3 .photo-box {
    position: relative;
    overflow: hidden;
}

/* 캡션이 위치한 상단에만 은은한 어둠을 깔아 가독성 확보 */
.home3 .photo-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 30%; /* 상단 30% 영역만 */
    background: linear-gradient(to bottom, 
                rgba(0, 0, 0, 0.4) 0%, 
                transparent 100%);
    z-index: 5;
    pointer-events: none; /* 클릭 방해 금지 */
}

.home3 .photo-caption {
    position: absolute;
    left: 16px;
    top: 16px;
    z-index: 10;
    
    display: flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 12px;
    
    /* ✅ 핵심: 더 짙은 배경 + 강력한 블러 */
    background: rgba(15, 23, 42, 0.65); 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    
    /* ✅ 테두리: 사진 색상에 상관없이 경계를 만들어줌 */
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    
    color: #ffffff;
    font-size: 13px;
    letter-spacing: -0.02em;
}

.home3 .photo-caption-title {
    font-weight: 800;
    color: #60a5fa; /* 전문적인 포인트 컬러 블루 */
    margin-right: 10px;
    /* 글자 자체에 미세한 그림자를 주어 더 선명하게 */
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.home3 .photo-caption-sub {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

/* =========================================================================
   FAB(+) 메뉴: 데스크톱에서 hover 시 자동 오픈
   - 모바일(터치)은 hover가 불안정하니 아래 @media로 분리 권장
============================================================================ */

/* 기본은 닫힘 (이미 닫힘이면 이 블록은 생략 가능) */
.hero-fab .fab-menu{
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

/* ✅ 마우스가 FAB 영역에 들어오면 자동으로 열림 */
.hero-fab:hover .fab-menu{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* ✅ 키보드 접근(탭 이동) 시에도 열리게: 접근성 */
.hero-fab:focus-within .fab-menu{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* (선택) hover 때 버튼도 살짝 반응 */
.hero-fab:hover .fab-btn,
.hero-fab:focus-within .fab-btn{
  transform: scale(1.02);
}

/* 헤더 아이콘 색상 */
.health-box-title i {
  color: #ef4444; /* 심장 박동 느낌의 레드 */
  margin-right: 5px;
}

/* 리스트 항목 마우스 반응 (살짝 밀리는 효과) */
.health-item {
  transition: transform 0.2s ease, background 0.2s ease;
  border-radius: 8px;
  margin-bottom: 4px;
}

.health-item:hover {
  background: rgba(59, 130, 246, 0.05);
  transform: translateX(5px); /* 오른쪽으로 살짝 이동 */
}

.health-pick-title i {
  font-size: 12px;
  color: #3b82f6;
  margin-right: 4px;
}

/* 하단 4개 버튼 컨테이너: 최대한 아래로 밀착 */
/* ======================================================================================
   건강 라운지: 버튼(health-cta) 4개 1줄 "고정" 버전
   - ✅ 어떤 해상도에서도 2줄로 내려가지 않게 함
   - ✅ 버튼을 박스 하단에 밀착시키려면 부모(.health-box)가 flex-column이어야 함
========================================================================================= */

/* 1) 건강 라운지 배경, health-box를 세로 flex로 만들어야 margin-top:auto가 먹음 */
.home3 .health-box{
  background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
  display: flex;               /* ✅ 아래 밀착의 핵심 */
  flex-direction: column;
}

/* 2) 리스트가 위 영역을 차지하고, cta가 바닥으로 내려가도록 */
.home3 .health-list{
  flex: 1 1 auto;              /* ✅ 남는 공간을 list가 먹음 */
}

/* 3) 하단 4개 버튼: 무조건 4열 고정 */
.home3 .health-cta{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* ✅ 4개 1줄 고정 */
  gap: 6px;
  margin-top: auto;            /* ✅ 바닥으로 밀착 */
  padding-top: 10px;           /* ✅ 리스트와 최소 간격 */
}

/* 4) 버튼 스타일 (세로정렬 아이콘/텍스트) */
.home3 .health-cta .hbtn{
  display: flex;
  flex-direction: column;      /* 아이콘 위 / 텍스트 아래 */
  align-items: center;
  justify-content: center;

  height: 32px;                /* ✅ 높이 고정(원하면 38~40) */
  padding: 6px 0;              /* 좌우 패딩 최소 */
  border-radius: 999px;
  text-align: center;
  text-decoration: none;

  border: 1px solid rgba(15,23,42,.10);
  background: #fff;
  font-weight: 800;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

/* 버튼별 컬러(원하시면 유지) */
.home3 .health-cta .hbtn:nth-child(1){ background:#e0f2fe; color:#0369a1; }
.home3 .health-cta .hbtn:nth-child(2){ background:#dcfce7; color:#15803d; }
.home3 .health-cta .hbtn:nth-child(3){ background:#f3e8ff; color:#7e22ce; }
.home3 .health-cta .hbtn:nth-child(4){ background:#fee2e2; color:#b91c1c; }

/* 아이콘 */
.home3 .health-cta .hbtn i{
  font-size: 14px;
  line-height: 1;
  margin-bottom: 2px;
  color: inherit;
}

/* 텍스트 */
.home3 .health-cta .hbtn span{
  font-size: 11.5px;             /* ✅ 글씨가 길면 10~10.5로 */
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.3px;
  white-space: nowrap;         /* ✅ 1줄 고정 */
}

/* Hover */
.home3 .health-cta .hbtn:hover{
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0,0,0,.10);
  filter: brightness(.97);
}


/* 카드에 마우스를 올렸을 때의 변화 */
.health-item:hover {
  background: #ffffff !important;
  transform: translateY(-2px); /* 위로 살짝 들림 */
  box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* 그림자로 입체감 */
  border-color: #3b82f6; /* 테두리 강조 */
}

/* 마우스 올리면 화살표가 오른쪽으로 살짝 이동하는 애니메이션 */
.health-item:hover .health-go-icon {
  color: #3b82f6;
  transform: translateX(3px);
}

/* 제목 글자색도 살짝 강조 */
.health-item:hover .health-pick-title {
  color: #1e40af;
}
/* 건강 라운지: 아이콘/정렬 안정화 */
.health-box-title i,
.health-pick-title i,
.health-go i,
.hbtn i{
  margin-right: 6px;
  opacity: .9;
}

.health-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.health-go{
  white-space:nowrap;
  font-size:12px;
  opacity:.9;
}
/* 건강 라운지 하단 버튼 */
.health-cta{
  display: flex;
  gap: 10px;
}
.health-cta .hbtn{
  display: flex;
  align-items: center;      /* 아이콘 + 글씨 수직 중앙 */
  justify-content: center;
  gap: 8px;                 /* 아이콘 ↔ 글씨 간격 */
  padding: 8px 14px;
  border-radius: 999px;     /* 타원형 */
}
/* 아이콘 크기 */
.health-cta .hbtn i{
  font-size: 15px;
  line-height: 1;
}
/* nav-link: 아이콘 + 텍스트 + caret 정렬 */
.nav-link{
  display:flex;
  align-items:center;
  gap:8px;
}

/* caret은 맨 오른쪽으로 밀기 */
.nav-link .caret{ margin-left:auto; }

/* nav-sub 항목도 아이콘 + 텍스트 가로배치 */
.nav-sub a{
  display:flex;
  align-items:center;
  gap:10px;
}

.nav-sub a i{
  width:18px;         /* 아이콘 column 고정 */
  text-align:center;
  opacity:.9;
}

.health-cta{
  display:flex;
  gap:10px;
}

.health-cta .hbtn{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:999px;
}
.health-cta{
  display:flex;
  gap:10px;
}

.health-cta .hbtn{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:999px;
}

/* 건강 라운지 헤더 */
.health-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.health-box-title{
  display:flex;
  align-items:center;
  gap:8px;
}

/* 리스트 2열(이미 쓰고 있다면 생략 가능) */
.health-list{
  list-style:none;
  margin:10px 0 10px;
  padding:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;                 /* 카드 간 세로 간격 줄임 */
}

/* 한 개 카드 */
.health-pick{
  display:block;
  min-height:50px;          /* ⬅ 카드 높이 줄이기 */
  padding:8px 12px;
  border:1px solid rgba(15, 23, 42, .10);
  border-radius:12px;
  background:#fff;
}

/* 상단 라인: 왼쪽(아이콘+제목) / 오른쪽(화살표) */
.health-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  margin-bottom:2px;        /* 제목/설명 간격 줄임 */
}

/* 제목: 아이콘 + 텍스트 가로 */
.health-pick-title{
  display:flex;
  align-items:center;
  gap:8px;
  line-height:1.25;         /* ⬅ 줄 간격 압축 */
  font-weight:700;
  font-size:15px;  /* 필요시 13~15 조절 */
}
/* 제목 아이콘 폭 고정(줄맞춤 예쁨) */
.health-pick-title i{
  width:16px;
  text-align:center;
  opacity:.95;
}
/* 우측 이동 화살표 아이콘 */
.health-go-icon{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:999px;
  background:rgba(59, 130, 246, .08);
  color:#3b82f6;
  flex-shrink:0;
}
/* ===== FIX: 건강 라운지 4개 CTA 버튼 (아이콘 왼쪽 고정) ===== */
.health-cta .hbtn{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  white-space:nowrap;
}
/* 아이콘이 block으로 떨어지는 것 방지 */
.health-cta .hbtn i{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:18px !important;
  height:18px !important;
  margin:0 !important;
  line-height:1 !important;
}
/* span도 줄바꿈/블록화 방지 */
.health-cta .hbtn span{
  display:inline-block !important;
  line-height:1 !important;
}
/* 메타 : 설명(meta) */
.health-meta{
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.25;
  color: rgba(15, 23, 42, .65);
}

/* =========================================================
   HERO 2열 정렬: 좌측(오늘의 사진) 높이 == 우측 컬럼 전체 높이
========================================================= */
.home3-hero{
  display: grid;
  grid-template-columns: 1.65fr 1fr; /* 이미 쓰는 비율이면 유지 */
  gap: 18px;
  align-items: stretch; /* ✅ 두 컬럼 높이를 같은 라인으로 */
}

/* 좌측/우측 카드가 그리드 높이를 꽉 채우도록 */
.home3-hero .left-card,
.home3-hero .right-col{
  height: 100%;
}

/* ✅ 우측 컬럼을 세로 스택으로 */
.home3-hero .right-col{
  display: flex;
  flex-direction: column;
  gap: 14px;             /* 행사·여행 ↔ 건강라운지 간격 */
  min-height: 0;         /* ✅ 슬라이더/리스트 overflow 문제 방지 */
}

/* =========================================================
   1) 행사·여행 카드: 높이 키우기 (핵심)
   - flex: 0 0 auto : 고정 높이로 확보
========================================================= */
.home3-hero .side-card{
  flex: 0 0 auto;
  min-height: 340px;     /* ✅ 여기 숫자를 올리면 카드가 더 커짐 */
  /* height: 360px;      // 고정 높이로 하고 싶으면 min-height 대신 사용 */
  display: flex;
  flex-direction: column;
  overflow: hidden;      /* 라운드/그림 잘림 안정화 */
}

/* 슬라이더가 카드 내부 높이를 꽉 채우게 */
.home3-hero .side-card .slider{
  flex: 1 1 auto;
  min-height: 0;         /* ✅ 이미지가 삐져나오는 것 방지 */
  border-radius: inherit;/* 카드 라운드와 동일하게 */
}

/* slide가 꽉 차도록 (background-image 방식이므로) */
.home3-hero .side-card .slide{
  background-size: cover;
  background-position: center;
}

/* =========================================================
   2) 건강 라운지: 남은 높이 채우기 → 우측 컬럼 전체 높이 맞춤
========================================================= */
.home3-hero .health-box{
  flex: 1 1 auto;        /* ✅ 남는 높이를 모두 먹어서 하단 라인 일치 */
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* 건강 라운지 리스트가 넘치면 내부만 스크롤 (선택) */
.home3-hero .health-list{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;        /* 내용이 많으면 여기만 스크롤 */
}

/* 하단 4개 버튼은 항상 아래로 */
.home3-hero .health-cta{
  margin-top: auto;      /* ✅ 바닥 고정 */
}


/* =========================================================
   FEEDS 4 cards: 높이 타이트하게 (240px 추천)
   ========================================================= */

/* 4카드 그리드가 있다는 전제: .home3-feeds 내부 .card */
.home3-feeds{
  gap: 6px; /* 필요시 12~16 */
  align-items: stretch; /* 카드들이 같은 높이로 늘어나게 */
}

/* 카드 높이 고정 (필요하면 220~260 조절) */
.home3-feeds > .card{
  height: 250px;          /* ✅ 추천값 (원하면 220~260으로 바꿔도 됨) */
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* 카드 헤더(fhead) 높이도 컴팩트 */
.home3-feeds .card .fhead{
  padding: 12px 14px !important;
}
.home3-feeds .card .ftitle{
  font-size: 16px !important;
  line-height: 1.1 !important;
  font-weight: 800;
}
.home3-feeds .card .fmore{
  font-size: 12px !important;
}

/* 리스트 영역은 남는 높이를 사용 + 내부 스크롤 허용 */
.home3-feeds .card .flist,
.home3-feeds .card .weather-box,
.home3-feeds .card .memory-body{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;          /* ✅ 내용이 많아도 카드 높이 유지 */
  padding: 0 14px 12px 14px;
}

/* 항목 간격 타이트 */
.home3-feeds .fitem{
  padding: 4px 0 !important;
}
.home3-feeds .flink{
  font-size: 13px !important;
  line-height: 1.25 !important;
}
.home3-feeds .fmeta{
  font-size: 11px !important;
  line-height: 1.2 !important;
  opacity: .75;
}

/* 스크롤바 미세하게(선택) */
.home3-feeds .card .flist::-webkit-scrollbar,
.home3-feeds .card .weather-box::-webkit-scrollbar,
.home3-feeds .card .memory-body::-webkit-scrollbar{
  width: 8px;
}
.home3-feeds .card .flist::-webkit-scrollbar-thumb,
.home3-feeds .card .weather-box::-webkit-scrollbar-thumb,
.home3-feeds .card .memory-body::-webkit-scrollbar-thumb{
  border-radius: 999px;
}

/* ===== FEEDS(아래 4카드) 공통 타이트 ===== */

/* 카드 자체를 '고정 높이 + 내부 스크롤' 구조로 */
.home3-feeds .card{
  height: 250px;                /* ✅ 220~260 범위에서 조정 */
  padding: 8px 10px;           /* ✅ 위/좌우 여백 줄여서 타이트 */
  display: flex;
  flex-direction: column;
  overflow: hidden;             /* 내부만 스크롤 */
}

/* 카드 헤더(제목줄) 더 위로 + 얇게 */
.home3-feeds .fhead{
  margin: -6px 0 4px;           /* ✅ 헤더 아래 간격 최소화 */
  padding: 0;                   /* ✅ 불필요 여백 제거 */
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* 제목 폰트/라인 타이트 */
.home3-feeds .ftitle{
  font-size: 16px;              /* ✅ 14~16 */
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.2px;
}

/* 더보기 버튼도 작게/위로 */
.home3-feeds .fmore{
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  line-height: 1;
}



/* 리스트 영역을 카드 안에서 '남은 높이' 꽉 채우기 */
.home3-feeds .flist{
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 1 1 auto;
  overflow: auto;              /* ✅ 글 많으면 내부 스크롤 */
}

/* 리스트 아이템 타이트 */
.home3-feeds .fitem{
  padding: 8px 0;              /* ✅ 행 높이 줄임 */
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.home3-feeds .fitem:last-child{ border-bottom: 0; }

/* 제목/메타 정렬 */
.home3-feeds .flink{
  display:block;
  margin-top: 4px;
  margin-left: 12px;
  font-size: 13px;             /* ✅ 살짝 줄여 공간 확보 */
  line-height: 1.25;
  font-weight: 700;
  text-decoration: none;
}
.home3-feeds .fmeta{
  margin-top: 4px;
  margin-left: 12px;
  font-size: 11px;
  line-height: 1.15;
  opacity: .7;
}


/* ===== WEATHER 카드 (여백 최소화 버전) ===== */
.weather-card{
  height: 240px;               /* ✅ 다른 카드와 동일하게 */
  padding: 4px 6px;           /* ✅ 상하좌우 전체 여백 축소 (12/14 -> 8/10) */
  display:flex;
  flex-direction: column;
  overflow:hidden;
  gap: 6px;                    /* 제목과 박스 사이 간격 강제 지정 */
}

/* 기존 h3가 위 여백을 크게 잡는 경우가 많음 */
.weather-card h3{
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.2px;
}

/* 박스가 남은 높이 꽉 채우도록 */
.weather-card .weather-box{
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr 1fr; /* 수지/오스틴 2열 */
  gap: 10px;
  overflow: hidden;
}

/* 미니카드도 내부 타이트 */
.weather-card .weather-mini-card{
  padding: 2px 2px;
  border-radius: 14px;
  display:flex;
  flex-direction: column;
  overflow: hidden;
}

/* 타이틀 줄 여백 줄이기 */
.weather-card .weather-mini-title{
  font-weight: 800;
  font-size: 12px;
  margin-bottom: 6px;
  opacity: .9;
}

/* 날씨 row 높이 줄이고 정렬 */
.weather-card .weather-mini-row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid rgba(0,0,0,.06);
}
.weather-card .weather-mini-row:first-of-type{ border-top: 0; }

.weather-card .wday{
  font-size: 11px;
  line-height: 1.15;
}
.weather-card .wdate{
  margin-left: 6px;
  opacity: .65;
  font-size: 10px;
}

.weather-card .wtemp{
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.weather-card .wicon{
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
}
/* ===== health mini-card height hard override ===== */

/* 1. 미니카드 내 아이콘과 제목 사이 간격 축소 */
.health-pick-title {
  display: flex !important;
  align-items: center !important;
  gap: 1px !important;    /* 아이콘과 글자 사이 간격을 4px로 밀착 */
  font-size: 14px !important;
  font-weight: 700;
}

/* 2. 줄 간격 축소 및 2번째 줄(meta) 우측 이동 */
.health-meta {
  margin-top: -6px !important;   /* 1행과 2행 사이 간격 최소화 */
  padding-left: 25px !important; /* 요청하신 대로 25px 우측 이동 */
  font-size: 11.5px !important;
  line-height: 1.35 !important;  /* 줄 간격 축소 */
  color: #64748b;
  opacity: 0.9;
}

/* 3. 하단 4개 타원형 버튼 사이 간격 확대 */
.health-cta {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;        /* 버튼 사이 간격을 10px로 넓힘 */
  margin-top: auto !important;
  padding: 0 2px 0px 2px !important; /* 하단 밀착 유지 */
}

/* 버튼 내부 정렬 보강 */
.health-cta .hbtn {
  padding: 2px 2px !important;
  min-height: 32px !important;        /* 버튼 높이 확보 */
  margin-bottom: -4px !important;
}


/* ------------------------------------------------------------- Jemina 추천 --------- */
/* 1. 날씨 박스 컨테이너 */
.weather-box {
  display: flex !important;
  width: 100% !important;      /* 부모 너비에 꽉 맞춤 */
  justify-content: stretch !important; /* 자식 요소들을 강제로 늘림 */
  gap: 10px !important;        /* 두 카드 사이의 최소 간격 */
  padding: 0 5px !important;   /* 아주 최소한의 외부 여백만 유지 */
  box-sizing: border-box;
  margin-bottom: 8px;
}

/* 2. 미니카드 기본 설정 및 좌우 여백 */
.weather-mini-card {
  flex: 1 1 0% !important;     /* 여백을 강제로 소모하며 동일 비율로 확장 */
  background: #f8fafc;
  border-radius: 12px;
  padding: 10px;
  border: 1px solid #e2e8f0;
}
.weather-mini-card:first-child { margin-left: 0px; }  /* 왼쪽 미니카드 */
.weather-mini-card:last-child { margin-right: 0px; } /* 오른쪽 미니카드 */

/* 3. 미니카드 제목 중앙 정렬 (12px) */
.weather-mini-title {
  margin-top: 6px;
  font-size: 13px !important; /* 제목은 약간 더 크게 13px 추천 */
  font-weight: 800;
  text-align: center;
  align-items: center center;
  margin-bottom: 10px;
  color: #1e293b;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 8px;
}

/* 4. 내부 2등분 그리드 (좌우 끝까지 밀착) */
.weather-mini-row {
  display: grid !important;
  grid-template-columns: 1fr 1.1fr !important; /* 정확히 5:5 비율로 공간 나눔 */
  align-items: center !important;
  padding: 12px 0 !important;   /* 행 간격 살짝 조절 */
  border-bottom: 1px solid #f1f5f9;
}

/* 5. 좌측: 라벨(오늘/내일)과 날짜 2열 배치 */
.wday {
  display: flex !important;
  flex-direction: column !important; /* 요일과 날짜를 위아래 2열로 배치 */
  padding: 0 8px;
  gap: 6px !important;              /* 오늘/내일 글자와 날짜 사이 간격 */
  font-size: 13px !important;       /* 글자 크기 살짝 키움 */
  font-weight: 800 !important;
  min-width: 0;
}
.wdate {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #94a3b8;
  margin-top: 2px;
  white-space: nowrap;              /* 날짜 줄바꿈 방지 */
}

/* 6. 우측: 온도 + 아이콘 정렬 및 끝 여백 */
.wright {
  display: flex !important;
  flex-direction: row !important;  /* 가로 나란히 */
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;             /* 온도와 아이콘 사이 간격 확보 */
  padding-right: 8px !important;    /* ✅ 아이콘을 카드 끝에서 안쪽으로 띄우기 */
  flex: 1;
}

/* 7. 온도 글자 정렬 */
.wtemp {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: -0.5px;           /* 온도가 길어져도 줄바꿈되지 않게 자간 조정 */
  white-space: nowrap;
}

/* 8. 아이콘 크기 및 배치 */
.wicon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;           /* 아이콘 영역 고정 */
}
.wicon svg {
  width: 24px !important;
  height: 24px !important;
}

/* ------------------------------------------------- 더보기 바로가기 -------- */

/* 카드 헤더 */
.fhead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

/* 더보기 pill 버튼 개선 */
.fmore {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px; /* 살짝 슬림하게 */
  padding: 0 14px;
  border-radius: 999px;
  background: #ffffff; /* 배경을 흰색으로 하고 테두리로 포인트 */
  border: 1px solid #e2e8f0; 
  color: #64748b; /* 평상시엔 차분한 그레이 */
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.02em; /* 자간 조정으로 세련미 추가 */
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.fmore:hover {
  background: #eff6ff;
  border-color: #3b82f6;
  color: #2563eb;
  /* 우측으로 살짝 이동하는 느낌만 부여 */
  transform: translateX(2px); 
}

/* 화살표 아이콘 추가 효과 (HTML에 > 하나만 추가해도 효과적) */
.fmore::after {
  content: '→';
  margin-left: 4px;
  font-size: 12px;
}


/* ---------------------------------------------------------------------- E N D --------- */

/* ================================
   메뉴 빨간 밑줄(hover/active) 복구
   ================================ */
.main-nav .nav-link{
  position: relative;
  padding-bottom: 10px;              /* 밑줄 공간 확보 */
}

.main-nav .nav-link::after{
  content:"";
  position:absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: #ef4444;               /* ✅ 빨강 */
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .18s ease;
  opacity: .95;
}

/* hover 시 */
.main-nav .nav-item:hover > .nav-link::after{
  transform: scaleX(1);
}

/* active(현재 페이지) 표시용 클래스가 있으면 같이 켭니다 */
.main-nav .nav-link.is-active::after,
.main-nav .nav-item.is-active > .nav-link::after{
  transform: scaleX(1);
}

/* 드롭다운 열림 상태(aria-expanded)에도 밑줄 유지하고 싶으면 */
.main-nav .nav-item.has-sub > .nav-link[aria-expanded="true"]::after{
  transform: scaleX(1);
}
/* Hero 이미지 래퍼는 반드시 position:relative */
.today-hero, .hero, .today-card, .today-photo {
  position: relative;
}

/* FAB 컨테이너: 좌측하단/우측하단 취향대로 */
.hero-fab{
  position:absolute;
  left:16px;
  bottom:16px;
  z-index:5;
}

/* 둥근 FAB 버튼 */
.fab-btn{
  width:46px;
  height:46px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.28); /* 투명 */
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  box-shadow: 0 12px 26px rgba(0,0,0,.18);
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}

.fab-btn:hover{
  transform: translateY(-2px);
  background: rgba(0,0,0,.40);
  border-color: rgba(120,160,255,.65);
}

/* + 아이콘 회전 */
.fab-plus{
  font-size:26px;
  line-height:1;
  font-weight:700;
  transform: translateY(-1px);
  transition: transform .18s ease;
}

/* 메뉴 박스: FAB 위로 펼침 */
.fab-menu{
  position:absolute;
  left:0;
  bottom:54px;
  min-width: 150px;

  padding:8px;
  border-radius:14px;
  background: rgba(15,23,42,.78);
  border: 1px solid rgba(255,255,255,.18);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow: 0 18px 34px rgba(0,0,0,.22);

  opacity:0;
  transform: translateY(8px);
  pointer-events:none;
  transition: opacity .16s ease, transform .16s ease;
}
/* 메뉴 박스에 가상 요소 추가 */
.fab-menu::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 20px; /* 버튼과 메뉴 사이의 간격만큼 설정 */
  bottom: -20px; /* 메뉴 아래쪽으로 확장하여 버튼과 연결 */
  left: 0;
  background: transparent; /* 투명하게 */
  pointer-events: auto;
}

/* 메뉴 아이템 */
.fab-item{
  display:flex;
  align-items:center;
  justify-content:space-between;

  height:36px;
  padding:0 10px;
  border-radius:10px;

  color:#fff;
  text-decoration:none;
  font-size:13px;
  font-weight:600;
  letter-spacing:-0.2px;

  opacity:.96;
  transition: background .14s ease, transform .14s ease;
}

.fab-item:hover{
  background: rgba(255,255,255,.10);
  transform: translateX(2px);
}

/* 열림 상태 */
.hero-fab.is-open .fab-menu{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}
.hero-fab.is-open .fab-plus{
  transform: rotate(45deg) translateY(-1px);
}


/* 메뉴 박스 개선 */
.fab-menu {
  position: absolute;
  left: 0;
  bottom: 64px;
  min-width: 180px;
  padding: 12px;
  border-radius: 16px;
  
  /* 다크 계열 배경 (유리 효과 포함) */
  background: rgba(18, 18, 18, 0.85); 
  
  /* 얇고 세련된 다크 테두리 - 약간의 밝은 빛을 섞어 선명도 조절 */
  border: 1px solid rgba(255, 255, 255, 0.12);
  
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

/* 메뉴 내부 카테고리(아이템) 스타일 */
.fab-item {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 12px;
  margin-bottom: 2px;
  border-radius: 10px;
  
  /* 글씨는 밝은 계열 */
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
}

/* 마우스를 올렸을 때 (Hover) */
.fab-item:hover {
  /* 배경을 살짝 밝게 하거나 브랜드 컬러로 포인트 */
  background: rgba(255, 255, 255, 0.08); 
  color: #ffffff;
  transform: translateX(4px); /* 오른쪽으로 살짝 이동하는 애니메이션 */
}

/* 카테고리 구분선이 필요할 경우 */
.fab-item.divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 8px 4px;
  pointer-events: none;
}

/* =========================================================
   HOME (home3) Responsive Overrides
   - Desktop 기본값은 위쪽에 두고,
   - 아래는 980 / 760 / 640 / 480 전용 오버라이드
========================================================= */

/* 공통 안전장치: 배경이미지 카드 깨짐 방지 */
.home3-hero .left-main,
.home3-hero .slider .slide,
.memory-thumb {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* =========================================================
   1) Tablet (<= 980px)
   - HERO 2컬럼 → 1컬럼 스택
   - FEEDS 4카드 → 2열
========================================================= */
@media (max-width: 980px) {

  /* HERO: 2열 → 1열 */
  .home3-hero{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .home3-hero .left-card,
  .home3-hero .right-col{
    width: 100% !important;
    min-width: 0;
  }

  /* 왼쪽 오늘의 사진: 높이 과도 방지(태블릿에서 스크롤 길이 줄이기) */
  .home3-hero .left-main{
    min-height: 520px;   /* 필요 시 560px */
  }

  /* 행사·여행: 이미지 높이(태블릿) */
  .home3-hero .side-card .slider{
    height: 320px;
  }
  .home3-hero .side-card .slide{
    height: 100%;
  }

  /* 건강 라운지: 2열 유지 + CTA 1줄 유지 */
  .health-list{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .health-cta{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    align-items: stretch;
  }
  .health-cta .hbtn{
    width: 100%;
    min-width: 0;
  }

  /* FEEDS: 4카드 → 2열 */
  .home3-feeds{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  /* 날씨 카드 내부: 2개 미니카드 폭 최대 */
  .weather-box{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    padding: 0 10px !important;
  }
  .weather-mini-card{
    min-width: 0;
  }

}

/* =========================================================
   2) Mobile (<= 760px)
   - FEEDS 4카드 → 1열
   - 건강 라운지 미니카드 → 1열
   - CTA 4버튼 → 2열 (터치 안정)
========================================================= */
@media (max-width: 760px) {

  .layout-inner.home3{
    padding-left: 12px;
    padding-right: 12px;
  }

  /* HERO: 더 타이트 */
  .home3-hero{
    gap: 12px !important;
  }

  /* 왼쪽 오늘의 사진: 모바일에서 너무 길지 않게 */
  .home3-hero .left-main{
    min-height: 420px;
  }

  /* 캡션: 좌측상단 배치 유지 시(기존 스타일이 하단띠였다면) */
  .photo-caption{
    max-width: 78%;
    font-size: 13px;
    line-height: 1.35;
    padding: 10px 12px;
  }

  /* 행사·여행 이미지 높이 */
  .home3-hero .side-card .slider{
    height: 300px;
  }

  /* 건강 라운지: 1열 */
  .health-list{
    grid-template-columns: 1fr;
    gap: 9px;
  }

  /* 건강 CTA: 2열 (터치용) */
  .health-cta{
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .health-cta .hbtn{
    height: 40px;
    border-radius: 999px;
  }
  /* 아이콘 + 텍스트 가로 배치 강제 */
  .health-cta .hbtn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  .health-cta .hbtn i{
    margin: 0;            /* 위로 올라가 있던 margin 제거 */
    font-size: 16px;
    line-height: 1;
  }
  .health-cta .hbtn span{
    line-height: 1;
    white-space: nowrap;
  }

  /* FEEDS: 1열 */
  .home3-feeds{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* 카드 높이 타이트(원하는 220~260px 근처로 유도) */
  .home3-feeds .card{
    min-height: 220px;
  }

  /* 날씨: 2개는 2열 유지하되 폭이 좁으면 줄어듦 */
  .weather-box{
    grid-template-columns: 1fr 1fr !important;
  }

  /* 손주 드롭다운: 터치 UX */
  .kid-btn{
    height: 44px;
    border-radius: 999px;
  }
  .kid-menu{
    max-height: 60vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* =========================================================
   3) Small Mobile (<= 640px)
   - 행사·여행 더 낮게
   - 날씨 미니카드 → 1열
   - 텍스트/간격 더 축소
========================================================= */
@media (max-width: 640px) {

  /* 왼쪽 카드(오늘의 사진) 높이 더 축소 */
  .home3-hero .left-main{
    min-height: 360px;
  }

  /* 행사·여행 슬라이더 높이 */
  .home3-hero .side-card .slider{
    height: 280px;
  }

  /* 건강 미니카드 더 타이트 */
  .health-pick{
    padding: 10px 12px;
  }
  .health-pick-title{
    font-size: 13px;
  }
  .health-meta{
    font-size: 12px;
    line-height: 1.25;
    margin-top: 4px;
  }

  /* 건강 CTA: 2열 유지 */
  .health-cta .hbtn{
    font-size: 13px;
    padding: 0 12px;
  }

  /* 날씨: 1열로 전환 (폭 최대로) */
  .weather-box{
    grid-template-columns: 1fr !important;
  }
  .weather-mini-title{
    font-size: 13px;
    margin-bottom: 8px;
  }
  .weather-mini-row{
    font-size: 12px;
    padding: 5px 0;
  }

  /* FEEDS 내부 리스트 라인 간격 축소 */
  .flist .fitem{
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .fmeta{
    margin-top: 3px;
    font-size: 12px;
    opacity: .8;
  }
}

/* =========================================================
   4) Extra Small (<= 480px)
   - 아주 작은 화면: 여백 최소 + 버튼/타이포 정리
========================================================= */
@media (max-width: 480px) {

  .layout-inner.home3{
    padding-left: 10px;
    padding-right: 10px;
  }

  /* 메뉴/상단에서 공간 확보 (홈 헤더 우측 날짜 숨김은 header 쪽에서 처리 권장)
     - home.css에서만 처리하려면 아래처럼 "홈에서만" 숨김 가능:
     - (헤더 날짜 요소 클래스가 .today-chip 라는 가정)
  */
  .home3 .today-chip{
    display: none !important;
  }

  /* 오늘의 사진 캡션 더 컴팩트 */
  .photo-caption{
    max-width: 86%;
    padding: 9px 10px;
    font-size: 12.5px;
  }
  .photo-caption-title{
    font-weight: 800;
  }
  .photo-caption-sub{
    opacity: .88;
  }

  /* 행사·여행 슬라이더 */
  .home3-hero .side-card .slider{
    height: 240px;
  }

  /* 카드 헤더(제목/더보기) 상단을 더 올려 타이트하게 */
  .fhead{
    padding: 10px 12px;
  }
  .ftitle{
    font-size: 14px;
  }

  /* 더보기 버튼(타원형) 컴팩트 */
  .fmore{
    height: 26px;
    padding: 0 10px;
    font-size: 12px;
    border-radius: 999px;
  }

  /* 건강 CTA: 1열(엄지 터치 최적) */
  .health-cta{
    grid-template-columns: 1fr;
  }
  .health-cta .hbtn{
    height: 42px;
  }

  /* 날씨 아이콘 크기 */
  .wicon svg{
    width: 20px;
    height: 20px;
  }

  /* FAB 버튼 터치 크기 확보 */
  .fab-btn{
    width: 48px;
    height: 48px;
    border-radius: 999px;
  }
}

/* =========================================================
   HOME (home3) Responsive Overrides
   - Desktop 기본값은 위쪽에 두고,
   - 아래는 980 / 760 / 640 / 480 전용 오버라이드
========================================================= */

/* 공통 안전장치: 배경이미지 카드 깨짐 방지 */
.home3-hero .left-main,
.home3-hero .slider .slide,
.memory-thumb {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* =========================================================
   1) Tablet (<= 980px)
   - HERO 2컬럼 → 1컬럼 스택
   - FEEDS 4카드 → 2열
========================================================= */
@media (max-width: 980px) {

  /* HERO: 2열 → 1열 */
  .home3-hero{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .home3-hero .left-card,
  .home3-hero .right-col{
    width: 100% !important;
    min-width: 0;
  }

  /* 왼쪽 오늘의 사진: 높이 과도 방지(태블릿에서 스크롤 길이 줄이기) */
  .home3-hero .left-main{
    min-height: 520px;   /* 필요 시 560px */
  }

  /* 행사·여행: 이미지 높이(태블릿) */
  .home3-hero .side-card .slider{
    height: 320px;
  }
  .home3-hero .side-card .slide{
    height: 100%;
  }

  /* 건강 라운지: 2열 유지 + CTA 1줄 유지 */
  .health-list{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .health-cta{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    align-items: stretch;
  }
  .health-cta .hbtn{
    width: 100%;
    min-width: 0;
  }

  /* FEEDS: 4카드 → 2열 */
  .home3-feeds{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  /* 날씨 카드 내부: 2개 미니카드 폭 최대 */
  .weather-box{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    padding: 0 10px !important;
  }
  .weather-mini-card{
    min-width: 0;
  }

}

/* =========================================================
   2) Mobile (<= 760px)
   - FEEDS 4카드 → 1열
   - 건강 라운지 미니카드 → 1열
   - CTA 4버튼 → 2열 (터치 안정)
========================================================= */
@media (max-width: 760px) {

  .layout-inner.home3{
    padding-left: 12px;
    padding-right: 12px;
  }

  /* HERO: 더 타이트 */
  .home3-hero{
    gap: 12px !important;
  }

  /* 왼쪽 오늘의 사진: 모바일에서 너무 길지 않게 */
  .home3-hero .left-main{
    min-height: 420px;
  }

  /* 캡션: 좌측상단 배치 유지 시(기존 스타일이 하단띠였다면) */
  .photo-caption{
    max-width: 78%;
    font-size: 13px;
    line-height: 1.35;
    padding: 10px 12px;
  }

  /* 행사·여행 이미지 높이 */
  .home3-hero .side-card .slider{
    height: 300px;
  }

  /* 건강 라운지: 1열 */
  .health-list{
    grid-template-columns: 1fr;
    gap: 9px;
  }

  /* 건강 CTA: 2열 (터치용) */
  .health-cta{
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .health-cta .hbtn{
    height: 40px;
    border-radius: 999px;
  }
  /* 아이콘 + 텍스트 가로 배치 강제 */
  .health-cta .hbtn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  .health-cta .hbtn i{
    margin: 0;            /* 위로 올라가 있던 margin 제거 */
    font-size: 16px;
    line-height: 1;
  }
  .health-cta .hbtn span{
    line-height: 1;
    white-space: nowrap;
  }

  /* FEEDS: 1열 */
  .home3-feeds{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* 카드 높이 타이트(원하는 220~260px 근처로 유도) */
  .home3-feeds .card{
    min-height: 220px;
  }

  /* 날씨: 2개는 2열 유지하되 폭이 좁으면 줄어듦 */
  .weather-box{
    grid-template-columns: 1fr 1fr !important;
  }

  /* 손주 드롭다운: 터치 UX */
  .kid-btn{
    height: 44px;
    border-radius: 999px;
  }
  .kid-menu{
    max-height: 60vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* =========================================================
   3) Small Mobile (<= 640px)
   - 행사·여행 더 낮게
   - 날씨 미니카드 → 1열
   - 텍스트/간격 더 축소
========================================================= */
@media (max-width: 640px) {

  /* 왼쪽 카드(오늘의 사진) 높이 더 축소 */
  .home3-hero .left-main{
    min-height: 360px;
  }

  /* 행사·여행 슬라이더 높이 */
  .home3-hero .side-card .slider{
    height: 280px;
  }

  /* 건강 미니카드 더 타이트 */
  .health-pick{
    padding: 10px 12px;
  }
  .health-pick-title{
    font-size: 13px;
  }
  .health-meta{
    font-size: 12px;
    line-height: 1.25;
    margin-top: 4px;
  }

  /* 건강 CTA: 2열 유지 */
  .health-cta .hbtn{
    font-size: 13px;
    padding: 0 12px;
  }

  /* 날씨: 1열로 전환 (폭 최대로) */
  .weather-box{
    grid-template-columns: 1fr !important;
  }
  .weather-mini-title{
    font-size: 13px;
    margin-bottom: 8px;
  }
  .weather-mini-row{
    font-size: 12px;
    padding: 5px 0;
  }

  /* FEEDS 내부 리스트 라인 간격 축소 */
  .flist .fitem{
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .fmeta{
    margin-top: 3px;
    font-size: 12px;
    opacity: .8;
  }
}

/* =========================================================
   4) Extra Small (<= 480px)
   - 아주 작은 화면: 여백 최소 + 버튼/타이포 정리
========================================================= */
@media (max-width: 480px) {

  .layout-inner.home3{
    padding-left: 10px;
    padding-right: 10px;
  }

  /* 메뉴/상단에서 공간 확보 (홈 헤더 우측 날짜 숨김은 header 쪽에서 처리 권장)
     - home.css에서만 처리하려면 아래처럼 "홈에서만" 숨김 가능:
     - (헤더 날짜 요소 클래스가 .today-chip 라는 가정)
  */
  .home3 .today-chip{
    display: none !important;
  }

  /* 오늘의 사진 캡션 더 컴팩트 */
  .photo-caption{
    max-width: 86%;
    padding: 9px 10px;
    font-size: 12.5px;
  }
  .photo-caption-title{
    font-weight: 800;
  }
  .photo-caption-sub{
    opacity: .88;
  }

  /* 행사·여행 슬라이더 */
  .home3-hero .side-card .slider{
    height: 240px;
  }

  /* 카드 헤더(제목/더보기) 상단을 더 올려 타이트하게 */
  .fhead{
    padding: 10px 12px;
  }
  .ftitle{
    font-size: 14px;
  }

  /* 더보기 버튼(타원형) 컴팩트 */
  .fmore{
    height: 26px;
    padding: 0 10px;
    font-size: 12px;
    border-radius: 999px;
  }

  /* 건강 CTA: 1열(엄지 터치 최적) */
  .health-cta{
    grid-template-columns: 1fr;
  }
  .health-cta .hbtn{
    height: 42px;
  }

  /* 날씨 아이콘 크기 */
  .wicon svg{
    width: 20px;
    height: 20px;
  }

  /* FAB 버튼 터치 크기 확보 */
  .fab-btn{
    width: 48px;
    height: 48px;
    border-radius: 999px;
  }
}

/* =========================================================
 * 오늘의 가족 큐레이션 (현재 버전)
 * - 헤더(제목+설명) + 10개 썸네일 그리드 + 하단 버튼
 * - ✅ 중복 정의 제거 / ✅ 문법 오류 제거 / ✅ 현재 마크업에만 맞춤
 * ========================================================= */

/* 카드 헤더: 제목 + 설명을 세로 배치 */
.page-home .curation-card .fhead{
  display: flex;
  flex-direction: column;         /* 제목 아래에 설명 */
  align-items: flex-start;
  justify-content: flex-start;
  gap: 6px;
  margin-bottom: 8px;             /* ✅ 그리드와 자연스런 간격 */
}

/* ✅ 큐레이션 카드만 높이 고정 해제 */
.page-home .home3-feeds .card.curation-card{
  height: auto !important;
  overflow: visible !important;
}

/* 제목 */
.page-home .curation-card .ftitle{
  font-size: 16px;
  font-weight: 900;
  line-height: 1.1;
}

/* 설명 문구 */
.page-home .curation-card .fsub{
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(15,23,42,.62);
  line-height: 1.2;
  letter-spacing: -0.05em;
  margin: 0;                      /* ✅ 기존 'margin:-4px:' 문법오류 제거 */
}

/* 10개 그리드 (5 x 2) */


/* 매우 넓은 화면에서 과도하게 작아지는 느낌 방지(선택) */
@media (min-width: 1200px){
  .page-home .curation-card .cur-grid{
    grid-template-columns: repeat(auto-fit, minmax(68px, 1fr));
  }
}

/* 썸네일 (a 태그) */
.page-home .curation-card .cur-thumb{
   position: relative;
   display: block;
   aspect-ratio: 1 / 1;
   border-radius: 12px;
   background-size: cover;
   background-position: center;
   width: 100%;              /* ✅ 칸 너비를 100%로 */
   min-width: 0;             /* ✅ 그리드 안에서 overflow로 밀리지 않게 */
   text-decoration: none;
   cursor: pointer;
   box-shadow: 0 4px 10px rgba(15,23,42,.12);
   transition: transform .18s ease, box-shadow .18s ease, outline .18s ease;
 }


/* ✅ 썸네일이 border/outline 때문에 칸을 밀지 않게 */
.page-home .curation-card .cur-thumb{
  width: 100%;
  box-sizing: border-box;
}


/* 호버/키보드 포커스 */
.page-home .curation-card .cur-thumb:hover,
.page-home .curation-card .cur-thumb:focus-visible{
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(37,99,235,.25);
  outline: 2px solid rgba(37,99,235,.55);
  outline-offset: 2px;
}

/* (옵션) 썸네일 태그를 나중에 다시 쓸 경우만 유지 */
.page-home .curation-card .cur-tag{
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  color: #1e3a8a;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(4px);
}

/* 하단 영역: 버튼 두 개 */
.page-home .curation-card .cur-foot{
  display: flex;
  align-items: center;
  justify-content: flex-start;    /* ✅ 현재는 버튼 2개가 왼쪽 정렬이 자연스러움 */
}

/* 버튼 래퍼 */
.page-home .curation-card .cur-actions{
  display: flex;
  gap: 10px;
  align-items: center;
}

/* 버튼(링크) 공통 */
.page-home .curation-card .cur-actions a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
  font-size: 12px;
  white-space: nowrap;
}

/* "오늘의 전시 보기" */
.page-home .curation-card .cur-link{
  color: #2563eb;
  background: rgba(37,99,235,.08);
  border: 1px solid rgba(37,99,235,.18);
}

/* "슬라이드쇼 영상 만들기" */
.page-home .curation-card .cur-video{
  color: #0f172a;
  background: rgba(15,23,42,.06);
  border: 1px solid rgba(15,23,42,.12);
}

/* 버튼 호버 */
.page-home .curation-card .cur-actions a:hover{
  filter: brightness(.97);
  transform: translateY(-1px);
}


@media (max-width:640px){
  .page-home .curation-card .cur-actions{
    flex-direction: column;
    align-items: stretch;
  }
  .page-home .curation-card .cur-actions a{
    width: 100%;
    justify-content: center;
  }
}

/* =========================================
   최신 게시글 카드: 2개 보장 레이아웃
   ========================================= */
.page-home .card.card-posts{
  display:flex;
  flex-direction:column;
}

/* 리스트 영역은 최소 높이를 확보해서 2줄(2개) 잘림 방지 */
.page-home .card.card-posts .posts-list-wrap{
  flex: 0 0 auto;
  min-height: 118px;  /* ✅ 2개 보장용 (필요시 110~140 사이 미세조정) */
}

/* ul이 혹시 overflow로 잘리는 경우 방지 */
.page-home .card.card-posts .flist{
  overflow: visible;
}

/* 하단 영역은 리스트와 분리된 footer 느낌 */
.page-home .card.card-posts .posts-bottom{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(15,23,42,.08);
}

/* =========================================================================== 2026.01.12 */

/* =========================================================
   HOME - Kid Quick Dropdown (FINAL, NO DUP)
   - 2 buttons in one row
   - menu opens upward (drop-up)
   - no quick disappearing (hover bridge)
   - readable dark menu
========================================================= */

/* ✅ 카드/그리드 잘림 방지(드롭다운이 카드 밖으로 나가도 보이게) */
.page-home .home3-feeds,
.page-home .home3-feeds .card {
  overflow: visible !important;
}

/* 바(버튼 2개) */
.page-home .kid-bar{
  display:flex;
  align-items:center;
  justify-content:center; /* 필요하면 flex-end로 바꾸면 우측정렬 */
  gap:10px;
  margin-top:10px;
  margin-bottom:16px;
  flex-wrap:nowrap;
}

/* 드롭다운 영역(hover 범위는 여기만) */
.page-home .kid-dd{
  position:relative;
  flex:0 0 auto;
  z-index:10;
}

/* 버튼 공통 높이 */
.page-home .kid-btn,
.page-home .kid-link{
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  font-weight:700;
  font-size:12px;
  white-space:nowrap;
}

/* 손주 사진 버튼 */
.page-home .kid-btn{
  min-width:140px;
  padding:0 12px;
  gap:6px;
  border:1px solid rgba(15,23,42,.14);
  background:#fff;
  color:#0f172a;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(2,6,23,.08);
}
.page-home .kid-btn:focus{
  outline:2px solid rgba(59,130,246,.35);
  outline-offset:2px;
}
.page-home .kid-caret{ font-size:12px; opacity:.7; }

/* 오늘의 손주 10장 버튼 */
.page-home .kid-link{
  padding:0 14px;
  text-decoration:none;
  border:1px solid rgba(59,130,246,.28);
  background:rgba(59,130,246,.12);
  color:#1d4ed8;
}
.page-home .kid-link:hover{
  background:rgba(59,130,246,.18);
}

/* ✅ 드롭다운 메뉴 (위로 펼치기) */
.page-home .kid-menu{
  position:absolute;
  right:0;
  left:auto;
  bottom:calc(100% + 6px);  /* 버튼과 간격(너무 크면 사라짐 체감↑) */
  top:auto;

  width:200px;
  max-width:min(200px, 86vw);
  padding:8px;
  border-radius:14px;

  background:#0b1220;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 16px 34px rgba(0,0,0,.28);

  /* 기본 숨김 (display:none 쓰지 말고 이 방식으로 통일) */
  opacity:0;
  transform:translateY(8px);
  visibility:hidden;
  pointer-events:none;
  transition:opacity .16s ease, transform .16s ease, visibility .16s ease;
  z-index:9999;
}

/* ✅ “빨리 사라짐” 방지용 hover 브릿지(버튼↔메뉴 사이 빈틈 메움) */
.page-home .kid-menu::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-16px;    /* 메뉴 아래로 브릿지 영역 */
  height:20px;
  background:transparent;
}

/* ✅ 열림 조건: (1) 데스크탑 hover/focus-within (2) JS .open */
@media (hover:hover) and (pointer:fine){
  .page-home .kid-dd:hover .kid-menu,
  .page-home .kid-dd:focus-within .kid-menu{
    opacity:1;
    transform:translateY(0);
    visibility:visible;
    pointer-events:auto;
  }
}
.page-home .kid-dd.open .kid-menu{
  opacity:1;
  transform:translateY(0);
  visibility:visible;
  pointer-events:auto;
}

/* 메뉴 아이템 */
.page-home .kid-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:12px;
  text-decoration:none;
  color:#eef2ff !important;
  font-weight:800;
}
.page-home .kid-item:hover{ background:rgba(255,255,255,.10); color:#fff !important; }

/* 아이콘 */
.page-home .kid-ico{
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:rgba(255,255,255,.08);
  flex:0 0 26px;
  font-size:16px;
}
.page-home .kid-text{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.page-home .kid-go{
  margin-left:auto;
  opacity:.7;
  font-size:18px;
  line-height:1;
}

/* 모바일: 공간 부족하면 2줄 허용 + (원하면 아래로 펼치기로 바꿀 수도 있음) */
@media (max-width:420px){
  .page-home .kid-bar{ flex-wrap:wrap; }
}

/* ✅ 드롭다운: 예전처럼 아래로 열기(우선 복구) */
.kid-dd[data-kid-dd] { position: relative; }

.kid-dd[data-kid-dd] > .kid-menu{
  position: absolute;
  left: 0;
  right: auto;
  top: calc(100% + 8px);   /* 아래로 */
  bottom: auto;
  display: none;
  z-index: 2200;
}

.kid-dd[data-kid-dd].open > .kid-menu,
.kid-dd[data-kid-dd].is-open > .kid-menu{
  display: block;
}
@media (hover:hover) and (pointer:fine){
  .kid-dd[data-kid-dd] > .kid-menu{
    top: auto;
    bottom: calc(100% + 8px);
  }
}


/* ====================================================================== 제미나이 2026. 01. 13

/* [필독] 부모 요소의 높이 제한 해제 */
.page-home .home3-feeds,
.page-home .home3-feeds .card {
  overflow: visible !important; /* 메뉴가 카드 밖으로 나갈 수 있게 함 */
}

/* 1. 버튼 바 가로 정렬 */
.kid-actions {
  margin-top: 16px;
}

.kid-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

/* 2. 손주 사진 드롭다운 전용 구역 */
.kid-dd {
  position: relative;
  display: inline-block;
}

/* 3. 위로 펼쳐지는 메뉴 (핵심 수정) */
.kid-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 12px) !important; /* 아래가 아닌 위로 고정 */
  top: auto !important; /* top 속성이 남아있을 경우를 대비해 초기화 */
  
  width: 200px;
  background: rgba(30, 32, 38, 0.98);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.3);
  
  /* 초기 상태 */
  display: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.2s, transform 0.2s;
  z-index: 9999;
}

/* 4. 마우스 끊김 방지 브릿지 (Bridge) */
.kid-menu::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -15px; /* 메뉴와 버튼 사이의 간격을 메움 */
  height: 20px;
  background: transparent;
}

/* 5. 활성화 상태 (Hover & JS 공통) */
.kid-dd:hover .kid-menu,
.kid-dd.is-open .kid-menu,
.kid-menu.open {
  display: block !important;
  opacity: 1;
  transform: translateY(0);
}

/* 6. 메뉴 내부 항목 (이미지 d686c9 개선) */
.kid-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  color: #fff !important;
  text-decoration: none;
  border-radius: 10px;
  transition: background 0.2s;
}

.kid-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.kid-ico { font-size: 16px; }
.kid-text { font-size: 13px; font-weight: 600; }
.kid-go { margin-left: auto; color: rgba(255,255,255,0.3); }

/* [공통] 전문가용 미드나잇 유리 효과 스타일 */
:root {
  --dropdown-bg: rgba(30, 34, 45, 0.95); /* 너무 진하지 않은 세련된 네이비 */
  --dropdown-border: rgba(255, 255, 255, 0.08);
  --dropdown-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  --text-main: rgba(255, 255, 255, 0.9);
  --item-hover: rgba(255, 255, 255, 0.08);
}

/* 손주 사진 드롭다운 & FAB 메뉴 공통 적용 */
.kid-menu, 
.fab-menu-content { /* FAB 메뉴 클래스명이 다를 경우 맞춰주세요 */
  background: var(--dropdown-bg) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid var(--dropdown-border) !important;
  box-shadow: var(--dropdown-shadow) !important;
  border-radius: 16px !important;
  padding: 8px !important;
}

/* 항목 스타일 통일 */
.kid-item, 
.fab-item { 
  color: var(--text-main) !important;
  transition: all 0.2s ease;
  border-radius: 10px !important;
}

.kid-item:hover, 
.fab-item:hover {
  background: var(--item-hover) !important;
  transform: translateX(4px); /* 살짝 밀리는 효과로 생동감 부여 */
}

/* =========================================================
   [HOME] Responsive layout (Tablet/Mobile)
   - PC: 2 columns (left big + right stack)
   - <=980: 1 column
   ========================================================= */

/* -----------------------------
   <= 980px (태블릿 가로/작은 노트북)
   - 2열 → 1열
   ----------------------------- */
@media (max-width: 980px){
  .home3-feeds{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* 오른쪽 카드들도 1열로 내려오면 자연스럽게 */
  .home3-feeds .right-col{
    gap: 12px;
  }
}

/* -----------------------------
   <= 768px (태블릿 세로/큰 모바일)
   - 패딩/라운드/글씨 살짝 최적화
   ----------------------------- */
@media (max-width: 768px){
  .home3-feeds{
    gap: 12px;
  }

  .home3-feeds .card{
    border-radius: 14px;
  }

  .home3-feeds .card-title{
    font-size: 15px;
  }

  /* 버튼이 너무 커서 줄 깨질 때 */
  .home3-feeds .btn,
  .home3-feeds .pill{
    padding: 8px 10px;
    font-size: 12px;
  }
}

/* -----------------------------
   <= 650px (일반 모바일)
   - 목록/카드 내부 2열 요소도 1열로 강제
   ----------------------------- */
@media (max-width: 650px){
  /* 예: '오늘의 가족 큐레이션' 썸네일 그리드가 2줄/3줄 자연스럽게 */
  .today-curation-grid,
  .home-curation-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  /* 날씨 카드가 2열이면 1열로 */
  .weather-grid,
  .home-weather-grid{
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   HOME (index.php) - Mobile/Tablet Responsive Pack (ADD)
   - 목표: 모바일에서 사진이 꽉 차고(가로 100%), 카드 정렬 안정화
   - 적용: /assets/css/home.css 맨 아래에 추가
========================================================= */

/* ---------------------------------------------------------
   1) Mobile (<= 600px)
--------------------------------------------------------- */
@media (max-width: 600px) {

  /* 전체 좌우 여백 조금 줄여 화면 꽉 차게 */
  .page-home .home3 {
    padding-left: 10px;
    padding-right: 10px;
  }

  /* HERO를 1열로: 오늘의 사진 -> 행사/여행 -> 건강 순으로 */
  .page-home .home3-hero {
    grid-template-columns: 1fr;
  }

  /* 오늘의 사진: 화면에 꽉 차는 느낌 (iPhone 기준 꽤 시원함) */
  .page-home .left-main {
    /* 최소 높이 + 뷰포트 높이 기준으로 크게 */
    min-height: 420px;
    height: min(62vh, 560px);
  }

  /* 캡션: 상단에 너무 크게 자리차지하지 않게 */
  .page-home .photo-caption {
    font-size: 13px;
    padding: 9px 10px;
  }

  /* FAB 버튼이 너무 구석에 크거나 겹치면 조정 (필요 시) */
  .page-home .hero-fab {
    right: 12px;
    bottom: 12px;
  }

  /* 오른쪽 카드들(행사/여행, 건강): 모바일에서 타이틀/여백 정돈 */
  .page-home .side-card,
  .page-home .health-box {
    border-radius: 18px;
  }

  /* 행사/여행: 모바일에서는 너무 납작하지 않게 */
  .page-home .slider {
    height: min(42vh, 360px);
  }
  .page-home .slide {
    background-size: cover;
    background-position: center;
  }

  /* 건강 라운지 버튼들: 한 줄에 다 넣기 어렵다면 2줄 그리드로 */
  .page-home .health-cta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .page-home .hbtn {
    justify-content: center;
  }

  /* FEEDS: 모바일은 1열로 */
  .page-home .home3-feeds {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* 최신 게시글 아래 손주바: 모바일에서 버튼이 꽉 차게 */
  .page-home .kid-actions .kid-bar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .page-home .kid-dd,
  .page-home .kid-link {
    width: 100%;
  }
  .page-home .kid-link {
    text-align: center;
  }

  /* 큐레이션: 모바일에서는 2열이 가장 안정적(손가락 터치) */
  .page-home .cur-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 큐레이션 썸네일: 너무 작아지지 않게 높이 확보 */
  .page-home .cur-thumb {
    border-radius: 14px;
    min-height: 110px;
    background-size: cover;
    background-position: center;
  }

  /* 큐레이션 하단 버튼: 세로로 쌓기 */
  .page-home .cur-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .page-home .cur-link,
  .page-home .cur-video {
    width: 100%;
    text-align: center;
  }

  /* 날씨 카드: 내부 미니 카드들도 1열 */
  .page-home .weather-box {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* ---------------------------------------------------------
   2) Tablet (601px ~ 1024px)
   - 2열 레이아웃을 기본으로: 왼쪽(오늘의 사진) 크게 + 오른쪽(행사/건강)
--------------------------------------------------------- */
@media (min-width: 601px) and (max-width: 1024px) {

  .page-home .home3 {
    padding-left: 14px;
    padding-right: 14px;
  }

  .page-home .home3-hero {
    grid-template-columns: 1.35fr 1fr; /* 왼쪽이 더 넓게 */
    align-items: start;
  }

  /* 오늘의 사진: 태블릿에서도 시원하게 */
  .page-home .left-main {
    height: min(58vh, 620px);
    min-height: 460px;
  }

  /* 행사/여행 슬라이더 높이 */
  .page-home .slider {
    height: min(32vh, 340px);
  }

  /* 건강 버튼은 2열 유지 */
  .page-home .health-cta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  /* FEEDS: 태블릿은 2열이 가장 보기 좋음 */
  .page-home .home3-feeds {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  /* 큐레이션: 태블릿은 3열 추천 */
  .page-home .cur-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .page-home .cur-thumb {
    min-height: 120px;
  }

  /* 날씨: 2열 */
  .page-home .weather-box {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

/* ---------------------------------------------------------
   3) Desktop (>= 1025px)
   - 기존 레이아웃 유지하되, 큐레이션/피드 안정화만 약간
--------------------------------------------------------- */
@media (min-width: 1025px) {
  .page-home .home3-hero {
    grid-template-columns: 1.6fr 1fr;
    align-items: start;
  }

  .page-home .left-main {
    height: 540px;
  }

  /* FEEDS: 데스크탑 3~4열은 기존값을 존중하되 깨짐 방지 */
  .page-home .home3-feeds {
    gap: 16px !important;
  }

  /* 큐레이션: 데스크탑은 5열도 가능(원래 10장 = 5x2) */
  .page-home .cur-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .page-home .cur-thumb {
    min-height: 92px;
  }
}
/* ------------------------- 모바일에서 “오늘의 사진”이 더 꽉 차게(옵션) */
@media (max-width: 600px){
  .page-home .left-main{ height: min(70vh, 640px); }
}

/* =========================================================
   iPhone-first polish (HOME)
   - iOS Safari safe-area 대응
   - 하단 고정 네비(아이콘 바)와 콘텐츠 겹침 방지
   - 사진/카드 더 깔끔하게, 터치하기 좋게
========================================================= */

/* iOS safe-area 변수를 활용한 여백 */
:root{
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}

/* 홈 화면 하단 고정바가 콘텐츠를 덮지 않게 */
.page-home .site-main{
  padding-bottom: calc(96px + var(--safe-bottom)); /* 하단바 + 안전영역 */
}

/* iPhone에서 과한 배경 여백 줄이고 꽉 차게 */
@media (max-width: 600px){

  /* 전체 레이아웃: 좌우 여백 최소화(아이폰에서 시원하게) */
  .page-home .home3{
    padding-left: 10px;
    padding-right: 10px;
  }

  /* HERO: 1열 스택 고정 */
  .page-home .home3-hero{
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  /* 오늘의 사진: iPhone에서 "크게" + 라운드/그림자 정돈 */
  .page-home .left-main{
    border-radius: 18px;
    height: min(72vh, 680px);   /* ✅ 아이폰에서 꽉 찬 느낌 */
    min-height: 520px;
    background-size: cover;
    background-position: center;
  }

  /* 사진 캡션: 깔끔한 반투명, 줄바꿈 자연스럽게 */
  .page-home .photo-caption{
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    max-width: none;
    font-size: 13px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,0.80);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .page-home .photo-caption-title{
    font-weight: 700;
  }

  /* FAB: 손가락 터치 편하게 + 하단바와 간섭 줄이기 */
  .page-home .hero-fab{
    right: 12px;
    bottom: 74px; /* 캡션/하단바 간섭 방지 */
  }
  .page-home .fab-btn{
    width: 54px;
    height: 54px;
    border-radius: 999px;
  }
  .page-home .fab-plus{
    font-size: 26px;
    line-height: 1;
  }

  /* 행사/여행 슬라이더: 모바일에선 너무 작으면 답답 -> 적당히 크게 */
  .page-home .slider{
    height: min(42vh, 380px);
    border-radius: 18px;
    overflow: hidden;
  }

  /* 건강 라운지: 리스트/버튼 터치 영역 키우기 */
  .page-home .health-item a,
  .page-home .health-pick{
    padding: 12px 12px;
  }
  .page-home .health-cta{
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
    padding-bottom: 4px;
  }
  .page-home .hbtn{
    min-height: 44px; /* iOS 권장 터치 높이 */
    border-radius: 14px;
    justify-content: center;
  }

  /* FEEDS: 1열 + 카드 간격 */
  .page-home .home3-feeds{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* 카드 내부 제목/더보기 정렬이 흔들리면 안정화 */
  .page-home .card .fhead{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .page-home .card .ftitle{
    font-size: 16px;
    font-weight: 800;
  }
  .page-home .card .fmore{
    white-space: nowrap;
  }

  /* 손주바: 드롭다운 + 버튼이 모바일에서 "두 줄"로 깔끔하게 */
  .page-home .kid-actions .kid-bar{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 10px;
  }
  .page-home .kid-btn,
  .page-home .kid-link{
    width: 100%;
    min-height: 46px;
    border-radius: 14px;
  }
  .page-home .kid-link{
    text-align: center;
  }

  /* 큐레이션: iPhone은 2열이 가장 보기 좋고 손가락 터치 안정적 */
  .page-home .cur-grid{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 10px;
  }
  .page-home .cur-thumb{
    border-radius: 16px;
    min-height: 130px; /* ✅ 썸네일이 작아 답답한 느낌 제거 */
    background-size: cover;
    background-position: center;
  }

  /* 큐레이션 버튼: 1열(가로 꽉 차게) */
  .page-home .cur-actions{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .page-home .cur-link,
  .page-home .cur-video{
    width: 100%;
    min-height: 46px;
    border-radius: 14px;
    text-align: center;
  }

  /* 날씨 카드: 1열 */
  .page-home .weather-box{
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
}

/* ---------------------------------------------------------
   iPhone "노치/홈바" 있는 기기에서 추가 안전 보정
--------------------------------------------------------- */
@supports (padding: max(0px)) {
  @media (max-width: 600px){
    .page-home .site-main{
      padding-bottom: max(calc(96px + var(--safe-bottom)), 110px);
    }
  }
}

@media (max-width: 600px){
  .page-home .cur-thumb{
    position: relative;
  }
  .page-home .cur-thumb *{
    display: none !important; /* 썸네일은 배경이미지만 보이게 */
  }
}

/* =========================================================
   HOME – A안 (사진 중심, iPhone 최적화 FINAL)
   - 첫 화면 = 오늘의 사진이 거의 전면
   - 정보 카드들은 스크롤 후 자연스럽게 노출
========================================================= */

@media (max-width: 600px){

  /* -------------------------------------------------
     1. HERO 전체를 사진 중심으로
  ------------------------------------------------- */
  .page-home .home3-hero{
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  /* -------------------------------------------------
     2. 오늘의 사진 = 사실상 메인 화면
     - iPhone 화면을 꽉 채우는 비율
  ------------------------------------------------- */
  .page-home .left-main{
    height: 78vh;              /* ✅ 거의 전면 */
    min-height: 560px;
    max-height: 760px;
    border-radius: 20px;
    background-size: cover;
    background-position: center center;
    box-shadow: 0 18px 40px rgba(15,23,42,0.22);
  }

  /* 사진 위 불필요한 장식 제거 */
  .page-home .left-main::before,
  .page-home .left-main::after{
    display: none !important;
  }

  /* -------------------------------------------------
     3. 사진 캡션 – 심플 & 가독성
  ------------------------------------------------- */
  .page-home .photo-caption{
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;

    padding: 12px 14px;
    border-radius: 16px;

    background: rgba(255,255,255,0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    font-size: 14px;
    line-height: 1.45;
  }

  .page-home .photo-caption-title{
    font-weight: 800;
    margin-right: 4px;
  }

  /* -------------------------------------------------
     4. FAB 버튼 – 사진 감상 방해하지 않게 위치 조정
  ------------------------------------------------- */
  .page-home .hero-fab{
    right: 14px;
    bottom: 92px; /* 캡션 + 하단바와 안전거리 */
  }

  .page-home .fab-btn{
    width: 56px;
    height: 56px;
    border-radius: 999px;
  }

  /* -------------------------------------------------
     5. 오른쪽 컬럼(행사·여행 / 건강)
     → 사진 다음에 자연스럽게 이어짐
  ------------------------------------------------- */
  .page-home .right-col{
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .page-home .slider{
    height: 40vh;
    min-height: 280px;
    border-radius: 18px;
  }

  /* -------------------------------------------------
     6. FEEDS: 정보는 "아래에서 차분히"
  ------------------------------------------------- */
  .page-home .home3-feeds{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .page-home .card{
    border-radius: 18px;
  }

  /* -------------------------------------------------
     7. 오늘의 가족 큐레이션
     - 사진 감상용 → 큼직한 2열
  ------------------------------------------------- */
  .page-home .cur-grid{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 12px;
  }

  .page-home .cur-thumb{
    min-height: 150px;
    border-radius: 18px;
    background-size: cover;
    background-position: center;
  }

  /* 큐레이션 버튼은 한 줄씩 크게 */
  .page-home .cur-actions{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .page-home .cur-link,
  .page-home .cur-video{
    width: 100%;
    min-height: 48px;
    border-radius: 16px;
    font-size: 15px;
    font-weight: 600;
  }

  /* -------------------------------------------------
     8. 하단 고정 네비(iPhone 홈바)와 겹침 방지
  ------------------------------------------------- */
  .page-home .site-main{
    padding-bottom: calc(110px + env(safe-area-inset-bottom));
  }
}


/* =========================================================
 * HOME (iPhone 우선) - HERO(오늘의 사진) 전폭/전고 개선
 * ========================================================= */
@media (max-width: 640px){

  /* 레이아웃 좌우 여백 제거(히어로만) */
  .home3{ padding-left: 0 !important; padding-right: 0 !important; }
  .home3-hero{ padding-left: 0 !important; padding-right: 0 !important; }

  /* 왼쪽 카드(오늘의 사진) - 카드 느낌 최소화하고 화면 꽉 */
  .home3-hero .left-card{
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
  }

  /* 실제 사진 영역: 아이폰 세로 화면에 꽉 차게 */
  .home3-hero .left-main{
    border-radius: 0 !important;
    min-height: 72vh;              /* 화면 대부분을 사진이 차지 */
    background-size: cover;
    background-position: center;
  }

  /* 캡션은 사진 위에 깔끔하게 */
  .home3-hero .photo-caption{
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: none;
  }
}

















/* =========================================================
   HOME FINAL PATCH (2026-01) - NO DUP / STABLE
   - Kid bar: 2 buttons in one row
   - Kid menu: drop-up + hover bridge + click safe
   - Health CTA: 4 buttons one row (desktop), 2x2 on mobile
   - Weather: 2 mini cards grid (desktop), 1 col on small
========================================================= */

/* ---------------------------
   0) HOME scope safety
---------------------------- */
.page-home .home3-feeds,
.page-home .home3-feeds .card{
  overflow: visible !important; /* 드롭다운/팝업 잘림 방지 */
}

.page-home .kid-actions{ margin-top: 10px; }

.page-home .kid-bar{
  display:flex;
  align-items:center;
  justify-content:center;  /* 우측정렬 원하면 flex-end */
  gap:10px;
  flex-wrap:nowrap;
}

.page-home .kid-dd{
  position:relative;
  z-index: 50;
  flex: 0 0 auto;
}

/* 버튼 2개 높이 통일 */
.page-home .kid-btn,
.page-home .kid-link{
  height: 34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  font-weight:800;
  font-size:12px;
  white-space:nowrap;
}

/* 손주 사진 버튼 */
.page-home .kid-btn{
  padding: 0 12px;
  gap: 6px;
  border: 1px solid rgba(15,23,42,.14);
  background: #ffffff;
  color: #0f172a;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(2,6,23,.08);
}
.page-home .kid-btn:focus{
  outline: 2px solid rgba(59,130,246,.35);
  outline-offset: 2px;
}
.page-home .kid-caret{ font-size:12px; opacity:.7; }

/* 오늘의 손주 10장 버튼 */
.page-home .kid-link{
  padding: 0 14px;
  text-decoration:none;
  border: 1px solid rgba(59,130,246,.28);
  background: rgba(59,130,246,.12);
  color: #1d4ed8;
}
.page-home .kid-link:hover{ background: rgba(59,130,246,.18); }

/* ---------------------------
   2) KID MENU (drop-up + no quick disappear)
   - display:none 금지 (깜빡임 원인)
   - opacity/visibility/pointer-events 방식으로 통일
---------------------------- */
.page-home .kid-menu{
  position:absolute;
  right: 0;
  left: auto;

  /* ✅ 기본: 위로 열기 */
  bottom: calc(100% + 6px);
  top: auto;

  width: 220px;
  max-width: min(220px, 86vw);
  padding: 8px;
  border-radius: 14px;

  background: rgba(11,18,32,.96);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 16px 34px rgba(0,0,0,.28);

  opacity: 0;
  transform: translateY(8px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
  z-index: 9999;
}

/* ✅ hover 끊김 방지 브릿지(버튼↔메뉴 사이 빈공간 메움) */
.page-home .kid-menu::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-16px;
  height: 20px;
  background: transparent;
}

/* ✅ 열림 조건: (PC hover) + (모바일/클릭 open 클래스) */
@media (hover:hover) and (pointer:fine){
  .page-home .kid-dd:hover .kid-menu,
  .page-home .kid-dd:focus-within .kid-menu{
    opacity:1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
  }
}
.page-home .kid-dd.open .kid-menu,
.page-home .kid-dd.is-open .kid-menu{
  opacity:1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
}

/* 메뉴 아이템 */
.page-home .kid-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 9px 10px;
  border-radius: 12px;
  text-decoration:none;
  color: rgba(255,255,255,.92) !important;
  font-weight: 800;
  font-size: 13px;
}
.page-home .kid-item:hover{
  background: rgba(255,255,255,.10);
  color:#fff !important;
}
.page-home .kid-thumb{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.10);
  background-size: cover;
  background-position: center;
}
.page-home .kid-go{
  margin-left:auto;
  opacity:.65;
  font-size: 18px;
  line-height: 1;
}

/* 모바일: 버튼 두 개가 너무 좁으면 2줄 허용 */
@media (max-width: 420px){
  .page-home .kid-bar{ flex-wrap: wrap; }
  .page-home .kid-dd,
  .page-home .kid-link{ width: 100%; }
  .page-home .kid-btn,
  .page-home .kid-link{ width: 100%; }
  .page-home .kid-menu{ right:auto; left:0; }
}

/* ---------------------------
   3) HEALTH CTA (충돌 제거: 한 버전만)
---------------------------- */
.page-home .health-cta{
  display:grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
}
.page-home .health-cta .hbtn{
  display:inline-flex !important;
  flex-direction: row !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-height: 34px;
  border-radius: 999px;
}
@media (max-width: 760px){
  .page-home .health-cta{
    grid-template-columns: 1fr 1fr !important; /* 터치 안정 */
  }
}

/* ---------------------------
   4) WEATHER (2 mini cards grid)
---------------------------- */
.page-home .weather-box{
  display:grid !important;
  grid-template-columns: 1fr 1fr !important;  /* 수지/오스틴 */
  gap: 10px !important;
}
@media (max-width: 640px){
  .page-home .weather-box{ grid-template-columns: 1fr !important; }
}

/* 마우스/트랙패드 환경에서만 hover 오픈 적용 */
@media (hover: hover) and (pointer: fine){
  .hero-fab:hover .fab-menu{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
}

/* 터치 환경에서는 hover로 열지 않음 (클릭 토글은 JS가 담당) */
@media (hover: none) and (pointer: coarse){
  .hero-fab:hover .fab-menu{
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    pointer-events: none;
  }
}



/* 10개 그리드: 카드폭에 맞춰 자동 채움(남는 칸/여백 없이 꽉) */
 .page-home .curation-card .cur-grid{
   display: grid;
   margin: 0 0 10px;
   justify-content: stretch;
   align-items: stretch;
   gap: 10px;
   /* ✅ 카드폭에 맞춰 자동으로 채움 */
   grid-template-columns: repeat(5, 1fr));
   width: 100%;
 }

/* ✅ 썸네일: 폭과 높이 동일(정사각형) */
.page-home .curation-card .cur-thumb{
  width: 100%;
  aspect-ratio: 1 / 1;      /* 핵심: 정사각 */
  height: auto;             /* 혹시 height가 남아있다면 무력화 */
  box-sizing: border-box;
  display: block;
  border-radius: 12px;      /* 기존 값 유지/원하면 삭제 */
  background-size: cover;
  background-position: center;
}