@charset "utf-8";

/* ============================================================
   동해옛날된장 모바일 테마 오버라이드
   ============================================================ */

/* 폰트 */
body {
  font-family: 'Noto Sans KR','Malgun Gothic',dotum,sans-serif !important;
  background: #f7f2ea !important;
}

/* ============================================================
   헤더
   ============================================================ */
#hd {
  background: #2d2210 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}

#hd_wr {
  display: flex !important;
  align-items: center !important;
  height: 54px !important;
  padding: 0 6px !important;
  position: relative !important;
}

/* 햄버거 버튼 */
#btn_hdcate {
  width: 44px; height: 54px;
  background: none !important;
  border: 0 !important;
  padding: 0 10px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 5px !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
}
#btn_hdcate span {
  display: block !important;
  width: 22px !important; height: 2px !important;
  background: #fff !important;
  border-radius: 1px !important;
}

/* 로고 - 중앙 */
#logo {
  flex: 1 !important;
  text-align: center !important;
  padding: 0 !important;
}
#logo a { display: inline-block !important; }
#logo img {
  height: 34px !important;
  width: auto !important;
  vertical-align: middle !important;
}

/* 우측 버튼 */
#hd_btn_right {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}
#btn_hdsch {
  width: 40px !important; height: 54px !important;
  background: none !important;
  border: 0 !important;
  color: #fff !important;
  font-size: 17px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#btn_hdcart {
  width: 40px !important; height: 54px !important;
  color: #fff !important;
  font-size: 17px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
}
#btn_hdcart .cart-count {
  position: absolute !important;
  top: 8px !important; right: 2px !important;
  background: #c0392b !important;
  color: #fff !important;
  font-size: 10px !important;
  min-width: 16px !important; height: 16px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 4px !important;
}

/* 검색창 (슬라이드 다운) */
#hd_sch {
  display: none;
  background: #3a2810 !important;
  padding: 10px 12px !important;
  position: relative !important;
}
#hd_sch input {
  width: 100% !important;
  height: 38px !important;
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(201,168,76,0.4) !important;
  border-radius: 3px !important;
  color: #fff !important;
  padding: 0 72px 0 12px !important;
  font-size: 14px !important;
}
#hd_sch input::placeholder { color: rgba(255,255,255,0.4) !important; }
.sch_submit_btn {
  position: absolute !important;
  top: 10px !important; right: 48px !important;
  width: 38px !important; height: 38px !important;
  background: #8b6914 !important;
  border: 0 !important; color: #fff !important;
  border-radius: 0 3px 3px 0 !important;
  font-size: 15px !important; cursor: pointer !important;
}
.sch_close_btn {
  position: absolute !important;
  top: 10px !important; right: 12px !important;
  width: 32px !important; height: 38px !important;
  background: none !important;
  border: 0 !important; color: rgba(255,255,255,0.6) !important;
  font-size: 18px !important; cursor: pointer !important;
}

/* ============================================================
   메인 슬라이더
   ============================================================ */
#m_main_visual {
  width: 100% !important;
  overflow: hidden !important;
  line-height: 0 !important;
}
#m_css_slider {
  width: 100% !important;
  height: 240px !important;
  position: relative !important;
  overflow: hidden !important;
}
.m_slides { width: 100%; height: 100%; position: relative; }

.m_slide {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  opacity: 0; transition: opacity 0.7s ease;
  overflow: hidden;
}
.m_slide.on { opacity: 1; z-index: 2; }

.m_slide1 { background: linear-gradient(125deg,#3c2810 0%,#6b4518 50%,#4a2e10 100%); }
.m_slide2 { background: linear-gradient(125deg,#f0e4c0 0%,#d4b870 60%,#c0a050 100%); }
.m_slide3 { background: linear-gradient(125deg,#2a1808 0%,#5c3820 50%,#3c2410 100%); }

.m_slide_txt {
  position: relative; z-index: 3;
  padding: 0 24px; flex: 1;
}
.m_slide_cn {
  font-size: 13px; font-weight: 700; letter-spacing: 4px;
  margin-bottom: 4px;
}
.m_slide1 .m_slide_cn { color: #f5d78a; }
.m_slide2 .m_slide_cn { color: #8b6914; }
.m_slide3 .m_slide_cn { color: #f5d78a; }

.m_slide_title {
  font-family: 'Noto Serif KR',serif;
  font-size: 28px; font-weight: 900;
  letter-spacing: -1.5px; line-height: 1.1;
  margin-bottom: 6px;
}
.m_slide1 .m_slide_title { color: #f5e0a0; }
.m_slide2 .m_slide_title { color: #3c1e00; }
.m_slide3 .m_slide_title { color: #f5e0a0; }

.m_slide_sub {
  font-size: 12px; margin-bottom: 16px; line-height: 1.5;
}
.m_slide1 .m_slide_sub { color: rgba(245,224,160,0.75); }
.m_slide2 .m_slide_sub { color: #7a5030; }
.m_slide3 .m_slide_sub { color: rgba(245,224,160,0.75); }

.m_slide_btn {
  display: inline-block;
  padding: 8px 18px;
  font-size: 12px; font-weight: 700;
  border-radius: 2px;
  text-decoration: none;
}
.m_slide1 .m_slide_btn { background: #c9a84c; color: #3c1e00; }
.m_slide2 .m_slide_btn { background: #5c3d1e; color: #fff; }
.m_slide3 .m_slide_btn { background: #c9a84c; color: #3c1e00; }

/* 항아리 장식 */
.m_deco_onggi { position: absolute; right: -10px; bottom: -10px; }
.m_onggi_rim {
  width: 80px; height: 8px;
  background: linear-gradient(to bottom,#9a6040,#5a2e10);
  margin: 0 auto; border-radius: 50%;
}
.m_onggi_neck {
  width: 60px; height: 16px;
  background: linear-gradient(to bottom,#6a3a18,#3a1808);
  margin: 0 auto; border-radius: 4px 4px 0 0;
}
.m_onggi_body {
  width: 110px; height: 110px;
  background: radial-gradient(ellipse at 35% 28%,#9a7050,#3d1e08,#6b3a18);
  border-radius: 30% 30% 50% 50% / 20% 20% 40% 40%;
  position: relative; overflow: hidden;
  box-shadow: 4px 6px 20px rgba(0,0,0,0.4);
}
.m_onggi_shine {
  position: absolute; top: 10px; left: 10px;
  width: 24px; height: 52px;
  background: rgba(255,255,255,0.09);
  border-radius: 50%; transform: rotate(-10deg);
}

/* 슬라이더 도트/버튼 */
.m_slide_dots {
  position: absolute; bottom: 10px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 6px; z-index: 10;
}
.m_dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,0.35);
  cursor: pointer; transition: background 0.2s, transform 0.2s;
}
.m_dot.on { background: #c9a84c; transform: scale(1.3); }
.m_sprev,.m_snext {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 50%; color: #fff; font-size: 13px;
  cursor: pointer; z-index: 10;
  display: flex; align-items: center; justify-content: center;
}
.m_sprev { left: 8px; }
.m_snext { right: 8px; }

/* ============================================================
   인사말 + 상품소개 배너 (2열)
   ============================================================ */
.m_banner_row {
  display: flex !important;
  gap: 8px !important;
  padding: 10px 10px 0 !important;
  background: #fff !important;
}
.m_banner_card {
  flex: 1; height: 130px;
  border-radius: 4px; overflow: hidden;
  position: relative; display: flex;
  align-items: flex-end; cursor: pointer;
}
.m_banner_type1 { background: linear-gradient(135deg,#f5e4c0,#d4b06a); }
.m_banner_type2 { background: linear-gradient(135deg,#3c2a0e,#6b4515); }

.m_banner_food { position: absolute; right: 8px; bottom: 0; }
.m_food_a {
  width: 70px; height: 56px;
  background: radial-gradient(ellipse at 30% 25%,#c8a030,#7a4f10);
  border-radius: 40% 50% 60% 40% / 50% 40% 60% 50%;
  box-shadow: 1px 2px 8px rgba(0,0,0,0.2);
}
.m_food_b {
  width: 70px; height: 50px;
  background: linear-gradient(135deg,#c49a3e,#8b6010);
  border-radius: 4px;
  box-shadow: 1px 2px 8px rgba(0,0,0,0.3);
}
.m_banner_txt { position: relative; z-index: 2; padding: 12px 14px; }
.m_banner_txt h3 {
  font-size: 15px; font-weight: 900;
  margin-bottom: 3px;
  font-family: 'Noto Serif KR',serif;
}
.m_banner_type1 .m_banner_txt h3 { color: #3c1e00; }
.m_banner_type2 .m_banner_txt h3 { color: #f5d78a; }
.m_banner_txt p { font-size: 10px; margin-bottom: 8px; line-height: 1.4; }
.m_banner_type1 .m_banner_txt p { color: #6b3e10; }
.m_banner_type2 .m_banner_txt p { color: rgba(245,215,138,0.8); }
.m_banner_btn {
  display: inline-block; padding: 4px 10px;
  font-size: 10px; font-weight: 700; border-radius: 2px;
}
.m_banner_type1 .m_banner_btn { background: #5c3d1e; color: #fff; }
.m_banner_type2 .m_banner_btn { background: #f5d78a; color: #3c1e00; }

/* ============================================================
   상품 섹션
   ============================================================ */
.m_sec_wrap {
  padding: 20px 10px 10px !important;
  background: #f7f2ea !important;
  border-bottom: 1px solid #e8dcc8 !important;
}
.m_sec_white { background: #fff !important; }
.m_sec_head { margin-bottom: 12px !important; }
.m_sec_title {
  font-size: 18px !important; font-weight: 900 !important;
  color: #2a1a00 !important;
  font-family: 'Noto Serif KR',serif !important;
  display: inline !important;
}
.m_sec_desc {
  font-size: 11px !important; color: #999 !important;
  margin-left: 6px !important;
}

/* 상품 카드 */
.m_sec_wrap .item_wrap {
  background: #fff !important;
  border: 1px solid #e8dcc8 !important;
  border-radius: 4px !important;
  margin-bottom: 8px !important;
  overflow: hidden !important;
}
.m_sec_wrap .item_wrap .item_name a { color: #333 !important; font-weight: 700 !important; }
.m_sec_wrap .item_price .price { color: #d32f2f !important; font-weight: 900 !important; }
.m_sec_wrap .item_price .cust_price { color: #aaa !important; text-decoration: line-through !important; }

/* ============================================================
   중간 브랜드 배너
   ============================================================ */
.m_mid_banner {
  width: 100% !important;
  min-height: 180px !important;
  background: linear-gradient(120deg,#f7efd8 0%,#e8d8b0 50%,#d4c090 100%) !important;
  border-top: 1px solid #d4b870 !important;
  border-bottom: 1px solid #d4b870 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 30px 16px !important;
}
.m_mid_onggi {
  position: absolute;
  left: -14px; bottom: -10px;
}
.m_mid_onggi_rim {
  width: 60px; height: 7px;
  background: linear-gradient(to bottom,#7a4020,#4a2010);
  margin: 0 auto; border-radius: 50%;
}
.m_mid_onggi_neck {
  width: 46px; height: 14px;
  background: linear-gradient(to bottom,#5a2e10,#3a1808);
  margin: 0 auto; border-radius: 4px 4px 0 0;
}
.m_mid_onggi_body {
  width: 88px; height: 88px;
  background: radial-gradient(ellipse at 35% 30%,#8b6040,#3d1e08,#6b3a18);
  border-radius: 30% 30% 50% 50% / 20% 20% 40% 40%;
  position: relative; overflow: hidden;
  box-shadow: 3px 5px 16px rgba(0,0,0,0.3);
}
.m_mid_onggi_shine {
  position: absolute; top: 8px; left: 8px;
  width: 20px; height: 40px;
  background: rgba(255,255,255,0.09);
  border-radius: 50%; transform: rotate(-10deg);
}
.m_mid_txt {
  position: relative; z-index: 2;
  text-align: center;
  padding-left: 70px;
}
.m_mid_txt p {
  font-size: 11px; color: #7a5030;
  line-height: 1.6; margin-bottom: 6px;
  font-family: 'Noto Serif KR',serif;
}
.m_mid_txt h2 {
  font-family: 'Noto Serif KR',serif;
  font-size: 26px; font-weight: 900;
  color: #3c1e00; letter-spacing: -1.5px;
  margin-bottom: 14px;
}
.m_mid_btn {
  display: inline-block;
  padding: 8px 20px;
  background: #3c3c3c; color: #fff;
  border-radius: 2px; font-size: 12px;
  font-weight: 700;
}

/* ============================================================
   고객센터 + 계좌정보
   ============================================================ */
.m_info_section {
  display: flex !important;
  gap: 8px !important;
  padding: 12px 10px !important;
  background: #f5f0e6 !important;
  border-top: 1px solid #e0d4b4 !important;
  border-bottom: 1px solid #e0d4b4 !important;
}
.m_info_box {
  flex: 1;
  background: #fff;
  border: 1px solid #e0d4b4;
  border-radius: 4px;
  padding: 12px 12px;
}
.m_info_label {
  display: inline-block;
  font-size: 9px; font-weight: 700;
  padding: 2px 8px; border-radius: 2px;
  margin-bottom: 8px; letter-spacing: 0.3px;
}
.m_label_dark { background: #222; color: #fff; }
.m_label_gold  { background: #8b6914; color: #fff; }
.m_cs_sub { font-size: 10px; color: #888; margin-bottom: 4px; }
.m_cs_tl  { font-size: 10px; color: #555; margin-bottom: 1px; }
.m_cs_tel { font-size: 18px; font-weight: 900; color: #c0392b; letter-spacing: -0.5px; line-height: 1.2; margin-bottom: 3px; }
.m_cs_note{ font-size: 9px; color: #aaa; margin-top: 6px; }
.m_nh_logo {
  display: inline-block;
  background: #2060b0; color: #fff;
  font-size: 10px; font-weight: 900;
  padding: 2px 7px; border-radius: 2px;
  margin-bottom: 6px;
}
.m_acc_num { font-size: 15px; font-weight: 900; color: #222; letter-spacing: -0.3px; margin-bottom: 3px; }
.m_acc_name{ font-size: 10px; color: #666; }

/* ============================================================
   빠른 메뉴 (2×3 그리드)
   ============================================================ */
.m_quick_grid {
  display: grid !important;
  grid-template-columns: repeat(3,1fr) !important;
  gap: 2px !important;
  background: #e0d4b4 !important;
  border-top: 2px solid #e0d4b4 !important;
}
.m_quick_item {
  background: #fff !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px 6px !important;
  text-decoration: none !important;
  gap: 5px !important;
}
.m_quick_item:active { background: #fdf5e0 !important; }
.m_qi_ico   { font-size: 22px; line-height: 1; }
.m_qi_label { font-size: 11px; color: #555; font-weight: 500; }

/* ============================================================
   모바일 푸터
   ============================================================ */
#ft {
  background: #2d2210 !important;
  padding: 20px 14px 30px !important;
  margin: 0 !important;
}
.m_ft_links {
  display: flex !important;
  gap: 0 !important;
  flex-wrap: wrap !important;
  margin-bottom: 14px !important;
  border-bottom: 1px solid #4a3820 !important;
  padding-bottom: 12px !important;
}
.m_ft_links a {
  font-size: 11px !important; color: #d4b870 !important;
  padding: 0 10px !important;
  border-right: 1px solid #4a3820 !important;
  line-height: 14px !important;
}
.m_ft_links a:first-child { padding-left: 0 !important; }
.m_ft_links a:last-child { border-right: 0 !important; }
.m_ft_logo {
  text-align: center !important;
  margin-bottom: 12px !important;
}
.m_ft_logo img { height: 36px; width: auto; }
.m_ft_company p {
  font-size: 11px !important;
  color: #e3e3e3 !important;
  line-height: 1.9em !important;
  text-align: center !important;
}
.m_ft_company p b { color: #fff !important; }
.m_ft_copy {
  margin-top: 14px !important;
  padding-top: 12px !important;
  border-top: 1px solid #4a3820 !important;
  text-align: center !important;
  font-size: 10px !important;
  color: #7a6840 !important;
}
.m_ft_pc_btn {
  display: block !important;
  margin-top: 12px !important;
  text-align: center !important;
  font-size: 11px !important;
  color: #8b6914 !important;
  text-decoration: underline !important;
}

/* 접속자집계 푸터 내 */
#ft #visit { padding: 0 !important; margin-top: 14px !important; }
#ft #visit h2 { color: #d4b870 !important; font-size: 13px !important; text-align: center !important; margin-bottom: 8px !important; }
#ft #visit dl { padding: 6px 0 !important; }
#ft #visit dt { color: #e3e3e3 !important; }
#ft #visit dd strong { color: #fff !important; }