/* 메인 디자인 2안 — body.d2 일 때만 적용(1안 스타일은 app.css 그대로 유지) */
body.d2 { --d2-bg: #FAF7F2; --d2-line: #ece5d8; --d2-gold: #B8955E; --hand: 'Nanum Pen Script', cursive; background: var(--d2-bg); }

/* 헤더 */
body.d2 header.top { background: rgba(250, 247, 242, .96); color: var(--text); border-bottom: 1px solid var(--d2-line); backdrop-filter: blur(8px); }
body.d2 header.top .wrap { max-width: 1440px; height: 74px; gap: 28px; }
body.d2 .logo2 { display: flex; flex-direction: column; line-height: 1; flex: none; }
body.d2 .logo2 b { font: 600 31px/1 var(--serif); letter-spacing: -.01em; color: #1f2322; }
body.d2 .logo2 small { font: 600 7.5px/1 var(--sans); letter-spacing: .32em; color: #6f6a60; margin-top: 5px; }
body.d2 nav.gnb a { color: #2b2a27; font-size: 14.5px; font-weight: 500; padding: 8px 15px; }
body.d2 nav.gnb a:hover, body.d2 nav.gnb a.on { color: var(--d2-gold); }
body.d2 .tnav { gap: 4px; }
body.d2 .tnav .ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: #2b2a27; padding: 0; position: relative; }
body.d2 .tnav .ic:hover { background: #f0ebe1; }
body.d2 .tnav .ic svg { width: 22px; height: 22px; }
body.d2 .tnav .ic i { position: absolute; top: 3px; right: 2px; background: #c4473c; color: #fff; font: 700 10px/16px var(--sans); min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px; font-style: normal; }
body.d2 .burger { display: none !important; }
body.d2 .notice { background: #1D2928; color: var(--champ); }

/* 전체 메뉴 서랍 */
.drawer { position: fixed; inset: 0; z-index: 120; background: rgba(15, 20, 20, .4); }
.drawer > div { position: absolute; top: 0; right: 0; bottom: 0; width: min(340px, 88vw); background: #FAF7F2; padding: 26px 26px 40px; overflow-y: auto; box-shadow: -10px 0 40px rgba(0, 0, 0, .15); }
.drawer h4 { font: 600 11px/1 var(--sans); letter-spacing: .25em; color: #9a917f; margin: 22px 0 8px; }
.drawer a, .drawer button.l { display: block; padding: 11px 2px; border-bottom: 1px solid #ece5d8; font-size: 15px; background: none; border-left: 0; border-right: 0; border-top: 0; width: 100%; text-align: left; cursor: pointer; }
.drawer .x { position: absolute; top: 14px; right: 16px; background: none; border: 0; font-size: 26px; cursor: pointer; color: #777; }

/* 히어로 */
.h2-hero { position: relative; min-height: 430px; background: #efe7da center top / cover no-repeat; overflow: hidden; }
.h2-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(250, 247, 242, .97) 0%, rgba(250, 247, 242, .9) 32%, rgba(250, 247, 242, .25) 58%, rgba(250, 247, 242, 0) 72%, rgba(250, 247, 242, .55) 100%); }
.h2-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(to bottom, rgba(250, 247, 242, 0), var(--d2-bg)); }
.h2-hero .in { position: relative; z-index: 1; max-width: 1440px; margin: 0 auto; padding: 40px 40px 140px 170px; display: flex; gap: 30px; }
.h2-hero .txt { flex: 1; }
.h2-hero .eb { font: 500 15px/1 var(--serif); letter-spacing: .14em; color: #3a3833; }
.h2-hero h1 { font: 500 clamp(34px, 3.6vw, 52px)/1.32 'Noto Serif KR', serif; margin: 20px 0 18px; color: #26241f; letter-spacing: -.02em; }
.h2-hero h1 em { font-style: normal; color: var(--d2-gold); }
.h2-hero .lead { font-size: 16.5px; color: #3e3d39; line-height: 1.65; margin: 0 0 26px; }
.h2-search { display: flex; gap: 6px; background: rgba(255, 255, 255, .92); padding: 7px; border-radius: 10px; box-shadow: 0 10px 30px rgba(60, 50, 30, .12); max-width: 716px; }
.h2-search label { flex: 1; display: flex; align-items: center; gap: 6px; border: 1px solid #ece5d8; border-radius: 6px; padding: 0 10px; background: #fff; min-width: 0; }
.h2-search label svg { width: 16px; height: 16px; flex: none; color: #555; }
.h2-search select, .h2-search input { border: 0; outline: none; background: transparent; width: 100%; padding: 13px 0; font-size: 13.5px; font-weight: 500; color: #2b2a27; min-width: 0; }
.h2-search button { flex: none; display: flex; align-items: center; gap: 8px; background: #1f2b2a; color: #fff; border: 0; border-radius: 6px; padding: 0 24px; font-weight: 600; font-size: 14px; cursor: pointer; }
.h2-search button:hover { background: #2c3c3a; }
.h2-search button svg { width: 18px; height: 18px; }
.h2-hero .hand { width: 250px; flex: none; align-self: center; margin-top: -10px; color: #3a3833; }
.h2-hero .hand p { font: 400 34px/1.18 var(--hand); margin: 0 0 30px; color: #2f2d29; transform: rotate(-4deg); }
.h2-hero .hand b { display: block; font: 500 17px var(--serif); letter-spacing: .1em; color: #55524b; }
.h2-hero .hand hr { border: 0; border-top: 1px solid #a8a196; width: 120px; margin: 14px 0; }
.h2-hero .hand span { font-size: 14px; color: #55524b; line-height: 1.7; }

.h2-req { display: inline-block; margin-top: 14px; font-size: 13.5px; color: #4a4843; background: rgba(255, 255, 255, .7); padding: 7px 14px; border-radius: 999px; }
.h2-req b { color: var(--d2-gold); margin-left: 6px; }
.h2-req:hover { background: #fff; }
.reqcta { display: flex; align-items: center; gap: 16px; background: #fbf6ec; border: 1px solid #ecdfc6; border-radius: 10px; padding: 14px 18px; margin-top: 18px; }
.reqcta div { flex: 1; }
.reqcta b { display: block; font-size: 14.5px; }
.reqcta span { font-size: 13px; color: #77736a; }
.prop .pav { width: 56px; height: 56px; border-radius: 50%; background: #e9dfcd center / cover; display: grid; place-items: center; color: #6f5a36; font: 600 20px var(--serif); flex: none; }
@media (max-width: 760px) { .reqcta { flex-direction: column; align-items: flex-start; } .h2-req { font-size: 12.5px; } }

/* 촬영 분류 카드(히어로에 겹침) */
.h2-cats { position: relative; z-index: 2; max-width: 1540px; margin: -118px auto 0; padding: 12px; background: rgba(255, 255, 255, .78); border-radius: 12px; backdrop-filter: blur(6px);
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; box-shadow: 0 10px 30px rgba(60, 50, 30, .06); }
.h2-cats a { background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 10px rgba(60, 50, 30, .07); transition: transform .2s; }
.h2-cats a:hover { transform: translateY(-3px); }
.h2-cats .im { aspect-ratio: 3.3 / 1; background: #ddd center / cover; }
.h2-cats .t { display: flex; align-items: center; padding: 10px 14px 12px; gap: 8px; }
.h2-cats .t div { flex: 1; min-width: 0; }
.h2-cats b { display: block; font-size: 15.5px; color: #26241f; font-weight: 600; }
.h2-cats small { display: block; font-size: 11.5px; color: #77736a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h2-cats .arr { width: 24px; height: 24px; border-radius: 50%; border: 1px solid #c9c2b5; display: grid; place-items: center; flex: none; font-size: 12px; color: #6f6a60; }

/* 공통 */
.h2-wrap { max-width: 1540px; margin: 0 auto; padding: 0 20px; }
.h2-sh { display: flex; align-items: baseline; gap: 18px; margin-bottom: 18px; }
.h2-sh h2 { font: 500 25px/1.3 'Noto Serif KR', serif; margin: 0; color: #26241f; letter-spacing: -.02em; }
.h2-sh p { margin: 0; font-size: 13.5px; color: #77736a; }
.h2-sh .more { margin-left: auto; font-size: 13px; font-weight: 600; color: #2b2a27; white-space: nowrap; }

/* 인기 작가 + 왜 SNAP & FILM */
.h2-mid { display: grid; grid-template-columns: 1.08fr 1fr; gap: 26px; padding-top: 30px; }
.h2-pop { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.h2-pc { background: #fff; border-radius: 8px; overflow: hidden; display: flex; box-shadow: 0 2px 12px rgba(60, 50, 30, .07); position: relative; min-height: 142px; }
.h2-pc .ph { width: 48%; background: #ddd center / cover; flex: none; }
.h2-pc .bd { padding: 14px 12px 12px 14px; flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.h2-pc h3 { margin: 0; font-size: 15px; font-weight: 600; color: #26241f; line-height: 1.35; padding-right: 20px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: keep-all; }
.h2-pc .tag { align-self: flex-start; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; color: #6f6a60; background: #f3efe7; border-radius: 3px; padding: 2px 8px; }
.h2-pc .loc, .h2-pc .rt { font-size: 12.5px; color: #4a4843; display: flex; align-items: center; gap: 5px; }
.h2-pc .rt b { color: #26241f; }
.h2-pc .rt span { color: #8a857b; }
.h2-pc .go { margin-top: auto; align-self: flex-start; font-size: 11.5px; border: 1px solid #d8d1c4; border-radius: 4px; padding: 5px 10px; color: #3e3d39; white-space: nowrap; }
.h2-pc .go:hover { border-color: #26241f; }
.h2-pc .hrt { position: absolute; top: 12px; right: 12px; background: none; border: 0; cursor: pointer; color: #b5ada0; font-size: 17px; padding: 0; line-height: 1; }
.h2-pc .hrt.on { color: #c4473c; }
.h2-pc .demo { position: absolute; left: 6px; top: 6px; }
.h2-why { border-left: 1px solid var(--d2-line); padding-left: 26px; }
.h2-why .grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 16px; }
.h2-why .grid div { text-align: center; padding: 6px 10px; border-right: 1px solid var(--d2-line); }
.h2-why .grid div:last-child { border-right: 0; }
.h2-why .ico { width: 64px; height: 64px; border-radius: 50%; background: #f3ede3; display: grid; place-items: center; margin: 0 auto 14px; color: var(--d2-gold); }
.h2-why .ico svg { width: 30px; height: 30px; }
.h2-why b { display: block; font-size: 15px; color: #26241f; margin-bottom: 6px; }
.h2-why span { font-size: 12px; color: #77736a; line-height: 1.6; display: block; }

/* 작품 띠 */
.h2-works { padding: 30px 0 34px; }
.h2-strip { display: flex; gap: 5px; height: 150px; }
.h2-strip a { flex: var(--f, 1) 1 0; background: #ddd center / cover; position: relative; overflow: hidden; min-width: 0; }
.h2-strip a.vid::after { content: '▶'; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 20px; background: rgba(0, 0, 0, .15); }
.h2-strip a:hover { filter: brightness(1.06); }

/* 작가 입점 띠 */
.h2-band { background: radial-gradient(900px 260px at 85% 0%, rgba(211, 192, 161, .14), transparent 70%), #1D2928; color: #f3efe6; }
.h2-band .in { max-width: 1540px; margin: 0 auto; padding: 26px 60px; display: flex; align-items: center; gap: 34px; }
.h2-band h2 { font: 500 28px 'Noto Serif KR', serif; margin: 0; white-space: nowrap; padding-right: 30px; border-right: 1px solid rgba(255, 255, 255, .25); }
.h2-band .lead { flex: none; white-space: nowrap; font-size: 13.5px; color: #cfc9bd; line-height: 1.6; margin: 0; }
.h2-band .feats { display: flex; gap: 30px; margin-left: auto; }
.h2-band .feats > div { display: flex; gap: 12px; align-items: center; }
.h2-band .feats svg { width: 34px; height: 34px; color: #cfc4ad; flex: none; }
.h2-band .feats b { display: block; font-size: 13.5px; white-space: nowrap; }
.h2-band .feats span { font-size: 12px; color: #b9b3a6; white-space: nowrap; }
.h2-band .btn-g { background: #C6A877; color: #fff; border-radius: 4px; padding: 15px 52px; font-weight: 600; font-size: 15px; white-space: nowrap; }
.h2-band .btn-g:hover { background: #b8975f; }

/* 푸터 */
body.d2 footer { background: var(--d2-bg); color: #6f6a60; border-top: 1px solid var(--d2-line); padding: 20px 0 26px; }
body.d2 footer .wrap { max-width: 1440px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 50px; }
body.d2 footer a { color: #3e3d39; }
body.d2 footer .links { margin: 0; gap: 34px; font-size: 12.5px; }
body.d2 footer .sns { display: flex; gap: 14px; margin-left: auto; align-items: center; }
body.d2 footer .sns svg { width: 18px; height: 18px; color: #3e3d39; }
body.d2 footer .copy { font-size: 11.5px; }
body.d2 footer .biz { flex-basis: 100%; width: 100%; font-size: 11.5px; color: #8a857b; line-height: 1.7; }
body.d2 footer .biz p { margin: 0; }

/* 1안·2안 비교 스위치 */
.dsw { position: fixed; left: 16px; bottom: 16px; z-index: 90; background: #1D2928; color: #fff; border-radius: 999px; padding: 4px; display: flex; gap: 2px; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); font-size: 12.5px; }
.dsw span { padding: 6px 8px 6px 12px; color: #cfc9bd; }
.dsw a { padding: 6px 13px; border-radius: 999px; color: #fff; }
.dsw a.on { background: var(--champ); color: #1D2928; font-weight: 700; }

@media (max-width: 1500px) { .h2-band .feats > div:nth-child(3) { display: none; } }
@media (max-width: 1280px) {
  .h2-hero .in { padding-left: 60px; }
  .h2-hero .hand { display: none; }
  .h2-mid { grid-template-columns: 1fr; }
  .h2-why { border-left: 0; padding-left: 0; }
  .h2-band .feats { display: none; }
  .h2-band .in { justify-content: space-between; }
}
@media (max-width: 1080px) {
  body.d2 nav.gnb { background: #FAF7F2; border-bottom: 1px solid var(--d2-line); top: 74px; }
  body.d2 nav.gnb a { border-bottom-color: #ece5d8; }
  .h2-cats { grid-template-columns: repeat(3, 1fr); margin: -100px 16px 0; }
  .h2-pop { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  body.d2 header.top .wrap { height: 62px; }
  body.d2 .logo2 b { font-size: 24px; }
  body.d2 .logo2 small { font-size: 6px; letter-spacing: .22em; }
  body.d2 .tnav .ic { width: 34px; height: 34px; }
  body.d2 .tnav .ic.hide-m { display: none; }
  .h2-hero { min-height: 0; background-position: 70% center; }
  .h2-hero::before { background: linear-gradient(180deg, rgba(250, 247, 242, .93) 0%, rgba(250, 247, 242, .82) 55%, rgba(250, 247, 242, .5) 100%); }
  .h2-hero .in { padding: 34px 16px 120px; }
  .h2-hero h1 { font-size: 31px; }
  .h2-hero .lead { font-size: 14.5px; }
  .h2-search { flex-wrap: wrap; }
  .h2-search label { flex: 1 1 45%; }
  .h2-search button { flex: 1 1 100%; justify-content: center; padding: 13px; }
  .h2-cats { grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px; }
  .h2-cats small { display: none; }
  .h2-pop { grid-template-columns: 1fr; }
  .h2-why .grid { grid-template-columns: 1fr 1fr; gap: 18px 0; }
  .h2-why .grid div:nth-child(2) { border-right: 0; }
  .h2-sh { flex-wrap: wrap; gap: 4px 12px; }
  .h2-sh p { order: 3; flex-basis: 100%; }
  .h2-strip { height: auto; display: grid; grid-template-columns: repeat(3, 1fr); }
  .h2-strip a { aspect-ratio: 1; }
  .h2-band .in { flex-direction: column; align-items: flex-start; padding: 28px 20px; gap: 14px; }
  .h2-band h2 { border: 0; padding: 0; }
  body.d2 footer .sns { margin-left: 0; }
  body.d2 footer .links { gap: 16px; }
}

/* 데스크톱: 히어로 사진을 시안 비율(인물 가운데 오른쪽)로 */
@media (min-width: 1281px) {
  .h2-hero { background-size: auto 350px; background-color: var(--d2-bg); }
  .h2-hero::after { top: 240px; height: auto; background: linear-gradient(to bottom, rgba(250, 247, 242, 0), var(--d2-bg) 110px); }
}

/* ── 하위 페이지도 2안 톤으로(밝은 아이보리 · 골드 · 얇은 명조) ── */
body.d2 { --line: #ece5d8; --sh: 0 2px 14px rgba(60, 50, 30, .07); --r: 10px; }
body.d2 .page-hd { background: linear-gradient(180deg, #f3ede3, var(--d2-bg)); color: #26241f; padding: 46px 0 30px; border-bottom: 1px solid var(--d2-line); }
body.d2 .page-hd .wrap, body.d2 .filters .wrap { max-width: 1440px; }
body.d2 .page-hd .eyebrow { color: var(--d2-gold); letter-spacing: .28em; }
body.d2 .page-hd h1 { font: 500 32px/1.3 'Noto Serif KR', serif; letter-spacing: -.02em; color: #26241f; }
body.d2 .page-hd p { color: #77736a; }
body.d2 .filters { background: rgba(250, 247, 242, .96); border-bottom: 1px solid var(--d2-line); top: 74px; }
body.d2 .filters select, body.d2 .filters input { border-color: #e3dccd; border-radius: 6px; background: #fff; }
body.d2 .wrap { max-width: 1440px; }
body.d2 .eyebrow { color: var(--d2-gold); }
body.d2 .chip { border-color: #e3dccd; border-radius: 6px; }
body.d2 .chip.on { background: #1f2b2a; border-color: #1f2b2a; }
body.d2 .btn { border-radius: 6px; background: #1f2b2a; border-color: #1f2b2a; }
body.d2 .btn:hover { background: #2c3c3a; }
body.d2 .btn.gold { background: #C6A877; border-color: #C6A877; color: #fff; }
body.d2 .btn.gold:hover { background: #b8975f; }
body.d2 .btn.line { background: #fff; color: #2b2a27; border-color: #d8d1c4; }
body.d2 .btn.line:hover { border-color: #26241f; background: #fff; }
body.d2 .btn.bad { background: var(--bad); border-color: var(--bad); }
body.d2 .badge.ad { background: #f3ead9; border-color: #e6d6b8; color: #8a6a35; }
body.d2 .badge.dark { background: #1f2b2a; border-color: #1f2b2a; }
body.d2 .box, body.d2 .kpi, body.d2 .snav, body.d2 .info-grid div, body.d2 .prose, body.d2 .tblwrap { border-radius: 10px; box-shadow: var(--sh); }
body.d2 .snav a.on, body.d2 .snav a:hover { background: #f3ede3; color: #26241f; }
body.d2 .kpi b { color: #26241f; }
body.d2 .tabs button.on { color: #26241f; border-bottom-color: var(--d2-gold); }
body.d2 .empty { border-color: #e3dccd; border-radius: 10px; }
body.d2 h2, body.d2 .box h3 { letter-spacing: -.01em; }
body.d2 input.i:focus, body.d2 select.i:focus, body.d2 textarea.i:focus { border-color: var(--d2-gold); box-shadow: 0 0 0 3px rgba(198, 168, 119, .22); }
body.d2 .modal .mbox { border-radius: 12px; }
body.d2 .modal h2 { font-weight: 500; }

/* 작가 카드(검색·찜) */
body.d2 .cards { gap: 18px; }
body.d2 .ccard { border-radius: 8px; box-shadow: 0 2px 12px rgba(60, 50, 30, .07); }
body.d2 .ccard h3 { font-weight: 600; color: #26241f; }
body.d2 .ccard .price { color: #26241f; }
body.d2 .favbtn { background: rgba(255, 255, 255, .92); color: #9a917f; font-size: 15px; }
body.d2 .favbtn.on { color: #c4473c; }
body.d2 .ccard .th { gap: 3px; }

/* 작가 상세 */
body.d2 .cr-cover { height: 380px; }
body.d2 .cr-cover::after { background: linear-gradient(to top, rgba(26, 26, 22, .62), rgba(26, 26, 22, 0) 62%); }
body.d2 .cr-head .av { border-color: var(--d2-bg); background-color: #e9dfcd; color: #6f5a36; }
body.d2 .cr-head h1 { font-weight: 500; }
body.d2 .prod { border-radius: 8px; border-color: #e6dfd2; }
body.d2 .prod:hover, body.d2 .prod.on { border-color: var(--d2-gold); background: #fffdf9; }
body.d2 .prod .t strong { color: #26241f; }
body.d2 .cal .g .d.sel { background: #1f2b2a; }
body.d2 .msg.me { background: #1f2b2a; }
body.d2 .msg.other { background: #f3ede3; }
body.d2 .flow div.done { color: #26241f; }
body.d2 .flow div.done::before, body.d2 .flow div.done::after { background: var(--d2-gold); }
body.d2 .bank { background: #fbf6ec; border-color: #d9c39c; }

/* 작가 입점 · AI 안내 띠 */
body.d2 .cta-band { border-radius: 12px; background: radial-gradient(900px 260px at 85% 0%, rgba(211, 192, 161, .14), transparent 70%), #1D2928; }
body.d2 .cta-band h2 { font-weight: 500; }

@media (max-width: 760px) {
  body.d2 .page-hd { padding: 30px 0 22px; }
  body.d2 .page-hd h1 { font-size: 25px; }
  body.d2 .filters { position: static; }
  body.d2 .cr-cover { height: 240px; }
}