:root{
  --wrap-w: 1024px;
  --gap: 13px;
  --inner-gap: 12px;
  --right-w: 300px;
  --top-h: 584px;   /* 상단은 고정 */
  --radius: 8px;
}


    *{box-sizing:border-box}
    html,body{margin:0;padding:0}
    body{
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans KR",Arial,"Apple SD Gothic Neo",sans-serif;
      color:#222;background:#fff;
    }
    a{color:inherit;text-decoration:none}
    img{display:block;width:100%;height:100%;object-fit:contain;background:transparent}

    .page-wrap{max-width:var(--wrap-w);margin:0 auto;padding:24px 16px 40px}

    /* 패널: 배경/테두리 제거, 둥근 모서리만 유지 */
    .panel{background:transparent;border:none;}

    /* 타이틀 + 반짝이는 삼각형 */
    .section-title{font-weight:800;font-size:28px;text-align:center;margin:8px 0 10px;letter-spacing:-.02em}
    .trirow{display:flex;justify-content:center;gap:12px;margin:19px 0 18px}
    .tri{width:0;height:0;filter:drop-shadow(0 0 0 rgba(255,0,0,0))}
    .tri.down{border-left:12px solid transparent;border-right:12px solid transparent;border-top:18px solid #ff2a3d}
    .tri.up  {border-left:12px solid transparent;border-right:12px solid transparent;border-bottom:18px solid #ff2a3d}
    /* 강한 반짝임 */
    .sparkle{animation:sparklePulse .85s infinite cubic-bezier(.3,.7,.4,1)}
    .sparkle:nth-child(2){animation-delay:.07s}
    .sparkle:nth-child(3){animation-delay:.14s}
    .sparkle:nth-child(4){animation-delay:.21s}
    @keyframes sparklePulse{
      0%,100%{transform:translateY(0) scale(1); opacity:.92; filter:drop-shadow(0 0 0 rgba(255,42,61,0))}
      40%    {transform:translateY(-4px) scale(1.30); opacity:1;   filter:drop-shadow(0 0 22px rgba(255,42,61,1))}
      70%    {transform:translateY(-1px) scale(1.08); opacity:.98; filter:drop-shadow(0 0 10px rgba(255,42,61,.7))}
    }

    /* ── 메인 2×2 그리드 ── */
.grid4{
  display:grid;
  grid-template-columns: calc(100% - var(--right-w) - var(--gap)) var(--right-w);
  grid-template-rows: var(--top-h) auto;  /* ⬅ bottom은 auto */
  gap: var(--gap);
  align-items: stretch;                    /* ⬅ 두 칸 모두 트랙 높이에 맞춰 늘림 */
}

    /* ① 좌상: 퀄엔드 */
.area-qualend{grid-column:1; grid-row:1;}
.area-qualend .panel{height:100%;}
.area-qualend .panel img{
  width:100%;
  height:100%;
  object-fit: cover;        /* 필요시 cover 로 바꿔 꽉 채우기 */
  
}

    /* ② 우상: 문의(5등분) */
.area-contact{grid-column:2; grid-row:1;}
.contact-grid{
  height:100%;
  display:grid;
  grid-template-rows: repeat(5, 1fr);
  gap: 3px;
}
.contact-grid .panel{height:100%;}
.contact-grid img{width:100%;height:100%;object-fit: cover;}

    /* ③ 좌하: 드라마·웹툰·야놀자 (3열×2행, 드라마는 세로 2칸) */
.area-triple{grid-column:1; grid-row:2;}
.triple-grid{
  /* ⬇️ 고정/퍼센트 높이 제거 */
  height: 100%;                   /* ⬅️ 여기! */
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);   /* ⬅️ auto */
  gap: 5px 4px;
}
.tile-drama   {grid-column:1; grid-row:1 / span 2;}
.tile-webtoon {grid-column:2; grid-row:1;}
.tile-yanolja {grid-column:2; grid-row:2;}


.area-triple,
.area-double {height: 100%;}


    /* ④ 우하: 성형외과·스카이스캐너 (2행 2분할) */
.area-double{grid-column:2; grid-row:2;}
.double-grid{
  height: 100%;                   /* ⬅️ 여기! */
  display:grid;
  grid-template-rows: repeat(2, 1fr);  /* ⬅️ auto */
  gap: 4px;
}
.double-grid img{width:100%;height:138px !important;object-fit:contain;}

    /* 하단 상품 리스트 */
    .iframe-wrap{margin-top:24px;border-radius:var(--radius);overflow:hidden}
    .shop-iframe{width:100%;height:1200px;border:0;background:#fff}


.tile-drama   { grid-column:1; grid-row:1 / span 2; }
.tile-webtoon { grid-column:2; grid-row:1; }
.tile-yanolja { grid-column:2; grid-row:2; }
.panel img {width:100%;height:100%;object-fit: fill;}
.triple-grid .panel img{width:100%;height: -webkit-fill-available;height:auto;object-fit: cover;min-height: 139px;}

img{display:block; max-width:100%;}


.tile-drama img{height: 283px !important;}
.title-bar{
  position: relative;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 6px;
}
.today-widget{
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:8px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  min-width: 270px;
}
.today-widget .box{ flex:1 1 0; text-align:center; }
.today-widget .label{font-size: 19px;color:#6b7280;letter-spacing:.02em;}
.today-widget .value{font-size: 30px;line-height: 1.25;font-weight:800;}
.today-widget .today .value{ color:#ef4444; }
.today-widget .total .value{ color:#111827; }
.today-widget .sep{ width:1px; height:32px; background:#e5e7eb; }