/* ============================================================
   리앤양 디자인 개선 — Impeccable Design System v1.0
   /typeset /colorize /arrange /adapt /distill /animate /clarify /polish
   ============================================================ */

/* ---- CSS 변수 (색상·타이포·간격 시스템) ---- */
:root {
  --la-charcoal:      #1d1d1f;
  --la-charcoal-2:    #272729;
  --la-charcoal-soft: #3a3a3c;
  --la-cream:         #f5f5f7;
  --la-cream-dark:    #ededf2;
  --la-white:         #ffffff;
  --la-text:          #1d1d1f;
  --la-text-muted:    #6e6e73;
  --la-accent:        #e31b23;
  --la-accent-hov:    #b5121b;
  --la-accent-dark:   #ff453a;
  --la-accent-light:  rgba(227, 27, 35, 0.10);
  --la-border:        #d2d2d7;
  --la-border-light:  #e8e8ed;
  --la-font-body:     'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  --la-font-head:     'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  --la-radius:        6px;
  --la-radius-lg:     8px;
  --la-shadow-sm:     0 1px 4px rgba(0,0,0,0.07);
  --la-shadow-md:     0 4px 16px rgba(0,0,0,0.09);
  --la-shadow-lg:     3px 5px 30px rgba(0,0,0,0.22);
}


/* ================================================================
   /typeset — 폰트 시스템 전면 개선
   구형 기본 폰트 제거, Pretendard Variable 통합 적용 (본문 + 헤딩)
   ================================================================ */

body {
  font-family: var(--la-font-body) !important;
  color: var(--la-text) !important;
  background-color: var(--la-cream) !important;
  font-size: 15px !important;
  line-height: 1.62 !important;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 헤딩 — Apple식 타이트한 한글 산세리프 톤 */
h1, h2, h3, h4,
.section-heading,
.card-header,
.notice-title {
  font-family: var(--la-font-head) !important;
  letter-spacing: -0.025em;
  line-height: 1.35;
}

/* 영문/숫자까지 같은 스택으로 통일 */
.en, .pagination, .btn,
.item-col .wr-price,
.item-col .item-price { font-family: var(--la-font-body) !important; }

a       { color: var(--la-text); transition: color 0.18s ease; }
a:hover { color: var(--la-accent); text-decoration: none; }


/* ================================================================
   /colorize — 색상 시스템 전환
   순수 #000/#fff → Apple charcoal/gray, 강조색 → Lee&Yang red
   ================================================================ */

/* 전체 배경 크림으로 */
.wrapper,
body { background-color: var(--la-cream) !important; }

/* LNB (최상단 바) */
.at-lnb { background-color: var(--la-charcoal) !important; }

/* PC 헤더 */
.pc-header { background-color: var(--la-charcoal) !important; }
.pc-header .header-logo a {
  color: var(--la-white) !important;
  font-family: var(--la-font-head) !important;
  letter-spacing: 0.06em;
}
.pc-header .header-desc { color: rgba(255,255,255,0.7) !important; }

/* PC 메뉴 */
.pc-menu { background: var(--la-charcoal-2) !important; }
.pc-menu .nav-top .menu-a,
.pc-menu .nav-full .menu-a { background: var(--la-charcoal-2) !important; }

/* 서브메뉴 hover accent */
.pc-menu .nav-top .sub-1dli.on .sub-1da,
.pc-menu .nav-top .sub-1dli:hover .sub-1da,
.pc-menu .nav-mega .sub-1dli.on .sub-1da,
.pc-menu .nav-mega .sub-1dli:hover .sub-1da,
.pc-menu .nav-full .sub-1dli.on .sub-1da,
.pc-menu .nav-full .sub-1dli:hover .sub-1da {
  background: var(--la-accent) !important;
  border-color: var(--la-accent) !important;
}

/* 서브메뉴 보더 accent */
.pc-menu .nav-top .sub-1div,
.pc-menu .nav-mega .sub-1div,
.pc-menu .nav-full .menu-li:hover .sub-1div {
  border-top-color: var(--la-accent) !important;
}

/* 모바일 메뉴 active */
.m-menu .m-nav ul li.active a,
.m-menu .m-nav-sub ul li.active a { color: var(--la-accent) !important; font-weight: 700; }

/* 모바일 헤더 */
.m-header { background: var(--la-charcoal) !important; }

/* 우측 아이콘 메뉴 */
.pc-menu .nav-right { background: var(--la-charcoal-2) !important; }
.pc-menu .nav-right > ul > li > a:hover { background: var(--la-charcoal-soft) !important; }


/* ================================================================
   /arrange — 레이아웃 & 상품 카드 그리드 개선
   ================================================================ */

/* 메인 products-section 투명화 (크림 배경이 보이도록) */
.products-section {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
  border-radius: 0 !important;
}

/* 상품 카드 컨테이너 */
.item-col {
  position: relative;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 이미지 컨테이너 — 가죽 배경색 + 고정 비율 */
.item-col .wr-img {
  overflow: hidden;
  background: #ece8e1;
  border-radius: var(--la-radius) var(--la-radius) 0 0;
  border: 1px solid var(--la-border-light);
}

.item-col .wr-img img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  padding: 10px;
  transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* 상품명 — 세리프, 1줄 clamp */
.item-col strong,
.item-col .item-name,
.miso-shop-item .it-name {
  font-family: var(--la-font-head) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--la-charcoal) !important;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
  margin: 10px 0 4px;
}

/* /distill — 설명 텍스트 2줄 clamp */
.item-col .wr-text,
.item-col .item-desc,
.miso-shop-item .it-text {
  font-size: 11px !important;
  color: var(--la-text-muted) !important;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 6px;
}

/* 가격 — accent red */
.item-col .wr-price,
.item-col .it-price,
.miso-shop-item .it-price {
  font-weight: 700 !important;
  color: var(--la-accent) !important;
  font-size: 13px !important;
}

/* 별점 영역 */
.item-col .item-use,
.miso-shop-item .it-use {
  font-size: 11px;
  color: var(--la-text-muted);
  margin-top: 4px;
}

/* 카드 하단 정보 영역 */
.item-col .item-info {
  padding: 0 2px 8px;
  background: var(--la-white);
  border: 1px solid var(--la-border-light);
  border-top: none;
  border-radius: 0 0 var(--la-radius) var(--la-radius);
  padding: 8px 10px 10px;
}


/* ================================================================
   /animate — 상품 이미지 hover + 섹션 진입 애니메이션
   ================================================================ */

/* 이미지 scale + 오버레이 */
.is-pc .item-col:hover .wr-img img {
  transform: scale(1.07) !important;
}

/* 카드 전체 살짝 부상 */
.is-pc .item-col:hover {
  transform: translateY(-4px);
}

/* 섹션 진입 페이드업 */
@keyframes la-fade-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 초기 상태: 숨김 — IntersectionObserver가 la-visible 추가 시 재생 */
.la-anim {
  opacity: 0;
  transform: translateY(20px);
  transition: none;
}

.la-anim.la-visible {
  animation: la-fade-up 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.la-anim.la-visible.la-d1 { animation-delay: 0.05s; }
.la-anim.la-visible.la-d2 { animation-delay: 0.12s; }
.la-anim.la-visible.la-d3 { animation-delay: 0.19s; }
.la-anim.la-visible.la-d4 { animation-delay: 0.26s; }
.la-anim.la-visible.la-d5 { animation-delay: 0.33s; }
.la-anim.la-visible.la-d6 { animation-delay: 0.40s; }

/* 페이지 로드 시 기존 wr-img 트랜지션 덮어쓰기 */
.is-pc .item-col .wr-img { transition: none !important; }
.is-pc .post-col .wr-img { transition: none !important; }

/* 버튼 hover 화살표 */
.btn-custom::after {
  content: ' →';
  display: inline-block;
  transition: transform 0.2s ease;
}
.btn-custom:hover::after { transform: translateX(5px); }
.btn-custom { color: var(--la-accent) !important; font-weight: 700 !important; }
.btn-custom:hover { color: var(--la-accent-hov) !important; }


/* ================================================================
   /colorize — 정보 카드 색상 개선
   ================================================================ */

.card {
  background: var(--la-white) !important;
  border: 1px solid var(--la-border) !important;
  border-radius: var(--la-radius-lg) !important;
  box-shadow: var(--la-shadow-sm) !important;
  transition: box-shadow 0.25s ease, transform 0.25s ease !important;
}

.card:hover {
  box-shadow: var(--la-shadow-md) !important;
  transform: translateY(-3px) !important;
}

.card-header {
  background: var(--la-charcoal) !important;
  color: var(--la-white) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 13px 18px !important;
  border-bottom: 2px solid var(--la-accent) !important;
  border-radius: var(--la-radius-lg) var(--la-radius-lg) 0 0 !important;
  letter-spacing: -0.01em;
}

.notice-box {
  background: var(--la-white) !important;
  border: 1px solid var(--la-border) !important;
  border-left: 3px solid var(--la-accent) !important;
  border-radius: var(--la-radius-lg) !important;
  box-shadow: var(--la-shadow-sm);
}

.notice-title { color: var(--la-charcoal) !important; }
.notice-title i { color: var(--la-accent) !important; }

.info-icon {
  background: var(--la-charcoal) !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: var(--la-radius) !important;
  font-size: 0.95rem !important;
}

.info-label  { color: var(--la-text-muted) !important; font-size: 11px !important; text-transform: uppercase; letter-spacing: 0.04em; }
.info-value  { color: var(--la-charcoal) !important; font-size: 13px !important; font-weight: 600; }


/* ================================================================
   /clarify — 히어로 배너 카피 & CTA 개선
   ================================================================ */

.miso-title-body .miso-title-over {
  background: linear-gradient(
    105deg,
    rgba(28, 28, 28, 0.80) 0%,
    rgba(28, 28, 28, 0.45) 55%,
    transparent 100%
  ) !important;
}

/* 히어로 타이틀 */
.miso-title-body .title-tit {
  font-family: var(--la-font-head) !important;
  font-size: clamp(20px, 4.5vw, 42px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
  color: #fff !important;
  text-shadow: 0 2px 16px rgba(0,0,0,0.45);
  line-height: 1.2 !important;
}

/* 히어로 설명 텍스트 */
.miso-title-body .title-txt {
  font-family: var(--la-font-body) !important;
  font-size: clamp(12px, 1.6vw, 15px) !important;
  color: rgba(255,255,255,0.85) !important;
  line-height: 1.7 !important;
}

/* 히어로 CTA 버튼 */
.miso-title-body .title-btn,
.miso-title-body .title-btn a,
.miso-title-body .btn {
  background: var(--la-accent) !important;
  border-color: var(--la-accent) !important;
  color: #fff !important;
  border-radius: 2px !important;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 10px 22px !important;
  transition: background 0.2s ease, transform 0.2s ease !important;
}

.miso-title-body .title-btn:hover,
.miso-title-body .btn:hover {
  background: var(--la-accent-hov) !important;
  transform: translateY(-1px);
}


/* ================================================================
   /adapt — 모바일 반응형 최적화
   ================================================================ */

@media (max-width: 991px) {
  .item-col .wr-img img {
    aspect-ratio: 1 / 1;
    padding: 6px;
  }

  /* 모바일에서 상품명 2줄 허용 */
  .item-col strong,
  .item-col .item-name,
  .miso-shop-item .it-name {
    -webkit-line-clamp: 2;
    font-size: 12px !important;
  }

  /* 설명 텍스트 1줄로 압축 */
  .item-col .wr-text,
  .item-col .item-desc {
    -webkit-line-clamp: 1;
    font-size: 10px !important;
  }

  .section { padding: 28px 0 !important; }
  .grid-container { gap: 14px !important; }
  .card-body { padding: 14px !important; }
}

@media (max-width: 767px) {
  /* 배경 약간 더 진하게 */
  body { background-color: #ede9e2 !important; }

  /* 모바일 헤더 여백 */
  .m-header .header-logo a {
    font-size: 18px !important;
    letter-spacing: 0.06em;
    font-family: var(--la-font-head) !important;
    color: var(--la-white) !important;
  }

  /* 터치 타겟 44px 확보 */
  .m-header .header-icon a,
  .m-menu .m-icon a {
    min-height: 44px;
    min-width: 44px;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  /* 카드 패딩 */
  .card-header { padding: 11px 14px !important; font-size: 13px !important; }
  .card-body   { padding: 14px !important; }
  .info-icon   { width: 34px !important; height: 34px !important; margin-right: 10px !important; }
  .info-value  { font-size: 12px !important; }
  .notice-box  { padding: 16px !important; }

  .grid-container { gap: 12px !important; }
}

@media (max-width: 480px) {
  .at-container.w-main { padding: 0 12px !important; }
  .products-section,
  .section { padding: 20px 0 !important; }
}


/* ================================================================
   /polish — 디테일 마감
   ================================================================ */

/* 페이지 타이틀 바 */
.at-title {
  background-color: var(--la-charcoal) !important;
  border-bottom: 2px solid var(--la-accent) !important;
}
.at-title .page-title {
  color: var(--la-white) !important;
  font-family: var(--la-font-head) !important;
  font-weight: 700;
}
.at-title .page-desc { color: rgba(255,255,255,0.6) !important; }

/* 푸터 */
.at-footer .at-links { background-color: var(--la-charcoal) !important; }
.at-footer .at-links ul > li > a { color: rgba(255,255,255,0.55) !important; }
.at-footer .at-links ul > li > a:hover { color: var(--la-white) !important; }
.at-footer .at-copyright strong { color: var(--la-text) !important; }
.at-footer .at-about > li,
.at-footer .at-about > li > a { color: var(--la-text-muted) !important; }

/* 페이지네이션 */
.pagination li a { border-color: var(--la-border) !important; }
.pagination li.active a {
  background: var(--la-charcoal) !important;
  border-color: var(--la-charcoal) !important;
}

/* 폼 컨트롤 */
.form-control:focus {
  border-color: var(--la-accent) !important;
  box-shadow: 0 0 0 2px var(--la-accent-light) !important;
}

/* 버튼 기본 */
.btn-primary,
.btn-danger {
  background-color: var(--la-accent) !important;
  border-color: var(--la-accent) !important;
}
.btn-primary:hover,
.btn-danger:hover {
  background-color: var(--la-accent-hov) !important;
  border-color: var(--la-accent-hov) !important;
}

/* 테이블 헤더 */
.table > thead > tr > th {
  background: var(--la-charcoal) !important;
  color: var(--la-white) !important;
  border-color: var(--la-charcoal-soft) !important;
}

/* 스크롤바 */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--la-cream); }
::-webkit-scrollbar-thumb { background: #bbb5ab; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--la-charcoal-soft); }

/* 선택 영역 */
::selection {
  background: var(--la-accent);
  color: #fff;
}

/* 상품 목록 페이지 border-color 교체 */
.border-color,
.tabs-color-top { border-color: var(--la-accent) !important; }

/* 카테고리 위젯 헤더 */
.miso-category .ca-head a { background: var(--la-charcoal) !important; }

/* hr 색상 */
hr { border-color: var(--la-border) !important; }

/* 섹션 헤딩 — 장인 브랜드 타이틀 */
.section-heading {
  font-family: var(--la-font-head) !important;
  font-size: clamp(18px, 3vw, 26px);
  font-weight: 900;
  color: var(--la-charcoal);
  letter-spacing: -0.03em;
  margin: 0 0 24px 2px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--la-accent);
  display: inline-block;
}


/* ================================================================
   전체 페이지 공통 — 페이지 타이틀 바 & 브레드크럼
   ================================================================ */

/* at-title 이미 위에 있으나 브레드크럼 추가 */
.at-breadcrumb,
.at-breadcrumb a { color: rgba(255,255,255,0.55) !important; font-size: 12px; }
.at-breadcrumb a:hover { color: var(--la-white) !important; }
.at-breadcrumb .fa { color: var(--la-accent) !important; }


/* ================================================================
   게시판 공통 — 목록/뷰/폼
   ================================================================ */

/* 게시판 목록 테이블 헤더 */
.tbl_head01 thead th,
#bo_list table thead th {
  background: var(--la-charcoal) !important;
  color: var(--la-white) !important;
  font-family: var(--la-font-body) !important;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
  border-color: var(--la-charcoal-soft) !important;
  padding: 10px 8px !important;
}

/* 테이블 행 hover */
.tbl_head01 tbody tr:hover td,
#bo_list table tbody tr:hover td {
  background: var(--la-accent-light) !important;
}

/* 공지 행 */
.bo_notice td { background: rgba(201, 55, 32, 0.04) !important; }
.bo_notice .td_subject a { font-weight: 700 !important; }

/* 제목 링크 */
.td_subject a,
#bo_list .td_subject a {
  color: var(--la-text) !important;
  font-size: 13px;
  transition: color 0.15s;
}
.td_subject a:hover,
#bo_list .td_subject a:hover { color: var(--la-accent) !important; }

/* Re: 답글 들여쓰기 — 리앤양 답글 구분 */
.td_subject .re_img { opacity: 0.4; }

/* 번호/날짜/조회 셀 */
.td_num, .td_date { color: var(--la-text-muted) !important; font-size: 12px !important; }

/* 글쓰기 버튼 */
.btn_b01,
.btn_bo_user .btn_b01,
#bo_list .btn_b01 {
  background: var(--la-accent) !important;
  border-color: var(--la-accent) !important;
  color: #fff !important;
  border-radius: var(--la-radius) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 6px 14px !important;
  transition: background 0.18s !important;
}
.btn_b01:hover { background: var(--la-accent-hov) !important; border-color: var(--la-accent-hov) !important; }

/* 일반 버튼 */
.btn_b02,
.btn_bo_user .btn_b02 {
  background: var(--la-charcoal) !important;
  border-color: var(--la-charcoal) !important;
  color: #fff !important;
  border-radius: var(--la-radius) !important;
  font-size: 12px !important;
}

/* 페이지네이션 */
.pg_wrap a,
.pg_wrap strong {
  border-color: var(--la-border) !important;
  color: var(--la-text) !important;
  border-radius: var(--la-radius) !important;
  font-size: 12px !important;
}
.pg_wrap strong,
.pg_wrap .pg_current {
  background: var(--la-charcoal) !important;
  border-color: var(--la-charcoal) !important;
  color: #fff !important;
}
.pg_wrap a:hover { background: var(--la-accent-light) !important; border-color: var(--la-accent) !important; color: var(--la-accent) !important; }

/* 검색 폼 */
#bo_sch input[type=text],
#bo_sch input[type=search] {
  border-color: var(--la-border) !important;
  border-radius: var(--la-radius) !important;
  font-size: 13px !important;
}
#bo_sch input[type=text]:focus { border-color: var(--la-accent) !important; }
#bo_sch .btn_sch {
  background: var(--la-charcoal) !important;
  border-color: var(--la-charcoal) !important;
  color: #fff !important;
  border-radius: var(--la-radius) !important;
}


/* ================================================================
   게시판 글쓰기 폼 (#bo_w)
   ================================================================ */

#bo_w .tbl_frm01 { border-color: var(--la-border) !important; border-radius: var(--la-radius-lg) !important; overflow: hidden; }
#bo_w .tbl_frm01 th {
  background: var(--la-cream-dark) !important;
  color: var(--la-charcoal) !important;
  font-weight: 600;
  font-size: 12px;
  border-color: var(--la-border-light) !important;
}
#bo_w .tbl_frm01 td { border-color: var(--la-border-light) !important; }

/* 입력 필드 포커스 */
#bo_w input[type=text]:focus,
#bo_w input[type=number]:focus,
#bo_w textarea:focus {
  border-color: var(--la-accent) !important;
  box-shadow: 0 0 0 2px var(--la-accent-light) !important;
}

/* 제출 버튼 */
#bo_w .btn_submit,
#bo_w .btn_confirm .btn_submit {
  background: var(--la-accent) !important;
  border-color: var(--la-accent) !important;
  color: #fff !important;
  border-radius: var(--la-radius) !important;
  font-weight: 700 !important;
  transition: background 0.18s !important;
}
#bo_w .btn_submit:hover { background: var(--la-accent-hov) !important; }

/* 취소 버튼 */
#bo_w .btn_cancel,
#bo_w .btn_confirm .btn_cancel {
  border-color: var(--la-border) !important;
  color: var(--la-text-muted) !important;
  border-radius: var(--la-radius) !important;
}


/* ================================================================
   게시판 뷰 (#bo_v)
   ================================================================ */

#bo_v .view-wrap { border-color: var(--la-border) !important; }

/* 뷰 헤더 */
#bo_v #bo_v_title,
#bo_v .bo_v_tit {
  border-bottom: 1px solid var(--la-border) !important;
  padding-bottom: 12px !important;
}
#bo_v #bo_v_title h2,
#bo_v .bo_v_tit h2 {
  font-family: var(--la-font-head) !important;
  font-size: 17px !important;
  color: var(--la-charcoal) !important;
  font-weight: 700 !important;
}

/* 메타 정보 (작성자, 날짜) */
#bo_v .bo_v_info { color: var(--la-text-muted) !important; font-size: 12px !important; }
#bo_v .bo_v_info strong { color: var(--la-charcoal) !important; }

/* 본문 영역 */
#bo_v #bo_v_con { font-size: 14px !important; line-height: 1.8 !important; color: var(--la-text) !important; }

/* 댓글 */
#bo_v #cmt_write .tbl_frm01 th { background: var(--la-cream-dark) !important; }
#bo_v .btn_cmt_write {
  background: var(--la-charcoal) !important;
  color: #fff !important;
  border-radius: var(--la-radius) !important;
  border-color: var(--la-charcoal) !important;
}

/* 이전/다음 글 */
#bo_v .bo_v_nb { border-color: var(--la-border) !important; font-size: 13px !important; }
#bo_v .bo_v_nb a:hover { color: var(--la-accent) !important; }

/* 뷰 하단 버튼 */
#bo_v .btn_b01 { background: var(--la-accent) !important; border-color: var(--la-accent) !important; }
#bo_v .btn_b02 { background: var(--la-charcoal) !important; border-color: var(--la-charcoal) !important; }


/* ================================================================
   갤러리형 게시판 (창갈이 전/후모습)
   ================================================================ */

/* 갤러리 이미지 카드 */
.bo_gallery .gallery_col { overflow: hidden; border-radius: var(--la-radius-lg) !important; border: 1px solid var(--la-border) !important; transition: transform 0.25s ease, box-shadow 0.25s ease !important; }
.bo_gallery .gallery_col:hover { transform: translateY(-3px) !important; box-shadow: var(--la-shadow-md) !important; }
.bo_gallery .gallery_col .gallery_img img { transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; }
.bo_gallery .gallery_col:hover .gallery_img img { transform: scale(1.06) !important; }
.bo_gallery .gallery_col .gallery_info { background: var(--la-white) !important; padding: 10px 12px !important; border-top: 1px solid var(--la-border-light) !important; }
.bo_gallery .gallery_col .gallery_info a { color: var(--la-charcoal) !important; font-size: 12px !important; font-weight: 600 !important; }
.bo_gallery .gallery_col .gallery_info a:hover { color: var(--la-accent) !important; }


/* ================================================================
   상품 목록 페이지 (shop/list.php)
   ================================================================ */

/* 카테고리 타이틀 */
.shop-cate-title,
.at-shop .ca-title,
.miso-category .ca-head a {
  font-family: var(--la-font-head) !important;
  font-weight: 900 !important;
}

/* 카테고리 사이드바 */
.at-shop aside,
.at-shop .shop-aside { background: transparent !important; }

/* 상품 정렬 바 */
.shop_sort { border-color: var(--la-border) !important; font-size: 12px !important; }
.shop_sort a:hover, .shop_sort a.on { color: var(--la-accent) !important; }


/* ================================================================
   상품 상세 페이지 (shop/item.php)
   ================================================================ */

/* 상품명 */
.shop-item-detail .it_name,
#bo_v_title h1.item-title,
.it_name_wrap h1,
.it_name { font-family: var(--la-font-head) !important; font-weight: 900 !important; color: var(--la-charcoal) !important; }

/* 상품 가격 */
.it_price,
.shop-price .it_price,
.item-detail .price { color: var(--la-accent) !important; font-weight: 700 !important; }

/* 구매/장바구니 버튼 */
.btn_go_cart,
input[value="장바구니"],
.it_go_cart {
  background: var(--la-charcoal) !important;
  border-color: var(--la-charcoal) !important;
  color: #fff !important;
  border-radius: var(--la-radius) !important;
  font-weight: 700 !important;
  transition: background 0.18s !important;
}
.btn_go_cart:hover { background: var(--la-charcoal-soft) !important; }

.btn_go_order,
input[value="바로구매"],
.it_go_order {
  background: var(--la-accent) !important;
  border-color: var(--la-accent) !important;
  color: #fff !important;
  border-radius: var(--la-radius) !important;
  font-weight: 700 !important;
  transition: background 0.18s !important;
}
.btn_go_order:hover { background: var(--la-accent-hov) !important; }

/* 상품 옵션 선택 */
.it_option select,
.it_option_wrap select {
  border-color: var(--la-border) !important;
  border-radius: var(--la-radius) !important;
  font-size: 13px !important;
}
.it_option select:focus { border-color: var(--la-accent) !important; }

/* 상품 이미지 썸네일 네비 */
.item-imgs .thumb-list li { border-color: var(--la-border) !important; border-radius: var(--la-radius) !important; overflow: hidden; }
.item-imgs .thumb-list li.on,
.item-imgs .thumb-list li:hover { border-color: var(--la-accent) !important; }

/* 탭 (상품 상세/리뷰/Q&A) */
.shop-tabs .tab-link,
.it_tab li a { border-color: var(--la-border) !important; color: var(--la-text-muted) !important; font-size: 13px !important; }
.shop-tabs .tab-link.active,
.it_tab li.on a {
  border-color: var(--la-accent) !important;
  color: var(--la-accent) !important;
  font-weight: 700 !important;
}


/* ================================================================
   스태틱 페이지 (page.php?hid=...)
   ================================================================ */

/* 페이지 본문 공통 */
.page-content h2,
.page-content h3,
#bo_v_con h2,
#bo_v_con h3 {
  font-family: var(--la-font-head) !important;
  color: var(--la-charcoal) !important;
  font-weight: 700 !important;
  margin-bottom: 12px !important;
}

/* 이미지 반응형 */
.page-content img,
#bo_v_con img { max-width: 100% !important; height: auto !important; border-radius: var(--la-radius) !important; }


/* ================================================================
   모바일 하단 탭바 accent 동기화
   ================================================================ */

.m-tabbar .tabbar-item.active,
.m-tabbar .tabbar-item.on { color: var(--la-accent) !important; }
.m-tabbar .tabbar-item.active svg path,
.m-tabbar .tabbar-item.on svg path { fill: var(--la-accent) !important; }


/* ================================================================
   모바일 개선 — 상품 카드·목록 2열·게시판 테이블 최적화
   ================================================================ */

/* 상품 카드 설명 — PC·모바일 공통 2줄 제한 */
.shop-list .item-content .item-desc {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* 480px 이하 — 상품 목록/위젯 2열 강제 적용 */
/* .shop-list: shop/list.php 직접 접근, .miso-item: 메인 위젯 */
@media (max-width: 480px) {
  .responsive .shop-list .item-row,
  .responsive .miso-item .item-row {
    width: 50% !important;
  }
  /* 2열에서는 설명 숨김 (공간 부족) */
  .responsive .shop-list .item-content .item-desc,
  .responsive .miso-item .item-content .item-desc {
    display: none !important;
  }
  /* 2열 상품명 폰트 축소 */
  .responsive .shop-list .item-content strong,
  .responsive .miso-item .item-content strong {
    font-size: 12px !important;
  }
  /* 2열 가격 폰트 축소 */
  .responsive .shop-list .item-price .font-15,
  .responsive .miso-item .item-price .font-15 { font-size: 12px !important; }
  .responsive .shop-list .item-price .font-18,
  .responsive .miso-item .item-price .font-18 { font-size: 13px !important; }
  /* 2열 별점/정보 폰트 축소 */
  .responsive .shop-list .item-info,
  .responsive .miso-item .item-info { font-size: 12px !important; padding: 6px 10px !important; }
}

/* 게시판 목록 — 모바일 테이블 최적화 */
/* 번호·날짜·조회 숨기고, 글쓴이는 좁게 유지 (자기 글 식별용) */
@media (max-width: 768px) {
  /* 번호·날짜·조회 th 숨기기 (글쓴이 th 3번째는 유지) */
  #bo_list thead tr th:nth-child(1),
  #bo_list thead tr th:nth-child(4),
  #bo_list thead tr th:nth-child(5) { display: none !important; }
  /* 번호·조회 td 숨기기 */
  #bo_list tbody td.td_num     { display: none !important; }
  /* 날짜 td 숨기기 */
  #bo_list tbody td.td_date,
  #bo_list tbody td.td_datetime { display: none !important; }
  /* 글쓴이 — 좁게 표시 (56px, 넘치면 말줄임) */
  #bo_list tbody td.td_name    { width: 56px !important; font-size: 11px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 56px; }
  #bo_list tbody td.td_subject { padding-left: 10px !important; }
}


/* ================================================================
   리앤양 공통 CSS v2 — Apple 기반 폰트·색상 최종 통일
   ================================================================ */

html,
body,
button,
input,
select,
textarea {
  font-family: var(--la-font-body) !important;
  letter-spacing: 0;
}

.ko,
.ko small,
.en,
h1,
h2,
h3,
h4,
h5,
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
.pc-menu .menu-a,
.pc-menu .nav-content .nav-btn,
.pc-menu .nav-content .sub-shows .sub-a,
.btn,
.pagination,
.progress .sr-only,
.sr-score {
  font-family: var(--la-font-body) !important;
}

body.is-pc .ko {
  font-size: 14px;
}

a,
a:link,
a:visited {
  color: var(--la-text);
}

a:hover,
a:focus,
a:active {
  color: var(--la-accent);
}

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
.btn:focus {
  outline: 2px solid var(--la-accent) !important;
  outline-offset: 2px;
}

.wrapper,
.at-body,
.at-content,
.at-container {
  background-color: transparent;
}

.pc-header,
.pc-menu,
.m-header,
.at-lnb,
.at-title,
.at-footer .at-links {
  background-color: var(--la-charcoal) !important;
}

.pc-menu {
  box-shadow: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.pc-menu .nav-top .menu-a,
.pc-menu .nav-mega .menu-a,
.pc-menu .nav-full .menu-a {
  background: var(--la-charcoal) !important;
  color: rgba(255,255,255,0.86) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

.pc-menu .nav-top .menu-li:hover .menu-a,
.pc-menu .nav-top .menu-li.on .menu-a,
.pc-menu .nav-mega .menu-li:hover .menu-a,
.pc-menu .nav-mega .menu-li.on .menu-a,
.pc-menu .nav-full .menu-li:hover .menu-a,
.pc-menu .nav-full .menu-li.on .menu-a {
  background: var(--la-charcoal-2) !important;
  color: #fff !important;
}

.pc-menu .nav-top .sub-1div::before,
.pc-menu .nav-full .menu-li:hover .sub-1div::before {
  border-color: var(--la-accent) transparent !important;
}

.pc-menu .nav-top .sub-1div,
.pc-menu .nav-mega .sub-1div,
.pc-menu .nav-full .menu-li:hover .sub-1div,
.pc-menu .nav-full .sub-2dul {
  border-top-color: var(--la-accent) !important;
}

.pc-menu .nav-top .sub-1dli.on .sub-1da,
.pc-menu .nav-top .sub-1dli:hover .sub-1da,
.pc-menu .nav-top .sub-2dli.on .sub-2da,
.pc-menu .nav-top .sub-2dli:hover .sub-2da,
.pc-menu .nav-mega .sub-1dli.on .sub-1da,
.pc-menu .nav-mega .sub-1dli:hover .sub-1da,
.pc-menu .nav-mega .sub-2dli.on .sub-2da,
.pc-menu .nav-mega .sub-2dli:hover .sub-2da,
.pc-menu .nav-full .sub-1dli.on .sub-1da,
.pc-menu .nav-full .sub-1dli:hover .sub-1da,
.pc-menu .nav-full .sub-2dli.on .sub-2da,
.pc-menu .nav-full .sub-2dli:hover .sub-2da {
  background: var(--la-accent) !important;
  border-color: var(--la-accent) !important;
  color: #fff !important;
}

.orangered,
.crimson,
.sch_word,
.copymove_current,
.m-menu .m-nav ul li.active a,
.m-menu .m-nav-sub ul li.active a,
.pc-menu-all .table td.on .menu-a,
.pc-menu-all .sub-1dli:hover .sub-1da {
  color: var(--la-accent) !important;
}

.bg-orangered,
.btn_submit,
.btn-primary,
.btn-danger,
a.btn_admin,
button.btn_admin {
  background: var(--la-accent) !important;
  border-color: var(--la-accent) !important;
  color: #fff !important;
}

.btn_submit:hover,
.btn-primary:hover,
.btn-danger:hover,
a.btn_admin:hover,
button.btn_admin:hover {
  background: var(--la-accent-hov) !important;
  border-color: var(--la-accent-hov) !important;
}

.btn,
a.btn01,
button.btn01,
a.btn02,
button.btn02,
a.btn_b01,
a.btn_b02,
a.btn_cancel,
button.btn_cancel,
a.btn_frmline,
button.btn_frmline {
  border-radius: var(--la-radius) !important;
  letter-spacing: 0 !important;
}

.frm_input,
.form-control,
.tbl_frm01 textarea,
.tbl_frm01 select,
input[type=text],
input[type=password],
input[type=email],
input[type=tel],
input[type=number],
textarea,
select {
  font-family: var(--la-font-body) !important;
  border-color: var(--la-border) !important;
  border-radius: var(--la-radius) !important;
}

.tbl_head01 thead th,
.tbl_head02 thead th {
  background: var(--la-charcoal) !important;
  color: #fff !important;
  border-color: var(--la-charcoal-soft) !important;
  letter-spacing: 0 !important;
}

.tbl_head01 td,
.tbl_head02 td,
.tbl_frm01 th,
.tbl_frm01 td {
  border-color: var(--la-border-light) !important;
}

.pc-header .header-logo a,
.m-header .header-logo a {
  font-family: var(--la-font-head) !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
}

@media (max-width: 767px) {
  body {
    font-size: 14px !important;
    line-height: 1.58 !important;
  }

  .m-header .header-logo a {
    font-size: 17px !important;
  }

  /* 모바일 글쓰기 폼 폭 잘림 방지 */
  #bo_w,
  #bo_w form,
  #bo_w .tbl_wrap,
  #bo_w .tbl_frm01 {
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  #bo_w .tbl_wrap {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #bo_w .tbl_frm01 table,
  #bo_w .tbl_frm01 tbody,
  #bo_w .tbl_frm01 tr,
  #bo_w .tbl_frm01 th,
  #bo_w .tbl_frm01 td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #bo_w .tbl_frm01 tr[style*="display: none"] {
    display: none !important;
  }

  #bo_w .tbl_frm01 th {
    padding: 14px 12px 6px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--la-charcoal) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
  }

  #bo_w .tbl_frm01 td {
    padding: 0 12px 14px !important;
    border-top: 0 !important;
    word-break: keep-all !important;
  }

  #bo_w input,
  #bo_w select,
  #bo_w textarea,
  #bo_w .frm_input,
  #bo_w .form-control {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #bo_w input[type="text"],
  #bo_w input[type="password"],
  #bo_w input[type="email"],
  #bo_w input[type="url"],
  #bo_w input[type="tel"],
  #bo_w input[type="number"],
  #bo_w select,
  #bo_w textarea,
  #bo_w .frm_input,
  #bo_w .form-control {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 16px !important;
  }

  #bo_w input[type="file"] {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 14px !important;
  }

  #bo_w .wr_content,
  #bo_w .wr_content iframe,
  #bo_w .wr_content table,
  #bo_w .cke,
  #bo_w .cke_inner,
  #bo_w .cke_contents,
  #bo_w .cke_wysiwyg_frame,
  #bo_w .cke_wysiwyg_div {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #bo_w .radio-segment-wrap,
  #bo_w .brand-pill-wrap-m,
  #bo_w .size-pill-wrap-m,
  #bo_w .stud-img-grid-m {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  #bo_w .radio-segment-wrap label,
  #bo_w .brand-pill-wrap-m label,
  #bo_w .size-pill-wrap-m label,
  #bo_w .stud-card-m,
  #bo_w .file-upload-btn {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #bo_w .stud-card-m img {
    max-width: 100% !important;
    height: auto !important;
  }

  #bo_w #autosave_wrapper {
    width: 100% !important;
  }

  #bo_w #autosave_pop {
    left: 0 !important;
    right: auto !important;
    width: calc(100vw - 32px) !important;
    max-width: 100% !important;
  }

  #bo_w .btn_confirm {
    display: flex !important;
    gap: 8px !important;
    padding: 0 12px 18px !important;
  }

  #bo_w .btn_confirm .btn_submit,
  #bo_w .btn_confirm .btn_cancel {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 44px !important;
    text-align: center !important;
    line-height: 44px !important;
    box-sizing: border-box !important;
  }

  #captcha,
  #captcha.m_captcha {
    max-width: 100% !important;
  }

  #captcha #captcha_img,
  #captcha.m_captcha #captcha_img {
    max-width: 160px !important;
  }

  .ui-datepicker {
    max-width: calc(100vw - 24px) !important;
    box-sizing: border-box !important;
  }
}
