@charset "UTF-8";

/* 260722-43 등급별 적립율 말풍선 (모바일) */
.grade_img{position:relative; display:inline-block;}
.grade_point_bubble{
    position:absolute; top:-0.25rem; right:-0.875rem; z-index:2;
    display:inline-block; padding:0.3125rem 0.625rem; border-radius:0.875rem;
    color:#fff; font-size:0.6875rem; font-weight:700; line-height:1; white-space:nowrap;
    box-shadow:0 0.125rem 0.25rem rgba(0,0,0,.18);
}
.grade_point_bubble:after{
    content:""; position:absolute; left:0.75rem; bottom:-0.3125rem;
    border-left:5px solid transparent; border-right:5px solid transparent;
    border-top:6px solid; border-top-color:inherit;
}
.grade_point_bubble.green {background:#465830; border-top-color:#465830;}
.grade_point_bubble.blue  {background:#264b7f; border-top-color:#264b7f;}
.grade_point_bubble.purple{background:#623271; border-top-color:#623271;}
.grade_point_bubble.red   {background:#bd272a; border-top-color:#bd272a;}
.grade_point_bubble.black {background:#181c1e; border-top-color:#181c1e;}

.pop_bg {position:fixed; left:0; top:0; bottom:0; right:0; background-color:rgba(0, 0, 0, .7); z-index:100; padding: 0 0.9375rem;}
.pop_bg .pop_wrap {width:100%; max-width:25rem; background-color:#fff; border-radius:0.625rem; overflow:hidden; position:relative;top:50%; transform:translateY(-50%); padding-bottom:1.25rem; min-width:13.0625rem;}
.pop_bg .pop_wrap .pop_head {background-color:#686868; position:relative; height:2.375rem;}
.pop_bg .pop_wrap .pop_head img {position:absolute; right:0.4375rem; top:0.25rem; width:0.625rem; height:0.625rem; padding:0.625rem;}
.pop_bg .pop_wrap .pop_body {text-align:center; padding:1.25rem 0 0;}
.pop_bg .pop_wrap .pop_body img {width:2.8125rem;display: block; margin: 0 auto 0.625rem;}
.pop_bg .pop_wrap .btn_wrap {margin:0.9375rem 0 0px;}
.pop_bg .pop_wrap .btn_wrap ul {text-align:center;}
.pop_bg .pop_wrap .btn_wrap ul li {display: inline-block;}
.pop_bg .pop_wrap .btn_wrap ul li button {width:6.25rem; height:2.25rem; line-height:2.125rem;background-color:#e10505; border:1px solid #e10505; color:#fff; text-align:center;}
.pop_bg .pop_wrap .btn_wrap ul li:last-child {margin-left:0.3125rem;}
.pop_bg .pop_wrap .btn_wrap ul li:last-child button {border:1px solid #cccccc; color:#222222; background-color:#fff;}

/* 250519:포트폴리오 갤러리설정 */
.pflist_pick_list {/*min-height:18.75rem;*/ border-bottom:1px solid #222;height: 3.625rem; box-sizing: border-box;}
.pflist_list{padding:1.875rem 0;}
.pflist_list_cont{position:relative; width:100%; border-top:2px solid #e5e5e5; box-shadow: 0 -0.25rem 0.25rem -0.125rem rgba(0, 0, 0, 0.08);}
.pflist_list_cont ul {display: flex;flex-wrap: wrap; gap: 0.625rem; padding: 1.25rem 0 0 0.625rem; margin: 0; list-style: none; justify-content: flex-start;}
.pflist_list_cont ul li { width: calc(50% - 0.625rem); box-sizing: border-box; padding: 0.625rem; text-align: center; font-size: 0.75rem;}

.pflist_item_tit_box{padding:0;}
.pflist_item_tit_box .item_name{text-align:center; padding:0.3125rem 0 0 0; font-size:1rem; font-weight:500; color:#222;}
.pflist_item_info_cont{display:table-cell; padding:1.25rem 0 0 0; text-align:center; width: 17.8125rem; vertical-align:middle; font-size:0.75rem;}
.item_gallery_type .item_cont .item_photo_box img {width:100%; border:1px solid #e1e1e1;}

/** 서브상단이미지**/
.headerimg {}
.headerimg img {width:100%;  }

/*** 250526:상단하위카테메뉴 ***/
.list_item_category { padding-bottom:0.1875rem;  margin-bottom:1.25rem;}
.list_item_category > ul { display: flex; flex-wrap: wrap; padding: 0; margin: 0 ; list-style: none; flex-direction: row; border-bottom: 1px solid #eee;}
.list_item_category > ul li { box-sizing: border-box; flex: 0 0 33.3333%; max-width: 33.3333%; height: 3.125rem; display: flex; align-items: center; justify-content: center; 
     padding: 0 0.3125rem; text-align: center;  border-bottom: 1px solid #eee;  border-right: 1px solid #ddd;  border-top: none; background-color:#fff; border-bottom: 1px solid #eee;}
.list_item_category > ul li a { font-size:0.8125rem; color:#232323;  }
.list_item_category > ul li:nth-child(-n+3) { border-top: 1px solid #ddd ;}
.list_item_category > ul li:nth-child(3n) { border-right: none;}
.list_item_category > ul li.selected { border: 1px solid #ed1c24;}
.list_item_category > ul li.selected a { color: #ed1c24;font-weight: 500; }


/* 맞춤 제작 */
.custom_item_category { padding-bottom:0.1875rem; margin-bottom:1.25rem;}
.custom_item_category > ul { display: flex; flex-wrap: wrap; padding: 0; margin: 0; list-style: none; flex-direction: row;border-bottom: 1px solid #eee; }
.custom_item_category > ul li { box-sizing: border-box; flex: 0 0 50%; max-width: 50%; height: 2.8125rem; display: flex; align-items: center; justify-content: center; 
     padding: 0 0.3125rem; text-align: center;  border-bottom: 1px solid #eee;  border-right: 1px solid #ddd;  border-top: none; background-color:#fff; border-bottom: 1px solid #eee;}
.custom_item_category > ul li a { font-size:0.8125rem; color:#232323;  }
.custom_item_category > ul li.on { border: 1px solid #ed1c24;}
.custom_item_category > ul li.on a { color: #ed1c24;font-weight: 500; }
.custom_item_category > ul li:nth-child(2n) { border-right: none;}

.custom_item_category > ul li.selected { border: 1px solid #ed1c24;}
.custom_item_category > ul li.selected a { color: #ed1c24;font-weight: 500; }

.custom_item .gray_box { background-color: #f7f7f7;}
.custom_item .gray_box p { font-size: 0.875rem; font-weight: 400; color: #222; padding: 0.9375rem; text-align: center;}

.custom_item .sample_box img { width: 100%; display: block;}
.custom_item .sample_box div { margin: 1.5625rem 0 0;}
.custom_item .sample_box a {background-color: #ed1c24; display: block; font-size: 1rem; font-weight: 500; color: #fff; height: 3.4375rem; line-height: 3.4375rem; text-align: center;}


/* 자동견적 */
.auto_estimate {padding:1.5625rem 0.9375rem 0; border-top:2px solid #444444;}
.auto_estimate .table_wrap  { margin:1.25rem 0 0;}
.auto_estimate .table_wrap table {}
.auto_estimate h2.tit {background-color:#e1e1e1; font-size:1.125rem; font-weight:500; color:#222; padding-top:0.9375rem;width:100%; height:2.5rem; text-align:center; }

/*250527:텍스트앞 빨간박스추가*/
.custom_result_new .table_result h2.tit::before {  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 0.3125rem;  height: 0.3125rem; background-color: red;}

.auto_estimate .table_wrap table tr {border-top:1px solid #e6e6e6;}
.auto_estimate .table_wrap table tr th {background-color:#fafafa; font-size:0.875rem; font-weight:500; color:#222; padding:0.9375rem 0 0.9375rem 1.25rem; text-align:left; border-bottom:1px solid #e6e6e6;}
.auto_estimate .table_wrap table tr td {font-size:0.875rem; font-weight:400; color:#222;padding:0.9375rem; border-bottom:1px solid #e6e6e6;} 
.auto_estimate .table_wrap table tr td .sel_box {margin:0.3125rem 0 0;}
.auto_estimate .table_wrap table tr td .inp_rdo {display: block;}

/* 주문제작 안내 */
.order_guide {  background: #eaeaea; padding: 2.5rem 0; display: flex; flex-direction: column; align-items: center; gap:1.875rem;}
.order_guide .list_item_category {margin:0.625rem 0;}
.order_guide .list_item_category ul {display:table; width:100%;}
.order_guide .list_item_category ul li {display: table-cell; width:25%; margin-right:-0.1875rem; text-align:center; position:relative;vertical-align:middle;}
.order_guide .list_item_category ul li:nth-child(2):after {content:''; position:absolute; width:0.0625rem; height:0.75rem; display: block; background-color:#eeeeee; right:0; top:50%; margin-top:-0.375rem;}
.order_guide .list_item_category ul li:nth-child(2):before {content:''; position:absolute; width:0.0625rem; height:0.75rem; display: block; background-color:#eeeeee; left:0; top:50%; margin-top:-0.375rem;}
.order_guide .list_item_category ul li a {display: block}
.order_guide .list_item_category ul li a span {font-size:0.875rem; font-weight:500; color:#222;}
.order_guide .list_item_category ul li.on {}
.order_guide .list_item_category ul li.on a span {color:#ed1c24;}

.guide_page { padding: 0.625rem 0px; display: flex; flex-direction: column; align-items: center; }
/* 261022-7 : 모아모아배송 안내(service/delivery.html) 텍스트화 — 원래 이미지 m_3SK_moa_01~04(폭 1000px 를 화면폭에 맞춤)와 같은 배치. 글자는 원래 이미지보다 작지 않게(rem) */
.moa_guide {width:100%; margin:0.75rem 0 0; text-align:center; color:#222;}
.moa_guide .moa_h1 {font-family:'GmarketSans',sans-serif; font-size:1.25rem; font-weight:700; color:#000; margin:0;}
.moa_guide .moa_sum {margin:0.5rem 0.75rem 1.25rem; font-size:0.875rem; line-height:1.55; color:#555; word-break:keep-all;}
.moa_bg {background:#e4e4e4; padding:2.4375rem 0 2.75rem;}
.moa_card {width:90%; margin:0 auto; background:#fcfcfc; border-radius:0.375rem; box-shadow:0 1px 4px rgba(0,0,0,.05); box-sizing:border-box;}
.moa_area {padding:2.375rem 0 2.1875rem;}
.moa_tt {font-size:1.9375rem; font-weight:900; line-height:1.1; letter-spacing:-0.035em; color:#141414; margin:0;}
.moa_tt em {font-style:normal; font-weight:900; color:#ed1620;}
.moa_guide .moa_table {width:88.9%; margin:2.0625rem auto 0; border-collapse:separate; border-spacing:0; table-layout:fixed; border-bottom:1px solid #dcdcdc;}
.moa_guide .moa_table col.c_fast {width:18.25%;}
.moa_guide .moa_table col.c_pack {width:18.5%;}
.moa_guide .moa_table thead th {height:2.3125rem; padding:0; font-size:0.6875rem; font-weight:700; line-height:1.2; color:#fff; background:#1c1c1c;}
.moa_guide .moa_table thead th.h_fast {background:#357de0; border-radius:0.3125rem 0 0 0.3125rem;}
.moa_guide .moa_table thead th.h_pack {background:#e31c23; border-radius:0 0.3125rem 0.3125rem 0;}
.moa_guide .moa_table td {height:2.125rem; padding:0.25rem 0.1875rem; font-size:0.6875rem; line-height:1.3; color:#4d4d4d; background:#fdfdfd; word-break:keep-all;}
.moa_guide .moa_table td.area {border-left:1px solid #dedede; border-right:1px solid #dedede;}
.moa_guide .moa_table tbody tr:nth-child(even) td {background:#f5f5f5;}
.moa_guide .moa_table td.n_fast, .moa_guide .moa_table td.n_pack {font-size:1.0625rem; font-weight:700; letter-spacing:-0.04em; color:#2c7bf2;}
.moa_guide .moa_table td.n_pack {color:#ec151c;}
.moa_map {position:relative; margin:1.0625rem 0 0;}
.moa_map img {display:block; width:100%;}
.moa_map::after {content:"!"; position:absolute; left:68.1%; top:65.1%; width:8.2%; padding-top:8.2%; height:0; border-radius:50%; background:#d80303;}
.moa_map::before {content:"!"; position:absolute; z-index:1; left:68.1%; top:65.1%; width:8.2%; margin-top:0.1875rem; color:#fff; font-size:1rem; font-weight:800; line-height:1; text-align:center;}
.moa_notice {position:absolute; left:48.7%; top:69.4%; width:49.1%; min-height:27.8%; background:#2b2b2b; clip-path:polygon(0 0,100% 0,100% calc(100% - 1rem),calc(100% - 0.6875rem) 100%,0 100%);}
.moa_notice p {margin:2px; min-height:calc(100% - 4px); padding:0.875rem 0.375rem 0.75rem 0.625rem; box-sizing:border-box; background:#fcfcfc; text-align:left; font-size:0.6875rem; line-height:1.4; color:#444; letter-spacing:-0.04em; word-break:keep-all; clip-path:polygon(0 0,100% 0,100% calc(100% - 0.9375rem),calc(100% - 0.625rem) 100%,0 100%);}
.moa_notice p br {display:none;}
.moa_notice p b {font-weight:700; color:#222;}
.moa_notice p b.b1 {font-weight:500;}
.moa_types {display:flex; justify-content:center; gap:2.6%; margin:1.75rem 0 0;}
.moa_type {width:41.1%; box-sizing:border-box; border:3px solid #357de0; border-radius:0.3125rem; padding:1.125rem 0.25rem 1.25rem;}
.moa_type.pack {border-color:#e31c23;}
.moa_type img {display:block; height:2.9375rem; margin:0 auto; mix-blend-mode:multiply;}
.moa_type strong {display:block; margin:0.875rem 0 0; font-size:1.3125rem; font-weight:900; letter-spacing:-0.04em; color:#357de0;}
.moa_type.pack strong {color:#e31c23;}
.moa_type p {margin:0.5rem 0 0; font-size:0.75rem; font-weight:500; line-height:1.4; color:#222; word-break:keep-all;}
.moa_when {margin:1.0625rem 0.5rem 0; font-size:0.9375rem; line-height:1.35; color:#444; letter-spacing:-0.03em; word-break:keep-all;}
.moa_when b {color:#2c7bf2; font-weight:700;}
.moa_when span {font-size:0.6875rem; color:#333;}
.moa_when span b {color:#111;}
.moa_hero {position:relative; padding-top:58.2%; margin:0.1875rem 0 0; background:#e0e0e0 url(/data/250801/sub/moa_hero.jpg) no-repeat 0 0 / 100% auto; text-align:left;}
.moa_hero_tt {position:absolute; left:8.3%; top:10%; margin:0; font-size:2.375rem; font-weight:900; line-height:1.12; letter-spacing:-0.06em; color:#151515;}
.moa_hero_tt em {position:relative; display:inline-block; padding:0 1.625rem 0 1.5625rem; font-style:normal; font-weight:900; color:#e8141c;}
.moa_hero_tt em::before, .moa_hero_tt em::after {content:""; position:absolute; top:50%; width:1.0625rem; height:0.625rem; margin-top:-0.25rem; border-top:3px solid #e8141c; border-bottom:3px solid #e8141c; box-sizing:border-box;}
.moa_hero_tt em::before {left:0;}
.moa_hero_tt em::after {right:0;}
.moa_hero_txt {margin:0; padding:0.5rem 8.3% 1.25rem; font-size:0.8125rem; /* 261022-7 : 모바일은 트럭 그림과 겹치지 않게 그림 아래로 */ font-weight:300; line-height:1.1875rem; letter-spacing:-0.04em; color:#555;}
.moa_hero_txt b {background:#111; color:#fff; font-weight:700; padding:0 2px;}
.moa_service {padding:1.625rem 5.5% 1.75rem; text-align:left;}
.moa_service .moa_h3 {margin:0; text-align:center; font-size:1.375rem; font-weight:900; letter-spacing:-0.04em; color:#222;}
.moa_service .moa_photo {display:block; width:100%; margin:1rem 0 0;}
.moa_service .moa_note_tt {display:inline-block; margin:1.875rem 0 0 4.6%; font-size:0.9375rem; font-weight:700; letter-spacing:-0.04em; color:#222; border-bottom:2px solid #222; padding-bottom:1px;}
.moa_notes {margin:0.75rem 0 0 4.6%; padding:0; list-style:none;}
.moa_notes li {position:relative; margin:0 0 0.4375rem; padding-left:0.5rem; font-size:0.75rem; line-height:1.45; letter-spacing:-0.04em; color:#444; word-break:keep-all;}
.moa_notes li::before {content:"-"; position:absolute; left:0; top:0;}
.moa_notes li br {display:none;}
.moa_notes li b {color:#222; font-weight:700;}
.moa_reco {margin-top:1rem; padding:2.0625rem 0 2.375rem;}
.moa_reco_sub {margin:0; font-size:1.25rem; font-weight:300; letter-spacing:-0.04em; color:#333;}
.moa_reco_tt {margin:0; font-size:2.0625rem; font-weight:900; letter-spacing:-0.05em; color:#141414;}
.moa_reco ul {width:88%; margin:1.375rem auto 0; padding:0; list-style:none; text-align:left;}
.moa_reco li {height:2.25rem; margin:0 0 0.8125rem; padding-left:2.625rem; border-radius:1.125rem; background:#ffefef url(/data/250801/sub/moa_check.png) no-repeat 0.9375rem 50% / 1.25rem auto; box-shadow:0 2px 5px rgba(0,0,0,.06); font-size:0.8125rem; line-height:2.25rem; letter-spacing:-0.04em; color:#333; white-space:nowrap;}
.moa_reco li:last-child {margin-bottom:0;}
.moa_reco li b {color:#111; font-weight:700;}
/* 261022-8 : 주문제작 안내(service/order_guide.html) h1·요약 — 본문은 이미 텍스트 */
.og_h1 {font-family:'GmarketSans',sans-serif; font-size:1.25rem; font-weight:700; color:#000; margin:1rem 0 0; text-align:center;}
.og_sum {margin:0.5rem 0.75rem 0.25rem; font-size:0.875rem; line-height:1.55; color:#555; text-align:center; word-break:keep-all;}
/* 261022-9 : 대량구매(벌크) 안내(service/bulk_guide.html) 텍스트화 — 원래 이미지(폭 1000px 를 화면폭에 맞춤)와 같은 배치. 글자는 원래 이미지보다 작지 않게(rem) */
.bk_guide {width:100%; margin:0.75rem 0 0; text-align:center; color:#222;}
.bk_guide .bk_h1 {font-family:'GmarketSans',sans-serif; font-size:1.25rem; font-weight:700; color:#000; margin:0;}
.bk_guide .bk_sum {margin:0.5rem 0.75rem 1.25rem; font-size:0.875rem; line-height:1.55; color:#555; word-break:keep-all;}
.bk_img {display:block; width:100%;}
.bk_what {aspect-ratio:1000/401; padding:6.5% 0 0 9.3%; box-sizing:border-box; background:url(/data/250801/sub/bk_what.jpg) no-repeat 0 0 / 100% auto; text-align:left;}
.bk_what h2 {margin:0; font-size:1.5625rem; font-weight:800; line-height:1.2; letter-spacing:-0.04em; color:#111;}
.bk_what p {margin:0.375rem 0 0; font-size:0.6875rem; line-height:1.45; letter-spacing:-0.03em; color:#555;}
.bk_what p b {color:#222; font-weight:700;}
.bk_dark {background:#000; overflow:hidden;}
.bk_card {width:90.1%; margin:0 auto; text-align:center;}
.bk_ch {height:2.125rem; margin:0; padding:0 0 0 7.6%; border-radius:1rem 1rem 0 0; background:#6c6c6c; color:#fff; font-size:1rem; font-weight:400; line-height:2.125rem; letter-spacing:-0.04em; text-align:left; white-space:nowrap;}
.bk_ch em {font-style:normal; color:#ffd400;}
.bk_ch b {font-weight:700;}
.bk_card.yellow .bk_ch {background:#ffbc0f; color:#111; font-weight:700;}
.bk_card.black .bk_ch {background:#000;}
.bk_cb {display:flow-root; border-radius:0 0 1rem 1rem; background:#fff;}
.bk_quote {margin:0; padding:0 0.5rem; font-size:0.75rem; font-weight:700; letter-spacing:-0.04em; color:#e01717; word-break:keep-all;}
.bk_s1 {padding:0.4375rem 0 1rem;}
.bk_s1 .bk_card + .bk_card {margin-top:2.3rem;}
.bk_ph3 {display:flex; justify-content:center; gap:2.3%; margin:0; padding:1.15rem 0 0; list-style:none;}
.bk_ph3 li {width:27.4%;}
.bk_ph3 img {display:block; width:100%;}
.bk_ph3 p {margin:0.375rem 0 0; font-size:0.75rem; line-height:1.15; letter-spacing:-0.03em; color:#222;}
.bk_ph3 p b {font-weight:800;}
.bk_s1 .bk_ph3 + .bk_quote {margin:1.25rem 0 0.75rem;}
.bk_flow {display:block; width:88.8%; margin:0.875rem auto 0;}
.bk_flow + .bk_quote {margin:0.375rem 0 0.75rem;}
.bk_s2 {padding:3.4rem 0 1.375rem;}
.bk_alert {display:block; width:24.7%; margin:0 auto;}
.bk_diff_tt {margin:1.25rem 0 0; font-size:2rem; font-weight:400; line-height:1.95rem; letter-spacing:-0.04em; color:#fff;}
.bk_diff_tt b {font-weight:800;}
.bk_s2 .bk_card {margin-top:2.5rem;}
.bk_truck {display:block; width:72.8%; margin:0 auto; padding-top:2rem;}
.bk_feats {width:93.4%; margin:2.25rem auto 0; padding:0; list-style:none; text-align:left;}
.bk_feats li {position:relative; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; min-height:5.625rem; margin:0 0 0.3125rem; padding:0.75rem 0.5rem 0.75rem 37.7%; box-sizing:border-box; border-radius:0.25rem; background:#f5f5f6 url(/data/250801/sub/bk_check.png) no-repeat 3.3% 50% / 1.125rem auto;}
.bk_feats li::before {content:""; position:absolute; left:13.9%; top:50%; width:3.3rem; height:3.3rem; margin-top:-1.65rem; border-radius:50%; background:#fff;}
.bk_feats li img {position:absolute; left:13.9%; top:50%; width:2rem; margin:0 0 0 0.65rem; transform:translateY(-50%);}
.bk_feats strong {display:inline-block; font-size:0.9375rem; font-weight:800; letter-spacing:-0.04em; color:#111; background:linear-gradient(transparent 55%, #f6cfd6 55%);}
.bk_feats p {margin:0.25rem 0 0; font-size:0.75rem; line-height:1.35; letter-spacing:-0.04em; color:#222; word-break:keep-all;}
.bk_feats p br {display:none;}
.bk_note {margin:0.4375rem 0 0 4.6%; padding-bottom:1.75rem; font-size:0.75rem; font-weight:700; letter-spacing:-0.03em; color:#e01717; text-align:left;}
.bk_s3 {padding:1.125rem 0 0.875rem;}
.bk_units {display:flex; justify-content:center; gap:8%; margin:0; padding:2.25rem 0 0; list-style:none;}
.bk_units li {width:36%;}
.bk_units img {display:block; width:100%; margin:0 auto;}
.bk_units p {margin:0.875rem 0 0; font-size:0.75rem; line-height:1.3; letter-spacing:-0.03em; color:#222;}
.bk_units p em {font-style:normal; font-weight:700; color:#e01717;}
.bk_units p b {display:block; margin-top:0.125rem; font-size:1.1875rem; line-height:1.2; font-weight:800; white-space:nowrap;}
.bk_units + .bk_quote {margin:0.625rem 0 0.75rem;}
.bk_light {background:#efefef; padding:3.3rem 0 2rem;}
.bk_qc_tt {margin:0 0 3rem; font-size:2.375rem; font-weight:900; line-height:1.05; letter-spacing:-0.04em; color:#111;}
.bk_qc_tt em {font-style:normal; font-weight:900; color:#e01717;}
.bk_light .bk_card + .bk_card {margin-top:2.125rem;}
.bk_ph2, .bk_ph1 {display:flex; justify-content:center; gap:3.9%; margin:0; padding:1rem 0 0.5rem; list-style:none;}
.bk_ph2 li {width:43%;}
.bk_ph1 li {width:86%;}
.bk_ph2 img, .bk_ph1 img {display:block; width:100%;}
.bk_ph2 p, .bk_ph1 p {margin:0.25rem 0 0; font-size:0.75rem; letter-spacing:-0.03em; color:#222;}
.bk_cs_tt {display:flex; justify-content:space-between; width:80%; margin:0 auto; padding:1.125rem 0 0; list-style:none;}
.bk_cs_tt li {width:33%; font-size:0.75rem; font-weight:700; letter-spacing:-0.04em; color:#222;}
.bk_cs {display:block; width:93%; margin:0.125rem auto 0;}
.bk_cs + .bk_quote {margin:0.125rem 0 0.5rem;}
.bk_chat {padding:0 0 0.75rem; background:#adc2d3; text-align:left;}
.bk_chat_head {position:relative; height:3.5rem; border-bottom:2px solid #0d1c32;}
.bk_chat_head h2 {margin:0; font-size:1.125rem; font-weight:500; line-height:3.5rem; letter-spacing:-0.03em; color:#111; text-align:center;}
.bk_chat_head::before {content:""; position:absolute; left:1.1rem; top:1.25rem; width:0.875rem; height:0.875rem; border-left:2px solid #111; border-bottom:2px solid #111; transform:rotate(45deg);}
.bk_chat_head::after {content:""; position:absolute; right:1rem; top:1.0625rem; width:1.875rem; height:1.3125rem; background:linear-gradient(#111,#111) 0 0/100% 2px no-repeat, linear-gradient(#111,#111) 0 50%/100% 2px no-repeat, linear-gradient(#111,#111) 0 100%/100% 2px no-repeat;}
.bk_chat_list {margin:0; padding:2.375rem 0 0;}
.bk_chat_list dt, .bk_chat_list dd {position:relative; display:block; width:fit-content; max-width:66%; box-sizing:border-box; margin:0; padding:0.3125rem 0.75rem; font-size:0.75rem; line-height:1.0625rem; letter-spacing:-0.03em; color:#111; word-break:keep-all;}
.bk_chat_list dt {margin:0 0 0 16%; border-radius:0.875rem; background:#fff;}
.bk_chat_list dt::after {content:""; position:absolute; left:-0.375rem; top:1px; border-top:0.625rem solid #fff; border-left:0.6875rem solid transparent;}
.bk_chat_list dt::before {content:""; position:absolute; left:-2.875rem; top:-0.875rem; width:2.1875rem; height:2.1875rem; background:url(/data/250801/sub/bk_avatar_user.png) no-repeat 0 0 / 100% 100%;}
.bk_chat_list dd {margin:1.25rem 16% 1.25rem auto; border-radius:0.75rem; background:#fee800; text-align:right;}
.bk_chat_list dd::after {content:""; position:absolute; right:-0.375rem; top:1px; border-top:0.625rem solid #fee800; border-right:0.6875rem solid transparent;}
.bk_chat_list dd::before {content:""; position:absolute; right:-3.125rem; top:-0.875rem; width:2.625rem; height:2.4375rem; background:url(/data/250801/sub/bk_avatar_3sk.png) no-repeat 0 0 / 100% 100%;}
.bk_notice {background:#f2f0f0; text-align:left;}
.bk_notice_head {padding:1.375rem 0 1.25rem; background:#3f3f3f; text-align:center; color:#fff;}
.bk_notice_head h2 {margin:0; font-size:1.8125rem; font-weight:800; line-height:1.15; letter-spacing:-0.03em;}
.bk_notice_head p {margin:0.125rem 0 0; font-size:1.125rem; font-weight:300; letter-spacing:-0.03em;}
.bk_notice_head p span {display:inline-block; width:1.0625rem; height:1.0625rem; border:1px solid #fff; border-radius:50%; font-size:0.75rem; font-weight:700; line-height:1.0625rem; vertical-align:2px;}
.bk_notice_body {padding:1.625rem 0.75rem 1.25rem 0;}
.bk_notice_body h3 {margin:0 0 0 0.875rem; padding-left:0.5rem; border-left:3px solid #3f3f3f; font-size:0.9375rem; font-weight:800; line-height:0.9375rem; letter-spacing:-0.03em; color:#111;}
.bk_notice_body h3.line {position:relative; margin-top:2.25rem;}
.bk_notice_body h3.line::before {content:""; position:absolute; left:-0.875rem; right:-0.75rem; top:-1.125rem; border-top:1px solid #d1d1d1;}
.bk_notice_body ul {margin:0.5rem 0 0 1.0625rem; padding:0; list-style:none;}
.bk_notice_body li {position:relative; padding-left:0.625rem; font-size:0.75rem; line-height:1.55; letter-spacing:-0.02em; color:#444; word-break:keep-all;}
.bk_notice_body li::before {content:"-"; position:absolute; left:0; top:0;}
.bk_notice_body li b {color:#111; font-weight:700;}
.white_box { background: #fff; padding: 1.25rem; box-shadow: 0 0.25rem 0.3125rem rgba(0,0,0,0.3); max-width: 66.875rem;  width: 100%; box-sizing: border-box; text-align: center;}
.white_box h2 { font-family: 'GmarketSansMedium', sans-serif; font-size: 1.875rem; font-weight: 800; color: #000; margin-bottom: 1.25rem;}
.black_boxes { display: flex;flex-direction: column; flex-wrap: wrap; gap: 0.625rem; justify-content: center; margin-bottom: 1.25rem;}
.black_box { background: #000; color: #fff; flex: 1; min-width: 11.25rem; padding: 0.625rem 0.4375rem; border-radius: 0.625rem; display: flex; align-items: center; gap: 0.625rem; box-sizing: border-box;}
.black_box img { width: 1.5625rem; height: auto; max-width: 3.125rem;  display: block;}
.black_box p { margin: 0; font-weight: 300; font-size: 0.875rem;text-align: left;}
.black_box p span { font-weight: 600;}
.icon_center img,
.bottom_image img { width: 3.125rem; height: auto; max-width: 100%; display: block; margin: 0.9375rem auto 0.625rem;}
.bottom_image img { width: 10rem; height: auto; max-width: 100%; display: block; margin: 0.9375rem auto 0.625rem;}

.order_how { width: 100%; display: flex; justify-content: center; }
.how_white {  background: #fff; padding: 1.25rem 0.625rem 1.875rem; box-shadow: 0 0.25rem 0.3125rem rgba(0,0,0,0.3); max-width: 66.875rem; width: 100%; box-sizing: border-box; text-align: center;}
.how_white h2 { font-family: 'GmarketSansMedium', sans-serif; font-size: 1.875rem; font-weight: 800; color: #000; margin-bottom: 1.25rem;}
.how_boxes { display: flex; flex-wrap: nowrap;  justify-content: space-between; gap: 0; }
.how_box { flex: 1;min_width: 0; padding: 0.625rem; text-align: center; box-sizing: border-box; border-right: 1px dashed #ccc; }
.how_box:last-child {border-right: none; }
.how_box img { width: 5rem; height: auto; margin-bottom: 0.625rem;}
.how_title { color: #e40101; font-size: 1rem; letter-spacing: -1px; font-weight: 600; margin: 0 0 0.3125rem 0;}
.how_desc { color: #121212; font-size: 0.75rem; font-weight: 400; margin: 0;}

/* 주문제작시스템*/
.custombox {text-align:center; background-color:#fbf5f5; }
.custombox .icon {display: inline-block; width: 6.25rem; height:auto;  margin-top:1.25rem;}
.custombox img {display: inline-block; width: 95%; height:auto; padding:1.25rem 0;}
.custombox h4 {font-family: 'GmarketSans', sans-serif;font-size:1.875rem;font-weight: 600; color: #000; line-height: 3.125rem; text-align:center; }
.custombox h2 {font-size:1rem;font-weight: 400; color: #242424; line-height: 1.25rem; text-align:center;}
.custombox h2 .bold {font-weight: 600;}
.custombox_but {text-align:center; background-color:#fbf5f5; width:100%; padding-bottom:3.75rem; }
.custombox_but .custombox_1 {display: inline-flex;flex-direction: column; justify-content: center; line-height: 1.25rem; align-items: center; width: 45%; font-family: 'GmarketSans', sans-serif;  border-radius: 1.875rem; background-color: #f0aa01;font-size: 1rem;font-weight: 500; color: #fff; padding: 0.625rem 0 0.5rem; margin-right:0.9375rem;}
.custombox_but .custombox_2 {display: inline-flex;flex-direction: column;justify-content: center; line-height: 1.25rem; align-items: center; width: 45%; font-family: 'GmarketSans', sans-serif; border-radius: 1.875rem; background-color: #da0000;font-size: 1rem;font-weight: 500;color: #fff;padding: 0.625rem 0 0.5rem;}


/* 주문제작과정 영역 */
.order_process { width: 100%; display: flex; justify-content: center;}
.process_white { background: #fff; padding: 1.25rem 1.25rem 1.875rem 1.25rem; box-shadow: 0 0.25rem 0.3125rem rgba(0,0,0,0.3); max-width: 66.875rem; width: 100%; box-sizing: border-box; text-align: center;}
.process_white h2 { font-family: 'GmarketSansMedium', sans-serif; font-size: 1.875rem; font-weight: 800; color: #000; margin-bottom: 1.25rem;}
.process_boxes { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.3125rem;}
.process_box {  background: #fff; border: 4px solid #25941d; border-radius: 0.9375rem; padding: 0.625rem 0.4375rem; text-align: center; min-width: 5.625rem; max-width: 12.5rem; min-height: 10rem; box-sizing: border-box; flex: 1 1 90px; }
.process_icon img { width: 0.9375rem; height: auto; display: block;}
.process_box img { width: auto;padding-top:0.625rem;  height: 2.8125rem;}
.process_title {  font-size: 1rem;letter-spacing: -1px;  font-weight: 600;  color: #25941d;  margin: 0;}
.process_box hr {  border: none;  border-top: 1px solid #949494;  margin: 0.25rem 0;width:100%;}
.process_desc {  font-size: 0.75rem;  color: #121212;  margin: 0;  line-height: 0.9375rem;letter-spacing: -1px;  word-break: keep-all;}
.step_wrapper {  position: relative;  margin: 2.5rem auto 0;  display: flex;  justify-content: center; max-width: 66.875rem; width: 100%; box-sizing: border-box;}
.step_label {display: inline-block; white-space: nowrap;  position: absolute; top: -1.125rem; left: 50%; transform: translateX(-50%);   background: #e0001b; color: #fff;  font-size: 0.9375rem;  font-weight: 700;
  padding: 0.4375rem 1.25rem 0.9375rem;  border-radius: 0.625rem 0.625rem 0 0;  z-index: 2;  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), 50% 100%, 0 calc(100% - 10px));}
.step_box {  background: #fff;  border: 1px solid #2c2c2c;  padding: 1.25rem;  width: 100%;  text-align: center;  box-sizing: border-box;}
.step_text {  font-size: 1rem;  color: #000;  margin: 1.25rem 0 0.9375rem;  line-height: 1.4;}
.step_text .bold {font-weight:600;}
.step_text .red {color:#e40101; font-weight:600; }
.step_text .sub {font-size:0.6875rem; font-weight:600; }
.step_box img {  max-width: 100%;  height: auto;  display: block;  margin: 0 auto;}
.step_text_s {  font-size: 0.8125rem;  color: #000;  line-height: 1.4;}
.box_list {width: 100%;max-width: 45rem;margin: 1.5rem auto;display: flex;flex-direction: column;gap: 0.3125rem;}
.box_row {position: relative;display: flex;align-items: center;}
.box_text { }
.box_text .bdot {position: relative; padding-left: 0.9375rem; font-size:0.75rem; line-height:1.125rem; text-align: left; margin:0.4375rem 0;}
.box_text .bdot::before {content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 0.375rem; height: 0.375rem; background-color: black; border-radius: 50%;}
.step_box .check_box { text-align: left; background: #ffefef; border-radius: 1.875rem; padding: 0.625rem 0.9375rem; margin-bottom: 0.9375rem; box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.step_box .check_box p { margin: 0; font-size: 0.875rem; color: #616161;}
.step_box .check_box .red { color:#e40101; font-weight:600;}
.step_box .check_box .bold { color:#000; font-weight:600;}
.step_box .icon { width: 1.5rem; height: 1.5rem;}
.left_tag {position: absolute;left: 0;top: 50%;transform: translateY(-50%);width: 4.5rem;height: 100%;display: flex;align-items: center;justify-content: center;background: #656565;
		color: #fff;font-size: 0.875rem;text-align: center;border-radius: 1.25rem;z-index: 2;box-sizing: border-box;}
.left_tag_b {position: absolute;left: 0;top: 50%;transform: translateY(-50%);width: 4.5rem;height: 100%;display: flex;align-items: center;justify-content: center;
		background: #000;color: #fff;font-size: 0.875rem;text-align: center;border-radius: 1.25rem;z-index: 2;box-sizing: border-box;}
.text_box {width: 100%;background: #e5e5e5;border-radius: 1.25rem;padding: 0.4375rem 0.625rem 0.4375rem 5rem; box-sizing: border-box;color: #222;text-align: left;}
.step_box h3 {font-family: 'GmarketSans', sans-serif; font-size:1.375rem; font-weight: 700; display: inline-block; vertical-align: middle; }
.step_box h4 {font-size:1.125rem; font-weight: 700; color:#000; display: inline-block; vertical-align: }
.step_box h4 .highlight { color: #e10505;}
.step_box h5 {font-size:0.875rem; font-weight: 400; color:#9c9c9c; display: inline-block; vertical-align: }
.guide_but {margin:1.5625rem 0.9375rem ;}
.guide_but a {display: inline-block; background-color: #e10505; color: #fff; border-radius: 3.125rem; padding: 0.625rem 1.25rem ; font-size: 0.875rem;font-weight: 600;align-items: center; margin: 0 0.9375rem 0.625rem 0;}

.box_types {display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid #ddd; border-left: 1px solid #ddd; width: 100%; margin: 0.9375rem 0 0.625rem;}
.box_types .box_type {display: flex;flex-direction: column; justify-content: flex-start; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; background: #fff; text-align: center; box-sizing: border-box; border-radius: 0; overflow: hidden;}
.box_types .box_type .type_header { background: #f1f1f1;min-height: 1.875rem; font-family: 'GmarketSans', sans-serif; font-weight: 700; font-size: 1rem; padding: 0.75rem 0.5rem;display: flex;align-items: center;justify-content: center;}
.box_types .box_type .type_header_a { background: #da0000;min-height: 1.875rem; font-family: 'GmarketSans', sans-serif; color: #fff; font-weight: 700; font-size: 1rem; padding: 0.75rem 0.5rem;display: flex;align-items: center;justify-content: center;}
.box_types .box_type .type_img {flex: 1; display: flex;align-items: center;justify-content: center;}
.box_types .box_type .type_img img { width: 100%; height: auto; display: block; }
.box_types .box_type .box_desc { width:90%; min-height: 5rem; font-size: 0.875rem; margin: 0.625rem; padding-top:0.3125rem; line-height: 1.4; color: #333; border-top: 1px solid #2b2b2b; display: flex;align-items: center;justify-content: center;}

/* 입력폼 */
.num_input {padding:0.625rem 0.9375rem 0;}
.num_input p.caution {font-size:0.8125rem; color:#ed1c24; padding:0.625rem 0; background-color:#eeeeee; text-align:center;}
.num_input ul { margin-top:0.9375rem; }
.num_input ul li { display: flex; align-items: center; gap: 0.3125rem; margin: 0 0 1.25rem 0;}
.num_input ul li label  { font-size: 0.875rem; font-weight: 500; color: #222; min-width: 4.375rem; /* 고정 너비로 정렬 유지 */}
.num_input ul li input { flex: 1; min-width: 0; border: 1px solid #ccc; height: 2.1875rem; padding-left: 0.3125rem;}
.num_input ul li span{ font-size: 0.875rem; font-weight: 400; white-space: nowrap; }

.btn_centered {margin:1.5625rem 0 0;}
.btn_centered button {display: block; background-color:#ed1c24; font-size:0.9375rem; font-weight:500; color:#ffffff; height:2.8125rem; border:1px solid #ed1c24; width:100%;}
.btn_centered a {display: block; background-color:#fff; font-size:0.9375rem; font-weight:500; color:#ed1c24; height:2.8125rem; line-height:2.6875rem;text-align:center; border:1px solid #ed1c24; width:100%;}
.btn_centered #getEstimateBtn{margin-bottom:0.625rem;}


/* 신규페이지 버튼*/
.order_bt {margin:1.5625rem 0.9375rem ;}
.order_bt a {display: block; background-color:#ed1c24; font-size:0.75rem; font-weight:500; color:#ffffff; text-align: center; height:2.8125rem; line-height: 2.8125rem; border:1px solid #ed1c24; width:100%; margin-bottom:0.625rem; text-decoration: none;}

/* 자동 견적 결과 */
.custom_result {padding:0 0.9375rem;}
.custom_result .table_result {}
.custom_result .table_result h2.tit {font-size:0.9375rem; font-weight:500; color:#222; margin:1.25rem 0 0.625rem;}
.custom_result .table_result table {width:100%; border-collapse:collapse;border-bottom:1px solid #eee;}
.custom_result .table_result table tr {}
.custom_result .table_result table tr th, .custom_result .table_result table tr td {padding:0.5625rem 0.625rem;}
.custom_result .table_result table tr th {background-color:#777777; color:#fff; font-size:0.75rem; font-weight:500;}
.custom_result .table_result table tr th.line {padding:0.125rem 0.625rem;}
.custom_result .table_result table tr td {font-weight:bold; text-align:center; border-right:1px solid #eeeeee;}
.custom_result .table_result table tr td:last-child {border:none;}
.custom_result .table_result table tr td.normal {font-weight:400;}
 
/* 관련상품 */
.relation_goods {margin:2.5rem 0 0; padding-bottom:3.75rem;}
.relation_goods h2.tit {font-size:1.0625rem; font-weight:500; color:#222; padding:0 0 0.625rem 0.9375rem;p}
.relation_goods h2.tit span {font-size:0.875rem; font-weight:500; color:#ed1c24; display: inline-block; margin:0 0 0 0.5rem;}
.relation_goods table {width:100%; border-collapse:collapse; border-top:1px solid #222222;}
.relation_goods table tr {}
.relation_goods table tr th, .relation_goods table td {border-bottom:1px solid #e6e6e6;text-align:center;}
.relation_goods table th {background-color:#fafafa;font-size:0.875rem; font-weight:500; color:#222222; padding:0.375rem 0.3125rem;}
.relation_goods table td {font-size:0.875rem; font-weight:400; color:#222222; padding:0.7188rem 0.3125rem;}
.relation_goods .page_btn_box {text-align: center; margin: 1.875rem 0 1.25rem;}
.relation_goods .page_btn_box .page_number {display: inline-block; height: 1.3125rem; padding: 0 1.875rem 0 1.875rem; color: #9e9e9e; font-size: 0.9375rem;line-height: 1.3125rem; vertical-align: middle;letter-spacing: 0;}
.relation_goods .page_btn_box .page_number strong {color: #5e5e5e;}
.relation_goods .page_btn_box .prev_btn { overflow: hidden; display: inline-block; width: 0.6875rem; height: 1.3125rem; background: url('../img/icon/icon_arrow_prev2.png') no-repeat 0 0; background-size: 0.6875rem 1.3125rem;font-size: 0.0625rem;
    color: transparent;vertical-align: middle;border: none;}
.relation_goods .page_btn_box .next_btn { overflow: hidden; display: inline-block; width: 0.6875rem; height: 1.3125rem; background: url('../img/icon/icon_arrow_next2.png') no-repeat 0 0; background-size: 0.6875rem 1.3125rem; font-size: 0.0625rem;
    color: transparent; vertical-align: middle; border: none;}

/* ====== 20240715 ======= */ 
/* 관련상품 */
.relation_goods .tit_box {display:flex; justify-content: space-between;}	
.relation_goods .tit_box h2.tit {padding-left:0;}
.relation_goods .tit_box h2.tit span{display:block; color:#888888; margin:0;} 
.relation_goods .tit_box .inp_sel{width:8.125rem;}
.relation_goods .tit_box .inp_sel select{border-radius:62.4375rem;}

/* 자동 견적 결과 */
.custom_result_new {padding:0 0.9375rem;}
.custom_result_new .table_result h2.tit {font-size:1.0625rem; font-weight:500; color:#222; margin:1.25rem 0 0.625rem;position: relative; padding-left: 0.75rem;} 
.custom_result_new .noti_txt{margin-top:0.9375rem; text-align:right;} 
.custom_result_new .btn_centered{display:flex; justify-content: space-between;}	  
.custom_result_new .btn_centered a{width:calc(50% - 0.3125rem);}
.custom_result_new .btn_centered a.btn_prev	{border:1px solid #cccccc; color:#000;}	  
.custom_result_new .btn_centered a.btn_detail{border:1px solid #ed1c24; background:#ed1c24; color:#fff;}
.custom_result_new .btn_centered a.btn_submit{border:1px solid #ed1c24; background:#ed1c24; color:#fff;}
.custom_table {width:100%; border-collapse:collapse; border-bottom:1px solid #e6e6e6;}
.custom_table tr {}
.custom_table tr th, .custom_table td {text-align:center;}
.custom_table th {border-top:1px solid #222222;background-color:#fafafa;font-size:0.875rem; font-weight:500; color:#222222; padding:0.375rem 0.3125rem;}
.custom_table th em{color:#ed1c24;}
.custom_table td {border-top:1px solid #e6e6e6;font-size:0.875rem; font-weight:400; color:#222222; padding:0.7188rem 0.3125rem; }

/* 250527:세부견적쓰기수정*/
.custom_dl table tr:first-child th, .custom_dl table tr:first-child td { border-top: 1px solid #222;}
.custom_dl table tr {border-top:1px solid #e6e6e6;}
.custom_dl table tr th {background-color:#fafafa; font-size:0.9375rem; font-weight:500; color:#222; padding:0.9375rem 0 0.9375rem 1.25rem; text-align:left; border-bottom:1px solid #e6e6e6;}
.custom_dl table tr td {font-size:0.9375rem; font-weight:400; color:#222;padding:0.9375rem; border-bottom:1px solid #e6e6e6;} 
.custom_dl table tr td .sel_box {margin:0.3125rem 0 0;}
.custom_dl table tr td .inp_rdo {display: block;}
.custom_dl table tr td .file_row { display: flex; align-items: center; gap: 0.625rem; /* 버튼과 텍스트 사이 간격 */}
.custom_dl table tr td .upload_noti { margin: 0; font-size: 0.875rem; color: red;}
/* 261023-2 : 견적 없이 문의(간단 입력) 표 — 제목칸 여백·글자 줄여 한 줄로 */
.custom_dl.ne_form table tr th {padding:0.75rem 0.25rem 0.75rem 0.75rem; font-size:0.875rem; white-space:nowrap;}
.custom_dl.ne_form table tr td {padding:0.625rem 0.75rem 0.625rem 0.625rem;}
.btn_white {display: inline-block; background-color: #fff; border: 1px solid #ccc; padding: 0.625rem 0.75rem; border-radius: 0.25rem; font-size: 0.875rem;  color: #333; vertical-align: middle;line-height: 1.2;}

.custom_dl dl{padding-bottom:1.25rem;}	
.custom_dl dl dt{font-weight:500; padding-bottom:0.625rem;}
.custom_dl dl dt em{color:#ed1c24;}
.custom_dl dl .b_content_chk .inp_chk img{width:0.75rem;}
.custom_dl input[type='text'],
.custom_dl input[type='password'],
.custom_dl input[type='number'],
.custom_dl input[type='tel'] /* 261023-2 : 연락처 칸도 같은 모양 */
{ width: 100%; height: 2.25rem; padding: 0 0.625rem; box-sizing:border-box;border: 1px solid #cccccc;} 
.custom_dl textarea { width: 100%; height: 6.25rem; padding:0.625rem; box-sizing:border-box;border: 1px solid #cccccc;}
.custom_dl select{ width: 100%; height: 2.25rem;  padding: 0 1.375rem 0 0.625rem; background: #fff url('../img/new/icon_bg_select.png') no-repeat 100% 0; background-size: 25rem 1.9375rem; font-size: 0.875rem; color: #222; border: 1px solid #cccccc;
    box-sizing: border-box; vertical-align: 1px;}
.surface_f_img img{ width:100%;}
.surface_f_bx{display:flex; flex-wrap: wrap;}	 
.surface_f_bx .inp_rdo{width:50%;}			 	 
.surface_f_bx .inp_chk{width:50%;padding:0.3125rem 0;}
.receipt_type .inp_rdo{width:100%;}
.upload_noti{padding-top:0.625rem;}

.b_file,
.upload_noti { display: inline-block; vertical-align: middle;}
.upload_noti {  padding-top: 0;  /* padding-top 제거 */  margin-left: 0.625rem; /* 버튼과 간격 */  font-size: 0.875rem;  color: #666;}

.b_file ul {position:relative; font-size:0;}
.b_file ul li.item {overflow:hidden; display:inline-block; width:1.875rem; height:1.875rem;}
.b_file ul li.item button.file_face { width:100%; height:100%; border:none; background:url('../img/new/btn_file_plus.png') center; background-size:100% 100%; font-size:0;}
.b_file ul li.item button.file_face.preview {border:none; background-size:100% auto; }
.b_file ul li.item input.file_hidden {margin-bottom:-1.25rem; opacity:0;}

.b_guest {padding:3.125rem 0;}
.b_guest dt{padding-bottom:0.9375rem;}
.b_guest dt	strong{font-weight:400;}
.b_guest dt	a{border-bottom:1px solid #444444; color:#444;}
.b_guest dd textarea { width: 100%; height: 6.25rem; padding:0.625rem; box-sizing:border-box;border: 1px solid #cccccc; }

/* 박스가이드 */
.box_guide { text-align:center;}
.boxguide_bin {margin-top:2.5rem}
.box_guide .boxguide_tit {margin:1.875rem 0 1.875rem 0;}
.box_guide .guide_t {font-family: 'GmarketSans', sans-serif; font-size:0.875rem; font-weight: 400; color:#3b3b3b; }
.box_guide .guide_tt {font-family: 'GmarketSans', sans-serif; font-size:1.25rem; font-weight: 700; line-height:1.3; word-break:keep-all; padding:0 0.75rem;} /* 261022-4 : 두 줄일 때 글자 겹침 방지 */
/* 박스가이드 탭 */
.boxguide_tab { width:100%; }
.boxguide_tab ul{display: flex;  height:3.4375rem; margin:0; padding:0; font-size:0; border-bottom: 1px solid #bababa; }
.boxguide_tab li{ display:flex;justify-content: center; flex:1; font-size:1rem; font-weight:300; color:#323232;padding:0.625rem 0; text-align:center; align-items: center; list-style: none; border: 1px solid #bababa;  border-top: 3px solid #4b4b4b;  border-bottom: none; background: #fafafa;; box-sizing: border-box;
  position: relative;line-height: 1.0625rem }
.boxguide_tab li.on { z-index: 1; color:#323232; border-top: 3px solid #e10505;  background: #fff;}
.boxguide_tab li.on a { font-size:0.8125rem; font-weight:500; color:#000; }
.boxguide_tab li.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -0.0625rem; height: 0.0625rem; background: #fff;}
.boxguide_tab li a{ display:block; color:#323232; text-decoration: none; font-size:0.8125rem; font-weight:400; }
.boxguide_tab li + li {margin-left: -0.0625rem;}
.boxguide_tab li:first-child { border-left: none;}
.boxguide_tab li:last-child { border-right: none;}

/* 박스가이드 테두리 */
#boxno,
#sizeguide,
#useguide,
#proguide,
#orderguide {scroll-margin-top: 70px; }

.outer_box { border-radius: 1.25rem; padding: 2.25rem 0.875rem 1.25rem; margin: 1.75rem auto; width: calc(100% - 1.25rem);position: relative; background: #fff; border: 6px solid #c3c3c3; box-sizing: border-box; } /* 261022-4 : 안쪽 여백 조정 */
.outer_box_b { position: relative; background: #fff; border: 6px solid #b9d3d5; border-radius: 1.875rem; margin: 2.5rem auto;  width: min(66.875rem, calc(100% - 1.25rem)); padding: clamp(1rem, 4vw, 3.125rem) 1.25rem; box-sizing: border-box;}
.top_box { top: -1.125rem; left: 0.625rem;  border-radius: 1.875rem;  position: absolute;  margin: 0; background: #000; }
.top_box p {font-size: 0.9375rem; margin: 0.75rem 1.0625rem; font-weight: 500; color:#fff;  vertical-align: middle; height:0.9375rem; line-height: 0.9375rem}
.top_box_b { top: -1.125rem; left: 0.625rem;  border-radius: 1.875rem;  position: absolute;  margin: 0; background: #00838c;  }
.top_box_b p {font-size: 0.9375rem; margin: 0.75rem 1.0625rem; font-weight: 500; color:#fff;  vertical-align: middle; height:0.9375rem; line-height: 0.9375rem}

/* 주문제작 버튼 */
.button_box {text-align:center;margin:0.625rem ; width:95%;}	
.button_box a {display: inline-block; background-color:#e10505; color:#fff; border-radius:3.125rem; width:29%; height:2.1875rem; line-height:2.1875rem; font-size:0.875rem; font-weight:500;align-items: center; margin-right: 0.9375rem;}
.button_box a:last-child {  margin-right: 0;}

/* 박스가이드 갤러리타입 */
.boxguide_gall {position:relative; text-align:center;}
.boxguide_gall ul{font-size:0; display: flex; flex-wrap: wrap; margin: 0; gap: 0.625rem; padding: 0; list-style: none;}
.boxguide_gall ul li{ display:inline-block; position:relative;  margin:0; text-align:center; vertical-align:top;  flex: 1 1 calc(50% - 10px); box-sizing: border-box;}
.boxguide_gall .gall_box {text-align:left; color:#222;width: 100%;  }
.boxguide_gall .gall_box img { width:100%; height: auto; display: block;}
.boxguide_gall .gall_photo_box {display:inline-block !important; overflow:hidden; position:relative; text-align:center; border:1px solid #ebebeb; vertical-align:middle; }
.boxguide_gall .gall_tit_box {padding:0;text-align:center; padding:0.3125rem 0;}
.boxguide_gall .gall_tit_box .gall_code {display: inline; font-size:0.75rem; font-weight:500; color:#222;}
.boxguide_gall .gall_tit_box .gall_size {display: inline; font-size:0.75rem;color:#777; font-weight:400;}

.use_text {margin:0.9375rem 0 0.625rem; }
.guide_use_text {font-size:0.9375rem; line-height:1.5; word-break:keep-all;} /* 261022-4 : 1.125rem→0.9375rem(모바일 본문) */
.post_wrapper { display: flex; justify-content: center;margin-top:1.5625rem;width: 100%;}
.post_layout { align-items:center; text-align:center; }
.post_left img {object-fit: cover; margin-right:0.625rem; width:100%; }
.post_right {  }
.post_right .highlight {color: #e10505;font-family: 'GmarketSans', sans-serif; font-weight: 700; margin-bottom: 0.625rem;}
.post_right_top {text-align:left; margin:1.25rem 0 0.625rem ;}
.post_right_top .bdot {position: relative; padding-left: 0.875rem; font-size:0.875rem; line-height:1.45; margin:0.375rem 0;} /* 261022-4 */
.post_right_top .bdot::before {content: ""; position: absolute; left: 0; top: 0.55em; width: 0.3125rem; height: 0.3125rem; background-color: black; border-radius: 50%;} /* 261022-4 : 여러 줄일 때 점이 첫 줄에 오도록 */
.post_right_top img {text-align:left;}
.post_right_bottom {  }
.post_right_bottom img { object-fit: cover; }
.post_right ul {display: flex; justify-content: space-between; align-items:center; gap:0.5rem; list-style: none; padding: 0; text-align:left; margin:1.25rem 0 0.75rem 0;} /* 261022-4 */
.post_right ul li {display: flex; align-items: center; flex:none;} /* 261022-4 */
.post_right ul li:first-child {flex:1; min-width:0;}
.post_right ul li h3 {font-size:1rem;}
.post_right ul li button {width: 6.25rem; height: 1.875rem; line-height: 1.25rem; font-size: 0.75rem;font-weight: 500; color: #fff; background-color: #e10505; border: 1px solid #e10505;  border-radius: 1.875rem;}

.dgbox_wrapper { display: flex; justify-content: center;margin-top:1.25rem;}
.dgbox_layout { display: flex; align-items: flex-start; text-align:center; }
.dgbox_left img {object-fit: cover; margin-right:0.625rem;}
.dgbox_right { display: flex; flex-direction: column;  }
.dgbox_right .highlight {color: #e10505;font-family: 'GmarketSans', sans-serif; font-size:2rem; font-weight: 700; margin-bottom: 0.625rem;}
.dgbox_right_top {text-align:left; margin:0 0 0.625rem 1.25rem; margin:1.875rem; 0 ;}
.dgbox_right_top .bdot {position: relative; padding-left: 0.9375rem; font-size:1.125rem; font-weight:500px; margin-bottom:0.5rem;}
.dgbox_right_top .bdot::before {content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 0.375rem; height: 0.375rem; background-color: black; border-radius: 50%;}
.dgbox_right_top img {text-align:left;}
.dgbox_right_bottom { display: flex; }
.dgbox_right_bottom img { object-fit: cover; margin:0.4375rem;}
.dgbox_right ul {display: flex; justify-content: space-between; list-style: none; padding: 0; margin: 0; text-align:left; margin:1.5625rem 0 0.9375rem 0;}
.dgbox_right ul li {}
.dgbox_right ul li button {width: 9.375rem; height: 2.5rem; line-height: 2.1875rem; font-size: 0.9375rem;font-weight: 500; color: #fff; background-color: #e10505; border: 1px solid #e10505;  border-radius: 1.875rem;}

.box_table {border-collapse: collapse; border-top:3px solid #000; border-bottom:3px solid #000; width:100%; margin: 0 auto;}
.box_table tr { background: #fafafa;}
.box_table th { background : #f3f1f1;  padding: 0.5rem 0.25rem;  font-size: 0.8125rem; font-weight: 600; border-bottom:1px solid #939393; } /* 261022-4 */
.box_table th a{font-color:#000;  font-weight: 600; }
.box_table .thline {border-right:1px solid #939393; }
.box_table td { padding: 0.375rem 0.25rem;  font-size: 0.75rem; font-weight: 400; font-color:#434343; word-break:keep-all; } /* 261022-4 */
.box_table td a { font-weight: 400; font-color:#434343; }
.box_table .boxlist_right {border-right:1px solid #939393;}
.box_table .boxno {position: relative; padding-left: 0.5rem;font-size: 0.75rem; text-align:left; } /* 261022-4 */
.box_table .dot-text { position: relative; padding-left: 0.625rem; text-align:left;} /* 261022-4 */
.box_table .dot-text a { font-weight: 500;}
.box_table .dot-text::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 0.3125rem;  height: 0.3125rem; background-color: black;  border-radius: 50%; }

.box_table_b {border-collapse: collapse; border-top:3px solid #000; border-bottom:3px solid #000;margin: 0 auto;}
.box_table_b tr { background: #fafafa;}
.box_table_b th { background : #f3f1f1;  padding: 0.5rem;  font-size: 1.125rem; font-weight: 600; border-bottom:1px solid #939393; }
.box_table_b th a{ font-color:#000; font-weight: 600; }
.box_table_b .thline {border-right:1px solid #939393; }
.box_table_b td { padding: 0.375rem 0.875rem;  font-size: 1rem; font-weight: 400; font-color:#434343; }
.box_table_b td a {font-weight: 400; font-color:#434343; }
.box_table_b .boxlist_right {border-right:1px solid #939393;}
.box_table_b .boxno {position: relative; padding-left: 1.5625rem;font-size: 1rem; text-align:left; }
.box_table_b .dot-text { position: relative; padding-left: 0.75rem; text-align:left;}
.box_table_b .dot-text a { font-weight: 500;}
.box_table_b .dot-text::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 0.375rem;  height: 0.375rem; background-color: black;  border-radius: 50%; }

.design_table {border-collapse: collapse; border-top:3px solid #000; border-bottom:3px solid #000;margin: 0 auto;}
.design_table tr { background: #fafafa;}
.design_table th { background : #f3f1f1;  padding: 0.625rem;  font-size: 1.125rem; font-weight: 600; border-bottom:1px solid #939393; }
.design_table th a{ font-color:#000; font-weight: 600; }
.design_table .thline {border-right:1px solid #939393; }
.design_table td { padding: 0.5625rem 0.875rem;  font-size: 1rem; font-weight: 400; font-color:#434343;}
.design_table td a { font-weight: 400; font-color:#434343; }
.design_table .boxlist_right {border-right:1px solid #939393;}

.guide_types {display:grid; grid-template-columns:repeat(2, 1fr); border-top:3px solid #000; border-bottom:3px solid #000; width:100%; margin:0.9375rem 0 0.625rem;} /* 261022-3 : 박스 형태 표 정리 */
.guide_types .guide_type {display:flex; flex-direction:column; border-right:1px solid #e0e0e0; border-bottom:1px solid #e0e0e0; background:#fff; text-align:center; box-sizing:border-box;}
.guide_types .guide_type:nth-child(2n) {border-right:none;}
.guide_types .guide_type:nth-last-child(-n+2) {border-bottom:none;}
.guide_types .guide_type .gtype_header {background:#f3f1f1; height:2.75rem; font-family:'GmarketSans', sans-serif; font-weight:700; font-size:1rem; color:#222; display:flex; align-items:center; justify-content:center; border-bottom:1px solid #939393;}
.guide_types .guide_type .gtype_header_a {background:#da0000; height:2.75rem; font-family:'GmarketSans', sans-serif; color:#fff; font-weight:700; font-size:1rem; display:flex; align-items:center; justify-content:center; border-bottom:1px solid #da0000;}
.guide_types .guide_type .gtype_img {height:8.5rem; display:flex; align-items:center; justify-content:center; padding:0.5rem; box-sizing:border-box;}
.guide_types .guide_type .gtype_img img {width:100%; max-height:7.5rem; height:auto; object-fit:contain; display:block;}
.guide_types .guide_type .guide_desc {flex:1; margin:0 0.625rem; padding:0.625rem 0 0.75rem; border-top:1px solid #e0e0e0; font-size:0.875rem; line-height:1.45; color:#444; display:flex; align-items:flex-start; justify-content:center; word-break:keep-all;}

.guide_walls { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.3125rem; width:100%; margin: 0.9375rem 0 0.625rem; font-family: 'GmarketSans', sans-serif;} 
.guide_walls .guide_wall {border: 1px solid #ddd; border-radius: 0.375rem; overflow: hidden; background: #fff; text-align: center;} 
.guide_walls .guide_wall .gwall_header { background: #f1f1f1; font-family: 'GmarketSans', sans-serif; font-weight: 700; font-size: 1rem; padding: 0.5rem;} 
.guide_walls .guide_wall .gwall_img {flex: 1; display: flex;align-items: center;justify-content: center;}
.guide_walls .guide_wall .gwall_img img { width: 89%; height: auto; margin-top:0.625rem; display: block;}
.guide_walls .guide_wall .wall_desc { font-size: 0.875rem; padding: 0.625rem; line-height: 1.4;}
.guide_walls .guide_wall .wall_desc .text {font-size: 0.8125rem; color:#595959 }
.guide_walls .guide_wall .wall_desc .bold {font-size: 0.875rem;font-weight: 600; color:#202020 }

.box_guide h3 {font-family: 'GmarketSans', sans-serif; font-size:1.0625rem; font-weight: 700; line-height:1.3; display: inline-block; vertical-align: middle; word-break:keep-all;} /* 261022-4 : line-height 0.9 → 1.3(두 줄 겹침) */
.box_guide h4 {font-family: 'GmarketSans', sans-serif; font-size:1.625rem; font-weight: 700; color:#000; line-height:1.2; display: inline-block; vertical-align: middle;margin-bottom:0.375rem; } /* 261022-4 */
.box_guide h4 .red {font-family: 'GmarketSans', sans-serif; font-weight: 700; color:#e31c23;}
.box_guide h5 {font-family: 'GmarketSans', sans-serif; font-size:1rem; font-weight: 400; line-height:1.3; display: inline-block; vertical-align: middle; } /* 261022-4 */

.boxguide_order_x  { background: #f7f7f7; border-radius: 0.625rem; padding: 1.25rem; box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.1); margin: 2.5rem 0.625rem;text-align: center; border: 1px solid #fff;}
.boxguide_order_x .step-box { background: #fff; border-radius: 1.875rem; padding: 0.625rem; margin-bottom: 0.9375rem; box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center; gap: 0.625rem; }
.boxguide_order_x .step-box p { margin: 0; font-size: 0.9375rem; color: #333;}
.boxguide_order_x .icon { width: 1.5rem; height: 1.5rem;}
.boxguide_order_x .arrow { margin: 0.9375rem 0;}
.arrow img { width: 1.875rem;  height: auto;}
.boxguide_order_x .custom-img img { width: 70%; margin-bottom:1.25rem; }
.boxguide_order_x .contact-box { background: #000; color: #fff; border-radius: 0.3125rem; padding: 0.625rem; font-size: 1.125rem; font-weight: bold;}

/* 261022-1 : 박스가이드 텍스트화 — h1, 섹션 요약, 검색방법, 로터리·톰슨 비교 카드(이미지 속 글 → 실제 텍스트) */
.box_guide .guide_h1 {font-family:'GmarketSans',sans-serif; font-size:1.375rem; font-weight:700; color:#000; margin:1rem 0 0;}
.box_guide .guide_sum {margin:0.625rem 0.75rem 0; font-size:0.875rem; line-height:1.55; color:#555; word-break:keep-all;} /* 261022-4 */
.proc_cards {display:flex; flex-direction:column; gap:1rem; text-align:left; margin:0.5rem 0;}
.proc_card {background:#f4f4f4; border-radius:1.25rem; overflow:hidden; color:#222;}
.proc_card .proc_head {padding:0.9rem 0.5rem 0.7rem; text-align:center; color:#fff; background:#9e9e9e;}
.proc_card.tom .proc_head {background:#d1121a;}
.proc_card .proc_head strong {display:block; font-family:'GmarketSans',sans-serif; font-size:1.5rem; font-weight:700; line-height:1.1;}
.proc_card .proc_head span {font-size:0.75rem;}
.proc_card .proc_body {padding:0 0.9rem 0.9rem;}
.proc_card .proc_how {display:flex; align-items:center; justify-content:space-between; gap:0.5rem; padding:0.9rem 0 0.7rem; border-bottom:1px dashed #ccc;}
.proc_card .proc_how p {margin:0; font-size:0.8125rem; line-height:1.4;}
.proc_card .proc_how p b {display:block; font-size:1rem; margin-bottom:0.25rem;}
.proc_card .proc_how img {width:6rem; height:auto;}
.proc_card.tom .proc_how img {width:8.5rem;}
.proc_card .proc_pros {display:flex; gap:0.5rem; padding:0.7rem 0; border-bottom:1px dashed #ccc;}
.proc_card .proc_pros .pt {flex:none; width:3.6rem; font-size:1rem; font-weight:700;}
.proc_card .proc_pros .pt::before {content:"\2714"; display:inline-block; width:1rem; height:1rem; border-radius:50%; background:#bdbdbd; color:#fff; font-size:0.6rem; text-align:center; line-height:1rem; margin-right:0.25rem; vertical-align:middle;}
.proc_card.tom .proc_pros .pt::before {background:#222;}
.proc_card .proc_pros ul {margin:0; padding:0 0 0 1rem; font-size:0.8125rem; line-height:1.7; list-style:disc;}
.proc_card .proc_photo {display:flex; align-items:center; gap:0.6rem; margin-top:0.8rem;}
.proc_card .proc_photo img {width:5.4rem; height:4.5rem; border-radius:0.5rem; flex:none;}
.proc_card .proc_photo p {margin:0; font-size:0.8125rem; line-height:1.4; color:#333;}
.proc_card .proc_photo p b {display:block; font-size:0.875rem; color:#111;}
.box_guide .guide_catch {font-size:1.125rem; line-height:1.4; margin:0.25rem 0;} /* 261022-3 : 원래 인라인 18px 유지 */
/** 박스사이즈팁 수정:260127 **/
.new_guide_h3 {font-family: 'GmarketSans', sans-serif; font-size:2rem; font-weight: 700; line-height:0.9; display: inline-block; vertical-align: middle; margin-bottom:0.625rem; color: #000;   }
.new_guide_text_wrap { margin-bottom: 1.25rem; text-align: left; }
.new_guide_title { font-size: 0.9375rem; font-weight: 700; line-height:1.45; margin-bottom: 0.375rem; display: block; color: #000; word-break:keep-all; } /* 261022-4 */
.new_guide_sub { font-size: 0.8125rem; color: #444; line-height:1.45; margin-bottom: 0.25rem; display: block; font-weight: 500; } /* 261022-4 */
.text_red { color: #e10505; }
.new_size_table { border-collapse: collapse; border-top: 3px solid #000; border-bottom: 3px solid #000; margin: 0 auto; width: 100%; max-width: 47.5rem; table-layout: fixed; background-color: #fff; }
.new_size_table thead th { background:#e8e8e8; padding:0.5rem 0.125rem; font-size:0.6875rem; font-weight:600; border-bottom:1px solid #939393; border-right:1px solid #939393; color:#000; text-align:center; vertical-align:middle; letter-spacing:-0.06em; } /* 261022-4 : 8칸 표 글자 겹침 방지 */
.new_size_table .col_header { background:#e8e8e8; width:3.25rem; font-size:0.625rem; line-height:1.3; font-weight:600; color:#000; border-right:1px solid #939393; border-bottom:1px solid #939393; text-align:center; vertical-align:middle; word-break:keep-all; } /* 261022-4 */
.new_size_table td { padding:0.5rem 0.125rem; font-size:0.6875rem; font-weight:400; color:#333; text-align:center; vertical-align:middle; border-bottom:1px solid #e0e0e0; border-right:1px solid #e0e0e0; letter-spacing:-0.02em; } /* 261022-4 */
.new_size_table th:last-child, 
.new_size_table td:last-child { border-right: none; }

/* fsc안내페이지 */
.fsc{text-align:center; margin-top:1.875rem;}
.fsc p a{font-size:1.125rem; font-weight:500;}

/* 벌크바로가기 버튼 */
.button-wrapper { text-align: center;  margin: 1.875rem 0; }
.bulk-button {display: inline-flex; width: 15.625rem; height: 2.375rem; background-color: #e60303; color: #fff; font-family: 'GmarketSans'; font-weight:400; font-size: 1rem;
  border: none;  border-radius: 1.25rem;  cursor: pointer; align-items: center; justify-content: center; text-decoration: none;}
.detail_img { font-size:0; }

/* 회원가입혜택페이지 */
.member_guide {padding: 0.625rem 0; display: flex; flex-direction: column;}
/* ============================================================
   260803-7 : 모바일 하단 고정 내비게이션 바
   (카테고리 / 자동견적 / 홈 / 마이페이지 / UP)
   ============================================================ */
.m_bottom_nav {position:fixed; left:0; right:0; bottom:0; z-index:1000; background:#fff; border-top:1px solid #e5e5e5; box-shadow:0 -0.125rem 0.5rem rgba(0,0,0,0.04); padding-bottom:constant(safe-area-inset-bottom); padding-bottom:env(safe-area-inset-bottom);}
.m_bottom_nav ul {display:flex; margin:0; padding:0; list-style:none;}
.m_bottom_nav ul li {flex:1; min-width:0;}
.m_bottom_nav ul li a {display:flex; flex-direction:column; align-items:center; justify-content:center; height:3.5rem; text-decoration:none;}
.m_bottom_nav ul li a img {width:1.5rem; height:1.5rem; display:block;} /* 260813-39 : 새 아이콘(ico_*.svg)은 메뉴명이 없어 아이콘 축소 + 아래 span 텍스트 표시(260812-34 역방향) */ /* 260807-7 : 아이콘 축소(1.5→1.25rem) / 260812-34 : svg 안에 메뉴명이 포함돼 있어 높이 기준으로 키움(width:auto 로 원본 비율 유지). 크기 조절은 height 값 하나만 */
.m_bottom_nav ul li a.nav_home img {width:1.5rem; height:1.5rem;} /* 260813-39 : 홈 특대 규칙 해제(전 메뉴 동일 크기) */ /* 260807-7 : 홈 버튼은 텍스트가 없으므로 조금 크게 / 260812-34 : 다른 아이콘이 커진 만큼 함께 조정 */
.m_bottom_nav ul li a span {display:block; margin-top:0.1875rem; font-size:0.6875rem; line-height:1; color:#444;} /* 260813-39 : 메뉴명 텍스트 다시 표시 */ /* 260812-34 : svg 에 메뉴명이 포함돼 마크업의 span 을 제거함(260812-33). 혹시 남아있는 span 이 있어도 안 보이게 */ /* 260803-12 : 10px→11px, 260807-7 : 아이콘을 줄인 만큼 텍스트 확대(13px 기준) */
/* 내비 바가 표시되는 페이지에서 본문 마지막 내용이 바에 가려지지 않도록 하단 여백 확보 (footer/standard.html의 스크립트가 클래스 부여) */
body.has_bottom_nav {padding-bottom:calc(3.5625rem + constant(safe-area-inset-bottom)); padding-bottom:calc(3.5625rem + env(safe-area-inset-bottom));}

/* 260803-8 : 모바일 상단 좌측 앞으로(이전 페이지) 버튼 - 기존 카테고리(메뉴) 버튼 대체 */
#header_wrap header .header_box .btn_header_back {display:inline-block; padding:0.875rem 0.5rem 0.8125rem 0.5rem; vertical-align:top; color:#222;}
#header_wrap header .header_box .btn_header_back svg.icon,
#header_wrap header .header_box .btn_header_back img.icon {width:1.5rem; height:1.5rem; display:block;} /* 260812-32 : 인라인 svg -> img(btn_back.svg) 로 바뀌어 선택자에 img.icon 병기 */
#header_wrap header .header_box .btn_header_back span {display:none;}

/* 260803-10 : 상단 장바구니 담긴 상품수 배지 (custom.css가 gd_layout.css보다 먼저 로드되므로 상세도(specificity)를 높여 override) */
/* 260803-11 : 배지 배경색을 자사 테마색상(#ed1c24)으로 변경 */
#header_wrap header .header_box .right_menu li .cart_count {top:0.375rem; right:0; padding:0 0.25rem; min-width:1rem; height:1rem; line-height:1rem; text-align:center; font-size:0.625rem; border-radius:0.5rem; box-sizing:border-box; pointer-events:none; background:#ed1c24;}

/* 260803-16 : 다이소식 상단 1차 메뉴 드롭다운 (뒤로가기 오른쪽 현재 메뉴명+화살표, 목록은 아래로 펼침) */
#header_wrap header .header_box .h_cate_dd .btn_cate_dd {display:inline-flex; align-items:center; height:3.1875rem; padding:0 0.125rem; background:none; border:0; color:#222;}
#header_wrap header .header_box .h_cate_dd .cur_cate {font-size:1rem; font-weight:700; letter-spacing:-0.5px; line-height:1;}
#header_wrap header .header_box .h_cate_dd .arw {width:1.125rem; height:1.125rem; margin-left:0.0625rem; display:block; transition:transform .2s ease;}
#header_wrap header .header_box .h_cate_dd.open .btn_cate_dd .arw {transform:rotate(180deg);}
#header_wrap header .header_box .left_menu .cate_dd_list {display:none; position:absolute; top:100%; left:0; min-width:8.25rem; padding:0.3125rem 0; margin:0; list-style:none; background:#fff; border:1px solid #e5e5e5; border-radius:0.625rem; box-shadow:0 0.375rem 1rem rgba(0,0,0,0.12); z-index:400;}
#header_wrap header .header_box .h_cate_dd.open .cate_dd_list {display:block;}
/* 260803-16 : gd_layout.css의 .left_menu li(display:table-cell)보다 상세도를 높여 드롭다운 항목은 세로 나열로 강제 (모바일은 custom.css가 gd_layout.css보다 먼저 로드됨) */
#header_wrap header .header_box .left_menu .cate_dd_list li {display:block;}
#header_wrap header .header_box .left_menu .cate_dd_list li a {display:block; padding:0.6875rem 1.125rem; font-size:0.875rem; color:#222; white-space:nowrap;}
#header_wrap header .header_box .left_menu .cate_dd_list li.on a {color:#ed1c24; font-weight:700;}

/* 260803-18 : 상품리스트 2차 카테고리 메뉴를 다이소식 가로 스크롤 탭으로 전환 (goods_list.html의 cate_scroll_tabs 클래스 전용 - 다른 페이지의 list_item_category/custom_item_category에는 영향 없음) */
/* 260803-22 : 밑줄형 탭 → 텐바이텐식 알약(pill) 칩 + 베이지 배경으로 변경 */
.cate_scroll_tabs {padding:0; margin-bottom:0.5rem; background:#f9f9f9;} /* 260807-7 : 배경색 #f6f3ec -> #f9f9f9 / 260812-17 : 아래 여백 0.75->0.5rem */
.cate_scroll_tabs > ul {display:flex; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:0.5rem 0.75rem; margin:0; list-style:none; border-bottom:0; scrollbar-width:none;} /* 260812-17 : 위아래 여백 0.75->0.5rem */
.cate_scroll_tabs > ul::-webkit-scrollbar {display:none;}
.cate_scroll_tabs > ul li {flex:0 0 auto; max-width:none; width:auto; height:auto; display:block; box-sizing:border-box; margin-right:0.375rem;} /* 260812-17 : 칩 간격 0.5->0.375rem */
.cate_scroll_tabs > ul li:last-child {margin-right:0;}
/* 260803-18 : 기존 list_item_category의 nth-child 테두리 규칙(상세도 0,2,2)까지 확실히 무효화하기 위해 :nth-child(n)으로 상세도 맞춤 */
.cate_scroll_tabs > ul li:nth-child(n) {border:0; background:none;}
.cate_scroll_tabs > ul li a {display:block; padding:0.4375rem 0.75rem; font-size:0.875rem; color:#333; white-space:nowrap; letter-spacing:-0.3px; background:#fff; border:1px solid #e2ddd1; border-radius:0.25rem;} /* 260812-17 : 안쪽 여백 축소 + 알약형(3.125rem) -> 기본 코너각 0.25rem(버튼 260812-16 과 동일) */
.cate_scroll_tabs > ul li.selected a,
.cate_scroll_tabs > ul li.on a {background:#ed1c24; border-color:#ed1c24; color:#fff; font-weight:700;}

/* 260803-23 : 상품리스트 테이블 상단 필터 바 (정렬/형태/골지/가공방식 select를 알약형으로 가로 나열) */
.list_filter_bar {display:flex; flex-wrap:nowrap; align-items:center; gap:0.25rem; padding:0.5rem 0.9375rem 0.625rem; margin:0 0 0.125rem 0;} /* 260803-25 : 여백 축소 / 260813-6 : 세로 중앙 정렬 / 260813-8 : 가로 스크롤 제거
   260813-11 : 4개가 한 줄에 들어가도록 nowrap + 아래 select 를 flex:1 로 남는 폭 분배. 좌우 여백은 검색 영역과 같은 0.9375rem */
.list_filter_bar::-webkit-scrollbar {display:none;}
/* 260803-25 : 필터 바 select - 260813-6 : 높이 1.8125->2.125rem
   260813-11 : 4개를 한 줄에 넣기 위해 flex:1 로 폭 분배 + 글자 0.8125->0.75rem, 좌우 여백/화살표 축소 */
.list_filter_bar select {flex:1 1 auto; min-width:0; max-width:100%; height:2.125rem; margin-right:0; padding:0 1.0625rem 0 0.5rem; font-size:0.75rem; color:#333; background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.7 8.6 12 13.9l5.3-5.3 1.4 1.4L12 16.7 5.3 10z' fill='%23666'/%3E%3C/svg%3E") no-repeat right 0.3125rem center/0.6875rem 0.6875rem; border:1px solid #ddd; border-radius:0.25rem; -webkit-appearance:none; /* 260813-8 : 알약(3.125rem) -> 사이트 공통 곡선 0.25rem */ -moz-appearance:none; appearance:none;}
.list_filter_bar select:last-child {margin-right:0;}
/* 260813-6 : 맨 앞 '정렬' select - 왼쪽에 정렬 화살표 아이콘을 배경으로 함께 깐다(배경 2개) */
/* 260813-8 : 정렬 아이콘 확대 / 260813-11 : 한 줄에 맞추려 1.125->1rem, 정렬칸은 글자가 짧아 flex:0(내용폭 고정) */
.list_filter_bar select.bar_sort {flex:0 0 auto; padding-left:1.875rem; background:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 3l4 4H9v10H7V7H4l4-4zm8 18l-4-4h3V7h2v10h3l-4 4z' fill='%23555'/%3E%3C/svg%3E") no-repeat left 0.4375rem center/1rem 1rem, url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.7 8.6 12 13.9l5.3-5.3 1.4 1.4L12 16.7 5.3 10z' fill='%23666'/%3E%3C/svg%3E") no-repeat right 0.5rem center/0.75rem 0.75rem, #fff; font-weight:500; color:#111;}
/* 260813-6 : 정렬 / 필터 구분선 */
.list_filter_bar .bar_divider {flex:0 0 auto; width:1px; height:1.125rem; margin:0 0.125rem; background:#e0e0e0;} /* 260813-8 : gap 이 여백을 담당하므로 margin 축소 */

/* 260807-3 S : 상단 카테고리 UI 재배치
   - 카테고리 페이지(goods/goods_list)는 로고 자리에 '현재 1차 카테고리명 + ▼' 를 중앙 배치(마크업 outline/header/standard.html 260807-3)
   - 1차 카테고리 가로 나열(.cate_h_list) 복원, 그 아래에 2차 카테고리 가로 스크롤 탭(.cate_scroll_tabs, 260803-18/-22)이 이어짐
   - 홈에서는 이전 버튼 없이 로고 중앙 유지 (마크업 조건 처리) */
#header_wrap header .header_box .h_cate_dd {position:relative; display:block; width:auto; margin:0 auto; padding:0; text-align:center;}
#header_wrap header .header_box .h_cate_dd .btn_cate_dd {display:inline-flex; align-items:center; justify-content:center; height:3.1875rem; padding:0 0.125rem; background:none; border:0; color:#222;}
#header_wrap header .header_box .h_cate_dd .cur_cate {font-size:1.0625rem; font-weight:700; letter-spacing:-0.5px; line-height:1;}
/* 드롭다운 목록 : 헤더 중앙 기준으로 펼침 (260803-16 은 .left_menu 안에 있을 때 기준이라 위치 재지정) */
#header_wrap header .header_box .h_cate_dd .cate_dd_list {display:none; position:absolute; top:100%; left:50%; transform:translateX(-50%); z-index:320; min-width:9.375rem; padding:0.3125rem 0; margin:0; list-style:none; text-align:left; background:#fff; border:1px solid #e0e0e0; border-radius:0.5rem; box-shadow:0 0.375rem 1rem rgba(0,0,0,.12);}
#header_wrap header .header_box .h_cate_dd.open .cate_dd_list {display:block;}
#header_wrap header .header_box .h_cate_dd .cate_dd_list li {display:block;}
#header_wrap header .header_box .h_cate_dd .cate_dd_list li a {display:block; padding:0.6875rem 1.125rem; font-size:0.875rem; color:#222; white-space:nowrap;}
#header_wrap header .header_box .h_cate_dd .cate_dd_list li.on a {color:#ed1c24; font-weight:700;}

/* 1차 카테고리 가로 나열 */
#header_wrap header .header_box .cate_h_list {display:flex; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:0 0.75rem; margin:0; list-style:none; background:#fff; border-top:1px solid #f0f0f0; scrollbar-width:none;} /* 260807-7 : 하단에도 상단과 동일한 라인 추가 -> 260812-18 에서 아래 라인은 헤더(gd_layout.css 16행)로 옮김 */
#header_wrap header .header_box .cate_h_list::-webkit-scrollbar {display:none;}
#header_wrap header .header_box .cate_h_list li {flex:0 0 auto; display:block; margin-right:1rem;}
#header_wrap header .header_box .cate_h_list li:last-child {margin-right:0;}
#header_wrap header .header_box .cate_h_list li a {display:block; padding:0.75rem 0.125rem 0.625rem; font-size:0.9375rem; color:#555; white-space:nowrap; border-bottom:2px solid transparent;}
#header_wrap header .header_box .cate_h_list li.on a {color:#111; font-weight:700; border-bottom-color:#ed1c24;}
/* 260807-3 E */
/* 260818-16 S : 2차 카테고리 탭이 헤더 안으로 들어옴(주문제작 260818-8, 상품리스트/용차전용 260818-13)에 따른 보정
   - 고정영역이 2차 카테고리 탭에서 끝나도록 탭 자체의 아래 여백(.cate_scroll_tabs margin-bottom:0.5rem)은 헤더 안에서만 제거하고,
     같은 크기의 여백을 헤더 밖(#header_wrap padding-bottom)으로 옮긴다. has_sub_tabs 부여는 헤더 스크립트 260818-14
   - 1차/2차 카테고리 사이 구분선 : 다른 페이지에서는 헤더 아래 테두리(gd_layout.css 16행 #header_wrap header)가 그 역할을 했으므로 동일한 색/두께로 넣는다 */
#header_wrap header .header_box .cate_scroll_tabs {margin-bottom:0;}
#header_wrap header .header_box .cate_h_list + .cate_scroll_tabs {border-top:1px solid #f0f0f0;}
#header_wrap.has_sub_tabs {padding-bottom:0.5rem;}
/* 260818-16 E */


/* 260807-10 : 홈/카테고리 외 페이지의 상단 페이지명(로고 자리) */
#header_wrap header .header_box .h_page_tit {display:block; width:auto; margin:0 auto; padding:0.9375rem 3.75rem; font-size:1.0625rem; font-weight:700; color:#111; text-align:center; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
/* 260812-26 S : 드로어(전체메뉴) 카드형 UI - 260812-22 정정본
   마크업 : proc/_category_all.html 260812-25 + outline/header/standard.html 260812-24
   구성 : [로그인 영역(흰 배경 + 하단 구분선)] + [흰 라운드 박스 3개 : 전체 카테고리 / Guide / 커뮤니티]
   - 회색 배경 위에는 텍스트를 두지 않는다. 박스 타이틀은 박스 안에.
   - 각 박스는 항목을 2단으로 나열하고 항목마다 > 아이콘(/data/250801/etc/arrow_gray.png)을 붙인다.
   - 2차 카테고리 목록/펼치기 버튼은 쓰지 않는다. */
.gd_drawer_login {padding:1.25rem 1rem 1rem; background:#fff; border-bottom:1px solid #e9e9e9;}
.gd_drawer_login .join_txt {padding:0; margin:0 0 0.875rem;}
.gd_drawer_login .join_txt .join_b {margin:0; font-size:1.0625rem; font-weight:700; color:#111; line-height:1.3;}
.gd_drawer_login .join_txt .join_s {margin:0.25rem 0 0; font-size:0.8125rem; color:#888; line-height:1.3;}
.gd_drawer_login .login_txt {position:static; padding:0; margin:0 0 0.875rem; font-size:1rem; text-align:left; line-height:1.35;}
.gd_drawer_login .login_txt p.name strong {font-size:1.0625rem; color:#111;}
.gd_drawer_login .nav_btn ul {display:flex; gap:0.5rem; margin:0; padding:0; list-style:none;}
.gd_drawer_login .nav_btn ul li {flex:1 1 0; min-width:0;}
.gd_drawer_login .nav_btn ul li a {display:block; padding:0.625rem 0; border:1px solid #ddd; border-radius:0.25rem; background:#fff; font-size:0.875rem; color:#333; text-align:center; text-decoration:none;}
.gd_drawer_login .nav_btn ul li.red a {border-color:#ed1c24; background:#ed1c24; color:#fff; font-weight:700;}

/* 흰 라운드 박스 3개 */
.gd_drawer_box {margin:0.75rem 0.75rem 0; padding:1rem; background:#fff; border-radius:0.75rem;}
/* 마지막 박스 아래 여백은 :last-child 가 아니라 감싸는 영역에 준다(박스가 위젯/스킨 두 곳에 나뉘어 있어 :last-child 가 안 맞음) */
#wrap nav .nav_bg_box .nav_box .nav_category {padding:0 0 1.25rem;}
.gd_drawer_box_tit {margin:0 0 0.5rem; padding:0; font-size:1.0625rem; font-weight:700; color:#111; line-height:1.3; border:0;}
/* 항목 2단 나열 + > 아이콘 */
.gd_drawer_box .gd_drawer_list {display:flex; flex-wrap:wrap; margin:0; padding:0; list-style:none;}
.gd_drawer_box .gd_drawer_list li {flex:0 0 50%; max-width:50%; box-sizing:border-box; padding-right:0.5rem;}
.gd_drawer_box .gd_drawer_list li:nth-child(2n) {padding-right:0; padding-left:0.5rem;}
.gd_drawer_box .gd_drawer_list li a {position:relative; display:block; padding:0.5625rem 0 0.5625rem 0; font-size:0.9375rem; color:#333; line-height:1.3; word-break:keep-all; text-decoration:none;}
/* 260812-28 : > 아이콘을 이미지(arrow_gray.png) 대신 CSS 로 그린다. 원본 이미지 비율에 좌우되지 않고 크기/굵기/색을 숫자로 조절할 수 있음.
   2차 카테고리가 있는 항목(.has_sub)에만 붙인다. 크기는 width/height, 굵기는 border-width, 색은 border-color 로 조절. */
.gd_drawer_box .gd_drawer_list li a.has_sub {padding-right:1rem;}
.gd_drawer_box .gd_drawer_list li a.has_sub:after {content:''; position:absolute; top:50%; right:0.25rem; width:0.4375rem; height:0.4375rem; margin-top:-0.25rem; border:solid #b5b5b5; border-width:0.09375rem 0.09375rem 0 0; transform:rotate(45deg);}
/* 드로어 안 옛 구분선(hr) 숨김 */
#wrap nav .nav_bg_box .nav_box .nav_iscroll_box hr {display:none;}
#wrap nav .nav_bg_box .nav_box .nav_category .nav_tabmenu_box hr {display:none;}
/* 260812-29 : 드로어 닫기 x 버튼은 원래 규칙이 있는 gd_layout.css 82행에서 직접 수정했다.
   (custom.css 는 gd_layout.css 보다 '먼저' 로드돼서 같은 특이도로는 여기 써도 진다 - outline/_header.html 45행 vs 50행) */
/* 260812-26 E */

/* 260813-50 : 검색 레이어 재구성(260813-48/-49)으로 여기 있던 규격검색 줄 스타일(260813-47)은 proc.css 의 레이어 팝업 검색 블록으로 이동·통합함 */

/* 260813-51 : 박스 검색영역 규칙 - goods.css(구 596~619행, 260813-3/-7)에서 이동. 상품리스트와 검색 레이어(proc/_header_search.html 260813-52)가 공용 사용 */
.goods_input_search {background:#f4f5f7; margin:0 0 0.75rem;} /* 260813-7 : 상품목록과 구분되도록 배경색. 입력칸은 흰색이라 대비가 생김 */
.goods_input_search .search_wrap {padding:0.75rem 0.9375rem;}
.goods_input_search .search_wrap:after {content:''; clear:both; display:block;}
/* 입력/선택 공통 */
.goods_input_search .search_wrap input,
.goods_input_search .search_wrap select {height:2.5rem; padding:0 0.625rem; border:1px solid #ddd; border-radius:0.25rem; background:#fff; font-size:0.875rem; color:#222; box-sizing:border-box;}
.goods_input_search .search_wrap input::placeholder {font-size:0.8125rem; color:#aaa;}
.goods_input_search .search_wrap select {padding-right:1.375rem; background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.7 8.6 12 13.9l5.3-5.3 1.4 1.4L12 16.7 5.3 10z' fill='%23666'/%3E%3C/svg%3E") no-repeat right 0.375rem center/0.6875rem 0.6875rem; -webkit-appearance:none; -moz-appearance:none; appearance:none;}
/* 버튼 공통 : 1줄은 회색, 2줄은 빨강 */
.goods_input_search .search_wrap button {flex:0 0 auto; float:none; width:auto; min-width:3.75rem; height:2.5rem; padding:0 0.875rem; border-radius:0.25rem; font-size:0.875rem; font-weight:500; box-sizing:border-box;}
.goods_input_search .search_name button {border:1px solid #e0e0e0; background:#f2f2f2; color:#333;}
.goods_input_search .search_size button {border:1px solid #ed1c24; background:#ed1c24; color:#fff;}
/* 1줄 : 입력칸이 남는 폭 전부 */
.goods_input_search .search_name {display:flex; align-items:center; gap:0.375rem; margin:0 0 0.5rem;}
.goods_input_search .search_name input {flex:1 1 auto; width:auto; min-width:0;}
/* 2줄 : 가로 x 세로 x 높이 + 오차 + 검색 */
.goods_input_search .search_size {display:flex; align-items:center; gap:0.25rem;}
.goods_input_search .search_size input {flex:1 1 0; width:auto; min-width:0; padding:0 0.25rem; font-size:0.75rem; text-align:center;}
/* 260813-9 : 가로mm/세로mm/높이mm 는 칸이 좁아 글자가 잘리던 것 - 입력·플레이스홀더 글자와 좌우 여백 축소 */
.goods_input_search .search_size input::placeholder {font-size:0.75rem;}
.goods_input_search .search_size .inp_sel {flex:0 0 auto; width:auto; margin:0 0 0 0.125rem; display:block;}
.goods_input_search .search_size .inp_sel select {width:3.125rem; min-width:0; padding:0 1.125rem 0 0.375rem; font-size:0.8125rem; background-position:right 0.25rem center;} /* 260813-7 : 검색 버튼(min-width 3.75rem)보다 작게 */
.goods_input_search .search_size > span {flex:0 0 auto; display:inline-block; margin:0; color:#bbb;}
.goods_input_search .search_size > span img {width:0.4375rem;}
.goods_input_search .search_keyword {margin:0.5rem 0 0;} /* 260813-51 : 검색 레이어 전용 검색어 줄(규격 줄 아래) - 리스트에는 없는 요소라 영향 없음 */

/* ============================================
   260820-14 : 무료샘플신청 (모바일) S
   - 드로어 카드 + 팝업(PC layout.css 260820-6~13 블록 이식) + 모바일 크기조정
   ============================================ */
/* 드로어 무료 샘플신청 카드 - 배경/테두리 색상은 지정값 */
.gd_drawer_box.sample_apply_card { position: relative; background: #f6faf3; border: 1px solid #b5c3a4; cursor: pointer; }
.sample_apply_card .sac_tit { margin: 0; /* 260820-16 : PC처럼 작게 */ font-size: 0.9375rem; font-weight: 800; color: #222; letter-spacing: -1px; }
.sample_apply_card .sac_tit .free { color: #f26c4c; }
.sample_apply_card .sac_sub { margin: 4px 0 0; /* 260820-16 : PC처럼 작게 */ font-size: 0.6875rem; color: #666; letter-spacing: -0.5px; }
.sample_apply_card .sac_arrow { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: #b5c3a4; font-size: 1.125rem; font-weight: 700; }

/* 260820-6 : 무료샘플신청 레이어 팝업 S (시안 실측: 강조주황 #f26c4c, 뱃지 #f9eee4, 버튼 #8c7765, 베이지 #fcf4ec) */
.sample_pop_wrap { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10500; /* 260820-8 : 작은 화면에서 래퍼가 스크롤 담당 */ overflow-y: auto; -webkit-overflow-scrolling: touch; }
.sample_pop_wrap * { box-sizing: border-box; }
.sample_pop_dim { /* 260820-8 : 래퍼 스크롤시에도 화면 전체 덮도록 fixed */ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.55); }
.sample_pop { /* 260820-8 : transform 중앙배치+내부스크롤 폰기 -> 래퍼 스크롤 방식(작은 모니터에서도 안 잘림) */ position: relative; /* 260820-9 : 안내 2열 배치로 가로 680px 확장 */ width: 680px; max-width: calc(100% - 30px); margin: 3vh auto; background: #fff; border-radius: 20px; padding: 30px 28px 26px; } /* 260828-7 : font-family 개별지정 제거 → gd_reset.css 기준서체 상속 */
.sample_pop .sp_close { position: absolute; top: 14px; right: 16px; width: 34px; height: 34px; border: 0; background: none; font-size: 1.75rem; line-height: 1; color: #222; cursor: pointer; z-index: 2; }
/* 상단 헤더 */
.sample_pop .sp_head { /* 260820-9 : 우상단 이미지 제거로 우측 여백 축소 */ position: relative; padding: 4px 4px 16px; border-bottom: 1px dashed #e2ddd7; }
.sample_pop .sp_badge { display: inline-flex; align-items: center; gap: 6px; background: #f9eee4; color: #333; border-radius: 999px; padding: 7px 14px; font-size: 0.78125rem; font-weight: 600; letter-spacing: -0.5px; }
.sample_pop .sp_badge img { width: 16px; height: 16px; }
.sample_pop .sp_tit { margin: 14px 0 0; font-size: 2.125rem; font-weight: 800; color: #141414; letter-spacing: -2px; line-height: 1.15; }
.sample_pop .sp_tit .free { color: #f26c4c; }
.sample_pop .sp_sub { margin: 10px 0 0; font-size: 0.875rem; color: #4a4a4a; letter-spacing: -0.5px; }
/* 260820-9 : 우상단 이미지(.sp_main_img/.sp_hand) 규칙 삭제 */
/* 안내 4줄 */
.sample_pop .sp_info { /* 260820-10 : 문구를 한 줄씩 보여주기 위해 1열 복귀(가로 680px 유지) */ margin: 16px 0 0; border: 1px solid #f0ece7; border-radius: 16px; padding: 4px 18px; }
.sample_pop .sp_info_row { display: flex; align-items: center; gap: 14px; padding: 14px 0; }
/* 260820-10 : 1열 복귀로 행 사이 점선 */
.sample_pop .sp_info_row + .sp_info_row { border-top: 1px dashed #e9e4de; }
.sample_pop .sp_icon { /* 260820-10 : 아이콘 이미지에 원형배경 포함되어 CSS 원형/배경 제거 */ flex: 0 0 52px; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; }
.sample_pop .sp_icon img { width: 52px; height: 52px; object-fit: contain; }
.sample_pop .sp_info_txt strong { font-size: 1rem; font-weight: 700; color: #141414; letter-spacing: -0.7px; }
.sample_pop .sp_info_txt strong em { color: #f05939; font-style: normal; font-weight: 800; }
.sample_pop .sp_info_txt strong .nor { font-weight: 500; color: #333; }
.sample_pop .sp_info_txt p { margin: 5px 0 0; font-size: 0.8125rem; color: #888; letter-spacing: -0.5px; line-height: 1.45; }
/* 입력 영역 */
.sample_pop .sp_form { position: relative; margin: 16px 0 0; background: #fcf4ec; border-radius: 16px; padding: 18px 18px 16px; }
.sample_pop .sp_form_tit { margin: 0 0 12px; color: #966b45; font-size: 0.9375rem; font-weight: 700; letter-spacing: -0.7px; font-style: italic; }
.sample_pop .sp_select_box { position: relative; }
.sample_pop .sp_select_btn { display: flex; align-items: center; width: 100%; border: 1px solid #e8ddd2; border-radius: 10px; background: #fff; padding: 11px 14px; font-size: 0.84375rem; font-weight: 600; color: #333; cursor: pointer; letter-spacing: -0.5px; }
.sample_pop .sp_select_btn .sp_max { margin-left: 5px; font-weight: 400; color: #999; font-size: 0.75rem; }
.sample_pop .sp_select_btn .sp_arr { margin-left: auto; color: #b09a83; }
.sample_pop .sp_select_list { display: none; /* 260820-8 : absolute 드롭다운이 팝업 하단에서 잘려서 in-flow 로 변경(아래 내용을 밀어냄) */ position: static; width: 100%; max-height: 240px; overflow-y: auto; margin: 4px 0 0; padding: 4px 0; list-style: none; background: #fff; border: 1px solid #e8ddd2; border-radius: 10px; box-sizing: border-box; }
.sample_pop .sp_select_list li label { display: flex; align-items: center; gap: 8px; padding: 8px 14px; font-size: 0.8125rem; color: #333; cursor: pointer; letter-spacing: -0.5px; }
.sample_pop .sp_select_list li label:hover { background: #faf3ec; }
/* 260820-10 : 목록 하단 '선택 완료' 버튼 */
.sample_pop .sp_select_list li.sp_done { position: sticky; bottom: -4px; background: #fff; padding: 6px 10px 8px; border-top: 1px solid #f0ece7; }
.sample_pop .sp_select_list li.sp_done button { display: block; width: 100%; padding: 8px 0; border: 0; border-radius: 8px; background: #8c7765; color: #fff; font-size: 0.8125rem; font-weight: 700; letter-spacing: -0.5px; cursor: pointer; }
.sample_pop .sp_select_list li.sp_done button:hover { background: #7a6656; }
/* 260820-7 : 샘플 목록 검색창 */
.sample_pop .sp_select_list li.sp_search { position: sticky; top: -4px; background: #fff; padding: 6px 10px 8px; border-bottom: 1px solid #f0ece7; z-index: 2; }
.sample_pop .sp_select_list li.sp_search input { width: 100%; border: 1px solid #e8ddd2; border-radius: 8px; padding: 7px 10px; font-size: 0.8125rem; box-sizing: border-box; }
/* 260820-8 : 레이어 내 간단 로그인 */
.sample_pop .sp_login_box { margin: 12px 0 0; padding: 14px; background: #fff; border: 1px solid #e8ddd2; border-radius: 12px; }
.sample_pop .sp_login_box .sp_login_tit { margin: 0 0 10px; font-size: 0.8125rem; font-weight: 700; color: #333; letter-spacing: -0.5px; }
.sample_pop .sp_login_box input { width: 100%; border: 1px solid #e0d8cd; border-radius: 8px; padding: 10px 12px; font-size: 0.8125rem; box-sizing: border-box; margin-bottom: 6px; }
.sample_pop .sp_login_box .sp_login_btn { display: block; width: 100%; padding: 10px 0; border: 0; border-radius: 8px; background: #f26c4c; color: #fff; font-size: 0.875rem; font-weight: 700; letter-spacing: -0.5px; cursor: pointer; }
.sample_pop .sp_login_box .sp_login_btn:hover { background: #dd5a3c; }
.sample_pop .sp_login_links { margin-top: 8px; text-align: center; }
.sample_pop .sp_login_links a { font-size: 0.75rem; color: #966b45; margin: 0 6px; text-decoration: underline; }
.sample_pop .sp_chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.sample_pop .sp_chips:empty { margin: 0; }
.sample_pop .sp_chip { display: inline-flex; align-items: center; gap: 4px; background: #fff; border: 1px solid #f26c4c; color: #f26c4c; border-radius: 999px; padding: 4px 8px 4px 12px; font-size: 0.75rem; font-weight: 600; letter-spacing: -0.5px; }
.sample_pop .sp_chip button { border: 0; background: none; color: #f26c4c; font-size: 0.9375rem; line-height: 1; cursor: pointer; padding: 0 2px; }
.sample_pop .sp_textarea_wrap { position: relative; margin: 10px 0 0; }
.sample_pop .sp_textarea_wrap textarea { width: 100%; min-height: 92px; border: 1px solid #e8ddd2; border-radius: 12px; background: #fff; padding: 12px 14px 26px; font-size: 0.75rem; color: #d2d2d2; letter-spacing: -0.5px; resize: none; font-family: inherit; }
.sample_pop .sp_count { position: absolute; bottom: 10px; right: 14px; font-size: 0.71875rem; color: #aaa; }
.sample_pop .sp_addr_notice { margin: 8px 0 0; font-size: 0.75rem; color: #966b45; letter-spacing: -0.5px; }
.sample_pop .sp_submit { display: block; width: 100%; margin: 12px 0 0; padding: 13px 0; border: 0; border-radius: 10px; background: #8c7765; color: #fff; font-size: 0.9375rem; font-weight: 700; letter-spacing: -0.7px; text-align: center; cursor: pointer; text-decoration: none; }
.sample_pop .sp_submit:hover { background: #7a6656; color: #fff; text-decoration: none; }
.sample_pop .sp_deco { position: absolute; right: 20px; bottom: 14px; width: 90px; pointer-events: none; }
/* 260820-6 : 무료샘플신청 레이어 팝업 E */

/* 260820-14 : 모바일 화면 크기 조정 (위 PC 이식 블록 덮어씀) */
.sample_pop { width: calc(100% - 20px); margin: 10px auto; padding: 22px 14px 18px; border-radius: 16px; }
.sample_pop .sp_tit { font-size: 1.5625rem; }
.sample_pop .sp_sub { font-size: 0.8125rem; }
.sample_pop .sp_info { padding: 2px 12px; }
.sample_pop .sp_info_row { gap: 10px; padding: 12px 0; }
.sample_pop .sp_icon { flex: 0 0 42px; width: 42px; height: 42px; }
.sample_pop .sp_icon img { width: 42px; height: 42px; }
.sample_pop .sp_info_txt strong { font-size: 0.84375rem; }
.sample_pop .sp_info_txt p { font-size: 0.71875rem; }
.sample_pop .sp_form { padding: 14px 12px 12px; }
/* 260820-15 : 모바일 gd_reset 의 전역 -webkit-appearance:none 이 체크박스 모양을 지움(260810-28 전례) - 샘플 선택 체크박스 모양 복원 */
.sample_pop .sp_select_list input[type="checkbox"] { -webkit-appearance: checkbox; appearance: auto; width: 17px; height: 17px; flex: 0 0 auto; /* 260820-16 : 자사 기본 체크박스 색상(260810-28 주문서와 동일) */ accent-color: #e10505; }
/* 260820-16 : 블록 내 font-size 전량 px->rem 전환(모바일 튜닝 rem 원칙), 카드 텍스트 축소, 체크박스 자사 기본색 */
/* 260820-21 : 레이어 내 네이버/카카오 간편로그인 버튼 */
.sample_pop .sp_sns_login { margin-top: 8px; }
.sample_pop .sp_sns_login .sp_sns_btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.sample_pop .sp_sns_login .sp_sns_btn + .sp_sns_btn { margin-top: 6px; }
.sample_pop .sp_sns_login .sp_sns_btn img { width: 100%; max-width: 306px; height: auto; display: block; margin: 0 auto; }
/* 260820-14 : 무료샘플신청 (모바일) E */