/* ============================================================ 아이맘한의원 (I MOM Korean Medical Clinic) — Design System v2 Reference-matched: warm blush cream · white cards · thin serif eyebrows · muted warm-grey body · swipeable card carousels ============================================================ */ /* 폰트는 HTML 에서 로 로딩 — @import 제거 */ :root{ --paper: #F7EFE8; --paper-deep: #F1E5DA; --card: #FFFFFF; --ink: #2B2622; --ink-soft: #8D8176; --ink-faint: #B7AC9F; --dark: #211D19; --brass: #BB9868; --brass-deep: #8F7043; --brass-tint: #F5EDDF; --line: rgba(43,38,34,0.12); --line-soft: rgba(43,38,34,0.07); --shadow: 0 24px 48px rgba(43,38,34,0.08); --shadow-sm: 0 10px 26px rgba(43,38,34,0.07); --serif: "Noto Serif KR", serif; --serif-en: "Cormorant Garamond", "Noto Serif KR", serif; --sans: "PretendardVariable", "Pretendard", -apple-system, BlinkMacSystemFont, sans-serif; --maxw: 1200px; } *{box-sizing:border-box;} a{touch-action:manipulation;} html{scroll-behavior:smooth;overflow-x:hidden;} body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.75; font-weight:400; word-break:keep-all; overflow-wrap:break-word; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block;} a{color:inherit;text-decoration:none;} ul{list-style:none;margin:0;padding:0;} h1,h2,h3,h4{font-family:var(--sans);margin:0;font-weight:700;letter-spacing:-0.01em;color:var(--ink);} p{margin:0;} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;} @media (max-width:720px){ .wrap{padding:0 20px;} body{font-size:15px;} } .eyebrow-big{ font-family:var(--serif-en); font-weight:500; font-size:44px; letter-spacing:0.22em; text-transform:uppercase; color:#7A6B5B; text-align:center; margin-bottom:4px; } @media (max-width:720px){ .eyebrow-big{font-size:30px;letter-spacing:0.14em;} } .eyebrow{ font-family:var(--sans); font-weight:700; font-size:12px; letter-spacing:0.18em; text-transform:uppercase; color:#8F7043; display:inline-flex; align-items:center; gap:9px; } .eyebrow::before{ content:""; width:18px;height:1px; background:#8F7043; display:inline-block; } .eyebrow.on-dark{color:#D8C6A8;} .eyebrow.on-dark::before{background:#D8C6A8;} .eyebrow.center{justify-content:center;} /* ============================== HEADER ============================== */ .site-header{ position:sticky;top:0;z-index:100; background:#F7EFE8; border-bottom:1px solid var(--line-soft); } .header-inner{ display:flex;align-items:center;justify-content:space-between; padding:18px 28px;max-width:var(--maxw);margin:0 auto; gap:20px; } .brand{display:flex;flex-direction:column;line-height:1.15;} .brand .kr{font-family:var(--serif);font-weight:600;font-size:20px;color:var(--ink);letter-spacing:0.01em;} .brand .en{font-size:9.5px;letter-spacing:0.2em;color:var(--ink-faint);font-weight:600;margin-top:3px;white-space:nowrap;} @media (max-width:420px){ .brand .en{font-size:8px;letter-spacing:0.12em;} } .main-nav{display:flex;align-items:center;gap:2px;} .main-nav a{ padding:10px 16px;font-size:14px;font-weight:500;color:var(--ink); border-radius:2px;transition:color .15s; white-space:nowrap;position:relative; } .main-nav a:hover{color:var(--brass-deep);} .main-nav a.ext{display:inline-flex;align-items:center;gap:4px;} .main-nav a.ext svg{width:10px;height:10px;opacity:.55;} .header-cta{display:flex;align-items:center;gap:8px;} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:12px 24px;border-radius:2px;font-weight:600;font-size:13.5px; letter-spacing:0.03em; border:1px solid transparent;cursor:pointer;transition:opacity .15s,background .15s,color .15s; white-space:nowrap; } .btn:hover{opacity:.82;} .btn-navy{background:var(--ink);color:#fff;} .btn-brass{background:var(--brass);color:#fff;} .btn-forest{background:var(--brass);color:#fff;} .btn-line{background:transparent;border-color:var(--ink);color:var(--ink);} .btn-line-light{background:transparent;border-color:rgba(43,38,34,0.35);color:var(--ink);} .btn-sm{padding:9px 18px;font-size:12.5px;} .btn-block{width:100%;} .header-cta .btn-navy{display:none;} @media (min-width:980px){ .header-cta .btn-navy{display:inline-flex;} } /* 모바일에서 헤더 CTA 버튼 전체 숨김 */ @media (max-width:979px){ .header-cta{ display:none; } } .burger{display:none;background:none;border:none;cursor:pointer;padding:8px;color:var(--ink);} .burger svg{width:22px;height:22px;color:var(--ink);} @media (max-width:980px){ .main-nav{display:none;} .burger{display:inline-flex;} } .mobile-nav{ display:none;flex-direction:column;background:var(--paper); border-bottom:1px solid var(--line-soft);padding:6px 20px 0; overflow:visible; } .mobile-nav.open{display:flex;} .mobile-nav a{padding:13px 4px;font-weight:600;font-size:15px;border-bottom:1px solid var(--line-soft);touch-action:manipulation;-webkit-tap-highlight-color:transparent;} /* 모바일 메뉴 안 CTA 버튼 영역 */ .mobile-nav .mobile-cta{display:flex;gap:10px;padding:16px 0 28px;border-bottom:none;} .mobile-nav .mobile-cta .btn{flex:1;justify-content:center;} /* .mobile-nav a 의 border-bottom 이 버튼에 덮어씌워지는 것 차단 */ .mobile-nav .mobile-cta a.btn-line{border-bottom:1px solid var(--ink);} .mobile-nav .mobile-cta a.btn-naver{border-bottom:1px solid transparent;} /* ============================== HERO (light, editorial) ============================== */ .hero{ background:var(--paper); position:relative; overflow:hidden; padding-top:8px; } .hero .wrap{ display:grid;grid-template-columns:0.95fr 1.05fr;gap:64px; align-items:center; padding-top:56px;padding-bottom:72px; position:relative;z-index:2; } .hero h1{ font-family:var(--serif); font-weight:600; font-size:38px;line-height:1.42;color:var(--ink);margin:20px 0 22px; letter-spacing:0; } .hero h1 em{color:var(--brass-deep);font-style:normal;} .hero p.lead{font-size:15.5px;color:var(--ink-soft);max-width:44ch;margin-bottom:32px;} /* line-break control: hide on narrow screens so composed headline breaks don't fight with natural mobile wrapping and orphan short words */ br.lg-only{display:inline;} @media (max-width:640px){ br.lg-only{display:none;} } .nowrap{white-space:nowrap;} .hero-actions{display:flex;flex-wrap:wrap;gap:12px;} .hero-figure{ position:relative; } .hero-figure img{ border-radius:6px; box-shadow:var(--shadow); } .hero-badge{ position:absolute;bottom:-22px;left:-22px; background:#fff;color:var(--ink); padding:16px 20px;border-radius:4px; font-size:12.5px;font-weight:600;line-height:1.5; box-shadow:var(--shadow-sm); max-width:200px;border-left:2px solid var(--brass); } @media (max-width:980px){ .hero .wrap{grid-template-columns:1fr;gap:36px;padding-top:36px;} .hero h1{font-size:29px;} .hero-figure{order:-1;max-width:360px;margin:0 auto;} .hero-badge{display:none;} } .strata{display:none;} /* ============================== SECTION ============================== */ section{padding:96px 0;} .section-head{max-width:640px;margin:0 auto 56px;text-align:center;} .section-head h2{font-size:24px;margin-top:10px;line-height:1.4;font-weight:700;} .section-head p{margin-top:18px;color:var(--ink-soft);font-size:15px;} .section-head.left{text-align:left;margin-left:0;} .on-dark .section-head h2{color:#fff;} .on-dark .section-head p{color:rgba(255,255,255,0.72);} @media (max-width:720px){ section{padding:64px 0;} .section-head h2{font-size:21px;} } /* ============================== CARD CAROUSEL (reference "Program" pattern) ============================== */ .carousel{position:relative;margin:0 -28px;} .carousel-track{ display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x proximity; padding:6px 28px 8px; scrollbar-width:none;-ms-overflow-style:none; cursor:grab; } .carousel-track::-webkit-scrollbar{display:none;} .carousel-track.dragging{ cursor:grabbing; scroll-snap-type:none; user-select:none; } .carousel-card{ flex:0 0 auto;width:270px;scroll-snap-align:start; background:var(--card);border-radius:16px;overflow:hidden; box-shadow:var(--shadow-sm); display:flex;flex-direction:column; } .carousel-card .cimg{ aspect-ratio:1/1;background:var(--paper-deep); display:flex;align-items:center;justify-content:center;overflow:hidden; } .carousel-card .cimg img{width:100%;height:100%;object-fit:cover;} .carousel-card .cimg img.contain{object-fit:contain;padding:26px;} .carousel-card .cbody{padding:22px 22px 26px;flex:1;display:flex;flex-direction:column;} .carousel-card h4{font-size:16.5px;font-weight:700;margin-bottom:10px;} .carousel-card p{font-size:13.3px;color:var(--ink-soft);line-height:1.75;} .carousel-card .ctag{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--brass-deep);margin-bottom:8px;text-transform:uppercase;} .carousel-card .cgo{margin-top:auto;padding-top:16px;font-size:12.5px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:6px;} .carousel-card .cgo svg{width:13px;height:13px;} .carousel-card.dark{background:var(--dark);} .carousel-card.dark h4,.carousel-card.dark .cgo{color:#fff;} .carousel-card.dark p{color:rgba(255,255,255,.68);} .carousel-dots{display:flex;justify-content:center;gap:9px;margin-top:30px;} .carousel-dots button{ width:22px;height:3px;border-radius:2px;border:none;background:var(--line); cursor:pointer;padding:0;transition:background .2s,width .2s; } .carousel-dots button.active{background:var(--ink);width:30px;} @media (max-width:720px){ .carousel-card{width:230px;} } /* ============================== PROGRAM DOORS (home, 3-up static) ============================== */ .doors{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;} .door{ position:relative;border-radius:16px;overflow:hidden; background:var(--card);box-shadow:var(--shadow-sm); display:flex;flex-direction:column; transition:transform .25s ease, box-shadow .25s ease; } .door:hover{transform:translateY(-5px);box-shadow:var(--shadow);} .door .dimg{aspect-ratio:4/3;overflow:hidden;background:var(--paper-deep);position:relative;} .door .dimg img{width:100%;height:100%;object-fit:cover;} .door .dbody{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1;} .door .num{font-family:var(--serif-en);font-size:12.5px;letter-spacing:.18em;color:var(--brass-deep);margin-bottom:10px;text-transform:uppercase;} .door h3{font-size:20px;margin-bottom:10px;font-weight:700;} .door p{color:var(--ink-soft);font-size:13.5px;margin-bottom:16px;line-height:1.7;} .door .tags{display:flex;flex-wrap:wrap;align-items:center;margin-bottom:20px;} .door .tags span{ font-size:12px;font-weight:600;color:var(--ink-soft); position:relative;margin-right:16px; } .door .tags span::after{ content:"";position:absolute;right:-9px;top:50%;transform:translateY(-50%); width:3px;height:3px;border-radius:50%;background:var(--ink-faint); } .door .tags span:last-child{margin-right:0;} .door .tags span:last-child::after{display:none;} .door .go{ margin-top:auto;display:inline-flex;align-items:center;gap:8px; font-weight:700;font-size:13px;color:var(--ink); } .door .go svg{width:14px;height:14px;transition:transform .2s;} .door:hover .go svg{transform:translateX(4px);} .door-ext-mark{position:absolute;top:18px;right:18px;opacity:.75;z-index:2;background:rgba(255,255,255,.85);border-radius:50%;padding:6px;} .door-ext-mark svg{width:13px;height:13px;display:block;} .door-badge{ position:absolute;left:14px;bottom:14px;z-index:2; display:inline-flex;align-items:center;gap:6px; background:rgba(255,255,255,.94);color:var(--ink); font-size:11.5px;font-weight:700;padding:7px 12px;border-radius:100px; box-shadow:var(--shadow-sm); } .door-badge img{width:16px;height:16px;border-radius:50%;object-fit:cover;} .door-badge svg{flex:none;color:var(--brass-deep);} @media (max-width:900px){ .doors{grid-template-columns:1fr;} } /* ============================== CARDS / GRID ============================== */ .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;} .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:22px;} .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;} @media (max-width:900px){ .grid-3,.grid-4{grid-template-columns:repeat(2,1fr);} .grid-2{grid-template-columns:1fr;} } @media (max-width:600px){ .grid-3,.grid-4{grid-template-columns:1fr;} } .card{ background:var(--card);border:none;border-radius:12px; box-shadow:var(--shadow-sm); padding:28px; } .card h4{font-size:16px;margin-bottom:10px;font-weight:700;} .card p{color:var(--ink-soft);font-size:13.8px;} .feature{ display:flex;gap:16px;align-items:flex-start; } .feature .ic{ flex:none;width:44px;height:44px;border-radius:10px; background:var(--paper-deep);color:var(--brass-deep); display:flex;align-items:center;justify-content:center; } .feature .ic svg{width:20px;height:20px;} .feature h4{font-size:14.5px;margin-bottom:5px;font-weight:700;} .feature p{font-size:13px;color:var(--ink-soft);} /* ============================== PRICE TABLE ============================== */ .price-block{margin-bottom:38px;} .price-block:last-child{margin-bottom:0;} .price-block-head{ display:flex;align-items:baseline;justify-content:space-between;gap:12px; margin-bottom:16px;flex-wrap:wrap; } .price-block-head h4{font-size:16.5px;color:var(--ink);font-weight:700;} .price-block-head .note{font-size:12px;color:var(--ink-soft);font-weight:400;} table.price{width:100%;border-collapse:collapse;font-size:14px;background:var(--card);border-radius:10px;overflow:hidden;} table.price th,table.price td{padding:14px 16px;text-align:right;border-bottom:1px solid var(--line-soft);} table.price th:first-child,table.price td:first-child{text-align:left;} table.price thead th{background:var(--paper-deep);color:var(--ink);font-weight:700;font-size:12px;letter-spacing:.02em;} table.price tbody tr:last-child td{border-bottom:none;} table.price td.strong{font-weight:800;color:var(--brass-deep);} table.price td .sub{display:block;font-size:11.5px;color:var(--ink-faint);font-weight:400;margin-top:2px;} .price-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;} @media (max-width:720px){ table.price{font-size:12.5px;} table.price th,table.price td{padding:11px 10px;} } .vat-note{font-size:11.5px;color:var(--ink-faint);margin-top:12px;text-align:right;} /* ============================== TIER CARDS ============================== */ .tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;} .tier{ border:none;border-radius:14px;padding:30px 26px;background:var(--card); box-shadow:var(--shadow-sm); display:flex;flex-direction:column; } .tier .tag{ align-self:flex-start;font-family:var(--serif-en);font-weight:600;font-size:22px; margin-bottom:14px;color:var(--ink);letter-spacing:.02em; } .tier.best{border:1px solid var(--brass);position:relative;box-shadow:var(--shadow);} .tier.best .tag{color:var(--brass-deep);} .tier.best::before{ content:"BEST";position:absolute;top:-11px;right:22px; background:var(--brass);color:#fff;font-size:10.5px;font-weight:800; padding:5px 12px;border-radius:100px;letter-spacing:.08em; } .tier p.desc{font-size:13px;color:var(--ink-soft);margin-bottom:18px;min-height:40px;line-height:1.7;} .tier .incl{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:24px;} .tier .incl span{font-size:11px;background:var(--paper-deep);color:var(--ink-soft);padding:5px 10px;border-radius:100px;font-weight:600;} .tier.best .incl span{background:var(--brass-tint);color:var(--brass-deep);} .tier .prices{margin-top:auto;display:flex;justify-content:space-between;border-top:1px solid var(--line-soft);padding-top:18px;} .tier .prices div{text-align:center;} .tier .prices .n{display:block;font-size:11px;color:var(--ink-faint);margin-bottom:4px;} .tier .prices .p{font-family:var(--serif);font-weight:700;font-size:17px;color:var(--ink);} @media (max-width:900px){ .tiers{grid-template-columns:1fr;} } /* ============================== PROCESS STEPS ============================== */ .steps{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;} .step{text-align:center;padding:20px 12px;} .step .n{ width:36px;height:36px;border-radius:50%;border:1px solid var(--line);color:var(--ink); display:flex;align-items:center;justify-content:center;margin:0 auto 14px; font-family:var(--serif-en);font-weight:600;font-size:14px; } .step h5{font-size:13.8px;font-weight:700;margin-bottom:5px;} .step p{font-size:12px;color:var(--ink-soft);} @media (max-width:900px){ .steps{grid-template-columns:repeat(5,1fr);gap:8px;} .step{padding:10px 4px;} .step p{display:none;} } /* ============================== DEVICE GRID (legacy grid, still used in fallback) ============================== */ .device{ border:1px solid var(--line-soft);border-radius:14px;overflow:hidden;background:var(--card); display:flex;flex-direction:column; } .device .thumb{ aspect-ratio:1/1;background:var(--paper-deep); display:flex;align-items:center;justify-content:center;padding:18px; } .device .thumb img{max-height:100%;object-fit:contain;} .device .thumb.empty{color:var(--ink-faint);font-size:12px;text-align:center;padding:30px;} .device .body{padding:16px 18px 20px;} .device h5{font-size:14.5px;margin-bottom:5px;font-weight:700;} .device p{font-size:12px;color:var(--ink-soft);} /* ============================== CREDLIST / AWARDS ============================== */ .credlist{display:flex;flex-direction:column;} .credlist li{ padding:13px 0;border-bottom:1px solid var(--line-soft); font-size:14px;display:flex;gap:12px;color:var(--ink-soft); } .credlist li::before{content:"·";color:var(--brass-deep);font-weight:900;} .credlist li:last-child{border-bottom:none;} /* ============================== NOTE BOX ============================== */ .note-box{ border:1px solid var(--line);background:var(--card); border-left:2px solid var(--brass); border-radius:8px;padding:20px 22px;font-size:13px;color:var(--ink-soft); display:flex;gap:12px;align-items:flex-start; } .note-box svg{flex:none;width:18px;height:18px;margin-top:1px;color:var(--brass-deep);} /* ============================== BAND (muted, restrained — not saturated blocks) ============================== */ .band-navy{background:var(--dark);color:#fff;} .band-forest{background:var(--dark);color:#fff;} .band-brass{background:var(--card);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);} .band-paper-deep{background:var(--paper-deep);} /* ============================== CTA STRIP ============================== */ .cta-strip{ border-radius:16px;background:var(--dark);color:#fff; padding:52px 48px;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap; } .cta-strip h3{color:#fff;font-size:22px;margin-bottom:8px;font-weight:700;} .cta-strip p{color:rgba(255,255,255,0.68);font-size:14px;} .cta-strip .actions{display:flex;gap:10px;flex-wrap:wrap;} .cta-strip .btn-line-light{border-color:rgba(255,255,255,0.35);color:#fff;} /* ============================== FOOTER ============================== */ footer{background:var(--dark);color:rgba(255,255,255,0.62);padding:60px 0 28px;} footer .fgrid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px;margin-bottom:40px;} footer .brand-f .kr{font-family:var(--serif);font-weight:600;font-size:19px;color:#fff;} footer .brand-f .en{font-size:9.5px;letter-spacing:.18em;color:rgba(255,255,255,0.42);margin:5px 0 16px;} footer .brand-f p{font-size:12.8px;line-height:1.95;} footer h6{color:#fff;font-size:12px;letter-spacing:.05em;margin-bottom:14px;font-weight:600;} footer ul li{font-size:13.2px;margin-bottom:10px;} footer ul li a:hover{color:#fff;} footer .bottom{ border-top:1px solid rgba(255,255,255,0.10);padding-top:22px; display:flex;justify-content:space-between;font-size:11.5px;color:rgba(255,255,255,0.4);flex-wrap:wrap;gap:8px; } @media (max-width:800px){ footer .fgrid{grid-template-columns:1fr;gap:28px;} } /* ============================== MISC ============================== */ .pill-row{display:flex;flex-wrap:wrap;gap:10px;} .pill-row{display:flex;flex-wrap:wrap;align-items:center;gap:0;} .pill{ font-size:12.5px;font-weight:600;color:var(--ink-soft); padding:0;background:none;position:relative; margin-right:20px; } .pill::after{ content:"";position:absolute;right:-11px;top:50%;transform:translateY(-50%); width:3px;height:3px;border-radius:50%;background:var(--ink-faint); } .pill:last-child{margin-right:0;} .pill:last-child::after{display:none;} a.pill{color:var(--ink);} a.pill:hover{color:var(--brass-deep);} /* nav-style filter chips (distinct from plain .pill tags) */ .chip-row{display:flex;flex-wrap:wrap;gap:8px;} .chip{ font-size:12.5px;font-weight:600;padding:8px 16px;border-radius:100px; background:var(--paper-deep);color:var(--ink-soft);transition:background .15s,color .15s; } .chip:hover{background:var(--brass-tint);color:var(--brass-deep);} .chip.active{background:var(--brass-tint);color:var(--brass-deep);} .divider{height:1px;background:var(--line-soft);margin:56px 0;} .gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;} .gallery img{border-radius:10px;aspect-ratio:3/4;object-fit:cover;} @media (max-width:900px){ .gallery{grid-template-columns:repeat(2,1fr);} } .kicker-page{ background:var(--paper);color:var(--ink);padding:64px 0 60px;position:relative; border-bottom:1px solid var(--line-soft); } .kicker-page h1{font-family:var(--serif);font-weight:600;color:var(--ink);font-size:32px;margin-top:16px;line-height:1.4;} .kicker-page p{color:var(--ink-soft);font-size:14.5px;margin-top:16px;max-width:56ch;} .kicker-page .crumbs{font-size:12px;color:var(--ink-faint);margin-top:6px;letter-spacing:.02em;} .two-col{display:grid;grid-template-columns:0.9fr 1.1fr;gap:56px;align-items:center;} @media (max-width:900px){ .two-col{grid-template-columns:1fr;gap:32px;} } .two-col.rev{grid-template-columns:1.1fr 0.9fr;} @media (max-width:900px){ .two-col.rev{grid-template-columns:1fr;} } .quote-block{ border-left:2px solid var(--brass);padding-left:24px;font-family:var(--serif);font-weight:500; font-size:17px;line-height:2;color:var(--ink); } .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;} @media (max-width:800px){ .contact-grid{grid-template-columns:1fr;} } .contact-card{ background:var(--card);border:1px solid var(--line-soft);border-radius:14px;padding:28px; display:flex;gap:16px;align-items:flex-start; } .contact-card .ic{ flex:none;width:46px;height:46px;border-radius:10px;background:var(--paper-deep);color:var(--brass-deep); display:flex;align-items:center;justify-content:center; } .contact-card .ic svg{width:20px;height:20px;} .contact-card h4{font-size:15px;margin-bottom:6px;font-weight:700;} .contact-card p{font-size:13.5px;color:var(--ink-soft);} .contact-card .big{font-size:18px;font-weight:700;color:var(--ink);font-family:var(--serif);} .map-visual{ border-radius:14px;overflow:hidden;background:var(--paper-deep);position:relative; min-height:340px;display:flex;align-items:center;justify-content:center; border:1px solid var(--line-soft); } .hours-table{width:100%;border-collapse:collapse;font-size:14px;} .hours-table td{padding:12px 4px;border-bottom:1px solid var(--line-soft);color:var(--ink-soft);} .hours-table td:first-child{font-weight:700;color:var(--ink);width:120px;} .hours-table tr:last-child td{border-bottom:none;} /* ============================== AUTO-SCROLL INFINITE CAROUSEL ============================== */ .auto-carousel{ overflow:hidden; position:relative; /* fade edges */ -webkit-mask-image:linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%); mask-image:linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%); } .auto-track{ display:flex;gap:20px; width:max-content; animation:autoScroll 32s linear infinite; cursor:grab; } .auto-track:hover{animation-play-state:paused;} .auto-track.dragging{animation-play-state:paused;cursor:grabbing;} .auto-track .carousel-card{flex:0 0 auto;width:270px;} @keyframes autoScroll{ 0% {transform:translateX(0);} 100%{transform:translateX(-50%);} } @media(max-width:720px){ .auto-track .carousel-card{width:230px;} } /* ============================== DRAG-ONLY INFINITE CAROUSEL ============================== */ .drag-carousel{ overflow:hidden; position:relative; -webkit-mask-image:linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%); mask-image:linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%); cursor:grab; user-select:none; } .drag-carousel:active{cursor:grabbing;} .drag-track{ display:flex;gap:20px; padding:6px 28px 8px; width:max-content; will-change:transform; } .drag-track .carousel-card{flex:0 0 auto;width:270px;} @media(max-width:720px){ .drag-track .carousel-card{width:230px;} } /* ============================== MOBILE PRICE TABLE ============================== */ @media(max-width:720px){ .price-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;} table.price{min-width:380px;} table.price th,table.price td{padding:10px 8px;font-size:12px;} /* 좁은 모바일에서 가격표 컨테이너 */ section .price-scroll{margin:0 -20px;padding:0 20px;} } /* ============================== NAVER BUTTON ============================== */ .btn-naver{ background:#03C75A;color:#fff; display:inline-flex;align-items:center;gap:7px; } .btn-naver:hover{background:#00b050;} .btn-naver .n-logo{ width:18px;height:18px;flex:none; background:#fff;border-radius:3px; display:flex;align-items:center;justify-content:center; font-weight:900;font-size:11px;color:#03C75A;font-family:sans-serif;letter-spacing:-0.5px; } /* ============================== NAVER BUTTON SIZING FIX ============================== */ .btn-naver{ padding:10px 18px;font-size:13px;gap:6px; } .btn-naver .n-logo{ width:16px;height:16px;font-size:10px; border-radius:2px;flex-shrink:0; } /* header naver button */ .header-cta .btn-naver{padding:10px 16px;font-size:12.5px;} /* ============================== DRAG-CAROUSEL DOT NAV ============================== */ .drag-carousel + .carousel-dots, .carousel-dots[id]{ display:flex;justify-content:center;gap:9px;margin-top:28px; } /* ============================== JANUS 진단 이미지 PC/모바일 분기 ============================== */ .janus-mobile{display:none;} @media(max-width:980px){ .janus-pc{display:none;} .janus-mobile{display:block;margin-top:24px;} /* 모바일에서 kicker-page 내 grid 해제 */ .kicker-page .wrap[style*="grid"]{display:block !important;} } /* ============================== MOBILE-ONLY FIXES ============================== */ @media(max-width:720px){ /* 모바일 1) AWARD 섹션 세로 배치 */ .award-grid{ display:flex !important; flex-direction:column !important; gap:18px !important; } .award-grid > *{width:100% !important;aspect-ratio:auto !important;} /* 모바일 2) 전통의 힘 섹션 - 줄바꿈 최적화 */ .kicker-page h1{font-size:26px !important;} .kicker-page .wrap > .quote-section{display:block !important;} .quote-block{font-size:14px !important;line-height:2 !important;} .quote-block br{display:none !important;} /* 모바일 3) 홈 메인 인용구 폰트 */ section .quote-block{font-size:15px !important;line-height:1.9 !important;} /* 모바일 4) 가격표 - 여백 줄이기 */ section{padding:44px 0 !important;} .wrap{padding:0 14px !important;} table.price th,table.price td{padding:9px 7px !important;font-size:12px !important;} .price-scroll{margin:0 -14px;padding:0 14px;} } /* ============================== EQUAL-WIDTH CTA BUTTONS (공통) ============================== */ .cta-equal-btns{display:flex;flex-wrap:wrap;gap:10px;} .cta-equal-btns .btn{flex:1;min-width:120px;justify-content:center;text-align:center;} /* 모바일 전용 — quote-block, 전통의 힘 h1, 가격표 세부 */ @media(max-width:720px){ /* 2) about.html 전통의 힘 h1 */ .about-hero-h1{font-size:28px !important;margin-bottom:24px !important;} /* 2) about/index quote-block br 유지하되 폰트 줄임 */ .quote-block{font-size:14.5px !important;line-height:1.85 !important;} /* 3) index 홈 quote-block */ .home-quote{font-size:14.5px !important;line-height:1.85 !important;} /* 4) 가격표 wrap padding 줄여서 테이블 공간 확보 */ #hair .wrap,#toning .wrap,#lifting .wrap,#booster .wrap,#etc .wrap,#allcare .wrap{ padding:0 10px !important; } #hair .price-scroll,#toning .price-scroll,#lifting .price-scroll, #booster .price-scroll,#etc .price-scroll,#allcare .price-scroll{ margin:0 -10px; } table.price th,table.price td{padding:8px 6px !important;font-size:11.5px !important;} } /* ============================== ABOUT 전통의 힘 모바일 전용 ============================== */ @media(max-width:720px){ /* 전체 섹션 그리드 → 단일 컬럼 */ .about-tradition .wrap > div{ display:block !important; max-width:100% !important; margin-left:0 !important; } /* 사진: float 해제 → 텍스트 아래 전체 너비로 */ .about-grandpa-img{ float:none !important; margin:24px 0 0 0 !important; width:100% !important; } .about-grandpa-img img{ max-width:100% !important; border-radius:12px !important; } /* 제목 크기 */ .about-hero-h1{font-size:24px !important;margin-bottom:18px !important;} /* 인용구: br 유지하되 폰트를 줄여서 각 구절이 한 줄에 들어오도록 */ .about-quote br{display:inline !important;} .about-quote{font-size:13px !important;line-height:2.1 !important;word-break:keep-all;} .about-tradition .wrap::after{content:"";display:table;clear:both;} } /* general-care 히어로 이미지 — 모바일에서 숨김 */ @media(max-width:900px){ .gc-hero-img{display:none;} .kicker-page .wrap[style*="grid"]{display:block !important;} } /* ============================== 모바일 가격표 — 드래그 없이 한 화면 ============================== */ @media(max-width:720px){ /* 가격표 여백 최소화 */ .price-scroll{overflow-x:visible !important; margin:0 !important;} table.price{font-size:11px !important; min-width:unset !important; width:100% !important;} table.price th, table.price td{padding:7px 5px !important; font-size:11px !important;} table.price th:first-child, table.price td:first-child{font-size:11px !important;} /* sub 텍스트 더 작게 */ table.price .sub{font-size:9.5px !important;} /* strong 가격 색상 유지 */ table.price td.strong{font-size:11px !important;} /* 1회체험가 컬럼처럼 좁은 컬럼 */ table.price th, table.price td{word-break:keep-all; white-space:nowrap;} /* 첫번째 컬럼(시술명)만 wrap 허용 */ table.price th:first-child, table.price td:first-child{white-space:normal !important; word-break:keep-all;} } /* janus-pc 캡션 중앙정렬 — PC 전용 */ @media(min-width:981px){ .janus-pc{display:flex;flex-direction:column;align-items:center;} } /* ============================== 인앱 브라우저 성능 최적화 ============================== */ /* 페이지 전환 GPU 가속 */ .site-header{will-change:transform;} .mobile-nav{will-change:transform;transform:translateZ(0);} /* 이미지 레이아웃 이탈 방지 */ img{content-visibility:auto;} /* 버튼/링크 즉각 반응 */ .btn,.feature a,nav a{will-change:opacity;} /* ============================== SPA 페이지 전환 ============================== */ #page-content{ transition: opacity 0.18s ease; } #page-content.loading{ opacity: 0; pointer-events: none; } /* 모바일 동영상 터치 스크롤 충돌 방지 */ video{touch-action:pan-y;}