/* 자체 콘셉트 디자인 3점. 1280px(데스크톱) / 390px(모바일) 고정 폭으로 그리고 .fit 프레임에서 축소해 보여준다. */

.scr { width: 1280px; background: var(--b); color: var(--i); line-height: 1.6; word-break: keep-all; font-size: 16px; text-align: left; }
.scr.m { width: 390px; }
.scr *, .scr *::before, .scr *::after { box-sizing: border-box; margin: 0; padding: 0; }
.scr i, .scr em, .scr u { font-style: normal; text-decoration: none; }
.scr b { font-weight: 600; }
.scr h3, .scr h4 { font-weight: inherit; }
.scr svg { display: block; max-width: none; }
.scr figure, .scr ul, .scr dl { list-style: none; }
.scr .menu { display: none; }
.scr.m .menu { display: block; font-size: 13px; }
.scr.m nav { display: none !important; }

/* =============== A. 소담 도예 · 도자기 공방 =============== */
.a { --b: #e8e9e5; --i: #23262a; --mu: #5b5f5e; --l: #cdd0ca; font-family: 'Pretendard Variable', Pretendard, sans-serif; }
.a h3, .a h4, .a .logo { font-weight: 400; }
.a .nav { display: flex; align-items: center; height: 76px; padding: 0 56px; gap: 48px; }
.a .logo { font-size: 24px; letter-spacing: 0; margin-right: auto; }
.a .nav nav { display: flex; gap: 36px; font-size: 14px; }
.a .cart { font-size: 14px; }
.a .lnk { display: inline-block; font-size: 14px; font-weight: 500; border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.a .hero { display: grid; grid-template-columns: 388px 1fr; gap: 56px; padding: 0 56px 0; align-items: end; }
.a .hero .t { padding-bottom: 44px; }
.a .hero h3 { font-size: 40px; line-height: 1.5; letter-spacing: -.01em; margin-bottom: 24px; }
.a .hero p { font-size: 15px; line-height: 1.85; color: var(--mu); margin-bottom: 28px; max-width: 330px; }
.a .hero .img { height: 560px; overflow: hidden; }
.a .hero .img svg { width: 100%; height: 100%; }
.a .new { padding: 120px 56px 0; }
.a .hd { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 40px; }
.a .hd h4 { font-size: 28px; }
.a .grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: end; }
.a figure .im { overflow: hidden; }
.a figure svg { width: 100%; height: 100%; }
.a figcaption { display: grid; gap: 2px; margin-top: 14px; font-size: 14px; }
.a figcaption span { color: var(--mu); font-size: 13px; }
.a .p1 { grid-column: 1 / span 4; } .a .p1 .im { height: 520px; }
.a .p2 { grid-column: 5 / span 4; } .a .p2 .im { height: 380px; }
.a .p3 { grid-column: 9 / span 2; } .a .p3 .im { height: 300px; }
.a .p4 { grid-column: 11 / span 2; } .a .p4 .im { height: 440px; }
.a .story { display: grid; grid-template-columns: 7fr 5fr; gap: 80px; padding: 140px 56px 0; align-items: center; }
.a .story .img { height: 560px; overflow: hidden; } .a .story .img svg { width: 100%; height: 100%; }
.a .story h4 { font-size: 30px; line-height: 1.5; margin-bottom: 20px; }
.a .story p { font-size: 15px; line-height: 1.9; color: var(--mu); margin-bottom: 28px; max-width: 380px; }
.a .lesson { padding: 140px 56px 120px; display: grid; grid-template-columns: 388px 1fr; gap: 56px; }
.a .lesson h4 { font-size: 28px; }
.a .lesson li { display: grid; grid-template-columns: 180px 1fr auto; gap: 24px; padding: 22px 0; border-top: 1px solid var(--l); align-items: baseline; font-size: 15px; }
.a .lesson li:last-child { border-bottom: 1px solid var(--l); }
.a .lesson span { color: var(--mu); } .a .lesson i { font-size: 13px; }
.a footer { display: flex; justify-content: space-between; align-items: baseline; padding: 28px 56px; border-top: 1px solid var(--l); font-size: 13px; color: var(--mu); }
.a footer .logo { font-size: 18px; color: var(--i); margin: 0; }

.a.m .nav { height: 60px; padding: 0 20px; } .a.m .logo { font-size: 20px; } .a.m .cart { display: none; }
.a.m .hero { display: flex; flex-direction: column-reverse; gap: 0; padding: 0; align-items: stretch; }
.a.m .hero .t { padding: 28px 20px 48px; } .a.m .hero h3 { font-size: 28px; }
.a.m .hero .img { height: 400px; }
.a.m .new { padding: 56px 20px 0; } .a.m .hd h4 { font-size: 22px; }
.a.m .grid { grid-template-columns: 1fr 1fr; gap: 28px 12px; align-items: start; }
.a.m .p1 { grid-column: 1 / -1; } .a.m .p1 .im { height: 400px; }
.a.m .p2 { grid-column: 1 / -1; } .a.m .p2 .im { height: 260px; }
.a.m .p3, .a.m .p4 { grid-column: auto; } .a.m .p3 .im, .a.m .p4 .im { height: 220px; }
.a.m .story { display: flex; flex-direction: column; gap: 28px; padding: 64px 20px 0; align-items: stretch; }
.a.m .story .img { height: 320px; } .a.m .story h4 { font-size: 24px; }
.a.m .lesson { display: block; padding: 64px 20px 64px; } .a.m .lesson h4 { font-size: 22px; margin-bottom: 20px; }
.a.m .lesson li { grid-template-columns: 1fr auto; gap: 4px 12px; } .a.m .lesson li span { grid-column: 1 / -1; grid-row: 2; }
.a.m footer { flex-direction: column; gap: 4px; padding: 24px 20px; }

/* =============== B. 해무 스테이 · 바닷가 숙소 =============== */
.b { --b: #11171d; --i: #e8e4dc; --mu: #98a1a6; --l: #2b343b; font-family: 'Pretendard Variable', Pretendard, sans-serif; font-weight: 300; }
.b b { font-weight: 500; }
.b .hero { position: relative; height: 760px; overflow: hidden; }
.b .hero .bg { position: absolute; inset: 0; } .b .hero .bg svg { width: 100%; height: 100%; }
.b .nav { position: relative; display: flex; align-items: center; height: 76px; padding: 0 56px; gap: 44px; color: #f1ede5; font-size: 14px; }
.b .logo { margin-right: auto; font-size: 20px; letter-spacing: .2em; }
.b .nav nav { display: flex; gap: 36px; } .b .rsv { border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.b .cap { position: absolute; left: 56px; bottom: 150px; color: #f4f0e8; }
.b .cap h3 { font-size: 44px; font-weight: 300; line-height: 1.4; letter-spacing: -.01em; margin-bottom: 12px; }
.b .cap p { font-size: 15px; opacity: .85; }
.b .book { position: absolute; left: 56px; right: 56px; bottom: 44px; display: grid; grid-template-columns: 1fr 1fr 1fr auto; align-items: center; border-top: 1px solid rgba(255,255,255,.35); color: #f4f0e8; font-size: 15px; }
.b .book span { display: grid; gap: 2px; padding: 16px 0; } .b .book i { font-size: 12px; opacity: .7; }
.b .book b { padding: 12px 24px; background: #f1ede5; color: #11171d; font-size: 14px; }
.b .intro { padding: 120px 56px 0; display: grid; grid-template-columns: 5fr 7fr; }
.b .intro p { grid-column: 2; font-size: 26px; line-height: 1.7; font-weight: 300; max-width: 720px; }
.b .rooms { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; padding: 120px 56px 0; align-items: start; }
.b figure .im { overflow: hidden; } .b figure svg { width: 100%; height: 100%; }
.b figcaption { display: grid; gap: 2px; margin-top: 14px; font-size: 15px; } .b figcaption span { color: var(--mu); font-size: 14px; }
.b .r1 { grid-column: 1 / span 7; } .b .r1 .im { height: 460px; }
.b .r2 { grid-column: 9 / span 4; margin-top: 140px; } .b .r2 .im { height: 520px; }
.b .r3 { grid-column: 3 / span 6; margin-top: -40px; } .b .r3 .im { height: 380px; }
.b .info { display: grid; grid-template-columns: 5fr 7fr; padding: 140px 56px 120px; }
.b .info h4 { font-size: 26px; font-weight: 300; }
.b .info dl > div { display: grid; grid-template-columns: 160px 1fr; padding: 22px 0; border-top: 1px solid var(--l); font-size: 15px; }
.b .info dl > div:last-child { border-bottom: 1px solid var(--l); } .b dt { color: var(--mu); } .b dd { line-height: 1.8; max-width: 480px; }
.b footer { display: flex; justify-content: space-between; padding: 28px 56px; border-top: 1px solid var(--l); font-size: 13px; color: var(--mu); }
.b footer .logo { margin: 0; font-size: 16px; color: var(--i); }

.b.m .hero { height: 640px; } .b.m .nav { height: 60px; padding: 0 20px; } .b.m .logo { font-size: 17px; }
.b.m .cap { left: 20px; right: 20px; bottom: 150px; } .b.m .cap h3 { font-size: 30px; }
.b.m .book { left: 20px; right: 20px; bottom: 24px; grid-template-columns: 1fr 1fr; } .b.m .book b { grid-column: 1 / -1; text-align: center; margin-bottom: 4px; }
.b.m .book span:nth-child(3) { display: none; }
.b.m .intro { display: block; padding: 64px 20px 0; } .b.m .intro p { font-size: 20px; }
.b.m .rooms { display: flex; flex-direction: column; gap: 36px; padding: 64px 20px 0; }
.b.m .r1 .im { height: 260px; } .b.m .r2 { margin: 0; width: 78%; align-self: flex-end; } .b.m .r2 .im { height: 360px; } .b.m .r3 { margin: 0; } .b.m .r3 .im { height: 240px; }
.b.m .info { display: block; padding: 72px 20px 64px; } .b.m .info h4 { margin-bottom: 20px; font-size: 22px; }
.b.m .info dl > div { grid-template-columns: 1fr; gap: 4px; }
.b.m footer { flex-direction: column; gap: 4px; padding: 24px 20px; }

/* =============== C. 마루 · 매출 정산 서비스 =============== */
.c { --b: #f4f5f7; --i: #12151a; --mu: #5b6470; --l: #dfe2e7; --g: #0c7a5a; font-family: 'Pretendard Variable', Pretendard, sans-serif; }
.c .nav { display: flex; align-items: center; height: 72px; padding: 0 56px; gap: 40px; font-size: 14px; }
.c .logo { font-size: 22px; font-weight: 700; margin-right: auto; letter-spacing: -.02em; }
.c .nav nav { display: flex; gap: 32px; color: var(--mu); } .c .login { font-weight: 500; }
.c .btn { display: inline-block; padding: 14px 24px; background: var(--i); color: #fff; font-size: 14px; font-weight: 500; }
.c .lnk { font-size: 14px; font-weight: 500; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.c .hero { display: grid; grid-template-columns: 430px 1fr; gap: 64px; padding: 56px 56px 0; align-items: start; }
.c .hero h3 { font-size: 40px; line-height: 1.4; font-weight: 500; letter-spacing: -.02em; margin-bottom: 20px; }
.c .hero p { font-size: 16px; line-height: 1.8; color: var(--mu); margin-bottom: 32px; max-width: 380px; }
.c .row { display: flex; align-items: center; gap: 28px; }
.c .ui { background: #fff; border: 1px solid var(--l); padding: 28px 32px 8px; }
.c .top { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: var(--mu); padding-bottom: 20px; }
.c .top b { color: var(--i); font-size: 16px; }
.c .sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 20px 0; border-top: 1px solid var(--l); }
.c .sum small { display: block; font-size: 13px; color: var(--mu); } .c .sum strong { font-size: 24px; font-weight: 500; font-variant-numeric: tabular-nums; }
.c .sum .w { color: #b45309; }
.c .chart { width: 100%; height: 104px; margin: 8px 0 20px; }
.c table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.c th { text-align: left; font-weight: 400; color: var(--mu); font-size: 13px; padding: 10px 0; border-top: 1px solid var(--l); }
.c td { padding: 14px 0; border-top: 1px solid var(--l); } .c .n { text-align: right; padding-right: 32px; }
.c td.ok { color: var(--g); } .c td.warn { color: #b45309; font-weight: 500; }
.c .feat { display: grid; padding: 140px 56px 0; gap: 96px; align-items: center; }
.c .f1 { grid-template-columns: 430px 1fr; } .c .f2 { grid-template-columns: 1fr 430px; padding-top: 120px; }
.c .feat h4 { font-size: 28px; font-weight: 500; line-height: 1.45; letter-spacing: -.02em; margin-bottom: 14px; }
.c .feat p { font-size: 15px; line-height: 1.85; color: var(--mu); max-width: 380px; }
.c .list li { display: flex; justify-content: space-between; padding: 18px 0; border-top: 1px solid var(--l); font-size: 15px; }
.c .list li:last-child { border-bottom: 1px solid var(--l); } .c .list span { color: var(--g); font-size: 14px; } .c .list li:last-child span { color: var(--mu); }
.c .diff { display: grid; grid-template-columns: repeat(3, 1fr); background: #fff; border: 1px solid var(--l); }
.c .diff > div { padding: 28px 28px 32px; } .c .diff > div + div { border-left: 1px solid var(--l); }
.c .diff small { display: block; color: var(--mu); font-size: 13px; margin-bottom: 6px; } .c .diff b { font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; }
.c .d3 b { color: #b45309; }
.c .cta { display: flex; justify-content: space-between; align-items: center; margin: 160px 56px 0; padding: 48px 0; border-top: 1px solid var(--i); }
.c .cta h4 { font-size: 26px; font-weight: 500; letter-spacing: -.02em; }
.c footer { display: flex; justify-content: space-between; padding: 28px 56px 32px; font-size: 13px; color: var(--mu); } .c footer .logo { font-size: 16px; color: var(--i); margin: 0; }

.c.m .nav { height: 60px; padding: 0 20px; } .c.m .login { display: none; }
.c.m .hero { display: block; padding: 32px 20px 0; } .c.m .hero h3 { font-size: 28px; } .c.m .hero p { font-size: 15px; margin-bottom: 24px; } .c.m .hero .t { margin-bottom: 40px; }
.c.m .ui { padding: 18px 16px 4px; } .c.m .sum { gap: 8px; } .c.m .sum strong { font-size: 15px; } .c.m .sum small { font-size: 11px; } .c.m .n { padding-right: 8px; }
.c.m .feat { display: block; padding: 72px 20px 0; } .c.m .feat .t { margin-bottom: 28px; } .c.m .f2 { display: flex; flex-direction: column-reverse; padding-top: 72px; } .c.m .f2 .t { margin: 0 0 28px; }
.c.m .feat h4 { font-size: 22px; } .c.m .diff > div { padding: 16px 12px 20px; } .c.m .diff b { font-size: 15px; }
.c.m .cta { display: block; margin: 80px 20px 0; padding: 32px 0; } .c.m .cta h4 { font-size: 20px; margin-bottom: 20px; }
.c.m footer { flex-direction: column; gap: 4px; padding: 20px; }