:root{
  --mtl-bg:#FFFFFF;
  --mtl-card:#FFFFFF;
  --mtl-text:#2f2d38;
  --mtl-sub:#5B5A63;
  --mtl-muted:#8D8C95;
  --mtl-border:rgba(20,19,24,.40);
  --mtl-border2:rgba(20,19,24,.28);

  --mtl-primary:#6e47d1;
  --mtl-primary-weak:rgba(122,79,230,.12);
  --mtl-primary-weak2:rgba(122,79,230,.16);

  /* 보라 */
  --acc-purple:#6e47d1;
  --acc-purple-weak:rgba(122,79,230,.12);
  --acc-purple-weak2:rgba(122,79,230,.18);

  /* 파랑 */
  --acc-blue:#2F6BFF;
  --acc-blue-weak:rgba(47,107,255,.12);
  --acc-blue-weak2:rgba(47,107,255,.18);

  /* 민트 */
  --acc-mint:#32C9A7;
  --acc-mint-weak:rgba(50,201,167,.12);
  --acc-mint-weak2:rgba(50,201,167,.18);

  /* 빨강 */
  --acc-red:#FF3B5C;
  --acc-red-weak:rgba(255,59,92,.12);
  --acc-red-weak2:rgba(255,59,92,.18);

  /* 오렌지 */
  --acc-orange:#FF8A2A;
  --acc-orange-weak:rgba(255,138,42,.12);
  --acc-orange-weak2:rgba(255,138,42,.18);

  /* 노랑(골드) */
  --acc-gold:#FFB020;
  --acc-gold-weak:rgba(255,176,32,.14);
  --acc-gold-weak2:rgba(255,176,32,.20);

  /* 초록 */
  --acc-green:#17C964;
  --acc-green-weak:rgba(23,201,100,.12);
  --acc-green-weak2:rgba(23,201,100,.18);

  /* 핑크 */
  --acc-pink:#FF4D9A;
  --acc-pink-weak:rgba(255,77,154,.12);
  --acc-pink-weak2:rgba(255,77,154,.18);

  /* 회색(중립 강조) */
  --acc-gray:#6B7280;
  --acc-gray-weak:rgba(107,114,128,.12);
  --acc-gray-weak2:rgba(107,114,128,.18);




  --mtl-shadow:0 10px 24px rgba(18,18,22,.10);
  --mtl-shadow2:0 14px 26px rgba(18,18,22,.06);

  --mtl-radius-lg:20px;
  --mtl-radius-md:14px;
  --mtl-radius-sm:10px;

  --mtl-maxw:470px;
  --mtl-minw:320px;
  --mtl-footer-h:68px;


    /* JD layout */
  --jd-max:470px; /* view.css maxw 감각 */
  --jd-min:320px;
  --jd-hero-h:292px;

  /* JD component tokens */
  --jd-star:#FFB020;
  --jd-danger:#FF3B5C;
  --jd-coupon:#FF3B5C;
  --jd-success:#17C964;
  --jd-soft:#fff;
  --jd-divider:#EDEDF5;



}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--mtl-text);
  background:var(--mtl-bg);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.mtl-no-scrollbar::-webkit-scrollbar{ display:none; }
.mtl-no-scrollbar{ -ms-overflow-style:none; scrollbar-width:none; }

.mtl-app{
  min-width:var(--mtl-minw);
  max-width:var(--mtl-maxw);
  margin:0 auto;
  min-height:100vh;
  background:var(--mtl-bg);
  padding-bottom: calc(var(--mtl-footer-h) + 84px); /* FAB 영역 고려 */
  position:relative;
}

/* 상단 프로모 */
.mtl-top-promo-wrap{ padding:10px 0; } /* ✅ 좌우 padding 제거(12px -> 0) */
.mtl-top-promo{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  padding:12px;
  border-radius:10px;
  background: linear-gradient(135deg,#6e47d1 0%, #8260df 55%, #6e47d1 100%);
  color:#fff;
  box-shadow: var(--mtl-shadow);
}
.mtl-top-promo-left{ display:flex; align-items:center; gap:10px; min-width:0; }
.mtl-icon-btn{
  width:28px; height:28px;
  border:0; background: rgba(255,255,255,.14);
  color:#fff;
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  flex:0 0 auto;
}
.mtl-brand{ display:flex; align-items:center; gap:10px; min-width:0; }
.mtl-brand-badge{
  width:40px; height:40px; border-radius:12px;
  background: rgba(0,0,0,.18);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  flex:0 0 auto;
}
.mtl-brand-badge img{ width:28px; height:28px; display:block; }
.mtl-brand-text{ line-height:1.2; font-size:13px; opacity:.95; }
.mtl-brand-text b{ font-weight:900; }
.mtl-cta{
  border:0; cursor:pointer;
  background: rgba(20,19,24,.88);
  color:#fff;
  padding:8px 12px;
  border-radius:999px;
  font-size:13px;
  font-weight:800;
  white-space:nowrap;
}

/* 스티키 헤더 + 상단 탭 전체 래퍼 */
.mtl-header-wrap{
  position:sticky;
  top:-6px;
  z-index:15;
  backdrop-filter: blur(10px);
  background: rgb(255, 255, 255);
  border-bottom:1px solid var(--mtl-border2);
}

/* 헤더 자체는 래퍼 안에서 레이아웃만 담당 */
.mtl-header{
  position:relative;
  top:0;
  z-index:auto;
  backdrop-filter:none;
  background:transparent;
  border-bottom:none;
}

.mtl-header-inner{
  height:45px;
  padding:5px 0; /* ✅ 좌우 padding 제거(10px -> 0) */
  display:flex; align-items:center; justify-content:space-between;
  gap: 12px;
}
.mtl-logo{
  display:flex; align-items:center; gap:10px;
  text-decoration:none;
  color:var(--mtl-text);
  font-weight:1000;
  letter-spacing:-0.2px;
  min-width: 0;
}
.mtl-logo img{
  height:22px;
  width:auto;
  display:block;
  flex: 0 0 auto;
}
.mtl-logo-text{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.mtl-site-title{
  font-size: 16px;
  margin-bottom:3px;
  font-weight: 1000;
  line-height: 1;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.mtl-site-sub{
  font-size: 11px;
  font-weight: 850;
  color: var(--mtl-muted);
  line-height: 1.1rem;
  margin-top: 2px;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

.mtl-user-btn{
  width:36px; height:36px;
  border-radius:999px;
  border:1px solid var(--mtl-border);
  background:#fff;
  overflow:hidden;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  flex: 0 0 auto;
}
.mtl-user-btn img{ width:100%; height:100%; object-fit:cover; display:block; }

/* 상단 탭(한 페이지에서 둘 다 보이도록 활성 표시) */
.mtl-main-tabs-wrap{ padding:10px 0 0 0; } /* ✅ 좌우 padding 제거(12px -> 0) */
.mtl-main-tabs{
  height:52px;
  background:#fff;
  border:1px solid var(--mtl-border);
  border-radius:999px;
  padding:4px;
  display:flex;
  gap:6px;
  box-shadow: 0 8px 18px rgba(18,18,22,.06);
}
.mtl-tab-link{
  flex:1;
  height:44px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:var(--mtl-muted);
  font-weight:900;
  font-size:14px;
  position:relative;
  background:transparent;
  border:1px solid transparent;
  user-select:none;
}
.mtl-tab-link.is-active{
  background: var(--mtl-primary-weak);
  border-color: rgba(122,79,230,.25);
  color: var(--mtl-primary);
}
.mtl-tab-badge{
  position:absolute;
  left:14px;
  top:-14px;
  font-size:11px;
  font-weight:950;
  color:#fff;
  background: var(--mtl-primary);
  padding:4px 8px;
  border-radius:999px;
  box-shadow: 0 8px 18px rgba(122,79,230,.25);
}

a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid rgba(122,79,230,.55);
  outline-offset:2px;
  border-radius:10px;
}

/* 섹션 타이틀 */
.mtl-page-title{
  padding: 14px 0 0 0; /* ✅ 좌우 padding 제거(12px -> 0) */
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.mtl-page-title h3{
  margin:0;
  font-size: 16px;
  font-weight: 1000;
  color: var(--mtl-sub);
  letter-spacing:-0.2px;
}
.mtl-page-title .mtl-page-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  border:1px solid var(--mtl-border);
  background:#fff;
  color: var(--mtl-muted);
  font-weight: 900;
  font-size: 12px;
}

/* 캐러셀 (둥근박스 제거) */
.mtl-carousel{
  margin-top:14px;
  width:100%;
  height:84px;
  overflow:hidden;
  position:relative;
  background:#EDEDF5;
  border-top:1px solid var(--mtl-border2);
  border-bottom:1px solid var(--mtl-border2);
  border-radius: 0;
}
.mtl-carousel-track{
  display:flex;
  height:100%;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}
.mtl-carousel-track::-webkit-scrollbar{ display:none; }
.mtl-carousel-track{ -ms-overflow-style:none; scrollbar-width:none; }

.mtl-carousel-slide{
  min-width:100%;
  height:100%;
  scroll-snap-align:start;
  position:relative;
}
.mtl-carousel-slide img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  border-radius: 0;
}
.mtl-carousel-indicator{
  position:absolute;
  right:10px; bottom:10px;
  background: rgba(20,19,24,.55);
  color:#fff;
  padding:3px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  z-index: 3;
}

.mtl-carousel-sm{
  height:68px;
  border-radius:0;
  margin:8px 0 12px 0;
  border:1px solid var(--mtl-border2);
  overflow:hidden;
  background:#EDEDF5;
  position: relative;
}
.mtl-carousel-sm .mtl-carousel-slide img{ border-radius:0; }

/* 검색/새로고침 */
.mtl-search-row{
  padding:10px 0; /* ✅ 좌우 padding 제거(12px -> 0) */
  display:flex;
  align-items:center;
  gap:10px;
  position:sticky;
  top:56px;
  z-index:30;
  background: rgba(246,247,251,.92);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--mtl-border2);
}
.mtl-search-box{
  flex:1;
  display:flex; align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--mtl-border);
  background:#fff;
}
.mtl-search-box input{
  width:100%;
  border:0;
  outline:none;
  font-size:13px;
  background:transparent;
  color:var(--mtl-text);
}
.mtl-search-box input::placeholder{ color:var(--mtl-muted); }
.mtl-refresh-btn{
  width:44px; height:44px;
  border-radius:999px;
  border:1px solid var(--mtl-border);
  background:#fff;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 20px rgba(18,18,22,.06);
  color: var(--mtl-sub);
  font-weight:900;
  user-select:none;
}

/* 상단 지역 탭(5개) - 스티키 래퍼 안에서 사용 */
.mtl-top-region-tabs{
  display:flex;
  overflow-x:auto;
  background:#fff;
  border-top:1px solid var(--mtl-border2);
  border-bottom:1px solid var(--mtl-border2);
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}
.mtl-top-region-tabs::-webkit-scrollbar{ display:none; }
.mtl-top-region-tabs{ -ms-overflow-style:none; scrollbar-width:none; }

/* 5개 탭을 각각 20%씩 (총 100%) 배분 */
.mtl-top-region-link{
  flex: 0 0 20%;
  max-width: 20%;
  min-width: 20%;
  padding:8px 4px;
  text-decoration:none;
  color:var(--mtl-sub);
  font-weight:bold;
  font-size:15px;
  text-align:center;
  position:relative;
  white-space: nowrap;
  user-select:none;
}
.mtl-top-region-link::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:2px;
  background: rgba(20,19,24,.06);
}
.mtl-top-region-link.is-active{ color: var(--mtl-primary); }
.mtl-top-region-link.is-active::after{ background: var(--mtl-primary); }

/* 섹션/카드 */
.mtl-section{ border-bottom:1px solid var(--mtl-border2); background:transparent; }
.mtl-section-head{ padding:10px 0 0 0; } /* ✅ 좌우 padding 제거(12px -> 0) */
.mtl-section-title-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 4px;
  user-select:none;
}
.mtl-section-title{ font-size:17px; font-weight:1000; letter-spacing:-0.2px; }
.mtl-chevron{ display:none; }

/* 하위 탭(좌우 스크롤 확실) */
.mtl-pill-tabs{
  display:flex;
  gap:8px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:6px 0 12px 0; /* ✅ 좌우 padding 제거(기존도 0이라 유지) */
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}
.mtl-pill-tabs::-webkit-scrollbar{ display:none; }
.mtl-pill-tabs{ -ms-overflow-style:none; scrollbar-width:none; }

.mtl-pill{
  flex:0 0 auto;
  padding:8px 12px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--mtl-border);
  color:var(--mtl-sub);
  font-size:13px;
  font-weight:900;
  text-decoration:none;
  white-space:nowrap;
  position:relative;
  user-select:none;
}
.mtl-pill.is-active{
  background: var(--mtl-primary-weak);
  border-color: rgba(122,79,230,.25);
  color: var(--mtl-primary);
}

.mtl-list{ padding:8px 0 14px 0; } /* ✅ 좌우 padding 제거(12px -> 0) */
.mtl-card{
  background:var(--mtl-card);
  border:1px solid var(--mtl-border);
  border-radius: var(--mtl-radius-sm);
  padding:8px;
  display:flex;
  gap:12px;
  position:relative;
  margin-bottom:10px;
  box-shadow: var(--mtl-shadow2);
}

/* 이미지 라운드 제거 + NEW 잘림 방지 */
.mtl-thumb{
  width:110px; height:110px;
  border-radius:0;
  overflow: visible;
  border:1px solid var(--mtl-border2);
  background:#EEE;
  flex:0 0 auto;
  position:relative;
}
.mtl-thumb img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  border-radius:0;
}
.mtl-new{
  position:absolute;
  left:-6px; top:-10px;
  background: var(--mtl-primary);
  color:#fff;
  font-size:10px;
  font-weight:1000;
  padding:4px 7px;
  border-radius:999px;
  box-shadow: 0 12px 18px rgba(122,79,230,.25);
  z-index: 5;
  pointer-events:none;
}

.mtl-partner{
  position:absolute;
  left:-6px; top:-10px;
  background: var(--acc-red);
  color:#fff;
  font-size:10px;
  font-weight:1000;
  padding:4px 7px;
  border-radius:999px;
  box-shadow: 0 12px 18px rgba(122,79,230,.25);
  z-index: 5;
  pointer-events:none;
}

/* =========================================================
   mtl-banner: 단일 배너(캐러셀 제거 버전)
   - 이미지 원본 비율 유지 (width:100%, height:auto)
   - height 고정 없음
   - 상/하 여백만
   ========================================================= */
.mtl-banner{
  margin: 14px 0;              /* ✅ 상/하 여백 */
  padding: 0;                  /* 좌우 여백 없음 */
  background: transparent;
}

.mtl-banner-img{
  display:block;
  width:100%;
  height:auto;                 /* ✅ 비율 유지 */
  max-width:100%;
}

.mtl-card-body{ min-width:0; flex:1; display:flex; flex-direction:column; gap:10px; }
.mtl-card-title-row{ display:flex; align-items:center; gap:6px; min-width:0; }
.mtl-card-title{
  font-size:15px;
  font-weight:1000;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mtl-loc-level1{
  font-size:12px;
  font-weight:1000;
  background:var(--acc-red);
  color: #fff;
  padding:3px 6px;
  border-radius:6px;
  white-space:nowrap;
  flex:0 0 auto;
}
.mtl-loc-level2{
  font-size:12px;
  font-weight:1000;
  background:var(--acc-mint);
  color: #fff;
  padding:3px 6px;
  border-radius:6px;
  white-space:nowrap;
  flex:0 0 auto;
}
/* ✅ 설명영역(아래)에서 위치뱃지 폭이 100%로 늘어나는 것 방지 */
.mtl-loc--inline{
  display:inline-flex;        /* block → inline-flex (글자폭만) */
  width:auto;
  max-width:100%;
  margin-top:6px;
  align-items:center;
  justify-content:center;
  vertical-align:middle;

  /* 기존 mtl-loc 스타일과 동일하게 유지하려면 아래는 생략 가능(원하면 확실히 고정) */
  font-size:12px;
  font-weight:1000;
  color:var(--mtl-primary);
  background: var(--mtl-primary-weak);
  padding:3px 6px;
  border-radius:6px;
  white-space:nowrap;
}
.mtl-card-desc{
  font-size:13px;
  color:var(--mtl-sub);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mtl-meta{
  display:flex; gap:6px; flex-wrap:wrap;
  font-size:12px;
  color:var(--mtl-sub);
}
.mtl-meta span{
  padding:6px 8px;
  border-radius:8px;
  background:#fff;
  border:1px solid var(--mtl-border2);
  font-weight:900;
}
.mtl-meta .mtl-meta-primary{
  color:var(--mtl-primary);
  background: var(--mtl-primary-weak);
  border-color: rgba(122,79,230,.22);
}
.mtl-fav{
  position:absolute;
  top:10px; right:10px;
  width:34px; height:34px;
  border-radius:999px;
  border:1px solid var(--mtl-border);
  background:#fff;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:#B1B0B8;
  font-weight:1000;
  user-select:none;
}
.mtl-fav.is-on{ color:var(--mtl-primary); border-color: rgba(122,79,230,.25); background: var(--mtl-primary-weak); }

/* 데일리톡 */
.mtl-daily-wrap{ padding: 0 0 14px 0; } /* ✅ 좌우 padding 제거(12px -> 0) */
.mtl-daily-topcats{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding: 12px 0 10px 0; /* ✅ 좌우 padding 제거(기존도 0이라 유지) */
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}
.mtl-daily-topcats::-webkit-scrollbar{ display:none; }
.mtl-daily-topcats{ -ms-overflow-style:none; scrollbar-width:none; }

.mtl-daily-cat{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:8px;
  padding: 10px 14px;
  border-radius: 999px;
  background:#fff;
  border:1px solid var(--mtl-border);
  font-weight:1000;
  color: var(--mtl-sub);
  text-decoration:none;
  white-space:nowrap;
  position:relative;
  box-shadow: 0 10px 18px rgba(18,18,22,.05);
  user-select:none;
}
.mtl-daily-cat.is-active{
  background: var(--mtl-primary-weak);
  border-color: rgba(122,79,230,.25);
  color: var(--mtl-primary);
}
.mtl-daily-cat .mtl-cat-new{
  margin-left:2px;
  width:18px; height:18px;
  background:#FF4D7D;
  color:#fff;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:1000;
  border:2px solid #fff;
}

.mtl-daily-hero{
  border-radius: var(--mtl-radius-lg);
  overflow:hidden;
  background:#101018;
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: var(--mtl-shadow2);
}
.mtl-daily-hero .mtl-carousel{
  margin-top:0;
  border:0;
  height:92px;
  background:#0f0f15;
  border-radius:0;
}
.mtl-daily-hero .mtl-carousel-indicator{ background: rgba(255,255,255,.25); }

.mtl-daily-board{
  padding: 14px 14px 10px 14px;
  background:#fff;
  border-top: 1px solid var(--mtl-border2);
}
.mtl-daily-board h2{
  margin: 0 0 6px 0;
  font-size: 18px;
  font-weight: 1000;
  letter-spacing:-0.2px;
}
.mtl-daily-board p{
  margin:0;
  font-size: 12px;
  color: var(--mtl-muted);
  font-weight: 850;
}

.mtl-daily-subtabs{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 12px 14px 12px 14px;
  background:#fff;
  border-top: 1px solid var(--mtl-border2);
}
.mtl-daily-subtabs-left{
  display:flex;
  gap:8px;
}
.mtl-daily-subtab{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--mtl-border);
  background:#fff;
  font-size: 13px;
  font-weight: 1000;
  color: var(--mtl-sub);
  cursor:pointer;
  user-select:none;
  text-decoration:none;
}
.mtl-daily-subtab.is-active{
  background: var(--mtl-primary-weak);
  border-color: rgba(122,79,230,.25);
  color: var(--mtl-primary);
}
.mtl-daily-searchbtn{
  width:44px; height:44px;
  border-radius: 999px;
  border: 1px solid var(--mtl-border);
  background:#fff;
  box-shadow: 0 10px 18px rgba(18,18,22,.06);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color: var(--mtl-sub);
  font-size: 16px;
  user-select:none;
}

.mtl-post-list{
  background:#fff;
  border-top: 1px solid var(--mtl-border2);
  border-bottom: 1px solid var(--mtl-border2);
  border-radius: var(--mtl-radius-lg);
  overflow:hidden;
  box-shadow: var(--mtl-shadow2);
  margin-top: 12px;
}
.mtl-post{
  padding: 14px;
  border-top: 1px solid var(--mtl-border2);
}
.mtl-post:first-child{ border-top:0; }
.mtl-post-title{
  margin:0 0 8px 0;
  font-size: 14px;
  font-weight: 950;
  color: var(--mtl-text);
  display:flex;
  gap:6px;
  align-items:center;
  line-height:1.35;
}
.mtl-post-title .mtl-post-badge{
  font-weight:1000;
  color:#FF3B75;
}
.mtl-post-body{
  margin:0 0 10px 0;
  font-size: 13px;
  color: var(--mtl-sub);
  line-height: 1.5;
}
.mtl-post-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color: var(--mtl-muted);
  font-size: 12px;
  font-weight: 850;
}
.mtl-post-meta-left{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}
.mtl-post-meta-left span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  opacity:.95;
}
.mtl-post-meta-left i{ opacity:.75; }

/* 글쓰기/댓글쓰기 FAB */
.mtl-fab-wrap{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--mtl-footer-h) - 10px);
  width: 100%;
  min-width: var(--mtl-minw);
  max-width: var(--mtl-maxw);
  pointer-events: none;
  z-index: 90;
}

.mtl-fab-inner{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
  padding-right: 14px;
  pointer-events: none;
}

.mtl-fab{
  pointer-events: auto;
  display:inline-flex;
  align-items:center;
  gap:10px;
  border: 1px solid rgba(20,19,24,.10);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 28px rgba(18,18,22,.12);
  padding: 10px 12px;
  border-radius: 999px;
  cursor:pointer;
  user-select:none;
  color: var(--mtl-text);
  font-weight: 950;
  font-size: 13px;
}

.mtl-fab i{
  color: var(--mtl-primary);
  font-size: 15px;
}

.mtl-fab:active{
  transform: translateY(1px);
}

/* ===============================
   ✅ PC 화면 전용 보정 (핵심)
   왼쪽 패널 최대 450px 안에서만 정렬
================================ */
@media (min-width: 1024px){
  .mtl-fab-wrap{
    left: 0;
    transform: none;
    max-width: 470px;   /* ← 왼쪽 패널 최대 폭 */
  }
  .mtl-fab-wrap{
  bottom: calc(var(--mtl-footer-h) - 50px);
  }
}


/* 하단 고정바(폰트어썸 아이콘) */
.mtl-footer{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:0;
  width:100%;
  min-width:var(--mtl-minw);
  max-width:var(--mtl-maxw);
  height: var(--mtl-footer-h);
  background:#fff;
  border-top:1px solid var(--mtl-border);
  z-index:100;
}
.mtl-footer nav{ height:100%; display:flex; align-items:center; }
.mtl-footer ul{
  list-style:none;
  padding:0 8px;
  margin:0;
  display:flex;
  width:100%;
  justify-content:space-between;
  align-items:center;
  gap:6px;
}
.mtl-footer li{ flex:1; }
.mtl-footer a{
  text-decoration:none;
  color: var(--mtl-muted);
  font-weight: 950;
  font-size: 12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding: 10px 6px;
  border-radius: 14px;
  width: 100%;
  user-select:none;
}
.mtl-footer a .mtl-fa{
  font-size: 18px;
  opacity: .65;
}
.mtl-footer a.is-active{
  color: var(--mtl-primary);
  background: var(--mtl-primary-weak);
}
.mtl-footer a.is-active .mtl-fa{ opacity:1; }

/* PC 가로 드래그 스크롤 */
.mtl-dragscroll{ cursor: grab; }
.mtl-dragscroll.is-dragging{ cursor: grabbing; }

/* =========================================================
   mtl2: Add-on (홍보 리스트/페이징/하단배너) - 중복방지 프리픽스
   ========================================================= */
:root{
  --mtl2-ink:#141318;
  --mtl2-sub:#5B5A63;
  --mtl2-muted:#8D8C95;
  --mtl2-line:rgba(20,19,24,.10);
  --mtl2-line2:rgba(20,19,24,.08);
  --mtl2-primary:#7A4FE6;
  --mtl2-primary-weak:rgba(122,79,230,.12);
  --mtl2-shadow:0 14px 26px rgba(18,18,22,.06);
  --mtl2-radius-lg:20px;
}

.mtl2-wrap{ padding: 12px 0 0 0; } /* ✅ 좌우 padding 제거(기존도 0 유지) */

.mtl2-catbar{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding: 6px 0 12px 0; /* ✅ 좌우 padding 제거(기존도 0 유지) */
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}
.mtl2-catbar::-webkit-scrollbar{ display:none; }
.mtl2-catbar{ -ms-overflow-style:none; scrollbar-width:none; }

.mtl2-cat{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:8px;
  padding: 10px 14px;
  border-radius: 999px;
  background:#fff;
  border: 1px solid var(--mtl2-line);
  color: var(--mtl2-sub);
  text-decoration:none;
  font-weight: 950;
  font-size: 13px;
  white-space:nowrap;
  box-shadow: 0 10px 18px rgba(18,18,22,.05);
  position:relative;
  user-select:none;
}
.mtl2-cat.is-active{
  background: var(--mtl2-primary-weak);
  border-color: rgba(122,79,230,.25);
  color: var(--mtl2-primary);
}
.mtl2-cat .mtl2-n{
  width:18px; height:18px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#FF4D7D;
  color:#fff;
  font-size:11px;
  font-weight: 1000;
  border:2px solid #fff;
  margin-left: 2px;
}

.mtl2-boardhead{
  margin-top: 2px;
  background: #fff;
  border: 1px solid var(--mtl2-line2);
  border-radius: var(--mtl2-radius-lg);
  overflow:hidden;
  box-shadow: var(--mtl2-shadow);
}
.mtl2-boardhead-top{ padding: 14px 14px 10px 14px; }
.mtl2-board-title{
  margin:0;
  font-size: 18px;
  font-weight: 1000;
  letter-spacing: -0.2px;
  color: var(--mtl2-ink);
  display:flex;
  align-items:center;
  gap:8px;
}
.mtl2-board-title .mtl2-ico{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--mtl2-primary-weak);
  color: var(--mtl2-primary);
  font-weight: 1000;
  flex: 0 0 auto;
}
.mtl2-board-desc{
  margin:6px 0 0 0;
  font-size: 12px;
  font-weight: 850;
  color: var(--mtl2-muted);
  line-height: 1.45;
}

.mtl2-board-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 12px 14px 14px 14px;
  border-top: 1px solid var(--mtl2-line2);
  background:#fff;
}
.mtl2-control-left{ display:flex; gap:8px; align-items:center; }
.mtl2-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--mtl2-line);
  background:#fff;
  color: var(--mtl2-sub);
  font-size: 13px;
  font-weight: 1000;
  cursor:pointer;
  user-select:none;
}
.mtl2-btn.is-active{
  background: var(--mtl2-primary-weak);
  border-color: rgba(122,79,230,.25);
  color: var(--mtl2-primary);
}
.mtl2-searchbtn{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--mtl2-line);
  background:#fff;
  box-shadow: 0 10px 18px rgba(18,18,22,.06);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--mtl2-sub);
  font-size: 16px;
  user-select:none;
}

.mtl2-banner{
  margin-top: 12px;
  border-radius: 0;
  overflow:hidden;
  border: 1px solid var(--mtl2-line2);
  background:#EDEDF5;
  position:relative;
  box-shadow: var(--mtl2-shadow);
}
.mtl2-banner-track{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}
.mtl2-banner-track::-webkit-scrollbar{ display:none; }
.mtl2-banner-track{ -ms-overflow-style:none; scrollbar-width:none; }

.mtl2-banner-slide{
  min-width: 100%;
  scroll-snap-align:start;
  position:relative;
  height: 96px;
  background:#111;
}
.mtl2-banner-slide img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  border-radius:0;
}
.mtl2-banner-ind{
  position:absolute;
  right:10px;
  bottom:10px;
  background: rgba(20,19,24,.55);
  color:#fff;
  font-size: 11px;
  font-weight: 1000;
  padding: 3px 8px;
  border-radius: 999px;
  z-index: 3;
}

.mtl2-list{
  margin-top: 12px;
  background:#fff;
  border: 1px solid var(--mtl2-line2);
  border-radius: var(--mtl2-radius-lg);
  overflow:hidden;
  box-shadow: var(--mtl2-shadow);
}
.mtl2-item{
  padding: 14px;
  border-top: 1px solid var(--mtl2-line2);
}
.mtl2-item:first-child{ border-top:0; }
.mtl2-item-title{
  margin:0 0 6px 0;
  font-size: 14px;
  font-weight: 1000;
  color: var(--mtl2-ink);
  line-height: 1.35;
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
}
.mtl2-item-title .mtl2-count{ color:#FF3B75; font-weight: 1000; }

.mtl2-item-sub{
  margin:0 0 10px 0;
  font-size: 12px;
  color: var(--mtl2-muted);
  font-weight: 850;
  line-height: 1.45;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.mtl2-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(20,19,24,.04);
  border: 1px solid rgba(20,19,24,.06);
  color: var(--mtl2-sub);
  font-weight: 950;
  font-size: 11px;
}
.mtl2-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-size: 12px;
  font-weight: 850;
  color: var(--mtl2-muted);
}
.mtl2-meta-left{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  min-width:0;
}
.mtl2-meta-left span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  opacity:.95;
  white-space:nowrap;
}
.mtl2-icobox{
  width: 22px;
  height: 22px;
  border-radius: 8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(122,79,230,.12);
  color: var(--mtl2-primary);
  font-weight: 1000;
  flex: 0 0 auto;
}
.mtl2-date{ white-space:nowrap; }

.mtl2-footerbanner{
  margin-top: 12px;
  border-radius: 0;
  overflow:hidden;
  border: 1px solid var(--mtl2-line2);
  background:#111;
  position:relative;
  box-shadow: var(--mtl2-shadow);
}
.mtl2-footerbanner-track{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}
.mtl2-footerbanner-track::-webkit-scrollbar{ display:none; }
.mtl2-footerbanner-track{ -ms-overflow-style:none; scrollbar-width:none; }

.mtl2-footerbanner-slide{
  min-width:100%;
  height: 86px;
  scroll-snap-align:start;
  position:relative;
}
.mtl2-footerbanner-slide img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  border-radius:0;
}
.mtl2-footerbanner-ind{
  position:absolute;
  right:10px;
  bottom:10px;
  background: rgba(255,255,255,.22);
  color:#fff;
  font-size: 11px;
  font-weight: 1000;
  padding: 3px 8px;
  border-radius: 999px;
  z-index: 3;
}

.mtl2-bottom-actions{
  margin-top: 12px;
  background:#fff;
  border: 1px solid var(--mtl2-line2);
  border-radius: var(--mtl2-radius-lg);
  overflow:hidden;
  box-shadow: var(--mtl2-shadow);
}
.mtl2-bottom-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px;
  gap:12px;
}
.mtl2-bottom-row .mtl2-mini{
  display:flex;
  align-items:center;
  gap:10px;
  color: var(--mtl2-sub);
  font-weight: 1000;
  font-size: 13px;
  text-decoration:none;
  user-select:none;
}
.mtl2-bottom-row .mtl2-sep{
  width:1px;
  height: 14px;
  background: var(--mtl2-line2);
  opacity:.8;
}

.mtl2-pager{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 0 14px 16px 14px;
}
.mtl2-pagebtn{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid var(--mtl2-line);
  background:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--mtl2-sub);
  font-weight: 1000;
  user-select:none;
}
.mtl2-pagebtn.is-disabled{ opacity:.4; cursor:not-allowed; }
.mtl2-pagebtn.is-active{
  background: var(--mtl2-primary);
  border-color: rgba(122,79,230,.5);
  color:#fff;
}

.mtl2-fa{ font-size: 14px; opacity:.85; }
/* ✅ 섹션 헤더: "더보기" 우측 정렬 + 톤/크기 통일 */
.mtl-section-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

/* 기존 .mtl-section-title 은 그대로 두고, 더보기만 별도 스타일 */
.mtl-section-more{
  display:inline-flex;
  align-items:center;
  gap:6px;
  text-decoration:none;
  white-space:nowrap;

  /* ✅ 위쪽 느낌처럼: 작고 은은한 회색 */
  color: var(--mtl-muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: -0.1px;
}

.mtl-section-more i{
  font-size: 12px;
  opacity: .85;
}

/* =========================
   Accent Utility (공통 규칙)
   - 각 계열은 --acc / --acc-weak / --acc-weak2 값을 세팅
   - 실제 스타일은 아래 공통 유틸로 처리
   ========================= */

/* (1) 색상 계열 선택 클래스: 여기서 변수만 바꿔줌 */
.acc-purple{ --acc:var(--acc-purple); --acc-weak:var(--acc-purple-weak); --acc-weak2:var(--acc-purple-weak2); }
.acc-blue  { --acc:var(--acc-blue);   --acc-weak:var(--acc-blue-weak);   --acc-weak2:var(--acc-blue-weak2); }
.acc-mint  { --acc:var(--acc-mint);   --acc-weak:var(--acc-mint-weak);   --acc-weak2:var(--acc-mint-weak2); }
.acc-red   { --acc:var(--acc-red);    --acc-weak:var(--acc-red-weak);    --acc-weak2:var(--acc-red-weak2); }
.acc-orange{ --acc:var(--acc-orange); --acc-weak:var(--acc-orange-weak); --acc-weak2:var(--acc-orange-weak2); }
.acc-gold  { --acc:var(--acc-gold);   --acc-weak:var(--acc-gold-weak);   --acc-weak2:var(--acc-gold-weak2); }
.acc-green { --acc:var(--acc-green);  --acc-weak:var(--acc-green-weak);  --acc-weak2:var(--acc-green-weak2); }
.acc-pink  { --acc:var(--acc-pink);   --acc-weak:var(--acc-pink-weak);   --acc-weak2:var(--acc-pink-weak2); }
.acc-gray  { --acc:var(--acc-gray);   --acc-weak:var(--acc-gray-weak);   --acc-weak2:var(--acc-gray-weak2); }

/* (2) 텍스트 색만 */
.acc-text{ color:var(--acc) !important; }

/* (3) 약한 배경(칩/뱃지 배경) */
.acc-weak-bg{
  background:var(--acc-weak) !important;
  color:var(--acc) !important;
}

/* (4) 진한 배경(CTA 버튼 등) */
.acc-solid-bg{
  background:var(--acc) !important;
  color:#fff !important;
}

/* (5) 테두리(아웃라인 버튼) */
.acc-border{
  border:1px solid color-mix(in srgb, var(--acc) 30%, transparent) !important;
}

/* (6) 아웃라인 버튼 세트 (흰 배경 + 컬러 테두리 + 컬러 텍스트) */
.acc-outline-btn{
  background:#fff !important;
  color:var(--acc) !important;
  border:1px solid var(--acc) !important;
}

/* (7) 뱃지(동일 모양 유지용) */
.acc-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}







   .jd-app{
      min-width:var(--jd-min);
      max-width:var(--jd-max);
      margin:0 auto;
      min-height:100vh;
      background:var(--mtl-bg);
      position:relative;
    }

    /* ===== HERO (Touch Slide) — 정사각형 + 센터 cover ===== */
    .jd-hero{
      position:relative;
      width:100%;
      overflow:hidden;
      background:#101018;
      margin-bottom:30px;
    }
    .jd-hero-swiper{
      width:100%;
      aspect-ratio:1 / 1;
      height:auto;
    }
    .jd-hero-swiper .swiper-wrapper,
    .jd-hero-swiper .swiper-slide{
      height:100%;
    }
    .jd-hero .swiper-slide img{
      width:100%;
      height:100%;
      object-fit:cover;
      object-position:center center;
      display:block;
    }

    .jd-hero-controls{
      position:absolute;
      left:0; right:0; top:0;
      padding:12px 12px 0 12px;
      display:flex;
      justify-content:space-between;
      z-index:5;
      pointer-events:none;
    }
    .jd-hero-left,
    .jd-hero-right{
      display:flex;
      gap:10px;
      pointer-events:auto;
    }

    /* view.css의 mtl-icon-btn 감각(작고 둥글고 은은) */
    .jd-icon-btn{
      width:38px;
      height:38px;
      border:1px solid rgba(255,255,255,.18);
      background:rgba(255,255,255,.14);
      color:#fff;
      border-radius:12px;
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      box-shadow:none;
      -webkit-tap-highlight-color: transparent;
      backdrop-filter: blur(10px);
    }
    .jd-icon-btn i{
      font-size:16px;
      opacity:.95;
    }

    .jd-hero-count{
      position:absolute;
      right:12px;
      bottom:12px;
      z-index:5;
      background:rgba(20,19,24,.55);
      color:#fff;
      padding:4px 8px;
      border-radius:999px;
      font-size:11px;
      font-weight:900;
      letter-spacing:-0.1px;
    }

    .jd-hero .swiper-pagination{
      bottom:10px !important;
      left:12px !important;
      width:auto !important;
    }
    .jd-hero .swiper-pagination-bullet{
      width:6px; height:6px;
      opacity:.35;
    }
    .jd-hero .swiper-pagination-bullet-active{
      opacity:1;
      background:#fff;
    }

    /* ===== Content ===== */
    .jd-content{
      padding:14px 0 0 0; /* view.css는 좌우 패딩을 최소화하는 편 */
    }

    /* ===== Top Summary Card ===== */
    .jd-summary{
      margin-top:-20px;
      background:var(--mtl-card);
      border:1px solid var(--mtl-border2);
      border-radius:var(--mtl-radius-sm);
      box-shadow:var(--mtl-shadow2);
      padding:14px;
      position:relative;
      z-index:2;
    }

    .jd-badges{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      margin-bottom:10px;
    }
    .jd-badge{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      white-space:nowrap;
      font-size:12px;
      font-weight:950;
      letter-spacing:-0.1px;
      padding:5px 8px;
      border-radius:10px;
      border:1px solid var(--mtl-border);
      background:#fff;
      color:var(--mtl-sub);
    }
    .jd-badge--elite{
      background:var(--mtl-primary-weak);
      border-color:rgba(122,79,230,.25);
      color:var(--mtl-primary);
    }
    .jd-badge--cancel{
      background:rgba(23,201,100,.12);
      border-color:rgba(23,201,100,.25);
      color:var(--jd-success);
    }

    .jd-title{
      margin:0;
      font-size:18px;
      font-weight:1000;
      letter-spacing:-0.2px;
      line-height:1.25;
      color:var(--mtl-text);
    }

    .jd-location{
      margin-top:8px;
      display:flex;
      align-items:flex-start;
      gap:8px;
      color:var(--mtl-sub);
    }
    .jd-location i{
      margin-top:2px;
      font-size:14px;
      color:var(--mtl-primary);
      background:var(--mtl-primary-weak);
      border:1px solid rgba(122,79,230,.22);
      width:22px; height:22px;
      border-radius:8px;
      display:flex;
      align-items:center;
      justify-content:center;
      flex:0 0 auto;
    }
    /* ✅ 주소 + 복사버튼 한 줄 정렬 */
    .jd-location-row{
      display:flex;
      align-items:center;
      gap:8px;
      width:100%;
      min-width:0;
    }

    
    /* ✅ 주소 텍스트가 길어도 버튼이 밀리지 않도록 */
    .jd-location-main{
      font-size:13px;
      font-weight:900;
      line-height:1.45;
      letter-spacing:-0.1px;
      flex:1 1 auto;
      min-width:0;
      /* 한 줄 유지 + 말줄임(원하면 유지) */
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    /* ✅ 주소복사 버튼 스타일 (프로젝트 톤에 맞춰 가볍게) */
    .jd-copy-btn{
      flex:0 0 auto;
      border:1px solid var(--mtl-border2);
      background:#fff;
      color:var(--mtl-sub);
      font-size:12px;
      font-weight:900;
      padding:5px 8px;
      border-radius:10px;
      cursor:pointer;
      white-space:nowrap;
    }
    .jd-copy-btn:hover {
      color: var(--mtl-text, #333);
      border-color: var(--mtl-text, #555);
      background: rgba(0,0,0,0.04);
    }    
    .jd-copy-btn:active{
      transform:translateY(1px);
    }
    .jd-location-sub{
      display:block;
      margin-top:2px;
      font-size:12px;
      font-weight:850;
      color:var(--mtl-muted);
      line-height:1.45;
    }

    /* 소형 복사 버튼 스타일 */
    .jd-copy-btn-sm {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      padding: 1px 6px;
      font-size: 10px;
      font-weight: 600;
      color: var(--mtl-sub, #888);
      background: transparent;
      border: 1px solid var(--mtl-border2, #bbb);
      border-radius: 4px;
      cursor: pointer;
      white-space: nowrap;
      line-height: 1.6;
      vertical-align: middle;
      flex-shrink: 0;
      transition: color 0.15s, border-color 0.15s, background 0.15s;
    }
    .jd-copy-btn-sm:hover {
      color: var(--mtl-text, #333);
      border-color: var(--mtl-text, #555);
      background: rgba(0,0,0,0.04);
    }
    .jd-copy-btn-sm i {
      font-size: 9px;
    }
    /* 지번/우편/영문 주소 행 레이아웃 */
    .jd-location-sub-row {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-top: 2px;
    }
    .jd-location-sub-row .jd-location-sub {
      margin-top: 0;
    }


    .jd-rating-row{
      margin-top:12px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding-top:12px;
      border-top:1px solid var(--mtl-border2);
    }
    .jd-rating-left{
      width:100%;          /* ✅ 왼쪽 영역 자체를 100% */
      flex:1;              /* ✅ row 안에서 남는 폭을 가져감 */
      min-width:0;         /* ✅ flex 아이템 overflow 방지 핵심 */
    }
    .jd-star-badge{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:3px 6px;
      border-radius:999px;
      background:rgba(255,176,32,.14);
      border:1px solid rgba(255,176,32,.22);
      color:#6a4a00;
      font-size:12px;
      font-weight:1000;
      white-space:nowrap;
    }
    .jd-star-box{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:6px 10px;
      border-radius:10px;
      background:rgba(255,176,32,.14);
      border:1px solid rgba(255,176,32,.22);
      color:#6a4a00;
      font-size:12px;
      font-weight:1000;
      white-space:nowrap;
      flex:1;              /* ✅ 남는 공간 전부 차지 */
      min-width:0;         /* ✅ 긴 텍스트일 때 레이아웃 깨짐 방지 */
      width:100% !important;          /* width:100% 대신 flex로 제어(충돌 방지) */      
    }
    .jd-star-badge .jd-star-box i{
      font-size:12px;
      color:var(--jd-star);
      opacity:.95;
    }
    .jd-rating-count{
      font-size:12px;
      font-weight:900;
      color:var(--mtl-muted);
      white-space:nowrap;
    }
    .jd-link-inline{
      background:transparent;
      border:0;
      cursor:pointer;
      color:var(--mtl-muted);
      font-size:12px;
      font-weight:900;
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:6px 8px;
      border-radius:10px;
      user-select:none;
    }
    .jd-link-inline i{
      font-size:12px;
      opacity:.85;
    }



    
    /* ===== Sections (통일 카드 스타일) ===== */
    .jd-section{
      margin-top:12px;
      background:var(--mtl-card);
      border:1px solid var(--mtl-border2);
      border-radius:var(--mtl-radius-sm);
      box-shadow:var(--mtl-shadow2);
      overflow:hidden;
    }
    .jd-section-head{
      padding:14px 14px 10px 14px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    .jd-section-title{
      margin:0;
      font-size:16px;
      font-weight:1000;
      color:var(--mtl-text);
      letter-spacing:-0.2px;
      display:flex;
      align-items:center;
      gap:8px;
    }
    .jd-section-title .jd-ico{
      width:28px; height:28px;
      border-radius:10px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      background:var(--mtl-primary-weak);
      color:var(--mtl-primary);
      font-weight:1000;
      flex:0 0 auto;
    }
    .jd-section-more{
      border:0;
      background:transparent;
      color:var(--mtl-muted);
      font-size:12px;
      font-weight:900;
      cursor:pointer;
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:6px 8px;
      border-radius:10px;
      user-select:none;
      white-space:nowrap;
    }
    .jd-section-more i{ font-size:12px; opacity:.85; }

    .jd-section-body{
      padding:0 14px 14px 14px;
      color:#535353;
    }

    /* ===== Coupon ===== */
    .jd-coupon-row{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:10px;
    }
    .jd-coupon-text{
      font-size:14px;
      font-weight:1000;
      letter-spacing:-0.2px;
      line-height:1.35;
      color:var(--jd-danger);
    }
    .jd-coupon-text small{
      font-size:12px;
      font-weight:950;
      opacity:.95;
    }
    .jd-coupon-btn{
      border:1px solid rgba(122,79,230,.25);
      background:var(--mtl-primary-weak);
      color:var(--mtl-primary);
      border-radius:999px;
      padding:8px 12px;
      font-size:12px;
      font-weight:1000;
      cursor:pointer;
      display:inline-flex;
      align-items:center;
      gap:8px;
      white-space:nowrap;
      user-select:none;
    }
    .jd-coupon-btn i{ font-size:12px; opacity:.9; }
    .jd-coupon-desc{
      margin:8px 0 0 0;
      font-size:12px;
      font-weight:850;
      color:var(--mtl-muted);
      line-height:1.45;
    }

    /* ===== Datebar ===== */
    .jd-datebar{
      margin-top:12px;
      padding:12px 14px;
      background:rgba(20,19,24,.04);
      border:1px solid rgba(20,19,24,.06);
      border-radius:var(--mtl-radius-sm);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    .jd-date-item{
      display:inline-flex;
      align-items:center;
      gap:8px;
      font-size:12px;
      font-weight:1000;
      color:var(--mtl-sub);
      letter-spacing:-0.1px;
      min-width:0;
      white-space:nowrap;
    }
    .jd-date-item i{
      width:22px; height:22px;
      border-radius:8px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      background:#fff;
      border:1px solid var(--mtl-border2);
      color:var(--mtl-sub);
      font-size:12px;
      flex:0 0 auto;
    }

    /* ===== Room Cards ===== */
    .jd-room-row{
      margin-top:12px;
      display:flex;
      gap:10px;
    }
    .jd-room-card{
      flex:1;
      min-width:0;
      border:1px solid var(--mtl-border2);
      border-radius:var(--mtl-radius-sm);
      background:#fff;
      padding:12px;
      box-shadow:0 10px 18px rgba(18,18,22,.05);
    }
    .jd-room-type{
      font-size:12px;
      font-weight:1000;
      color:var(--mtl-muted);
      letter-spacing:-0.1px;
      margin-bottom:8px;
    }
    .jd-room-elite{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      white-space:nowrap;
      font-size:11px;
      font-weight:1000;
      padding:4px 8px;
      border-radius:999px;
      background:var(--mtl-primary-weak);
      border:1px solid rgba(122,79,230,.25);
      color:var(--mtl-primary);
      margin-bottom:10px;
    }
    .jd-room-coupon{
      display:block;
      margin:2px 0 10px 0;
      font-size:12px;
      font-weight:1000;
      color:var(--jd-danger);
      letter-spacing:-0.1px;
      line-height:1.35;
    }
    .jd-room-coupon i{ font-size:12px; margin-right:4px; opacity:.95; }
    .jd-room-price{
      margin:0;
      font-size:18px;
      font-weight:1000;
      letter-spacing:-0.2px;
      color:var(--mtl-text);
      line-height:1.15;
    }

    /* ===== Benefit Swiper ===== */
    .jd-benefit-swiper{
      width:100%;
      padding-bottom:18px;
    }
    .jd-benefit-card{
      background:rgba(20,19,24,.04);
      border:1px solid rgba(20,19,24,.06);
      border-radius:var(--mtl-radius-sm);
      padding:12px;
    }
    .jd-benefit-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-bottom:10px;
    }
    .jd-benefit-name{
      margin:0;
      font-size:13px;
      font-weight:1000;
      color:var(--mtl-text);
      letter-spacing:-0.1px;
    }
    .jd-benefit-logo{
      height:18px;
      width:auto;
      border-radius:6px;
      flex:0 0 auto;
    }
    .jd-benefit-list{
      margin:0;
      padding-left:18px;
      font-size:12px;
      font-weight:850;
      color:var(--mtl-sub);
      line-height:1.55;
    }
    .jd-benefit-list strong{ font-weight:1000; color:var(--mtl-text); }

    .jd-benefit-swiper .swiper-pagination{
      bottom:0 !important;
    }
    .jd-benefit-swiper .swiper-pagination-bullet{
      width:6px; height:6px;
      opacity:.3;
    }
    .jd-benefit-swiper .swiper-pagination-bullet-active{
      opacity:1;
      background:var(--mtl-primary);
    }

    /* ===== Facilities ===== */
    .jd-fac-row{
      display:flex;
      justify-content:space-between;
      gap:8px;
      padding-top:4px;
    }
    .jd-fac-item{
      width:56px;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:6px;
      user-select:none;
    }
    .jd-fac-ico{
      width:44px; height:44px;
      border-radius:999px;
      border:1px solid var(--mtl-border2);
      background:#fff;
      display:flex;
      align-items:center;
      justify-content:center;
      box-shadow:0 10px 18px rgba(18,18,22,.06);
      color:var(--mtl-sub);
    }
    .jd-fac-ico i{ font-size:18px; opacity:.85; }
    .jd-fac-label{
      font-size:11px;
      font-weight:950;
      color:var(--mtl-sub);
      letter-spacing:-0.1px;
      text-align:center;
      white-space:nowrap;
    }

    /* ===== Bullets ===== */
    .jd-bullets{
      margin:0;
      padding-left:18px;
      font-size:12px;
      font-weight:850;
      line-height:1.6;
      color:var(--mtl-sub);
    }

    /* ===== Location Map ===== */
    .jd-map-wrap{
      border-radius:var(--mtl-radius-md);
      overflow:hidden;
      border:1px solid var(--mtl-border2);
      background:#EDEDF5;
      position:relative;
      box-shadow:0 10px 18px rgba(18,18,22,.05);
    }
    .jd-map-img{
      width:100%;
      height:140px;
      object-fit:cover;
      display:block;
    }
    .jd-map-zoom{
      position:absolute;
      top:10px;
      right:10px;
      width:34px;
      height:34px;
      border-radius:999px;
      border:1px solid var(--mtl-border2);
      background:rgba(255,255,255,.92);
      backdrop-filter: blur(10px);
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:center;
      color:var(--mtl-sub);
      box-shadow:0 10px 18px rgba(18,18,22,.06);
    }
    .jd-map-zoom i{ font-size:14px; opacity:.85; }

    .jd-address-row{
      display:flex;
      align-items:center;
      gap:10px;
      margin-top:12px;
    }
    .jd-addr-ico{
      width:22px; height:22px;
      border-radius:8px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      background:var(--mtl-primary-weak);
      border:1px solid rgba(122,79,230,.22);
      color:var(--mtl-primary);
      font-size:12px;
      flex:0 0 auto;
    }
    .jd-address-text{
      font-size:13px;
      font-weight:1000;
      color:var(--mtl-text);
      letter-spacing:-0.1px;
      min-width:0;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }


    /* ===== Notice Card ===== */
    .jd-notice-card{
      background:rgba(20,19,24,.04);
      border:1px solid rgba(20,19,24,.06);
      border-radius:var(--mtl-radius-sm);
      padding:12px;
    }
    .jd-notice-title{
      display:flex;
      align-items:center;
      gap:8px;
      margin:0 0 6px 0;
      font-size:13px;
      font-weight:1000;
      color:var(--mtl-text);
      letter-spacing:-0.1px;
    }
    .jd-notice-title i{
      width:22px; height:22px;
      border-radius:8px;
      display:flex;
      align-items:center;
      justify-content:center;
      background:rgba(23,201,100,.12);
      border:1px solid rgba(23,201,100,.22);
      color:var(--jd-success);
      font-size:12px;
      flex:0 0 auto;
    }
    .jd-notice-desc{
      margin:0;
      font-size:12px;
      font-weight:850;
      color:var(--mtl-sub);
      line-height:1.55;
    }

    /* ===== Reviews ===== */
    .jd-review-top{
      display:flex;
      align-items:center;
      gap:8px;
      margin-bottom:8px;
      min-width:0;
    }
    .jd-review-badge{
      background:rgba(255,59,92,.12);
      border:1px solid rgba(255,59,92,.20);
      color:var(--jd-danger);
      font-size:11px;
      font-weight:1000;
      padding:4px 8px;
      border-radius:999px;
      white-space:nowrap;
    }
    .jd-review-user{
      font-size:12px;
      font-weight:1000;
      color:var(--mtl-text);
      min-width:0;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .jd-review-meta{
      font-size:11px;
      font-weight:900;
      color:var(--mtl-muted);
      white-space:nowrap;
    }
    .jd-review-menu{
      margin-left:auto;
      border:0;
      background:transparent;
      color:var(--mtl-muted);
      cursor:pointer;
      padding:6px 8px;
      border-radius:10px;
      user-select:none;
    }
    .jd-review-menu i{ font-size:16px; opacity:.8; }

    .jd-review-stars{
      display:flex;
      align-items:center;
      gap:2px;
      margin-bottom:10px;
    }
    .jd-review-stars i{ font-size:12px; color:var(--jd-star); opacity:.95; }
    .jd-review-date{
      margin-left:8px;
      font-size:11px;
      font-weight:900;
      color:var(--mtl-muted);
      white-space:nowrap;
    }

    .jd-review-imgs{
      display:flex;
      gap:10px;
      overflow-x:auto;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-x pan-y;
      padding-bottom:2px;
    }
    .jd-review-imgs::-webkit-scrollbar{ display:none; }
    .jd-review-img{
      width:180px;
      height:140px;
      object-fit:cover;
      border-radius:var(--mtl-radius-sm);
      border:1px solid rgba(20,19,24,.08);
      background:#eee;
      flex:0 0 auto;
    }

    .jd-review-roomtype{
      margin-top:12px;
      font-size:12px;
      font-weight:1000;
      color:var(--mtl-muted);
      letter-spacing:-0.1px;
    }

    .jd-review-text{
      margin-top:10px;
      font-size:12px;
      font-weight:850;
      color:var(--mtl-sub);
      line-height:1.6;
    }
    .jd-more-inline{
      border:0;
      background:transparent;
      color:var(--mtl-muted);
      font-size:12px;
      font-weight:1000;
      cursor:pointer;
      padding:0;
      margin-left:6px;
      user-select:none;
    }

    .jd-reply{
      margin-top:12px;
      background:rgba(20,19,24,.04);
      border:1px solid rgba(20,19,24,.06);
      border-radius:var(--mtl-radius-sm);
      padding:12px;
    }
    .jd-reply-head{
      font-size:11px;
      font-weight:1000;
      color:var(--mtl-muted);
      margin-bottom:6px;
    }
    .jd-reply-head span{
      margin-left:8px;
      color:rgba(20,19,24,.35);
      font-weight:1000;
    }
    .jd-reply-text{
      margin:0;
      font-size:12px;
      font-weight:850;
      color:var(--mtl-sub);
      line-height:1.6;
    }

    .jd-helpful{
      margin-top:12px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    .jd-helpful-text{
      font-size:12px;
      font-weight:900;
      color:var(--mtl-sub);
    }
    .jd-like-btn{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border-radius:999px;
      border:1px solid var(--mtl-border);
      background:#fff;
      box-shadow:0 10px 18px rgba(18,18,22,.06);
      cursor:pointer;
      color:var(--mtl-sub);
      font-size:12px;
      font-weight:1000;
      user-select:none;
      white-space:nowrap;
    }
    .jd-like-btn i{ font-size:13px; opacity:.85; }

    /* ===== Contact / Seller ===== */
    .jd-action-row{
      display:flex;
      gap:10px;
      margin-top:10px;
    }
    .jd-action-btn{
      flex:1;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      padding:12px 12px;
      border-radius:var(--mtl-radius-sm);
      border:1px solid var(--mtl-border);
      background:#fff;
      color:var(--mtl-sub);
      font-size:13px;
      font-weight:1000;
      cursor:pointer;
      user-select:none;
      box-shadow:0 10px 18px rgba(18,18,22,.05);
    }
    .jd-action-btn i{ font-size:14px; opacity:.85; }

    .jd-action-btn--primary{
      background:var(--mtl-primary);
      border-color:rgba(122,79,230,.50);
      color:#fff;
      box-shadow:0 16px 28px rgba(122,79,230,.22);
    }
    .jd-action-btn--primary i{ opacity:1; }

    /* ===== Footer note ===== */
    .jd-footer-note{
      margin:12px 0 0 0;
      padding:12px 14px 14px 14px;
      background:rgba(20,19,24,.04);
      border-top:1px solid rgba(20,19,24,.06);
      font-size:11px;
      line-height:1.55;
      color:rgba(20,19,24,.45);
      font-weight:850;
    }

    /* ===== Toast ===== */
    .jd-toast{
      position:fixed;
      left:50%;
      transform:translateX(-50%);
      bottom:18px;
      width:calc(100% - 28px);
      max-width:420px;
      background:rgba(20,19,24,.88);
      color:#fff;
      border-radius:14px;
      padding:10px 12px;
      font-size:12px;
      font-weight:900;
      letter-spacing:-0.1px;
      display:none;
      z-index:100;
      box-shadow:0 18px 28px rgba(0,0,0,.18);
    }

    /* ===== Modal ===== */
    .jd-modal-dim{
      position:fixed;
      inset:0;
      background:rgba(0,0,0,0.45);
      display:none;
      z-index:200;
    }
    .jd-modal{
      position:fixed;
      left:50%;
      transform:translateX(-50%);
      bottom:-100%;
      width:100%;
      max-width:var(--jd-max);
      background:#fff;
      border-top-left-radius:18px;
      border-top-right-radius:18px;
      box-shadow:0 -6px 24px rgba(0,0,0,0.18);
      z-index:210;
      transition:bottom 0.28s ease;
      overflow:hidden;
    }
    .jd-modal.open{ bottom:0; }
    .jd-modal-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:14px 14px 10px 14px;
      border-bottom:1px solid rgba(20,19,24,.08);
      background:#fff;
    }
    .jd-modal-title{
      margin:0;
      font-size:14px;
      font-weight:1000;
      letter-spacing:-0.1px;
      color:var(--mtl-text);
    }
    .jd-modal-close{
      width:38px;
      height:38px;
      border-radius:12px;
      border:1px solid rgba(20,19,24,.08);
      background:rgba(20,19,24,.04);
      cursor:pointer;
      color:var(--mtl-text);
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .jd-modal-close i{ font-size:16px; opacity:.85; }
    .jd-modal-body{
      max-height:70vh;
      overflow:auto;
      padding:14px;
      background:#fff;
    }
    .jd-seller-table{
      width:100%;
      border-collapse:collapse;
      border-radius:14px;
      overflow:hidden;
      border:1px solid rgba(20,19,24,.08);
    }
    .jd-seller-table tr{ border-bottom:1px solid rgba(20,19,24,.08); }
    .jd-seller-table tr:last-child{ border-bottom:none; }
    .jd-seller-table td{
      padding:12px 12px;
      font-size:12px;
      line-height:1.45;
      vertical-align:top;
      color:var(--mtl-sub);
      font-weight:850;
    }
    .jd-seller-table td.jd-seller-label{
      width:92px;
      color:var(--mtl-muted);
      font-weight:1000;
      background:rgba(20,19,24,.03);
    }
    .jd-seller-note{
      margin-top:12px;
      background:rgba(20,19,24,.04);
      border:1px solid rgba(20,19,24,.06);
      border-radius:14px;
      padding:12px;
      font-size:12px;
      line-height:1.6;
      color:var(--mtl-sub);
      font-weight:850;
    }
    .jd-seller-note .jd-hl{
      color:var(--jd-danger);
      font-weight:1000;
    }

    /* Focus */
    a:focus-visible,button:focus-visible{
      outline:2px solid rgba(122,79,230,.55);
      outline-offset:2px;
      border-radius:12px;
    }