/* BASIC css start */
/* ========================================================================== 
   MER_N MOBILE MAIN
   Apply to: 모바일 디자인 > 메인 화면 > CSS
   This file matches MOBILE/01_메인/main.txt.
   ========================================================================== */
#wrap,#contentWrapper{width:100%;margin:0;padding:0}
.mer_n-main{display:block;width:100%;margin:0;padding:0 0 70px;color:#272522;background:#fff;font-family:Arial,'Noto Sans KR','Malgun Gothic',sans-serif}
.mer_n-main *,.mer_n-main *::before,.mer_n-main *::after{box-sizing:border-box}
.mer_n-main a{color:inherit;text-decoration:none}
.mer_n-main .wrap{width:100%;margin:0 auto;padding-right:18px;padding-left:18px}
.mer_n-main [id^="mer_n-"]{scroll-margin-top:64px}

/* Main visual */
.mer_n-main .hero.mer_n-main-visual{display:flex;width:100%;height:clamp(440px,125vw,620px);align-items:center;background-color:#eee8df;background-size:cover!important;background-position:center top!important;background-repeat:no-repeat!important}
.mer_n-main .hero.mer_n-main-visual>div{width:100%;padding:0 28px}
.mer_n-main .hero span,.mer_n-main .title small,.mer_n-main .pantscopy small,.mer_n-main .size>small{display:block;color:#8d8073;font-size:10px;letter-spacing:2px}
.mer_n-main .hero h1{margin:16px 0;color:#272522;font:400 34px/1.28 Georgia,'Noto Serif KR',serif;letter-spacing:-.5px}
.mer_n-main .hero p{max-width:270px;margin:0;color:#68625d;font-size:12px;line-height:1.7}
.mer_n-main .mer_n-line-btn{display:inline-flex;min-height:42px;align-items:center;justify-content:center;margin-top:20px;padding:0 18px;border:1px solid currentColor;background:transparent;font-size:11px}

/* Quick links */
.mer_n-main .quick{display:flex;gap:10px;padding:25px 18px 12px;overflow-x:auto;scrollbar-width:none}
.mer_n-main .quick::-webkit-scrollbar{display:none}
.mer_n-main .quick a{flex:0 0 76px;min-width:0;text-align:center}
.mer_n-main .quick a>span{display:block;min-height:22px;font-size:11px;letter-spacing:.5px}
.mer_n-main .quick b{display:block;margin-top:6px;font-size:10px;font-weight:500;color:#77716b}

/* Shared sections */
.mer_n-main .section{padding-top:68px;padding-bottom:68px}
.mer_n-main .title{margin:0 0 28px;text-align:center}
.mer_n-main .title.left{text-align:left}
.mer_n-main .title h2{margin:9px 0;color:#272522;font:400 26px/1.35 Georgia,'Noto Serif KR',serif}
.mer_n-main .title p{margin:0;color:#77716b;font-size:12px;line-height:1.65}
.mer_n-main .soft{background:#f7f5f2}

/* Product cards */
.mer_n-main .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 10px}
.mer_n-main .card{min-width:0}
.mer_n-main .card .pic{position:relative;width:100%;aspect-ratio:3/4;overflow:hidden;background:#eeeae5}
.mer_n-main .card .pic>a:first-child,.mer_n-main .card .pic>a:first-child img{display:block;width:100%;height:100%}
.mer_n-main .card .pic>a:first-child img{object-fit:cover}
.mer_n-main .badge{position:absolute;z-index:2;top:9px;left:9px;padding:6px 8px;background:#292725;color:#fff;font-size:9px}
.mer_n-main .card h3{margin:12px 0 8px;overflow:hidden;color:#272522;font-size:13px;font-weight:400;line-height:1.5;text-overflow:ellipsis;white-space:nowrap}
.mer_n-main .price{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px}
.mer_n-main .price strong{order:1;font-size:16px}
.mer_n-main .price strong+strong{margin-left:4px}
.mer_n-main .price del{order:2;margin:0;color:#aaa;font-size:10px}
.mer_n-main .price em{font-style:normal;color:#c43b32;font-size:11px;font-weight:700}
.mer_n-main .meta{margin-top:8px;color:#888;font-size:10px}
.mer_n-main .prd-ico{min-height:14px;margin-top:8px}
.mer_n-main .prd-ico img{width:auto;max-height:15px;margin-right:3px}
.mer_n-main .prd-color{margin-top:8px;font-size:10px;letter-spacing:2px}
.mer_n-main .mer_n-card-tools{position:absolute;z-index:3;right:7px;bottom:7px;display:flex;gap:6px}
.mer_n-main .mer_n-card-tools a{display:grid;width:29px;height:29px;place-items:center;border:1px solid rgba(48,45,42,.22);background:rgba(255,255,255,.88);color:#272522;font-size:10px}
.mer_n-main .mer_n-card-tools img{display:block;width:auto;max-width:15px;height:auto;max-height:15px}
.mer_n-main .mer_n-wish{min-width:29px;padding:0 6px}
.mer_n-main .mer_n-wish-count{display:none}
.mer_n-main .more{display:flex;min-height:44px;align-items:center;justify-content:center;margin:38px auto 0;padding:0 25px;border:1px solid #bdb7b0;background:#fff;font-size:11px}

/* Price shop */
.mer_n-main .prices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mer_n-main .prices a{display:block;min-height:128px;padding:27px 18px;background:#f2efeb}
.mer_n-main .prices small,.mer_n-main .prices span{display:block;color:#77716b;font-size:10px}
.mer_n-main .prices b{display:block;margin:9px 0;font:400 23px/1.2 Georgia,serif}

/* Pants collection */
.mer_n-main .pants{padding:68px 0;background:#312e2b;color:#fff}
.mer_n-main .mer_n-pants-banner{display:block}
.mer_n-main .pantscopy{margin-bottom:35px}
.mer_n-main .pantscopy h2{margin:12px 0;font:400 29px/1.35 Georgia,'Noto Serif KR',serif}
.mer_n-main .pantscopy p{margin:0;color:#c9c4bf;font-size:12px;line-height:1.7}
.mer_n-main .pants .mer_n-line-btn{border-color:#8a837d;color:#fff}
.mer_n-main .mer_n-pants-visual{width:100%;margin:0;overflow:hidden;background:#69635e;aspect-ratio:15/7}
.mer_n-main .mer_n-pants-visual a,.mer_n-main .mer_n-pants-visual img{display:block;width:100%;height:100%}
.mer_n-main .mer_n-pants-visual img{object-fit:cover;object-position:center}

/* Size and categories */
.mer_n-main .size{padding:50px 12px;text-align:center;background:#eee8df}
.mer_n-main .size h2{margin:12px;color:#272522;font:400 31px/1.3 Georgia,'Noto Serif KR',serif}
.mer_n-main .size p{margin:0;color:#6d6861;font-size:12px}
.mer_n-main .size>div{display:flex;justify-content:center;gap:5px;margin:25px 0}
.mer_n-main .size>div span{display:grid;width:47px;height:47px;place-items:center;border:1px solid #aaa;border-radius:50%;background:#f8f5f0;font-size:11px}
.mer_n-main .mer_n-category-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.mer_n-main .mer_n-category-links a{display:grid;min-height:84px;place-items:center;background:#f2efeb;font:400 15px/1.2 Georgia,serif}

/* Brand process */
.mer_n-main .direct{padding:68px 0;background:#262421;color:#fff}
.mer_n-main .direct .title p{color:#bbb}
.mer_n-main .steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid #555;border-bottom:1px solid #555}
.mer_n-main .steps>div{min-width:0;padding:30px 18px;border-right:1px solid #555;border-bottom:1px solid #555}
.mer_n-main .steps>div:nth-child(2n){border-right:0}
.mer_n-main .steps>div:nth-last-child(-n+2){border-bottom:0}
.mer_n-main .steps i{display:block;margin-bottom:20px;color:#9f968c;font:400 14px/1 Georgia,serif}
.mer_n-main .steps b{font-size:11px;letter-spacing:1px}
.mer_n-main .steps p{margin:10px 0 0;color:#bbb;font-size:11px;line-height:1.7}

@media(max-width:359px){.mer_n-main .hero.mer_n-main-visual{height:440px}.mer_n-main .hero h1{font-size:31px}.mer_n-main .wrap{padding-right:15px;padding-left:15px}.mer_n-main .grid{gap:30px 8px}.mer_n-main .size>div span{width:43px;height:43px}}
/* MER_N mobile main card controls - PC aligned final placement */
.mer_n-main .card .pic{overflow:visible!important;margin-bottom:36px!important}
.mer_n-main .card .pic>a:first-child{overflow:hidden!important}
.mer_n-main .mer_n-wish{position:absolute!important;z-index:5!important;top:auto!important;right:7px!important;bottom:7px!important;display:grid!important;width:29px!important;min-width:29px!important;height:29px!important;place-items:center!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;font-size:0!important}
.mer_n-main .mer_n-wish>span{display:none!important}
.mer_n-main .mer_n-wish:before{color:#fff!important;font:400 25px/1 Georgia,serif!important;text-shadow:0 1px 3px rgba(0,0,0,.5)!important;content:'♡'!important}
.mer_n-main .mer_n-wish:has(.my-wish-list.wish-on):before{color:#fff!important;content:'♥'!important}
.mer_n-main .mer_n-card-tools{position:absolute!important;z-index:4!important;top:calc(100% + 8px)!important;right:auto!important;bottom:auto!important;left:0!important;display:flex!important;height:27px!important;gap:6px!important;margin:0!important;padding:0!important}
.mer_n-main .mer_n-card-tools a{position:relative!important;display:grid!important;box-sizing:border-box!important;width:auto!important;min-width:52px!important;height:27px!important;place-items:center!important;margin:0!important;padding:0 9px!important;overflow:hidden!important;border:1px solid rgba(48,45,42,.42)!important;border-radius:0!important;background:transparent!important;color:#302d2a!important;box-shadow:none!important;font-size:0!important;text-decoration:none!important}
.mer_n-main .mer_n-card-tools a:not(.mer_n-benefit):before{font:500 9px/1 Arial,sans-serif!important;letter-spacing:.7px!important;content:'VIEW'!important}
.mer_n-main .mer_n-card-tools a.mer_n-benefit:before{font:500 10px/1 Arial,sans-serif!important;content:'%'!important}
.mer_n-main .mer_n-card-tools img{position:absolute!important;inset:0!important;display:block!important;width:100%!important;max-width:none!important;height:100%!important;max-height:none!important;margin:0!important;opacity:0!important}
@supports not selector(:has(*)){.mer_n-main .mer_n-wish:before{content:'♡'!important}}
@media(max-width:359px){.mer_n-main .card .pic{margin-bottom:34px!important}.mer_n-main .mer_n-card-tools{top:calc(100% + 7px)!important}.mer_n-main .mer_n-card-tools a{min-width:49px!important;height:25px!important;padding:0 8px!important}}

/* Mobile main hero category landing */
.mer_n-main.mer_n-mobile .mer_n-main-visual { position:relative; }
.mer_n-main.mer_n-mobile .mer_n-main-visual .mer_n-hero-link { position:absolute; inset:0; z-index:1; display:block; }
.mer_n-main.mer_n-mobile .mer_n-main-visual > div { position:relative; z-index:2; pointer-events:none; }
.mer_n-main.mer_n-mobile .mer_n-main-visual > div a { pointer-events:auto; }
/* Mobile comfort size measurement decoration */
.mer_n-main.mer_n-mobile #mer_n-size .size{position:relative;isolation:isolate;min-height:300px;overflow:hidden}
.mer_n-main.mer_n-mobile #mer_n-size .size::before{content:'';position:absolute;z-index:0;inset:0;display:block;background:url('https://only-style.com/MER_N/MAIN/comfort-size-measuring-tape.png') no-repeat center center/100% 100%;opacity:.13;pointer-events:none}
.mer_n-main.mer_n-mobile #mer_n-size .size>*{position:relative;z-index:1}
@media(max-width:359px){.mer_n-main.mer_n-mobile #mer_n-size .size::before{opacity:.10}}
/* 2026-10-15 PC main sync: centered new title, safe compact mobile pricing */
.mer_n-main.mer_n-mobile .price{flex-wrap:wrap!important;gap:4px 6px!important}
.mer_n-main.mer_n-mobile .price strong{font-size:14px!important}
.mer_n-main.mer_n-mobile .price del{font-size:10px!important}
.mer_n-main.mer_n-mobile .price .mer_n-main-discount{font-size:12px!important}
.mer_n-main.mer_n-mobile #mer_n-new .title{text-align:center}

/* Mobile main REVIEW: match PC typography */
.mer_n-main.mer_n-mobile .mer_n-review-meta{margin-top:9px!important;color:#918980!important;font:500 9px/1.3 Arial,sans-serif!important;letter-spacing:.8px!important}
.mer_n-main.mer_n-mobile .mer_n-review-meta span{margin-left:4px!important;color:#514b45!important;font:inherit!important;letter-spacing:inherit!important}
/* 2026-10-27 Mobile product areas: edge-to-edge photos / WEEKLY BEST 2 columns */
.mer_n-main.mer_n-mobile #mer_n-weekly-best>.wrap,
.mer_n-main.mer_n-mobile #mer_n-deal,
.mer_n-main.mer_n-mobile #mer_n-new{width:100%;max-width:none;padding-left:0!important;padding-right:0!important}
.mer_n-main.mer_n-mobile #mer_n-weekly-best .title,
.mer_n-main.mer_n-mobile #mer_n-deal>.title,
.mer_n-main.mer_n-mobile #mer_n-new>.title{padding-left:18px;padding-right:18px}
.mer_n-main.mer_n-mobile .grid.mer_n-product-grid{width:100%;margin-left:0;margin-right:0;min-width:0;column-gap:6px}
.mer_n-main.mer_n-mobile #mer_n-weekly-best .grid.mer_n-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.mer_n-main.mer_n-mobile .mer_n-product-grid>.card{min-width:0;max-width:100%}
.mer_n-main.mer_n-mobile .mer_n-product-grid .card .pic{width:100%;min-width:0}
.mer_n-main.mer_n-mobile .mer_n-product-grid .card>h3,
.mer_n-main.mer_n-mobile .mer_n-product-grid .card>.price,
.mer_n-main.mer_n-mobile .mer_n-product-grid .card>.mer_n-review-meta,
.mer_n-main.mer_n-mobile .mer_n-product-grid .card>.prd-color{padding-left:6px;padding-right:6px}
.mer_n-main.mer_n-mobile .mer_n-product-grid .mer_n-card-tools{left:6px!important}

/* BASIC css end */