@charset "UTF-8";
@import '../jquery-ui.css';
@import '../output.css';
html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  line-height: 1.4;
  font-size: var(--font-size-base);
  font-family: var(--notosansKR);
  color: var(--default-color);
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
}

:root {
  /* fonts */
  --notosansKR: "Noto Sans KR";
  /* font sizes */
  --font-size-ss: max(.6875rem, min(2vw, .75rem)); /*12px*/
  --font-size-s: max(.75rem, min(2.8vw, .875rem)); /*14px*/
  --font-size-base: max(.875rem, min(3.2vw, 1rem));
  --font-size-ms: max(.9375rem, min(2.8vw, 1.125rem)); /*18px*/
  --font-size-m: max(1rem, min(3.2vw, 1.25rem)); /*20px*/
  --font-size-ml: max(1.125rem, min(3.2vw, 1.5rem)); /*24px*/
  --font-size-lg: max(1.25rem, min(3.3vw, 1.75rem)); /*28px*/
  --font-size-xl: max(1.25rem, min(3.5vw, 2rem)); /*32px*/
  --startColor: hsl(0, 100%, 75%);
  --stopColor: hsl(0, 100%, 75%);
  /* fonts */

  /* Colors */
  --black: #313131;
  --white: #fff;
  --pointColor01: #39e75f;
  --pointColor02: #D2FFC3;
  --pointColor03: #9EF6C6;
  --pointColor04: #77E2C2;
  --pointColor05: #57D08B;
  --pointColor06: #03350E;
  --pointColor08: rgba(19, 131, 111, 0.15);
  --gray01: #A7A39A;
  --gray02: #e4e4e4;
  --gray03: #a5a5a5;
  --gray04: #f7f7f7;
  --gray05: #555555;
  --gray06: #f5f4f3;
  --gray07: #8b8b8b;
  --borderColor: #DFDFDF;
  --searchColor: #ECECEC;
  --opacity-15: rgba(0,0,0,0.15);
  --opacity-20: rgba(0,0,0,0.20);
  --opacity-25: rgba(0,0,0,0.25);
  --opacity-30: rgba(0,0,0,0.30);
  --opacity-50: rgba(0,0,0,0.50);
  --box-shadow: 2px 2px 10px 10px rgba(0,0,0,0.15);
  /* height */
  --h100vh: 100vh;
  --size-04: .25rem;
  --size-08: .5rem;
  --size-10: 0.625rem;
  --size-12: .75rem;
  --size-16: 1rem;
  --size-20: 1.25rem;
  --size-24: 1.5rem;
  --size-28: 1.75rem;
  --size-32: 2rem;
  --size-36: 2.25rem;
  --size-40: 2.5rem;
  --size-44: 2.75rem;
  --size-48: 3rem;
  --size-52: 3.25rem;
  --size-56: 3.5rem;
  --size-60: 3.75rem;
  --size-70: 4.375rem;
  --size-80: 5rem;
  --size-90: 5.625rem;
  --size-100: 6.25rem;
}

.point-color-01 {
  background: var(--articlecolor-01);
}

.point-color-02 {
  background: var(--articlecolor-02);
}

.point-color-03 {
  background: var(--black);
}

.point-color-04 {
  background: var(--articlecolor-03);
}

.point-color-05 {
  color: var(--pointColor09);
}

i {
  font-style: normal;
}

/* font */
@font-face {
  font-family: "AppleSDGothicNeo";
  font-style: normal;
  font-weight: 300;
  src: url(../font/AppleSDGothicNeoB.woff2) format("woff2");
}
@font-face {
  font-family: "AppleSDGothicNeo";
  font-style: normal;
  font-weight: 600;
  src: url(../font/AppleSDGothicNeoEB.woff2) format("woff2");
}
@font-face {
    font-family: "AppleSDGothicNeo";
    font-style: normal;
    font-weight: 200;
    src: url(../font/AppleSDGothicNeoL.woff2) format("woff2");
}
@font-face {
  font-family: "Noto Sans KR";
  font-style: normal;
  font-weight: 300;
  src: url(../font/NotoSansKR-Regular.woff) format("woff"), url(../font/NotoSansKR-Regular.woff2) format("woff2"), url(../font/NotoSansKR-Regular.otf) format("opentype");
}
@font-face {
  font-family: "Noto Sans KR";
  font-style: normal;
  font-weight: 400;
  src: url(../font/NotoSansKR-Medium.woff) format("woff"), url(../font/NotoSansKR-Medium.woff2) format("woff2"), url(../font/NotoSansKR-Medium.otf) format("opentype");
}
@font-face {
  font-family: "Noto Sans KR";
  font-style: normal;
  font-weight: 500;
  src: url(../font/NotoSansKR-Bold.woff) format("woff"), url(../font/NotoSansKR-Bold.woff2) format("woff2"), url(../font/NotoSansKR-Bold.otf) format("opentype");
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button, input, optgroup, select, textarea, a {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
select { /* 1 */
  text-transform: none;
  background: transparent;
  border: 1px solid #fff;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

ul, li, ul::marker, div::marker, li::marker {
  list-style: none;
  padding: 0;
  margin: 0;
}

em {
  font-style: normal;
}

button {
  padding: 0.825rem 1.5em;
}

input {
  background-color: transparent;
  outline: none;
}

select {
  border-radius: 0; /* 아이폰 사파리 보더 없애기 */
  -webkit-appearance: none; /* 화살표 없애기 for chrome*/
  -moz-appearance: none; /* 화살표 없애기 for firefox*/
  appearance: none;
}

/* IE10, 11를 위한 화살표 없애기 */
select::-ms-expand {
  display: none;
}

a {
  text-decoration: none;
  color: var(--default);
}

.mt-100 {
  margin-top: var(--size-100);
}

@keyframes float {
  from {
    transform: translateX(-30%) translateY(-50%) rotate(0deg);
    -webkit-transform: translateX(-30%) translateY(-50%) rotate(0deg);
    -moz-transform: translateX(-30%) translateY(-50%) rotate(0deg);
    -ms-transform: translateX(-30%) translateY(-50%) rotate(0deg);
    -o-transform: translateX(-30%) translateY(-50%) rotate(0deg);
  }
  to {
    transform: translateX(1100%) translateY(4500%) rotate(360deg);
    -webkit-transform: translateX(1100%) translateY(4500%) rotate(360deg);
    -moz-transform: translateX(1100%) translateY(4500%) rotate(360deg);
    -ms-transform: translateX(1100%) translateY(4500%) rotate(360deg);
    -o-transform: translateX(1100%) translateY(4500%) rotate(360deg);
  }
}

.item-good {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--size-10);
}

.item-good span {
  display: inline-block;
  background-image: url("../../images/good3.png");
  background-repeat: no-repeat;
  width: 1.25rem;
  height: 1.25rem;
  background-size: contain;
  text-indent: -9999px;
}
.item-good em {
  display: block;
  font-style: normal;
}

.item-eyes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--size-10);
}

.item-eyes span {
  display: inline-block;
  background-image: url("../../images/eyes3.png");
  background-repeat: no-repeat;
  width: 1.25rem;
  height: 1.25rem;
  background-size: contain;
  text-indent: -9999px;
}
.item-eyes em {
  display: block;
  font-style: normal;
}

.item-login {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--size-10);
}

.item-login span {
  display: inline-block;
  background-image: url("../../images/login.png");
  background-repeat: no-repeat;
  width: 1.25rem;
  height: 1.25rem;
  background-size: contain;
  text-indent: -9999px;
}
.item-login em {
  display: block;
  font-style: normal;
}

.item-write {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--size-10);
}

.item-write span {
  display: inline-block;
  background-image: url("../../images/write5.png");
  background-repeat: no-repeat;
  width: 1.25rem;
  height: 1.25rem;
  background-size: contain;
  text-indent: -9999px;
}
.item-write em {
  display: block;
  font-style: normal;
}

.item-chat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--size-10);
}

.item-chat span {
  display: inline-block;
  background-image: url("../../images/chat2.png");
  background-repeat: no-repeat;
  width: 1.25rem;
  height: 1.25rem;
  background-size: contain;
  text-indent: -9999px;
}
.item-chat em {
  display: block;
  font-style: normal;
}

.item-comment {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--size-10);
}

.item-comment span {
  display: inline-block;
  background-image: url("../../images/comment3.png");
  background-repeat: no-repeat;
  width: 1.25rem;
  height: 1.25rem;
  background-size: contain;
  text-indent: -9999px;
}
.item-comment em {
  display: block;
  font-style: normal;
}

.item-share {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--size-10);
}

.item-share span {
  display: inline-block;
  background-image: url("../../images/share3.png");
  background-repeat: no-repeat;
  width: 1.25rem;
  height: 1.25rem;
  background-size: contain;
  text-indent: -9999px;
}
.item-share em {
  display: block;
  font-style: normal;
}

.item-modi {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--size-10);
}

.item-modi span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  /* 텍스트 완전 숨김 */
  font-size: 0;
  text-indent: -9999px;
  color: var(--pointColor01);
  /* Edit3 아이콘 SVG - pointColor01(#39e75f) 적용 */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2339e75f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.121 2.121 0 1 1 3 3L7 19l-4 1 1-4L16.5 3.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  /* 필터 제거 - 직접 색상 적용 */
}

/* 모바일 및 태블릿 반응형 스타일 */
@media (max-width: 949.98px) {
  .item-modi span {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2339e75f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.121 2.121 0 1 1 3 3L7 19l-4 1 1-4L16.5 3.5z'/%3E%3C/svg%3E");
    background-size: contain;
    background-position: center;
    width: 1.1rem;
    height: 1.1rem;
  }
}

@media (max-width: 767.98px) {
  .item-modi span {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2339e75f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.121 2.121 0 1 1 3 3L7 19l-4 1 1-4L16.5 3.5z'/%3E%3C/svg%3E");
    background-size: contain;
    background-position: center;
    width: 1rem;
    height: 1rem;
  }
}
.item-modi em {
  display: block;
  font-style: normal;
}

html {
  -ms-overflow-style: none;
  /* for Internet Explorer, Edge */
  scrollbar-width: none;
  /* for Firefox */
}

body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  align-items: unset;
  height: 100vh;
}

nav {
  border-bottom: 0.0625rem solid var(--searchColor);
}

.menu {
  max-width: 75rem;
  margin: 0 auto;
  padding: var(--size-20);
}
.menu img {
  width: 6.25rem;
}
.menu > div:first-child {
  gap: var(--size-32);
}
@media (max-width: 1199.98px) {
  .menu > div:first-child {
    gap: var(--size-16);
  }
}
.menu .menu-item {
  font-size: var(--font-size-m);
  font-weight: 500;
  gap: var(--size-32);
}
@media (max-width: 1199.98px) {
  .menu .menu-item {
    gap: var(--size-16);
    font-size: var(--font-size-base);
  }
}
.menu .menu-item .nav-link {
  transition: color ease-in 0.3s;
  -webkit-transition: color ease-in 0.3s;
  -moz-transition: color ease-in 0.3s;
  -ms-transition: color ease-in 0.3s;
  -o-transition: color ease-in 0.3s;
}
.menu .menu-item .nav-link:hover {
  color: var(--pointColor01);
}
.menu .menu-item .nav-link.active {
  color: var(--pointColor01);
  font-weight: 600;
}
@media (max-width: 1023px) {
  .menu .menu-item {
    display: none;
  }
}
@media (max-width: 1023px) {
  .menu .right {
    display: none;
  }
}

.search {
  background-color: var(--searchColor);
  padding: var(--size-12);
  gap: var(--size-16);
  border-radius: var(--size-100);
  -webkit-border-radius: var(--size-100);
  -moz-border-radius: var(--size-100);
  -ms-border-radius: var(--size-100);
  -o-border-radius: var(--size-100);
}
.search input {
  background: transparent;
}
@media (max-width: 1199.98px) {
  .search input {
    font-size: var(--font-size-s);
  }
}
.search button {
  text-indent: -624.9375rem;
  display: inline-block;
  background-image: url("../../images/search.png");
  background-repeat: no-repeat;
  width: 1.25rem;
  height: 1.25rem;
  background-size: contain;
  padding: 0;
}

/* 스크롤바의 폭 너비 */
::-webkit-scrollbar {
  display: none;
}

.group-child2,
.group-child4 {
  width: 20px;
  transition: all ease-in 0.5s;
  -webkit-transition: all ease-in 0.5s;
  -moz-transition: all ease-in 0.5s;
  -ms-transition: all ease-in 0.5s;
  -o-transition: all ease-in 0.5s;
}

.group-child3 {
  width: 13px;
  transition: all ease-in 0.5s;
  -webkit-transition: all ease-in 0.5s;
  -moz-transition: all ease-in 0.5s;
  -ms-transition: all ease-in 0.5s;
  margin-top: 5px;
  -o-transition: all ease-in 0.5s;
}

.group-child4 {
  margin-top: 5px;
}

.group-child2,
.group-child3,
.group-child4 {
  background-color: #888888;
  height: 3px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  pointer-events: none;
}

/* 모바일 및 태블릿 햄버거 메뉴 터치 개선 */
@media (max-width: 1023px) {
  .menu-ham {
    min-height: 48px;
    min-width: 48px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 12px !important;
    -webkit-tap-highlight-color: rgba(57, 231, 95, 0.2);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
  }
  
  .menu-ham:active {
    background-color: rgba(57, 231, 95, 0.1);
    border-radius: 8px;
  }
  
  /* 터치 시 햄버거 라인 색상 변경 */
  .menu-ham:active .group-child2,
  .menu-ham:active .group-child3,
  .menu-ham:active .group-child4 {
    background-color: var(--pointColor01);
  }
}

/* Shadcn UI 스타일 모바일 메뉴 */
.m-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  width: 100%;
  max-width: 400px;
  background-color: #ffffff;
  border-left: 1px solid #e5e7eb;
  box-shadow: -10px 0 25px -5px rgba(0, 0, 0, 0.1), -20px 0 25px -5px rgba(0, 0, 0, 0.04);
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
}

.m-menu.active {
  transform: translateX(0);
}

.mobile-menu-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* 헤더 영역 */
.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid #f3f4f6;
  background-color: #ffffff;
}

.mobile-user-section {
  flex: 1;
}

.mobile-user-profile {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-avatar-container {
  position: relative;
}

.user-avatar-container .user-profile-image {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: #f3f4f6;
  border: 2px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  color: #6b7280;
}

.user-info-text {
  flex: 1;
}

.user-name {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 2px;
}

.user-status {
  font-size: 14px;
  color: #10b981;
  font-weight: 500;
}

.mobile-login-section {
  display: flex;
  align-items: center;
}

.mobile-login-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  background-color: #39e75f;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

.mobile-login-btn:hover {
  background-color: #2cc653;
  transform: translateY(-1px);
}

.mobile-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background-color: transparent;
  color: #6b7280;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-left: 12px;
}

.mobile-close-btn:hover {
  background-color: #f3f4f6;
  color: #374151;
}

/* 구분선 */
.mobile-menu-divider {
  height: 1px;
  background-color: #f3f4f6;
  margin: 0 24px;
}

/* 메뉴 네비게이션 */
.mobile-menu-nav {
  flex: 1;
  padding: 16px 0;
  overflow-y: auto;
}

.mobile-menu-item {
  display: flex;
  align-items: center;
  padding: 12px 24px;
  color: #374151;
  text-decoration: none;
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
}

.mobile-menu-item:hover {
  background-color: #f9fafb;
  color: #39e75f;
  border-left-color: #39e75f;
}

.mobile-menu-item:active {
  background-color: #f3f4f6;
}

.menu-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-right: 16px;
  color: inherit;
}

.menu-item-text {
  font-size: 15px;
  font-weight: 500;
  color: inherit;
}

/* 하단 액션 버튼들 */
.mobile-menu-actions {
  padding: 16px 24px 24px;
  border-top: 1px solid #f3f4f6;
  background-color: #ffffff;
}

.mobile-action-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mobile-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mobile-action-secondary {
  background-color: #f3f4f6;
  color: #6b7280;
}

.mobile-action-secondary:hover {
  background-color: #e5e7eb;
  color: #374151;
}

.mobile-action-danger {
  background-color: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.mobile-action-danger:hover {
  background-color: #fee2e2;
  border-color: #fca5a5;
}

/* 반응형 조정 */
@media (max-width: 480px) {
  .m-menu {
    width: 100vw;
    max-width: 100vw;
  }
  
  .mobile-menu-header {
    padding: 16px 20px 12px;
  }
  
  .mobile-menu-item {
    padding: 14px 20px;
  }
  
  .mobile-menu-actions {
    padding: 16px 20px 20px;
  }
}

.menu-ham {
  display: none;
  align-items: end;
  justify-content: center;
  flex-direction: column;
  position: relative;
  height: 100%;
  width: 48px;
  padding: 12px;
  cursor: pointer;
  z-index: 1000;
  background: transparent;
  border: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
@media (max-width: 1023px) {
  .menu-ham {
    display: flex;
  }
}

.menu-ham:hover .group-child2 {
  width: 20px;
}

.menu-ham:hover .group-child4 {
  width: 20px;
}

.menu-ham:hover .group-child3 {
  width: 13px;
}

select {
  -webkit-appearance: none;
  /*크롬화살표없애기*/
  -moz-appearance: none;
  /*파이어폭스화살표없애기*/
  appearance: none;
  /*화살표없애기*/
  background: url(../../images/select.png) no-repeat 90% center;
  border: 0.0625rem solid var(--borderColor);
  padding: var(--size-10) var(--size-80) var(--size-10) var(--size-20);
  border-radius: var(--size-10);
  -webkit-border-radius: var(--size-10);
  -moz-border-radius: var(--size-10);
  -ms-border-radius: var(--size-10);
  -o-border-radius: var(--size-10);
}
@media (max-width: 949.98px) {
  select {
    font-size: var(--font-size-s);
  }
}

button:not(.search button, .product button) {
  border: 0.0625rem solid var(--pointColor01);
  padding: var(--size-12);
  border-radius: var(--size-10);
  -webkit-border-radius: var(--size-10);
  -moz-border-radius: var(--size-10);
  -ms-border-radius: var(--size-10);
  -o-border-radius: var(--size-10);
  color: var(--pointColor01);
  font-weight: 500;

  
}


@media (max-width: 1199.98px) {
  button:not(.search button, .product button) {
    font-size: var(--font-size-s);
  }
}
@media (max-width: 399.98px) {
  button:not(.search button, .product button) {
    padding: var(--size-08) var(--size-12);
  }
}

.a-button {
  border: 0.0625rem solid var(--pointColor01);
  padding: var(--size-12);
  border-radius: var(--size-10);
  -webkit-border-radius: var(--size-10);
  -moz-border-radius: var(--size-10);
  -ms-border-radius: var(--size-10);
  -o-border-radius: var(--size-10);
  color: var(--pointColor01);
  font-weight: 500;
  gap: var(--size-10);
  transition: background ease-in 0.3s;
  -webkit-transition: background ease-in 0.3s;
  -moz-transition: background ease-in 0.3s;
  -ms-transition: background ease-in 0.3s;
  -o-transition: background ease-in 0.3s;
  /* 버튼 크기 통일을 위한 설정 */
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
}
.a-button.a-button-02 {
  background-color: var(--pointColor01) !important;
  color: var(--white) !important;
  padding: 8px 16px !important;
}
@media (max-width: 1199.98px) {
  .a-button {
    padding: var(--size-12) var(--size-10);
    font-size: var(--font-size-s);
    height: 48px;
    min-height: 48px;
    max-height: 48px;
  }
}
@media (max-width: 399.98px) {
  .a-button {
    padding: var(--size-12) var(--size-04) !important;
    height: 48px;
    min-height: 48px;
    max-height: 48px;
  }
}
.a-button:hover {
  background-color: var(--pointColor01);
  color: var(--white);
}
.a-button:hover span {
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
}

/* 수정하기 버튼 호버 시 아이콘을 흰색으로 변경 */
.a-button.item-modi:hover span {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.121 2.121 0 1 1 3 3L7 19l-4 1 1-4L16.5 3.5z'/%3E%3C/svg%3E") !important;
}

footer {
  background-color: rgb(51, 51, 204);
  padding: var(--size-32) 0;
}
footer .foot-cont {
  max-width: 75rem;
  margin: 0 auto;
  gap: var(--size-32);
  color: var(--white);
  font-size: var(--font-size-s);
  line-height: 2;
}
footer .foot-cont img {
  flex: 0 0 9.375rem;
}
@media (max-width: 399.98px) {
  footer .foot-cont img {
    flex: 0 0 var(--size-100);
    width: var(--size-100);
  }
}
footer .foot-cont p {
  margin-top: var(--size-20);
}
@media (max-width: 1199.98px) {
  footer .foot-cont {
    padding: 0 var(--size-20);
  }
}
@media (max-width: 767.98px) {
  footer .foot-cont {
    flex-wrap: wrap;
    justify-content: center;
  }
}

i, em {
  font-style: normal;
}

input {
  outline: none;
}
input::-moz-placeholder {
  color: #c1c1c1;
  font-weight: 400;
}
input::placeholder {
  color: #c1c1c1;
  font-weight: 400;
}/*# sourceMappingURL=common.css.map */