/* 설계 작품 갤러리(works.jmold.com) 스타일 — make_works_site.py 가 그대로 복사한다(직접 고치려면 이 템플릿을 고칠 것).
   인라인 style 속성은 CSP(style-src 'self')가 막으므로 쓰지 않는다. 색은 플라스틱 가이드 사이트와 같은 계열. */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif; background: #f0f4f8; color: #333; line-height: 1.55; font-size: 15px; }
a { color: #2c5f8a; }
img { max-width: 100%; height: auto; display: block; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.sample-banner { background: #b3261e; color: #fff; text-align: center; font-weight: 700; font-size: 13px; padding: 6px 12px; }
.head { background: #2c5f8a; color: #fff; padding: 22px 0 20px; }
.head h1 { font-size: 22px; line-height: 1.3; overflow-wrap: anywhere; }
.head p { font-size: 13.5px; opacity: .92; margin-top: 4px; }
.cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.b { display: inline-block; border: 1.5px solid #2c5f8a; background: #fff; color: #2c5f8a; padding: 8px 14px; border-radius: 8px; font-size: 13.5px; font-weight: 700; text-decoration: none; min-height: 40px; line-height: 22px; }
.b:hover, .b:focus-visible { background: #eef3f9; }
.head .b { border-color: #fff; }

main.wrap { padding-top: 18px; padding-bottom: 28px; }
#tools { background: #fff; border-radius: 12px; box-shadow: 0 2px 14px rgba(0, 0, 0, .08); padding: 14px 14px 10px; margin-bottom: 16px; }
.sbox { display: flex; gap: 8px; }
#q { flex: 1 1 auto; min-width: 0; padding: 10px 12px; border: 2px solid #ffd700; border-radius: 8px; background: #fffde7; font-size: 16px; font-family: inherit; color: #333; outline: none; }
#q:focus { border-color: #f5a623; background: #fff8e1; }
#clear { flex: 0 0 auto; border: 1.5px solid #9aa8b8; background: #fff; color: #445; border-radius: 8px; padding: 0 12px; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.fg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.fl { font-size: 12.5px; color: #5a6b7e; font-weight: 700; min-width: 3.2em; }
.chip { border: 1.5px solid #c9d4e0; background: #f7f9fc; color: #445; padding: 5px 11px; border-radius: 999px; font-family: inherit; font-size: 13px; cursor: pointer; min-height: 32px; }
.chip:hover { background: #eef3f9; }
.chip[aria-pressed="true"] { background: #2c5f8a; border-color: #2c5f8a; color: #fff; font-weight: 700; }
#count { font-size: 13px; color: #5a6b7e; margin: 10px 2px 2px; }
#empty { background: #fff8e1; border: 1px solid #f0d38a; border-radius: 10px; padding: 14px; margin-bottom: 16px; font-size: 14px; }
#empty .cta { margin-top: 8px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.card { background: #fff; border-radius: 12px; box-shadow: 0 2px 10px rgba(0, 0, 0, .09); overflow: hidden; display: flex; flex-direction: column; }
.card .thumb { display: block; background: #e8eef4; }
.card .thumb img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; }
.card .body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; }
.card h2 { font-size: 15.5px; line-height: 1.35; overflow-wrap: anywhere; }
.card h2 a { color: #1f4666; text-decoration: none; }
.card h2 a:hover { text-decoration: underline; }
.meta { font-size: 12.5px; color: #5a6b7e; }
.card .sum { font-size: 13px; color: #445; }
.card .cta { margin-top: auto; padding-top: 6px; }
.card .b { padding: 6px 10px; font-size: 12.5px; min-height: 36px; line-height: 22px; }

.detail { background: #fff; border-radius: 12px; box-shadow: 0 2px 14px rgba(0, 0, 0, .08); padding: 18px 18px 20px; }
.detail h1 { font-size: 20px; color: #1f4666; line-height: 1.35; overflow-wrap: anywhere; }
.detail .shot { margin-top: 14px; }
.detail .shot img { border: 1px solid #e0e7ef; border-radius: 8px; background: #fff; }
.detail dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin-top: 16px; font-size: 14px; }
.detail dt { color: #5a6b7e; font-weight: 700; }
.detail dd { overflow-wrap: anywhere; }
.detail p.sum { margin-top: 14px; font-size: 14.5px; color: #334; }
.back { display: inline-block; margin-bottom: 12px; font-size: 14px; }
.notice { font-size: 12.5px; color: #6a7787; margin-top: 14px; }

.foot { background: #e8eef4; border-top: 1px solid #d5dee8; padding: 18px 0 26px; font-size: 12.5px; color: #4a5a6c; }
.foot p { margin: 3px 0; overflow-wrap: anywhere; }
.foot a { color: #2c5f8a; }
.foot .links { margin-top: 8px; }

@media (max-width: 420px) {
  .grid { grid-template-columns: 1fr; }
  .head h1 { font-size: 19px; }
  .detail { padding: 14px; }
  .detail dl { grid-template-columns: 1fr; gap: 0; }
  .detail dd { margin-bottom: 8px; }
}