/* =====================================================================
   LEMON SHOT — shared responsive (mobile + tablet)
   각 페이지의 inline <style> 다음에 link 됨 → media 룰이 항상 우선
   ===================================================================== */

/* ============= 찜하기 wished 상태 (모든 화면) ============= */
.heart.wished svg{fill:#ed1f1f;stroke:#ed1f1f}
.btn-wish.wished{background:#fff0ee;border-color:#ed1f1f !important;color:#ed1f1f !important}
.btn-wish.wished svg{stroke:#ed1f1f}

/* ============= TABLET & SMALLER (≤ 1024px) ============= */
@media (max-width: 1024px){
  .topbar{height:32px;font-size:11.5px}

  /* header — 3컬 유지하되 패딩 축소 */
  .header{padding:30px 20px 24px;gap:14px}
  .util-left{font-size:10.5px}
  .util-left .dot{margin:0 6px}
  .util-right{gap:14px;font-size:11.5px}

  /* nav — 가로 스크롤 가능 */
  .nav{padding:0 8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav ul{justify-content:flex-start;flex-wrap:nowrap;min-width:max-content}
  .nav li a{padding:14px 16px;font-size:12.5px;white-space:nowrap}
  .nav li.active a::after{left:16px;right:16px}

  /* 공통 컨테이너 패딩 */
  .grid-wrap{padding:24px 16px 60px}
  .pagebar{padding:0 16px 12px;flex-direction:column;align-items:flex-start;gap:8px}
  .sortlist{flex-wrap:wrap}
  .crumb{font-size:10.5px}
  .hero-space{height:60px}

  /* index cards: 4 → 2 cols */
  .grid{grid-template-columns:repeat(2,1fr) !important;gap:20px 14px !important}
  .meta{padding:12px 2px 0}
  .meta .title{font-size:13.5px}
  .meta .desc{font-size:11.5px}
  .meta .price{font-size:14.5px}

  /* product detail: 2col → 1col */
  .product{grid-template-columns:1fr !important;gap:24px;padding:24px 16px 0}
  .gallery{max-width:560px;margin:0 auto;width:100%}
  .info{max-width:560px;margin:0 auto;width:100%}
  .body-wrap{grid-template-columns:1fr !important;gap:30px;padding:0 16px;margin-top:36px}
  .sticky{position:static;top:auto}
  .backlink{position:fixed;top:auto;bottom:96px;left:16px;font-size:11px;padding:6px 12px;z-index:80}

  /* high reviews */
  .high-rev{padding:24px 16px 0;margin-top:30px}
  .high-rev .row{grid-template-columns:1fr 1fr;gap:10px}
  .high-rev .nav-arrow{display:none}

  /* reviews */
  .reviews{padding:0 16px 40px}
  .review-photos{grid-template-columns:repeat(4,1fr);gap:6px}
  .review-item{grid-template-columns:1fr;gap:10px}
  .review-item .pic{width:80px;height:80px}

  /* board pages */
  .board-wrap{padding:32px 16px 60px}
  .board-table{font-size:12px}
  .board-table thead th{padding:12px 6px;font-size:12px}
  .board-table tbody td{padding:18px 6px}
  .col-cat{width:78px}
  .col-title{padding-left:12px !important}
  .col-date{width:90px;font-size:11px}
  .col-views{width:60px;font-size:11px}
  .badge{padding:2px 8px;font-size:10.5px}

  /* schedule */
  .cal-wrap{padding:24px 16px 60px}
  .cal-grid{grid-auto-rows:90px}
  .cell{padding:5px 4px 4px}
  .cell .date{font-size:11px}
  .cell .event{font-size:9.5px;padding:2px 4px}
  .cell .holiday{font-size:9px}

  /* cart */
  .cart-wrap{padding:32px 16px 60px}
  .cart-item{grid-template-columns:96px 1fr;gap:14px;padding:14px 16px}
  .cart-item .thumb{width:96px;height:96px}
  .cart-item .del{display:none}
  .cart-item .info .opts .opt{grid-template-columns:1fr 90px 80px 24px;gap:6px;font-size:12px}
  .cart-item .opt .lbl .badge-choice{display:inline-block;margin-left:0}
  .cart-summary{grid-template-columns:1fr;gap:14px;padding-top:18px}
  .cart-summary .right{text-align:left}
  .cart-summary .right .total-amt{font-size:22px}
  .cart-cta{flex-direction:column-reverse;gap:10px}
  .cart-cta .btn{width:100%;text-align:center;padding:14px}

  /* legal pages */
  .legal-wrap{padding:32px 16px 60px}
  .legal table{font-size:12px}
  .legal table th, .legal table td{padding:8px 10px}

  /* support */
  .support-wrap{padding:32px 16px 60px}
  .support-wrap .quick{grid-template-columns:1fr 1fr;gap:10px}
  .support-wrap .info-box{grid-template-columns:1fr;gap:12px}

  /* contact */
  .contact-wrap{padding:32px 16px 60px}
  .contact-grid{grid-template-columns:1fr;gap:24px}
  .contact-form{padding:22px 20px}
  .contact-form .grid2{grid-template-columns:1fr;gap:0}
  .contact-side{position:static;top:auto}

  /* post (notice/event 상세) */
  .post-wrap{padding:32px 16px 60px}

  /* product accordion footer */
  .acc{padding:0 16px}

  /* footer */
  .footer{padding:30px 16px 50px}
  .footer-line{margin:40px auto 0}
}

/* ============= MOBILE ONLY (≤ 640px) ============= */
@media (max-width: 640px){
  /* topbar */
  .topbar{height:28px;font-size:10.5px}
  .topbar-divider{margin:0 8px}
  .topbar-logo{height:13px}
  .topbar .skr-mark{font-size:10px}

  /* header — stacked */
  .header{grid-template-columns:1fr;gap:14px;padding:20px 14px 14px;text-align:center}
  .util-left{justify-self:center;font-size:10px}
  .logo{justify-content:center;gap:10px}
  .logo-mark{font-size:16px;letter-spacing:0.22em}
  .logo-tag{font-size:9px;padding-left:10px;line-height:1.5}
  .util-right{justify-self:center;gap:10px;font-size:11px;flex-wrap:wrap;justify-content:center}

  /* nav */
  .nav li a{padding:12px 12px;font-size:11.5px}
  .nav li.active a::after{left:12px;right:12px}

  /* index cards: 2 → 1 col */
  .grid{grid-template-columns:1fr !important;gap:14px !important}
  .meta .title{font-size:13.5px}
  .meta .desc{font-size:11.5px}

  /* product detail */
  .info h1{font-size:18px !important;flex-wrap:wrap;gap:8px}
  .info h1 .rating{font-size:12px}
  .price{font-size:24px !important}
  .price .won{font-size:15px !important}
  .price-detail{font-size:11.5px}
  .price-detail .hl{padding:1px 3px}
  .field label{font-size:12px}
  .field .input,.field .select,.opt-select{height:42px;font-size:12.5px}
  .cta{height:48px;font-size:14px;margin-top:18px}
  .ctas{grid-template-columns:1fr 1fr 1fr;gap:6px;margin-top:6px}
  .ctas button{height:40px;font-size:11px;gap:4px;padding:0 4px}
  .ctas button svg{width:12px;height:12px}

  /* opt cards */
  .opt-card{padding:10px 12px}
  .opt-card-label{font-size:12.5px}
  .opt-card-price{font-size:12px}

  /* board */
  .board-head{flex-direction:column;align-items:flex-start;gap:10px;padding-bottom:18px;margin-bottom:0}
  .board-head h1{font-size:22px}
  .board-table thead{display:none}
  .board-table, .board-table tbody, .board-table tr, .board-table td{display:block;width:100%}
  .board-table tr{border-bottom:1px solid var(--line);padding:14px 4px}
  .board-table td{padding:3px 0;border:0;text-align:left !important}
  .board-table .col-cat{width:auto;display:inline-block;margin-bottom:6px}
  .board-table .col-title{padding-left:0 !important;font-size:13.5px;font-weight:500;color:#111;white-space:normal;display:block}
  .board-table .col-date,.board-table .col-views{display:inline-block;font-size:11px;color:#888;margin-right:10px;width:auto}
  .pager-bar{margin-top:24px}
  .pager-bar a{width:30px;height:30px;font-size:12px}

  /* schedule */
  .cal-toolbar{flex-direction:column;align-items:stretch;gap:10px;margin-bottom:14px}
  .cal-month{font-size:17px;justify-content:space-between}
  .cal-view{align-self:flex-end}
  .cal-view button{padding:6px 12px;font-size:11.5px}
  .cal-grid{grid-auto-rows:68px}
  .cell{padding:3px 3px 2px;gap:1px}
  .cell .date-row{min-height:14px;margin-bottom:1px}
  .cell .date{font-size:10px}
  .cell .holiday{font-size:8.5px}
  .cell .event{font-size:8.5px;padding:1px 3px;line-height:1.2}
  .cell.today .date{width:16px;height:16px;font-size:9.5px}
  .cal-week-head > div{padding:5px 3px;font-size:9.5px}
  .cal-legend{flex-wrap:wrap;gap:10px;font-size:11px}

  /* cart */
  .cart-head{flex-direction:column;align-items:flex-start;gap:8px}
  .cart-head h1{font-size:22px}
  .cart-head .step{font-size:11px}
  .cart-item{grid-template-columns:72px 1fr;gap:12px;padding:12px}
  .cart-item .thumb{width:72px;height:72px}
  .cart-item .info .ttl{font-size:13px}
  .cart-item .info .meta{font-size:10.5px;margin-bottom:8px}
  .cart-item .info .base{font-size:11.5px;margin-bottom:6px}
  .cart-item .info .opts{padding-top:8px}
  .cart-item .opt{grid-template-columns:1fr;gap:3px;padding:5px 0;border-bottom:1px dashed #f0f0f0}
  .cart-item .opt:last-child{border-bottom:0}
  .cart-item .opt .lbl{font-size:12px}
  .cart-item .opt .stepper{justify-self:start}
  .cart-item .opt .price{text-align:left;font-size:12px}
  .cart-item .opt .x{justify-self:end;margin-top:-22px}

  /* legal */
  .legal-wrap{padding:24px 14px 40px}
  .legal-head h1{font-size:22px}
  .legal h2{font-size:14px}
  .legal p, .legal ol, .legal ul{font-size:12.5px}
  .legal table{font-size:11px;display:block;overflow-x:auto;white-space:nowrap}
  .legal table th, .legal table td{padding:6px 8px;white-space:normal}

  /* support */
  .support-wrap{padding:24px 14px 40px}
  .support-head h1{font-size:22px}
  .support-wrap .quick{grid-template-columns:1fr 1fr;gap:8px}
  .support-wrap .quick a{padding:18px 12px}
  .support-wrap .quick .ico{width:36px;height:36px;margin-bottom:8px}
  .support-wrap .quick h3{font-size:12.5px}
  .support-wrap .quick p{font-size:10.5px}
  .info-card{padding:16px 18px}
  .info-card h3{font-size:13px}
  .info-card .row{font-size:11.5px}
  .faq h2{font-size:16px}
  .faq-q{font-size:12.5px;padding:14px 2px}
  .faq-a{font-size:12px;padding-left:18px;padding-right:2px;padding-bottom:18px}

  /* contact */
  .contact-wrap{padding:24px 14px 40px}
  .contact-head h1{font-size:22px}
  .contact-form{padding:18px 14px}
  .contact-form input,.contact-form select,.contact-form textarea{padding:10px 12px;font-size:13px}

  /* post */
  .post-wrap{padding:24px 14px 40px}
  .post-head h1.crumb{font-size:22px}
  .post-head .to-list{font-size:11px;padding:7px 12px}
  .post h2{font-size:17px}
  .post .body{font-size:13px;line-height:1.8}
  .post-nav .item{padding:14px 6px;font-size:11px;gap:6px}
  .post-nav .item .label{display:none}
  .post-nav .item .ttl{margin-left:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* footer */
  .footer-line{margin:24px auto 0}
  .footer{padding:18px 14px 40px;font-size:10.5px;line-height:1.7}
  .footer .row1{flex-wrap:wrap;gap:2px 0;margin-bottom:10px}
  .footer .row1 a{font-size:11px}
  .footer .row1 .bar{margin:0 6px}

  /* product accordion */
  .acc .row{font-size:12.5px;padding:14px 0}

  /* back-to-top */
  .totop{right:14px !important;bottom:90px !important;width:38px;height:38px}
}