/* ==========================================================================
   진짜리뷰 · 핫리뷰 — 좁은 화면

   이 두 화면은 800px 짜리 JPG 를 세로로 쌓고 그 위에 글자 없는 링크를
   절대배치해 덮는 구조다(.ir_txt 는 text-indent:-999em 로 감춘 대체 텍스트).
   이미지는 max-width:100% 라 저절로 줄어드는데, 덮개는 px 로 박혀 있어
   따라 줄지 않는다. 390px 실측:

     핫리뷰    .sns_hot_video  width 800px           → 가로 밀림 426px
               .hotreview_go   top 128 / w 226       → 이미지 밖으로 벗어남
     진짜리뷰  .sns_wrap       width 800 / -400 여백  → 가로 밀림 27px,
                                                       화면 왼쪽 밖(L-384)

   덮개를 이미지 비율로 바꾼다.
     .section 이 좌우 16px 씩 물고 있어 이미지 폭은 늘 (100% - 32px) 다.
       360→328  390→358  600→568  768→736 (실측, 어느 폭에서나 성립)
     세로는 .section 높이가 곧 이미지 높이라 % 가 그대로 맞는다.
     그래서 가로만 calc 로 이미지 폭을 다시 만들어 쓴다.

   원본 좌표(1080px 기준)와 환산
     .hotreview_go  이미지 800x263
       top 128        → 128/263  = 48.7%
       width 226      → 226/800  = 0.2825
       margin-left -114 → -114/800 = -0.1425
       height 55      → 55/263   = 20.9%
     .sns_btn       이미지 800x1572
       width 70       → 8.75%     margin 0 29 → 3.625%
       height 25      → 25/800    = 3.125% (padding-bottom 으로 비율 유지)
       .sns_wrap bottom → 이미지 아래에서 55px = 3.5%
   ========================================================================== */

@media (max-width: 768px) {

    /* ---- 핫리뷰 : 유튜브 상자 ---- */

    #container.hot_reiview .sns_hot_video {
        width: auto;
        padding: 24px 16px;
    }

        #container.hot_reiview .sns_hot_video iframe {
            display: block;
            width: 100%;
            max-width: 450px;
            height: auto;
            aspect-ratio: 1 / 1;
            margin: 0 auto;
            border: 0;
        }

    /* ---- 핫리뷰 : '핫리뷰 바로가기' 덮개 ---- */

    #container.hot_reiview .hotreview_go {
        top: 48.7%;
        left: 50%;
        width: calc((100% - 32px) * 0.2825);
        height: 20.9%;
        margin-left: calc((100% - 32px) * -0.1425);
    }

    /* ---- 진짜리뷰 : SNS 링크 4개 덮개 ----
       .sns_wrap 의 기준 블록은 .info 인데 폭 0 에 높이는 감춘 글의 높이라
       이미지와 아무 상관이 없다. .info 를 .section(=이미지) 에 맞춰 편다. */

    #container.real_review .info {
        top: 0;
        right: 16px;
        bottom: 0;
        left: 16px;
    }

    #container.real_review .sns_wrap {
        left: 0;
        bottom: 17.9%;
        width: 100%;
        margin-left: 0;
        padding-left: 0.375%;
    }

        #container.real_review .sns_btn {
            width: 8.75%;
            height: 0;
            margin: 0 3.625%;
            padding-bottom: 3.125%;
        }
}