/* 10-31 7안(가로 스크롤) 모양 — site.css 위에 덮음. 디자인7\make_designs.py THEMES n=7 · INTRO_CSS[7] 값 그대로 */
:root{--topbg:rgba(17,19,21,.92);--onacc:#111;--bg:#111315;--paper:#16191c;--ink:#f3f2ee;--ink2:#9b9fa5;--line:#2c3034;--acc:#7ee2b8;--acc2:#1b2a24}
body.t7{background:var(--bg);color:var(--ink)}
.t7 .top{background:var(--topbg);border-bottom:0;padding:18px 32px}.t7 .logo b{font-size:20px}
.t7 .menu{gap:22px}.t7 .menu a{padding:6px 0;border-radius:0;background:none;color:var(--ink2)}.t7 .menu a:hover,.t7 .menu a[aria-current]{background:none;color:var(--acc)}
.t7 .menu a.cta{background:none;color:var(--acc)}
.hero7{padding:72px 0 30px;overflow:hidden}.hero7 h1{font-size:clamp(46px,8.6vw,110px);line-height:1;letter-spacing:-.06em;margin:0 32px 16px;max-width:none}.hero7 h1 em{font-style:normal;color:var(--acc)}
.hero7 p{margin:0 32px 30px;color:var(--ink2);font-size:19px;max-width:52ch}
.rbw{overflow:hidden}.rb{display:flex;gap:14px;width:max-content;animation:mv7 50s linear infinite}.rb img{width:360px;height:240px;object-fit:cover;border-radius:10px}@keyframes mv7{to{transform:translateX(-50%)}}
.mwords{display:flex;flex-direction:column;padding:30px 32px 10px;max-width:1240px;margin:0 auto}
.mwords a{display:flex;align-items:baseline;gap:10px;font-size:clamp(34px,5.4vw,64px);font-weight:900;letter-spacing:-.04em;line-height:1.08;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--line);padding:6px 0}
.mwords a:hover{color:var(--acc)}.mwords sup{font-size:16px;color:var(--acc);font-weight:400}.mwords small{margin-left:auto;font-size:14px;font-weight:400;letter-spacing:0;color:var(--ink2)}
.rows7{padding:30px 0 10px}.row7{margin:0 0 28px}.row7 h2{margin:0 32px 10px;font-size:22px}.row7 h2 a{text-decoration:none}.row7 h2 a:hover{color:var(--acc)}.row7 h2 small{color:var(--ink2);font-weight:400;font-size:14px}
.strip,.t7 .grid{display:flex;gap:12px;overflow-x:auto;columns:auto;padding:0 32px 8px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.t7 main .wrap .grid{padding:0 0 8px}
.strip .tile,.t7 .grid .tile{flex:none;width:420px;aspect-ratio:4/3;margin:0;border-radius:10px;scroll-snap-align:start;background:#222}
.strip .tile img,.t7 .grid .tile img{width:100%;height:100%;object-fit:cover}
.t7 .grid .tile.hide{display:none}
.t7 .head h1{font-size:clamp(38px,6.6vw,84px);line-height:1.04;letter-spacing:-.05em;margin:.3em 0 .25em}
.t7 .chip{background:transparent;border-color:var(--line);color:var(--ink2)}.t7 .chip.on{background:var(--acc);border-color:var(--acc);color:var(--onacc)}
.t7 .fac{background:transparent}.t7 .ctab,.t7 .foot{background:var(--paper)}.t7 .btn{background:var(--acc);color:var(--onacc)}
.t7 .intro{color:var(--ink2)}.t7 .prose h2,.t7 .prose h3{color:var(--ink)}
@media (max-width:820px){.t7 .top{padding:14px 16px}.t7 .menu{background:var(--paper)}}
@media (max-width:640px){.hero7{padding:40px 0 20px}.hero7 h1{font-size:44px;margin:0 16px 12px}.hero7 p{margin:0 16px 20px;font-size:16px}.rb img{width:220px;height:150px}
 .mwords{padding:18px 16px 6px}.mwords a{font-size:34px}.mwords small{display:none}.row7 h2{margin:0 16px 10px}.strip{padding:0 16px 8px}
 .strip .tile,.t7 .grid .tile{width:78vw;max-width:330px}.t7 .head h1{font-size:38px}}
/* 10-31 사용자 "맨 위 큰 글씨 살짝 작게, 메뉴 글자는 그 아래 작게, 흘러가는 사진 그대로, 아래 분야별 줄 좋음" */
html{overflow-x:hidden}
.hero7{padding:56px 0 30px}.hero7 h1{font-size:clamp(24px,3.4vw,46px);line-height:1.12;letter-spacing:-.04em;margin:0 32px 12px}
.hero7 p{margin:0 32px 22px;font-size:17px}
.hero7 .mwords{flex-direction:row;flex-wrap:wrap;gap:6px 28px;padding:0 32px 34px;max-width:none;margin:0}
.hero7 .mwords a{font-size:clamp(20px,2.1vw,28px);font-weight:800;letter-spacing:-.03em;border:0;padding:0;gap:4px}
.hero7 .mwords sup{font-size:12px}.hero7 .mwords small{display:none}
@media (max-width:640px){.hero7{padding:34px 0 20px}.hero7 h1{font-size:22px;margin:0 16px 8px}.hero7 p{margin:0 16px 16px;font-size:15px}
 .hero7 .mwords{padding:0 16px 22px;gap:4px 16px}.hero7 .mwords a{font-size:19px}}

/* 10-31 사용자 "색감을 좀 더 고급스럽게 몇 가지 시안" — body.p-<id> 로 색만 바꿈 (모양·글·주소는 같음) */
body.t7.p-gold{--bg:#0e0d0b;--paper:#17150f;--ink:#f2ede3;--ink2:#a59d8d;--line:#2b2720;--acc:#c9a96e;--acc2:#2a2418;--topbg:rgba(14,13,11,.92);--onacc:#141109}
body.t7.p-navy{--bg:#0b1220;--paper:#111a2c;--ink:#eef1f6;--ink2:#8e9ab0;--line:#1f2a3f;--acc:#b89b5e;--acc2:#1c2436;--topbg:rgba(11,18,32,.92);--onacc:#0b1220}
body.t7.p-char{--bg:#191917;--paper:#21211e;--ink:#efe9dc;--ink2:#a39e92;--line:#33322d;--acc:#d8cdb5;--acc2:#2b2a25;--topbg:rgba(25,25,23,.92);--onacc:#191917}
.p-char .hero7 h1,.p-char .t7 .head h1,body.p-char .head h1,.p-char .mwords a,.p-char .row7 h2,.p-char .logo b{font-family:"Noto Sans KR","Malgun Gothic",sans-serif;font-weight:700;letter-spacing:-.03em}
body.t7.p-ivory{--bg:#f4f0e8;--paper:#fbf8f2;--ink:#1e1b16;--ink2:#6f675b;--line:#ded6c7;--acc:#8c6a3f;--acc2:#ece4d6;--topbg:rgba(244,240,232,.94);--onacc:#fff}
.p-ivory .hero7 h1,.p-ivory .t7 .head h1,body.p-ivory .head h1,.p-ivory .mwords a,.p-ivory .row7 h2,.p-ivory .logo b{font-family:"Noto Sans KR","Malgun Gothic",sans-serif;font-weight:700;letter-spacing:-.03em}
body.t7.p-forest{--bg:#0f1a16;--paper:#15231d;--ink:#ece8dc;--ink2:#94a196;--line:#22332b;--acc:#c8a25a;--acc2:#1d2c25;--topbg:rgba(15,26,22,.92);--onacc:#0f1a16}
body.t7.p-wine{--bg:#170f11;--paper:#211619;--ink:#f1e8e4;--ink2:#a8948f;--line:#352428;--acc:#d4a59a;--acc2:#2c1d21;--topbg:rgba(23,15,17,.92);--onacc:#170f11}
.p-wine .hero7 h1,.p-wine .t7 .head h1,body.p-wine .head h1,.p-wine .mwords a,.p-wine .row7 h2,.p-wine .logo b{font-family:"Noto Sans KR","Malgun Gothic",sans-serif;font-weight:700;letter-spacing:-.03em}
.t7 .hero7 h1 em{font-weight:inherit}.palbar{position:fixed;left:12px;bottom:12px;z-index:60;display:flex;flex-wrap:wrap;gap:6px;max-width:calc(100vw - 24px);padding:8px;border-radius:14px;background:rgba(0,0,0,.72);backdrop-filter:blur(8px);font:12.5px/1.2 "Noto Sans KR",sans-serif}.palbar b{color:#ccc;align-self:center;margin:0 4px}.palbar button{border:1px solid #555;background:transparent;color:#eee;border-radius:999px;padding:6px 10px;cursor:pointer;display:flex;align-items:center;gap:6px}.palbar button i{width:12px;height:12px;border-radius:50%;display:inline-block}.palbar button.on{border-color:#fff;background:#fff;color:#111}.palbar .x{border:0;color:#999}.palbar.min button:not(.x){display:none}
/* 10-31 사용자 "흘러가는 사진 살짝 더 키워라" 360x240 → 460x306, 모바일 220x150 → 270x180 */
.rb img{width:460px;height:306px}.rb{gap:16px}
@media (max-width:640px){.rb img{width:270px;height:180px}.rb{gap:10px}}
/* 10-31 사용자 "살짝 서서히" — 50초 → 80초 (사진을 키워 빨라졌던 것보다 느리게) */
.rb{animation-duration:80s}
/* 10-31 사용자 "아래 분야별 줄 10% 줄이고, 위 흘러가는 건 살짝 더 키움" — 줄 사진 420→378(모바일 330→297), 제목 22→20px · 띠 460x306→520x346(모바일 270x180→300x200), 속도는 같게 80→90초 */
.strip .tile{width:378px}.row7 h2{font-size:20px}.row7{margin-bottom:24px}
.rb img{width:520px;height:346px}.rb{animation-duration:90s}
@media (max-width:640px){.strip .tile{width:70vw;max-width:297px}.rb img{width:300px;height:200px}}
/* 10-31 사용자 "세부 쪽 제목 너무 큼, 홈으로 가는 버튼 크게" — 제목 84→46px, ← 홈으로 버튼 */
.t7 .head h1{font-size:clamp(28px,3.6vw,46px);line-height:1.2;letter-spacing:-.03em}
.home7{display:inline-flex;align-items:center;gap:6px;margin:18px 0 0 max(16px,calc((100vw - 1240px)/2 + 16px));padding:11px 22px;border-radius:999px;border:1px solid var(--acc);color:var(--acc);text-decoration:none;font-weight:700;font-size:16px}.home7:hover{background:var(--acc);color:var(--onacc)}
.t7 .crumbs{margin-top:10px}
.strip,.t7 .grid{scrollbar-color:var(--line) transparent}
@media (max-width:640px){.t7 .head h1{font-size:26px}.home7{font-size:15px;padding:10px 18px}}
/* 10-31 썸네일 아래 [내용 읽기] — 글은 HTML 안 <details>, 화면에선 접힘 */
.tw{margin:0;display:flex;flex-direction:column;gap:8px}.strip .tw,.t7 .grid .tw{flex:none;width:378px;scroll-snap-align:start}.t7 .grid .tw{width:420px}
.strip .tw .tile,.t7 .grid .tw .tile{width:100%}
.tw:has(.tile.hide){display:none}
.rd summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:var(--ink2);padding:6px 14px;border:1px solid var(--line);border-radius:999px}
.rd summary::-webkit-details-marker{display:none}.rd summary::after{content:"＋";font-weight:400}.rd[open] summary::after{content:"－"}.rd summary:hover{color:var(--acc);border-color:var(--acc)}
.rd>div{margin-top:8px;padding:14px 16px;background:var(--paper);border:1px solid var(--line);border-radius:10px;font-size:14px;line-height:1.7;color:var(--ink2);white-space:normal}
.rd>div b{display:block;color:var(--ink);font-size:15px;margin-bottom:6px}.rd>div p{margin:0 0 .6em}.rd>div a{color:var(--acc);font-weight:700;text-decoration:none;font-size:13.5px}
@media (max-width:640px){.strip .tw,.t7 .grid .tw{width:70vw;max-width:297px}}
/* 10-31 [내용 읽기] 접기 없앰 — 짧은 글은 바로 보임 */
.rd>div{margin-top:0}
/* 10-31 [자세히 보기] = 그 자리에서 아래로 펼침 */
.rd details summary{list-style:none;cursor:pointer;color:var(--acc);font-weight:700;font-size:13.5px;display:inline-flex;gap:6px}.rd details summary::-webkit-details-marker{display:none}.rd details summary::after{content:"▾"}.rd details[open] summary::after{content:"▴"}.rd details[open] summary{margin-bottom:8px}.rd details a{display:inline-block;margin-top:4px}

/* 10-31 사용자 "이 스타일로 시안 10가지 더" — 같은 7안 구조, body.p-<id> 로 색·글꼴·모서리·메뉴·띠 효과 */
body.t7.p-mono{--bg:#000;--paper:#0c0c0c;--ink:#fafafa;--ink2:#9a9a9a;--line:#262626;--acc:#ffffff;--acc2:#161616;--topbg:rgba(0,0,0,.9);--onacc:#000}
.p-mono .rb img{filter:grayscale(1);transition:filter .5s}.p-mono .rb img:hover{filter:none}.p-mono .tile,.p-mono .rb img,.p-mono .rd>div{border-radius:0}.p-mono .hero7 h1{font-weight:300;letter-spacing:-.04em}.p-mono .hero7 h1 em{font-weight:700}
body.t7.p-stone{--bg:#e9e4da;--paper:#f3efe7;--ink:#22201c;--ink2:#6c665b;--line:#d3ccbe;--acc:#5b4a36;--acc2:#ddd5c6;--topbg:rgba(233,228,218,.94);--onacc:#fff}
.p-stone .hero7 h1,.p-stone .head h1,.p-stone .row7 h2,.p-stone .logo b{font-family:"Noto Sans KR","Malgun Gothic",sans-serif;font-weight:700}.p-stone .rb img{filter:sepia(.18)}.p-stone .tile,.p-stone .rb img{border-radius:2px}
body.t7.p-midnight{--bg:#0a0f1a;--paper:#101727;--ink:#e8ecf2;--ink2:#8d97a8;--line:#1d2638;--acc:#c0c7d2;--acc2:#18213a;--topbg:rgba(10,15,26,.92);--onacc:#0a0f1a}
.p-midnight .hero7 .mwords a{border-bottom:1px solid var(--line);padding-bottom:4px}.p-midnight .tile,.p-midnight .rb img{border:1px solid #2a3550}.p-midnight .hero7 h1 em{background:linear-gradient(90deg,#fff,#9aa6b8);-webkit-background-clip:text;background-clip:text;color:transparent}
body.t7.p-terra{--bg:#f6efe6;--paper:#fffaf3;--ink:#2a1d16;--ink2:#7a6556;--line:#e6d8c8;--acc:#b5532f;--acc2:#f1e2d4;--topbg:rgba(246,239,230,.94);--onacc:#fff}
.p-terra .tile,.p-terra .rb img,.p-terra .rd>div{border-radius:18px}.p-terra .rd>div{box-shadow:0 6px 18px rgba(80,40,20,.08);border:0}.p-terra .hero7 .mwords a{background:var(--paper);padding:6px 14px;border-radius:999px}
body.t7.p-emerald{--bg:#07110d;--paper:#0d1b15;--ink:#eaf3ee;--ink2:#8fa69a;--line:#183027;--acc:#3fbf8f;--acc2:#123326;--topbg:rgba(7,17,13,.9);--onacc:#07110d}
.p-emerald .rd>div{background:rgba(255,255,255,.04);backdrop-filter:blur(6px)}.p-emerald .tile{box-shadow:0 10px 30px rgba(0,0,0,.45)}.p-emerald .hero7 h1{font-weight:700}
body.t7.p-graphite{--bg:#1c1d1f;--paper:#232427;--ink:#f1f1ef;--ink2:#9c9da1;--line:#323338;--acc:#ff7a1a;--acc2:#2d2620;--topbg:rgba(28,29,31,.92);--onacc:#1c1d1f}
.p-graphite .tile,.p-graphite .rb img,.p-graphite .rd>div{border-radius:0}.p-graphite .strip,.p-graphite .t7 .grid,.p-graphite .rb{gap:4px}.p-graphite .hero7 h1{text-transform:uppercase;letter-spacing:-.03em}.p-graphite .row7 h2{border-left:4px solid var(--acc);padding-left:10px}
body.t7.p-pearl{--bg:#ffffff;--paper:#f6f6f4;--ink:#111111;--ink2:#6b6b6b;--line:#e7e7e3;--acc:#111111;--acc2:#f0f0ec;--topbg:rgba(255,255,255,.94);--onacc:#fff}
.p-pearl .hero7 h1,.p-pearl .head h1,.p-pearl .logo b{font-family:"Noto Sans KR","Malgun Gothic",sans-serif;font-weight:400;letter-spacing:-.03em}.p-pearl .hero7 h1 em{font-weight:700}.p-pearl .tile,.p-pearl .rb img{border-radius:4px}.p-pearl .rd>div{background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;padding:12px 0}
body.t7.p-cocoa{--bg:#1b1411;--paper:#241b17;--ink:#f2e9df;--ink2:#ad9d8e;--line:#3a2d26;--acc:#e8d3b0;--acc2:#2e231d;--topbg:rgba(27,20,17,.92);--onacc:#1b1411}
.p-cocoa .hero7 h1,.p-cocoa .head h1,.p-cocoa .mwords a,.p-cocoa .row7 h2,.p-cocoa .rd b,.p-cocoa .logo b{font-family:"Noto Sans KR","Malgun Gothic",sans-serif;font-weight:700}.p-cocoa .tile,.p-cocoa .rb img{border-radius:6px}
body.t7.p-arctic{--bg:#eef2f5;--paper:#ffffff;--ink:#0f1b26;--ink2:#5d6b78;--line:#d6dee5;--acc:#2b6cb0;--acc2:#e1ebf5;--topbg:rgba(238,242,245,.94);--onacc:#fff}
.p-arctic .tile,.p-arctic .rb img{border-radius:12px}.p-arctic .rd>div{border:0;box-shadow:0 4px 16px rgba(15,27,38,.08)}.p-arctic .tile{box-shadow:0 6px 20px rgba(15,27,38,.12)}
body.t7.p-noir{--bg:#0b0b0b;--paper:#141414;--ink:#f4f1ee;--ink2:#9b9591;--line:#262323;--acc:#c8102e;--acc2:#2a1215;--topbg:rgba(11,11,11,.92);--onacc:#fff}
.p-noir .hero7 h1,.p-noir .head h1,.p-noir .row7 h2,.p-noir .logo b{font-family:"Noto Sans KR","Malgun Gothic",sans-serif;font-weight:900}.p-noir .rb img{filter:contrast(1.08) saturate(.85)}.p-noir .tile,.p-noir .rb img{border-radius:0}.p-noir .hero7 .mwords a:hover{color:var(--acc)}
.palbar b{width:100%}.palbar{max-height:46vh;overflow:auto}

/* 11-02 사용자: "조감도 33 옆에 [더보기] 파란 버튼 + 화살표" / "카드 줄 간격 맞추기" / "더보기 = 조감도 섬네일 싹" */
.rh7{display:flex;align-items:center;gap:12px;margin:0 32px 10px}.rh7 h2{margin:0}
.rh7 .more7{display:inline-flex;align-items:center;padding:5px 15px;border-radius:999px;background:#2f7df6;color:#fff;font-size:13.5px;font-weight:700;line-height:1.4;text-decoration:none;white-space:nowrap}
.rh7 .more7:hover,.rh7 .more7:focus-visible{background:#1f63d0;color:#fff}
.p-graphite .rh7 .more7{border-radius:0}
.arr7{margin-left:auto;display:flex;gap:6px}
.arr7 button{width:34px;height:34px;padding:0;border:1px solid var(--line);background:transparent;color:var(--ink);font-size:22px;line-height:1;cursor:pointer;border-radius:50%}
.arr7 button:hover,.arr7 button:focus-visible{border-color:#2f7df6;color:#2f7df6}
.p-graphite .arr7 button{border-radius:0}
@media (max-width:640px){.rh7{margin:0 16px 10px}.arr7{display:none}}
/* 카드 줄 맞춤: 한 줄의 카드는 높이가 같고, 본문 글 영역이 늘어나 [자세히 보기] 가 같은 높이에 놓임. 줄 간격은 모든 카드 1.7 */
.strip,.t7 .grid{align-items:stretch}
.tw>.rd{flex:1;display:flex}
.tw>.rd>div{flex:1;width:100%;display:flex;flex-direction:column;line-height:1.7}
.tw>.rd>div>b{line-height:1.5}
.tw>.rd>div>p{flex:1;margin:0 0 .6em}
.tw>.rd>div>details{margin-top:auto}
/* 분야 쪽 [더보기] 로 열린 곳: 한 줄 옆으로 넘기기가 아니라 사진 전부가 격자로 펼쳐짐 */
.t7 .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));overflow:visible;scroll-snap-type:none;padding:0 0 8px}
.t7 .grid .tw{width:auto;min-width:0}
/* JS 가 높이를 맞춘 뒤(fit7)에는 늘이지 않음 → 펼친 카드만 커짐 */
.strip.fit7,.t7 .grid.fit7{align-items:start}
.fit7 .tw>.rd>div>p{flex:none}
.fit7 .tw>.rd,.fit7 .tw>.rd>div{flex:none}

/* 11-02 사용자: "제작문의는 파란색" — 위 메뉴의 [제작 문의] 와 글 아래 문의 버튼 */
.menu a.cta,.t7 .menu a.cta,.t8 .menu a.cta{background:#2f7df6!important;color:#fff!important;font-weight:700;box-shadow:none}
.menu a.cta:hover,.t7 .menu a.cta:hover,.t8 .menu a.cta:hover{background:#1f63d0!important;color:#fff!important}
.ctab .btn,.t7 .ctab .btn{background:#2f7df6;color:#fff}.ctab .btn:hover{background:#1f63d0}

/* 11-02 사용자 "핸드폰에는 조감도 이미지 딱 하나만 보이게 · 위(흘러가는 띠)는 지금처럼 · 더보기": 휴대폰은 분야마다 사진 1장만, 나머지는 [더보기] 로 그 분야 쪽에서 */
@media (max-width:640px){
  .strip{display:block;overflow:visible;padding:0 0 8px}
  .strip .tw{width:100%;max-width:none}
  .strip .tw:nth-child(n+2){display:none}
  /* 11-02 "핸드폰 사이즈에 관계없이 풀로 꽉 차 보여야 해": 사진·글 상자가 화면 가로 끝까지 (폭은 % 라 어떤 폰이든) */
  .strip .tw .tile{width:100%;max-width:none;border-radius:0}
  .strip .tw .tile img{width:100%;height:100%;object-fit:cover}
  .strip .tw .rd>div{border-left:0;border-right:0;border-radius:0}
}

/* 11-02 사용자 "흘러가는 사진 띠 좀 더 크게" / "상호는 '조감도 투시도 …' 제목보다 더 크게" */
.t7 .logo b{font-size:34px;letter-spacing:-.04em}
.t7 .top{padding-top:14px;padding-bottom:14px}
.rb img{width:720px;height:480px}
@media (max-width:640px){
  .t7 .logo b{font-size:30px}
  .rb img{width:94vw;height:70vw}   /* 11-02 사용자 "흘러가는 것만 사이즈 좀 더 크게" */
}

/* 11-02 사용자 "핸드폰은 글 몇 줄만 보이게": 휴대폰 카드 소개 글은 2줄까지(…), [자세히 보기] 를 열면 전체 */
@media (max-width:640px){
  .strip .tw .rd>div>p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;flex:none}
  .strip .tw .rd>div:has(details[open])>p{display:block;-webkit-line-clamp:unset;line-clamp:unset;overflow:visible}
}

/* 넓은 화면도 상호(40px)가 첫 화면 제목(36px)보다 크게 */
@media (min-width:641px){.t7 .logo b{font-size:40px}.hero7 h1{font-size:clamp(28px,3.2vw,36px)}}

/* 11-04 실서비스 문의 쪽: 폼 대신 전화 버튼 */
.callbox{padding:28px 0}.callbox p{margin:0 0 16px;max-width:42em;line-height:1.7}.callbtn{display:inline-block;font-size:20px;padding:14px 26px}