@font-face{font-family:Atlas;src:url('assets/dm-sans.ttf') format('truetype');font-weight:100 1000;font-display:swap}
:root{--paper:#f9f9f7;--ink:#242928;--muted:#61695f;--line:#e4e7e3;--green:#2c5b46;--soft:#e9f0e9;--radius:14px}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Atlas,"PingFang TC","Noto Sans TC",sans-serif;-webkit-font-smoothing:antialiased}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button{color:inherit}button:disabled{opacity:.65;cursor:wait}a{color:inherit;text-underline-offset:4px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #518a6b;outline-offset:4px}::selection{background:#cfe3d4;color:#193d2b}*{scrollbar-width:thin;scrollbar-color:#b7c5b9 transparent}input,textarea{caret-color:var(--green)}[hidden]{display:none!important}.skip-link{position:fixed;top:-60px;left:20px;z-index:100;padding:12px;background:white}.skip-link:focus{top:10px}.icon{display:block;width:18px;height:18px;flex-shrink:0}main{max-width:1800px;margin:auto;padding:0 40px}.detail-target select{border:1px solid var(--line);background:white;border-radius:7px;min-height:36px;padding:0 27px 0 10px;font-size:12px;color:#3c493f;max-width:145px}.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:1px;column-gap:24px;align-items:start}.card{width:100%;margin:0;padding:0 0 30px;min-width:0}.preview-wrap{position:relative;border-radius:var(--radius);background:#e8ece6;overflow:hidden;isolation:isolate}.preview-hit{display:block;border:0;background:transparent;padding:0;width:100%;position:relative;overflow:hidden;text-align:left}.preview-hit:focus-visible{outline-offset:-4px}.preview{position:relative;overflow:hidden;pointer-events:none;width:100%;height:320px}.preview iframe{display:block;width:460px;border:0;transform-origin:top left;pointer-events:none;background:#fff}.preview-hit:after{content:"查看設計與提示詞";position:absolute;bottom:13px;left:50%;transform:translate(-50%,7px);opacity:0;background:#fff;color:#263d2d;border-radius:6px;padding:8px 12px;font-size:11px;white-space:nowrap;box-shadow:0 4px 16px #182b1822;transition:opacity .18s,transform .18s}.preview-hit:hover:after,.preview-hit:focus-visible:after{opacity:1;transform:translate(-50%,0)}.save-button{position:absolute;right:10px;top:10px;border:0;background:#ffffffed;color:#495548;border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 7px #18301612;transition:background .18s,transform .18s}.save-button:hover{transform:translateY(-2px)}.save-button[aria-pressed=true]{color:var(--green);background:#e5f0e3}.save-button[aria-pressed=true] .icon{fill:currentColor}.save-button .icon{width:16px;height:16px}.card-info{padding:13px 1px 0}.card-title-row{display:flex;gap:8px;align-items:center;justify-content:space-between}.card h2{font-size:14px;line-height:1.5;letter-spacing:.1px;margin:0;font-weight:650}.card-type{font-size:11px;white-space:nowrap;color:#626a5c}.card-bottom{display:flex;justify-content:space-between;align-items:center;gap:5px;margin-top:9px;min-height:32px}.card-tags{display:flex;gap:6px;flex-wrap:wrap}.card-tags span{font-size:11px;color:#626a5c;background:#eeefea;border-radius:4px;padding:3px 5px}.copy-button{display:flex;align-items:center;justify-content:center;gap:5px;min-width:104px;min-height:33px;background:#fff;color:#3e5342;border:1px solid #dce4d8;border-radius:7px;font-size:11px;font-weight:550;transition:background .18s,transform .15s}.copy-button:hover{background:#e7efe3}.copy-button:active{transform:scale(.97)}.copy-button .icon{width:13px;height:13px}.copy-button.copied{background:#dfeddc;color:#315b37;border-color:#dfeddc}.primary-button{background:var(--green);color:white;min-height:44px;border:0;border-radius:8px;padding:11px 20px;font-weight:550;font-size:14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:background .18s,transform .15s}.primary-button:hover{background:#204d37}.primary-button:active{transform:scale(.98)}dialog{padding:0;border:0;border-radius:16px;background:var(--paper);color:var(--ink);box-shadow:0 20px 90px #17231838}dialog::backdrop{background:#1e2c2399;backdrop-filter:blur(4px)}#detail{width:min(1120px,calc(100vw - 48px));max-width:1120px;max-height:calc(100dvh - 48px);overflow:auto}.detail-toolbar{height:57px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 20px;font-size:12px;color:var(--muted);position:sticky;top:0;background:var(--paper);z-index:3}.icon-button{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border:0;border-radius:7px;background:#eceee8}.icon-button:hover{background:#dfe5da}.detail-layout{display:grid;grid-template-columns:1.1fr 1fr;min-height:600px}.detail-art{background:#e8ece6;padding:32px;display:flex;flex-direction:column;justify-content:center;align-items:center}.detail-art #detail-preview{width:100%;max-width:500px;border-radius:12px;overflow:hidden}.detail-art>p{font-size:11px;margin:18px 0 0;color:#586650}.detail-content{padding:30px;min-width:0}.detail-label{font-size:11px;color:var(--green);margin-bottom:10px}.detail-content h2{font-size:27px;margin:0 0 8px;letter-spacing:-.5px;line-height:1.4}.detail-content>p{font-size:13px;color:var(--muted);line-height:1.8;margin:0}.detail-tags{display:flex;gap:6px;flex-wrap:wrap;margin:15px 0 28px}.detail-tags span{font-size:11px;background:#e9ede6;border-radius:4px;padding:5px 8px;color:#5e6d5b}.prompt-heading{display:flex;justify-content:space-between;gap:12px;align-items:center}.prompt-heading h3{margin:0;font-size:16px}.text-button{border:0;background:none;color:var(--green);font-size:12px;display:flex;gap:5px;align-items:center;padding:5px}.text-button .icon{width:14px;height:14px}.detail-target{display:flex;align-items:center;justify-content:space-between;margin:17px 0 10px;font-size:12px;color:var(--muted)}#prompt{width:100%;height:250px;resize:vertical;border:1px solid #dfe5da;border-radius:8px;padding:14px;background:#fff;color:#51604f;font-size:12px;line-height:1.9}.detail-content>.primary-button{width:100%;margin-top:12px}.detail-content p.prompt-hint{font-size:11px;margin-top:10px;line-height:1.7}.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,16px);background:#243f2f;color:white;padding:12px 20px;border-radius:9px;box-shadow:0 7px 22px #14261b22;font-size:13px;pointer-events:none;opacity:0;transition:opacity .2s,transform .2s;z-index:20;max-width:calc(100vw - 32px);text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}.noscript{padding:20px;text-align:center}
@media(min-width:1650px){.gallery{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:1150px){.gallery{grid-template-columns:repeat(3,minmax(0,1fr))}main{padding:0 28px}.detail-art{padding:20px}.detail-content{padding:24px}}
@media(max-width:760px){main{padding:0 20px}.gallery{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:15px}.card{padding-bottom:24px}.card h2{font-size:12px}.card-title-row{display:block}.card-type{display:none}.card-tags{display:none}.card-bottom{margin-top:7px}.copy-button{width:100%;font-size:11px}.card-info{padding:10px 1px 0}.save-button{width:29px;height:29px;right:7px;top:7px}.preview-wrap{border-radius:10px}.preview-hit:after{display:none}#detail{width:calc(100vw - 20px);max-height:calc(100dvh - 20px)}.detail-layout{grid-template-columns:1fr}.detail-art{padding:22px}.detail-art #detail-preview{max-width:360px}.detail-content{padding:24px}.detail-toolbar{height:50px}#prompt{height:230px}.detail-content h2{font-size:25px}}
@media(max-width:360px){main{padding:0 16px}.gallery{gap:0 12px}.card h2{font-size:11px}.copy-button{font-size:11px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

.detail-content p.prompt-hint,.detail-art>p{font-size:12px}.detail-content textarea{font-size:13px}.card-tags span{color:#586650}.card-bottom .copy-button{min-height:36px}
@media(max-width:760px){.card-bottom .copy-button{min-height:40px}.save-button{width:34px;height:34px}}
.detail-art,#detail-preview{min-width:0}
@media(max-width:760px){.detail-layout{grid-template-columns:minmax(0,1fr)}}.reference-preview{background:#fff}.reference-preview img{display:block;width:100%;height:auto}.reference-preview.image-unavailable:after{content:"參考圖載入失敗，請開啟來源網站。";position:absolute;inset:0;padding:40% 20px;background:#eef0eb;font-size:14px;text-align:center;color:#455344}.card-source{font-size:11px;color:#657061;display:inline-flex;align-items:center;gap:4px;min-height:28px;max-width:100%;overflow-wrap:anywhere;text-decoration:none}.card-source:hover{text-decoration:underline;color:var(--green)}.card-source svg{width:13px;height:13px;flex-shrink:0}.concept-label{display:block;font-size:10px;color:#657061;margin-top:5px}.card-bottom{margin-top:3px}.detail-source{padding:0 0 22px;margin:0 0 22px;border-bottom:1px solid var(--line)}.source-links{display:flex;flex-wrap:wrap;gap:5px 20px}.source-links a{font-size:12px;color:var(--green);display:flex;align-items:center;min-height:35px}.detail-source h3{font-size:13px;margin:19px 0 10px}.detail-source ul{padding-left:17px;margin:0;color:#53604f;font-size:12px;line-height:1.8}.detail-source li+li{margin-top:5px}.detail-art{justify-content:flex-start}.detail-art #detail-preview:has(.reference-preview){max-width:390px}.detail-tags{margin-bottom:18px}.copy-button,.card-bottom .copy-button,.save-button,.icon-button{min-height:44px}.save-button{width:38px;height:38px;min-height:38px}.card-source:focus-visible{outline-offset:0}
@media(max-width:760px){.card-source{font-size:10px;min-height:32px}.card-bottom{margin-top:1px}.card h2{font-size:12px}.detail-source li{font-size:13px}.source-links a{min-height:44px}.save-button{width:38px;height:38px}.detail-art #detail-preview:has(.reference-preview){max-width:360px}}

.adaptation-note{font-size:12px;line-height:1.7;color:#53604f;margin:14px 0 0}

.card-suitability{font-size:12px;line-height:1.65;color:#53604f;margin:2px 0 9px;overflow-wrap:anywhere}.card-suitability>span{font-weight:600;color:var(--green)}.detail-suitability{border-left:2px solid #a5c7a7;padding:1px 0 1px 14px;margin:18px 0 22px}.detail-suitability h3{font-size:13px;margin:0 0 7px}.detail-suitability p{font-size:12px;line-height:1.75;color:#657061;margin:5px 0}.detail-suitability .suitability-projects{color:var(--green);font-size:13px;font-weight:550}@media(max-width:760px){.card-suitability{font-size:11px;margin-bottom:7px}}

/* Design review: shared control sizes and readable gallery metadata. */
:root{--target:44px}
button,a{touch-action:manipulation}.icon-button,.save-button{width:var(--target);height:var(--target);min-height:var(--target);flex-shrink:0;align-items:center;justify-content:center}.text-button,.copy-button,.card-bottom .copy-button{min-height:var(--target)}
.icon-button,.save-button{min-width:var(--target)}
.card h2{font-size:15px;line-height:1.55;overflow-wrap:anywhere}
.card-title-row{align-items:flex-start}
.card-source{font-size:12px;min-height:44px}
.card-suitability{font-size:13px;line-height:1.7;margin:0 0 12px}
.card-bottom{flex-wrap:wrap;gap:8px}
.copy-button{font-size:13px;padding:8px 10px}
.card-tags span,.card-type{font-size:12px}
.reference-preview:not([data-loaded=true]):not(.image-unavailable):before{content:"載入參考圖…";position:absolute;inset:0;display:grid;place-items:center;background:#eef0eb;color:var(--muted);font-size:13px}
.reference-preview img{position:relative}
.reference-preview.image-unavailable:after{display:grid;place-items:center;padding:20px;line-height:1.7}
#detail{overflow:hidden}
#detail[open]{display:flex;flex-direction:column}
.detail-toolbar{flex-shrink:0;position:static;min-height:58px}
.detail-scroll{overflow:auto;min-height:0;overscroll-behavior:contain;scroll-padding:20px}
.detail-actions{display:flex;justify-content:flex-end;align-items:center;gap:16px;padding:12px 24px max(12px,env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--paper);flex-shrink:0}
.detail-actions .text-button{white-space:nowrap;min-width:88px;font-size:14px;padding:8px}
.detail-actions .primary-button{min-width:220px}
.detail-content>p,.detail-suitability p,.detail-source ul{font-size:14px}
.detail-suitability{border-left:1px solid #a5c7a7}
.detail-suitability h3,.detail-suitability .suitability-projects,.source-links a{font-size:14px}
.source-links{gap:8px 20px}
.source-links a{min-height:44px;overflow-wrap:anywhere;max-width:100%}
.detail-content textarea{font-size:16px;line-height:1.75;margin-top:14px}
.detail-content h2{overflow-wrap:anywhere}
.toast{bottom:max(24px,env(safe-area-inset-bottom));font-size:14px}
#detail>.toast{bottom:86px}
@media(max-width:760px){
  .card h2{font-size:14px}
  .card-source{font-size:12px}
  .card-suitability{font-size:12px;margin-bottom:10px}
  .copy-button{font-size:12px}
  .detail-content{padding:24px 20px}
  .detail-actions{gap:12px;padding-left:16px;padding-right:16px}
  .detail-actions .primary-button{min-width:0;flex:1;padding:11px 12px;font-size:14px}
  .detail-actions .text-button{font-size:13px;min-width:80px}
  .detail-source li{font-size:14px}
}
@media(max-width:360px){
  .card h2{font-size:13px}
  .detail-actions{gap:8px;padding-left:12px;padding-right:12px}
}

/* Cards are the only visible landing content. */
main{padding-top:24px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:760px){main{padding-top:16px}}