/* BASIC css start */
/* 아이품고 PC 플랫폼 헤더: var(--site-width,1080px) / 로고-서비스-검색 / 하위 메뉴+혜택 고정 */
:root { --main-color:#e74174; --site-width:1080px; }
#hdWrap { min-width:var(--site-width,1080px); color:#222; background:#fff; font:14px Pretendard,"Noto Sans KR","Malgun Gothic",sans-serif; }
#hdWrap *,#hdWrap *::before,#hdWrap *::after { box-sizing:border-box; }
#hdWrap a { color:inherit; text-decoration:none; }
#hdWrap ul,#hdWrap dl,#hdWrap dd,#hdWrap p { margin:0; padding:0; list-style:none; }
#hdWrap button { font:inherit; color:inherit; cursor:pointer; }
#hdWrap a:focus-visible,#hdWrap button:focus-visible { outline:2px solid #222; outline-offset:3px; }
#hdWrap img { border:0; vertical-align:middle; }
#hdWrap .top_banner { background:#333; }
#hdWrap .head_inner { width:var(--site-width,1080px); margin:auto; }
#hdWrap .head_inner a { display:block; }
#hdWrap .head_inner p { height:44px; line-height:44px; font-size:16px; text-align:center; color:#fff; }
#hdWrap .basic_area .ba_box { width:var(--site-width,1080px); height:30px; margin:auto; display:flex; justify-content:flex-end; align-items:center; }
#hdWrap .top_menu ul { display:flex; gap:18px; }
#hdWrap .top_menu li { float:none; padding:0; line-height:30px; }
#hdWrap .top_menu li::before,#hdWrap .top_menu li::after { content:none; }
#hdWrap .top_menu a { color:#777; font-size:13px; }
#ipo-header-shell { position:relative; z-index:120; }
#ipo-header-fixed { width:100%; min-width:var(--site-width,1080px); background:#fff; }
#ipo-header-fixed.is-fixed { position:fixed; top:0; left:0; z-index:120; box-shadow:0 2px 8px #00000008; }
#hdWrap .menu_area { height:80px; background:#fff; }
#hdWrap .ma_box { width:var(--site-width,1080px); height:100%; margin:auto; display:flex; align-items:center; gap:28px; }
#hdWrap .top_logo { flex:0 0 150px; }
#hdWrap .top_logo img { display:block; width:150px; height:auto; max-height:50px; object-fit:contain; }
#hdWrap .ipo-primary-nav { display:flex; height:100%; align-items:stretch; gap:26px; }
#hdWrap .ipo-primary-nav button { position:relative; border:0; padding:0; background:none; font-size:20px; font-weight:700; white-space:nowrap; }
#hdWrap .ipo-primary-nav button.is-active { color:var(--main-color); font-weight:700; }
#hdWrap .ipo-primary-nav button:hover { color:var(--main-color); }
#hdWrap .ipo-primary-nav button.is-active::after { content:""; position:absolute; bottom:19px; left:0; right:0; height:3px; background:var(--main-color); }
#hdWrap .top_search { margin-left:auto; }
#hdWrap .search-form form { margin:0; }
#hdWrap .search-form fieldset { position:relative; width:280px; height:42px; margin:0; padding:0; border:1px solid #dadde0; border-radius:5px; background:#fff; }
#hdWrap .search-form legend { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
#hdWrap .search-form input:not([type="hidden"]) { width:100%; height:40px; padding:0 14px 0 42px; border-radius:5px; border:0!important; box-shadow:none; outline:0; background:transparent; font:inherit; color:#222; }
#hdWrap .search-form fieldset:focus-within { border-color:var(--main-color); box-shadow:none; }
#hdWrap .search-form fieldset>a { position:absolute; left:0; top:0; width:40px; height:40px; display:flex; justify-content:center; align-items:center; }
#hdWrap .search_btn { width:20px; height:20px; }
#hdWrap .search-form input::placeholder { color:#999; }
#hdWrap #tcat_top_line { border-top:1px solid #eee; border-bottom:1px solid #e5e5e5; background:#fff; }
#hdWrap #top_category { width:var(--site-width,1080px); margin:auto; position:relative; }
#hdWrap #drop-down { display:flex; align-items:center; height:52px; gap:24px; }
#hdWrap #drop-down>li { position:relative; float:none; margin:0; padding:0; }
#hdWrap #drop-down>.first { flex:0 0 auto; }
#hdWrap #top_001 { display:flex; height:52px; align-items:center; gap:10px; background:none; border:0; padding:0; font-size:18px; font-weight:500; }
#hdWrap #top_001 span { visibility:visible; display:block; flex:0 0 20px; width:20px; height:2px; background:currentColor; box-shadow:0 -6px currentColor,0 6px currentColor; }
#hdWrap .ipo-subnav { flex:1; min-width:0; }
#hdWrap .ipo-subnav nav { display:flex; align-items:center; gap:25px; height:52px; }
#hdWrap .ipo-subnav nav[hidden] { display:none; }
#hdWrap .ipo-subnav a,#hdWrap .ipo-benefits a { display:inline-flex; align-items:center; height:52px; white-space:nowrap; font-size:18px; font-weight:600; }
#hdWrap .ipo-subnav a:hover,#hdWrap #top_001:hover { color:var(--main-color); }
#hdWrap .ipo-benefits { display:flex; align-items:center; gap:8px; padding-left:16px!important; border:0; }
#hdWrap .ipo-benefits a { display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 11px; border:1px solid #f1cad8; border-radius:18px; background:#fff3f7; color:var(--main-color); font-size:16px; font-weight:600; line-height:1; }
#hdWrap .ipo-benefits a:hover { border-color:var(--main-color); background:#ffe8f0; color:var(--main-color); }
#hdWrap .ipo-benefits a::before { content:""; display:block; flex:0 0 18px; width:18px; height:18px; background:center/contain no-repeat; }
#hdWrap .ipo-benefits a[data-ipo-match="page:7"]::before { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23e74174%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2011h16v10H4zM3%207h18v4H3zM12%207v14%22%2F%3E%3Cpath%20d%3D%22M12%207C6%207%205%202%208%202c3%200%204%205%204%205s1-5%204-5c3%200%202%205-4%205z%22%2F%3E%3C%2Fsvg%3E"); }
#hdWrap .ipo-benefits a[data-ipo-match="code:kichmom_board18"]::before { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23e74174%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M7%203v4m10-4v4M3%2010h18m-13%205%203%203%205-5%22%2F%3E%3C%2Fsvg%3E"); }
#hdWrap [data-ipo-current="care"] #drop-down>.first,#hdWrap [data-ipo-current="community"] #drop-down>.first { display:none; }
/* 전체 카테고리 — 버튼 클릭/ESC/바깥 클릭으로 제어 */ #hdWrap #drop-down #smenu { display: none; position: absolute; top: 52px; left: 0; width: var(--site-width,1080px); height: auto; max-height: calc(100vh - 72px); overflow-y: auto; padding: 28px 30px; z-index: 9999; background: #fff; border: 1px solid #e5e5e5; box-shadow: 0 12px 24px rgba(0,0,0,.055); text-align: left; }
 #hdWrap #drop-down #smenu::after { content: ""; display: block; clear: both; }
 
 #hdWrap #smenu .ttcat_wrap { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px 26px; float: none; width: 100%; }
 #hdWrap #smenu .ttcat_wrap .ttcat { float: none; width: auto; min-width: 0; min-height: 0; margin: 0; }
 #hdWrap #smenu .ttcat_title { min-height: 33px; margin: 0 0 10px; padding: 0 0 10px; border-bottom: 1px solid #eee; }
 #hdWrap #smenu .ttcat_title a { display: block; padding: 0; color: #222; font-size: 15px; font-weight: 600; line-height: 22px; }
 #hdWrap #smenu .ttcat dd a { display: block; padding: 4px 0; color: #666; font-size: 14px; font-weight: 400; line-height: 20px; }
 #hdWrap #smenu .ttcat a:hover { color: #111; text-decoration: underline; text-underline-offset: 3px; }
 #hdWrap #crossl { display: none; }
/* 기존 보조 요소 */
.loc-navi dd { text-align: left; padding-top: 15px; background: #fff; margin-top: 1px; }
.loc-navi dd a { font-size: 14px; color: #555; }
.loc-navi .ico_map { display: inline-block; width: 14px; padding-top: 8px; margin-right: 5px; }
.view_gr { width: var(--site-width,1080px); height: 40px; margin: -38px auto 0; text-align: right; }
.view_gr a { position: relative; z-index: 999; line-height: 40px; font-size: 14px; padding: 0 20px; font-weight: 500; color: #555; }
/* 타 영역이 참조할 수 있는 기존 브랜드 변수 보존 */
:root { --main-color: #e74174; }
@media (prefers-reduced-motion: reduce) {
  #hdWrap *, #hdWrap *::before, #hdWrap *::after { animation: none !important; transition: none !important; }
}

/* 현재 페이지 하위 메뉴 */
#hdWrap .ipo-subnav a.is-current,#hdWrap .ipo-benefits a.is-current,#hdWrap #top_001.is-current { color:var(--main-color); font-weight:700; }

/* 핫딜: 참고 이미지처럼 빨간 텍스트 + 오른쪽 위 작은 점 */
#hdWrap .ipo-subnav a[data-ipo-match="page:12"] { position:relative; color:#ff3333; animation:none; opacity:1; }
#hdWrap .ipo-subnav a[data-ipo-match="page:12"]::after { content:""; position:absolute; top:calc(50% - 13px); right:-7px; width:4px; height:4px; border-radius:50%; background:currentColor; pointer-events:none; }
/* 메이크샵 다찾다 자동완성: 목록 데이터와 열기/닫기는 플랫폼에서 제어 */
#hdWrap .top_search,#hdWrap .search-form { position:relative; }
#hdWrap .search-auto-complete-list { display:none; position:absolute; top:calc(100% + 6px); left:0; z-index:150; width:100%; max-height:min(420px,calc(100vh - 180px)); overflow-y:auto; padding:0; border:1px solid #e5e5e5; border-radius:6px; background:#fff; box-shadow:0 8px 20px rgba(0,0,0,.08); font-size:14px; line-height:1.5; text-align:left; }
#hdWrap .search-auto-complete-list ul { display:block; width:100%; margin:0; padding:6px 0; border-bottom:1px solid #eee; list-style:none; }
#hdWrap .search-auto-complete-list ul li { display:block; float:none; width:auto; height:auto; margin:0; padding:0; text-align:left; }
#hdWrap .search-auto-complete-list ul li a { display:block; width:100%; height:auto; padding:9px 14px; background:none; color:#333; font-family:inherit; font-size:14px; font-weight:400; line-height:1.5; white-space:normal; overflow-wrap:anywhere; }
#hdWrap .search-auto-complete-list ul li.on,#hdWrap .search-auto-complete-list ul li a:hover { background:#f7f7f7; }
#hdWrap .search-auto-complete-list ul li a strong { color:var(--main-color); font-weight:600; }
#hdWrap .search-auto-complete-list .search-list-close { display:block; padding:10px 14px; color:#888; font-size:12px; line-height:1.4; text-align:right; }

/* 최상단 디데이달력 배너: 7초마다 두 문구를 3D 전환 */
#hdWrap .top_banner { position:relative; overflow:hidden; isolation:isolate; }
#hdWrap .top_banner::before { content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(110deg,transparent 20%,rgba(231,65,116,.15) 43%,rgba(255,255,255,.22) 50%,rgba(231,65,116,.15) 57%,transparent 80%); transform:translateX(-110%); pointer-events:none; animation:ipo-top-shine 7s ease-in-out infinite; }
#hdWrap .top_banner .head_inner { position:relative; z-index:1; }
#hdWrap .top_banner .head_inner>a { position:relative; display:block; height:44px; }
#hdWrap .top_banner .ipo-top-copy { position:relative; width:100%; height:44px; margin:0; overflow:hidden; perspective:500px; }
#hdWrap .top_banner .ipo-top-message { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:10px; height:44px; color:#fff; font-size:16px; font-weight:500; line-height:44px; letter-spacing:.1px; white-space:nowrap; transform-origin:center center; backface-visibility:hidden; }
#hdWrap .top_banner .ipo-top-message::before { content:"✦"; color:#ffc4d4; font-size:14px; }
#hdWrap .top_banner .ipo-top-message strong { color:#ffc4d4; font:inherit; font-weight:700; }
#hdWrap .top_banner .ipo-top-message:first-child { opacity:1; animation:ipo-top-first 7s cubic-bezier(.22,.68,.2,1) infinite; }
#hdWrap .top_banner .ipo-top-message:last-child { opacity:0; animation:ipo-top-second 7s cubic-bezier(.22,.68,.2,1) infinite; }
@keyframes ipo-top-first { 0%,38%,100% { opacity:1; transform:translateY(0) rotateX(0); filter:blur(0); } 46%,90% { opacity:0; transform:translateY(-24px) rotateX(65deg); filter:blur(2px); } 91% { opacity:0; transform:translateY(24px) rotateX(-65deg); filter:blur(2px); } }
@keyframes ipo-top-second { 0%,38% { opacity:0; transform:translateY(24px) rotateX(-65deg); filter:blur(2px); } 46%,86% { opacity:1; transform:translateY(0) rotateX(0); filter:blur(0); } 94%,100% { opacity:0; transform:translateY(-24px) rotateX(65deg); filter:blur(2px); } }
@keyframes ipo-top-shine { 0%,30% { transform:translateX(-110%); } 65%,100% { transform:translateX(110%); } }
@media (prefers-reduced-motion:reduce) {
 #hdWrap .top_banner::before { display:none; animation:none; }
 #hdWrap .top_banner .ipo-top-copy { display:flex; align-items:center; justify-content:center; gap:24px; }
 #hdWrap .top_banner .ipo-top-message { position:static; width:auto; height:auto; opacity:1; animation:none; transform:none; filter:none; }
}

/* BASIC css end */